diff --git a/.eleventyignore b/.eleventyignore
new file mode 100644
index 0000000000..752acaedf1
--- /dev/null
+++ b/.eleventyignore
@@ -0,0 +1,25 @@
+*.md
+11ty/
+acknowledgements.html
+acknowledgements/
+conformance-challenges/
+guidelines/
+lib/
+requirements/
+script/
+wcag20/
+# working-examples is directly copied; it should not be processed as templates
+working-examples/
+xslt/
+
+# These files under understanding don't end up in output in the old build
+understanding/*/accessibility-support-documenting.html
+understanding/*/identify-changes.html
+understanding/*/interruptions-minimum.html
+understanding/*/seizures.html
+
+# Ignore templates used for creating new documents
+**/*-template.html
+
+# HTML files under img will be passthrough-copied
+**/img/*
diff --git a/.github/workflows/11ty-publish.yaml b/.github/workflows/11ty-publish.yaml
new file mode 100644
index 0000000000..adbb274be0
--- /dev/null
+++ b/.github/workflows/11ty-publish.yaml
@@ -0,0 +1,45 @@
+name: CI
+
+# Reference documentation: https://docs.github.com/en/actions/reference
+
+# See https://docs.github.com/en/actions/reference/workflow-syntax-for-github-actions#onpushpull_requestbranchestags
+on:
+  push:
+    branches: [main]
+
+jobs:
+  main:
+    name: deploy (11ty)
+    runs-on: ubuntu-20.04
+    steps:
+      - name: Checkout the repository
+        uses: actions/checkout@v4
+      - name: Checkout gh-pages
+        uses: actions/checkout@v4
+        with:
+          ref: gh-pages
+          path: _site
+          token: ${{ secrets.W3CGRUNTBOT_TOKEN }}
+      - name: Install Node.js and dependencies
+        uses: actions/setup-node@v4
+        with:
+          cache: npm
+          node-version-file: '.nvmrc'
+      - name: Build
+        env:
+          WCAG_MODE: editors
+        run: |
+          npm i
+          npm run build
+          cp guidelines/guidelines.css guidelines/relative-luminance.html _site/guidelines/22
+          curl https://labs.w3.org/spec-generator/?type=respec"&"url=https://raw.githack.com/$GITHUB_REPOSITORY/main/guidelines/index.html -o _site/guidelines/22/index.html -f  --retry 3
+          curl https://labs.w3.org/spec-generator/?type=respec"&"url=https://raw.githack.com/$GITHUB_REPOSITORY/main/requirements/22/index.html -o _site/requirements/22/index.html -f  --retry 3
+          curl https://labs.w3.org/spec-generator/?type=respec"&"url=https://raw.githack.com/$GITHUB_REPOSITORY/main/conformance-challenges/index.html -o _site/conformance-challenges/index.html -f  --retry 3
+      - name: Push
+        working-directory: _site
+        run: |
+          git config user.email 87540780+w3cgruntbot@users.noreply.github.com
+          git config user.name w3cgruntbot
+          git add -A .
+          git commit -m ":robot: Deploy to GitHub Pages: $GITHUB_SHA from branch $GITHUB_REF"
+          git push origin gh-pages
diff --git a/.gitignore b/.gitignore
index c23c97841c..598250a1d5 100644
--- a/.gitignore
+++ b/.gitignore
@@ -220,3 +220,28 @@ pip-log.txt
 #############
 
 build.properties
+
+#######
+## Node
+#######
+
+node_modules/
+
+#############
+## Output
+#############
+
+/output/
+/output.html
+/techniques/toc.html
+/techniques/techniques.xml
+/techniques/technique-associations.xml
+/techniques/index-flat.html
+/techniques/about-flat.html
+/understanding/toc.html
+/understanding/index-flat.html
+/understanding/about-flat.html
+/guidelines/wcag.xml
+/guidelines/versions.xml
+/guidelines/index-flat.html
+/_site/
diff --git a/.nvmrc b/.nvmrc
new file mode 100644
index 0000000000..209e3ef4b6
--- /dev/null
+++ b/.nvmrc
@@ -0,0 +1 @@
+20
diff --git a/.prettierignore b/.prettierignore
new file mode 100644
index 0000000000..2c49d868d2
--- /dev/null
+++ b/.prettierignore
@@ -0,0 +1,3 @@
+*.*
+!*.ts
+!*.11tydata.js
diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 0000000000..12c91d0119
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,4 @@
+{
+  "printWidth": 100,
+  "trailingComma": "es5"
+}
diff --git a/.travis.yml b/.travis.yml
deleted file mode 100644
index 79c0284299..0000000000
--- a/.travis.yml
+++ /dev/null
@@ -1,28 +0,0 @@
-language: java
-env:
-  global:
-    - GH_REF: github.com/w3c/wcag.git
-    
-git:
-  depth: 3
-  
-before_install:
-  - tar -xzvf lib/apache-ant-1.10.6-bin.tar.gz
-  - export PATH=`pwd`/apache-ant-1.10.6/bin:$PATH
-
-script:
-  - mkdir output
-  - git clone --depth=1 --branch=gh-pages https://github.com/w3c/wcag.git output
-  - curl https://labs.w3.org/spec-generator/?type=respec"&"url=https://raw.githack.com/w3c/wcag/master/guidelines/index.html -o output/guidelines/22/index.html -f  --retry 3
-  - curl https://labs.w3.org/spec-generator/?type=respec"&"url=https://raw.githack.com/w3c/wcag/master/requirements/22/index.html -o output/requirements/22/index.html -f  --retry 3
-  - curl https://labs.w3.org/spec-generator/?type=respec"&"url=https://raw.githack.com/w3c/wcag/master/conformance-challenges/index.html -o output/conformance-challenges/index.html -f  --retry 3
-  - ant deploy
-
-deploy:
-  provider: pages
-  skip-cleanup: true
-  github-token: $GITHUB_TOKEN
-  keep-history: true
-  local-dir: output
-  on:
-    branch: master
diff --git a/11ty/CustomLiquid.ts b/11ty/CustomLiquid.ts
new file mode 100644
index 0000000000..9afe6829a3
--- /dev/null
+++ b/11ty/CustomLiquid.ts
@@ -0,0 +1,582 @@
+import type { Cheerio, Element } from "cheerio";
+import { Liquid, type Template } from "liquidjs";
+import type { RenderOptions } from "liquidjs/dist/liquid-options";
+import compact from "lodash-es/compact";
+import uniq from "lodash-es/uniq";
+
+import { basename } from "path";
+
+import type { GlobalData } from "eleventy.config";
+
+import { flattenDom, load } from "./cheerio";
+import { generateId } from "./common";
+import { getTermsMap } from "./guidelines";
+import { resolveTechniqueIdFromHref, understandingToTechniqueLinkSelector } from "./techniques";
+import { techniqueToUnderstandingLinkSelector } from "./understanding";
+
+const titleSuffix = " | WAI | W3C";
+
+/** Matches index and about pages, traditionally processed differently than individual pages */
+const indexPattern = /(techniques|understanding)\/(index|about)\.html$/;
+const techniquesPattern = /\btechniques\//;
+const understandingPattern = /\bunderstanding\//;
+
+const termsMap = await getTermsMap();
+const termLinkSelector = "a:not([href])";
+
+/** Generates {% include "foo.html" %} directives from 1 or more basenames */
+const generateIncludes = (...basenames: string[]) =>
+  `\n${basenames.map((basename) => `{% include "${basename}.html" %}`).join("\n")}\n`;
+
+/**
+ * Determines whether a given string is actually HTML,
+ * not e.g. a data value Eleventy sent to the templating engine.
+ */
+const isHtmlFileContent = (html: string) => !html.startsWith("(((11ty") && !html.endsWith(".html");
+
+/**
+ * Performs common cleanup of in-page headings, and by extension, table of contents links,
+ * for final output.
+ */
+const normalizeHeading = (label: string) =>
+  label
+    .trim()
+    .replace(/In brief/, "In Brief")
+    .replace(/^(\S+) (of|for) .*$/, "$1")
+    .replace(/^Techniques and Failures .*$/, "Techniques")
+    .replace(/^Specific Benefits .*$/, "Benefits")
+    .replace(/^.* Examples$/, "Examples")
+    .replace(/^(Related )?Resources$/i, "Related Resources");
+
+/**
+ * Performs additional common cleanup for table of contents links for final output.
+ * This is expected to piggyback off of normalizeHeading, which should be called on
+ * headings prior to processing the table of contents from them.
+ */
+const normalizeTocLabel = (label: string) =>
+  label.replace(/ for this Guideline$/, "").replace(/ \(SC\)$/, "");
+
+/**
+ * Replaces a link with a technique URL with a Liquid tag which will
+ * expand to a link with the full technique ID and title.
+ * @param $el a $()-wrapped link element
+ */
+function expandTechniqueLink($el: Cheerio<Element>) {
+  const href = $el.attr("href");
+  if (!href) throw new Error("expandTechniqueLink: non-link element encountered");
+  const id = resolveTechniqueIdFromHref(href);
+  // id will be empty string for links to index, which we don't need to modify
+  if (id) $el.replaceWith(`{{ "${id}" | linkTechniques }}`);
+}
+
+const stripHtmlComments = (html: string) => html.replace(/<!--[\s\S]*?-->/g, "");
+
+// Dev note: Eleventy doesn't expose typings for its template engines for us to neatly extend.
+// Fortunately, it passes both the content string and the file path through to Liquid#parse:
+// https://github.com/11ty/eleventy/blob/9c3a7619/src/Engines/Liquid.js#L253
+
+/**
+ * Liquid class extension that adds support for parts of the existing build process:
+ * - flattening data-include directives prior to parsing Liquid tags
+ *   (permitting Liquid even inside data-included files)
+ * - inserting header/footer content within the body of pages
+ * - generating/expanding sections with auto-generated content
+ */
+export class CustomLiquid extends Liquid {
+  public parse(html: string, filepath?: string) {
+    // Filter out Liquid calls for computed data and includes themselves
+    if (filepath && !filepath.includes("_includes/") && isHtmlFileContent(html)) {
+      const isIndex = indexPattern.test(filepath);
+      const isTechniques = techniquesPattern.test(filepath);
+      const isUnderstanding = understandingPattern.test(filepath);
+      
+      if (!isTechniques && !isUnderstanding) return super.parse(html);
+
+      const $ = flattenDom(html, filepath);
+
+      // Clean out elements to be removed
+      // (e.g. editors.css & sources.css, and leftover template paragraphs)
+      // NOTE: some paragraphs with the "instructions" class actually have custom content,
+      // but for now this remains consistent with the XSLT process by stripping all of them.
+      $(".remove, p.instructions, section#meta, section.meta").remove();
+
+      const prependedIncludes = ["header"];
+      const appendedIncludes = ["wai-site-footer", "site-footer"];
+
+      if (isUnderstanding)
+        prependedIncludes.push(
+          isIndex ? "understanding/navigation-index" : "understanding/navigation"
+        );
+
+      if (isIndex) {
+        if (isTechniques) $("section#changelog li a").each((_, el) => expandTechniqueLink($(el)));
+      } else {
+        $("head").append(generateIncludes("head"));
+        appendedIncludes.push("waiscript");
+
+        // Remove resources section if it only has a placeholder item
+        const $resourcesOnlyItem = $("section#resources li:only-child");
+        if (
+          $resourcesOnlyItem.length &&
+          ($resourcesOnlyItem.html() === "Resource" || $resourcesOnlyItem.html() === "Link")
+        )
+          $("section#resources").remove();
+
+        // Fix incorrect level-2 and first-child level-3 headings
+        // (avoid changing h3s that are appropriate but aren't nested within a subsection)
+        $("body > section section h2").each((_, el) => {
+          el.tagName = "h3";
+        });
+        $("body > section > h3:first-child").each((_, el) => {
+          el.tagName = "h2";
+        });
+
+        if (isTechniques) {
+          // Expand related technique links to include full title
+          // (the XSLT process didn't handle this in this particular context)
+          const siblingCode = basename(filepath).replace(/^([A-Z]+).*$/, "$1");
+          $("section#related li")
+            .find(`a[href^='../'], a[href^=${siblingCode}]`)
+            .each((_, el) => expandTechniqueLink($(el)));
+
+          // XSLT orders related and tests last, but they are not last in source files
+          $("body")
+            .append("\n", $(`body > section#related`))
+            .append("\n", $(`body > section#tests`));
+
+          $("h1")
+            .after(generateIncludes("techniques/about"))
+            .replaceWith(generateIncludes("techniques/h1"));
+
+          const sectionCounts: Record<string, number> = {};
+          let hasDuplicates = false;
+          $("body > section[id]").each((_, el) => {
+            const id = el.attribs.id.toLowerCase();
+            // Fix non-lowercase top-level section IDs (e.g. H99)
+            el.attribs.id = id;
+            // Track duplicate sections, to be processed next
+            if (id in sectionCounts) {
+              hasDuplicates = true;
+              sectionCounts[id]++;
+            } else {
+              sectionCounts[id] = 1;
+            }
+          });
+
+          // Avoid loop altogether in majority of (correct) cases
+          if (hasDuplicates) {
+            for (const [id, count] of Object.entries(sectionCounts)) {
+              if (count === 1) continue;
+              console.warn(
+                `${filepath}: Merging duplicate ${id} sections; please fix this in the source file.`
+              );
+              const $sections = $(`section[id='${id}']`);
+              const $first = $sections.first();
+              $sections.each((i, el) => {
+                if (i === 0) return;
+                const $el = $(el);
+                $el.find("> h2:first-child").remove();
+                $first.append($el.contents());
+                $el.remove();
+              });
+            }
+          }
+
+          $("section#resources h2").after(generateIncludes("techniques/intro/resources"));
+          $("section#examples section.example").each((i, el) => {
+            const $el = $(el);
+            const exampleText = `Example ${i + 1}`;
+            // Check for multiple h3 under one example, which should be h4 (e.g. SCR33)
+            $el.find("h3:not(:only-of-type)").each((_, el) => {
+              el.tagName = "h4";
+            });
+
+            const $h3 = $el.find("h3");
+            if ($h3.length) {
+              const h3Text = $h3.text(); // Used for comparisons below
+              // Some examples really have an empty h3...
+              if (!h3Text) $h3.text(exampleText);
+              // Only prepend "Example N: " if it won't be redundant (e.g. C31, F83)
+              else if (!/example \d+$/i.test(h3Text) && !/^example \d+/i.test(h3Text))
+                $h3.prepend(`${exampleText}: `);
+            } else {
+              $el.prepend(`<h3>${exampleText}</h3>`);
+            }
+          });
+        } else if (isUnderstanding) {
+          // Add numbers to figcaptions
+          $("figcaption").each((i, el) => {
+            const $el = $(el);
+            if (!$el.find("p").length) $el.wrapInner("<p></p>");
+            $el.prepend(`Figure ${i + 1}`);
+          });
+
+          // Remove spurious copy-pasted content in 2.5.3 that doesn't belong there
+          if ($("section#benefits").length > 1) $("section#benefits").first().remove();
+          // Some pages nest Benefits inside Intent; XSLT always pulls it back out
+          $("section#intent section#benefits")
+            .insertAfter("section#intent")
+            .find("h3:first-child")
+            .each((_, el) => {
+              el.tagName = "h2";
+            });
+
+          // 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")
+            );
+          }
+          // success-criteria section should be auto-generated;
+          // remove any handwritten ones (e.g. Input Modalities)
+          const $successCriteria = $("section#success-criteria");
+          if ($successCriteria.length) {
+            console.warn(
+              `${filepath}: success-criteria section will be replaced with ` +
+                "generated version; please remove this from the source file."
+            );
+            $successCriteria.remove();
+          }
+          // 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
+          $(understandingToTechniqueLinkSelector).each((_, el) => expandTechniqueLink($(el)));
+
+          // Add key terms by default, to be removed in #parse if there are no terms
+          $("body").append(generateIncludes("understanding/key-terms"));
+        }
+
+        // Remove h2-level sections with no content other than heading
+        $("body > section:not(:has(:not(h2)))").remove();
+
+        $("body")
+          .attr("dir", "ltr") // Already included in index/about pages
+          .append(generateIncludes("test-rules", "back-to-top"))
+          .wrapInner(`<main id="main" class="standalone-resource__main"></main>`)
+          .prepend(generateIncludes("sidebar"))
+          .append(generateIncludes("help-improve"))
+          // index/about pages already include this wrapping; others do not, and need it.
+          // This wraps around table of contents & help improve, but not other includes
+          .wrapInner(`<div class="default-grid with-gap leftcol"></div>`);
+      }
+
+      $("body")
+        .prepend(generateIncludes(...prependedIncludes))
+        .append(generateIncludes(...appendedIncludes));
+
+      return super.parse($.html(), filepath);
+    }
+    return super.parse(html);
+  }
+
+  public async render(templates: Template[], scope: GlobalData, options?: RenderOptions) {
+    // html contains markup after Liquid tags/includes have been processed
+    const html = (await super.render(templates, scope, options)).toString();
+    if (!isHtmlFileContent(html) || !scope) return html;
+
+    const $ = load(html);
+
+    if (indexPattern.test(scope.page.inputPath)) {
+      // Remove empty list items due to obsolete technique link removal
+      if (scope.isTechniques) $("ul.toc-wcag-docs li:empty").remove();
+    } else {
+      const $title = $("title");
+
+      if (scope.isTechniques) {
+        const isObsolete =
+          scope.technique.obsoleteSince && scope.technique.obsoleteSince <= scope.version;
+        if (isObsolete) $("body").addClass("obsolete");
+
+        $title.text(
+          (isObsolete ? "[Obsolete] " : "") +
+            `${scope.technique.id}: ${scope.technique.title}${titleSuffix}`
+        );
+
+        const aboutBoxSelector = "section#technique .box-i";
+
+        // Strip applicability paragraphs with metadata IDs (e.g. H99)
+        $("section#applicability").find("p#id, p#technology, p#type").remove();
+        // Check for custom applicability paragraph before removing the section
+        const customApplicability = $("section#applicability p")
+          .html()
+          ?.trim()
+          .replace(/^th(e|is) (technique|failure)s? (is )?/i, "")
+          .replace(/^general( technique|ly applicable)?(\.|$).*$/i, "all technologies")
+          .replace(/^appropriate to use for /i, "")
+          .replace(/^use this technique on /i, "")
+          // Work around redundant sentences (e.g. F105)
+          .replace(/\.\s+This technique relates to Success Criterion [\d\.]+\d[^\.]+\.$/, "");
+        if (customApplicability) {
+          const appliesPattern = /^(?:appli(?:es|cable)|relates) (to|when(?:ever)?)\s*/i;
+          const rephrasedApplicability = customApplicability.replace(appliesPattern, "");
+
+          // Failure pages have no default applicability paragraph, so append one first
+          if (scope.technique.technology === "failures")
+            $("section#technique .box-i").append("<p></p>");
+
+          const noun = scope.technique.technology === "failures" ? "failure" : "technique";
+          const appliesMatch = appliesPattern.exec(customApplicability);
+          const connector = /^not/.test(customApplicability)
+            ? "is"
+            : `applies ${appliesMatch?.[1] || "to"}`;
+          $("section#technique .box-i p:last-child").html(
+            `This ${noun} ${connector} ` +
+              // Uncapitalize original sentence, except for all-caps abbreviations or titles
+              (/^[A-Z]{2,}/.test(rephrasedApplicability) ||
+              /^([A-Z][a-z]+(\s+|\.?$))+(\/|$)/.test(rephrasedApplicability)
+                ? rephrasedApplicability
+                : rephrasedApplicability[0].toLowerCase() + rephrasedApplicability.slice(1)) +
+              (/(\.|:)$/.test(rephrasedApplicability) ? "" : ".")
+          );
+
+          // Append any relevant subsequent paragraphs or lists from applicability section
+          const $additionalApplicability = $("section#applicability").find(
+            "p:not(:first-of-type), ul, ol"
+          );
+          const additionalApplicabilityText = $additionalApplicability.text();
+          const excludes = [
+            "None listed.", // Template filler
+            "This technique relates to:", // Redundant of auto-generated content
+          ];
+          if (excludes.every((exclude) => !additionalApplicabilityText.includes(exclude)))
+            $additionalApplicability.appendTo(aboutBoxSelector);
+        }
+        $("section#applicability").remove();
+
+        // Remove any effectively-empty techniques/resources sections,
+        // due to template boilerplate or obsolete technique removal
+        $("section#related:not(:has(a))").remove();
+        $("section#resources:not(:has(a, li))").remove();
+
+        // Update understanding links to always use base URL
+        // (mainly to avoid any case-sensitivity issues)
+        $(techniqueToUnderstandingLinkSelector).each((_, el) => {
+          el.attribs.href = el.attribs.href.replace(/^.*\//, scope.understandingUrl);
+        });
+      } else if (scope.isUnderstanding) {
+        if (scope.guideline) {
+          const type = scope.guideline.type === "SC" ? "Success Criterion" : scope.guideline.type;
+          $title.text(
+            `Understanding ${type} ${scope.guideline.num}: ${scope.guideline.name}${titleSuffix}`
+          );
+        } else {
+          $title.text(
+            $title.text().replace(/WCAG 2( |$)/, `WCAG ${scope.versionDecimal}$1`) + titleSuffix
+          );
+        }
+
+        // Remove Techniques section from obsolete SCs (e.g. Parsing in 2.2)
+        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
+      const $termLinks = $(termLinkSelector);
+      const extractTermName = ($el: Cheerio<Element>) => {
+        const name = $el
+          .text()
+          .toLowerCase()
+          .trim()
+          .replace(/\s*\n+\s*/, " ");
+        const term = termsMap[name];
+        if (!term) {
+          console.warn(`${scope.page.inputPath}: Term not found: ${name}`);
+          return;
+        }
+        // Return standardized name for Key Terms definition lists
+        return term.name;
+      };
+
+      if (scope.isTechniques) {
+        $termLinks.each((_, el) => {
+          const $el = $(el);
+          const termName = extractTermName($el);
+          $el
+            .attr("href", `${scope.guidelinesUrl}#${termName ? termsMap[termName].trId : ""}`)
+            .attr("target", "terms");
+        });
+      } else if (scope.isUnderstanding) {
+        const $termsList = $("section#key-terms dl");
+        const extractTermNames = ($links: Cheerio<Element>) =>
+          compact(uniq($links.toArray().map((el) => extractTermName($(el)))));
+
+        if ($termLinks.length) {
+          let termNames = extractTermNames($termLinks);
+          // This is one loop but effectively multiple passes,
+          // since terms may reference other terms in their own definitions.
+          // Each iteration may append to termNames.
+          for (let i = 0; i < termNames.length; i++) {
+            const term = termsMap[termNames[i]];
+            if (!term) continue; // This will already warn via extractTermNames
+
+            const $definition = load(term.definition);
+            const $definitionTermLinks = $definition(termLinkSelector);
+            if ($definitionTermLinks.length) {
+              termNames = uniq(termNames.concat(extractTermNames($definitionTermLinks)));
+            }
+          }
+
+          // Iterate over sorted names to populate alphabetized Key Terms definition list
+          termNames.sort((a, b) => {
+            if (a.toLowerCase() < b.toLowerCase()) return -1;
+            if (a.toLowerCase() > b.toLowerCase()) return 1;
+            return 0;
+          });
+          for (const name of termNames) {
+            const term = termsMap[name]; // Already verified existence in the earlier loop
+            $termsList.append(
+              `<dt id="${term.id}">${term.name}</dt>` +
+                `<dd><definition>${term.definition}</definition></dd>`
+            );
+          }
+
+          // Iterate over non-href links once more in now-expanded document to add hrefs
+          $(termLinkSelector).each((_, el) => {
+            const name = extractTermName($(el));
+            el.attribs.href = `#${name ? termsMap[name].id : ""}`;
+          });
+        } else {
+          // No terms: remove skeleton that was placed in #parse
+          $("section#key-terms").remove();
+        }
+      }
+
+      // Remove items that end up empty due to invalid technique IDs during #parse
+      // (e.g. removed/deprecated)
+      if (scope.isTechniques) {
+        $("section#related li:empty").remove();
+      } else if (scope.isUnderstanding) {
+        // :empty doesn't work here since there may be whitespace
+        // (can't trim whitespace in the liquid tag since some links have more text after)
+        $(`section#techniques li`)
+          .filter((_, el) => !$(el).text().trim())
+          .remove();
+
+        // Prepend guidelines base URL to non-dfn anchor links in guidelines-derived content
+        // (including both the guideline/SC box at the top and Key Terms at the bottom)
+        $("#guideline, #success-criterion, #key-terms")
+          .find("a[href^='#']:not([href^='#dfn-'])")
+          .each((_, el) => {
+            el.attribs.href = scope.guidelinesUrl + el.attribs.href;
+          });
+      }
+    }
+
+    // Expand note paragraphs after parsing and rendering,
+    // after Guideline/SC content for Understanding pages is rendered.
+    // (This is also needed for techniques/about)
+    $("div.note").each((_, el) => {
+      const $el = $(el);
+      $el.replaceWith(`<div class="note">
+				<p class="note-title marker">Note</p>
+				<div>${$el.html()}</div>
+			</div>`);
+    });
+    // Handle p variant after div (the reverse would double-process)
+    $("p.note").each((_, el) => {
+      const $el = $(el);
+      $el.replaceWith(`<div class="note">
+				<p class="note-title marker">Note</p>
+				<p>${$el.html()}</p>
+			</div>`);
+    });
+    
+    // Add header to example sections in Key Terms (aside) and Conformance (div)
+    $("aside.example, div.example").each((_, el) => {
+      const $el = $(el);
+      $el.prepend(`<p class="example-title marker">Example</p>`);
+    });
+
+    // We don't need to do any more processing for index/about pages other than stripping comments
+    if (indexPattern.test(scope.page.inputPath)) return stripHtmlComments($.html());
+
+    // Handle new-in-version content
+    $("[class^='wcag']").each((_, el) => {
+      // Just like the XSLT process, this naively assumes that version numbers are the same length
+      const classVersion = +el.attribs.class.replace(/^wcag/, "");
+      const buildVersion = +scope.version;
+      if (isNaN(classVersion)) throw new Error(`Invalid wcagXY class found: ${el.attribs.class}`);
+      if (classVersion > buildVersion) {
+        $(el).remove();
+      } else if (classVersion === buildVersion) {
+        $(el).prepend(`<span class="new-version">New in WCAG ${scope.versionDecimal}: </span>`);
+      }
+      // Output as-is if content pertains to a version older than what's being built
+    });
+
+    if (!scope.isUnderstanding || scope.guideline) {
+      // Fix inconsistent heading labels
+      // (another pass is done on top of this for table of contents links below)
+      $("h2").each((_, el) => {
+        const $el = $(el);
+        $el.text(normalizeHeading($el.text()));
+      });
+    }
+
+    // Allow autogenerating missing top-level section IDs in understanding docs,
+    // but don't pick up incorrectly-nested sections in some techniques pages (e.g. H91)
+    const sectionSelector = scope.isUnderstanding ? "section" : "section[id]:not(.obsolete)";
+    const sectionH2Selector = "h2:first-child";
+    const $h2Sections = $(`${sectionSelector}:has(${sectionH2Selector})`);
+    if ($h2Sections.length) {
+      // Generate table of contents after parsing and rendering,
+      // when we have sections and sidebar skeleton already reordered
+      const $tocList = $(".sidebar nav ul");
+      $h2Sections.each((_, el) => {
+        if (!el.attribs.id) el.attribs.id = generateId($(el).find(sectionH2Selector).text());
+        $("<a></a>")
+          .attr("href", `#${el.attribs.id}`)
+          .text(normalizeTocLabel($(el).find(sectionH2Selector).text()))
+          .appendTo($tocList)
+          .wrap("<li></li>");
+        $tocList.append("\n");
+      });
+    } else {
+      // Remove ToC sidebar that was added in #parse if there's nothing to list in it
+      $(".sidebar").remove();
+    }
+
+    // Autogenerate remaining IDs after constructing table of contents.
+    // NOTE: This may overwrite some IDs set in HTML (for techniques examples),
+    // and may result in duplicates; this is consistent with the XSLT process.
+    const sectionHeadingSelector = ["h3", "h4", "h5"]
+      .map((tag) => `> ${tag}:first-child`)
+      .join(", ");
+    const autoIdSectionSelectors = ["section:not([id])"];
+    if (scope.isTechniques) autoIdSectionSelectors.push("section.example");
+    $(autoIdSectionSelectors.join(", "))
+      .filter(`:has(${sectionHeadingSelector})`)
+      .each((_, el) => {
+        el.attribs.id = generateId($(el).find(sectionHeadingSelector).text());
+      });
+
+    return stripHtmlComments($.html());
+  }
+}
diff --git a/11ty/README.md b/11ty/README.md
new file mode 100644
index 0000000000..168db395e5
--- /dev/null
+++ b/11ty/README.md
@@ -0,0 +1,91 @@
+# Eleventy Infrastructure for WCAG Techniques and Understanding
+
+This subdirectory contains ES Modules re-implementing pieces of the
+XSLT-based build process using Eleventy.
+
+## Usage
+
+Make sure you have Node.js installed. This has primarily been tested with v20,
+the current LTS at time of writing.
+
+If you use [fnm](https://github.com/Schniz/fnm) or [nvm](https://github.com/nvm-sh/nvm) to manage multiple Node.js versions,
+you can switch to the recommended version by typing `fnm use` or `nvm use`
+(with no additional arguments) while in the repository directory.
+
+Otherwise, you can download an installer from [nodejs.org](https://nodejs.org/).
+
+First, run `npm i` in the root directory of the repository to install dependencies.
+
+Common tasks:
+
+- `npm run build` runs a one-time build
+- `npm start` runs a local server with hot-reloading to preview changes as you make them:
+  - http://localhost:8080/techniques
+  - http://localhost:8080/understanding
+
+Maintenance tasks (for working with Eleventy config and supporting files under this subdirectory):
+
+- `npm run check` checks for TypeScript errors
+- `npm run fmt` formats all TypeScript files
+
+## Environment Variables
+
+### `WCAG_CVSDIR`
+
+**Usage context:** `publish-w3c` script only
+
+Indicates top-level path of W3C CVS checkout, for WAI site updates (via `publish-w3c` script).
+
+**Default:** `../../../w3ccvs` (same as in Ant/XSLT build process)
+
+### `WCAG_VERBOSE`
+
+**Usage context:** Local development, debugging
+
+Prints more log messages that are typically noisy and uninteresting,
+but may be useful if you're not seeing what you expect in the output files.
+
+**Default:** Unset (set to any non-empty value to enable)
+
+### `WCAG_VERSION`
+
+**Usage context:** currently this should not be changed, pending future improvements to `21` support
+
+Indicates WCAG version being built, in `XY` format (i.e. no `.`).
+Influences base URLs for links to guidelines, techniques, and understanding pages.
+
+**Default:** `22`
+
+### `WCAG_MODE`
+
+**Usage context:** should not need to be set manually except in specific testing scenarios
+
+Influences base URLs for links to guidelines, techniques, and understanding pages.
+Typically set by specific npm scripts or CI processes.
+
+Note that setting `WCAG_MODE` to any non-empty value (even one not listed below) will also result
+in page footers referencing last modified times based on git, rather than the local filesystem.
+
+Possible values:
+
+- Unset **(default)** - Sets base URLs appropriate for local testing
+- `editors` - Sets base URLs appropriate for `gh-pages` publishing; used by deploy action
+- `publication` - Sets base URLs appropriate for WAI site publishing; used by `publish-w3c` script
+
+### `GITHUB_REPOSITORY`
+
+**Usage context:** Automatically set during GitHub workflows; should not need to be set manually
+
+Influences base URLs for links to guidelines, techniques, and understanding pages,
+when `WCAG_MODE=editors` is also set.
+
+**Default:** `w3c/wcag`
+
+## Other points of interest
+
+- The main configuration can be found in top-level `eleventy.config.ts`
+- Build commands are defined in top-level `package.json` under `scripts`,
+  and can be run via `npm run <name>`
+- If you see files named `*.11tydata.*`, these contribute data to the Eleventy build
+  (see Template and Directory Data files under
+  [Sources of Data](https://www.11ty.dev/docs/data/#sources-of-data))
diff --git a/11ty/cheerio.ts b/11ty/cheerio.ts
new file mode 100644
index 0000000000..f1292be14b
--- /dev/null
+++ b/11ty/cheerio.ts
@@ -0,0 +1,64 @@
+import { load, type CheerioOptions } from "cheerio";
+import { readFileSync } from "fs";
+import { readFile } from "fs/promises";
+import { dirname, resolve } from "path";
+
+export { load } from "cheerio";
+
+/** Convenience function that combines readFile and load. */
+export const loadFromFile = async (
+  inputPath: string,
+  options?: CheerioOptions | null,
+  isDocument?: boolean
+) => load(await readFile(inputPath, "utf8"), options, isDocument);
+
+/**
+ * Retrieves content for a data-include, either from _includes,
+ * or relative to the input file.
+ * Operates synchronously for simplicity of use within Cheerio callbacks.
+ *
+ * @param includePath A data-include attribute value
+ * @param inputPath Path (relative to repo root) to file containing the directive
+ * @returns
+ */
+function readInclude(includePath: string, inputPath: string) {
+  const relativePath = resolve(dirname(inputPath), includePath);
+  if (includePath.startsWith("..")) return readFileSync(relativePath, "utf8");
+
+  try {
+    // Prioritize any match under _includes (e.g. over local toc.html built via XSLT)
+    return readFileSync(resolve("_includes", includePath), "utf8");
+  } catch (error) {
+    return readFileSync(relativePath, "utf8");
+  }
+}
+
+/**
+ * Resolves data-include directives in the given file, a la flatten-document.xslt.
+ * This is a lower-level version for use in Eleventy configuration;
+ * you'd probably rather use flattenDomFromFile in other cases.
+ *
+ * @param content String containing HTML to process
+ * @param inputPath Path (relative to repo root) to file containing the HTML
+ *                  (needed for data-include resolution)
+ * @returns Cheerio instance containing "flattened" DOM
+ */
+export function flattenDom(content: string, inputPath: string) {
+  const $ = load(content);
+
+  $("body [data-include]").each((_, el) => {
+    const replacement = readInclude(el.attribs["data-include"], inputPath);
+    // Replace entire element or children, depending on data-include-replace
+    if (el.attribs["data-include-replace"]) $(el).replaceWith(replacement);
+    else $(el).removeAttr("data-include").html(replacement);
+  });
+
+  return $;
+}
+
+/**
+ * Convenience version of flattenDom that requires only inputPath to be passed.
+ * @see flattenDom
+ */
+export const flattenDomFromFile = async (inputPath: string) =>
+  flattenDom(await readFile(inputPath, "utf8"), inputPath);
diff --git a/11ty/common.ts b/11ty/common.ts
new file mode 100644
index 0000000000..ade5d87f14
--- /dev/null
+++ b/11ty/common.ts
@@ -0,0 +1,30 @@
+/** @fileoverview Common functions used by multiple parts of the build process */
+
+import type { Guideline, Principle, SuccessCriterion } from "./guidelines";
+
+/** Generates an ID for heading permalinks. Equivalent to wcag:generate-id in base.xslt. */
+export function generateId(title: string) {
+  if (title === "Parsing (Obsolete and removed)") return "parsing";
+  return title
+    .replace(/\s+/g, "-")
+    .replace(/[,\():]+/g, "")
+    .toLowerCase();
+}
+
+/** Given a string "xy", returns "x.y" */
+export const resolveDecimalVersion = (version: `${number}`) => version.split("").join(".");
+
+/** Sort function for ordering WCAG principle/guideline/SC numbers ascending */
+export function wcagSort(
+  a: Principle | Guideline | SuccessCriterion,
+  b: Principle | Guideline | SuccessCriterion
+) {
+  const aParts = a.num.split(".").map((n) => +n);
+  const bParts = b.num.split(".").map((n) => +n);
+
+  for (let i = 0; i < 3; i++) {
+    if (aParts[i] > bParts[i] || (aParts[i] && !bParts[i])) return 1;
+    if (aParts[i] < bParts[i] || (bParts[i] && !aParts[i])) return -1;
+  }
+  return 0;
+}
diff --git a/11ty/cp-cvs.ts b/11ty/cp-cvs.ts
new file mode 100644
index 0000000000..3adf39bb7c
--- /dev/null
+++ b/11ty/cp-cvs.ts
@@ -0,0 +1,53 @@
+/** @fileoverview script to copy already-built output to CVS subfolders */
+
+import { glob } from "glob";
+import { mkdirp } from "mkdirp";
+
+import { copyFile, unlink } from "fs/promises";
+import { dirname, join } from "path";
+
+import { assertIsWcagVersion } from "./guidelines";
+
+const outputBase = "_site";
+const cvsBase = process.env.WCAG_CVSDIR || "../../../w3ccvs";
+const wcagVersion = process.env.WCAG_VERSION || "22";
+assertIsWcagVersion(wcagVersion);
+const wcagBase = `${cvsBase}/WWW/WAI/WCAG${wcagVersion}`;
+
+// Map (git) sources to (CVS) destinations, since some don't match case-sensitively
+const dirs = {
+  techniques: "Techniques",
+  understanding: "Understanding",
+  "working-examples": "working-examples",
+};
+
+for (const [srcDir, destDir] of Object.entries(dirs)) {
+  const cleanPaths = await glob(`**`, {
+    cwd: join(wcagBase, destDir),
+    ignore: ["**/CVS/**"],
+    nodir: true,
+  });
+
+  for (const path of cleanPaths) await unlink(join(wcagBase, destDir, path));
+
+  const indexPaths = await glob(`**/index.html`, { cwd: join(outputBase, srcDir) });
+  const nonIndexPaths = await glob(`**`, {
+    cwd: join(outputBase, srcDir),
+    ignore: ["**/index.html"],
+    nodir: true,
+  });
+
+  for (const path of indexPaths) {
+    const srcPath = join(outputBase, srcDir, path);
+    const destPath = join(wcagBase, destDir, path.replace(/index\.html$/, "Overview.html"));
+    await mkdirp(dirname(destPath));
+    await copyFile(srcPath, destPath);
+  }
+
+  for (const path of nonIndexPaths) {
+    const srcPath = join(outputBase, srcDir, path);
+    const destPath = join(wcagBase, destDir, path);
+    await mkdirp(dirname(destPath));
+    await copyFile(srcPath, destPath);
+  }
+}
diff --git a/11ty/guidelines.ts b/11ty/guidelines.ts
new file mode 100644
index 0000000000..08c4ec1c3e
--- /dev/null
+++ b/11ty/guidelines.ts
@@ -0,0 +1,227 @@
+import type { Cheerio, Element } from "cheerio";
+import { glob } from "glob";
+
+import { readFile } from "fs/promises";
+import { basename } from "path";
+
+import { flattenDomFromFile, load } from "./cheerio";
+import { generateId } from "./common";
+
+export type WcagVersion = "20" | "21" | "22";
+export function assertIsWcagVersion(v: string): asserts v is WcagVersion {
+  if (!/^2[012]$/.test(v)) throw new Error(`Unexpected version found: ${v}`);
+}
+
+/**
+ * Interface describing format of entries in guidelines/act-mapping.json
+ */
+interface ActRule {
+  deprecated: boolean;
+  permalink: string;
+  proposed: boolean;
+  successCriteria: string[];
+  title: string;
+  wcagTechniques: string[];
+}
+
+type ActMapping = {
+  "act-rules": ActRule[];
+};
+
+/** Data used for test-rules sections, from act-mapping.json */
+export const actRules = (
+  JSON.parse(await readFile("guidelines/act-mapping.json", "utf8")) as ActMapping
+)["act-rules"];
+
+/**
+ * Returns an object with keys for each existing WCAG 2 version,
+ * each mapping to an array of basenames of HTML files under understanding/<version>
+ * (Functionally equivalent to "guidelines-versions" target in build.xml)
+ */
+export async function getGuidelinesVersions() {
+  const paths = await glob("*/*.html", { cwd: "understanding" });
+  const versions: Record<WcagVersion, string[]> = { "20": [], "21": [], "22": [] };
+
+  for (const path of paths) {
+    const [version, filename] = path.split("/");
+    assertIsWcagVersion(version);
+    versions[version].push(basename(filename, ".html"));
+  }
+
+  for (const version of Object.keys(versions)) {
+    assertIsWcagVersion(version);
+    versions[version].sort();
+  }
+  return versions;
+}
+
+/**
+ * Like getGuidelinesVersions, but mapping each basename to the version it appears in
+ */
+export async function getInvertedGuidelinesVersions() {
+  const versions = await getGuidelinesVersions();
+  const invertedVersions: Record<string, string> = {};
+  for (const [version, basenames] of Object.entries(versions)) {
+    for (const basename of basenames) {
+      invertedVersions[basename] = version;
+    }
+  }
+  return invertedVersions;
+}
+
+export interface DocNode {
+  id: string;
+  name: string;
+  /** Helps distinguish entity type when passed out-of-context; used for navigation */
+  type?: "Principle" | "Guideline" | "SC";
+}
+
+export interface Principle extends DocNode {
+  content: string;
+  num: `${number}`; // typed as string for consistency with guidelines/SC
+  version: "WCAG20";
+  guidelines: Guideline[];
+  type: "Principle";
+}
+
+export interface Guideline extends DocNode {
+  content: string;
+  num: `${Principle["num"]}.${number}`;
+  version: `WCAG${"20" | "21"}`;
+  successCriteria: SuccessCriterion[];
+  type: "Guideline";
+}
+
+export interface SuccessCriterion extends DocNode {
+  content: string;
+  num: `${Guideline["num"]}.${number}`;
+  /** Level may be empty for obsolete criteria */
+  level: "A" | "AA" | "AAA" | "";
+  version: `WCAG${WcagVersion}`;
+  type: "SC";
+}
+
+export function isSuccessCriterion(criterion: any): criterion is SuccessCriterion {
+  return !!(criterion?.type === "SC" && "level" in criterion);
+}
+
+/**
+ * Returns HTML content used for Understanding guideline/SC boxes.
+ * @param $el Cheerio element of the full section from flattened guidelines/index.html
+ */
+const getContentHtml = ($el: Cheerio<Element>) => {
+  // Load HTML into a new instance, remove elements we don't want, then return the remainder
+  const $ = load($el.html()!, null, false);
+  $("h1, h2, h3, h4, h5, h6, section, .change, .conformance-level").remove();
+  return $.html();
+};
+
+/**
+ * Resolves information from guidelines/index.html;
+ * comparable to the principles section of wcag.xml from the guidelines-xml Ant task.
+ */
+export async function getPrinciples() {
+  const versions = await getInvertedGuidelinesVersions();
+  const $ = await flattenDomFromFile("guidelines/index.html");
+
+  const principles: Principle[] = [];
+  $(".principle").each((i, el) => {
+    const guidelines: Guideline[] = [];
+    $(".guideline", el).each((j, guidelineEl) => {
+      const successCriteria: SuccessCriterion[] = [];
+      $(".sc", guidelineEl).each((k, scEl) => {
+        const resolvedVersion = versions[scEl.attribs.id];
+        assertIsWcagVersion(resolvedVersion);
+
+        successCriteria.push({
+          content: getContentHtml($(scEl)),
+          id: scEl.attribs.id,
+          name: $("h4", scEl).text().trim(),
+          num: `${i + 1}.${j + 1}.${k + 1}`,
+          level: $("p.conformance-level", scEl).text().trim() as SuccessCriterion["level"],
+          type: "SC",
+          version: `WCAG${resolvedVersion}`,
+        });
+      });
+
+      guidelines.push({
+        content: getContentHtml($(guidelineEl)),
+        id: guidelineEl.attribs.id,
+        name: $("h3", guidelineEl).text().trim(),
+        num: `${i + 1}.${j + 1}`,
+        type: "Guideline",
+        version: guidelineEl.attribs.id === "input-modalities" ? "WCAG21" : "WCAG20",
+        successCriteria,
+      });
+    });
+
+    principles.push({
+      content: getContentHtml($(el)),
+      id: el.attribs.id,
+      name: $("h2", el).text().trim(),
+      num: `${i + 1}`,
+      type: "Principle",
+      version: "WCAG20",
+      guidelines,
+    });
+  });
+
+  return principles;
+}
+
+/**
+ * Returns a flattened object hash, mapping shortcodes to each principle/guideline/SC.
+ */
+export function getFlatGuidelines(principles: Principle[]) {
+  const map: Record<string, Principle | Guideline | SuccessCriterion> = {};
+  for (const principle of principles) {
+    map[principle.id] = principle;
+    for (const guideline of principle.guidelines) {
+      map[guideline.id] = guideline;
+      for (const criterion of guideline.successCriteria) {
+        map[criterion.id] = criterion;
+      }
+    }
+  }
+  return map;
+}
+export type FlatGuidelinesMap = ReturnType<typeof getFlatGuidelines>;
+
+interface Term {
+  definition: string;
+  /** generated id for use in Understanding pages */
+  id: string;
+  name: string;
+  /** id of dfn in TR, which matches original id in terms file */
+  trId: string;
+}
+
+/**
+ * Resolves term definitions from guidelines/index.html organized for lookup by name;
+ * comparable to the term elements in wcag.xml from the guidelines-xml Ant task.
+ */
+export async function getTermsMap() {
+  const $ = await flattenDomFromFile("guidelines/index.html");
+  const terms: Record<string, Term> = {};
+
+  $("dfn").each((_, el) => {
+    const $el = $(el);
+    const term: Term = {
+      // Note: All applicable <dfn>s have explicit id attributes for TR,
+      // but the XSLT process generates id from the element's text which is not always the same
+      id: `dfn-${generateId($el.text())}`,
+      definition: getContentHtml($el.parent().next()),
+      name: $el.text(),
+      trId: el.attribs.id,
+    };
+
+    // Include both original and all-lowercase version to simplify lookups
+    // (since most synonyms are lowercase) while preserving case in name
+    const names = [term.name, term.name.toLowerCase()].concat(
+      (el.attribs["data-lt"] || "").toLowerCase().split("|")
+    );
+    for (const name of names) terms[name] = term;
+  });
+
+  return terms;
+}
diff --git a/11ty/techniques.ts b/11ty/techniques.ts
new file mode 100644
index 0000000000..94820e7784
--- /dev/null
+++ b/11ty/techniques.ts
@@ -0,0 +1,278 @@
+import type { Cheerio } from "cheerio";
+import { glob } from "glob";
+import matter from "gray-matter";
+import capitalize from "lodash-es/capitalize";
+import uniqBy from "lodash-es/uniqBy";
+
+import { readFile } from "fs/promises";
+import { basename } from "path";
+
+import { load, loadFromFile } from "./cheerio";
+import {
+  assertIsWcagVersion,
+  isSuccessCriterion,
+  type FlatGuidelinesMap,
+  type SuccessCriterion,
+  type WcagVersion,
+} from "./guidelines";
+import { wcagSort } from "./common";
+
+/** Maps each technology to its title for index.html */
+export const technologyTitles = {
+  aria: "ARIA Techniques",
+  "client-side-script": "Client-Side Script Techniques",
+  css: "CSS Techniques",
+  failures: "Common Failures",
+  flash: "Flash Techniques", // Deprecated in 2020
+  general: "General Techniques",
+  html: "HTML Techniques",
+  pdf: "PDF Techniques",
+  "server-side-script": "Server-Side Script Techniques",
+  smil: "SMIL Techniques",
+  silverlight: "Silverlight Techniques", // Deprecated in 2020
+  text: "Plain-Text Techniques",
+};
+export type Technology = keyof typeof technologyTitles;
+export const technologies = Object.keys(technologyTitles) as Technology[];
+
+function assertIsTechnology(
+  technology: string
+): asserts technology is keyof typeof technologyTitles {
+  if (!(technology in technologyTitles)) throw new Error(`Invalid technology name: ${technology}`);
+}
+
+const associationTypes = ["sufficient", "advisory", "failure"] as const;
+type AssociationType = (typeof associationTypes)[number];
+
+interface TechniqueAssociation {
+  criterion: SuccessCriterion;
+  type: Capitalize<AssociationType>;
+  /** Indicates this technique must be paired with specific "child" techniques to fulfill SC */
+  hasUsageChildren: boolean;
+  /**
+   * Technique ID of "parent" technique(s) this is paired with to fulfill SC.
+   * This is typically 0 or 1 technique, but may be multiple in rare cases.
+   */
+  usageParentIds: string[];
+  /**
+   * Text description of "parent" association, if it does not reference a specific technique;
+   * only populated if usageParentIds is empty.
+   */
+  usageParentDescription: string;
+  /** Technique IDs this technique must be implemented with to fulfill SC, if any */
+  with: string[];
+}
+
+function assertIsAssociationType(type?: string): asserts type is AssociationType {
+  if (!associationTypes.includes(type as AssociationType))
+    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.
+ */
+export const resolveTechniqueIdFromHref = (href: string) =>
+  href.replace(/^.*\//, "").replace(/\.html$/, "");
+
+/**
+ * Selector that can detect relative and absolute technique links from understanding docs
+ */
+export const understandingToTechniqueLinkSelector = [
+  "[href^='../Techniques/' i]",
+  "[href^='../../techniques/' i]",
+  "[href^='https://www.w3.org/WAI/WCAG' i][href*='/Techniques/' i]",
+]
+  .map((value) => `a${value}`)
+  .join(", ") as "a";
+
+/**
+ * Returns object mapping technique IDs to SCs that reference it;
+ * comparable to technique-associations.xml but in a more ergonomic format.
+ */
+export async function getTechniqueAssociations(guidelines: FlatGuidelinesMap) {
+  const associations: Record<string, TechniqueAssociation[]> = {};
+  const itemSelector = associationTypes.map((type) => `section#${type} li`).join(", ");
+
+  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(associationTypes.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<any>, 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 = {
+          criterion,
+          type: capitalize(associationType) as Capitalize<AssociationType>,
+          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);
+      });
+    });
+  }
+
+  // Remove duplicates (due to similar shape across understanding docs) and sort by SC number
+  for (const [key, list] of Object.entries(associations))
+    associations[key] = uniqBy(list, (v) => JSON.stringify(v)).sort((a, b) =>
+      wcagSort(a.criterion, b.criterion)
+    );
+
+  return associations;
+}
+
+interface TechniqueFrontMatter {
+  /** May be specified via front-matter; message to display RE a technique's obsolescence. */
+  obsoleteMessage?: string;
+  /** May be specified via front-matter to indicate a technique is obsolete as of this version. */
+  obsoleteSince?: WcagVersion;
+}
+
+export interface Technique extends TechniqueFrontMatter {
+  /** Letter(s)-then-number technique code; corresponds to source HTML filename */
+  id: string;
+  /** Technology this technique is filed under */
+  technology: Technology;
+  /** Title derived from each technique page's h1 */
+  title: string;
+  /** Title derived from each technique page's h1, with HTML preserved */
+  titleHtml: string;
+  /**
+   * Like title, but preserving the XSLT process behavior of truncating
+   * text on intermediate lines between the first and last for long headings.
+   * (This was probably accidental, but helps avoid long link text.)
+   */
+  truncatedTitle: string;
+}
+
+/**
+ * Returns an object mapping each technology category to an array of Techniques.
+ * Used to generate index table of contents.
+ * (Functionally equivalent to "techniques-list" target in build.xml)
+ */
+export async function getTechniquesByTechnology() {
+  const paths = await glob("*/*.html", { cwd: "techniques" });
+  const techniques = technologies.reduce(
+    (map, technology) => ({
+      ...map,
+      [technology]: [] as string[],
+    }),
+    {} as Record<Technology, Technique[]>
+  );
+
+  // Check directory data files (we don't have direct access to 11ty's data cascade here)
+  const technologyData: Partial<Record<Technology, any>> = {};
+  for (const technology of technologies) {
+    try {
+      const data = JSON.parse(
+        await readFile(`techniques/${technology}/${technology}.11tydata.json`, "utf8")
+      );
+      if (data) technologyData[technology] = data;
+    } catch {}
+  }
+
+  for (const path of paths) {
+    const [technology, filename] = path.split("/");
+    assertIsTechnology(technology);
+    // Support front-matter within HTML files
+    const { content, data: frontMatterData } = matter(await readFile(`techniques/${path}`, "utf8"));
+    const data = { ...technologyData[technology], ...frontMatterData };
+
+    if (data.obsoleteSince) {
+      data.obsoleteSince = "" + data.obsoleteSince;
+      assertIsWcagVersion(data.obsoleteSince);
+    }
+
+    // Isolate h1 from each file before feeding into Cheerio to save ~300ms total
+    const h1Match = content.match(/<h1[^>]*>([\s\S]+?)<\/h1>/);
+    if (!h1Match || !h1Match[1]) throw new Error(`No h1 found in techniques/${path}`);
+    const $h1 = load(h1Match[1], null, false);
+
+    const title = $h1.text();
+    techniques[technology].push({
+      ...data, // Include front-matter
+      id: basename(filename, ".html"),
+      technology,
+      title,
+      titleHtml: $h1.html(),
+      truncatedTitle: title.replace(/\s*\n[\s\S]*\n\s*/, " … "),
+    });
+  }
+
+  for (const technology of technologies) {
+    techniques[technology].sort((a, b) => {
+      const aId = +a.id.replace(/\D/g, "");
+      const bId = +b.id.replace(/\D/g, "");
+      if (aId < bId) return -1;
+      if (aId > bId) return 1;
+      return 0;
+    });
+  }
+
+  return techniques;
+}
+
+/**
+ * Returns a flattened object hash, mapping each technique ID directly to its data.
+ */
+export const getFlatTechniques = (
+  techniques: Awaited<ReturnType<typeof getTechniquesByTechnology>>
+) =>
+  Object.values(techniques)
+    .flat()
+    .reduce(
+      (map, technique) => {
+        map[technique.id] = technique;
+        return map;
+      },
+      {} as Record<string, Technique>
+    );
diff --git a/11ty/types.ts b/11ty/types.ts
new file mode 100644
index 0000000000..9bdd86c9f1
--- /dev/null
+++ b/11ty/types.ts
@@ -0,0 +1,55 @@
+/** @fileoverview Typings for common Eleventy entities */
+
+interface EleventyPage {
+  date: Date;
+  filePathStem: string;
+  fileSlug: string;
+  inputPath: string;
+  outputFileExtension: string;
+  outputPath: string;
+  rawInput: string;
+  templateSyntax: string;
+  url: string;
+}
+
+interface EleventyDirectories {
+  data: string;
+  includes: string;
+  input: string;
+  layouts?: string;
+  output: string;
+}
+
+type EleventyRunMode = "build" | "serve" | "watch";
+
+interface EleventyMeta {
+  directories: EleventyDirectories;
+  env: {
+    config: string;
+    root: string;
+    runMode: EleventyRunMode;
+    source: "cli" | "script";
+  };
+  generator: string;
+  version: string;
+}
+
+/** Limited 11ty data available when defining filters and shortcodes. */
+export interface EleventyContext {
+  eleventy: EleventyMeta;
+  page: EleventyPage;
+}
+
+/** Eleventy-supplied data available to templates. */
+export interface EleventyData extends EleventyContext {
+  content: string;
+  // Allow access to anything else in data cascade
+  [index: string]: any;
+}
+
+/** Properties available in Eleventy event callbacks (eleventyConfig.on(...)) */
+export interface EleventyEvent {
+  dir: EleventyDirectories;
+  outputMode: "fs" | "json" | "ndjson";
+  runMode: EleventyRunMode;
+}
diff --git a/11ty/understanding.ts b/11ty/understanding.ts
new file mode 100644
index 0000000000..c9b414b63f
--- /dev/null
+++ b/11ty/understanding.ts
@@ -0,0 +1,89 @@
+import { resolveDecimalVersion } from "./common";
+import type { DocNode, Principle, WcagVersion } from "./guidelines";
+
+/**
+ * Selector that can detect relative and absolute understanding links from techniques docs
+ */
+export const techniqueToUnderstandingLinkSelector = [
+  "[href^='../../Understanding/' i]",
+  "[href^='https://www.w3.org/WAI/WCAG' i][href*='/Understanding/' i]",
+]
+  .map((value) => `a${value}`)
+  .join(", ") as "a";
+
+/**
+ * Resolves information for top-level understanding pages;
+ * ported from generate-structure-xml.xslt
+ */
+export async function getUnderstandingDocs(version: WcagVersion): Promise<DocNode[]> {
+  const decimalVersion = resolveDecimalVersion(version);
+  return [
+    {
+      id: "intro",
+      name: `Introduction to Understanding WCAG ${decimalVersion}`,
+    },
+    {
+      id: "understanding-techniques",
+      name: "Understanding Techniques for WCAG Success Criteria",
+    },
+    {
+      id: "understanding-act-rules",
+      name: "Understanding Test Rules for WCAG Success Criteria",
+    },
+    {
+      id: "conformance",
+      name: "Understanding Conformance",
+    },
+    {
+      id: "refer-to-wcag",
+      name: `How to Refer to WCAG ${decimalVersion} from Other Documents`,
+    },
+    {
+      id: "documenting-accessibility-support",
+      name: "Documenting Accessibility Support for Uses of a Web Technology",
+    },
+    {
+      id: "understanding-metadata",
+      name: "Understanding Metadata",
+    },
+  ];
+}
+
+interface NavData {
+  parent?: DocNode;
+  previous?: DocNode;
+  next?: DocNode;
+}
+
+/**
+ * Generates mappings from guideline/SC/understanding doc IDs to next/previous/parent information,
+ * for efficient lookup when rendering navigation banner
+ */
+export function generateUnderstandingNavMap(principles: Principle[], understandingDocs: DocNode[]) {
+  const allGuidelines = Object.values(principles).flatMap(({ guidelines }) => guidelines);
+  const map: Record<string, NavData> = {};
+
+  // Guideline navigation wraps across principles, so iterate over flattened list
+  allGuidelines.forEach((guideline, i) => {
+    map[guideline.id] = {
+      ...(i > 0 && { previous: allGuidelines[i - 1] }),
+      ...(i < allGuidelines.length - 1 && { next: allGuidelines[i + 1] }),
+    };
+    guideline.successCriteria.forEach((criterion, j) => {
+      map[criterion.id] = {
+        parent: guideline,
+        ...(j > 0 && { previous: guideline.successCriteria[j - 1] }),
+        ...(j < guideline.successCriteria.length - 1 && { next: guideline.successCriteria[j + 1] }),
+      };
+    });
+  });
+
+  understandingDocs.forEach((doc, i) => {
+    map[doc.id] = {
+      ...(i > 0 && { previous: understandingDocs[i - 1] }),
+      ...(i < understandingDocs.length - 1 && { next: understandingDocs[i + 1] }),
+    };
+  });
+
+  return map;
+}
diff --git a/README.md b/README.md
index 223a6681f0..6bee8669d4 100644
--- a/README.md
+++ b/README.md
@@ -1,7 +1,7 @@
-WCAG (Web Content Accessibility Guidelines)
+WCAG (Web Content Accessibility Guidelines) - Branch for production of August 2016 review versions
 ===
 
-Please do not submit any new pull requests against this branch - please look in the list of branches for the most current Working Branch and use that one.
+Please use this branch as the target for pull requests until July 10, 2016.
 
 This repository is used to develop content for WCAG 2, as well as associated understanding documents and techniques.
 
@@ -11,18 +11,20 @@ This repository is used to develop content for WCAG 2, as well as associated und
 
 * Avoid use of RFC2119 terms such as "must", "shall", or "may" in non-normative content, to avoid confusion with normative role.
 
+See also: [WCAG 2 Style Guide](https://github.com/w3c/wcag/wiki/WCAG-2-style-guide)
+
 ## File Structure
 
 WCAG 2.0 was maintained in a different file structure than subsequent versions of WCAG. Source files for WCAG 2.0 are in the wcag20 folder and exists primarily for archival purposes. Do not edit content in that folder.
 
-Content for WCAG 2.1 and later is organized accordign to the file structure below. The WCAG repository contains source and auxiliary files for WCAG 2, Understanding WCAG 2, and eventually techniques. It also contains auxiliary files that support automated formatting of the document. To facilitate multi-party editing, each success criterion is in a separate file, consisting of a HTML fragment that can be included into the main guidelines. Key files include:
+Content for WCAG 2.1 and later is organized according to the file structure below. The WCAG repository contains source and auxiliary files for WCAG 2, Understanding WCAG 2, and eventually techniques. It also contains auxiliary files that support automated formatting of the document. To facilitate multi-party editing, each success criterion is in a separate file, consisting of a HTML fragment that can be included into the main guidelines. Key files include:
 
-* guidelines/index.html - the main guidelines file
-* guidelines/sc/<version>/*.html - files for each success criterion
-* guidelines/terms/<version>/*.html - files for each definition
-* understanding/<version>/*.html - understanding files for each success criterion
+* `guidelines/index.html` - the main guidelines file
+* `guidelines/sc/{version}/*.html` - files for each success criterion
+* `guidelines/terms/{version}/*.html` - files for each definition
+* `understanding/{version}/*.html` - understanding files for each success criterion
 
-Where <version> is "20", content came from WCAG 2.0. "21" is used for content introduced in WCAG 2.1, "22" for WCAG 2.2, etc.
+Where `{version}` is "20", content came from WCAG 2.0. "21" is used for content introduced in WCAG 2.1, "22" for WCAG 2.2, etc.
 
 ## Editing Draft Success Criteria
 
@@ -34,7 +36,7 @@ Where <version> is "20", content came from WCAG 2.0. "21" is used for content in
 1. Open the guidelines/index.html file and remove comment marks around the lines that reference the success criterion and terms you have edited..
 1. Follow the [success criteria format](#user-content-success-criteria-format) below to create the SC content.
 1. Save the file and commit the change. NOTE: It is important to also add a suitable 'commit message'. In the comments, reference the issue number from which the proposal was developed starting with a hash, e.g., `#1`. 
-1. When the success criterion is ready for Working Group review, inform the chairs. Once the proposal has been accepted by the Working Group, the editors will merge the working branch into the master branch, which puts it in the editors' draft and eventual Technical Report publication.
+1. When the success criterion is ready for Working Group review, inform the chairs. Once the proposal has been accepted by the Working Group, the editors will merge the working branch into the main branch, which puts it in the editors' draft and eventual Technical Report publication.
 
 ### Success Criteria Format
 
@@ -79,21 +81,23 @@ Values you provide are described below. Refer to [Success Criterion 2.2.1](https
 
 ### Definitions
 
-If you providing term definitions along with your SC, include them in the glossary. Position them in the appropriate alphabetical order with the rest of the terms and use the following format:
+If you are providing term definitions along with your SC, include them in the respective `guidelines/terms/{version}` directory, one-per-file, using the following format:
 
 ```html
-<dt><dfn>{Term}</dfn></dt>
+<dt><dfn id="dfn-{shortname}">{Term}</dfn></dt>
 <dd>{Definition}</dd>
 ```
 
-The ```dfn``` element tells the script that this is a term and causes special styling and linking features. To link to a term, use an `<a>` element without an `href` attribute; if the link text is the same as the term, the link will be correctly generated. For example, if there is a term `<dfn>web page</dfn>` on the page, a link in the form of `<a>web page</a>` will result in a proper link. If the link text has a different form from the canonical term, e.g., "web pages" (note the plural), you can provide a hint on the term definition with the `data-lt` attribute. In this example, modify the term to be `<dfn data-lt="web pages">web page</dfn>`. Multiple alternate names for the term can be separated with pipe characters, with no leading or trailing space, e.g., `<dfn data-lt="web pages|page|pages">web page</dfn>`.
+The ```dfn``` element tells the script that this is a term and causes special styling and linking features. To link to a term, use an `<a>` element without an `href` attribute; if the link text is the same as the term, the link will be correctly generated. For example, if there is a term `<dfn>web page</dfn>` on the page, a link in the form of `<a>web page</a>` will result in a proper link.
+
+If the link text has a different form from the canonical term, e.g., "web pages" (note the plural), you can provide a hint on the term definition with the `data-lt` attribute. In this example, modify the term to be `<dfn data-lt="web pages">web page</dfn>`. Multiple alternate names for the term can be separated with pipe characters, with no leading or trailing space, e.g., `<dfn data-lt="web pages|page|pages">web page</dfn>`.
 
 ## Editing Draft Understanding Content
 
 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
+* `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.
 
@@ -111,8 +115,6 @@ The [technique template](techniques/technique-template.html) shows the structure
 
 Techniques can use a temporary style sheet to facilitate review of drafts. This style sheet is replaced by other style sheets and structure for formal publication. To use this style sheet, add `<link rel="stylesheet" type="text/css" href="../../css/editors.css"/>` to the head of the technique.
 
-The generator used to publish techniques uses XML processing, so techniques must be well-formed XML. Techniques use HTML 5 structure so are actually [HTML Polyglot](https://www.w3.org/TR/html-polyglot/).  
-
 ### Images, Examples, Cross References for Techniques
 
 Techniques can include images. Place the image file in the `img` folder of the relevant technology - meaning all techniques for a technology share a common set of images. Use a relative link to load the image. Most images should be loaded with a `<figure>` element and labeled with a `<figcaption>` positioned at the bottom of the figure. `<figure>` elements must have an `id` attribute. Small inline images may be loaded with a `<img>` element with suitable `alt` text.
@@ -134,10 +136,11 @@ Each new technique should be created in a new branch. Set-up of the branch and f
 ```Shell
 bash create-techniques.sh <technology> <filename> <type> "<title>"
 ```
-\<technology> is the technology directory for the technique
-\<filename> is the temporary filename (without extension) for the technique
-\<type> is "technique" or "failure"
-\<title> is the title of the technique, enclosed in quotes and escaping special characters with \\
+
+* `<technology>` is the technology directory for the technique
+* `<filename>` is the temporary filename (without extension) for the technique
+* `<type>` is "technique" or "failure"
+* `<title>` is the title of the technique, enclosed in quotes and escaping special characters with \\
 
 This automates the following steps:
 
@@ -149,16 +152,36 @@ This automates the following steps:
 Once a technique branch and file is set up, populate the content and request review:
 
 * Populate the template with appropriate content, using other techniques as examples for code formatting choices. Keep the existing structural sections from the template in place.
-* When the technique is ready for review, make a pull request into master.
+* When the technique is ready for review, make a pull request into the main branch.
 * If you wish to reference the draft technique from an Understanding document, use the technique's rawgit URI.
 * After a technique is approved, the chairs will assign it an ID and update links to it in the Undestanding documents. 
 
 ### Formatting Techniques
 
-Techniques in the repository are plain HTML files with minimal formatting. For publication to the editors' draft and W3C location, techniques are formatted by an XSLT-based generator managed by Apache Ant running in Java. Most people do not need to worry about this, but relevant files are the [Ant build file](build.xml) and [XSLT files](xslt).
+Techniques in the repository are plain HTML files with minimal formatting. For publication to the editors' draft and W3C location, techniques are formatted by a build process based on Eleventy for templating and Cheerio for transformations. More details, including instructions for previewing locally, can be found in the [build process README](11ty/README.md).
 
 The generator compiles the techniques together as a suite with formatting and navigation. It enforces certain structures, such as ordering top-level sections described above and standardizing headings. It attempts to process cross reference links to make sure the URIs work upon publication. One of the most substantial roles is to populate the Applicability section with references to the guidelines or success criteria to which the technique relates. The information for this comes from the Understanding documents. Proper use of the technique template is important to enable this functionality, and mal-formed techniques may cause the generator to fail.
 
+### Obsolete Techniques
+
+Obsolete techniques should not be removed from the repository. Instead, they can be marked using YAML front-matter. For example:
+
+```yaml
+---
+obsoleteSince: 22
+obsoleteMessage: |
+  This failure relates to 4.1.1: Parsing, which was removed as of WCAG 2.2.
+---
+```
+
+* `obsoleteSince` indicates the earliest version of WCAG 2 when the technique became obsolete
+  (this may be set to `20` if it should effectively be obsolete for all versions, e.g. for
+  techniques involving deprecated HTML elements)
+* `obsoleteMessage` indicates a message to be displayed within the About this Technique section
+
+In cases where entire technologies are obsolete (e.g. Flash and Silverlight), these properties may also be specified at the technique subdirectory level, e.g. via `techniques/flash/flash.11tydata.json`.
+Note that this case specifically requires JSON format, as this is consumed by both Eleventy and additional code in the build process used to assemble techniques data.
+
 ## Working Examples
 
 Examples in techniques should be brief easy-to-consume code samples of how the technique is used in content. Therefore examples should focus on the specific features the technique describes, and not include related content such as style, script, surrounding web content, etc.
@@ -174,18 +197,9 @@ To create a working example:
 * Create a directory for the example inside the working examples directory, using the semantic name for the example minus the prefix used in the branch name, e.g., `working-examples/alt-attribute/`.
 * If the primary example is HTML, name the file `index.html`. Otherwise, create a suitable file name.
 * Refer to resources shared among multiple examples using relative links, e.g., `../css/example.css`. Place other resources in the same directory as the main example, e.g., `working-examples/alt-attribute/css/alt.css`.
-* Reference working examples from techniques using the rawgit URI to the example in its development branch, e.g., `https://rawgit.com/w3c/wcag/master/working-examples/alt-attribute/`. Editors will update links when examples are approved.
-* When the example is complete and functional, submit a pull request into the master branch.
+* Reference working examples from techniques using the rawgit URI to the example in its development branch, e.g., `https://rawgit.com/w3c/wcag/main/working-examples/alt-attribute/`. Editors will update links when examples are approved.
+* When the example is complete and functional, submit a pull request into the main branch.
 
 ## Translations
 
-WCAG 2.1 is ready for translation. WCAG 2.2 is still under development so should not be translated yet. To translate WCAG 2.1, ensure you are set up to use [GitHub](https://github.com/), then:
-
-* [Fork](https://docs.github.com/en/free-pro-team@latest/github/getting-started-with-github/fork-a-repo) the w3c/wcag repository.
-* Change to the [branch](https://docs.github.com/en/free-pro-team@latest/github/collaborating-with-issues-and-pull-requests/about-branches) "WCAG-2.1".
-* Create a new branch from this branch.
-* Translate all user-oriented content in the "guidelines" folder, including the sub-folders. User-oriented content includes text in elements, and attributes such as "title" and "alt" that provide content to users. **Leave other markup as is.**
-* Load the index.html document in a modern browser and allow the script to compile the content and format it.
-* Activate the "Respec" link in the top right corner, and choose "Export...", then the "HTML" option.
-* Edit the resulting file to translate text that was inserted by the script.
-* Edit the file to meet the requirements of the [W3C Authorized Translations](https://www.w3.org/2005/02/TranslationPolicy) process. 
\ No newline at end of file
+WCAG 2.2 is ready for translation. To translate WCAG 2.2, follow instructions at [How to Translate WCAG 2](https://www.w3.org/WAI/about/translating/wcag/).
diff --git a/_includes/back-to-top.html b/_includes/back-to-top.html
new file mode 100644
index 0000000000..da38ab5fbc
--- /dev/null
+++ b/_includes/back-to-top.html
@@ -0,0 +1,7 @@
+<a class="button button-backtotop" href="#top">
+  <span>
+    <svg focusable="false" aria-hidden="true" class="icon-arrow-up " viewBox="0 0 26 28">
+      <path d="M25.172 15.172c0 0.531-0.219 1.031-0.578 1.406l-1.172 1.172c-0.375 0.375-0.891 0.594-1.422 0.594s-1.047-0.219-1.406-0.594l-4.594-4.578v11c0 1.125-0.938 1.828-2 1.828h-2c-1.062 0-2-0.703-2-1.828v-11l-4.594 4.578c-0.359 0.375-0.875 0.594-1.406 0.594s-1.047-0.219-1.406-0.594l-1.172-1.172c-0.375-0.375-0.594-0.875-0.594-1.406s0.219-1.047 0.594-1.422l10.172-10.172c0.359-0.375 0.875-0.578 1.406-0.578s1.047 0.203 1.422 0.578l10.172 10.172c0.359 0.375 0.578 0.891 0.578 1.422z"></path>
+    </svg> Back to Top
+  </span>
+</a>
diff --git a/_includes/head.html b/_includes/head.html
new file mode 100644
index 0000000000..55e7145ca2
--- /dev/null
+++ b/_includes/head.html
@@ -0,0 +1,8 @@
+{% # common tags inserted into all non-index/about pages %}
+<meta name="viewport" content="width=device-width, initial-scale=1"/>
+<link rel="stylesheet" href="https://w3.org/WAI/assets/css/style.css" />
+{% if isTechniques %}
+  {% include "techniques/head.html" %}
+{% elsif isUnderstanding %}
+  {% include "understanding/head.html" %}
+{% endif %}
diff --git a/_includes/header.html b/_includes/header.html
new file mode 100644
index 0000000000..df1a329f39
--- /dev/null
+++ b/_includes/header.html
@@ -0,0 +1,44 @@
+{% comment %}
+Expected inputs from directory data for techniques and understanding:
+headerUrl and headerLabel (set in both folders)
+isUnderstanding and isTechniques (each set to true in respective folder)
+{% endcomment %}
+<a href="#main" class="button button--skip-link">Skip to content</a>
+<div class="minimal-header-container default-grid">
+  <header class="minimal-header" id="site-header">
+    <div class="minimal-header-name">
+      <a href="{{ headerUrl }}">WCAG {{ versionDecimal }} {{ headerLabel }}</a>
+    </div>
+    {% if isTechniques %}
+      <div class="minimal-header-subtitle">Examples of ways to meet WCAG; not required</div>
+    {% elsif isUnderstanding %}
+      <div class="minimal-header-subtitle">Informative explanations, not required to meet WCAG</div>
+    {% endif %}
+    <a class="minimal-header-link" href="{{ headerUrl }}about">About WCAG {{ headerLabel }}</a>
+    <div class="minimal-header-logo">
+      <a href="http://w3.org/" aria-label="W3C">
+        <svg xmlns="http://www.w3.org/2000/svg" height="2em" viewBox="0 0 91.968 44">
+          <g fill-rule="evenodd" fill="none">
+            <path fill="#015a9c" d="M-.231-.21h92.917v44.659H-.23z" />
+            <g fill-rule="nonzero" fill="#fff">
+              <path
+                d="M21.752 0l7.789 26.78L37.329 0H58.444v2.662l-7.95 13.852c2.792.907 4.905 2.555 6.337 4.944 1.432 2.391 2.149 5.196 2.149 8.419 0 3.985-1.048 7.335-3.143 10.05C53.742 42.642 51.029 44 47.7 44c-2.507 0-4.691-.806-6.552-2.417-1.862-1.611-3.24-3.793-4.136-6.546l4.403-1.846c.646 1.666 1.496 2.979 2.552 3.938 1.056.96 2.3 1.438 3.733 1.438 1.504 0 2.775-.85 3.813-2.552 1.039-1.703 1.558-3.747 1.558-6.14 0-2.643-.556-4.69-1.664-6.138-1.29-1.701-3.314-2.554-6.071-2.554h-2.148v-2.606l7.52-13.147H41.63l-.516.889-11.04 37.678h-.536L21.48 16.73l-8.056 27.268h-.537L0 0h5.64l7.787 26.78 5.264-18.033L16.113 0zM87.958 0c-1.077 0-2.044.388-2.777 1.133-.777.79-1.21 1.81-1.21 2.866s.412 2.034 1.167 2.8C85.905 7.579 86.892 8 87.959 8c1.043 0 2.055-.422 2.843-1.188.755-.733 1.166-1.711 1.166-2.811a3.997 3.997 0 00-1.155-2.811A3.946 3.946 0 0087.958 0zm3.476 4.034a3.32 3.32 0 01-1.01 2.41c-.69.668-1.544 1.023-2.489 1.023a3.405 3.405 0 01-2.42-1.033c-.655-.667-1.022-1.523-1.022-2.433 0-.911.378-1.8 1.055-2.489.633-.645 1.488-.988 2.42-.988.955 0 1.81.356 2.477 1.033.645.643.99 1.51.99 2.477zm-3.366-2.378h-1.71v4.533h.855V4.256h.845l.922 1.933h.955l-1.012-2.066c.655-.134 1.033-.578 1.033-1.223 0-.822-.621-1.244-1.888-1.244zm-.155.555c.8 0 1.165.222 1.165.778 0 .533-.365.722-1.144.722h-.722v-1.5zM82.109 0l.862 5.914-3.05 6.588s-1.172-2.795-3.118-4.342c-1.64-1.303-2.708-1.586-4.378-1.198-2.145.5-4.577 3.394-5.638 6.963-1.27 4.27-1.283 6.336-1.328 8.234-.071 3.042.354 4.841.354 4.841s-1.853-3.868-1.835-9.533c.012-4.043.576-7.71 2.233-11.328 1.459-3.181 3.626-5.09 5.55-5.315 1.99-.232 3.562.85 4.777 2.02 1.276 1.23 2.565 3.918 2.565 3.918zM82.202 31.824s-1.338 2.567-2.171 3.556c-.834.99-2.326 2.732-4.167 3.603-1.842.872-2.808 1.036-4.628.849-1.82-.188-3.51-1.319-4.102-1.79-.592-.472-2.106-1.861-2.962-3.156C63.317 33.59 61.98 31 61.98 31s.745 2.596 1.212 3.698c.269.635 1.094 2.574 2.265 4.262 1.092 1.576 3.214 4.287 6.438 4.899 3.224.613 5.44-.942 5.987-1.319.549-.376 1.704-1.416 2.436-2.256.763-.877 1.486-1.995 1.886-2.666.292-.49.768-1.485.768-1.485z" />
+            </g>
+          </g>
+        </svg>
+      </a>
+      <a href="http://w3.org/WAI/" aria-label="Web Accessibility Initiative">
+        <svg xmlns="http://www.w3.org/2000/svg" height="2em" viewBox="0 0 162.5 45.9">
+          <g fill="none" fill-rule="evenodd">
+            <path d="M0 0h162.5v45.9H0z" fill="#015a9c" />
+            <path d="M1.2 24.5h160" stroke="#eed009" stroke-linecap="square" stroke-width="2" />
+            <g fill="#fff" fill-rule="nonzero">
+              <path
+                d="M15.741 15.5h-1.816L11.14 6.145c-.41-1.394-.65-2.334-.722-2.823-.104.749-.332 1.71-.684 2.881L7.04 15.5H5.223L1.444 1.223H3.32l2.217 8.72c.3 1.14.527 2.272.684 3.399.143-1.068.397-2.237.761-3.506l2.52-8.613h1.855l2.627 8.681c.339 1.127.6 2.272.781 3.438.105-.899.336-2.038.694-3.418l2.207-8.701h1.875zm10.127.195c-1.608 0-2.87-.486-3.784-1.46-.915-.973-1.372-2.312-1.372-4.018 0-1.719.426-3.088 1.279-4.107.853-1.019 2.005-1.528 3.457-1.528 1.348 0 2.422.435 3.223 1.304.8.869 1.2 2.046 1.2 3.53v1.064h-7.343c.033 1.218.342 2.142.928 2.774.586.631 1.416.947 2.49.947a8.46 8.46 0 001.631-.151c.514-.101 1.116-.298 1.807-.591v1.543a8.506 8.506 0 01-1.67.537c-.521.104-1.136.156-1.846.156zm-.44-9.677c-.84 0-1.503.27-1.992.81-.488.54-.778 1.292-.869 2.256h5.46c-.014-1.003-.245-1.764-.694-2.285-.45-.521-1.084-.781-1.904-.781zm12.237-1.416c1.413 0 2.503.486 3.271 1.46.769.973 1.153 2.332 1.153 4.077 0 1.77-.39 3.14-1.172 4.106-.781.967-1.865 1.45-3.252 1.45-.723 0-1.367-.13-1.934-.39a3.384 3.384 0 01-1.386-1.162h-.137a48.165 48.165 0 01-.362 1.357h-1.26V.305h1.759v3.691c0 .736-.033 1.471-.098 2.207h.098c.722-1.068 1.829-1.601 3.32-1.601zm-.293 1.455c-1.08 0-1.856.306-2.324.918-.47.612-.703 1.647-.703 3.105v.078c0 1.465.239 2.512.717 3.14.479.628 1.262.942 2.349.942.963 0 1.681-.353 2.153-1.06.472-.706.708-1.726.708-3.06 0-1.355-.237-2.37-.713-3.048-.475-.677-1.204-1.015-2.187-1.015zM59.286 15.5l-1.719-4.424h-5.664l-1.7 4.424h-1.816l5.577-14.336h1.62L61.152 15.5zM57.03 9.484L55.43 5.158l-.684-2.138c-.195.78-.4 1.494-.615 2.138l-1.621 4.326zm10.137 6.211c-1.543 0-2.744-.473-3.604-1.42-.86-.948-1.289-2.307-1.289-4.078 0-1.797.435-3.182 1.304-4.155.87-.973 2.108-1.46 3.716-1.46.52 0 1.037.054 1.548.161.51.108.932.246 1.264.415l-.537 1.465c-.905-.338-1.676-.508-2.314-.508-1.081 0-1.879.34-2.393 1.02-.514.681-.771 1.695-.771 3.043 0 1.295.257 2.287.771 2.973.514.687 1.276 1.03 2.285 1.03.944 0 1.872-.208 2.783-.624v1.562c-.742.384-1.663.576-2.763.576zm9.6 0c-1.544 0-2.745-.473-3.604-1.42-.86-.948-1.29-2.307-1.29-4.078 0-1.797.435-3.182 1.305-4.155.869-.973 2.107-1.46 3.715-1.46.521 0 1.037.054 1.548.161.511.108.933.246 1.265.415l-.537 1.465c-.905-.338-1.677-.508-2.315-.508-1.08 0-1.878.34-2.392 1.02-.515.681-.772 1.695-.772 3.043 0 1.295.257 2.287.772 2.973.514.687 1.276 1.03 2.285 1.03.944 0 1.872-.208 2.783-.624v1.562c-.742.384-1.663.576-2.764.576zm9.863 0c-1.608 0-2.87-.486-3.784-1.46-.915-.973-1.373-2.312-1.373-4.018 0-1.719.427-3.088 1.28-4.107.853-1.019 2.005-1.528 3.457-1.528 1.347 0 2.422.435 3.222 1.304.801.869 1.202 2.046 1.202 3.53v1.064H83.29c.032 1.218.342 2.142.928 2.774.586.631 1.416.947 2.49.947a8.46 8.46 0 001.63-.151c.515-.101 1.117-.298 1.807-.591v1.543a8.506 8.506 0 01-1.67.537c-.52.104-1.136.156-1.845.156zm-.44-9.677c-.84 0-1.504.27-1.992.81s-.778 1.292-.87 2.256h5.46c-.013-1.003-.244-1.764-.693-2.285-.45-.521-1.084-.781-1.905-.781zm14.14 6.523c0 1.003-.373 1.779-1.122 2.33-.749.55-1.8.824-3.154.824-1.413 0-2.536-.224-3.37-.674V13.42c1.179.573 2.315.86 3.409.86.885 0 1.53-.144 1.933-.43.404-.287.606-.671.606-1.153 0-.423-.194-.781-.581-1.074-.388-.293-1.076-.628-2.066-1.006-1.009-.39-1.719-.724-2.129-1-.41-.277-.711-.588-.903-.933-.192-.345-.288-.765-.288-1.26 0-.88.358-1.572 1.074-2.08.716-.508 1.7-.762 2.95-.762a8.17 8.17 0 013.417.723L99.511 6.7c-1.088-.456-2.068-.683-2.94-.683-.73 0-1.282.115-1.66.346-.378.231-.566.549-.566.952 0 .391.162.715.488.972.325.257 1.084.614 2.275 1.07.892.331 1.551.64 1.978.927.426.287.74.609.942.967.202.358.303.788.303 1.289zm9.58 0c0 1.003-.373 1.779-1.122 2.33-.749.55-1.8.824-3.154.824-1.413 0-2.536-.224-3.37-.674V13.42c1.179.573 2.315.86 3.409.86.885 0 1.53-.144 1.933-.43.404-.287.606-.671.606-1.153 0-.423-.194-.781-.581-1.074-.388-.293-1.076-.628-2.066-1.006-1.009-.39-1.719-.724-2.129-1-.41-.277-.71-.588-.903-.933-.192-.345-.288-.765-.288-1.26 0-.88.358-1.572 1.074-2.08.716-.508 1.7-.762 2.95-.762a8.17 8.17 0 013.417.723l-.595 1.396c-1.088-.456-2.067-.683-2.94-.683-.729 0-1.282.115-1.66.346-.378.231-.566.549-.566.952 0 .391.162.715.488.972.325.257 1.084.614 2.275 1.07.892.331 1.551.64 1.978.927.426.287.74.609.942.967.202.358.303.788.303 1.289zm4.356 2.959h-1.757V4.777h1.757zm-1.894-13.623c0-.39.1-.674.298-.85.198-.175.444-.263.737-.263.273 0 .513.088.718.263.205.176.307.46.307.85 0 .384-.102.667-.307.85a1.047 1.047 0 01-.718.273 1.05 1.05 0 01-.737-.273c-.199-.183-.298-.466-.298-.85zm10.371 2.725c1.413 0 2.503.486 3.271 1.46.769.973 1.153 2.332 1.153 4.077 0 1.77-.39 3.14-1.172 4.106-.781.967-1.865 1.45-3.252 1.45-.723 0-1.367-.13-1.934-.39a3.384 3.384 0 01-1.386-1.162h-.137a48.244 48.244 0 01-.361 1.357h-1.26V.305h1.758v3.691c0 .736-.033 1.471-.098 2.207h.098c.722-1.068 1.83-1.601 3.32-1.601zm-.293 1.455c-1.08 0-1.855.306-2.324.918-.469.612-.703 1.647-.703 3.105v.078c0 1.465.239 2.512.717 3.14.479.628 1.262.942 2.35.942.963 0 1.68-.353 2.152-1.06.472-.706.708-1.726.708-3.06 0-1.355-.237-2.37-.713-3.048-.475-.677-1.204-1.015-2.187-1.015zm9.277 9.443h-1.757V4.777h1.757zm-1.894-13.623c0-.39.1-.674.298-.85.198-.175.444-.263.737-.263.273 0 .513.088.718.263.205.176.307.46.307.85 0 .384-.102.667-.307.85a1.047 1.047 0 01-.718.273 1.05 1.05 0 01-.737-.273c-.199-.183-.298-.466-.298-.85zm7.05 13.623h-1.757V.305h1.758zm5.157 0h-1.758V4.777h1.758zm-1.895-13.623c0-.39.1-.674.298-.85.199-.175.444-.263.737-.263.274 0 .513.088.718.263.205.176.308.46.308.85 0 .384-.103.667-.308.85a1.047 1.047 0 01-.718.273 1.05 1.05 0 01-.737-.273c-.198-.183-.298-.466-.298-.85zm8.877 12.383c.228 0 .495-.023.801-.069.306-.045.537-.097.693-.156v1.348c-.162.071-.415.141-.756.21a5.29 5.29 0 01-1.04.102c-2.097 0-3.145-1.103-3.145-3.31v-6.24h-1.514v-.84l1.534-.703.703-2.286h1.045v2.461h3.095v1.368h-3.095v6.19c0 .62.148 1.095.444 1.427.296.332.708.498 1.235.498zm1.953-9.483h1.885l2.315 6.104c.488 1.328.787 2.301.898 2.92h.078c.059-.241.192-.692.4-1.353.209-.66.385-1.19.528-1.587l2.178-6.084h1.894l-4.619 12.207c-.45 1.185-.983 2.035-1.602 2.55-.618.514-1.383.77-2.294.77-.489 0-.974-.055-1.456-.165v-1.397c.326.078.717.117 1.172.117.56 0 1.035-.154 1.426-.463.39-.31.71-.787.957-1.431l.557-1.426zM7.157 45.5H2.001v-1.035l1.68-.381V32.658l-1.68-.4v-1.035h5.156v1.035l-1.68.4v11.426l1.68.38zm9.824 0v-6.855c0-.873-.193-1.522-.58-1.949-.388-.426-.995-.64-1.822-.64-1.1 0-1.9.305-2.398.914-.498.608-.747 1.6-.747 2.973V45.5H9.677V34.777h1.416l.263 1.465h.098a3.31 3.31 0 011.396-1.225 4.492 4.492 0 011.983-.435c1.315 0 2.292.319 2.93.957.638.638.957 1.63.957 2.979V45.5zm6.817 0H22.04V34.777h1.758zm-1.895-13.623c0-.39.1-.674.298-.85.199-.175.444-.263.737-.263.274 0 .513.088.718.263.205.176.308.46.308.85 0 .384-.103.667-.308.85a1.047 1.047 0 01-.718.273 1.05 1.05 0 01-.737-.273c-.199-.183-.298-.466-.298-.85zM30.78 44.26c.228 0 .495-.023.8-.069.307-.045.538-.097.694-.156v1.348c-.163.071-.415.141-.757.21a5.29 5.29 0 01-1.04.102c-2.096 0-3.144-1.103-3.144-3.31v-6.24h-1.514v-.84l1.533-.703.703-2.286H29.1v2.461h3.096v1.368H29.1v6.19c0 .62.149 1.095.445 1.427.296.332.708.498 1.235.498zm5.39 1.24h-1.757V34.777h1.758zm-1.894-13.623c0-.39.1-.674.298-.85.199-.175.444-.263.737-.263.274 0 .513.088.718.263.205.176.308.46.308.85 0 .384-.103.667-.308.85a1.047 1.047 0 01-.718.273 1.05 1.05 0 01-.737-.273c-.199-.183-.298-.466-.298-.85zM46.19 45.5l-.342-1.523h-.078c-.534.67-1.066 1.124-1.596 1.362-.53.237-1.2.356-2.007.356-1.055 0-1.882-.276-2.48-.83-.6-.553-.9-1.334-.9-2.344 0-2.174 1.716-3.313 5.147-3.417l1.817-.069V38.4c0-.813-.176-1.414-.528-1.801-.351-.388-.914-.581-1.689-.581-.566 0-1.102.084-1.606.253-.505.17-.979.359-1.421.567l-.537-1.318a7.958 7.958 0 011.767-.674 7.642 7.642 0 011.895-.244c1.295 0 2.259.286 2.89.859.632.573.948 1.484.948 2.734V45.5zm-3.623-1.22c.983 0 1.756-.266 2.32-.797.563-.53.844-1.284.844-2.26v-.967l-1.582.068c-1.23.046-2.127.241-2.69.586-.563.345-.845.889-.845 1.631 0 .56.171.99.513 1.29.342.299.822.448 1.44.448zm11.807-.02c.228 0 .495-.023.8-.069.307-.045.538-.097.694-.156v1.348c-.163.071-.415.141-.757.21a5.29 5.29 0 01-1.04.102c-2.096 0-3.144-1.103-3.144-3.31v-6.24h-1.514v-.84l1.533-.703.703-2.286h1.045v2.461h3.096v1.368h-3.096v6.19c0 .62.148 1.095.444 1.427.297.332.708.498 1.236.498zm5.39 1.24h-1.757V34.777h1.757zM57.87 31.877c0-.39.1-.674.298-.85.198-.175.444-.263.737-.263.274 0 .513.088.718.263.205.176.307.46.307.85 0 .384-.102.667-.307.85a1.047 1.047 0 01-.718.273 1.05 1.05 0 01-.737-.273c-.199-.183-.298-.466-.298-.85zM65.526 45.5l-4.062-10.723h1.884l2.276 6.319c.45 1.27.736 2.216.86 2.842h.077a11.495 11.495 0 01.176-.64c.04-.127.28-.861.723-2.202l2.285-6.319h1.875L67.548 45.5zm12.354.195c-1.608 0-2.87-.486-3.784-1.46-.915-.973-1.373-2.312-1.373-4.018 0-1.719.427-3.088 1.28-4.107.853-1.019 2.005-1.528 3.457-1.528 1.347 0 2.422.435 3.222 1.304.801.869 1.202 2.046 1.202 3.53v1.064H74.54c.032 1.218.342 2.142.928 2.774.586.631 1.416.947 2.49.947a8.46 8.46 0 001.63-.151c.515-.101 1.117-.298 1.807-.591v1.543a8.506 8.506 0 01-1.67.537c-.52.104-1.136.156-1.845.156zm-.44-9.677c-.84 0-1.504.27-1.992.81s-.778 1.292-.87 2.256h5.46c-.013-1.003-.244-1.764-.693-2.285-.45-.521-1.084-.781-1.905-.781zM137.741 45.5h-1.816l-2.784-9.355c-.41-1.394-.65-2.334-.722-2.823-.104.749-.332 1.71-.684 2.881L129.04 45.5h-1.817l-3.779-14.277h1.875l2.217 8.72c.3 1.14.527 2.272.684 3.399.143-1.068.397-2.237.761-3.506l2.52-8.613h1.855l2.627 8.681c.339 1.127.6 2.272.781 3.438.105-.899.336-2.038.694-3.418l2.207-8.701h1.875zm14.57 0l-1.718-4.424h-5.664l-1.7 4.424h-1.816l5.576-14.336h1.621l5.567 14.336zm-2.256-6.016l-1.601-4.326-.684-2.138c-.195.78-.4 1.494-.615 2.138l-1.621 4.326zm10.098 6.016h-5.156v-1.035l1.68-.381V32.658l-1.68-.4v-1.035h5.156v1.035l-1.68.4v11.426l1.68.38z" />
+            </g>
+          </g>
+        </svg>
+      </a>
+    </div>
+  </header>
+</div>
diff --git a/_includes/help-improve.html b/_includes/help-improve.html
new file mode 100644
index 0000000000..340acedf69
--- /dev/null
+++ b/_includes/help-improve.html
@@ -0,0 +1,17 @@
+<aside class="box box-icon box-space-above" id="helpimprove" style="grid-column: 2 / 8; grid-row: 3">
+  <header class="box-h  box-h-icon box-h-space-above box-h-icon"> 
+    <svg focusable="false" aria-hidden="true" class="icon-comments" viewBox="0 0 28 28">
+      <path d="M22 12c0 4.422-4.922 8-11 8-0.953 0-1.875-0.094-2.75-0.25-1.297 0.922-2.766 1.594-4.344 2-0.422 0.109-0.875 0.187-1.344 0.25h-0.047c-0.234 0-0.453-0.187-0.5-0.453v0c-0.063-0.297 0.141-0.484 0.313-0.688 0.609-0.688 1.297-1.297 1.828-2.594-2.531-1.469-4.156-3.734-4.156-6.266 0-4.422 4.922-8 11-8s11 3.578 11 8zM28 16c0 2.547-1.625 4.797-4.156 6.266 0.531 1.297 1.219 1.906 1.828 2.594 0.172 0.203 0.375 0.391 0.313 0.688v0c-0.063 0.281-0.297 0.484-0.547 0.453-0.469-0.063-0.922-0.141-1.344-0.25-1.578-0.406-3.047-1.078-4.344-2-0.875 0.156-1.797 0.25-2.75 0.25-2.828 0-5.422-0.781-7.375-2.063 0.453 0.031 0.922 0.063 1.375 0.063 3.359 0 6.531-0.969 8.953-2.719 2.609-1.906 4.047-4.484 4.047-7.281 0-0.812-0.125-1.609-0.359-2.375 2.641 1.453 4.359 3.766 4.359 6.375z"></path>
+    </svg>
+    <h2> Help improve this page </h2>
+  </header>
+  <div class="box-i">
+  <p>Please share your ideas, suggestions, or comments via e-mail to the publicly-archived list <a href="mailto:public-agwg-comments@w3.org?subject=%5BUnderstanding%20and%20Techniques%20Feedback%5D">public-agwg-comments@w3.org</a> or via GitHub</p>
+    <div class="button-group">
+      <a href="mailto:public-agwg-comments@w3.org?subject=%5BUnderstanding%20and%20Techniques%20Feedback%5D"
+        class="button"><span>E-mail</span></a>
+      <a href="https://github.com/w3c/wcag/issues/" class="button"><span>Fork &amp; Edit on GitHub</span></a>
+      <a href="https://github.com/w3c/wcag/issues/new" class="button"><span>New GitHub Issue</span></a>
+    </div>
+  </div>
+</aside>
diff --git a/_includes/sidebar.html b/_includes/sidebar.html
new file mode 100644
index 0000000000..529933f9a0
--- /dev/null
+++ b/_includes/sidebar.html
@@ -0,0 +1,8 @@
+<aside class="box nav-hack sidebar standalone-resource__sidebar">
+    <header class="box-h">Page Contents</header>
+    <div class="box-i">
+      <nav aria-label="page contents" class="navtoc">
+        <ul>{% # Table of Contents is added after Liquid render, in CustomLiquid.ts %}</ul>
+      </nav>
+    </div>
+</aside>
diff --git a/_includes/site-footer.html b/_includes/site-footer.html
new file mode 100644
index 0000000000..4d142dad4f
--- /dev/null
+++ b/_includes/site-footer.html
@@ -0,0 +1,29 @@
+<footer class="site-footer grid-4q" aria-label="Site">
+  <div class="q1-start q3-end about">
+    <div>
+      <p><a class="largelink" href="https://www.w3.org/WAI/" dir="auto" translate="no" lang="en">W3C Web Accessibility Initiative (WAI)</a></p>
+      <p>Strategies, standards, and supporting resources to make the Web accessible to people with disabilities.</p>
+    </div>
+    <div class="social" dir="auto" translate="no" lang="en">
+      <ul>
+        <li><a href="https://twitter.com/w3c_wai"><svg focusable="false" aria-hidden="true" class="icon-twitter " viewBox="0 0 32 32"><path d="M31.939 6.092c-1.18 0.519-2.44 0.872-3.767 1.033 1.352-0.815 2.392-2.099 2.884-3.631-1.268 0.74-2.673 1.279-4.169 1.579-1.195-1.279-2.897-2.079-4.788-2.079-3.623 0-6.56 2.937-6.56 6.556 0 0.52 0.060 1.020 0.169 1.499-5.453-0.257-10.287-2.876-13.521-6.835-0.569 0.963-0.888 2.081-0.888 3.3 0 2.28 1.16 4.284 2.917 5.461-1.076-0.035-2.088-0.331-2.971-0.821v0.081c0 3.18 2.257 5.832 5.261 6.436-0.551 0.148-1.132 0.228-1.728 0.228-0.419 0-0.82-0.040-1.221-0.115 0.841 2.604 3.26 4.503 6.139 4.556-2.24 1.759-5.079 2.807-8.136 2.807-0.52 0-1.039-0.031-1.56-0.089 2.919 1.859 6.357 2.945 10.076 2.945 12.072 0 18.665-9.995 18.665-18.648 0-0.279 0-0.56-0.020-0.84 1.281-0.919 2.4-2.080 3.28-3.397l-0.063-0.027z"></path></svg> Twitter</a></li>
+        <li><a href="https://www.w3.org/WAI/feed.xml"><svg focusable="false" aria-hidden="true" class="icon-rss " viewBox="0 0 32 32"><path d="M25.599 32c0-14.044-11.555-25.6-25.599-25.6v-6.4c17.553 0 32 14.447 32 32h-6.401zM4.388 23.22c2.419 0 4.391 1.972 4.391 4.393 0 2.417-1.98 4.387-4.401 4.387-2.417 0-4.377-1.965-4.377-4.387s1.967-4.392 4.388-4.393zM21.212 32h-6.22c0-8.225-6.767-14.993-14.992-14.993v-6.22c11.636 0 21.212 9.579 21.212 21.213z"></path></svg> Feed</a></li>
+        <li><a href="https://www.youtube.com/channel/UCU6ljj3m1fglIPjSjs2DpRA/playlistsv"><svg focusable="false" aria-hidden="true" class="icon-youtube "  viewBox="0 0 32 32"><path d="M31.327 8.273c-0.386-1.353-1.431-2.398-2.756-2.777l-0.028-0.007c-2.493-0.668-12.528-0.668-12.528-0.668s-10.009-0.013-12.528 0.668c-1.353 0.386-2.398 1.431-2.777 2.756l-0.007 0.028c-0.443 2.281-0.696 4.903-0.696 7.585 0 0.054 0 0.109 0 0.163l-0-0.008c-0 0.037-0 0.082-0 0.126 0 2.682 0.253 5.304 0.737 7.845l-0.041-0.26c0.386 1.353 1.431 2.398 2.756 2.777l0.028 0.007c2.491 0.669 12.528 0.669 12.528 0.669s10.008 0 12.528-0.669c1.353-0.386 2.398-1.431 2.777-2.756l0.007-0.028c0.425-2.233 0.668-4.803 0.668-7.429 0-0.099-0-0.198-0.001-0.297l0 0.015c0.001-0.092 0.001-0.201 0.001-0.31 0-2.626-0.243-5.196-0.708-7.687l0.040 0.258zM12.812 20.801v-9.591l8.352 4.803z"></path></svg> YouTube</a></li>
+        <li><a href="https://www.w3.org/WAI/news/subscribe/" class="button">Get News in Email</a></li>
+      </ul>
+    </div>
+    <div dir="auto" translate="no" lang="en">
+      <p>Copyright © {{ "now" | date: "%Y" }} World Wide Web Consortium (<a href="https://www.w3.org/">W3C</a><sup>®</sup>). See <a href="/WAI/about/using-wai-material/">Permission to Use WAI Material</a>.</p>
+    </div>
+  </div>
+  <div dir="auto" translate="no" class="q4-start q4-end" lang="en">
+    <ul style="margin-bottom:0">
+      <li><a href="/WAI/about/contacting/">Contact WAI</a></li>
+      <li><a href="/WAI/sitemap/">Site Map</a></li>
+      <li><a href="/WAI/news/">News</a></li>
+      <li><a href="/WAI/about/accessibility-statement/">Accessibility Statement</a></li>
+      <li><a href="/WAI/translations/"> Translations</a></li>
+      <li><a href="/WAI/roles/">Resources for Roles</a></li>
+    </ul>
+  </div>
+</footer>
diff --git a/_includes/techniques/about.html b/_includes/techniques/about.html
new file mode 100644
index 0000000000..a21e7c6107
--- /dev/null
+++ b/_includes/techniques/about.html
@@ -0,0 +1,34 @@
+{% if technique.obsoleteSince <= version %}
+<section class="box obsolete-message">
+  <h2 class="box-h">Obsolete</h2>
+  {% if technique.obsoleteMessage %}<div class="box-i">{{ technique.obsoleteMessage }}</div>{% endif %}
+</section>
+{% endif %}
+{% sectionbox "technique" "About this Technique" %}
+{% include "techniques/applicability.html" %}
+{% case technique.technology %}
+{% when "aria" %}
+  <p>This technique applies to content using <a href="https://www.w3.org/TR/wai-aria/">WAI-<abbr title="Accessible Rich Internet Applications">ARIA</abbr></a>.</p>
+{% when "client-side-script" %}
+  <p>This technique applies to content using client-side script (JavaScript, ECMAScript).</p>
+{% when "css" %}
+  <p>This technique applies to content using technologies that support <a href="https://www.w3.org/TR/CSS/"><abbr title="Cascading Style Sheets">CSS</abbr></a>.</p>
+{% # failures intentionally has no applicability statement %}
+{% when "flash" %}
+  <p>This technique applies to content implemented in Adobe Flash.</p>
+{% when "general" %}
+  <p>This technique applies to content implemented in any technology.</p>
+{% when "html" %}
+  <p>This technique applies to content structured in <a href="https://www.w3.org/TR/html/"><abbr title="HyperText Markup Language">HTML</abbr></a>.</p>
+{% when "pdf" %}
+  <p>This technique applies to content implemented in Adobe Tagged PDF.</p>
+{% when "server-side-script" %}
+  <p>This technique applies to content modified by the server before being sent to the user.</p>
+{% when "silverlight" %}
+  <p>This technique applies to content implemented in Microsoft Silverlight.</p>
+{% when "smil" %}
+  <p>This technique applies to content implemented in <a href="https://www.w3.org/TR/SMIL/">Synchronized Multimedia Integration Language (SMIL)</a>.</p>
+{% when "text" %}
+  <p>This technique applies to content implemented in plain text, including Markdown and similar formats, without use of a structure technology.</p>
+{% endcase %}
+{% endsectionbox %}
diff --git a/_includes/techniques/applicability-association.html b/_includes/techniques/applicability-association.html
new file mode 100644
index 0000000000..7ded7f2b75
--- /dev/null
+++ b/_includes/techniques/applicability-association.html
@@ -0,0 +1,15 @@
+{% # See getTechniqueAssociations in 11ty/techniques.ts for typings %}
+{{ association.criterion.id | linkUnderstanding }}
+(<strong>{{ association.type }}</strong>
+{%- if association.with.length > 0 -%}
+  , together with {{ association.with | linkTechniques }}
+{%- endif -%}
+{%- if association.hasUsageChildren %}
+  using a more specific technique
+{%- endif -%}
+{%- if association.usageParentIds.length > 0 %}
+  when used with {{ association.usageParentIds | linkTechniques }}
+{%- elsif association.usageParentDescription != "" %}
+  {{ association.usageParentDescription }}
+{%- endif -%}
+)
\ No newline at end of file
diff --git a/_includes/techniques/applicability.html b/_includes/techniques/applicability.html
new file mode 100644
index 0000000000..3b62424a2e
--- /dev/null
+++ b/_includes/techniques/applicability.html
@@ -0,0 +1,19 @@
+{% # Autogenerated content added to About box %}
+{% if techniqueAssociations %}
+  {% if techniqueAssociations.size == 1 %}
+  <p>
+    This technique relates to
+    {% include "techniques/applicability-association.html", association: techniqueAssociations[0] %}.</p>
+  {% else %}
+  <p>This technique relates to:</p>
+  <ul>
+  {% for association in techniqueAssociations %}
+    <li>
+      {% include "techniques/applicability-association.html", association: association %}
+    </li>
+  {% endfor %}
+  </ul>
+  {% endif %}
+{% else %}
+  <p>This technique is not referenced from any Understanding document.</p>
+{% endif %}
diff --git a/_includes/techniques/h1.html b/_includes/techniques/h1.html
new file mode 100644
index 0000000000..3e99c97508
--- /dev/null
+++ b/_includes/techniques/h1.html
@@ -0,0 +1 @@
+<h1><span>Technique {{ page.fileSlug }}:</span>{{ technique.titleHtml }}</h1>
diff --git a/_includes/techniques/head.html b/_includes/techniques/head.html
new file mode 100644
index 0000000000..ea96946262
--- /dev/null
+++ b/_includes/techniques/head.html
@@ -0,0 +1 @@
+<link rel="stylesheet" href="../base.css" />
diff --git a/_includes/techniques/intro/resources.html b/_includes/techniques/intro/resources.html
new file mode 100644
index 0000000000..bccea53ad1
--- /dev/null
+++ b/_includes/techniques/intro/resources.html
@@ -0,0 +1 @@
+<p style="margin-bottom: 1.5em;"><em><small>No endorsement implied.</small></em></p>
diff --git a/_includes/test-rules.html b/_includes/test-rules.html
new file mode 100644
index 0000000000..c2842bf0df
--- /dev/null
+++ b/_includes/test-rules.html
@@ -0,0 +1,25 @@
+{% if testRules.size > 0 %}
+{%- if isTechniques -%}
+  {% assign understandingActRulesHref = "../../understanding/understanding-act-rules.html" %}
+{%- else -%}
+  {% assign understandingActRulesHref = "understanding-act-rules.html" %}
+{%- endif -%}
+<section id="test-rules">
+  <h2>Test Rules</h2>
+  <p>
+    The following are Test Rules
+    {% if isTechniques -%}
+      related to this Technique.
+    {%- elsif isUnderstanding -%}
+      for certain aspects of this Success Criterion.
+    {%- endif %}
+    It is not necessary to use these particular Test Rules to check for conformance with WCAG, but they are defined and approved test methods.
+    For information on using Test Rules, see <a href="{{ understandingActRulesHref }}">Understanding Test Rules for WCAG Success Criteria</a>.
+  </p>
+  <ul>
+  {% for rule in testRules %}
+    <li><a href="/WAI{{ rule.permalink }}">{{ rule.title }}</a></li>
+  {% endfor %}
+  </ul>
+</section>
+{%- endif %}
diff --git a/_includes/toc.html b/_includes/toc.html
new file mode 100644
index 0000000000..4c521cea3a
--- /dev/null
+++ b/_includes/toc.html
@@ -0,0 +1,38 @@
+{% if isTechniques %}
+  {% for technology in technologies %}
+    {%- if techniques[technology].size == 0 -%}{%- continue -%}{%- endif -%}
+    {%- assign technologyTitle = technologyTitles[technology] -%}
+    <h2 id="{{ technology }}">{{ technologyTitle }}<span class="permalink"><a href="#{{ technology }}" aria-label="Permalink for {{ technologyTitle }}" title="Permalink for {{ technologyTitle }}"><span>§</span></a></span></h2>
+
+    <ul class="toc-wcag-docs">
+      {% for technique in techniques[technology] %}
+      <li>{{ technique.id | linkTechniques }}</li>
+      {% endfor %}
+    </ul>
+  {% endfor %}
+{% elsif isUnderstanding %}
+  {%- # See 11ty/guidelines.ts for typings -%}
+  {% for principle in principles %}
+  <section id="{{ principle.id }}">
+    <h2>{{ principle.name }}</h2>
+    {% for guideline in principle.guidelines %}
+      <section id="{{ guideline.id }}">
+        <h3><a href="{{ guideline.id }}"><span class="secno">{{ guideline.num }} </span>{{ guideline.name }}</a></h3>
+        <ul>
+        {% for criterion in guideline.successCriteria %}
+          <li><a href="{{ criterion.id }}"><span class="secno">{{ criterion.num }} </span>{{ criterion.name }}</a></li>
+        {% endfor %}
+        </ul>
+      </section>
+    {% endfor %}
+  </section>
+  {% endfor %}
+  <section id="other">
+    <h2>Other Understanding documents</h2>
+    <ul class="toc-wcag-docs">
+    {% for doc in understandingDocs %}
+      <li><a href="{{ doc.id }}">{{ doc.name }}</a></li>
+    {% endfor %}
+    </ul>
+  </section>
+{% endif %}
diff --git a/_includes/understanding/about.html b/_includes/understanding/about.html
new file mode 100644
index 0000000000..098d0b9997
--- /dev/null
+++ b/_includes/understanding/about.html
@@ -0,0 +1,9 @@
+{%- if guideline.type == "SC" -%}
+  {% sectionbox "success-criterion" "Success Criterion (SC)" -%}
+    {{ guideline.content }}
+  {%- endsectionbox %}
+{%- elsif guideline.type == "Guideline" -%}
+  {% sectionbox "guideline" "Guideline" -%}
+    {{ guideline.content }}
+  {%- endsectionbox %}
+{%- endif -%}
diff --git a/_includes/understanding/h1.html b/_includes/understanding/h1.html
new file mode 100644
index 0000000000..29db4de86b
--- /dev/null
+++ b/_includes/understanding/h1.html
@@ -0,0 +1,10 @@
+{%- # Expanded heading content, intended only for guideline and SC understanding pages -%}
+<h1>
+  <span class="standalone-resource__type-of-guidance">
+    Understanding
+    <a href="https://w3.org/TR/WCAG{{ version }}#{{ page.fileSlug }}">
+      {{- guideline.type }} {{ guideline.num -}}
+    </a>:
+  </span>{{ guideline.name }}
+  {%- if guideline.level %} (Level {{ guideline.level }}){% endif %}
+</h1>
diff --git a/_includes/understanding/head.html b/_includes/understanding/head.html
new file mode 100644
index 0000000000..a4e625abff
--- /dev/null
+++ b/_includes/understanding/head.html
@@ -0,0 +1 @@
+<link rel="stylesheet" href="base.css" />
diff --git a/_includes/understanding/intro/advisory.html b/_includes/understanding/intro/advisory.html
new file mode 100644
index 0000000000..3c64c9a91c
--- /dev/null
+++ b/_includes/understanding/intro/advisory.html
@@ -0,0 +1,15 @@
+{%- if guideline.type == "Guideline" -%}
+<p>
+  Specific techniques for meeting each Success Criterion for this guideline
+  are listed in the understanding sections for each Success Criterion (listed below).
+  If there are techniques, however, for addressing this guideline that do not fall under
+  any of the success criteria, they are listed here.
+  These techniques are not required or sufficient for meeting any success criteria,
+  but can make certain types of Web content more accessible to more people.
+</p>
+{%- else -%}
+<p>
+  Although not required for conformance, the following additional techniques should be considered in order to make content more accessible.
+  Not all techniques can be used or would be effective in all situations.
+</p>
+{%- endif -%}
diff --git a/_includes/understanding/intro/failure.html b/_includes/understanding/intro/failure.html
new file mode 100644
index 0000000000..b1865f7e74
--- /dev/null
+++ b/_includes/understanding/intro/failure.html
@@ -0,0 +1,3 @@
+<p>
+  The following are common mistakes that are considered failures of this Success Criterion by the WCAG Working Group.
+</p>
diff --git a/_includes/understanding/intro/resources.html b/_includes/understanding/intro/resources.html
new file mode 100644
index 0000000000..a782d78bdc
--- /dev/null
+++ b/_includes/understanding/intro/resources.html
@@ -0,0 +1 @@
+<p>Resources are for information purposes only, no endorsement implied.</p>
diff --git a/_includes/understanding/intro/sufficient-situation.html b/_includes/understanding/intro/sufficient-situation.html
new file mode 100644
index 0000000000..fabc003240
--- /dev/null
+++ b/_includes/understanding/intro/sufficient-situation.html
@@ -0,0 +1,4 @@
+<p>
+  Select the situation below that matches your content.
+  Each situation includes techniques or combinations of techniques that are known and documented to be sufficient for that situation.
+</p>
diff --git a/_includes/understanding/intro/techniques.html b/_includes/understanding/intro/techniques.html
new file mode 100644
index 0000000000..bfb3ffa5e9
--- /dev/null
+++ b/_includes/understanding/intro/techniques.html
@@ -0,0 +1,8 @@
+<p>
+  Each numbered item in this section represents a technique or combination of techniques
+  that the WCAG Working Group deems sufficient for meeting this Success Criterion.
+  However, it is not necessary to use these particular techniques.
+  For information on using other techniques, see
+  <a href="understanding-techniques">Understanding Techniques for WCAG Success Criteria</a>,
+  particularly the "Other Techniques" section.
+</p>
diff --git a/_includes/understanding/key-terms.html b/_includes/understanding/key-terms.html
new file mode 100644
index 0000000000..bea2906e38
--- /dev/null
+++ b/_includes/understanding/key-terms.html
@@ -0,0 +1,6 @@
+<section id="key-terms">
+  <details>
+    <summary><h2>Key Terms</h2></summary>
+    <dl></dl>
+  </details>
+</section>
diff --git a/_includes/understanding/navigation-index.html b/_includes/understanding/navigation-index.html
new file mode 100644
index 0000000000..12fdd810df
--- /dev/null
+++ b/_includes/understanding/navigation-index.html
@@ -0,0 +1,19 @@
+{% comment %}
+Navigation used for Understanding index/about pages only.
+See _includes/header.html for expected input notes
+{% endcomment %}
+<div class="default-grid nav-container nav-page-specific">
+  <div class="default-grid">
+    <nav class="nav" aria-label="{{ headerLabel }}">
+      <ul>
+        <li class="nav__item">
+          {% if page.fileSlug == "understanding" %}
+          <a href="." class="active" aria-current="page">All {{ headerLabel }}</a>
+          {% else %}
+          <a href=".">All {{ headerLabel }}</a>
+          {% endif %}
+        </li>
+      </ul>
+    </nav>
+  </div>
+</div>
diff --git a/_includes/understanding/navigation.html b/_includes/understanding/navigation.html
new file mode 100644
index 0000000000..9f41d9ae5e
--- /dev/null
+++ b/_includes/understanding/navigation.html
@@ -0,0 +1,50 @@
+{% comment %}
+Navigation used for individual Understanding pages.
+See _includes/header.html for expected input notes
+{% endcomment %}
+<div class="default-grid nav-container nav-page-specific">
+  <div class="nav">
+    <nav class="nav standalone-resource-pager" aria-label="{{ headerLabel }}">
+      <ul>
+        <li class="nav__item">
+          {% if page.fileSlug == "understanding" %}
+          <a href="." class="active" aria-current="page">All {{ headerLabel }}</a>
+          {% else %}
+          <a href=".">All {{ headerLabel }}</a>
+          {% endif %}
+        </li>
+        {% # nav data is set up in eleventy.config.ts via 11ty/guidelines.ts %}
+        {% if nav.parent %}
+        <li class="nav__item">
+          <a href="{{ nav.parent.id }}">
+            <svg alt="up" focusable="false" aria-hidden="true" class="icon-arrow-up-thin pager-icon" viewBox="0 0 16 16">
+              <path fill-rule="evenodd" d="M8 12a.5.5 0 0 0 .5-.5V5.707l2.146 2.147a.5.5 0 0 0 .708-.708l-3-3a.5.5 0 0 0-.708 0l-3 3a.5.5 0 1 0 .708.708L7.5 5.707V11.5a.5.5 0 0 0 .5.5z"></path>
+            </svg>
+            {{ nav.parent.type }}: {{ nav.parent.name }}
+          </a>
+        </li>
+        {% endif %}
+        {% if nav.previous %}
+        <li class="nav__item">
+          <a href="{{ nav.previous.id }}">
+            <svg focusable="false" aria-hidden="true" class="icon-arrow-left-thin pager-icon" viewBox="0 0 16 16">
+              <path fill-rule="evenodd" d="M12 8a.5.5 0 0 1-.5.5H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5H11.5a.5.5 0 0 1 .5.5z"></path>
+            </svg>
+            Previous {{ nav.previous.type }}: {{ nav.previous.name }}
+          </a>
+        </li>
+        {% endif %}
+        {% if nav.next %}
+        <li class="nav__item">
+          <a href="{{ nav.next.id }}">
+            Next {{ nav.next.type }}: {{ nav.next.name }}
+            <svg focusable="false" aria-hidden="true" class="icon-arrow-right-thin pager-icon" viewBox="0 0 16 16">
+              <path fill-rule="evenodd" d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8z"></path>
+            </svg>
+          </a>
+        </li>
+        {% endif %}
+      </ul>
+    </nav>
+  </div>
+</div>
diff --git a/_includes/understanding/success-criteria.html b/_includes/understanding/success-criteria.html
new file mode 100644
index 0000000000..5a1804afc2
--- /dev/null
+++ b/_includes/understanding/success-criteria.html
@@ -0,0 +1,10 @@
+{%- if guideline.successCriteria %}
+  <section id="success-criteria">
+    <h2>Success Criteria for this Guideline</h2>
+    <ul>
+    {% for criterion in guideline.successCriteria %}
+      <li><a href="{{ criterion.id }}">{{ criterion.num }} {{ criterion.name }}</a></li>
+    {% endfor %}
+    </ul>
+  </section>
+{% endif -%}
diff --git a/_includes/wai-site-footer.html b/_includes/wai-site-footer.html
new file mode 100644
index 0000000000..fe7fabd0f1
--- /dev/null
+++ b/_includes/wai-site-footer.html
@@ -0,0 +1,17 @@
+<footer id="wai-site-footer" class="page-footer default-grid" aria-label="Page">
+  <div class="inner" style="grid-column: 2 / 8">
+    <p><strong>Date:</strong> Updated {{ page.date | date_to_long_string }}.</p>
+    <p><strong>Developed by</strong>
+      <a href="https://www.w3.org/groups/wg/ag/participants">Accessibility Guidelines Working Group (AG WG) Participants</a>
+      (Co-Chairs: Alastair Campbell, Charles Adams, Rachael Bradley Montgomery. W3C Staff Contact: Kevin White).
+    </p>
+    <p>The content was developed as part of the
+      <a href="https://www.w3.org/WAI/about/projects/#us">WAI-Core projects</a> funded by U.S. Federal funds.
+      The user interface was designed by the Education and Outreach Working Group
+      (<a href="https://www.w3.org/groups/wg/eowg/participants">EOWG</a>) with contributions from
+      Shadi Abou-Zahra, Steve Lee, and Shawn Lawton Henry as part of the
+      <a href="https://www.w3.org/WAI/about/projects/wai-guide/">WAI-Guide</a> project,
+      co-funded by the European Commission.
+    </p>
+  </div>
+</footer>
diff --git a/_includes/waiscript.html b/_includes/waiscript.html
new file mode 100644
index 0000000000..7f65b9f8f8
--- /dev/null
+++ b/_includes/waiscript.html
@@ -0,0 +1,29 @@
+<link rel="stylesheet" href="../a11y-light.css" />
+<script src="../highlight.min.js"></script>
+<script>
+  hljs.configure({
+    cssSelector: 'pre'
+  });
+  hljs.highlightAll();
+  var translationStrings = {}; /* fix WAI JS */
+</script>
+<script src="https://www.w3.org/WAI/assets/scripts/main.js"></script>
+{% # Matomo %}
+<script>
+  var _paq = _paq || [];
+  /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
+  _paq.push(["setDoNotTrack", true]);
+  _paq.push(['trackPageView']);
+  _paq.push(['enableLinkTracking']);
+  (function () {
+    var u = "//www.w3.org/analytics/piwik/";
+    _paq.push(['setTrackerUrl', u + 'piwik.php']);
+    _paq.push(['setSiteId', '328']);
+    var d = document, g = d.createElement('script'), s = d.getElementsByTagName('script')[0];
+    g.type = 'text/javascript'; g.async = true; g.defer = true; g.src = u + 'piwik.js'; s.parentNode.insertBefore(g, s);
+  })();
+</script>
+<noscript>
+  <p><img src="//www.w3.org/analytics/piwik/piwik.php?idsite=328&amp;rec=1" style="border:0;" alt="" /></p>
+</noscript>
+{% # End Matomo Code %}
diff --git a/acknowledgements/ag-contributors.html b/acknowledgements/ag-contributors.html
index 51f9e6ddaa..4d1a2542cd 100644
--- a/acknowledgements/ag-contributors.html
+++ b/acknowledgements/ag-contributors.html
@@ -1,4 +1,4 @@
 <section id="ack_participants-previous">
 	<h2>Other previously active WCAG WG participants and other contributors to WCAG 2.0, WCAG 2.1, or supporting resources </h2>
-	<p>Paul Adam, Jenae Andershonis, Wilhelm Joys Andersen, Andrew Arch, Avi Arditti, Aries Arditi, Mark Barratt, Mike Barta, Sandy Bartell, Kynn Bartlett, Chris Beer, Charles Belov, Marco Bertoni, Harvey Bingham, Chris Blouch, Paul Bohman, Frederick Boland, Denis Boudreau, Patrice Bourlon, Andy Brown, Dick Brown, Doyle Burnett, Raven Calais, Ben Caldwell, Tomas Caspers, Roberto Castaldo, Sofia Celic-Li, Sambhavi Chandrashekar, Mike Cherim, Jonathan Chetwynd, Wendy Chisholm, Alan Chuter, David M Clark, Joe Clark, Darcy Clarke, James Coltham, Earl Cousins, James Craig, Tom Croucher, Pierce Crowell, Nir Dagan, Daniel Dardailler, Geoff Deering, Sébastien Delorme, Pete DeVasto, Iyad Abu Doush, Sylvie Duchateau, Cherie Eckholm, Roberto Ellero, Don Evans, Gavin Evans, Neal Ewers, Steve Faulkner, Bengt Farre, Lainey Feingold, Wilco Fiers, Michel Fitos, Alan J. Flavell, Nikolaos Floratos, Kentarou Fukuda, Miguel Garcia, P.J. Gardner, Alistair Garrison, Greg Gay, Becky Gibson, Al Gilman, Kerstin Goldsmith, Michael Grade, Karl Groves, Loretta Guarino Reid, Jon Gunderson, Emmanuelle Gutiérrez y Restrepo, Brian Hardy, Eric Hansen, Benjamin Hawkes-Lewis, Sean Hayes, Shawn Henry, Hans Hillen, Donovan Hipke, Bjoern Hoehrmann, Allen Hoffman, Chris Hofstader, Yvette Hoitink, Martijn Houtepen, Carlos Iglesias, Richard Ishida, Jonas Jacek, Ian Jacobs, Phill Jenkins, Barry Johnson, Duff Johnson, Jyotsna Kaki, Shilpi Kapoor, Leonard R. Kasday, Kazuhito Kidachi, Ken Kipness, Johannes Koch, Marja-Riitta Koivunen, Preety Kumar, Kristjan Kure, Andrew LaHart, Gez Lemon, Chuck Letourneau, Aurélien Levy, Harry Loots, Scott Luebking, Tim Lacy, Jim Ley, Alex Li, William Loughborough, N Maffeo, Mark Magennis, Kapsi Maria, Luca Mascaro, Matt May, Sheena McCullagh, Liam McGee, Jens Oliver Meiert, Niqui Merret, Jonathan Metz, Alessandro Miele, Steven Miller, Mathew J Mirabella, Matt May, Marti McCuller, Sorcha Moore, Charles F. Munat, Robert Neff, Charles Nevile, Liddy Nevile, Dylan Nicholson, Bruno von Niman, Tim Noonan, Sebastiano Nutarelli, Graham Oliver, Sean B. Palmer, Devarshi Pant, Nigel Peck, Anne Pemberton, David Poehlman, Ian Pouncey, Charles Pritchard, Kerstin Probiesch, W Reagan, Adam Victor Reed, Chris Reeve, Chris Ridpath, Lee Roberts, Mark Rogers, Raph de Rooij, Gregory J. Rosmaita, Matthew Ross, Sharron Rush, Joel Sanda, Janina Sajka, Roberto Scano, Gordon Schantz, Tim van Schie, Wolf Schmidt, Stefan Schnabel, Cynthia Shelly, Glenda Sims, John Slatin, Becky Smith, Jared Smith, Andi Snow-Weaver, Neil Soiffer, Mike Squillace, Michael Stenitzer, Diane Stottlemyer, Christophe Strobbe, Sarah J Swierenga, Jim Thatcher, Terry Thompson, Justin Thorp, David Todd, Mary Utt, Jean Vanderdonckt, Carlos A Velasco, Eric Velleman, Gijs Veyfeyken, Dena Wainwright, Paul Walsch, Daman Wandke, Richard Warren, Elle Waters, Takayuki Watanabe, Gian Wild, David Wooley, Wu Wei, Kenny Zhang, Leona Zumbo.</p>
+	<p>Paul Adam, Jenae Andershonis, Wilhelm Joys Andersen, Andrew Arch, Avi Arditti, Aries Arditi, Tom Babinszki, Mark Barratt, Mike Barta, Sandy Bartell, Kynn Bartlett, Chris Beer, Charles Belov, Marco Bertoni, Harvey Bingham, Chris Blouch, Paul Bohman, Frederick Boland, Denis Boudreau, Patrice Bourlon, Andy Brown, Dick Brown, Doyle Burnett, Raven Calais, Ben Caldwell, Tomas Caspers, Roberto Castaldo, Sofia Celic-Li, Sambhavi Chandrashekar, Mike Cherim, Jonathan Chetwynd, Wendy Chisholm, Alan Chuter, David M Clark, Joe Clark, Darcy Clarke, James Coltham, Earl Cousins, James Craig, Tom Croucher, Pierce Crowell, Nir Dagan, Daniel Dardailler, Geoff Deering, Sébastien Delorme, Pete DeVasto, Iyad Abu Doush, Sylvie Duchateau, Cherie Eckholm, Roberto Ellero, Don Evans, Gavin Evans, Neal Ewers, Steve Faulkner, Bengt Farre, Lainey Feingold, Wilco Fiers, Michel Fitos, Alan J. Flavell, Nikolaos Floratos, Kentarou Fukuda, Miguel Garcia, P.J. Gardner, Alistair Garrison, Greg Gay, Becky Gibson, Al Gilman, Kerstin Goldsmith, Michael Grade, Karl Groves, Loretta Guarino Reid, Jon Gunderson, Emmanuelle Gutiérrez y Restrepo, Brian Hardy, Eric Hansen, Benjamin Hawkes-Lewis, Sean Hayes, Shawn Henry, Hans Hillen, Donovan Hipke, Bjoern Hoehrmann, Allen Hoffman, Chris Hofstader, Yvette Hoitink, Martijn Houtepen, Carlos Iglesias, Richard Ishida, Jonas Jacek, Ian Jacobs, Phill Jenkins, Barry Johnson, Duff Johnson, Jyotsna Kaki, Shilpi Kapoor, Leonard R. Kasday, Kazuhito Kidachi, Ken Kipness, Johannes Koch, Marja-Riitta Koivunen, Maureen Kraft, Preety Kumar, Kristjan Kure, Andrew LaHart, Gez Lemon, Chuck Letourneau, Aurélien Levy, Harry Loots, Scott Luebking, Tim Lacy, Jim Ley, Alex Li, William Loughborough, N Maffeo, Mark Magennis, Erich Manser, Kapsi Maria, Luca Mascaro, Matt May, Sheena McCullagh, Liam McGee, Jens Oliver Meiert, Niqui Merret, Jonathan Metz, Alessandro Miele, Steven Miller, Mathew J Mirabella, Matt May, Marti McCuller, Sorcha Moore, Charles F. Munat, Robert Neff, Charles Nevile, Liddy Nevile, Dylan Nicholson, Bruno von Niman, Tim Noonan, Sebastiano Nutarelli, Graham Oliver, Sean B. Palmer, Charu Pandhi, evarshi Pant, Nigel Peck, Anne Pemberton, David Poehlman, Ian Pouncey, Charles Pritchard, Kerstin Probiesch, W Reagan, Adam Victor Reed, Chris Reeve, Chris Ridpath, Lee Roberts, Mark Rogers, Raph de Rooij, Gregory J. Rosmaita, Matthew Ross, Sharron Rush, Joel Sanda, Janina Sajka, Roberto Scano, Gordon Schantz, Tim van Schie, Wolf Schmidt, Stefan Schnabel, Cynthia Shelly, Glenda Sims, John Slatin, Becky Smith, Jared Smith, Andi Snow-Weaver, Neil Soiffer, Mike Squillace, Michael Stenitzer, Diane Stottlemyer, Christophe Strobbe, Sarah J Swierenga, Jim Thatcher, Terry Thompson, Justin Thorp, David Todd, Mary Utt, Jean Vanderdonckt, Carlos A Velasco, Eric Velleman, Gijs Veyfeyken, Dena Wainwright, Paul Walsch, Daman Wandke, Richard Warren, Elle Waters, Takayuki Watanabe, Gian Wild, David Wooley, Wu Wei, Kenny Zhang, Leona Zumbo.</p>
 </section>
\ No newline at end of file
diff --git a/acknowledgements/ag-wg-active.html b/acknowledgements/ag-wg-active.html
index 811548ec79..19cc2fd7ea 100644
--- a/acknowledgements/ag-wg-active.html
+++ b/acknowledgements/ag-wg-active.html
@@ -2,110 +2,92 @@
 	<h2>Participants of the AG WG active in the development of this document:</h2>
 	<ul>
 		<li>Jake Abma (Invited Expert)</li>
-		<li>Shadi Abou-Zahra (W3C)</li>
+		<li>Shadi Abou-Zahra (Amazon)</li>
 		<li>Chuck Adams (Oracle Corporation)</li>
 		<li>Amani Ali (Nomensa)</li>
 		<li>Jim Allan (Invited Expert)</li>
-		<li>Paul Adam (Deque Systems, Inc.)</li>
-		<li>Christopher Auclair (VitalSource | Ingram Content Group)</li>
 		<li>Jon Avila (Level Access)</li>
-		<li>Tom Babinszki (IBM Corporation)</li>
 		<li>Bruce Bailey (U.S. Access Board)</li>
 		<li>Renaldo Bernard (University of Southampton)</li>
-		<li>Chris Blouch (Level Access)</li>
-		<li>Denis Boudreau (Deque Systems, Inc.)</li>
+		<li>Dan Bjorge (Deque Systems, Inc.)</li>
+		<li>Peter Bossley  (Thomson Reuters)</li>
+		<li>Rachael Bradley Montgomery (Library of Congress)</li>
 		<li>Judy Brewer (W3C)</li>
 		<li>Shari Butler (Pearson plc)</li>
 		<li>Thaddeus Cambron (Invited Expert)</li>
 		<li>Alastair Campbell (Nomensa)</li>
 		<li>Laura Carlson (Invited Expert)</li>
-		<li>Louis Cheng (Google)</li>
-		<li>Pietro Cirrincione (Invited Expert)</li>
-		<li>Vivienne Conway (Web Key IT Pty Ltd)</li>
+    	<li>Sukriti Chadha (Invited Expert)</li>
+		<li>Rafal Charlampowicz (AccessibilityOZ)</li>
 		<li>Michael Cooper (W3C)</li>
 		<li>Jennifer Delisi (Invited Expert)</li>
-		<li>Romain Deltour (DAISY Consortium)</li>
 		<li>Wayne Dick (Knowbility, Inc)</li>
-		<li>Chaohai Ding (University of Southampton)</li>
 		<li>Kim Dirks (Thomson Reuters)</li>
-		<li>Shwetank Dixit (BarrierBreak Technologies)</li>
-		<li>Anthony Doran (TextHelp)</li>
 		<li>E.A. Draffan (University of Southampton)</li>
 		<li>Eric Eggert (W3C)</li>
 		<li>Michael Elledge (Invited Expert)</li>
+		<li>Steve Faulkner (TPGi)</li>
 		<li>David Fazio (Invited Expert)</li>
 		<li>Wilco Fiers (Deque Systems, Inc.)</li>
 		<li>Detlev Fischer (Invited Expert)</li>
-		<li>John Foliot (Deque Systems, Inc.)</li>
+		<li>John Foliot (Invited Expert)</li>
 		<li>Matt Garrish (DAISY Consortium)</li>
 		<li>Alistair Garrison (Level Access)</li>
+		<li>Jaunita George (Navy Federal Credit Union)</li>
 		<li>Michael Gower (IBM Corporation)</li>
-		<li>Jon Gunderson</li>
 		<li>Markku Hakkinen (Educational Testing Service)</li>
+		<li>Charles Hall (Invited Expert)</li>
 		<li>Katie Haritos-Shea (Knowbility, Inc)</li>
-		<li>Andy Heath (Invited Expert)</li>
+		<li>Dan Harper-Wain (HM Government)</li>
 		<li>Shawn Henry (W3C)</li>
-		<li>Thomas Hoffman (Educational Testing Service)</li>
-		<li>Sarah Horton (The Paciello Group, LLC)</li>
-		<li>Stefan Johansson (Invited Expert)</li>
+		<li>Sarah Horton (Invited Expert)</li>
+		<li>Abi James (University of Southampton)</li>
 		<li>Marc Johlic (IBM Corporation)</li>
-		<li>Rick Johnson (VitalSource | Ingram Content Group)</li>
-		<li>Crystal Jones (Microsoft Corporation)</li>
+		<li>Oliver Keim (SAP SE)</li>
 		<li>Andrew Kirkpatrick (Adobe)</li>
 		<li>John Kirkwood (Invited Expert)</li>
-		<li>Jason Kiss (Department of Internal Affairs, New Zealand Government)</li>
-		<li>Maureen Kraft (IBM Corporation)</li>
-		<li>JaEun Ku (University of Illinois at Urbana-Champaign)</li>
-		<li>Patrick Lauke (The Paciello Group, LLC)</li>
+		<li>JaEun Jemma Ku (University of Illinois Chicago)</li>
+		<li>Patrick H. Lauke (TetraLogical)</li>
 		<li>Shawn Lauriat (Google, Inc.)</li>
 		<li>Steve Lee (Invited Expert)</li>
-		<li>Alex Li (Microsoft Corporation)</li>
 		<li>Chris Loiselle (Invited Expert)</li>
-		<li>Greg Lowney (Invited Expert)</li>
-		<li>Adam Lund (Thomson Reuters)</li>
 		<li>David MacDonald (Invited Expert)</li>
-		<li>Erich Manser (IBM Corporation)</li>
-		<li>Kurt Mattes (Deque Systems, Inc.)</li>
-		<li>Scott McCormack (Level Access)</li>
-		<li>Chris McMeeking (Deque Systems, Inc.)</li>
 		<li>Jan McSorley (Pearson plc)</li>
+		<li>Rain Breaw Michaels (Google LLC)</li>
 		<li>Neil Milliken (Unify Software and Solutions)</li>
-		<li>Rachael Montgomery (Invited Expert)</li>
 		<li>Mary Jo Mueller (IBM Corporation)</li>
+		<li>Jay Mullen (College Board)</li>
 		<li>Brooks Newton (Thomson Reuters)</li>
+		<li>Gundula Niemann (SAP SE)</li>
 		<li>James Nurthen (Oracle Corporation)</li>
+		<li>Lori Oakley (Oracle Corporation)</li>
 		<li>Joshue O Connor (Invited Expert)</li>
+		<li>Scott O'Hara (Microsoft)</li>
 		<li>Sailesh Panchang (Deque Systems, Inc.)</li>
-		<li>Charu Pandhi (IBM Corporation)</li>
 		<li>Kim Patch (Invited Expert)</li>
 		<li>Melanie Philipp (Deque Systems, Inc.)</li>
 		<li>Mike Pluke (Invited Expert)</li>
-		<li>Ian Pouncey (The Paciello Group, LLC)</li>
+		<li>Ian Pouncey (TetraLogical)</li>
 		<li>Ruoxi Ran (W3C)</li>
 		<li>Stephen Repsher (Invited Expert)</li>
-		<li>Jan Richards (Invited Expert)</li>
 		<li>John Rochford (Invited Expert)</li>
-		<li>Marla Runyan (Invited Expert)</li>
 		<li>Stefan Schnabel (SAP SE)</li>
 		<li>Ayelet Seeman (Invited Expert)</li>
 		<li>Lisa Seeman-Kestenbaum (Invited Expert)</li>
 		<li>Glenda Sims (Deque Systems, Inc.)</li>
 		<li>Avneesh Singh (DAISY Consortium)</li>
-		<li>David Sloan (The Paciello Group, LLC)</li>
-		<li>Alan Smith (Invited Expert)</li>
-		<li>Jim Smith (Unify Software and Solutions)</li>
+		<li>David Sloan (TPGi)</li>
 		<li>Andrew Somers (Invited Expert)</li>
-		<li>Adam Solomon (Invited Expert)</li>
-		<li>Jaeil Song (National Information Society Agency (NIA))</li>
 		<li>Jeanne Spellman (TetraLogical)</li>
+		<li>Francis Storr (Intel)</li>
+		<li>Poornima Badhan Subramanian (Invited Expert)</li>
+		<li>Ben Tillyer (Invited Expert)</li>
 		<li>Makoto Ueki (Invited Expert)</li>
-		<li>Jatin Vaishnav (Deque Systems, Inc.)</li>
 		<li>Gregg Vanderheiden (Raising the Floor)</li>
-		<li>Evangelos Vlachogiannis (Fraunhofer Gesellschaft)</li>
 		<li>Kathleen Wahlbin (Invited Expert)</li>
-		<li>Can Wang (Zhejiang University)</li>
-		<li>Léonie Watson (The Paciello Group, LLC)</li>
+		<li>Léonie Watson (TetraLogical)</li>
 		<li>Jason White (Educational Testing Service)</li>
+    <li>White, Kevin (W3C Staff)</li>
 		<li>Mark Wilcock (Unify Software and Solutions)</li>
 	</ul>
-</section>
\ No newline at end of file
+</section>
diff --git a/acknowledgements/ag-wg-participants.html b/acknowledgements/ag-wg-participants.html
index 2e5143a84a..bd53c4ded9 100644
--- a/acknowledgements/ag-wg-participants.html
+++ b/acknowledgements/ag-wg-participants.html
@@ -1,8 +1,8 @@
 <section class="section" id="ack_group">
-	<h4>Participants active in the ARIA WG at the time of publication</h4>
+	<h4>Participants active in the AG WG at the time of publication</h4>
 	<ul>
 		<li>Abma, Jake (Invited expert)</li>
-		<li>Abou-Zahra, Shadi (W3C Staff)</li>
+		<li>Abou-Zahra, Shadi (Amazon)</li>
 		<li>Adams, Charles (Oracle Corporation)</li>
 		<li>Ali, Amani (Nomensa)</li>
 		<li>Allan, Jim (W3C invited expert)</li>
@@ -17,11 +17,13 @@ <h4>Participants active in the ARIA WG at the time of publication</h4>
 		<li>Bohman, Paul (Deque Systems, Inc.)</li>
 		<li>Bostic, Trevor (MITRE Corporation)</li>
 		<li>Boudreau, Denis (Deque Systems, Inc.)</li>
+		<li>Bradley Montgomery, Rachael (Library of Congress)</li>
 		<li>Brewer, Judy (W3C Staff)</li>
 		<li>Bunge, Kim (The Paciello Group, LLC)</li>
 		<li>Butler, Shari (Pearson plc)</li>
 		<li>Campbell, Alastair (Nomensa)</li>
 		<li>Carlson, Laura (Invited expert)</li>
+        <li>Chadha, Sukriti (Invited expert)</li>
 		<li>Charlampowicz, Rafal (AccessibilityOz)</li>
 		<li>Conway, Vivienne (Web Key IT Pty Ltd)</li>
 		<li>Cooper, Michael (W3C Staff)</li>
@@ -79,7 +81,7 @@ <h4>Participants active in the ARIA WG at the time of publication</h4>
 		<li>Ku, JaEun (University of Illinois at Urbana-Champaign)</li>
 		<li>Kumar, Preety (Deque Systems, Inc.)</li>
 		<li>Kurapati, Sujasree (Deque Systems, Inc.)</li>
-		<li>Lauke, Patrick (The Paciello Group, LLC)</li>
+		<li>Lauke, Patrick (TetraLogical)</li>
 		<li>Lauriat, Shawn (Google, Inc.)</li>
 		<li>Lazrus, Robin (Pearson plc)</li>
 		<li>Lee, Jerry (Macmillan Learning)</li>
@@ -93,7 +95,6 @@ <h4>Participants active in the ARIA WG at the time of publication</h4>
 		<li>McCormack, Scott (SSB BART Group)</li>
 		<li>McMeeking, Chris (Deque Systems, Inc.)</li>
 		<li>McSorley, Jan (Pearson plc)</li>
-		<li>Montgomery, Rachael (Invited expert)</li>
 		<li>Mueller, Mary Jo (IBM Corporation)</li>
 		<li>Mussinelli, Cristina (Fondazione LIA)</li>
 		<li>Nandakumar, Jey (Deque Systems, Inc.)</li>
@@ -141,6 +142,7 @@ <h4>Participants active in the ARIA WG at the time of publication</h4>
 		<li>Wegner, Shane (Thomson Reuters Corp.)</li>
 		<li>Wentz, Pascal (SAP SE)</li>
 		<li>White, Jason (Educational Testing Service)</li>
+    <li>White, Kevin (W3C Staff)</li>
 		<li>Wild, Gian (AccessibilityOz)</li>
 		<li>Williams, Jan (The Paciello Group, LLC)</li>
 	</ul>
diff --git a/acknowledgements/funders.html b/acknowledgements/funders.html
index 77b78f87d7..7d1b5f9402 100644
--- a/acknowledgements/funders.html
+++ b/acknowledgements/funders.html
@@ -1,4 +1,4 @@
-<section>
+<section id="enabling-funders">
 	<h2>Enabling funders</h2>
-	<p>This publication has been funded in part with U.S. Federal funds from the Health and Human Services, National Institute on Disability, Independent Living, and Rehabilitation Research (NIDILRR), initially under contract number ED-OSE-10-C-0067 and now under contract number HHSP23301500054C. The content of this publication does not necessarily reflect the views or policies of the U.S. Department of Health and Human Services or the U.S. Department of Education, nor does mention of trade names, commercial products, or organizations imply endorsement by the U.S. Government.</p>
-</section>
\ No newline at end of file
+	<p>This publication has been funded in part with U.S. Federal funds from the Health and Human Services, National Institute on Disability, Independent Living, and Rehabilitation Research (NIDILRR), initially under contract number ED-OSE-10-C-0067, then under contract number HHSP23301500054C, and now under HHS75P00120P00168. The content of this publication does not necessarily reflect the views or policies of the U.S. Department of Health and Human Services or the U.S. Department of Education, nor does mention of trade names, commercial products, or organizations imply endorsement by the U.S. Government.</p>
+</section>
diff --git a/act.xml b/act.xml
new file mode 100644
index 0000000000..b994f53627
--- /dev/null
+++ b/act.xml
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?>
\ No newline at end of file
diff --git a/biblio.js b/biblio.js
index c87140e278..d98875bab7 100644
--- a/biblio.js
+++ b/biblio.js
@@ -26,26 +26,22 @@ respecConfig.localBiblio = {
       	},
     
     "ISO_9241-112": {
-        "uri": "https://www.iso.org/standard/64840.html",
+        "isoNumber": "9241-112",
+        "href": "https://www.iso.org/standard/64840.html",
         "title": "Ergonomics of human-system interaction -- Part 112: Principles for the presentation of information",
         "publisher": "International Standards Organization"
     },
       	
-      	"sRGB": {
-      		"authors": [
-      			"M. Stokes",
-      			"M. Anderson",
-      			"S. Chandrasekar",
-      			"R. Motta"
-      		],
-      		"date": "November 5, 1996",
-      		"href": "https://www.w3.org/Graphics/Color/sRGB.html",
-      		"title": "A Standard Default Color Space for the Internet - sRGB, Version 1.10"
-      	},
+    "ISO_9241-391": {
+        "isoNumber": "9241-391",
+        "href": "https://www.iso.org/standard/56350.html",
+        "title": "Ergonomics of human-system interaction—Part 391: Requirements, analysis and compliance test methods for the reduction of photosensitive seizures",
+        "publisher": "International Standards Organization"
+    },
       	
       	"UNESCO": {
-      		"date": "1997",
-      		"href": "http://www.unesco.org/education/information/nfsunesco/doc/isced_1997.htm",
+      		"date": "2011",
+      		"href": "https://unesdoc.unesco.org/ark:/48223/pf0000219109",
       		"title": "International Standard Classification of Education"
       	}
 	
diff --git a/build.xml b/build.xml
index 6a77f60971..826a539a19 100644
--- a/build.xml
+++ b/build.xml
@@ -42,11 +42,15 @@
 		<delete file="${inputdir.guidelines}/index-flat.html" failonerror="false"/>
 		<delete file="${inputdir.techniques}/index-flat.html" failonerror="false"/>
 		<delete file="${inputdir.understanding}/index-flat.html" failonerror="false"/>
+		<delete file="${inputdir.understanding}/about-flat.html" failonerror="false"/>
 		<delete file="${inputdir.guidelines}/wcag.xml" failonerror="false"/>
 		<delete file="${inputdir.guidelines}/wcag.json" failonerror="false"/>
 		<delete file="${inputdir.guidelines}/versions.xml" failonerror="false"/>
+		<delete file="${inputdir.guidelines}/test-sql.sql" failonerror="false"/>
 		<delete file="${inputdir.techniques}/techniques.xml" failonerror="false"/>
 		<delete file="${inputdir.techniques}/technique-associations.xml" failonerror="false"/>
+		<delete file="${inputdir.techniques}/about-flat.html" failonerror="false"/>
+		<delete file="${inputdir.understanding}/about-flat.html" failonerror="false"/>
 		<delete file="output.html" failonerror="false"/>
 		<delete dir="output" failonerror="false"/>
 		<delete dir="input" failonerror="false"/>
@@ -61,7 +65,7 @@
 		</xslt>
 	</target>
 	
-	<target name="guidelines-xml" depends="flatten" description="Build an XML representation of the guidelines">
+	<target name="guidelines-xml" depends="flatten, guidelines-versions" description="Build an XML representation of the guidelines">
 		<xslt in="${inputdir.guidelines}/index-flat.html" out="${inputdir.guidelines}/wcag.xml" style="xslt/generate-structure-xml.xslt">
 			<classpath path="${classpath.saxon}"/>
 			<factory name="${xslt.factory}"/>
@@ -101,7 +105,7 @@
 		<mkdir dir="output/guidelines/${guidelines.version}"/>
 		<copy file="css/base.css" todir="output/guidelines/${guidelines.version}"/>
 		<copy file="guidelines/guidelines.css" todir="output/guidelines/${guidelines.version}"/>
-		<copy file="guidelines/relative-luminance.xml" todir="output/guidelines/${guidelines.version}"/>
+		<copy file="guidelines/relative-luminance.html" todir="output/guidelines/${guidelines.version}"/>
 		<exec executable="curl">
 			<arg value="&quot;https://labs.w3.org/spec-generator/?type=respec&amp;url=https://raw.githack.com/w3c/wcag/master/guidelines/index.html&quot;"/>
 			<arg value="-o"/>
@@ -168,194 +172,39 @@
 		</xslt>
 	</target>
 	
-	<target name="techniques" depends="techniques-list, techniques-association, techniques-index">
-		<makeurl file="${basedir}/techniques/" property="base.techniques"/>
-		<makeurl file="${basedir}/techniques/technique-associations.xml" property="associations.file"/>
-		<mkdir dir="${basedir}/output/techniques/"/>
-		<local name="output.dir"/>
-		<makeurl file="${basedir}/output/techniques/" property="output.dir"/>
-		<echo message="Outputting Techniques to ${output.dir}"/>
-		<xslt in="${inputdir.techniques}/techniques.xml" out="output.html" style="xslt/generate-techniques.xslt" force="true">
-			<classpath path="${classpath.saxon}"/>
-			<factory name="${xslt.factory}"/>
-			<param name="guidelines.version" expression="${guidelines.version}"/>
-			<param name="techniques.dir" expression="${base.techniques}"/>
-			<param name="associations.file" expression="${associations.file}"/>
-			<param name="output.dir" expression="${output.dir}"/>
-			<param name="loc.guidelines" expression="https://www.w3.org/TR/WCAG${guidelines.version}/" if="publication"/>
-			<param name="loc.understanding" expression="https://www.w3.org/WAI/WCAG${guidelines.version}/Understanding/" if="publication"/>
-			<param name="loc.techniques" expression="https://www.w3.org/WAI/WCAG${guidelines.version}/Techniques/" if="publication"/>
-			<param name="loc.guidelines" expression="https://w3c.github.io/wcag/guidelines/" if="editors"/>
-			<param name="loc.understanding" expression="https://w3c.github.io/wcag/understanding/" if="editors"/>
-			<param name="loc.techniques" expression="https://w3c.github.io/wcag/techniques/" if="editors"/>
-		</xslt>
-		<copy file="css/base.css" todir="output/techniques/"/>
-		<copy file="techniques/techniques.css" todir="output/techniques/"/>
-		<copy file="css/slicenav.css" todir="output/techniques/"/>
-		<copy todir="output/techniques/">
-			<fileset dir="techniques" includes="**/img/*"/>
-		</copy>
-	</target>
-	
-	<target name="techniques-toc" depends="techniques-list" description="Generate the TOC for Techniques">
-		<xslt in="${inputdir.techniques}/techniques.xml" out="techniques/toc.html" style="xslt/generate-techniques-toc.xslt" force="true">
-			<classpath path="${classpath.saxon}"/>
-			<factory name="${xslt.factory}"/>
-		</xslt>
-	</target>
-	
-	<target name="techniques-index" depends="techniques-toc" description="Flatten the techniques index file">
-		<makeurl file="${basedir}/techniques/" property="base.techniques"/>
-		<mkdir dir="${basedir}/output/techniques/"/>
-		<xslt in="${inputdir.techniques}/index.html" out="${inputdir.techniques}/index-flat.html" style="xslt/flatten-document.xslt" force="true">
-			<classpath path="${classpath.saxon}"/>
-			<factory name="${xslt.factory}"/>
-			<param name="base.dir" expression="${base.techniques}"/>
-		</xslt>
-		<xslt in="${inputdir.techniques}/index-flat.html" out="${basedir}/output/techniques/index.html" style="xslt/base.xslt" force="true">
-			<classpath path="${classpath.saxon}"/>
-			<factory name="${xslt.factory}"/>
-			<param name="base.dir" expression="${base.techniques}"/>
-			<param name="guidelines.version" expression="${guidelines.version}"/>
-			<param name="loc.guidelines" expression="https://www.w3.org/TR/WCAG${guidelines.version}/" if="publication"/>
-			<param name="loc.understanding" expression="https://www.w3.org/WAI/WCAG${guidelines.version}/Understanding/" if="publication"/>
-			<param name="loc.techniques" expression="https://www.w3.org/WAI/WCAG${guidelines.version}/Techniques/" if="publication"/>
-			<param name="loc.guidelines" expression="https://w3c.github.io/wcag/guidelines/" if="editors"/>
-			<param name="loc.understanding" expression="https://w3c.github.io/wcag/understanding/" if="editors"/>
-			<param name="loc.techniques" expression="https://w3c.github.io/wcag/techniques/" if="editors"/>
-		</xslt>
-	</target>
-	
-	<!-- Understanding -->
-	<target name="understanding" depends="guidelines-xml, guidelines-versions, techniques-list, understanding-index" description="Generate formatted Understanding docs">
-		<makeurl file="${basedir}/understanding/" property="base.understanding"/>
-		<mkdir dir="${basedir}/output/understanding/"/>
-		<local name="output.dir"/>
-		<makeurl file="${basedir}/output/understanding/" property="output.dir"/>
-		<echo message="Outputting Understanding to ${output.dir}"/>
-		<xslt in="${inputdir.guidelines}/wcag.xml" out="output.html" style="xslt/generate-understanding.xslt" force="true">
+	<!-- JSON -->
+	<target name="json" depends="init, guidelines-xml, techniques-list, techniques-association">
+		<xslt in="${inputdir.guidelines}/wcag.xml" out="${inputdir.guidelines}/wcag.json" style="xslt/xml-to-json.xslt" force="true">
 			<classpath path="${classpath.saxon}"/>
 			<factory name="${xslt.factory}"/>
-			<param name="base.dir" expression="${base.understanding}"/>
-			<param name="output.dir" expression="${output.dir}"/>
-			<param name="guidelines.version" expression="${guidelines.version}"/>
-			<param name="loc.guidelines" expression="https://www.w3.org/TR/WCAG${guidelines.version}/" if="publication"/>
-			<param name="loc.understanding" expression="https://www.w3.org/WAI/WCAG${guidelines.version}/Understanding/" if="publication"/>
-			<param name="loc.techniques" expression="https://www.w3.org/WAI/WCAG${guidelines.version}/Techniques/" if="publication"/>
-			<param name="loc.guidelines" expression="https://w3c.github.io/wcag/guidelines/" if="editors"/>
-			<param name="loc.understanding" expression="https://w3c.github.io/wcag/understanding/" if="editors"/>
-			<param name="loc.techniques" expression="https://w3c.github.io/wcag/techniques/" if="editors"/>
 		</xslt>
-		<copy file="css/base.css" todir="output/understanding/"/>
-		<copy file="understanding/understanding.css" todir="output/understanding/"/>
-		<copy file="css/slicenav.css" todir="output/understanding/"/>
-		<copy todir="output/understanding/img/" flatten="true">
-			<fileset dir="understanding">
-				<patternset includes="*/img/*"/>
-			</fileset>
-		</copy>
 	</target>
 	
-	<target name="understanding-toc" depends="guidelines-xml" description="Generate the TOC for Understanding">
-		<xslt in="${inputdir.guidelines}/wcag.xml" out="understanding/toc.html" style="xslt/generate-understanding-toc.xslt" force="true">
+	<!-- Generic JSON -->
+	<target name="generic-json" depends="init, guidelines-xml">
+		<xslt in="${inputdir.guidelines}/wcag.xml" out="${inputdir.guidelines}/wcag.json" style="xslt/generic-xml-to-json.xslt" force="true">
 			<classpath path="${classpath.saxon}"/>
 			<factory name="${xslt.factory}"/>
 		</xslt>
 	</target>
 	
-	<target name="understanding-index" depends="understanding-toc" description="Flatten the understanding index file">
-		<makeurl file="${basedir}/understanding/" property="base.understanding"/>
-		<mkdir dir="${basedir}/output/understanding/"/>
-		<xslt in="${inputdir.understanding}/index.html" out="${basedir}/understanding/index-flat.html" style="xslt/flatten-document.xslt" force="true">
-			<classpath path="${classpath.saxon}"/>
-			<factory name="${xslt.factory}"/>
-			<param name="base.dir" expression="${base.understanding}"/>
-		</xslt>
-		<xslt in="${inputdir.understanding}/index-flat.html" out="${basedir}/output/understanding/index.html" style="xslt/base.xslt" force="true">
+	<!-- Redirects -->
+	<target name="redirects">
+		<xslt in="xslt/ids.xml" out="output/understanding/.htaccess" style="xslt/ids-to-redirects.xslt" force="true">
 			<classpath path="${classpath.saxon}"/>
 			<factory name="${xslt.factory}"/>
-			<param name="base.dir" expression="${base.understanding}"/>
-			<param name="guidelines.version" expression="${guidelines.version}"/>
-			<param name="loc.guidelines" expression="https://www.w3.org/TR/WCAG${guidelines.version}/" if="publication"/>
-			<param name="loc.understanding" expression="https://www.w3.org/WAI/WCAG${guidelines.version}/Understanding/" if="publication"/>
-			<param name="loc.techniques" expression="https://www.w3.org/WAI/WCAG${guidelines.version}/Techniques/" if="publication"/>
-			<param name="loc.guidelines" expression="https://w3c.github.io/wcag/guidelines/" if="editors"/>
-			<param name="loc.understanding" expression="https://w3c.github.io/wcag/understanding/" if="editors"/>
-			<param name="loc.techniques" expression="https://w3c.github.io/wcag/techniques/" if="editors"/>
 		</xslt>
 	</target>
 	
-	<!-- Requirements -->
-	<target name="requirements" depends="init">
-		<mkdir dir="output/requirements/${guidelines.version}"/>
-		<exec executable="curl">
-			<arg value="&quot;https://labs.w3.org/spec-generator/?type=respec&amp;url=https://raw.githack.com/w3c/wcag/master/requirements/${guidelines.version}/index.html&quot;"/>
-			<arg value="-o"/>
-			<arg value="output/requirements/${guidelines.version}/index.html"/>
-			<arg value="-f"/>
-			<arg value="--retry"/>
-			<arg value="3"/>
-		</exec>
-	</target>
-	
-	<!-- Conformance Challenges -->
-	<target name="conformance-challenges" depends="init">
-		<mkdir dir="output/conformance-challenges"/>
-		<exec executable="curl">
-			<arg value="&quot;https://labs.w3.org/spec-generator/?type=respec&amp;url=https://raw.githack.com/w3c/wcag/master/conformance-challenges/index.html&quot;"/>
-			<arg value="-o"/>
-			<arg value="output/conformance-challenges/index.html"/>
-			<arg value="-f"/>
-			<arg value="--retry"/>
-			<arg value="3"/>
-		</exec>
-	</target>
-	
-	<!-- Publish -->
-	<target name="deploy" depends="init, understanding-toc, techniques-toc" description="Generate content ready to deploy to gh-pages">
-		<property name="editors" value="true"/>
-		<antcall target="guidelines"/>
-		<antcall target="techniques"/>
-		<antcall target="understanding"/>
-		<antcall target="requirements"/>
-		<antcall target="conformance-challenges"/>
-		<copy todir="output/working-examples/">
-			<fileset dir="working-examples/"/>
-		</copy>
-	</target>
-	
-	<target name="publish-w3c" depends="init, understanding-toc, techniques-toc" description="Publish resources to w3c">
-		<property name="publication" value="true"/>
-		<antcall target="techniques"/>
-		<antcall target="understanding"/>
-		<copy todir="${w3ccvs.location}/WWW/WAI/WCAG${guidelines.version}/">
-			<fileset dir="output/"/>
-			<globmapper from="*index.html" to="*Overview.html"/>
-		</copy>
-		<copy todir="${w3ccvs.location}/WWW/WAI/WCAG${guidelines.version}/">
-			<fileset dir="output" excludes="index.html **/index.html"/>
-		</copy>
-		<copy todir="${w3ccvs.location}/WWW/WAI/WCAG${guidelines.version}/working-examples/">
-			<fileset dir="working-examples/"/>
-			<globmapper from="*index.html" to="*Overview.html"/>
-		</copy>
-		<copy todir="${w3ccvs.location}/WWW/WAI/WCAG${guidelines.version}/working-examples/">
-			<fileset dir="working-examples/" excludes="index.html **/index.html"/>
-		</copy>
-	</target>
-	
-	<!-- JSON -->
-	<target name="json" depends="init, guidelines-xml, techniques-list, techniques-association">
-		<xslt in="${inputdir.guidelines}/wcag.xml" out="${inputdir.guidelines}/wcag.json" style="xslt/xml-to-json.xslt" force="true">
+	<!-- SQL for CR test tool -->
+	<target name="cr-sql" depends="guidelines-xml, guidelines-versions, techniques-list, techniques-association">
+		<xslt in="${inputdir.guidelines}/wcag.xml" out="${inputdir.guidelines}/test-sql.sql" style="xslt/generate-test-sql.xslt" force="true">
 			<classpath path="${classpath.saxon}"/>
 			<factory name="${xslt.factory}"/>
 		</xslt>
 	</target>
 	
-	<!-- Everything -->
-	<target name="all" depends="init, understanding, techniques" description="Generate entire suite"/>
-	
 	<!-- === Sanity check === -->
 	<target name="sanity" depends="init" description="Identifies inconsistencies in documents"></target>
 	
-</project>
\ No newline at end of file
+</project>
diff --git a/conformance-challenges/index.html b/conformance-challenges/index.html
index 67a2118a15..8f43476527 100644
--- a/conformance-challenges/index.html
+++ b/conformance-challenges/index.html
@@ -1,17 +1,30 @@
 <!DOCTYPE html>
 <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
     <head>
-        <meta charset="UTF-8" />
+        <meta charset="UTF-8"/>
         <title>Challenges with Accessibility Guidelines Conformance and Testing, and Approaches for Mitigating Them</title>
         <script src="https://www.w3.org/Tools/respec/respec-w3c-common" class="remove"></script>
-    	<script src="../script/wcag.js" class="remove"></script>
-    	<script src="respec-config.js" class="remove"></script>
-    	<script src="../biblio.js" class="remove"></script>
-        <link rel="stylesheet" type="text/css" href="../css/sources.css" class="remove" />
+        <script src="../script/wcag.js" class="remove"></script>
+        <script src="respec-config.js" class="remove"></script>
+        <script src="../biblio.js" class="remove"></script>
+        <link rel="stylesheet" type="text/css" href="../css/sources.css" class="remove"/>
+<style>
+.silver {
+	font-style: italic; 
+		font-size: 110%;
+}
+.mitigation {
+	font-weight: bold; 
+		font-size: 110%;
+}
+q {
+    color: darkred;
+}
+</style>
     </head>
     <body>
         <section id="abstract">
-		
+
 		<!--
 		<div class ="ednote"> 
 			<p>Publication as a Working Draft does not necessarily represent a consensus of the Working Group and does not imply endorsement by the W3C Membership. This is a draft document and may be updated, replaced or obsoleted by other documents at any time. It is inappropriate to cite this document as other than work in progress.</p>
@@ -20,24 +33,25 @@
 			This draft is published to obtain public review of the issues identified and solutions proposed. </p>
 		</div>
 		-->
-		
-		<p>This document explores how the page-based conformance verification of the WCAG 2.0 and 2.1 accessibility guidelines are challenging to apply to certain websites and web applications.
-            This document also explores ideas on how future versions of guidelines might address these challenges. 
+
+		<p>This document explores the page-based conformance verification approach used by WCAG 2.0 and 2.1 accessibility guidelines. It explains how this approach is challenging to apply to certain websites and web applications.
+            It also explores ideas on how future versions of guidelines might address these challenges. 
 			This document focuses primarily on challenges to large, highly complex, dynamic sites.  
-			Other efforts in WAI are looking at different aspects of conformance for different types of sites.</p>
-         
-		<p>The challenges covered broadly fall into four main areas:</p>
+			Other efforts in WAI are looking at different aspects of conformance for other types of sites.</p>
+
+		<p>The challenges covered broadly fall into five main areas:</p>
             <ol>
-		    <li>Numerous provisions need human involvement to test and verify conformance, which is especially challenging to scale for <a>large websites</a> and for <a>dynamic websites</a>;</li>
-			    <li>Large and dynamic sites with their changing permutations may be difficult to validate;</li>
-			<li>Third parties frequently add and change content on large and dynamic sites;</li>
+                <li>Numerous provisions need human involvement to test and verify conformance, which is especially challenging to scale for <a>large websites</a> and for <a>dynamic websites</a>;</li>
+                <li>Large and dynamic sites with their changing permutations may be difficult to validate;</li>
+                <li>Third parties frequently add and change content on large and dynamic sites;</li>
                 <li>Applying a web-based, and page-based conformance model can be challenging to do for non-web Information and Communications Technologies (ICT).</li>
+                <li>The centrality of <q>Accessibility Supported</q> in the many provisions tied to use with assistive technologies and platform accessibility features, combined with the lack of definition of what constitutes Accessibility Supported, further exacerbates the need for expert human judgement (#1 above), as well as potential different and non-overlapping sets of these features used when including 3rd party content (#3 above).</li>
             </ol>
-	    <p>The purpose of this document is to help understand those challenges more holistically, and explore approaches to mitigating those challenges so that we can address the
-	    challenges more fully in future accessibility guidelines such as WCAG 3.0 (now in early development) where the <a href="https://www.w3.org/2019/12/ag-charter.html#scope">W3C Working Group Charter</a> expressly anticipates a new conformance model.</p>
+	    <p>The purpose of this document is to help understand those challenges more holistically, and explore approaches for mitigating them so that we can address such
+	    challenges more fully in future accessibility guidelines including the forthcoming <a href="https://www.w3.org/WAI/wcag3">W3C Accessibility Guidelines (WCAG 3.0)</a> (now in early development) where the <a href="https://www.w3.org/2019/12/ag-charter.html#scope">W3C Working Group Charter</a> expressly anticipates a new conformance model.</p>
         </section>
         <section id="sotd">
-        	<p>To comment, <a href="https://github.com/w3c/wcag/issues/new">file an issue in the <abbr title="World Wide Web Consortium">W3C</abbr> WCAG GitHub repository</a>. Please indicate your issue is for this document by using the word <q>Challenges:</q> as the first word of your issue's title. Although the proposed Success Criteria in this document reference issues tracking discussion, the Working Group requests that public comments be filed as new issues, one issue per discrete comment. It is free to create a GitHub account to file issues. If filing issues in GitHub is not feasible, send email to <a href="mailto:public-agwg-comments@w3.org?subject=Challenges%20public%20comment">public-agwg-comments@w3.org</a> (<a href="https://lists.w3.org/Archives/Public/public-agwg-comments/">comment archive</a>).</p>
+        	<p>To comment, <a href="https://github.com/w3c/wcag/issues/new">file an issue in the <abbr title="World Wide Web Consortium">W3C</abbr> WCAG GitHub repository</a>. Please indicate your issue is for this document by using the word <q>Challenges:</q> as the first word of your issue&apos;s title. Although the proposed Success Criteria in this document reference issues tracking discussion, the Working Group requests that public comments be filed as new issues, one issue per discrete comment. It is free to create a GitHub account to file issues. If filing issues in GitHub is not feasible, send email to <a href="mailto:public-agwg-comments@w3.org?subject=Challenges%20public%20comment">public-agwg-comments@w3.org</a> (<a href="https://lists.w3.org/Archives/Public/public-agwg-comments/">comment archive</a>).</p>
         </section>
         <section class="introductory" id="intro">
             <h2>Introduction</h2>
@@ -45,9 +59,9 @@ <h2>Introduction</h2>
 		    <h3>Problem Statement</h3>
 
 <p>Assessing the accessibility of a website is of critical importance.
-Website authors want to have website accessibility assessments so they can
+Website authors want to have website accessibility assessments in order to
 understand the places where visitors with disabilities may be unable to use
-that site so that they can address them as much as possible.  External
+a site in order to alleviate those difficulties.  External
 parties who have an interest in the accessibility of a website likewise want
 to have website assessments so they can understand whether the site meets
 their accessibility fitness criteria.  To aid in this assessment, the
@@ -56,16 +70,15 @@ <h3>Problem Statement</h3>
 (W3C)</a> developed the <a href="https://www.w3.org/TR/WCAG21/">Web Content
 Accessibility Guidelines (WCAG</a>), containing
 both a rich set of success criteria to meet the needs of people with
-disabilities, as well as conformance requirements for same.  Assessing
+disabilities and conformance requirements for the same.  Assessing
 conformance of a website to all of the success criteria is how accessibility
 assessments have been done to date, either through assessing every individual
 page, or through a page sampling approach.
 </p>
-<p>While the challenges discussed in this document apply to websites and web applications broadly, this early version of the document focuses particularly on situations involving large, dynamic, and <a>complex websites</a>.
-There are valid reasons WCAG 2 and related resources have the conformance
-model they do; failures to conform to the current model are likely to present a barrier for people with disabilities. 
+<p>While the challenges discussed in this document apply to websites and web applications broadly, this document focuses particularly on situations involving large, dynamic, and <a>complex websites</a>.
+There are important reasons WCAG 2 and related resources have the guidelines and success criteria they do. Failure to conform to these is likely to erect a barrier for people with disabilities. 
 The issues raised in this document do not mean sites should
-not strive to conform to WCAG 2. It is also vital to consider aspects beyond the conformance model that lead to accessibility issues found during late stage testing, such as the lack of accessibility prioritization, training, and integration throughout the design, development, and maintenance processes. A new version of accessibility guidelines, W3C Accessibility Guidelines 3.0 (WCAG 3.0), rethinks all aspects of the accessibility guidance and is expressly chartered to develop a new conformance model that will help to address these challenges. 
+not strive to conform to WCAG 2. But it is also vital to consider aspects that commonly lead to accessibility challenges found during late stage testing, such as a lack of accessibility prioritization, training, and integration throughout the design, development, and maintenance process. A new version of accessibility guidelines, <a href="https://www.w3.org/WAI/wcag3">W3C Accessibility Guidelines 3.0 (WCAG 3.0)</a>, rethinks all aspects of accessibility guidance. It is also expressly chartered to develop a new conformance model which should help address the challenges explored in this document. 
 	    </p>
 		    <p>
 Large websites are often highly complex, with substantial dynamic content,
@@ -85,11 +98,11 @@ <h3>Problem Statement</h3>
 		    <p>Assessing conformance of such large, highly complex, dynamic sites to the <a href="https://www.w3.org/TR/WCAG20/">Web Content Accessibility Guidelines (WCAG) 2.0</a> [[wcag20]] or <a href="https://www.w3.org/TR/WCAG21/">2.1</a> [[wcag21]] has proved difficult. The <a href="https://www.w3.org/TR/WCAG20/#conformance">Web Content Accessibility Guidelines 2.0 include a set of normative requirements</a> <q>in order for a web page to conform to WCAG 2.0,</q> including that conformance <q>is for full Web page(s) only, and cannot be achieved if part of a Web page is excluded,</q> along with a Note that states <q>If a page cannot conform (for example, a conformance test page or an example page), it cannot be included in the scope of conformance or in a conformance claim.</q> The conformance requirements also state what is allowed in any optional <q>Conformance Claims,</q> starting with: <q>Conformance is defined only for  <a href="https://www.w3.org/TR/WCAG20/#webpagedef">Web pages</a>. However, a conformance claim may be made to cover one page, a series of pages, or multiple related Web pages.</q>  For the purposes of this document, we use the term <q>WCAG 2.x conformance model</q> to refer to the normative text in the <a href="https://www.w3.org/TR/WCAG20/#conformance">Conformance section</a> of WCAG 2.0 and WCAG 2.1.
 		    </p>
 
-<p>This WCAG 2.x conformance model contains a mitigation related to partial conformance for 3rd party content (see <a href="#Challenge-3.1">Sec. 3.1: Treatment of 3rd party content and Statements of Partial Conformance</a> below). Further in recognition of these challenges, the W3C Note <a href="http://www.w3.org/tr/wcag-em/">Website Accessibility Conformance Evaluation Methodology (WCAG-EM) 1.0</a> [[wcag-em]] was published in 2014 to provide <q>guidance on evaluating how well websites conform to the Web Content Accessibility Guidelines.</q> This W3C document <q>describes a procedure to evaluate websites and includes considerations to guide evaluators and to promote good practice,</q> which can help organizations to make a conformance claim, while acknowledging that there may be errors on pages not in the sample set or that were not picked up by automated evaluation tools on pages that were not in the human evaluation sample. While WCAG-EM provides a practical method for claiming conformance for a website, it doesn't fully address the challenges in making every part of every page in a large, dynamic website conform to every success criterion.
+<p>This WCAG 2.x conformance model contains a mitigation related to partial conformance for 3rd party content (see <a href="#Challenge-3.1">Sec. 3.1: Treatment of 3rd party content and Statements of Partial Conformance</a> below). Further in recognition of these challenges, the W3C Note <a href="http://www.w3.org/tr/wcag-em/">Website Accessibility Conformance Evaluation Methodology (WCAG-EM) 1.0</a> [[wcag-em]] was published in 2014 to provide <q>guidance on evaluating how well websites conform to the Web Content Accessibility Guidelines.</q> This W3C document <q>describes a procedure to evaluate websites and includes considerations to guide evaluators and to promote good practice,</q> which can help organizations to make a conformance claim, while acknowledging that there may be errors on pages not in the sample set or that were not picked up by automated evaluation tools on pages that were not in the human evaluation sample. While WCAG-EM provides a practical method for claiming conformance for a website, it doesn&apos;t fully address the challenges in making every part of every page in a large, dynamic website conform to every success criterion.
 </p>
 
 <p>
-Also, the <a href="http://www.w3.org/tr/atag/">Authoring Tool Accessibility Guidelines 2.0 (ATAG)</a> [[atag20]] <q>provides guidelines for designing web content authoring tools that are both more accessible to authors with disabilities</q> as well as <q>is designed to enable, support, and promote the production of more accessible web content by all authors.</q> Leveraging ATAG-conformant authoring tools can significantly help with preventing accessibility issues from occurring on a website. A number of the challenges with conformance could be addressed with authoring tools, and in future versions of this document we hope to describe those in more detail. 
+Also, the <a href="http://www.w3.org/tr/atag/">Authoring Tool Accessibility Guidelines 2.0 (ATAG)</a> [[atag20]] <q>provides guidelines for designing web content authoring tools that are both more accessible to authors with disabilities</q> as well as <q>is designed to enable, support, and promote the production of more accessible web content by all authors.</q> Leveraging ATAG-conformant authoring tools can significantly help with preventing accessibility issues from occurring on a website. Moreover, several challenges with conformance could better be addressed by authoring tools or user agents, both of which are scoped for nonnormative <a href="https://www.w3.org/WAI/wcag3">WCAG 3.0</a> guidance. 
 </p>
 
 <p>
@@ -105,7 +118,7 @@ <h3>Problem Statement</h3>
 time it takes for a site visitor to conduct a task, as alternative
 measures that could complement conformance-based metrics.  Unfortunately, this research report
 	was last updated in May 2014, and has not progressed to being a
-	published W3C Note.  The Research and Development Working Group was not renewed by W3C Membership in 2015, though a Research Questions Task Force, under the Accessible Platform Architecture (APA) Working Group, is able to look at similar types of issues.
+	published W3C Note.  The Research and Development Working Group was not renewed by W3C Membership in 2015, though a Research Questions Task Force, under the Accessible Platform Architecture (APA) Working Group, is able to look at similar issues.
 </p>
 
 <p>Finally, the <a
@@ -133,76 +146,113 @@ <h3>Problem Statement</h3>
 	    </p>
 	</section> 
 
-	    <section class="introductory" id="Approaches">
-		    <h3>Approaches for Mitigating Challenges with Accessibility Guidelines Conformance and Testing</h3>
+		<section class="introductory silver">
+		    <h3>Silver Research Findings</h3>
+
+		<p>Now known as <a href="https://www.w3.org/WAI/wcag3">W3C Accessibility Guidelines (WCAG 3.0)</a>, this next iteration of W3C
+		accessibility guidance was conceived and designed to be research-based, coming out of the <q>Silver Research</q> effort. A summary of the conformance related findings from Silver research contributed to this document, and is provided in its entirety as <a href="#Appendix-C">Appendix C</a> below. Findings that expand on the four main challenges enumerated in this document are integrated throughout. Additional enumerated challenges identified by Silver research are also articulated as independent, specific challenges.</p>
+
+<aside>
+	Note that Silver Research Findings are styled uniquely in this revision for ready identification.
+</aside>
+
+		<p>Working
+over many years, the Silver Task Force of the Accessibility Guidelines Working
+Group (AGWG) and the Silver Community Group collaborated with researchers on
+questions that the Silver Groups identified. This research was used to develop
+11 problem statements that needed to be solved for Silver. The conformance-related Silver generated Problem Statements are included as originally submitted for this document below in <a href="#Appendix-C">Appendix C</a>.</p>
+		<aside>
+			NOTE: Extracts from Silver research incorporated in this document refer to <q>Problem Statements</q> with the same meaning this document ascribes to the term: <q>Challenges</q>.
+		</aside>
+
+	    </section>
+
+	    <section class="introductory mitigation">
+		    <h3>Mitigation Approaches</h3>
 
 <p>In addition to describing in detail the challenges of
 assessing conformance, this document also explores some approaches to
 mitigating those challenges.  Each of the main challenges sections below
 describes one or more significant mitigation approaches.
 </p>
+<aside>
+	Note that mitigations are styled uniquely in this revision for ready identification.
+</aside>
 
 <p>While some approaches may be more applicable to a particular website design than others; 
 and not all approaches may be appropriate or practical for a particular website, it is likely that many websites can 
-utilize at least some of these approaches. These approaches are proposed as ways through which these conformance challenges 
-might be able to be mitigated, while maximizing the likelihood that all website visitors will be able to use the site effectively. 
+utilize at least some of these approaches. They are proposed as ways by which these conformance challenges 
+may be mitigated, while maximizing the likelihood that all website visitors will be able to use the site effectively. 
 Though the challenges described in this document illustrate that it is difficult for large, complex, and/or dynamic websites to ensure a site has no defects, 
-mitigation strategies may be able to create a website that people with disabilities can use even though some conformance issues exist.
+mitigation strategies may be able to help create a website that people with disabilities can use even though some conformance issues may persist.
 </p>
 
 	    </section>
 
-	    <section class="introductory" id="goal">
+	    <section class="introductory">
 	    <h3>Goals</h3>
 
 	    <p>This document has two key goals:</p>
-	    <ol>
-	    	<li>To develop, catalog, and characterize the challenges with accessibility guidelines conformance, and conformance verification that have arisen both through the multi-year research process preceding work on the next major revision of W3C accessibility guidelines to be known as the W3C Accessibility Guidelines (WCAG 3.0) which have been in development under the name <q>Silver,</q> as well as through active <a href="https://www.w3.org/WAI/GL/task-forces/silver/wiki/Main_Page#Silver_Conformance_.28Active.29">discussion of conformance taking place in the Silver Task force</a> subgroup of the W3C <a href="https://www.w3.org/WAI/GL/">Accessibility Guidelines Working Group (AGWG)</a>.</li>
-		    <li>To develop, catalog, and characterize mitigation approaches to these challenges, so that websites can be as accessible as possible, and are better able assess how well their sites are accessible to visitors with disabilities.</li>
-	    </ol>
+        <ol>
+            <li>To develop, catalog, and characterize the challenges with accessibility guidelines conformance, and conformance verification that have arisen both through the multi-year research process preceding work on <a href="https://www.w3.org/WAI/wcag3">W3C Accessibility Guidelines (WCAG 3.0)</a> which have been in development under the name <q>Silver,</q> as well as through active discussion in the <a href="https://www.w3.org/WAI/GL/task-forces/silver/wiki/Substantial_Conformance">Silver Conformance Options Subgroup</a>.</li>
+            <li>To develop, catalog, and characterize mitigation approaches to these challenges, so that websites can be as accessible as possible and better assessed for accessibility to visitors with disabilities.</li>
+        </ol>
 
       <p>A better understanding of the situations in which the
       WCAG 2.x conformance model may be difficult to apply could lead to more effective conformance models
       and testing approaches in the future.</p>     
   
       <p>It is important to recognize that success criteria in WCAG 2.x are quite distinct from the conformance model. These criteria describe approaches to content accessibility that are thoughtfully designed to enable people with a broad range of disabilities to effectively consume and interact with web content. Challenges with the conformance model do not in any way invalidate the criteria. For example, while requiring human judgment to validate a page limits testing to sampling of templates, flows, and top tasks, etc. (see <a href="#Challenge-1">Challenge #1 below</a>), without that human judgement it may not be possible to deliver a page that makes sense to someone with a disability. Similarly, while it may not be possible to know that all third party content is fully accessible (see <a href="#Challenge-3">Challenge #3 below</a>), without review of that content by someone sufficiently versed in accessibility it may not be possible to be sure that pages containing third party content fully conform to WCAG 2.x. Human judgement is a core part of much of WCAG 2.x for good reasons, and the challenges that arise from it are important to successfully grapple with.</p>
-	    </section>
-      <section class="introductory">
+        </section>
+        <section class="introductory">
             <h3>Additional Background</h3>
-       <p>One of the reasons for publishing this draft document is to seek additional contributions from the wider web community:</p>
-        <ul>
-            <li>Any additional challenges, or further illustration of challenges in the existing identified areas below;</li>
-            <li>Contributions to the mitigation approaches, and questions or concerns about the mitigation approaches;</li>
-        </ul>
-       <p>We seek to gain a thorough understanding of the challenges faced by large, complex, and dynamic websites who are attempting to provide accessible services to their web site users. It is expected that a more thorough understanding of these challenges can lead to either a new conformance model, or an alternative model that is more appropriate for large, complex, and/or dynamic websites (in WCAG 3.0).</p>
-
-        <p>This document also includes previously published research from the Silver Task Force and Community Group that was related to Challenges with Accessibility Guidelines Conformance and Testing. There is some
-	    overlap between the challenges captured in this published research, and the challenges enumerated in the first 4 sections of this document. The research findings will be folded into the other sections as appropriate in
-	    future versions of this document.</p>
-	    <p>Present in this current draft of this document is an initial discussion of approaches to mitigate the impact of the challenges cited. Previous drafts emphasized collecting a comprehensive inventory of challenges, we believe our collection is now sufficiently mature to begin enumerating and considering the various mitigating approaches that have been suggested by various stakeholders. We are publishing this document now to seek wide review to further catalogue and characterize the challenges and mitigation approaches, so that this work can become input into the next major revision of W3C accessibility guidelines (now <a href="https://www.w3.org/2019/12/ag-charter.html">chartered by W3C for eventual release as WCAG 3.0</a>).
+            <p>This document is published to seek additional contributions from the wider web community on:</p>
+            <ul>
+                <li>Any additional challenges, or further illustration of challenges in the existing identified areas below;</li>
+                <li>Contributions to the mitigation approaches, and questions or concerns about the mitigation approaches;</li>
+            </ul>
+            <p>We seek to gain a thorough understanding of the challenges faced by large, complex, and dynamic websites who are attempting to provide accessible services to their web site users. It is expected that a more thorough understanding of these challenges can lead to either a new conformance model, or an alternative model that is more appropriate for large, complex, and/or dynamic websites (in <a href="https://www.w3.org/WAI/wcag3">WCAG 3.0</a>).</p>
+
+            <p class="silver">This document also includes previously published research from the Silver Task Force and Community Group that is related to Challenges with Accessibility Guidelines Conformance and Testing. There is some overlap between the challenges captured in this published research and the challenges enumerated in the first 4 sections of this document. The research findings have been folded into other sections of this document as appropriate.</p>
+
+            <p class="mitigation">Also present in this document is an introductory discussion of approaches to mitigate the impact of the challenges cited that have been suggested by various stakeholders. We are publishing this updated draft now to continue seeking wide review to further catalogue and characterize the challenges and mitigation approaches, so that this work can become input into <a href="https://www.w3.org/WAI/wcag3">W3C accessibility guidelines (WCAG 3.0)</a>.
 	    </p>
 	    </section>
 	</section>
 
-      <section class="introductory">
-            <h2>Key Terms</h2>
-			<p>The following terms are used in this document:</p>
-			<dl>
-				<dt><dfn>large websites</dfn></dt>
-				<dd>Websites with thousands of pages, let alone hundreds of thousands or more.</dd>
-				<dt><dfn>dynamic websites</dfn></dt>
-				<dd>Websites that are constantly being updated with new content, possibly hundreds of times an hour, or even thousands of times per second.</dd>
-				<dt><dfn>complex websites</dfn></dt>
-				<dd>Web apps that are similar in scope to complex desktop applications (e.g. a full-fledged spreadsheet or word processor web application). Or websites with a large portion of pages that are generated upon demand, pulling from dozens or more different content sources.</dd>
-	</dl>
-      </section>
+    <section class="introductory">
+        <h2>Key Terms</h2>
+        <p>The following terms are used in this document:</p>
+        <dl>
+            <dt><dfn>large websites</dfn></dt>
+            <dd>Websites with thousands of pages, let alone hundreds of thousands or more.</dd>
+            <dt><dfn>dynamic websites</dfn></dt>
+            <dd>Websites that are constantly being updated with new content, possibly hundreds of times an hour, or even thousands of times per second.</dd>
+            <dt><dfn>complex websites</dfn></dt>
+            <dd>Web apps that are similar in scope to complex desktop applications (e.g. a full-fledged spreadsheet or word processor web application). Or websites with a large portion of pages that are generated upon demand, pulling from dozens (or more) different content sources.</dd>
+	    </dl>
+    </section>
 	<section id="Challenge-1">
             <h2>Challenge #1: Scaling Conformance Verification</h2>
             <p>A challenge common to many success criteria is the inability for automatic testing to fully validate conformance and the subsequent time, cost, and expertise needed to perform the necessary manual test to cover the full range of the requirements. 
 	    HTML markup can be automatically validated to confirm that it is used according to specification, but a human is required to verify whether the HTML elements used correctly reflect the meaning of the content. For example, text on a web page marked as contained in a paragraph element may not trigger any failure in an automated test, nor would an image with alternative text  equal to <q>red, white, and blue bird,</q> but a human will identify that the text needs to be enclosed in a heading element to reflect the actual use on the page, and also that the proper alternative text for the image is <q>American Airlines logo.</q> Many existing accessibility success criteria require an informed human evaluation to ensure that the human end-users benefit from conformance.
 	    The same can be said of very large web-based applications that are developed in an agile manner with updates delivered in rapid succession, often on an hourly basis.</p>
             <p>We can think of this as the distinction between quantitative and qualitative analysis. We know how to automatically test for and count the occurrences of relevant markup. However, we do not yet know how to automatically verify the quality of what that markup conveys to the user. In the case of adjudging appropriate quality, informed human review is still required.</p>
-<p class="mitigation">There are a number of approaches for mitigating scaling
+
+	    <p><a href="#Appendix-A">Appendix A</a> describes challenges with applying the WCAG 2.x conformance model to specific Guidelines and Success Criteria, primarily based on required human involvement in evaluation of conformance to them. The list is not exhaustive, but it covers the preponderance of known challenges with all A and AA Success Criteria.</p>
+	<section class="silver">
+		<h3>Silver Research Findings</h3>
+		<p>Silver research identified two further challenges related to scaling conformance verification:</p>
+
+        <ol>
+            <li>In <a href="#testing-constraints">Constraints on <q>What is Strictly Testable</q></a> Silver finds that <q>The requirement for valid and reliable testability for WCAG success criteria presents a structural barrier to including the needs of people with disabilities whose needs are not strictly testable.</q> User needs such as thos articulated by the W3C&apos;s <a href="http://www.w3.org/WAI/GL/task-forces/coga/">Cognitive and Learning Disabilities (COGA) Task Force</a> in their extensive W3C Note publication <a href="https://www.w3.org/TR/coga-usable/">Making content usable for people with cognitive and learning disabilities</a> [[coga-usable]] only expand and exacerbate the need for expert human testing. As silver also notes: <q>The entire principle of understandable is critical for people with cognitive disabilities, yet success criteria intended to support the principle are not easy to test for or clear on how to measure.</q></li>
+            <li>Silver also finds that <a href="#human-testable">Human evaluation</a> does not yield consistent conclusions: <q>Regardless of proficiency, there is a significant gap in how any two human auditors will identify a success or fail of criteria. &#x2026; Ultimately, there is variance between: any two auditors; &#x2026; Because there&apos;s so much room for human	error, an individual may believe they&apos;ve met a specific conformance model when, in reality, that&apos;s not the case. &#x2026; There isn&apos;t a standardized approach to how	the conformance model applies to success criteria at the organizational level and in specific test case	scenarios.</q></li>
+        </ol>
+	</section>
+
+	    <section class="mitigation">
+		    <h3>Mitigations</h3>
+		    <p>There are a number of approaches for mitigating scaling
 challenges.  For example, if pages can be built using a small number of page
 templates that are fully vetted for conformance to criteria relating to
 structure, heading use, and layout, then pages generated with those templates
@@ -213,15 +263,19 @@ <h2>Challenge #1: Scaling Conformance Verification</h2>
 some situations is to encode website content in a higher-level abstraction
 from HTML (e.g. a wiki-based website, when content authors can specify that a
 particular piece of text is to be emphasized strongly [which would be rendered
-within a <code><strong></strong></code> block], but they cannot specify that a
-particular piece of text is to be made boldface [so that <code><b></b></code> is never part of the website]).  While none of these approaches can mitigate every challenge in conformance and testing with every success criterion, they are powerful approaches where applicable to help minimize accessibility issues in websites.
+within a <code>&lt;strong&gt; &lt;/strong&gt;</code> block], but they cannot specify that a
+particular piece of text is to be made boldface [so that <code>&lt;b&gt; &lt;/b&gt;</code> markup is never part of the website]).  While none of these approaches can mitigate every challenge in conformance and testing with every success criterion, they are powerful approaches where applicable to help minimize accessibility issues in websites.
 </p>
-	    <p><a href="#Appendix-A">Appendix A</a> describes challenges with applying the WCAG 2.x conformance model to specific Guidelines and Success Criteria, primarily based on required human involvement in evaluation of conformance to them. In this draft, the list is not exhaustive, but we intend it to cover all known challenges with all A and AA Success Criteria, by the time this Note is completed.</p>
+	    </section>
+
         </section>
 	<section id="Challenge-2">
             <h2>Challenge #2: Large, complex, and dynamic websites may have too many changing permutations to validate effectively</h2>
-            <p>Large websites often have complex content publishing pipelines, which may render content dynamically depending upon a large number of variables (such as what is known about the logged in user and her content preferences, the geographical location that the user is visiting the site from, and the capabilities of the web rendering agent being used). It is difficult, and may not be feasible, to validate every possible publishing permutation with a page-level test, each of which can have an impact on whether that particular rendering of the content at that particular moment conforms.</p>
-<p class="mitigation">Approaches used in quality assurance and quality engineering of software code
+            <p>Large websites often have complex content publishing pipelines, which may render content dynamically depending upon a large number of variables (such as what is known about logged in users and their content preferences, the geographical location that the users are visiting the site from, and the capabilities of the web rendering agent being used). It is difficult, and may not be feasible, to validate every possible publishing permutation with a page-level test, each of which can have an impact on whether that particular rendering of the content at that particular moment conforms.</p>
+
+	    <section class="mitigation">
+		    <h3>Mitigations</h3>
+<p>Approaches used in quality assurance and quality engineering of software code
 can be used with software that generates dynamic web content.  One of these is
 Unit Testing (or Component Testing), where each individual step in the content
 publishing pipeline is tested independent of the other, with a broad range of
@@ -233,10 +287,11 @@ <h2>Challenge #2: Large, complex, and dynamic websites may have too many changin
 there is no guarantee of finding all potential bugs, or assuring a software
 system is bug-free. 
 </p>
+	    </section>
         </section>
 	<section id="Challenge-3">
             <h2>Challenge #3: 3rd party content</h2>
-            <p>Very large, highly dynamic web sites generally aggregate content provided by multiple entities. Many of these are third parties with the ability to add content directly to the website — including potentially every website visitor. The relationship to the 3rd party can be that of a user, a customer, or a professional provider of content such as an advertiser. While the website can provide guidance on how to post content so that it meets accessibility guidance, it is ultimately up to those third parties to understand and correctly implement that guidance. Constraints on page templates and editing facilities can greatly help minimize accessibility issues but, even with automated checks prior to accepting the post, some Success Criteria require human assessment.</p>
+            <p>Very large, highly dynamic web sites generally aggregate content provided by multiple entities. Many of these are third parties with the ability to add content directly to the website&mdash;including potentially every website visitor. The relationship to the 3rd party can be that of a user, a customer, or a professional provider of content such as an advertiser. While the website can provide guidance on how to post content so that it meets accessibility guidance, it is ultimately up to those third parties to understand and correctly implement that guidance. Constraints on page templates and editing facilities can greatly help minimize accessibility issues but, even with automated checks prior to accepting the post, some Success Criteria require human assessment.</p>
             <p>Copyright, commercial agreements, and similar constraints that restrict the ability to modify or impose requirements on third party content can also make full conformance claims infeasible.</p>
 	    <section id="Challenge-3.1">
 <h3>Treatment of 3rd party content and Statements of Partial Conformance</h3>
@@ -245,34 +300,42 @@ <h3>Treatment of 3rd party content and Statements of Partial Conformance</h3>
 Partial Conformance</a>. [[wcag21]] It provides two options for such content — that
 pages with 3rd party content may:</p>
 <ol>
-	<li>Make a determination of conformance <q>based on best knowledge,</q> for example
-by monitoring and repairing non-conforming content within 2 business days;
+	<li>Make a determination of conformance <q>based on best knowledge,</q> for example by monitoring and repairing non-conforming content within 2 business days;
 or</li>
-<li>Make a statement of partial conformance if the page could conform if the
-3rd party content were removed.</li>
+    <li>Make a statement of partial conformance if the page could conform if the 3rd party content were removed.</li>
 </ol>
 <p>The provision of monitoring and required repair within a 2 business day
-window doesn't address the underlying challenge of pages with (3rd party)
+window doesn&apos;t address the underlying challenge of pages with (3rd party)
 content that may be updating tens or hundreds of times within that 2 day
 window. For <a>large websites</a> with
 hundreds of thousands of pages or more with a significant amount of 3rd
 party content, the necessity for human involvement in the evaluation of 3rd
-party content doesn't scale.</p>
-<p>A statement of partial conformance doesn't address the underlying challenge of improving the usability of 3rd party content.  While it might allow a web page/website visitor to be forewarned in advance that they should 
+party content doesn&apos;t scale.</p>
+<p>A statement of partial conformance doesn&apos;t address the underlying challenge of improving the usability of 3rd party content.  While it might allow a web page/website visitor to be forewarned in advance that they should 
 anticipate encountering inaccessible content, it does little to practically enable large sites to address such concerns.</p>
+	    </section>
+
+	<section class="silver">
+		    <h3>Silver Research Findings</h3>
 
-<p class="mitigation">There are several approaches to the challenge of 3rd
+		    <p>Silver cited <q>Third parties documents, applications and services</q> among its list of conformance related problem statements. See <a href="#3rd">the reference in Appendix C</a> below.
+		    </p>
+
+	</section>
+<section class="mitigation">
+	<h3>Mitigations</h3>
+	<p>There are several approaches to the challenge of 3rd
 party content accessibility.  Where that content is provided as part of a
 commercial contract, the terms of the contract may include requirements around
 accessibility.  Where the content comes from potentially any website visitor or
-user, those visitors can be constrained in the types of contributions they can
+user, those visitors could be constrained in the types of contributions they can
 make (e.g. prevented from using non-semantic text attributes like boldface), or
 prompted to add accessibility metadata (e.g. so that images are uploaded along
 with ALT text), or reminded about good accessibility practices (e.g. told not
 to refer to sensory characteristics in their text).  Such approaches may add
-substantial friction, especially to individual website visitors and users, to
-the point that they may be disinclined to make contributions.  Further, they
-aren't a guarantee of perfection in those contributions (Is the ALT text
+substantial friction, especially to individual website visitors and users, however, to
+the point that they might be dissuaded from making contributions at all.  Further, they
+aren&apos;t a guarantee of perfection in those contributions (Is the ALT text
 thoughtfully authored, or just filler text to make the upload happen? Did the
 text truly avoid reference to sensory characteristics?).  Nonetheless, these
 are some approaches to consider to help minimize the amount of 3rd party
@@ -281,12 +344,28 @@ <h3>Treatment of 3rd party content and Statements of Partial Conformance</h3>
 help make accessibility practices more ubiquitous.
 </p>
 </section>
-        </section>
+</section>
         <section id="Challenge-4">
             <h2>Challenge #4: Non-Web Information and Communications Technologies </h2>
             <p>The core principles, and many of the guidelines, contained in WCAG 2.x, are broadly applicable outside of the web context. For example, no matter the technology, information presented to humans needs to be perceivable by them in order for them to access and use it. At the same time, some of the specific guidelines and especially some of the individual success criteria of WCAG 2.x are  specifically scoped to web content and web technologies, and may be difficult to apply to non-web information and communications technologies (as set forth in the W3C Note <a href="https://www.w3.org/TR/wcag2ict/">Guidance on Applying WCAG to non-web Information and Communication Technologies (WCAG2ICT)</a>). [[wcag2ict]] Furthermore, the state of programmatic test tools for assessing whether non-web information and communications technologies meet various WCAG 2.x success criteria varies widely with the type of non-web document, the operating system, and the user interface toolkits used to create the non-web software. Therefore, it is potentially the case that for some documents or software, it will not be possible to use any programmatic accessibility evaluation tools for some success criterion — conformance to each and every success criterion will need human expertise and judgment.</p>
 
-<p class="mitigation">There are various approaches to the challenges of accessibility guidelines
+
+	    <p><a href="#Appendix-B">Appendix B</a> contains <q>Detailed Challenges with Conformance Verification and Testing for non-web ICT.</q> It covers 12 success criteria out of the 38 A and AA criteria in WCAG 2.0 which can be applied to non-web ICT after replacing specific terms or phrases.</p>
+
+	            <section class="silver">
+						                    <h3>Silver Research Findings</h3>
+								     
+	    <p>Silver research identified the need to expand the scope beyond web to include apps,
+	    documents, authoring, user agents, wearables, kiosks, IoT, VR, etc.
+	    and be inclusive of more disabilities. (<abbr title="User Experience">UX</abbr> Professionals Use of
+	    WCAG: Analysis) * Accessibility Supported allows inadequate
+	    assistive technologies to be claimed for conformance, particularly
+	    in non-native English speaking countries.</p>
+		    </section>
+
+<section  class="mitigation">
+	<h3>Mitigations</h3>
+	<p>There are various approaches to the challenges of accessibility guidelines
 conformance and testing of non-web information and communications
 technologies, depending upon the nature of non-web document technology or
 non-web software in question.  For example, there is a rich set of techniques
@@ -295,7 +374,7 @@ <h2>Challenge #4: Non-Web Information and Communications Technologies </h2>
 mitigate accessibility failings found by the tool as part of Adobe Acrobat.
 Both Microsoft Word and OpenOffice include accessibility test and validation
 tools, and both are capable of saving exporting their content into accessible
-PDF documents.  Operating systems like MacOS, iOS, Windows, Android, and Fire
+file formats.  Operating systems like MacOS, iOS, Windows, Android, and Fire
 OS all have rich accessibility frameworks which can be used to make accessible
 software applications, which are accessible through the use of built-in
 assistive technologies like screen readers and screen magnifiers, as well as
@@ -303,134 +382,122 @@ <h2>Challenge #4: Non-Web Information and Communications Technologies </h2>
 of accessibility test tools and support systems to help software developers
 make accessible software applications for these operating systems.  While none
 of these tools and frameworks can find all accessibility issues or otherwise
-guarantee a document or application will be free of all accessibility defects
+guarantee
+e a document or application will be free of all accessibility defects
 – whether those are tied to a specific WCAG success criterion or not – they
 are nonetheless important tools that can lead to highly accessible documents
 and software.
 </p>
-	    <p class="mitigation"><a href="#Appendix-B">Appendix B</a> contains <q>Detailed Challenges with Conformance Verification and Testing for non-web ICT.</q> It covers 12 success criteria out of the 38 A and AA criteria in WCAG 2.0 which can be applied to non-web ICT after replacing specific terms or phrases. In
-	    future versions of the document we plan to address success criteria introduced in WCAG 2.1 that may pose specific challenges for conformance verification and testing in the non-web ICT context.</p>
-        </section>
-        <section>
-            <h2>Challenges of Conformance as identified from Silver Research</h2>
-            <p>Now known as W3C Accessibility Guidelines (WCAG 3.0), this iteration of W3C accessibility guidance was conceived and designed to be research-based. Working over many years, the Silver Task Force of the Accessibility Guidelines Working Group (AGWG) and the Silver Community Group collaborated with researchers on questions that the Silver Groups identified. This research was used to develop 11 problem statements that needed to be solved for Silver.  The detailed problem statements include the specific problem, the result of the problem, the situation and priority, and the opportunity presented by the problem. The problem statements were organized into three main areas:  Usability, Conformance, and Maintenance. The section following is taken from the <a href="https://www.w3.org/community/silver/draft-final-report-of-silver/#h.n2wcg0gauz5x">Conformance sections of the Silver Design Sprint Final Report</a> and the <a href="https://www.w3.org/WAI/GL/task-forces/silver/wiki/Problem_Statements#Conformance_Model">Silver Problem Statements</a>. Details of the research questions and the individual reports are in <a href="https://www.w3.org/WAI/GL/task-forces/silver/wiki/Silver_Research_Archive">Research Archive of Silver wiki</a>.</p>
-            <p>The following items are shown as they were originally presented by the Silver task force, in future versions of this document they will be integrated into the challenges.</p>
-            <section>
-                <h3>Silver Research Problem Statements</h3>
-                <p>Originally published as the <a href="https://www.w3.org/community/silver/draft-final-report-of-silver/#h.n2wcg0gauz5x">Silver Design Sprint Final Report</a> (2018). These problem statements were presented to the Silver Design Sprint participants.</p>
-                <ul>
-			<li>Constraints on <q>What is Strictly Testable</q> provides an obstacle to including guidance that meets the needs of people with disabilities but is not conducive to a pass/fail test.</li>
-                    <li>Human Testable (related to Ambiguity) also relates to differences in knowledge and priorities of different testers achieve different results.</li>
-                    <li>Accessibility Supported is a conformance requirement of WCAG 2  that is poorly understood and incompletely implemented.</li>
-                    <li>Evolving Technology of the rapidly changing web must constantly be evaluated against the capabilities of assistive technology and evolving assistive technology must be evaluated against the backward compatibility of existing web sites.</li>
-                </ul>
-            </section>
-            <section>
-                <h3>Details of Problem Statements</h3>
-                <p>Originally published as <a href="https://www.w3.org/WAI/GL/task-forces/silver/wiki/Problem_Statements#Conformance_Model">Silver Problem Statements</a>, this was a detailed analysis of the research results behind the above list.</p>
-                <section>
-                    <h4>Definition of Conformance</h4>
-		    <blockquote cite="https://www.w3.org/WAI/GL/task-forces/silver/wiki/Problem_Statements#Conformance_Model"><p>Conformance to a standard means that you meet or satisfy the <q>requirements</q> of the standard. In WCAG 2.0 the <q>requirements</q> are the Success Criteria. To conform to WCAG 2.0, you need to satisfy the Success Criteria, that is, there is no content which violates the Success Criteria.</p>
-                    <p><strong>WCAG 2.0 Conformance Requirements:</strong></p>
-                    <ol>
-                        <li>Conformance Level (A to AAA)</li>
-                        <li>Conformance Scope (For full web pages only, not partial)</li>
-                        <li>Complete Process</li>
-                        <li>Only "Accessibility-supported" ways of using technologies</li>
-                        <li>Non-Interference: Technologies that are not accessibility supported can be used, as long as all the information is also available using technologies that are accessibility supported and as long as the non-accessibility-supported material does not interfere.</li>
-		    </ol></blockquote>
-                </section>
-                <section>
-                    <h4>Themes from Research</h4>
-                    <ul>
-                        <li>No monitoring process to test the accuracy of WCAG compliance claims (Keith et al., 2012)</li>
-                        <li>Difficulties for conformance (Keith et al., 2012)
-                            <ul>
-                                <li>Third parties documents, applications and services</li>
-                                <li>Know-how of IT personnel</li>
-                                <li>Tension between accessibility and design</li>
-                            </ul>
-                        </li>
-                        <li>Specific success criteria for failure - 1.1.1 , 2.2., 4.1.2 (Keith et al., 2012)</li>
-			<li><q>Reliably Human Testable,</q> <q>not reliably testable</q> (Brajnick et al., 2012) average agreement was at the 70-75% mark, while the error rate was around 29%.
-                            <ul>
-                                <li>Expertise appears to improve (by 19%) the ability to avoid false positives. Finally, pooling the results of two independent experienced evaluators would be the best option, capturing at most 76% of the true problems and producing only 24% of false positives. Any other independent combination of audits would achieve worse results.</li>
-                                <li>This means that an 80% target for agreement, when audits are conducted without communication between evaluators, is not attainable, even with experienced evaluators.</li>
-                            </ul>
-                        </li>
-                        <li>Challenges and Recommendations (Alonso et al., 2010)                                                       
-                            <ul>
-				    <li><q>accessibility supported ways of using technologies</q></li>
-                                <li>Testability of Success Criteria</li>
-                                <li>Openness of Techniques and Failures</li>
-                                <li>Aggregation of Partial Results</li>
-                            </ul>
-                        </li>
-			<li>Silver needs to expand the scope beyond web to include apps, documents, authoring, user agents, wearables, kiosks, IoT, VR, etc. and be inclusive of more disabilities. (<abbr title="user experience">UX</abbr> Professionals Use of WCAG: Analysis)</li>
-                        <li>Accessibility Supported allows inadequate assistive technologies to be claimed for conformance, particularly in non-native English speaking countries. (Interviews on Conformance)</li>
-                    </ul>
-                </section>
-                <section>
-                    <h4>Constraints on What is Strictly Testable</h4>
-		    <p><strong>Specific problem</strong>: Certain success criteria are quite clear and measurable, like color contrast. Others, far less so. The entire principle of understandable is critical for people with cognitive disabilities, yet success criteria intended to support the principle are not easy to test for or clear on how to measure. As a simple example, there is no clear, recent or consistent definition – within any locale or language – on what <q>lower secondary education level</q> means in regard to web content. Language and text content is also not the only challenge among those with cognitive and learning disabilities. Compounding this, most of the existing criteria in support of understanding are designated as AAA, which relatively few organizations attempt to conform with.</p>
-                    <p><strong>Result of problem</strong>: The requirement for valid and reliable testability for WCAG success criteria presents a structural barrier to including the needs of people with disabilities whose needs are not strictly testable. Guidance that WCAG working group members would like to include cannot be included. The needs of people with disabilities – especially intellectual and cognitive disabilities – are not being met.</p>
-                    <p><strong>Situation and Priority</strong>: Of the 70 new success criteria proposed by the Cognitive Accessibility Task Force to support the needs of people with cognitive and intellectual disabilities, only four to six (depending on interpretation) were added to WCAG 2.1 and only one is in level AA. The remainder are in level AAA, which is rarely implemented. This means user needs are not met.</p>
-                    <p><strong>Opportunity</strong>: Multiple research projects and audience feedback have concluded that simpler language is desired and needed for audiences of the guidelines. Clear but flexible criteria with considerations for a wider spectrum of disabilities helps ensure more needs are met.</p>
-                </section>
-                <section>
-                    <h4>Human Testable</h4>
-                    <p><strong>Specific problem</strong>: Regardless of proficiency, there is a significant gap in how any two human auditors will identify a success or fail of criteria. Various audiences have competing priorities when assessing the success criteria of any given digital property. Knowledge varies for accessibility standards and how people with disabilities use assistive technology tools. Ultimately, there is variance between: any two auditors; any two authors of test cases; and human bias. Some needs of people of disabilities are difficult to measure in a quantifiable way.</p>
-                    <p><strong>Result of problem</strong>: Success criteria are measured by different standards and by people who often make subjective observations. Because there's so much room for human error, an individual may believe they've met a specific conformance model when, in reality, that’s not the case. The ultimate impact is on an end user with a disability who cannot complete a given task, because the success criteria wasn’t properly identified, tested and understood.</p>
-                    <p><strong>Situation and Priority</strong>: There isn't a standardized approach to how the conformance model applies to success criteria at the organizational level and in specific test case scenarios.</p>
-                    <p><strong>Opportunity</strong>: There's an opportunity to improve the success criteria such that human auditors and testers find the success criteria more understandable. Educating business leaders on how the varying levels of conformance apply to their organization may be useful as well. We can educate about the ways that people with disabilities use their assistive technology.</p>
-                </section>
-                <section>
-                    <h4>Accessibility Supported</h4>
-		    <p><strong>Specific problem</strong>: <q>Accessibility supported</q> was implemented in a way that did not facilitate consistent adoption by developers and testers. It also requires a harmonious relationship and persistent interoperability between content technologies and requesting technologies that must be continuously evaluated as either is updated. Further, the WG <q>defers the judgment of how much, how many, or which AT must support a technology to the community.</q> It is poorly understood, even by experts.</p>
-                    <p><strong>Result of problem</strong>: Among the results are: difficulty understanding what qualifies as a content technology or an assistive technology; difficulty quantifying assistive technologies or features of user agents; claiming conformance with inadequate assistive technology; and difficulty claiming conformance.</p>
-                    <p><strong>Situation and Priority</strong>: Any claim or assertion that a web page conforms to the guidelines may require an explicit statement defining which assistive technology and user agent(s) the contained technologies rely upon, and presumably inclusive of specific versions and or release dates of each. One could infer then that a conformance claim is dependent upon a software compatibility claim naming browsers and assistive technology and their respective versions. This would create a burden to author and govern such claims. Additionally, no one can predict and anticipate new technologies and their rates of adoption by people with disabilities.</p>
-		    <p><strong>Opportunity</strong>: As the technologies in this equation evolve, the interoperability may be affected by any number of factors outside of the control of the author and publisher of a web page. Either <q>accessibility supported</q> should not be a
-		    component of conformance requirements, or it should clearly, concisely, and explicitly define and quantify the technologies or classes of technologies, AND set any resulting update or expiry criteria for governance.</p>
-                </section>
-                <section>
-                    <h4>Evolving Technology</h4>
-                    <p><strong>Specific problem</strong>: Evolving Technology: As content technology evolves, it must be re-evaluated against assistive technology for compatibility. Likewise, as assistive technology evolves or emerges, it must be evaluated against the backward compatibility of various content technology.</p>
-                    <p><strong>Result of problem</strong>: There is no versioning consideration for updates to user agents and assistive technology. Strict conformance then typically has an expiry.</p>
-                    <p><strong>Situation and Priority</strong>: There is no clear and universal understanding of the conformance model or its longevity. Some will infer that there is always a conformance debt when any technology changes.</p>
-                    <p><strong>Opportunity</strong>: Consider conformance statements to include an explicit qualifier of time of release or versions of technology. OR consider a more general approach that is not explicit and is flexible to the differences in technologies as they evolve, identifying the feature of the assistive tech rather than the version of the assistive tech. OR consider a model that quantifies conformance as a degree of criteria met.</p>
-                </section>
-            </section>
+</section>
         </section>
+
+	<section id="Challenge-5">
+		<h2>Challenge #5: Accessibility Supported</h2>
+
+	<p><a href="https://www.w3.org/TR/WCAG21/#conformance">The Conformance
+		section of WCAG 2.1</a> states that <q>only
+		accessibility-supported ways of using technologies can be
+		relied upon for conformance.</q>  However, the <a
+		href="https://www.w3.org/TR/WCAG21/#cc4">definition of
+		Accessibility Supported</a>, together with the relevant section of <a
+			href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/conformance.html#uc-accessibility-support-head">Understanding
+			WCAG</a> leaves this conformance requirement under-specified by providing insufficient guidance on how it is to be realized.</p>
+
+		<p>The
+		<a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/conformance.html#uc-accessibility-supported-definition-head">
+			 first Note under the definition of Accessibility Supported</a> states that: <q>The WCAG Working
+group and the W3C do not specify which or how much support by assistive
+technologies there must be for a particular use of a Web technology in
+order for it to be classified as accessibility supported.</q>
+This is further expanded upon in the section
+			<a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/conformance.html#uc-support-level-head">
+				Level of Assistive Technology Support Needed for <q>Accessibility Support:</q></a>
+<q>This topic raises the question of how many
+or which assistive technologies must support a Web technology in order
+for that Web technology to be considered <q>accessibility supported.</q> The
+WCAG Working group and the W3C do not specify which or how many
+assistive technologies must support a Web technology in order for it to
+be classified as accessibility supported. This is a complex topic and
+one that varies both by environment and by language.</q></p>
+
+<p> The centrality of
+<q>Accessibility Supported</q> in the many WCAG 2 success criteria that are
+tied to use with assistive technologies and platform accessibility
+features, combined with the lack of definition of what constitutes
+<q>Accessibility Supported,</q> means that expert human judgement is required
+to evaluate whether there is sufficient accessibility support for
+specific technical implementations of accessibility implemented to meet
+WCAG 2 success criteria. The lack of a broad base of
+accessibility expertise in the web development field, combined with the challenges mentioned above
+related to <a href="#Challenge-1">Challenge #1: Scaling Conformance Verification</a>, (when human evaluation is
+		    required) make the Accessibility Supported requirement a further
+	    challenge unto itself. <a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/conformance.html#uc-support-level-head">Understanding Conformance 2.0</a> further notes that: <q>There is a need for an external and international dialogue on this topic.</q>
+Meanwhile, the nonnormative <a href="https://www.w3.org/TR/WCAG-EM/#step1c">WCAG evaluation methodology (WCAG-EM)</a> advises approaching this conformance requirement by determining: <q>the minimum set of combinations of operating systems, web browsers, assistive technologies, and other user agents that the website is expected to work with, and that is in-line with the
+	WCAG 2.0 guidance on accessibility support.</q></p>
+
+<p>Not only does this conformance requirement of WCAG 2.x ask the content
+provider to check their content markup with commonly used browsers, it also
+asks that they further check usability with an undefined range of assistive
+technologies on those same commonly used operating environments in order to
+make a conformance claim. This requirement greatly exacerbates <a
+href="#Challenge-2">Challenge #2: Large, complex, and dynamic websites may have
+too many changing permutations to validate effectively</a>. It also exacerbates
+<a href="#Challenge-3">Challenge #3: 3rd party content</a>, where third party
+content may have been shown to be Accessibility Supported with a set of
+browsers, access features, and assistive technologies that has no overlap with
+the set of browsers, access features, and assistive technologies that
+constitute Accessibility Support for the site hosting that third party
+content.</p>
+
+	<section class="silver">
+		    <h3>Silver Research Findings</h3>
+
+		    <p>Silver concluded that <q>Accessibility Supported is a conformance requirement
+of WCAG 2 that is poorly understood and incompletely implemented, &#x2026; i.e. the role
+of AT in assessing conformance.</q> See <a href="#at-supported">additional details in Appendix C</a> below.
+		    </p>
+
+	</section>
+
+	<section class="mitigation">
+		<h3>Mitigations</h3>
+
+		<p>We know of no useable mitigations to achieve the <q>Accessibility Supported</q> conformance requirement for public facing web sites. <a href="https://www.w3.org/TR/WCAG-EM/#step1c">WCAG-EM's Second Note</a> suggests that: <q>For some websites in closed networks, such as an intranet website, where both the users and the computers used to access the website are known, this baseline may be limited to the operating systems, web browsers and assistive
+technologies used within this closed network.</q> It continues saying: <q>However, in most cases this baseline is ideally broader to cover the majority of current user agents used by people with disabilities in any applicable particular geographic region and
+language community.</q> Beyond placing the responsibility on the evaluator to establish this baseline, <a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/conformance.html#uc-accessibility-support-head">Note 5 in Understanding Conformance 2.0</a> suggests that: <q>One way for authors to locate uses of a technology that are accessibility supported would be to consult compilations of uses that are documented to be accessibility supported. &#x2026; Authors, companies, technology vendors, or others may document accessibility-supported ways of using Web content technologies.</q> Unfortunately, we know of no such public repository.
+	</p>
+	</section>
+	</section>
+
 	<section class="appendix" id="Appendix-A">
 		<h2>Detailed Challenges with Scaling Conformance Verification for the Success Criteria in WCAG 2.1 A and AA</h2>
 <p>This appendix describes challenges with applying the WCAG 2.x conformance
 model to specific Guidelines and Success Criteria, primarily based on required
-human involvement in evaluation of conformance to them. In this draft, the
-list is not exhaustive, but we intend it to cover all known challenges with
-all A and AA Success Criteria, by the time this Note is completed. The purpose
-of this is not to critique WCAG 2 nor to imply that sites and policies should
+human involvement in evaluation of conformance to them. The
+list is not exhaustive, but it covers the preponderance of known challenges with all A and AA Success Criteria. The purpose
+of this list is not to critique WCAG 2 nor to imply that sites and policies should
 not do their best, and strive to conform to it, but rather to indicate known
 areas for which it may not be possible to conform, and which a new conformance
 model would hopefully address.
 	    </p>
-	    <p>We have seen the market respond to the increased demand for accessibility professionals in part due to the amount of required human involvement in the valuation of conformance, with many international efforts such as the <a href="https://www.accessibilityassociation.org/">International Association of Accessibility Professionals (IAAP)</a> which train and/or certify accessibility professionals. While this is resulting in downward pressure on costs of testing and remediation with more accessibility professionals becoming available to meet the need, it doesn't in and of itself eliminate the challenges noted below. Furthermore, for the near term, it appears the demand will be greater than the supply of this type of specialized expertise.</p>
-		<p>Also, the <a href="http://www.w3.org/tr/wcag-em/">Website Accessibility Conformance Evaluation Methodology (WCAG-EM) 1.0</a> [[wcag-em]] lays out a strategy to combine human testing and automated testing. In the model, automation is used for a large number of pages (or all pages) and sampling is used for human testing. The WCAG-EM suggests that the human evaluation sample might include templates pages, component libraries, key flows (such as choosing a product and purchasing it, or signing up for a newsletter, etc.), and random pages. While WCAG-EM provides a practical method for claiming conformance for a website, it doesn't fully address the challenges in making every part of every page in a large, dynamic website conform to every success criterion.</p>
-            <section class="appendix">
+	    <p>We have seen the market respond to the increased demand for accessibility professionals in part due to the amount of required human involvement in the valuation of conformance, with many international efforts such as the <a href="https://www.accessibilityassociation.org/">International Association of Accessibility Professionals (IAAP)</a> which train and/or certify accessibility professionals. While this is resulting in downward pressure on costs of testing and remediation with more accessibility professionals becoming available to meet the need, it doesn&apos;t in and of itself eliminate the challenges noted below. Furthermore, for the near term, it appears the demand will be greater than the supply of this type of specialized expertise.</p>
+		<p>Also, the <a href="http://www.w3.org/tr/wcag-em/">Website Accessibility Conformance Evaluation Methodology (WCAG-EM) 1.0</a> [[wcag-em]] lays out a strategy to combine human testing and automated testing. In the model, automation is used for a large number of pages (or all pages) and sampling is used for human testing. The WCAG-EM suggests that the human evaluation sample might include templates pages, component libraries, key flows (such as choosing a product and purchasing it, or signing up for a newsletter, etc.), and random pages. While WCAG-EM provides a practical method for claiming conformance for a website, it doesn&apos;t fully address the challenges in making every part of every page in a large, dynamic website conform to every success criterion.</p>
+            <section class="appendix notoc">
 <h3>Text Alternatives for Non-Text Content</h3>
 <p class="sc-link">
                     <a href="https://www.w3.org/TR/WCAG21/#text-alternatives">Guideline 1.1</a>
 </p>
 <p>Text alternatives for images are an early, and still widely used, accessibility enhancement to HTML. Yet text alternatives remain one of the more intractable accessibility guidelines to assess with automated accessibility checking. While testing for the presence of alternative text is straightforward, and a collection of specific errors (such as labeling a graphic <q>spacer.gif</q>) can be identified by automated testing, human judgment remains necessary to evaluate whether or not any particular text alternative for a graphic is correct and conveys the true meaning of the image. Image recognition techniques are not mature enough to fully discern the underlying meaning of an image and the intent of the author in its inclusion. As a simple example, an image or icon of a paper clip would likely be identified by image recognition simply as a <q>paper clip.</q> However, when a paper clip appears in content often its meaning is to show there is an attachment. In this specific example, the alternative text should be <q>attachment,</q> not <q>paper clip.</q> Similarly, the image of a globe (or any graphical object representing planet Earth) can be used for a multiplicity of reasons, and the appropriate alternative text should indicate the reason for that use and not descriptive wording such as <q>globe</q> or <q>Planet Earth.</q> One not uncommon use of a globe today expands to allow users to select their preferred language, but there may be many other reasonable uses of such an icon.</p>
             </section>
-            <section class="appendix">
+            <section class="appendix notoc">
 <h3>Time-Based Media</h3>
 <p class="sc-link">
 			<a href="https://www.w3.org/TR/WCAG21/#time-based-media">Guideline 1.2</a>
 </p>
 
                 <p>Practices for creating alternatives to spoken dialog, and to describe visual content, were established in motion picture and TV content well before the world wide web came into existence. These practices formed the basis of the <a href="http://www.w3.org/TR/media-accessibility-reqs/">Media Accessibility User Requirements (MAUR)</a> [[media-accessibility-reqs]] for time-based streaming media on the web in HTML5, which now supports both captioning and descriptions of video.</p>
-                <p>Yet, just as with text alternatives, automated techniques and testing aren't sufficient for creating and validating accessible alternatives to time-based media. For example, Automatic Speech Recognition (ASR) often fails when the speech portion of the audio is low quality, isn’t clear, or has background noise or sound-effects. In addition, current automated transcript creation software doesn't perform speaker identification, meaningful sound identification, or correct punctuation that all are necessary for accurate captioning. Work on automatically generated descriptions of video are in their infancy, and like image recognition techniques, don’t provide usable alternatives to video.</p>
-                <p>Similarly, while there is well articulated guidance on how to create text transcripts or captions for audio-only media (such as radio programs and audio books), automated techniques and testing again aren't sufficient for creating and validating these accessible alternatives. Knowing what is important in an audio program to describe to someone who cannot hear is beyond the state of the art. There are several success criteria under this Guideline that all share these challenges of manual testing being required to ensure alternatives accurately reflect the content in the media. These include:</p>
+                <p>Yet, just as with text alternatives, automated techniques and testing aren&apos;t sufficient for creating and validating accessible alternatives to time-based media. For example, Automatic Speech Recognition (ASR) often fails when the speech portion of the audio is low quality, isn’t clear, or has background noise or sound-effects. In addition, current automated transcript creation software doesn&apos;t perform speaker identification, meaningful sound identification, or correct punctuation that all are necessary for accurate captioning. Work on automatically generated descriptions of video are in their infancy, and like image recognition techniques, don’t provide usable alternatives to video.</p>
+                <p>Similarly, while there is well articulated guidance on how to create text transcripts or captions for audio-only media (such as radio programs and audio books), automated techniques and testing again aren&apos;t sufficient for creating and validating these accessible alternatives. Knowing what is important in an audio program to describe to someone who cannot hear is beyond the state of the art. There are several success criteria under this Guideline that all share these challenges of manual testing being required to ensure alternatives accurately reflect the content in the media. These include:</p>
 
 <ul>
 <li><a href="https://www.w3.org/TR/WCAG21/#audio-only-and-video-only-prerecorded">Audio-only and video-only (Prerecorded)</a> (Success Criterion 1.2.1)</li>
@@ -440,7 +507,7 @@ <h3>Time-Based Media</h3>
 <li><a href="https://www.w3.org/TR/WCAG21/#audio-description-prerecorded">Audio description (Prerecorded)</a> (Success Criterion 1.2.5)</li>
                 </ul>
             </section>
-            <section class="appendix">
+            <section class="appendix notoc">
                 <h3>Info and Relationships
 		</h3>
 <p class="sc-link">
@@ -450,7 +517,7 @@ <h3>Info and Relationships
                 <p>Whether in print or online, the presentation of content is often structured in a manner intended to aid comprehension. Sighted users perceive structure and relationships through various visual cues. Beyond simple sentences and paragraphs, the sighted user may see headings with nested subheadings. There may be sidebars and inset boxes of related content. Tables may be used to show data relationships. Comprehending how content is organized is a critical component of understanding the content.</p>
                 <p>As with media above, automated testing can determine the presence of structural markup, and can flag certain visual presentations as likely needing that structural markup. But such automated techniques remain unable to decipher if that markup usefully organizes the page content in a way that a user relying on assistive technology can examine the page systematically and readily understand its content.</p>
             </section>
-            <section class="appendix">
+            <section class="appendix notoc">
                 <h3>Meaningful Sequence
 		</h3>
 <p class="sc-link">
@@ -459,16 +526,16 @@ <h3>Meaningful Sequence
 
 <p>Often the sequence in which content is presented affects its meaning. In some content there may be even more than one meaningful way of ordering that content. However, as with Info and Relationships above, automated techniques are unable to determine whether content will be presented to screen reader users in a meaningful sequence ordering. For example, the placement of a button used to add something to a virtual shopping cart is very important for screen reader users, as improper placement can lead to confusion about which item is being added.</p>
             </section>
-            <section class="appendix">
+            <section class="appendix notoc">
                 <h3>Sensory Characteristics
 		</h3>
 <p class="sc-link">
 			<a href="https://www.w3.org/TR/WCAG21/#sensory-characteristics">Success Criterion 1.3.3</a>
 </p>
 
-<p>Ensuring that no instructions rely on references to sensory characteristics presents similar challenges to ensuring that color isn't the sole indicator of meaning (<a href="https://www.w3.org/TR/WCAG21/#use-of-color">Success Criterion 1.4.1</a>) – it is testing for a negative, and requires a deep understanding of meaning conveyed by the text to discern a failure programmatically. For example, while instructions such as <q>select the red button</q> reference a sensory characteristic, <q>select the red button which is also the first button on the screen</q> may provide sufficient non-sensory context to not cause a problem (and multi-modal, multi-sensory guidance is often better for users with cognitive impairments or non-typical learning styles).</p>
+<p>Ensuring that no instructions rely on references to sensory characteristics presents similar challenges to ensuring that color isn&apos;t the sole indicator of meaning (<a href="https://www.w3.org/TR/WCAG21/#use-of-color">Success Criterion 1.4.1</a>) – it is testing for a negative, and requires a deep understanding of meaning conveyed by the text to discern a failure programmatically. For example, while instructions such as <q>select the red button</q> reference a sensory characteristic, <q>select the red button which is also the first button on the screen</q> may provide sufficient non-sensory context to not cause a problem (and multi-modal, multi-sensory guidance is often better for users with cognitive impairments or non-typical learning styles).</p>
             </section>
-            <section class="appendix">
+            <section class="appendix notoc">
                 <h3>Orientation
 		</h3>
 <p class="sc-link">
@@ -477,7 +544,7 @@ <h3>Orientation
 
 <p>While an automated test can determine that the orientation is locked, full evaluation of conformance to this criterion is tied to whether it is <q><a href="https://www.w3.org/TR/WCAG21/#dfn-essential">essential</a></q> for the content to be locked to one specific orientation (e.g. portrait or landscape views of an interface rendered to a cell phone). This requires human judgment to ensure that, any time the orientation is locked, the orientation is essential to that content to determine conformance. As of yet, this requires human judgement and is not fully automatable.</p>
             </section>
-            <section class="appendix">
+            <section class="appendix notoc">
 <h3>Identify Input Purpose
 </h3>
 <p class="sc-link">
@@ -485,7 +552,7 @@ <h3>Identify Input Purpose
 </p>
                 <p>An automated test can easily determine that input fields use HTML markup to indicate the input purpose, however, manual verification is needed to determine that the correct markup was used to match the intent for the field. For example, for a name input field, there are 10 variations of HTML name purpose attributes with different meaning and using the incorrect markup would be confusing to the user.</p>
             </section>
-            <section class="appendix">
+            <section class="appendix notoc">
                 <h3>Use of Color
 		</h3>
 <p class="sc-link">
@@ -494,7 +561,7 @@ <h3>Use of Color
 
                 <p>This poses the same challenges as Sensory Characteristics (<a href="https://www.w3.org/TR/WCAG21/#sensory-characteristics">Success Criterion 1.3.3</a>). To discern whether a page fails this criterion programmatically requires understanding the full meaning of the related content on the page and whether any meaning conveyed by color is somehow also conveyed in another fashion (e.g. whether the meaning of the colors in a bar chart is conveyed in the body of associated text or with a striping/stippling pattern as well on the bars, or perhaps some other fashion).</p>
             </section>
-            <section class="appendix">
+            <section class="appendix notoc">
                 <h3>Audio Control
 		</h3>
 <p class="sc-link">
@@ -503,16 +570,16 @@ <h3>Audio Control
 
 <p>An automated test tool would be able to identify media/audio content in a website, identify whether auto-play is turned on in the code, and also determine the duration. However, an automated test tool cannot determine whether there is a mechanism to pause, stop the audio, or adjust the volume of the audio independent of the overall system volume level. This still requires manual validation.</p>
             </section>
-            <section class="appendix">
+            <section class="appendix notoc">
         <h3>Contrast (Minimum)
 	</h3>
 <p class="sc-link">
 		<a href="https://www.w3.org/TR/WCAG21/#contrast-minimum">Success Criterion 1.4.3</a>
 </p>
 
-                <p>Automated tools can check the color of text against the background in most cases. However, there are several challenges with using current state of the art automated tools for this success criterion, including (1) when background images are used, automated tests aren't reliably able to check for minimum contrast of text against the image—especially if the image is a photograph or drawing where the text is placed over the image, and (2) situations in which depending upon context such as text becoming incidental because it is part of an inactive user interface component or is purely decorative or part of a logo. These would take human intervention to sample the text and its background to determine if the contrast meets the minimum requirement.</p>
+                <p>Automated tools can check the color of text against the background in most cases. However, there are several challenges with using current state of the art automated tools for this success criterion, including (1) when background images are used, automated tests aren&apos;t reliably able to check for minimum contrast of text against the image—especially if the image is a photograph or drawing where the text is placed over the image, and (2) situations in which depending upon context such as text becoming incidental because it is part of an inactive user interface component or is purely decorative or part of a logo. These would take human intervention to sample the text and its background to determine if the contrast meets the minimum requirement.</p>
             </section>
-            <section class="appendix">
+            <section class="appendix notoc">
                <h3>Resize Text
 	       </h3>
 <p class="sc-link">
@@ -521,7 +588,7 @@ <h3>Resize Text
 
                 <p>While automated tools can test whether it is possible to resize text on a webpage, it takes human evaluation to determine whether there has been a loss of content or functionality as a result of the text resizing.</p>
             </section>
-            <section class="appendix">
+            <section class="appendix notoc">
                <h3>Images of Text
 	       </h3>
 <p class="sc-link">
@@ -530,7 +597,7 @@ <h3>Images of Text
 
 <p>This poses the same challenge as Orientation (<a href="https://www.w3.org/TR/WCAG21/#orientation">Success Criterion 1.3.4</a>) - it is tied to whether it is <q><a href="https://www.w3.org/TR/WCAG21/#dfn-essential">essential</a></q> for text to be part of an image. This requires human judgment, making this criterion not readily automatable. Additionally, methods of employing OCR on images will not accurately discern text of different fonts that overlap each other, or be able to recognize unusual characters or text with poor contrast with the background of the image.</p>
             </section>
-            <section class="appendix">
+            <section class="appendix notoc">
 <h3>Reflow
 </h3>
 <p class="sc-link">
@@ -539,7 +606,7 @@ <h3>Reflow
 
 <p>While automated tests can detect the presence of vertical and horizontal scroll bars, there are currently no reliable tests to automate validating that there has been no loss in content or functionality. Human evaluation is also still needed to determine when two-dimensional scrolling is needed for content that requires two-dimensional layout for usage or meaning.</p>
             </section>
-            <section class="appendix">
+            <section class="appendix notoc">
                 <h3>Non-text Contrast
 		</h3>
 <p class="sc-link">
@@ -555,7 +622,7 @@ <h3>Non-text Contrast
 			    to utilize the exception which requires human intervention.</li>
                 </ul>
             </section>
-            <section class="appendix">
+            <section class="appendix notoc">
  <h3>Text Spacing
  </h3>
 <p class="sc-link">
@@ -564,7 +631,7 @@ <h3>Text Spacing
 
                 <p>This success criterion involves using a tool or method to modify text spacing and then checking to ensure no content is truncated or overlapping. There is currently no way to reliably automate validating that no loss of content of functionality has occurred when text spacing has been modified.</p>
             </section>
-            <section class="appendix">
+            <section class="appendix notoc">
 <h3>Content on Hover or Focus</h3>
 <p class="sc-link">
 <a href="https://www.w3.org/TR/WCAG21/#content-on-hover-or-focus"> Success Criterion 1.4.13 </a>
@@ -580,7 +647,7 @@ <h3>Content on Hover or Focus</h3>
 </li>
                 </ul>
             </section>
-            <section class="appendix">
+            <section class="appendix notoc">
 <h3>Keyboard Operable
 </h3>
 <p class="sc-link">
@@ -589,7 +656,7 @@ <h3>Keyboard Operable
 
                 <p>While an automated test can evaluate whether a page can be tabbed through in its entirety, ensuring keyboard operability of all functionality currently requires a human to manually navigate through content to ensure all interactive elements are not only in the tab order, but can be fully operated using keyboard controls.</p>
             </section>
-            <section class="appendix">
+            <section class="appendix notoc">
 <h3>Character Key Shortcuts
 </h3>
 <p class="sc-link">
@@ -598,7 +665,7 @@ <h3>Character Key Shortcuts
 
                 <p>Character key shortcuts can be applied to content via scripting but whether and what these shortcut key presses trigger can only be determined by additional human evaluation.</p>
             </section>
-            <section class="appendix">
+            <section class="appendix notoc">
                 <h3>Timing Adjustable
 	</h3>
 <p class="sc-link">
@@ -607,7 +674,7 @@ <h3>Timing Adjustable
 
                 <p>There is currently no easy way to automate checking whether timing is adjustable. Ways of controlling differ in naming, position, and approach (including dialogs/popups before the time-out). This can also be affected by how the server registers user interactions (e.g. for automatically extending the time-out).</p>
             </section>
-            <section class="appendix">
+            <section class="appendix notoc">
                 <h3>Pause, Stop, Hide
 		</h3>
 <p class="sc-link">
@@ -616,7 +683,7 @@ <h3>Pause, Stop, Hide
 
                 <p>Typically the requirement to control moving content is provided by interactive controls placed in the vicinity of moving content, or occasionally at the beginning of content. Since position and naming vary, this assessment cannot currently be automated (this involves checking that the function works as expected).</p>
             </section>
-            <section class="appendix">
+            <section class="appendix notoc">
                 <h3>Three Flashes or Below Threshold
 		</h3>
 <p class="sc-link">
@@ -625,7 +692,7 @@ <h3>Three Flashes or Below Threshold
 
                 <p>There are currently no known automated tests that are accurately able to assess areas of flashing on a webpage to ensure that the flashing happens less than three times per second. </p>
             </section>
-            <section class="appendix">
+            <section class="appendix notoc">
                 <h3>Bypass Blocks
 		</h3>
 <p class="sc-link">
@@ -634,7 +701,7 @@ <h3>Bypass Blocks
 
                 <p>While it can be determined that native elements or landmark roles are used, there is currently no automated way to determine whether they are used to adequately structure content (are they missing out on sections that should be included). The same assessment would be needed when other Techniques are used (structure by headings, skip links).</p>
             </section>
-            <section class="appendix">
+            <section class="appendix notoc">
                 <h3>Page titled
 		</h3>
 <p class="sc-link">
@@ -643,7 +710,7 @@ <h3>Page titled
 
                 <p>Automating a check for whether the page has a title is simple; ensuring that the title is meaningful and provides adequate context  as to the purpose of the page is not currently possible.</p>
             </section>
-            <section class="appendix">
+            <section class="appendix notoc">
                 <h3>Focus Order
 	</h3>
 <p class="sc-link">
@@ -652,7 +719,7 @@ <h3>Focus Order
 
                 <p>There is currently no known way to automate ensuring that focus handling with dynamic content (e.g. moving focus to a custom dialog, keep focus in dialog, return to trigger) follows a logical order.</p>
             </section>
-            <section class="appendix">
+	    <section class="appendix notoc">
                 <h3>Link Purpose (In Context)
 		</h3>
 <p class="sc-link">
@@ -661,7 +728,7 @@ <h3>Link Purpose (In Context)
 
                 <p>Automated tests can check for the existence of links with the same name, as well as check whether links are qualified programmatically, but checking whether the link text adequately describes the link purpose still involves human judgment.</p>
             </section>
-            <section class="appendix">
+            <section class="appendix notoc">
                 <h3>Multiple ways
 		</h3>
 <p class="sc-link">
@@ -670,7 +737,7 @@ <h3>Multiple ways
 
                 <p>Automated tests can validate whether pages can be reached with multiple ways (e.g. nav and search), but will miss cases where exceptions hold (all pages can be reached from anywhere) and still require human validation.</p>
             </section>
-            <section class="appendix">
+            <section class="appendix notoc">
                 <h3>Headings and Labels
 		</h3>
 <p class="sc-link">
@@ -679,7 +746,7 @@ <h3>Headings and Labels
 
                 <p>Automated tests can detect the existence of headings and labels, however, there is currently no way to automate determining whether the heading or label provides adequate context for the content that follows.</p>
             </section>
-            <section class="appendix">
+            <section class="appendix notoc">
                 <h3>Pointer Gestures
 		</h3>
 <p class="sc-link">
@@ -688,7 +755,7 @@ <h3>Pointer Gestures
 
                 <p>There are currently no known automated checks that would accurately detect complex gestures - even when a script indicates the presence of particular events like touch-start, the event called would need to be checked in human evaluation.</p>
             </section>
-            <section class="appendix">
+            <section class="appendix notoc">
                 <h3>Pointer Cancellation
 		</h3>
 <p class="sc-link">
@@ -707,7 +774,7 @@ <h3>Pointer Cancellation
 </li>
                 </ul>
             </section>
-            <section class="appendix">
+            <section class="appendix notoc">
                 <h3>Motion Actuation
 		</h3>
 <p class="sc-link">
@@ -716,7 +783,7 @@ <h3>Motion Actuation
 
                 <p>Motion activated events may be detected automatically but whether there are equivalents for achieving the same thing with user interface components currently requires human evaluation.</p>
             </section>
-            <section class="appendix">
+            <section class="appendix notoc">
                 <h3>On Focus
 		</h3>
 <p class="sc-link">
@@ -725,7 +792,7 @@ <h3>On Focus
 
                 <p>There is currently no reliable way to accurately automate checking whether a change caused by moving focus should be considered a change of content or context.</p>
             </section>
-            <section class="appendix">
+            <section class="appendix notoc">
                 <h3>On Input
 		</h3>
 <p class="sc-link">
@@ -734,7 +801,7 @@ <h3>On Input
 
                 <p>There is currently no reliable way to accurately automate checking whether changing the setting of any user interface component should be considered a change of content or context, or to automatically detect whether relevant advice exists before using the component in question.</p>
             </section>
-            <section class="appendix">
+            <section class="appendix notoc">
 <h3>Error Identification
 </h3>
 <p class="sc-link">
@@ -743,7 +810,7 @@ <h3>Error Identification
 
                 <p>Insuring whether an error message correctly identifies and describes the error accurately and in a way that provides adequate context currently requires human evaluation.</p>
             </section>
-            <section class="appendix">
+            <section class="appendix notoc">
                 <h3>Labels or Instructions
 		</h3>
 <p class="sc-link">
@@ -752,7 +819,7 @@ <h3>Labels or Instructions
 
                 <p>A.35 Edge cases (labels close enough to a component to be perceived as a visible label) will require a human check. Some labels may be programmatically linked but hidden or visually separated from the element to which they are linked. Whether instructions are necessary and need to be provided will hinge on the content. Human check needed.</p>
             </section>
-            <section class="appendix">
+            <section class="appendix notoc">
                 <h3>Error Suggestion
 		</h3>
 <p class="sc-link">
@@ -761,7 +828,7 @@ <h3>Error Suggestion
 
                 <p>Whether an error suggestion is helpful or correct currently requires human evaluation.</p>
             </section>
-            <section class="appendix">
+            <section class="appendix notoc">
                 <h3>Name, Role, Value
 		</h3>
 <p class="sc-link">
@@ -785,13 +852,12 @@ <h2>Detailed Challenges with Conformance Verification and Testing for Non-Web IC
 entire software application. The remaining 10 were more straightforward to
 apply to non-web ICT, but still required some text changes.</p> 
 
-<p>Since publication of <abbr title="Guidance on Applying WCAG to Non-web Information and Communication Technologies">WCAG2ICT</abbr>, [[wcag2ict]] WCAG 2.1 was published introducing a number of additional success criteria at the A and AA levels. Some of these may also pose specific challenges for conformation verification and testing in the non-web ICT context. A future version of this document will address those
-new success criteria in the non-Web ICT Context.
+<p>Since publication of <abbr title="Guidance on Applying WCAG to Non-web Information and Communication Technologies">WCAG2ICT</abbr>, [[wcag2ict]] WCAG 2.1 was published introducing a number of additional success criteria at the A and AA levels. Some of these may also pose specific challenges for conformation verification and testing in the non-web ICT context.
 </p>
 
 <p>
 The 18 success criteria noted in WCAG2ICT are discussed below in four sections,
-the last of which address the 14 of the 38 A and AA criteria in WCAG 2.0 which relate to an accessibility supported interface, which may not be possible for software running in a <q>closed</q> environment (e.g. an airplane ticket kiosk).
+the last of which address the 14 of the 38 A and AA criteria in WCAG 2.0 which relate to an <q>Accessibility Supported</q> interface, which may not be possible for software running in a <q>closed</q> environment (e.g. an airplane ticket kiosk).
 </p>
 
 <section class="appendix" id="Appendix-B.1">
@@ -800,21 +866,21 @@ <h3><q>Set of Web Pages</q> Success Criteria</h3>
 	<p>These four success criteria, include either the term <q>set of pages</q> or <q>multiple pages,</q> which in the non-web ICT context becomes either a Set of Documents or a Set of Software Programs. In either case (document or software), whether the criterion applies is dependent upon whether such a set exists, which may require human judgment. Where that set is determined to exist, it may be difficult to employ programmatic testing techniques to verify compliance with the specific criterion.
 </p>
 
-            <section class="appendix">
+            <section class="appendix notoc">
 <h4>Bypass Blocks
 </h4>
 <p class="sc-link">
 <a href="https://www.w3.org/TR/WCAG21/#bypass-blocks">Success Criterion 2.4.1</a>
 </p>
 
-<p>To ensure this criterion is met for non-web documents, once the set of documents is defined, every document in the set must be searched for blocks of content that are repeated across all of those documents, and a mechanism to skip those repeated blocks. Since the blocks aren't necessarily completely identical (e.g. a repeated listing of all other documents in a set might not include the document containing that list), a tool to do this may not be straightforward, and in any case, no such tool is known to exist today to do this with non-web documents.
+<p>To ensure this criterion is met for non-web documents, once the set of documents is defined, every document in the set must be searched for blocks of content that are repeated across all of those documents, and a mechanism to skip those repeated blocks. Since the blocks aren&apos;t necessarily completely identical (e.g. a repeated listing of all other documents in a set might not include the document containing that list), a tool to do this may not be straightforward, and in any case, no such tool is known to exist today to do this with non-web documents.
 </p>
 
-<p>Similarly, to ensure this criterion is met for non-web software, once the set of software is defined, every software application in the set must be searched for blocks of content that are repeated across all of those applications, and a mechanism to skip those repeated blocks. Since the blocks aren't necessarily completely identical (e.g. a repeated listing of all other software in a set might not include the software application containing that list), a tool to do this may not be straightforward, and in any case, no such tool is known to exist today to do this with non-web software.
+<p>Similarly, to ensure this criterion is met for non-web software, once the set of software is defined, every software application in the set must be searched for blocks of content that are repeated across all of those applications, and a mechanism to skip those repeated blocks. Since the blocks aren&apos;t necessarily completely identical (e.g. a repeated listing of all other software in a set might not include the software application containing that list), a tool to do this may not be straightforward, and in any case, no such tool is known to exist today to do this with non-web software.
 </p>
 </section>
 
-<section class="appendix">
+<section class="appendix notoc">
 <h4>Multiple Ways
 </h4>
 <p class="sc-link">
@@ -827,7 +893,7 @@ <h4>Multiple Ways
 <p>Similarly, to ensure this criterion is met for non-web software, once the set of software is defined, every software application in the set must provide multiple mechanisms for locating every other application in the set. As noted by WCAG2ICT, if the software applications are on a file system, <q>it may be possible to browse through the files or programs that make up a set, or search within members of the set for the names of other members. A file directory would be the equivalent of a site map for documents in a set, and a search function in a file system would be equivalent to a web search function for web pages.</q>  However, if this is not the case, then the set of software applications must expose at least 2 ways of locating every other application in the set. Determining if this is the case is not possible today with any testing tool we are aware of, and so would require human inspection.
 </p>
 </section>
-            <section class="appendix">
+            <section class="appendix notoc">
 <h4>Consistent Navigation
 </h4>
 <p class="sc-link">
@@ -841,7 +907,7 @@ <h4>Consistent Navigation
 </p>
 </section>
 
-            <section class="appendix">
+            <section class="appendix notoc">
 <h4>Consistent Identification
 </h4>
 <p class="sc-link">
@@ -861,7 +927,7 @@ <h4>Consistent Identification
 	<h3><q>Non-Interference</q> Success Criteria</h3>
 	<p>The <q>non-interference</q> success criteria are things that apply to <q>all areas
 		of the page.</q> As explained in WCAG2ICT in the section <a href="http://www.w3.org/TR/wcag2ict/#wcag2ict_comments_cc">Comments on
-		Conformance</a>, <q>it wasn't possible to unambiguously carve up software into
+		Conformance</a>, <q>it wasn&apos;t possible to unambiguously carve up software into
 discrete pieces, and so the unit of evaluation for non-web software is the
 whole software program. As with any software testing this can be a very large
 unit of evaluation, and methods similar to standard software testing might be
@@ -871,7 +937,7 @@ <h3><q>Non-Interference</q> Success Criteria</h3>
 would normally be part of the software testing strategy to verify compliance
 with these four criteria.</p>
 
-            <section class="appendix">
+            <section class="appendix notoc">
 <h4>Audio Control
 </h4>
 <p class="sc-link">
@@ -890,12 +956,12 @@ <h4>Audio Control
 
 <p>Where non-web software contains audio, especially audio that automatically
 plays in certain circumstances (e.g. making a ringing sound to indicate an
-incoming call) ... </p>
-<p><strong>EDITOR'S NOTE</strong><br /> Section content yet to be written.</p>
+incoming call) &#x2026; </p>
+<p><strong>EDITOR&apos;S NOTE</strong><br/> Section content yet to be written.</p>
 
 </section>
 
-            <section class="appendix">
+            <section class="appendix notoc">
 <h4>No Keyboard Trap
 </h4>
 <p class="sc-link">
@@ -909,7 +975,7 @@ <h4>No Keyboard Trap
 </p>
 </section>
 
-            <section class="appendix">
+            <section class="appendix notoc">
 <h4>Pause, Stop, Hide
 </h4>
 <p class="sc-link">
@@ -929,7 +995,7 @@ <h4>Pause, Stop, Hide
 </p>
 </section>
 
-            <section class="appendix">
+            <section class="appendix notoc">
 <h4>Three Flashes or Below Threshold
 </h4>
 <p class="sc-link">
@@ -946,57 +1012,57 @@ <h4>Three Flashes or Below Threshold
 <section class="appendix" id="Appendix-B.3">
 <h3>Remaining WCAG 2.0 A/AA success criterion mentioned in WCAG2ICT as
 needing additional text changes</h3>
-            <section class="appendix">
+            <section class="appendix notoc">
 <h4>Reflow
 </h4>
 <p class="sc-link">
 <a href="https://www.w3.org/TR/WCAG21/#reflow">Success Criterion 1.4.10</a>
 </p>
 
-<p><strong>EDITOR'S NOTE</strong><br />Section content yet to be written.</p>
+<p><strong>EDITOR&apos;S NOTE</strong><br/>Section content yet to be written.</p>
 </section>
 
-            <section class="appendix">
+            <section class="appendix notoc">
 <h4>Timing Adjustable
 </h4>
 <p class="sc-link">
 <a href="https://www.w3.org/TR/WCAG21/#timing-adjustable">Success Criterion 2.2.1</a>
 </p>
 
-<p><strong>EDITOR'S NOTE</strong><br />Section content yet to be written.</p>
+<p><strong>EDITOR&apos;S NOTE</strong><br/>Section content yet to be written.</p>
 	    </section>
 
-            <section class="appendix">
+            <section class="appendix notoc">
 <h4>Pointer Gestures
 </h4>
 <p class="sc-link">
 <a href="https://www.w3.org/TR/WCAG21/#pointer-gestures">Success Criterion 2.5.1</a>
 </p>
 
-<p><strong>EDITOR'S NOTE</strong><br />Section content yet to be written.</p>
+<p><strong>EDITOR&apos;S NOTE</strong><br/>Section content yet to be written.</p>
 </section>
 
-            <section class="appendix">
+            <section class="appendix notoc">
 <h4>Pointer Cancellation
 </h4>
 <p class="sc-link">
 <a href="https://www.w3.org/TR/WCAG21/#pointer-cancellation">Success Criterion 2.5.2</a>
 </p>
 
-<p><strong>EDITOR'S NOTE</strong><br />Section content yet to be written.</p>
+<p><strong>EDITOR&apos;S NOTE</strong><br/>Section content yet to be written.</p>
 </section>
 
-            <section class="appendix">
+            <section class="appendix notoc">
 <h4>Language of Page
 </h4>
 <p class="sc-link">
 <a href="https://www.w3.org/TR/WCAG21/#language-of-page">Success Criterion 3.1.1</a>
 </p>
 
-<p><strong>EDITOR'S NOTE</strong><br />Section content yet to be written.</p>
+<p><strong>EDITOR&apos;S NOTE</strong><br/>Section content yet to be written.</p>
 </section>
 
-            <section class="appendix">
+            <section class="appendix notoc">
 <h4>Language of Parts
 </h4>
 <p class="sc-link">
@@ -1010,47 +1076,47 @@ <h4>Language of Parts
 
 </section>
 
-            <section class="appendix">
+            <section class="appendix notoc">
 <h4>Error Prevention
 </h4>
 <p class="sc-link">
 <a href="https://www.w3.org/TR/WCAG21/#error-prevention-legal-financial-data">Success Criterion 3.3.4</a>
 </p>
 
-<p><strong>EDITOR'S NOTE</strong><br />Section content yet to be written.</p>
+<p><strong>EDITOR&apos;S NOTE</strong><br/>Section content yet to be written.</p>
 </section>
 
-            <section class="appendix">
+            <section class="appendix notoc">
 <h4>Parsing
 </h4>
 <p class="sc-link">
 <a href="https://www.w3.org/TR/WCAG21/#parsing">Success Criterion 4.1.1</a>
 </p>
 
-<p><strong>EDITOR'S NOTE</strong><br /> Section content yet to be written.</p>
+<p><strong>EDITOR&apos;S NOTE</strong><br/> Section content yet to be written.</p>
 </section>
 
-            <section class="appendix">
+            <section class="appendix notoc">
 <h4>Name, Role, Value
 </h4>
 <p class="sc-link">
 <a href="https://www.w3.org/TR/WCAG21/#name-role-value">Success Criterion 4.1.2</a>
 </p>
 
-<p><strong>EDITOR'S NOTE</strong><br />Section content yet to be written.</p>
+<p><strong>EDITOR&apos;S NOTE</strong><br/>Section content yet to be written.</p>
 </section>
 </section>
 
 <section class="appendix" id="Appendix-B.4">
 <h3>New A/AA Success Criteria in WCAG 2.1</h3>
-            <section class="appendix">
+            <section class="appendix notoc">
 <h4>Text Spacing
 </h4>
 <p class="sc-link">
 <a href="https://www.w3.org/TR/WCAG21/#text-spacing">Success Criterion 1.4.12</a>
 </p>
 
-<p><strong>EDITOR'S NOTE</strong><br />Section content yet to be written.</p>
+<p><strong>EDITOR&apos;S NOTE</strong><br/>Section content yet to be written.</p>
 </section>
 </section>
 
@@ -1059,10 +1125,10 @@ <h3>Success Criteria Needing Special Treatment in Non-Accessibility Supported En
 	<p>15 of the 38 A and AA criteria in WCAG 2.0 relate to an accessibility supported interface — they are designed with interoperability with assistive technologies in mind. Such interaction may not be possible for many types of software (e.g.
 	software running in a <q>closed</q> environment like an airplane ticket kiosk). Thus, in those environments, the only way to address the needs articulated in these criteria may be for the software to be <q>self-voicing</q> for blind users who can
 	hear, and otherwise <q>self-accessible</q> to the needs of people with other disabilities which are commonly supported via assistive technologies. It may not be feasible to support all disability user needs (e.g. including a refreshable
-	braille display in the device to support deaf-blind users, and then maintaining those braille displays to ensure their mechanisms don't get damaged).
+	braille display in the device to support deaf-blind users, and then maintaining those braille displays to ensure their mechanisms don&apos;t get damaged).
 	</p>
 
-                <ol>
+        <ul>
 			<li><a href="https://www.w3.org/TR/WCAG21/#non-text-content">Non-Text Content</a> (Success Criterion 1.1.1)</li>
 			<li><a href="https://www.w3.org/TR/WCAG21/#audio-only-and-video-only-prerecorded">Audio-only and video-only (Prerecorded)</a> (Success Criterion 1.2.1)</li>
 		    <li><a href="https://www.w3.org/TR/WCAG21/#audio-description-or-media-alternative-prerecorded">Audio description or media alternative (Prerecorded)</a> (Success Criterion 1.2.3)</li>
@@ -1078,34 +1144,123 @@ <h3>Success Criteria Needing Special Treatment in Non-Accessibility Supported En
 		    <li><a href="https://www.w3.org/TR/WCAG21/#error-identification">Error Identification</a> (Success Criterion 3.3.1)</li>
 		    <li><a href="https://www.w3.org/TR/WCAG21/#parsing">Parsing</a> (Success Criterion 4.1.1)</li>
 		    <li><a href="https://www.w3.org/TR/WCAG21/#name-role-value">Name, Role, Value</a> (Success Criterion 4.1.2)</li>
-		</ol>
+		</ul>
 </section>
       </section>
-        <section class="appendix">
+
+	      <section class="appendix silver" id="Appendix-C">
+            <h2>Challenges of Conformance as identified from Silver Research</h2>
+	    <p>Now known as <a href="https://www.w3.org/WAI/wcag3">W3C Accessibility Guidelines (WCAG 3.0)</a>, this iteration of W3C accessibility guidance was conceived and designed to be research-based. Working over many years, the Silver Task Force of the Accessibility Guidelines Working Group (AGWG) and the Silver Community Group collaborated with researchers on questions that the Silver Groups identified. This research was used to develop 11 problem statements that needed to be solved for Silver.  The detailed problem statements include the specific problem, the result of the problem, the situation and priority, and the opportunity presented by the problem. The problem statements were organized into three main areas:  Usability, Conformance, and Maintenance. The section following is taken from the <a href="https://www.w3.org/community/silver/draft-final-report-of-silver/#h.n2wcg0gauz5x">Conformance sections of the Silver Design Sprint Final Report</a> and the <a href="https://www.w3.org/WAI/GL/task-forces/silver/wiki/Problem_Statements#Conformance_Model">Silver Problem Statements</a>. Details of the research questions and the individual reports are in <a href="https://www.w3.org/WAI/GL/task-forces/silver/wiki/Silver_Research_Archive">Research Archive of Silver wiki</a>.</p>
+	    <p>The following is shown as originally presented by the Silver task force, Key conclusions have been folded into specific enumerated challenges as appropriate.</p>
+            <section>
+                <h3>Silver Research Problem Statements</h3>
+                <p>Originally published as the <a href="https://www.w3.org/community/silver/draft-final-report-of-silver/#h.n2wcg0gauz5x">Silver Design Sprint Final Report</a> (2018). These problem statements were presented to the Silver Design Sprint participants.</p>
+                <ul>
+			<li>Constraints on <q>What is Strictly Testable</q> provides an obstacle to including guidance that meets the needs of people with disabilities but is not conducive to a pass/fail test.</li>
+                    <li>Human Testable (related to Ambiguity) also relates to differences in knowledge and priorities of different testers achieve different results.</li>
+                    <li>Accessibility Supported is a conformance requirement of WCAG 2  that is poorly understood and incompletely implemented.</li>
+                    <li>Evolving Technology of the rapidly changing web must constantly be evaluated against the capabilities of assistive technology and evolving assistive technology must be evaluated against the backward compatibility of existing web sites.</li>
+                </ul>
+            </section>
+            <section>
+                <h3>Details of Problem Statements</h3>
+                <p>Originally published as <a href="https://www.w3.org/WAI/GL/task-forces/silver/wiki/Problem_Statements#Conformance_Model">Silver Problem Statements</a>, this was a detailed analysis of the research results behind the above list.</p>
+                <section>
+                    <h4>Definition of Conformance</h4>
+		    <blockquote cite="https://www.w3.org/WAI/GL/task-forces/silver/wiki/Problem_Statements#Conformance_Model"><p>Conformance to a standard means that you meet or satisfy the <q>requirements</q> of the standard. In WCAG 2.0 the <q>requirements</q> are the Success Criteria. To conform to WCAG 2.0, you need to satisfy the Success Criteria, that is, there is no content which violates the Success Criteria.</p>
+                    <p><strong>WCAG 2.0 Conformance Requirements:</strong></p>
+                    <ol>
+                        <li>Conformance Level (A to AAA)</li>
+                        <li>Conformance Scope (For full web pages only, not partial)</li>
+                        <li>Complete Process</li>
+                        <li>Only "Accessibility-supported" ways of using technologies</li>
+                        <li>Non-Interference: Technologies that are not accessibility supported can be used, as long as all the information is also available using technologies that are accessibility supported and as long as the non-accessibility-supported material does not interfere.</li>
+		            </ol></blockquote>
+                </section>
+                <section id="3rd">
+                    <h4>Themes from Research</h4>
+                    <ul>
+                        <li>No monitoring process to test the accuracy of WCAG compliance claims (Keith et al., 2012)</li>
+                        <li>Difficulties for conformance (Keith et al., 2012)
+                            <ul>
+                                <li>Third parties documents, applications and services</li>
+                                <li>Know-how of IT personnel</li>
+                                <li>Tension between accessibility and design</li>
+                            </ul>
+                        </li>
+
+                        <li>Specific success criteria for failure - 1.1.1 , 2.2., 4.1.2 (Keith et al., 2012)</li>
+			            <li><q>Reliably Human Testable,</q> <q>not reliably testable</q> <a href="http://www.researchgate.net/publication/235339930_Is_accessibility_conformance_an_elusive_property_A_study_of_validity_and_reliability_of_WCAG_20">Is Accessibility Conformance an Elusive Property? (Brajnik et al. 2012)</a>, found the average agreement was at the 70-75% mark, while the error rate was around 29%.
+                            <ul>
+                                <li>Expertise appears to improve (by 19%) the ability to avoid false positives. Finally, pooling the results of two independent experienced evaluators would be the best option, capturing at most 76% of the true problems and producing only 24% of false positives. Any other independent combination of audits would achieve worse results.</li>
+                                <li>This means that an 80% target for agreement, when audits are conducted without communication between evaluators, is not attainable, even with experienced evaluators.</li>
+                            </ul>
+                        </li>
+                        <li>Challenges and Recommendations (Alonso et al., 2010)                                                       
+                            <ul>
+                                <li><q>accessibility supported ways of using technologies</q></li>
+                                <li>Testability of Success Criteria</li>
+                                <li>Openness of Techniques and Failures</li>
+                                <li>Aggregation of Partial Results</li>
+                            </ul>
+                        </li>
+			            <li>Silver needs to expand the scope beyond web to include apps, documents, authoring, user agents, wearables, kiosks, IoT, VR, etc. and be inclusive of more disabilities. (<abbr title="user experience">UX</abbr> Professionals Use of WCAG: Analysis)</li>
+                        <li>Accessibility Supported allows inadequate assistive technologies to be claimed for conformance, particularly in non-native English speaking countries. (Interviews on Conformance)</li>
+                    </ul>
+                </section>
+		<section id="testing-constraints">
+                    <h4>Constraints on What is Strictly Testable</h4>
+		    <p><strong>Specific problem</strong>: Certain success criteria are quite clear and measurable, like color contrast. Others, far less so. The entire principle of understandable is critical for people with cognitive disabilities, yet success criteria intended to support the principle are not easy to test for or clear on how to measure. As a simple example, there is no clear, recent or consistent definition – within any locale or language – on what <q>lower secondary education level</q> means in regard to web content. Language and text content is also not the only challenge among those with cognitive and learning disabilities. Compounding this, most of the existing criteria in support of understanding are designated as AAA, which relatively few organizations attempt to conform with.</p>
+                    <p><strong>Result of problem</strong>: The requirement for valid and reliable testability for WCAG success criteria presents a structural barrier to including the needs of people with disabilities whose needs are not strictly testable. Guidance that WCAG working group members would like to include cannot be included. The needs of people with disabilities – especially intellectual and cognitive disabilities – are not being met.</p>
+                    <p><strong>Situation and Priority</strong>: Of the 70 new success criteria proposed by the Cognitive Accessibility Task Force to support the needs of people with cognitive and intellectual disabilities, only four to six (depending on interpretation) were added to WCAG 2.1 and only one is in level AA. The remainder are in level AAA, which is rarely implemented. This means user needs are not met.</p>
+                    <p><strong>Opportunity</strong>: Multiple research projects and audience feedback have concluded that simpler language is desired and needed for audiences of the guidelines. Clear but flexible criteria with considerations for a wider spectrum of disabilities helps ensure more needs are met.</p>
+                </section>
+                <section id="human-testable">
+                    <h4>Human Testable</h4>
+                    <p><strong>Specific problem</strong>: Regardless of proficiency, there is a significant gap in how any two human auditors will identify a success or fail of criteria. Various audiences have competing priorities when assessing the success criteria of any given digital property. Knowledge varies for accessibility standards and how people with disabilities use assistive technology tools. Ultimately, there is variance between: any two auditors; any two authors of test cases; and human bias. Some needs of people of disabilities are difficult to measure in a quantifiable way.</p>
+                    <p><strong>Result of problem</strong>: Success criteria are measured by different standards and by people who often make subjective observations. Because there&apos;s so much room for human error, an individual may believe they&apos;ve met a specific conformance model when, in reality, that’s not the case. The ultimate impact is on an end user with a disability who cannot complete a given task, because the success criteria wasn’t properly identified, tested and understood.</p>
+                    <p><strong>Situation and Priority</strong>: There isn&apos;t a standardized approach to how the conformance model applies to success criteria at the organizational level and in specific test case scenarios.</p>
+                    <p><strong>Opportunity</strong>: There&apos;s an opportunity to improve the success criteria such that human auditors and testers find the success criteria more understandable. Educating business leaders on how the varying levels of conformance apply to their organization may be useful as well. We can educate about the ways that people with disabilities use their assistive technology.</p>
+                </section>
+                <section id="at-supported">
+                    <h4>Accessibility Supported</h4>
+		    <p><strong>Specific problem</strong>: <q>Accessibility supported</q> was implemented in a way that did not facilitate consistent adoption by developers and testers. It also requires a harmonious relationship and persistent interoperability between content technologies and requesting technologies that must be continuously evaluated as either is updated. Further, the WG <q>defers the judgment of how much, how many, or which AT must support a technology to the community.</q> It is poorly understood, even by experts.</p>
+                    <p><strong>Result of problem</strong>: Among the results are: difficulty understanding what qualifies as a content technology or an assistive technology; difficulty quantifying assistive technologies or features of user agents; claiming conformance with inadequate assistive technology; and difficulty claiming conformance.</p>
+                    <p><strong>Situation and Priority</strong>: Any claim or assertion that a web page conforms to the guidelines may require an explicit statement defining which assistive technology and user agent(s) the contained technologies rely upon, and presumably inclusive of specific versions and or release dates of each. One could infer then that a conformance claim is dependent upon a software compatibility claim naming browsers and assistive technology and their respective versions. This would create a burden to author and govern such claims. Additionally, no one can predict and anticipate new technologies and their rates of adoption by people with disabilities.</p>
+		    <p><strong>Opportunity</strong>: As the technologies in this equation evolve, the interoperability may be affected by any number of factors outside of the control of the author and publisher of a web page. Either <q>accessibility supported</q> should not be a
+		    component of conformance requirements, or it should clearly, concisely, and explicitly define and quantify the technologies or classes of technologies, AND set any resulting update or expiry criteria for governance.</p>
+                </section>
+                <section>
+                    <h4>Evolving Technology</h4>
+                    <p><strong>Specific problem</strong>: Evolving Technology: As content technology evolves, it must be re-evaluated against assistive technology for compatibility. Likewise, as assistive technology evolves or emerges, it must be evaluated against the backward compatibility of various content technology.</p>
+                    <p><strong>Result of problem</strong>: There is no versioning consideration for updates to user agents and assistive technology. Strict conformance then typically has an expiry.</p>
+                    <p><strong>Situation and Priority</strong>: There is no clear and universal understanding of the conformance model or its longevity. Some will infer that there is always a conformance debt when any technology changes.</p>
+                    <p><strong>Opportunity</strong>: Consider conformance statements to include an explicit qualifier of time of release or versions of technology. OR consider a more general approach that is not explicit and is flexible to the differences in technologies as they evolve, identifying the feature of the assistive tech rather than the version of the assistive tech. OR consider a model that quantifies conformance as a degree of criteria met.</p>
+                </section>
+            </section>
+        </section>
+
+        <section class="appendix" id="Appendix-D">
             <h2>Acknowledgments</h2>
-        	<section>
-        		<h3>Participants of the AG WG who contributed to the development of this document:</h3>
-        		<ul>
-        			<li>Charles Adams (Oracle)</li>
-<li>Alastair Campbell (Nomensa)</li>
-<li>Michael Cooper (W3C)</li>
-<li>Joe Cronin (Amazon)</li>
-<li>Detlev Fischer (Invited Expert) </li>
-<li>Charles Hall (Invited Expert)</li>
-<li>   Andrew Kirkpatrick (Adobe)</li>
-        			<li>Peter Korn (Amazon)</li>
-<li>Shawn Lauriat (Google)</li>
-<li>   Mary Jo Mueller (IBM)</li>
-        			<li>Janina Sajka (Amazon)</li>
-<li>Jeanne Spellman (TetraLogical)</li>
-<li>Jason White (ETS)</li>
-        		</ul>
-        	</section>
-        	<!--<div data-include="../acknowledgements/funders.html" data-include-replace="true"></div>-->
-        	<section>
-        		<h2>Enabling funders</h2>
-        		<p>This publication has been funded in part with U.S. Federal funds from the Health and Human Services, National Institute on Disability, Independent Living, and Rehabilitation Research (NIDILRR) under contract number HHSP23301500054C. The content of this publication does not necessarily reflect the views or policies of the U.S. Department of Health and Human Services, nor does mention of trade names, commercial products, or organizations imply endorsement by the U.S. Government.</p>
-        	</section>
+            <section>
+                <h3>Participants of the AG WG who contributed to the development of this document:</h3>
+                <ul>
+                    <li>Charles Adams (Oracle)</li>
+                    <li>Alastair Campbell (Nomensa)</li>
+                    <li>Michael Cooper (W3C)</li>
+                    <li>Joe Cronin (Amazon)</li>
+                    <li>Detlev Fischer (Invited Expert) </li>
+                    <li>Charles Hall (Invited Expert)</li>
+                    <li>Andrew Kirkpatrick (Adobe)</li>
+                    <li>Peter Korn (Amazon)</li>
+                    <li>Shawn Lauriat (Google)</li>
+                    <li>Mary Jo Mueller (IBM)</li>
+                    <li>Janina Sajka (Invited Expert; Was Amazon until 14 November 2021)</li>
+                    <li>Jeanne Spellman (TetraLogical)</li>
+                    <li>Jason White (ETS)</li>
+                </ul>
+            </section>
+            <div data-include="../acknowledgements/funders.html" data-include-replace="true"></div>
         </section>
     </body>
 </html>
diff --git a/conformance-challenges/respec-config.js b/conformance-challenges/respec-config.js
index 83cacbfe19..ece8d4ac34 100644
--- a/conformance-challenges/respec-config.js
+++ b/conformance-challenges/respec-config.js
@@ -42,10 +42,9 @@ var respecConfig = {
 	editors: [
 		{
 			name: "Janina Sajka",
-			company: "Amazon",
-			companyURL: "https://www.amazon.com/",
-			mailto: "sajkaj@amazon.com",
-			w3cid: 108617
+			URL: "https://linkedin.com/in/jsajka",
+			mailto: "janina@rednote.net",
+			w3cid: 33688
 		},
 		{
 			name: "Michael Cooper",
@@ -65,10 +64,9 @@ var respecConfig = {
 	//      company: "Your Company", companyURI: "http://example.com/" },
 		{
 			name: "Janina Sajka",
-			company: "Amazon",
-			companyURL: "https://www.amazon.com/",
-			mailto: "sajkaj@amazon.com",
-			w3cid: 108617
+			URL: "https://linkedin.com/in/jsajka",
+			mailto: "janina@rednote.net",
+			w3cid: 33688
 		},
 		{
 			name: "Peter Korn",
diff --git a/css/a11y-light.css b/css/a11y-light.css
new file mode 100644
index 0000000000..f1bf8f3f8f
--- /dev/null
+++ b/css/a11y-light.css
@@ -0,0 +1,99 @@
+/* a11y-light theme */
+/* Based on the Tomorrow Night Eighties theme: https://github.com/isagalaev/highlight.js/blob/master/src/styles/tomorrow-night-eighties.css */
+/* @author: ericwbailey */
+
+/* Comment */
+.hljs-comment,
+.hljs-quote {
+  color: #696969;
+}
+
+/* Red */
+.hljs-variable,
+.hljs-template-variable,
+.hljs-tag,
+.hljs-name,
+.hljs-selector-id,
+.hljs-selector-class,
+.hljs-regexp,
+.hljs-deletion {
+  color: #d91e18;
+}
+
+/* Orange */
+.hljs-number,
+.hljs-built_in,
+.hljs-builtin-name,
+.hljs-literal,
+.hljs-type,
+.hljs-params,
+.hljs-meta,
+.hljs-link {
+  color: #aa5d00;
+}
+
+/* Yellow */
+.hljs-attribute {
+  color: #aa5d00;
+}
+
+/* Green */
+.hljs-string,
+.hljs-symbol,
+.hljs-bullet,
+.hljs-addition {
+  color: #008000;
+}
+
+/* Blue */
+.hljs-title,
+.hljs-section {
+  color: #007faa;
+}
+
+/* Purple */
+.hljs-keyword,
+.hljs-selector-tag {
+  color: #7928a1;
+}
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  background: #fefefe;
+  color: #545454;
+  padding: 0.5em;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-strong {
+  font-weight: bold;
+}
+
+@media screen and (-ms-high-contrast: active) {
+  .hljs-addition,
+  .hljs-attribute,
+  .hljs-built_in,
+  .hljs-builtin-name,
+  .hljs-bullet,
+  .hljs-comment,
+  .hljs-link,
+  .hljs-literal,
+  .hljs-meta,
+  .hljs-number,
+  .hljs-params,
+  .hljs-string,
+  .hljs-symbol,
+  .hljs-type,
+  .hljs-quote {
+        color: highlight;
+    }
+
+    .hljs-keyword,
+    .hljs-selector-tag {
+        font-weight: bold;
+    }
+}
diff --git a/css/base.css b/css/base.css
index b028c7b059..25a82c2c1f 100644
--- a/css/base.css
+++ b/css/base.css
@@ -1,17 +1,473 @@
-.wcag21, .wcag22 {
-	background-color: #E9FBE9;
-	border-left: solid .5em #52E052;
+main {
+	display: block;
 }
-span.wcag21, span.wcag22 {
-	margin-left: .25em;
-	padding-left: .25em;
+
+.nav-container {
 }
-div.wcag21, div.wcag22 {
-	margin: 1em auto;
-	padding: .5em;
-	page-break-inside: avoid;
+
+.nav {
+	overflow: inherit;
 }
-.new-version {
-	font-size: smaller;
+
+.nav__item a {
+	display: inline-block;
+	white-space: inherit;
+}
+
+.nav__item a svg {
+	vertical-align: middle;
+	height: 1em;
+}
+
+.nav__item a + button {
+	margin-left: -0.75em;
+	margin-right: 1em;
+	;
+}
+
+.minimal-header {
+	-ms-grid-column: 2;
+	-ms-grid-column-span: 8;
+	-ms-grid-row: 1;
+	grid-column: 2/10;
+}
+
+.minimal-header-name a {
+  text-decoration: none;
+}
+.minimal-header-name a:hover, .minimal-header-name a:focus {
+  text-decoration: underline;
+}
+
+.main-content {
+	-ms-grid-column: 2;
+	-ms-grid-column-span: 6;
+	grid-column: 2/span 6;
+	-ms-grid-row: 2;
+	-ms-grid-row-span: 2;
+	grid-row-start: 2;
+}
+
+.sidebar ul {
+	padding: 0;
+}
+
+.sidebar dd {
+	margin-left: 0 !important;
+}
+
+h1 {
+	padding-top: 33px;
+}
+
+h1 span {
+	display: block;
+	font-size: .5em;
+	margin-bottom: 0.25em;
+}
+
+h2 {
+	position: relative;
+}
+
+h2 .permalink {
+	position: absolute;
+	left: -1em;
+}
+
+h2 .permalink a {
+	color: var(--grey);
+	text-decoration: none;
+}
+
+h2 .fragmentlink {
+	margin-left: -1em;
+	position: relative;
+	float: left;
+}
+
+h2 .fragmentlink svg {
+	visibility: hidden;
+}
+
+h2:hover .fragmentlink svg {
+	visibility: visible;
+}
+
+#success-criterion h2, #guideline h2, #technique h2 {
+  margin: 0;
+}
+
+.navtoc ul {
+  margin: 0.5em 0;
+}
+
+dt div {
+	font-weight: normal;
+}
+
+.toc-wcag-docs {
+	padding-left: 1em;
+}
+
+.main-content > .toc-understanding-guideline > li > a {
 	font-weight: bold;
-}
\ No newline at end of file
+	margin-top: 2em;
+	margin-bottom: -.5em;
+	display: block;
+	text-decoration: none;
+}
+
+.scquote {
+	margin: 0;
+	border: 1px solid var(--line-grey);
+	padding: 1em;
+	font-style: normal;
+}
+.scquote > :first-child {
+	margin-top: 0;
+	padding-top: 0;
+}
+
+.minimal-header-container {
+	background-color: #005a9c;
+	background-color: var(--w3c-classic);
+	color: #fff;
+	color: var(--pure-white);
+}
+.minimal-header-logo > a {
+	display: flex;
+}
+.minimal-header-name > a {
+	color: inherit;
+}
+
+.note {
+	padding: 0em 1em;
+  margin-bottom: 1em;
+}
+.note-title {
+	font-weight: bold;
+  margin: 0;
+}
+
+.note p {
+  margin-top: 0;
+}
+
+:is(aside, div).example .example-title {
+	font-weight: bold;
+	margin: 0;
+}
+:is(aside, div).example {
+	padding: 1em 1em 0.5em 1em;
+	margin-bottom: 1em;
+	border-left-width: .5em;
+	border-left-style: solid;
+	border-color: #e0cb52;
+	background: #fcfaee
+}
+
+.obsolete {
+  border-left: solid 5px var(--faded-red);
+}
+
+.obsolete-message {
+  background-color: var(--red-subtle);
+  border-color: var(--faded-red);
+}
+
+.obsolete-message h2 {
+  color: #fff;
+  background-color: var(--faded-red);
+  margin: 0;
+}
+
+/* import inline styles from https://www.w3.org/WAI/drafts/WCAG-understanding-redesign-hack.html */
+.nav a:link {
+text-decoration: none;
+}
+#site-header.minimal-header.with-subtitle {
+padding: 1.75em 0 0 0;
+}
+
+.minimal-header-logo img {
+margin: 1px 0 1px 0;
+}
+.minimal-header-logo svg {
+margin: 0.75em 0 0.75em 0.5em;
+}
+
+#site-header.minimal-header {
+margin: 1.2em 0;
+align-items: stretch;
+}
+
+#site-header.minimal-header .minimal-header-name, 
+#site-header.minimal-header .minimal-header-subtitle, 
+#site-header.minimal-header .minimal-header-link 
+{
+display: flex;
+flex-direction: column;
+justify-content: center;
+}
+
+.minimal-header-name {
+flex: width 0 0;
+}
+
+.minimal-header-subtitle,
+.minimal-header-link {
+border-left: 1px solid var(--gold);
+padding-left: 8px;
+margin-left: 18px;
+display: block;
+font-size: 80%;
+flex: 1 0 0;
+}
+
+.minimal-header-subtitle {
+font-style: italic;
+}
+
+.minimal-header-link {
+text-decoration: underline !important;
+font-weight: normal;
+margin-right: 16px;
+}
+
+.nav-container {
+margin-bottom: 0;
+}
+
+.nav {
+background: none;
+}
+
+.nav-related-info { /* blue bar with the "About:" links */
+background: #005a9c;
+color: #fff;
+}
+
+.nav-related-info a {
+color: #fff !important;
+}
+
+.nav-page-specific { /* light blue bar with page/section specific navigation/pager */
+margin-bottom: 1.25em;
+}
+
+.nav a:link, .nav a:visited {
+color: #036;
+color: var(--w3c-blue);
+}
+
+.nav a:hover, .nav a:active {
+color: var(--dk-blue);
+}
+
+.nav-hack.sidebar a:hover,
+.nav-hack.sidebar a:active
+{
+color: var(--dk-blue);
+text-decoration: underline;
+}
+
+.standalone-resource-about, .standalone-resource-pager {
+margin: 0;
+}
+
+nav.standalone-resource-about {
+padding: .5em 0 1.5em 0;
+font-style: italic;
+}
+
+.standalone-resource-about dl, .standalone-resource-about dt, .standalone-resource-about dd {
+display: inline;
+margin: 0;
+padding: 0;
+}
+
+.standalone-resource-about dt{
+font-weight: normal;
+}
+
+.standalone-resource-about dl a {
+margin: 0;
+padding: 0 1em 0 1em;
+}
+
+.standalone-resource-about dd {
+border-right: 1px var(--gold) solid;
+}
+
+.standalone-resource-about dd:last-of-type {
+border-right: 0;
+}
+
+.standalone-resource-about dd svg {
+margin-left: 0.25rem;
+vertical-align: middle;
+}
+
+.nav .standalone-resource-pager ul {
+align-items: center;
+}
+
+.nav .standalone-resource-pager a,
+.nav .standalone-resource-pager span {
+margin-left: 0;
+margin-right: 0;
+}
+
+.pager-icon {
+vertical-align: middle;
+padding: 0 0.15em 0.15em 0.15em;
+width: 1em;
+height: 2em;
+fill: #005A6A; /* when these are used as actual SVGs */
+}
+
+.category-icon {
+vertical-align: middle;
+padding: 0 0.25em 0.25em 0.25em;
+width: 2em;
+height: 2em;
+}
+
+.standalone-resource-pager ul {
+display: block;
+}
+
+.standalone-resource-pager ul li {
+display: inline;
+}
+
+.nav-hack {
+font-size: .85em;
+/*justify-self: end;*/
+align-self: start;
+}
+.nav-hack ul {
+list-style: none;
+padding-left: 0
+}
+.nav-hack li:not(:first-child){
+padding-top: 0.4em;
+line-height: 1.2;
+border-top: 1px solid #BCBCBC;
+}
+.nav-hack li a {
+text-decoration: none;
+}
+.nav-hack h3 {
+margin: 0;
+font-size: 1rem;
+}
+
+.nav-hack p {
+margin: 0;
+}
+
+
+/* skip link */
+.button--skip-link {
+background-color: var(--gold) !important;
+border-color: var(--gold) !important;
+outline-color: currentColor !important;
+color: var(--off-black) !important;
+font-weight: 600;
+font-size: larger;
+margin: 0 auto;
+position: absolute;
+z-index: 20;
+left: 0;
+right: 0;
+top: 0.5em;
+width: 10em;
+opacity: 1;
+transition: transform 0.1875s ease-out, opacity 0.1875s ease-out;
+}
+
+.button--skip-link:not(:focus):not(:hover) {
+transform: translateY(-4em);
+opacity: 0;
+}
+
+.standalone-resource-navrule {
+border:none;
+border-top: 1px solid grey
+}
+
+.standalone-resource-about ul,
+.standalone-resource-pager ul {
+list-style: none;
+}
+
+.nav {
+font-size: 95%;
+}
+
+.standalone-resource-about a,
+.standalone-resource-pager a,
+.standalone-resource-about span,
+.standalone-resource-pager span 
+{
+margin-left:.8em;
+margin-right:.8em;
+}
+
+.example video,
+#examples video
+{
+    max-width: 100%;
+}
+
+#brief {
+  margin-bottom: 3em;
+}
+#brief dl {
+  margin-left: 2em;
+}
+
+@media (max-width: 35em) {
+	.nav-container {
+		padding: 0;
+	}
+	.nav a {
+		display: inline-block;
+		width: calc(100% - 2em);
+	}
+	@supports (display:gred) {
+		#site-header {
+			padding-left: 0;
+		}
+	}
+	.minimal-header {
+		display: block;
+	}
+	#site-header.minimal-header .minimal-header-name, #site-header.minimal-header .minimal-header-subtitle, #site-header.minimal-header .minimal-header-link {
+		display: block;
+	}
+	#site-header.minimal-header .minimal-header-subtitle {
+		display: none;
+	}
+	.minimal-header-name {
+		font-size: 160%;
+		margin-bottom: 0.5em;
+	}
+	.minimal-header-link {
+		margin-left: 0;
+		padding-left: 0;
+		border: none;
+	}
+	.minimal-header-logo {
+		display: block;
+	}
+	.minimal-header-logo > a {
+		display: inline-block;
+	}
+	.minimal-header-logo svg {
+		margin: 1em 0 0 0;
+	}
+}
diff --git a/eleventy.config.ts b/eleventy.config.ts
new file mode 100644
index 0000000000..fc9fe5ff69
--- /dev/null
+++ b/eleventy.config.ts
@@ -0,0 +1,299 @@
+import compact from "lodash-es/compact";
+import { rimraf } from "rimraf";
+
+import { copyFile } from "fs/promises";
+
+import { CustomLiquid } from "11ty/CustomLiquid";
+import {
+  actRules,
+  assertIsWcagVersion,
+  getFlatGuidelines,
+  getPrinciples,
+  type Guideline,
+  type Principle,
+  type SuccessCriterion,
+} from "11ty/guidelines";
+import {
+  getFlatTechniques,
+  getTechniqueAssociations,
+  getTechniquesByTechnology,
+  technologies,
+  technologyTitles,
+  type Technique,
+  type Technology,
+} from "11ty/techniques";
+import { generateUnderstandingNavMap, getUnderstandingDocs } from "11ty/understanding";
+import type { EleventyContext, EleventyData, EleventyEvent } from "11ty/types";
+
+/** Version of WCAG to build */
+const version = process.env.WCAG_VERSION || "22";
+assertIsWcagVersion(version);
+
+/**
+ * Returns boolean indicating whether a technique is obsolete for the given version.
+ * Tolerates undefined for use with hash lookups.
+ */
+const isTechniqueObsolete = (technique: Technique | undefined) =>
+  !!technique?.obsoleteSince && technique.obsoleteSince <= version;
+
+/**
+ * Returns boolean indicating whether an SC is obsolete for the given version.
+ * Tolerates other types for use with hash lookups.
+ */
+const isGuidelineObsolete = (guideline: Principle | Guideline | SuccessCriterion | undefined) =>
+  guideline?.type === "SC" && guideline.level === "";
+
+const principles = await getPrinciples();
+const flatGuidelines = getFlatGuidelines(principles);
+const techniques = await getTechniquesByTechnology();
+const flatTechniques = getFlatTechniques(techniques);
+
+for (const [technology, list] of Object.entries(techniques)) {
+  // Prune obsolete techniques from ToC
+  techniques[technology as Technology] = list.filter(
+    (technique) => !technique.obsoleteSince || technique.obsoleteSince > version
+  );
+}
+
+const techniqueAssociations = await getTechniqueAssociations(flatGuidelines);
+for (const [id, associations] of Object.entries(techniqueAssociations)) {
+  // Prune associations from non-obsolete techniques to obsolete SCs
+  techniqueAssociations[id] = associations.filter(
+    ({ criterion }) => criterion.level !== "" || isTechniqueObsolete(flatTechniques[id])
+  );
+}
+
+const understandingDocs = await getUnderstandingDocs(version);
+const understandingNav = await generateUnderstandingNavMap(principles, understandingDocs);
+
+// Declare static global data up-front so we can build typings from it
+const globalData = {
+  version,
+  versionDecimal: version.split("").join("."),
+  techniques, // Used for techniques/index.html
+  technologies, // Used for techniques/index.html
+  technologyTitles, // Used for techniques/index.html
+  principles, // Used for understanding/index.html
+  understandingDocs, // Used for understanding/index.html
+};
+
+export type GlobalData = EleventyData &
+  typeof globalData & {
+    // Expected data cascade properties from *.11tydata.js
+    headerLabel?: string; // akin to documentset.name in build.xml
+    headerUrl?: string;
+    isTechniques?: boolean;
+    isUnderstanding?: boolean;
+  };
+
+const [GH_ORG, GH_REPO] = (process.env.GITHUB_REPOSITORY || "w3c/wcag").split("/");
+
+const baseUrls = {
+  guidelines: `https://www.w3.org/TR/WCAG${version}/`,
+  techniques: "/techniques/",
+  understanding: "/understanding/",
+};
+
+if (process.env.WCAG_MODE === "editors") {
+  // For pushing to gh-pages
+  baseUrls.guidelines = `https://${GH_ORG}.github.io/${GH_REPO}/guidelines/${
+    version === "21" ? "" : `${version}/`
+  }`;
+  baseUrls.techniques = `https://${GH_ORG}.github.io/${GH_REPO}/techniques/`;
+  baseUrls.understanding = `https://${GH_ORG}.github.io/${GH_REPO}/understanding/`;
+} else if (process.env.WCAG_MODE === "publication") {
+  // For pushing to W3C site
+  baseUrls.guidelines = `https://www.w3.org/TR/WCAG${version}/`;
+  baseUrls.techniques = `https://www.w3.org/WAI/WCAG${version}/Techniques/`;
+  baseUrls.understanding = `https://www.w3.org/WAI/WCAG${version}/Understanding/`;
+}
+
+export default function (eleventyConfig: any) {
+  for (const [name, value] of Object.entries(globalData)) eleventyConfig.addGlobalData(name, value);
+
+  // Make baseUrls available to templates
+  for (const [name, value] of Object.entries(baseUrls))
+    eleventyConfig.addGlobalData(`${name}Url`, value);
+
+  // Use git modified time if building for gh-pages or W3C site;
+  // otherwise use local mtime to cut build time (~4s difference).
+  // See https://www.11ty.dev/docs/dates/#setting-a-content-date-in-front-matter
+  eleventyConfig.addGlobalData("date", `${process.env.WCAG_MODE ? "git " : ""}Last Modified`);
+
+  // eleventyComputed data is assigned here rather than in 11tydata files;
+  // we have access to typings here, and can keep the latter fully static.
+  eleventyConfig.addGlobalData("eleventyComputed", {
+    // permalink determines output structure; see https://www.11ty.dev/docs/permalinks/
+    permalink: ({ page, isUnderstanding }: GlobalData) => {
+      if (page.inputPath === "./index.html" && process.env.WCAG_MODE) return false;
+      if (isUnderstanding) {
+        // understanding-metadata.html exists in 2 places; top-level wins in XSLT process
+        if (/\/20\/understanding-metadata/.test(page.inputPath)) return false;
+        // Flatten pages into top-level directory, out of version subdirectories
+        return page.inputPath.replace(/\/2\d\//, "/");
+      }
+      // Preserve existing structure: write to x.html instead of x/index.html
+      return page.inputPath;
+    },
+
+    nav: ({ page, isUnderstanding }: GlobalData) =>
+      isUnderstanding ? understandingNav[page.fileSlug] : null,
+    testRules: ({ page, isTechniques, isUnderstanding }: GlobalData) => {
+      if (isTechniques)
+        return actRules.filter(({ wcagTechniques }) => wcagTechniques.includes(page.fileSlug));
+      if (isUnderstanding)
+        return actRules.filter(({ successCriteria }) => successCriteria.includes(page.fileSlug));
+    },
+
+    // Data for individual technique pages
+    technique: ({ page, isTechniques }: GlobalData) =>
+      isTechniques ? flatTechniques[page.fileSlug] : null,
+    techniqueAssociations: ({ page, isTechniques }: GlobalData) =>
+      isTechniques ? techniqueAssociations[page.fileSlug] : null,
+
+    // Data for individual understanding pages
+    guideline: ({ page, isUnderstanding }: GlobalData) =>
+      isUnderstanding ? flatGuidelines[page.fileSlug] : null,
+  });
+
+  // See https://www.11ty.dev/docs/copy/#emulate-passthrough-copy-during-serve
+  eleventyConfig.setServerPassthroughCopyBehavior("passthrough");
+
+  eleventyConfig.addPassthroughCopy("techniques/*.css");
+  eleventyConfig.addPassthroughCopy("techniques/*/img/*");
+  eleventyConfig.addPassthroughCopy({
+    "css/base.css": "techniques/base.css",
+    "css/a11y-light.css": "techniques/a11y-light.css",
+    "script/highlight.min.js": "techniques/highlight.min.js",
+  });
+
+  eleventyConfig.addPassthroughCopy("understanding/*.css");
+  eleventyConfig.addPassthroughCopy({
+    "guidelines/relative-luminance.html": "understanding/relative-luminance.html",
+    "understanding/*/img/*": "understanding/img", // Intentionally flatten
+  });
+
+  eleventyConfig.addPassthroughCopy("working-examples/**");
+
+  eleventyConfig.on("eleventy.before", async ({ runMode }: EleventyEvent) => {
+    // Clear the _site folder before builds intended for the W3C site,
+    // to avoid inheriting dev-only files from previous runs
+    if (runMode === "build" && process.env.WCAG_MODE === "publication") await rimraf("_site");
+  });
+
+  eleventyConfig.on("eleventy.after", async ({ dir }: EleventyEvent) => {
+    // addPassthroughCopy can only map each file once,
+    // but base.css needs to be copied to a 2nd destination
+    await copyFile(`${dir.input}/css/base.css`, `${dir.output}/understanding/base.css`);
+  });
+
+  eleventyConfig.setLibrary(
+    "liquid",
+    new CustomLiquid({
+      // See https://www.11ty.dev/docs/languages/liquid/#liquid-options
+      root: ["_includes", "."],
+      jsTruthy: true,
+      strictFilters: true,
+    })
+  );
+
+  // Filter that transforms a technique ID (or list of them) into links to their pages.
+  eleventyConfig.addFilter(
+    "linkTechniques",
+    function (this: EleventyContext, ids: string | string[]) {
+      const links = (Array.isArray(ids) ? ids : [ids]).map((id) => {
+        if (typeof id !== "string") throw new Error(`linkTechniques: invalid id ${id}`);
+        const technique = flatTechniques[id];
+        if (!technique) {
+          console.warn(
+            `linkTechniques in ${this.page.inputPath}: ` +
+              `skipping unresolvable technique id ${id}`
+          );
+          return;
+        }
+
+        // Omit links to obsolete techniques, when not also linked from one
+        if (
+          isTechniqueObsolete(technique) &&
+          !isTechniqueObsolete(flatTechniques[this.page.fileSlug]) &&
+          !isGuidelineObsolete(flatGuidelines[this.page.fileSlug])
+        ) {
+          if (process.env.WCAG_VERBOSE) {
+            const since = technique.obsoleteSince!.split("").join(".");
+            console.warn(
+              `linkTechniques in ${this.page.inputPath}: ` +
+                `skipping obsolete technique ${id} (as of ${since})`
+            );
+          }
+          return;
+        }
+
+        // Support relative technique links from other techniques or from techniques/index.html,
+        // otherwise path-absolute when cross-linked from understanding/*
+        const urlBase = /^\/techniques\/.*\//.test(this.page.filePathStem)
+          ? "../"
+          : this.page.filePathStem.startsWith("/techniques")
+            ? ""
+            : baseUrls.techniques;
+        const label = `${id}: ${technique.truncatedTitle}`;
+        return `<a href="${urlBase}${technique.technology}/${id}">${label}</a>`;
+      });
+      return compact(links).join("\nand\n");
+    }
+  );
+
+  // Filter that transforms a guideline or SC shortname (or list of them) into links to their pages.
+  eleventyConfig.addFilter(
+    "linkUnderstanding",
+    function (this: EleventyContext, ids: string | string[]) {
+      return (Array.isArray(ids) ? ids : [ids])
+        .map((id) => {
+          if (typeof id !== "string") throw new Error("linkUnderstanding: invalid id passed");
+          const guideline = flatGuidelines[id];
+          if (!guideline) {
+            console.warn(
+              `linkUnderstanding in ${this.page.inputPath}: ` +
+                `skipping unresolvable guideline shortname ${id}`
+            );
+            return;
+          }
+
+          // Warn of links to obsolete SCs, when not also linked from one.
+          // This is intentionally not behind WCAG_VERBOSE, and does not remove,
+          // as links to Understanding docs are more likely to be in the middle
+          // of prose requiring manual adjustments
+          if (
+            isGuidelineObsolete(guideline) &&
+            !isGuidelineObsolete(flatGuidelines[this.page.fileSlug]) &&
+            !isTechniqueObsolete(flatTechniques[this.page.fileSlug])
+          ) {
+            console.warn(
+              `linkUnderstanding in ${this.page.inputPath}: ` +
+                `reference to obsolete ${guideline.type} ${id}`
+            );
+          }
+
+          const urlBase = this.page.filePathStem.startsWith("/understanding/")
+            ? ""
+            : baseUrls.understanding;
+          const label = `${guideline.num}: ${guideline.name}`;
+          return `<a href="${urlBase}${id}">${label}</a>`;
+        })
+        .join("\nand\n");
+    }
+  );
+
+  // Renders a section box (used for About this Technique and Guideline / SC)
+  eleventyConfig.addPairedShortcode(
+    "sectionbox",
+    (content: string, id: string, title: string) => `
+<section id="${id}" class="box">
+	<h2 class="box-h box-h-icon">${title}</h2>
+	<div class="box-i">${content}</div>
+</section>
+	`
+  );
+
+  // Suppress default build output that prints every path, to make our own output clearly visible
+  eleventyConfig.setQuietMode(true);
+}
diff --git a/guidelines/act-mapping.json b/guidelines/act-mapping.json
new file mode 100644
index 0000000000..d8790249d7
--- /dev/null
+++ b/guidelines/act-mapping.json
@@ -0,0 +1,1032 @@
+{
+  "act-rules": [
+    {
+      "title": "ARIA attribute is defined in WAI-ARIA",
+      "permalink": "/standards-guidelines/act/rules/5f99a7/",
+      "successCriteria": [
+        "info-and-relationships",
+        "name-role-value"
+      ],
+      "wcagTechniques": [],
+      "deprecated": false,
+      "proposed": false
+    },
+    {
+      "title": "ARIA state or property has valid value",
+      "permalink": "/standards-guidelines/act/rules/6a7281/",
+      "successCriteria": [
+        "info-and-relationships",
+        "name-role-value"
+      ],
+      "wcagTechniques": [],
+      "deprecated": false,
+      "proposed": false
+    },
+    {
+      "title": "Autocomplete attribute has valid value",
+      "permalink": "/standards-guidelines/act/rules/73f2c2/",
+      "successCriteria": [
+        "identify-input-purpose"
+      ],
+      "wcagTechniques": [],
+      "deprecated": false,
+      "proposed": false
+    },
+    {
+      "title": "Button has non-empty accessible name",
+      "permalink": "/standards-guidelines/act/rules/97a4e1/",
+      "successCriteria": [
+        "name-role-value"
+      ],
+      "wcagTechniques": [],
+      "deprecated": false,
+      "proposed": false
+    },
+    {
+      "title": "Element in sequential focus order has visible focus",
+      "permalink": "/standards-guidelines/act/rules/oj04fd/",
+      "successCriteria": [
+        "focus-visible"
+      ],
+      "wcagTechniques": [],
+      "deprecated": false,
+      "proposed": false
+    },
+    {
+      "title": "Element marked as decorative is not exposed",
+      "permalink": "/standards-guidelines/act/rules/46ca7f/",
+      "successCriteria": [],
+      "wcagTechniques": [],
+      "deprecated": false,
+      "proposed": false
+    },
+    {
+      "title": "Element with aria-hidden has no content in sequential focus navigation",
+      "permalink": "/standards-guidelines/act/rules/6cfa84/",
+      "successCriteria": [
+        "name-role-value"
+      ],
+      "wcagTechniques": [],
+      "deprecated": false,
+      "proposed": false
+    },
+    {
+      "title": "Element with lang attribute has valid language tag",
+      "permalink": "/standards-guidelines/act/rules/de46e4/",
+      "successCriteria": [
+        "language-of-parts"
+      ],
+      "wcagTechniques": [
+        "H58"
+      ],
+      "deprecated": false,
+      "proposed": false
+    },
+    {
+      "title": "Element with presentational children has no focusable content",
+      "permalink": "/standards-guidelines/act/rules/307n5z/",
+      "successCriteria": [
+        "name-role-value"
+      ],
+      "wcagTechniques": [],
+      "deprecated": false,
+      "proposed": false
+    },
+    {
+      "title": "Form field has non-empty accessible name",
+      "permalink": "/standards-guidelines/act/rules/e086e5/",
+      "successCriteria": [
+        "name-role-value"
+      ],
+      "wcagTechniques": [],
+      "deprecated": false,
+      "proposed": false
+    },
+    {
+      "title": "Headers attribute specified on a cell refers to cells in the same table element",
+      "permalink": "/standards-guidelines/act/rules/a25f45/",
+      "successCriteria": [
+        "info-and-relationships"
+      ],
+      "wcagTechniques": [
+        "H43"
+      ],
+      "deprecated": false,
+      "proposed": false
+    },
+    {
+      "title": "HTML images contain no text",
+      "permalink": "/standards-guidelines/act/rules/0va7u6/",
+      "successCriteria": [
+        "images-of-text",
+        "images-of-text-no-exception"
+      ],
+      "wcagTechniques": [],
+      "deprecated": false,
+      "proposed": false
+    },
+    {
+      "title": "HTML page has lang attribute",
+      "permalink": "/standards-guidelines/act/rules/b5c3f8/",
+      "successCriteria": [
+        "language-of-page"
+      ],
+      "wcagTechniques": [
+        "H57"
+      ],
+      "deprecated": false,
+      "proposed": false
+    },
+    {
+      "title": "HTML page has non-empty title",
+      "permalink": "/standards-guidelines/act/rules/2779a5/",
+      "successCriteria": [
+        "page-titled"
+      ],
+      "wcagTechniques": [
+        "G88",
+        "H25"
+      ],
+      "deprecated": false,
+      "proposed": false
+    },
+    {
+      "title": "HTML page lang attribute has valid language tag",
+      "permalink": "/standards-guidelines/act/rules/bf051a/",
+      "successCriteria": [
+        "language-of-page"
+      ],
+      "wcagTechniques": [
+        "H57"
+      ],
+      "deprecated": false,
+      "proposed": false
+    },
+    {
+      "title": "HTML page title is descriptive",
+      "permalink": "/standards-guidelines/act/rules/c4a8a4/",
+      "successCriteria": [
+        "page-titled"
+      ],
+      "wcagTechniques": [
+        "G88",
+        "H25"
+      ],
+      "deprecated": false,
+      "proposed": false
+    },
+    {
+      "title": "Iframe with interactive elements is not excluded from tab-order",
+      "permalink": "/standards-guidelines/act/rules/akn7bn/",
+      "successCriteria": [
+        "keyboard"
+      ],
+      "wcagTechniques": [
+        "G202"
+      ],
+      "deprecated": false,
+      "proposed": false
+    },
+    {
+      "title": "Image accessible name is descriptive",
+      "permalink": "/standards-guidelines/act/rules/qt1vmo/",
+      "successCriteria": [
+        "non-text-content"
+      ],
+      "wcagTechniques": [
+        "G94",
+        "G95"
+      ],
+      "deprecated": false,
+      "proposed": false
+    },
+    {
+      "title": "Image button has non-empty accessible name",
+      "permalink": "/standards-guidelines/act/rules/59796f/",
+      "successCriteria": [
+        "non-text-content",
+        "name-role-value"
+      ],
+      "wcagTechniques": [
+        "G94",
+        "G95"
+      ],
+      "deprecated": false,
+      "proposed": false
+    },
+    {
+      "title": "Image has non-empty accessible name",
+      "permalink": "/standards-guidelines/act/rules/23a2a8/",
+      "successCriteria": [
+        "non-text-content"
+      ],
+      "wcagTechniques": [
+        "G94",
+        "G95"
+      ],
+      "deprecated": false,
+      "proposed": false
+    },
+    {
+      "title": "Important letter spacing in style attributes is wide enough",
+      "permalink": "/standards-guidelines/act/rules/24afc2/",
+      "successCriteria": [
+        "text-spacing"
+      ],
+      "wcagTechniques": [],
+      "deprecated": false,
+      "proposed": false
+    },
+    {
+      "title": "Important line height in style attributes is wide enough",
+      "permalink": "/standards-guidelines/act/rules/78fd32/",
+      "successCriteria": [
+        "text-spacing"
+      ],
+      "wcagTechniques": [],
+      "deprecated": false,
+      "proposed": false
+    },
+    {
+      "title": "Important word spacing in style attributes is wide enough",
+      "permalink": "/standards-guidelines/act/rules/9e45ec/",
+      "successCriteria": [
+        "text-spacing"
+      ],
+      "wcagTechniques": [],
+      "deprecated": false,
+      "proposed": false
+    },
+    {
+      "title": "Link has non-empty accessible name",
+      "permalink": "/standards-guidelines/act/rules/c487ae/",
+      "successCriteria": [
+        "name-role-value",
+        "link-purpose-in-context",
+        "link-purpose-link-only",
+        "non-text-content"
+      ],
+      "wcagTechniques": [
+        "G91"
+      ],
+      "deprecated": false,
+      "proposed": false
+    },
+    {
+      "title": "Menuitem has non-empty accessible name",
+      "permalink": "/standards-guidelines/act/rules/m6b1q3/",
+      "successCriteria": [
+        "name-role-value"
+      ],
+      "wcagTechniques": [],
+      "deprecated": false,
+      "proposed": false
+    },
+    {
+      "title": "Meta element has no refresh delay",
+      "permalink": "/standards-guidelines/act/rules/bc659a/",
+      "successCriteria": [
+        "timing-adjustable",
+        "interruptions",
+        "change-on-request"
+      ],
+      "wcagTechniques": [
+        "G110",
+        "H76"
+      ],
+      "deprecated": false,
+      "proposed": false
+    },
+    {
+      "title": "Meta element has no refresh delay (no exception)",
+      "permalink": "/standards-guidelines/act/rules/bisz58/",
+      "successCriteria": [
+        "interruptions",
+        "change-on-request",
+        "timing-adjustable"
+      ],
+      "wcagTechniques": [
+        "G110",
+        "H76"
+      ],
+      "deprecated": false,
+      "proposed": false
+    },
+    {
+      "title": "Meta viewport allows for zoom",
+      "permalink": "/standards-guidelines/act/rules/b4f0c3/",
+      "successCriteria": [
+        "resize-text",
+        "reflow"
+      ],
+      "wcagTechniques": [],
+      "deprecated": false,
+      "proposed": false
+    },
+    {
+      "title": "Object element rendering non-text content has non-empty accessible name",
+      "permalink": "/standards-guidelines/act/rules/8fc3b6/",
+      "successCriteria": [
+        "non-text-content"
+      ],
+      "wcagTechniques": [],
+      "deprecated": false,
+      "proposed": false
+    },
+    {
+      "title": "Role attribute has valid value",
+      "permalink": "/standards-guidelines/act/rules/674b10/",
+      "successCriteria": [
+        "info-and-relationships",
+        "name-role-value"
+      ],
+      "wcagTechniques": [
+        "ARIA4",
+        "G108"
+      ],
+      "deprecated": false,
+      "proposed": false
+    },
+    {
+      "title": "Scrollable content can be reached with sequential focus navigation",
+      "permalink": "/standards-guidelines/act/rules/0ssw9k/",
+      "successCriteria": [
+        "keyboard",
+        "keyboard-no-exception"
+      ],
+      "wcagTechniques": [
+        "G202"
+      ],
+      "deprecated": false,
+      "proposed": false
+    },
+    {
+      "title": "SVG element with explicit role has non-empty accessible name",
+      "permalink": "/standards-guidelines/act/rules/7d6734/",
+      "successCriteria": [
+        "non-text-content"
+      ],
+      "wcagTechniques": [],
+      "deprecated": false,
+      "proposed": false
+    },
+    {
+      "title": "Text has enhanced contrast",
+      "permalink": "/standards-guidelines/act/rules/09o5cg/",
+      "successCriteria": [
+        "contrast-enhanced",
+        "contrast-minimum"
+      ],
+      "wcagTechniques": [
+        "G17",
+        "G18"
+      ],
+      "deprecated": false,
+      "proposed": false
+    },
+    {
+      "title": "Text has minimum contrast",
+      "permalink": "/standards-guidelines/act/rules/afw4f7/",
+      "successCriteria": [
+        "contrast-minimum",
+        "contrast-enhanced"
+      ],
+      "wcagTechniques": [],
+      "deprecated": false,
+      "proposed": false
+    },
+    {
+      "title": "ARIA required context role",
+      "permalink": "/standards-guidelines/act/rules/ff89c9/proposed/",
+      "successCriteria": [
+        "info-and-relationships"
+      ],
+      "wcagTechniques": [],
+      "deprecated": false,
+      "proposed": true
+    },
+    {
+      "title": "ARIA required ID references exist",
+      "permalink": "/standards-guidelines/act/rules/in6db8/proposed/",
+      "successCriteria": [
+        "info-and-relationships",
+        "name-role-value"
+      ],
+      "wcagTechniques": [],
+      "deprecated": false,
+      "proposed": true
+    },
+    {
+      "title": "ARIA required owned elements",
+      "permalink": "/standards-guidelines/act/rules/bc4a75/proposed/",
+      "successCriteria": [
+        "info-and-relationships"
+      ],
+      "wcagTechniques": [],
+      "deprecated": false,
+      "proposed": true
+    },
+    {
+      "title": "ARIA state or property is permitted",
+      "permalink": "/standards-guidelines/act/rules/5c01ea/proposed/",
+      "successCriteria": [
+        "info-and-relationships",
+        "name-role-value"
+      ],
+      "wcagTechniques": [
+        "ARIA5"
+      ],
+      "deprecated": false,
+      "proposed": true
+    },
+    {
+      "title": "Attribute is not duplicated",
+      "permalink": "/standards-guidelines/act/rules/e6952f/proposed/",
+      "successCriteria": [
+        "parsing"
+      ],
+      "wcagTechniques": [
+        "H94"
+      ],
+      "deprecated": true,
+      "proposed": true
+    },
+    {
+      "title": "Audio and visuals of video element have transcript",
+      "permalink": "/standards-guidelines/act/rules/1a02b0/proposed/",
+      "successCriteria": [
+        "media-alternative-prerecorded"
+      ],
+      "wcagTechniques": [
+        "G69"
+      ],
+      "deprecated": false,
+      "proposed": true
+    },
+    {
+      "title": "Audio element content has text alternative",
+      "permalink": "/standards-guidelines/act/rules/e7aa44/proposed/",
+      "successCriteria": [
+        "audio-only-and-video-only-prerecorded"
+      ],
+      "wcagTechniques": [
+        "G158"
+      ],
+      "deprecated": false,
+      "proposed": true
+    },
+    {
+      "title": "Audio element content has transcript",
+      "permalink": "/standards-guidelines/act/rules/2eb176/proposed/",
+      "successCriteria": [],
+      "wcagTechniques": [],
+      "deprecated": false,
+      "proposed": true
+    },
+    {
+      "title": "Audio element content is media alternative for text",
+      "permalink": "/standards-guidelines/act/rules/afb423/proposed/",
+      "successCriteria": [],
+      "wcagTechniques": [],
+      "deprecated": false,
+      "proposed": true
+    },
+    {
+      "title": "Audio or video element avoids automatically playing audio",
+      "permalink": "/standards-guidelines/act/rules/80f0bf/proposed/",
+      "successCriteria": [
+        "audio-control"
+      ],
+      "wcagTechniques": [
+        "G60",
+        "G170",
+        "G171"
+      ],
+      "deprecated": false,
+      "proposed": true
+    },
+    {
+      "title": "Audio or video element that plays automatically has a control mechanism",
+      "permalink": "/standards-guidelines/act/rules/4c31df/proposed/",
+      "successCriteria": [],
+      "wcagTechniques": [
+        "G170"
+      ],
+      "deprecated": false,
+      "proposed": true
+    },
+    {
+      "title": "Audio or video element that plays automatically has no audio that lasts more than 3 seconds",
+      "permalink": "/standards-guidelines/act/rules/aaa1bf/proposed/",
+      "successCriteria": [],
+      "wcagTechniques": [
+        "G60"
+      ],
+      "deprecated": false,
+      "proposed": true
+    },
+    {
+      "title": "Block of repeated content is collapsible",
+      "permalink": "/standards-guidelines/act/rules/3e12e1/proposed/",
+      "successCriteria": [],
+      "wcagTechniques": [
+        "SCR28"
+      ],
+      "deprecated": false,
+      "proposed": true
+    },
+    {
+      "title": "Bypass Blocks of Repeated Content",
+      "permalink": "/standards-guidelines/act/rules/cf77f2/proposed/",
+      "successCriteria": [
+        "bypass-blocks"
+      ],
+      "wcagTechniques": [
+        "G1",
+        "G123",
+        "G124",
+        "H69",
+        "SCR28"
+      ],
+      "deprecated": false,
+      "proposed": true
+    },
+    {
+      "title": "Content has alternative for visual reference",
+      "permalink": "/standards-guidelines/act/rules/9bd38c/proposed/",
+      "successCriteria": [
+        "sensory-characteristics"
+      ],
+      "wcagTechniques": [
+        "G96"
+      ],
+      "deprecated": false,
+      "proposed": true
+    },
+    {
+      "title": "Device motion based changes to the content can also be created from the user interface",
+      "permalink": "/standards-guidelines/act/rules/7677a9/proposed/",
+      "successCriteria": [
+        "motion-actuation"
+      ],
+      "wcagTechniques": [],
+      "deprecated": false,
+      "proposed": true
+    },
+    {
+      "title": "Device motion based changes to the content can be disabled",
+      "permalink": "/standards-guidelines/act/rules/c249d5/proposed/",
+      "successCriteria": [
+        "motion-actuation"
+      ],
+      "wcagTechniques": [],
+      "deprecated": false,
+      "proposed": true
+    },
+    {
+      "title": "Document has a landmark with non-repeated content",
+      "permalink": "/standards-guidelines/act/rules/b40fd1/proposed/",
+      "successCriteria": [],
+      "wcagTechniques": [],
+      "deprecated": false,
+      "proposed": true
+    },
+    {
+      "title": "Document has an instrument to move focus to non-repeated content",
+      "permalink": "/standards-guidelines/act/rules/ye5d6e/proposed/",
+      "successCriteria": [],
+      "wcagTechniques": [
+        "G1",
+        "G123",
+        "G124"
+      ],
+      "deprecated": false,
+      "proposed": true
+    },
+    {
+      "title": "Document has heading for non-repeated content",
+      "permalink": "/standards-guidelines/act/rules/047fe0/proposed/",
+      "successCriteria": [],
+      "wcagTechniques": [
+        "H69"
+      ],
+      "deprecated": false,
+      "proposed": true
+    },
+    {
+      "title": "Element with role attribute has required states and properties",
+      "permalink": "/standards-guidelines/act/rules/4e8ab6/proposed/",
+      "successCriteria": [
+        "info-and-relationships",
+        "name-role-value"
+      ],
+      "wcagTechniques": [
+        "ARIA5"
+      ],
+      "deprecated": false,
+      "proposed": true
+    },
+    {
+      "title": "Error message describes invalid form field value",
+      "permalink": "/standards-guidelines/act/rules/36b590/proposed/",
+      "successCriteria": [
+        "error-identification"
+      ],
+      "wcagTechniques": [],
+      "deprecated": false,
+      "proposed": true
+    },
+    {
+      "title": "Focusable element has no keyboard trap",
+      "permalink": "/standards-guidelines/act/rules/80af7b/proposed/",
+      "successCriteria": [
+        "no-keyboard-trap"
+      ],
+      "wcagTechniques": [
+        "G21"
+      ],
+      "deprecated": false,
+      "proposed": true
+    },
+    {
+      "title": "Focusable element has no keyboard trap via non-standard navigation",
+      "permalink": "/standards-guidelines/act/rules/ebe86a/proposed/",
+      "successCriteria": [],
+      "wcagTechniques": [],
+      "deprecated": false,
+      "proposed": true
+    },
+    {
+      "title": "Focusable element has no keyboard trap via standard navigation",
+      "permalink": "/standards-guidelines/act/rules/a1b64e/proposed/",
+      "successCriteria": [],
+      "wcagTechniques": [],
+      "deprecated": false,
+      "proposed": true
+    },
+    {
+      "title": "Form field label is descriptive",
+      "permalink": "/standards-guidelines/act/rules/cc0f0a/proposed/",
+      "successCriteria": [
+        "headings-and-labels"
+      ],
+      "wcagTechniques": [
+        "G131"
+      ],
+      "deprecated": false,
+      "proposed": true
+    },
+    {
+      "title": "Heading has non-empty accessible name",
+      "permalink": "/standards-guidelines/act/rules/ffd0e9/proposed/",
+      "successCriteria": [],
+      "wcagTechniques": [],
+      "deprecated": false,
+      "proposed": true
+    },
+    {
+      "title": "Heading is descriptive",
+      "permalink": "/standards-guidelines/act/rules/b49b2e/proposed/",
+      "successCriteria": [
+        "headings-and-labels"
+      ],
+      "wcagTechniques": [],
+      "deprecated": false,
+      "proposed": true
+    },
+    {
+      "title": "HTML element language subtag matches language",
+      "permalink": "/standards-guidelines/act/rules/off6ek/proposed/",
+      "successCriteria": [
+        "language-of-parts"
+      ],
+      "wcagTechniques": [
+        "H58"
+      ],
+      "deprecated": false,
+      "proposed": true
+    },
+    {
+      "title": "HTML page lang and xml:lang attributes have matching values",
+      "permalink": "/standards-guidelines/act/rules/5b7ae0/proposed/",
+      "successCriteria": [
+        "language-of-page"
+      ],
+      "wcagTechniques": [],
+      "deprecated": true,
+      "proposed": true
+    },
+    {
+      "title": "HTML page language subtag matches default language",
+      "permalink": "/standards-guidelines/act/rules/ucwvc8/proposed/",
+      "successCriteria": [
+        "language-of-page"
+      ],
+      "wcagTechniques": [
+        "H57"
+      ],
+      "deprecated": false,
+      "proposed": true
+    },
+    {
+      "title": "Id attribute value is unique",
+      "permalink": "/standards-guidelines/act/rules/3ea0c8/proposed/",
+      "successCriteria": [
+        "parsing"
+      ],
+      "wcagTechniques": [
+        "H93"
+      ],
+      "deprecated": true,
+      "proposed": true
+    },
+    {
+      "title": "Iframe element has non-empty accessible name",
+      "permalink": "/standards-guidelines/act/rules/cae760/proposed/",
+      "successCriteria": [
+        "name-role-value"
+      ],
+      "wcagTechniques": [],
+      "deprecated": false,
+      "proposed": true
+    },
+    {
+      "title": "Iframe elements with identical accessible names have equivalent purpose",
+      "permalink": "/standards-guidelines/act/rules/4b1c6c/proposed/",
+      "successCriteria": [
+        "name-role-value"
+      ],
+      "wcagTechniques": [],
+      "deprecated": false,
+      "proposed": true
+    },
+    {
+      "title": "Image filename is accessible name for image",
+      "permalink": "/standards-guidelines/act/rules/9eb3f6/proposed/",
+      "successCriteria": [
+        "non-text-content"
+      ],
+      "wcagTechniques": [
+        "G94",
+        "G95"
+      ],
+      "deprecated": true,
+      "proposed": true
+    },
+    {
+      "title": "Image not in the accessibility tree is decorative",
+      "permalink": "/standards-guidelines/act/rules/e88epe/proposed/",
+      "successCriteria": [
+        "non-text-content"
+      ],
+      "wcagTechniques": [],
+      "deprecated": false,
+      "proposed": true
+    },
+    {
+      "title": "Link in context is descriptive",
+      "permalink": "/standards-guidelines/act/rules/5effbb/proposed/",
+      "successCriteria": [
+        "link-purpose-in-context",
+        "link-purpose-link-only"
+      ],
+      "wcagTechniques": [],
+      "deprecated": false,
+      "proposed": true
+    },
+    {
+      "title": "Link is descriptive",
+      "permalink": "/standards-guidelines/act/rules/aizyf1/proposed/",
+      "successCriteria": [
+        "link-purpose-link-only"
+      ],
+      "wcagTechniques": [],
+      "deprecated": false,
+      "proposed": true
+    },
+    {
+      "title": "Links with identical accessible names and same context serve equivalent purpose",
+      "permalink": "/standards-guidelines/act/rules/fd3a94/proposed/",
+      "successCriteria": [
+        "link-purpose-in-context",
+        "link-purpose-link-only"
+      ],
+      "wcagTechniques": [],
+      "deprecated": false,
+      "proposed": true
+    },
+    {
+      "title": "Links with identical accessible names have equivalent purpose",
+      "permalink": "/standards-guidelines/act/rules/b20e66/proposed/",
+      "successCriteria": [
+        "link-purpose-link-only"
+      ],
+      "wcagTechniques": [],
+      "deprecated": false,
+      "proposed": true
+    },
+    {
+      "title": "No keyboard shortcut uses only printable characters",
+      "permalink": "/standards-guidelines/act/rules/ffbc54/proposed/",
+      "successCriteria": [
+        "character-key-shortcuts"
+      ],
+      "wcagTechniques": [],
+      "deprecated": false,
+      "proposed": true
+    },
+    {
+      "title": "Orientation of the page is not restricted using CSS transforms",
+      "permalink": "/standards-guidelines/act/rules/b33eff/proposed/",
+      "successCriteria": [
+        "orientation"
+      ],
+      "wcagTechniques": [],
+      "deprecated": false,
+      "proposed": true
+    },
+    {
+      "title": "Table header cell has assigned cells",
+      "permalink": "/standards-guidelines/act/rules/d0f69e/proposed/",
+      "successCriteria": [
+        "info-and-relationships"
+      ],
+      "wcagTechniques": [],
+      "deprecated": false,
+      "proposed": true
+    },
+    {
+      "title": "Text content that changes automatically can be paused, stopped or hidden",
+      "permalink": "/standards-guidelines/act/rules/efbfc7/proposed/",
+      "successCriteria": [
+        "pause-stop-hide"
+      ],
+      "wcagTechniques": [],
+      "deprecated": false,
+      "proposed": true
+    },
+    {
+      "title": "Video element auditory content has accessible alternative",
+      "permalink": "/standards-guidelines/act/rules/eac66b/proposed/",
+      "successCriteria": [
+        "captions-prerecorded"
+      ],
+      "wcagTechniques": [
+        "G87",
+        "G93",
+        "H95"
+      ],
+      "deprecated": false,
+      "proposed": true
+    },
+    {
+      "title": "Video element auditory content has captions",
+      "permalink": "/standards-guidelines/act/rules/f51b46/proposed/",
+      "successCriteria": [
+        "audio-only-and-video-only-prerecorded"
+      ],
+      "wcagTechniques": [
+        "G87",
+        "G93",
+        "H95"
+      ],
+      "deprecated": false,
+      "proposed": true
+    },
+    {
+      "title": "Video element content is media alternative for text",
+      "permalink": "/standards-guidelines/act/rules/ab4d13/proposed/",
+      "successCriteria": [],
+      "wcagTechniques": [],
+      "deprecated": false,
+      "proposed": true
+    },
+    {
+      "title": "Video element visual content has accessible alternative",
+      "permalink": "/standards-guidelines/act/rules/c5a4ea/proposed/",
+      "successCriteria": [
+        "audio-description-or-media-alternative-prerecorded",
+        "audio-description-prerecorded",
+        "media-alternative-prerecorded"
+      ],
+      "wcagTechniques": [
+        "G8",
+        "G69",
+        "G78",
+        "G173"
+      ],
+      "deprecated": false,
+      "proposed": true
+    },
+    {
+      "title": "Video element visual content has audio description",
+      "permalink": "/standards-guidelines/act/rules/1ea59c/proposed/",
+      "successCriteria": [],
+      "wcagTechniques": [
+        "G8",
+        "G78",
+        "G173"
+      ],
+      "deprecated": false,
+      "proposed": true
+    },
+    {
+      "title": "Video element visual content has description track",
+      "permalink": "/standards-guidelines/act/rules/f196ce/proposed/",
+      "successCriteria": [],
+      "wcagTechniques": [
+        "G78",
+        "H96"
+      ],
+      "deprecated": true,
+      "proposed": true
+    },
+    {
+      "title": "Video element visual content has strict accessible alternative",
+      "permalink": "/standards-guidelines/act/rules/1ec09b/proposed/",
+      "successCriteria": [
+        "audio-description-prerecorded"
+      ],
+      "wcagTechniques": [
+        "G8",
+        "G78",
+        "G173"
+      ],
+      "deprecated": false,
+      "proposed": true
+    },
+    {
+      "title": "Video element visual-only content has accessible alternative",
+      "permalink": "/standards-guidelines/act/rules/c3232f/proposed/",
+      "successCriteria": [
+        "audio-only-and-video-only-prerecorded"
+      ],
+      "wcagTechniques": [
+        "G159",
+        "G166"
+      ],
+      "deprecated": false,
+      "proposed": true
+    },
+    {
+      "title": "Video element visual-only content has audio track alternative",
+      "permalink": "/standards-guidelines/act/rules/d7ba54/proposed/",
+      "successCriteria": [],
+      "wcagTechniques": [
+        "G166"
+      ],
+      "deprecated": false,
+      "proposed": true
+    },
+    {
+      "title": "Video element visual-only content has description track",
+      "permalink": "/standards-guidelines/act/rules/ac7dc6/proposed/",
+      "successCriteria": [],
+      "wcagTechniques": [
+        "H96"
+      ],
+      "deprecated": true,
+      "proposed": true
+    },
+    {
+      "title": "Video element visual-only content has transcript",
+      "permalink": "/standards-guidelines/act/rules/ee13b5/proposed/",
+      "successCriteria": [],
+      "wcagTechniques": [
+        "G159"
+      ],
+      "deprecated": false,
+      "proposed": true
+    },
+    {
+      "title": "Video element visual-only content is media alternative for text",
+      "permalink": "/standards-guidelines/act/rules/fd26cf/proposed/",
+      "successCriteria": [],
+      "wcagTechniques": [],
+      "deprecated": false,
+      "proposed": true
+    },
+    {
+      "title": "Visible label is part of accessible name",
+      "permalink": "/standards-guidelines/act/rules/2ee8b8/proposed/",
+      "successCriteria": [
+        "label-in-name"
+      ],
+      "wcagTechniques": [
+        "G208"
+      ],
+      "deprecated": false,
+      "proposed": true
+    },
+    {
+      "title": "Zoomed text node is not clipped with CSS overflow",
+      "permalink": "/standards-guidelines/act/rules/59br37/proposed/",
+      "successCriteria": [
+        "resize-text"
+      ],
+      "wcagTechniques": [],
+      "deprecated": false,
+      "proposed": true
+    }
+  ]
+}
\ No newline at end of file
diff --git a/guidelines/guidelines.css b/guidelines/guidelines.css
index 7a833bd546..8a8864433a 100644
--- a/guidelines/guidelines.css
+++ b/guidelines/guidelines.css
@@ -40,6 +40,11 @@ dd.new, dd.proposed, dd.changed {
 	display: block;
 	width: 25%;
 	hyphens: none;
+  padding: 1em;
+  display: flex;
+  flex-direction: column;
+  gap: .5em;
+  margin-left: 2em;
 }
 .sc dt {
 	display: list-item;
@@ -56,8 +61,7 @@ dd.new, dd.proposed, dd.changed {
 div.note-title, div.ednote-title {
 	color: #008400
 }
-/* make links in W3C masthead bold, since we can't make them underline */
+a.internalDFN[title]:hover, .internalDFN[title]:active, a.internalDFN[title]:focus {
+	cursor: help;
+}
 span.screenreader {position: absolute; left: -10000px}
-.head p:not(.copyright) > a, .head > a:first-child {
-	font-weight: bold;
-}
\ No newline at end of file
diff --git a/guidelines/index.html b/guidelines/index.html
index a2d19623d2..8402db4640 100644
--- a/guidelines/index.html
+++ b/guidelines/index.html
@@ -1,15 +1,15 @@
 <!DOCTYPE html>
 <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
     <head>
-        <meta charset="UTF-8" />
+        <meta charset="UTF-8"/>
 
         <title>Web Content Accessibility Guidelines (WCAG) 2.2</title>
-    	<script src="https://www.w3.org/Tools/respec/respec-w3c-common" class="remove"></script>
+    	<script src="https://www.w3.org/Tools/respec/respec-w3c" class="remove"></script>
     	<script src="../script/wcag.js" class="remove"></script>
     	<script src="respec-config.js" class="remove"></script>
     	<script src="../biblio.js" class="remove"></script>
-    	<link rel="stylesheet" type="text/css" href="../css/sources.css" class="remove" />
-        <link rel="stylesheet" type="text/css" href="guidelines.css" />
+    	<link rel="stylesheet" type="text/css" href="../css/sources.css" class="remove"/>
+        <link rel="stylesheet" type="text/css" href="guidelines.css"/>
     </head>
     <body>
         <section id="abstract">
@@ -18,12 +18,16 @@
             <p>WCAG 2.2 extends <a href="https://www.w3.org/TR/WCAG21/">Web Content Accessibility Guidelines 2.1</a> [[WCAG21]], which was published as a W3C Recommendation June 2018. Content that conforms to WCAG 2.2 also conforms to WCAG 2.0 and WCAG 2.1. The WG intends that for policies requiring conformance to WCAG 2.0 or WCAG 2.1, WCAG 2.2 can provide an alternate means of conformance. The publication of WCAG 2.2 does not deprecate or supersede WCAG 2.0 or WCAG 2.1. While WCAG 2.0 and WCAG 2.1 remain W3C Recommendations, the W3C advises the use of WCAG 2.2 to maximize future applicability of accessibility efforts. The W3C also encourages use of the most current version of WCAG when developing or updating Web accessibility policies.</p>
         </section>
         <section id="sotd">
-        	<p>This is an Editors' Draft of Web Content Accessibility Guidelines (WCAG) 2.2. <a href="https://www.w3.org/TR/WCAG21/">WCAG 2.1 is a W3C Recommendation</a>.</p>
-            <p>To comment, <a href="https://github.com/w3c/wcag/issues/new">file an issue in the <abbr title="World Wide Web Consortium">W3C</abbr> WCAG GitHub repository</a>. Although the proposed Success Criteria in this document reference issues tracking discussion, the Working Group requests that public comments be filed as new issues, one issue per discrete comment. It is free to create a GitHub account to file issues. If filing issues in GitHub is not feasible, send email to <a href="mailto:public-agwg-comments@w3.org?subject=WCAG%202.2%20public%20comment">public-agwg-comments@w3.org</a> (<a href="https://lists.w3.org/Archives/Public/public-agwg-comments/">comment archive</a>). </p>
+          <p>To comment, <a href="https://github.com/w3c/wcag/issues/new">file an issue in the
+            <abbr title="World Wide Web Consortium">W3C</abbr> WCAG GitHub repository</a>.
+            Although the proposed Success Criteria in this document reference issues tracking
+            discussion, the Working Group requests that public comments be filed as new issues,
+            one issue per discrete comment. It is free to create a GitHub account to file issues.
+            If filing issues in GitHub is not feasible, send email to <a href="mailto:public-agwg-comments@w3.org?subject=WCAG%202.2%20public%20comment">public-agwg-comments@w3.org</a> (<a href="https://lists.w3.org/Archives/Public/public-agwg-comments/">comment archive</a>).</p>
         </section>
         <section class="informative introductory" id="intro">
 			<h2>Introduction</h2>
-			<section>
+			<section id="background-on-wcag-2">
 				<h3>Background on WCAG 2</h3>
 				<p>Web Content Accessibility Guidelines (WCAG) 2.2 defines how to make Web content more accessible to people with disabilities. Accessibility involves a wide range of disabilities, including visual, auditory, physical, speech, cognitive, language, learning, and neurological disabilities. Although these guidelines cover a wide range of issues, they are not able to address the needs of people with all types, degrees, and combinations of disability. These guidelines also make Web content more usable by older individuals with changing abilities due to aging and often improve usability for users in general.</p>
 				<p>WCAG 2.2 is developed through the <a href="https://www.w3.org/WAI/standards-guidelines/w3c-process/">W3C process</a> in cooperation with individuals and organizations around the world, with a goal of providing a shared standard for Web content accessibility that meets the needs of individuals, organizations, and governments internationally. WCAG 2.2 builds on WCAG 2.0 [[WCAG20]] and WCAG 2.1 [[WCAG21]], which in turn built on WCAG 1.0 [[WAI-WEBCONTENT]] and is designed to apply broadly to different Web technologies now and in the future, and to be testable with a combination of automated testing and human evaluation. For an introduction to WCAG, see the <a href="https://www.w3.org/WAI/standards-guidelines/wcag/">Web Content Accessibility Guidelines (WCAG) Overview</a>.</p>
@@ -38,82 +42,84 @@ <h3>Background on WCAG 2</h3>
                 </ul>
                 <p>Where this document refers to <q>WCAG 2</q> it is intended to mean any and all versions of WCAG that start with 2.</p>
 			</section>
-			<section>
+			<section id="wcag-2-layers-of-guidance">
 				<h3>WCAG 2 Layers of Guidance</h3>
 				<p>The individuals and organizations that use WCAG vary widely and include Web designers and developers, policy makers, purchasing agents, teachers, and students. In order to meet the varying needs of this audience, several layers of guidance are provided including overall <em>principles</em>, general <em>guidelines</em>, testable <em>success criteria</em> and a rich collection of <em>sufficient techniques</em>, <em>advisory techniques</em>, and <em>documented common failures</em> with examples, resource links and code.</p>
 				<ul>
 					<li>
-						<p><strong>Principles</strong> - At the top are four principles that provide the foundation for Web accessibility: <em>perceivable, operable, understandable, and robust</em>. See also <a href="https://www.w3.org/WAI/WCAG21/Understanding/intro#understanding-the-four-principles-of-accessibility">Understanding the Four Principles of Accessibility</a>.</p>
+						<p><strong>Principles</strong> - At the top are four principles that provide the foundation for Web accessibility: <em>perceivable, operable, understandable, and robust</em>. See also <a href="https://www.w3.org/WAI/WCAG22/Understanding/intro#understanding-the-four-principles-of-accessibility">Understanding the Four Principles of Accessibility</a>.</p>
 					</li>
 					<li>
 						<p><strong>Guidelines</strong> - Under the principles are guidelines. The 13 guidelines provide the basic goals that authors should work toward in order to make content more accessible to users with different disabilities. The guidelines are not testable, but provide the framework and overall objectives to help authors understand the success criteria and better implement the techniques.</p>
 					</li>
 					<li>
-						<p><strong>Success Criteria</strong> - For each guideline, testable success criteria are provided to allow WCAG 2.2 to be used where requirements and conformance testing are necessary such as in design specification, purchasing, regulation, and contractual agreements. In order to meet the needs of different groups and different situations, three levels of conformance are defined: A (lowest), AA, and AAA (highest). Additional information on WCAG levels can be found in <a href="https://www.w3.org/WAI/WCAG21/Understanding/conformance#levels">Understanding Levels of Conformance</a>.</p>
+						<p><strong>Success Criteria</strong> - For each guideline, testable success criteria are provided to allow WCAG 2.2 to be used where requirements and conformance testing are necessary such as in design specification, purchasing, regulation, and contractual agreements. In order to meet the needs of different groups and different situations, three levels of conformance are defined: A (lowest), AA, and AAA (highest). Additional information on WCAG levels can be found in <a href="https://www.w3.org/WAI/WCAG22/Understanding/conformance#levels">Understanding Levels of Conformance</a>.</p>
 					</li>
 					<li>
-						<p><strong>Sufficient and Advisory Techniques</strong> - For each of the <em>guidelines</em> and <em>success criteria</em> in the WCAG 2.2 document itself, the working group has also documented a wide variety of <em>techniques</em>. The techniques are informative and fall into two categories: those that are <em>sufficient</em> for meeting the success criteria and those that are <em>advisory</em>. The advisory techniques go beyond what is required by the individual success criteria and allow authors to better address the guidelines. Some advisory techniques address accessibility barriers that are not covered by the testable success criteria. Where common failures are known, these are also documented. See also <a href="https://www.w3.org/WAI/WCAG21/Understanding/understanding-techniques">Sufficient and Advisory Techniques in Understanding WCAG 2.2</a>.</p>
+						<p><strong>Sufficient and Advisory Techniques</strong> - For each of the <em>guidelines</em> and <em>success criteria</em> in the WCAG 2.2 document itself, the working group has also documented a wide variety of <em>techniques</em>. The techniques are informative and fall into two categories: those that are <em>sufficient</em> for meeting the success criteria and those that are <em>advisory</em>. The advisory techniques go beyond what is required by the individual success criteria and allow authors to better address the guidelines. Some advisory techniques address accessibility barriers that are not covered by the testable success criteria. Where common failures are known, these are also documented. See also <a href="https://www.w3.org/WAI/WCAG22/Understanding/understanding-techniques">Sufficient and Advisory Techniques in Understanding WCAG 2.2</a>.</p>
 					</li>
 				</ul>
 				<p>All of these layers of guidance (principles, guidelines, success criteria, and sufficient and advisory techniques) work together to provide guidance on how to make content more accessible. Authors are encouraged to view and apply all layers that they are able to, including the advisory techniques, in order to best address the needs of the widest possible range of users.</p>
-				<p>Note that even content that conforms at the highest level (AAA) will not be accessible to individuals with all types, degrees, or combinations of disability, particularly in the cognitive, language, and learning areas. Authors are encouraged to consider the full range of techniques, including the advisory techniques, as well as to seek relevant advice about current best practice to ensure that Web content is accessible, as far as possible, to this community. <a href="https://www.w3.org/WAI/WCAG21/Understanding/understanding-metadata">Metadata</a> may assist users in finding content most suitable for their needs. </p>
+				<p>Note that even content that conforms at the highest level (AAA) will not be accessible to individuals with all types, degrees, or combinations of disability, particularly in the cognitive, language, and learning areas. Authors are encouraged to consider the full range of techniques, including the advisory techniques, <a href="https://www.w3.org/TR/coga-usable/">Making Content Usable for People with Cognitive and Learning Disabilities</a>, as well as to seek relevant advice about current best practice to ensure that Web content is accessible, as far as possible, to this community. <a href="https://www.w3.org/WAI/WCAG22/Understanding/understanding-metadata">Metadata</a> may assist users in finding content most suitable for their needs. </p>
 			</section>
-			<section>
+			<section id="wcag-2-2-supporting-documents">
 				<h3>WCAG 2.2 Supporting Documents</h3>
 				<p>The WCAG 2.2 document is designed to meet the needs of those who need a stable, referenceable technical standard. Other documents, called supporting documents, are based on the WCAG 2.2 document and address other important purposes, including the ability to be updated to describe how WCAG would be applied with new technologies. Supporting documents include: </p>
 				<ol class="enumar">
 					<li>
-						<p><strong><a href="https://www.w3.org/WAI/WCAG21/quickref/">How to Meet WCAG 2.2</a></strong> - A customizable quick reference to WCAG 2.2 that includes all of the guidelines, success criteria, and techniques for authors to use as they are developing and evaluating Web content. This includes content from WCAG 2.0, 2.1 2.2 and can be filtered in many ways to help authors focus on relevant content.</p>
+						<p><strong><a href="https://www.w3.org/WAI/WCAG22/quickref/">How to Meet WCAG 2.2</a></strong> - A customizable quick reference to WCAG 2.2 that includes all of the guidelines, success criteria, and techniques for authors to use as they are developing and evaluating Web content. This includes content from WCAG 2.0, 2.1 2.2 and can be filtered in many ways to help authors focus on relevant content.</p>
 					</li>
 					<li>
-						<p><strong><a href="https://www.w3.org/WAI/WCAG21/Understanding/">Understanding WCAG 2.2</a></strong> - A guide to understanding and implementing WCAG 2.2. There is a short "Understanding" document for each guideline and success criterion in WCAG 2.2 as well as key topics.</p>
+						<p><strong><a href="https://www.w3.org/WAI/WCAG22/Understanding/">Understanding WCAG 2.2</a></strong> - A guide to understanding and implementing WCAG 2.2. There is a short "Understanding" document for each guideline and success criterion in WCAG 2.2 as well as key topics.</p>
 					</li>
 					<li>
-						<p><strong><a href="https://www.w3.org/WAI/WCAG21/Techniques/">Techniques for WCAG 2.2</a></strong> - A collection of techniques and common failures, each in a separate document that includes a description, examples, code and tests.</p>
+						<p><strong><a href="https://www.w3.org/WAI/WCAG22/Techniques/">Techniques for WCAG 2.2</a></strong> - A collection of techniques and common failures, each in a separate document that includes a description, examples, code and tests.</p>
 					</li>
 					<li>
-						<p><strong><a href="https://www.w3.org/WAI/standards-guidelines/wcag/docs/">The WCAG Documents</a></strong> - A diagram and description of how the technical documents are related and linked.</p>
+						<p><strong><a href="https://www.w3.org/WAI/standards-guidelines/wcag/docs/">The WCAG 2 Documents</a></strong> - A brief introduction to the WCAG 2 supporting documents and supplemental guidance.</p>
 					</li>
+          <li><p><strong><a href="https://www.w3.org/WAI/standards-guidelines/wcag/new-in-22/">What's New in WCAG 2.2</a></strong> introduces the new success criteria with persona quotes that illustrate the accessibility issues. </p></li>
 				</ol>
 				<p>See <a href="https://www.w3.org/WAI/standards-guidelines/wcag/">Web Content Accessibility Guidelines (WCAG) Overview</a> for a description of the WCAG 2.2 supporting material, including education resources related to WCAG 2. Additional resources covering topics such as the business case for Web accessibility, planning implementation to improve the accessibility of Web sites, and accessibility policies are listed in <a href="https://www.w3.org/WAI/Resources/Overview">WAI Resources</a>.</p>
 			</section>
-        	<section>
+        	<section id="requirements-for-wcag-2-2">
         		<h3>Requirements for WCAG 2.2</h3>
                 <p>WCAG 2.2 meets a set of <a href="https://w3c.github.io/wcag/requirements/22/">requirements for WCAG 2.2</a> which, in turn, inherit requirements from previous WCAG 2 versions. Requirements structure the overall framework of guidelines and ensure backwards compatibility. The Working Group also used a less formal set of acceptance criteria for success criteria, to help ensure success criteria are similar in style and quality to those in WCAG 2.0. These requirements constrained what could be included in WCAG 2.2. This constraint was important to preserve its nature as a dot-release of WCAG 2.</p>
         	</section>
-    		<section>
+    		<section id="comparison-with-wcag-2-1">
                 <h3>Comparison with WCAG 2.1</h3>
                 <p>WCAG 2.2 was initiated with the goal to continue the work of WCAG 2.1: Improving accessibility guidance for three major groups: users with cognitive or learning disabilities, users with low vision, and users with disabilities on mobile devices. Many ways to meet these needs were proposed and evaluated, and a set of these were refined by the Working Group. Structural requirements inherited from WCAG 2.0, clarity and impact of proposals, and timeline led to the final set of success criteria included in this version. The Working Group considers that WCAG 2.2 incrementally advances web content accessibility guidance for all these areas, but underscores that not all user needs are met by these guidelines.</p>
 
-				<p>WCAG 2.2 builds on and is backwards compatible with WCAG 2.1, meaning web pages that conform to WCAG 2.2 also conform to WCAG 2.1, which would also conform to WCAG 2.0. Authors that are required by policy to conform with WCAG 2.0 or 2.1 will be able to update content to WCAG 2.2 without losing conformance with previous versions. Authors following more than one version of the guidelines should be aware of the following differences:</p>
-				<section>
+				<p>WCAG 2.2 builds on and is backwards compatible with WCAG 2.1, meaning web pages that conform to WCAG 2.2 are at least as accessible as pages that conform to WCAG 2.1. Requirements have been added that build on 2.1 and 2.0. WCAG 2.2 has removed one success criterion, <a href="#parsing">4.1.1 Parsing</a>. Authors that are required by policy to conform with WCAG 2.0 or 2.1 will be able to update content to WCAG 2.2, but may need to continue to test and report 4.1.1. Authors following more than one version of the guidelines should be aware of the following additions.</p>
+				<section id="new-features-in-wcag-2-2">
 					<h4>New Features in WCAG 2.2</h4>
 					<p>WCAG 2.2 extends WCAG 2.1 by adding new success criteria, definitions to support them, and guidelines to organize the additions. This additive approach helps to make it clear that sites which conform to WCAG 2.2 also conform to WCAG 2.1. The Accessibility Guidelines Working Group recommends that sites adopt WCAG 2.2 as their new conformance target, even if formal obligations mention previous versions, to provide improved accessibility and to anticipate future policy changes.</p>
-					<p>The following Success Criteria are new in WCAG 2.2:</p>
-					<ul>
-                        <li><a href="#accessible-authentication">Accessible Authentication</a></li>
-                        <li><a href="#dragging">Dragging</a></li>
-                        <li><a href="#findable-help">Findable Help</a></li>
-                        <li><a href="#fixed-reference-points">Fixed Reference Points</a></li>
-                        <li><a href="#focus-appearance-minimum">Focus Appearance (Minimum)</a></li>
-                        <li><a href="#focus-appearance-enhanced">Focus Appearance (Enhanced)</a></li>
-                        <li><a href="#hidden-controls">Hidden Controls</a></li>
-                        <li><a href="#pointer-target-spacing">Pointer Target Spacing</a></li>
-                        <li><a href="#redundant-entry">Redundant Entry</a></li>     
+          <p>The following success criteria are new in WCAG 2.2:</p>
+                    <ul>
+						<li>2.4.11 <a href="#focus-not-obscured-minimum">Focus Not Obscured (Minimum)</a> (AA)</li>
+						<li>2.4.12 <a href="#focus-not-obscured-enhanced">Focus Not Obscured (Enhanced)</a> (AAA)</li>
+                        <li>2.4.13 <a href="#focus-appearance">Focus Appearance</a> (AAA)</li>	
+						<li>2.5.7 <a href="#dragging-movements">Dragging Movements</a> (AA)</li>
+						<li>2.5.8 <a href="#target-size-minimum">Target Size (Minimum)</a> (AA)</li>
+						<li>3.2.6 <a href="#consistent-help">Consistent Help</a> (A)</li>
+						<li>3.3.7 <a href="#redundant-entry">Redundant Entry</a> (A)</li>
+						<li>3.3.8 <a href="#accessible-authentication-minimum">Accessible Authentication (Minimum)</a> (AA)</li>
+						<li>3.3.9 <a href="#accessible-authentication-enhanced">Accessible Authentication (Enhanced)</a> (AAA)</li>
 					</ul>
 					<p>The new success criteria may reference new terms that have also been added to the glossary and form part of the normative requirements of the success criteria.</p>
-					<p>In addition to the above new Success Criteria, <a href="#focus-visible">Focus Visible</a> has been promoted from Level AA to Level A.</p>
+          <p>WCAG 2.2 also introduces new sections detailing aspects of the specification which may impact <a href="#privacy-summary">privacy</a> and <a href="#security-summary">security</a>.</p>
+          
 				</section>
-				<section>
+				<section id="numbering-in-wcag-2-2">
 					<h4>Numbering in WCAG 2.2</h4>
-					<p>In order to avoid confusion for implementers for whom backwards compatibility to WCAG 2 versions is important, new success criteria in WCAG 2.2 have been appended to the end of the set of success criteria within their guideline. This avoids the need to change the section number of success criteria from WCAG 2, which would be caused by inserting new success criteria between existing success criteria in the guideline, but it means success criteria in each guideline are no longer grouped by conformance level. The order of success criteria within each guideline does not imply information about conformance level; only the conformance level indicator (A / AA / AAA) on the success criterion itself indicates this. The <a href="https://www.w3.org/WAI/WCAG21/quickref/">WCAG 2.2 Quick Reference</a> will provide a way to view success criteria grouped by conformance level, along with many other filter and sort options.</p>
+					<p>In order to avoid confusion for implementers for whom backwards compatibility to WCAG 2 versions is important, new success criteria in WCAG 2.2 have been appended to the end of the set of success criteria within their guideline. This avoids the need to change the section number of success criteria from WCAG 2, which would be caused by inserting new success criteria between existing success criteria in the guideline, but it means success criteria in each guideline are no longer grouped by conformance level. The order of success criteria within each guideline does not imply information about conformance level; only the conformance level indicator (A / AA / AAA) on the success criterion itself indicates this. The <a href="https://www.w3.org/WAI/WCAG22/quickref/">WCAG 2.2 Quick Reference</a> will provide a way to view success criteria grouped by conformance level, along with many other filter and sort options.</p>
 				</section>
-				<section>
+				<section id="conformance-to-wcag-2-2">
 					<h4>Conformance to WCAG 2.2</h4>
 					<p>WCAG 2.2 uses the same conformance model as WCAG 2.0. It is intended that sites that conform to WCAG 2.2 also conform to WCAG 2.0 and WCAG 2.1, which means they meet the requirements of any policies that reference WCAG 2.0 or WCAG 2.1, while also better meeting the needs of users on the current Web. </p>
 				</section>
 			</section>
-        	<section>
+        	<section id="later-versions-of-accessibility-guidelines">
         		<h3>Later Versions of Accessibility Guidelines</h3>
         		<p>In parallel with WCAG 2.2, the Accessibility Guidelines Working Group is developing another major version of accessibility guidelines. The result of this work is expected to be a more substantial restructuring of web accessibility guidance than would be realistic for dot-releases of WCAG 2. The work follows a research-focused, user-centered design methodology to produce the most effective and flexible outcome, including the roles of content authoring, user agent support, and authoring tool support. This is a multi-year effort, so WCAG 2.2 is needed as an interim measure to provide updated web accessibility guidance to reflect changes on the web since the publication of WCAG 2.0. The Working Group might also develop additional interim versions, continuing with WCAG 2.2, on a similar short timeline to provide additional support while the major version is completed. </p>
         	</section>
@@ -122,14 +128,14 @@ <h3>Later Versions of Accessibility Guidelines</h3>
             <h2> Perceivable </h2>
             <p>Information and user interface components must be presentable to users in ways they can perceive.</p>
 
-            <section class="guideline">
+            <section class="guideline" id="text-alternatives">
                 <h3>Text Alternatives</h3>
                 <p>Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language.</p>
 
                 <section data-include="sc/20/non-text-content.html" data-include-replace="true"></section>
             </section>
 
-            <section class="guideline">
+            <section class="guideline" id="time-based-media">
                 <h3>Time-based Media</h3>
                 <p>Provide alternatives for time-based media.</p>
 
@@ -152,7 +158,7 @@ <h3>Time-based Media</h3>
                 <section data-include="sc/20/audio-only-live.html" data-include-replace="true"></section>
             </section>
 
-            <section class="guideline">
+            <section class="guideline" id="adaptable">
                 <h3>Adaptable</h3>
                 <p>Create content that can be presented in different ways (for example simpler layout) without losing information or structure.</p>
 
@@ -170,7 +176,7 @@ <h3>Adaptable</h3>
 
           </section>
 
-            <section class="guideline">
+            <section class="guideline" id="distinguishable">
                 <h3>Distinguishable</h3>
                 <p>Make it easier for users to see and hear content including separating foreground from background.</p>
 
@@ -207,7 +213,7 @@ <h3>Distinguishable</h3>
             <h2>Operable </h2>
             <p>User interface components and navigation must be operable.</p>
 
-            <section class="guideline">
+            <section class="guideline" id="keyboard-accessible">
                 <h3>Keyboard Accessible</h3>
                 <p>Make all functionality available from a keyboard.</p>
 
@@ -221,7 +227,7 @@ <h3>Keyboard Accessible</h3>
                 
             </section>
 
-            <section class="guideline">
+            <section class="guideline" id="enough-time">
                 <h3>Enough Time</h3>
                 <p>Provide users enough time to read and use content.</p>
 
@@ -239,7 +245,7 @@ <h3>Enough Time</h3>
 
             </section>
 
-            <section class="guideline">
+            <section class="guideline" id="seizures-and-physical-reactions">
                 <h3>Seizures and Physical Reactions</h3>
                 <p>Do not design content in a way that is known to cause seizures or physical reactions.</p>
 
@@ -251,7 +257,7 @@ <h3>Seizures and Physical Reactions</h3>
 
             </section>
 
-            <section class="guideline">
+            <section class="guideline" id="navigable">
                 <h3>Navigable</h3>
                 <p>Provide ways to help users navigate, find content, and determine where they are.</p>
 
@@ -267,7 +273,7 @@ <h3>Navigable</h3>
 
                 <section data-include="sc/20/headings-and-labels.html" data-include-replace="true"></section>
 
-                <section data-include="sc/22/focus-visible.html" data-include-replace="true"></section>
+                <section data-include="sc/20/focus-visible.html" data-include-replace="true"></section>
 
                 <section data-include="sc/20/location.html" data-include-replace="true"></section>
 
@@ -275,15 +281,15 @@ <h3>Navigable</h3>
 
                 <section data-include="sc/20/section-headings.html" data-include-replace="true"></section>
 
-                <section data-include="sc/22/focus-appearance-minimum.html" data-include-replace="true"></section>
+                <section data-include="sc/22/focus-not-obscured-minimum.html" data-include-replace="true"></section>
 
-                <section data-include="sc/22/focus-appearance-enhanced.html" data-include-replace="true"></section>
+                <section data-include="sc/22/focus-not-obscured-enhanced.html" data-include-replace="true"></section>
 
-                <section data-include="sc/22/fixed-reference-points.html" data-include-replace="true"></section>
+                <section data-include="sc/22/focus-appearance.html" data-include-replace="true"></section>
 
             </section>
 
-            <section class="guideline">
+            <section class="guideline" id="input-modalities">
                 <h3>Input Modalities</h3>
                 <p>Make it easier for users to operate functionality through various inputs beyond keyboard.</p>
 
@@ -295,13 +301,13 @@ <h3>Input Modalities</h3>
             	
                 <section data-include="sc/21/motion-actuation.html" data-include-replace="true"></section>
 
-                <section data-include="sc/21/target-size.html" data-include-replace="true"></section>
+                <section data-include="sc/21/target-size-enhanced.html" data-include-replace="true"></section>
 
                 <section data-include="sc/21/concurrent-input-mechanisms.html" data-include-replace="true"></section>
 
-                <section data-include="sc/22/dragging.html" data-include-replace="true"></section>
+                <section data-include="sc/22/dragging-movements.html" data-include-replace="true"></section>
 
-                <section data-include="sc/22/pointer-target-spacing.html" data-include-replace="true"></section>
+                <section data-include="sc/22/target-size-minimum.html" data-include-replace="true"></section>
               
             </section>
 
@@ -310,7 +316,7 @@ <h3>Input Modalities</h3>
             <h2> Understandable </h2>
             <p>Information and the operation of the user interface must be understandable.</p>
 
-            <section class="guideline">
+            <section class="guideline" id="readable">
                 <h3>Readable</h3>
                 <p>Make text content readable and understandable.</p>
 
@@ -328,7 +334,7 @@ <h3>Readable</h3>
 
             </section>
 
-            <section class="guideline">
+            <section class="guideline" id="predictable">
                 <h3>Predictable</h3>
                 <p>Make Web pages appear and operate in predictable ways.</p>
 
@@ -342,13 +348,11 @@ <h3>Predictable</h3>
 
                 <section data-include="sc/20/change-on-request.html" data-include-replace="true"></section>
 				
-				<section data-include="sc/22/findable-help.html" data-include-replace="true"></section>
-
-				<section data-include="sc/22/hidden-controls.html" data-include-replace="true"></section>
+				<section data-include="sc/22/consistent-help.html" data-include-replace="true"></section>
 
             </section>
 
-            <section class="guideline">
+            <section class="guideline" id="input-assistance">
                 <h3>Input Assistance</h3>
                 <p>Help users avoid and correct mistakes.</p>
 
@@ -363,10 +367,12 @@ <h3>Input Assistance</h3>
                 <section data-include="sc/20/help.html" data-include-replace="true"></section>
 
                 <section data-include="sc/20/error-prevention-all.html" data-include-replace="true"></section>
-
-                <section data-include="sc/22/accessible-authentication.html" data-include-replace="true"></section>
               
                 <section data-include="sc/22/redundant-entry.html" data-include-replace="true"></section>
+
+                <section data-include="sc/22/accessible-authentication-minimum.html" data-include-replace="true"></section>
+
+                <section data-include="sc/22/accessible-authentication-enhanced.html" data-include-replace="true"></section>
               
             </section>
 
@@ -375,7 +381,7 @@ <h3>Input Assistance</h3>
             <h2> Robust </h2>
             <p>Content must be robust enough that it can be interpreted by a wide variety of user agents, including assistive technologies.</p>
 
-            <section class="guideline">
+            <section class="guideline" id="compatible">
                 <h3>Compatible</h3>
                 <p>Maximize compatibility with current and future user agents, including assistive technologies.</p>
 
@@ -391,9 +397,9 @@ <h3>Compatible</h3>
         <section>
             <h1>Conformance</h1>
 
-            <p>This section lists requirements for <a>conformance</a> to WCAG 2.2. It also gives information about how to make conformance claims, which are optional. Finally, it describes what it means to be <a>accessibility supported</a>, since only accessibility-supported ways of using technologies can be <a>relied upon</a> for conformance. <a href="https://www.w3.org/WAI/WCAG21/Understanding/conformance">Understanding Conformance</a> includes further explanation of the accessibility-supported concept.</p>
+            <p>This section lists requirements for <a>conformance</a> to WCAG 2.2. It also gives information about how to make conformance claims, which are optional. Finally, it describes what it means to be <a>accessibility supported</a>, since only accessibility-supported ways of using technologies can be <a>relied upon</a> for conformance. <a href="https://www.w3.org/WAI/WCAG22/Understanding/conformance">Understanding Conformance</a> includes further explanation of the accessibility-supported concept.</p>
         	
-        	<section>
+        	<section id="interpreting-normative-requirements">
         		<h2>Interpreting Normative Requirements</h2>
         		
         		<p>The main content of WCAG 2.2 is <a>normative</a> and defines requirements that impact conformance claims. Introductory material, appendices, sections marked as "non-normative", diagrams, examples, and notes are <a>informative</a> (non-normative). Non-normative material provides advisory information to help interpret the guidelines but does not create requirements that impact a conformance claim.</p>
@@ -409,10 +415,10 @@ <h2>Conformance Requirements</h2>
                     <h3>Conformance Level</h3>
                     <p>One of the following levels of conformance is met in full.</p>
                     <ul>
-                        <li>For Level A conformance (the minimum level of conformance), the <a>Web page</a>
+                        <li id="cc1_A">For Level A conformance (the minimum level of conformance), the <a>Web page</a>
                             <a>satisfies</a> all the Level A Success Criteria, or a <a>conforming alternate version</a> is provided.</li>
-                        <li>For Level AA conformance, the Web page satisfies all the Level A and Level AA Success Criteria, or a Level AA conforming alternate version is provided.</li>
-                        <li>For Level AAA conformance, the Web page satisfies all the Level A, Level AA and Level AAA Success Criteria, or a Level AAA conforming alternate version is provided.</li>
+                        <li id="cc1_AA">For Level AA conformance, the Web page satisfies all the Level A and Level AA Success Criteria, or a Level AA conforming alternate version is provided.</li>
+                        <li id="cc1_AAA">For Level AAA conformance, the Web page satisfies all the Level A, Level AA and Level AAA Success Criteria, or a Level AAA conforming alternate version is provided.</li>
                     </ul>
                     <p class="note">Although conformance can only be achieved at the stated levels, authors are encouraged to report (in their claim) any progress toward meeting success criteria from all levels beyond the achieved level of conformance.</p>
                     <p class="note">It is not recommended that Level AAA conformance be required as a general policy for entire sites because it is not possible to satisfy all Level AAA Success Criteria for some content.</p>
@@ -431,14 +437,14 @@ <h3>Full pages</h3>
             	<section id="cc3">
                     <h3>Complete processes</h3>
                     <p>When a <a>Web page</a> is one of a series of Web pages presenting a <a>process</a> (i.e., a sequence of steps that need to be completed in order to accomplish an activity), all Web pages in the process conform at the specified level or better. (Conformance is not possible at a particular level if any page in the process does not conform at that level or better.)</p>
-                    <p class="example">An online store has a series of pages that are used to select and purchase products. All pages in the series from start to finish (checkout) conform in order for any page that is part of the process to conform.</p>
+                    <aside class="example"><p>An online store has a series of pages that are used to select and purchase products. All pages in the series from start to finish (checkout) conform in order for any page that is part of the process to conform.</p></aside>
                 </section>
 
             	<!-- This section is quoted in Understanding Conformance. If updated, the update needs to be copied there. -->
             	<section id="cc4">
                     <h3>Only Accessibility-Supported Ways of Using Technologies</h3>
 
-                    <p>Only <a>accessibility-supported</a> ways of using <a>technologies</a> are <a>relied upon</a> to satisfy the success criteria. Any information or functionality that is provided in a way that is not accessibility supported is also available in a way that is accessibility supported. (See <a href="https://www.w3.org/WAI/WCAG21/Understanding/conformance#accessibility-support">Understanding accessibility support</a>.)</p>
+                    <p>Only <a>accessibility-supported</a> ways of using <a>technologies</a> are <a>relied upon</a> to satisfy the success criteria. Any information or functionality that is provided in a way that is not accessibility supported is also available in a way that is accessibility supported. (See <a href="https://www.w3.org/WAI/WCAG22/Understanding/conformance#accessibility-support">Understanding accessibility support</a>.)</p>
 
                 </section>
 
@@ -460,7 +466,7 @@ <h3>Non-Interference</h3>
                     </ul>
                     <p class="note">If a page cannot conform (for example, a conformance test page or an example page), it cannot be included in the scope of conformance or in a conformance claim.</p>
 
-                	<p>For more information, including examples, see <a href="https://www.w3.org/WAI/WCAG21/Understanding/conformance#conformance-requirements">Understanding Conformance Requirements</a>.</p>
+                	<p>For more information, including examples, see <a href="https://www.w3.org/WAI/WCAG22/Understanding/conformance#conformance-requirements">Understanding Conformance Requirements</a>.</p>
 
                 </section>
             </section>
@@ -501,15 +507,15 @@ <h3>Optional Components of a Conformance Claim </h3>
                         <li>A machine-readable metadata version of the conformance claim.</li>
                     </ul>
 
-                	<p class="note">Refer to <a href="https://www.w3.org/WAI/WCAG21/Understanding/conformance#conformance-claims">Understanding Conformance Claims</a> for more information and example conformance claims.</p>
-                	<p class="note">Refer to <a href="https://www.w3.org/WAI/WCAG21/Understanding/understanding-metadata">Understanding Metadata</a> for more information about the use of metadata in conformance claims.</p>
+                	<p class="note">Refer to <a href="https://www.w3.org/WAI/WCAG22/Understanding/conformance#conformance-claims">Understanding Conformance Claims</a> for more information and example conformance claims.</p>
+                	<p class="note">Refer to <a href="https://www.w3.org/WAI/WCAG22/Understanding/understanding-metadata">Understanding Metadata</a> for more information about the use of metadata in conformance claims.</p>
 
                 </section>
             </section>
 
             <section id="conformance-partial">
                 <h2>Statement of Partial Conformance - Third Party Content</h2>
-                <p>Sometimes, Web pages are created that will later have additional content added to them. For example, an email program, a blog, an article that allows users to add comments, or applications supporting user-contributed content. Another example would be a page, such as a portal or news site, composed of content aggregated from multiple contributors, or sites that automatically insert content from other sources over time, such as when advertisements are inserted dynamically.</p>
+                <p>Web pages that will later have additional content added can use a 'statement of partial conformance'. For example, an email program, a blog, an article that allows users to add comments, or applications supporting user-contributed content. Another example would be a page, such as a portal or news site, composed of content aggregated from multiple contributors, or sites that automatically insert content from other sources over time, such as when advertisements are inserted dynamically.</p>
                 <p>In these cases, it is not possible to know at the time of original posting what the uncontrolled content of the pages will be. It is important to note that the uncontrolled content can affect the accessibility of the controlled content as well. Two options are available:</p>
                 <ol>
                     <li>
@@ -531,6 +537,36 @@ <h2>Statement of Partial Conformance - Language</h2>
                 <p>A "statement of partial conformance due to language" may be made when the page does not conform, but would conform if <a>accessibility support</a> existed for (all of) the language(s) used on the page. The form of that statement would be, "This page does not conform, but would conform to WCAG 2.2 at level X if accessibility support existed for the following language(s):"</p>
             </section>
 
+            <section class="informative" id="privacy-summary">
+                <h2>Privacy Considerations</h2>
+                <p>Success Criteria within this specification which the Working Group has identified possible implications for privacy, either by providing protections for end users or which are important for web site providers to take in to consideration when implementing features designed to protect user privacy, are listed below. This list reflects the current understanding of the Working Group but other Success Criteria may have privacy implications that the Working Group is not aware of at the time of publishing.</p>
+                <p>Success Criteria within this specification that may relate to privacy are:</p>
+                <ul>
+                    <li><a href="#timeouts">2.2.6 Timeouts (AAA)</a></li>
+                    <li><a href="#redundant-entry">3.3.7 Redundant Entry (A)</a></li>
+                </ul>
+
+            </section>
+
+            <section class="informative" id="security-summary">
+                <h2>Security Considerations</h2>
+                <p>Success Criteria within this specification which the Working Group has identified possible implications for security, either by providing protections for end users or which are important for web site providers to take in to consideration when implementing features designed to protect user security, are listed below. This list reflects the current understanding of the Working Group but other Success Criteria may have security implications that the Working Group is not aware of at the time of publishing.</p>
+                <p>Success Criteria within this specification that may relate to security are:</p>
+                <ul>
+                    <li><a href="#non-text-content">1.1.1 Non-text Content (A)</a></li>
+                    <li><a href="#identify-input-purpose">1.3.5 Identify Input Purpose (AA)</a></li>
+                    <li><a href="#low-or-no-background-audio">1.4.7 Low or No Background Audio (AAA)</a></li>
+                    <li><a href="#timing-adjustable">2.2.1 Timing Adjustable (A)</a></li>
+                    <li><a href="#re-authenticating">2.2.5 Re-authenticating (AAA)</a></li>
+                    <li><a href="#timeouts">2.2.6 Timeouts (AAA)</a></li>
+                    <li><a href="#concurrent-input-mechanisms">2.5.6 Concurrent Input Mechanisms (AAA)</a></li>
+                    <li><a href="#error-suggestion">3.3.3 Error Suggestion (AA)</a></li>
+                    <li><a href="#redundant-entry">3.3.7 Redundant Entry (A)</a></li>
+                    <li><a href="#accessible-authentication-minimum">3.3.8 Accessible Authentication (Minimum) (AA)</a></li>
+                    <li><a href="#accessible-authentication-enhanced">3.3.9 Accessible Authentication (Enhanced) (AAA)</a></li>                    
+                </ul>
+            </section>
+
         </section>
         <section id="glossary">
             <h1>Glossary</h1>
@@ -586,15 +622,15 @@ <h1>Glossary</h1>
 				
                 <dt data-include="terms/20/emergency.html" data-include-replace="true"></dt>
 
+                <dt data-include="terms/22/encloses.html" data-include-replace="true"></dt>
+
               	<dt data-include="terms/20/essential.html" data-include-replace="true"></dt>
 
                 <dt data-include="terms/20/extended-audio-description.html" data-include-replace="true"></dt>
 
                 <dt data-include="terms/20/flash.html" data-include-replace="true"></dt>
-            	
-            	<dt data-include="terms/22/focus.html" data-include-replace="true"></dt>
 
-            	<dt data-include="terms/22/focus-indication-area.html" data-include-replace="true"></dt>
+            	<dt data-include="terms/22/focus-indicator.html" data-include-replace="true"></dt>
             	
             	<dt data-include="terms/20/functionality.html" data-include-replace="true"></dt>
 
@@ -634,6 +670,8 @@ <h1>Glossary</h1>
 
                 <dt data-include="terms/21/motion-animation.html" data-include-replace="true"></dt>
 
+                <dt data-include="terms/22/minimum-bounding-box.html" data-include-replace="true"></dt>
+
                 <dt data-include="terms/20/name.html" data-include-replace="true"></dt>
 
                 <dt data-include="terms/20/navigated-sequentially.html" data-include-replace="true"></dt>
@@ -646,6 +684,8 @@ <h1>Glossary</h1>
 
                 <dt data-include="terms/20/paused.html" data-include-replace="true"></dt>
 
+                <dt data-include="terms/22/perimeter.html" data-include-replace="true"></dt>
+
                 <dt data-include="terms/21/pointer-input.html" data-include-replace="true"></dt>
 
                 <dt data-include="terms/20/prerecorded.html" data-include-replace="true"></dt>
@@ -689,7 +729,7 @@ <h1>Glossary</h1>
                 <dt data-include="terms/20/sign-language.html" data-include-replace="true"></dt>
 
                 <dt data-include="terms/20/sign-language-interpretation.html" data-include-replace="true"></dt>
-
+            	
                 <dt data-include="terms/21/single-pointer.html" data-include-replace="true"></dt>
                 
                 <dt data-include="terms/20/specific-sensory-experience.html" data-include-replace="true"></dt>
@@ -744,14 +784,23 @@ <h1>Glossary</h1>
     	<section class="appendix" id="changelog">
     		<h2>Change Log</h2>
     		<p>This section shows substantive changes made in WCAG 2.2 since WCAG 2.1. <a href="https://www.w3.org/WAI/WCAG21/errata/">Errata fixes to WCAG 2.1</a> have also been incorporated into WCAG 2.2.</p>
-    		<p>The full <a href="https://github.com/w3c/wcag/commits/master/guidelines">commit history to WCAG 2.2</a> is available.</p>
+    		<p>The full <a href="https://github.com/w3c/wcag/commits/main/guidelines">commit history to WCAG 2.2</a> is available.</p>
     		<ul>
     			<li>2019-11-10: Promoted <a href="#focus-visible">Focus Visible</a> from Level AA to Level A.</li>
-    			<li>2020-01-14: Added Focus Visible (Enhanced), later renamed to <a href="#focus-appearance-enhanced">Focus Appearance (Enhanced)</a>.</li>
-    			<li>2020-03-30: Added <a href="#accessible-authentication">Accessible Authentication</a>.</li>
-    			<li>2020-05-27: Added <a href="#dragging">Dragging</a>.</li>
-    			<li>2020-07-19: Added <a href="#findable-help">Findable Help</a>, <a href="#fixed-reference-points">Fixed Reference Points</a>, <a href="#hidden-controls">Hidden Controls</a>, <a href="#pointer-target-spacing">Pointer Target Spacing</a>, <a href="#redundant-entry">Redundant Entry</a>.</li>
-    			<li>2020-08-04: Added <a href="#focus-appearance-minimum">Focus Appearance (Minimum)</a> and renamed <q>Focus Visible (Enhanced)</q> to <q>Focus Appearance (Enhanced)</q>.</li>
+    			<li>2020-01-14: Added <q>Focus Visible (Enhanced)</q>, later renamed to Focus Appearance (Enhanced), later removed.</li>
+				<li>2020-03-10: Renamed <q>Pointer Target Spacing</q> to <q>Target Size (Minimum)</q></li>
+    			<li>2020-03-30: Added <a href="#accessible-authentication-minimum">Accessible Authentication (Minimum)</a>.</li>
+    			<li>2020-05-27: Added <q>Dragging</q> (later renamed <a href="#dragging-movements">Dragging Movements</a>).</li>
+    			<li>2020-07-19: Added <q>Findable Help</q> (later renamed to <a href="#consistent-help">Consistent Help</a>), <q>Fixed Reference Points</q> (Page Break Navigation), <q>Hidden Controls</q> (later renamed Visible Controls), <q>Pointer Target Spacing</q> (later renamed <a href="#target-size-minimum">Target Size (Minimum)</a>), <a href="#redundant-entry">Redundant Entry</a>.</li>
+    			<li>2020-08-04: Added Focus Appearance (Minimum) (later renamed to <a href="#focus-appearance">Focus Appearance</a>) and renamed <q>Focus Visible (Enhanced)</q> to <q>Focus Appearance (Enhanced)</q>.</li>
+    			<li>2020-11-02: Renamed <q>Dragging</q> to <a href="#dragging-movements">Dragging Movements</a>.</li>
+    			<li>2020-12-08: Renamed <q>Hidden Controls</q> to Visible Controls.</li>
+				<li>2021-09-21: Added <a href="#accessible-authentication-enhanced">Accessible Authentication (No Exception)</a>.</li>
+				<li>2022-03-22: Added <a href="#focus-not-obscured-minimum">Focus Not Obscured (Minimum)</a>.</li>
+				<li>2022-05-13: Removed Visible Controls.</li>
+				<li>2022-05-30: Added <a href="#focus-not-obscured-enhanced">Focus Not Obscured (Enhanced)</a>.</li>
+				<li>2022-07-15: Removed Page Break Navigation.</li>
+				<li>2023-06-05: Added privacy and security sections within conformance.</li>
     		</ul>
     	</section>
     	<section class="appendix informative section" id="acknowledgements">
diff --git a/guidelines/input-purposes.html b/guidelines/input-purposes.html
index 17a622dc32..b83e94c842 100644
--- a/guidelines/input-purposes.html
+++ b/guidelines/input-purposes.html
@@ -2,7 +2,7 @@
 	<h2>Input Purposes for User Interface Components</h2>
 	<p>This section contains a listing of common <a>user interface component</a> input purposes. The terms below are not keywords that must be used, but instead represent purposes that must be captured in the taxonomy adopted by a webpage. Where applicable, authors mark up controls with the chosen taxonomy to indicate the semantic purpose. This provides the potential for user agents and assistive technologies to apply personalized presentations that can enable more people to understand and use the content.</p>
   
-  <p class="note">The list of input type purposes is based on the control purposes defined in the <a href="https://www.w3.org/TR/html52/sec-forms.html#sec-autofill">HTML 5.2 Autofill field section</a>, but it is important to understand that a different technology may have some or all of the same concepts defined in its specification and only the concepts that are mapped to the meanings below are required.</p>
+  <p class="note">The list of input type purposes is based on the control purposes defined in the <a href="https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill">HTML specification's Autofill section</a>, but it is important to understand that a different technology may have some or all of the same concepts defined in its specification and only the concepts that are mapped to the meanings below are required.</p>
 	    
   <p>The following input control purposes are intended to relate to the user of the content and pertain only to information related to that individual.</p>
 
@@ -47,7 +47,7 @@ <h2>Input Purposes for User Interface Components</h2>
 		<li><strong>bday-day</strong> - Day component of birthday</li>
 		<li><strong>bday-month</strong> - Month component of birthday</li>
 		<li><strong>bday-year</strong> - Year component of birthday</li>
-		<li><strong>sex</strong> - Gender identity (e.g., Female, Fa’afafine)</li>
+		<li><strong>sex</strong> - Gender identity (e.g., Female, <span lang="sm">Fa’afafine</span>)</li>
 		<li><strong>url</strong> - Home page or other Web page corresponding to the company, person, address, or contact information in the other fields associated with this field</li>
 		<li><strong>photo</strong> - Photograph, icon, or other image corresponding to the company, person, address, or contact information in the other fields associated with this field</li>
 		<li><strong>tel</strong> - Full telephone number, including country code</li>
diff --git a/guidelines/relative-luminance.html b/guidelines/relative-luminance.html
new file mode 100644
index 0000000000..ed65eb01df
--- /dev/null
+++ b/guidelines/relative-luminance.html
@@ -0,0 +1,361 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+    <link type="text/css" rel="stylesheet" href="https://www.w3.org/StyleSheets/TR/base.css"/>
+    <title>MathML version of the relative luminance definition</title>
+  </head>
+  <body>
+    <h1>MathML version of the relative luminance definition</h1>
+    <p>The following is a MathML version of the <a href="./#dfn-relative-luminance">WCAG 2.2 definition of relative luminance</a>. Refer to <a href="https://www.w3.org/Math/Software/mathml_software_cat_browsers.html">MathML Software - Browsers</a> for information about browsers and plugins that support MathML which you may need in order to correctly display the information on this page.</p>
+    <dl>
+      <dt><dfn data-dfn-type="dfn" id="dfn-relative-luminance" tabindex="0">relative luminance</dfn></dt>
+      <dd><p>the relative brightness of any point in a colorspace, normalized to 0 for darkest black and 1 for lightest white</p>
+        <div class="note" role="note" id="issue-container-generatedID-128"><div role="heading" class="note-title marker" id="h-note-128" aria-level="3"><span>Note</span><!---0.410359%--></div><div class="">
+          <p>For the sRGB colorspace, the relative luminance of a color is defined as <math xmlns="http://www.w3.org/1998/Math/MathML">
+              <mstyle>
+                <mi>L</mi>
+                <mo>=</mo>
+                <mn>0.2126</mn>
+                <mo>×</mo>
+                <mi>R</mi>
+                <mo>+</mo>
+                <mn>0.7152</mn>
+                <mo>×</mo>
+                <mi>G</mi>
+                <mo>+</mo>
+                <mn>0.0722</mn>
+                <mo>×</mo>
+                <mi>B</mi>
+              </mstyle>
+            </math> where <strong>R</strong>, <strong>G</strong> and <strong>B</strong> are defined as: </p>
+        <ul>
+          <li>
+            <p>If <math xmlns="http://www.w3.org/1998/Math/MathML">
+                <mstyle>
+                  <msub>
+                    <mi>R</mi>
+                    <mrow>
+                      <mi>s</mi>
+                      <mi>R</mi>
+                      <mi>G</mi>
+                      <mi>B</mi>
+                    </mrow>
+                  </msub>
+                  <mo>≤</mo>
+                  <mn>0.04045</mn>
+                </mstyle>
+              </math> then <math xmlns="http://www.w3.org/1998/Math/MathML">
+                <mstyle>
+                  <mi>R</mi>
+                  <mo>=</mo>
+                  <mfrac>
+                    <msub>
+                      <mi>R</mi>
+                      <mrow>
+                        <mi>s</mi>
+                        <mi>R</mi>
+                        <mi>G</mi>
+                        <mi>B</mi>
+                      </mrow>
+                    </msub>
+                    <mn>12.92</mn>
+                  </mfrac>
+                </mstyle>
+              </math> else <math xmlns="http://www.w3.org/1998/Math/MathML">
+                <mstyle>
+                  <mi>R</mi>
+                  <mo>=</mo>
+                  <msup>
+                    <mrow>
+                      <mo>(</mo>
+                      <mfrac>
+                        <mrow>
+                          <msub>
+                            <mi>R</mi>
+                            <mrow>
+                              <mi>s</mi>
+                              <mi>R</mi>
+                              <mi>G</mi>
+                              <mi>B</mi>
+                            </mrow>
+                          </msub>
+                          <mo>+</mo>
+                          <mn>0.055</mn>
+                        </mrow>
+                        <mn>1.055</mn>
+                      </mfrac>
+                      <mo>)</mo>
+                    </mrow>
+                    <mn>2.4</mn>
+                  </msup>
+                </mstyle>
+              </math>
+            </p>
+          </li>
+          <li>
+            <p>If <math xmlns="http://www.w3.org/1998/Math/MathML">
+                <mstyle>
+                  <msub>
+                    <mi>G</mi>
+                    <mrow>
+                      <mi>s</mi>
+                      <mi>R</mi>
+                      <mi>G</mi>
+                      <mi>B</mi>
+                    </mrow>
+                  </msub>
+                  <mo>≤</mo>
+                  <mn>0.04045</mn>
+                </mstyle>
+              </math> then <math xmlns="http://www.w3.org/1998/Math/MathML">
+                <mstyle>
+                  <mi>G</mi>
+                  <mo>=</mo>
+                  <mfrac>
+                    <msub>
+                      <mi>G</mi>
+                      <mrow>
+                        <mi>s</mi>
+                        <mi>R</mi>
+                        <mi>G</mi>
+                        <mi>B</mi>
+                      </mrow>
+                    </msub>
+                    <mn>12.92</mn>
+                  </mfrac>
+                </mstyle>
+              </math> else <math xmlns="http://www.w3.org/1998/Math/MathML">
+                <mstyle>
+                  <mi>G</mi>
+                  <mo>=</mo>
+                  <msup>
+                    <mrow>
+                      <mo>(</mo>
+                      <mfrac>
+                        <mrow>
+                          <msub>
+                            <mi>G</mi>
+                            <mrow>
+                              <mi>s</mi>
+                              <mi>R</mi>
+                              <mi>G</mi>
+                              <mi>B</mi>
+                            </mrow>
+                          </msub>
+                          <mo>+</mo>
+                          <mn>0.055</mn>
+                        </mrow>
+                        <mn>1.055</mn>
+                      </mfrac>
+                      <mo>)</mo>
+                    </mrow>
+                    <mn>2.4</mn>
+                  </msup>
+                </mstyle>
+              </math>
+            </p>
+          </li>
+          <li>
+            <p>If <math xmlns="http://www.w3.org/1998/Math/MathML">
+                <mstyle>
+                  <msub>
+                    <mi>B</mi>
+                    <mrow>
+                      <mi>s</mi>
+                      <mi>R</mi>
+                      <mi>G</mi>
+                      <mi>B</mi>
+                    </mrow>
+                  </msub>
+                  <mo>≤</mo>
+                  <mn>0.04045</mn>
+                </mstyle>
+              </math> then <math xmlns="http://www.w3.org/1998/Math/MathML">
+                <mstyle>
+                  <mi>B</mi>
+                  <mo>=</mo>
+                  <mfrac>
+                    <msub>
+                      <mi>B</mi>
+                      <mrow>
+                        <mi>s</mi>
+                        <mi>R</mi>
+                        <mi>G</mi>
+                        <mi>B</mi>
+                      </mrow>
+                    </msub>
+                    <mn>12.92</mn>
+                  </mfrac>
+                </mstyle>
+              </math> else <math xmlns="http://www.w3.org/1998/Math/MathML">
+                <mstyle>
+                  <mi>B</mi>
+                  <mo>=</mo>
+                  <msup>
+                    <mrow>
+                      <mo>(</mo>
+                      <mfrac>
+                        <mrow>
+                          <msub>
+                            <mi>B</mi>
+                            <mrow>
+                              <mi>s</mi>
+                              <mi>R</mi>
+                              <mi>G</mi>
+                              <mi>B</mi>
+                            </mrow>
+                          </msub>
+                          <mo>+</mo>
+                          <mn>0.055</mn>
+                        </mrow>
+                        <mn>1.055</mn>
+                      </mfrac>
+                      <mo>)</mo>
+                    </mrow>
+                    <mn>2.4</mn>
+                  </msup>
+                </mstyle>
+              </math>
+            </p>
+          </li>
+        </ul><p>and <math xmlns="http://www.w3.org/1998/Math/MathML">
+            <mstyle>
+              <msub>
+                <mi>R</mi>
+                <mrow>
+                  <mi>s</mi>
+                  <mi>R</mi>
+                  <mi>G</mi>
+                  <mi>B</mi>
+                </mrow>
+              </msub>
+              <mo>,</mo>
+              <msub>
+                <mi>G</mi>
+                <mrow>
+                  <mi>s</mi>
+                  <mi>R</mi>
+                  <mi>G</mi>
+                  <mi>B</mi>
+                </mrow>
+              </msub>
+              <mo>,</mo>
+              <mrow>
+                <mspace width="1ex"/>
+                <mtext>and</mtext>
+                <mspace width="1ex"/>
+              </mrow>
+              <msub>
+                <mi>B</mi>
+                <mrow>
+                  <mi>s</mi>
+                  <mi>R</mi>
+                  <mi>G</mi>
+                  <mi>B</mi>
+                </mrow>
+              </msub>
+            </mstyle>
+          </math> are defined as:</p><ul>
+          <li><math xmlns="http://www.w3.org/1998/Math/MathML">
+              <mstyle>
+                <msub>
+                  <mi>R</mi>
+                  <mrow>
+                    <mi>s</mi>
+                    <mi>R</mi>
+                    <mi>G</mi>
+                    <mi>B</mi>
+                  </mrow>
+                </msub>
+                <mo>=</mo>
+                <mfrac>
+                  <msub>
+                    <mi>R</mi>
+                    <mrow>
+                      <mn>8</mn>
+                      <mi>b</mi>
+                      <mi>i</mi>
+                      <mi>t</mi>
+                    </mrow>
+                  </msub>
+                  <mn>255</mn>
+                </mfrac>
+              </mstyle>
+            </math></li>
+          <li><math xmlns="http://www.w3.org/1998/Math/MathML">
+              <mstyle>
+                <msub>
+                  <mi>G</mi>
+                  <mrow>
+                    <mi>s</mi>
+                    <mi>R</mi>
+                    <mi>G</mi>
+                    <mi>B</mi>
+                  </mrow>
+                </msub>
+                <mo>=</mo>
+                <mfrac>
+                  <msub>
+                    <mi>G</mi>
+                    <mrow>
+                      <mn>8</mn>
+                      <mi>b</mi>
+                      <mi>i</mi>
+                      <mi>t</mi>
+                    </mrow>
+                  </msub>
+                  <mn>255</mn>
+                </mfrac>
+              </mstyle>
+            </math></li>
+          <li><math xmlns="http://www.w3.org/1998/Math/MathML">
+              <mstyle>
+                <msub>
+                  <mi>B</mi>
+                  <mrow>
+                    <mi>s</mi>
+                    <mi>R</mi>
+                    <mi>G</mi>
+                    <mi>B</mi>
+                  </mrow>
+                </msub>
+                <mo>=</mo>
+                <mfrac>
+                  <msub>
+                    <mi>B</mi>
+                    <mrow>
+                      <mn>8</mn>
+                      <mi>b</mi>
+                      <mi>i</mi>
+                      <mi>t</mi>
+                    </mrow>
+                  </msub>
+                  <mn>255</mn>
+                </mfrac>
+              </mstyle>
+            </math></li>
+        </ul><p>(Formula taken from [<cite><a class="bibref" data-link-type="biblio" href="./#bib-srgb" title="Multimedia systems and equipment - Colour measurement and management - Part 2-1: Colour management - Default RGB colour space - sRGB">SRGB</a></cite>].) </p>
+        </div>
+        </div>
+        <div class="note" role="note" id="issue-container-generatedID-129"><div role="heading" class="note-title marker" id="h-note-129" aria-level="3"><span>Note</span><!---0.410359%--></div><p class="">Before May 2021 the value of 0.04045 in the definition was different (0.03928). It was taken from an older version of the specification and has been updated. It has no practical effect on the calculations in the context of these guidelines.</p></div>
+        
+        <div class="note" role="note" id="issue-container-generatedID-130"><div role="heading" class="note-title marker" id="h-note-130" aria-level="3"><span>Note</span><!---0.410359%--></div><p class="">Almost all systems used today to view Web content assume sRGB encoding. Unless it
+          is known that another color space will be used to process and display the content,
+          authors should evaluate using sRGB colorspace. If using other color spaces, see <a href="https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum">Understanding Success Criterion 1.4.3</a>.
+        </p></div>
+        
+        <div class="note" role="note" id="issue-container-generatedID-131"><div role="heading" class="note-title marker" id="h-note-131" aria-level="3"><span>Note</span><!---0.410359%--></div><p class="">If dithering occurs after delivery, then the source color value is used. For colors
+          that are dithered at the source, the average values of the colors that are dithered
+          should be used (average R, average G, and average B).
+        </p></div>
+        
+        <div class="note" role="note" id="issue-container-generatedID-132"><div role="heading" class="note-title marker" id="h-note-132" aria-level="3"><span>Note</span><!---0.410359%--></div><p class="">Tools are available that automatically do the calculations when testing contrast and
+          flash.
+        </p></div>
+      </dd>
+      <dt id="bib-srgb">[SRGB]</dt>
+      <dd><a href="https://webstore.iec.ch/publication/6169"><cite>Multimedia systems and equipment - Colour measurement and management - Part 2-1: Colour management - Default RGB colour space - sRGB</cite></a>. IEC. URL: <a href="https://webstore.iec.ch/publication/6169">https://webstore.iec.ch/publication/6169</a></dd>
+    </dl>
+  </body>
+</html>
diff --git a/guidelines/relative-luminance.xml b/guidelines/relative-luminance.xml
deleted file mode 100644
index 4d52defa2e..0000000000
--- a/guidelines/relative-luminance.xml
+++ /dev/null
@@ -1,239 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!-- edited with XMLSpy v2006 rel. 3 sp1 (http://www.altova.com) by Ben Caldwell (W3C) -->
-<!-- use of valid doctype here breaks IE DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0//EN"
-        "http://www.w3.org/TR/MathML2/dtd/xhtml-math11-f.dtd"-->
-<?xml-stylesheet type="text/xsl" href="https://www.w3.org/Math/XSL/mathml.xsl"?>
-<html xmlns="http://www.w3.org/1999/xhtml">
-  <head>
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
-    <link type="text/css" rel="stylesheet" href="https://www.w3.org/StyleSheets/TR/base.css"/>
-    <title>MathML version of the relative luminance definition</title>
-  </head>
-  <body>
-    <h1>MathML version of the relative luminance definition</h1>
-    <p>The following is a MathML version of the <a href="Overview.htmll#relativeluminancedef">WCAG 2.0 definition of relative luminance</a>. Refer to <a href="https://www.w3.org/Math/Software/mathml_software_cat_browsers.html">MathML Software - Browsers</a> for information about browsers and plugins that support MathML which you may need in order to correctly display the information on this page.</p>
-    <dl>
-      <dt class="label">
-        <a id="relativeluminancedef"> </a>relative luminance</dt>
-      <dd>
-        <p>the relative brightness of any point in a colorspace, normalized to 0 for darkest black and 1 for lightest white</p>
-        <div class="note">
-          <p class="prefix">
-            Note 1: For the sRGB colorspace, the relative luminance of a color is defined as <math xmlns="http://www.w3.org/1998/Math/MathML">
-              <mstyle displaystyle="true" mathcolor="blue" fontfamily="serif">
-                <mi>L</mi><mo>=</mo><mn>0.2126</mn><mo>×</mo><mi>R</mi><mo>+</mo><mn>0.7152</mn><mo>×</mo><mi>G</mi><mo>+</mo><mn>0.0722</mn><mo>×</mo><mi>B</mi>
-              </mstyle>
-            </math> where <strong>R</strong>, <strong>G</strong> and <strong>B</strong> are defined as:
-          </p>
-          <ul>
-            <li>
-              <p>If <math xmlns="http://www.w3.org/1998/Math/MathML">
-                  <mstyle displaystyle="true" mathcolor="blue" fontfamily="serif">
-                    <msub>
-                      <mi>R</mi>
-                      <mrow>
-                        <mi>s</mi>
-                        <mi>R</mi>
-                        <mi>G</mi>
-                        <mi>B</mi>
-                      </mrow>
-                    </msub>
-                    <mo>≤</mo>
-                    <mn>0.03928</mn>
-                  </mstyle>
-                </math> then <math xmlns="http://www.w3.org/1998/Math/MathML">
-                  <mstyle displaystyle="true" mathcolor="blue" fontfamily="serif">
-                    <mi>R</mi>
-                    <mo>=</mo>
-                    <mfrac>
-                      <msub>
-                        <mi>R</mi>
-                        <mrow>
-                          <mi>s</mi>
-                          <mi>R</mi>
-                          <mi>G</mi>
-                          <mi>B</mi>
-                        </mrow>
-                      </msub>
-                      <mn>12.92</mn>
-                    </mfrac>
-                  </mstyle>
-                </math>
- else <math xmlns="http://www.w3.org/1998/Math/MathML">
-                  <mstyle displaystyle="true" mathcolor="blue" fontfamily="serif">
-                    <mi>R</mi>
-                    <mo>=</mo>
-                    <msup>
-                      <mrow>
-                        <mo>(</mo>
-                        <mfrac>
-                          <mrow>
-                            <msub>
-                              <mi>R</mi>
-                              <mrow>
-                                <mi>s</mi>
-                                <mi>R</mi>
-                                <mi>G</mi>
-                                <mi>B</mi>
-                              </mrow>
-                            </msub>
-                            <mo>+</mo>
-                            <mn>0.055</mn>
-                          </mrow>
-                          <mn>1.055</mn>
-                        </mfrac>
-                        <mo>)</mo>
-                      </mrow>
-                      <mn>2.4</mn>
-                    </msup>
-                  </mstyle>
-                </math>
-              </p>
-            </li>
-            <li>
-              <p>If <math xmlns="http://www.w3.org/1998/Math/MathML">
-                  <mstyle displaystyle="true" mathcolor="blue" fontfamily="serif">
-                    <msub>
-                      <mi>G</mi>
-                      <mrow>
-                        <mi>s</mi>
-                        <mi>R</mi>
-                        <mi>G</mi>
-                        <mi>B</mi>
-                      </mrow>
-                    </msub>
-                    <mo>≤</mo>
-                    <mn>0.03928</mn>
-                  </mstyle>
-                </math> then <math xmlns="http://www.w3.org/1998/Math/MathML">
-                  <mstyle displaystyle="true" mathcolor="blue" fontfamily="serif">
-                    <mi>G</mi>
-                    <mo>=</mo>
-                    <mfrac>
-                      <msub>
-                        <mi>G</mi>
-                        <mrow>
-                          <mi>s</mi>
-                          <mi>R</mi>
-                          <mi>G</mi>
-                          <mi>B</mi>
-                        </mrow>
-                      </msub>
-                      <mn>12.92</mn>
-                    </mfrac>
-                  </mstyle>
-                </math>
- else <math xmlns="http://www.w3.org/1998/Math/MathML">
-                  <mstyle displaystyle="true" mathcolor="blue" fontfamily="serif">
-                    <mi>G</mi>
-                    <mo>=</mo>
-                    <msup>
-                      <mrow>
-                        <mo>(</mo>
-                        <mfrac>
-                          <mrow>
-                            <msub>
-                              <mi>G</mi>
-                              <mrow>
-                                <mi>s</mi>
-                                <mi>R</mi>
-                                <mi>G</mi>
-                                <mi>B</mi>
-                              </mrow>
-                            </msub>
-                            <mo>+</mo>
-                            <mn>0.055</mn>
-                          </mrow>
-                          <mn>1.055</mn>
-                        </mfrac>
-                        <mo>)</mo>
-                      </mrow>
-                      <mn>2.4</mn>
-                    </msup>
-                  </mstyle>
-                </math>
-              </p>
-            </li>
-            <li>
-              <p>If <math xmlns="http://www.w3.org/1998/Math/MathML">
-                  <mstyle displaystyle="true" mathcolor="blue" fontfamily="serif">
-                    <msub>
-                      <mi>B</mi>
-                      <mrow>
-                        <mi>s</mi>
-                        <mi>R</mi>
-                        <mi>G</mi>
-                        <mi>B</mi>
-                      </mrow>
-                    </msub>
-                    <mo>≤</mo>
-                    <mn>0.03928</mn>
-                  </mstyle>
-                </math> then <math xmlns="http://www.w3.org/1998/Math/MathML">
-                  <mstyle displaystyle="true" mathcolor="blue" fontfamily="serif">
-                    <mi>B</mi>
-                    <mo>=</mo>
-                    <mfrac>
-                      <msub>
-                        <mi>B</mi>
-                        <mrow>
-                          <mi>s</mi>
-                          <mi>R</mi>
-                          <mi>G</mi>
-                          <mi>B</mi>
-                        </mrow>
-                      </msub>
-                      <mn>12.92</mn>
-                    </mfrac>
-                  </mstyle>
-                </math>
- else <math xmlns="http://www.w3.org/1998/Math/MathML">
-                  <mstyle displaystyle="true" mathcolor="blue" fontfamily="serif">
-                    <mi>B</mi>
-                    <mo>=</mo>
-                    <msup>
-                      <mrow>
-                        <mo>(</mo>
-                        <mfrac>
-                          <mrow>
-                            <msub>
-                              <mi>B</mi>
-                              <mrow>
-                                <mi>s</mi>
-                                <mi>R</mi>
-                                <mi>G</mi>
-                                <mi>B</mi>
-                              </mrow>
-                            </msub>
-                            <mo>+</mo>
-                            <mn>0.055</mn>
-                          </mrow>
-                          <mn>1.055</mn>
-                        </mfrac>
-                        <mo>)</mo>
-                      </mrow>
-                      <mn>2.4</mn>
-                    </msup>
-                  </mstyle>
-                </math>
-              </p>
-            </li>
-          </ul>
-		  <p>and <math xmlns="http://www.w3.org/1998/Math/MathML"><mstyle displaystyle="true" mathcolor="blue" fontfamily="serif"><msub><mi>R</mi><mrow><mi>s</mi><mi>R</mi><mi>G</mi><mi>B</mi></mrow></msub><mo>,</mo><msub><mi>G</mi><mrow><mi>s</mi><mi>R</mi><mi>G</mi><mi>B</mi></mrow></msub><mo>,</mo><mrow><mspace width="1ex"></mspace><mtext>and</mtext><mspace width="1ex"></mspace></mrow><msub><mi>B</mi><mrow><mi>s</mi><mi>R</mi><mi>G</mi><mi>B</mi></mrow></msub></mstyle></math> are defined as:</p>
-		  <ul>
-		  <li><math xmlns="http://www.w3.org/1998/Math/MathML"><mstyle displaystyle="true" mathcolor="blue" fontfamily="serif"><msub><mi>R</mi><mrow><mi>s</mi><mi>R</mi><mi>G</mi><mi>B</mi></mrow></msub><mo>=</mo><mfrac><msub><mi>R</mi><mrow><mn>8</mn><mi>b</mi><mi>i</mi><mi>t</mi></mrow></msub><mn>255</mn></mfrac></mstyle></math></li>
-		   <li><math xmlns="http://www.w3.org/1998/Math/MathML"><mstyle displaystyle="true" mathcolor="blue" fontfamily="serif"><msub><mi>G</mi><mrow><mi>s</mi><mi>R</mi><mi>G</mi><mi>B</mi></mrow></msub><mo>=</mo><mfrac><msub><mi>G</mi><mrow><mn>8</mn><mi>b</mi><mi>i</mi><mi>t</mi></mrow></msub><mn>255</mn></mfrac></mstyle></math></li>
-		    <li><math xmlns="http://www.w3.org/1998/Math/MathML"><mstyle displaystyle="true" mathcolor="blue" fontfamily="serif"><msub><mi>B</mi><mrow><mi>s</mi><mi>R</mi><mi>G</mi><mi>B</mi></mrow></msub><mo>=</mo><mfrac><msub><mi>B</mi><mrow><mn>8</mn><mi>b</mi><mi>i</mi><mi>t</mi></mrow></msub><mn>255</mn></mfrac></mstyle></math></li>
-		  </ul>
-          <div class="note">
-            <p class="prefix">(Formula taken from <a href="http://w3.org/TR/WCAG20/Overview.html#sRGB">[sRGB]</a> and <a href="http://w3.org/TR/WCAG20/Overview.html#IEC-4WD">[IEC-4WD]</a>.)</p>
-          </div>
-          <p class="prefix">Note 2: Almost all systems used today to view Web content assume sRGB encoding. Unless it is known that another color space will be used to process and display the content, authors should evaluate using sRGB colorspace. If using other color spaces, see <a href="/WAI/WCAG21/Understanding/contrast-minimum">Understanding Success Criterion 1.4.3</a>.</p>
-		  <p class="prefix">Note 3: If dithering occurs after delivery, then the source color value is used.  For colors that are dithered at the source, the average values of the colors that are dithered should be used (average R, average G, and average B).</p>
-          <p class="prefix">Note 4: Tools are available that automatically do the calculations when testing contrast and flash.</p>
-		
-        </div>
-      </dd>
-    </dl>
-  </body>
-</html>
diff --git a/guidelines/respec-config.js b/guidelines/respec-config.js
index 09acebd9b5..a6189081a5 100644
--- a/guidelines/respec-config.js
+++ b/guidelines/respec-config.js
@@ -11,7 +11,7 @@ var respecConfig = {
 	specStatus:           "ED",
 	//crEnd:                "2012-04-30",
 	//perEnd:               "2013-07-23",
-	//publishDate:          "2013-08-22",
+	publishDate:          "2023-10-05",
 	diffTool:             "http://www.aptest.com/standards/htmldiff/htmldiff.pl",
 	
 	// the specifications short name, as in https://www.w3.org/TR/short-name/
@@ -27,7 +27,7 @@ var respecConfig = {
 	// and its maturity status
 	//previousPublishDate:  "2014-06-12",
 	//previousMaturity:  "WD",
-	prevRecURI: "https://www.w3.org/TR/WCAG/",
+	prevRecURI: "https://www.w3.org/TR/WCAG21/",
 	//previousDiffURI: "https://www.w3.org/TR/2014/REC-wai-aria-20140320/",
 	
 	// if there a publicly available Editors Draft, this is the link
@@ -39,39 +39,40 @@ var respecConfig = {
 	// editors, add as many as you like
 	// only "name" is required
 	editors: [
-		{
-			name: "Chuck Adams",
-			url: "https://www.oracle.com/",
-			mailto: "charles.adams@oracle.com",
-			company: "Oracle",
-			companyURI: "https://www.oracle.com/",
-			w3cid: 104852
-		},
 		{
 			name: "Alastair Campbell",
-			url: "https://www.nomensa.com/",
+			//url: "https://www.nomensa.com/",
 			mailto: "acampbell@nomensa.com",
 			company: "Nomensa",
 			companyURI: "https://www.nomensa.com/",
 			w3cid: 44689
 		},
 		{
-			name: "Rachael Montgomery",
+			name: "Chuck Adams",
+			//url: "https://www.oracle.com/",
+			mailto: "charles.adams@oracle.com",
+			company: "Oracle",
+			companyURI: "https://www.oracle.com/",
+			w3cid: 104852
+		},
+		{
+			name: "Rachael Bradley Montgomery",
 			mailto: "rachael@accessiblecommunity.org",
-			company: "Invited Expert",
+			company: "Library of Congress",
+			companyURI: "https://loc.gov/",
 			w3cid: 90310
 		},
 		{
 			name: "Michael Cooper",
-			url: 'https://www.w3.org',
-			mailto: "cooper@w3.org",
+			url: 'https://www.w3.org/People/cooper',
+			//mailto: "cooper@w3.org",
 			company: "W3C",
 			companyURI: "https://www.w3.org",
 			w3cid: 34017
 		},
 		{
 			name: "Andrew Kirkpatrick",
-			url: "http://www.adobe.com/",
+			//url: "http://www.adobe.com/",
 			mailto: "akirkpat@adobe.com",
 			company: "Adobe",
 			companyURI: "http://www.adobe.com/",
@@ -135,25 +136,15 @@ var respecConfig = {
 	],
 	*/
 	
-	// errata: 'https://www.w3.org/2010/02/rdfa/errata.html',
+	errata: 'https://www.w3.org/WAI/WCAG22/errata/',
+  implementationReportURI: 'https://www.w3.org/WAI/WCAG22/implementation-report/',
 	
 	// name of the WG
-	wg:           "Accessibility Guidelines Working Group",
-	
-	// URI of the public WG page
-	wgURI:        "https://www.w3.org/WAI/GL/",
-	
-	// name (with the @w3c.org) of the public mailing to which comments are due
-	wgPublicList: "public-agwg-comments",
-	
-	// URI of the patent status for this WG, for Rec-track documents
-	// !!!! IMPORTANT !!!!
-	// This is important for Rec-track documents, do not copy a patent URI from a random
-	// document unless you know what you're doing. If in doubt ask your friendly neighbourhood
-	// Team Contact.
-	wgPatentURI:  "https://www.w3.org/2004/01/pp-impl/35422/status",
+	group:  "ag",
+	github: "w3c/wcag",
+
 	maxTocLevel: 4,
 	
-	postProcess: [addTextSemantics, swapInDefinitions]
+	postProcess: [postRespec]
 	
 };
diff --git a/guidelines/sc/20/abbreviations.html b/guidelines/sc/20/abbreviations.html
index 69d85cf406..81f0d0be8b 100644
--- a/guidelines/sc/20/abbreviations.html
+++ b/guidelines/sc/20/abbreviations.html
@@ -1,4 +1,4 @@
-<section class="sc">
+<section id="abbreviations" class="sc">
    
    <h4>Abbreviations</h4>
    
@@ -7,4 +7,4 @@ <h4>Abbreviations</h4>
    <p>A <a>mechanism</a> for identifying the expanded form or meaning of <a>abbreviations</a> is available.
    </p>
    
-</section>
\ No newline at end of file
+</section>
diff --git a/guidelines/sc/20/audio-control.html b/guidelines/sc/20/audio-control.html
index 7819ff6eef..aaccda2077 100644
--- a/guidelines/sc/20/audio-control.html
+++ b/guidelines/sc/20/audio-control.html
@@ -1,4 +1,4 @@
-<section class="sc">
+<section id="audio-control" class="sc">
    
    <h4>Audio Control</h4>
    
@@ -13,4 +13,4 @@ <h4>Audio Control</h4>
       to meet other success criteria) must meet this success criterion. See <a href="#cc5">Conformance Requirement 5: Non-Interference</a>.
    </p>
    
-</section>
\ No newline at end of file
+</section>
diff --git a/guidelines/sc/20/audio-description-or-media-alternative-prerecorded.html b/guidelines/sc/20/audio-description-or-media-alternative-prerecorded.html
index fc1b009b9b..9198805452 100644
--- a/guidelines/sc/20/audio-description-or-media-alternative-prerecorded.html
+++ b/guidelines/sc/20/audio-description-or-media-alternative-prerecorded.html
@@ -1,4 +1,4 @@
-<section class="sc">
+<section id="audio-description-or-media-alternative-prerecorded" class="sc">
    
    <h4>Audio Description or Media Alternative (Prerecorded)</h4>
    
@@ -8,4 +8,4 @@ <h4>Audio Description or Media Alternative (Prerecorded)</h4>
       <a>video</a> content is provided for <a>synchronized media</a>, except when the media is a <a>media alternative for text</a> and is clearly labeled as such.
    </p>
    
-</section>
\ No newline at end of file
+</section>
diff --git a/guidelines/sc/20/audio-description-prerecorded.html b/guidelines/sc/20/audio-description-prerecorded.html
index e69ba4569d..d745a2467c 100644
--- a/guidelines/sc/20/audio-description-prerecorded.html
+++ b/guidelines/sc/20/audio-description-prerecorded.html
@@ -1,4 +1,4 @@
-<section class="sc">
+<section id="audio-description-prerecorded" class="sc">
    
    <h4>Audio Description (Prerecorded)</h4>
    
@@ -8,4 +8,4 @@ <h4>Audio Description (Prerecorded)</h4>
       <a>video</a> content in <a>synchronized media</a>.
    </p>
    
-</section>
\ No newline at end of file
+</section>
diff --git a/guidelines/sc/20/audio-only-and-video-only-prerecorded.html b/guidelines/sc/20/audio-only-and-video-only-prerecorded.html
index fea1d134f7..1d00f0b00f 100644
--- a/guidelines/sc/20/audio-only-and-video-only-prerecorded.html
+++ b/guidelines/sc/20/audio-only-and-video-only-prerecorded.html
@@ -1,4 +1,4 @@
-<section class="sc">
+<section id="audio-only-and-video-only-prerecorded" class="sc">
    
    <h4>Audio-only and Video-only (Prerecorded)</h4>
    
@@ -31,4 +31,4 @@ <h4>Audio-only and Video-only (Prerecorded)</h4>
       
    </dl>
    
-</section>
\ No newline at end of file
+</section>
diff --git a/guidelines/sc/20/audio-only-live.html b/guidelines/sc/20/audio-only-live.html
index 4df1345cb4..f901051281 100644
--- a/guidelines/sc/20/audio-only-live.html
+++ b/guidelines/sc/20/audio-only-live.html
@@ -1,4 +1,4 @@
-<section class="sc">
+<section id="audio-only-live" class="sc">
    
    <h4>Audio-only (Live)</h4>
    
@@ -8,4 +8,4 @@ <h4>Audio-only (Live)</h4>
       <a>audio-only</a> content is provided.
    </p>
    
-</section>
\ No newline at end of file
+</section>
diff --git a/guidelines/sc/20/bypass-blocks.html b/guidelines/sc/20/bypass-blocks.html
index 4bfedd4f72..5e33982b78 100644
--- a/guidelines/sc/20/bypass-blocks.html
+++ b/guidelines/sc/20/bypass-blocks.html
@@ -1,4 +1,4 @@
-<section class="sc">
+<section id="bypass-blocks" class="sc">
    
    <h4>Bypass Blocks</h4>
    
@@ -7,4 +7,4 @@ <h4>Bypass Blocks</h4>
    <p>A <a>mechanism</a> is available to bypass blocks of content that are repeated on multiple <a>Web pages</a>.
    </p>
    
-</section>
\ No newline at end of file
+</section>
diff --git a/guidelines/sc/20/captions-live.html b/guidelines/sc/20/captions-live.html
index a46694ddc8..402d85f656 100644
--- a/guidelines/sc/20/captions-live.html
+++ b/guidelines/sc/20/captions-live.html
@@ -1,4 +1,4 @@
-<section class="sc">
+<section id="captions-live" class="sc">
    
    <h4>Captions (Live)</h4>
    
@@ -8,4 +8,4 @@ <h4>Captions (Live)</h4>
       <a>audio</a> content in <a>synchronized media</a>.
    </p>
    
-</section>
\ No newline at end of file
+</section>
diff --git a/guidelines/sc/20/captions-prerecorded.html b/guidelines/sc/20/captions-prerecorded.html
index eb2f8a4349..0d9206873f 100644
--- a/guidelines/sc/20/captions-prerecorded.html
+++ b/guidelines/sc/20/captions-prerecorded.html
@@ -1,4 +1,4 @@
-<section class="sc">
+<section id="captions-prerecorded" class="sc">
    
    <h4>Captions (Prerecorded)</h4>
    
@@ -8,4 +8,4 @@ <h4>Captions (Prerecorded)</h4>
       <a>audio</a> content in <a>synchronized media</a>, except when the media is a <a>media alternative for text</a> and is clearly labeled as such.
    </p>
    
-</section>
\ No newline at end of file
+</section>
diff --git a/guidelines/sc/20/change-on-request.html b/guidelines/sc/20/change-on-request.html
index bfb87593cc..f5d09acf56 100644
--- a/guidelines/sc/20/change-on-request.html
+++ b/guidelines/sc/20/change-on-request.html
@@ -1,4 +1,4 @@
-<section class="sc">
+<section id="change-on-request" class="sc">
    
    <h4>Change on Request</h4>
    
@@ -7,4 +7,4 @@ <h4>Change on Request</h4>
    <p><a>Changes of context</a> are initiated only by user request or a <a>mechanism</a> is available to turn off such changes.
    </p>
    
-</section>
\ No newline at end of file
+</section>
diff --git a/guidelines/sc/20/consistent-identification.html b/guidelines/sc/20/consistent-identification.html
index c1a5e5fcce..789b8d23f6 100644
--- a/guidelines/sc/20/consistent-identification.html
+++ b/guidelines/sc/20/consistent-identification.html
@@ -1,5 +1,5 @@
-<section class="sc">
-   
+<section id="consistent-identification" class="sc">
+
    <h4>Consistent Identification</h4>
    
    <p class="conformance-level">AA</p>
@@ -7,4 +7,4 @@ <h4>Consistent Identification</h4>
    <p>Components that have the <a>same functionality</a> within a <a>set of Web pages</a> are identified consistently.
    </p>
    
-</section>
\ No newline at end of file
+</section>
diff --git a/guidelines/sc/20/consistent-navigation.html b/guidelines/sc/20/consistent-navigation.html
index 7a811663da..a1df5d4e8a 100644
--- a/guidelines/sc/20/consistent-navigation.html
+++ b/guidelines/sc/20/consistent-navigation.html
@@ -1,4 +1,4 @@
-<section class="sc">
+<section id="consistent-navigation" class="sc">
    
    <h4>Consistent Navigation</h4>
    
@@ -7,4 +7,4 @@ <h4>Consistent Navigation</h4>
    <p>Navigational mechanisms that are repeated on multiple <a>Web pages</a> within a <a>set of Web pages</a> occur in the <a>same relative order</a> each time they are repeated, unless a change is initiated by the user.
    </p>
    
-</section>
\ No newline at end of file
+</section>
diff --git a/guidelines/sc/20/contrast-enhanced.html b/guidelines/sc/20/contrast-enhanced.html
index d25475c349..ba07a2a4db 100644
--- a/guidelines/sc/20/contrast-enhanced.html
+++ b/guidelines/sc/20/contrast-enhanced.html
@@ -1,4 +1,4 @@
-<section class="sc">
+<section id="contrast-enhanced" class="sc">
    
    <h4>Contrast (Enhanced)</h4>
    
@@ -38,4 +38,4 @@ <h4>Contrast (Enhanced)</h4>
       
    </dl>
    
-</section>
\ No newline at end of file
+</section>
diff --git a/guidelines/sc/20/contrast-minimum.html b/guidelines/sc/20/contrast-minimum.html
index 5c022a6e29..744d7f328e 100644
--- a/guidelines/sc/20/contrast-minimum.html
+++ b/guidelines/sc/20/contrast-minimum.html
@@ -1,4 +1,4 @@
-<section class="sc">
+<section id="contrast-minimum" class="sc">
    
    <h4>Contrast (Minimum)</h4>
    
@@ -38,4 +38,4 @@ <h4>Contrast (Minimum)</h4>
       
    </dl>
    
-</section>
\ No newline at end of file
+</section>
diff --git a/guidelines/sc/20/error-identification.html b/guidelines/sc/20/error-identification.html
index 2f82a6451d..b9549982e5 100644
--- a/guidelines/sc/20/error-identification.html
+++ b/guidelines/sc/20/error-identification.html
@@ -1,4 +1,4 @@
-<section class="sc">
+<section id="error-identification" class="sc">
    
    <h4>Error Identification</h4>
    
@@ -8,4 +8,4 @@ <h4>Error Identification</h4>
       is described to the user in text.
    </p>
    
-</section>
\ No newline at end of file
+</section>
diff --git a/guidelines/sc/20/error-prevention-all.html b/guidelines/sc/20/error-prevention-all.html
index 93729b2349..8fb05bb90e 100644
--- a/guidelines/sc/20/error-prevention-all.html
+++ b/guidelines/sc/20/error-prevention-all.html
@@ -1,4 +1,4 @@
-<section class="sc">
+<section id="error-prevention-all" class="sc">
    
    <h4>Error Prevention (All)</h4>
    
diff --git a/guidelines/sc/20/error-prevention-legal-financial-data.html b/guidelines/sc/20/error-prevention-legal-financial-data.html
index 0089039f89..0059cff558 100644
--- a/guidelines/sc/20/error-prevention-legal-financial-data.html
+++ b/guidelines/sc/20/error-prevention-legal-financial-data.html
@@ -1,4 +1,4 @@
-<section class="sc">
+<section id="error-prevention-legal-financial-data" class="sc">
    
    <h4>Error Prevention (Legal, Financial, Data)</h4>
    
diff --git a/guidelines/sc/20/error-suggestion.html b/guidelines/sc/20/error-suggestion.html
index fef59fddb2..f6247c7530 100644
--- a/guidelines/sc/20/error-suggestion.html
+++ b/guidelines/sc/20/error-suggestion.html
@@ -1,4 +1,4 @@
-<section class="sc">
+<section id="error-suggestion" class="sc">
    
    <h4>Error Suggestion</h4>
    
@@ -9,4 +9,4 @@ <h4>Error Suggestion</h4>
       content.
    </p>
    
-</section>
\ No newline at end of file
+</section>
diff --git a/guidelines/sc/20/extended-audio-description-prerecorded.html b/guidelines/sc/20/extended-audio-description-prerecorded.html
index 8de6068583..df481c5bce 100644
--- a/guidelines/sc/20/extended-audio-description-prerecorded.html
+++ b/guidelines/sc/20/extended-audio-description-prerecorded.html
@@ -1,4 +1,4 @@
-<section class="sc">
+<section id="extended-audio-description-prerecorded" class="sc">
    
    <h4>Extended Audio Description (Prerecorded)</h4>
    
@@ -8,4 +8,4 @@ <h4>Extended Audio Description (Prerecorded)</h4>
       <a>video</a> content in <a>synchronized media</a>.
    </p>
    
-</section>
\ No newline at end of file
+</section>
diff --git a/guidelines/sc/20/focus-order.html b/guidelines/sc/20/focus-order.html
index 7812b66fb1..5c36ef43f5 100644
--- a/guidelines/sc/20/focus-order.html
+++ b/guidelines/sc/20/focus-order.html
@@ -1,4 +1,4 @@
-<section class="sc">
+<section id="focus-order" class="sc">
    
    <h4>Focus Order</h4>
    
@@ -8,4 +8,4 @@ <h4>Focus Order</h4>
       focus in an order that preserves meaning and operability.
    </p>
    
-</section>
\ No newline at end of file
+</section>
diff --git a/guidelines/sc/20/focus-visible.html b/guidelines/sc/20/focus-visible.html
index f713575cde..ca4d3a7f90 100644
--- a/guidelines/sc/20/focus-visible.html
+++ b/guidelines/sc/20/focus-visible.html
@@ -1,4 +1,4 @@
-<section class="sc">
+<section id="focus-visible" class="sc">
    
    <h4>Focus Visible</h4>
    
@@ -8,4 +8,4 @@ <h4>Focus Visible</h4>
       indicator is visible.
    </p>
    
-</section>
\ No newline at end of file
+</section>
diff --git a/guidelines/sc/20/headings-and-labels.html b/guidelines/sc/20/headings-and-labels.html
index 5314be40f0..eed1dd8f69 100644
--- a/guidelines/sc/20/headings-and-labels.html
+++ b/guidelines/sc/20/headings-and-labels.html
@@ -1,4 +1,4 @@
-<section class="sc">
+<section id="headings-and-labels" class="sc">
    
    <h4>Headings and Labels</h4>
    
@@ -7,4 +7,4 @@ <h4>Headings and Labels</h4>
    <p>Headings and <a>labels</a> describe topic or purpose.
    </p>
    
-</section>
\ No newline at end of file
+</section>
diff --git a/guidelines/sc/20/help.html b/guidelines/sc/20/help.html
index e1dbbefd04..6818b57fe0 100644
--- a/guidelines/sc/20/help.html
+++ b/guidelines/sc/20/help.html
@@ -1,4 +1,4 @@
-<section class="sc">
+<section id="help" class="sc">
    
    <h4>Help</h4>
    
@@ -7,4 +7,4 @@ <h4>Help</h4>
    <p><a>Context-sensitive help</a> is available.
    </p>
    
-</section>
\ No newline at end of file
+</section>
diff --git a/guidelines/sc/20/images-of-text-no-exception.html b/guidelines/sc/20/images-of-text-no-exception.html
index 183bb9fed5..977aace018 100644
--- a/guidelines/sc/20/images-of-text-no-exception.html
+++ b/guidelines/sc/20/images-of-text-no-exception.html
@@ -1,4 +1,4 @@
-<section class="sc">
+<section id="images-of-text-no-exception" class="sc">
    
    <h4>Images of Text (No Exception)</h4>
    
@@ -9,4 +9,4 @@ <h4>Images of Text (No Exception)</h4>
    
    <p class="note">Logotypes (text that is part of a logo or brand name) are considered essential.</p>
    
-</section>
\ No newline at end of file
+</section>
diff --git a/guidelines/sc/20/images-of-text.html b/guidelines/sc/20/images-of-text.html
index c688b1798d..2998d11ecf 100644
--- a/guidelines/sc/20/images-of-text.html
+++ b/guidelines/sc/20/images-of-text.html
@@ -1,4 +1,4 @@
-<section class="sc">
+<section id="images-of-text" class="sc">
    
    <h4>Images of Text</h4>
    
@@ -31,4 +31,4 @@ <h4>Images of Text</h4>
    
    <p class="note">Logotypes (text that is part of a logo or brand name) are considered essential.</p>
    
-</section>
\ No newline at end of file
+</section>
diff --git a/guidelines/sc/20/info-and-relationships.html b/guidelines/sc/20/info-and-relationships.html
index a3effbb42f..30159f28e1 100644
--- a/guidelines/sc/20/info-and-relationships.html
+++ b/guidelines/sc/20/info-and-relationships.html
@@ -1,4 +1,4 @@
-<section class="sc">
+<section id="info-and-relationships" class="sc">
    
    <h4>Info and Relationships</h4>
    
@@ -7,4 +7,4 @@ <h4>Info and Relationships</h4>
    <p>Information, <a>structure</a>, and <a>relationships</a> conveyed through <a>presentation</a> can be <a>programmatically determined</a> or are available in text.
    </p>
    
-</section>
\ No newline at end of file
+</section>
diff --git a/guidelines/sc/20/interruptions.html b/guidelines/sc/20/interruptions.html
index 26efc63e40..643cfc8aba 100644
--- a/guidelines/sc/20/interruptions.html
+++ b/guidelines/sc/20/interruptions.html
@@ -1,4 +1,4 @@
-<section class="sc">
+<section id="interruptions" class="sc">
    
    <h4>Interruptions</h4>
    
@@ -8,4 +8,4 @@ <h4>Interruptions</h4>
       an <a>emergency</a>.
    </p>
    
-</section>
\ No newline at end of file
+</section>
diff --git a/guidelines/sc/20/keyboard-no-exception.html b/guidelines/sc/20/keyboard-no-exception.html
index 329925c44a..0a9b50e934 100644
--- a/guidelines/sc/20/keyboard-no-exception.html
+++ b/guidelines/sc/20/keyboard-no-exception.html
@@ -1,4 +1,4 @@
-<section class="sc">
+<section id="keyboard-no-exception" class="sc">
    
    <h4>Keyboard (No Exception)</h4>
    
@@ -7,4 +7,4 @@ <h4>Keyboard (No Exception)</h4>
    <p>All <a>functionality</a> of the content is operable through a <a>keyboard interface</a> without requiring specific timings for individual keystrokes.
    </p>
    
-</section>
\ No newline at end of file
+</section>
diff --git a/guidelines/sc/20/keyboard.html b/guidelines/sc/20/keyboard.html
index 6a25f30c6e..e8551282e7 100644
--- a/guidelines/sc/20/keyboard.html
+++ b/guidelines/sc/20/keyboard.html
@@ -1,4 +1,4 @@
-<section class="sc">
+<section id="keyboard" class="sc">
    
    <h4>Keyboard</h4>
    
@@ -18,4 +18,4 @@ <h4>Keyboard</h4>
       methods in addition to keyboard operation.
    </p>
    
-</section>
\ No newline at end of file
+</section>
diff --git a/guidelines/sc/20/labels-or-instructions.html b/guidelines/sc/20/labels-or-instructions.html
index 0390b419c2..858bad6b7c 100644
--- a/guidelines/sc/20/labels-or-instructions.html
+++ b/guidelines/sc/20/labels-or-instructions.html
@@ -1,4 +1,4 @@
-<section class="sc">
+<section id="labels-or-instructions" class="sc">
    
    <h4>Labels or Instructions</h4>
    
@@ -7,4 +7,4 @@ <h4>Labels or Instructions</h4>
    <p><a>Labels</a> or instructions are provided when content requires user input.
    </p>
    
-</section>
\ No newline at end of file
+</section>
diff --git a/guidelines/sc/20/language-of-page.html b/guidelines/sc/20/language-of-page.html
index 0814f0cad2..c921129756 100644
--- a/guidelines/sc/20/language-of-page.html
+++ b/guidelines/sc/20/language-of-page.html
@@ -1,4 +1,4 @@
-<section class="sc">
+<section id="language-of-page" class="sc">
    
    <h4>Language of Page</h4>
    
@@ -7,4 +7,4 @@ <h4>Language of Page</h4>
    <p>The default <a>human language</a> of each <a>Web page</a> can be <a>programmatically determined</a>.
    </p>
    
-</section>
\ No newline at end of file
+</section>
diff --git a/guidelines/sc/20/language-of-parts.html b/guidelines/sc/20/language-of-parts.html
index d3547dd808..52425fc1cf 100644
--- a/guidelines/sc/20/language-of-parts.html
+++ b/guidelines/sc/20/language-of-parts.html
@@ -1,4 +1,4 @@
-<section class="sc">
+<section id="language-of-parts" class="sc">
    
    <h4>Language of Parts</h4>
    
@@ -9,4 +9,4 @@ <h4>Language of Parts</h4>
       text.
    </p>
    
-</section>
\ No newline at end of file
+</section>
diff --git a/guidelines/sc/20/link-purpose-in-context.html b/guidelines/sc/20/link-purpose-in-context.html
index 7e1bb6a9ef..5e2f1b3bc6 100644
--- a/guidelines/sc/20/link-purpose-in-context.html
+++ b/guidelines/sc/20/link-purpose-in-context.html
@@ -1,4 +1,4 @@
-<section class="sc">
+<section id="link-purpose-in-context" class="sc">
    
    <h4>Link Purpose (In Context)</h4>
    
@@ -8,4 +8,4 @@ <h4>Link Purpose (In Context)</h4>
       <a>programmatically determined link context</a>, except where the purpose of the link would be <a>ambiguous to users in general</a>.
    </p>
    
-</section>
\ No newline at end of file
+</section>
diff --git a/guidelines/sc/20/link-purpose-link-only.html b/guidelines/sc/20/link-purpose-link-only.html
index a88dcbd75b..e14105120f 100644
--- a/guidelines/sc/20/link-purpose-link-only.html
+++ b/guidelines/sc/20/link-purpose-link-only.html
@@ -1,4 +1,4 @@
-<section class="sc">
+<section id="link-purpose-link-only" class="sc">
    
    <h4>Link Purpose (Link Only)</h4>
    
@@ -8,4 +8,4 @@ <h4>Link Purpose (Link Only)</h4>
       except where the purpose of the link would be <a>ambiguous to users in general</a>.
    </p>
    
-</section>
\ No newline at end of file
+</section>
diff --git a/guidelines/sc/20/location.html b/guidelines/sc/20/location.html
index c1dbe431a2..c7cb164b4f 100644
--- a/guidelines/sc/20/location.html
+++ b/guidelines/sc/20/location.html
@@ -1,4 +1,4 @@
-<section class="sc">
+<section id="location" class="sc">
    
    <h4>Location</h4>
    
@@ -7,4 +7,4 @@ <h4>Location</h4>
    <p>Information about the user's location within a <a>set of Web pages</a> is available.
    </p>
    
-</section>
\ No newline at end of file
+</section>
diff --git a/guidelines/sc/20/low-or-no-background-audio.html b/guidelines/sc/20/low-or-no-background-audio.html
index 82e25e9c14..1ff644ff39 100644
--- a/guidelines/sc/20/low-or-no-background-audio.html
+++ b/guidelines/sc/20/low-or-no-background-audio.html
@@ -1,4 +1,4 @@
-<section class="sc">
+<section id="low-or-no-background-audio" class="sc">
    
    <h4>Low or No Background Audio</h4>
    
@@ -44,4 +44,4 @@ <h4>Low or No Background Audio</h4>
       
    </dl>
    
-</section>
\ No newline at end of file
+</section>
diff --git a/guidelines/sc/20/meaningful-sequence.html b/guidelines/sc/20/meaningful-sequence.html
index 360daf22c1..b7e883529e 100644
--- a/guidelines/sc/20/meaningful-sequence.html
+++ b/guidelines/sc/20/meaningful-sequence.html
@@ -1,4 +1,4 @@
-<section class="sc">
+<section id="meaningful-sequence" class="sc">
    
    <h4>Meaningful Sequence</h4>
    
@@ -7,4 +7,4 @@ <h4>Meaningful Sequence</h4>
    <p>When the sequence in which content is presented affects its meaning, a <a>correct reading sequence</a> can be <a>programmatically determined</a>.
    </p>
    
-</section>
\ No newline at end of file
+</section>
diff --git a/guidelines/sc/20/media-alternative-prerecorded.html b/guidelines/sc/20/media-alternative-prerecorded.html
index 14d48af444..70776c8793 100644
--- a/guidelines/sc/20/media-alternative-prerecorded.html
+++ b/guidelines/sc/20/media-alternative-prerecorded.html
@@ -1,4 +1,4 @@
-<section class="sc">
+<section id="media-alternative-prerecorded" class="sc">
    
    <h4>Media Alternative (Prerecorded)</h4>
    
@@ -8,4 +8,4 @@ <h4>Media Alternative (Prerecorded)</h4>
       <a>synchronized media</a> and for all prerecorded <a>video-only</a> media.
    </p>
    
-</section>
\ No newline at end of file
+</section>
diff --git a/guidelines/sc/20/multiple-ways.html b/guidelines/sc/20/multiple-ways.html
index 4d04968bf1..0b66078a99 100644
--- a/guidelines/sc/20/multiple-ways.html
+++ b/guidelines/sc/20/multiple-ways.html
@@ -1,4 +1,4 @@
-<section class="sc">
+<section id="multiple-ways" class="sc">
    
    <h4>Multiple Ways</h4>
    
@@ -7,4 +7,4 @@ <h4>Multiple Ways</h4>
    <p>More than one way is available to locate a <a>Web page</a> within a <a>set of Web pages</a> except where the Web Page is the result of, or a step in, a <a>process</a>.
    </p>
    
-</section>
\ No newline at end of file
+</section>
diff --git a/guidelines/sc/20/name-role-value.html b/guidelines/sc/20/name-role-value.html
index 6b33b878b0..b3ce49a363 100644
--- a/guidelines/sc/20/name-role-value.html
+++ b/guidelines/sc/20/name-role-value.html
@@ -1,4 +1,4 @@
-<section class="sc">
+<section id="name-role-value" class="sc">
    
    <h4>Name, Role, Value</h4>
    
@@ -13,4 +13,4 @@ <h4>Name, Role, Value</h4>
       criterion when used according to specification.
    </p>
    
-</section>
\ No newline at end of file
+</section>
diff --git a/guidelines/sc/20/no-keyboard-trap.html b/guidelines/sc/20/no-keyboard-trap.html
index 18a44d412d..89d917165d 100644
--- a/guidelines/sc/20/no-keyboard-trap.html
+++ b/guidelines/sc/20/no-keyboard-trap.html
@@ -1,4 +1,4 @@
-<section class="sc">
+<section id="no-keyboard-trap" class="sc">
    
    <h4>No Keyboard Trap</h4>
    
@@ -14,4 +14,4 @@ <h4>No Keyboard Trap</h4>
       meet other success criteria or not) must meet this success criterion. See <a href="#cc5">Conformance Requirement 5: Non-Interference</a>.
    </p>
    
-</section>
\ No newline at end of file
+</section>
diff --git a/guidelines/sc/20/no-timing.html b/guidelines/sc/20/no-timing.html
index d4c9a10d26..60cd26bcbe 100644
--- a/guidelines/sc/20/no-timing.html
+++ b/guidelines/sc/20/no-timing.html
@@ -1,4 +1,4 @@
-<section class="sc">
+<section id="no-timing" class="sc">
    
    <h4>No Timing</h4>
    
@@ -8,4 +8,4 @@ <h4>No Timing</h4>
       <a>synchronized media</a> and <a>real-time events</a>.
    </p>
    
-</section>
\ No newline at end of file
+</section>
diff --git a/guidelines/sc/20/non-text-content.html b/guidelines/sc/20/non-text-content.html
index d1784e6606..bc59554336 100644
--- a/guidelines/sc/20/non-text-content.html
+++ b/guidelines/sc/20/non-text-content.html
@@ -1,4 +1,4 @@
-<section class="sc">
+<section id="non-text-content" class="sc">
    
    <h4>Non-text Content</h4>
    
@@ -73,4 +73,4 @@ <h4>Non-text Content</h4>
       
    </dl>
    
-</section>
\ No newline at end of file
+</section>
diff --git a/guidelines/sc/20/on-focus.html b/guidelines/sc/20/on-focus.html
index 5a0ef0e854..9dee57a1dd 100644
--- a/guidelines/sc/20/on-focus.html
+++ b/guidelines/sc/20/on-focus.html
@@ -1,4 +1,4 @@
-<section class="sc">
+<section id="on-focus" class="sc">
    
    <h4>On Focus</h4>
    
@@ -7,4 +7,4 @@ <h4>On Focus</h4>
    <p>When any <a>user interface component</a> receives focus, it does not initiate a <a>change of context</a>.
    </p>
    
-</section>
\ No newline at end of file
+</section>
diff --git a/guidelines/sc/20/on-input.html b/guidelines/sc/20/on-input.html
index 71636a5660..598b7a208b 100644
--- a/guidelines/sc/20/on-input.html
+++ b/guidelines/sc/20/on-input.html
@@ -1,4 +1,4 @@
-<section class="sc">
+<section id="on-input" class="sc">
    
    <h4>On Input</h4>
    
@@ -7,4 +7,4 @@ <h4>On Input</h4>
    <p>Changing the setting of any <a>user interface component</a> does not automatically cause a <a>change of context</a> unless the user has been advised of the behavior before using the component.
    </p>
    
-</section>
\ No newline at end of file
+</section>
diff --git a/guidelines/sc/20/page-titled.html b/guidelines/sc/20/page-titled.html
index 2ea135f000..7acb97e16d 100644
--- a/guidelines/sc/20/page-titled.html
+++ b/guidelines/sc/20/page-titled.html
@@ -1,4 +1,4 @@
-<section class="sc">
+<section id="page-titled" class="sc">
    
    <h4>Page Titled</h4>
    
@@ -7,4 +7,4 @@ <h4>Page Titled</h4>
    <p><a>Web pages</a> have titles that describe topic or purpose.
    </p>
    
-</section>
\ No newline at end of file
+</section>
diff --git a/guidelines/sc/20/parsing.html b/guidelines/sc/20/parsing.html
index dc5b0dce40..1eeb7d4b56 100644
--- a/guidelines/sc/20/parsing.html
+++ b/guidelines/sc/20/parsing.html
@@ -1,18 +1,7 @@
-<section class="sc">
+<section id="parsing" class="sc">
    
-   <h4>Parsing</h4>
+   <h4>Parsing (Obsolete and removed)</h4>
+
+   <p class="note">This criterion was originally adopted to address problems that assistive technology had directly parsing HTML. Assistive technology no longer has any need to directly parse HTML. Consequently, these problems either no longer exist or are addressed by other criteria. This criterion no longer has utility and is removed.</p>
    
-   <p class="conformance-level">A</p>
-   
-   <p>In content implemented using markup languages, elements have complete start and end
-      tags, elements are nested according to their specifications, elements do not contain
-      duplicate attributes, and any IDs are unique, except where the specifications allow
-      these features.
-   </p>
-   
-   <p class="note">Start and end tags that are missing a critical character in their formation, such
-      as a closing angle bracket or a mismatched attribute value quotation mark are not
-      complete.
-   </p>
-   
-</section>
\ No newline at end of file
+</section>
diff --git a/guidelines/sc/20/pause-stop-hide.html b/guidelines/sc/20/pause-stop-hide.html
index 09c6df18e0..ab71a6bf3b 100644
--- a/guidelines/sc/20/pause-stop-hide.html
+++ b/guidelines/sc/20/pause-stop-hide.html
@@ -1,4 +1,4 @@
-<section class="sc">
+<section id="pause-stop-hide" class="sc">
    
    <h4>Pause, Stop, Hide</h4>
    
@@ -54,4 +54,4 @@ <h4>Pause, Stop, Hide</h4>
       progress could confuse users or cause them to think that content was frozen or broken.
    </p>
    
-</section>
\ No newline at end of file
+</section>
diff --git a/guidelines/sc/20/pronunciation.html b/guidelines/sc/20/pronunciation.html
index a8f3276738..b899204a34 100644
--- a/guidelines/sc/20/pronunciation.html
+++ b/guidelines/sc/20/pronunciation.html
@@ -1,4 +1,4 @@
-<section class="sc">
+<section id="pronunciation" class="sc">
    
    <h4>Pronunciation</h4>
    
@@ -8,4 +8,4 @@ <h4>Pronunciation</h4>
       words, in context, is ambiguous without knowing the pronunciation.
    </p>
    
-</section>
\ No newline at end of file
+</section>
diff --git a/guidelines/sc/20/re-authenticating.html b/guidelines/sc/20/re-authenticating.html
index c51422ca81..0a1d6d74f2 100644
--- a/guidelines/sc/20/re-authenticating.html
+++ b/guidelines/sc/20/re-authenticating.html
@@ -1,4 +1,4 @@
-<section class="sc">
+<section id="re-authenticating" class="sc">
    
    <h4>Re-authenticating</h4>
    
@@ -8,4 +8,4 @@ <h4>Re-authenticating</h4>
       loss of data after re-authenticating.
    </p>
    
-</section>
\ No newline at end of file
+</section>
diff --git a/guidelines/sc/20/reading-level.html b/guidelines/sc/20/reading-level.html
index 49262cc9ac..e3db6ab59e 100644
--- a/guidelines/sc/20/reading-level.html
+++ b/guidelines/sc/20/reading-level.html
@@ -1,4 +1,4 @@
-<section class="sc">
+<section id="reading-level" class="sc">
    
    <h4>Reading Level</h4>
    
@@ -8,4 +8,4 @@ <h4>Reading Level</h4>
       secondary education level, is available.
    </p>
    
-</section>
\ No newline at end of file
+</section>
diff --git a/guidelines/sc/20/resize-text.html b/guidelines/sc/20/resize-text.html
index c8c28c9b89..eaa1d81926 100644
--- a/guidelines/sc/20/resize-text.html
+++ b/guidelines/sc/20/resize-text.html
@@ -1,10 +1,10 @@
-<section class="sc">
+<section id="resize-text" class="sc">
    
-   <h4>Resize text</h4>
+   <h4>Resize Text</h4>
    
    <p class="conformance-level">AA</p>
    
    <p>Except for <a>captions</a> and <a>images of text</a>, <a>text</a> can be resized without <a>assistive technology</a> up to 200 percent without loss of content or functionality.
    </p>
    
-</section>
\ No newline at end of file
+</section>
diff --git a/guidelines/sc/20/section-headings.html b/guidelines/sc/20/section-headings.html
index f26a23b64e..82a672677c 100644
--- a/guidelines/sc/20/section-headings.html
+++ b/guidelines/sc/20/section-headings.html
@@ -1,4 +1,4 @@
-<section class="sc">
+<section id="section-headings" class="sc">
    
    <h4>Section Headings</h4>
    
@@ -11,7 +11,7 @@ <h4>Section Headings</h4>
       heading to different types of content.
    </p>
    
-   <p class="note">This success criterion covers sections within writing, not <a>user interface components</a>. User Interface components are covered under <a href="#name-role-value">Success Criterion 4.1.2</a>.
+   <p class="note">This success criterion covers sections within writing, not <a>user interface components</a>. User interface components are covered under <a href="#name-role-value">Success Criterion 4.1.2</a>.
    </p>
    
-</section>
\ No newline at end of file
+</section>
diff --git a/guidelines/sc/20/sensory-characteristics.html b/guidelines/sc/20/sensory-characteristics.html
index b4f6706841..a6915898fc 100644
--- a/guidelines/sc/20/sensory-characteristics.html
+++ b/guidelines/sc/20/sensory-characteristics.html
@@ -1,4 +1,4 @@
-<section class="sc">
+<section id="sensory-characteristics" class="sc">
    
    <h4>Sensory Characteristics</h4>
    
diff --git a/guidelines/sc/20/sign-language-prerecorded.html b/guidelines/sc/20/sign-language-prerecorded.html
index c7a88c3a8e..0090e37167 100644
--- a/guidelines/sc/20/sign-language-prerecorded.html
+++ b/guidelines/sc/20/sign-language-prerecorded.html
@@ -1,4 +1,4 @@
-<section class="sc">
+<section id="sign-language-prerecorded" class="sc">
    
    <h4>Sign Language (Prerecorded)</h4>
    
@@ -8,4 +8,4 @@ <h4>Sign Language (Prerecorded)</h4>
       <a>audio</a> content in <a>synchronized media</a>.
    </p>
    
-</section>
\ No newline at end of file
+</section>
diff --git a/guidelines/sc/20/three-flashes-or-below-threshold.html b/guidelines/sc/20/three-flashes-or-below-threshold.html
index 033f602829..13b874c11e 100644
--- a/guidelines/sc/20/three-flashes-or-below-threshold.html
+++ b/guidelines/sc/20/three-flashes-or-below-threshold.html
@@ -1,4 +1,4 @@
-<section class="sc">
+<section id="three-flashes-or-below-threshold" class="sc">
    
    <h4>Three Flashes or Below Threshold</h4>
    
@@ -13,4 +13,4 @@ <h4>Three Flashes or Below Threshold</h4>
       meet other success criteria or not) must meet this success criterion. See <a href="#cc5">Conformance Requirement 5: Non-Interference</a>.
    </p>
    
-</section>
\ No newline at end of file
+</section>
diff --git a/guidelines/sc/20/three-flashes.html b/guidelines/sc/20/three-flashes.html
index 9d986e6e1c..1221c94199 100644
--- a/guidelines/sc/20/three-flashes.html
+++ b/guidelines/sc/20/three-flashes.html
@@ -1,4 +1,4 @@
-<section class="sc">
+<section id="three-flashes" class="sc">
    
    <h4>Three Flashes</h4>
    
@@ -7,4 +7,4 @@ <h4>Three Flashes</h4>
    <p><a>Web pages</a> do not contain anything that <a>flashes</a> more than three times in any one second period.
    </p>
    
-</section>
\ No newline at end of file
+</section>
diff --git a/guidelines/sc/20/timing-adjustable.html b/guidelines/sc/20/timing-adjustable.html
index 5e23ac9aaa..d058e6111f 100644
--- a/guidelines/sc/20/timing-adjustable.html
+++ b/guidelines/sc/20/timing-adjustable.html
@@ -1,4 +1,4 @@
-<section class="sc">
+<section id="timing-adjustable" class="sc">
    
    <h4>Timing Adjustable</h4>
    
@@ -71,4 +71,4 @@ <h4>Timing Adjustable</h4>
       should be considered in conjunction with <a href="#on-focus">Success Criterion 3.2.1</a>, which puts limits on changes of content or context as a result of user action.
    </p>
    
-</section>
\ No newline at end of file
+</section>
diff --git a/guidelines/sc/20/unusual-words.html b/guidelines/sc/20/unusual-words.html
index 594ef1efdd..20ee702f54 100644
--- a/guidelines/sc/20/unusual-words.html
+++ b/guidelines/sc/20/unusual-words.html
@@ -1,4 +1,4 @@
-<section class="sc">
+<section id="unusual-words" class="sc">
    
    <h4>Unusual Words</h4>
    
@@ -7,4 +7,4 @@ <h4>Unusual Words</h4>
    <p>A <a>mechanism</a> is available for identifying specific definitions of words or phrases <a>used in an unusual or restricted way</a>, including <a>idioms</a> and <a>jargon</a>.
    </p>
    
-</section>
\ No newline at end of file
+</section>
diff --git a/guidelines/sc/20/use-of-color.html b/guidelines/sc/20/use-of-color.html
index d2a999867b..9fc019b6dd 100644
--- a/guidelines/sc/20/use-of-color.html
+++ b/guidelines/sc/20/use-of-color.html
@@ -1,4 +1,4 @@
-<section class="sc">
+<section id="use-of-color" class="sc">
    
    <h4>Use of Color</h4>
    
diff --git a/guidelines/sc/20/visual-presentation.html b/guidelines/sc/20/visual-presentation.html
index 628350bb97..6ecf932f34 100644
--- a/guidelines/sc/20/visual-presentation.html
+++ b/guidelines/sc/20/visual-presentation.html
@@ -1,5 +1,5 @@
-<section class="sc">
-   
+<section id="visual-presentation" class="sc">
+
    <h4>Visual Presentation</h4>
    
    <p class="conformance-level">AAA</p>
@@ -13,5 +13,9 @@ <h4>Visual Presentation</h4>
      <li>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.</li>   
      <li>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 <a>on a full-screen window</a>.</li>   
   </ul>
+
+<p class="note">Content is not required to use these values. The requirement is that a mechanism is available for users to change these presentation aspects. The mechanism can be provided by the browser or other user agent. Content is not required to provide the mechanism.</p>
+
+<p class="note">Writing systems for some languages use different presentation aspects to improve readability and legibility. If a presentation aspect in this success criterion is not used in a writing system, content in that writing system does not need to use that presentation setting and can conform without it. Authors are encouraged to follow guidance for improving readability and legibility of text in their writing system.</p>
   
 </section>
diff --git a/guidelines/sc/21/animation-from-interactions.html b/guidelines/sc/21/animation-from-interactions.html
index a72948d02b..4bf39030d6 100644
--- a/guidelines/sc/21/animation-from-interactions.html
+++ b/guidelines/sc/21/animation-from-interactions.html
@@ -1,4 +1,4 @@
-<section class="sc">
+<section id="animation-from-interactions" class="sc">
    					
    <h4>Animation from Interactions</h4>
    					
diff --git a/guidelines/sc/21/change-of-content.html b/guidelines/sc/21/change-of-content.html
index bd4a50d0aa..83b50fd6e3 100644
--- a/guidelines/sc/21/change-of-content.html
+++ b/guidelines/sc/21/change-of-content.html
@@ -1,4 +1,4 @@
-<section class="sc">
+<section id="change-of-content" class="sc">
    					
    <h4>Change of Content</h4>
    					
diff --git a/guidelines/sc/21/character-key-shortcuts.html b/guidelines/sc/21/character-key-shortcuts.html
index a68811fdd6..abc0716b47 100644
--- a/guidelines/sc/21/character-key-shortcuts.html
+++ b/guidelines/sc/21/character-key-shortcuts.html
@@ -1,4 +1,4 @@
-<section class="sc">
+<section id="character-key-shortcuts" class="sc">
    					
    <h4>Character Key Shortcuts</h4>
    					
diff --git a/guidelines/sc/21/concurrent-input-mechanisms.html b/guidelines/sc/21/concurrent-input-mechanisms.html
index 85d9050d5e..dbb5891a80 100644
--- a/guidelines/sc/21/concurrent-input-mechanisms.html
+++ b/guidelines/sc/21/concurrent-input-mechanisms.html
@@ -1,4 +1,4 @@
-<section class="sc">
+<section id="concurrent-input-mechanisms" class="sc">
    <h4>Concurrent Input Mechanisms</h4>
    <p class="conformance-level">AAA</p>
   <p>Web content does not restrict use of input modalities available on a platform except where the restriction is <a>essential</a>, required to ensure the security of the content, or required to respect user settings.</p>   					
diff --git a/guidelines/sc/21/content-on-hover-or-focus.html b/guidelines/sc/21/content-on-hover-or-focus.html
index 1bbad2beee..3ad861e109 100644
--- a/guidelines/sc/21/content-on-hover-or-focus.html
+++ b/guidelines/sc/21/content-on-hover-or-focus.html
@@ -1,5 +1,5 @@
-    <section class="sc">
-   					
+    <section id="content-on-hover-or-focus" class="sc">
+
    <h4>Content on Hover or Focus</h4>
    					
    <p class="conformance-level">AA</p>
@@ -21,7 +21,7 @@ <h4>Content on Hover or Focus</h4>
     	
     	<p>Exception: The visual presentation of the additional content is controlled by the user agent and is not modified by the author.</p>
 
-    	<p class="note">Examples of additional content controlled by the user agent include browser tooltips created through use of the HTML <a href="https://www.w3.org/TR/html/dom.html#the-title-attribute"><code>title</code> attribute</a>.</p>
+    	<p class="note">Examples of additional content controlled by the user agent include browser tooltips created through use of the HTML <a href="https://html.spec.whatwg.org/multipage/dom.html#the-title-attribute"><code>title</code> attribute</a> [[HTML]].</p>
      <p class="note">Custom tooltips, sub-menus, and other nonmodal popups that display on hover and focus are examples of additional content covered by this criterion.</p>
-
+     <p class="note">This criterion applies to content that appears in addition to the triggering component itself. Since hidden components that are made visible on keyboard focus (such as links used to skip to another part of a page) do not present additional content they are not covered by this criterion.</p>
   </section>
diff --git a/guidelines/sc/21/identify-input-purpose.html b/guidelines/sc/21/identify-input-purpose.html
index bd3e7b7992..7eb56ad302 100644
--- a/guidelines/sc/21/identify-input-purpose.html
+++ b/guidelines/sc/21/identify-input-purpose.html
@@ -1,4 +1,4 @@
-<section class="sc">
+<section id="identify-input-purpose" class="sc">
 	
 	<h4>Identify Input Purpose</h4>
 	
@@ -7,7 +7,7 @@ <h4>Identify Input Purpose</h4>
 	<p>The purpose of each input field collecting information about the user can be <a>programmatically determined</a> when:</p>
   
   <ul>
-    <li>The input field serves a purpose identified in the <a href="#input-purposes">Input Purposes for User Interface Components section</a>; and</li>
+    <li>The input field serves a purpose identified in the <a href="#input-purposes">Input Purposes for user interface components section</a>; and</li>
     <li>The content is implemented using technologies with support for identifying the expected meaning for form input data.</li>
   </ul>
   
diff --git a/guidelines/sc/21/identify-purpose.html b/guidelines/sc/21/identify-purpose.html
index 3ef13fb893..59bbf545ee 100644
--- a/guidelines/sc/21/identify-purpose.html
+++ b/guidelines/sc/21/identify-purpose.html
@@ -1,8 +1,8 @@
-<section class="sc">
+<section id="identify-purpose" class="sc">
    					
    <h4>Identify Purpose</h4>
    					
    <p class="conformance-level">AAA</p>
    					
-  <p>In content implemented using markup languages, the purpose of <a>User Interface Components</a>, icons, and <a>regions</a> can be <a>programmatically determined</a>.</p>
+  <p>In content implemented using markup languages, the purpose of <a>user interface components</a>, icons, and <a>regions</a> can be <a>programmatically determined</a>.</p>
 </section>
diff --git a/guidelines/sc/21/label-in-name.html b/guidelines/sc/21/label-in-name.html
index 4599730f54..ff02d8ce79 100644
--- a/guidelines/sc/21/label-in-name.html
+++ b/guidelines/sc/21/label-in-name.html
@@ -1,4 +1,4 @@
-<section class="sc">
+<section id="label-in-name" class="sc">
    <h4>Label in Name</h4>
    <p class="conformance-level">A</p>
 	
diff --git a/guidelines/sc/21/motion-actuation.html b/guidelines/sc/21/motion-actuation.html
index b05e7afe54..dd80e956f7 100644
--- a/guidelines/sc/21/motion-actuation.html
+++ b/guidelines/sc/21/motion-actuation.html
@@ -1,4 +1,4 @@
-<section class="sc">
+<section id="motion-actuation" class="sc">
    					
    <h4>Motion Actuation</h4>
   
diff --git a/guidelines/sc/21/non-text-contrast.html b/guidelines/sc/21/non-text-contrast.html
index 40b9c040d3..777c521d4e 100644
--- a/guidelines/sc/21/non-text-contrast.html
+++ b/guidelines/sc/21/non-text-contrast.html
@@ -1,4 +1,4 @@
-<section class="sc">
+<section id="non-text-contrast" class="sc">
    					
    <h4>Non-text Contrast</h4>
    					
diff --git a/guidelines/sc/21/orientation.html b/guidelines/sc/21/orientation.html
index 2ec18ab0bc..ae0edea914 100644
--- a/guidelines/sc/21/orientation.html
+++ b/guidelines/sc/21/orientation.html
@@ -1,4 +1,4 @@
-<section class="sc">
+<section id="orientation" class="sc">
    					
    <h4>Orientation</h4>
    					
diff --git a/guidelines/sc/21/pointer-cancellation.html b/guidelines/sc/21/pointer-cancellation.html
index e6b9ea82fa..c04412851a 100644
--- a/guidelines/sc/21/pointer-cancellation.html
+++ b/guidelines/sc/21/pointer-cancellation.html
@@ -1,4 +1,4 @@
-<section class="sc">
+<section id="pointer-cancellation" class="sc">
    					
    <h4>Pointer Cancellation</h4>
    					
@@ -23,6 +23,6 @@ <h4>Pointer Cancellation</h4>
    </dl>
    <p class="note">Functions that emulate a keyboard or numeric keypad key press are considered essential.</p>
    					
-  <p class="note">This requirement applies to web content that interprets pointer actions (i.e. this does not apply to actions that are required to operate the user agent or assistive technology).</p>
+  <p class="note">This requirement applies to web content that interprets pointer actions (i.e., this does not apply to actions that are required to operate the user agent or assistive technology).</p>
 	
 </section>
diff --git a/guidelines/sc/21/pointer-gestures.html b/guidelines/sc/21/pointer-gestures.html
index 9a5a5df25e..69749992de 100644
--- a/guidelines/sc/21/pointer-gestures.html
+++ b/guidelines/sc/21/pointer-gestures.html
@@ -1,4 +1,4 @@
-<section class="sc">
+<section id="pointer-gestures" class="sc">
    					
    <h4>Pointer Gestures</h4>
    					
@@ -6,6 +6,6 @@ <h4>Pointer Gestures</h4>
    					
    <p>All <a>functionality</a> that uses multipoint or path-based gestures for operation can be operated with a <a>single pointer</a> without a path-based gesture, unless a multipoint or path-based gesture is <a>essential</a>.</p>
    					
-   <p class="note">This requirement applies to web content that interprets pointer actions (i.e. this does not apply to actions that are required to operate the user agent or assistive technology).</p>
+   <p class="note">This requirement applies to web content that interprets pointer actions (i.e., this does not apply to actions that are required to operate the user agent or assistive technology).</p>
 	
 </section>
diff --git a/guidelines/sc/21/reflow.html b/guidelines/sc/21/reflow.html
index 496525a0d5..8fbc922719 100644
--- a/guidelines/sc/21/reflow.html
+++ b/guidelines/sc/21/reflow.html
@@ -1,4 +1,4 @@
-<section class="sc">
+<section id="reflow" class="sc">
    					
    <h4>Reflow</h4>
    					
diff --git a/guidelines/sc/21/status-messages.html b/guidelines/sc/21/status-messages.html
index ee66560099..592942f784 100644
--- a/guidelines/sc/21/status-messages.html
+++ b/guidelines/sc/21/status-messages.html
@@ -1,4 +1,4 @@
-<section class="sc">
+<section id="status-messages" class="sc">
    					
    <h4>Status Messages</h4>
    					
diff --git a/guidelines/sc/21/target-size.html b/guidelines/sc/21/target-size-enhanced.html
similarity index 89%
rename from guidelines/sc/21/target-size.html
rename to guidelines/sc/21/target-size-enhanced.html
index 583cc4bf18..c83046b2a7 100644
--- a/guidelines/sc/21/target-size.html
+++ b/guidelines/sc/21/target-size-enhanced.html
@@ -1,6 +1,6 @@
-<section class="sc">
+<section id="target-size-enhanced" class="sc">
    					
-   <h4>Target Size</h4>
+   <h4>Target Size (Enhanced)</h4>
    					
    <p class="conformance-level">AAA</p>
    					
diff --git a/guidelines/sc/21/text-spacing.html b/guidelines/sc/21/text-spacing.html
index a561c15945..7774996f19 100644
--- a/guidelines/sc/21/text-spacing.html
+++ b/guidelines/sc/21/text-spacing.html
@@ -1,4 +1,4 @@
- <section class="sc">
+ <section id="text-spacing" class="sc">
    					
    <h4>Text Spacing</h4>
    					
@@ -14,5 +14,9 @@ <h4>Text Spacing</h4>
    </ul>
  
  <p>Exception: Human languages and scripts that do not make use of one or more of these text style properties in written text can conform using only the properties that exist for that combination of language and script.</p>
+
+ <p class="note">Content is not required to use these text spacing values. The requirement is to ensure that when a user overrides the authored text spacing, content or functionality is not lost.</p>
+
+ <p class="note">Writing systems for some languages use different text spacing settings, such as paragraph start indent. Authors are encouraged to follow locally available guidance for improving readability and legibility of text in their writing system.</p>
  
 </section>
diff --git a/guidelines/sc/21/timeouts.html b/guidelines/sc/21/timeouts.html
index 85b40ab206..8c54be6219 100644
--- a/guidelines/sc/21/timeouts.html
+++ b/guidelines/sc/21/timeouts.html
@@ -1,4 +1,4 @@
-<section class="sc">
+<section id="timeouts" class="sc">
    					
    <h4>Timeouts</h4>
    					
diff --git a/guidelines/sc/22/accessible-authentication-enhanced.html b/guidelines/sc/22/accessible-authentication-enhanced.html
new file mode 100644
index 0000000000..d3e49a1c19
--- /dev/null
+++ b/guidelines/sc/22/accessible-authentication-enhanced.html
@@ -0,0 +1,16 @@
+<section id="accessible-authentication-enhanced" class="sc new">
+   
+    <h4>Accessible Authentication (Enhanced)</h4>
+    
+    <p class="conformance-level">AAA</p>
+	<p class="change">New</p>
+    
+    <p>A <a>cognitive function test</a> (such as remembering a password or solving a puzzle) is not required for any step in an authentication <a>process</a> unless that step provides at least one of the following:</p> 
+    <dl>
+        <dt>Alternative</dt>
+        <dd>Another authentication method that does not rely on a cognitive function test.</dd>
+        <dt>Mechanism</dt>
+        <dd>A <a>mechanism</a> is available to assist the user in completing the cognitive function test.</dd>
+    </dl>
+    
+ </section>
diff --git a/guidelines/sc/22/accessible-authentication-minimum.html b/guidelines/sc/22/accessible-authentication-minimum.html
new file mode 100644
index 0000000000..150b65fef0
--- /dev/null
+++ b/guidelines/sc/22/accessible-authentication-minimum.html
@@ -0,0 +1,28 @@
+<section id="accessible-authentication-minimum" class="sc new">
+   
+    <h4>Accessible Authentication (Minimum)</h4>
+    
+    <p class="conformance-level">AA</p>
+	<p class="change">New</p>
+    
+    <p>A <a>cognitive function test</a> (such as remembering a password or solving a puzzle) is not required for any step in an authentication <a>process</a> unless that step provides at least one of the following:</p> 
+    <dl>
+        <dt>Alternative</dt>
+        <dd>Another authentication method that does not rely on a cognitive function test.</dd>
+        <dt>Mechanism</dt>
+      <dd>A <a>mechanism</a> is available to assist the user in completing the cognitive function test.</dd>
+        <dt>Object Recognition</dt>
+        <dd>The cognitive function test is to recognize objects.</dd>
+        <dt>Personal Content</dt>
+      <dd>The cognitive function test is to identify <a>non-text content</a> the user provided to the Web site.</dd>
+    </dl>
+
+    <p class="note">"Object recognition" and "Personal content" may be represented by images, video, or audio.</p>
+    <div class="note">Examples of mechanisms that satisfy this criterion include:
+        <ol>
+            <li>support for password entry by password managers to reduce memory need, and</li>
+            <li>copy and paste to reduce the cognitive burden of re-typing.</li>
+        </ol>
+    </div>
+    
+ </section>
diff --git a/guidelines/sc/22/accessible-authentication.html b/guidelines/sc/22/accessible-authentication.html
deleted file mode 100644
index 5f53733ad6..0000000000
--- a/guidelines/sc/22/accessible-authentication.html
+++ /dev/null
@@ -1,11 +0,0 @@
-<section class="sc new">
-   
-    <h4>Accessible Authentication</h4>
-    
-    <p class="conformance-level">A</p>
-	<p class="change">New</p>
-    
-    <p>For each step in an authentication process that relies on a <a>cognitive function test</a>, at least one other method is available that does not rely on a cognitive function test.</p>
-
-    
- </section>
\ No newline at end of file
diff --git a/guidelines/sc/22/consistent-help.html b/guidelines/sc/22/consistent-help.html
new file mode 100644
index 0000000000..62c9292b09
--- /dev/null
+++ b/guidelines/sc/22/consistent-help.html
@@ -0,0 +1,21 @@
+<section id="consistent-help" class="sc new">
+   
+    <h4>Consistent Help</h4>
+    
+    <p class="conformance-level">A</p>
+	<p class="change">New</p>
+    
+  <p>If a <a>Web page</a> contains any of the following help <a>mechanisms</a>, and those mechanisms are repeated on multiple Web pages within a <a>set of Web pages</a>, they occur in the same order relative to other page content, unless a change is initiated by the user:</p>
+
+    <ul>
+        <li>Human contact details;</li>
+        <li>Human contact mechanism;</li>
+        <li>Self-help option;</li>
+        <li>A fully automated contact mechanism.</li>
+    </ul>
+
+  <p class="note">Help mechanisms may be provided directly on the page, or may be provided via a direct link to a different page containing the information.</p>
+  <p class="note">For this Success Criterion, "the same order relative to other page content" can be thought of as how the content is ordered when the page is serialized. The visual position of a help mechanism is likely to be consistent across pages for the same page variation (e.g., CSS break-point). The user can initiate a change, such as changing the page's zoom or orientation, which may trigger a different page variation. This criterion is concerned with relative order across pages displayed in the same page variation (e.g., same zoom level and orientation).</p>
+
+ </section>
+ 
diff --git a/guidelines/sc/22/dragging-movements.html b/guidelines/sc/22/dragging-movements.html
new file mode 100644
index 0000000000..0543f9e901
--- /dev/null
+++ b/guidelines/sc/22/dragging-movements.html
@@ -0,0 +1,11 @@
+<section id="dragging-movements" class="sc new">
+   
+    <h4>Dragging Movements</h4>
+    
+    <p class="conformance-level">AA</p>
+	<p class="change">New</p>
+    
+  <p>All <a>functionality</a> that uses a <a>dragging movement</a> for operation can be achieved by a <a>single pointer</a> without dragging, unless dragging is <a>essential</a> or the functionality is determined by the <a>user agent</a> and not modified by the author.</p>
+    <p class="note">This requirement applies to web content that interprets pointer actions (i.e., this does not apply to actions that are required to operate the user agent or assistive technology).</p>
+   
+ </section>
diff --git a/guidelines/sc/22/dragging.html b/guidelines/sc/22/dragging.html
deleted file mode 100644
index 5b5debcdcb..0000000000
--- a/guidelines/sc/22/dragging.html
+++ /dev/null
@@ -1,12 +0,0 @@
-<section class="sc new">
-   
-    <h4>Dragging</h4>
-    
-    <p class="conformance-level">AA</p>
-	<p class="change">New</p>
-    
-    <p>All functionality that uses a <a>dragging movement</a> for operation can be operated by a single pointer without dragging, unless dragging is <a>essential</a>.</p>
-    <p class="note">This requirement applies to web content that interprets pointer actions (i.e. this does not apply to actions that are required to operate the user agent or assistive technology).</p>
-    <p class="ednote">Is there an assistive technology that helps for people with mobility impairments? The group would like feedback on the frontier between AT &amp; author responsibility.</p>
-   
- </section>
diff --git a/guidelines/sc/22/findable-help.html b/guidelines/sc/22/findable-help.html
deleted file mode 100644
index 52acaf7b19..0000000000
--- a/guidelines/sc/22/findable-help.html
+++ /dev/null
@@ -1,21 +0,0 @@
-<section class="sc new">
-   
-    <h4>Findable Help</h4>
-    
-    <p class="conformance-level">A</p>
-	<p class="change">New</p>
-    
-    <p>For <a>single page Web applications</a> or any <a>set of Web pages</a>, if one of the following is available, 
-      then access to at least one option is included in the <a>same relative order</a> on each page:</p>
-
-    <ul>
-        <li>Human contact details;</li>
-        <li>Human contact mechanism;</li>
-        <li>Self-help option;</li>
-        <li>A fully automated contact mechanism.</li>
-    </ul>
-
-  <p class="note">Access to help mechanisms may be provided directly on the page, or may be provided via a direct link to a different page containing the information"</p>
-    
- </section>
- 
diff --git a/guidelines/sc/22/fixed-reference-points.html b/guidelines/sc/22/fixed-reference-points.html
deleted file mode 100644
index 75dca5d3fb..0000000000
--- a/guidelines/sc/22/fixed-reference-points.html
+++ /dev/null
@@ -1,10 +0,0 @@
-<section class="sc new">
-   
-    <h4>Fixed Reference Points</h4>
-    
-    <p class="conformance-level">A</p>
-	<p class="change">New</p>
-    
-    <p>When a <a>web page</a> or <a>set of web pages</a> is an <a>electronic publication</a> with <a>pagebreak locators</a>, a mechanism is available to navigate to each locator and each locator maintains its place in the flow of content, even when the formatting or platform change.</p>
-   
- </section>
diff --git a/guidelines/sc/22/focus-appearance-enhanced.html b/guidelines/sc/22/focus-appearance-enhanced.html
deleted file mode 100644
index ebf2b11ec3..0000000000
--- a/guidelines/sc/22/focus-appearance-enhanced.html
+++ /dev/null
@@ -1,15 +0,0 @@
-<section class="sc new">
-   
-    <h4>Focus Appearance (Enhanced)</h4>
-    
-    <p class="conformance-level">AAA</p>
-	<p class="change">New</p>
-    
-    <p>For the keyboard focus indicator of each User Interface Component, all of the following are true:</p>
-    <ul>
-        <li><strong>Minimum area:</strong> The <a>focus indication area</a> is greater than or equal to a 2 <a>CSS pixel</a> solid border around the control.</li>
-        <li><strong>Change of contrast:</strong> Color changes used to indicate focus have a contrast ratio of at least 4.5:1 with the colors changed from the unfocused control.</li>
-        <li><strong>Not obscured:</strong> No part of the focus indicator is hidden by author-created content.</li>
-    </ul>
-    
- </section>
diff --git a/guidelines/sc/22/focus-appearance-minimum.html b/guidelines/sc/22/focus-appearance-minimum.html
deleted file mode 100644
index d36efd203c..0000000000
--- a/guidelines/sc/22/focus-appearance-minimum.html
+++ /dev/null
@@ -1,19 +0,0 @@
-<section class="sc new">
-   
-    <h4>Focus Appearance (Minimum)</h4>
-    
-    <p class="conformance-level">AA</p>
-	<p class="change">New</p>
-    
-    <p>For the keyboard focus indicator of each User Interface Component, all of the following are true:</p>
-    <ul>
-        <li><strong>Minimum area:</strong> The <a>focus indication area</a> is greater than or equal to a 1 <a>CSS pixel</a> border of the focused control, or has a thickness of at least 8 CSS pixels along the shortest side of the element.</li>
-        <li><strong>Change of contrast:</strong> The color change for the focus indication area has a contrast ratio of at least 3:1 with the colors of the unfocused state.</li>
-        <li><strong>Adjacent contrast:</strong> The focus indication area has a contrast ratio of at least 3:1 against all adjacent colors for the minimum area or greater, or has a thickness of at least 2 CSS pixels.</li>
-        <li><strong>Not fully obscured:</strong> The item with focus is not entirely hidden by author-created content.</li>
-    </ul>
-    <p class="note">A keyboard focus indicator which has a pattern or gradient may have parts that do not meet the 3:1 contrast ratio for the change of contrast, as long as an area equal to the minimum does meet the contrast ratio.</p>
-    <p class="note">If the control has a visible boundary smaller than the hit area, the size measure is taken from the visible boundary.</p>
-    <p class="ednote">The working group is interested in feedback about the minimum area metric, and if there are unusual scenarios where visible indicators are caught by the wording.</p>
-    
- </section>
diff --git a/guidelines/sc/22/focus-appearance.html b/guidelines/sc/22/focus-appearance.html
new file mode 100644
index 0000000000..2fc2d22ab7
--- /dev/null
+++ b/guidelines/sc/22/focus-appearance.html
@@ -0,0 +1,25 @@
+<section id="focus-appearance" class="sc new">
+    <h4>Focus Appearance</h4>
+
+    <p class="conformance-level">AAA</p>
+	<p class="change">New</p>
+
+    <p>When the keyboard <a>focus indicator</a> is visible, an area of the focus indicator meets all the following:</p>
+    <ul>
+        <li>is at least as large as the area of a 2 <a>CSS pixel</a> thick <a>perimeter</a> of the unfocused component or sub-component, and</li>
+        <li>has a contrast ratio of at least 3:1 between the same pixels in the focused and unfocused states.</li>
+    </ul>
+
+    <p>Exceptions:</p>
+    <ul>
+        <li>The focus indicator is determined by the <a>user agent</a> and cannot be adjusted by the author, or</li>
+        <li>The focus indicator and the indicator's background color are not modified by the author.</li>
+    </ul>
+
+    <p class="note">What is perceived as the user interface component or sub-component (to determine the perimeter) depends on its visual <a>presentation</a>. The visual presentation includes the component's visible <a>content</a>, border, and component-specific background. It does not include shadow and glow effects outside the component's content, background, or border.</p>
+
+    <p class="note">Examples of sub-components that may receive a focus indicator are menu items in an opened drop-down menu, or focusable cells in a grid.</p>
+
+    <p class="note">Contrast calculations can be based on colors defined within the <a>technology</a> (such as HTML, CSS, and SVG). Pixels modified by user agent resolution enhancements and anti-aliasing can be ignored.</p>
+
+</section>
diff --git a/guidelines/sc/22/focus-not-obscured-enhanced.html b/guidelines/sc/22/focus-not-obscured-enhanced.html
new file mode 100644
index 0000000000..238ede368a
--- /dev/null
+++ b/guidelines/sc/22/focus-not-obscured-enhanced.html
@@ -0,0 +1,11 @@
+<section id="focus-not-obscured-enhanced" class="sc new">
+   
+    <h4>Focus Not Obscured (Enhanced)</h4>
+    
+    <p class="conformance-level">AAA</p>
+	<p class="change">New</p>
+    
+    <p>When a <a>user interface component</a> receives keyboard focus, no part of the component is hidden by author-created content.</p>
+
+
+ </section>
diff --git a/guidelines/sc/22/focus-not-obscured-minimum.html b/guidelines/sc/22/focus-not-obscured-minimum.html
new file mode 100644
index 0000000000..4d0ef3bce2
--- /dev/null
+++ b/guidelines/sc/22/focus-not-obscured-minimum.html
@@ -0,0 +1,14 @@
+ <section id="focus-not-obscured-minimum" class="sc new">
+   
+    <h4>Focus Not Obscured (Minimum)</h4>
+    
+    <p class="conformance-level">AA</p>
+	<p class="change">New</p>
+    
+    <p>When a <a>user interface component</a> receives keyboard focus, the component is not entirely hidden due to author-created content.</p>
+
+    <p class="note">Where content in a configurable interface can be repositioned by the user, then only the initial positions of user-movable content are considered for testing and conformance of this Success Criterion.</p>
+
+    <p class="note">Content opened by the <em>user</em> may obscure the component receiving focus. If the user can reveal the focused component without advancing the keyboard focus, the component with focus is not considered visually hidden due to author-created content.</p>
+
+ </section>
diff --git a/guidelines/sc/22/focus-visible.html b/guidelines/sc/22/focus-visible.html
deleted file mode 100644
index 4bfce04a33..0000000000
--- a/guidelines/sc/22/focus-visible.html
+++ /dev/null
@@ -1,12 +0,0 @@
-<section class="sc changed">
-   
-    <h4>Focus Visible</h4>
-    
-    <p class="conformance-level">A</p>
-	<p class="change">Changed</p>
-    
-    <p>Any keyboard operable user interface has a mode of operation where the keyboard focus
-       indicator is visible.
-    </p>
-    
- </section>
\ No newline at end of file
diff --git a/guidelines/sc/22/hidden-controls.html b/guidelines/sc/22/hidden-controls.html
deleted file mode 100644
index 271004466f..0000000000
--- a/guidelines/sc/22/hidden-controls.html
+++ /dev/null
@@ -1,11 +0,0 @@
-<section class="sc new">
-   
-    <h4>Hidden Controls</h4>
-    
-    <p class="conformance-level">AA</p>
-	<p class="change">New</p>
-    
-    <p>Controls needed to progress or complete a <a>process</a> are visible at the time they are needed without requiring pointer hover or keyboard focus, 
-	or a mechanism is available to make them persistently visible.</p>
-   
- </section>
diff --git a/guidelines/sc/22/pointer-target-spacing.html b/guidelines/sc/22/pointer-target-spacing.html
deleted file mode 100644
index e243aed518..0000000000
--- a/guidelines/sc/22/pointer-target-spacing.html
+++ /dev/null
@@ -1,19 +0,0 @@
-<section class="sc new">
-   
-    <h4>Pointer Target Spacing</h4>
-    
-    <p class="conformance-level">AA</p>
-	<p class="change">New</p>
-    
-    <p>For each <a>target</a>, there is an area with a width and height of at least 44 CSS pixels that includes it, and no other targets, except when:</p>
-    <ul>
-      <li><strong>Enlarge:</strong> A <a>mechanism</a> is available to change the CSS pixel size of each target, or its spacing, so there is an area with a width and height of at least 44 CSS pixels that includes it, and no other targets;</li>
-        <li><strong>Inline:</strong> The target is in a sentence or block of text;</li>
-        <li><strong>User agent:</strong> The size of the target is controlled by the <a>user agent</a> and is not modified by the author;</li>
-        <li><strong>Essential:</strong> A particular presentation of the target is essential to the information being conveyed.</li>
-    </ul>
-    <p class="note">This criterion has been formulated to increase the hit-area of small targets, but the group would like feedback from providers of touch-screen devices if there is another way of forming the criterion to better complement the tap-heuristics used.</p>
-    <p class="note">Are there issues with internationalization when describing inline links?</p>
-    <p class="note">Are there issues with pop-over content overlapping targets triggering failures?</p>
-    
- </section>
diff --git a/guidelines/sc/22/redundant-entry.html b/guidelines/sc/22/redundant-entry.html
index 5ad0664e0c..282df09fbf 100644
--- a/guidelines/sc/22/redundant-entry.html
+++ b/guidelines/sc/22/redundant-entry.html
@@ -1,17 +1,21 @@
-<section class="sc new">
+<section id="redundant-entry" class="sc new">
    
-    <h4>Redundant entry</h4>
+    <h4>Redundant Entry</h4>
     
     <p class="conformance-level">A</p>
 	<p class="change">New</p>
     
-    <p>For steps in a <a>process</a>, information previously entered by or provided to the user that is required on subsequent steps is either:</p>
+    <p>Information previously entered by or provided to the user that is required to be entered again in the same <a>process</a> is either:</p>
+
     <ul>
         <li>auto-populated, or</li>
         <li>available for the user to select.</li>
     </ul>
-    <p>Exception: When re-entering the information is <a>essential</a>.</p>
-    <p class="note">Security verification, such as repeating a password, is considered essential.</p>
-    <p class="note">Editors' note: Are there issues storing the data so a user can access it in subsequent steps?</p>
-    <p class="note">Editors' note: Are there broader exceptions needed than essential? E.g. for mandated or required information re-entry.</p>
+    <p>Except when:</p> 
+    <ul>
+        <li>re-entering the information is <a>essential</a>,</li>
+        <li>the information is required to ensure the security of the content, or</li>
+        <li>previously entered information is no longer valid.</li>
+    </ul>
+
  </section>
diff --git a/guidelines/sc/22/target-size-minimum.html b/guidelines/sc/22/target-size-minimum.html
new file mode 100644
index 0000000000..81675f3ebe
--- /dev/null
+++ b/guidelines/sc/22/target-size-minimum.html
@@ -0,0 +1,19 @@
+<section id="target-size-minimum" class="sc new">
+   
+    <h4>Target Size (Minimum)</h4>
+    
+    <p class="conformance-level">AA</p>
+	<p class="change">New</p>
+    
+    <p>The size of the <a>target</a> for <a>pointer inputs</a> is at least 24 by 24 <a>CSS pixels</a>, except where:</p>
+    <ul>
+        <li><strong>Spacing:</strong> Undersized targets (those less than 24 by 24 CSS pixels) are positioned so that if a 24 CSS pixel diameter circle is centered on the <a>bounding box</a> of each, the circles do not intersect another target or the circle for another undersized target;</li>
+        <li><strong>Equivalent:</strong> The function can be achieved through a different control on the same page that meets this criterion;</li>
+        <li><strong>Inline:</strong> The target is in a sentence or its size is otherwise constrained by the line-height of non-target text;</li>
+        <li><strong>User agent control:</strong> The size of the target is determined by the <a>user agent</a> and is not modified by the author;</li>
+        <li><strong>Essential:</strong> A particular <a>presentation</a> of the target is <a>essential</a> or is legally required for the information being conveyed.</li>
+    </ul>
+    <p class="note">Targets that allow for values to be selected spatially based on position within the target are considered one target for the purpose of the success criterion. Examples include sliders, color pickers displaying a gradient of colors, or editable areas where you position the cursor.</p>
+    <p class="note">For inline targets the line-height should be interpreted as perpendicular to the flow of text. For example, in a language displayed vertically, the line-height would be horizontal.</p>
+
+</section>	
diff --git a/guidelines/terms/20/abbreviation.html b/guidelines/terms/20/abbreviation.html
index 57126dde89..6b946be718 100644
--- a/guidelines/terms/20/abbreviation.html
+++ b/guidelines/terms/20/abbreviation.html
@@ -1,4 +1,4 @@
-<dt><dfn data-lt="abbreviations">abbreviation</dfn></dt>
+<dt><dfn id="dfn-abbreviations" data-lt="abbreviations">abbreviation</dfn></dt>
 <dd>
    
    <p>shortened form of a word, phrase, or name where the abbreviation has not become part
@@ -17,10 +17,10 @@
          
          <p class="note">Not defined in all languages.</p>
          
-         <p class="example">SNCF is a French initialism that contains the initial letters of the <span lang="fr">Société Nationale des Chemins de Fer</span>, the French national railroad.
-         </p>
+         <aside class="example"><p>SNCF is a French initialism that contains the initial letters of the <span lang="fr">Société Nationale des Chemins de Fer</span>, the French national railroad.
+         </p></aside>
          
-         <p class="example">ESP is an initialism for extrasensory perception.</p>
+         <aside class="example"><p>ESP is an initialism for extrasensory perception.</p></aside>
          
       </li>
       
@@ -30,9 +30,9 @@
             name or phrase) which may be pronounced as a word
          </p>
          
-         <p class="example">NOAA is an acronym made from the initial letters of the National Oceanic and Atmospheric
+         <aside class="example"><p>NOAA is an acronym made from the initial letters of the National Oceanic and Atmospheric
             Administration in the United States.
-         </p>
+         </p></aside>
          
       </li>
       
diff --git a/guidelines/terms/20/accessibility-supported.html b/guidelines/terms/20/accessibility-supported.html
index f33e2f900e..e863db98c9 100644
--- a/guidelines/terms/20/accessibility-supported.html
+++ b/guidelines/terms/20/accessibility-supported.html
@@ -1,4 +1,4 @@
-<dt><dfn data-lt="accessibility-supported|accessibility support">accessibility supported</dfn></dt>
+<dt><dfn id="dfn-accessibility-supported" data-lt="accessibility-supported|accessibility support">accessibility supported</dfn></dt>
 <dd>
    
    <p>supported by users' <a>assistive technologies</a> as well as the accessibility features in browsers and other <a>user agents</a></p>
@@ -84,7 +84,7 @@
    </p>
    
    <p class="note">Web technologies can be used in ways that are not accessibility supported as long
-      as they are not <a>relied upon</a> and the page as a whole meets the conformance requirements, including <a href="#cc4">Conformance Criterion 4</a> and <a href="#cc5">Conformance Criterion 5</a>, are met.
+      as they are not <a>relied upon</a> and the page as a whole meets the conformance requirements, including <a href="#cc4">Conformance Requirement 4</a> and <a href="#cc5">Conformance Requirement 5</a>.
    </p>
    
    <p class="note">When a <a>Web Technology</a> is used in a way that is "accessibility supported," it does not imply that the entire
diff --git a/guidelines/terms/20/alternative-for-time-based-media.html b/guidelines/terms/20/alternative-for-time-based-media.html
index 5e071239db..22bf2a0053 100644
--- a/guidelines/terms/20/alternative-for-time-based-media.html
+++ b/guidelines/terms/20/alternative-for-time-based-media.html
@@ -1,4 +1,4 @@
-<dt><dfn>alternative for time-based media</dfn></dt>
+<dt><dfn id="dfn-alternative-for-time-based-media">alternative for time-based media</dfn></dt>
 <dd>
    
    <p>document including correctly sequenced text descriptions of time-based visual and
diff --git a/guidelines/terms/20/ambiguous-to-users-in-general.html b/guidelines/terms/20/ambiguous-to-users-in-general.html
index 4fc95a61f6..5260803b07 100644
--- a/guidelines/terms/20/ambiguous-to-users-in-general.html
+++ b/guidelines/terms/20/ambiguous-to-users-in-general.html
@@ -1,4 +1,4 @@
-<dt><dfn>ambiguous to users in general</dfn></dt>
+<dt><dfn id="dfn-ambiguous-to-users-in-general">ambiguous to users in general</dfn></dt>
 <dd>
    
    <p>the purpose cannot be determined from the link and all information of the Web page
@@ -6,10 +6,10 @@
       would not know what a link would do until they activated it)
    </p>
    
-   <p class="example">The word guava in the following sentence "One of the notable exports is guava" is
+   <aside class="example"><p>The word guava in the following sentence "One of the notable exports is guava" is
       a link. The link could lead to a definition of guava, a chart listing the quantity
       of guava exported or a photograph of people harvesting guava. Until the link is activated,
       all readers are unsure and the person with a disability is not at any disadvantage.
-   </p>
+   </p></aside>
    
 </dd>
diff --git a/guidelines/terms/20/ascii-art.html b/guidelines/terms/20/ascii-art.html
index e9e6176959..4441416ef5 100644
--- a/guidelines/terms/20/ascii-art.html
+++ b/guidelines/terms/20/ascii-art.html
@@ -1,4 +1,4 @@
-<dt><dfn>ASCII art</dfn></dt>
+<dt><dfn id="dfn-ascii-art">ASCII art</dfn></dt>
 <dd>
    
    <p>picture created by a spatial arrangement of characters or glyphs (typically from the
diff --git a/guidelines/terms/20/assistive-technology.html b/guidelines/terms/20/assistive-technology.html
index 6a75d242dd..4a918854c8 100644
--- a/guidelines/terms/20/assistive-technology.html
+++ b/guidelines/terms/20/assistive-technology.html
@@ -1,4 +1,4 @@
-<dt><dfn data-lt="assistive technologies">assistive technology</dfn> (as used in this document)
+<dt><dfn id="dfn-assistive-technologies" data-lt="assistive technologies">assistive technology</dfn> (as used in this document)
 </dt>
 <dd>
    
@@ -6,7 +6,7 @@
       of users with disabilities that go beyond those offered by mainstream user agents
    </p>
    
-   <p class="note">functionality provided by assistive technology includes alternative presentations
+   <p class="note">Functionality provided by assistive technology includes alternative presentations
       (e.g., as synthesized speech or magnified content), alternative input methods (e.g.,
       voice), additional navigation or orientation mechanisms, and content transformations
       (e.g., to make tables more accessible).
@@ -27,7 +27,7 @@
       markup into identifiable bundles.
    </p>
    
-   <p class="example">Assistive technologies that are important in the context of this document include
+   <aside class="example"><p>Assistive technologies that are important in the context of this document include
       the following:
    </p>
    
@@ -59,5 +59,5 @@
       </li>
       
    </ul>
-   
+   </aside>
 </dd>
diff --git a/guidelines/terms/20/audio-description.html b/guidelines/terms/20/audio-description.html
index 3806c81a9b..09ed0f4927 100644
--- a/guidelines/terms/20/audio-description.html
+++ b/guidelines/terms/20/audio-description.html
@@ -1,4 +1,4 @@
-<dt><dfn data-lt="audio descriptions">audio description</dfn></dt>
+<dt><dfn id="dfn-audio-descriptions" data-lt="audio descriptions">audio description</dfn></dt>
 <dd>
    
    <p>narration added to the soundtrack to describe important visual details that cannot
diff --git a/guidelines/terms/20/audio-only.html b/guidelines/terms/20/audio-only.html
index fe88b4570c..7e467df2b6 100644
--- a/guidelines/terms/20/audio-only.html
+++ b/guidelines/terms/20/audio-only.html
@@ -1,7 +1,7 @@
-<dt><dfn>audio-only</dfn></dt>
+<dt><dfn id="dfn-audio-only">audio-only</dfn></dt>
 <dd>
    
    <p>a time-based presentation that contains only <a>audio</a> (no <a>video</a> and no interaction)
    </p>
    
-</dd>
\ No newline at end of file
+</dd>
diff --git a/guidelines/terms/20/audio.html b/guidelines/terms/20/audio.html
index add67e1281..8a1266d214 100644
--- a/guidelines/terms/20/audio.html
+++ b/guidelines/terms/20/audio.html
@@ -1,4 +1,4 @@
-<dt><dfn>audio</dfn></dt>
+<dt><dfn id="dfn-audio">audio</dfn></dt>
 <dd>
    
    <p>the technology of sound reproduction</p>
diff --git a/guidelines/terms/20/blinking.html b/guidelines/terms/20/blinking.html
index da6b8073bd..fc9099697f 100644
--- a/guidelines/terms/20/blinking.html
+++ b/guidelines/terms/20/blinking.html
@@ -1,4 +1,4 @@
-<dt><dfn>blinking</dfn></dt>
+<dt><dfn id="dfn-blinking">blinking</dfn></dt>
 <dd>
    
    <p>switch back and forth between two visual states in a way that is meant to draw attention</p>
diff --git a/guidelines/terms/20/blocks-of-text.html b/guidelines/terms/20/blocks-of-text.html
index 82358e05ed..1b85e3dc14 100644
--- a/guidelines/terms/20/blocks-of-text.html
+++ b/guidelines/terms/20/blocks-of-text.html
@@ -1,6 +1,6 @@
-<dt><dfn>blocks of text</dfn></dt>
+<dt><dfn id="dfn-blocks-of-text">blocks of text</dfn></dt>
 <dd>
    
    <p>more than one sentence of text</p>
    
-</dd>
\ No newline at end of file
+</dd>
diff --git a/guidelines/terms/20/captcha.html b/guidelines/terms/20/captcha.html
index 960cf3928d..c33c055da8 100644
--- a/guidelines/terms/20/captcha.html
+++ b/guidelines/terms/20/captcha.html
@@ -1,4 +1,4 @@
-<dt><dfn>CAPTCHA</dfn></dt>
+<dt><dfn id="dfn-captcha">CAPTCHA</dfn></dt>
 <dd>
    
    <p>initialism for "Completely Automated Public Turing test to tell Computers and Humans
diff --git a/guidelines/terms/20/captions.html b/guidelines/terms/20/captions.html
index 226b7b509d..2192362d54 100644
--- a/guidelines/terms/20/captions.html
+++ b/guidelines/terms/20/captions.html
@@ -1,4 +1,4 @@
-<dt><dfn>captions</dfn></dt>
+<dt><dfn id="dfn-captions">captions</dfn></dt>
 <dd>
    
    <p>synchronized visual and/or <a>text alternative</a> for both speech and non-speech audio information needed to understand the media content
diff --git a/guidelines/terms/20/changes-of-context.html b/guidelines/terms/20/changes-of-context.html
index e155cbb307..b57e76b901 100644
--- a/guidelines/terms/20/changes-of-context.html
+++ b/guidelines/terms/20/changes-of-context.html
@@ -1,7 +1,7 @@
-<dt><dfn data-lt="change of context">changes of context</dfn></dt>
+<dt><dfn id="dfn-change-of-context" data-lt="change of context">changes of context</dfn></dt>
 <dd>
    
-   <p>major changes in the content of the <a>Web page</a> that, if made without user awareness, can disorient users who are not able to view
+   <p>major changes that, if made without user awareness, can disorient users who are not able to view
       the entire page simultaneously
    </p>
    
@@ -27,9 +27,9 @@
       context, unless they also change one of the above (e.g., focus).
    </p>
    
-   <p class="example">Opening a new window, moving focus to a different component, going to a new page (including
+   <aside class="example"><p>Opening a new window, moving focus to a different component, going to a new page (including
       anything that would look to a user as if they had moved to a new page) or significantly
       re-arranging the content of a page are examples of changes of context.
-   </p>
+   </p></aside>
    
 </dd>
diff --git a/guidelines/terms/20/conformance.html b/guidelines/terms/20/conformance.html
index 0949c06528..3de38f41e1 100644
--- a/guidelines/terms/20/conformance.html
+++ b/guidelines/terms/20/conformance.html
@@ -1,6 +1,6 @@
-<dt><dfn data-lt="conform">conformance</dfn></dt>
+<dt><dfn id="dfn-conform" data-lt="conform">conformance</dfn></dt>
 <dd>
    
    <p>satisfying all the requirements of a given standard, guideline or specification</p>
    
-</dd>
\ No newline at end of file
+</dd>
diff --git a/guidelines/terms/20/conforming-alternate-version.html b/guidelines/terms/20/conforming-alternate-version.html
index eca187c6b7..77faa0f4f3 100644
--- a/guidelines/terms/20/conforming-alternate-version.html
+++ b/guidelines/terms/20/conforming-alternate-version.html
@@ -1,4 +1,4 @@
-<dt><dfn data-lt="conforming alternate versions">conforming alternate version</dfn></dt>
+<dt><dfn id="dfn-conforming-alternate-versions" data-lt="conforming alternate versions">conforming alternate version</dfn></dt>
 <dd>
    
    <p>version that</p>
diff --git a/guidelines/terms/20/content.html b/guidelines/terms/20/content.html
index 237dbf564e..cce2c2c612 100644
--- a/guidelines/terms/20/content.html
+++ b/guidelines/terms/20/content.html
@@ -1,8 +1,8 @@
-<dt><dfn>content</dfn> (Web content)
+<dt><dfn id="dfn-content">content</dfn> (Web content)
 </dt>
 <dd>
    
    <p>information and sensory experience to be communicated to the user by means of a <a>user agent</a>, including code or markup that defines the content's <a>structure</a>, <a>presentation</a>, and interactions
    </p>
    
-</dd>
\ No newline at end of file
+</dd>
diff --git a/guidelines/terms/20/context-sensitive-help.html b/guidelines/terms/20/context-sensitive-help.html
index a5a7328278..b940f10b1f 100644
--- a/guidelines/terms/20/context-sensitive-help.html
+++ b/guidelines/terms/20/context-sensitive-help.html
@@ -1,4 +1,4 @@
-<dt><dfn>context-sensitive help</dfn></dt>
+<dt><dfn id="dfn-context-sensitive-help">context-sensitive help</dfn></dt>
 <dd>
    
    <p>help text that provides information related to the function currently being performed</p>
diff --git a/guidelines/terms/20/contrast-ratio.html b/guidelines/terms/20/contrast-ratio.html
index eee5a807ce..66a1d522e9 100644
--- a/guidelines/terms/20/contrast-ratio.html
+++ b/guidelines/terms/20/contrast-ratio.html
@@ -1,4 +1,4 @@
-<dt><dfn>contrast ratio</dfn></dt>
+<dt><dfn id="dfn-contrast-ratio">contrast ratio</dfn></dt>
 <dd>
    
    <p>(L1 + 0.05) / (L2 + 0.05), where</p>
diff --git a/guidelines/terms/20/correct-reading-sequence.html b/guidelines/terms/20/correct-reading-sequence.html
index 979721b022..69799e4d81 100644
--- a/guidelines/terms/20/correct-reading-sequence.html
+++ b/guidelines/terms/20/correct-reading-sequence.html
@@ -1,8 +1,8 @@
-<dt><dfn>correct reading sequence</dfn></dt>
+<dt><dfn id="dfn-correct-reading-sequence">correct reading sequence</dfn></dt>
 <dd>
    
    <p>any sequence where words and paragraphs are presented in an order that does not change
       the meaning of the content
    </p>
    
-</dd>
\ No newline at end of file
+</dd>
diff --git a/guidelines/terms/20/emergency.html b/guidelines/terms/20/emergency.html
index a4f6f8541e..108903d437 100644
--- a/guidelines/terms/20/emergency.html
+++ b/guidelines/terms/20/emergency.html
@@ -1,8 +1,8 @@
-<dt><dfn>emergency</dfn></dt>
+<dt><dfn id="dfn-emergency">emergency</dfn></dt>
 <dd>
    
    <p>a sudden, unexpected situation or occurrence that requires immediate action to preserve
       health, safety, or property
    </p>
    
-</dd>
\ No newline at end of file
+</dd>
diff --git a/guidelines/terms/20/essential.html b/guidelines/terms/20/essential.html
index 135f577244..3c7e5ede2d 100644
--- a/guidelines/terms/20/essential.html
+++ b/guidelines/terms/20/essential.html
@@ -1,8 +1,8 @@
-<dt><dfn>essential</dfn></dt>
+<dt><dfn id="dfn-essential">essential</dfn></dt>
 <dd>
    					
    <p>if removed, would fundamentally change the information or functionality of the content,
       <strong>and</strong> information and functionality cannot be achieved in another way that would conform
    </p>
    				
-</dd>
\ No newline at end of file
+</dd>
diff --git a/guidelines/terms/20/extended-audio-description.html b/guidelines/terms/20/extended-audio-description.html
index a1d4aad540..c97ea85645 100644
--- a/guidelines/terms/20/extended-audio-description.html
+++ b/guidelines/terms/20/extended-audio-description.html
@@ -1,4 +1,4 @@
-<dt><dfn>extended audio description</dfn></dt>
+<dt><dfn id="dfn-extended-audio-description">extended audio description</dfn></dt>
 <dd>
    
    <p>audio description that is added to an audiovisual presentation by pausing the <a>video</a> so that there is time to add additional description
diff --git a/guidelines/terms/20/flash.html b/guidelines/terms/20/flash.html
index c8bda462a7..9530426c48 100644
--- a/guidelines/terms/20/flash.html
+++ b/guidelines/terms/20/flash.html
@@ -1,4 +1,4 @@
-<dt><dfn data-lt="flashes">flash</dfn></dt>
+<dt><dfn id="dfn-flashes" data-lt="flashes">flash</dfn></dt>
 <dd>
    
    <p>a pair of opposing changes in <a>relative luminance</a> that can cause seizures in some people if it is large enough and in the right frequency
diff --git a/guidelines/terms/20/functionality.html b/guidelines/terms/20/functionality.html
index 6f61b9632c..edd851bd16 100644
--- a/guidelines/terms/20/functionality.html
+++ b/guidelines/terms/20/functionality.html
@@ -1,7 +1,7 @@
-<dt><dfn>functionality</dfn></dt>
+<dt><dfn id="dfn-functionality">functionality</dfn></dt>
 <dd>
    
    <p><a>processes</a> and outcomes achievable through user action
    </p>
    
-</dd>
\ No newline at end of file
+</dd>
diff --git a/guidelines/terms/20/general-flash-and-red-flash-thresholds.html b/guidelines/terms/20/general-flash-and-red-flash-thresholds.html
index 94ff8358ce..19048801f6 100644
--- a/guidelines/terms/20/general-flash-and-red-flash-thresholds.html
+++ b/guidelines/terms/20/general-flash-and-red-flash-thresholds.html
@@ -1,4 +1,4 @@
-<dt><dfn>general flash and red flash thresholds</dfn></dt>
+<dt><dfn id="dfn-general-flash-and-red-flash-thresholds">general flash and red flash thresholds</dfn></dt>
 <dd>
    
    <p>a <a>flash</a> or rapidly changing image sequence is below the threshold (i.e., content <strong>passes</strong>) if any of the following are true:
@@ -20,7 +20,7 @@
    
    <ul>
       
-      <li>A <strong>general flash</strong> is defined as a pair of opposing changes in <a>relative luminance</a> of 10% or more of the maximum relative luminance where the relative luminance of
+      <li>A <strong>general flash</strong> is defined as a pair of opposing changes in <a>relative luminance</a> of 10% or more of the maximum relative luminance (1.0) where the relative luminance of
          the darker image is below 0.80; and where "a pair of opposing changes" is an increase
          followed by a decrease, or a decrease followed by an increase, and
       </li>
@@ -35,12 +35,7 @@
       viewing distance) on a side does not violate the thresholds.
    </p>
    
-   <p class="note">For general software or Web content, using a 341 x 256 pixel rectangle anywhere on
-      the displayed screen area when the content is viewed at 1024 x 768 pixels will provide
-      a good estimate of a 10 degree visual field for standard screen sizes and viewing
-      distances (e.g., 15-17 inch screen at 22-26 inches). (Higher resolutions displays
-      showing the same rendering of the content yield smaller and safer images so it is
-      lower resolutions that are used to define the thresholds.)
+   <p class="note">For general software or Web content, using a 341 x 256 pixel rectangle anywhere on the displayed screen area when the content is viewed at 1024 x 768 pixels will provide a good estimate of a 10 degree visual field for standard screen sizes and viewing distances (e.g., 15-17 inch screen at 22-26 inches). This resolution of 75 - 85 ppi is known to be lower, and thus more conservative than the nominal CSS pixel resolution of 96 ppi in CSS specifications. Higher resolutions displays showing the same rendering of the content yield smaller and safer images so it is lower resolutions that are used to define the thresholds.
    </p>
    
    <p class="note">A transition is the change in relative luminance (or relative luminance/color for
@@ -48,12 +43,8 @@
       relative luminance/color for red flashing) measurement against time. A flash consists
       of two opposing transitions.
    </p>
-   
-   <p class="note">The current working definition in the field for <strong>"pair of opposing transitions involving a saturated red"</strong> is where, for either or both states involved in each transition, R/(R+ G + B) &gt;=
-      0.8, and the change in the value of (R-G-B)x320 is &gt; 20 (negative values of (R-G-B)x320
-      are set to zero) for both transitions. R, G, B values range from 0-1 as specified
-      in “relative luminance” definition. [[HARDING-BINNIE]]
-   </p>
+
+   <p class="note">The new working definition in the field for <strong>"pair of opposing transitions involving a saturated red"</strong> (from WCAG 2.2) is a pair of opposing transitions where, one transition is either to or from a state with a value R/(R + G + B) that is greater than or equal to 0.8, and the difference between states is more than 0.2 (unitless) in the CIE 1976 UCS chromaticity diagram. [[ISO_9241-391]] </p>
    
    <p class="note">Tools are available that will carry out analysis from video screen capture. However,
       no tool is necessary to evaluate for this condition if flashing is less than or equal
diff --git a/guidelines/terms/20/human-language.html b/guidelines/terms/20/human-language.html
index f070d1f51c..17cc924943 100644
--- a/guidelines/terms/20/human-language.html
+++ b/guidelines/terms/20/human-language.html
@@ -1,4 +1,4 @@
-<dt><dfn data-lt="human language(s)">human language</dfn></dt>
+<dt><dfn id="dfn-human-language-s" data-lt="human language(s)">human language</dfn></dt>
 <dd>
    
    <p>language that is spoken, written or signed (through visual or tactile means) to communicate
diff --git a/guidelines/terms/20/idiom.html b/guidelines/terms/20/idiom.html
index 2e35d5528e..ce69f64abe 100644
--- a/guidelines/terms/20/idiom.html
+++ b/guidelines/terms/20/idiom.html
@@ -1,24 +1,24 @@
-<dt><dfn data-lt="idioms">idiom</dfn></dt>
+<dt><dfn id="dfn-idioms" data-lt="idioms">idiom</dfn></dt>
 <dd>
    
    <p>phrase whose meaning cannot be deduced from the meaning of the individual words and
       the specific words cannot be changed without losing the meaning
    </p>
    
-   <p class="note">idioms cannot be translated directly, word for word, without losing their (cultural
+   <p class="note">Idioms cannot be translated directly, word for word, without losing their (cultural
       or language-dependent) meaning.
    </p>
    
-   <p class="example">In English, "spilling the beans" means "revealing a secret." However, "knocking over
+   <aside class="example"><p>In English, "spilling the beans" means "revealing a secret." However, "knocking over
       the beans" or "spilling the vegetables" does not mean the same thing.
-   </p>
+   </p></aside>
    
-   <p class="example">In Japanese, the phrase "<span lang="ja">さじを投げる</span>" literally translates into "he throws a spoon," but it means that there is nothing
+   <aside class="example"><p>In Japanese, the phrase "<span lang="ja">さじを投げる</span>" literally translates into "he throws a spoon," but it means that there is nothing
       he can do and finally he gives up.
-   </p>
+   </p></aside>
    
-   <p class="example">In Dutch, "<span lang="nl">Hij ging met de kippen op stok</span>" literally translates into "He went to roost with the chickens," but it means that
+   <aside class="example"><p>In Dutch, "<span lang="nl">Hij ging met de kippen op stok</span>" literally translates into "He went to roost with the chickens," but it means that
       he went to bed early.
-   </p>
+   </p></aside>
    
 </dd>
diff --git a/guidelines/terms/20/image-of-text.html b/guidelines/terms/20/image-of-text.html
index 39f995e70b..ddf784c34a 100644
--- a/guidelines/terms/20/image-of-text.html
+++ b/guidelines/terms/20/image-of-text.html
@@ -1,4 +1,4 @@
-<dt><dfn data-lt="images of text">image of text</dfn></dt>
+<dt><dfn id="dfn-images-of-text" data-lt="images of text">image of text</dfn></dt>
 <dd>
    
    <p>text that has been rendered in a non-text form (e.g., an image) in order to achieve
@@ -8,6 +8,6 @@
    <p class="note">This does not include <a>text</a> that is part of a picture that contains significant other visual content.
    </p>
    
-   <p class="example">A person's name on a nametag in a photograph.</p>
+   <aside class="example"><p>A person's name on a nametag in a photograph.</p></aside>
    
 </dd>
diff --git a/guidelines/terms/20/informative.html b/guidelines/terms/20/informative.html
index e6b5b45c89..51a1719a62 100644
--- a/guidelines/terms/20/informative.html
+++ b/guidelines/terms/20/informative.html
@@ -1,4 +1,4 @@
-<dt><dfn>informative</dfn></dt>
+<dt><dfn id="dfn-informative">informative</dfn></dt>
 <dd>
    
    <p>for information purposes and not required for conformance</p>
diff --git a/guidelines/terms/20/input-error.html b/guidelines/terms/20/input-error.html
index 6b967a46b7..1febee2c75 100644
--- a/guidelines/terms/20/input-error.html
+++ b/guidelines/terms/20/input-error.html
@@ -1,4 +1,4 @@
-<dt><dfn>input error</dfn></dt>
+<dt><dfn id="dfn-input-error">input error</dfn></dt>
 <dd>
    
    <p>information provided by the user that is not accepted</p>
diff --git a/guidelines/terms/20/jargon.html b/guidelines/terms/20/jargon.html
index 769ca59b81..043bab2102 100644
--- a/guidelines/terms/20/jargon.html
+++ b/guidelines/terms/20/jargon.html
@@ -1,8 +1,8 @@
-<dt><dfn>jargon</dfn></dt>
+<dt><dfn id="dfn-jargon">jargon</dfn></dt>
 <dd>
    
    <p>words used in a particular way by people in a particular field</p>
    
-   <p class="example">The word StickyKeys is jargon from the field of assistive technology/accessibility.</p>
+   <aside class="example"><p>The word StickyKeys is jargon from the field of assistive technology/accessibility.</p></aside>
    
 </dd>
diff --git a/guidelines/terms/20/keyboard-interface.html b/guidelines/terms/20/keyboard-interface.html
index 85ca7f4975..2951cd86da 100644
--- a/guidelines/terms/20/keyboard-interface.html
+++ b/guidelines/terms/20/keyboard-interface.html
@@ -1,4 +1,4 @@
-<dt><dfn>keyboard interface</dfn></dt>
+<dt><dfn id="dfn-keyboard-interface">keyboard interface</dfn></dt>
 <dd>
    
    <p>interface used by software to obtain keystroke input</p>
@@ -7,11 +7,11 @@
         <p>A keyboard interface allows users to provide keystroke input to programs even if the
         native technology does not contain a keyboard.</p>
 
-        <p class="example">A touchscreen PDA has a keyboard interface built into its operating system as well
+       <aside class="example"><p>A touchscreen PDA has a keyboard interface built into its operating system as well
         as a connector for external keyboards. Applications on the PDA can use the interface
         to obtain keyboard input either from an external keyboard or from other applications
         that provide simulated keyboard output, such as handwriting interpreters or speech-to-text
-        applications with "keyboard emulation" functionality.</p>
+        applications with "keyboard emulation" functionality.</p></aside>
     </div>
    
    <p class="note">Operation of the application (or parts of the application) through a keyboard-operated
diff --git a/guidelines/terms/20/label.html b/guidelines/terms/20/label.html
index cb8a61e515..b8624b4ae2 100644
--- a/guidelines/terms/20/label.html
+++ b/guidelines/terms/20/label.html
@@ -1,4 +1,4 @@
-<dt><dfn data-lt="labels">label</dfn></dt>
+<dt><dfn id="dfn-labels" data-lt="labels">label</dfn></dt>
 <dd>
    
    <p><a>text</a> or other component with a <a>text alternative</a> that is presented to a user to identify a component within Web <a>content</a></p>
diff --git a/guidelines/terms/20/large-scale.html b/guidelines/terms/20/large-scale.html
index b8fb9ae498..871bfd7c9b 100644
--- a/guidelines/terms/20/large-scale.html
+++ b/guidelines/terms/20/large-scale.html
@@ -1,4 +1,4 @@
-<dt><dfn data-lt="large-scale">large scale</dfn> (text)
+<dt><dfn id="dfn-large-scale" data-lt="large-scale">large scale</dfn> (text)
 </dt>
 <dd>
    
@@ -16,7 +16,7 @@
    </p>
    
    <p class="note">The actual size of the character that a user sees is dependent both on the author-defined
-      size and the user's display or user-agent settings. For many mainstream body text
+      size and the user's display or user agent settings. For many mainstream body text
       fonts, 14 and 18 point is roughly equivalent to 1.2 and 1.5 em or to 120% or 150%
       of the default size for body text (assuming that the body font is 100%), but authors
       would need to check this for the particular fonts in use. When fonts are defined in
diff --git a/guidelines/terms/20/legal-commitments.html b/guidelines/terms/20/legal-commitments.html
index 431518846b..58248faa76 100644
--- a/guidelines/terms/20/legal-commitments.html
+++ b/guidelines/terms/20/legal-commitments.html
@@ -1,10 +1,10 @@
-<dt><dfn>legal commitments</dfn></dt>
+<dt><dfn id="dfn-legal-commitments">legal commitments</dfn></dt>
 <dd>
    
    <p>transactions where the person incurs a legally binding obligation or benefit</p>
    
-   <p class="example">A marriage license, a stock trade (financial and legal), a will, a loan, adoption,
+   <aside class="example"><p>A marriage license, a stock trade (financial and legal), a will, a loan, adoption,
       signing up for the army, a contract of any type, etc.
-   </p>
+   </p></aside>
    
 </dd>
diff --git a/guidelines/terms/20/link-purpose.html b/guidelines/terms/20/link-purpose.html
index e9abf0b3ee..bd1ab47a04 100644
--- a/guidelines/terms/20/link-purpose.html
+++ b/guidelines/terms/20/link-purpose.html
@@ -1,6 +1,6 @@
-<dt><dfn data-lt="purpose of each link">link purpose</dfn></dt>
+<dt><dfn id="dfn-purpose-of-each-link" data-lt="purpose of each link">link purpose</dfn></dt>
 <dd>
    
    <p>nature of the result obtained by activating a hyperlink</p>
    
-</dd>
\ No newline at end of file
+</dd>
diff --git a/guidelines/terms/20/live.html b/guidelines/terms/20/live.html
index fa24001ea7..ae91b778b8 100644
--- a/guidelines/terms/20/live.html
+++ b/guidelines/terms/20/live.html
@@ -1,4 +1,4 @@
-<dt><dfn>live</dfn></dt>
+<dt><dfn id="dfn-live">live</dfn></dt>
 <dd>
    
    <p>information captured from a real-world event and transmitted to the receiver with
diff --git a/guidelines/terms/20/lower-secondary-education-level.html b/guidelines/terms/20/lower-secondary-education-level.html
index a642496e60..12164166e0 100644
--- a/guidelines/terms/20/lower-secondary-education-level.html
+++ b/guidelines/terms/20/lower-secondary-education-level.html
@@ -1,4 +1,4 @@
-<dt><dfn>lower secondary education level</dfn></dt>
+<dt><dfn id="dfn-lower-secondary-education-level">lower secondary education level</dfn></dt>
 <dd>
    
    <p>the two or three year period of education that begins after completion of six years
diff --git a/guidelines/terms/20/mechanism.html b/guidelines/terms/20/mechanism.html
index bcaa507314..96b49da658 100644
--- a/guidelines/terms/20/mechanism.html
+++ b/guidelines/terms/20/mechanism.html
@@ -1,4 +1,4 @@
-<dt><dfn>mechanism</dfn></dt>
+<dt><dfn id="dfn-mechanism" data-lt="mechanisms">mechanism</dfn></dt>
 <dd>
    
    <p><a>process</a> or technique for achieving a result
diff --git a/guidelines/terms/20/media-alternative-for-text.html b/guidelines/terms/20/media-alternative-for-text.html
index e1d55bbc4a..e1adab92ab 100644
--- a/guidelines/terms/20/media-alternative-for-text.html
+++ b/guidelines/terms/20/media-alternative-for-text.html
@@ -1,4 +1,4 @@
-<dt><dfn>media alternative for text</dfn></dt>
+<dt><dfn id="dfn-media-alternative-for-text">media alternative for text</dfn></dt>
 <dd>
    
    <p>media that presents no more information than is already presented in text (directly
diff --git a/guidelines/terms/20/name.html b/guidelines/terms/20/name.html
index 6aa0f2923e..9530872de2 100644
--- a/guidelines/terms/20/name.html
+++ b/guidelines/terms/20/name.html
@@ -1,4 +1,4 @@
-<dt><dfn>name</dfn></dt>
+<dt><dfn id="dfn-name">name</dfn></dt>
 <dd>
    
    <p>text by which software can identify a component within Web content to the user</p>
diff --git a/guidelines/terms/20/navigated-sequentially.html b/guidelines/terms/20/navigated-sequentially.html
index b22f97f533..23845c1801 100644
--- a/guidelines/terms/20/navigated-sequentially.html
+++ b/guidelines/terms/20/navigated-sequentially.html
@@ -1,7 +1,7 @@
-<dt><dfn>navigated sequentially</dfn></dt>
+<dt><dfn id="dfn-navigated-sequentially">navigated sequentially</dfn></dt>
 <dd>
    
    <p>navigated in the order defined for advancing focus (from one element to the next)
       using a <a>keyboard interface</a></p>
    
-</dd>
\ No newline at end of file
+</dd>
diff --git a/guidelines/terms/20/non-text-content.html b/guidelines/terms/20/non-text-content.html
index 41e0b40690..612b94689b 100644
--- a/guidelines/terms/20/non-text-content.html
+++ b/guidelines/terms/20/non-text-content.html
@@ -1,4 +1,4 @@
-<dt><dfn>non-text content</dfn></dt>
+<dt><dfn id="dfn-non-text-content">non-text content</dfn></dt>
 <dd>
    
    <p>any content that is not a sequence of characters that can be <a>programmatically determined</a> or where the sequence is not expressing something in <a>human language</a></p>
diff --git a/guidelines/terms/20/normative.html b/guidelines/terms/20/normative.html
index 379eac0c59..2fc3755f86 100644
--- a/guidelines/terms/20/normative.html
+++ b/guidelines/terms/20/normative.html
@@ -1,4 +1,4 @@
-<dt><dfn>normative</dfn></dt>
+<dt><dfn id="dfn-normative">normative</dfn></dt>
 <dd>
    
    <p>required for conformance</p>
diff --git a/guidelines/terms/20/on-a-full-screen-window.html b/guidelines/terms/20/on-a-full-screen-window.html
index fb8445306a..61de699593 100644
--- a/guidelines/terms/20/on-a-full-screen-window.html
+++ b/guidelines/terms/20/on-a-full-screen-window.html
@@ -1,4 +1,4 @@
-<dt><dfn>on a full-screen window</dfn></dt>
+<dt><dfn id="dfn-on-a-full-screen-window">on a full-screen window</dfn></dt>
 <dd>
    
    <p>on the most common sized desktop/laptop display with the viewport maximized</p>
diff --git a/guidelines/terms/20/paused.html b/guidelines/terms/20/paused.html
index 189b6261b1..38ce017635 100644
--- a/guidelines/terms/20/paused.html
+++ b/guidelines/terms/20/paused.html
@@ -1,6 +1,6 @@
-<dt><dfn data-lt="pause">paused</dfn></dt>
+<dt><dfn id="dfn-pause" data-lt="pause">paused</dfn></dt>
 <dd>
    
    <p>stopped by user request and not resumed until requested by user</p>
    
-</dd>
\ No newline at end of file
+</dd>
diff --git a/guidelines/terms/20/prerecorded.html b/guidelines/terms/20/prerecorded.html
index 4606341550..68828d5aa8 100644
--- a/guidelines/terms/20/prerecorded.html
+++ b/guidelines/terms/20/prerecorded.html
@@ -1,6 +1,6 @@
-<dt><dfn>prerecorded</dfn></dt>
+<dt><dfn id="dfn-prerecorded">prerecorded</dfn></dt>
 <dd>
    
    <p>information that is not <a>live</a></p>
    
-</dd>
\ No newline at end of file
+</dd>
diff --git a/guidelines/terms/20/presentation.html b/guidelines/terms/20/presentation.html
index 72efe3d4d3..b2decee50f 100644
--- a/guidelines/terms/20/presentation.html
+++ b/guidelines/terms/20/presentation.html
@@ -1,7 +1,7 @@
-<dt><dfn>presentation</dfn></dt>
+<dt><dfn id="dfn-presentation">presentation</dfn></dt>
 <dd>
    
    <p>rendering of the <a>content</a> in a form to be perceived by users
    </p>
    
-</dd>
\ No newline at end of file
+</dd>
diff --git a/guidelines/terms/20/primary-education-level.html b/guidelines/terms/20/primary-education-level.html
index c3434cb493..d34f2f6229 100644
--- a/guidelines/terms/20/primary-education-level.html
+++ b/guidelines/terms/20/primary-education-level.html
@@ -1,4 +1,4 @@
-<dt><dfn data-lt="primary education">primary education level</dfn></dt>
+<dt><dfn id="dfn-primary-education" data-lt="primary education">primary education level</dfn></dt>
 <dd>
    
    <p>six year time period that begins between the ages of five and seven, possibly without
diff --git a/guidelines/terms/20/process.html b/guidelines/terms/20/process.html
index 3a22b8194e..9cafc80647 100644
--- a/guidelines/terms/20/process.html
+++ b/guidelines/terms/20/process.html
@@ -1,15 +1,15 @@
-<dt><dfn data-lt="processes">process</dfn></dt>
+<dt><dfn id="dfn-processes" data-lt="processes">process</dfn></dt>
 <dd>
    
    <p>series of user actions where each action is required in order to complete an activity</p>
    
-   <p class="example">Successful use of a series of Web pages on a shopping site requires users to view
+   <aside class="example"><p>Successful use of a series of Web pages on a shopping site requires users to view
       alternative products, prices and offers, select products, submit an order, provide
       shipping information and provide payment information.
-   </p>
+   </p></aside>
    
-   <p class="example">An account registration page requires successful completion of a Turing test before
+   <aside class="example"><p>An account registration page requires successful completion of a <a href="https://www.w3.org/TR/turingtest/">Turing test</a> before
       the registration form can be accessed.
-   </p>
+   </p></aside>
    
 </dd>
diff --git a/guidelines/terms/20/programmatically-determined-link-context.html b/guidelines/terms/20/programmatically-determined-link-context.html
index d45d179706..37c426f2c7 100644
--- a/guidelines/terms/20/programmatically-determined-link-context.html
+++ b/guidelines/terms/20/programmatically-determined-link-context.html
@@ -1,13 +1,13 @@
-<dt><dfn>programmatically determined link context</dfn></dt>
+<dt><dfn id="dfn-programmatically-determined-link-context">programmatically determined link context</dfn></dt>
 <dd>
    
    <p>additional information that can be <a>programmatically determined</a> from <a>relationships</a> with a link, combined with the link text, and presented to users in different modalities
    </p>
    
-   <p class="example">In HTML, information that is programmatically determinable from a link in English
+   <aside class="example"><p>In HTML, information that is programmatically determinable from a link in English
       includes text that is in the same paragraph, list, or table cell as the link or in
       a table header cell that is associated with the table cell that contains the link.
-   </p>
+   </p></aside>
    
    <p class="note">Since screen readers interpret punctuation, they can also provide the context from
       the current sentence, when the focus is on a link in that sentence.
diff --git a/guidelines/terms/20/programmatically-determined.html b/guidelines/terms/20/programmatically-determined.html
index 24d2994c17..8e7e7d248e 100644
--- a/guidelines/terms/20/programmatically-determined.html
+++ b/guidelines/terms/20/programmatically-determined.html
@@ -1,4 +1,4 @@
-<dt><dfn data-lt="programmatically determinable">programmatically determined</dfn> (programmatically determinable)
+<dt><dfn id="dfn-programmatically-determinable" data-lt="programmatically determinable">programmatically determined</dfn> (programmatically determinable)
 </dt>
 <dd>
    
@@ -6,13 +6,13 @@
       <a>user agents</a>, including <a>assistive technologies</a>, can extract and present this information to users in different modalities
    </p>
    
-   <p class="note">Determined in a markup language from elements and attributes that are accessed directly
+   <aside class="example"><p>Determined in a markup language from elements and attributes that are accessed directly
       by commonly available assistive technology.
-   </p>
+   </p></aside>
    
-   <p class="note">Determined from technology-specific data structures in a non-markup language and exposed
+      <aside class="example"><p>Determined from technology-specific data structures in a non-markup language and exposed
       to assistive technology via an accessibility API that is supported by commonly available
       assistive technology.
-   </p>
+      </p></aside>
    
 </dd>
diff --git a/guidelines/terms/20/programmatically-set.html b/guidelines/terms/20/programmatically-set.html
index d064fe7111..78d8326ee1 100644
--- a/guidelines/terms/20/programmatically-set.html
+++ b/guidelines/terms/20/programmatically-set.html
@@ -1,8 +1,8 @@
-<dt><dfn>programmatically set</dfn></dt>
+<dt><dfn id="dfn-programmatically-set">programmatically set</dfn></dt>
 <dd>
    
    <p>set by software using methods that are supported by user agents, including assistive
       technologies
    </p>
    
-</dd>
\ No newline at end of file
+</dd>
diff --git a/guidelines/terms/20/pure-decoration.html b/guidelines/terms/20/pure-decoration.html
index b4f4d57a54..84518d08ae 100644
--- a/guidelines/terms/20/pure-decoration.html
+++ b/guidelines/terms/20/pure-decoration.html
@@ -1,4 +1,4 @@
-<dt><dfn>pure decoration</dfn></dt>
+<dt><dfn id="dfn-pure-decoration">pure decoration</dfn></dt>
 <dd>
    
    <p>serving only an aesthetic purpose, providing no information, and having no functionality</p>
@@ -7,6 +7,6 @@
       changing their purpose.
    </p>
    
-   <p class="example">The cover page of a dictionary has random words in very light text in the background.</p>
+   <aside class="example"><p>The cover page of a dictionary has random words in very light text in the background.</p></aside>
    
 </dd>
diff --git a/guidelines/terms/20/real-time-event.html b/guidelines/terms/20/real-time-event.html
index c776655c3d..733f44553a 100644
--- a/guidelines/terms/20/real-time-event.html
+++ b/guidelines/terms/20/real-time-event.html
@@ -1,18 +1,18 @@
-<dt><dfn data-lt="real-time events">real-time event</dfn></dt>
+<dt><dfn id="dfn-real-time-events" data-lt="real-time events">real-time event</dfn></dt>
 <dd>
    
    <p>event that a) occurs at the same time as the viewing and b) is not completely generated
       by the content
    </p>
    
-   <p class="example">A Webcast of a live performance (occurs at the same time as the viewing and is not
+   <aside class="example"><p>A Webcast of a live performance (occurs at the same time as the viewing and is not
       prerecorded).
-   </p>
+   </p></aside>
    
-   <p class="example">An on-line auction with people bidding (occurs at the same time as the viewing).</p>
+   <aside class="example"><p>An on-line auction with people bidding (occurs at the same time as the viewing).</p></aside>
    
-   <p class="example">Live humans interacting in a virtual world using avatars (is not completely generated
+   <aside class="example"><p>Live humans interacting in a virtual world using avatars (is not completely generated
       by the content and occurs at the same time as the viewing).
-   </p>
+   </p></aside>
    
 </dd>
diff --git a/guidelines/terms/20/relationships.html b/guidelines/terms/20/relationships.html
index bfe8639f0b..6748cda92a 100644
--- a/guidelines/terms/20/relationships.html
+++ b/guidelines/terms/20/relationships.html
@@ -1,6 +1,6 @@
-<dt><dfn>relationships</dfn></dt>
+<dt><dfn id="dfn-relationships">relationships</dfn></dt>
 <dd>
    
    <p>meaningful associations between distinct pieces of content</p>
    
-</dd>
\ No newline at end of file
+</dd>
diff --git a/guidelines/terms/20/relative-luminance.html b/guidelines/terms/20/relative-luminance.html
index 0fb72a3d29..a3dd3c369e 100644
--- a/guidelines/terms/20/relative-luminance.html
+++ b/guidelines/terms/20/relative-luminance.html
@@ -1,4 +1,4 @@
-<dt><dfn>relative luminance</dfn></dt>
+<dt><dfn id="dfn-relative-luminance">relative luminance</dfn></dt>
 <dd>
    
    <p>the relative brightness of any point in a colorspace, normalized to 0 for darkest
@@ -12,13 +12,13 @@
    
    <ul>
       
-      <li>if RsRGB &lt;= 0.03928 then <strong>R</strong> = RsRGB/12.92 else <strong>R</strong> = ((RsRGB+0.055)/1.055) ^ 2.4
+      <li>if RsRGB &lt;= 0.04045 then <strong>R</strong> = RsRGB/12.92 else <strong>R</strong> = ((RsRGB+0.055)/1.055) ^ 2.4
       </li>
       
-      <li>if GsRGB &lt;= 0.03928 then <strong>G</strong> = GsRGB/12.92 else <strong>G</strong> = ((GsRGB+0.055)/1.055) ^ 2.4
+      <li>if GsRGB &lt;= 0.04045 then <strong>G</strong> = GsRGB/12.92 else <strong>G</strong> = ((GsRGB+0.055)/1.055) ^ 2.4
       </li>
       
-      <li>if BsRGB &lt;= 0.03928 then <strong>B</strong> = BsRGB/12.92 else <strong>B</strong> = ((BsRGB+0.055)/1.055) ^ 2.4
+      <li>if BsRGB &lt;= 0.04045 then <strong>B</strong> = BsRGB/12.92 else <strong>B</strong> = ((BsRGB+0.055)/1.055) ^ 2.4
       </li>
       
    </ul>
@@ -35,15 +35,17 @@
       
    </ul>
    
-   <p>The "^" character is the exponentiation operator. (Formula taken from [[sRGB]] and
-      [[IEC-4WD]]).
+   <p>The "^" character is the exponentiation operator. (Formula taken from 
+      [[SRGB]].)
    </p>
 
   </div>
+
+  <p class="note">Before May 2021 the value of 0.04045 in the definition was different (0.03928). It was taken from an older version of the specification and has been updated. It has no practical effect on the calculations in the context of these guidelines.</p>
   
    <p class="note">Almost all systems used today to view Web content assume sRGB encoding. Unless it
       is known that another color space will be used to process and display the content,
-      authors should evaluate using sRGB colorspace. If using other color spaces, see <a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast">Understanding Success Criterion 1.4.3</a>.
+      authors should evaluate using sRGB colorspace. If using other color spaces, see <a href="https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum">Understanding Success Criterion 1.4.3</a>.
    </p>
    
    <p class="note">If dithering occurs after delivery, then the source color value is used. For colors
@@ -55,7 +57,7 @@
       flash.
    </p>
    
-   <p class="note">A <a href="relative-luminance.xml">MathML version of the relative luminance definition</a> is available.
+   <p class="note">A <a href="relative-luminance.html">separate page giving the relative luminance definition using MathML</a> to display the formulas is available.
    </p>
    
 </dd>
diff --git a/guidelines/terms/20/relied-upon.html b/guidelines/terms/20/relied-upon.html
index daa7485c16..39369cc00e 100644
--- a/guidelines/terms/20/relied-upon.html
+++ b/guidelines/terms/20/relied-upon.html
@@ -1,8 +1,8 @@
-<dt><dfn>relied upon</dfn> (technologies that are)
+<dt><dfn id="dfn-relied-upon">relied upon</dfn> (technologies that are)
 </dt>
 <dd>
    
    <p>the content would not <a>conform</a> if that <a>technology</a> is turned off or is not supported
    </p>
    
-</dd>
\ No newline at end of file
+</dd>
diff --git a/guidelines/terms/20/role.html b/guidelines/terms/20/role.html
index 0f766933cf..438e82e558 100644
--- a/guidelines/terms/20/role.html
+++ b/guidelines/terms/20/role.html
@@ -1,12 +1,12 @@
-<dt><dfn>role</dfn></dt>
+<dt><dfn id="dfn-role">role</dfn></dt>
 <dd>
    
    <p>text or number by which software can identify the function of a component within Web
       content
    </p>
    
-   <p class="example">A number that indicates whether an image functions as a hyperlink, command button,
+   <aside class="example"><p>A number that indicates whether an image functions as a hyperlink, command button,
       or check box.
-   </p>
+   </p></aside>
    
 </dd>
diff --git a/guidelines/terms/20/same-functionality.html b/guidelines/terms/20/same-functionality.html
index 03480888a5..a88c26f451 100644
--- a/guidelines/terms/20/same-functionality.html
+++ b/guidelines/terms/20/same-functionality.html
@@ -1,12 +1,12 @@
-<dt><dfn>same functionality</dfn></dt>
+<dt><dfn id="dfn-same-functionality">same functionality</dfn></dt>
 <dd>
    
    <p>same result when used</p>
    
-   <p class="example">A submit "search" button on one Web page and a "find" button on another Web page may
+   <aside class="example"><p>A submit "search" button on one Web page and a "find" button on another Web page may
       both have a field to enter a term and list topics in the Web site related to the term
       submitted. In this case, they would have the same functionality but would not be labeled
       consistently.
-   </p>
+   </p></aside>
    
 </dd>
diff --git a/guidelines/terms/20/same-relative-order.html b/guidelines/terms/20/same-relative-order.html
index 9f2b117e1f..fc9575195a 100644
--- a/guidelines/terms/20/same-relative-order.html
+++ b/guidelines/terms/20/same-relative-order.html
@@ -1,4 +1,4 @@
-<dt><dfn>same relative order</dfn></dt>
+<dt><dfn id="dfn-same-relative-order">same relative order</dfn></dt>
 <dd>
    
    <p>same position relative to other items</p>
diff --git a/guidelines/terms/20/satisfies-a-success-criterion.html b/guidelines/terms/20/satisfies-a-success-criterion.html
index 00c5714c9f..9290f95ea1 100644
--- a/guidelines/terms/20/satisfies-a-success-criterion.html
+++ b/guidelines/terms/20/satisfies-a-success-criterion.html
@@ -1,6 +1,6 @@
-<dt><dfn data-lt="satisfies">satisfies a success criterion</dfn></dt>
+<dt><dfn id="dfn-satisfies" data-lt="satisfies">satisfies a success criterion</dfn></dt>
 <dd>
    
    <p>the success criterion does not evaluate to 'false' when applied to the page</p>
    
-</dd>
\ No newline at end of file
+</dd>
diff --git a/guidelines/terms/20/section.html b/guidelines/terms/20/section.html
index 600179f9a3..2be0ce728c 100644
--- a/guidelines/terms/20/section.html
+++ b/guidelines/terms/20/section.html
@@ -1,4 +1,4 @@
-<dt><dfn>section</dfn></dt>
+<dt><dfn id="dfn-section">section</dfn></dt>
 <dd>
    
    <p>a self-contained portion of written content that deals with one or more related topics
diff --git a/guidelines/terms/20/set-of-web-pages.html b/guidelines/terms/20/set-of-web-pages.html
index 01c5b084c2..bf154da489 100644
--- a/guidelines/terms/20/set-of-web-pages.html
+++ b/guidelines/terms/20/set-of-web-pages.html
@@ -1,4 +1,4 @@
-<dt><dfn>set of Web pages</dfn></dt>
+<dt><dfn id="dfn-set-of-web-pages">set of Web pages</dfn></dt>
 <dd>
    
    <p>collection of <a>Web pages</a> that share a common purpose and that are created by the same author, group or organization.</p>
diff --git a/guidelines/terms/20/sign-language-interpretation.html b/guidelines/terms/20/sign-language-interpretation.html
index 0273357ba2..01ce1d2c35 100644
--- a/guidelines/terms/20/sign-language-interpretation.html
+++ b/guidelines/terms/20/sign-language-interpretation.html
@@ -1,4 +1,4 @@
-<dt><dfn>sign language interpretation</dfn></dt>
+<dt><dfn id="dfn-sign-language-interpretation">sign language interpretation</dfn></dt>
 <dd>
    
    <p>translation of one language, generally a spoken language, into a <a>sign language</a></p>
diff --git a/guidelines/terms/20/sign-language.html b/guidelines/terms/20/sign-language.html
index 08af0dd1b5..3d93532688 100644
--- a/guidelines/terms/20/sign-language.html
+++ b/guidelines/terms/20/sign-language.html
@@ -1,8 +1,8 @@
-<dt><dfn>sign language</dfn></dt>
+<dt><dfn id="dfn-sign-language">sign language</dfn></dt>
 <dd>
    
    <p>a language using combinations of movements of the hands and arms, facial expressions,
       or body positions to convey meaning
    </p>
    
-</dd>
\ No newline at end of file
+</dd>
diff --git a/guidelines/terms/20/specific-sensory-experience.html b/guidelines/terms/20/specific-sensory-experience.html
index 3762854baf..1b9d67f820 100644
--- a/guidelines/terms/20/specific-sensory-experience.html
+++ b/guidelines/terms/20/specific-sensory-experience.html
@@ -1,10 +1,10 @@
-<dt><dfn>specific sensory experience</dfn></dt>
+<dt><dfn id="dfn-specific-sensory-experience">specific sensory experience</dfn></dt>
 <dd>
    
    <p>a sensory experience that is not purely decorative and does not primarily convey important
       information or perform a function
    </p>
    
-   <p class="example">Examples include a performance of a flute solo, works of visual art etc.</p>
+   <aside class="example"><p>Examples include a performance of a flute solo, works of visual art etc.</p></aside>
    
 </dd>
diff --git a/guidelines/terms/20/structure.html b/guidelines/terms/20/structure.html
index acc6615aec..3001e18196 100644
--- a/guidelines/terms/20/structure.html
+++ b/guidelines/terms/20/structure.html
@@ -1,4 +1,4 @@
-<dt><dfn>structure</dfn></dt>
+<dt><dfn id="dfn-structure">structure</dfn></dt>
 <dd>
    
    <ol>
@@ -11,4 +11,4 @@
       
    </ol>
    
-</dd>
\ No newline at end of file
+</dd>
diff --git a/guidelines/terms/20/supplemental-content.html b/guidelines/terms/20/supplemental-content.html
index 69b3344d49..25cd2d5478 100644
--- a/guidelines/terms/20/supplemental-content.html
+++ b/guidelines/terms/20/supplemental-content.html
@@ -1,17 +1,17 @@
-<dt><dfn data-lt="supplementary content">supplemental content</dfn></dt>
+<dt><dfn id="dfn-supplementary-content" data-lt="supplementary content">supplemental content</dfn></dt>
 <dd>
    
    <p>additional <a>content</a> that illustrates or clarifies the primary content
    </p>
    
-   <p class="example">An audio version of a <a>Web page</a>.
-   </p>
+   <aside class="example"><p>An audio version of a <a>Web page</a>.
+   </p></aside>
    
-   <p class="example">An illustration of a complex <a>process</a>.
-   </p>
+   <aside class="example"><p>An illustration of a complex <a>process</a>.
+   </p></aside>
    
-   <p class="example">A paragraph summarizing the major outcomes and recommendations made in a research
+   <aside class="example"><p>A paragraph summarizing the major outcomes and recommendations made in a research
       study.
-   </p>
+   </p></aside>
    
 </dd>
diff --git a/guidelines/terms/20/synchronized-media.html b/guidelines/terms/20/synchronized-media.html
index b6e40a9648..d05980741e 100644
--- a/guidelines/terms/20/synchronized-media.html
+++ b/guidelines/terms/20/synchronized-media.html
@@ -1,8 +1,8 @@
-<dt><dfn>synchronized media</dfn></dt>
+<dt><dfn id="dfn-synchronized-media">synchronized media</dfn></dt>
 <dd>
    
    <p><a>audio</a> or <a>video</a> synchronized with another format for presenting information and/or with time-based
       interactive components, unless the media is a <a>media alternative for text</a> that is clearly labeled as such
    </p>
    
-</dd>
\ No newline at end of file
+</dd>
diff --git a/guidelines/terms/20/technology.html b/guidelines/terms/20/technology.html
index 9edb054581..08c0a2aa16 100644
--- a/guidelines/terms/20/technology.html
+++ b/guidelines/terms/20/technology.html
@@ -1,4 +1,4 @@
-<dt><dfn data-lt="technologies|web technology|web content technology|web content technologies">technology</dfn> (Web content)
+<dt><dfn id="dfn-technologies" data-lt="technologies|web technology|web content technology|web content technologies">technology</dfn> (Web content)
 </dt>
 <dd>
    
@@ -14,8 +14,8 @@
       applications.
    </p>
    
-   <p class="example">Some common examples of Web content technologies include HTML, CSS, SVG, PNG, PDF,
+   <aside class="example"><p>Some common examples of Web content technologies include HTML, CSS, SVG, PNG, PDF,
       Flash, and JavaScript.
-   </p>
+   </p></aside>
    
 </dd>
diff --git a/guidelines/terms/20/text-alternative.html b/guidelines/terms/20/text-alternative.html
index 7829cf34c1..7b4f286670 100644
--- a/guidelines/terms/20/text-alternative.html
+++ b/guidelines/terms/20/text-alternative.html
@@ -1,4 +1,4 @@
-<dt><dfn>text alternative</dfn></dt>
+<dt><dfn id="dfn-text-alternative">text alternative</dfn></dt>
 <dd>
    
    <p><a>Text</a> that is programmatically associated with <a>non-text content</a> or referred to from text that is programmatically associated with non-text content.
@@ -6,11 +6,11 @@
       from the non-text content.
    </p>
    
-   <p class="example">An image of a chart is described in text in the paragraph after the chart. The short
+   <aside class="example"><p>An image of a chart is described in text in the paragraph after the chart. The short
       text alternative for the chart indicates that a description follows.
-   </p>
+   </p></aside>
    
-   <p class="note">Refer to <a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/conformance">Understanding Text Alternatives</a> for more information.
+   <p class="note">Refer to <a href="https://www.w3.org/WAI/WCAG21/Understanding/conformance#text-alternatives">Understanding Text Alternatives</a> for more information.
    </p>
    
 </dd>
diff --git a/guidelines/terms/20/text.html b/guidelines/terms/20/text.html
index 19f23ab853..c6c8eace40 100644
--- a/guidelines/terms/20/text.html
+++ b/guidelines/terms/20/text.html
@@ -1,6 +1,6 @@
-<dt><dfn>text</dfn></dt>
+<dt><dfn id="dfn-text">text</dfn></dt>
 <dd>
    
    <p>sequence of characters that can be <a>programmatically determined</a>, where the sequence is expressing something in <a>human language</a></p>
    
-</dd>
\ No newline at end of file
+</dd>
diff --git a/guidelines/terms/20/used-in-an-unusual-or-restricted-way.html b/guidelines/terms/20/used-in-an-unusual-or-restricted-way.html
index 03d6e87f2e..f8628fde38 100644
--- a/guidelines/terms/20/used-in-an-unusual-or-restricted-way.html
+++ b/guidelines/terms/20/used-in-an-unusual-or-restricted-way.html
@@ -1,14 +1,14 @@
-<dt><dfn>used in an unusual or restricted way</dfn></dt>
+<dt><dfn id="dfn-used-in-an-unusual-or-restricted-way">used in an unusual or restricted way</dfn></dt>
 <dd>
    
    <p>words used in such a way that requires users to know exactly which definition to apply
       in order to understand the content correctly
    </p>
    
-   <p class="example">The term "gig" means something different if it occurs in a discussion of music concerts
+   <aside class="example"><p>The term "gig" means something different if it occurs in a discussion of music concerts
       than it does in article about computer hard drive space, but the appropriate definition
       can be determined from context. By contrast, the word "text" is used in a very specific
       way in WCAG 2.1, so a definition is supplied in the glossary.
-   </p>
+   </p></aside>
    
 </dd>
diff --git a/guidelines/terms/20/user-agent.html b/guidelines/terms/20/user-agent.html
index 89d5b46c91..0f05961d96 100644
--- a/guidelines/terms/20/user-agent.html
+++ b/guidelines/terms/20/user-agent.html
@@ -1,9 +1,9 @@
-<dt><dfn data-lt="user agents">user agent</dfn></dt>
+<dt><dfn id="dfn-user-agents" data-lt="user agents">user agent</dfn></dt>
 <dd>
    
    <p>any software that retrieves and presents Web content for users</p>
    
-   <p class="example">Web browsers, media players, plug-ins, and other programs — including <a>assistive technologies</a> — that help in retrieving, rendering, and interacting with Web content.
-   </p>
+   <aside class="example"><p>Web browsers, media players, plug-ins, and other programs — including <a>assistive technologies</a> — that help in retrieving, rendering, and interacting with Web content.
+   </p></aside>
    
 </dd>
diff --git a/guidelines/terms/20/user-controllable.html b/guidelines/terms/20/user-controllable.html
index 8e6bdc7456..5cfa38a219 100644
--- a/guidelines/terms/20/user-controllable.html
+++ b/guidelines/terms/20/user-controllable.html
@@ -1,10 +1,10 @@
-<dt><dfn>user-controllable</dfn></dt>
+<dt><dfn id="dfn-user-controllable">user-controllable</dfn></dt>
 <dd>
    
    <p>data that is intended to be accessed by users</p>
    
    <p class="note">This does not refer to such things as Internet logs and search engine monitoring data.</p>
    
-   <p class="example">Name and address fields for a user's account.</p>
+   <aside class="example"><p>Name and address fields for a user's account.</p></aside>
    
 </dd>
diff --git a/guidelines/terms/20/user-interface-component.html b/guidelines/terms/20/user-interface-component.html
index 3a9faa487c..d8671cb958 100644
--- a/guidelines/terms/20/user-interface-component.html
+++ b/guidelines/terms/20/user-interface-component.html
@@ -1,4 +1,4 @@
-<dt><dfn data-lt="user interface components">user interface component</dfn></dt>
+<dt><dfn id="dfn-user-interface-components" data-lt="user interface components">user interface component</dfn></dt>
 <dd>
    
    <p>a part of the content that is perceived by users as a single control for a distinct
@@ -18,9 +18,9 @@
       called "user interface element".
    </p>
    
-   <p class="example">An applet has a "control" that can be used to move through content by line or page
+   <aside class="example"><p>An applet has a "control" that can be used to move through content by line or page
       or random access. Since each of these would need to have a name and be settable independently,
       they would each be a "user interface component."
-   </p>
+   </p></aside>
    
 </dd>
diff --git a/guidelines/terms/20/video-only.html b/guidelines/terms/20/video-only.html
index 9dccbcfb40..2f4b2dbdbb 100644
--- a/guidelines/terms/20/video-only.html
+++ b/guidelines/terms/20/video-only.html
@@ -1,7 +1,7 @@
-<dt><dfn>video-only</dfn></dt>
+<dt><dfn id="dfn-video-only">video-only</dfn></dt>
 <dd>
    
    <p>a time-based presentation that contains only <a>video</a> (no <a>audio</a> and no interaction)
    </p>
    
-</dd>
\ No newline at end of file
+</dd>
diff --git a/guidelines/terms/20/video.html b/guidelines/terms/20/video.html
index b5b3e21135..3365eef51b 100644
--- a/guidelines/terms/20/video.html
+++ b/guidelines/terms/20/video.html
@@ -1,4 +1,4 @@
-<dt><dfn>video</dfn></dt>
+<dt><dfn id="dfn-video">video</dfn></dt>
 <dd>
    
    <p>the technology of moving or sequenced pictures or images</p>
diff --git a/guidelines/terms/20/viewport.html b/guidelines/terms/20/viewport.html
index ed138d7a67..26db33dc02 100644
--- a/guidelines/terms/20/viewport.html
+++ b/guidelines/terms/20/viewport.html
@@ -1,4 +1,4 @@
-<dt><dfn>viewport</dfn></dt>
+<dt><dfn id="dfn-viewport">viewport</dfn></dt>
 <dd>
    
    <p>object in which the user agent presents content</p>
diff --git a/guidelines/terms/20/visually-customized.html b/guidelines/terms/20/visually-customized.html
index 3ae6cecc67..e39ceb9841 100644
--- a/guidelines/terms/20/visually-customized.html
+++ b/guidelines/terms/20/visually-customized.html
@@ -1,6 +1,6 @@
-<dt><dfn>visually customized</dfn></dt>
+<dt><dfn id="dfn-visually-customized">visually customized</dfn></dt>
 <dd>
    
    <p>the font, size, color, and background can be set</p>
    
-</dd>
\ No newline at end of file
+</dd>
diff --git a/guidelines/terms/20/web-page.html b/guidelines/terms/20/web-page.html
index 57c69b4c42..bdbf6b5a07 100644
--- a/guidelines/terms/20/web-page.html
+++ b/guidelines/terms/20/web-page.html
@@ -1,4 +1,4 @@
-<dt><dfn data-lt="web page(s)|web pages">Web page</dfn></dt>
+<dt><dfn id="dfn-web-page-s" data-lt="web page(s)|web pages">Web page</dfn></dt>
 <dd>
    
    <p>a non-embedded resource obtained from a single URI using HTTP plus any other resources
@@ -12,24 +12,24 @@
       within the scope of conformance to be considered a Web page.
    </p>
    
-   <p class="example">A Web resource including all embedded images and media.</p>
+   <aside class="example"><p>A Web resource including all embedded images and media.</p></aside>
    
-   <p class="example">A Web mail program built using Asynchronous JavaScript and XML (AJAX). The program
+   <aside class="example"><p>A Web mail program built using Asynchronous JavaScript and XML (AJAX). The program
       lives entirely at http://example.com/mail, but includes an inbox, a contacts area
       and a calendar. Links or buttons are provided that cause the inbox, contacts, or calendar
       to display, but do not change the URI of the page as a whole.
-   </p>
+   </p></aside>
    
-   <p class="example">A customizable portal site, where users can choose content to display from a set of
+   <aside class="example"><p>A customizable portal site, where users can choose content to display from a set of
       different content modules.
-   </p>
+   </p></aside>
    
-   <p class="example">When you enter "http://shopping.example.com/" in your browser, you enter a movie-like
+   <aside class="example"><p>When you enter "http://shopping.example.com/" in your browser, you enter a movie-like
       interactive shopping environment where you visually move around in a store dragging
       products off of the shelves around you and into a visual shopping cart in front of
       you. Clicking on a product causes it to be demonstrated with a specification sheet
       floating alongside. This might be a single-page Web site or just one page within a
       Web site.
-   </p>
+   </p></aside>
    
 </dd>
diff --git a/guidelines/terms/21/css-pixel.html b/guidelines/terms/21/css-pixel.html
index 38df6f3e00..e746e45dd9 100644
--- a/guidelines/terms/21/css-pixel.html
+++ b/guidelines/terms/21/css-pixel.html
@@ -1,4 +1,4 @@
-<dt><dfn data-lt="CSS pixels">CSS pixel</dfn></dt>
+<dt><dfn id="dfn-css-pixels" data-lt="CSS pixels">CSS pixel</dfn></dt>
 <dd>
    					
    <p>visual angle of about 0.0213 degrees</p>
@@ -6,7 +6,7 @@
    <p>A CSS pixel is the canonical unit of measure for all lengths and measurements in CSS.
       This unit is density-independent, and distinct from actual hardware pixels present
       in a display. User agents and operating systems should ensure that a CSS pixel is
-      set as closely as possible to the <a href="https://www.w3.org/TR/css3-values/#reference-pixel">CSS Values and Units Module Level 3 reference pixel</a> [[!css3-values]], which takes into account the physical dimensions of the display
+      set as closely as possible to the <a href="https://www.w3.org/TR/css3-values/#reference-pixel">CSS Values and Units Module Level 3 reference pixel</a> [[css3-values]], which takes into account the physical dimensions of the display
       and the assumed viewing distance (factors that cannot be determined by content authors).
    </p>
    				
diff --git a/guidelines/terms/21/down-event.html b/guidelines/terms/21/down-event.html
index fa6fe4b5e6..68779ef1c3 100644
--- a/guidelines/terms/21/down-event.html
+++ b/guidelines/terms/21/down-event.html
@@ -1,4 +1,4 @@
-<dt><dfn>down-event</dfn></dt>
+<dt><dfn id="dfn-down-event">down-event</dfn></dt>
 <dd>
   <p>platform event that occurs  when the trigger stimulus of a pointer is depressed</p>
 	<p>The down-event may have different names on different platforms, such as "touchstart" or "mousedown".</p>
diff --git a/guidelines/terms/21/keyboard-shortcut.html b/guidelines/terms/21/keyboard-shortcut.html
index fbb2e7ab69..a83d043351 100644
--- a/guidelines/terms/21/keyboard-shortcut.html
+++ b/guidelines/terms/21/keyboard-shortcut.html
@@ -1,4 +1,4 @@
-<dt><dfn data-lt="keyboard shortcuts">keyboard shortcut</dfn></dt>
+<dt><dfn id="dfn-keyboard-shortcuts" data-lt="keyboard shortcuts">keyboard shortcut</dfn></dt>
 <dd>
    					
    <p>alternative means of triggering an action by the pressing of one or more keys</p>
diff --git a/guidelines/terms/21/motion-animation.html b/guidelines/terms/21/motion-animation.html
index 854af17600..9da81ba9c0 100644
--- a/guidelines/terms/21/motion-animation.html
+++ b/guidelines/terms/21/motion-animation.html
@@ -1,7 +1,7 @@
-<dt><dfn>motion animation</dfn></dt>
+<dt><dfn id="dfn-motion-animation">motion animation</dfn></dt>
 <dd>
    					
    <p>addition of steps between conditions to create the illusion of movement or to give a sense of a smooth transition</p>
-	<p class="example">For example, an element which moves into place or changes size while appearing is considered to be animated. An element which appears instantly without transitioning is not using animation. Motion animation does not include changes of color, blurring or opacity.</p>
+	<aside class="example"><p>For example, an element which moves into place or changes size while appearing is considered to be animated. An element which appears instantly without transitioning is not using animation. Motion animation does not include changes of color, blurring, or opacity which do not change the perceived size, shape, or position of the element.</p></aside>
    				
 </dd>
diff --git a/guidelines/terms/21/pointer-input.html b/guidelines/terms/21/pointer-input.html
index 46f3e559cd..c5077569c3 100644
--- a/guidelines/terms/21/pointer-input.html
+++ b/guidelines/terms/21/pointer-input.html
@@ -1,11 +1,10 @@
-<dt><dfn data-lt="pointer inputs">pointer input</dfn></dt>
+<dt><dfn id="dfn-pointer-inputs" data-lt="pointer inputs">pointer input</dfn></dt>
 <dd>
    					
-   <p>input device that can target a specific coordinate (or set of coordinates) on a screen,
+   <p>input from a device that can target a specific coordinate (or set of coordinates) on a screen,
       such as a mouse, pen, or touch contact
    </p>
-   					
-   <p>See also <a href="https://www.w3.org/TR/pointerevents/#dfn-pointer">Pointer Events pointer definition</a> [[!pointerevents]].
-   </p>
+   <p class="note">See the <a href="https://www.w3.org/TR/pointerevents/#dfn-pointer">Pointer Events
+      definition for "pointer"</a> [[pointerevents]].</p>
    				
-</dd>
\ No newline at end of file
+</dd>
diff --git a/guidelines/terms/21/region.html b/guidelines/terms/21/region.html
index 40f15ff844..bc94cc0675 100644
--- a/guidelines/terms/21/region.html
+++ b/guidelines/terms/21/region.html
@@ -1,4 +1,4 @@
-<dt><dfn data-lt="regions">region</dfn></dt>
+<dt><dfn id="dfn-regions" data-lt="regions">region</dfn></dt>
 <dd>
   <p>perceivable, programmatically determined section of content</p>
   <p class="note">In HTML, any area designated with a landmark role would be a region.</p>
diff --git a/guidelines/terms/21/set-of-web-pages.html b/guidelines/terms/21/set-of-web-pages.html
index 6e5c4fa0bc..f435a86c58 100644
--- a/guidelines/terms/21/set-of-web-pages.html
+++ b/guidelines/terms/21/set-of-web-pages.html
@@ -1,14 +1,15 @@
-<dt><dfn>set of web pages</dfn></dt>
+<dt><dfn id="dfn-set-of-web-pages">set of web pages</dfn></dt>
 <dd>
    
    <p>collection of <a>web pages</a> that share a common purpose and that are created by the same author, group or organization
    </p>
    
-   <p class="example">Examples include a publication which is split across multiple Web pages, where each page contains
-      one chapter or other significant section of the work. The publication is logically
-      a single contiguous unit, and contains navigation features that enable access to the
-      full set of pages.
-   </p>
+   <aside class="example"><p>Examples include:</p>
+      <ul>
+      <li>a publication which is split across multiple Web pages, where each page contains one chapter or other significant section of the work. The publication is logically a single contiguous unit, and contains navigation features that enable access to the full set of pages.</li>
+      <li>an e-commerce website shows products in a set of Web pages that all share the same navigation and identification. However, when progressing to the checkout process, the template changes; the navigation and other elements are removed, so the pages in that process are functionally and visually different. The checkout pages are not part of the set of product pages.</li>
+      <li>a blog on a sub-domain (e.g. blog.example.com) which has a different navigation and is authored by a distinct set of people from the pages on the primary domain (example.com).</li>
+   </ul></aside>
 
   <p class="note">Different language versions would be considered different sets of Web pages.</p>
    
diff --git a/guidelines/terms/21/single-pointer.html b/guidelines/terms/21/single-pointer.html
index 56caeadf43..7f0001968a 100644
--- a/guidelines/terms/21/single-pointer.html
+++ b/guidelines/terms/21/single-pointer.html
@@ -1,7 +1,6 @@
-<dt><dfn>single pointer</dfn></dt>
+<dt><dfn id="dfn-single-pointer">single pointer</dfn></dt>
 <dd>
-   	
-   <p>pointer input that operates with one point of contact with the screen, including single taps and clicks, double-taps and clicks, long presses, and path-based gestures</p>
-  				
+   <p>an input that only targets a single point on the page/screen at a time – such as a mouse, single finger on a touch screen, or stylus.</p>
+   <p class="note">In contrast to single pointer inputs, multipoint interactions involve the use of two or more pointers at the same time – such as two finger interactions on a touchscreen, or the simultaneous use of a mouse and stylus.</p>
 </dd>
 
diff --git a/guidelines/terms/21/state.html b/guidelines/terms/21/state.html
index 4a93c03953..6910f5c3bc 100644
--- a/guidelines/terms/21/state.html
+++ b/guidelines/terms/21/state.html
@@ -1,4 +1,4 @@
-<dt><dfn data-lt="states">state</dfn></dt>
+<dt><dfn id="dfn-states" data-lt="states">state</dfn></dt>
 <dd>
    					
    <p>dynamic property expressing characteristics of a user interface component that may change in response to user action or automated processes</p>
diff --git a/guidelines/terms/21/status-message.html b/guidelines/terms/21/status-message.html
index 108359d7ed..12711848c1 100644
--- a/guidelines/terms/21/status-message.html
+++ b/guidelines/terms/21/status-message.html
@@ -1,4 +1,4 @@
-<dt><dfn data-lt="status messages">status message</dfn></dt>
+<dt><dfn id="dfn-status-messages" data-lt="status messages">status message</dfn></dt>
 <dd>
    					
    <p>change in content that is not a <a>change of context</a>, and that provides information to the user on the success or results of an action, on the waiting state of an application, on the progress of a process, or on the existence of errors</p>
diff --git a/guidelines/terms/21/style-property.html b/guidelines/terms/21/style-property.html
index 4b63029de8..2c21fba7c2 100644
--- a/guidelines/terms/21/style-property.html
+++ b/guidelines/terms/21/style-property.html
@@ -1,4 +1,4 @@
-<dt><dfn data-lt="style properties">style property</dfn></dt>
+<dt><dfn id="dfn-style-properties" data-lt="style properties">style property</dfn></dt>
   <dd>
   <p>property whose value determines the presentation (e.g. font, color, size, location, padding, volume, synthesized speech prosody) of
  content elements as they are rendered (e.g. onscreen, via loudspeaker, via braille display) by user agents</p>
diff --git a/guidelines/terms/21/target.html b/guidelines/terms/21/target.html
index b978f6ead0..ab36d394cc 100644
--- a/guidelines/terms/21/target.html
+++ b/guidelines/terms/21/target.html
@@ -1,7 +1,7 @@
-<dt><dfn>target</dfn></dt>
+<dt><dfn id="dfn-targets" data-lt="targets">target</dfn></dt>
 <dd>
    					
      <p>region of the display that will accept a pointer action, such as the interactive area of a user interface component</p> 
-    <p class="note">If two or more touch targets are overlapping, the overlapping area should not be included in the measurement of the target size, except when the overlapping targets perform the same action or open the same page.</p>
+    <p class="note">If two or more targets are overlapping, the overlapping area should not be included in the measurement of the target size, except when the overlapping targets perform the same action or open the same page.</p>
   
 </dd>
diff --git a/guidelines/terms/21/up-event.html b/guidelines/terms/21/up-event.html
index 548214dea7..03ae7c20c6 100644
--- a/guidelines/terms/21/up-event.html
+++ b/guidelines/terms/21/up-event.html
@@ -1,4 +1,4 @@
-<dt><dfn>up-event</dfn></dt>
+<dt><dfn id="dfn-up-event">up-event</dfn></dt>
 <dd>
   <p>platform event that occurs  when the trigger stimulus of a pointer is released</p>
 	<p>The up-event may have different names on different platforms, such as "touchend" or "mouseup".</p>
diff --git a/guidelines/terms/21/user-inactivity.html b/guidelines/terms/21/user-inactivity.html
index 3bb0ef71d7..df98f1eb5c 100644
--- a/guidelines/terms/21/user-inactivity.html
+++ b/guidelines/terms/21/user-inactivity.html
@@ -1,4 +1,4 @@
-<dt><dfn>user inactivity</dfn></dt>
+<dt><dfn id="dfn-user-inactivity">user inactivity</dfn></dt>
 <dd>
   <p>any continuous period of time where no user actions occur</p>
 	<p>The method of tracking will be determined by the web site or application.</p>
diff --git a/guidelines/terms/22/cognitive-function-test.html b/guidelines/terms/22/cognitive-function-test.html
index c7b507578a..757a5161a8 100644
--- a/guidelines/terms/22/cognitive-function-test.html
+++ b/guidelines/terms/22/cognitive-function-test.html
@@ -1,11 +1,11 @@
-<dt class="new"><dfn data-lt="cognitive function test">Cognitive function test</dfn></dt>
+<dt class="new"><dfn id="dfn-cognitive-function-test" data-lt="cognitive function test">Cognitive function test</dfn></dt>
 <dd class="new">
    					
    <p class="change">New</p>
    					
    <p>A task that requires the user to remember, manipulate, or transcribe information. Examples include, but are not limited to:</p>
    <ul>
-       <li>memorization, such as remembering a username, password, set of characters, images, or patterns. The common identifiers name, e-mail, and phone number are not considered cognitive function tests as they are personal to the user and consistent across websites;</li>
+       <li>memorization, such as remembering a username, password, set of characters, images, or patterns. The common identifiers name, e-mail, and phone number are not considered cognitive function tests as they are personal to the user and consistent across Web sites;</li>
        <li>transcription, such as typing in characters;</li>
        <li>use of correct spelling;</li>
        <li>performance of calculations;</li>
diff --git a/guidelines/terms/22/dragging-movement.html b/guidelines/terms/22/dragging-movement.html
index c52a96ff10..ded6881024 100644
--- a/guidelines/terms/22/dragging-movement.html
+++ b/guidelines/terms/22/dragging-movement.html
@@ -1,7 +1,8 @@
-<dt class="new"><dfn data-lt="dragging movements">dragging movement</dfn></dt>
+<dt class="new"><dfn id="dfn-dragging-movements" data-lt="dragging movements">dragging movement</dfn></dt>
 <dd class="new">
 	<p class="change">New</p>
    					
-   <p>an operation where the pointer engages with an element on the down event and the element (or a representation of its position) follows the pointer</p>
-   <p class="note">The element could be, for example, a list item, a text element, or an image.</p>
+  <p>an operation where the pointer engages with an element on the <a>down-event</a> and the element (or a representation of its position) follows the pointer until an <a>up-event</a></p>
+   
+   <p class="note">Examples of draggable elements include list items, text elements, and images.</p>
 </dd>
diff --git a/guidelines/terms/22/electronic-publication.html b/guidelines/terms/22/electronic-publication.html
deleted file mode 100644
index 96b6c73c5c..0000000000
--- a/guidelines/terms/22/electronic-publication.html
+++ /dev/null
@@ -1,6 +0,0 @@
-<dt class="new">electronic publication</dfn></dt>
-<dd class="new">
-	<p class="change">New</p>
-   					
-   <p>Content presented as a collection of related articles, document in the form of a book, textbook, magazine article, journal, a single journal article that is presented as having different pages, scholarly journal, or newspaper article in digital format.</p>
-</dd>
diff --git a/guidelines/terms/22/encloses.html b/guidelines/terms/22/encloses.html
new file mode 100644
index 0000000000..b601c7661c
--- /dev/null
+++ b/guidelines/terms/22/encloses.html
@@ -0,0 +1,7 @@
+<dt class="new"><dfn id="dfn-enclose" data-lt="enclose">encloses</dfn></dt>
+<dd class="new">
+	<p class="change">New</p>
+   					
+   <p>solidly bounds or surrounds</p>
+   				
+</dd>
diff --git a/guidelines/terms/22/focus-indication-area.html b/guidelines/terms/22/focus-indication-area.html
deleted file mode 100644
index 0403f47654..0000000000
--- a/guidelines/terms/22/focus-indication-area.html
+++ /dev/null
@@ -1,7 +0,0 @@
-<dt class="new"><dfn>Focus indication area</dfn></dt>
-<dd class="new">
-	<p class="change">New</p>	
-   <p>the pixels that change between the focused and unfocused states of a <a>User Interface Component</a>
-    </p>
-   				
-</dd>
\ No newline at end of file
diff --git a/guidelines/terms/22/focus-indicator.html b/guidelines/terms/22/focus-indicator.html
new file mode 100644
index 0000000000..70875a6939
--- /dev/null
+++ b/guidelines/terms/22/focus-indicator.html
@@ -0,0 +1,9 @@
+<dt class="new"><dfn id="dfn-focus-indicator">focus indicator</dfn></dt>
+<dd class="new">
+	<p class="change">New</p>	
+
+   <p>pixels that are changed to visually indicate when a <a>user interface component</a> is in a focused <a>state</a>
+
+    </p>
+   				
+</dd>
diff --git a/guidelines/terms/22/focus.html b/guidelines/terms/22/focus.html
deleted file mode 100644
index 7e0f982b53..0000000000
--- a/guidelines/terms/22/focus.html
+++ /dev/null
@@ -1,8 +0,0 @@
-<dt class="new"><dfn data-lt="Focus">Focus</dfn></dt>
-<dd class="new">
-	<p class="change">New</p>
-   					
-   <p>The point where the user’s input interacts with the web page. For example, tabbing through a page with a keyboard moves the focus. Clicking or tapping on the page would move the focus for mouse and touchscreen usage. Different inputs can be used by a user, but at any one time there would be one point of focus for the user with the last input used.
-    </p>
-   				
-</dd>
diff --git a/guidelines/terms/22/minimum-bounding-box.html b/guidelines/terms/22/minimum-bounding-box.html
new file mode 100644
index 0000000000..60627b5b59
--- /dev/null
+++ b/guidelines/terms/22/minimum-bounding-box.html
@@ -0,0 +1,6 @@
+<dt class="new"><dfn id="dfn-bounding-boxes" data-lt="bounding boxes|bounding box">minimum bounding box</dfn></dt>
+<dd class="new">
+	<p class="change">New</p>	
+   <p>the smallest enclosing rectangle aligned to the horizontal axis within which all the points of a shape lie. For components which wrap onto multiple lines as part of a sentence or block of text (such as hypertext links), the bounding box is based on how the component would appear on a single line.</p>
+</dd>
+
diff --git a/guidelines/terms/22/pagebreak-locators.html b/guidelines/terms/22/pagebreak-locators.html
deleted file mode 100644
index dc263eeb18..0000000000
--- a/guidelines/terms/22/pagebreak-locators.html
+++ /dev/null
@@ -1,16 +0,0 @@
-<dt class="new">pagebreak locators</dfn></dt>
-<dd class="new">
-	<p class="change">New</p>
-   					
-   <p>Visual and/or programmatic markers that are arranged in a meaningful sequence to determine the location of a page in relation to others in the set.</p>
-   <p>Examples would be:</p>
-		<ul>
-			<li>Corresponding pages between a print book and a digital version of the same publication. (A digital pixel precise manifestation of the published print version)</li>
-			<li>Page numbering in the print version of an ebook</li>
-			<li>Page numbering in an electronic version of the ebook</li>
-			<li>A digital book is published is with no print equivalent and page break locators are inserted which supports direct navigation across platforms and form factors.</li> 
-			<li>Virtual page</li>  
-			<li>Synchronizing reading people with different form factors and platforms, screen sizes, can be on the same page.</li>
-		</ul>
-
-</dd>
diff --git a/guidelines/terms/22/perimeter.html b/guidelines/terms/22/perimeter.html
new file mode 100644
index 0000000000..c0c323bb5c
--- /dev/null
+++ b/guidelines/terms/22/perimeter.html
@@ -0,0 +1,7 @@
+<dt class="new"><dfn id="dfn-perimeter">perimeter</dfn></dt>
+<dd class="new">
+	<p class="change">New</p>	
+   <p>continuous line forming the boundary of a shape not including shared pixels, or the <a>minimum bounding box</a>, whichever is shortest.</p>
+  <aside class="example"><p>The perimeter calculation for a 2 CSS pixel perimeter around a rectangle is 4<em>h</em>+4<em>w</em>, where <em>h</em> is the height and <em>w</em> is the width. For a 2 CSS pixel perimeter around a circle it is 4𝜋<em>r</em>.</p></aside>
+</dd>
+
diff --git a/guidelines/terms/22/single-page-apps.html b/guidelines/terms/22/single-page-apps.html
deleted file mode 100644
index 3c6e34dfea..0000000000
--- a/guidelines/terms/22/single-page-apps.html
+++ /dev/null
@@ -1,5 +0,0 @@
-<dt class="new" data-lt="single page Web applications"><dfn>Single page Web application</dfn></dt>
-<dd class="new">
-	<p class="change">New</p>	
-   <p>Pages obtained from a single URI that provide navigation which changes the meaning of the Web page</p>		
-</dd>
diff --git a/guidelines/wcag.json b/guidelines/wcag.json
new file mode 100644
index 0000000000..8e1bdcf24e
--- /dev/null
+++ b/guidelines/wcag.json
@@ -0,0 +1,8551 @@
+
+		{
+			"principles": [
+			
+		{
+			"id": "WCAG2:perceivable",
+			"num": "1",
+			"versions": ["2.0", "2.1", "2.2"],
+			"handle": "Perceivable",
+			"title": "Information and user interface components must be presentable to users in ways they can perceive.",
+			"guidelines": [
+				
+		{
+			"id": "WCAG2:text-alternatives",
+			"alt_id": ["text-equiv"],
+			"num": "1.1",
+			"versions": ["2.0", "2.1", "2.2"],
+			"handle": "Text Alternatives",
+			"title": "Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language.",
+			"successcriteria": [
+				
+		{
+			"id": "WCAG2:non-text-content",
+			"alt_id": ["text-equiv-all"],
+			"num": "1.1.1",
+			"versions": ["2.0", "2.1", "2.2"],
+			"level": "A",
+			"handle": "Non-text Content",
+			"title": "All non-text content that is presented to the user has a text alternative that serves the equivalent purpose, except for the situations listed below.",
+		
+			"details": [{
+				"type": "ulist",
+				"items": [
+					
+		{
+			"handle": "Controls, Input",
+			"text": "If non-text content is a control or accepts user input, then it has a name that describes its purpose. (Refer to Success Criterion 4.1.2 for additional requirements for controls and content that accepts user input.)"
+		},
+		{
+			"handle": "Time-Based Media",
+			"text": "If non-text content is time-based media, then text alternatives at least provide descriptive identification of the non-text content. (Refer to Guideline 1.2 for additional requirements for media.)"
+		},
+		{
+			"handle": "Test",
+			"text": "If non-text content is a test or exercise that would be invalid if presented in text, then text alternatives at least provide descriptive identification of the non-text content."
+		},
+		{
+			"handle": "Sensory",
+			"text": "If non-text content is primarily intended to create a specific sensory experience, then text alternatives at least provide descriptive identification of the non-text content."
+		},
+		{
+			"handle": "CAPTCHA",
+			"text": "If the purpose of non-text content is to confirm that content is being accessed by a person rather than a computer, then text alternatives that identify and describe the purpose of the non-text content are provided, and alternative forms of CAPTCHA using output modes for different types of sensory perception are provided to accommodate different disabilities."
+		},
+		{
+			"handle": "Decoration, Formatting, Invisible",
+			"text": "If non-text content is pure decoration, is used only for visual formatting, or is not presented to users, then it is implemented in a way that it can be ignored by assistive technology."
+		}
+				]
+			}],
+		
+			"techniques": [
+		{"sufficient": [
+		
+			{"situations": [
+			
+		{"title": "Situation A: If a short description can serve the same purpose and present the same information as the non-text content:",
+		"techniques": [
+			
+		{
+		"id":
+		"TECH:G94"
+		,
+		"title": 
+		"Providing short text alternative for non-text content that serves the same purpose and presents the same information as the non-text content"
+		}
+		,
+		{
+		"id":
+		"TECH:ARIA6"
+		,
+		"title": 
+		"Using aria-label to provide labels for objects"
+		}
+		,
+		{
+		"id":
+		"TECH:ARIA10"
+		,
+		"title": 
+		"Using aria-labelledby to provide a text alternative for non-text content"
+		}
+		,
+		{
+		"id":
+		"TECH:G196"
+		,
+		"title": 
+		"Using a text alternative on one item within a group of images that describes all items in the group"
+		}
+		,
+		{
+		"id":
+		"TECH:H2"
+		,
+		"title": 
+		"Combining adjacent image and text links for the same resource"
+		}
+		,
+		{
+		"id":
+		"TECH:H37"
+		,
+		"title": 
+		"Using alt attributes on img elements"
+		}
+		,
+		{
+		"id":
+		"TECH:H53"
+		,
+		"title": 
+		"Using the body of the object element"
+		}
+		,
+		{
+		"id":
+		"TECH:H86"
+		,
+		"title": 
+		"Providing text alternatives for emojis, emoticons, ASCII art, and leetspeak"
+		}
+		,
+		{
+		"id":
+		"TECH:PDF1"
+		,
+		"title": 
+		"Applying text alternatives to images with the Alt entry in PDF documents"
+		}
+		
+		]},
+		{"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": [
+			
+		{
+		"id":
+		"TECH:G95"
+		,
+		"title": 
+		"Providing short text alternatives that provide a brief description of the non-text content"
+		}
+		,
+		{
+		"id":
+		"TECH:ARIA6"
+		,
+		"title": 
+		"Using aria-label to provide labels for objects"
+		}
+		,
+		{
+		"id":
+		"TECH:ARIA10"
+		,
+		"title": 
+		"Using aria-labelledby to provide a text alternative for non-text content"
+		}
+		,
+		{
+		"id":
+		"TECH:G196"
+		,
+		"title": 
+		"Using a text alternative on one item within a group of images that describes all items in the group"
+		}
+		,
+		{
+		"id":
+		"TECH:H2"
+		,
+		"title": 
+		"Combining adjacent image and text links for the same resource"
+		}
+		,
+		{
+		"id":
+		"TECH:H35"
+		,
+		"title": 
+		""
+		}
+		,
+		{
+		"id":
+		"TECH:H37"
+		,
+		"title": 
+		"Using alt attributes on img elements"
+		}
+		,
+		{
+		"id":
+		"TECH:H53"
+		,
+		"title": 
+		"Using the body of the object element"
+		}
+		,
+		{
+		"id":
+		"TECH:H86"
+		,
+		"title": 
+		"Providing text alternatives for emojis, emoticons, ASCII art, and leetspeak"
+		}
+		,
+		{
+		"id":
+		"TECH:PDF1"
+		,
+		"title": 
+		"Applying text alternatives to images with the Alt entry in PDF documents"
+		}
+		,
+		{
+		"id":
+		"TECH:ARIA15"
+		,
+		"title": 
+		"Using aria-describedby to provide descriptions of images"
+		}
+		,
+		{
+		"id":
+		"TECH:G73"
+		,
+		"title": 
+		"Providing a long description in another location with a link to it that is immediately adjacent to the non-text content"
+		}
+		,
+		{
+		"id":
+		"TECH:G74"
+		,
+		"title": 
+		"Providing a long description in text near the non-text content, with a reference to the location of the long description in the short description"
+		}
+		,
+		{
+		"id":
+		"TECH:G92"
+		,
+		"title": 
+		"Providing long description for non-text content that serves the same purpose and presents the same information"
+		}
+		,
+		{
+		"id":
+		"TECH:H53"
+		,
+		"title": 
+		"Using the body of the object element"
+		}
+		
+		]},
+		{"title": "Situation C: If non-text content is a control or accepts user input:",
+		"techniques": [
+			
+		{
+		"id":
+		"TECH:G82"
+		,
+		"title": 
+		"Providing a text alternative that identifies the purpose of the non-text content"
+		}
+		,
+		{
+		"id":
+		"TECH:ARIA6"
+		,
+		"title": 
+		"Using aria-label to provide labels for objects"
+		}
+		,
+		{
+		"id":
+		"TECH:ARIA9"
+		,
+		"title": 
+		"Using aria-labelledby to concatenate a label from several text nodes"
+		}
+		,
+		{
+		"id":
+		"TECH:H24"
+		,
+		"title": 
+		"Providing text alternatives for the area elements of image maps"
+		}
+		,
+		{
+		"id":
+		"TECH:H30"
+		,
+		"title": 
+		"Providing link text that describes the purpose of a link for anchor elements"
+		}
+		,
+		{
+		"id":
+		"TECH:H36"
+		,
+		"title": 
+		"Using alt attributes on images used as submit buttons"
+		}
+		,
+		{
+		"id":
+		"TECH:H44"
+		,
+		"title": 
+		"Using label elements to associate text labels with form controls"
+		}
+		,
+		{
+		"id":
+		"TECH:H65"
+		,
+		"title": 
+		"Using the title attribute to identify form controls when the label element cannot be used"
+		}
+		
+		]},
+		{"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": [
+			
+		{
+		"id":
+		"TECH:future-non-text-content-1"
+		,
+		"title": 
+		"Providing a descriptive label using one of the following :"
+		}
+		,
+		{
+		"id":
+		"TECH:G68"
+		,
+		"title": 
+		"Providing a short text alternative that describes the purpose of live audio-only and live video-only content"
+		}
+		,
+		{
+		"id":
+		"TECH:G100"
+		,
+		"title": 
+		"Providing a short text alternative which is the accepted name or a descriptive name of the non-text content"
+		}
+		,
+		{
+		"id":
+		"TECH:ARIA6"
+		,
+		"title": 
+		"Using aria-label to provide labels for objects"
+		}
+		,
+		{
+		"id":
+		"TECH:ARIA10"
+		,
+		"title": 
+		"Using aria-labelledby to provide a text alternative for non-text content"
+		}
+		,
+		{
+		"id":
+		"TECH:G196"
+		,
+		"title": 
+		"Using a text alternative on one item within a group of images that describes all items in the group"
+		}
+		,
+		{
+		"id":
+		"TECH:H2"
+		,
+		"title": 
+		"Combining adjacent image and text links for the same resource"
+		}
+		,
+		{
+		"id":
+		"TECH:H37"
+		,
+		"title": 
+		"Using alt attributes on img elements"
+		}
+		,
+		{
+		"id":
+		"TECH:H53"
+		,
+		"title": 
+		"Using the body of the object element"
+		}
+		,
+		{
+		"id":
+		"TECH:H86"
+		,
+		"title": 
+		"Providing text alternatives for emojis, emoticons, ASCII art, and leetspeak"
+		}
+		,
+		{
+		"id":
+		"TECH:PDF1"
+		,
+		"title": 
+		"Applying text alternatives to images with the Alt entry in PDF documents"
+		}
+		
+		]},
+		{"title": "Situation E: If non-text content is a CAPTCHA:",
+		"techniques": [
+			
+		{"and": [
+		
+		{
+		"id":
+		"TECH:G143"
+		,
+		"title": 
+		"Providing a text alternative that describes the purpose of the CAPTCHA"
+		}
+		,
+		{
+		"id":
+		"TECH:G144"
+		,
+		"title": 
+		"Ensuring that the Web Page contains another CAPTCHA serving the same purpose using a different modality"
+		}
+		
+		]}
+		
+		]},
+		{"title": "Situation F: If the non-text content should be ignored by assistive technology:",
+		"techniques": [
+			
+		{
+		"id":
+		"TECH:future-non-text-content-1"
+		,
+		"title": 
+		"Implementing or marking the non-text content so that it will be ignored by assistive technology using one of the following :"
+		}
+		,
+		{
+		"id":
+		"TECH:C9"
+		,
+		"title": 
+		"Using CSS to include decorative images"
+		}
+		,
+		{
+		"id":
+		"TECH:H67"
+		,
+		"title": 
+		"Using null alt text and no title attribute on img elements for images that assistive technology should ignore"
+		}
+		,
+		{
+		"id":
+		"TECH:PDF4"
+		,
+		"title": 
+		"Hiding decorative images with the Artifact tag in PDF documents"
+		}
+		
+		]}
+			]}
+		
+		]},
+		{"advisory": [
+		
+		]},
+		{"failure": [
+		
+		{
+		"id":
+		"TECH:F3"
+		,
+		"title": 
+		"Failure of Success Criterion 1.1.1 due to using CSS to include images that convey important information"
+		}
+		,
+		{
+		"id":
+		"TECH:F13"
+		,
+		"title": 
+		"Failure of Success Criterion 1.1.1 and 1.4.1 due to having a text alternative that does not include information that is conveyed by color differences in the image"
+		}
+		,
+		{
+		"id":
+		"TECH:F20"
+		,
+		"title": 
+		"Failure of Success Criterion 1.1.1 and 4.1.2 due to not updating text alternatives when changes to non-text content occur"
+		}
+		,
+		{
+		"id":
+		"TECH:F30"
+		,
+		"title": 
+		"Failure of Success Criterion 1.1.1 and 1.2.1 due to using text alternatives that are not alternatives (e.g., filenames or placeholder text)"
+		}
+		,
+		{
+		"id":
+		"TECH:F38"
+		,
+		"title": 
+		"Failure of Success Criterion 1.1.1 due to not marking up decorative images in HTML in a way that allows assistive technology to ignore them"
+		}
+		,
+		{
+		"id":
+		"TECH:F39"
+		,
+		"title": 
+		"Failure of Success Criterion 1.1.1 due to providing a text alternative that is not null (e.g., alt=\"spacer\" or alt=\"image\") for images that should be ignored by assistive technology"
+		}
+		,
+		{
+		"id":
+		"TECH:F65"
+		,
+		"title": 
+		"Failure of Success Criterion 1.1.1 due to omitting the alt attribute or text alternative on img elements, area elements, and input elements of type \"image\""
+		}
+		,
+		{
+		"id":
+		"TECH:F67"
+		,
+		"title": 
+		"Failure of Success Criterion 1.1.1 and 1.2.1 due to providing long descriptions for non-text content that does not serve the same purpose or does not present the same information"
+		}
+		,
+		{
+		"id":
+		"TECH:F71"
+		,
+		"title": 
+		"Failure of Success Criterion 1.1.1 due to using text look-alikes to represent text without providing a text alternative"
+		}
+		,
+		{
+		"id":
+		"TECH:F72"
+		,
+		"title": 
+		"Failure of Success Criterion 1.1.1 due to using ASCII art without providing a text alternative"
+		}
+		
+		]}]
+		}
+			],
+			"techniques": []
+		},
+		{
+			"id": "WCAG2:time-based-media",
+			"alt_id": ["media-equiv"],
+			"num": "1.2",
+			"versions": ["2.0", "2.1", "2.2"],
+			"handle": "Time-based Media",
+			"title": "Provide alternatives for time-based media.",
+			"successcriteria": [
+				
+		{
+			"id": "WCAG2:audio-only-and-video-only-prerecorded",
+			"alt_id": ["media-equiv-av-only-alt"],
+			"num": "1.2.1",
+			"versions": ["2.0", "2.1", "2.2"],
+			"level": "A",
+			"handle": "Audio-only and Video-only (Prerecorded)",
+			"title": "For prerecorded audio-only and prerecorded video-only media, the following are true, except when the audio or video is a media alternative for text and is clearly labeled as such:",
+		
+			"details": [{
+				"type": "ulist",
+				"items": [
+					
+		{
+			"handle": "Prerecorded Audio-only",
+			"text": "An alternative for time-based media is provided that presents equivalent information for prerecorded audio-only content."
+		},
+		{
+			"handle": "Prerecorded Video-only",
+			"text": "Either an alternative for time-based media or an audio track is provided that presents equivalent information for prerecorded video-only content."
+		}
+				]
+			}],
+		
+			"techniques": [
+		{"sufficient": [
+		
+			{"situations": [
+			
+		{"title": "Situation A: If the content is prerecorded audio-only:",
+		"techniques": [
+			
+		{
+		"id":
+		"TECH:G158"
+		,
+		"title": 
+		"Providing an alternative for time-based media for audio-only content"
+		}
+		
+		]},
+		{"title": "Situation B: If the content is prerecorded video-only:",
+		"techniques": [
+			
+		{
+		"id":
+		"TECH:G159"
+		,
+		"title": 
+		"Providing an alternative for time-based media for video-only content"
+		}
+		,
+		{
+		"id":
+		"TECH:G166"
+		,
+		"title": 
+		"Providing audio that describes the important video content and describing it as such"
+		}
+		
+		]}
+			]}
+		
+		]},
+		{"advisory": [
+		
+		{
+		"id":
+		"TECH:H96"
+		,
+		"title": 
+		"Using the track element to provide audio descriptions"
+		}
+		
+		]},
+		{"failure": [
+		
+		{
+		"id":
+		"TECH:F30"
+		,
+		"title": 
+		"Failure of Success Criterion 1.1.1 and 1.2.1 due to using text alternatives that are not alternatives (e.g., filenames or placeholder text)"
+		}
+		,
+		{
+		"id":
+		"TECH:F67"
+		,
+		"title": 
+		"Failure of Success Criterion 1.1.1 and 1.2.1 due to providing long descriptions for non-text content that does not serve the same purpose or does not present the same information"
+		}
+		
+		]}]
+		},
+		{
+			"id": "WCAG2:captions-prerecorded",
+			"alt_id": ["media-equiv-captions"],
+			"num": "1.2.2",
+			"versions": ["2.0", "2.1", "2.2"],
+			"level": "A",
+			"handle": "Captions (Prerecorded)",
+			"title": "Captions are provided for all prerecorded audio content in synchronized media, except when the media is a media alternative for text and is clearly labeled as such.",
+		
+			"techniques": [
+		{"sufficient": [
+		
+		{
+		"id":
+		"TECH:G93"
+		,
+		"title": 
+		"Providing open (always visible) captions"
+		}
+		,
+		{
+		"id":
+		"TECH:G87"
+		,
+		"title": 
+		"Providing closed captions"
+		}
+		,
+		{
+		"id":
+		"TECH:G87"
+		,
+		"title": 
+		"Providing closed captions"
+			,
+		"using": [
+		
+		{
+		"id":
+		"TECH:SM11"
+		,
+		"title": 
+		"Providing captions through synchronized text streams in SMIL 1.0"
+		}
+		,
+		{
+		"id":
+		"TECH:SM12"
+		,
+		"title": 
+		"Providing captions through synchronized text streams in SMIL 2.0"
+		}
+		,
+		{
+		"id":
+		"TECH:H95"
+		,
+		"title": 
+		"Using the track element to provide captions"
+		}
+		
+		]
+	
+		}
+		
+		]},
+		{"advisory": [
+		
+		]},
+		{"failure": [
+		
+		{
+		"id":
+		"TECH:F8"
+		,
+		"title": 
+		"Failure of Success Criterion 1.2.2 due to captions omitting some dialogue or important sound effects"
+		}
+		,
+		{
+		"id":
+		"TECH:F75"
+		,
+		"title": 
+		"Failure of Success Criterion 1.2.2 by providing synchronized media without captions when the synchronized media presents more information than is presented on the page"
+		}
+		,
+		{
+		"id":
+		"TECH:F74"
+		,
+		"title": 
+		"Failure of Success Criterion 1.2.2 and 1.2.8 due to not labeling a synchronized media alternative to text as an alternative"
+		}
+		
+		]}]
+		},
+		{
+			"id": "WCAG2:audio-description-or-media-alternative-prerecorded",
+			"alt_id": ["media-equiv-audio-desc"],
+			"num": "1.2.3",
+			"versions": ["2.0", "2.1", "2.2"],
+			"level": "A",
+			"handle": "Audio Description or Media Alternative (Prerecorded)",
+			"title": "An alternative for time-based media or audio description of the prerecorded video content is provided for synchronized media, except when the media is a media alternative for text and is clearly labeled as such.",
+		
+			"techniques": [
+		{"sufficient": [
+		
+		{
+		"id":
+		"TECH:G69"
+		,
+		"title": 
+		"Providing an alternative for time based media"
+			,
+		"using": [
+		
+		{
+		"id":
+		"TECH:G58"
+		,
+		"title": 
+		"Placing a link to the alternative for time-based media immediately next to the non-text content"
+		}
+		
+		]
+	
+		}
+		,
+		{
+		"id":
+		"TECH:future-audio-description-or-media-alternative-prerecorded-1"
+		,
+		"title": 
+		"Linking to the alternative for time-based media using one of the following techniques"
+			,
+		"using": [
+		
+		{
+		"id":
+		"TECH:H53"
+		,
+		"title": 
+		"Using the body of the object element"
+		}
+		
+		]
+	
+		}
+		,
+		{
+		"id":
+		"TECH:G78"
+		,
+		"title": 
+		"Providing a second, user-selectable, audio track that includes audio descriptions"
+		}
+		,
+		{
+		"id":
+		"TECH:G173"
+		,
+		"title": 
+		"Providing a version of a movie with audio descriptions"
+			,
+		"using": [
+		
+		{
+		"id":
+		"TECH:SM6"
+		,
+		"title": 
+		"Providing audio description in SMIL 1.0"
+		}
+		,
+		{
+		"id":
+		"TECH:SM7"
+		,
+		"title": 
+		"Providing audio description in SMIL 2.0"
+		}
+		,
+		{
+		"id":
+		"TECH:future-audio-description-or-media-alternative-prerecorded-1"
+		,
+		"title": 
+		"Using any player that supports audio and video"
+		}
+		
+		]
+	
+		}
+		,
+		{
+		"id":
+		"TECH:G8"
+		,
+		"title": 
+		"Providing a movie with extended audio descriptions"
+			,
+		"using": [
+		
+		{
+		"id":
+		"TECH:SM1"
+		,
+		"title": 
+		"Adding extended audio description in SMIL 1.0"
+		}
+		,
+		{
+		"id":
+		"TECH:SM2"
+		,
+		"title": 
+		"Adding extended audio description in SMIL 2.0"
+		}
+		,
+		{
+		"id":
+		"TECH:future-audio-description-or-media-alternative-prerecorded-1"
+		,
+		"title": 
+		"Using any player that supports audio and video"
+		}
+		
+		]
+	
+		}
+		,
+		{
+		"id":
+		"TECH:G203"
+		,
+		"title": 
+		"Using a static text alternative to describe a talking head video"
+		}
+		
+		]},
+		{"advisory": [
+		
+		{
+		"id":
+		"TECH:H96"
+		,
+		"title": 
+		"Using the track element to provide audio descriptions"
+		}
+		
+		]},
+		{"failure": [
+		
+		]}]
+		},
+		{
+			"id": "WCAG2:captions-live",
+			"alt_id": ["media-equiv-real-time-captions"],
+			"num": "1.2.4",
+			"versions": ["2.0", "2.1", "2.2"],
+			"level": "AA",
+			"handle": "Captions (Live)",
+			"title": "Captions are provided for all live audio content in synchronized media.",
+		
+			"techniques": [
+		{"sufficient": [
+		
+		{"and": [
+		
+		{
+		"id":
+		"TECH:G9"
+		,
+		"title": 
+		"Creating captions for live synchronized media"
+		}
+		,
+		{
+		"id":
+		"TECH:G93"
+		,
+		"title": 
+		"Providing open (always visible) captions"
+		}
+		
+		]}
+		,
+		{"and": [
+		
+		{
+		"id":
+		"TECH:G9"
+		,
+		"title": 
+		"Creating captions for live synchronized media"
+		}
+		,
+		{
+		"id":
+		"TECH:G87"
+		,
+		"title": 
+		"Providing closed captions"
+		}
+		
+		]}
+		,
+		{"and": [
+		
+		{
+		"id":
+		"TECH:G9"
+		,
+		"title": 
+		"Creating captions for live synchronized media"
+			,
+		"using": [
+		
+		{
+		"id":
+		"TECH:SM11"
+		,
+		"title": 
+		"Providing captions through synchronized text streams in SMIL 1.0"
+		}
+		,
+		{
+		"id":
+		"TECH:SM12"
+		,
+		"title": 
+		"Providing captions through synchronized text streams in SMIL 2.0"
+		}
+		
+		]
+	
+		}
+		,
+		{
+		"id":
+		"TECH:G87"
+		,
+		"title": 
+		"Providing closed captions"
+			,
+		"using": [
+		
+		{
+		"id":
+		"TECH:SM11"
+		,
+		"title": 
+		"Providing captions through synchronized text streams in SMIL 1.0"
+		}
+		,
+		{
+		"id":
+		"TECH:SM12"
+		,
+		"title": 
+		"Providing captions through synchronized text streams in SMIL 2.0"
+		}
+		
+		]
+	
+		}
+		
+		]}
+		
+		]},
+		{"advisory": [
+		
+		]},
+		{"failure": [
+		
+		]}]
+		},
+		{
+			"id": "WCAG2:audio-description-prerecorded",
+			"alt_id": ["media-equiv-audio-desc-only"],
+			"num": "1.2.5",
+			"versions": ["2.0", "2.1", "2.2"],
+			"level": "AA",
+			"handle": "Audio Description (Prerecorded)",
+			"title": "Audio description is provided for all prerecorded video content in synchronized media.",
+		
+			"techniques": [
+		{"sufficient": [
+		
+		{
+		"id":
+		"TECH:G78"
+		,
+		"title": 
+		"Providing a second, user-selectable, audio track that includes audio descriptions"
+		}
+		,
+		{
+		"id":
+		"TECH:G173"
+		,
+		"title": 
+		"Providing a version of a movie with audio descriptions"
+			,
+		"using": [
+		
+		{
+		"id":
+		"TECH:SM6"
+		,
+		"title": 
+		"Providing audio description in SMIL 1.0"
+		}
+		,
+		{
+		"id":
+		"TECH:SM7"
+		,
+		"title": 
+		"Providing audio description in SMIL 2.0"
+		}
+		,
+		{
+		"id":
+		"TECH:future-audio-description-prerecorded-1"
+		,
+		"title": 
+		"Using any player that supports audio and video"
+		}
+		
+		]
+	
+		}
+		,
+		{
+		"id":
+		"TECH:G8"
+		,
+		"title": 
+		"Providing a movie with extended audio descriptions"
+			,
+		"using": [
+		
+		{
+		"id":
+		"TECH:SM1"
+		,
+		"title": 
+		"Adding extended audio description in SMIL 1.0"
+		}
+		,
+		{
+		"id":
+		"TECH:SM2"
+		,
+		"title": 
+		"Adding extended audio description in SMIL 2.0"
+		}
+		,
+		{
+		"id":
+		"TECH:future-audio-description-prerecorded-1"
+		,
+		"title": 
+		"Using any player that supports audio and video"
+		}
+		
+		]
+	
+		}
+		,
+		{
+		"id":
+		"TECH:G203"
+		,
+		"title": 
+		"Using a static text alternative to describe a talking head video"
+		}
+		
+		]},
+		{"advisory": [
+		
+		{
+		"id":
+		"TECH:H96"
+		,
+		"title": 
+		"Using the track element to provide audio descriptions"
+		}
+		
+		]},
+		{"failure": [
+		
+		]}]
+		},
+		{
+			"id": "WCAG2:sign-language-prerecorded",
+			"alt_id": ["media-equiv-sign"],
+			"num": "1.2.6",
+			"versions": ["2.0", "2.1", "2.2"],
+			"level": "AAA",
+			"handle": "Sign Language (Prerecorded)",
+			"title": "Sign language interpretation is provided for all prerecorded audio content in synchronized media.",
+		
+			"techniques": [
+		{"sufficient": [
+		
+		{
+		"id":
+		"TECH:G54"
+		,
+		"title": 
+		"Including a sign language interpreter in the video stream"
+		}
+		,
+		{
+		"id":
+		"TECH:G81"
+		,
+		"title": 
+		"Providing a synchronized video of the sign language interpreter that can be displayed in a different viewport or overlaid on the image by the player"
+			,
+		"using": [
+		
+		{
+		"id":
+		"TECH:SM13"
+		,
+		"title": 
+		"Providing sign language interpretation through synchronized video streams in SMIL 1.0"
+		}
+		,
+		{
+		"id":
+		"TECH:SM14"
+		,
+		"title": 
+		"Providing sign language interpretation through synchronized video streams in SMIL 2.0"
+		}
+		
+		]
+	
+		}
+		
+		]},
+		{"advisory": [
+		
+		]},
+		{"failure": [
+		
+		]}]
+		},
+		{
+			"id": "WCAG2:extended-audio-description-prerecorded",
+			"alt_id": ["media-equiv-extended-ad"],
+			"num": "1.2.7",
+			"versions": ["2.0", "2.1", "2.2"],
+			"level": "AAA",
+			"handle": "Extended Audio Description (Prerecorded)",
+			"title": "Where pauses in foreground audio are insufficient to allow audio descriptions to convey the sense of the video, extended audio description is provided for all prerecorded video content in synchronized media.",
+		
+			"techniques": [
+		{"sufficient": [
+		
+		{
+		"id":
+		"TECH:G8"
+		,
+		"title": 
+		"Providing a movie with extended audio descriptions"
+			,
+		"using": [
+		
+		{
+		"id":
+		"TECH:SM1"
+		,
+		"title": 
+		"Adding extended audio description in SMIL 1.0"
+		}
+		,
+		{
+		"id":
+		"TECH:SM2"
+		,
+		"title": 
+		"Adding extended audio description in SMIL 2.0"
+		}
+		,
+		{
+		"id":
+		"TECH:future-extended-audio-description-prerecorded-1"
+		,
+		"title": 
+		"Using any player that supports audio and video"
+		}
+		
+		]
+	
+		}
+		
+		]},
+		{"advisory": [
+		
+		{
+		"id":
+		"TECH:H96"
+		,
+		"title": 
+		"Using the track element to provide audio descriptions"
+		}
+		
+		]},
+		{"failure": [
+		
+		]}]
+		},
+		{
+			"id": "WCAG2:media-alternative-prerecorded",
+			"alt_id": ["media-equiv-text-doc"],
+			"num": "1.2.8",
+			"versions": ["2.0", "2.1", "2.2"],
+			"level": "AAA",
+			"handle": "Media Alternative (Prerecorded)",
+			"title": "An alternative for time-based media is provided for all prerecorded synchronized media and for all prerecorded video-only media.",
+		
+			"techniques": [
+		{"sufficient": [
+		
+			{"situations": [
+			
+		{"title": "Situation A: If the content is prerecorded synchronized media:",
+		"techniques": [
+			
+		{
+		"id":
+		"TECH:G69"
+		,
+		"title": 
+		"Providing an alternative for time based media"
+			,
+		"using": [
+		
+		{
+		"id":
+		"TECH:G58"
+		,
+		"title": 
+		"Placing a link to the alternative for time-based media immediately next to the non-text content"
+		}
+		
+		]
+	
+		}
+		,
+		{
+		"id":
+		"TECH:future-media-alternative-prerecorded-1"
+		,
+		"title": 
+		"Linking to the alternative for time-based media using one of the following techniques"
+			,
+		"using": [
+		
+		{
+		"id":
+		"TECH:H53"
+		,
+		"title": 
+		"Using the body of the object element"
+		}
+		
+		]
+	
+		}
+		
+		]},
+		{"title": "Situation B: If the content is prerecorded video-only:",
+		"techniques": [
+			
+		{
+		"id":
+		"TECH:G159"
+		,
+		"title": 
+		"Providing an alternative for time-based media for video-only content"
+		}
+		
+		]}
+			]}
+		
+		]},
+		{"advisory": [
+		
+		]},
+		{"failure": [
+		
+		{
+		"id":
+		"TECH:F74"
+		,
+		"title": 
+		"Failure of Success Criterion 1.2.2 and 1.2.8 due to not labeling a synchronized media alternative to text as an alternative"
+		}
+		
+		]}]
+		},
+		{
+			"id": "WCAG2:audio-only-live",
+			"alt_id": ["media-equiv-live-audio-only"],
+			"num": "1.2.9",
+			"versions": ["2.0", "2.1", "2.2"],
+			"level": "AAA",
+			"handle": "Audio-only (Live)",
+			"title": "An alternative for time-based media that presents equivalent information for live audio-only content is provided.",
+		
+			"techniques": [
+		{"sufficient": [
+		
+		{
+		"id":
+		"TECH:G151"
+		,
+		"title": 
+		"Providing a link to a text transcript of a prepared statement or script if the script is followed"
+		}
+		,
+		{
+		"id":
+		"TECH:G150"
+		,
+		"title": 
+		"Providing text based alternatives for live audio-only content"
+		}
+		,
+		{
+		"id":
+		"TECH:G157"
+		,
+		"title": 
+		"Incorporating a live audio captioning service into a Web page"
+		}
+		
+		]},
+		{"advisory": [
+		
+		]},
+		{"failure": [
+		
+		]}]
+		}
+			],
+			"techniques": []
+		},
+		{
+			"id": "WCAG2:adaptable",
+			"alt_id": ["content-structure-separation"],
+			"num": "1.3",
+			"versions": ["2.0", "2.1", "2.2"],
+			"handle": "Adaptable",
+			"title": "Create content that can be presented in different ways (for example simpler layout) without losing information or structure.",
+			"successcriteria": [
+				
+		{
+			"id": "WCAG2:info-and-relationships",
+			"alt_id": ["content-structure-separation-programmatic"],
+			"num": "1.3.1",
+			"versions": ["2.0", "2.1", "2.2"],
+			"level": "A",
+			"handle": "Info and Relationships",
+			"title": "Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.",
+		
+			"techniques": [
+		{"sufficient": [
+		
+			{"situations": [
+			
+		{"title": "Situation A: The technology provides semantic structure to make information and relationships conveyed through presentation programmatically determinable:",
+		"techniques": [
+			
+		{
+		"id":
+		"TECH:ARIA11"
+		,
+		"title": 
+		"Using ARIA landmarks to identify regions of a page"
+		}
+		,
+		{
+		"id":
+		"TECH:H101"
+		,
+		"title": 
+		"Using semantic HTML elements to identify regions of a page"
+		}
+		,
+		{
+		"id":
+		"TECH:ARIA12"
+		,
+		"title": 
+		"Using role=heading to identify headings"
+		}
+		,
+		{
+		"id":
+		"TECH:ARIA13"
+		,
+		"title": 
+		"Using aria-labelledby to name regions and landmarks"
+		}
+		,
+		{
+		"id":
+		"TECH:ARIA16"
+		,
+		"title": 
+		"Using aria-labelledby to provide a name for user interface controls"
+		}
+		,
+		{
+		"id":
+		"TECH:ARIA17"
+		,
+		"title": 
+		"Using grouping roles to identify related form controls"
+		}
+		,
+		{
+		"id":
+		"TECH:ARIA20"
+		,
+		"title": 
+		"Using the region role to identify a region of the page"
+		}
+		,
+		{"and": [
+		
+		{
+		"id":
+		"TECH:G115"
+		,
+		"title": 
+		"Using semantic elements to mark up structure"
+		}
+		,
+		{
+		"id":
+		"TECH:H49"
+		,
+		"title": 
+		"Using semantic markup to mark emphasized or special text"
+		}
+		
+		]}
+		,
+		{
+		"id":
+		"TECH:G117"
+		,
+		"title": 
+		"Using text to convey information that is conveyed by variations in presentation of text"
+		}
+		,
+		{
+		"id":
+		"TECH:G140"
+		,
+		"title": 
+		"Separating information and structure from presentation to enable different presentations"
+		}
+		,
+		{
+		"id":
+		"TECH:ARIA24"
+		,
+		"title": 
+		"Semantically identifying a font icon with role=\"img\""
+		}
+		,
+		{
+		"id":
+		"TECH:future-info-and-relationships-1"
+		,
+		"title": 
+		"Making information and relationships conveyed through presentation programmatically determinable using the following techniques:"
+			,
+		"using": [
+		
+		{
+		"id":
+		"TECH:G138"
+		,
+		"title": 
+		"Using semantic markup whenever color cues are used"
+		}
+		,
+		{
+		"id":
+		"TECH:H51"
+		,
+		"title": 
+		"Using table markup to present tabular information"
+		}
+		,
+		{
+		"id":
+		"TECH:PDF6"
+		,
+		"title": 
+		"Using table elements for table markup in PDF Documents"
+		}
+		,
+		{
+		"id":
+		"TECH:PDF20"
+		,
+		"title": 
+		"Using Adobe Acrobat Pro's Table Editor to repair mistagged tables"
+		}
+		,
+		{
+		"id":
+		"TECH:H39"
+		,
+		"title": 
+		"Using caption elements to associate data table captions with data tables"
+		}
+		,
+		{
+		"id":
+		"TECH:H63"
+		,
+		"title": 
+		"Using the scope attribute to associate header cells and data cells in data tables"
+		}
+		,
+		{
+		"id":
+		"TECH:H43"
+		,
+		"title": 
+		"Using id and headers attributes to associate data cells with header cells in data tables"
+		}
+		,
+		{
+		"id":
+		"TECH:H44"
+		,
+		"title": 
+		"Using label elements to associate text labels with form controls"
+		}
+		,
+		{
+		"id":
+		"TECH:H65"
+		,
+		"title": 
+		"Using the title attribute to identify form controls when the label element cannot be used"
+		}
+		,
+		{
+		"id":
+		"TECH:PDF10"
+		,
+		"title": 
+		"Providing labels for interactive form controls in PDF documents"
+		}
+		,
+		{
+		"id":
+		"TECH:PDF12"
+		,
+		"title": 
+		"Providing name, role, value information for form fields in PDF documents"
+		}
+		,
+		{
+		"id":
+		"TECH:H71"
+		,
+		"title": 
+		"Providing a description for groups of form controls using fieldset and legend elements"
+		}
+		,
+		{
+		"id":
+		"TECH:H85"
+		,
+		"title": 
+		"Using optgroup to group option elements inside a select"
+		}
+		,
+		{
+		"id":
+		"TECH:H48"
+		,
+		"title": 
+		"Using ol, ul and dl for lists or groups of links"
+		}
+		,
+		{
+		"id":
+		"TECH:H42"
+		,
+		"title": 
+		"Using h1-h6 to identify headings"
+		}
+		,
+		{
+		"id":
+		"TECH:PDF9"
+		,
+		"title": 
+		"Providing headings by marking content with heading tags in PDF documents"
+		}
+		,
+		{
+		"id":
+		"TECH:SCR21"
+		,
+		"title": 
+		"Using functions of the Document Object Model (DOM) to add content to a page"
+		}
+		,
+		{
+		"id":
+		"TECH:PDF11"
+		,
+		"title": 
+		"Providing links and link text using the Link annotation and the /Link structure element in PDF documents"
+		}
+		,
+		{
+		"id":
+		"TECH:PDF17"
+		,
+		"title": 
+		"Specifying consistent page numbering for PDF documents"
+		}
+		,
+		{
+		"id":
+		"TECH:PDF21"
+		,
+		"title": 
+		"Using List tags for lists in PDF documents"
+		}
+		,
+		{
+		"id":
+		"TECH:H97"
+		,
+		"title": 
+		"Grouping related links using the nav element"
+		}
+		
+		]
+	
+		}
+		
+		]},
+		{"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": [
+			
+		{
+		"id":
+		"TECH:G117"
+		,
+		"title": 
+		"Using text to convey information that is conveyed by variations in presentation of text"
+		}
+		,
+		{
+		"id":
+		"TECH:future-info-and-relationships-1"
+		,
+		"title": 
+		"Making information and relationships conveyed through presentation programmatically determinable or available in text using the following techniques:"
+			,
+		"using": [
+		
+		{
+		"id":
+		"TECH:T1"
+		,
+		"title": 
+		"Using standard text formatting conventions for paragraphs"
+		}
+		,
+		{
+		"id":
+		"TECH:T2"
+		,
+		"title": 
+		"Using standard text formatting conventions for lists"
+		}
+		,
+		{
+		"id":
+		"TECH:T3"
+		,
+		"title": 
+		"Using standard text formatting conventions for headings"
+		}
+		
+		]
+	
+		}
+		
+		]}
+			]}
+		
+		]},
+		{"advisory": [
+		
+		{
+		"id":
+		"TECH:C22"
+		,
+		"title": 
+		"Using CSS to control visual presentation of text"
+		}
+		,
+		{
+		"id":
+		"TECH:G162"
+		,
+		"title": 
+		"Positioning labels to maximize predictability of relationships"
+		}
+		,
+		{
+		"id":
+		"TECH:ARIA1"
+		,
+		"title": 
+		"Using the aria-describedby property to provide a descriptive label for user interface controls"
+		}
+		,
+		{
+		"id":
+		"TECH:ARIA2"
+		,
+		"title": 
+		"Identifying a required field with the aria-required property"
+		}
+		,
+		{
+		"id":
+		"TECH:G141"
+		,
+		"title": 
+		"Organizing a page using headings"
+		}
+		
+		]},
+		{"failure": [
+		
+		{
+		"id":
+		"TECH:F2"
+		,
+		"title": 
+		"Failure of Success Criterion 1.3.1 due to using changes in text presentation to convey information without using the appropriate markup or text"
+		}
+		,
+		{
+		"id":
+		"TECH:F33"
+		,
+		"title": 
+		"Failure of Success Criterion 1.3.1 and 1.3.2 due to using white space characters to create multiple columns in plain text content"
+		}
+		,
+		{
+		"id":
+		"TECH:F34"
+		,
+		"title": 
+		"Failure of Success Criterion 1.3.1 and 1.3.2 due to using white space characters to format tables in plain text content"
+		}
+		,
+		{
+		"id":
+		"TECH:F42"
+		,
+		"title": 
+		"Failure of Success Criteria 1.3.1, 2.1.1, 2.1.3, or 4.1.2 when emulating links"
+		}
+		,
+		{
+		"id":
+		"TECH:F43"
+		,
+		"title": 
+		"Failure of Success Criterion 1.3.1 due to using structural markup in a way that does not represent relationships in the content"
+		}
+		,
+		{
+		"id":
+		"TECH:F46"
+		,
+		"title": 
+		"Failure of Success Criterion 1.3.1 due to using th elements, layout tables"
+		}
+		,
+		{
+		"id":
+		"TECH:F48"
+		,
+		"title": 
+		"Failure of Success Criterion 1.3.1 due to using the pre element to markup tabular information"
+		}
+		,
+		{
+		"id":
+		"TECH:F87"
+		,
+		"title": 
+		"Failure of Success Criterion 1.3.1 due to inserting non-decorative content by using ::before and ::after pseudo-elements and the 'content' property in CSS"
+		}
+		,
+		{
+		"id":
+		"TECH:F90"
+		,
+		"title": 
+		"Failure of Success Criterion 1.3.1 for incorrectly associating table headers and content via the headers and id attributes"
+		}
+		,
+		{
+		"id":
+		"TECH:F91"
+		,
+		"title": 
+		"Failure of Success Criterion 1.3.1 for not correctly marking up table headers"
+		}
+		,
+		{
+		"id":
+		"TECH:F92"
+		,
+		"title": 
+		"Failure of Success Criterion 1.3.1 due to the use of role presentation on content which conveys semantic information"
+		}
+		
+		]}]
+		},
+		{
+			"id": "WCAG2:meaningful-sequence",
+			"alt_id": ["content-structure-separation-sequence"],
+			"num": "1.3.2",
+			"versions": ["2.0", "2.1", "2.2"],
+			"level": "A",
+			"handle": "Meaningful Sequence",
+			"title": "When the sequence in which content is presented affects its meaning, a correct reading sequence can be programmatically determined.",
+		
+			"techniques": [
+		{"sufficient": [
+		
+		{
+		"id":
+		"TECH:G57"
+		,
+		"title": 
+		"Ordering the content in a meaningful sequence"
+		}
+		,
+		{
+		"id":
+		"TECH:G57"
+		,
+		"title": 
+		"Ordering the content in a meaningful sequence"
+			,
+		"using": [
+		
+		{
+		"id":
+		"TECH:H34"
+		,
+		"title": 
+		"Using a Unicode right-to-left mark (RLM) or left-to-right mark (LRM) to mix text direction inline"
+		}
+		,
+		{
+		"id":
+		"TECH:H56"
+		,
+		"title": 
+		"Using the dir attribute on an inline element to resolve problems with nested directional runs"
+		}
+		,
+		{
+		"id":
+		"TECH:C6"
+		,
+		"title": 
+		"Positioning content based on structural markup"
+		}
+		,
+		{
+		"id":
+		"TECH:C8"
+		,
+		"title": 
+		"Using CSS letter-spacing to control spacing within a word"
+		}
+		
+		]
+	
+		}
+		,
+		{
+		"id":
+		"TECH:C27"
+		,
+		"title": 
+		"Making the DOM order match the visual order"
+		}
+		,
+		{
+		"id":
+		"TECH:PDF3"
+		,
+		"title": 
+		"Ensuring correct tab and reading order in PDF documents"
+		}
+		
+		]},
+		{"advisory": [
+		
+		]},
+		{"failure": [
+		
+		{
+		"id":
+		"TECH:F34"
+		,
+		"title": 
+		"Failure of Success Criterion 1.3.1 and 1.3.2 due to using white space characters to format tables in plain text content"
+		}
+		,
+		{
+		"id":
+		"TECH:F33"
+		,
+		"title": 
+		"Failure of Success Criterion 1.3.1 and 1.3.2 due to using white space characters to create multiple columns in plain text content"
+		}
+		,
+		{
+		"id":
+		"TECH:F32"
+		,
+		"title": 
+		"Failure of Success Criterion 1.3.2 due to using white space characters to control spacing within a word"
+		}
+		,
+		{
+		"id":
+		"TECH:F49"
+		,
+		"title": 
+		"Failure of Success Criterion 1.3.2 due to using an HTML layout table that does not make sense when linearized"
+		}
+		,
+		{
+		"id":
+		"TECH:F1"
+		,
+		"title": 
+		"Failure of Success Criterion 1.3.2 due to changing the meaning of content by positioning information with CSS"
+		}
+		
+		]}]
+		},
+		{
+			"id": "WCAG2:sensory-characteristics",
+			"alt_id": ["content-structure-separation-understanding"],
+			"num": "1.3.3",
+			"versions": ["2.0", "2.1", "2.2"],
+			"level": "A",
+			"handle": "Sensory Characteristics",
+			"title": "Instructions provided for understanding and operating content do not rely solely on sensory characteristics of components such as shape, color, size, visual location, orientation, or sound.",
+		
+			"techniques": [
+		{"sufficient": [
+		
+		{
+		"id":
+		"TECH:G96"
+		,
+		"title": 
+		"Providing textual identification of items that otherwise rely only on sensory information to be understood"
+		}
+		
+		]},
+		{"advisory": [
+		
+		]},
+		{"failure": [
+		
+		{
+		"id":
+		"TECH:F14"
+		,
+		"title": 
+		"Failure of Success Criterion 1.3.3 due to identifying content only by its shape or location"
+		}
+		,
+		{
+		"id":
+		"TECH:F26"
+		,
+		"title": 
+		"Failure of Success Criterion 1.3.3 due to using a graphical symbol alone to convey information"
+		}
+		
+		]}]
+		},
+		{
+			"id": "WCAG2:orientation",
+			"alt_id": [],
+			"num": "1.3.4",
+			"versions": ["2.1", "2.2"],
+			"level": "AA",
+			"handle": "Orientation",
+			"title": "Content does not restrict its view and operation to a single display orientation, such as portrait or landscape, unless a specific display orientation is essential.",
+		
+			"techniques": [
+		{"sufficient": [
+		
+		{
+		"id":
+		"TECH:G214"
+		,
+		"title": 
+		"Using a control to allow access to content in different orientations which is otherwise restricted"
+		}
+		
+		]},
+		{"advisory": [
+		
+		]},
+		{"failure": [
+		
+		{
+		"id":
+		"TECH:F97"
+		,
+		"title": 
+		"Failure due to locking the orientation to landscape or portrait view"
+		}
+		,
+		{
+		"id":
+		"TECH:F100"
+		,
+		"title": 
+		"Failure of Success Criterion 1.3.4 due to showing a message asking to reorient device"
+		}
+		
+		]}]
+		},
+		{
+			"id": "WCAG2:identify-input-purpose",
+			"alt_id": [],
+			"num": "1.3.5",
+			"versions": ["2.1", "2.2"],
+			"level": "AA",
+			"handle": "Identify Input Purpose",
+			"title": "The purpose of each input field collecting information about the user can be programmatically determined when:",
+		
+			"techniques": [
+		{"sufficient": [
+		
+		{
+		"id":
+		"TECH:H98"
+		,
+		"title": 
+		"Using HTML 5.2 autocomplete attributes"
+		}
+		
+		]},
+		{"advisory": [
+		
+		]},
+		{"failure": [
+		
+		{
+		"id":
+		"TECH:F107"
+		,
+		"title": 
+		"Failure of Success Criterion 1.3.5 due to incorrect autocomplete attribute values"
+		}
+		
+		]}]
+		},
+		{
+			"id": "WCAG2:identify-purpose",
+			"alt_id": [],
+			"num": "1.3.6",
+			"versions": ["2.1", "2.2"],
+			"level": "AAA",
+			"handle": "Identify Purpose",
+			"title": "In content implemented using markup languages, the purpose of user interface components, icons, and regions can be programmatically determined.",
+		
+			"techniques": [
+		{"sufficient": [
+		
+		{
+		"id":
+		"TECH:future-identify-purpose-1"
+		,
+		"title": 
+		"Programmatically indicating the purpose of icons, regions and user interface components"
+		}
+		,
+		{
+		"id":
+		"TECH:ARIA11"
+		,
+		"title": 
+		"Using ARIA landmarks to identify regions of a page"
+		}
+		,
+		{
+		"id":
+		"TECH:future-identify-purpose-1"
+		,
+		"title": 
+		"Using microdata to markup user interface components (future link)"
+		}
+		
+		]},
+		{"advisory": [
+		
+		{
+		"id":
+		"TECH:future-identify-purpose-1"
+		,
+		"title": 
+		"Enabling user agents to find the version of the content that best fits their needs"
+		}
+		,
+		{
+		"id":
+		"TECH:future-identify-purpose-1"
+		,
+		"title": 
+		"Using semantics to identify important features (e.g., coga-simplification=\"simplest\")"
+		}
+		,
+		{
+		"id":
+		"TECH:future-identify-purpose-1"
+		,
+		"title": 
+		"Using aria-invalid and aria-required"
+		}
+		
+		]},
+		{"failure": [
+		
+		]}]
+		}
+			],
+			"techniques": []
+		},
+		{
+			"id": "WCAG2:distinguishable",
+			"alt_id": ["visual-audio-contrast"],
+			"num": "1.4",
+			"versions": ["2.0", "2.1", "2.2"],
+			"handle": "Distinguishable",
+			"title": "Make it easier for users to see and hear content including separating foreground from background.",
+			"successcriteria": [
+				
+		{
+			"id": "WCAG2:use-of-color",
+			"alt_id": ["visual-audio-contrast-without-color"],
+			"num": "1.4.1",
+			"versions": ["2.0", "2.1", "2.2"],
+			"level": "A",
+			"handle": "Use of Color",
+			"title": "Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.",
+		
+			"techniques": [
+		{"sufficient": [
+		
+			{"situations": [
+			
+		{"title": "Situation A: If the color of particular words, backgrounds, or other content is used to indicate information:",
+		"techniques": [
+			
+		{
+		"id":
+		"TECH:G14"
+		,
+		"title": 
+		"Ensuring that information conveyed by color differences is also available in text"
+		}
+		,
+		{
+		"id":
+		"TECH:G205"
+		,
+		"title": 
+		"Including a text cue for colored form control labels"
+		}
+		,
+		{
+		"id":
+		"TECH:G182"
+		,
+		"title": 
+		"Ensuring that additional visual cues are available when text color differences are used to convey information"
+		}
+		,
+		{
+		"id":
+		"TECH:G183"
+		,
+		"title": 
+		"Using a contrast ratio of 3:1 with surrounding text and providing additional visual cues on hover for links or controls where color alone is used to identify them"
+		}
+		
+		]},
+		{"title": "Situation B: If color is used within an image to convey information:",
+		"techniques": [
+			
+		{
+		"id":
+		"TECH:G111"
+		,
+		"title": 
+		"Using color and pattern"
+		}
+		,
+		{
+		"id":
+		"TECH:G14"
+		,
+		"title": 
+		"Ensuring that information conveyed by color differences is also available in text"
+		}
+		
+		]}
+			]}
+		
+		]},
+		{"advisory": [
+		
+		{
+		"id":
+		"TECH:C15"
+		,
+		"title": 
+		"Using CSS to change the presentation of a user interface component when it receives focus"
+		}
+		
+		]},
+		{"failure": [
+		
+		{
+		"id":
+		"TECH:F13"
+		,
+		"title": 
+		"Failure of Success Criterion 1.1.1 and 1.4.1 due to having a text alternative that does not include information that is conveyed by color differences in the image"
+		}
+		,
+		{
+		"id":
+		"TECH:F73"
+		,
+		"title": 
+		"Failure of Success Criterion 1.4.1 due to creating links that are not visually evident without color vision"
+		}
+		,
+		{
+		"id":
+		"TECH:F81"
+		,
+		"title": 
+		"Failure of Success Criterion 1.4.1 due to identifying required or error fields using color differences only"
+		}
+		
+		]}]
+		},
+		{
+			"id": "WCAG2:audio-control",
+			"alt_id": ["visual-audio-contrast-dis-audio"],
+			"num": "1.4.2",
+			"versions": ["2.0", "2.1", "2.2"],
+			"level": "A",
+			"handle": "Audio Control",
+			"title": "If any audio on a Web page plays automatically for more than 3 seconds, either a mechanism is available to pause or stop the audio, or a mechanism is available to control audio volume independently from the overall system volume level.",
+		
+			"techniques": [
+		{"sufficient": [
+		
+		{
+		"id":
+		"TECH:G60"
+		,
+		"title": 
+		"Playing a sound that turns off automatically within three seconds"
+		}
+		,
+		{
+		"id":
+		"TECH:G170"
+		,
+		"title": 
+		"Providing a control near the beginning of the Web page that turns off sounds that play automatically"
+		}
+		,
+		{
+		"id":
+		"TECH:G171"
+		,
+		"title": 
+		"Playing sounds only on user request"
+		}
+		
+		]},
+		{"advisory": [
+		
+		]},
+		{"failure": [
+		
+		{
+		"id":
+		"TECH:F23"
+		,
+		"title": 
+		"Failure of 1.4.2 due to playing a sound longer than 3 seconds where there is no mechanism to turn it off"
+		}
+		,
+		{
+		"id":
+		"TECH:F93"
+		,
+		"title": 
+		"Failure of Success Criterion 1.4.2 for absence of a way to pause or stop an HTML5 media element that autoplays"
+		}
+		
+		]}]
+		},
+		{
+			"id": "WCAG2:contrast-minimum",
+			"alt_id": ["visual-audio-contrast-contrast"],
+			"num": "1.4.3",
+			"versions": ["2.0", "2.1", "2.2"],
+			"level": "AA",
+			"handle": "Contrast (Minimum)",
+			"title": "The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following:",
+		
+			"details": [{
+				"type": "ulist",
+				"items": [
+					
+		{
+			"handle": "Large Text",
+			"text": "Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;"
+		},
+		{
+			"handle": "Incidental",
+			"text": "Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement."
+		},
+		{
+			"handle": "Logotypes",
+			"text": "Text that is part of a logo or brand name has no contrast requirement."
+		}
+				]
+			}],
+		
+			"techniques": [
+		{"sufficient": [
+		
+			{"situations": [
+			
+		{"title": "Situation A: text is less than 18 point if not bold and less than 14 point if bold",
+		"techniques": [
+			
+		{
+		"id":
+		"TECH:G18"
+		,
+		"title": 
+		"Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of text) and background behind the text"
+		}
+		,
+		{
+		"id":
+		"TECH:G148"
+		,
+		"title": 
+		"Not specifying background color, not specifying text color, and not using technology features that change those defaults"
+		}
+		,
+		{
+		"id":
+		"TECH:G174"
+		,
+		"title": 
+		"Providing a control with a sufficient contrast ratio that allows users to switch to a presentation that uses sufficient contrast"
+		}
+		
+		]},
+		{"title": "Situation B: text is at least 18 point if not bold and at least 14 point if bold",
+		"techniques": [
+			
+		{
+		"id":
+		"TECH:G145"
+		,
+		"title": 
+		"Ensuring that a contrast ratio of at least 3:1 exists between text (and images of text) and background behind the text"
+		}
+		,
+		{
+		"id":
+		"TECH:G148"
+		,
+		"title": 
+		"Not specifying background color, not specifying text color, and not using technology features that change those defaults"
+		}
+		,
+		{
+		"id":
+		"TECH:G174"
+		,
+		"title": 
+		"Providing a control with a sufficient contrast ratio that allows users to switch to a presentation that uses sufficient contrast"
+		}
+		
+		]}
+			]}
+		
+		]},
+		{"advisory": [
+		
+		{
+		"id":
+		"TECH:G156"
+		,
+		"title": 
+		"Using a technology that has commonly-available user agents that can change the foreground and background of blocks of text"
+		}
+		
+		]},
+		{"failure": [
+		
+		{
+		"id":
+		"TECH:F24"
+		,
+		"title": 
+		"Failure of Success Criterion 1.4.3, 1.4.6 and 1.4.8 due to specifying foreground colors without specifying background colors or vice versa"
+		}
+		,
+		{
+		"id":
+		"TECH:F83"
+		,
+		"title": 
+		"Failure of Success Criterion 1.4.3 and 1.4.6 due to using background images that do not provide sufficient contrast with foreground text (or images of text)"
+		}
+		
+		]}]
+		},
+		{
+			"id": "WCAG2:resize-text",
+			"alt_id": ["visual-audio-contrast-scale"],
+			"num": "1.4.4",
+			"versions": ["2.0", "2.1", "2.2"],
+			"level": "AA",
+			"handle": "Resize Text",
+			"title": "Except for captions and images of text, text can be resized without assistive technology up to 200 percent without loss of content or functionality.",
+		
+			"techniques": [
+		{"sufficient": [
+		
+		{
+		"id":
+		"TECH:G142"
+		,
+		"title": 
+		"Using a technology that has commonly-available user agents that support zoom"
+		}
+		,
+		{
+		"id":
+		"TECH:future-resize-text-1"
+		,
+		"title": 
+		"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:"
+			,
+		"using": [
+		
+		{
+		"id":
+		"TECH:C28"
+		,
+		"title": 
+		"Specifying the size of text containers using em units"
+		}
+		,
+		{
+		"id":
+		"TECH:future-resize-text-1"
+		,
+		"title": 
+		"Techniques for relative measurements"
+			,
+		"using": [
+		
+		{
+		"id":
+		"TECH:C12"
+		,
+		"title": 
+		"Using percent for font sizes"
+		}
+		,
+		{
+		"id":
+		"TECH:C13"
+		,
+		"title": 
+		"Using named font sizes"
+		}
+		,
+		{
+		"id":
+		"TECH:C14"
+		,
+		"title": 
+		"Using em units for font sizes"
+		}
+		
+		]
+	
+		}
+		,
+		{
+		"id":
+		"TECH:future-resize-text-1"
+		,
+		"title": 
+		"Techniques for text container resizing"
+			,
+		"using": [
+		
+		{
+		"id":
+		"TECH:SCR34"
+		,
+		"title": 
+		"Calculating size and position in a way that scales with text size"
+		}
+		,
+		{
+		"id":
+		"TECH:G146"
+		,
+		"title": 
+		"Using liquid layout"
+		}
+		
+		]
+	
+		}
+		
+		]
+	
+		}
+		,
+		{
+		"id":
+		"TECH:G178"
+		,
+		"title": 
+		"Providing controls on the Web page that allow users to incrementally change the size of all text on the page up to 200 percent"
+		}
+		,
+		{
+		"id":
+		"TECH:G179"
+		,
+		"title": 
+		"Ensuring that there is no loss of content or functionality when the text resizes and text containers do not change their width"
+		}
+		
+		]},
+		{"advisory": [
+		
+		{
+		"id":
+		"TECH:C17"
+		,
+		"title": 
+		"Scaling form elements which contain text"
+		}
+		,
+		{
+		"id":
+		"TECH:C20"
+		,
+		"title": 
+		"Using relative measurements to set column widths so that lines can average 80 characters or less when the browser is resized"
+		}
+		,
+		{
+		"id":
+		"TECH:C22"
+		,
+		"title": 
+		"Using CSS to control visual presentation of text"
+		}
+		
+		]},
+		{"failure": [
+		
+		{
+		"id":
+		"TECH:F69"
+		,
+		"title": 
+		"Failure of Success Criterion 1.4.4 when resizing visually rendered text up to 200 percent causes the text, image or controls to be clipped, truncated or obscured"
+		}
+		,
+		{
+		"id":
+		"TECH:F80"
+		,
+		"title": 
+		"Failure of Success Criterion 1.4.4 when text-based form controls do not resize when visually rendered text is resized up to 200%"
+		}
+		,
+		{
+		"id":
+		"TECH:F94"
+		,
+		"title": 
+		"Failure of Success Criterion 1.4.4 due to incorrect use of viewport units to resize text"
+		}
+		
+		]}]
+		},
+		{
+			"id": "WCAG2:images-of-text",
+			"alt_id": ["visual-audio-contrast-text-presentation"],
+			"num": "1.4.5",
+			"versions": ["2.0", "2.1", "2.2"],
+			"level": "AA",
+			"handle": "Images of Text",
+			"title": "If the technologies being used can achieve the visual presentation, text is used to convey information rather than images of text except for the following:",
+		
+			"details": [{
+				"type": "ulist",
+				"items": [
+					
+		{
+			"handle": "Customizable",
+			"text": "The image of text can be visually customized to the user's requirements;"
+		},
+		{
+			"handle": "Essential",
+			"text": "A particular presentation of text is essential to the information being conveyed."
+		}
+				]
+			}],
+		
+			"techniques": [
+		{"sufficient": [
+		
+		{
+		"id":
+		"TECH:C22"
+		,
+		"title": 
+		"Using CSS to control visual presentation of text"
+		}
+		,
+		{
+		"id":
+		"TECH:C30"
+		,
+		"title": 
+		"Using CSS to replace text with images of text and providing user interface controls to switch"
+		}
+		,
+		{
+		"id":
+		"TECH:G140"
+		,
+		"title": 
+		"Separating information and structure from presentation to enable different presentations"
+		}
+		,
+		{
+		"id":
+		"TECH:PDF7"
+		,
+		"title": 
+		"Performing OCR on a scanned PDF document to provide actual text"
+		}
+		
+		]},
+		{"advisory": [
+		
+		]},
+		{"failure": [
+		
+		]}]
+		},
+		{
+			"id": "WCAG2:contrast-enhanced",
+			"alt_id": ["visual-audio-contrast7"],
+			"num": "1.4.6",
+			"versions": ["2.0", "2.1", "2.2"],
+			"level": "AAA",
+			"handle": "Contrast (Enhanced)",
+			"title": "The visual presentation of text and images of text has a contrast ratio of at least 7:1, except for the following:",
+		
+			"details": [{
+				"type": "ulist",
+				"items": [
+					
+		{
+			"handle": "Large Text",
+			"text": "Large-scale text and images of large-scale text have a contrast ratio of at least 4.5:1;"
+		},
+		{
+			"handle": "Incidental",
+			"text": "Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement."
+		},
+		{
+			"handle": "Logotypes",
+			"text": "Text that is part of a logo or brand name has no contrast requirement."
+		}
+				]
+			}],
+		
+			"techniques": [
+		{"sufficient": [
+		
+			{"situations": [
+			
+		{"title": "Situation A: text is less than 18 point if not bold and less than 14 point if bold",
+		"techniques": [
+			
+		{
+		"id":
+		"TECH:G17"
+		,
+		"title": 
+		"Ensuring that a contrast ratio of at least 7:1 exists between text (and images of text) and background behind the text"
+		}
+		,
+		{
+		"id":
+		"TECH:G148"
+		,
+		"title": 
+		"Not specifying background color, not specifying text color, and not using technology features that change those defaults"
+		}
+		,
+		{
+		"id":
+		"TECH:G174"
+		,
+		"title": 
+		"Providing a control with a sufficient contrast ratio that allows users to switch to a presentation that uses sufficient contrast"
+		}
+		
+		]},
+		{"title": "Situation B: text is as least 18 point if not bold and at least 14 point if bold",
+		"techniques": [
+			
+		{
+		"id":
+		"TECH:G18"
+		,
+		"title": 
+		"Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of text) and background behind the text"
+		}
+		,
+		{
+		"id":
+		"TECH:G148"
+		,
+		"title": 
+		"Not specifying background color, not specifying text color, and not using technology features that change those defaults"
+		}
+		,
+		{
+		"id":
+		"TECH:G174"
+		,
+		"title": 
+		"Providing a control with a sufficient contrast ratio that allows users to switch to a presentation that uses sufficient contrast"
+		}
+		
+		]}
+			]}
+		
+		]},
+		{"advisory": [
+		
+		{
+		"id":
+		"TECH:G156"
+		,
+		"title": 
+		"Using a technology that has commonly-available user agents that can change the foreground and background of blocks of text"
+		}
+		
+		]},
+		{"failure": [
+		
+		{
+		"id":
+		"TECH:F24"
+		,
+		"title": 
+		"Failure of Success Criterion 1.4.3, 1.4.6 and 1.4.8 due to specifying foreground colors without specifying background colors or vice versa"
+		}
+		,
+		{
+		"id":
+		"TECH:F83"
+		,
+		"title": 
+		"Failure of Success Criterion 1.4.3 and 1.4.6 due to using background images that do not provide sufficient contrast with foreground text (or images of text)"
+		}
+		
+		]}]
+		},
+		{
+			"id": "WCAG2:low-or-no-background-audio",
+			"alt_id": ["visual-audio-contrast-noaudio"],
+			"num": "1.4.7",
+			"versions": ["2.0", "2.1", "2.2"],
+			"level": "AAA",
+			"handle": "Low or No Background Audio",
+			"title": "For prerecorded audio-only content that (1) contains primarily speech in the foreground, (2) is not an audio CAPTCHA or audio logo, and (3) is not vocalization intended to be primarily musical expression such as singing or rapping, at least one of the following is true:",
+		
+			"details": [{
+				"type": "ulist",
+				"items": [
+					
+		{
+			"handle": "No Background",
+			"text": "The audio does not contain background sounds."
+		},
+		{
+			"handle": "Turn Off",
+			"text": "The background sounds can be turned off."
+		},
+		{
+			"handle": "20 dB",
+			"text": "The background sounds are at least 20 decibels lower than the foreground speech content, with the exception of occasional sounds that last for only one or two seconds. Per the definition of \"decibel,\" background sound that meets this requirement will be approximately four times quieter than the foreground speech content."
+		}
+				]
+			}],
+		
+			"techniques": [
+		{"sufficient": [
+		
+		{
+		"id":
+		"TECH:G56"
+		,
+		"title": 
+		"Mixing audio files so that non-speech sounds are at least 20 decibels lower than the speech audio content"
+		}
+		
+		]},
+		{"advisory": [
+		
+		]},
+		{"failure": [
+		
+		]}]
+		},
+		{
+			"id": "WCAG2:visual-presentation",
+			"alt_id": ["visual-audio-contrast-visual-presentation"],
+			"num": "1.4.8",
+			"versions": ["2.0", "2.1", "2.2"],
+			"level": "AAA",
+			"handle": "Visual Presentation",
+			"title": "For the visual presentation of blocks of text, a mechanism is available to achieve the following:",
+		
+			"techniques": [
+		{"sufficient": [
+		
+		]},
+		{"advisory": [
+		
+		]},
+		{"failure": [
+		
+		{
+		"id":
+		"TECH:F24"
+		,
+		"title": 
+		"Failure of Success Criterion 1.4.3, 1.4.6 and 1.4.8 due to specifying foreground colors without specifying background colors or vice versa"
+		}
+		,
+		{
+		"id":
+		"TECH:F88"
+		,
+		"title": 
+		"Failure of Success Criterion 1.4.8 due to using text that is justified (aligned to both the left and the right margins)"
+		}
+		
+		]}]
+		},
+		{
+			"id": "WCAG2:images-of-text-no-exception",
+			"alt_id": ["visual-audio-contrast-text-images"],
+			"num": "1.4.9",
+			"versions": ["2.0", "2.1", "2.2"],
+			"level": "AAA",
+			"handle": "Images of Text (No Exception)",
+			"title": "Images of text are only used for pure decoration or where a particular presentation of text is essential to the information being conveyed.",
+		
+			"techniques": [
+		{"sufficient": [
+		
+		{
+		"id":
+		"TECH:C22"
+		,
+		"title": 
+		"Using CSS to control visual presentation of text"
+		}
+		,
+		{
+		"id":
+		"TECH:C30"
+		,
+		"title": 
+		"Using CSS to replace text with images of text and providing user interface controls to switch"
+		}
+		,
+		{
+		"id":
+		"TECH:G140"
+		,
+		"title": 
+		"Separating information and structure from presentation to enable different presentations"
+		}
+		,
+		{
+		"id":
+		"TECH:PDF7"
+		,
+		"title": 
+		"Performing OCR on a scanned PDF document to provide actual text"
+		}
+		
+		]},
+		{"advisory": [
+		
+		{
+		"id":
+		"TECH:C12"
+		,
+		"title": 
+		"Using percent for font sizes"
+		}
+		,
+		{
+		"id":
+		"TECH:C13"
+		,
+		"title": 
+		"Using named font sizes"
+		}
+		,
+		{
+		"id":
+		"TECH:C14"
+		,
+		"title": 
+		"Using em units for font sizes"
+		}
+		,
+		{
+		"id":
+		"TECH:C8"
+		,
+		"title": 
+		"Using CSS letter-spacing to control spacing within a word"
+		}
+		,
+		{
+		"id":
+		"TECH:C6"
+		,
+		"title": 
+		"Positioning content based on structural markup"
+		}
+		
+		]},
+		{"failure": [
+		
+		]}]
+		},
+		{
+			"id": "WCAG2:reflow",
+			"alt_id": [],
+			"num": "1.4.10",
+			"versions": ["2.1", "2.2"],
+			"level": "AA",
+			"handle": "Reflow",
+			"title": "Content can be presented without loss of information or functionality, and without requiring scrolling in two dimensions for:",
+		
+			"techniques": [
+		{"sufficient": [
+		
+		{
+		"id":
+		"TECH:C32"
+		,
+		"title": 
+		"Using media queries and grid CSS to reflow columns"
+		}
+		,
+		{
+		"id":
+		"TECH:C31"
+		,
+		"title": 
+		"Using CSS Flexbox to reflow content"
+		}
+		,
+		{
+		"id":
+		"TECH:C33"
+		,
+		"title": 
+		"Allowing for Reflow with Long URLs and Strings of Text"
+		}
+		,
+		{
+		"id":
+		"TECH:C38"
+		,
+		"title": 
+		"Using CSS width, max-width and flexbox to fit labels and inputs"
+		}
+		,
+		{
+		"id":
+		"TECH:SCR34"
+		,
+		"title": 
+		"Calculating size and position in a way that scales with text size"
+		}
+		,
+		{
+		"id":
+		"TECH:G206"
+		,
+		"title": 
+		"Providing options within the content to switch to a layout that does not require the user to scroll horizontally to read a line of text"
+		}
+		,
+		{
+		"id":
+		"TECH:future-reflow-1"
+		,
+		"title": 
+		"Using PDF/UA when creating PDFs (Potential future technique)"
+		}
+		
+		]},
+		{"advisory": [
+		
+		{
+		"id":
+		"TECH:C34"
+		,
+		"title": 
+		"Using media queries to un-fixing sticky headers / footers"
+		}
+		,
+		{
+		"id":
+		"TECH:C37"
+		,
+		"title": 
+		"Using CSS max-width and height to fit images"
+		}
+		,
+		{
+		"id":
+		"TECH:future-reflow-1"
+		,
+		"title": 
+		"CSS, Reflowing simple data tables (Potential future technique)"
+		}
+		,
+		{
+		"id":
+		"TECH:future-reflow-1"
+		,
+		"title": 
+		"CSS, Fitting data cells within the width of the viewport (Potential future technique)"
+		}
+		,
+		{
+		"id":
+		"TECH:future-reflow-1"
+		,
+		"title": 
+		"Mechanism to allow mobile view at any time (Potential future technique)"
+		}
+		
+		]},
+		{"failure": [
+		
+		{
+		"id":
+		"TECH:F102"
+		,
+		"title": 
+		"Failure of Success Criterion 1.4.10 due to content disappearing and not being available when content has reflowed"
+		}
+		
+		]}]
+		},
+		{
+			"id": "WCAG2:non-text-contrast",
+			"alt_id": [],
+			"num": "1.4.11",
+			"versions": ["2.1", "2.2"],
+			"level": "AA",
+			"handle": "Non-text Contrast",
+			"title": "The visual presentation of the following have a contrast ratio of at least 3:1 against adjacent color(s):",
+		
+			"details": [{
+				"type": "ulist",
+				"items": [
+					
+		{
+			"handle": "User Interface Components",
+			"text": "Visual information required to identify user interface components and states, except for inactive components or where the appearance of the component is determined by the user agent and not modified by the author;"
+		},
+		{
+			"handle": "Graphical Objects",
+			"text": "Parts of graphics required to understand the content, except when a particular presentation of graphics is essential to the information being conveyed."
+		}
+				]
+			}],
+		
+			"techniques": [
+		{"sufficient": [
+		
+			{"situations": [
+			
+		{"title": "Situation A: Color is used to identify user interface components or used to identify user interface component states",
+		"techniques": [
+			
+		{
+		"id":
+		"TECH:G195"
+		,
+		"title": 
+		"Using an author-supplied, visible focus indicator"
+		}
+		,
+		{
+		"id":
+		"TECH:G174"
+		,
+		"title": 
+		"Providing a control with a sufficient contrast ratio that allows users to switch to a presentation that uses sufficient contrast"
+		}
+		
+		]},
+		{"title": "Situation B: Color is required to understand graphical content",
+		"techniques": [
+			
+		{
+		"id":
+		"TECH:G207"
+		,
+		"title": 
+		"Ensuring that a contrast ratio of 3:1 is provided for icons"
+		}
+		,
+		{
+		"id":
+		"TECH:G209"
+		,
+		"title": 
+		"Provide sufficient contrast at the boundaries between adjoining colors"
+		}
+		
+		]}
+			]}
+		
+		]},
+		{"advisory": [
+		
+		]},
+		{"failure": [
+		
+		{
+		"id":
+		"TECH:F78"
+		,
+		"title": 
+		"Failure of Success Criterion 2.4.7 due to styling element outlines and borders in a way that removes or renders non-visible the visual focus indicator"
+		}
+		
+		]}]
+		},
+		{
+			"id": "WCAG2:text-spacing",
+			"alt_id": [],
+			"num": "1.4.12",
+			"versions": ["2.1", "2.2"],
+			"level": "AA",
+			"handle": "Text Spacing",
+			"title": "In content implemented using markup languages that support the following text style properties, no loss of content or functionality occurs by setting all of the following and by changing no other style property:",
+		
+			"techniques": [
+		{"sufficient": [
+		
+		{
+		"id":
+		"TECH:C36"
+		,
+		"title": 
+		"Allowing for text spacing override"
+		}
+		,
+		{
+		"id":
+		"TECH:C35"
+		,
+		"title": 
+		"Allowing for text spacing without wrapping"
+		}
+		
+		]},
+		{"advisory": [
+		
+		{
+		"id":
+		"TECH:C8"
+		,
+		"title": 
+		"Using CSS letter-spacing to control spacing within a word"
+		}
+		,
+		{
+		"id":
+		"TECH:C21"
+		,
+		"title": 
+		"Specifying line spacing in CSS"
+		}
+		,
+		{
+		"id":
+		"TECH:C28"
+		,
+		"title": 
+		"Specifying the size of text containers using em units"
+		}
+		
+		]},
+		{"failure": [
+		
+		{
+		"id":
+		"TECH:F104"
+		,
+		"title": 
+		"Failure of Success Criterion 1.4.12 due to clipped or overlapped content when text spacing is adjusted"
+		}
+		
+		]}]
+		},
+		{
+			"id": "WCAG2:content-on-hover-or-focus",
+			"alt_id": [],
+			"num": "1.4.13",
+			"versions": ["2.1", "2.2"],
+			"level": "AA",
+			"handle": "Content on Hover or Focus",
+			"title": "Where receiving and then removing pointer hover or keyboard focus triggers additional content to become visible and then hidden, the following are true:",
+		
+			"details": [{
+				"type": "ulist",
+				"items": [
+					
+		{
+			"handle": "Dismissible",
+			"text": "A mechanism is available to dismiss the additional content without moving pointer hover or keyboard focus, unless the additional content communicates an input error or does not obscure or replace other content;"
+		},
+		{
+			"handle": "Hoverable",
+			"text": "If pointer hover can trigger the additional content, then the pointer can be moved over the additional content without the additional content disappearing;"
+		},
+		{
+			"handle": "Persistent",
+			"text": "The additional content remains visible until the hover or focus trigger is removed, the user dismisses it, or its information is no longer valid."
+		}
+				]
+			}],
+		
+			"techniques": [
+		{"sufficient": [
+		
+		{
+		"id":
+		"TECH:SCR39"
+		,
+		"title": 
+		"Making content on focus or hover hoverable, dismissible, and persistent"
+		}
+		,
+		{
+		"id":
+		"TECH:future-content-on-hover-or-focus-1"
+		,
+		"title": 
+		"ARIA: Using role=\"tooltip\" (Potential future technique)"
+		}
+		,
+		{
+		"id":
+		"TECH:future-content-on-hover-or-focus-1"
+		,
+		"title": 
+		"CSS: Using hover and focus pseudo classes (Potential future technique)"
+		}
+		
+		]},
+		{"advisory": [
+		
+		]},
+		{"failure": [
+		
+		{
+		"id":
+		"TECH:F95"
+		,
+		"title": 
+		"Failure of Success Criterion 1.4.13 due to content shown on hover not being hoverable"
+		}
+		,
+		{
+		"id":
+		"TECH:future-content-on-hover-or-focus-1"
+		,
+		"title": 
+		"Failure to make content dismissable without moving pointer hover or keyboard focus (Potential future technique)"
+		}
+		,
+		{
+		"id":
+		"TECH:future-content-on-hover-or-focus-1"
+		,
+		"title": 
+		"Failure to meet by content on hover or focus not remaining visible until dismissed or invalid (Potential future technique)"
+		}
+		
+		]}]
+		}
+			],
+			"techniques": []
+		}
+			]
+		},
+		{
+			"id": "WCAG2:operable",
+			"num": "2",
+			"versions": ["2.0", "2.1", "2.2"],
+			"handle": "Operable",
+			"title": "User interface components and navigation must be operable.",
+			"guidelines": [
+				
+		{
+			"id": "WCAG2:keyboard-accessible",
+			"alt_id": ["keyboard-operation"],
+			"num": "2.1",
+			"versions": ["2.0", "2.1", "2.2"],
+			"handle": "Keyboard Accessible",
+			"title": "Make all functionality available from a keyboard.",
+			"successcriteria": [
+				
+		{
+			"id": "WCAG2:keyboard",
+			"alt_id": ["keyboard-operation-keyboard-operable"],
+			"num": "2.1.1",
+			"versions": ["2.0", "2.1", "2.2"],
+			"level": "A",
+			"handle": "Keyboard",
+			"title": "All functionality of the content is operable through a keyboard interface without requiring specific timings for individual keystrokes, except where the underlying function requires input that depends on the path of the user's movement and not just the endpoints.",
+		
+			"techniques": [
+		{"sufficient": [
+		
+		{
+		"id":
+		"TECH:G202"
+		,
+		"title": 
+		"Ensuring keyboard control for all functionality"
+		}
+		,
+		{
+		"id":
+		"TECH:future-keyboard-1"
+		,
+		"title": 
+		"Ensuring keyboard control by using one of the following techniques."
+			,
+		"using": [
+		
+		{
+		"id":
+		"TECH:H91"
+		,
+		"title": 
+		"Using HTML form controls and links"
+		}
+		,
+		{
+		"id":
+		"TECH:PDF3"
+		,
+		"title": 
+		"Ensuring correct tab and reading order in PDF documents"
+		}
+		,
+		{
+		"id":
+		"TECH:PDF11"
+		,
+		"title": 
+		"Providing links and link text using the Link annotation and the /Link structure element in PDF documents"
+		}
+		,
+		{
+		"id":
+		"TECH:PDF23"
+		,
+		"title": 
+		"Providing interactive form controls in PDF documents"
+		}
+		
+		]
+	
+		}
+		,
+		{
+		"id":
+		"TECH:G90"
+		,
+		"title": 
+		"Providing keyboard-triggered event handlers"
+			,
+		"using": [
+		
+		{
+		"id":
+		"TECH:SCR20"
+		,
+		"title": 
+		"Using both keyboard and other device-specific functions"
+		}
+		,
+		{
+		"id":
+		"TECH:SCR35"
+		,
+		"title": 
+		"Making actions keyboard accessible by using the onclick event of anchors and buttons"
+		}
+		,
+		{
+		"id":
+		"TECH:SCR2"
+		,
+		"title": 
+		"Using redundant keyboard and mouse event handlers"
+		}
+		
+		]
+	
+		}
+		
+		]},
+		{"advisory": [
+		
+		{
+		"id":
+		"TECH:SCR29"
+		,
+		"title": 
+		"Adding keyboard-accessible actions to static HTML elements"
+		}
+		
+		]},
+		{"failure": [
+		
+		{
+		"id":
+		"TECH:F54"
+		,
+		"title": 
+		"Failure of Success Criterion 2.1.1 due to using only pointing-device-specific event handlers (including gesture) for a function"
+		}
+		,
+		{
+		"id":
+		"TECH:F55"
+		,
+		"title": 
+		"Failure of Success Criteria 2.1.1, 2.4.7, and 3.2.1 due to using script to remove focus when focus is received"
+		}
+		,
+		{
+		"id":
+		"TECH:F42"
+		,
+		"title": 
+		"Failure of Success Criteria 1.3.1, 2.1.1, 2.1.3, or 4.1.2 when emulating links"
+		}
+		
+		]}]
+		},
+		{
+			"id": "WCAG2:no-keyboard-trap",
+			"alt_id": ["keyboard-operation-trapping"],
+			"num": "2.1.2",
+			"versions": ["2.0", "2.1", "2.2"],
+			"level": "A",
+			"handle": "No Keyboard Trap",
+			"title": "If keyboard focus can be moved to a component of the page using a keyboard interface, then focus can be moved away from that component using only a keyboard interface, and, if it requires more than unmodified arrow or tab keys or other standard exit methods, the user is advised of the method for moving focus away.",
+		
+			"techniques": [
+		{"sufficient": [
+		
+		{
+		"id":
+		"TECH:G21"
+		,
+		"title": 
+		"Ensuring that users are not trapped in content"
+		}
+		
+		]},
+		{"advisory": [
+		
+		]},
+		{"failure": [
+		
+		{
+		"id":
+		"TECH:F10"
+		,
+		"title": 
+		"Failure of Success Criterion 2.1.2 and Conformance Requirement 5 due to combining multiple content formats in a way that traps users inside one format type"
+		}
+		
+		]}]
+		},
+		{
+			"id": "WCAG2:keyboard-no-exception",
+			"alt_id": ["keyboard-operation-all-funcs"],
+			"num": "2.1.3",
+			"versions": ["2.0", "2.1", "2.2"],
+			"level": "AAA",
+			"handle": "Keyboard (No Exception)",
+			"title": "All functionality of the content is operable through a keyboard interface without requiring specific timings for individual keystrokes.",
+		
+			"techniques": [
+		{"sufficient": [
+		
+		]},
+		{"advisory": [
+		
+		]},
+		{"failure": [
+		
+		]}]
+		},
+		{
+			"id": "WCAG2:character-key-shortcuts",
+			"alt_id": [],
+			"num": "2.1.4",
+			"versions": ["2.1", "2.2"],
+			"level": "A",
+			"handle": "Character Key Shortcuts",
+			"title": "If a keyboard shortcut is implemented in content using only letter (including upper- and lower-case letters), punctuation, number, or symbol characters, then at least one of the following is true:",
+		
+			"details": [{
+				"type": "ulist",
+				"items": [
+					
+		{
+			"handle": "Turn off",
+			"text": "A mechanism is available to turn the shortcut off;"
+		},
+		{
+			"handle": "Remap",
+			"text": "A mechanism is available to remap the shortcut to include one or more non-printable keyboard keys (e.g., Ctrl, Alt);"
+		},
+		{
+			"handle": "Active only on focus",
+			"text": "The keyboard shortcut for a user interface component is only active when that component has focus."
+		}
+				]
+			}],
+		
+			"techniques": [
+		{"sufficient": [
+		
+		{
+		"id":
+		"TECH:G217"
+		,
+		"title": 
+		"Providing a mechanism to allow users to remap or turn off character key shortcuts"
+		}
+		
+		]},
+		{"advisory": [
+		
+		]},
+		{"failure": [
+		
+		{
+		"id":
+		"TECH:F99"
+		,
+		"title": 
+		"Failure of Success Criterion 2.1.4 due to implementing character key shortcuts that cannot be turned off or remapped"
+		}
+		
+		]}]
+		}
+			],
+			"techniques": []
+		},
+		{
+			"id": "WCAG2:enough-time",
+			"alt_id": ["time-limits"],
+			"num": "2.2",
+			"versions": ["2.0", "2.1", "2.2"],
+			"handle": "Enough Time",
+			"title": "Provide users enough time to read and use content.",
+			"successcriteria": [
+				
+		{
+			"id": "WCAG2:timing-adjustable",
+			"alt_id": ["time-limits-required-behaviors"],
+			"num": "2.2.1",
+			"versions": ["2.0", "2.1", "2.2"],
+			"level": "A",
+			"handle": "Timing Adjustable",
+			"title": "For each time limit that is set by the content, at least one of the following is true:",
+		
+			"details": [{
+				"type": "ulist",
+				"items": [
+					
+		{
+			"handle": "Turn off",
+			"text": "The user is allowed to turn off the time limit before encountering it; or"
+		},
+		{
+			"handle": "Adjust",
+			"text": "The user is allowed to adjust the time limit before encountering it over a wide range that is at least ten times the length of the default setting; or"
+		},
+		{
+			"handle": "Extend",
+			"text": "The user is warned before time expires and given at least 20 seconds to extend the time limit with a simple action (for example, \"press the space bar\"), and the user is allowed to extend the time limit at least ten times; or"
+		},
+		{
+			"handle": "Real-time Exception",
+			"text": "The time limit is a required part of a real-time event (for example, an auction), and no alternative to the time limit is possible; or"
+		},
+		{
+			"handle": "Essential Exception",
+			"text": "The time limit is essential and extending it would invalidate the activity; or"
+		},
+		{
+			"handle": "20 Hour Exception",
+			"text": "The time limit is longer than 20 hours."
+		}
+				]
+			}],
+		
+			"techniques": [
+		{"sufficient": [
+		
+			{"situations": [
+			
+		{"title": "Situation A: If there are session time limits:",
+		"techniques": [
+			
+		{
+		"id":
+		"TECH:G133"
+		,
+		"title": 
+		"Providing a checkbox on the first page of a multipart form that allows users to ask for longer session time limit or no session time limit"
+		}
+		,
+		{
+		"id":
+		"TECH:G198"
+		,
+		"title": 
+		"Providing a way for the user to turn the time limit off"
+		}
+		
+		]},
+		{"title": "Situation B: If a time limit is controlled by a script on the page:",
+		"techniques": [
+			
+		{
+		"id":
+		"TECH:G198"
+		,
+		"title": 
+		"Providing a way for the user to turn the time limit off"
+		}
+		,
+		{
+		"id":
+		"TECH:G180"
+		,
+		"title": 
+		"Providing the user with a means to set the time limit to 10 times the default time limit"
+		}
+		,
+		{"and": [
+		
+		{
+		"id":
+		"TECH:SCR16"
+		,
+		"title": 
+		"Providing a script that warns the user a time limit is about to expire"
+		}
+		,
+		{
+		"id":
+		"TECH:SCR1"
+		,
+		"title": 
+		"Allowing the user to extend the default time limit"
+		}
+		
+		]}
+		
+		]},
+		{"title": "Situation C: If there are time limits on reading:",
+		"techniques": [
+			
+		{
+		"id":
+		"TECH:G4"
+		,
+		"title": 
+		"Allowing the content to be paused and restarted from where it was paused"
+		}
+		,
+		{
+		"id":
+		"TECH:G198"
+		,
+		"title": 
+		"Providing a way for the user to turn the time limit off"
+		}
+		,
+		{
+		"id":
+		"TECH:SCR33"
+		,
+		"title": 
+		"Using script to scroll content, and providing a mechanism to pause it"
+		}
+		,
+		{
+		"id":
+		"TECH:SCR36"
+		,
+		"title": 
+		"Providing a mechanism to allow users to display moving, scrolling, or auto-updating text in a static window or area"
+		}
+		
+		]}
+			]}
+		
+		]},
+		{"advisory": [
+		
+		]},
+		{"failure": [
+		
+		{
+		"id":
+		"TECH:F40"
+		,
+		"title": 
+		"Failure due to using meta redirect with a time limit"
+		}
+		,
+		{
+		"id":
+		"TECH:F41"
+		,
+		"title": 
+		"Failure of Success Criterion 2.2.1, 2.2.4, and 3.2.5 due to using meta refresh to reload the page"
+		}
+		,
+		{
+		"id":
+		"TECH:F58"
+		,
+		"title": 
+		"Failure of Success Criterion 2.2.1 due to using server-side techniques to automatically redirect pages after a time-out"
+		}
+		
+		]}]
+		},
+		{
+			"id": "WCAG2:pause-stop-hide",
+			"alt_id": ["time-limits-pause"],
+			"num": "2.2.2",
+			"versions": ["2.0", "2.1", "2.2"],
+			"level": "A",
+			"handle": "Pause, Stop, Hide",
+			"title": "For moving, blinking, scrolling, or auto-updating information, all of the following are true:",
+		
+			"details": [{
+				"type": "ulist",
+				"items": [
+					
+		{
+			"handle": "Moving, blinking, scrolling",
+			"text": "For any moving, blinking or scrolling information that (1) starts automatically, (2) lasts more than five seconds, and (3) is presented in parallel with other content, there is a mechanism for the user to pause, stop, or hide it unless the movement, blinking, or scrolling is part of an activity where it is essential; and"
+		},
+		{
+			"handle": "Auto-updating",
+			"text": "For any auto-updating information that (1) starts automatically and (2) is presented in parallel with other content, there is a mechanism for the user to pause, stop, or hide it or to control the frequency of the update unless the auto-updating is part of an activity where it is essential."
+		}
+				]
+			}],
+		
+			"techniques": [
+		{"sufficient": [
+		
+		{
+		"id":
+		"TECH:G4"
+		,
+		"title": 
+		"Allowing the content to be paused and restarted from where it was paused"
+		}
+		,
+		{
+		"id":
+		"TECH:SCR33"
+		,
+		"title": 
+		"Using script to scroll content, and providing a mechanism to pause it"
+		}
+		,
+		{
+		"id":
+		"TECH:G11"
+		,
+		"title": 
+		"Creating content that blinks for less than 5 seconds"
+		}
+		,
+		{
+		"id":
+		"TECH:G187"
+		,
+		"title": 
+		"Using a technology to include blinking content that can be turned off via the user agent"
+		}
+		,
+		{
+		"id":
+		"TECH:G152"
+		,
+		"title": 
+		"Setting animated gif images to stop blinking after n cycles (within 5 seconds)"
+		}
+		,
+		{
+		"id":
+		"TECH:SCR22"
+		,
+		"title": 
+		"Using scripts to control blinking and stop it in five seconds or less"
+		}
+		,
+		{
+		"id":
+		"TECH:G186"
+		,
+		"title": 
+		"Using a control in the Web page that stops moving, blinking, or auto-updating content"
+		}
+		,
+		{
+		"id":
+		"TECH:G191"
+		,
+		"title": 
+		"Providing a link, button, or other mechanism that reloads the page without any blinking content"
+		}
+		
+		]},
+		{"advisory": [
+		
+		]},
+		{"failure": [
+		
+		{
+		"id":
+		"TECH:F16"
+		,
+		"title": 
+		"Failure of Success Criterion 2.2.2 due to including scrolling content where movement is not essential to the activity without also including a mechanism to pause and restart the content"
+		}
+		,
+		{
+		"id":
+		"TECH:F47"
+		,
+		"title": 
+		"Failure of Success Criterion 2.2.2 due to using the blink element"
+		}
+		,
+		{
+		"id":
+		"TECH:F4"
+		,
+		"title": 
+		"Failure of Success Criterion 2.2.2 due to using text-decoration:blink without a mechanism to stop it in less than five seconds"
+		}
+		,
+		{
+		"id":
+		"TECH:F50"
+		,
+		"title": 
+		"Failure of Success Criterion 2.2.2 due to a script that causes a blink effect without a mechanism to stop the blinking at 5 seconds or less"
+		}
+		,
+		{
+		"id":
+		"TECH:F7"
+		,
+		"title": 
+		"Failure of Success Criterion 2.2.2 due to an object or applet for more than five seconds"
+		}
+		
+		]}]
+		},
+		{
+			"id": "WCAG2:no-timing",
+			"alt_id": ["time-limits-no-exceptions"],
+			"num": "2.2.3",
+			"versions": ["2.0", "2.1", "2.2"],
+			"level": "AAA",
+			"handle": "No Timing",
+			"title": "Timing is not an essential part of the event or activity presented by the content, except for non-interactive synchronized media and real-time events.",
+		
+			"techniques": [
+		{"sufficient": [
+		
+		{
+		"id":
+		"TECH:G5"
+		,
+		"title": 
+		"Allowing users to complete an activity without any time limit"
+		}
+		
+		]},
+		{"advisory": [
+		
+		]},
+		{"failure": [
+		
+		]}]
+		},
+		{
+			"id": "WCAG2:interruptions",
+			"alt_id": ["time-limits-postponed"],
+			"num": "2.2.4",
+			"versions": ["2.0", "2.1", "2.2"],
+			"level": "AAA",
+			"handle": "Interruptions",
+			"title": "Interruptions can be postponed or suppressed by the user, except interruptions involving an emergency.",
+		
+			"techniques": [
+		{"sufficient": [
+		
+		{
+		"id":
+		"TECH:G75"
+		,
+		"title": 
+		"Providing a mechanism to postpone any updating of content"
+		}
+		,
+		{
+		"id":
+		"TECH:G76"
+		,
+		"title": 
+		"Providing a mechanism to request an update of the content instead of updating automatically"
+		}
+		,
+		{
+		"id":
+		"TECH:SCR14"
+		,
+		"title": 
+		"Using scripts to make nonessential alerts optional"
+		}
+		
+		]},
+		{"advisory": [
+		
+		]},
+		{"failure": [
+		
+		{
+		"id":
+		"TECH:F40"
+		,
+		"title": 
+		"Failure due to using meta redirect with a time limit"
+		}
+		,
+		{
+		"id":
+		"TECH:F41"
+		,
+		"title": 
+		"Failure of Success Criterion 2.2.1, 2.2.4, and 3.2.5 due to using meta refresh to reload the page"
+		}
+		
+		]}]
+		},
+		{
+			"id": "WCAG2:re-authenticating",
+			"alt_id": ["time-limits-server-timeout"],
+			"num": "2.2.5",
+			"versions": ["2.0", "2.1", "2.2"],
+			"level": "AAA",
+			"handle": "Re-authenticating",
+			"title": "When an authenticated session expires, the user can continue the activity without loss of data after re-authenticating.",
+		
+			"techniques": [
+		{"sufficient": [
+		
+		{
+		"id":
+		"TECH:future-re-authenticating-1"
+		,
+		"title": 
+		"Providing options to continue without loss of data using one of the following techniques:"
+			,
+		"using": [
+		
+		{
+		"id":
+		"TECH:G105"
+		,
+		"title": 
+		"Saving data so that it can be used after a user re-authenticates"
+		}
+		,
+		{
+		"id":
+		"TECH:G181"
+		,
+		"title": 
+		"Encoding user data as hidden or encrypted data in a re-authorization page"
+		}
+		
+		]
+	
+		}
+		
+		]},
+		{"advisory": [
+		
+		]},
+		{"failure": [
+		
+		{
+		"id":
+		"TECH:F12"
+		,
+		"title": 
+		"Failure of Success Criterion 2.2.5 due to having a session time limit without a mechanism re-authentication"
+		}
+		
+		]}]
+		},
+		{
+			"id": "WCAG2:timeouts",
+			"alt_id": [],
+			"num": "2.2.6",
+			"versions": ["2.1", "2.2"],
+			"level": "AAA",
+			"handle": "Timeouts",
+			"title": "Users are warned of the duration of any user inactivity that could cause data loss, unless the data is preserved for more than 20 hours when the user does not take any actions.",
+		
+			"techniques": [
+		{"sufficient": [
+		
+		{
+		"id":
+		"TECH:future-timeouts-1"
+		,
+		"title": 
+		"Setting a session timeout to occur following at least 20 hours of inactivity."
+		}
+		,
+		{
+		"id":
+		"TECH:future-timeouts-1"
+		,
+		"title": 
+		"Store user data for more than 20 hours."
+		}
+		,
+		{
+		"id":
+		"TECH:future-timeouts-1"
+		,
+		"title": 
+		"Provide a warning of the duration of user inactivity at the start of a process."
+		}
+		
+		]},
+		{"advisory": [
+		
+		]},
+		{"failure": [
+		
+		]}]
+		}
+			],
+			"techniques": []
+		},
+		{
+			"id": "WCAG2:seizures-and-physical-reactions",
+			"alt_id": [],
+			"num": "2.3",
+			"versions": ["2.0", "2.1", "2.2"],
+			"handle": "Seizures and Physical Reactions",
+			"title": "Do not design content in a way that is known to cause seizures or physical reactions.",
+			"successcriteria": [
+				
+		{
+			"id": "WCAG2:three-flashes-or-below-threshold",
+			"alt_id": ["seizure-does-not-violate"],
+			"num": "2.3.1",
+			"versions": ["2.0", "2.1", "2.2"],
+			"level": "A",
+			"handle": "Three Flashes or Below Threshold",
+			"title": "Web pages do not contain anything that flashes more than three times in any one second period, or the flash is below the general flash and red flash thresholds.",
+		
+			"techniques": [
+		{"sufficient": [
+		
+		{
+		"id":
+		"TECH:G19"
+		,
+		"title": 
+		"Ensuring that no component of the content flashes more than three times in any 1-second period"
+		}
+		,
+		{
+		"id":
+		"TECH:G176"
+		,
+		"title": 
+		"Keeping the flashing area small enough"
+		}
+		,
+		{
+		"id":
+		"TECH:G15"
+		,
+		"title": 
+		"Using a tool to ensure that content does not violate the general flash threshold or red flash threshold"
+		}
+		
+		]},
+		{"advisory": [
+		
+		]},
+		{"failure": [
+		
+		]}]
+		},
+		{
+			"id": "WCAG2:three-flashes",
+			"alt_id": ["seizure-three-times"],
+			"num": "2.3.2",
+			"versions": ["2.0", "2.1", "2.2"],
+			"level": "AAA",
+			"handle": "Three Flashes",
+			"title": "Web pages do not contain anything that flashes more than three times in any one second period.",
+		
+			"techniques": [
+		{"sufficient": [
+		
+		{
+		"id":
+		"TECH:G19"
+		,
+		"title": 
+		"Ensuring that no component of the content flashes more than three times in any 1-second period"
+		}
+		
+		]},
+		{"advisory": [
+		
+		]},
+		{"failure": [
+		
+		]}]
+		},
+		{
+			"id": "WCAG2:animation-from-interactions",
+			"alt_id": [],
+			"num": "2.3.3",
+			"versions": ["2.1", "2.2"],
+			"level": "AAA",
+			"handle": "Animation from Interactions",
+			"title": "Motion animation triggered by interaction can be disabled, unless the animation is essential to the functionality or the information being conveyed.",
+		
+			"techniques": [
+		{"sufficient": [
+		
+		{
+		"id":
+		"TECH:C39"
+		,
+		"title": 
+		"Using the CSS reduce-motion query to prevent motion"
+		}
+		,
+		{
+		"id":
+		"TECH:future-animation-from-interactions-1"
+		,
+		"title": 
+		"Gx: Allowing users to set a preference that prevents animation."
+		}
+		
+		]},
+		{"advisory": [
+		
+		]},
+		{"failure": [
+		
+		]}]
+		}
+			],
+			"techniques": []
+		},
+		{
+			"id": "WCAG2:navigable",
+			"alt_id": ["navigation-mechanisms"],
+			"num": "2.4",
+			"versions": ["2.0", "2.1", "2.2"],
+			"handle": "Navigable",
+			"title": "Provide ways to help users navigate, find content, and determine where they are.",
+			"successcriteria": [
+				
+		{
+			"id": "WCAG2:bypass-blocks",
+			"alt_id": ["navigation-mechanisms-skip"],
+			"num": "2.4.1",
+			"versions": ["2.0", "2.1", "2.2"],
+			"level": "A",
+			"handle": "Bypass Blocks",
+			"title": "A mechanism is available to bypass blocks of content that are repeated on multiple Web pages.",
+		
+			"techniques": [
+		{"sufficient": [
+		
+		{
+		"id":
+		"TECH:future-bypass-blocks-1"
+		,
+		"title": 
+		"Creating links to skip blocks of repeated material using one of the following techniques:"
+			,
+		"using": [
+		
+		{
+		"id":
+		"TECH:G1"
+		,
+		"title": 
+		"Adding a link at the top of each page that goes directly to the main content area"
+		}
+		,
+		{
+		"id":
+		"TECH:G123"
+		,
+		"title": 
+		"Adding a link at the beginning of a block of repeated content to go to the end of the block"
+		}
+		,
+		{
+		"id":
+		"TECH:G124"
+		,
+		"title": 
+		"Adding links at the top of the page to each area of the content"
+		}
+		
+		]
+	
+		}
+		,
+		{
+		"id":
+		"TECH:future-bypass-blocks-1"
+		,
+		"title": 
+		"Grouping blocks of repeated material in a way that can be skipped, using one of the following techniques:"
+			,
+		"using": [
+		
+		{
+		"id":
+		"TECH:ARIA11"
+		,
+		"title": 
+		"Using ARIA landmarks to identify regions of a page"
+		}
+		,
+		{
+		"id":
+		"TECH:H69"
+		,
+		"title": 
+		"Providing heading elements at the beginning of each section of content"
+		}
+		,
+		{
+		"id":
+		"TECH:PDF9"
+		,
+		"title": 
+		"Providing headings by marking content with heading tags in PDF documents"
+		}
+		,
+		{"and": [
+		
+		{
+		"id":
+		"TECH:H70"
+		,
+		"title": 
+		"Using frame elements to group blocks of repeated material"
+		}
+		,
+		{
+		"id":
+		"TECH:H64"
+		,
+		"title": 
+		"Using the title attribute of the iframe element"
+		}
+		
+		]}
+		,
+		{
+		"id":
+		"TECH:SCR28"
+		,
+		"title": 
+		"Using an expandable and collapsible menu to bypass block of content"
+		}
+		
+		]
+	
+		}
+		
+		]},
+		{"advisory": [
+		
+		{
+		"id":
+		"TECH:C6"
+		,
+		"title": 
+		"Positioning content based on structural markup"
+		}
+		,
+		{
+		"id":
+		"TECH:H97"
+		,
+		"title": 
+		"Grouping related links using the nav element"
+		}
+		
+		]},
+		{"failure": [
+		
+		]}]
+		},
+		{
+			"id": "WCAG2:page-titled",
+			"alt_id": ["navigation-mechanisms-title"],
+			"num": "2.4.2",
+			"versions": ["2.0", "2.1", "2.2"],
+			"level": "A",
+			"handle": "Page Titled",
+			"title": "Web pages have titles that describe topic or purpose.",
+		
+			"techniques": [
+		{"sufficient": [
+		
+		{
+		"id":
+		"TECH:G88"
+		,
+		"title": 
+		"Providing descriptive titles for Web pages"
+			,
+		"using": [
+		
+		{
+		"id":
+		"TECH:H25"
+		,
+		"title": 
+		"Providing a title using the title element"
+		}
+		,
+		{
+		"id":
+		"TECH:PDF18"
+		,
+		"title": 
+		"Specifying the document title using the Title entry in the document information dictionary of a PDF document"
+		}
+		
+		]
+	
+		}
+		
+		]},
+		{"advisory": [
+		
+		{
+		"id":
+		"TECH:G127"
+		,
+		"title": 
+		"Identifying a Web page's relationship to a larger collection of Web pages"
+		}
+		
+		]},
+		{"failure": [
+		
+		{
+		"id":
+		"TECH:F25"
+		,
+		"title": 
+		"Failure of Success Criterion 2.4.2 due to the title of a Web page not identifying the contents"
+		}
+		
+		]}]
+		},
+		{
+			"id": "WCAG2:focus-order",
+			"alt_id": ["navigation-mechanisms-focus-order"],
+			"num": "2.4.3",
+			"versions": ["2.0", "2.1", "2.2"],
+			"level": "A",
+			"handle": "Focus Order",
+			"title": "If a Web page can be navigated sequentially and the navigation sequences affect meaning or operation, focusable components receive focus in an order that preserves meaning and operability.",
+		
+			"techniques": [
+		{"sufficient": [
+		
+		{
+		"id":
+		"TECH:G59"
+		,
+		"title": 
+		"Placing the interactive elements in an order that follows sequences and relationships within the content"
+		}
+		,
+		{
+		"id":
+		"TECH:future-focus-order-1"
+		,
+		"title": 
+		"Giving focus to elements in an order that follows sequences and relationships within the content using one of the following techniques:"
+			,
+		"using": [
+		
+		{
+		"id":
+		"TECH:C27"
+		,
+		"title": 
+		"Making the DOM order match the visual order"
+		}
+		,
+		{
+		"id":
+		"TECH:PDF3"
+		,
+		"title": 
+		"Ensuring correct tab and reading order in PDF documents"
+		}
+		
+		]
+	
+		}
+		,
+		{
+		"id":
+		"TECH:future-focus-order-1"
+		,
+		"title": 
+		"Changing a Web page dynamically using one of the following techniques:"
+			,
+		"using": [
+		
+		{
+		"id":
+		"TECH:SCR26"
+		,
+		"title": 
+		"Inserting dynamic content into the Document Object Model immediately following its trigger element"
+		}
+		,
+		{
+		"id":
+		"TECH:SCR37"
+		,
+		"title": 
+		"Creating Custom Dialogs in a Device Independent Way"
+		}
+		,
+		{
+		"id":
+		"TECH:SCR27"
+		,
+		"title": 
+		"Reordering page sections using the Document Object Model"
+		}
+		
+		]
+	
+		}
+		
+		]},
+		{"advisory": [
+		
+		]},
+		{"failure": [
+		
+		{
+		"id":
+		"TECH:F44"
+		,
+		"title": 
+		"Failure of Success Criterion 2.4.3 due to using tabindex to create a tab order that does not preserve meaning and operability"
+		}
+		,
+		{
+		"id":
+		"TECH:F85"
+		,
+		"title": 
+		"Failure of Success Criterion 2.4.3 due to using dialogs or menus that are not adjacent to their trigger control in the sequential navigation order"
+		}
+		
+		]}]
+		},
+		{
+			"id": "WCAG2:link-purpose-in-context",
+			"alt_id": ["navigation-mechanisms-refs"],
+			"num": "2.4.4",
+			"versions": ["2.0", "2.1", "2.2"],
+			"level": "A",
+			"handle": "Link Purpose (In Context)",
+			"title": "The purpose of each link can be determined from the link text alone or from the link text together with its programmatically determined link context, except where the purpose of the link would be ambiguous to users in general.",
+		
+			"techniques": [
+		{"sufficient": [
+		
+		{
+		"id":
+		"TECH:G91"
+		,
+		"title": 
+		"Providing link text that describes the purpose of a link"
+		}
+		,
+		{
+		"id":
+		"TECH:H30"
+		,
+		"title": 
+		"Providing link text that describes the purpose of a link for anchor elements"
+		}
+		,
+		{
+		"id":
+		"TECH:H24"
+		,
+		"title": 
+		"Providing text alternatives for the area elements of image maps"
+		}
+		,
+		{
+		"id":
+		"TECH:future-link-purpose-in-context-1"
+		,
+		"title": 
+		"Allowing the user to choose short or long link text using one of the techniques below:"
+			,
+		"using": [
+		
+		{
+		"id":
+		"TECH:G189"
+		,
+		"title": 
+		"Providing a control near the beginning of the Web page that changes the link text"
+		}
+		,
+		{
+		"id":
+		"TECH:SCR30"
+		,
+		"title": 
+		"Using scripts to change the link text"
+		}
+		
+		]
+	
+		}
+		,
+		{
+		"id":
+		"TECH:G53"
+		,
+		"title": 
+		"Identifying the purpose of a link using link text combined with the text of the enclosing sentence"
+		}
+		,
+		{
+		"id":
+		"TECH:future-link-purpose-in-context-1"
+		,
+		"title": 
+		"Providing a supplemental description of the purpose of a link using one of the following techniques:"
+			,
+		"using": [
+		
+		{
+		"id":
+		"TECH:H33"
+		,
+		"title": 
+		"Supplementing link text with the title attribute"
+		}
+		,
+		{
+		"id":
+		"TECH:C7"
+		,
+		"title": 
+		"Using CSS to hide a portion of the link text"
+		}
+		
+		]
+	
+		}
+		,
+		{
+		"id":
+		"TECH:future-link-purpose-in-context-1"
+		,
+		"title": 
+		"Identifying the purpose of a link using link text combined with programmatically determined link context using one of the following techniques:"
+			,
+		"using": [
+		
+		{
+		"id":
+		"TECH:ARIA7"
+		,
+		"title": 
+		"Using aria-labelledby for link purpose"
+		}
+		,
+		{
+		"id":
+		"TECH:ARIA8"
+		,
+		"title": 
+		"Using aria-label for link purpose"
+		}
+		,
+		{
+		"id":
+		"TECH:H77"
+		,
+		"title": 
+		"Identifying the purpose of a link using link text combined with its enclosing list item"
+		}
+		,
+		{
+		"id":
+		"TECH:H78"
+		,
+		"title": 
+		"Identifying the purpose of a link using link text combined with its enclosing paragraph"
+		}
+		,
+		{
+		"id":
+		"TECH:H79"
+		,
+		"title": 
+		"Identifying the purpose of a link in a data table using the link text combined with its enclosing table cell and associated table header cells"
+		}
+		,
+		{
+		"id":
+		"TECH:H81"
+		,
+		"title": 
+		"Identifying the purpose of a link in a nested list using link text combined with the parent list item under which the list is nested"
+		}
+		
+		]
+	
+		}
+		,
+		{
+		"id":
+		"TECH:G91"
+		,
+		"title": 
+		"Providing link text that describes the purpose of a link"
+			,
+		"using": [
+		
+		{
+		"id":
+		"TECH:PDF11"
+		,
+		"title": 
+		"Providing links and link text using the Link annotation and the /Link structure element in PDF documents"
+		}
+		,
+		{
+		"id":
+		"TECH:PDF13"
+		,
+		"title": 
+		"Providing replacement text using the /Alt entry for links in PDF documents"
+		}
+		
+		]
+	
+		}
+		
+		]},
+		{"advisory": [
+		
+		{
+		"id":
+		"TECH:H2"
+		,
+		"title": 
+		"Combining adjacent image and text links for the same resource"
+		}
+		,
+		{
+		"id":
+		"TECH:H80"
+		,
+		"title": 
+		"Identifying the purpose of a link using link text combined with the preceding heading element"
+		}
+		
+		]},
+		{"failure": [
+		
+		{
+		"id":
+		"TECH:F63"
+		,
+		"title": 
+		"Failure of Success Criterion 2.4.4 due to providing link context only in content that is not related to the link"
+		}
+		,
+		{
+		"id":
+		"TECH:F89"
+		,
+		"title": 
+		"Failure of Success Criteria 2.4.4, 2.4.9 and 4.1.2 due to not providing an accessible name for an image which is the only content in a link"
+		}
+		
+		]}]
+		},
+		{
+			"id": "WCAG2:multiple-ways",
+			"alt_id": ["navigation-mechanisms-mult-loc"],
+			"num": "2.4.5",
+			"versions": ["2.0", "2.1", "2.2"],
+			"level": "AA",
+			"handle": "Multiple Ways",
+			"title": "More than one way is available to locate a Web page within a set of Web pages except where the Web Page is the result of, or a step in, a process.",
+		
+			"techniques": [
+		{"sufficient": [
+		
+		{
+		"id":
+		"TECH:future-multiple-ways-1"
+		,
+		"title": 
+		"Using two or more of the following techniques:"
+			,
+		"using": [
+		
+		{
+		"id":
+		"TECH:G125"
+		,
+		"title": 
+		"Providing links to navigate to related Web pages"
+		}
+		,
+		{
+		"id":
+		"TECH:G64"
+		,
+		"title": 
+		"Providing a Table of Contents"
+		}
+		,
+		{
+		"id":
+		"TECH:G63"
+		,
+		"title": 
+		"Providing a site map"
+		}
+		,
+		{
+		"id":
+		"TECH:G161"
+		,
+		"title": 
+		"Providing a search function to help users find content"
+		}
+		,
+		{
+		"id":
+		"TECH:G126"
+		,
+		"title": 
+		"Providing a list of links to all other Web pages"
+		}
+		,
+		{
+		"id":
+		"TECH:G185"
+		,
+		"title": 
+		"Linking to all of the pages on the site from the home page"
+		}
+		
+		]
+	
+		}
+		
+		]},
+		{"advisory": [
+		
+		{
+		"id":
+		"TECH:H59"
+		,
+		"title": 
+		"Using the link element and navigation tools"
+		}
+		,
+		{
+		"id":
+		"TECH:PDF2"
+		,
+		"title": 
+		"Creating bookmarks in PDF documents"
+		}
+		
+		]},
+		{"failure": [
+		
+		]}]
+		},
+		{
+			"id": "WCAG2:headings-and-labels",
+			"alt_id": ["navigation-mechanisms-descriptive"],
+			"num": "2.4.6",
+			"versions": ["2.0", "2.1", "2.2"],
+			"level": "AA",
+			"handle": "Headings and Labels",
+			"title": "Headings and labels describe topic or purpose.",
+		
+			"techniques": [
+		{"sufficient": [
+		
+		{
+		"id":
+		"TECH:G130"
+		,
+		"title": 
+		"Providing descriptive headings"
+		}
+		,
+		{
+		"id":
+		"TECH:G131"
+		,
+		"title": 
+		"Providing descriptive labels"
+		}
+		
+		]},
+		{"advisory": [
+		
+		]},
+		{"failure": [
+		
+		]}]
+		},
+		{
+			"id": "WCAG2:focus-visible",
+			"alt_id": ["navigation-mechanisms-focus-visible"],
+			"num": "2.4.7",
+			"versions": ["2.0", "2.1", "2.2"],
+			"level": "AA",
+			"handle": "Focus Visible",
+			"title": "Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible.",
+		
+			"techniques": [
+		{"sufficient": [
+		
+		{
+		"id":
+		"TECH:G149"
+		,
+		"title": 
+		"Using user interface components that are highlighted by the user agent when they receive focus"
+		}
+		,
+		{
+		"id":
+		"TECH:C15"
+		,
+		"title": 
+		"Using CSS to change the presentation of a user interface component when it receives focus"
+		}
+		,
+		{
+		"id":
+		"TECH:G165"
+		,
+		"title": 
+		"Using the default focus indicator for the platform so that high visibility default focus indicators will carry over"
+		}
+		,
+		{
+		"id":
+		"TECH:G195"
+		,
+		"title": 
+		"Using an author-supplied, visible focus indicator"
+		}
+		,
+		{
+		"id":
+		"TECH:C40"
+		,
+		"title": 
+		"Creating a two-color focus indicator to ensure sufficient contrast with all components"
+		}
+		,
+		{
+		"id":
+		"TECH:SCR31"
+		,
+		"title": 
+		"Using script to change the background color or border of the element with focus"
+		}
+		
+		]},
+		{"advisory": [
+		
+		]},
+		{"failure": [
+		
+		{
+		"id":
+		"TECH:F55"
+		,
+		"title": 
+		"Failure of Success Criteria 2.1.1, 2.4.7, and 3.2.1 due to using script to remove focus when focus is received"
+		}
+		,
+		{
+		"id":
+		"TECH:F78"
+		,
+		"title": 
+		"Failure of Success Criterion 2.4.7 due to styling element outlines and borders in a way that removes or renders non-visible the visual focus indicator"
+		}
+		
+		]}]
+		},
+		{
+			"id": "WCAG2:location",
+			"alt_id": ["navigation-mechanisms-location"],
+			"num": "2.4.8",
+			"versions": ["2.0", "2.1", "2.2"],
+			"level": "AAA",
+			"handle": "Location",
+			"title": "Information about the user's location within a set of Web pages is available.",
+		
+			"techniques": [
+		{"sufficient": [
+		
+		{
+		"id":
+		"TECH:G65"
+		,
+		"title": 
+		"Providing a breadcrumb trail"
+		}
+		,
+		{
+		"id":
+		"TECH:G63"
+		,
+		"title": 
+		"Providing a site map"
+		}
+		,
+		{
+		"id":
+		"TECH:G128"
+		,
+		"title": 
+		"Indicating current location within navigation bars"
+		}
+		,
+		{
+		"id":
+		"TECH:G127"
+		,
+		"title": 
+		"Identifying a Web page's relationship to a larger collection of Web pages"
+			,
+		"using": [
+		
+		{
+		"id":
+		"TECH:H59"
+		,
+		"title": 
+		"Using the link element and navigation tools"
+		}
+		
+		]
+	
+		}
+		
+		]},
+		{"advisory": [
+		
+		{
+		"id":
+		"TECH:PDF14"
+		,
+		"title": 
+		"Providing running headers and footers in PDF documents"
+		}
+		,
+		{
+		"id":
+		"TECH:PDF17"
+		,
+		"title": 
+		"Specifying consistent page numbering for PDF documents"
+		}
+		
+		]},
+		{"failure": [
+		
+		]}]
+		},
+		{
+			"id": "WCAG2:link-purpose-link-only",
+			"alt_id": ["navigation-mechanisms-link"],
+			"num": "2.4.9",
+			"versions": ["2.0", "2.1", "2.2"],
+			"level": "AAA",
+			"handle": "Link Purpose (Link Only)",
+			"title": "A mechanism is available to allow the purpose of each link to be identified from link text alone, except where the purpose of the link would be ambiguous to users in general.",
+		
+			"techniques": [
+		{"sufficient": [
+		
+		{
+		"id":
+		"TECH:ARIA8"
+		,
+		"title": 
+		"Using aria-label for link purpose"
+		}
+		,
+		{
+		"id":
+		"TECH:G91"
+		,
+		"title": 
+		"Providing link text that describes the purpose of a link"
+		}
+		,
+		{
+		"id":
+		"TECH:H30"
+		,
+		"title": 
+		"Providing link text that describes the purpose of a link for anchor elements"
+		}
+		,
+		{
+		"id":
+		"TECH:H24"
+		,
+		"title": 
+		"Providing text alternatives for the area elements of image maps"
+		}
+		,
+		{
+		"id":
+		"TECH:future-link-purpose-link-only-1"
+		,
+		"title": 
+		"Allowing the user to choose short or long link text using one of the techniques below:"
+			,
+		"using": [
+		
+		{
+		"id":
+		"TECH:G189"
+		,
+		"title": 
+		"Providing a control near the beginning of the Web page that changes the link text"
+		}
+		,
+		{
+		"id":
+		"TECH:SCR30"
+		,
+		"title": 
+		"Using scripts to change the link text"
+		}
+		
+		]
+	
+		}
+		,
+		{
+		"id":
+		"TECH:future-link-purpose-link-only-1"
+		,
+		"title": 
+		"Providing a supplemental description of the purpose of a link using one of the following techniques:"
+			,
+		"using": [
+		
+		{
+		"id":
+		"TECH:C7"
+		,
+		"title": 
+		"Using CSS to hide a portion of the link text"
+		}
+		
+		]
+	
+		}
+		,
+		{
+		"id":
+		"TECH:future-link-purpose-link-only-1"
+		,
+		"title": 
+		"Semantically indicating links using one of the following techniques:"
+			,
+		"using": [
+		
+		{
+		"id":
+		"TECH:PDF11"
+		,
+		"title": 
+		"Providing links and link text using the Link annotation and the /Link structure element in PDF documents"
+		}
+		,
+		{
+		"id":
+		"TECH:PDF13"
+		,
+		"title": 
+		"Providing replacement text using the /Alt entry for links in PDF documents"
+		}
+		
+		]
+	
+		}
+		
+		]},
+		{"advisory": [
+		
+		{
+		"id":
+		"TECH:H2"
+		,
+		"title": 
+		"Combining adjacent image and text links for the same resource"
+		}
+		,
+		{
+		"id":
+		"TECH:H33"
+		,
+		"title": 
+		"Supplementing link text with the title attribute"
+		}
+		
+		]},
+		{"failure": [
+		
+		{
+		"id":
+		"TECH:F84"
+		,
+		"title": 
+		"Failure of Success Criterion 2.4.9 due to using a non-specific link such as \"click here\" or \"more\" without a mechanism to change the link text to specific text."
+		}
+		,
+		{
+		"id":
+		"TECH:F89"
+		,
+		"title": 
+		"Failure of Success Criteria 2.4.4, 2.4.9 and 4.1.2 due to not providing an accessible name for an image which is the only content in a link"
+		}
+		
+		]}]
+		},
+		{
+			"id": "WCAG2:section-headings",
+			"alt_id": ["navigation-mechanisms-headings"],
+			"num": "2.4.10",
+			"versions": ["2.0", "2.1", "2.2"],
+			"level": "AAA",
+			"handle": "Section Headings",
+			"title": "Section headings are used to organize the content.",
+		
+			"techniques": [
+		{"sufficient": [
+		
+		{
+		"id":
+		"TECH:G141"
+		,
+		"title": 
+		"Organizing a page using headings"
+		}
+		,
+		{
+		"id":
+		"TECH:H69"
+		,
+		"title": 
+		"Providing heading elements at the beginning of each section of content"
+		}
+		
+		]},
+		{"advisory": [
+		
+		]},
+		{"failure": [
+		
+		]}]
+		},
+		{
+			"id": "WCAG2:focus-not-obscured-minimum",
+			"alt_id": [],
+			"num": "2.4.11",
+			"versions": ["2.2"],
+			"level": "AA",
+			"handle": "Focus Not Obscured (Minimum)",
+			"title": "When a user interface component receives keyboard focus, the component is not entirely hidden due to author-created content.",
+		
+			"techniques": [
+		{"sufficient": [
+		
+		{
+		"id":
+		"TECH:C43"
+		,
+		"title": 
+		"Using CSS margin and scroll-margin to un-obscure content"
+		}
+		
+		]},
+		{"advisory": [
+		
+		]},
+		{"failure": [
+		
+		{
+		"id":
+		"TECH:F110"
+		,
+		"title": 
+		"Failure of Success Criterion 2.4.11 due to a sticky footers or headers hiding focused elements"
+		}
+		
+		]}]
+		},
+		{
+			"id": "WCAG2:focus-not-obscured-enhanced",
+			"alt_id": [],
+			"num": "2.4.12",
+			"versions": ["2.2"],
+			"level": "AAA",
+			"handle": "Focus Not Obscured (Enhanced)",
+			"title": "When a user interface component receives keyboard focus, no part of the component is hidden by author-created content.",
+		
+			"techniques": [
+		{"sufficient": [
+		
+		{
+		"id":
+		"TECH:C43"
+		,
+		"title": 
+		"Using CSS margin and scroll-margin to un-obscure content"
+		}
+		
+		]},
+		{"advisory": [
+		
+		]},
+		{"failure": [
+		
+		{
+		"id":
+		"TECH:future-focus-not-obscured-enhanced-1"
+		,
+		"title": 
+		"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."
+		}
+		
+		]}]
+		},
+		{
+			"id": "WCAG2:focus-appearance",
+			"alt_id": [],
+			"num": "2.4.13",
+			"versions": ["2.2"],
+			"level": "AAA",
+			"handle": "Focus Appearance",
+			"title": "When the keyboard focus indicator is visible, an area of the focus indicator meets all the following:",
+		
+			"techniques": [
+		{"sufficient": [
+		
+		{
+		"id":
+		"TECH:G195"
+		,
+		"title": 
+		"Using an author-supplied, visible focus indicator"
+		}
+		,
+		{
+		"id":
+		"TECH:C40"
+		,
+		"title": 
+		"Creating a two-color focus indicator to ensure sufficient contrast with all components"
+		}
+		,
+		{
+		"id":
+		"TECH:C41"
+		,
+		"title": 
+		"Creating a strong focus indicator within the component"
+		}
+		
+		]},
+		{"advisory": [
+		
+		]},
+		{"failure": [
+		
+		{
+		"id":
+		"TECH:future-focus-appearance-1"
+		,
+		"title": 
+		"Using a CSS border for inline text which can wrap (Potential future technique)"
+		}
+		
+		]}]
+		}
+			],
+			"techniques": []
+		},
+		{
+			"id": "WCAG2:input-modalities",
+			"alt_id": [],
+			"num": "2.5",
+			"versions": ["2.0", "2.1", "2.2"],
+			"handle": "Input Modalities",
+			"title": "Make it easier for users to operate functionality through various inputs beyond keyboard.",
+			"successcriteria": [
+				
+		{
+			"id": "WCAG2:pointer-gestures",
+			"alt_id": [],
+			"num": "2.5.1",
+			"versions": ["2.1", "2.2"],
+			"level": "A",
+			"handle": "Pointer Gestures",
+			"title": "All functionality that uses multipoint or path-based gestures for operation can be operated with a single pointer without a path-based gesture, unless a multipoint or path-based gesture is essential.",
+		
+			"techniques": [
+		{"sufficient": [
+		
+		{
+		"id":
+		"TECH:G215"
+		,
+		"title": 
+		"Providing controls to achieve the same result as path based or multipoint gestures"
+		}
+		,
+		{
+		"id":
+		"TECH:G216"
+		,
+		"title": 
+		"Providing single point activation for a control slider"
+		}
+		
+		]},
+		{"advisory": [
+		
+		]},
+		{"failure": [
+		
+		{
+		"id":
+		"TECH:F105"
+		,
+		"title": 
+		"Failure of Success Criterion 2.5.1 due to providing functionality via a path-based gesture without simple pointer alternative"
+		}
+		
+		]}]
+		},
+		{
+			"id": "WCAG2:pointer-cancellation",
+			"alt_id": [],
+			"num": "2.5.2",
+			"versions": ["2.1", "2.2"],
+			"level": "A",
+			"handle": "Pointer Cancellation",
+			"title": "For functionality that can be operated using a single pointer, at least one of the following is true:",
+		
+			"details": [{
+				"type": "ulist",
+				"items": [
+					
+		{
+			"handle": "No Down-Event",
+			"text": "The down-event of the pointer is not used to execute any part of the function;"
+		},
+		{
+			"handle": "Abort or Undo",
+			"text": "Completion of the function is on the up-event, and a mechanism is available to abort the function before completion or to undo the function after completion;"
+		},
+		{
+			"handle": "Up Reversal",
+			"text": "The up-event reverses any outcome of the preceding down-event;"
+		},
+		{
+			"handle": "Essential",
+			"text": "Completing the function on the down-event is essential."
+		}
+				]
+			}],
+		
+			"techniques": [
+		{"sufficient": [
+		
+		{
+		"id":
+		"TECH:G210"
+		,
+		"title": 
+		"Ensuring that drag-and-drop actions can be cancelled"
+		}
+		,
+		{
+		"id":
+		"TECH:G212"
+		,
+		"title": 
+		"Using native controls to ensure functionality is triggered on the up-event."
+		}
+		,
+		{
+		"id":
+		"TECH:future-pointer-cancellation-1"
+		,
+		"title": 
+		"Touch events are only triggered when touch is removed from a control (Potential future technique)"
+		}
+		
+		]},
+		{"advisory": [
+		
+		]},
+		{"failure": [
+		
+		{
+		"id":
+		"TECH:F101"
+		,
+		"title": 
+		"Failure of Success Criterion 2.5.2 due to activating a control on the down-event"
+		}
+		
+		]}]
+		},
+		{
+			"id": "WCAG2:label-in-name",
+			"alt_id": [],
+			"num": "2.5.3",
+			"versions": ["2.1", "2.2"],
+			"level": "A",
+			"handle": "Label in Name",
+			"title": "For user interface components with labels that include text or images of text, the name contains the text that is presented visually.",
+		
+			"techniques": [
+		{"sufficient": [
+		
+		{
+		"id":
+		"TECH:G208"
+		,
+		"title": 
+		"Including the text of the visible label as part of the accessible name"
+		}
+		,
+		{
+		"id":
+		"TECH:G211"
+		,
+		"title": 
+		"Matching the accessible name to the visible label"
+		}
+		
+		]},
+		{"advisory": [
+		
+		{
+		"id":
+		"TECH:future-label-in-name-1"
+		,
+		"title": 
+		"If an icon has no accompanying text, consider using its hover text as its accessible name (Potential future technique)"
+		}
+		
+		]},
+		{"failure": [
+		
+		{
+		"id":
+		"TECH:F96"
+		,
+		"title": 
+		"Failure due to the accessible name not containing the visible label text"
+		}
+		,
+		{
+		"id":
+		"TECH:future-label-in-name-1"
+		,
+		"title": 
+		"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)"
+		}
+		,
+		{
+		"id":
+		"TECH:future-label-in-name-1"
+		,
+		"title": 
+		"Accessible name contains the visible label text, but one or more other words are interspersed in the label (Potential future technique)"
+		}
+		
+		]}]
+		},
+		{
+			"id": "WCAG2:motion-actuation",
+			"alt_id": [],
+			"num": "2.5.4",
+			"versions": ["2.1", "2.2"],
+			"level": "A",
+			"handle": "Motion Actuation",
+			"title": "Functionality that can be operated by device motion or user motion can also be operated by user interface components and responding to the motion can be disabled to prevent accidental actuation, except when:",
+		
+			"details": [{
+				"type": "ulist",
+				"items": [
+					
+		{
+			"handle": "Supported Interface",
+			"text": "The motion is used to operate functionality through an accessibility supported interface;"
+		},
+		{
+			"handle": "Essential",
+			"text": "The motion is essential for the function and doing so would invalidate the activity."
+		}
+				]
+			}],
+		
+			"techniques": [
+		{"sufficient": [
+		
+		{
+		"id":
+		"TECH:G213"
+		,
+		"title": 
+		"Provide conventional controls and an application setting for motion activated input"
+		}
+		,
+		{
+		"id":
+		"TECH:future-motion-actuation-1"
+		,
+		"title": 
+		"GXXX: Supporting system level features which allow the user to disable motion actuation"
+		}
+		
+		]},
+		{"advisory": [
+		
+		]},
+		{"failure": [
+		
+		{
+		"id":
+		"TECH:F106"
+		,
+		"title": 
+		"Failure due to inability to deactivate motion actuation"
+		}
+		,
+		{
+		"id":
+		"TECH:future-motion-actuation-1"
+		,
+		"title": 
+		"FXXX: Failure of Success Criterion 2.5.4 due to disrupting or disabling system level features which allow the user to disable motion actuation"
+		}
+		
+		]}]
+		},
+		{
+			"id": "WCAG2:target-size-enhanced",
+			"alt_id": [],
+			"num": "2.5.5",
+			"versions": ["2.1", "2.2"],
+			"level": "AAA",
+			"handle": "Target Size (Enhanced)",
+			"title": "The size of the target for pointer inputs is at least 44 by 44 CSS pixels except when:",
+		
+			"details": [{
+				"type": "ulist",
+				"items": [
+					
+		{
+			"handle": "Equivalent",
+			"text": "The target is available through an equivalent link or control on the same page that is at least 44 by 44 CSS pixels;"
+		},
+		{
+			"handle": "Inline",
+			"text": "The target is in a sentence or block of text;"
+		},
+		{
+			"handle": "User Agent Control",
+			"text": "The size of the target is determined by the user agent and is not modified by the author;"
+		},
+		{
+			"handle": "Essential",
+			"text": "A particular presentation of the target is essential to the information being conveyed."
+		}
+				]
+			}],
+		
+			"techniques": [
+		{"sufficient": [
+		
+			{"situations": [
+			
+		{"title": "",
+		"techniques": [
+			
+		{
+		"id":
+		"TECH:future-target-size-enhanced-1"
+		,
+		"title": 
+		"Ensuring that targets are at least 44 by 44 CSS pixels."
+		}
+		,
+		{
+		"id":
+		"TECH:future-target-size-enhanced-1"
+		,
+		"title": 
+		"Ensuring inline links provide sufficiently large activation target."
+		}
+		
+		]}
+			]}
+		
+		]},
+		{"advisory": [
+		
+		{
+		"id":
+		"TECH:future-target-size-enhanced-1"
+		,
+		"title": 
+		"none documented"
+		}
+		
+		]},
+		{"failure": [
+		
+		{
+		"id":
+		"TECH:future-target-size-enhanced-1"
+		,
+		"title": 
+		"Failure of success criterion 2.5.5 due to target being less than 44 by 44 CSS pixels."
+		}
+		
+		]}]
+		},
+		{
+			"id": "WCAG2:concurrent-input-mechanisms",
+			"alt_id": [],
+			"num": "2.5.6",
+			"versions": ["2.1", "2.2"],
+			"level": "AAA",
+			"handle": "Concurrent Input Mechanisms",
+			"title": "Web content does not restrict use of input modalities available on a platform except where the restriction is essential, required to ensure the security of the content, or required to respect user settings.",
+		
+			"techniques": [
+		{"sufficient": [
+		
+		{
+		"id":
+		"TECH:future-concurrent-input-mechanisms-1"
+		,
+		"title": 
+		"Only using high-level, input-agnostic event handlers, such as focus, blur, click, in Javascript (Potential future technique)."
+		}
+		
+		]},
+		{"advisory": [
+		
+		]},
+		{"failure": [
+		
+		{
+		"id":
+		"TECH:F98"
+		,
+		"title": 
+		"Failure due to interactions being limited to touch-only on touchscreen devices"
+		}
+		
+		]}]
+		},
+		{
+			"id": "WCAG2:dragging-movements",
+			"alt_id": [],
+			"num": "2.5.7",
+			"versions": ["2.2"],
+			"level": "AA",
+			"handle": "Dragging Movements",
+			"title": "All functionality that uses a dragging movement for operation can be achieved by a single pointer without dragging, unless dragging is essential or the functionality is determined by the user agent and not modified by the author.",
+		
+			"techniques": [
+		{"sufficient": [
+		
+		{
+		"id":
+		"TECH:G219"
+		,
+		"title": 
+		"Ensuring that an alternative is available for dragging movements that operate on content"
+		}
+		
+		]},
+		{"advisory": [
+		
+		]},
+		{"failure": [
+		
+		{
+		"id":
+		"TECH:F108"
+		,
+		"title": 
+		"Failure of Success Criterion 2.5.7 Dragging Movements due to not providing a single pointer method for the user to operate a function that does not require a dragging movement"
+		}
+		
+		]}]
+		},
+		{
+			"id": "WCAG2:target-size-minimum",
+			"alt_id": [],
+			"num": "2.5.8",
+			"versions": ["2.2"],
+			"level": "AA",
+			"handle": "Target Size (Minimum)",
+			"title": "The size of the target for pointer inputs is at least 24 by 24 CSS pixels, except where:",
+		
+			"techniques": [
+		{"sufficient": [
+		
+		{
+		"id":
+		"TECH:C42"
+		,
+		"title": 
+		"Using min-height and min-width to ensure sufficient target spacing"
+		}
+		
+		]},
+		{"advisory": [
+		
+		]},
+		{"failure": [
+		
+		]}]
+		}
+			],
+			"techniques": []
+		}
+			]
+		},
+		{
+			"id": "WCAG2:understandable",
+			"num": "3",
+			"versions": ["2.0", "2.1", "2.2"],
+			"handle": "Understandable",
+			"title": "Information and the operation of the user interface must be understandable.",
+			"guidelines": [
+				
+		{
+			"id": "WCAG2:readable",
+			"alt_id": ["meaning"],
+			"num": "3.1",
+			"versions": ["2.0", "2.1", "2.2"],
+			"handle": "Readable",
+			"title": "Make text content readable and understandable.",
+			"successcriteria": [
+				
+		{
+			"id": "WCAG2:language-of-page",
+			"alt_id": ["meaning-doc-lang-id"],
+			"num": "3.1.1",
+			"versions": ["2.0", "2.1", "2.2"],
+			"level": "A",
+			"handle": "Language of Page",
+			"title": "The default human language of each Web page can be programmatically determined.",
+		
+			"techniques": [
+		{"sufficient": [
+		
+		{
+		"id":
+		"TECH:H57"
+		,
+		"title": 
+		"Using the language attribute on the HTML element"
+		}
+		,
+		{
+		"id":
+		"TECH:PDF16"
+		,
+		"title": 
+		"Setting the default language using the /Lang entry in the document catalog of a PDF document"
+		}
+		,
+		{
+		"id":
+		"TECH:PDF19"
+		,
+		"title": 
+		"Specifying the language for a passage or phrase with the Lang entry in PDF documents"
+		}
+		
+		]},
+		{"advisory": [
+		
+		{
+		"id":
+		"TECH:SVR5"
+		,
+		"title": 
+		"Specifying the default language in the HTTP header"
+		}
+		
+		]},
+		{"failure": [
+		
+		]}]
+		},
+		{
+			"id": "WCAG2:language-of-parts",
+			"alt_id": ["meaning-other-lang-id"],
+			"num": "3.1.2",
+			"versions": ["2.0", "2.1", "2.2"],
+			"level": "AA",
+			"handle": "Language of Parts",
+			"title": "The human language of each passage or phrase in the content can be programmatically determined except for proper names, technical terms, words of indeterminate language, and words or phrases that have become part of the vernacular of the immediately surrounding text.",
+		
+			"techniques": [
+		{"sufficient": [
+		
+		{
+		"id":
+		"TECH:H58"
+		,
+		"title": 
+		"Using language attributes to identify changes in the human language"
+		}
+		,
+		{
+		"id":
+		"TECH:PDF19"
+		,
+		"title": 
+		"Specifying the language for a passage or phrase with the Lang entry in PDF documents"
+		}
+		
+		]},
+		{"advisory": [
+		
+		]},
+		{"failure": [
+		
+		]}]
+		},
+		{
+			"id": "WCAG2:unusual-words",
+			"alt_id": ["meaning-idioms"],
+			"num": "3.1.3",
+			"versions": ["2.0", "2.1", "2.2"],
+			"level": "AAA",
+			"handle": "Unusual Words",
+			"title": "A mechanism is available for identifying specific definitions of words or phrases used in an unusual or restricted way, including idioms and jargon.",
+		
+			"techniques": [
+		{"sufficient": [
+		
+			{"situations": [
+			
+		{"title": "Situation A: If the word or phrase has a unique meaning within the Web page:",
+		"techniques": [
+			
+		{
+		"id":
+		"TECH:G101"
+		,
+		"title": 
+		"Providing the definition of a word or phrase used in an unusual or restricted way"
+			,
+		"using": [
+		
+		{
+		"id":
+		"TECH:G55"
+		,
+		"title": 
+		"Linking to definitions"
+			,
+		"using": [
+		
+		{
+		"id":
+		"TECH:H40"
+		,
+		"title": 
+		"Using description lists"
+		}
+		
+		]
+	
+		}
+		,
+		{
+		"id":
+		"TECH:G112"
+		,
+		"title": 
+		"Using inline definitions"
+			,
+		"using": [
+		
+		{
+		"id":
+		"TECH:H54"
+		,
+		"title": 
+		"Using the dfn element to identify the defining instance of a word"
+		}
+		
+		]
+	
+		}
+		
+		]
+	
+		}
+		,
+		{
+		"id":
+		"TECH:G101"
+		,
+		"title": 
+		"Providing the definition of a word or phrase used in an unusual or restricted way"
+			,
+		"using": [
+		
+		{
+		"id":
+		"TECH:G55"
+		,
+		"title": 
+		"Linking to definitions"
+			,
+		"using": [
+		
+		{
+		"id":
+		"TECH:H40"
+		,
+		"title": 
+		"Using description lists"
+		}
+		
+		]
+	
+		}
+		,
+		{
+		"id":
+		"TECH:G62"
+		,
+		"title": 
+		"Providing a glossary"
+		}
+		,
+		{
+		"id":
+		"TECH:G70"
+		,
+		"title": 
+		"Providing a function to search an online dictionary"
+		}
+		
+		]
+	
+		}
+		
+		]},
+		{"title": "Situation B: If the word or phrase means different things within the same Web page:",
+		"techniques": [
+			
+		{
+		"id":
+		"TECH:G101"
+		,
+		"title": 
+		"Providing the definition of a word or phrase used in an unusual or restricted way"
+			,
+		"using": [
+		
+		{
+		"id":
+		"TECH:G55"
+		,
+		"title": 
+		"Linking to definitions"
+			,
+		"using": [
+		
+		{
+		"id":
+		"TECH:H40"
+		,
+		"title": 
+		"Using description lists"
+		}
+		
+		]
+	
+		}
+		,
+		{
+		"id":
+		"TECH:G112"
+		,
+		"title": 
+		"Using inline definitions"
+			,
+		"using": [
+		
+		{
+		"id":
+		"TECH:H54"
+		,
+		"title": 
+		"Using the dfn element to identify the defining instance of a word"
+		}
+		
+		]
+	
+		}
+		
+		]
+	
+		}
+		
+		]}
+			]}
+		
+		]},
+		{"advisory": [
+		
+		]},
+		{"failure": [
+		
+		]}]
+		},
+		{
+			"id": "WCAG2:abbreviations",
+			"alt_id": ["meaning-located"],
+			"num": "3.1.4",
+			"versions": ["2.0", "2.1", "2.2"],
+			"level": "AAA",
+			"handle": "Abbreviations",
+			"title": "A mechanism for identifying the expanded form or meaning of abbreviations is available.",
+		
+			"techniques": [
+		{"sufficient": [
+		
+			{"situations": [
+			
+		{"title": "Situation A: If the abbreviation has only one meaning within the Web page:",
+		"techniques": [
+			
+		{
+		"id":
+		"TECH:G102"
+		,
+		"title": 
+		"Providing the expansion or explanation of an abbreviation"
+			,
+		"using": [
+		
+		{
+		"id":
+		"TECH:G97"
+		,
+		"title": 
+		"Providing the first use of an abbreviation immediately before or after the expanded form"
+		}
+		,
+		{
+		"id":
+		"TECH:G55"
+		,
+		"title": 
+		"Linking to definitions"
+		}
+		,
+		{
+		"id":
+		"TECH:H28"
+		,
+		"title": 
+		"Providing definitions for abbreviations by using the abbr element"
+		}
+		,
+		{
+		"id":
+		"TECH:PDF8"
+		,
+		"title": 
+		"Providing definitions for abbreviations via an E entry for a structure element"
+		}
+		
+		]
+	
+		}
+		,
+		{
+		"id":
+		"TECH:G102"
+		,
+		"title": 
+		"Providing the expansion or explanation of an abbreviation"
+			,
+		"using": [
+		
+		{
+		"id":
+		"TECH:G55"
+		,
+		"title": 
+		"Linking to definitions"
+		}
+		,
+		{
+		"id":
+		"TECH:G62"
+		,
+		"title": 
+		"Providing a glossary"
+		}
+		,
+		{
+		"id":
+		"TECH:G70"
+		,
+		"title": 
+		"Providing a function to search an online dictionary"
+		}
+		,
+		{
+		"id":
+		"TECH:H28"
+		,
+		"title": 
+		"Providing definitions for abbreviations by using the abbr element"
+		}
+		,
+		{
+		"id":
+		"TECH:PDF8"
+		,
+		"title": 
+		"Providing definitions for abbreviations via an E entry for a structure element"
+		}
+		
+		]
+	
+		}
+		
+		]},
+		{"title": "Situation B: If the abbreviation means different things within the same Web page:",
+		"techniques": [
+			
+		{
+		"id":
+		"TECH:G102"
+		,
+		"title": 
+		"Providing the expansion or explanation of an abbreviation"
+			,
+		"using": [
+		
+		{
+		"id":
+		"TECH:G55"
+		,
+		"title": 
+		"Linking to definitions"
+		}
+		,
+		{
+		"id":
+		"TECH:H28"
+		,
+		"title": 
+		"Providing definitions for abbreviations by using the abbr element"
+		}
+		,
+		{
+		"id":
+		"TECH:PDF8"
+		,
+		"title": 
+		"Providing definitions for abbreviations via an E entry for a structure element"
+		}
+		
+		]
+	
+		}
+		
+		]}
+			]}
+		
+		]},
+		{"advisory": [
+		
+		]},
+		{"failure": [
+		
+		]}]
+		},
+		{
+			"id": "WCAG2:reading-level",
+			"alt_id": ["meaning-supplements"],
+			"num": "3.1.5",
+			"versions": ["2.0", "2.1", "2.2"],
+			"level": "AAA",
+			"handle": "Reading Level",
+			"title": "When text requires reading ability more advanced than the lower secondary education level after removal of proper names and titles, supplemental content, or a version that does not require reading ability more advanced than the lower secondary education level, is available.",
+		
+			"techniques": [
+		{"sufficient": [
+		
+		{
+		"id":
+		"TECH:G86"
+		,
+		"title": 
+		"Providing a text summary that can be understood by people with lower secondary education level reading ability"
+		}
+		,
+		{
+		"id":
+		"TECH:G103"
+		,
+		"title": 
+		"Providing visual illustrations, pictures, and symbols to help explain ideas, events, and processes"
+		}
+		,
+		{
+		"id":
+		"TECH:G79"
+		,
+		"title": 
+		"Providing a spoken version of the text"
+		}
+		,
+		{
+		"id":
+		"TECH:G153"
+		,
+		"title": 
+		"Making the text easier to read"
+		}
+		,
+		{
+		"id":
+		"TECH:G160"
+		,
+		"title": 
+		"Providing sign language versions of information, ideas, and processes that must be understood in order to use the content"
+		}
+		
+		]},
+		{"advisory": [
+		
+		]},
+		{"failure": [
+		
+		]}]
+		},
+		{
+			"id": "WCAG2:pronunciation",
+			"alt_id": ["meaning-pronunciation"],
+			"num": "3.1.6",
+			"versions": ["2.0", "2.1", "2.2"],
+			"level": "AAA",
+			"handle": "Pronunciation",
+			"title": "A mechanism is available for identifying specific pronunciation of words where meaning of the words, in context, is ambiguous without knowing the pronunciation.",
+		
+			"techniques": [
+		{"sufficient": [
+		
+		{
+		"id":
+		"TECH:G120"
+		,
+		"title": 
+		"Providing the pronunciation immediately following the word"
+		}
+		,
+		{
+		"id":
+		"TECH:G121"
+		,
+		"title": 
+		"Linking to pronunciations"
+		}
+		,
+		{
+		"id":
+		"TECH:G62"
+		,
+		"title": 
+		"Providing a glossary"
+		}
+		,
+		{
+		"id":
+		"TECH:G163"
+		,
+		"title": 
+		"Using standard diacritical marks that can be turned off"
+		}
+		,
+		{
+		"id":
+		"TECH:H62"
+		,
+		"title": 
+		"Using the ruby element"
+		}
+		
+		]},
+		{"advisory": [
+		
+		]},
+		{"failure": [
+		
+		]}]
+		}
+			],
+			"techniques": []
+		},
+		{
+			"id": "WCAG2:predictable",
+			"alt_id": ["consistent-behavior"],
+			"num": "3.2",
+			"versions": ["2.0", "2.1", "2.2"],
+			"handle": "Predictable",
+			"title": "Make Web pages appear and operate in predictable ways.",
+			"successcriteria": [
+				
+		{
+			"id": "WCAG2:on-focus",
+			"alt_id": ["consistent-behavior-receive-focus"],
+			"num": "3.2.1",
+			"versions": ["2.0", "2.1", "2.2"],
+			"level": "A",
+			"handle": "On Focus",
+			"title": "When any user interface component receives focus, it does not initiate a change of context.",
+		
+			"techniques": [
+		{"sufficient": [
+		
+		{
+		"id":
+		"TECH:G107"
+		,
+		"title": 
+		"Using \"activate\" rather than \"focus\" as a trigger for changes of context"
+		}
+		
+		]},
+		{"advisory": [
+		
+		{
+		"id":
+		"TECH:G200"
+		,
+		"title": 
+		"Opening new windows and tabs from a link only when necessary"
+		}
+		,
+		{
+		"id":
+		"TECH:G201"
+		,
+		"title": 
+		"Giving users advanced warning when opening a new window"
+		}
+		
+		]},
+		{"failure": [
+		
+		{
+		"id":
+		"TECH:F55"
+		,
+		"title": 
+		"Failure of Success Criteria 2.1.1, 2.4.7, and 3.2.1 due to using script to remove focus when focus is received"
+		}
+		
+		]}]
+		},
+		{
+			"id": "WCAG2:on-input",
+			"alt_id": ["consistent-behavior-unpredictable-change"],
+			"num": "3.2.2",
+			"versions": ["2.0", "2.1", "2.2"],
+			"level": "A",
+			"handle": "On Input",
+			"title": "Changing the setting of any user interface component does not automatically cause a change of context unless the user has been advised of the behavior before using the component.",
+		
+			"techniques": [
+		{"sufficient": [
+		
+		{
+		"id":
+		"TECH:G80"
+		,
+		"title": 
+		"Providing a submit button to initiate a change of context"
+			,
+		"using": [
+		
+		{
+		"id":
+		"TECH:H32"
+		,
+		"title": 
+		"Providing submit buttons"
+		}
+		,
+		{
+		"id":
+		"TECH:H84"
+		,
+		"title": 
+		"Using a button with a select element to perform an action"
+		}
+		,
+		{
+		"id":
+		"TECH:PDF15"
+		,
+		"title": 
+		"Providing submit buttons with the submit-form action in PDF forms"
+		}
+		
+		]
+	
+		}
+		,
+		{
+		"id":
+		"TECH:G13"
+		,
+		"title": 
+		"Describing what will happen before a change to a form control that causes a change of context to occur is made"
+		}
+		,
+		{
+		"id":
+		"TECH:SCR19"
+		,
+		"title": 
+		"Using an onchange event on a select element without causing a change of context"
+		}
+		
+		]},
+		{"advisory": [
+		
+		{
+		"id":
+		"TECH:G201"
+		,
+		"title": 
+		"Giving users advanced warning when opening a new window"
+		}
+		
+		]},
+		{"failure": [
+		
+		{
+		"id":
+		"TECH:F36"
+		,
+		"title": 
+		"Failure of Success Criterion 3.2.2 due to automatically submitting a form and given a value"
+		}
+		,
+		{
+		"id":
+		"TECH:F37"
+		,
+		"title": 
+		"Failure of Success Criterion 3.2.2 due to launching a new window without prior warning when the selection of a radio button, check box or select list is changed"
+		}
+		
+		]}]
+		},
+		{
+			"id": "WCAG2:consistent-navigation",
+			"alt_id": ["consistent-behavior-consistent-locations"],
+			"num": "3.2.3",
+			"versions": ["2.0", "2.1", "2.2"],
+			"level": "AA",
+			"handle": "Consistent Navigation",
+			"title": "Navigational mechanisms that are repeated on multiple Web pages within a set of Web pages occur in the same relative order each time they are repeated, unless a change is initiated by the user.",
+		
+			"techniques": [
+		{"sufficient": [
+		
+		{
+		"id":
+		"TECH:G61"
+		,
+		"title": 
+		"Presenting repeated components in the same relative order each time they appear"
+		}
+		
+		]},
+		{"advisory": [
+		
+		{
+		"id":
+		"TECH:PDF14"
+		,
+		"title": 
+		"Providing running headers and footers in PDF documents"
+		}
+		,
+		{
+		"id":
+		"TECH:PDF17"
+		,
+		"title": 
+		"Specifying consistent page numbering for PDF documents"
+		}
+		
+		]},
+		{"failure": [
+		
+		{
+		"id":
+		"TECH:F66"
+		,
+		"title": 
+		"Failure of Success Criterion 3.2.3 due to presenting navigation links in a different relative order on different pages"
+		}
+		
+		]}]
+		},
+		{
+			"id": "WCAG2:consistent-identification",
+			"alt_id": ["consistent-behavior-consistent-functionality"],
+			"num": "3.2.4",
+			"versions": ["2.0", "2.1", "2.2"],
+			"level": "AA",
+			"handle": "Consistent Identification",
+			"title": "Components that have the same functionality within a set of Web pages are identified consistently.",
+		
+			"techniques": [
+		{"sufficient": [
+		
+		{"and": [
+		
+		{
+		"id":
+		"TECH:G197"
+		,
+		"title": 
+		"Using labels, names, and text alternatives consistently for content that has the same functionality"
+		}
+		
+		]}
+		
+		]},
+		{"advisory": [
+		
+		]},
+		{"failure": [
+		
+		{
+		"id":
+		"TECH:F31"
+		,
+		"title": 
+		"Failure of Success Criterion 3.2.4 due to using two different labels for the same function on different Web pages within a set of Web pages"
+		}
+		
+		]}]
+		},
+		{
+			"id": "WCAG2:change-on-request",
+			"alt_id": ["consistent-behavior-no-extreme-changes-context"],
+			"num": "3.2.5",
+			"versions": ["2.0", "2.1", "2.2"],
+			"level": "AAA",
+			"handle": "Change on Request",
+			"title": "Changes of context are initiated only by user request or a mechanism is available to turn off such changes.",
+		
+			"techniques": [
+		{"sufficient": [
+		
+			{"situations": [
+			
+		{"title": "Situation A: If the Web page allows automatic updates:",
+		"techniques": [
+			
+		{
+		"id":
+		"TECH:G76"
+		,
+		"title": 
+		"Providing a mechanism to request an update of the content instead of updating automatically"
+		}
+		
+		]},
+		{"title": "Situation B: If automatic redirects are possible:",
+		"techniques": [
+			
+		{
+		"id":
+		"TECH:SVR1"
+		,
+		"title": 
+		"Implementing automatic redirects on the server side instead of on the client side"
+		}
+		,
+		{
+		"id":
+		"TECH:G110"
+		,
+		"title": 
+		"Using an instant client-side redirect"
+			,
+		"using": [
+		
+		{
+		"id":
+		"TECH:H76"
+		,
+		"title": 
+		"Using meta refresh to create an instant client-side redirect"
+		}
+		
+		]
+	
+		}
+		
+		]},
+		{"title": "Situation C: If the Web page uses pop-up windows:",
+		"techniques": [
+			
+		{
+		"id":
+		"TECH:future-change-on-request-1"
+		,
+		"title": 
+		"Including pop-up windows using one of the following techniques:"
+			,
+		"using": [
+		
+		{
+		"id":
+		"TECH:H83"
+		,
+		"title": 
+		"Using the target attribute to open a new window on user request and indicating this in link text"
+		}
+		,
+		{
+		"id":
+		"TECH:SCR24"
+		,
+		"title": 
+		"Using progressive enhancement to open new windows on user request"
+		}
+		
+		]
+	
+		}
+		
+		]},
+		{"title": "Situation D: If using an onchange event on a select element:",
+		"techniques": [
+			
+		{
+		"id":
+		"TECH:SCR19"
+		,
+		"title": 
+		"Using an onchange event on a select element without causing a change of context"
+		}
+		
+		]}
+			]}
+		
+		]},
+		{"advisory": [
+		
+		{
+		"id":
+		"TECH:G200"
+		,
+		"title": 
+		"Opening new windows and tabs from a link only when necessary"
+		}
+		
+		]},
+		{"failure": [
+		
+		{
+		"id":
+		"TECH:F60"
+		,
+		"title": 
+		"Failure of Success Criterion 3.2.5 due to launching a new window when a user enters text into an input field"
+		}
+		,
+		{
+		"id":
+		"TECH:F61"
+		,
+		"title": 
+		"Failure of Success Criterion 3.2.5 due to complete change of main content through an automatic update that the user cannot disable from within the content"
+		}
+		,
+		{
+		"id":
+		"TECH:F9"
+		,
+		"title": 
+		"Failure of Success Criterion 3.2.5 due to changing the context when the user removes focus from a form element"
+		}
+		,
+		{
+		"id":
+		"TECH:F22"
+		,
+		"title": 
+		"Failure of Success Criterion 3.2.5 due to opening windows that are not requested by the user"
+		}
+		,
+		{
+		"id":
+		"TECH:F52"
+		,
+		"title": 
+		"Failure of Success Criterion 3.2.1 and 3.2.5 due to opening a new window as soon as a new page is loaded"
+		}
+		,
+		{
+		"id":
+		"TECH:F40"
+		,
+		"title": 
+		"Failure due to using meta redirect with a time limit"
+		}
+		,
+		{
+		"id":
+		"TECH:F41"
+		,
+		"title": 
+		"Failure of Success Criterion 2.2.1, 2.2.4, and 3.2.5 due to using meta refresh to reload the page"
+		}
+		
+		]}]
+		},
+		{
+			"id": "WCAG2:consistent-help",
+			"alt_id": [],
+			"num": "3.2.6",
+			"versions": ["2.2"],
+			"level": "A",
+			"handle": "Consistent Help",
+			"title": "If a Web page contains any of the following help mechanisms, and those mechanisms are repeated on multiple Web pages within a set of Web pages, they occur in the same order relative to other page content, unless a change is initiated by the user:",
+		
+			"techniques": [
+		{"sufficient": [
+		
+		{
+		"id":
+		"TECH:G220"
+		,
+		"title": 
+		"Provide a contact-us link in a consistent location"
+		}
+		
+		]},
+		{"advisory": [
+		
+		]},
+		{"failure": [
+		
+		{
+		"id":
+		"TECH:future-consistent-help-1"
+		,
+		"title": 
+		"Inconsistent Help Location"
+		}
+		
+		]}]
+		}
+			],
+			"techniques": []
+		},
+		{
+			"id": "WCAG2:input-assistance",
+			"alt_id": ["minimize-error"],
+			"num": "3.3",
+			"versions": ["2.0", "2.1", "2.2"],
+			"handle": "Input Assistance",
+			"title": "Help users avoid and correct mistakes.",
+			"successcriteria": [
+				
+		{
+			"id": "WCAG2:error-identification",
+			"alt_id": ["minimize-error-identified"],
+			"num": "3.3.1",
+			"versions": ["2.0", "2.1", "2.2"],
+			"level": "A",
+			"handle": "Error Identification",
+			"title": "If an input error is automatically detected, the item that is in error is identified and the error is described to the user in text.",
+		
+			"techniques": [
+		{"sufficient": [
+		
+			{"situations": [
+			
+		{"title": "Situation A: If a form contains fields for which information from the user is mandatory.",
+		"techniques": [
+			
+		{
+		"id":
+		"TECH:G83"
+		,
+		"title": 
+		"Providing text descriptions to identify required fields that were not completed"
+		}
+		,
+		{
+		"id":
+		"TECH:ARIA21"
+		,
+		"title": 
+		"Using Aria-Invalid to Indicate An Error Field"
+		}
+		,
+		{
+		"id":
+		"TECH:SCR18"
+		,
+		"title": 
+		"Providing client-side validation and alert"
+		}
+		,
+		{
+		"id":
+		"TECH:PDF5"
+		,
+		"title": 
+		"Indicating required form controls in PDF forms"
+		}
+		
+		]},
+		{"title": "Situation B: If information provided by the user is required to be in a specific data format or of certain values.",
+		"techniques": [
+			
+		{
+		"id":
+		"TECH:ARIA18"
+		,
+		"title": 
+		"Using aria-alertdialog to Identify Errors"
+		}
+		,
+		{
+		"id":
+		"TECH:ARIA19"
+		,
+		"title": 
+		"Using ARIA role=alert or Live Regions to Identify Errors"
+		}
+		,
+		{
+		"id":
+		"TECH:ARIA21"
+		,
+		"title": 
+		"Using Aria-Invalid to Indicate An Error Field"
+		}
+		,
+		{
+		"id":
+		"TECH:G84"
+		,
+		"title": 
+		"Providing a text description when the user provides information that is not in the list of allowed values"
+		}
+		,
+		{
+		"id":
+		"TECH:G85"
+		,
+		"title": 
+		"Providing a text description when user input falls outside the required format or values"
+		}
+		,
+		{
+		"id":
+		"TECH:SCR18"
+		,
+		"title": 
+		"Providing client-side validation and alert"
+		}
+		,
+		{
+		"id":
+		"TECH:SCR32"
+		,
+		"title": 
+		"Providing client-side validation and adding error text via the DOM"
+		}
+		,
+		{
+		"id":
+		"TECH:PDF22"
+		,
+		"title": 
+		"Indicating when user input falls outside the required format or values in PDF forms"
+		}
+		
+		]}
+			]}
+		
+		]},
+		{"advisory": [
+		
+		{
+		"id":
+		"TECH:G139"
+		,
+		"title": 
+		"Creating a mechanism that allows users to jump to errors"
+		}
+		,
+		{
+		"id":
+		"TECH:G199"
+		,
+		"title": 
+		"Providing success feedback when data is submitted successfully"
+		}
+		
+		]},
+		{"failure": [
+		
+		]}]
+		},
+		{
+			"id": "WCAG2:labels-or-instructions",
+			"alt_id": ["minimize-error-cues"],
+			"num": "3.3.2",
+			"versions": ["2.0", "2.1", "2.2"],
+			"level": "A",
+			"handle": "Labels or Instructions",
+			"title": "Labels or instructions are provided when content requires user input.",
+		
+			"techniques": [
+		{"sufficient": [
+		
+		{
+		"id":
+		"TECH:G131"
+		,
+		"title": 
+		"Providing descriptive labels"
+			,
+		"using": [
+		
+		{
+		"id":
+		"TECH:ARIA1"
+		,
+		"title": 
+		"Using the aria-describedby property to provide a descriptive label for user interface controls"
+		}
+		,
+		{
+		"id":
+		"TECH:ARIA9"
+		,
+		"title": 
+		"Using aria-labelledby to concatenate a label from several text nodes"
+		}
+		,
+		{
+		"id":
+		"TECH:ARIA17"
+		,
+		"title": 
+		"Using grouping roles to identify related form controls"
+		}
+		,
+		{
+		"id":
+		"TECH:G89"
+		,
+		"title": 
+		"Providing expected data format and example"
+		}
+		,
+		{
+		"id":
+		"TECH:G184"
+		,
+		"title": 
+		"Providing text instructions at the beginning of a form or set of fields that describes the necessary input"
+		}
+		,
+		{
+		"id":
+		"TECH:G162"
+		,
+		"title": 
+		"Positioning labels to maximize predictability of relationships"
+		}
+		,
+		{
+		"id":
+		"TECH:G83"
+		,
+		"title": 
+		"Providing text descriptions to identify required fields that were not completed"
+		}
+		,
+		{
+		"id":
+		"TECH:H90"
+		,
+		"title": 
+		"Indicating required form controls using label or legend"
+		}
+		,
+		{
+		"id":
+		"TECH:PDF5"
+		,
+		"title": 
+		"Indicating required form controls in PDF forms"
+		}
+		
+		]
+	
+		}
+		,
+		{
+		"id":
+		"TECH:H44"
+		,
+		"title": 
+		"Using label elements to associate text labels with form controls"
+		}
+		,
+		{
+		"id":
+		"TECH:PDF10"
+		,
+		"title": 
+		"Providing labels for interactive form controls in PDF documents"
+		}
+		,
+		{
+		"id":
+		"TECH:H71"
+		,
+		"title": 
+		"Providing a description for groups of form controls using fieldset and legend elements"
+		}
+		,
+		{
+		"id":
+		"TECH:G167"
+		,
+		"title": 
+		"Using an adjacent button to label the purpose of a field"
+		}
+		
+		]},
+		{"advisory": [
+		
+		{
+		"id":
+		"TECH:G13"
+		,
+		"title": 
+		"Describing what will happen before a change to a form control that causes a change of context to occur is made"
+		}
+		
+		]},
+		{"failure": [
+		
+		{
+		"id":
+		"TECH:F82"
+		,
+		"title": 
+		"Failure of Success Criterion 3.3.2 by visually formatting a set of phone number fields but not including a text label"
+		}
+		
+		]}]
+		},
+		{
+			"id": "WCAG2:error-suggestion",
+			"alt_id": ["minimize-error-suggestions"],
+			"num": "3.3.3",
+			"versions": ["2.0", "2.1", "2.2"],
+			"level": "AA",
+			"handle": "Error Suggestion",
+			"title": "If an input error is automatically detected and suggestions for correction are known, then the suggestions are provided to the user, unless it would jeopardize the security or purpose of the content.",
+		
+			"techniques": [
+		{"sufficient": [
+		
+			{"situations": [
+			
+		{"title": "Situation A: If information for a field is required to be in a specific data format:",
+		"techniques": [
+			
+		{
+		"id":
+		"TECH:ARIA18"
+		,
+		"title": 
+		"Using aria-alertdialog to Identify Errors"
+		}
+		,
+		{
+		"id":
+		"TECH:G85"
+		,
+		"title": 
+		"Providing a text description when user input falls outside the required format or values"
+		}
+		,
+		{
+		"id":
+		"TECH:G177"
+		,
+		"title": 
+		"Providing suggested correction text"
+		}
+		,
+		{
+		"id":
+		"TECH:PDF22"
+		,
+		"title": 
+		"Indicating when user input falls outside the required format or values in PDF forms"
+		}
+		
+		]},
+		{"title": "Situation B: Information provided by the user is required to be one of a limited set of values:",
+		"techniques": [
+			
+		{
+		"id":
+		"TECH:ARIA18"
+		,
+		"title": 
+		"Using aria-alertdialog to Identify Errors"
+		}
+		,
+		{
+		"id":
+		"TECH:G84"
+		,
+		"title": 
+		"Providing a text description when the user provides information that is not in the list of allowed values"
+		}
+		,
+		{
+		"id":
+		"TECH:G177"
+		,
+		"title": 
+		"Providing suggested correction text"
+		}
+		,
+		{
+		"id":
+		"TECH:PDF22"
+		,
+		"title": 
+		"Indicating when user input falls outside the required format or values in PDF forms"
+		}
+		
+		]}
+			]}
+		
+		]},
+		{"advisory": [
+		
+		{
+		"id":
+		"TECH:G139"
+		,
+		"title": 
+		"Creating a mechanism that allows users to jump to errors"
+		}
+		,
+		{
+		"id":
+		"TECH:G199"
+		,
+		"title": 
+		"Providing success feedback when data is submitted successfully"
+		}
+		
+		]},
+		{"failure": [
+		
+		]}]
+		},
+		{
+			"id": "WCAG2:error-prevention-legal-financial-data",
+			"alt_id": ["minimize-error-reversible"],
+			"num": "3.3.4",
+			"versions": ["2.0", "2.1", "2.2"],
+			"level": "AA",
+			"handle": "Error Prevention (Legal, Financial, Data)",
+			"title": "For Web pages that cause legal commitments or financial transactions for the user to occur, that modify or delete user-controllable data in data storage systems, or that submit user test responses, at least one of the following is true:",
+		
+			"details": [{
+				"type": "ulist",
+				"items": [
+					
+		{
+			"handle": "Reversible",
+			"text": "Submissions are reversible."
+		},
+		{
+			"handle": "Checked",
+			"text": "Data entered by the user is checked for input errors and the user is provided an opportunity to correct them."
+		},
+		{
+			"handle": "Confirmed",
+			"text": "A mechanism is available for reviewing, confirming, and correcting information before finalizing the submission."
+		}
+				]
+			}],
+		
+			"techniques": [
+		{"sufficient": [
+		
+			{"situations": [
+			
+		{"title": "Situation A: If an application causes a legal transaction to occur, such as making a purchase or submitting an income tax return:",
+		"techniques": [
+			
+		{
+		"id":
+		"TECH:G164"
+		,
+		"title": 
+		"Providing a stated time within which an online request (or transaction) may be amended or canceled by the user after making the request"
+		}
+		,
+		{
+		"id":
+		"TECH:G98"
+		,
+		"title": 
+		"Providing the ability for the user to review and correct answers before submitting"
+		}
+		,
+		{
+		"id":
+		"TECH:G155"
+		,
+		"title": 
+		"Providing a checkbox in addition to a submit button"
+		}
+		
+		]},
+		{"title": "Situation B: If an action causes information to be deleted:",
+		"techniques": [
+			
+		{
+		"id":
+		"TECH:G99"
+		,
+		"title": 
+		"Providing the ability to recover deleted information"
+		}
+		,
+		{
+		"id":
+		"TECH:G168"
+		,
+		"title": 
+		"Requesting confirmation to continue with selected action"
+		}
+		,
+		{
+		"id":
+		"TECH:G155"
+		,
+		"title": 
+		"Providing a checkbox in addition to a submit button"
+		}
+		
+		]},
+		{"title": "Situation C: If the Web page includes a testing application:",
+		"techniques": [
+			
+		{
+		"id":
+		"TECH:G98"
+		,
+		"title": 
+		"Providing the ability for the user to review and correct answers before submitting"
+		}
+		,
+		{
+		"id":
+		"TECH:G168"
+		,
+		"title": 
+		"Requesting confirmation to continue with selected action"
+		}
+		
+		]}
+			]}
+		
+		]},
+		{"advisory": [
+		
+		{
+		"id":
+		"TECH:SCR18"
+		,
+		"title": 
+		"Providing client-side validation and alert"
+		}
+		,
+		{
+		"id":
+		"TECH:G199"
+		,
+		"title": 
+		"Providing success feedback when data is submitted successfully"
+		}
+		
+		]},
+		{"failure": [
+		
+		]}]
+		},
+		{
+			"id": "WCAG2:help",
+			"alt_id": ["minimize-error-context-help"],
+			"num": "3.3.5",
+			"versions": ["2.0", "2.1", "2.2"],
+			"level": "AAA",
+			"handle": "Help",
+			"title": "Context-sensitive help is available.",
+		
+			"techniques": [
+		{"sufficient": [
+		
+			{"situations": [
+			
+		{"title": "Situation A: If a form requires text input:",
+		"techniques": [
+			
+		{
+		"id":
+		"TECH:G71"
+		,
+		"title": 
+		"Providing a help link on every Web page"
+		}
+		,
+		{
+		"id":
+		"TECH:G193"
+		,
+		"title": 
+		"Providing help by an assistant in the Web page"
+		}
+		,
+		{
+		"id":
+		"TECH:G194"
+		,
+		"title": 
+		"Providing spell checking and suggestions for text input"
+		}
+		,
+		{
+		"id":
+		"TECH:G184"
+		,
+		"title": 
+		"Providing text instructions at the beginning of a form or set of fields that describes the necessary input"
+		}
+		
+		]},
+		{"title": "Situation B: If a form requires text input in an expected data format:",
+		"techniques": [
+			
+		{
+		"id":
+		"TECH:G89"
+		,
+		"title": 
+		"Providing expected data format and example"
+		}
+		,
+		{
+		"id":
+		"TECH:G184"
+		,
+		"title": 
+		"Providing text instructions at the beginning of a form or set of fields that describes the necessary input"
+		}
+		
+		]}
+			]}
+		
+		]},
+		{"advisory": [
+		
+		{
+		"id":
+		"TECH:H89"
+		,
+		"title": 
+		"Using the title attribute to provide context-sensitive help"
+		}
+		
+		]},
+		{"failure": [
+		
+		]}]
+		},
+		{
+			"id": "WCAG2:error-prevention-all",
+			"alt_id": ["minimize-error-reversible-all"],
+			"num": "3.3.6",
+			"versions": ["2.0", "2.1", "2.2"],
+			"level": "AAA",
+			"handle": "Error Prevention (All)",
+			"title": "For Web pages that require the user to submit information, at least one of the following is true:",
+		
+			"details": [{
+				"type": "ulist",
+				"items": [
+					
+		{
+			"handle": "Reversible",
+			"text": "Submissions are reversible."
+		},
+		{
+			"handle": "Checked",
+			"text": "Data entered by the user is checked for input errors and the user is provided an opportunity to correct them."
+		},
+		{
+			"handle": "Confirmed",
+			"text": "A mechanism is available for reviewing, confirming, and correcting information before finalizing the submission."
+		}
+				]
+			}],
+		
+			"techniques": [
+		{"sufficient": [
+		
+		]},
+		{"advisory": [
+		
+		]},
+		{"failure": [
+		
+		]}]
+		},
+		{
+			"id": "WCAG2:redundant-entry",
+			"alt_id": [],
+			"num": "3.3.7",
+			"versions": ["2.2"],
+			"level": "A",
+			"handle": "Redundant Entry",
+			"title": "Information previously entered by or provided to the user that is required to be entered again in the same process is either:",
+		
+			"techniques": [
+		{"sufficient": [
+		
+		{
+		"id":
+		"TECH:G221"
+		,
+		"title": 
+		"Provide data from a previous step in a process"
+		}
+		,
+		{
+		"id":
+		"TECH:future-redundant-entry-1"
+		,
+		"title": 
+		"Not requesting the same information twice (Potential future technique)"
+		}
+		
+		]},
+		{"advisory": [
+		
+		]},
+		{"failure": [
+		
+		]}]
+		},
+		{
+			"id": "WCAG2:accessible-authentication-minimum",
+			"alt_id": [],
+			"num": "3.3.8",
+			"versions": ["2.2"],
+			"level": "AA",
+			"handle": "Accessible Authentication (Minimum)",
+			"title": "A cognitive function test (such as remembering a password or solving a puzzle) is not required for any step in an authentication process unless that step provides at least one of the following:",
+		
+			"details": [{
+				"type": "ulist",
+				"items": [
+					
+		{
+			"handle": "Alternative",
+			"text": "Another authentication method that does not rely on a cognitive function test."
+		},
+		{
+			"handle": "Mechanism",
+			"text": "A mechanism is available to assist the user in completing the cognitive function test."
+		},
+		{
+			"handle": "Object Recognition",
+			"text": "The cognitive function test is to recognize objects."
+		},
+		{
+			"handle": "Personal Content",
+			"text": "The cognitive function test is to identify non-text content the user provided to the Web site."
+		}
+				]
+			}],
+		
+			"techniques": [
+		{"sufficient": [
+		
+		{
+		"id":
+		"TECH:G218"
+		,
+		"title": 
+		"Email link authentication"
+		}
+		,
+		{
+		"id":
+		"TECH:H100"
+		,
+		"title": 
+		"Providing properly marked up email and password inputs"
+		}
+		,
+		{
+		"id":
+		"TECH:future-accessible-authentication-minimum-1"
+		,
+		"title": 
+		"Providing WebAuthn as an alternative to username/password (Potential future technique)"
+		}
+		,
+		{
+		"id":
+		"TECH:future-accessible-authentication-minimum-1"
+		,
+		"title": 
+		"Providing a 3rd party login using OAuth (Potential future technique)"
+		}
+		,
+		{
+		"id":
+		"TECH:future-accessible-authentication-minimum-1"
+		,
+		"title": 
+		"Using two techniques to provide 2 factor authentication (Potential future technique)"
+		}
+		
+		]},
+		{"advisory": [
+		
+		]},
+		{"failure": [
+		
+		{
+		"id":
+		"TECH:F109"
+		,
+		"title": 
+		"Failure of Success Criterion 3.3.8 and 3.3.9 due to preventing password or code re-entry in the same format"
+		}
+		
+		]}]
+		},
+		{
+			"id": "WCAG2:accessible-authentication-enhanced",
+			"alt_id": [],
+			"num": "3.3.9",
+			"versions": ["2.2"],
+			"level": "AAA",
+			"handle": "Accessible Authentication (Enhanced)",
+			"title": "A cognitive function test (such as remembering a password or solving a puzzle) is not required for any step in an authentication process unless that step provides at least one of the following:",
+		
+			"details": [{
+				"type": "ulist",
+				"items": [
+					
+		{
+			"handle": "Alternative",
+			"text": "Another authentication method that does not rely on a cognitive function test."
+		},
+		{
+			"handle": "Mechanism",
+			"text": "A mechanism is available to assist the user in completing the cognitive function test."
+		}
+				]
+			}],
+		
+			"techniques": [
+		{"sufficient": [
+		
+		{
+		"id":
+		"TECH:G218"
+		,
+		"title": 
+		"Email link authentication"
+		}
+		,
+		{
+		"id":
+		"TECH:future-accessible-authentication-enhanced-1"
+		,
+		"title": 
+		"Providing a properly marked up email and password inputs (Potential future technique)"
+		}
+		,
+		{
+		"id":
+		"TECH:future-accessible-authentication-enhanced-1"
+		,
+		"title": 
+		"Providing WebAuthn as an alternative to username/password (Potential future technique)"
+		}
+		,
+		{
+		"id":
+		"TECH:future-accessible-authentication-enhanced-1"
+		,
+		"title": 
+		"Providing a 3rd party login using OAuth (Potential future technique)"
+		}
+		,
+		{
+		"id":
+		"TECH:future-accessible-authentication-enhanced-1"
+		,
+		"title": 
+		"Using two techniques to provide 2 factor authentication (Potential future technique)"
+		}
+		
+		]},
+		{"advisory": [
+		
+		]},
+		{"failure": [
+		
+		{
+		"id":
+		"TECH:F109"
+		,
+		"title": 
+		"Failure of Success Criterion 3.3.8 and 3.3.9 due to preventing password or code re-entry in the same format"
+		}
+		
+		]}]
+		}
+			],
+			"techniques": []
+		}
+			]
+		},
+		{
+			"id": "WCAG2:robust",
+			"num": "4",
+			"versions": ["2.0", "2.1", "2.2"],
+			"handle": "Robust",
+			"title": "Content must be robust enough that it can be interpreted by a wide variety of user agents, including assistive technologies.",
+			"guidelines": [
+				
+		{
+			"id": "WCAG2:compatible",
+			"alt_id": ["ensure-compat"],
+			"num": "4.1",
+			"versions": ["2.0", "2.1", "2.2"],
+			"handle": "Compatible",
+			"title": "Maximize compatibility with current and future user agents, including assistive technologies.",
+			"successcriteria": [
+				
+		{
+			"id": "WCAG2:parsing",
+			"alt_id": ["ensure-compat-parses"],
+			"num": "4.1.1",
+			"versions": ["2.0", "2.1"],
+			"level": "",
+			"handle": "Parsing (Obsolete and removed)",
+			"title": "This criterion was originally adopted to address problems that assistive technology had directly parsing HTML. Assistive technology no longer has any need to directly parse HTML. Consequently, these problems either no longer exist or are addressed by other criteria. This criterion no longer has utility and is removed.",
+		
+			"techniques": [
+		{"sufficient": [
+		
+		{
+		"id":
+		"TECH:G134"
+		,
+		"title": 
+		"Validating Web pages"
+		}
+		,
+		{
+		"id":
+		"TECH:G192"
+		,
+		"title": 
+		"Fully conforming to specifications"
+		}
+		,
+		{
+		"id":
+		"TECH:H88"
+		,
+		"title": 
+		"Using HTML according to spec"
+		}
+		,
+		{
+		"id":
+		"TECH:future-parsing-1"
+		,
+		"title": 
+		"Ensuring that Web pages can be parsed by using one of the following techniques:"
+			,
+		"using": [
+		
+		{"and": [
+		
+		{
+		"id":
+		"TECH:H74"
+		,
+		"title": 
+		"Ensuring that opening and closing tags are used according to specification"
+		}
+		,
+		{
+		"id":
+		"TECH:H93"
+		,
+		"title": 
+		"Ensuring that id attributes are unique on a Web page"
+		}
+		,
+		{
+		"id":
+		"TECH:H94"
+		,
+		"title": 
+		"Ensuring that elements do not contain duplicate attributes"
+		}
+		
+		]}
+		,
+		{
+		"id":
+		"TECH:H75"
+		,
+		"title": 
+		"Ensuring that Web pages are well-formed"
+		}
+		
+		]
+	
+		}
+		
+		]},
+		{"advisory": [
+		
+		]},
+		{"failure": [
+		
+		{
+		"id":
+		"TECH:F70"
+		,
+		"title": 
+		"Failure of Success Criterion 4.1.1 due to incorrect use of start and end tags or attribute markup"
+		}
+		,
+		{
+		"id":
+		"TECH:F77"
+		,
+		"title": 
+		"Failure of Success Criterion 4.1.1 due to duplicate values of type ID"
+		}
+		
+		]}]
+		},
+		{
+			"id": "WCAG2:name-role-value",
+			"alt_id": ["ensure-compat-rsv"],
+			"num": "4.1.2",
+			"versions": ["2.0", "2.1", "2.2"],
+			"level": "A",
+			"handle": "Name, Role, Value",
+			"title": "For all user interface components (including but not limited to: form elements, links and components generated by scripts), the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies.",
+		
+			"techniques": [
+		{"sufficient": [
+		
+			{"situations": [
+			
+		{"title": "Situation A: If using a standard user interface component in a markup language (e.g., HTML):",
+		"techniques": [
+			
+		{
+		"id":
+		"TECH:ARIA14"
+		,
+		"title": 
+		"Using aria-label to provide an invisible label where a visible label cannot be used"
+		}
+		,
+		{
+		"id":
+		"TECH:ARIA16"
+		,
+		"title": 
+		"Using aria-labelledby to provide a name for user interface controls"
+		}
+		,
+		{
+		"id":
+		"TECH:G108"
+		,
+		"title": 
+		"Using markup features to expose the name and role, allow user-settable properties to be directly set, and provide notification of changes"
+			,
+		"using": [
+		
+		{
+		"id":
+		"TECH:H91"
+		,
+		"title": 
+		"Using HTML form controls and links"
+		}
+		,
+		{
+		"id":
+		"TECH:H44"
+		,
+		"title": 
+		"Using label elements to associate text labels with form controls"
+		}
+		,
+		{
+		"id":
+		"TECH:H64"
+		,
+		"title": 
+		"Using the title attribute of the iframe element"
+		}
+		,
+		{
+		"id":
+		"TECH:H65"
+		,
+		"title": 
+		"Using the title attribute to identify form controls when the label element cannot be used"
+		}
+		,
+		{
+		"id":
+		"TECH:H88"
+		,
+		"title": 
+		"Using HTML according to spec"
+		}
+		
+		]
+	
+		}
+		
+		]},
+		{"title": "Situation B: If using script or code to re-purpose a standard user interface component in a markup language:",
+		"techniques": [
+			
+		{
+		"id":
+		"TECH:future-name-role-value-1"
+		,
+		"title": 
+		"Exposing the names and roles, allowing user-settable properties to be directly set, and providing notification of changes using one of the following techniques:"
+			,
+		"using": [
+		
+		{
+		"id":
+		"TECH:ARIA16"
+		,
+		"title": 
+		"Using aria-labelledby to provide a name for user interface controls"
+		}
+		
+		]
+	
+		}
+		
+		]},
+		{"title": "Situation C: If using a standard user interface component in a programming technology:",
+		"techniques": [
+			
+		{
+		"id":
+		"TECH:G135"
+		,
+		"title": 
+		"Using the accessibility API features of a technology to expose names and notification of changes"
+			,
+		"using": [
+		
+		{
+		"id":
+		"TECH:PDF10"
+		,
+		"title": 
+		"Providing labels for interactive form controls in PDF documents"
+		}
+		,
+		{
+		"id":
+		"TECH:PDF12"
+		,
+		"title": 
+		"Providing name, role, value information for form fields in PDF documents"
+		}
+		
+		]
+	
+		}
+		
+		]},
+		{"title": "Situation D: If creating your own user interface component in a programming language:",
+		"techniques": [
+			
+		{
+		"id":
+		"TECH:G10"
+		,
+		"title": 
+		"Creating components using a technology that supports the accessibility notification of changes"
+			,
+		"using": [
+		
+		{
+		"id":
+		"TECH:ARIA4"
+		,
+		"title": 
+		"Using a WAI-ARIA role to expose the role of a user interface component"
+		}
+		,
+		{
+		"id":
+		"TECH:ARIA5"
+		,
+		"title": 
+		"Using WAI-ARIA state and property attributes to expose the state of a user interface component"
+		}
+		,
+		{
+		"id":
+		"TECH:ARIA16"
+		,
+		"title": 
+		"Using aria-labelledby to provide a name for user interface controls"
+		}
+		
+		]
+	
+		}
+		
+		]}
+			]}
+		
+		]},
+		{"advisory": [
+		
+		]},
+		{"failure": [
+		
+		{
+		"id":
+		"TECH:F59"
+		,
+		"title": 
+		"Failure of Success Criterion 4.1.2 due to using script to make div or span a user interface control in HTML without providing a role for the control"
+		}
+		,
+		{
+		"id":
+		"TECH:F15"
+		,
+		"title": 
+		"Failure of Success Criterion 4.1.2 due to implementing custom controls that do not use an accessibility API for the technology, or do so incompletely"
+		}
+		,
+		{
+		"id":
+		"TECH:F20"
+		,
+		"title": 
+		"Failure of Success Criterion 1.1.1 and 4.1.2 due to not updating text alternatives when changes to non-text content occur"
+		}
+		,
+		{
+		"id":
+		"TECH:F68"
+		,
+		"title": 
+		"Failure of Success Criterion 4.1.2 due to a user interface control not having a programmatically determined name"
+		}
+		,
+		{
+		"id":
+		"TECH:F79"
+		,
+		"title": 
+		"Failure of Success Criterion 4.1.2 due to the focus state of a user interface component not being programmatically determinable or no notification of change of focus state available"
+		}
+		,
+		{
+		"id":
+		"TECH:F86"
+		,
+		"title": 
+		"Failure of Success Criterion 4.1.2 due to not providing names for each part of a multi-part form field, such as a US telephone number"
+		}
+		,
+		{
+		"id":
+		"TECH:F89"
+		,
+		"title": 
+		"Failure of Success Criteria 2.4.4, 2.4.9 and 4.1.2 due to not providing an accessible name for an image which is the only content in a link"
+		}
+		
+		]}]
+		},
+		{
+			"id": "WCAG2:status-messages",
+			"alt_id": [],
+			"num": "4.1.3",
+			"versions": ["2.1", "2.2"],
+			"level": "AA",
+			"handle": "Status Messages",
+			"title": "In content implemented using markup languages, status messages can be programmatically determined through role or properties such that they can be presented to the user by assistive technologies without receiving focus.",
+		
+			"techniques": [
+		{"sufficient": [
+		
+			{"situations": [
+			
+		{"title": "Situation A: If a status message advises on the success or results of an action, or the state of an application:",
+		"techniques": [
+			
+		{
+		"id":
+		"TECH:ARIA22"
+		,
+		"title": 
+		"Using role=status to present status messages"
+			,
+		"using": [
+		
+		{
+		"id":
+		"TECH:G199"
+		,
+		"title": 
+		"Providing success feedback when data is submitted successfully"
+		}
+		
+		]
+	
+		}
+		
+		]},
+		{"title": "Situation B: If a status message conveys a suggestion, or a warning on the existence of an error:",
+		"techniques": [
+			
+		{
+		"id":
+		"TECH:ARIA19"
+		,
+		"title": 
+		"Using ARIA role=alert or Live Regions to Identify Errors"
+			,
+		"using": [
+		
+		{
+		"id":
+		"TECH:G83"
+		,
+		"title": 
+		"Providing text descriptions to identify required fields that were not completed"
+		}
+		,
+		{
+		"id":
+		"TECH:G84"
+		,
+		"title": 
+		"Providing a text description when the user provides information that is not in the list of allowed values"
+		}
+		,
+		{
+		"id":
+		"TECH:G85"
+		,
+		"title": 
+		"Providing a text description when user input falls outside the required format or values"
+		}
+		,
+		{
+		"id":
+		"TECH:G177"
+		,
+		"title": 
+		"Providing suggested correction text"
+		}
+		,
+		{
+		"id":
+		"TECH:G194"
+		,
+		"title": 
+		"Providing spell checking and suggestions for text input"
+		}
+		
+		]
+	
+		}
+		
+		]},
+		{"title": "Situation C: If a status message conveys information on the progress of a process:",
+		"techniques": [
+			
+		{
+		"id":
+		"TECH:ARIA23"
+		,
+		"title": 
+		"Using role=log to identify sequential information updates"
+		}
+		,
+		{
+		"id":
+		"TECH:future-status-messages-1"
+		,
+		"title": 
+		"Using role=\"progressbar\" (future link)"
+		}
+		,
+		{"and": [
+		
+		{
+		"id":
+		"TECH:ARIA22"
+		,
+		"title": 
+		"Using role=status to present status messages"
+		}
+		,
+		{
+		"id":
+		"TECH:G193"
+		,
+		"title": 
+		"Providing help by an assistant in the Web page"
+		}
+		
+		]}
+		
+		]}
+			]}
+		
+		]},
+		{"advisory": [
+		
+		{
+		"id":
+		"TECH:future-status-messages-1"
+		,
+		"title": 
+		"Using aria-live regions with chat clients (future link)"
+		}
+		,
+		{
+		"id":
+		"TECH:future-status-messages-1"
+		,
+		"title": 
+		"Using role=\"marquee\" (future link)"
+		}
+		,
+		{
+		"id":
+		"TECH:future-status-messages-1"
+		,
+		"title": 
+		"Using role=\"timer\" (future link)"
+		}
+		,
+		{
+		"id":
+		"TECH:ARIA18"
+		,
+		"title": 
+		"Using aria-alertdialog to Identify Errors"
+		}
+		,
+		{
+		"id":
+		"TECH:SCR14"
+		,
+		"title": 
+		"Using scripts to make nonessential alerts optional"
+		}
+		
+		]},
+		{"failure": [
+		
+		{
+		"id":
+		"TECH:F103"
+		,
+		"title": 
+		"Failure of Success Criterion 4.1.3 due to providing status messages that cannot be programmatically determined through role or properties"
+		}
+		,
+		{
+		"id":
+		"TECH:future-status-messages-1"
+		,
+		"title": 
+		"Using role=\"alert\" or aria-live=\"assertive\" on content which is not important and time-sensitive (future link)"
+		}
+		
+		]}]
+		}
+			],
+			"techniques": []
+		}
+			]
+		}
+			]
+		}
+	
\ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100644
index 0000000000..9fcfa92eb7
--- /dev/null
+++ b/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8"/>
+		<title>Web Content Accessibility Guidelines {{ versionDecimal }}</title>
+	</head>
+	<body>
+		<h1>Web Content Accessibility Guidelines {{ versionDecimal }}</h1>
+		<ul>
+			<li><a href="techniques/">Techniques</a></li>
+			<li><a href="understanding/">Understanding Docs</a></li>
+		</ul>
+	</body>
+</html>
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000000..8f37dfbe7d
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,3050 @@
+{
+  "name": "wcag",
+  "version": "0.1.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "wcag",
+      "version": "0.1.0",
+      "license": "W3C",
+      "dependencies": {
+        "@11ty/eleventy": "^3.0.0",
+        "cheerio": "^1.0.0",
+        "glob": "^10.3.16",
+        "gray-matter": "^4.0.3",
+        "liquidjs": "^10.17.0",
+        "lodash-es": "^4.17.21",
+        "mkdirp": "^3.0.1",
+        "rimraf": "^5.0.10",
+        "tsx": "^4.11.0"
+      },
+      "devDependencies": {
+        "@types/lodash-es": "^4.17.12",
+        "@types/node": "^20.12.12",
+        "prettier": "^3.3.2",
+        "typescript": "^5.4.5"
+      }
+    },
+    "node_modules/@11ty/dependency-tree": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@11ty/dependency-tree/-/dependency-tree-3.0.1.tgz",
+      "integrity": "sha512-aZizxcL4Z/clm3KPRx8i9ohW9R2gLssXfUSy7qQmQRXb4CUOyvmqk2gKeJqRmXIfMi2bB9w03SgtN5v1YwqpiA==",
+      "dependencies": {
+        "@11ty/eleventy-utils": "^1.0.2"
+      }
+    },
+    "node_modules/@11ty/dependency-tree-esm": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@11ty/dependency-tree-esm/-/dependency-tree-esm-1.0.0.tgz",
+      "integrity": "sha512-Z3KN1Fkv50UM/ZzTR3VBbyOY52HnmhIVCsAV1hn2UzFsGAjyF1Cw8uohhVtheDOSuBR7ZSeo1unwkz1HxFlUtQ==",
+      "dependencies": {
+        "@11ty/eleventy-utils": "^1.0.2",
+        "acorn": "^8.10.0",
+        "dependency-graph": "^0.11.0",
+        "normalize-path": "^3.0.0"
+      }
+    },
+    "node_modules/@11ty/dependency-tree-esm/node_modules/dependency-graph": {
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/dependency-graph/-/dependency-graph-0.11.0.tgz",
+      "integrity": "sha512-JeMq7fEshyepOWDfcfHK06N3MhyPhz++vtqWhMT5O9A3K42rdsEDpfdVqjaqaAhsw6a+ZqeDvQVtD0hFHQWrzg==",
+      "engines": {
+        "node": ">= 0.6.0"
+      }
+    },
+    "node_modules/@11ty/eleventy": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@11ty/eleventy/-/eleventy-3.0.0.tgz",
+      "integrity": "sha512-0P0ZsJXVW2QiNdhd7z+GYy6n+ivh0enx1DRdua5ta6NlzY2AhbkeWBY6U+FKA8lPS3H4+XsTpfLLfIScpPZLaQ==",
+      "dependencies": {
+        "@11ty/dependency-tree": "^3.0.1",
+        "@11ty/dependency-tree-esm": "^1.0.0",
+        "@11ty/eleventy-dev-server": "^2.0.4",
+        "@11ty/eleventy-plugin-bundle": "^3.0.0",
+        "@11ty/eleventy-utils": "^1.0.3",
+        "@11ty/lodash-custom": "^4.17.21",
+        "@11ty/posthtml-urls": "^1.0.0",
+        "@11ty/recursive-copy": "^3.0.0",
+        "@sindresorhus/slugify": "^2.2.1",
+        "bcp-47-normalize": "^2.3.0",
+        "chardet": "^2.0.0",
+        "chokidar": "^3.6.0",
+        "cross-spawn": "^7.0.3",
+        "debug": "^4.3.7",
+        "dependency-graph": "^1.0.0",
+        "entities": "^5.0.0",
+        "fast-glob": "^3.3.2",
+        "filesize": "^10.1.6",
+        "graceful-fs": "^4.2.11",
+        "gray-matter": "^4.0.3",
+        "is-glob": "^4.0.3",
+        "iso-639-1": "^3.1.3",
+        "js-yaml": "^4.1.0",
+        "kleur": "^4.1.5",
+        "liquidjs": "^10.17.0",
+        "luxon": "^3.5.0",
+        "markdown-it": "^14.1.0",
+        "micromatch": "^4.0.8",
+        "minimist": "^1.2.8",
+        "moo": "^0.5.2",
+        "node-retrieve-globals": "^6.0.0",
+        "normalize-path": "^3.0.0",
+        "nunjucks": "^3.2.4",
+        "please-upgrade-node": "^3.2.0",
+        "posthtml": "^0.16.6",
+        "posthtml-match-helper": "^2.0.2",
+        "semver": "^7.6.3",
+        "slugify": "^1.6.6"
+      },
+      "bin": {
+        "eleventy": "cmd.cjs"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/11ty"
+      }
+    },
+    "node_modules/@11ty/eleventy-dev-server": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/@11ty/eleventy-dev-server/-/eleventy-dev-server-2.0.4.tgz",
+      "integrity": "sha512-d0CuufX6yPtVz+RW0oJZg1pVoxo1jOrPmpXYacoiKLJm0MMC9MkPQOCXlimguHVaceHejFo5+aZB9/aGB2RR0A==",
+      "dependencies": {
+        "@11ty/eleventy-utils": "^1.0.3",
+        "chokidar": "^3.6.0",
+        "debug": "^4.3.7",
+        "dev-ip": "^1.0.1",
+        "finalhandler": "^1.3.0",
+        "mime": "^3.0.0",
+        "minimist": "^1.2.8",
+        "morphdom": "^2.7.4",
+        "please-upgrade-node": "^3.2.0",
+        "send": "^0.19.0",
+        "ssri": "^11.0.0",
+        "urlpattern-polyfill": "^10.0.0",
+        "ws": "^8.18.0"
+      },
+      "bin": {
+        "eleventy-dev-server": "cmd.js"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/11ty"
+      }
+    },
+    "node_modules/@11ty/eleventy-plugin-bundle": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@11ty/eleventy-plugin-bundle/-/eleventy-plugin-bundle-3.0.0.tgz",
+      "integrity": "sha512-JSnqehT+sWSPi6e44jTXUW+KiV9284YF9fzPQvfGB4cXlk/m/SJk17CavHCleIvKXDN+jrUw9TZkwAwr85ONWQ==",
+      "dependencies": {
+        "debug": "^4.3.4",
+        "posthtml-match-helper": "^2.0.2"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/11ty"
+      }
+    },
+    "node_modules/@11ty/eleventy-utils": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@11ty/eleventy-utils/-/eleventy-utils-1.0.3.tgz",
+      "integrity": "sha512-nULO91om7vQw4Y/UBjM8i7nJ1xl+/nyK4rImZ41lFxiY2d+XUz7ChAj1CDYFjrLZeu0utAYJTZ45LlcHTkUG4g==",
+      "dependencies": {
+        "normalize-path": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/11ty"
+      }
+    },
+    "node_modules/@11ty/eleventy/node_modules/argparse": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="
+    },
+    "node_modules/@11ty/eleventy/node_modules/entities": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-5.0.0.tgz",
+      "integrity": "sha512-BeJFvFRJddxobhvEdm5GqHzRV/X+ACeuw0/BuuxsCh1EUZcAIz8+kYmBp/LrQuloy6K1f3a0M7+IhmZ7QnkISA==",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/@11ty/eleventy/node_modules/js-yaml": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
+      "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
+      "dependencies": {
+        "argparse": "^2.0.1"
+      },
+      "bin": {
+        "js-yaml": "bin/js-yaml.js"
+      }
+    },
+    "node_modules/@11ty/lodash-custom": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/@11ty/lodash-custom/-/lodash-custom-4.17.21.tgz",
+      "integrity": "sha512-Mqt6im1xpb1Ykn3nbcCovWXK3ggywRJa+IXIdoz4wIIK+cvozADH63lexcuPpGS/gJ6/m2JxyyXDyupkMr5DHw==",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/11ty"
+      }
+    },
+    "node_modules/@11ty/posthtml-urls": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@11ty/posthtml-urls/-/posthtml-urls-1.0.0.tgz",
+      "integrity": "sha512-CcsRdI933x613u7CjM+QGs7iD/m8SaDup3Apohg1+7dybigrEUHc2jGS3mcMgQKvF2+IphqmepD/FrKLlPkPEg==",
+      "dependencies": {
+        "evaluate-value": "^2.0.0",
+        "http-equiv-refresh": "^2.0.1",
+        "list-to-array": "^1.1.0",
+        "object.entries": "^1.1.7",
+        "parse-srcset": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/@11ty/recursive-copy": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@11ty/recursive-copy/-/recursive-copy-3.0.0.tgz",
+      "integrity": "sha512-v1Mr7dWx5nk69/HRRtDHUYDV9N8+cE12IGiKSFOwML7HjOzUXwTP88e3cGuhqoVstkBil1ZEIaOB0KPP1zwqXA==",
+      "dependencies": {
+        "errno": "^0.1.2",
+        "graceful-fs": "^4.2.11",
+        "junk": "^1.0.1",
+        "maximatch": "^0.1.0",
+        "mkdirp": "^3.0.1",
+        "pify": "^2.3.0",
+        "promise": "^7.0.1",
+        "rimraf": "^5.0.7",
+        "slash": "^1.0.0"
+      }
+    },
+    "node_modules/@esbuild/aix-ppc64": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.20.2.tgz",
+      "integrity": "sha512-D+EBOJHXdNZcLJRBkhENNG8Wji2kgc9AZ9KiPr1JuZjsNtyHzrsfLRrY0tk2H2aoFu6RANO1y1iPPUCDYWkb5g==",
+      "cpu": [
+        "ppc64"
+      ],
+      "optional": true,
+      "os": [
+        "aix"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/android-arm": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.20.2.tgz",
+      "integrity": "sha512-t98Ra6pw2VaDhqNWO2Oph2LXbz/EJcnLmKLGBJwEwXX/JAN83Fym1rU8l0JUWK6HkIbWONCSSatf4sf2NBRx/w==",
+      "cpu": [
+        "arm"
+      ],
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/android-arm64": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.20.2.tgz",
+      "integrity": "sha512-mRzjLacRtl/tWU0SvD8lUEwb61yP9cqQo6noDZP/O8VkwafSYwZ4yWy24kan8jE/IMERpYncRt2dw438LP3Xmg==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/android-x64": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.20.2.tgz",
+      "integrity": "sha512-btzExgV+/lMGDDa194CcUQm53ncxzeBrWJcncOBxuC6ndBkKxnHdFJn86mCIgTELsooUmwUm9FkhSp5HYu00Rg==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/darwin-arm64": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.20.2.tgz",
+      "integrity": "sha512-4J6IRT+10J3aJH3l1yzEg9y3wkTDgDk7TSDFX+wKFiWjqWp/iCfLIYzGyasx9l0SAFPT1HwSCR+0w/h1ES/MjA==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/darwin-x64": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.20.2.tgz",
+      "integrity": "sha512-tBcXp9KNphnNH0dfhv8KYkZhjc+H3XBkF5DKtswJblV7KlT9EI2+jeA8DgBjp908WEuYll6pF+UStUCfEpdysA==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/freebsd-arm64": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.20.2.tgz",
+      "integrity": "sha512-d3qI41G4SuLiCGCFGUrKsSeTXyWG6yem1KcGZVS+3FYlYhtNoNgYrWcvkOoaqMhwXSMrZRl69ArHsGJ9mYdbbw==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/freebsd-x64": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.20.2.tgz",
+      "integrity": "sha512-d+DipyvHRuqEeM5zDivKV1KuXn9WeRX6vqSqIDgwIfPQtwMP4jaDsQsDncjTDDsExT4lR/91OLjRo8bmC1e+Cw==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-arm": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.20.2.tgz",
+      "integrity": "sha512-VhLPeR8HTMPccbuWWcEUD1Az68TqaTYyj6nfE4QByZIQEQVWBB8vup8PpR7y1QHL3CpcF6xd5WVBU/+SBEvGTg==",
+      "cpu": [
+        "arm"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-arm64": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.20.2.tgz",
+      "integrity": "sha512-9pb6rBjGvTFNira2FLIWqDk/uaf42sSyLE8j1rnUpuzsODBq7FvpwHYZxQ/It/8b+QOS1RYfqgGFNLRI+qlq2A==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-ia32": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.20.2.tgz",
+      "integrity": "sha512-o10utieEkNPFDZFQm9CoP7Tvb33UutoJqg3qKf1PWVeeJhJw0Q347PxMvBgVVFgouYLGIhFYG0UGdBumROyiig==",
+      "cpu": [
+        "ia32"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-loong64": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.20.2.tgz",
+      "integrity": "sha512-PR7sp6R/UC4CFVomVINKJ80pMFlfDfMQMYynX7t1tNTeivQ6XdX5r2XovMmha/VjR1YN/HgHWsVcTRIMkymrgQ==",
+      "cpu": [
+        "loong64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-mips64el": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.20.2.tgz",
+      "integrity": "sha512-4BlTqeutE/KnOiTG5Y6Sb/Hw6hsBOZapOVF6njAESHInhlQAghVVZL1ZpIctBOoTFbQyGW+LsVYZ8lSSB3wkjA==",
+      "cpu": [
+        "mips64el"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-ppc64": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.20.2.tgz",
+      "integrity": "sha512-rD3KsaDprDcfajSKdn25ooz5J5/fWBylaaXkuotBDGnMnDP1Uv5DLAN/45qfnf3JDYyJv/ytGHQaziHUdyzaAg==",
+      "cpu": [
+        "ppc64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-riscv64": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.20.2.tgz",
+      "integrity": "sha512-snwmBKacKmwTMmhLlz/3aH1Q9T8v45bKYGE3j26TsaOVtjIag4wLfWSiZykXzXuE1kbCE+zJRmwp+ZbIHinnVg==",
+      "cpu": [
+        "riscv64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-s390x": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.20.2.tgz",
+      "integrity": "sha512-wcWISOobRWNm3cezm5HOZcYz1sKoHLd8VL1dl309DiixxVFoFe/o8HnwuIwn6sXre88Nwj+VwZUvJf4AFxkyrQ==",
+      "cpu": [
+        "s390x"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-x64": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.20.2.tgz",
+      "integrity": "sha512-1MdwI6OOTsfQfek8sLwgyjOXAu+wKhLEoaOLTjbijk6E2WONYpH9ZU2mNtR+lZ2B4uwr+usqGuVfFT9tMtGvGw==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/netbsd-x64": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.20.2.tgz",
+      "integrity": "sha512-K8/DhBxcVQkzYc43yJXDSyjlFeHQJBiowJ0uVL6Tor3jGQfSGHNNJcWxNbOI8v5k82prYqzPuwkzHt3J1T1iZQ==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/openbsd-x64": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.20.2.tgz",
+      "integrity": "sha512-eMpKlV0SThJmmJgiVyN9jTPJ2VBPquf6Kt/nAoo6DgHAoN57K15ZghiHaMvqjCye/uU4X5u3YSMgVBI1h3vKrQ==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/sunos-x64": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.20.2.tgz",
+      "integrity": "sha512-2UyFtRC6cXLyejf/YEld4Hajo7UHILetzE1vsRcGL3earZEW77JxrFjH4Ez2qaTiEfMgAXxfAZCm1fvM/G/o8w==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "sunos"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/win32-arm64": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.20.2.tgz",
+      "integrity": "sha512-GRibxoawM9ZCnDxnP3usoUDO9vUkpAxIIZ6GQI+IlVmr5kP3zUq+l17xELTHMWTWzjxa2guPNyrpq1GWmPvcGQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/win32-ia32": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.20.2.tgz",
+      "integrity": "sha512-HfLOfn9YWmkSKRQqovpnITazdtquEW8/SoHW7pWpuEeguaZI4QnCRW6b+oZTztdBnZOS2hqJ6im/D5cPzBTTlQ==",
+      "cpu": [
+        "ia32"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/win32-x64": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.20.2.tgz",
+      "integrity": "sha512-N49X4lJX27+l9jbLKSqZ6bKNjzQvHaT8IIFUy+YIqmXQdjYCToGWwOItDrfby14c78aDd5NHQl29xingXfCdLQ==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@isaacs/cliui": {
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
+      "integrity": "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==",
+      "dependencies": {
+        "string-width": "^5.1.2",
+        "string-width-cjs": "npm:string-width@^4.2.0",
+        "strip-ansi": "^7.0.1",
+        "strip-ansi-cjs": "npm:strip-ansi@^6.0.1",
+        "wrap-ansi": "^8.1.0",
+        "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@nodelib/fs.scandir": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
+      "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
+      "dependencies": {
+        "@nodelib/fs.stat": "2.0.5",
+        "run-parallel": "^1.1.9"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.stat": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
+      "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.walk": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
+      "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
+      "dependencies": {
+        "@nodelib/fs.scandir": "2.1.5",
+        "fastq": "^1.6.0"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@pkgjs/parseargs": {
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
+      "integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==",
+      "optional": true,
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/@sindresorhus/slugify": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/@sindresorhus/slugify/-/slugify-2.2.1.tgz",
+      "integrity": "sha512-MkngSCRZ8JdSOCHRaYd+D01XhvU3Hjy6MGl06zhOk614hp9EOAp5gIkBeQg7wtmxpitU6eAL4kdiRMcJa2dlrw==",
+      "dependencies": {
+        "@sindresorhus/transliterate": "^1.0.0",
+        "escape-string-regexp": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@sindresorhus/transliterate": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@sindresorhus/transliterate/-/transliterate-1.6.0.tgz",
+      "integrity": "sha512-doH1gimEu3A46VX6aVxpHTeHrytJAG6HgdxntYnCFiIFHEM/ZGpG8KiZGBChchjQmG0XFIBL552kBTjVcMZXwQ==",
+      "dependencies": {
+        "escape-string-regexp": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@types/lodash": {
+      "version": "4.17.4",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.4.tgz",
+      "integrity": "sha512-wYCP26ZLxaT3R39kiN2+HcJ4kTd3U1waI/cY7ivWYqFP6pW3ZNpvi6Wd6PHZx7T/t8z0vlkXMg3QYLa7DZ/IJQ==",
+      "dev": true
+    },
+    "node_modules/@types/lodash-es": {
+      "version": "4.17.12",
+      "resolved": "https://registry.npmjs.org/@types/lodash-es/-/lodash-es-4.17.12.tgz",
+      "integrity": "sha512-0NgftHUcV4v34VhXm8QBSftKVXtbkBG3ViCjs6+eJ5a6y6Mi/jiFGPc1sC7QK+9BFhWrURE3EOggmWaSxL9OzQ==",
+      "dev": true,
+      "dependencies": {
+        "@types/lodash": "*"
+      }
+    },
+    "node_modules/@types/node": {
+      "version": "20.12.12",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.12.12.tgz",
+      "integrity": "sha512-eWLDGF/FOSPtAvEqeRAQ4C8LSA7M1I7i0ky1I8U7kD1J5ITyW3AsRhQrKVoWf5pFKZ2kILsEGJhsI9r93PYnOw==",
+      "dev": true,
+      "dependencies": {
+        "undici-types": "~5.26.4"
+      }
+    },
+    "node_modules/a-sync-waterfall": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/a-sync-waterfall/-/a-sync-waterfall-1.0.1.tgz",
+      "integrity": "sha512-RYTOHHdWipFUliRFMCS4X2Yn2X8M87V/OpSqWzKKOGhzqyUxzyVmhHDH9sAvG+ZuQf/TAOFsLCpMw09I1ufUnA=="
+    },
+    "node_modules/acorn": {
+      "version": "8.11.3",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.3.tgz",
+      "integrity": "sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==",
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/acorn-walk": {
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.3.2.tgz",
+      "integrity": "sha512-cjkyv4OtNCIeqhHrfS81QWXoCBPExR/J62oyEqepVw8WaQeSqpW2uhuLPh1m9eWhDuOo/jUXVTlifvesOWp/4A==",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/ansi-regex": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
+      "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+      }
+    },
+    "node_modules/ansi-styles": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz",
+      "integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/anymatch": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
+      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
+      "dependencies": {
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/argparse": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
+      "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
+      "dependencies": {
+        "sprintf-js": "~1.0.2"
+      }
+    },
+    "node_modules/array-differ": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/array-differ/-/array-differ-1.0.0.tgz",
+      "integrity": "sha512-LeZY+DZDRnvP7eMuQ6LHfCzUGxAAIViUBliK24P3hWXL6y4SortgR6Nim6xrkfSLlmH0+k+9NYNwVC2s53ZrYQ==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/array-union": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/array-union/-/array-union-1.0.2.tgz",
+      "integrity": "sha512-Dxr6QJj/RdU/hCaBjOfxW+q6lyuVE6JFWIrAUpuOOhoJJoQ99cUn3igRaHVB5P9WrgFVN0FfArM3x0cueOU8ng==",
+      "dependencies": {
+        "array-uniq": "^1.0.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/array-uniq": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/array-uniq/-/array-uniq-1.0.3.tgz",
+      "integrity": "sha512-MNha4BWQ6JbwhFhj03YK552f7cb3AzoE8SzeljgChvL1dl3IcvggXVz1DilzySZkCja+CXuZbdW7yATchWn8/Q==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/arrify": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/arrify/-/arrify-1.0.1.tgz",
+      "integrity": "sha512-3CYzex9M9FGQjCGMGyi6/31c8GJbgb0qGyrx5HWxPd0aCwh4cB2YjMb2Xf9UuoogrMrlO9cTqnB5rI5GHZTcUA==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/asap": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
+      "integrity": "sha512-BSHWgDSAiKs50o2Re8ppvp3seVHXSRM44cdSsT9FfNEUUZLOGWVCsiWaRPWM1Znn+mqZ1OfVZ3z3DWEzSp7hRA=="
+    },
+    "node_modules/balanced-match": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
+    },
+    "node_modules/bcp-47": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/bcp-47/-/bcp-47-2.1.0.tgz",
+      "integrity": "sha512-9IIS3UPrvIa1Ej+lVDdDwO7zLehjqsaByECw0bu2RRGP73jALm6FYbzI5gWbgHLvNdkvfXB5YrSbocZdOS0c0w==",
+      "dependencies": {
+        "is-alphabetical": "^2.0.0",
+        "is-alphanumerical": "^2.0.0",
+        "is-decimal": "^2.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/bcp-47-match": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/bcp-47-match/-/bcp-47-match-2.0.3.tgz",
+      "integrity": "sha512-JtTezzbAibu8G0R9op9zb3vcWZd9JF6M0xOYGPn0fNCd7wOpRB1mU2mH9T8gaBGbAAyIIVgB2G7xG0GP98zMAQ==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/bcp-47-normalize": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/bcp-47-normalize/-/bcp-47-normalize-2.3.0.tgz",
+      "integrity": "sha512-8I/wfzqQvttUFz7HVJgIZ7+dj3vUaIyIxYXaTRP1YWoSDfzt6TUmxaKZeuXR62qBmYr+nvuWINFRl6pZ5DlN4Q==",
+      "dependencies": {
+        "bcp-47": "^2.0.0",
+        "bcp-47-match": "^2.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/binary-extensions": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
+      "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/boolbase": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
+      "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww=="
+    },
+    "node_modules/brace-expansion": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/braces": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
+      "dependencies": {
+        "fill-range": "^7.1.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/call-bind": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.7.tgz",
+      "integrity": "sha512-GHTSNSYICQ7scH7sZ+M2rFopRoLh8t2bLSW6BbgrtLsahOIB5iyAVJf9GjWK3cYTDaMj4XdBpM1cA6pIS0Kv2w==",
+      "dependencies": {
+        "es-define-property": "^1.0.0",
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2",
+        "get-intrinsic": "^1.2.4",
+        "set-function-length": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/chardet": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/chardet/-/chardet-2.0.0.tgz",
+      "integrity": "sha512-xVgPpulCooDjY6zH4m9YW3jbkaBe3FKIAvF5sj5t7aBNsVl2ljIE+xwJ4iNgiDZHFQvNIpjdKdVOQvvk5ZfxbQ=="
+    },
+    "node_modules/cheerio": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/cheerio/-/cheerio-1.0.0.tgz",
+      "integrity": "sha512-quS9HgjQpdaXOvsZz82Oz7uxtXiy6UIsIQcpBj7HRw2M63Skasm9qlDocAM7jNuaxdhpPU7c4kJN+gA5MCu4ww==",
+      "dependencies": {
+        "cheerio-select": "^2.1.0",
+        "dom-serializer": "^2.0.0",
+        "domhandler": "^5.0.3",
+        "domutils": "^3.1.0",
+        "encoding-sniffer": "^0.2.0",
+        "htmlparser2": "^9.1.0",
+        "parse5": "^7.1.2",
+        "parse5-htmlparser2-tree-adapter": "^7.0.0",
+        "parse5-parser-stream": "^7.1.2",
+        "undici": "^6.19.5",
+        "whatwg-mimetype": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=18.17"
+      },
+      "funding": {
+        "url": "https://github.com/cheeriojs/cheerio?sponsor=1"
+      }
+    },
+    "node_modules/cheerio-select": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/cheerio-select/-/cheerio-select-2.1.0.tgz",
+      "integrity": "sha512-9v9kG0LvzrlcungtnJtpGNxY+fzECQKhK4EGJX2vByejiMX84MFNQw4UxPJl3bFbTMw+Dfs37XaIkCwTZfLh4g==",
+      "dependencies": {
+        "boolbase": "^1.0.0",
+        "css-select": "^5.1.0",
+        "css-what": "^6.1.0",
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.3",
+        "domutils": "^3.0.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
+      }
+    },
+    "node_modules/cheerio-select/node_modules/dom-serializer": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
+      "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==",
+      "dependencies": {
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.2",
+        "entities": "^4.2.0"
+      },
+      "funding": {
+        "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
+      }
+    },
+    "node_modules/cheerio-select/node_modules/domhandler": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
+      "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
+      "dependencies": {
+        "domelementtype": "^2.3.0"
+      },
+      "engines": {
+        "node": ">= 4"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domhandler?sponsor=1"
+      }
+    },
+    "node_modules/cheerio-select/node_modules/domutils": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.1.0.tgz",
+      "integrity": "sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==",
+      "dependencies": {
+        "dom-serializer": "^2.0.0",
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.3"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domutils?sponsor=1"
+      }
+    },
+    "node_modules/cheerio/node_modules/dom-serializer": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
+      "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==",
+      "dependencies": {
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.2",
+        "entities": "^4.2.0"
+      },
+      "funding": {
+        "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
+      }
+    },
+    "node_modules/cheerio/node_modules/domhandler": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
+      "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
+      "dependencies": {
+        "domelementtype": "^2.3.0"
+      },
+      "engines": {
+        "node": ">= 4"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domhandler?sponsor=1"
+      }
+    },
+    "node_modules/cheerio/node_modules/domutils": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.1.0.tgz",
+      "integrity": "sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==",
+      "dependencies": {
+        "dom-serializer": "^2.0.0",
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.3"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domutils?sponsor=1"
+      }
+    },
+    "node_modules/cheerio/node_modules/htmlparser2": {
+      "version": "9.1.0",
+      "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-9.1.0.tgz",
+      "integrity": "sha512-5zfg6mHUoaer/97TxnGpxmbR7zJtPwIYFMZ/H5ucTlPZhKvtum05yiPK3Mgai3a0DyVxv7qYqoweaEd2nrYQzQ==",
+      "funding": [
+        "https://github.com/fb55/htmlparser2?sponsor=1",
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ],
+      "dependencies": {
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.3",
+        "domutils": "^3.1.0",
+        "entities": "^4.5.0"
+      }
+    },
+    "node_modules/chokidar": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
+      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
+      "dependencies": {
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
+      },
+      "engines": {
+        "node": ">= 8.10.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+    },
+    "node_modules/commander": {
+      "version": "10.0.1",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-10.0.1.tgz",
+      "integrity": "sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug==",
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/concat-map": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
+      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg=="
+    },
+    "node_modules/cross-spawn": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
+      "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
+      "dependencies": {
+        "path-key": "^3.1.0",
+        "shebang-command": "^2.0.0",
+        "which": "^2.0.1"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/css-select": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/css-select/-/css-select-5.1.0.tgz",
+      "integrity": "sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==",
+      "dependencies": {
+        "boolbase": "^1.0.0",
+        "css-what": "^6.1.0",
+        "domhandler": "^5.0.2",
+        "domutils": "^3.0.1",
+        "nth-check": "^2.0.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
+      }
+    },
+    "node_modules/css-select/node_modules/dom-serializer": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
+      "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==",
+      "dependencies": {
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.2",
+        "entities": "^4.2.0"
+      },
+      "funding": {
+        "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
+      }
+    },
+    "node_modules/css-select/node_modules/domhandler": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
+      "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
+      "dependencies": {
+        "domelementtype": "^2.3.0"
+      },
+      "engines": {
+        "node": ">= 4"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domhandler?sponsor=1"
+      }
+    },
+    "node_modules/css-select/node_modules/domutils": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.1.0.tgz",
+      "integrity": "sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==",
+      "dependencies": {
+        "dom-serializer": "^2.0.0",
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.3"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domutils?sponsor=1"
+      }
+    },
+    "node_modules/css-what": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/css-what/-/css-what-6.1.0.tgz",
+      "integrity": "sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==",
+      "engines": {
+        "node": ">= 6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
+      }
+    },
+    "node_modules/debug": {
+      "version": "4.3.7",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz",
+      "integrity": "sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/define-data-property": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz",
+      "integrity": "sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==",
+      "dependencies": {
+        "es-define-property": "^1.0.0",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/define-properties": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.2.1.tgz",
+      "integrity": "sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==",
+      "dependencies": {
+        "define-data-property": "^1.0.1",
+        "has-property-descriptors": "^1.0.0",
+        "object-keys": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/depd": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
+      "integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/dependency-graph": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/dependency-graph/-/dependency-graph-1.0.0.tgz",
+      "integrity": "sha512-cW3gggJ28HZ/LExwxP2B++aiKxhJXMSIt9K48FOXQkm+vuG5gyatXnLsONRJdzO/7VfjDIiaOOa/bs4l464Lwg==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/destroy": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz",
+      "integrity": "sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==",
+      "engines": {
+        "node": ">= 0.8",
+        "npm": "1.2.8000 || >= 1.4.16"
+      }
+    },
+    "node_modules/dev-ip": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/dev-ip/-/dev-ip-1.0.1.tgz",
+      "integrity": "sha512-LmVkry/oDShEgSZPNgqCIp2/TlqtExeGmymru3uCELnfyjY11IzpAproLYs+1X88fXO6DBoYP3ul2Xo2yz2j6A==",
+      "bin": {
+        "dev-ip": "lib/dev-ip.js"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/dom-serializer": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz",
+      "integrity": "sha512-VHwB3KfrcOOkelEG2ZOfxqLZdfkil8PtJi4P8N2MMXucZq2yLp75ClViUlOVwyoHEDjYU433Aq+5zWP61+RGag==",
+      "dependencies": {
+        "domelementtype": "^2.0.1",
+        "domhandler": "^4.2.0",
+        "entities": "^2.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
+      }
+    },
+    "node_modules/dom-serializer/node_modules/entities": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz",
+      "integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==",
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/domelementtype": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
+      "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ]
+    },
+    "node_modules/domhandler": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-4.3.1.tgz",
+      "integrity": "sha512-GrwoxYN+uWlzO8uhUXRl0P+kHE4GtVPfYzVLcUxPL7KNdHKj66vvlhiweIHqYYXWlw+T8iLMp42Lm67ghw4WMQ==",
+      "dependencies": {
+        "domelementtype": "^2.2.0"
+      },
+      "engines": {
+        "node": ">= 4"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domhandler?sponsor=1"
+      }
+    },
+    "node_modules/domutils": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.8.0.tgz",
+      "integrity": "sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==",
+      "dependencies": {
+        "dom-serializer": "^1.0.1",
+        "domelementtype": "^2.2.0",
+        "domhandler": "^4.2.0"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domutils?sponsor=1"
+      }
+    },
+    "node_modules/eastasianwidth": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
+      "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA=="
+    },
+    "node_modules/ee-first": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
+      "integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow=="
+    },
+    "node_modules/emoji-regex": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
+      "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg=="
+    },
+    "node_modules/encodeurl": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-2.0.0.tgz",
+      "integrity": "sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/encoding-sniffer": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/encoding-sniffer/-/encoding-sniffer-0.2.0.tgz",
+      "integrity": "sha512-ju7Wq1kg04I3HtiYIOrUrdfdDvkyO9s5XM8QAj/bN61Yo/Vb4vgJxy5vi4Yxk01gWHbrofpPtpxM8bKger9jhg==",
+      "dependencies": {
+        "iconv-lite": "^0.6.3",
+        "whatwg-encoding": "^3.1.1"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/encoding-sniffer?sponsor=1"
+      }
+    },
+    "node_modules/entities": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/errno": {
+      "version": "0.1.8",
+      "resolved": "https://registry.npmjs.org/errno/-/errno-0.1.8.tgz",
+      "integrity": "sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==",
+      "dependencies": {
+        "prr": "~1.0.1"
+      },
+      "bin": {
+        "errno": "cli.js"
+      }
+    },
+    "node_modules/es-define-property": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.0.tgz",
+      "integrity": "sha512-jxayLKShrEqqzJ0eumQbVhTYQM27CfT1T35+gCgDFoL82JLsXqTJ76zv6A0YLOgEnLUMvLzsDsGIrl8NFpT2gQ==",
+      "dependencies": {
+        "get-intrinsic": "^1.2.4"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-errors": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
+      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-object-atoms": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.0.0.tgz",
+      "integrity": "sha512-MZ4iQ6JwHOBQjahnjwaC1ZtIBH+2ohjamzAO3oaHcXYup7qxjF2fixyH+Q71voWHeOkI2q/TnJao/KfXYIZWbw==",
+      "dependencies": {
+        "es-errors": "^1.3.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/esbuild": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.20.2.tgz",
+      "integrity": "sha512-WdOOppmUNU+IbZ0PaDiTst80zjnrOkyJNHoKupIcVyU8Lvla3Ugx94VzkQ32Ijqd7UhHJy75gNWDMUekcrSJ6g==",
+      "hasInstallScript": true,
+      "bin": {
+        "esbuild": "bin/esbuild"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "optionalDependencies": {
+        "@esbuild/aix-ppc64": "0.20.2",
+        "@esbuild/android-arm": "0.20.2",
+        "@esbuild/android-arm64": "0.20.2",
+        "@esbuild/android-x64": "0.20.2",
+        "@esbuild/darwin-arm64": "0.20.2",
+        "@esbuild/darwin-x64": "0.20.2",
+        "@esbuild/freebsd-arm64": "0.20.2",
+        "@esbuild/freebsd-x64": "0.20.2",
+        "@esbuild/linux-arm": "0.20.2",
+        "@esbuild/linux-arm64": "0.20.2",
+        "@esbuild/linux-ia32": "0.20.2",
+        "@esbuild/linux-loong64": "0.20.2",
+        "@esbuild/linux-mips64el": "0.20.2",
+        "@esbuild/linux-ppc64": "0.20.2",
+        "@esbuild/linux-riscv64": "0.20.2",
+        "@esbuild/linux-s390x": "0.20.2",
+        "@esbuild/linux-x64": "0.20.2",
+        "@esbuild/netbsd-x64": "0.20.2",
+        "@esbuild/openbsd-x64": "0.20.2",
+        "@esbuild/sunos-x64": "0.20.2",
+        "@esbuild/win32-arm64": "0.20.2",
+        "@esbuild/win32-ia32": "0.20.2",
+        "@esbuild/win32-x64": "0.20.2"
+      }
+    },
+    "node_modules/escape-html": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
+      "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow=="
+    },
+    "node_modules/escape-string-regexp": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-5.0.0.tgz",
+      "integrity": "sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/esm-import-transformer": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/esm-import-transformer/-/esm-import-transformer-3.0.2.tgz",
+      "integrity": "sha512-PgvO0wro44lTDM9pYeeOIfpS0lGF80jA+rjT7sBd3b07rxv1AxeNMEI5kSCqRKke2W6SPEz17W3kHOLjaiD7Cw==",
+      "dependencies": {
+        "acorn": "^8.11.2"
+      }
+    },
+    "node_modules/esprima": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
+      "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==",
+      "bin": {
+        "esparse": "bin/esparse.js",
+        "esvalidate": "bin/esvalidate.js"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/etag": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
+      "integrity": "sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/evaluate-value": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/evaluate-value/-/evaluate-value-2.0.0.tgz",
+      "integrity": "sha512-VonfiuDJc0z4sOO7W0Pd130VLsXN6vmBWZlrog1mCb/o7o/Nl5Lr25+Kj/nkCCAhG+zqeeGjxhkK9oHpkgTHhQ==",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/extend-shallow": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+      "integrity": "sha512-zCnTtlxNoAiDc3gqY2aYAWFx7XWWiasuF2K8Me5WbN8otHKTUKBwjPtNpRs/rbUZm7KxWAaNj7P1a/p52GbVug==",
+      "dependencies": {
+        "is-extendable": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/fast-glob": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz",
+      "integrity": "sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==",
+      "dependencies": {
+        "@nodelib/fs.stat": "^2.0.2",
+        "@nodelib/fs.walk": "^1.2.3",
+        "glob-parent": "^5.1.2",
+        "merge2": "^1.3.0",
+        "micromatch": "^4.0.4"
+      },
+      "engines": {
+        "node": ">=8.6.0"
+      }
+    },
+    "node_modules/fastq": {
+      "version": "1.17.1",
+      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.17.1.tgz",
+      "integrity": "sha512-sRVD3lWVIXWg6By68ZN7vho9a1pQcN/WBFaAAsDDFzlJjvoGx0P8z7V1t72grFJfJhu3YPZBuu25f7Kaw2jN1w==",
+      "dependencies": {
+        "reusify": "^1.0.4"
+      }
+    },
+    "node_modules/filesize": {
+      "version": "10.1.6",
+      "resolved": "https://registry.npmjs.org/filesize/-/filesize-10.1.6.tgz",
+      "integrity": "sha512-sJslQKU2uM33qH5nqewAwVB2QgR6w1aMNsYUp3aN5rMRyXEwJGmZvaWzeJFNTOXWlHQyBFCWrdj3fV/fsTOX8w==",
+      "engines": {
+        "node": ">= 10.4.0"
+      }
+    },
+    "node_modules/fill-range": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
+      "dependencies": {
+        "to-regex-range": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/finalhandler": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.3.1.tgz",
+      "integrity": "sha512-6BN9trH7bp3qvnrRyzsBz+g3lZxTNZTbVO2EV1CS0WIcDbawYVdYvGflME/9QP0h0pYlCDBCTjYa9nZzMDpyxQ==",
+      "dependencies": {
+        "debug": "2.6.9",
+        "encodeurl": "~2.0.0",
+        "escape-html": "~1.0.3",
+        "on-finished": "2.4.1",
+        "parseurl": "~1.3.3",
+        "statuses": "2.0.1",
+        "unpipe": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/finalhandler/node_modules/debug": {
+      "version": "2.6.9",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "dependencies": {
+        "ms": "2.0.0"
+      }
+    },
+    "node_modules/finalhandler/node_modules/ms": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
+    },
+    "node_modules/foreground-child": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.1.1.tgz",
+      "integrity": "sha512-TMKDUnIte6bfb5nWv7V/caI169OHgvwjb7V4WkeUvbQQdjr5rWKqHFiKWb/fcOwB+CzBT+qbWjvj+DVwRskpIg==",
+      "dependencies": {
+        "cross-spawn": "^7.0.0",
+        "signal-exit": "^4.0.1"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/fresh": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
+      "integrity": "sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/fsevents": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "hasInstallScript": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/function-bind": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/get-intrinsic": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.4.tgz",
+      "integrity": "sha512-5uYhsJH8VJBTv7oslg4BznJYhDoRI6waYCxMmCdnTrcCrHA/fCFKoTFz2JKKE0HdDFUF7/oQuhzumXJK7paBRQ==",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2",
+        "has-proto": "^1.0.1",
+        "has-symbols": "^1.0.3",
+        "hasown": "^2.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/get-tsconfig": {
+      "version": "4.7.5",
+      "resolved": "https://registry.npmjs.org/get-tsconfig/-/get-tsconfig-4.7.5.tgz",
+      "integrity": "sha512-ZCuZCnlqNzjb4QprAzXKdpp/gh6KTxSJuw3IBsPnV/7fV4NxC9ckB+vPTt8w7fJA0TaSD7c55BR47JD6MEDyDw==",
+      "dependencies": {
+        "resolve-pkg-maps": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/privatenumber/get-tsconfig?sponsor=1"
+      }
+    },
+    "node_modules/glob": {
+      "version": "10.3.16",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-10.3.16.tgz",
+      "integrity": "sha512-JDKXl1DiuuHJ6fVS2FXjownaavciiHNUU4mOvV/B793RLh05vZL1rcPnCSaOgv1hDT6RDlY7AB7ZUvFYAtPgAw==",
+      "dependencies": {
+        "foreground-child": "^3.1.0",
+        "jackspeak": "^3.1.2",
+        "minimatch": "^9.0.1",
+        "minipass": "^7.0.4",
+        "path-scurry": "^1.11.0"
+      },
+      "bin": {
+        "glob": "dist/esm/bin.mjs"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/gopd": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz",
+      "integrity": "sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==",
+      "dependencies": {
+        "get-intrinsic": "^1.1.3"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/graceful-fs": {
+      "version": "4.2.11",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
+      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ=="
+    },
+    "node_modules/gray-matter": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/gray-matter/-/gray-matter-4.0.3.tgz",
+      "integrity": "sha512-5v6yZd4JK3eMI3FqqCouswVqwugaA9r4dNZB1wwcmrD02QkV5H0y7XBQW8QwQqEaZY1pM9aqORSORhJRdNK44Q==",
+      "dependencies": {
+        "js-yaml": "^3.13.1",
+        "kind-of": "^6.0.2",
+        "section-matter": "^1.0.0",
+        "strip-bom-string": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=6.0"
+      }
+    },
+    "node_modules/has-property-descriptors": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz",
+      "integrity": "sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==",
+      "dependencies": {
+        "es-define-property": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-proto": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.0.3.tgz",
+      "integrity": "sha512-SJ1amZAJUiZS+PhsVLf5tGydlaVB8EdFpaSO4gmiUKUOxk8qzn5AIy4ZeJUmh22znIdk/uMAUT2pl3FxzVUH+Q==",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-symbols": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
+      "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/hasown": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
+      "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
+      "dependencies": {
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/htmlparser2": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-7.2.0.tgz",
+      "integrity": "sha512-H7MImA4MS6cw7nbyURtLPO1Tms7C5H602LRETv95z1MxO/7CP7rDVROehUYeYBUYEON94NXXDEPmZuq+hX4sog==",
+      "funding": [
+        "https://github.com/fb55/htmlparser2?sponsor=1",
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ],
+      "dependencies": {
+        "domelementtype": "^2.0.1",
+        "domhandler": "^4.2.2",
+        "domutils": "^2.8.0",
+        "entities": "^3.0.1"
+      }
+    },
+    "node_modules/htmlparser2/node_modules/entities": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-3.0.1.tgz",
+      "integrity": "sha512-WiyBqoomrwMdFG1e0kqvASYfnlb0lp8M5o5Fw2OFq1hNZxxcNk8Ik0Xm7LxzBhuidnZB/UtBqVCgUz3kBOP51Q==",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/http-equiv-refresh": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/http-equiv-refresh/-/http-equiv-refresh-2.0.1.tgz",
+      "integrity": "sha512-XJpDL/MLkV3dKwLzHwr2dY05dYNfBNlyPu4STQ8WvKCFdc6vC5tPXuq28of663+gHVg03C+16pHHs/+FmmDjcw==",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/http-errors": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.0.tgz",
+      "integrity": "sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ==",
+      "dependencies": {
+        "depd": "2.0.0",
+        "inherits": "2.0.4",
+        "setprototypeof": "1.2.0",
+        "statuses": "2.0.1",
+        "toidentifier": "1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/iconv-lite": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
+      "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/inherits": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
+    },
+    "node_modules/is-alphabetical": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-2.0.1.tgz",
+      "integrity": "sha512-FWyyY60MeTNyeSRpkM2Iry0G9hpr7/9kD40mD/cGQEuilcZYS4okz8SN2Q6rLCJ8gbCt6fN+rC+6tMGS99LaxQ==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/is-alphanumerical": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-alphanumerical/-/is-alphanumerical-2.0.1.tgz",
+      "integrity": "sha512-hmbYhX/9MUMF5uh7tOXyK/n0ZvWpad5caBA17GsC6vyuCqaWliRG5K1qS9inmUhEMaOBIW7/whAnSwveW/LtZw==",
+      "dependencies": {
+        "is-alphabetical": "^2.0.0",
+        "is-decimal": "^2.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/is-binary-path": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "dependencies": {
+        "binary-extensions": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-decimal": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-decimal/-/is-decimal-2.0.1.tgz",
+      "integrity": "sha512-AAB9hiomQs5DXWcRB1rqsxGUstbRroFOPPVAomNk/3XHR5JyEZChOyTWe2oayKnsSsr/kcGqF+z6yuH6HHpN0A==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/is-extendable": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-0.1.1.tgz",
+      "integrity": "sha512-5BMULNob1vgFX6EjQw5izWDxrecWK9AM72rugNr0TFldMOi0fj6Jk+zeKIt0xGj4cEfQIJth4w3OKWOJ4f+AFw==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-fullwidth-code-point": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-glob": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "dependencies": {
+        "is-extglob": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-json": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-json/-/is-json-2.0.1.tgz",
+      "integrity": "sha512-6BEnpVn1rcf3ngfmViLM6vjUjGErbdrL4rwlv+u1NO1XO8kqT4YGL8+19Q+Z/bas8tY90BTWMk2+fW1g6hQjbA=="
+    },
+    "node_modules/is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "engines": {
+        "node": ">=0.12.0"
+      }
+    },
+    "node_modules/isexe": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
+      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw=="
+    },
+    "node_modules/iso-639-1": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/iso-639-1/-/iso-639-1-3.1.3.tgz",
+      "integrity": "sha512-1jz0Wh9hyLMRwqEPchb/KZCiTqfFWtc9R3nm7GHPygBAKS8wdKJ3FH4lvLsri6UtAE5Kz5SnowtXZa//6bqMyw==",
+      "engines": {
+        "node": ">=6.0"
+      }
+    },
+    "node_modules/jackspeak": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.1.2.tgz",
+      "integrity": "sha512-kWmLKn2tRtfYMF/BakihVVRzBKOxz4gJMiL2Rj91WnAB5TPZumSH99R/Yf1qE1u4uRimvCSJfm6hnxohXeEXjQ==",
+      "dependencies": {
+        "@isaacs/cliui": "^8.0.2"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      },
+      "optionalDependencies": {
+        "@pkgjs/parseargs": "^0.11.0"
+      }
+    },
+    "node_modules/js-yaml": {
+      "version": "3.14.1",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.1.tgz",
+      "integrity": "sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==",
+      "dependencies": {
+        "argparse": "^1.0.7",
+        "esprima": "^4.0.0"
+      },
+      "bin": {
+        "js-yaml": "bin/js-yaml.js"
+      }
+    },
+    "node_modules/junk": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/junk/-/junk-1.0.3.tgz",
+      "integrity": "sha512-3KF80UaaSSxo8jVnRYtMKNGFOoVPBdkkVPsw+Ad0y4oxKXPduS6G6iHkrf69yJVff/VAaYXkV42rtZ7daJxU3w==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/kind-of": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
+      "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/kleur": {
+      "version": "4.1.5",
+      "resolved": "https://registry.npmjs.org/kleur/-/kleur-4.1.5.tgz",
+      "integrity": "sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/linkify-it": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-5.0.0.tgz",
+      "integrity": "sha512-5aHCbzQRADcdP+ATqnDuhhJ/MRIqDkZX5pyjFHRRysS8vZ5AbqGEoFIb6pYHPZ+L/OC2Lc+xT8uHVVR5CAK/wQ==",
+      "dependencies": {
+        "uc.micro": "^2.0.0"
+      }
+    },
+    "node_modules/liquidjs": {
+      "version": "10.17.0",
+      "resolved": "https://registry.npmjs.org/liquidjs/-/liquidjs-10.17.0.tgz",
+      "integrity": "sha512-M4MC5/nencttIJHirl5jFTkl7Yu+grIDLn3Qgl7BPAD3BsbTCQknDxlG5VXWRwslWIjk8lSZZjVq9LioILDk1Q==",
+      "dependencies": {
+        "commander": "^10.0.0"
+      },
+      "bin": {
+        "liquid": "bin/liquid.js",
+        "liquidjs": "bin/liquid.js"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/liquidjs"
+      }
+    },
+    "node_modules/list-to-array": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/list-to-array/-/list-to-array-1.1.0.tgz",
+      "integrity": "sha512-+dAZZ2mM+/m+vY9ezfoueVvrgnHIGi5FvgSymbIgJOFwiznWyA59mav95L+Mc6xPtL3s9gm5eNTlNtxJLbNM1g=="
+    },
+    "node_modules/lodash-es": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
+      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
+    },
+    "node_modules/lru-cache": {
+      "version": "10.2.2",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.2.2.tgz",
+      "integrity": "sha512-9hp3Vp2/hFQUiIwKo8XCeFVnrg8Pk3TYNPIR7tJADKi5YfcF7vEaK7avFHTlSy3kOKYaJQaalfEo6YuXdceBOQ==",
+      "engines": {
+        "node": "14 || >=16.14"
+      }
+    },
+    "node_modules/luxon": {
+      "version": "3.5.0",
+      "resolved": "https://registry.npmjs.org/luxon/-/luxon-3.5.0.tgz",
+      "integrity": "sha512-rh+Zjr6DNfUYR3bPwJEnuwDdqMbxZW7LOQfUN4B54+Cl+0o5zaU9RJ6bcidfDtC1cWCZXQ+nvX8bf6bAji37QQ==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/markdown-it": {
+      "version": "14.1.0",
+      "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-14.1.0.tgz",
+      "integrity": "sha512-a54IwgWPaeBCAAsv13YgmALOF1elABB08FxO9i+r4VFk5Vl4pKokRPeX8u5TCgSsPi6ec1otfLjdOpVcgbpshg==",
+      "dependencies": {
+        "argparse": "^2.0.1",
+        "entities": "^4.4.0",
+        "linkify-it": "^5.0.0",
+        "mdurl": "^2.0.0",
+        "punycode.js": "^2.3.1",
+        "uc.micro": "^2.1.0"
+      },
+      "bin": {
+        "markdown-it": "bin/markdown-it.mjs"
+      }
+    },
+    "node_modules/markdown-it/node_modules/argparse": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="
+    },
+    "node_modules/maximatch": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/maximatch/-/maximatch-0.1.0.tgz",
+      "integrity": "sha512-9ORVtDUFk4u/NFfo0vG/ND/z7UQCVZBL539YW0+U1I7H1BkZwizcPx5foFv7LCPcBnm2U6RjFnQOsIvN4/Vm2A==",
+      "dependencies": {
+        "array-differ": "^1.0.0",
+        "array-union": "^1.0.1",
+        "arrify": "^1.0.0",
+        "minimatch": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/maximatch/node_modules/brace-expansion": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "node_modules/maximatch/node_modules/minimatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/mdurl": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-2.0.0.tgz",
+      "integrity": "sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w=="
+    },
+    "node_modules/merge2": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
+      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/micromatch": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
+      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
+      "dependencies": {
+        "braces": "^3.0.3",
+        "picomatch": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=8.6"
+      }
+    },
+    "node_modules/mime": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/mime/-/mime-3.0.0.tgz",
+      "integrity": "sha512-jSCU7/VB1loIWBZe14aEYHU/+1UMEHoaO7qxCOVJOw9GgH72VAWppxNcjU+x9a2k3GSIBXNKxXQFqRvvZ7vr3A==",
+      "bin": {
+        "mime": "cli.js"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/minimatch": {
+      "version": "9.0.4",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.4.tgz",
+      "integrity": "sha512-KqWh+VchfxcMNRAJjj2tnsSJdNbHsVgnkBhTNrW7AjVo6OvLtxw8zfT9oLw1JSohlFzJ8jCoTgaoXvJ+kHt6fw==",
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/minimist": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
+      "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/minipass": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.1.tgz",
+      "integrity": "sha512-UZ7eQ+h8ywIRAW1hIEl2AqdwzJucU/Kp59+8kkZeSvafXhZjul247BvIJjEVFVeON6d7lM46XX1HXCduKAS8VA==",
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
+    "node_modules/mkdirp": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-3.0.1.tgz",
+      "integrity": "sha512-+NsyUUAZDmo6YVHzL/stxSu3t9YS1iljliy3BSDrXJ/dkn1KYdmtZODGGjLcc9XLgVVpH4KshHB8XmZgMhaBXg==",
+      "bin": {
+        "mkdirp": "dist/cjs/src/bin.js"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/moo": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/moo/-/moo-0.5.2.tgz",
+      "integrity": "sha512-iSAJLHYKnX41mKcJKjqvnAN9sf0LMDTXDEvFv+ffuRR9a1MIuXLjMNL6EsnDHSkKLTWNqQQ5uo61P4EbU4NU+Q=="
+    },
+    "node_modules/morphdom": {
+      "version": "2.7.4",
+      "resolved": "https://registry.npmjs.org/morphdom/-/morphdom-2.7.4.tgz",
+      "integrity": "sha512-ATTbWMgGa+FaMU3FhnFYB6WgulCqwf6opOll4CBzmVDTLvPMmUPrEv8CudmLPK0MESa64+6B89fWOxP3+YIlxQ=="
+    },
+    "node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="
+    },
+    "node_modules/node-retrieve-globals": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/node-retrieve-globals/-/node-retrieve-globals-6.0.0.tgz",
+      "integrity": "sha512-VoEp6WMN/JcbBrJr6LnFE11kdzpKiBKNPFrHCEK2GgFWtiYpeL85WgcZpZFFnWxAU0O65+b+ipQAy4Oxy/+Pdg==",
+      "dependencies": {
+        "acorn": "^8.1.3",
+        "acorn-walk": "^8.3.2",
+        "esm-import-transformer": "^3.0.2"
+      }
+    },
+    "node_modules/normalize-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/nth-check": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz",
+      "integrity": "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==",
+      "dependencies": {
+        "boolbase": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/nth-check?sponsor=1"
+      }
+    },
+    "node_modules/nunjucks": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/nunjucks/-/nunjucks-3.2.4.tgz",
+      "integrity": "sha512-26XRV6BhkgK0VOxfbU5cQI+ICFUtMLixv1noZn1tGU38kQH5A5nmmbk/O45xdyBhD1esk47nKrY0mvQpZIhRjQ==",
+      "dependencies": {
+        "a-sync-waterfall": "^1.0.0",
+        "asap": "^2.0.3",
+        "commander": "^5.1.0"
+      },
+      "bin": {
+        "nunjucks-precompile": "bin/precompile"
+      },
+      "engines": {
+        "node": ">= 6.9.0"
+      },
+      "peerDependencies": {
+        "chokidar": "^3.3.0"
+      },
+      "peerDependenciesMeta": {
+        "chokidar": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/nunjucks/node_modules/commander": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-5.1.0.tgz",
+      "integrity": "sha512-P0CysNDQ7rtVw4QIQtm+MRxV66vKFSvlsQvGYXZWR3qFU0jlMKHZZZgw8e+8DSah4UDKMqnknRDQz+xuQXQ/Zg==",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/object-keys": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
+      "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/object.entries": {
+      "version": "1.1.8",
+      "resolved": "https://registry.npmjs.org/object.entries/-/object.entries-1.1.8.tgz",
+      "integrity": "sha512-cmopxi8VwRIAw/fkijJohSfpef5PdN0pMQJN6VC/ZKvn0LIknWD8KtgY6KlQdEc4tIjcQ3HxSMmnvtzIscdaYQ==",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/on-finished": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz",
+      "integrity": "sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==",
+      "dependencies": {
+        "ee-first": "1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/parse-srcset": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/parse-srcset/-/parse-srcset-1.0.2.tgz",
+      "integrity": "sha512-/2qh0lav6CmI15FzA3i/2Bzk2zCgQhGMkvhOhKNcBVQ1ldgpbfiNTVslmooUmWJcADi1f1kIeynbDRVzNlfR6Q=="
+    },
+    "node_modules/parse5": {
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.1.2.tgz",
+      "integrity": "sha512-Czj1WaSVpaoj0wbhMzLmWD69anp2WH7FXMB9n1Sy8/ZFF9jolSQVMu1Ij5WIyGmcBmhk7EOndpO4mIpihVqAXw==",
+      "dependencies": {
+        "entities": "^4.4.0"
+      },
+      "funding": {
+        "url": "https://github.com/inikulin/parse5?sponsor=1"
+      }
+    },
+    "node_modules/parse5-htmlparser2-tree-adapter": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/parse5-htmlparser2-tree-adapter/-/parse5-htmlparser2-tree-adapter-7.0.0.tgz",
+      "integrity": "sha512-B77tOZrqqfUfnVcOrUvfdLbz4pu4RopLD/4vmu3HUPswwTA8OH0EMW9BlWR2B0RCoiZRAHEUu7IxeP1Pd1UU+g==",
+      "dependencies": {
+        "domhandler": "^5.0.2",
+        "parse5": "^7.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/inikulin/parse5?sponsor=1"
+      }
+    },
+    "node_modules/parse5-htmlparser2-tree-adapter/node_modules/domhandler": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
+      "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
+      "dependencies": {
+        "domelementtype": "^2.3.0"
+      },
+      "engines": {
+        "node": ">= 4"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domhandler?sponsor=1"
+      }
+    },
+    "node_modules/parse5-parser-stream": {
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/parse5-parser-stream/-/parse5-parser-stream-7.1.2.tgz",
+      "integrity": "sha512-JyeQc9iwFLn5TbvvqACIF/VXG6abODeB3Fwmv/TGdLk2LfbWkaySGY72at4+Ty7EkPZj854u4CrICqNk2qIbow==",
+      "dependencies": {
+        "parse5": "^7.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/inikulin/parse5?sponsor=1"
+      }
+    },
+    "node_modules/parseurl": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
+      "integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/path-key": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
+      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/path-scurry": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.11.1.tgz",
+      "integrity": "sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==",
+      "dependencies": {
+        "lru-cache": "^10.2.0",
+        "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/picomatch": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/pify": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+      "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/please-upgrade-node": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/please-upgrade-node/-/please-upgrade-node-3.2.0.tgz",
+      "integrity": "sha512-gQR3WpIgNIKwBMVLkpMUeR3e1/E1y42bqDQZfql+kDeXd8COYfM8PQA4X6y7a8u9Ua9FHmsrrmirW2vHs45hWg==",
+      "dependencies": {
+        "semver-compare": "^1.0.0"
+      }
+    },
+    "node_modules/posthtml": {
+      "version": "0.16.6",
+      "resolved": "https://registry.npmjs.org/posthtml/-/posthtml-0.16.6.tgz",
+      "integrity": "sha512-JcEmHlyLK/o0uGAlj65vgg+7LIms0xKXe60lcDOTU7oVX/3LuEuLwrQpW3VJ7de5TaFKiW4kWkaIpJL42FEgxQ==",
+      "dependencies": {
+        "posthtml-parser": "^0.11.0",
+        "posthtml-render": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
+    "node_modules/posthtml-match-helper": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/posthtml-match-helper/-/posthtml-match-helper-2.0.2.tgz",
+      "integrity": "sha512-ehnazjlSwcGa3P2LlFYmTmcnaembTSt9dLWIRRDVHDPidf6InWAr9leKeeLvUXgnU32g6BrFS64Je+c2Ld+l9g==",
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "posthtml": "^0.16.6"
+      }
+    },
+    "node_modules/posthtml-parser": {
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/posthtml-parser/-/posthtml-parser-0.11.0.tgz",
+      "integrity": "sha512-QecJtfLekJbWVo/dMAA+OSwY79wpRmbqS5TeXvXSX+f0c6pW4/SE6inzZ2qkU7oAMCPqIDkZDvd/bQsSFUnKyw==",
+      "dependencies": {
+        "htmlparser2": "^7.1.1"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/posthtml-render": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/posthtml-render/-/posthtml-render-3.0.0.tgz",
+      "integrity": "sha512-z+16RoxK3fUPgwaIgH9NGnK1HKY9XIDpydky5eQGgAFVXTCSezalv9U2jQuNV+Z9qV1fDWNzldcw4eK0SSbqKA==",
+      "dependencies": {
+        "is-json": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/prettier": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.3.2.tgz",
+      "integrity": "sha512-rAVeHYMcv8ATV5d508CFdn+8/pHPpXeIid1DdrPwXnaAdH7cqjVbpJaT5eq4yRAFU/lsbwYwSF/n5iNrdJHPQA==",
+      "dev": true,
+      "bin": {
+        "prettier": "bin/prettier.cjs"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
+    "node_modules/promise": {
+      "version": "7.3.1",
+      "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz",
+      "integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==",
+      "dependencies": {
+        "asap": "~2.0.3"
+      }
+    },
+    "node_modules/prr": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz",
+      "integrity": "sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw=="
+    },
+    "node_modules/punycode.js": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/punycode.js/-/punycode.js-2.3.1.tgz",
+      "integrity": "sha512-uxFIHU0YlHYhDQtV4R9J6a52SLx28BCjT+4ieh7IGbgwVJWO+km431c4yRlREUAsAmt/uMjQUyQHNEPf0M39CA==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/queue-microtask": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
+      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ]
+    },
+    "node_modules/range-parser": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
+      "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/readdirp": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "dependencies": {
+        "picomatch": "^2.2.1"
+      },
+      "engines": {
+        "node": ">=8.10.0"
+      }
+    },
+    "node_modules/resolve-pkg-maps": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-pkg-maps/-/resolve-pkg-maps-1.0.0.tgz",
+      "integrity": "sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==",
+      "funding": {
+        "url": "https://github.com/privatenumber/resolve-pkg-maps?sponsor=1"
+      }
+    },
+    "node_modules/reusify": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
+      "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==",
+      "engines": {
+        "iojs": ">=1.0.0",
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/rimraf": {
+      "version": "5.0.10",
+      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-5.0.10.tgz",
+      "integrity": "sha512-l0OE8wL34P4nJH/H2ffoaniAokM2qSmrtXHmlpvYr5AVVX8msAyW0l8NVJFDxlSK4u3Uh/f41cQheDVdnYijwQ==",
+      "dependencies": {
+        "glob": "^10.3.7"
+      },
+      "bin": {
+        "rimraf": "dist/esm/bin.mjs"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/run-parallel": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
+      "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "dependencies": {
+        "queue-microtask": "^1.2.2"
+      }
+    },
+    "node_modules/safer-buffer": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
+    },
+    "node_modules/section-matter": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/section-matter/-/section-matter-1.0.0.tgz",
+      "integrity": "sha512-vfD3pmTzGpufjScBh50YHKzEu2lxBWhVEHsNGoEXmCmn2hKGfeNLYMzCJpe8cD7gqX7TJluOVpBkAequ6dgMmA==",
+      "dependencies": {
+        "extend-shallow": "^2.0.1",
+        "kind-of": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/semver": {
+      "version": "7.6.3",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz",
+      "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/semver-compare": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/semver-compare/-/semver-compare-1.0.0.tgz",
+      "integrity": "sha512-YM3/ITh2MJ5MtzaM429anh+x2jiLVjqILF4m4oyQB18W7Ggea7BfqdH/wGMK7dDiMghv/6WG7znWMwUDzJiXow=="
+    },
+    "node_modules/send": {
+      "version": "0.19.0",
+      "resolved": "https://registry.npmjs.org/send/-/send-0.19.0.tgz",
+      "integrity": "sha512-dW41u5VfLXu8SJh5bwRmyYUbAoSB3c9uQh6L8h/KtsFREPWpbX1lrljJo186Jc4nmci/sGUZ9a0a0J2zgfq2hw==",
+      "dependencies": {
+        "debug": "2.6.9",
+        "depd": "2.0.0",
+        "destroy": "1.2.0",
+        "encodeurl": "~1.0.2",
+        "escape-html": "~1.0.3",
+        "etag": "~1.8.1",
+        "fresh": "0.5.2",
+        "http-errors": "2.0.0",
+        "mime": "1.6.0",
+        "ms": "2.1.3",
+        "on-finished": "2.4.1",
+        "range-parser": "~1.2.1",
+        "statuses": "2.0.1"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/send/node_modules/debug": {
+      "version": "2.6.9",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "dependencies": {
+        "ms": "2.0.0"
+      }
+    },
+    "node_modules/send/node_modules/debug/node_modules/ms": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
+    },
+    "node_modules/send/node_modules/encodeurl": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
+      "integrity": "sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/send/node_modules/mime": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
+      "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
+      "bin": {
+        "mime": "cli.js"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/set-function-length": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
+      "integrity": "sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==",
+      "dependencies": {
+        "define-data-property": "^1.1.4",
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2",
+        "get-intrinsic": "^1.2.4",
+        "gopd": "^1.0.1",
+        "has-property-descriptors": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/setprototypeof": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
+      "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw=="
+    },
+    "node_modules/shebang-command": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
+      "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+      "dependencies": {
+        "shebang-regex": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/shebang-regex": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
+      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/signal-exit": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
+      "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/slash": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/slash/-/slash-1.0.0.tgz",
+      "integrity": "sha512-3TYDR7xWt4dIqV2JauJr+EJeW356RXijHeUlO+8djJ+uBXPn8/2dpzBc8yQhh583sVvc9CvFAeQVgijsH+PNNg==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/slugify": {
+      "version": "1.6.6",
+      "resolved": "https://registry.npmjs.org/slugify/-/slugify-1.6.6.tgz",
+      "integrity": "sha512-h+z7HKHYXj6wJU+AnS/+IH8Uh9fdcX1Lrhg1/VMdf9PwoBQXFcXiAdsy2tSK0P6gKwJLXp02r90ahUCqHk9rrw==",
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
+    "node_modules/sprintf-js": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
+      "integrity": "sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g=="
+    },
+    "node_modules/ssri": {
+      "version": "11.0.0",
+      "resolved": "https://registry.npmjs.org/ssri/-/ssri-11.0.0.tgz",
+      "integrity": "sha512-aZpUoMN/Jj2MqA4vMCeiKGnc/8SuSyHbGSBdgFbZxP8OJGF/lFkIuElzPxsN0q8TQQ+prw3P4EDfB3TBHHgfXw==",
+      "dependencies": {
+        "minipass": "^7.0.3"
+      },
+      "engines": {
+        "node": "^16.14.0 || >=18.0.0"
+      }
+    },
+    "node_modules/statuses": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz",
+      "integrity": "sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/string-width": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
+      "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
+      "dependencies": {
+        "eastasianwidth": "^0.2.0",
+        "emoji-regex": "^9.2.2",
+        "strip-ansi": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/string-width-cjs": {
+      "name": "string-width",
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/string-width-cjs/node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/string-width-cjs/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
+    },
+    "node_modules/string-width-cjs/node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/strip-ansi": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
+      "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
+      "dependencies": {
+        "ansi-regex": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+      }
+    },
+    "node_modules/strip-ansi-cjs": {
+      "name": "strip-ansi",
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/strip-ansi-cjs/node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/strip-bom-string": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/strip-bom-string/-/strip-bom-string-1.0.0.tgz",
+      "integrity": "sha512-uCC2VHvQRYu+lMh4My/sFNmF2klFymLX1wHJeXnbEJERpV/ZsVuonzerjfrGpIGF7LBVa1O7i9kjiWvJiFck8g==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/to-regex-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "dependencies": {
+        "is-number": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=8.0"
+      }
+    },
+    "node_modules/toidentifier": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz",
+      "integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==",
+      "engines": {
+        "node": ">=0.6"
+      }
+    },
+    "node_modules/tsx": {
+      "version": "4.11.0",
+      "resolved": "https://registry.npmjs.org/tsx/-/tsx-4.11.0.tgz",
+      "integrity": "sha512-vzGGELOgAupsNVssAmZjbUDfdm/pWP4R+Kg8TVdsonxbXk0bEpE1qh0yV6/QxUVXaVlNemgcPajGdJJ82n3stg==",
+      "dependencies": {
+        "esbuild": "~0.20.2",
+        "get-tsconfig": "^4.7.5"
+      },
+      "bin": {
+        "tsx": "dist/cli.mjs"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.3"
+      }
+    },
+    "node_modules/typescript": {
+      "version": "5.4.5",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.4.5.tgz",
+      "integrity": "sha512-vcI4UpRgg81oIRUFwR0WSIHKt11nJ7SAVlYNIu+QpqeyXP+gpQJy/Z4+F0aGxSE4MqwjyXvW/TzgkLAx2AGHwQ==",
+      "dev": true,
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=14.17"
+      }
+    },
+    "node_modules/uc.micro": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-2.1.0.tgz",
+      "integrity": "sha512-ARDJmphmdvUk6Glw7y9DQ2bFkKBHwQHLi2lsaH6PPmz/Ka9sFOBsBluozhDltWmnv9u/cF6Rt87znRTPV+yp/A=="
+    },
+    "node_modules/undici": {
+      "version": "6.19.8",
+      "resolved": "https://registry.npmjs.org/undici/-/undici-6.19.8.tgz",
+      "integrity": "sha512-U8uCCl2x9TK3WANvmBavymRzxbfFYG+tAu+fgx3zxQy3qdagQqBLwJVrdyO1TBfUXvfKveMKJZhpvUYoOjM+4g==",
+      "engines": {
+        "node": ">=18.17"
+      }
+    },
+    "node_modules/undici-types": {
+      "version": "5.26.5",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz",
+      "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==",
+      "dev": true
+    },
+    "node_modules/unpipe": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
+      "integrity": "sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/urlpattern-polyfill": {
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/urlpattern-polyfill/-/urlpattern-polyfill-10.0.0.tgz",
+      "integrity": "sha512-H/A06tKD7sS1O1X2SshBVeA5FLycRpjqiBeqGKmBwBDBy28EnRjORxTNe269KSSr5un5qyWi1iL61wLxpd+ZOg=="
+    },
+    "node_modules/whatwg-encoding": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-3.1.1.tgz",
+      "integrity": "sha512-6qN4hJdMwfYBtE3YBTTHhoeuUrDBPZmbQaxWAqSALV/MeEnR5z1xd8UKud2RAkFoPkmB+hli1TZSnyi84xz1vQ==",
+      "dependencies": {
+        "iconv-lite": "0.6.3"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/whatwg-mimetype": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-4.0.0.tgz",
+      "integrity": "sha512-QaKxh0eNIi2mE9p2vEdzfagOKHCcj1pJ56EEHGQOVxp8r9/iszLUUV7v89x9O1p/T+NlTM5W7jW6+cz4Fq1YVg==",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/which": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+      "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+      "dependencies": {
+        "isexe": "^2.0.0"
+      },
+      "bin": {
+        "node-which": "bin/node-which"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/wrap-ansi": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz",
+      "integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==",
+      "dependencies": {
+        "ansi-styles": "^6.1.0",
+        "string-width": "^5.0.1",
+        "strip-ansi": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/wrap-ansi-cjs": {
+      "name": "wrap-ansi",
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/wrap-ansi-cjs/node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/wrap-ansi-cjs/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/wrap-ansi-cjs/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
+    },
+    "node_modules/wrap-ansi-cjs/node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/wrap-ansi-cjs/node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/ws": {
+      "version": "8.18.0",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.0.tgz",
+      "integrity": "sha512-8VbfWfHLbbwu3+N6OKsOMpBdT4kXPDDB9cJk2bJ6mh9ucxdlnNvH1e+roYkKmN9Nxw2yjz7VzeO9oOz2zJ04Pw==",
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": ">=5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    }
+  }
+}
diff --git a/package.json b/package.json
new file mode 100644
index 0000000000..b481b35df8
--- /dev/null
+++ b/package.json
@@ -0,0 +1,33 @@
+{
+  "name": "wcag",
+  "private": true,
+  "version": "0.1.0",
+  "description": "Web Content Accessibility Guidelines",
+  "type": "module",
+  "scripts": {
+    "build": "tsx node_modules/@11ty/eleventy/cmd.cjs --config=eleventy.config.ts",
+    "check": "tsc",
+    "fmt": "prettier . -w",
+    "publish-w3c": "WCAG_MODE=publication npm run build && tsx 11ty/cp-cvs.ts",
+    "start": "npm run build -- --serve --incremental"
+  },
+  "author": "W3C",
+  "license": "W3C",
+  "dependencies": {
+    "@11ty/eleventy": "^3.0.0",
+    "cheerio": "^1.0.0",
+    "glob": "^10.3.16",
+    "gray-matter": "^4.0.3",
+    "liquidjs": "^10.17.0",
+    "lodash-es": "^4.17.21",
+    "mkdirp": "^3.0.1",
+    "rimraf": "^5.0.10",
+    "tsx": "^4.11.0"
+  },
+  "devDependencies": {
+    "@types/lodash-es": "^4.17.12",
+    "@types/node": "^20.12.12",
+    "prettier": "^3.3.2",
+    "typescript": "^5.4.5"
+  }
+}
diff --git a/requirements/index.html b/requirements/21/index.html
similarity index 99%
rename from requirements/index.html
rename to requirements/21/index.html
index f55edf1a0e..17ceaa774e 100644
--- a/requirements/index.html
+++ b/requirements/21/index.html
@@ -33,7 +33,7 @@
 		license: "document",
 
 		// if there a publicly available Editors Draft, this is the link
-		edDraftURI: "https://w3c.github.io/wcag/requirements/",
+		edDraftURI: "https://w3c.github.io/wcag/wcag21/requirements/",
 
 		// if this is a LCWD, uncomment and set the end of its review period
 		// lcEnd: "2012-02-21",
diff --git a/requirements/22/index.html b/requirements/22/index.html
index 29f4f4f096..8875456838 100644
--- a/requirements/22/index.html
+++ b/requirements/22/index.html
@@ -4,7 +4,7 @@
 
 <head>
   <title>Requirements for Web Content Accessibility Guidelines 2.2</title>
-  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
   <script src="https://www.w3.org/Tools/respec/respec-w3c-common" class="remove"></script>
   <!-- <script src='http://pandora.aptest.com/respec/js/require.js' data-main="http://pandora.aptest.com/respec/js/profile-w3c-common" async class='remove'></script> -->
   <!--<link href="../common/css/common.css" rel="stylesheet" type="text/css"/>-->
@@ -34,7 +34,7 @@
       license: "document",
 
       // if there a publicly available Editors Draft, this is the link
-      edDraftURI: "https://w3c.github.io/wcag/requirements/",
+      edDraftURI: "https://w3c.github.io/wcag/requirements/22/",
 
       // if this is a LCWD, uncomment and set the end of its review period
       // lcEnd: "2012-02-21",
diff --git a/script/highlight.min.js b/script/highlight.min.js
new file mode 100644
index 0000000000..66b0b34c7d
--- /dev/null
+++ b/script/highlight.min.js
@@ -0,0 +1,496 @@
+/*!
+  Highlight.js v11.0.1 (git: 1cf31f015d)
+  (c) 2006-2021 Ivan Sagalaev and other contributors
+  License: BSD-3-Clause
+ */
+  var hljs=function(){"use strict";var e={exports:{}};function t(e){
+    return e instanceof Map?e.clear=e.delete=e.set=()=>{
+    throw Error("map is read-only")}:e instanceof Set&&(e.add=e.clear=e.delete=()=>{
+    throw Error("set is read-only")
+    }),Object.freeze(e),Object.getOwnPropertyNames(e).forEach((n=>{var i=e[n]
+    ;"object"!=typeof i||Object.isFrozen(i)||t(i)})),e}
+    e.exports=t,e.exports.default=t;var n=e.exports;class i{constructor(e){
+    void 0===e.data&&(e.data={}),this.data=e.data,this.isMatchIgnored=!1}
+    ignoreMatch(){this.isMatchIgnored=!0}}function r(e){
+    return e.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#x27;")
+    }function s(e,...t){const n=Object.create(null);for(const t in e)n[t]=e[t]
+    ;return t.forEach((e=>{for(const t in e)n[t]=e[t]})),n}const o=e=>!!e.kind
+    ;class a{constructor(e,t){
+    this.buffer="",this.classPrefix=t.classPrefix,e.walk(this)}addText(e){
+    this.buffer+=r(e)}openNode(e){if(!o(e))return;let t=e.kind
+    ;t=e.sublanguage?"language-"+t:((e,{prefix:t})=>{if(e.includes(".")){
+    const n=e.split(".")
+    ;return[`${t}${n.shift()}`,...n.map(((e,t)=>`${e}${"_".repeat(t+1)}`))].join(" ")
+    }return`${t}${e}`})(t,{prefix:this.classPrefix}),this.span(t)}closeNode(e){
+    o(e)&&(this.buffer+="</span>")}value(){return this.buffer}span(e){
+    this.buffer+=`<span class="${e}">`}}class l{constructor(){this.rootNode={
+    children:[]},this.stack=[this.rootNode]}get top(){
+    return this.stack[this.stack.length-1]}get root(){return this.rootNode}add(e){
+    this.top.children.push(e)}openNode(e){const t={kind:e,children:[]}
+    ;this.add(t),this.stack.push(t)}closeNode(){
+    if(this.stack.length>1)return this.stack.pop()}closeAllNodes(){
+    for(;this.closeNode(););}toJSON(){return JSON.stringify(this.rootNode,null,4)}
+    walk(e){return this.constructor._walk(e,this.rootNode)}static _walk(e,t){
+    return"string"==typeof t?e.addText(t):t.children&&(e.openNode(t),
+    t.children.forEach((t=>this._walk(e,t))),e.closeNode(t)),e}static _collapse(e){
+    "string"!=typeof e&&e.children&&(e.children.every((e=>"string"==typeof e))?e.children=[e.children.join("")]:e.children.forEach((e=>{
+    l._collapse(e)})))}}class c extends l{constructor(e){super(),this.options=e}
+    addKeyword(e,t){""!==e&&(this.openNode(t),this.addText(e),this.closeNode())}
+    addText(e){""!==e&&this.add(e)}addSublanguage(e,t){const n=e.root
+    ;n.kind=t,n.sublanguage=!0,this.add(n)}toHTML(){
+    return new a(this,this.options).value()}finalize(){return!0}}function g(e){
+    return e?"string"==typeof e?e:e.source:null}function d(...e){
+    return e.map((e=>g(e))).join("")}function u(...e){return"("+((e=>{
+    const t=e[e.length-1]
+    ;return"object"==typeof t&&t.constructor===Object?(e.splice(e.length-1,1),t):{}
+    })(e).capture?"":"?:")+e.map((e=>g(e))).join("|")+")"}function h(e){
+    return RegExp(e.toString()+"|").exec("").length-1}
+    const f=/\[(?:[^\\\]]|\\.)*\]|\(\??|\\([1-9][0-9]*)|\\./
+    ;function p(e,{joinWith:t}){let n=0;return e.map((e=>{n+=1;const t=n
+    ;let i=g(e),r="";for(;i.length>0;){const e=f.exec(i);if(!e){r+=i;break}
+    r+=i.substring(0,e.index),
+    i=i.substring(e.index+e[0].length),"\\"===e[0][0]&&e[1]?r+="\\"+(Number(e[1])+t):(r+=e[0],
+    "("===e[0]&&n++)}return r})).map((e=>`(${e})`)).join(t)}
+    const b="[a-zA-Z]\\w*",m="[a-zA-Z_]\\w*",E="\\b\\d+(\\.\\d+)?",x="(-?)(\\b0[xX][a-fA-F0-9]+|(\\b\\d+(\\.\\d*)?|\\.\\d+)([eE][-+]?\\d+)?)",y="\\b(0b[01]+)",w={
+    begin:"\\\\[\\s\\S]",relevance:0},_={scope:"string",begin:"'",end:"'",
+    illegal:"\\n",contains:[w]},v={scope:"string",begin:'"',end:'"',illegal:"\\n",
+    contains:[w]},O=(e,t,n={})=>{const i=s({scope:"comment",begin:e,end:t,
+    contains:[]},n);i.contains.push({scope:"doctag",
+    begin:"[ ]*(?=(TODO|FIXME|NOTE|BUG|OPTIMIZE|HACK|XXX):)",
+    end:/(TODO|FIXME|NOTE|BUG|OPTIMIZE|HACK|XXX):/,excludeBegin:!0,relevance:0})
+    ;const r=u("I","a","is","so","us","to","at","if","in","it","on",/[A-Za-z]+['](d|ve|re|ll|t|s|n)/,/[A-Za-z]+[-][a-z]+/,/[A-Za-z][a-z]{2,}/)
+    ;return i.contains.push({begin:d(/[ ]+/,"(",r,/[.]?[:]?([.][ ]|[ ])/,"){3}")}),i
+    },k=O("//","$"),N=O("/\\*","\\*/"),S=O("#","$");var M=Object.freeze({
+    __proto__:null,MATCH_NOTHING_RE:/\b\B/,IDENT_RE:b,UNDERSCORE_IDENT_RE:m,
+    NUMBER_RE:E,C_NUMBER_RE:x,BINARY_NUMBER_RE:y,
+    RE_STARTERS_RE:"!|!=|!==|%|%=|&|&&|&=|\\*|\\*=|\\+|\\+=|,|-|-=|/=|/|:|;|<<|<<=|<=|<|===|==|=|>>>=|>>=|>=|>>>|>>|>|\\?|\\[|\\{|\\(|\\^|\\^=|\\||\\|=|\\|\\||~",
+    SHEBANG:(e={})=>{const t=/^#![ ]*\//
+    ;return e.binary&&(e.begin=d(t,/.*\b/,e.binary,/\b.*/)),s({scope:"meta",begin:t,
+    end:/$/,relevance:0,"on:begin":(e,t)=>{0!==e.index&&t.ignoreMatch()}},e)},
+    BACKSLASH_ESCAPE:w,APOS_STRING_MODE:_,QUOTE_STRING_MODE:v,PHRASAL_WORDS_MODE:{
+    begin:/\b(a|an|the|are|I'm|isn't|don't|doesn't|won't|but|just|should|pretty|simply|enough|gonna|going|wtf|so|such|will|you|your|they|like|more)\b/
+    },COMMENT:O,C_LINE_COMMENT_MODE:k,C_BLOCK_COMMENT_MODE:N,HASH_COMMENT_MODE:S,
+    NUMBER_MODE:{scope:"number",begin:E,relevance:0},C_NUMBER_MODE:{scope:"number",
+    begin:x,relevance:0},BINARY_NUMBER_MODE:{scope:"number",begin:y,relevance:0},
+    REGEXP_MODE:{begin:/(?=\/[^/\n]*\/)/,contains:[{scope:"regexp",begin:/\//,
+    end:/\/[gimuy]*/,illegal:/\n/,contains:[w,{begin:/\[/,end:/\]/,relevance:0,
+    contains:[w]}]}]},TITLE_MODE:{scope:"title",begin:b,relevance:0},
+    UNDERSCORE_TITLE_MODE:{scope:"title",begin:m,relevance:0},METHOD_GUARD:{
+    begin:"\\.\\s*[a-zA-Z_]\\w*",relevance:0},END_SAME_AS_BEGIN:e=>Object.assign(e,{
+    "on:begin":(e,t)=>{t.data._beginMatch=e[1]},"on:end":(e,t)=>{
+    t.data._beginMatch!==e[1]&&t.ignoreMatch()}})});function R(e,t){
+    "."===e.input[e.index-1]&&t.ignoreMatch()}function j(e,t){
+    void 0!==e.className&&(e.scope=e.className,delete e.className)}function A(e,t){
+    t&&e.beginKeywords&&(e.begin="\\b("+e.beginKeywords.split(" ").join("|")+")(?!\\.)(?=\\b|\\s)",
+    e.__beforeBegin=R,e.keywords=e.keywords||e.beginKeywords,delete e.beginKeywords,
+    void 0===e.relevance&&(e.relevance=0))}function I(e,t){
+    Array.isArray(e.illegal)&&(e.illegal=u(...e.illegal))}function B(e,t){
+    if(e.match){
+    if(e.begin||e.end)throw Error("begin & end are not supported with match")
+    ;e.begin=e.match,delete e.match}}function T(e,t){
+    void 0===e.relevance&&(e.relevance=1)}const L=(e,t)=>{if(!e.beforeMatch)return
+    ;if(e.starts)throw Error("beforeMatch cannot be used with starts")
+    ;const n=Object.assign({},e);Object.keys(e).forEach((t=>{delete e[t]
+    })),e.keywords=n.keywords,
+    e.begin=d(n.beforeMatch,d("(?=",n.begin,")")),e.starts={relevance:0,
+    contains:[Object.assign(n,{endsParent:!0})]},e.relevance=0,delete n.beforeMatch
+    },D=["of","and","for","in","not","or","if","then","parent","list","value"]
+    ;function P(e,t,n="keyword"){const i=Object.create(null)
+    ;return"string"==typeof e?r(n,e.split(" ")):Array.isArray(e)?r(n,e):Object.keys(e).forEach((n=>{
+    Object.assign(i,P(e[n],t,n))})),i;function r(e,n){
+    t&&(n=n.map((e=>e.toLowerCase()))),n.forEach((t=>{const n=t.split("|")
+    ;i[n[0]]=[e,C(n[0],n[1])]}))}}function C(e,t){
+    return t?Number(t):(e=>D.includes(e.toLowerCase()))(e)?0:1}const H={},$=e=>{
+    console.error(e)},U=(e,...t)=>{console.log("WARN: "+e,...t)},z=(e,t)=>{
+    H[`${e}/${t}`]||(console.log(`Deprecated as of ${e}. ${t}`),H[`${e}/${t}`]=!0)
+    },K=Error();function W(e,t,{key:n}){let i=0;const r=e[n],s={},o={}
+    ;for(let e=1;e<=t.length;e++)o[e+i]=r[e],s[e+i]=!0,i+=h(t[e-1])
+    ;e[n]=o,e[n]._emit=s,e[n]._multi=!0}function X(e){(e=>{
+    e.scope&&"object"==typeof e.scope&&null!==e.scope&&(e.beginScope=e.scope,
+    delete e.scope)})(e),"string"==typeof e.beginScope&&(e.beginScope={
+    _wrap:e.beginScope}),"string"==typeof e.endScope&&(e.endScope={_wrap:e.endScope
+    }),(e=>{if(Array.isArray(e.begin)){
+    if(e.skip||e.excludeBegin||e.returnBegin)throw $("skip, excludeBegin, returnBegin not compatible with beginScope: {}"),
+    K
+    ;if("object"!=typeof e.beginScope||null===e.beginScope)throw $("beginScope must be object"),
+    K;W(e,e.begin,{key:"beginScope"}),e.begin=p(e.begin,{joinWith:""})}})(e),(e=>{
+    if(Array.isArray(e.end)){
+    if(e.skip||e.excludeEnd||e.returnEnd)throw $("skip, excludeEnd, returnEnd not compatible with endScope: {}"),
+    K
+    ;if("object"!=typeof e.endScope||null===e.endScope)throw $("endScope must be object"),
+    K;W(e,e.end,{key:"endScope"}),e.end=p(e.end,{joinWith:""})}})(e)}function G(e){
+    function t(t,n){return RegExp(g(t),"m"+(e.case_insensitive?"i":"")+(n?"g":""))}
+    class n{constructor(){
+    this.matchIndexes={},this.regexes=[],this.matchAt=1,this.position=0}
+    addRule(e,t){
+    t.position=this.position++,this.matchIndexes[this.matchAt]=t,this.regexes.push([t,e]),
+    this.matchAt+=h(e)+1}compile(){0===this.regexes.length&&(this.exec=()=>null)
+    ;const e=this.regexes.map((e=>e[1]));this.matcherRe=t(p(e,{joinWith:"|"
+    }),!0),this.lastIndex=0}exec(e){this.matcherRe.lastIndex=this.lastIndex
+    ;const t=this.matcherRe.exec(e);if(!t)return null
+    ;const n=t.findIndex(((e,t)=>t>0&&void 0!==e)),i=this.matchIndexes[n]
+    ;return t.splice(0,n),Object.assign(t,i)}}class i{constructor(){
+    this.rules=[],this.multiRegexes=[],
+    this.count=0,this.lastIndex=0,this.regexIndex=0}getMatcher(e){
+    if(this.multiRegexes[e])return this.multiRegexes[e];const t=new n
+    ;return this.rules.slice(e).forEach((([e,n])=>t.addRule(e,n))),
+    t.compile(),this.multiRegexes[e]=t,t}resumingScanAtSamePosition(){
+    return 0!==this.regexIndex}considerAll(){this.regexIndex=0}addRule(e,t){
+    this.rules.push([e,t]),"begin"===t.type&&this.count++}exec(e){
+    const t=this.getMatcher(this.regexIndex);t.lastIndex=this.lastIndex
+    ;let n=t.exec(e)
+    ;if(this.resumingScanAtSamePosition())if(n&&n.index===this.lastIndex);else{
+    const t=this.getMatcher(0);t.lastIndex=this.lastIndex+1,n=t.exec(e)}
+    return n&&(this.regexIndex+=n.position+1,
+    this.regexIndex===this.count&&this.considerAll()),n}}
+    if(e.compilerExtensions||(e.compilerExtensions=[]),
+    e.contains&&e.contains.includes("self"))throw Error("ERR: contains `self` is not supported at the top-level of a language.  See documentation.")
+    ;return e.classNameAliases=s(e.classNameAliases||{}),function n(r,o){const a=r
+    ;if(r.isCompiled)return a
+    ;[j,B,X,L].forEach((e=>e(r,o))),e.compilerExtensions.forEach((e=>e(r,o))),
+    r.__beforeBegin=null,[A,I,T].forEach((e=>e(r,o))),r.isCompiled=!0;let l=null
+    ;return"object"==typeof r.keywords&&r.keywords.$pattern&&(r.keywords=Object.assign({},r.keywords),
+    l=r.keywords.$pattern,
+    delete r.keywords.$pattern),l=l||/\w+/,r.keywords&&(r.keywords=P(r.keywords,e.case_insensitive)),
+    a.keywordPatternRe=t(l,!0),
+    o&&(r.begin||(r.begin=/\B|\b/),a.beginRe=t(r.begin),r.end||r.endsWithParent||(r.end=/\B|\b/),
+    r.end&&(a.endRe=t(r.end)),
+    a.terminatorEnd=g(r.end)||"",r.endsWithParent&&o.terminatorEnd&&(a.terminatorEnd+=(r.end?"|":"")+o.terminatorEnd)),
+    r.illegal&&(a.illegalRe=t(r.illegal)),
+    r.contains||(r.contains=[]),r.contains=[].concat(...r.contains.map((e=>(e=>(e.variants&&!e.cachedVariants&&(e.cachedVariants=e.variants.map((t=>s(e,{
+    variants:null},t)))),e.cachedVariants?e.cachedVariants:Z(e)?s(e,{
+    starts:e.starts?s(e.starts):null
+    }):Object.isFrozen(e)?s(e):e))("self"===e?r:e)))),r.contains.forEach((e=>{n(e,a)
+    })),r.starts&&n(r.starts,o),a.matcher=(e=>{const t=new i
+    ;return e.contains.forEach((e=>t.addRule(e.begin,{rule:e,type:"begin"
+    }))),e.terminatorEnd&&t.addRule(e.terminatorEnd,{type:"end"
+    }),e.illegal&&t.addRule(e.illegal,{type:"illegal"}),t})(a),a}(e)}function Z(e){
+    return!!e&&(e.endsWithParent||Z(e.starts))}const F=r,V=s,q=Symbol("nomatch")
+    ;var J=(e=>{const t=Object.create(null),r=Object.create(null),s=[];let o=!0
+    ;const a="Could not find the language '{}', did you forget to load/include a language module?",l={
+    disableAutodetect:!0,name:"Plain text",contains:[]};let g={
+    ignoreUnescapedHTML:!1,noHighlightRe:/^(no-?highlight)$/i,
+    languageDetectRe:/\blang(?:uage)?-([\w-]+)\b/i,classPrefix:"hljs-",
+    cssSelector:"pre code",languages:null,__emitter:c};function d(e){
+    return g.noHighlightRe.test(e)}function u(e,t,n,i){let r="",s=""
+    ;"object"==typeof t?(r=e,
+    n=t.ignoreIllegals,s=t.language,i=void 0):(z("10.7.0","highlight(lang, code, ...args) has been deprecated."),
+    z("10.7.0","Please use highlight(code, options) instead.\nhttps://github.com/highlightjs/highlight.js/issues/2277"),
+    s=e,r=t),void 0===n&&(n=!0);const o={code:r,language:s};w("before:highlight",o)
+    ;const a=o.result?o.result:h(o.language,o.code,n,i)
+    ;return a.code=o.code,w("after:highlight",a),a}function h(e,n,r,s){
+    const l=Object.create(null);function c(){if(!k.keywords)return void S.addText(M)
+    ;let e=0;k.keywordPatternRe.lastIndex=0;let t=k.keywordPatternRe.exec(M),n=""
+    ;for(;t;){n+=M.substring(e,t.index)
+    ;const r=_.case_insensitive?t[0].toLowerCase():t[0],s=(i=r,k.keywords[i]);if(s){
+    const[e,i]=s
+    ;if(S.addText(n),n="",l[r]=(l[r]||0)+1,l[r]<=7&&(R+=i),e.startsWith("_"))n+=t[0];else{
+    const n=_.classNameAliases[e]||e;S.addKeyword(t[0],n)}}else n+=t[0]
+    ;e=k.keywordPatternRe.lastIndex,t=k.keywordPatternRe.exec(M)}var i
+    ;n+=M.substr(e),S.addText(n)}function d(){null!=k.subLanguage?(()=>{
+    if(""===M)return;let e=null;if("string"==typeof k.subLanguage){
+    if(!t[k.subLanguage])return void S.addText(M)
+    ;e=h(k.subLanguage,M,!0,N[k.subLanguage]),N[k.subLanguage]=e._top
+    }else e=f(M,k.subLanguage.length?k.subLanguage:null)
+    ;k.relevance>0&&(R+=e.relevance),S.addSublanguage(e._emitter,e.language)
+    })():c(),M=""}function u(e,t){let n=1;for(;void 0!==t[n];){if(!e._emit[n]){n++
+    ;continue}const i=_.classNameAliases[e[n]]||e[n],r=t[n]
+    ;i?S.addKeyword(r,i):(M=r,c(),M=""),n++}}function p(e,t){
+    return e.scope&&"string"==typeof e.scope&&S.openNode(_.classNameAliases[e.scope]||e.scope),
+    e.beginScope&&(e.beginScope._wrap?(S.addKeyword(M,_.classNameAliases[e.beginScope._wrap]||e.beginScope._wrap),
+    M=""):e.beginScope._multi&&(u(e.beginScope,t),M="")),k=Object.create(e,{parent:{
+    value:k}}),k}function b(e,t,n){let r=((e,t)=>{const n=e&&e.exec(t)
+    ;return n&&0===n.index})(e.endRe,n);if(r){if(e["on:end"]){const n=new i(e)
+    ;e["on:end"](t,n),n.isMatchIgnored&&(r=!1)}if(r){
+    for(;e.endsParent&&e.parent;)e=e.parent;return e}}
+    if(e.endsWithParent)return b(e.parent,t,n)}function m(e){
+    return 0===k.matcher.regexIndex?(M+=e[0],1):(I=!0,0)}function x(e){
+    const t=e[0],i=n.substr(e.index),r=b(k,e,i);if(!r)return q;const s=k
+    ;k.endScope&&k.endScope._wrap?(d(),
+    S.addKeyword(t,k.endScope._wrap)):k.endScope&&k.endScope._multi?(d(),
+    u(k.endScope,e)):s.skip?M+=t:(s.returnEnd||s.excludeEnd||(M+=t),
+    d(),s.excludeEnd&&(M=t));do{
+    k.scope&&!k.isMultiClass&&S.closeNode(),k.skip||k.subLanguage||(R+=k.relevance),
+    k=k.parent}while(k!==r.parent)
+    ;return r.starts&&p(r.starts,e),s.returnEnd?0:t.length}let y={};function w(t,s){
+    const a=s&&s[0];if(M+=t,null==a)return d(),0
+    ;if("begin"===y.type&&"end"===s.type&&y.index===s.index&&""===a){
+    if(M+=n.slice(s.index,s.index+1),!o){const t=Error(`0 width match regex (${e})`)
+    ;throw t.languageName=e,t.badRule=y.rule,t}return 1}
+    if(y=s,"begin"===s.type)return(e=>{
+    const t=e[0],n=e.rule,r=new i(n),s=[n.__beforeBegin,n["on:begin"]]
+    ;for(const n of s)if(n&&(n(e,r),r.isMatchIgnored))return m(t)
+    ;return n.skip?M+=t:(n.excludeBegin&&(M+=t),
+    d(),n.returnBegin||n.excludeBegin||(M=t)),p(n,e),n.returnBegin?0:t.length})(s)
+    ;if("illegal"===s.type&&!r){
+    const e=Error('Illegal lexeme "'+a+'" for mode "'+(k.scope||"<unnamed>")+'"')
+    ;throw e.mode=k,e}if("end"===s.type){const e=x(s);if(e!==q)return e}
+    if("illegal"===s.type&&""===a)return 1
+    ;if(A>1e5&&A>3*s.index)throw Error("potential infinite loop, way more iterations than matches")
+    ;return M+=a,a.length}const _=E(e)
+    ;if(!_)throw $(a.replace("{}",e)),Error('Unknown language: "'+e+'"')
+    ;const v=G(_);let O="",k=s||v;const N={},S=new g.__emitter(g);(()=>{const e=[]
+    ;for(let t=k;t!==_;t=t.parent)t.scope&&e.unshift(t.scope)
+    ;e.forEach((e=>S.openNode(e)))})();let M="",R=0,j=0,A=0,I=!1;try{
+    for(k.matcher.considerAll();;){
+    A++,I?I=!1:k.matcher.considerAll(),k.matcher.lastIndex=j
+    ;const e=k.matcher.exec(n);if(!e)break;const t=w(n.substring(j,e.index),e)
+    ;j=e.index+t}return w(n.substr(j)),S.closeAllNodes(),S.finalize(),O=S.toHTML(),{
+    language:e,value:O,relevance:R,illegal:!1,_emitter:S,_top:k}}catch(t){
+    if(t.message&&t.message.includes("Illegal"))return{language:e,value:F(n),
+    illegal:!0,relevance:0,_illegalBy:{message:t.message,index:j,
+    context:n.slice(j-100,j+100),mode:t.mode,resultSoFar:O},_emitter:S};if(o)return{
+    language:e,value:F(n),illegal:!1,relevance:0,errorRaised:t,_emitter:S,_top:k}
+    ;throw t}}function f(e,n){n=n||g.languages||Object.keys(t);const i=(e=>{
+    const t={value:F(e),illegal:!1,relevance:0,_top:l,_emitter:new g.__emitter(g)}
+    ;return t._emitter.addText(e),t})(e),r=n.filter(E).filter(y).map((t=>h(t,e,!1)))
+    ;r.unshift(i);const s=r.sort(((e,t)=>{
+    if(e.relevance!==t.relevance)return t.relevance-e.relevance
+    ;if(e.language&&t.language){if(E(e.language).supersetOf===t.language)return 1
+    ;if(E(t.language).supersetOf===e.language)return-1}return 0})),[o,a]=s,c=o
+    ;return c.secondBest=a,c}function p(e){let t=null;const n=(e=>{
+    let t=e.className+" ";t+=e.parentNode?e.parentNode.className:""
+    ;const n=g.languageDetectRe.exec(t);if(n){const t=E(n[1])
+    ;return t||(U(a.replace("{}",n[1])),
+    U("Falling back to no-highlight mode for this block.",e)),t?n[1]:"no-highlight"}
+    return t.split(/\s+/).find((e=>d(e)||E(e)))})(e);if(d(n))return
+    ;w("before:highlightElement",{el:e,language:n
+    }),!g.ignoreUnescapedHTML&&e.children.length>0&&(console.warn("One of your code blocks includes unescaped HTML. This is a potentially serious security risk."),
+    console.warn("https://github.com/highlightjs/highlight.js/issues/2886"),
+    console.warn(e)),t=e;const i=t.textContent,s=n?u(i,{language:n,ignoreIllegals:!0
+    }):f(i);e.innerHTML=s.value,((e,t,n)=>{const i=t&&r[t]||n
+    ;e.classList.add("hljs"),e.classList.add("language-"+i)
+    })(e,n,s.language),e.result={language:s.language,re:s.relevance,
+    relevance:s.relevance},s.secondBest&&(e.secondBest={
+    language:s.secondBest.language,relevance:s.secondBest.relevance
+    }),w("after:highlightElement",{el:e,result:s,text:i})}let b=!1;function m(){
+    "loading"!==document.readyState?document.querySelectorAll(g.cssSelector).forEach(p):b=!0
+    }function E(e){return e=(e||"").toLowerCase(),t[e]||t[r[e]]}
+    function x(e,{languageName:t}){"string"==typeof e&&(e=[e]),e.forEach((e=>{
+    r[e.toLowerCase()]=t}))}function y(e){const t=E(e)
+    ;return t&&!t.disableAutodetect}function w(e,t){const n=e;s.forEach((e=>{
+    e[n]&&e[n](t)}))}
+    "undefined"!=typeof window&&window.addEventListener&&window.addEventListener("DOMContentLoaded",(()=>{
+    b&&m()}),!1),Object.assign(e,{highlight:u,highlightAuto:f,highlightAll:m,
+    highlightElement:p,
+    highlightBlock:e=>(z("10.7.0","highlightBlock will be removed entirely in v12.0"),
+    z("10.7.0","Please use highlightElement now."),p(e)),configure:e=>{g=V(g,e)},
+    initHighlighting:()=>{
+    m(),z("10.6.0","initHighlighting() deprecated.  Use highlightAll() now.")},
+    initHighlightingOnLoad:()=>{
+    m(),z("10.6.0","initHighlightingOnLoad() deprecated.  Use highlightAll() now.")
+    },registerLanguage:(n,i)=>{let r=null;try{r=i(e)}catch(e){
+    if($("Language definition for '{}' could not be registered.".replace("{}",n)),
+    !o)throw e;$(e),r=l}
+    r.name||(r.name=n),t[n]=r,r.rawDefinition=i.bind(null,e),r.aliases&&x(r.aliases,{
+    languageName:n})},unregisterLanguage:e=>{delete t[e]
+    ;for(const t of Object.keys(r))r[t]===e&&delete r[t]},
+    listLanguages:()=>Object.keys(t),getLanguage:E,registerAliases:x,
+    autoDetection:y,inherit:V,addPlugin:e=>{(e=>{
+    e["before:highlightBlock"]&&!e["before:highlightElement"]&&(e["before:highlightElement"]=t=>{
+    e["before:highlightBlock"](Object.assign({block:t.el},t))
+    }),e["after:highlightBlock"]&&!e["after:highlightElement"]&&(e["after:highlightElement"]=t=>{
+    e["after:highlightBlock"](Object.assign({block:t.el},t))})})(e),s.push(e)}
+    }),e.debugMode=()=>{o=!1},e.safeMode=()=>{o=!0},e.versionString="11.0.1"
+    ;for(const e in M)"object"==typeof M[e]&&n(M[e]);return Object.assign(e,M),e
+    })({}),Y=Object.freeze({__proto__:null});const Q=J
+    ;for(const e of Object.keys(Y)){const t=e.replace("grmr_","")
+    ;Q.registerLanguage(t,Y[e])}return Q}()
+    ;"object"==typeof exports&&"undefined"!=typeof module&&(module.exports=hljs);hljs.registerLanguage("css",(()=>{"use strict"
+    ;const e=["a","abbr","address","article","aside","audio","b","blockquote","body","button","canvas","caption","cite","code","dd","del","details","dfn","div","dl","dt","em","fieldset","figcaption","figure","footer","form","h1","h2","h3","h4","h5","h6","header","hgroup","html","i","iframe","img","input","ins","kbd","label","legend","li","main","mark","menu","nav","object","ol","p","q","quote","samp","section","span","strong","summary","sup","table","tbody","td","textarea","tfoot","th","thead","time","tr","ul","var","video"],t=["any-hover","any-pointer","aspect-ratio","color","color-gamut","color-index","device-aspect-ratio","device-height","device-width","display-mode","forced-colors","grid","height","hover","inverted-colors","monochrome","orientation","overflow-block","overflow-inline","pointer","prefers-color-scheme","prefers-contrast","prefers-reduced-motion","prefers-reduced-transparency","resolution","scan","scripting","update","width","min-width","max-width","min-height","max-height"],i=["active","any-link","blank","checked","current","default","defined","dir","disabled","drop","empty","enabled","first","first-child","first-of-type","fullscreen","future","focus","focus-visible","focus-within","has","host","host-context","hover","indeterminate","in-range","invalid","is","lang","last-child","last-of-type","left","link","local-link","not","nth-child","nth-col","nth-last-child","nth-last-col","nth-last-of-type","nth-of-type","only-child","only-of-type","optional","out-of-range","past","placeholder-shown","read-only","read-write","required","right","root","scope","target","target-within","user-invalid","valid","visited","where"],o=["after","backdrop","before","cue","cue-region","first-letter","first-line","grammar-error","marker","part","placeholder","selection","slotted","spelling-error"],r=["align-content","align-items","align-self","animation","animation-delay","animation-direction","animation-duration","animation-fill-mode","animation-iteration-count","animation-name","animation-play-state","animation-timing-function","auto","backface-visibility","background","background-attachment","background-clip","background-color","background-image","background-origin","background-position","background-repeat","background-size","border","border-bottom","border-bottom-color","border-bottom-left-radius","border-bottom-right-radius","border-bottom-style","border-bottom-width","border-collapse","border-color","border-image","border-image-outset","border-image-repeat","border-image-slice","border-image-source","border-image-width","border-left","border-left-color","border-left-style","border-left-width","border-radius","border-right","border-right-color","border-right-style","border-right-width","border-spacing","border-style","border-top","border-top-color","border-top-left-radius","border-top-right-radius","border-top-style","border-top-width","border-width","bottom","box-decoration-break","box-shadow","box-sizing","break-after","break-before","break-inside","caption-side","clear","clip","clip-path","color","column-count","column-fill","column-gap","column-rule","column-rule-color","column-rule-style","column-rule-width","column-span","column-width","columns","content","counter-increment","counter-reset","cursor","direction","display","empty-cells","filter","flex","flex-basis","flex-direction","flex-flow","flex-grow","flex-shrink","flex-wrap","float","font","font-display","font-family","font-feature-settings","font-kerning","font-language-override","font-size","font-size-adjust","font-smoothing","font-stretch","font-style","font-variant","font-variant-ligatures","font-variation-settings","font-weight","height","hyphens","icon","image-orientation","image-rendering","image-resolution","ime-mode","inherit","initial","justify-content","left","letter-spacing","line-height","list-style","list-style-image","list-style-position","list-style-type","margin","margin-bottom","margin-left","margin-right","margin-top","marks","mask","max-height","max-width","min-height","min-width","nav-down","nav-index","nav-left","nav-right","nav-up","none","normal","object-fit","object-position","opacity","order","orphans","outline","outline-color","outline-offset","outline-style","outline-width","overflow","overflow-wrap","overflow-x","overflow-y","padding","padding-bottom","padding-left","padding-right","padding-top","page-break-after","page-break-before","page-break-inside","perspective","perspective-origin","pointer-events","position","quotes","resize","right","src","tab-size","table-layout","text-align","text-align-last","text-decoration","text-decoration-color","text-decoration-line","text-decoration-style","text-indent","text-overflow","text-rendering","text-shadow","text-transform","text-underline-position","top","transform","transform-origin","transform-style","transition","transition-delay","transition-duration","transition-property","transition-timing-function","unicode-bidi","vertical-align","visibility","white-space","widows","width","word-break","word-spacing","word-wrap","z-index"].reverse()
+    ;return n=>{const a=(e=>({IMPORTANT:{scope:"meta",begin:"!important"},HEXCOLOR:{
+    scope:"number",begin:"#([a-fA-F0-9]{6}|[a-fA-F0-9]{3})"},
+    ATTRIBUTE_SELECTOR_MODE:{scope:"selector-attr",begin:/\[/,end:/\]/,illegal:"$",
+    contains:[e.APOS_STRING_MODE,e.QUOTE_STRING_MODE]},CSS_NUMBER_MODE:{
+    scope:"number",
+    begin:e.NUMBER_RE+"(%|em|ex|ch|rem|vw|vh|vmin|vmax|cm|mm|in|pt|pc|px|deg|grad|rad|turn|s|ms|Hz|kHz|dpi|dpcm|dppx)?",
+    relevance:0}}))(n),l=[n.APOS_STRING_MODE,n.QUOTE_STRING_MODE];return{name:"CSS",
+    case_insensitive:!0,illegal:/[=|'\$]/,keywords:{keyframePosition:"from to"},
+    classNameAliases:{keyframePosition:"selector-tag"},
+    contains:[n.C_BLOCK_COMMENT_MODE,{begin:/-(webkit|moz|ms|o)-(?=[a-z])/
+    },a.CSS_NUMBER_MODE,{className:"selector-id",begin:/#[A-Za-z0-9_-]+/,relevance:0
+    },{className:"selector-class",begin:"\\.[a-zA-Z-][a-zA-Z0-9_-]*",relevance:0
+    },a.ATTRIBUTE_SELECTOR_MODE,{className:"selector-pseudo",variants:[{
+    begin:":("+i.join("|")+")"},{begin:"::("+o.join("|")+")"}]},{
+    className:"attribute",begin:"\\b("+r.join("|")+")\\b"},{begin:":",end:"[;}]",
+    contains:[a.HEXCOLOR,a.IMPORTANT,a.CSS_NUMBER_MODE,...l,{
+    begin:/(url|data-uri)\(/,end:/\)/,relevance:0,keywords:{built_in:"url data-uri"
+    },contains:[{className:"string",begin:/[^)]/,endsWithParent:!0,excludeEnd:!0}]
+    },{className:"built_in",begin:/[\w-]+(?=\()/}]},{
+    begin:(s=/@/,((...e)=>e.map((e=>(e=>e?"string"==typeof e?e:e.source:null)(e))).join(""))("(?=",s,")")),
+    end:"[{;]",relevance:0,illegal:/:/,contains:[{className:"keyword",
+    begin:/@-?\w[\w]*(-\w+)*/},{begin:/\s/,endsWithParent:!0,excludeEnd:!0,
+    relevance:0,keywords:{$pattern:/[a-z-]+/,keyword:"and or not only",
+    attribute:t.join(" ")},contains:[{begin:/[a-z-]+(?=:)/,className:"attribute"
+    },...l,a.CSS_NUMBER_MODE]}]},{className:"selector-tag",
+    begin:"\\b("+e.join("|")+")\\b"}]};var s}})());hljs.registerLanguage("xml",(()=>{"use strict";function e(e){
+    return e?"string"==typeof e?e:e.source:null}function n(e){return a("(?=",e,")")}
+    function a(...n){return n.map((n=>e(n))).join("")}function s(...n){
+    return"("+((e=>{const n=e[e.length-1]
+    ;return"object"==typeof n&&n.constructor===Object?(e.splice(e.length-1,1),n):{}
+    })(n).capture?"":"?:")+n.map((n=>e(n))).join("|")+")"}return e=>{
+    const t=a(/[A-Z_]/,a("(?:",/[A-Z0-9_.-]*:/,")?"),/[A-Z0-9_.-]*/),i={
+    className:"symbol",begin:/&[a-z]+;|&#[0-9]+;|&#x[a-f0-9]+;/},c={begin:/\s/,
+    contains:[{className:"keyword",begin:/#?[a-z_][a-z1-9_-]+/,illegal:/\n/}]
+    },r=e.inherit(c,{begin:/\(/,end:/\)/}),l=e.inherit(e.APOS_STRING_MODE,{
+    className:"string"}),g=e.inherit(e.QUOTE_STRING_MODE,{className:"string"}),m={
+    endsWithParent:!0,illegal:/</,relevance:0,contains:[{className:"attr",
+    begin:/[A-Za-z0-9._:-]+/,relevance:0},{begin:/=\s*/,relevance:0,contains:[{
+    className:"string",endsParent:!0,variants:[{begin:/"/,end:/"/,contains:[i]},{
+    begin:/'/,end:/'/,contains:[i]},{begin:/[^\s"'=<>`]+/}]}]}]};return{
+    name:"HTML, XML",
+    aliases:["html","xhtml","rss","atom","xjb","xsd","xsl","plist","wsf","svg"],
+    case_insensitive:!0,contains:[{className:"meta",begin:/<![a-z]/,end:/>/,
+    relevance:10,contains:[c,g,l,r,{begin:/\[/,end:/\]/,contains:[{className:"meta",
+    begin:/<![a-z]/,end:/>/,contains:[c,r,g,l]}]}]},e.COMMENT(/<!--/,/-->/,{
+    relevance:10}),{begin:/<!\[CDATA\[/,end:/\]\]>/,relevance:10},i,{
+    className:"meta",begin:/<\?xml/,end:/\?>/,relevance:10},{className:"tag",
+    begin:/<style(?=\s|>)/,end:/>/,keywords:{name:"style"},contains:[m],starts:{
+    end:/<\/style>/,returnEnd:!0,subLanguage:["css","xml"]}},{className:"tag",
+    begin:/<script(?=\s|>)/,end:/>/,keywords:{name:"script"},contains:[m],starts:{
+    end:/<\/script>/,returnEnd:!0,subLanguage:["javascript","handlebars","xml"]}},{
+    className:"tag",begin:/<>|<\/>/},{className:"tag",
+    begin:a(/</,n(a(t,s(/\/>/,/>/,/\s/)))),end:/\/?>/,contains:[{className:"name",
+    begin:t,relevance:0,starts:m}]},{className:"tag",begin:a(/<\//,n(a(t,/>/))),
+    contains:[{className:"name",begin:t,relevance:0},{begin:/>/,relevance:0,
+    endsParent:!0}]}]}}})());hljs.registerLanguage("markdown",(()=>{"use strict";function n(...n){
+    return n.map((n=>{return(e=n)?"string"==typeof e?e:e.source:null;var e
+    })).join("")}return e=>{const a={begin:/<\/?[A-Za-z_]/,end:">",
+    subLanguage:"xml",relevance:0},i={variants:[{begin:/\[.+?\]\[.*?\]/,relevance:0
+    },{begin:/\[.+?\]\(((data|javascript|mailto):|(?:http|ftp)s?:\/\/).*?\)/,
+    relevance:2},{begin:n(/\[.+?\]\(/,/[A-Za-z][A-Za-z0-9+.-]*/,/:\/\/.*?\)/),
+    relevance:2},{begin:/\[.+?\]\([./?&#].*?\)/,relevance:1},{
+    begin:/\[.+?\]\(.*?\)/,relevance:0}],returnBegin:!0,contains:[{
+    className:"string",relevance:0,begin:"\\[",end:"\\]",excludeBegin:!0,
+    returnEnd:!0},{className:"link",relevance:0,begin:"\\]\\(",end:"\\)",
+    excludeBegin:!0,excludeEnd:!0},{className:"symbol",relevance:0,begin:"\\]\\[",
+    end:"\\]",excludeBegin:!0,excludeEnd:!0}]},s={className:"strong",contains:[],
+    variants:[{begin:/_{2}/,end:/_{2}/},{begin:/\*{2}/,end:/\*{2}/}]},c={
+    className:"emphasis",contains:[],variants:[{begin:/\*(?!\*)/,end:/\*/},{
+    begin:/_(?!_)/,end:/_/,relevance:0}]};s.contains.push(c),c.contains.push(s)
+    ;let t=[a,i]
+    ;return s.contains=s.contains.concat(t),c.contains=c.contains.concat(t),
+    t=t.concat(s,c),{name:"Markdown",aliases:["md","mkdown","mkd"],contains:[{
+    className:"section",variants:[{begin:"^#{1,6}",end:"$",contains:t},{
+    begin:"(?=^.+?\\n[=-]{2,}$)",contains:[{begin:"^[=-]*$"},{begin:"^",end:"\\n",
+    contains:t}]}]},a,{className:"bullet",begin:"^[ \t]*([*+-]|(\\d+\\.))(?=\\s+)",
+    end:"\\s+",excludeEnd:!0},s,c,{className:"quote",begin:"^>\\s+",contains:t,
+    end:"$"},{className:"code",variants:[{begin:"(`{3,})[^`](.|\\n)*?\\1`*[ ]*"},{
+    begin:"(~{3,})[^~](.|\\n)*?\\1~*[ ]*"},{begin:"```",end:"```+[ ]*$"},{
+    begin:"~~~",end:"~~~+[ ]*$"},{begin:"`.+?`"},{begin:"(?=^( {4}|\\t))",
+    contains:[{begin:"^( {4}|\\t)",end:"(\\n)$"}],relevance:0}]},{
+    begin:"^[-\\*]{3,}",end:"$"},i,{begin:/^\[[^\n]+\]:/,returnBegin:!0,contains:[{
+    className:"symbol",begin:/\[/,end:/\]/,excludeBegin:!0,excludeEnd:!0},{
+    className:"link",begin:/:\s*/,end:/$/,excludeBegin:!0}]}]}}})());hljs.registerLanguage("javascript",(()=>{"use strict"
+    ;const e="[A-Za-z$_][0-9A-Za-z$_]*",n=["as","in","of","if","for","while","finally","var","new","function","do","return","void","else","break","catch","instanceof","with","throw","case","default","try","switch","continue","typeof","delete","let","yield","const","class","debugger","async","await","static","import","from","export","extends"],a=["true","false","null","undefined","NaN","Infinity"],t=["Intl","DataView","Number","Math","Date","String","RegExp","Object","Function","Boolean","Error","Symbol","Set","Map","WeakSet","WeakMap","Proxy","Reflect","JSON","Promise","Float64Array","Int16Array","Int32Array","Int8Array","Uint16Array","Uint32Array","Float32Array","Array","Uint8Array","Uint8ClampedArray","ArrayBuffer","BigInt64Array","BigUint64Array","BigInt"],s=["EvalError","InternalError","RangeError","ReferenceError","SyntaxError","TypeError","URIError"],r=["setInterval","setTimeout","clearInterval","clearTimeout","require","exports","eval","isFinite","isNaN","parseFloat","parseInt","decodeURI","decodeURIComponent","encodeURI","encodeURIComponent","escape","unescape"],i=["arguments","this","super","console","window","document","localStorage","module","global"],c=[].concat(r,t,s)
+    ;function o(e){return l("(?=",e,")")}function l(...e){return e.map((e=>{
+    return(n=e)?"string"==typeof n?n:n.source:null;var n})).join("")}return b=>{
+    const g=e,d={begin:/<[A-Za-z0-9\\._:-]+/,end:/\/[A-Za-z0-9\\._:-]+>|\/>/,
+    isTrulyOpeningTag:(e,n)=>{const a=e[0].length+e.index,t=e.input[a]
+    ;"<"!==t?">"===t&&(((e,{after:n})=>{const a="</"+e[0].slice(1)
+    ;return-1!==e.input.indexOf(a,n)})(e,{after:a
+    })||n.ignoreMatch()):n.ignoreMatch()}},u={$pattern:e,keyword:n,literal:a,
+    built_in:c,"variable.language":i
+    },m="\\.([0-9](_?[0-9])*)",E="0|[1-9](_?[0-9])*|0[0-7]*[89][0-9]*",y={
+    className:"number",variants:[{
+    begin:`(\\b(${E})((${m})|\\.)?|(${m}))[eE][+-]?([0-9](_?[0-9])*)\\b`},{
+    begin:`\\b(${E})\\b((${m})\\b|\\.)?|(${m})\\b`},{
+    begin:"\\b(0|[1-9](_?[0-9])*)n\\b"},{
+    begin:"\\b0[xX][0-9a-fA-F](_?[0-9a-fA-F])*n?\\b"},{
+    begin:"\\b0[bB][0-1](_?[0-1])*n?\\b"},{begin:"\\b0[oO][0-7](_?[0-7])*n?\\b"},{
+    begin:"\\b0[0-7]+n?\\b"}],relevance:0},_={className:"subst",begin:"\\$\\{",
+    end:"\\}",keywords:u,contains:[]},N={begin:"html`",end:"",starts:{end:"`",
+    returnEnd:!1,contains:[b.BACKSLASH_ESCAPE,_],subLanguage:"xml"}},f={
+    begin:"css`",end:"",starts:{end:"`",returnEnd:!1,
+    contains:[b.BACKSLASH_ESCAPE,_],subLanguage:"css"}},A={className:"string",
+    begin:"`",end:"`",contains:[b.BACKSLASH_ESCAPE,_]},v={className:"comment",
+    variants:[b.COMMENT(/\/\*\*(?!\/)/,"\\*/",{relevance:0,contains:[{
+    begin:"(?=@[A-Za-z]+)",relevance:0,contains:[{className:"doctag",
+    begin:"@[A-Za-z]+"},{className:"type",begin:"\\{",end:"\\}",excludeEnd:!0,
+    excludeBegin:!0,relevance:0},{className:"variable",begin:g+"(?=\\s*(-)|$)",
+    endsParent:!0,relevance:0},{begin:/(?=[^\n])\s/,relevance:0}]}]
+    }),b.C_BLOCK_COMMENT_MODE,b.C_LINE_COMMENT_MODE]
+    },p=[b.APOS_STRING_MODE,b.QUOTE_STRING_MODE,N,f,A,y,b.REGEXP_MODE]
+    ;_.contains=p.concat({begin:/\{/,end:/\}/,keywords:u,contains:["self"].concat(p)
+    });const h=[].concat(v,_.contains),S=h.concat([{begin:/\(/,end:/\)/,keywords:u,
+    contains:["self"].concat(h)}]),w={className:"params",begin:/\(/,end:/\)/,
+    excludeBegin:!0,excludeEnd:!0,keywords:u,contains:S},R={variants:[{
+    match:[/class/,/\s+/,g],scope:{1:"keyword",3:"title.class"}},{
+    match:[/extends/,/\s+/,l(g,"(",l(/\./,g),")*")],scope:{1:"keyword",
+    3:"title.class.inherited"}}]},O={relevance:0,
+    match:/\b[A-Z][a-z]+([A-Z][a-z]+)*/,className:"title.class",keywords:{
+    _:[...t,...s]}},I={variants:[{match:[/function/,/\s+/,g,/(?=\s*\()/]},{
+    match:[/function/,/\s*(?=\()/]}],className:{1:"keyword",3:"title.function"},
+    label:"func.def",contains:[w],illegal:/%/},T={
+    match:l(/\b/,(x=[...r,"super"],l("(?!",x.join("|"),")")),g,o(/\(/)),
+    className:"title.function",relevance:0};var x;const M={
+    begin:l(/\./,o(l(g,/(?![0-9A-Za-z$_(])/))),end:g,excludeBegin:!0,
+    keywords:"prototype",className:"property",relevance:0},k={
+    match:[/get|set/,/\s+/,g,/(?=\()/],className:{1:"keyword",3:"title.function"},
+    contains:[{begin:/\(\)/},w]
+    },C="(\\([^()]*(\\([^()]*(\\([^()]*\\)[^()]*)*\\)[^()]*)*\\)|"+b.UNDERSCORE_IDENT_RE+")\\s*=>",B={
+    match:[/const|var|let/,/\s+/,g,/\s*/,/=\s*/,o(C)],className:{1:"keyword",
+    3:"title.function"},contains:[w]};return{name:"Javascript",
+    aliases:["js","jsx","mjs","cjs"],keywords:u,exports:{PARAMS_CONTAINS:S},
+    illegal:/#(?![$_A-z])/,contains:[b.SHEBANG({label:"shebang",binary:"node",
+    relevance:5}),{label:"use_strict",className:"meta",relevance:10,
+    begin:/^\s*['"]use (strict|asm)['"]/
+    },b.APOS_STRING_MODE,b.QUOTE_STRING_MODE,N,f,A,v,y,O,{className:"attr",
+    begin:g+o(":"),relevance:0},B,{
+    begin:"("+b.RE_STARTERS_RE+"|\\b(case|return|throw)\\b)\\s*",
+    keywords:"return throw case",relevance:0,contains:[v,b.REGEXP_MODE,{
+    className:"function",begin:C,returnBegin:!0,end:"\\s*=>",contains:[{
+    className:"params",variants:[{begin:b.UNDERSCORE_IDENT_RE,relevance:0},{
+    className:null,begin:/\(\s*\)/,skip:!0},{begin:/\(/,end:/\)/,excludeBegin:!0,
+    excludeEnd:!0,keywords:u,contains:S}]}]},{begin:/,/,relevance:0},{match:/\s+/,
+    relevance:0},{variants:[{begin:"<>",end:"</>"},{begin:d.begin,
+    "on:begin":d.isTrulyOpeningTag,end:d.end}],subLanguage:"xml",contains:[{
+    begin:d.begin,end:d.end,skip:!0,contains:["self"]}]}]},I,{
+    beginKeywords:"while if switch catch for"},{
+    begin:"\\b(?!function)"+b.UNDERSCORE_IDENT_RE+"\\([^()]*(\\([^()]*(\\([^()]*\\)[^()]*)*\\)[^()]*)*\\)\\s*\\{",
+    returnBegin:!0,label:"func.def",contains:[w,b.inherit(b.TITLE_MODE,{begin:g,
+    className:"title.function"})]},{match:/\.\.\./,relevance:0},M,{match:"\\$"+g,
+    relevance:0},{match:[/\bconstructor(?=\s*\()/],className:{1:"title.function"},
+    contains:[w]},T,{relevance:0,match:/\b[A-Z][A-Z_]+\b/,
+    className:"variable.constant"},R,k,{match:/\$[(.]/}]}}})());hljs.registerLanguage("php",(()=>{"use strict";return e=>{const r={
+    className:"variable",
+    begin:"\\$+[a-zA-Z_\x7f-\xff][a-zA-Z0-9_\x7f-\xff]*(?![A-Za-z0-9])(?![$])"},t={
+    className:"meta",variants:[{begin:/<\?php/,relevance:10},{begin:/<\?[=]?/},{
+    begin:/\?>/}]},a={className:"subst",variants:[{begin:/\$\w+/},{begin:/\{\$/,
+    end:/\}/}]},n=e.inherit(e.APOS_STRING_MODE,{illegal:null
+    }),i=e.inherit(e.QUOTE_STRING_MODE,{illegal:null,
+    contains:e.QUOTE_STRING_MODE.contains.concat(a)}),o=e.END_SAME_AS_BEGIN({
+    begin:/<<<[ \t]*(\w+)\n/,end:/[ \t]*(\w+)\b/,
+    contains:e.QUOTE_STRING_MODE.contains.concat(a)}),l={className:"string",
+    contains:[e.BACKSLASH_ESCAPE,t],variants:[e.inherit(n,{begin:"b'",end:"'"
+    }),e.inherit(i,{begin:'b"',end:'"'}),i,n,o]},s={className:"number",variants:[{
+    begin:"\\b0b[01]+(?:_[01]+)*\\b"},{begin:"\\b0o[0-7]+(?:_[0-7]+)*\\b"},{
+    begin:"\\b0x[\\da-f]+(?:_[\\da-f]+)*\\b"},{
+    begin:"(?:\\b\\d+(?:_\\d+)*(\\.(?:\\d+(?:_\\d+)*))?|\\B\\.\\d+)(?:e[+-]?\\d+)?"
+    }],relevance:0},c={
+    keyword:"__CLASS__ __DIR__ __FILE__ __FUNCTION__ __LINE__ __METHOD__ __NAMESPACE__ __TRAIT__ die echo exit include include_once print require require_once array abstract and as binary bool boolean break callable case catch class clone const continue declare default do double else elseif empty enddeclare endfor endforeach endif endswitch endwhile enum eval extends final finally float for foreach from global goto if implements instanceof insteadof int integer interface isset iterable list match|0 mixed new object or private protected public real return string switch throw trait try unset use var void while xor yield",
+    literal:"false null true",
+    built_in:"Error|0 AppendIterator ArgumentCountError ArithmeticError ArrayIterator ArrayObject AssertionError BadFunctionCallException BadMethodCallException CachingIterator CallbackFilterIterator CompileError Countable DirectoryIterator DivisionByZeroError DomainException EmptyIterator ErrorException Exception FilesystemIterator FilterIterator GlobIterator InfiniteIterator InvalidArgumentException IteratorIterator LengthException LimitIterator LogicException MultipleIterator NoRewindIterator OutOfBoundsException OutOfRangeException OuterIterator OverflowException ParentIterator ParseError RangeException RecursiveArrayIterator RecursiveCachingIterator RecursiveCallbackFilterIterator RecursiveDirectoryIterator RecursiveFilterIterator RecursiveIterator RecursiveIteratorIterator RecursiveRegexIterator RecursiveTreeIterator RegexIterator RuntimeException SeekableIterator SplDoublyLinkedList SplFileInfo SplFileObject SplFixedArray SplHeap SplMaxHeap SplMinHeap SplObjectStorage SplObserver SplObserver SplPriorityQueue SplQueue SplStack SplSubject SplSubject SplTempFileObject TypeError UnderflowException UnexpectedValueException UnhandledMatchError ArrayAccess Closure Generator Iterator IteratorAggregate Serializable Stringable Throwable Traversable WeakReference WeakMap Directory __PHP_Incomplete_Class parent php_user_filter self static stdClass"
+    };return{case_insensitive:!0,keywords:c,
+    contains:[e.HASH_COMMENT_MODE,e.COMMENT("//","$",{contains:[t]
+    }),e.COMMENT("/\\*","\\*/",{contains:[{className:"doctag",begin:"@[A-Za-z]+"}]
+    }),e.COMMENT("__halt_compiler.+?;",!1,{endsWithParent:!0,
+    keywords:"__halt_compiler"}),t,{className:"keyword",begin:/\$this\b/},r,{
+    begin:/(::|->)+[a-zA-Z_\x7f-\xff][a-zA-Z0-9_\x7f-\xff]*/},{className:"function",
+    relevance:0,beginKeywords:"fn function",end:/[;{]/,excludeEnd:!0,
+    illegal:"[$%\\[]",contains:[{beginKeywords:"use"},e.UNDERSCORE_TITLE_MODE,{
+    begin:"=>",endsParent:!0},{className:"params",begin:"\\(",end:"\\)",
+    excludeBegin:!0,excludeEnd:!0,keywords:c,
+    contains:["self",r,e.C_BLOCK_COMMENT_MODE,l,s]}]},{className:"class",variants:[{
+    beginKeywords:"enum",illegal:/[($"]/},{beginKeywords:"class interface trait",
+    illegal:/[:($"]/}],relevance:0,end:/\{/,excludeEnd:!0,contains:[{
+    beginKeywords:"extends implements"},e.UNDERSCORE_TITLE_MODE]},{
+    beginKeywords:"namespace",relevance:0,end:";",illegal:/[.']/,
+    contains:[e.UNDERSCORE_TITLE_MODE]},{beginKeywords:"use",relevance:0,end:";",
+    contains:[e.UNDERSCORE_TITLE_MODE]},l,s]}}})());hljs.registerLanguage("php-template",(()=>{"use strict";return n=>({
+    name:"PHP template",subLanguage:"xml",contains:[{begin:/<\?(php|=)?/,end:/\?>/,
+    subLanguage:"php",contains:[{begin:"/\\*",end:"\\*/",skip:!0},{begin:'b"',
+    end:'"',skip:!0},{begin:"b'",end:"'",skip:!0},n.inherit(n.APOS_STRING_MODE,{
+    illegal:null,className:null,contains:null,skip:!0
+    }),n.inherit(n.QUOTE_STRING_MODE,{illegal:null,className:null,contains:null,
+    skip:!0})]}]})})());
diff --git a/script/wcag.js b/script/wcag.js
index c134390927..8193d6ae71 100644
--- a/script/wcag.js
+++ b/script/wcag.js
@@ -4,17 +4,31 @@ function titleToPathFrag (title) {
 	return title.toLowerCase().replace(/[\s,]+/g, "-").replace(/[\(\)]/g, "");
 }
 
+function findHeading(el) {
+	return el.querySelector('h1, h2, h3, h4, h5, h6');
+}
+
+function textNoDescendant(el) {
+	var textContent = "";
+	el.childNodes.forEach(function(node) {
+		if (node.nodeType == 3) textContent += node.textContent;
+	})
+	return textContent;
+}
+
 function linkUnderstanding() {
 	var understandingBaseURI;
 	if (respecConfig.specStatus == "ED") understandingBaseURI = "../../understanding/";
 	else understandingBaseURI = "https://www.w3.org/WAI/WCAG" + version + "/Understanding/";
-	document.querySelectorAll('.sc').forEach(function(node){
-		var heading = node.firstElementChild.textContent;
+	document.querySelectorAll('.sc,.guideline').forEach(function(node){
+		var heading = textNoDescendant(findHeading(node));
 		var pathFrag = titleToPathFrag(heading);
+		if (node.id == "parsing") pathFrag = "parsing"; // special case parsing
 		var el = document.createElement("div");
 		el.setAttribute("class", "doclinks");
 		el.innerHTML = "<a href=\"" + understandingBaseURI + pathFrag + ".html\">Understanding " + heading + "</a> <span class=\"screenreader\">|</span> <br /><a href=\"https://www.w3.org/WAI/WCAG" + version + "/quickref/#" + pathFrag + "\">How to Meet " + heading + "</a>";
-		node.insertBefore(el, node.children[1]);
+		if (node.className = "sc") node.insertBefore(el, node.children[2]);
+		if (node.className = "guideline") node.insertBefore(el, node.children[1]);
 	})
 }
 
@@ -55,33 +69,80 @@ function swapInDefinitions() {
 	}
 }
 
-require(["core/pubsubhub"], function(respecEvents) {
-    "use strict";
-    respecEvents.sub('end', function(message) {
-    	if (message === 'core/link-to-dfn') {
-    		linkUnderstanding();
-    	}
-	})
-})
+function termTitles() {
+	// put definitions into title attributes of term references
+	document.querySelectorAll('.internalDFN').forEach(function(node){
+		var dfn = document.querySelector(node.href.substring(node.href.indexOf('#')));
+		if (dfn.parentNode.nodeName == "DT") node.title = dfn.parentNode.nextElementSibling.firstElementChild.textContent.trim().replace(/\s+/g,' ');
+		else if (dfn.title) node.title=dfn.title;
+	});	
+}
 
-// Change the authors credit to WCAG 2.0 editors credit
-require(["core/pubsubhub"], function(respecEvents) {
-    "use strict";
-    respecEvents.sub('end', function(message) {
-    	if (message === 'core/link-to-dfn') {
-    		document.querySelectorAll("div.head dt").forEach(function(node){
-    			if (node.textContent == "Former editors:") node.textContent = "WCAG 2.0 Editors (until December 2008):";
-    		});
-    	}
-	})
-})
+// number notes if there are multiple per section
+function numberNotes() {
+	var sectionsWithNotes = new Array();
+	document.querySelectorAll(".note").forEach(function(note) {
+		var container = note.closest("dd");
+		if (container == null) container = note.closest("section");
+		sectionsWithNotes.push(container);
+	});
+	
+	sectionsWithNotes.forEach(function(sec) {
+		if (sec.noteprocessed) return;
+		var notes = sec.querySelectorAll('.note');
+		// no notes, shouldn't happen
+		if (notes.length == 0) return;
+		// one note, leave alone
+		if (notes.length == 1) return;
+		// more than one note, number them
+		if (notes.length > 1) {
+			var count = 1;
+			sec.querySelectorAll(".note").forEach(function(note) {
+				var span = note.querySelector(".note-title span");
+				span.textContent = "Note " + count;
+				count++;
+			});
+		}
+		sec.noteprocessed = true;
+	});
+}
 
-// Fix the scroll-to-fragID problem:
-require(["core/pubsubhub"], function (respecEvents) {
-    "use strict";
-    respecEvents.sub("end-all", function () {
-        if(window.location.hash) {
-            window.location = window.location.hash;
-        }
-    });
-});
+// change the numbering of examples to remove number from lone examples in a section, and restart numbering for multiple in each section
+function renumberExamples() {
+	var sectionsWithExamples = new Array();
+	document.querySelectorAll(".example").forEach(function(example) {
+		var container = example.closest("dd"); // use dd container if present
+		if (container == null) container = example.closest("section"); // otherwise section
+		sectionsWithExamples.push(container);
+	});
+	
+	sectionsWithExamples.forEach(function(sec) {
+		if (sec.exprocessed) return;
+		var examples = sec.querySelectorAll(".example");
+		// no examples, shouldn't happen
+		if (examples.length == 0) return;
+		// one example, remove the numbering
+		// more than one example, number them
+		else {
+			var count = 1;
+			var rmOrAdd = examples.length == 1 ? "rm" : "add";
+			sec.querySelectorAll(".example").forEach(function(example) {
+				var marker = example.querySelector(".marker");
+				if (rmOrAdd == "rm") marker.textContent = "Example";
+				else marker.textContent = "Example " + count;
+				count++;
+			});
+		}
+		sec.exprocessed = true;
+	});
+}
+
+// scripts after Respec has run
+function postRespec() {
+	addTextSemantics();
+	swapInDefinitions();
+	termTitles();
+	linkUnderstanding();
+	numberNotes();
+	renumberExamples();
+}
diff --git a/techniques/about.html b/techniques/about.html
new file mode 100644
index 0000000000..eabfa16e17
--- /dev/null
+++ b/techniques/about.html
@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
+
+<head>
+    <meta charset="UTF-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1"/>
+    <title>About WCAG Techniques | WAI | W3C</title>
+    <link rel="stylesheet" href="https://w3.org/WAI/assets/css/style.css"/>
+    <link rel="stylesheet" href="base.css"/>
+</head>
+
+<body dir="ltr">
+      	
+    <div class="default-grid with-gap leftcol">
+        <aside class="box nav-hack sidebar standalone-resource__sidebar ">
+            <nav>
+                <header class="box-h ">Page Contents</header>
+                <div class="box-i">
+                    <ul>
+                      <li><a href="#aboutwcag">About WCAG</a></li>
+                      <li><a href="#introduction">About Techniques</a></li>
+                      <li><a href="#important">Important Additional Information</a></li>
+                      <li><a href="#changelog">Change Log</a></li>
+                      <li><a href="#acknowledgements">Acknowledgements</a></li>
+                    </ul>
+                </div>
+            </nav>
+        </aside>
+        
+        <main id="main" class="main-content standalone-resource__main">
+           <h1>About WCAG Techniques</h1>
+              <aside class="box">
+                <header class="box-h ">Summary</header>
+                <div class="box-i">
+                  <p><em>Techniques</em> are examples of ways to meet Web Content Accessibility Guidelines (WCAG). They are not required to meet WCAG. To start learning about WCAG, see the <a href="https://www.w3.org/WAI/intro/wcag">WCAG Overview</a>. For important information about techniques, see the <a class="understanding" href="../Understanding/understanding-techniques">Understanding Techniques for WCAG Success Criteria</a> section of Understanding WCAG.</p>
+                </div>
+              </aside>
+          <section id="aboutwcag">
+              <h2>About WCAG</h2>
+              <p>Web Content Accessibility Guidelines (WCAG) provides requirements for making websites, applications, and other digital content accessible to people with disabilities. For an introduction to WCAG, supporting technical documents, and educational material, see <a href="https://www.w3.org/WAI/standards-guidelines/wcag/">WCAG 2 Overview</a>.</p>
+
+          <p>There are additional resources that help you understand and implement WCAG. These Techniques are one type of resource. Others are explained in the <a href="https://www.w3.org/WAI/standards-guidelines/wcag/docs/">WCAG 2 Documents</a>.</p>
+          </section>
+          <section id="introduction">
+            <h2>About Techniques</h2>
+              <p>The techniques provide guidance for web content  authors and evaluators on meeting WCAG success criteria. Techniques are examples of ways to meet WCAG.</p>
+              <section id="updated">
+              <h3>Updated periodically</h3>
+              <p>WCAG 2 itself is a stable document that does not change. The techniques for WCAG are updated periodically to cover more current best practices and changes in technologies and tools.</p>
+              </section>
+              <section id="not-required">
+              <h3>Techniques are not required</h3>
+              <p>Techniques are informative—that means they are not required. The basis for determining conformance to WCAG 2 is the success criteria from the WCAG 2 standard—not the techniques.</p>
+              <div class="note">
+                <p>W3C cautions against requiring W3C's sufficient techniques. The only thing that should be required is meeting the WCAG 2 success criteria. To learn more, see: <a href="https://www.w3.org/WAI/standards-guidelines/wcag/faq/#techsnot">What would be the negative consequences of allowing <em>only</em> W3C's published techniques to be used for conformance to WCAG 2?</a> in the WCAG 2 FAQ</p>
+              </div>
+          	</section>
+              <section id="quickref">
+              <h3>WCAG Quick Reference</h3>
+              <p><em>Techniques for WCAG 2</em> is not intended to be used as a stand-alone document. Instead, it is expected that content authors will usually use <a href="../quickref/">How to Meet WCAG 2: A customizable quick reference</a> to read the WCAG success criteria, and follow links from there to specific topics in Understanding WCAG 2 and to specific techniques.</p>
+              </section>
+              <section id="specifictech">
+          	<h3>Techniques for specific technologies</h3>
+              <p>Publication of techniques for a specific technology does not imply that the technology can be used in all situations to create content that meets WCAG 2 success criteria and conformance requirements. Developers need to be aware of the limitations of specific technologies and provide content in a way that is accessible to people with disabilities. </p>
+              </section>
+            </section>
+            <section id="important">
+          	  <h2>Important Additional Information</h2>
+              <p><strong>For important information about techniques, please see the <a class="understanding" href="../Understanding/understanding-techniques">Understanding Techniques for WCAG Success Criteria</a> section of Understanding WCAG 2.</strong></p>
+            </section>
+            <section id="changelog">
+                <h2>Change Log</h2>
+                <p>For a detailed view of recent changes to the informative documents see the <a href="https://github.com/w3c/wcag/commits/">GitHub updates</a>.</p>
+            </section>
+
+        	<section id="acknowledgements">
+        		<details>
+	        		<summary><h2>Acknowledgements</h2></summary>
+	        		<div data-include="../acknowledgements/ag-wg-active.html" data-include-replace="true"></div>
+	        		<div data-include="../acknowledgements/ag-contributors.html" data-include-replace="true"></div>
+	        		<div data-include="../acknowledgements/funders.html" data-include-replace="true"></div>
+        		</details>
+        	</section>
+        	
+        </main>
+        <a class="button button-backtotop" href="#top"><span><svg focusable="false" aria-hidden="true" class="icon-arrow-up " viewBox="0 0 26 28">
+            <path d="M25.172 15.172c0 0.531-0.219 1.031-0.578 1.406l-1.172 1.172c-0.375 0.375-0.891 0.594-1.422 0.594s-1.047-0.219-1.406-0.594l-4.594-4.578v11c0 1.125-0.938 1.828-2 1.828h-2c-1.062 0-2-0.703-2-1.828v-11l-4.594 4.578c-0.359 0.375-0.875 0.594-1.406 0.594s-1.047-0.219-1.406-0.594l-1.172-1.172c-0.375-0.375-0.594-0.875-0.594-1.406s0.219-1.047 0.594-1.422l10.172-10.172c0.359-0.375 0.875-0.578 1.406-0.578s1.047 0.203 1.422 0.578l10.172 10.172c0.359 0.375 0.578 0.891 0.578 1.422z"></path></svg> Back to Top
+        </span></a>
+    </div>
+    <script>
+				var translationStrings = {}; /* fix WAI JS */
+			</script>
+    <script src="https://www.w3.org/WAI/assets/scripts/main.js"></script></body>
+
+</html>
\ No newline at end of file
diff --git a/techniques/aria/ARIA1.html b/techniques/aria/ARIA1.html
index 0efce9dc7c..3474744eb9 100644
--- a/techniques/aria/ARIA1.html
+++ b/techniques/aria/ARIA1.html
@@ -1,244 +1,104 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using the aria-describedby property to provide a descriptive label for user interface controls</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Using the aria-describedby property to provide a descriptive label for user interface controls</h1><section class="meta"><p class="id">ID: ARIA1</p><p class="technology">Technology: aria</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
-      <p>Technologies that support <a href="https://www.w3.org/TR/wai-aria/">Accessible Rich Internet Applications (WAI-ARIA)</a>. </p>
-   </section><section id="description"><h2>Description</h2>
-      <p>The purpose of this technique is to demonstrate how to use the WAI-ARIA <a href="https://www.w3.org/TR/wai-aria/states_and_properties#aria-describedby">aria-describedby</a> property to provide programmatically determined, descriptive information about a user interface element. The <code class="att">aria-describedby</code> property may be used to attach descriptive information to one or more elements through the use of an id reference list. The id reference list contains one or more unique element ids. </p>
-      <p>Refer to <a href="https://www.w3.org/TR/wai-aria-primer/#ariahtml">Supporting ARIA in XHTML and HTML 4.01</a> for information on how to provide WAI-ARIA States and Properties with XHTML and HTML. WAI-ARIA States and Properties is compatible with other languages as well; refer to documentation in those languages. </p>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+   <head>
+      <title>Using the aria-describedby property to provide a descriptive label for user interface controls</title>
+      <link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+   </head>
+   <body>
+      <h1>Using the <code class="language-html">aria-describedby</code> property to provide a descriptive label for user interface controls</h1>
+      <section class="meta">
+         <p class="id">ID: ARIA1</p>
+         <p class="technology">Technology: aria</p>
+         <p class="type">Type: Technique</p>
+      </section>
+      <section id="applicability">
+         <h2>When to Use</h2>
+      <p>Technologies that support <a href="https://www.w3.org/TR/wai-aria/">Accessible Rich Internet Applications (WAI-ARIA)</a>.</p>
+   </section>
+   <section id="description">
+      <h2>Description</h2>
+      <p>The purpose of this technique is to demonstrate how to use the WAI-ARIA <a href="https://www.w3.org/TR/wai-aria-1.2/#aria-describedby"><code class="language-html">aria-describedby</code></a> property to provide programmatically determined, descriptive information about a user interface element. The <code class="language-html">aria-describedby</code> property may be used to attach descriptive information to one or more elements through the use of an <code class="language-html">id</code> reference list. The <code class="language-html">id</code> reference list contains one or more unique element <code class="language-html">id</code>s.</p>
+      <p>Refer to <a href="https://www.w3.org/TR/html-aria/">ARIA in HTML</a> for information on how to provide WAI-ARIA States and Properties with HTML. WAI-ARIA States and Properties are compatible with other languages as well; refer to documentation in those languages.</p>
       <div class="note">
-         <p>The <code class="att">aria-describedby</code> property is not designed to reference descriptions on an external resource — since it is an ID, it must reference an element in the same DOM document.</p>
+         <p>The <code class="language-html">aria-describedby</code> property is not designed to reference descriptions on an external resource - since it is an <code class="language-html">id</code>, it must reference an element in the same <abbr title="Document Object Model">DOM</abbr> document.</p>
       </div>
-   </section><section id="examples"><h2>Examples</h2>
-      <section class="example">
-         <h3>Using aria-describedby property to describe a Close button's action</h3>
-         
-            <p>A button that functions as a 'close' button on a dialog is described elsewhere in the document. The <code class="att">aria-describedby</code> property is used to associate the description with the button.</p>
-            <pre xml:space="preserve">&lt;button aria-label="Close" aria-describedby="descriptionClose"
-    onclick="myDialog.close()"&gt;X&lt;/button&gt;
-
-...
-
-&lt;div id="descriptionClose"&gt;Closing this window will discard any information entered and
-return you back to the main page&lt;/div&gt;
-</pre>
-            <p class="working-example">Working example: <a href="../../working-examples/aria-describedby-close/">Example 1</a>
-            </p>
-         
-      </section>
+   </section>
+   <section id="examples">
+      <h2>Examples</h2>
       <section class="example">
-         <h3>Using aria-describedby to associate instructions with form fields</h3>
+         <h3>Using <code class="language-html">aria-describedby</code> to associate instructions with form fields</h3>
          
-            <p>Sample form field using <code class="att">aria-describedby</code> to associate instructions with form fields while there is a form label.</p>
-            <pre xml:space="preserve">&lt;form&gt;
-&lt;label for="fname"&gt;First name&lt;/label&gt;
-&lt;input name="" type="text" id="fname" aria-describedby="int2"&gt;
-&lt;p id="int2"&gt;A bit of instructions for this field linked with aria-describedby. &lt;/p&gt;
-&lt;/form&gt;
-</pre>
+            <p>Sample form field using <code class="language-html">aria-describedby</code> to associate instructions with form fields while there is a form label.</p>
+<pre xml:space="preserve"><code class="language-html">&lt;form&gt;
+  &lt;label for="fname"&gt;First name&lt;/label&gt;
+  &lt;input aria-describedby="int2" autocomplete="given-name" id="fname" type="text"&gt;
+  &lt;p id="int2"&gt;Your first name is sometimes called your "given name".&lt;/p&gt;
+&lt;/form&gt;</code></pre>
          
       </section>
       <section class="example">
-         <h3>Using aria-describedby property to provide more detailed information about the button</h3>
+         <h3>Using <code class="language-html">aria-describedby</code> property to provide more detailed information about the button</h3>
          
-            <pre xml:space="preserve">&lt;p&gt;&lt;span id="fontDesc"&gt;Select the font faces and sizes to be used on this page&lt;/span&gt;
- &lt;button id="fontB" onclick="doAction('Fonts');" aria-describedby="fontDesc"&gt;Fonts&lt;/button&gt;
-&lt;/p&gt;
-&lt;p&gt;&lt;span id="colorDesc"&gt;Select the colors to be used on this page&lt;/span&gt;
- &lt;button id="colorB" onclick="doAction('Colors');" aria-describedby="colorDesc"&gt;Colors&lt;/button&gt;
-&lt;/p&gt;
-&lt;p&gt;&lt;span id="customDesc"&gt;Customize the layout and styles used on this page&lt;/span&gt;
- &lt;button id="customB" onclick="doAction('Customize');" aria-describedby="customDesc"&gt;Customize&lt;/button&gt;
-&lt;/p&gt;
-</pre>
-         
-      </section>
-      <section class="example">
-         <h3>Using aria-describedby to associate tooltips with form fields</h3>
-         
-            <p>The following code snippet  shows how to use <code class="att">aria-describedby</code> and the onfocus="tooltipShow() function to display the tooltip when focus is placed on an element.</p>
-            <pre xml:space="preserve">&lt;html lang="en-us"&gt;
-&lt;head&gt;
-   &lt;title&gt;inline: Tooltip Example 1&lt;/title&gt;
-   &lt;link rel="stylesheet" href="css/tooltip1_inline.css" type="text/css"&gt;
-   &lt;script type="text/javascript" src="js/tooltip1_inline.js"&gt;&lt;/script&gt;
-   &lt;script type="text/javascript" src="../js/widgets_inline.js"&gt;&lt;/script&gt;
-   &lt;script type="text/javascript" src="../js/globals.js"&gt;&lt;/script&gt;
-   &lt;link rel="icon" href="http://www.cites.uiuc.edu/favicon.ico" type="image/x-icon"&gt;
-   &lt;link rel="shortcut icon" href="http://www.cites.uiuc.edu/favicon.ico" type="image/x-icon"&gt;
-&lt;/head&gt;
-   ...
-
-&lt;body onload="initApp()"&gt;
-
-&lt;div id="container"&gt;
-
-&lt;h1&gt;Tooltip Example 1&lt;/h1&gt;
-&lt;h2&gt;Create Account&lt;/h2&gt;
-&lt;div class="text"&gt;
-&lt;label for="first"&gt;First Name:&lt;/label&gt;
-
-&lt;input type="text" id="first" name="first" size="20"
-      onmouseover="tooltipShow(event, this, 'tp1');"
-      onfocus="tooltipShow(event, this, 'tp1');"
-      aria-describedby="tp1"
-      aria-required="false"/&gt;
-
-&lt;div id="tp1" role="tooltip" aria-hidden="true"&gt;Your first name is optional. &lt;/div&gt;
+<pre xml:space="preserve"><code class="language-html">&lt;div&gt;
+  &lt;span id="fontDesc"&gt;Select the font faces and sizes to be used on this page&lt;/span&gt;
+  &lt;button aria-describedby="fontDesc" id="fontB" type="button"&gt;Fonts&lt;/button&gt;
 &lt;/div&gt;
-</pre>
-         
-      </section>
-      <section class="example">
-         <h3>XHTML</h3>
-         
-            <p>This example is coded in XHTML with a MIME type of application/xhtml+xml. This MIME type is not supported in all user agents. The aria-describedby property is added directly into the XHTML markup, and no additional scripting is needed. </p>
-         
-         <pre xml:space="preserve">&lt;?xml version="1.0" encoding="UTF-8"?&gt;
-&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+ARIA 1.0//EN"
-"https://www.w3.org/WAI/ARIA/schemata/xhtml-aria-1.dtd"&gt;
-&lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"&gt;
-&lt;head&gt;
-&lt;meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" /&gt;
-&lt;title&gt;Demonstration of aria-describedby property&lt;/title&gt;
-&lt;style type="text/css"&gt;
-div.form p { clear:left; margin: 0.3em 0;}
-.left {
-  float:left;
-  width:400px;
-}
-.right {
-  width:100px;
-  text-align:right;
-}
-&lt;/style&gt;
-&lt;/head&gt;
-&lt;body&gt;
-&lt;p&gt;The buttons on this page use the Accessible Rich Internet Applications aria-describedby property
-to provide more detailed information about the button action&lt;/p&gt;
-&lt;div class="form"&gt;
-&lt;p&gt;&lt;span class="left" id="fontDesc" &gt;Select the font faces and sizes to be used on this page&lt;/span&gt;
-&lt;span class="right"&gt;&lt;button id="fontB" onclick="doAction('Fonts');" aria-describedby="fontDesc"&gt;
-Fonts &lt;/button&gt;&lt;/span&gt;&lt;/p&gt;
-&lt;p&gt;&lt;span class="left" id="colorDesc" &gt;Select the colors to be used on this page&lt;/span&gt;
-&lt;span class="right"&gt;&lt;button id="colorB" onclick="doAction('Colors');" aria-describedby="colorDesc"&gt;
-Colors &lt;/button&gt;&lt;/span&gt;&lt;/p&gt;
-&lt;p&gt;&lt;span class="left" id="customDesc" &gt;Customize the layout and styles used on this page&lt;/span&gt;
-&lt;span class="right"&gt;&lt;button id="customB" onclick="doAction('Customize');" aria-describedby="customDesc"&gt;
-Customize &lt;/button&gt;&lt;/span&gt;&lt;/p&gt;
+&lt;div&gt;
+  &lt;span id="colorDesc"&gt;Select the colors to be used on this page&lt;/span&gt;
+  &lt;button aria-describedby="colorDesc" id="colorB" type="button"&gt;Colors&lt;/button&gt;
 &lt;/div&gt;
-&lt;/body&gt;
-&lt;/html&gt;
-</pre>
-      </section>
-      <section class="example">
-         <h3>HTML</h3>
-         
-            <p>This example uses scripting to add an aria-describedby property to buttons on a page. The example creates a buttonIds array variable to hold the ids of the elements that contain description text. The setDescribedBy() function is called from the onload event of the window object. </p>
-            <p>The setDescribedBy() function loops through all of the button elements and calls setAttribute() on each button element to set the aria-describedby property. Each button's aria-describedby property is set to the id of the element containing its descriptive text. </p>
-            <p>Using a user agent and/or assistive technology which supports WAI-ARIA, the description will be provided when the user interface controls receive focus. </p>
+&lt;div&gt;
+  &lt;span id="customDesc"&gt;Customize the layout and styles used on this page&lt;/span&gt;
+  &lt;button aria-describedby="customDesc" id="customB" type="button"&gt;Customize&lt;/button&gt;
+&lt;/div&gt;</code></pre>
          
-         <pre xml:space="preserve">&lt;html lang="en-us"&gt;
-&lt;head&gt;
-&lt;meta http-equiv="content-type" content="text/html; charset=utf-8" /&gt;
-&lt;title&gt;Demonstration of aria-describedby property&lt;/title&gt;
-&lt;style type="text/css"&gt;
-div.form p { clear:left; margin: 0.3em 0;}
-.left {
-  float:left;
-  width:400px;
-}
-.right {
-  width:100px;
-  text-align:right;
-}
-&lt;/style&gt;
-&lt;script type="text/javascript"&gt;
-//&lt;![CDATA[
-
-// array entries for each button on the page that associates the button id
-// with the id of the element containing the text which describes the button
-var buttonIds = new Array();
-buttonIds["fontB"]= "fontDesc";
-buttonIds["colorB"] = "colorDesc";
-buttonIds["customB"] = "customDesc";
-
-// function that is run after the page has loaded to set the aria-describedBy
-// property on each of the elements referenced by the array of id values
-function setDescribedBy(){
-  if (buttonIds){
-    var buttons = document.getElementsByTagName("button");
-    if (buttons){
-      var buttonId;
-      for(var i=0; i&lt;buttons.length; i++){
-        buttonId = buttons[i].id;
-        if (buttonId &amp;&amp; buttonIds[buttonId]){
-          buttons[i].setAttribute("aria-describedby", buttonIds[buttonId]);
-        }
-      }
-    }
-  }
-}
-
-// simulated action function - currently just displays an alert
-function doAction(theAction){
-  alert("Perform the " + theAction + " action");
-}
-
-window.onload=setDescribedBy;
-
-//]]&gt;
-&lt;/script&gt;
-&lt;/head&gt;
-&lt;body&gt;
-&lt;p&gt;The buttons on this page use the Accessible Rich Internet Applications
-aria-describedby property to provide more detailed information
-about the button action.
-&lt;/p&gt;
-&lt;div class="form"&gt;
-&lt;p&gt;&lt;span class="left" id="fontDesc" &gt;Select the font faces and sizes to be used on this page&lt;/span&gt;
-  &lt;span class="right"&gt;&lt;button id="fontB" onclick="doAction('Fonts');"&gt; Fonts &lt;/button&gt;&lt;/span&gt;
-&lt;/p&gt;
-&lt;p&gt;&lt;span class="left" id="colorDesc" &gt;Select the colors to be used on this page&lt;/span&gt;
-  &lt;span class="right"&gt;&lt;button id="colorB" onclick="doAction('Colors');"&gt; Colors &lt;/button&gt;&lt;/span&gt;
-&lt;/p&gt;
-&lt;p&gt;&lt;span class="left" id="customDesc" &gt;Customize the layout and styles used on this page&lt;/span&gt;
-  &lt;span class="right"&gt;&lt;button id="customB" onclick="doAction('Customize');"&gt; Customize &lt;/button&gt;&lt;/span&gt;
-&lt;/p&gt;
-&lt;/div&gt;
-&lt;/body&gt;
-</pre>
       </section>
-   </section><section id="tests"><h2>Tests</h2>
-      <section class="procedure"><h3>Procedure</h3>
+ 
+   </section>
+   <section id="tests">
+      <h2>Tests</h2>
+      <section class="procedure">
+         <h3>Procedure</h3>
          <ol>
-            <li>Check that there is a user interface control having an <code class="att">aria-describedby</code> attribute that references one or more elements via unique id.</li>
+            <li>Check that there is a user interface control having an <code class="language-html">aria-describedby</code> attribute that references one or more elements via unique <code class="language-html">id</code>.</li>
             <li>Check that the referenced element or elements provide additional information about the user interface control.</li>
          </ol>
       </section>
-      <section class="results"><h3>Expected Results</h3>
+      <section class="results">
+         <h3>Expected Results</h3>
          <ul>
-            <li>Checks #1 and #2 are true. </li>
+            <li>Checks #1 and #2 are true.</li>
          </ul>
       </section>
-   </section><section id="related"><h2>Related Techniques</h2><ul>
-      <li><a href="../aria/ARIA2">ARIA2</a></li>
-      <li><a href="../aria/ARIA7">ARIA7</a></li>
-   </ul></section><section id="resources"><h2>Resources</h2>
-      
+   </section>
+   <section id="related">
+      <h2>Related Techniques</h2>
+      <ul>
+         <li><a href="../aria/ARIA2">ARIA2</a></li>
+         <li><a href="../aria/ARIA7">ARIA7</a></li>
+     </ul>
+   </section>
+   <section id="resources">
+      <h2>Resources</h2>
          <ul>
             <li>
-                  <a href="https://www.w3.org/WAI/intro/aria">WAI-ARIA Overview</a>
-               </li>
+              <a href="https://www.w3.org/WAI/standards-guidelines/aria/">WAI-ARIA Overview</a>.
+            </li>
+            <li>
+              <a href="https://www.w3.org/WAI/ARIA/apg/">WAI-ARIA Authoring Practices Guide</a>.
+            </li>
             <li>
-                  <a href="https://www.w3.org/TR/wai-aria-practices/">WAI-ARIA Authoring Practices 1.1</a>
-               </li>
+               <a href="https://www.w3.org/TR/html-aam/">HTML Accessibility API Mappings</a>
+             </li>
             <li>
-                  <a href="https://www.w3.org/TR/html-aapi/#accessible-name-and-description-calculation">HTML to Platform Accessibility APIs Implementation Guide: Accessible Name and Description Calculation</a>
-               </li>
+              <a href="https://www.w3.org/TR/accname/">Accessible Name and Description Computation</a>.
+            </li>
             <li>
-                  <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute">Using the aria-describedby attribute (MDN)</a>
-               </li>
+              <a href="https://developer.mozilla.org/en-US/docs/web/accessibility/aria/attributes/aria-describedby"><code class="language-html">aria-describedby</code> attribute (<abbr title="Mozilla Developer Network">MDN</abbr>)</a>.
+            </li>
             <li>
-                  <a href="https://www.w3.org/TR/aria-in-html/">Using WAI-ARIA in HTML</a>
-               </li>
+              <a href="https://www.w3.org/TR/aria-in-html/">Using WAI-ARIA in HTML</a>.
+            </li>
          </ul>
-      
-   </section></body></html>
\ No newline at end of file
+   </section>
+</body>
+</html>
\ No newline at end of file
diff --git a/techniques/aria/ARIA10.html b/techniques/aria/ARIA10.html
index 583121c648..6129994571 100644
--- a/techniques/aria/ARIA10.html
+++ b/techniques/aria/ARIA10.html
@@ -1,21 +1,20 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using aria-labelledby to provide a text alternative for non-text content</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Using aria-labelledby to provide a text alternative for non-text content</h1><section class="meta"><p class="id">ID: ARIA10</p><p class="technology">Technology: aria</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using aria-labelledby to provide a text alternative for non-text content</title><link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/></head><body><h1>Using aria-labelledby to provide a text alternative for non-text content</h1><section class="meta"><p class="id">ID: ARIA10</p><p class="technology">Technology: aria</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
       <p>This technique applies to HTML with <a href="https://www.w3.org/TR/wai-aria/">Accessible Rich Internet Applications (WAI-ARIA)</a>.</p>
    </section><section id="description"><h2>Description</h2>
-      <p>The purpose of this technique is to provide a short description for an element that can be read by assistive technologies (AT) by using the <code class="att">aria-labelledby</code> attribute. The <code class="att">aria-labelledby</code> attribute associates an element with text that is visible elsewhere on the page by using an ID reference value that matches the ID attribute of the labeling element. Assistive technology such as screen readers use the text of the element identified by the value of the <code class="att">aria-labelledby</code> attribute as the text alternative for the element with the attribute.</p>
+      <p>The purpose of this technique is to provide a short description for an element that can be read by assistive technologies by using the <code class="language-html">aria-labelledby</code> attribute. The <code class="language-html">aria-labelledby</code> attribute associates an element with text that is visible elsewhere on the page by using an <code class="language-html">id</code> reference value that matches the <code class="language-html">id</code> attribute of the labeling element. Assistive technology such as screen readers use the text of the element identified by the value of the <code class="language-html">aria-labelledby</code> attribute as the text alternative for the element with the attribute.</p>
    </section><section id="examples"><h2>Examples</h2>
       <section class="example">
          <h3>Providing a short description for a complex graphic</h3>
          
-            <p>This example shows how to use the <code class="att">aria-labelledby</code> attribute to provide a short text description for a read-only complex graphic of an star rating pattern; the graphic is composed of several image elements. The text alternative for the graphic is the label, visible on the page beneath the star pattern.</p>
-            <pre xml:space="preserve">&lt;div role="img" aria-labelledby="star_id"&gt;
-&lt;img src="fullstar.png" alt=""/&gt;
-&lt;img src="fullstar.png" alt=""/&gt;
-&lt;img src="fullstar.png" alt=""/&gt;
-&lt;img src="fullstar.png" alt=""/&gt;
-&lt;img src="emptystar.png" alt=""/&gt;
+            <p>This example shows how to use the <code class="language-html">aria-labelledby</code> attribute to provide a short text description for a read-only complex graphic of an star rating pattern; the graphic is composed of several image elements. The text alternative for the graphic is the label, visible on the page beneath the star pattern.</p>
+<pre xml:space="preserve"><code class="language-html">&lt;div role="img" aria-labelledby="star-id"&gt;
+  &lt;img src="fullstar.png" alt=""&gt;
+  &lt;img src="fullstar.png" alt=""&gt;
+  &lt;img src="fullstar.png" alt=""&gt;
+  &lt;img src="fullstar.png" alt=""&gt;
+  &lt;img src="emptystar.png" alt=""&gt;
 &lt;/div&gt;
-
-&lt;div id="star_id"&gt;4 of 5&lt;/div&gt;</pre>
+&lt;div id="star-id"&gt;4 of 5&lt;/div&gt;</code></pre>
             <p class="working-example">Working example: <a href="../../working-examples/aria-labelledby-description-complex-graphic/">Providing a short description for a complex graphic</a>.
 </p>
          
@@ -23,9 +22,9 @@ <h3>Providing a short description for a complex graphic</h3>
    </section><section id="tests"><h2>Tests</h2>
       <section class="procedure"><h3>Procedure</h3>
          <ol>
-            <li>Examine each element where the <code class="att">aria-labelledby</code> attribute is present and the element does not support the <code class="att">alt</code> attribute.</li>
-            <li>Check whether the value of the <code class="att">aria-labelledby</code> attribute is the id of an element on the web page.</li>
-            <li>Determine that the text of the element identified by the <code class="att">aria-labelledby</code> attribute accurately labels the element, provides a description of its purpose, or provides equivalent information.</li>
+            <li>Examine each element where the <code class="language-html">aria-labelledby</code> attribute is present and the element does not support the <code class="language-html">alt</code> attribute.</li>
+            <li>Check whether the value of the <code class="language-html">aria-labelledby</code> attribute is the <code class="language-html">id</code> of an element on the web page.</li>
+            <li>Determine that the text of the element identified by the <code class="language-html">aria-labelledby</code> attribute accurately labels the element, provides a description of its purpose, or provides equivalent information.</li>
          </ol>
       </section>
       <section class="results"><h3>Expected Results</h3>
@@ -40,14 +39,15 @@ <h3>Providing a short description for a complex graphic</h3>
       
          <ul>
             <li>
-                  <a href="https://www.w3.org/TR/wai-aria-practices/">WAI-ARIA Authoring Practices 1.1</a> 
+                  <a href="https://www.w3.org/WAI/ARIA/apg/">WAI-ARIA Authoring Practices Guide</a> 
                </li>
             <li> 
-                  <a href="https://www.w3.org/TR/html-aapi/#accessible-name-and-description-calculation">HTML to Platform Accessibility APIs Implementation Guide: Accessible Name and Description Calculation</a>
+               <a href="https://www.w3.org/TR/html-aam/">HTML Accessibility API Mappings</a>
                </li>
             <li> 
                   <a href="https://www.w3.org/TR/accname/">Accessible Name and Description Computation</a>
                </li>
          </ul>
       
-   </section></body></html>
\ No newline at end of file
+   </section>
+</body></html>
\ No newline at end of file
diff --git a/techniques/aria/ARIA11.html b/techniques/aria/ARIA11.html
index 685c45494a..40194469f6 100644
--- a/techniques/aria/ARIA11.html
+++ b/techniques/aria/ARIA11.html
@@ -1,120 +1,154 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using ARIA landmarks to identify regions of a page</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Using ARIA landmarks to identify regions of a page</h1><section class="meta"><p class="id">ID: ARIA11</p><p class="technology">Technology: aria</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+   <head>
+      <title>Using ARIA landmarks to identify regions of a page</title>
+      <link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+   </head>
+   <body>
+      <h1>Using ARIA landmarks to identify regions of a page</h1>
+      <section class="meta">
+         <p class="id">ID: ARIA11</p>
+         <p class="technology">Technology: aria</p>
+         <p class="type">Type: Technique</p>
+      </section>
+      <section id="applicability"><h2>When to Use</h2>
       <p>Technologies that support <a href="https://www.w3.org/TR/wai-aria/">Accessible Rich Internet Applications (WAI-ARIA)</a>. </p>
-   </section><section id="description"><h2>Description</h2>
-      <p>The purpose of this technique is to provide programmatic access to sections of a web page.  Landmark roles (or "landmarks") programmatically identify sections of a page. Landmarks help assistive technology (AT) users orient themselves to a page and help them navigate easily to various sections of a page. 
-</p>
+   </section>
+   <section id="description"><h2>Description</h2>
+      <p>The purpose of this technique is to provide programmatic access to sections of a web page.  Landmark roles (or "landmarks") programmatically identify sections of a page. Landmarks help assistive technology (AT) users orient themselves to a page and help them navigate easily to various sections of a page.</p>
       <p>They also provide an easy way for users of assistive technology to skip over blocks of content that are repeated on multiple pages and notify them of programmatic structure of a page. For instance, if there is a common navigation menu found on every page, landmark roles (or "landmarks") can be used to skip over it and navigate from section to section. This will save assistive technology users and keyboard users the trouble and time of tabbing through a large amount of content to find what they are really after, much like a traditional "skip links" mechanism. (Refer to User Agent Notes above for specifics of AT support). A blind user who may be familiar with a news site's menu, and is only interested in getting to the top story could easily navigate to the "main" landmark, and bypass dozens of menu links. In another circumstance, a user who is blind may want to quickly find a navigation menu, and can do so by jumping to the navigation landmark. 
 </p>
-      <p>Landmarks also can help sighted keyboard-only users navigate to sections of a page using a <a href="https://www.paciellogroup.com/blog/2013/07/enabling-landmark-based-keyboard-navigation-in-firefox/">browser plugin</a>. 
-</p>
-      <p>Landmarks are inserted into the page using the role attribute on an element that marks the section. The value of the attribute is the name of the landmark. These role values are listed below:
+      <p>Landmarks also can help sighted keyboard-only users navigate to sections of a page using a <a href="https://www.tpgi.com/improving-access-to-landmark-navigation/">browser plugin</a>. 
 </p>
+      <p>Landmarks are inserted into the page using the role attribute on an element that marks the section. The value of the attribute is the name of the landmark. These role values are listed below:</p>
       <ul>
-         <li>banner: A region that contains the prime heading or internal title of a page.
-</li>
-         <li>complementary: Any section of the document that supports the main content, yet is separate and meaningful on its own.
-</li>
-         <li>contentinfo:  A region that contains information about the parent document such as copyrights and links to privacy statements.
-</li>
-         <li>form: A region of the document that represents a collection of form-associated elements, some of which can represent editable values that can be submitted to a server for processing.
-</li>
-         <li>main: Main content in a document. In almost all cases a page will have only one role="main".
-</li>
-         <li>navigation: A collection of links suitable for use when navigating the document or related documents.
-</li>
-         <li>search: The search tool of a Web document.
-</li>
+         <li><code class="language-html">banner</code>: A region that contains the prime heading or internal title of a page.</li>
+         <li><code class="language-html">navigation</code>: A region that contains navigation links links to other pages or different parts of the same page.</li>
+         <li><code class="language-html">main</code>: A region that contains a page's main content.</li>
+         <li><code class="language-html">region</code>: A region that contains a perceivable section of the page containing content that is sufficiently important for users to be able to navigate to the section. A <code class="language-html">region</code> landmark isn't exposed as a landmark region unless it has an accessible name.</li>
+         <li><code class="language-html">form</code>: A region of the document that represents a collection of form-associated elements, some of which can represent editable values that can be submitted to a server for processing.</li>
+         <li><code class="language-html">search</code>: A region of the page containing search functionality.</li>
+         <li><code class="language-html">complementary</code>: Any section of the document that supports the main content, yet is separate and meaningful on its own.</li>
+         <li><code class="language-html">contentinfo</code>: A region that contains information about the parent document such as copyrights and links to privacy statements.</li>
       </ul>
-      <p>There are cases when a particular landmark role could be used more than once on a page, such as on primary and secondary navigation menus. In these cases, identical roles should be disambiguated from each other using a valid technique for labelling regions (see examples below).
-</p>
-      <p>Landmarks should supplement native semantic markup such as HTML headings, lists and other structural markup. Landmarks are interpretable by WAI-ARIA-aware assistive technologies and are not exposed by browsers directly to users.
-</p>
-      <p>It is a best practice to include ALL content on the page in landmarks, so that screen reader users who rely on them to navigate from section to section do not lose track of content.
-</p>
+
+      <p>There are cases when a particular landmark role could be used more than once on a page, such as on primary and secondary blocks of navigation. In these cases, identical roles should be labeled using a valid technique for labelling regions.</p>
+
+      <p>Landmarks should supplement native semantic markup such as HTML headings, lists and other structural markup. Landmarks are interpretable by WAI-ARIA-aware assistive technologies and are not exposed by browsers directly to users.</p>
+
+      <p>It is a best practice to include all content on the page in landmarks, so that screen reader users who rely on them to navigate from section to section do not lose track of content.</p>
+
    </section><section id="examples"><h2>Examples</h2>
-      <section class="example">
-         <h3>Simple landmarks</h3>
+   <section class="example" id="simple-identical-landmarks">
+      <h3>Simple landmarks</h3>
          
-            <p>The following example shows how landmarks might be added to an HTML4 or XHTML 1.0 document:</p>
-            <pre xml:space="preserve">&lt;div id="header" role="banner"&gt;A banner image and introductory title&lt;/div&gt;
-&lt;div id="sitelookup" role="search"&gt;....&lt;/div&gt;
-&lt;div id="nav" role="navigation"&gt;...a list of links here ... &lt;/div&gt;
-&lt;div id="content" role="main"&gt; ... Ottawa is the capital of Canada ...&lt;/div&gt;
-&lt;div id="rightsideadvert" role="complementary"&gt;....an advertisement here...&lt;/div&gt;
-&lt;div id="footer" role="contentinfo"&gt;(c)The Freedom Company, 123 Freedom Way, Helpville, USA&lt;/div&gt;</pre>
-         
-      </section>
-      <section class="example">
-         <h3>Multiple landmarks of the same type and aria-labelledby</h3>
-         
-            <p>The following example shows a best practice of how landmarks might be added to an HTML4 or XHTML 1.0 document in situations where there are more than two of the same type of landmark on the same page. For instance, if a navigation role is used multiple times on a Web page, each instance may have a unique label specified using <code class="att">aria-labelledby</code>:
+      <p>The following example shows how landmarks might be added to an HTML document:</p>
+            <pre xml:space="preserve"><code class="language-html">&lt;div role="banner"&gt;site logo and name, etc. here&lt;/div&gt;
+&lt;div role="search"&gt;search functionality here&lt;/div&gt;
+&lt;div role="navigation"&gt;a list of navigation links here&lt;/div&gt;
+&lt;div role="form"&gt;a sign-up form here&lt;/div&gt;
+&lt;div role="main"&gt;the page's main content here&lt;/div&gt;
+&lt;div role="region"&gt;a sponsor's promotion here&lt;/div&gt;
+&lt;div role="complementary"&gt;sidebar content here&lt;/div&gt;
+&lt;div role="contentinfo"&gt; site contact details, copyright information, etc. here &lt;/div&gt;</code></pre>
 
-</p>
-            <pre xml:space="preserve">&lt;div id="leftnav" role="navigation" aria-labelledby="leftnavheading"&gt;
-&lt;h2 id="leftnavheading"&gt;Institutional Links&lt;/h2&gt;
-&lt;ul&gt;&lt;li&gt;...a list of links here ...&lt;/li&gt; &lt;/ul&gt;&lt;/div&gt;
-&lt;div id="rightnav" role="navigation" aria-labelledby="rightnavheading"&gt;
-&lt;h2 id="rightnavheading"&gt;Related topics&lt;/h2&gt;
-&lt;ul&gt;&lt;li&gt;...a list of links here ...&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;</pre>
-         
-      </section>
-      <section class="example">
-         <h3>Multiple landmarks of the same type and aria-label</h3>
-         
-            <p>The following example shows a best practice of how landmarks might be added to an HTML4 or XHTML 1.0 document in situations where there are more than two of the same type of landmark on the same page, and there is no existing text on the page that can be referenced as the label.</p>
-            <pre xml:space="preserve">&lt;div id="leftnav" role="navigation" aria-label="Primary"&gt;
-&lt;ul&gt;&lt;li&gt;...a list of links here ...&lt;/li&gt;&lt;/ul&gt; &lt;/div&gt;
-&lt;div id="rightnav" role="navigation" aria-label="Secondary"&gt;
-&lt;ul&gt;&lt;li&gt;...a list of links here ...&lt;/li&gt; &lt;/ul&gt;&lt;/div&gt;</pre>
-         
-      </section>
-      <section class="example">
-         <h3>Search form</h3>
+</section>
+<section class="example" id="multiple-landmarks-aria-labelledby">
+   <h3>Multiple landmarks of the same type and aria-labelledby</h3>
+
+   <p>The following example shows a best practice of how landmarks might be added to an HTML document in situations where there are two or more of the same type of landmark on the same page. For instance, if a navigation role is used multiple times on a page, each instance may have a unique label specified using <code class="language-html">aria-labelledby</code>:</p>
+
+<pre xml:space="preserve"><code class="language-html">&lt;div aria-labelledby="site-nav-heading" role="navigation"&gt;
+  &lt;h2 id="site-nav-heading"&gt;Site&lt;/h2&gt;
+    &lt;ul&gt;
+      &lt;li&gt;&lt;a href="..."&gt;nav link 1&lt;/a&gt;&lt;/li&gt;  
+      &lt;li&gt;&lt;a href="..."&gt;nav link 2&lt;/a&gt;&lt;/li&gt;
+      &lt;li&gt;&lt;a href="..."&gt;nav link 3&lt;/a&gt;&lt;/li&gt;
+   &lt;/ul&gt;
+&lt;/div&gt;
+&lt;div aria-labelledby="related-nav-heading" role="navigation"&gt;
+  &lt;h2 id="related-nav-heading"&gt;Related Topics&lt;/h2&gt;
+    &lt;ul&gt;
+      &lt;li&gt;&lt;a href="..."&gt;topic link 1&lt;/a&gt;&lt;/li&gt;
+      &lt;li&gt;&lt;a href="..."&gt;topic link 2&lt;/a&gt;&lt;/li&gt;
+      &lt;li&gt;&lt;a href="..."&gt;topic link 3&lt;/a&gt;&lt;/li&gt;
+    &lt;/ul&gt;
+&lt;/div&gt;</code></pre>
          
-            <p>The following example shows a search form with a "search" landmark. The search role typically goes on the form field or a div surrounding the search form.</p>
-            <pre xml:space="preserve">&lt;form role="search"&gt;
-&lt;label for="s6"&gt;search&lt;/label&gt;&lt;input id="s6" type="text" size="20"&gt;
-...
-&lt;/form&gt; </pre>
+   </section>
+   <section class="example" id="multiple-landmarks-aria-label">
+      <h3>Multiple landmarks of the same type and aria-label</h3>
+      
+      <p>The following example shows a best practice of how landmarks might be added to an HTML document in situations where there are two or more of the same type of landmark on the same page, and there is no existing text on the page that can be referenced as the label:</p>
+<pre xml:space="preserve"><code class="language-html">&lt;div aria-label="Site" role="navigation"&gt;
+   &lt;ul&gt;
+      &lt;li&gt;&lt;a href="..."&gt;nav link 1&lt;/a&gt;&lt;/li&gt;
+      &lt;li&gt;&lt;a href="..."&gt;nav link 2&lt;/a&gt;&lt;/li&gt;
+      &lt;li&gt;&lt;a href="..."&gt;nav link 3&lt;/a&gt;&lt;/li&gt;
+   &lt;/ul&gt;
+&lt;/div&gt;
+&lt;div aria-label="Tags" role="navigation"&gt;
+   &lt;ul&gt;
+      &lt;li&gt;&lt;a href="..."&gt;tag link 1&lt;/a&gt;&lt;/li&gt;
+      &lt;li&gt;&lt;a href="..."&gt;tag link 2&lt;/a&gt;&lt;/li&gt;
+      &lt;li&gt;&lt;a href="..."&gt;tag link 3&lt;/a&gt;&lt;/li&gt;
+   &lt;/ul&gt;
+&lt;/div&gt;</code></pre>
+   </section>
+   <section class="example" id="search-form">
+      <h3>Search form</h3>
+      <p>The following example shows a search form with a "search" landmark. The <code class="language-html">search</code> role typically goes on the <code class="language-html">form</code> element or a <code class="language-html">div</code> surrounding the form:</p>
+<pre xml:space="preserve"><code class="language-html">&lt;form role="search"&gt;
+   &lt;label for="product-search" id="search-label"&gt;Search&lt;/label&gt;
+   &lt;input id="product-search" placeholder="title, author, or ISBN" type="text"&gt;
+   &lt;button type="submit"&gt;Find Books&lt;/button&gt;
+&lt;/form&gt;</code></pre>
          
-      </section>
+   </section>
    </section><section id="tests"><h2>Tests</h2>
-      <section class="procedure"><h3>Procedure</h3>
+      <section class="procedure" id="test-procedure">
+         <h3>Procedure</h3>
          <ol>
-            <li>Examine each element with a <a href="https://www.w3.org/TR/wai-aria/#landmark_roles">landmark role</a>.
-</li>
-            <li>Examine whether the landmark role attribute is applied to the section of the page that corresponds with that role. (i.e., the "navigation" role is applied to a navigation section, the "main" role is applied to where the main content begins.)
-</li>
+            <li>Examine each element with a <a href="https://www.w3.org/TR/wai-aria/#landmark_roles">landmark role</a>.</li>
+            <li>Examine whether the correct element has been used to mark up content. For example: a <code class="language-html">navigation</code> role has been used to mark up a section with navigation links, or the <code class="language-html">main</code> role is used to contain the page's main content.</li>
+            <li>If a landmark region needs to have an accessible name to be exposed as a landmark, check to see that there is an accessible name.</li>
          </ol>
       </section>
-      <section class="results"><h3>Expected Results</h3>
+      <section class="results" id="expected-test-results">
+         <h3>Expected Results</h3>
          <ul>
-            <li>#1 and #2 are true.</li>
+            <li>#1, #2, and #3 are true.</li>
          </ul>
       </section>
-   </section><section id="related"><h2>Related Techniques</h2><ul>
-   	<li><a href="../general/G1">G1</a></li>
-   	<li><a href="../general/G124">G124</a></li>
-      <li><a href="../html/H69">H69</a></li>
-      <li><a href="../client-side-script/SCR28">SCR28</a></li>
-   </ul></section><section id="resources"><h2>Resources</h2>
-      
-         <ul>
-            <li>
-                  <a href="https://www.w3.org/TR/wai-aria-practices/">WAI-ARIA Authoring Practices 1.1</a> 
-               </li>
-            <li>
-                  <a href="https://www.w3.org/TR/wai-aria/#usage_intro">Accessible Rich Internet Applications (WAI-ARIA) 1.0, Using WAI-ARIA Roles</a>
-               </li>
-            <li>
-                  <a href="https://www.w3.org/TR/wai-aria/#states_and_properties">Accessible Rich Internet Applications (WAI-ARIA) 1.0, Supported States and Properties</a>
-               </li>
-            <li>
-                  <a href="https://www.paciellogroup.com/blog/2013/07/enabling-landmark-based-keyboard-navigation-in-firefox/">Enabling landmark-based keyboard navigation in Firefox</a>
-               </li>
-            <li>
-               <a href="http://matatk.agrip.org.uk/landmarks/">Landmarks browser extension</a>
-            </li>
-         </ul>
-      
-   </section></body></html>
+   </section>
+   <section id="related">
+      <h2>Related Techniques</h2>
+      <ul>
+         <li><a href="../general/G1">G1</a></li>
+         <li><a href="../general/G124">G124</a></li>
+         <li><a href="../html/H69">H69</a></li>
+         <li><a href="../html/H100">H100</a></li>
+         <li><a href="../client-side-script/SCR28">SCR28</a></li>
+      </ul>
+   </section>
+   <section id="resources"><h2>Resources</h2>   
+      <ul>
+         <li>
+            <a href="https://www.w3.org/TR/wai-aria-practices/">WAI-ARIA Authoring Practices</a> 
+         </li>
+         <li>
+            <a href="https://www.w3.org/TR/wai-aria/#usage_intro">Accessible Rich Internet Applications (WAI-ARIA), Using WAI-ARIA Roles</a>
+         </li>
+         <li>
+            <a href="https://www.w3.org/TR/wai-aria/#states_and_properties">Accessible Rich Internet Applications (WAI-ARIA), Supported States and Properties</a>
+         </li>
+         <li>
+            <a href="https://www.tpgi.com/improving-access-to-landmark-navigation/">Improving access to landmark navigation</a>
+         </li>
+         <li>
+            <a href="https://matatk.agrip.org.uk/landmarks/">Landmarks browser extension</a>
+         </li>
+      </ul>     
+   </section>
+</body>
+</html>
diff --git a/techniques/aria/ARIA12.html b/techniques/aria/ARIA12.html
index af197701b5..7029917307 100644
--- a/techniques/aria/ARIA12.html
+++ b/techniques/aria/ARIA12.html
@@ -1,77 +1,95 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using role=heading to identify headings</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Using role=heading to identify headings</h1><section class="meta"><p class="id">ID: ARIA12</p><p class="technology">Technology: aria</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>Using role=heading to identify headings</title>
+		<link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+   </head>
+	 <body>
+		<h1>Using <code class="language-html">role=heading</code> to identify headings</h1>
+		<section class="meta">
+			<p class="id">ID: ARIA12</p>
+			<p class="technology">Technology: aria</p>
+			<p class="type">Type: Technique</p>
+		</section>
+		<section id="applicability">
+			<h2>When to Use</h2>
       <p>Technologies that support <a href="https://www.w3.org/TR/wai-aria/">Accessible Rich Internet Applications (WAI-ARIA)</a>. </p>
-   </section><section id="description"><h2>Description</h2>
+   </section>
+	 <section id="description">
+		<h2>Description</h2>
       <p>The purpose of this technique is to provide a way for Assistive Technologies (AT) to identify 
-a piece of content as a heading. Applying role="heading" to an element causes an AT (like a 
-screen reader) to treat it as though it were a heading. 
-</p>
-      <p>If there is more than one heading on the page and the heading hierarchy is defined through the 
-visual presentation, the <code class="att">aria-level</code> attribute should be used to indicate the hierarchical level of 
-the heading. 
-</p>
-      <p>When possible, use native heading mark-up directly. For example, it is preferable 
-to use <code class="el">h1</code> rather than using &lt;div role="heading" aria-level="1"&gt;. However, the use of the 
-heading role, instead of heading mark-up, may be necessary. For example, when retrofitting a legacy site where scripts depend on the existing element hierarchy.
-</p>
-      <p>The use of the <code class="prop">heading</code> role and nesting levels is discussed in <a href="https://www.w3.org/TR/wai-aria-practices/">WAI-ARIA Authoring Practices 1.1</a>.
-</p>
-   </section><section id="examples"><h2>Examples</h2>
-      <section class="example">
-         <h3>Simple headings</h3>
-         
-            <p>This example demonstrates how to implement simple headings using role="heading" when retrofitting a legacy site where scripts depend on the existing element hierarchy or the level is unknown. For example, web content which is syndicated from various sources may be constructed without knowledge of what the final presentation will be.
-</p>
-            <pre xml:space="preserve">&lt;div role="heading"&gt;Global News items&lt;/div&gt;
-... a list of global news with editorial comment....
+a piece of content as a heading. Applying <code class="language-html">role="heading"</code> to an element causes an AT (like a screen reader) to treat it as though it were a heading. The <code class="language-html">role="heading"</code> property must be paired with the <code class="language-html">aria-level</code> property to define the heading level.</p>
+      <p>When possible, <a href="https://www.w3.org/TR/using-aria/#rule1">use native heading markup</a>. For example, it is preferable to use an <code class="language-html">h1</code> element, rather than using <code class="language-html">&lt;div role="heading" aria-level="1"&gt;</code>. Native <abbr title="HyperText Markup Language">HTML</abbr> elements have implicit styling and features that won't necessarily be replicated with ARIA equivalents. For instance, heading elements will have specific styling adjustments made when viewing a page in a browser's Reader Mode. Whereas a <code class="language-html">&lt;div role="heading" aria-level="1"&gt;</code> will not be styled as a heading, because the underlying element is a <code class="language-html">div</code>. ARIA only modifies the way an element is exposed to assistive technology, it does nothing to change the implicit style or functionality of the element it is applied to.</p>
 
-&lt;div role="heading"&gt;Local News items&lt;/div&gt;
-... a list of local news, with editorial comment ...</pre>
-         
+   </section>
+	 <section id="examples">
+		<h2>Examples</h2>
+		<section class="example">
+			<h3>Simple headings</h3>
+			<p>This example demonstrates how to implement headings using <code class="language-html">role="heading"</code> and <code class="language-html">aria-level</code>.</p>
+<pre xml:space="preserve"><code class="language-html">&lt;div role="heading" aria-level="2"&gt;Global News Items&lt;/div&gt;
+... a list of global news with editorial comment....
+   
+&lt;div role="heading" aria-level="3"&gt;Politics&lt;/div&gt;
+... a list of global political news stories ...</code></pre>
       </section>
       <section class="example">
          <h3>Additional heading levels</h3>
          
-            <p>This example demonstrates how to implement a level 7 heading using role="heading" and the <code class="att">aria-level</code> attribute. Since HTML only supports headings through level 6, there is no native element to provide these semantics.</p>
-            <pre xml:space="preserve">...
-&lt;h5&gt;Fruit Trees&lt;/h5&gt;
-...
+            <p>This example demonstrates how to implement a level 7 heading using <code class="language-html">role="heading"</code> and the <code class="language-html">aria-level</code> attribute. Since HTML only supports headings up to level 6, there is no native element to provide these semantics.</p>
+<pre xml:space="preserve"><code class="language-html">&lt;h5&gt;Fruit Trees&lt;/h5&gt;
 &lt;h6&gt;Apples&lt;/h6&gt;
 &lt;p&gt;Apples grow on trees in areas known as orchards...&lt;/p&gt;
-...
-&lt;div role="heading" aria-level="7"&gt;Jonagold/div&gt;
-&lt;p&gt;Jonagold is a cross between the Golden Delicious and Jonathan varieties...&lt;/p&gt;</pre>
-         
-      </section>
-   </section><section id="tests"><h2>Tests</h2>
-      <section class="procedure"><h3>Procedure</h3>
-         <ol>
-            <li> Examine each element with the attribute role="heading".
-</li>
-            <li> Determine whether the content of the element is appropriate as a heading.
-</li>
-            <li> If the element has an <code class="att">aria-level</code> attribute, determine whether the value is the appropriate hierarchical level.
-</li>
-         </ol>
+   ...
+&lt;div role="heading" aria-level="7"&gt;Jonagold&lt;/div&gt;
+&lt;p&gt;Jonagold is a cross between the Golden Delicious and Jonathan varieties...&lt;/p&gt;</code></pre>
+	<aside class="note">
+		<p>Headings with an <code class="language-html">aria-level</code> of 10 or higher can create difficulties for users. At the time of writing (2024), most combinations of user agents and assistive technologies report such levels as being level 2.</p>
+	</aside>
       </section>
-      <section class="results"><h3>Expected Results</h3>
-         <ul>
-            <li>#2 and #3 are true.</li>
-         </ul>
+   </section>
+	 <section id="tests">
+		<h2>Tests</h2>
+		<section class="procedure">
+			<h3>Procedure</h3>
+			<ol>
+				<li>Examine each element with the attribute <code class="language-html">role="heading"</code>.</li>
+				<li>Determine whether the content of the element is appropriate as a heading.</li>
+				<li>Determine whether the <code class="language-html">aria-level</code> value is the appropriate hierarchical level.</li>
+      </ol>
+    </section>
+    <section class="results">
+			<h3>Expected Results</h3>
+			<ul>
+				<li>#2 and #3 are true.</li>
+			</ul>
       </section>
-   </section><section id="related"><h2>Related Techniques</h2><ul>
+   </section>
+	 <section id="related">
+		<h2>Related Techniques</h2>
+		<ul>
       <li><a href="../html/H42">H42</a></li>
       <li><a href="../html/H69">H69</a></li>
       <li><a href="../general/G141">G141</a></li>
       <li><a href="../failures/F2">F2</a></li>
-   </ul></section><section id="resources"><h2>Resources</h2>
-      
-         <ul>
-            <li>
-                  <a href="https://www.w3.org/TR/wai-aria/#heading">Accessible Rich Internet Applications (WAI-ARIA), Heading in the Roles Model</a>
-               </li>
-            <li>
-                  <a href="https://www.w3.org/TR/wai-aria-practices/">WAI-ARIA Authoring Practices</a> 
-               </li>
-         </ul>
-      
-   </section></body></html>
\ No newline at end of file
+		</ul>
+	</section>
+	<section id="resources">
+		<h2>Resources</h2>  
+		<ul>
+			<li>
+				<a href="https://www.w3.org/TR/wai-aria/#heading">Accessible Rich Internet Applications (WAI-ARIA), <code class="language-html">heading</code> role.</a>
+			</li>
+			<li>
+				<a href="https://www.w3.org/TR/wai-aria/#aria-level">Accessible Rich Internet Applications (WAI-ARIA), <code class="language-html">aria-level</code> property.</a>
+			</li>
+			<li>
+				<a href="https://www.w3.org/WAI/ARIA/apg/">WAI-ARIA Authoring Practices Guide</a> 
+			</li>
+			<li>
+				<a href="https://html.spec.whatwg.org/multipage/sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements">HTML, the <code class="language-html">h1</code>, <code class="language-html">h2</code>, <code class="language-html">h3</code>, <code class="language-html">h4</code>, <code class="language-html">h5</code>, and <code class="language-html">h6</code> elements</a>.
+			</li>
+		</ul>
+   </section>
+	</body>
+	</html>
diff --git a/techniques/aria/ARIA13.html b/techniques/aria/ARIA13.html
index 7ac55e9a07..b89ac8098c 100644
--- a/techniques/aria/ARIA13.html
+++ b/techniques/aria/ARIA13.html
@@ -1,38 +1,35 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using aria-labelledby to name regions and landmarks</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Using aria-labelledby to name regions and landmarks</h1><section class="meta"><p class="id">ID: ARIA13</p><p class="technology">Technology: aria</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using aria-labelledby to name regions and landmarks</title><link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/></head><body><h1>Using aria-labelledby to name regions and landmarks</h1><section class="meta"><p class="id">ID: ARIA13</p><p class="technology">Technology: aria</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
       <p>Technologies that support <a href="https://www.w3.org/TR/wai-aria/">Accessible Rich Internet Applications (WAI-ARIA)</a>. </p>
    </section><section id="description"><h2>Description</h2>
-      <p>The purpose of this technique is to provide names for regions of a page that can be read by assistive technology.  The <code class="att">aria-labelledby</code> attribute provides a way to associate an section of the page marked up as a region or landmarks with text that is on the page that labels it.
+      <p>The purpose of this technique is to provide names for regions of a page that can be read by assistive technology.  The <code class="language-html">aria-labelledby</code> attribute provides a way to associate a section of the page marked up as a region or landmarks with text that is on the page that labels it.
 </p>
       <p>Landmark roles (or "landmarks") programmatically identify sections of a page. Landmarks help assistive technology (AT) users orient themselves to a page and help them navigate easily to various sections of a page.
 </p>
-      <p>Like <code class="att">aria-describedby</code>, <code class="att">aria-labelledby</code> can accept multiple ids to point to other regions of the page using a space separated list. It is also limited to ids for defining these sets.
+      <p>Like <code class="language-html">aria-describedby</code>, <code class="language-html">aria-labelledby</code> can accept multiple <code class="language-html">id</code>s to point to other regions of the page using a space separated list. It is also limited to <code class="language-html">id</code>s for defining these sets.
 </p>
    </section>
    <section id="examples"><h2>Examples</h2>
       <section class="example">
          <h3>Identify a landmark with on-page text</h3>
          
-            <p>Below is an example of <code class="att">aria-labelledby</code> used on a complementary Landmark. The region of the document to which the heading pertains could be marked with the <code class="att">aria-labelledby</code> property containing the value of the <code class="att">id</code> for the header.</p>
-            <pre xml:space="preserve">&lt;div role="complementary" aria-labelledby="hdr1"&gt;
-  &lt;h1 id="hdr1"&gt;
-    Top News Stories
-    ...
-  &lt;/h1&gt;
-&lt;/div&gt;</pre>
+            <p>Below is an example of <code class="language-html">aria-labelledby</code> used on a complementary Landmark. The region of the document to which the heading pertains could be marked with the <code class="language-html">aria-labelledby</code> property containing the value of the <code class="language-html">id</code> for the header.</p>
+<pre xml:space="preserve"><code class="language-html">&lt;div role="complementary" aria-labelledby="hdr1"&gt;
+  &lt;h1 id="hdr1"&gt;Top News Stories&lt;/h1&gt;
+  ...
+&lt;/div&gt;</code></pre>
          
       </section>
       <section class="example">
          <h3>Identification for Application landmarks</h3>
          
             <p>The following code snippet for application landmarks with static prose. If you have a regional landmark of type application and static descriptive text is available, then on the application landmark, include an aria-describedby reference to associate the application and the static text as shown here:</p>
-            <pre xml:space="preserve">&lt;div role="application" aria-labelledby="p123" aria-describedby="info"&gt;
-  &lt;h1 id="p123"&gt;Calendar&lt;h1&gt;
-  &lt;p id="info"&gt;
-    This calendar shows the game schedule for the Boston Red Sox.
-  &lt;/p&gt;
-&lt;div role="grid"&gt;
-  ...
-&lt;/div&gt;</pre>
+<pre xml:space="preserve"><code class="language-html">&lt;div role="application" aria-labelledby="p123" aria-describedby="info"&gt;
+   &lt;h1 id="p123"&gt;Calendar&lt;h1&gt;
+   &lt;p id="info"&gt;This calendar shows the game schedule for the Boston Red Sox.&lt;/p&gt;
+   &lt;div role="grid"&gt;
+    ...
+   &lt;/div&gt;
+&lt;/div&gt;</code></pre>
          
       </section>
    </section><section id="tests"><h2>Tests</h2>
@@ -58,16 +55,15 @@ <h3>Identification for Application landmarks</h3>
       <li><a href="../aria/ARIA16">ARIA16</a></li>
       <li><a href="../aria/ARIA7">ARIA7</a></li>
       <li><a href="../general/G92">G92</a></li>
-      <li><a href="../html/H45">H45</a></li>
    </ul></section><section id="resources"><h2>Resources</h2>
       
          <ul>
             <li> 
-                  <a href="https://www.w3.org/TR/wai-aria-practices/">WAI-ARIA Authoring Practices 1.1</a>
+                  <a href="https://www.w3.org/WAI/ARIA/apg/">WAI-ARIA Authoring Practices Guide</a>
                </li>
             <li> 
-                  <a href="https://www.w3.org/TR/html-aapi/#accessible-name-and-description-calculation">HTML to Platform Accessibility APIs Implementation Guide: Accessible Name and Description Calculation</a>
+               <a href="https://www.w3.org/TR/html-aam/">HTML Accessibility API Mappings</a>
                </li>
          </ul>
-      
-   </section></body></html>
\ No newline at end of file
+   </section>
+</body></html>
\ No newline at end of file
diff --git a/techniques/aria/ARIA14.html b/techniques/aria/ARIA14.html
index 9f195b9f4d..5dae9eb210 100644
--- a/techniques/aria/ARIA14.html
+++ b/techniques/aria/ARIA14.html
@@ -1,22 +1,21 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using aria-label to provide an invisible label where a visible label cannot be used</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Using aria-label to provide an invisible label where a visible label cannot be used</h1><section class="meta"><p class="id">ID: ARIA14</p><p class="technology">Technology: aria</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using aria-label to provide an invisible label where a visible label cannot be used</title><link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/></head><body><h1>Using aria-label to provide an invisible label where a visible label cannot be used</h1><section class="meta"><p class="id">ID: ARIA14</p><p class="technology">Technology: aria</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
       <p>Technologies that support <a href="https://www.w3.org/TR/wai-aria/">Accessible Rich Internet Applications (WAI-ARIA)</a>. </p>
    </section><section id="description"><h2>Description</h2>
-      <p>For sighted users, the context and visual appearance of an element can provide sufficient cues to determine the purpose. An example is the 'X' often used in the top right corner of pop-up divs (light boxes) to indicate the control for closing the div.  
-</p>
-      <p>In some situations, elements can be given the attribute <code class="att">aria-label</code> to provide an accessible name for situations when there is no visible label due to a chosen design approach or layout but the context and visual appearance of the control make its purpose clear.
-</p>
-      <p>In other situations, elements can be given the attribute <code class="att">aria-label</code> to provide an accessible name when the native HTML labeling element is not supported by the control - for example, when a <code class="el">div</code> set to <code class="att">contentEditable</code> is used instead of native form elements such as input type="text" or <code class="el">textarea</code> in order to provide a richer text editing experience.
+      <p>For sighted users, the context and visual appearance of an element can provide sufficient cues to determine the purpose. An example is the 'X' often used in the top right corner of pop-up <code class="language-html">div</code>s (light boxes) to indicate the control for closing the div.  
 </p>
+      <p>In some situations, elements can be given the attribute <code class="language-html">aria-label</code> to provide an accessible name for situations when there is no visible label due to a chosen design approach or layout but the context and visual appearance of the control make its purpose clear.</p>
+
+      <p>In other situations, elements can be given the attribute <code class="language-html">aria-label</code> to provide an accessible name when the native HTML labeling element is not supported by the control - for example, when a <code class="language-html">div</code> set to <code class="language-html">contentEditable</code> is used instead of native form elements such as <code class="language-html">input type="text"</code> or <code class="language-html">textarea</code> in order to provide a richer text editing experience.</p>
+
    </section><section id="examples"><h2>Examples</h2>
       <section class="example">
-         <h3>A close button (X) in a pop-up box</h3>
+         <h3>A close button in a pop-up box</h3>
          
-            <p>On a page, a link displays a pop-up box (a div) with additional information. The 'close' element is implemented as a button containing merely the letter 'x'. The property aria-label="close" is used to provide an accessible name to the button.
-</p>
-            <pre xml:space="preserve">&lt;div id="box"&gt;
+            <p>On a page, a link displays a pop-up box (a <code class="language-html">div</code>) with additional information. The 'close' element is implemented as a <code class="language-html">button</code> containing merely the letter 'X'. The property <code class="language-html">aria-label="close"</code> is used to provide an accessible name to the <code class="language-html">button</code>.</p>
+<pre xml:space="preserve"><code class="language-html">&lt;div id="box"&gt;
    This is a pop-up box.
-   &lt;button aria-label="Close" onclick="document.getElementById('box').style.display='none';" class="close-button"&gt;X&lt;/button&gt;				
-&lt;/div&gt;</pre>
+   &lt;button aria-label="Close"&gt;X&lt;/button&gt;				
+&lt;/div&gt;</code></pre>
             <p class="working-example">Working example: <a href="../../working-examples/aria-label-invisible-label-box/">Close button example</a>.
 </p>
          
@@ -24,20 +23,20 @@ <h3>A close button (X) in a pop-up box</h3>
       <section class="example">
          <h3>A phone number with multiple fields</h3>
          
-            <pre xml:space="preserve">&lt;div role="group" aria-labelledby="groupLabel"&gt;
-  &lt;span id="groupLabel&gt;Work Phone&lt;/span&gt;
-  +&lt;input type="number" aria-label="country code"&gt;
-  &lt;input type="number" aria-label="area code"&gt;
-  &lt;input type="number" aria-label="subscriber number"&gt;
-&lt;/div&gt;</pre>
+<pre xml:space="preserve"><code class="language-html">&lt;div role="group" aria-labelledby="groupLabel"&gt;
+  &lt;span id="groupLabel"&gt;Work Phone&lt;/span&gt;
+  +&lt;input autocomplete="tel-country-code" type="number" aria-label="country code"&gt;
+  &lt;input autocomplete="tel-area-code" type="number" aria-label="area code"&gt;
+  &lt;input autocomplete="tel-local" type="number" aria-label="subscriber number"&gt;
+&lt;/div&gt;</code></pre>
          
       </section>
    </section><section id="tests"><h2>Tests</h2>
       <section class="procedure"><h3>Procedure</h3>
-         <p>For elements that use <code class="att">aria-label</code>:
+         <p>For elements that use <code class="language-html">aria-label</code>:
 </p>
          <ol>
-            <li>Check that the value of the <code class="att">aria-label</code> attribute properly describes the purpose of an element where user input is required
+            <li>Check that the value of the <code class="language-html">aria-label</code> attribute properly describes the purpose of an element where user input is required
 </li>
          </ol>
       </section>
@@ -53,11 +52,12 @@ <h3>A phone number with multiple fields</h3>
       
          <ul>
             <li> 
-                  <a href="https://www.w3.org/TR/wai-aria-practices/">WAI-ARIA Authoring Practices 1.1</a>
+                  <a href="https://www.w3.org/WAI/ARIA/apg/">WAI-ARIA Authoring Practices Guide</a>
                </li>
             <li> 
-                  <a href="https://www.w3.org/TR/html-aapi/#accessible-name-and-description-calculation">HTML to Platform Accessibility APIs Implementation Guide: Accessible Name and Description Calculation</a>
+               <a href="https://www.w3.org/TR/html-aam/">HTML Accessibility API Mappings</a>
                </li>
          </ul>
       
-   </section></body></html>
\ No newline at end of file
+   </section>
+</body></html>
\ No newline at end of file
diff --git a/techniques/aria/ARIA15.html b/techniques/aria/ARIA15.html
index 4afc38cc0f..b91dc9f6ef 100644
--- a/techniques/aria/ARIA15.html
+++ b/techniques/aria/ARIA15.html
@@ -1,29 +1,29 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using aria-describedby to provide descriptions of images</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Using aria-describedby to provide descriptions of images</h1><section class="meta"><p class="id">ID: ARIA15</p><p class="technology">Technology: aria</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using aria-describedby to provide descriptions of images</title><link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/></head><body><h1>Using aria-describedby to provide descriptions of images</h1><section class="meta"><p class="id">ID: ARIA15</p><p class="technology">Technology: aria</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
       <p>Technologies that support <a href="https://www.w3.org/TR/wai-aria/">Accessible Rich Internet Applications (WAI-ARIA)</a>. </p>
    </section><section id="description"><h2>Description</h2>
       <p>The objective of this technique is to provide descriptions of images when a short text alternative does not adequately convey the function or information provided in the object. 
 </p>
-      <p>A feature of WAI-ARIA is the ability to associate descriptive text with a section, drawing, form element, picture, and so on using the <code class="prop">aria-describedby</code> property. This is similar to the <code class="att">longdesc</code> attribute in that both are useful for providing additional information to help users understand complex images. Like <code class="att">longdesc</code>, descriptive text provided using <code class="att">aria-describedby</code> is separate from the short name provided using the <code class="att">alt</code> attribute in HTML. Unlike <code class="att">longdesc</code>, <code class="att">aria-describedby</code> cannot reference descriptions outside of the page containing the image. An advantage of providing long descriptions using content from the same page as the image is that the alternative is available to all, including sighted people who do not have assistive technology. It is worth noting that as of the time of writing (October 2013) some assistive technologies read <code class="att">aria-describedby</code> content immediately after an image's alt attribute information without user activation - whereas most implementations of <code class="att">longdesc</code> require the user to take explicit action to read the additional description.
-</p>
-      <p>Like <code class="att">aria-labelledby</code>, <code class="att">aria-describedby</code> can accept multiple ids to point to other regions of the page using a space separated list. It is also limited to ids for defining these sets.
-</p>
+      <p>A feature of WAI-ARIA is the ability to associate descriptive text with a section, drawing, form element, picture, and so on using the <code class="language-html">aria-describedby</code> property. Descriptive text provided using <code class="language-html">aria-describedby</code> is separate from the short name provided using the <code class="language-html">alt</code> attribute in HTML. An advantage of providing long descriptions using content from the same page as the image is that the alternative is available to all, including sighted people who do not have assistive technology.</p>
+
+      <p>Like <code class="language-html">aria-labelledby</code>, <code class="language-html">aria-describedby</code> can accept multiple <code class="language-html">id</code>s to point to other regions of the page using a space separated list. It is also limited to <code class="language-html">id</code>s for defining these sets.</p>
+
    </section><section id="examples"><h2>Examples</h2>
       <section class="example">
          <h3>Describing an image</h3>
          
-            <p>The following example shows how <code class="att">aria-describedby</code> can be applied to an image to provide a long description, where that text description is on the same page as the image. 
-</p>
-            <pre xml:space="preserve">&lt;img src="ladymacbeth.jpg" alt="Lady MacBeth" aria-describedby="p1"&gt;
-&lt;p id="p1"&gt;This painting dates back to 1730 and is oil on canvas. It was created by 
-Jean-Guy Millome, and represents ...&lt;/p&gt;</pre>
+            <p>The following example shows how <code class="language-html">aria-describedby</code> can be applied to an image to provide a long description, where that text description is on the same page as the image.</p>
+
+<pre xml:space="preserve"><code class="language-html">&lt;img src="ladymacbeth.jpg" alt="Lady MacBeth" aria-describedby="p1"&gt;
+&lt;p id="p1"&gt;This painting dates back to 1889 and is oil on canvas. It was created by 
+ John Singer Sargent, and represents ...&lt;/p&gt;</code></pre>
          
       </section>
    </section><section id="tests"><h2>Tests</h2>
       <section class="procedure"><h3>Procedure</h3>
          <ol>
-            <li>Examine each image element where a <code class="att">aria-describedby</code> attribute is present.
+            <li>Examine each image element where a <code class="language-html">aria-describedby</code> attribute is present.
 </li>
-            <li>Examine whether the <code class="att">aria-describedby</code> attribute  programatically associates an element with its text description, via the <code class="att">id</code> attribute on the element where the text to be used as the description is found. 
+            <li>Examine whether the <code class="language-html">aria-describedby</code> attribute  programmatically associates an element with its text description, via the <code class="language-html">id</code> attribute on the element where the text to be used as the description is found. 
 </li>
             <li>Examine whether the combined text equivalent and associated text description accurately describe or provide the equivalent purpose to the object.
 </li>
@@ -38,16 +38,15 @@ <h3>Describing an image</h3>
       <li><a href="../aria/ARIA6">ARIA6</a></li>
       <li><a href="../aria/ARIA16">ARIA16</a></li>
       <li><a href="../general/G92">G92</a></li>
-      <li><a href="../html/H45">H45</a></li>
    </ul></section><section id="resources"><h2>Resources</h2>
       
          <ul>
             <li> 
-                  <a href="https://www.w3.org/TR/wai-aria-practices/">WAI-ARIA Authoring Practices 1.1</a>
+                  <a href="https://www.w3.org/WAI/ARIA/apg/">WAI-ARIA Authoring Practices Guide</a>
                </li>
             <li> 
                   <a href="https://www.w3.org/TR/html-aapi/#accessible-name-and-description-calculation">HTML to Platform Accessibility APIs Implementation Guide: Accessible Name and Description Calculation</a>
                </li>
          </ul>
-      
-   </section></body></html>
\ No newline at end of file
+   </section>
+</body></html>
\ No newline at end of file
diff --git a/techniques/aria/ARIA16.html b/techniques/aria/ARIA16.html
index d154447cc8..a0d368698f 100644
--- a/techniques/aria/ARIA16.html
+++ b/techniques/aria/ARIA16.html
@@ -1,60 +1,60 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using aria-labelledby to provide a name for user interface controls</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Using aria-labelledby to provide a name for user interface controls</h1><section class="meta"><p class="id">ID: ARIA16</p><p class="technology">Technology: aria</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using aria-labelledby to provide a name for user interface controls</title><link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/></head><body><h1>Using aria-labelledby to provide a name for user interface controls</h1><section class="meta"><p class="id">ID: ARIA16</p><p class="technology">Technology: aria</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
       <p>Technologies that support <a href="https://www.w3.org/TR/wai-aria/">Accessible Rich Internet Applications (WAI-ARIA)</a>. </p>
    </section><section id="description"><h2>Description</h2>
-      <p>The purpose of this technique is to provide names for user interface controls that can be read by assistive technology.  WAI-ARIA provides a way to associate text with a section, drawing, form element, picture, and so on, using the <code class="att">aria-labelledby</code> property. This techniques uses the <code class="att">aria-labelledby</code> attribute to associate a user interface control, such as a form field, with text on the page that labels it.
+      <p>The purpose of this technique is to provide names for user interface controls that can be read by assistive technology.  WAI-ARIA provides a way to associate text with a section, drawing, form element, picture, and so on, using the <code class="language-html">aria-labelledby</code> property. This techniques uses the <code class="language-html">aria-labelledby</code> attribute to associate a user interface control, such as a form field, with text on the page that labels it.
 </p>
-      <p>Like <code class="att">aria-describedby</code>, <code class="att">aria-labelledby</code> can accept multiple ids to point to other elements of the page using a space separated list. This capability makes <code class="att">aria-labelledby</code> especially useful in situations where sighted users use information from the surrounding context to identify a control. <a href="ARIA9">Using aria-labelledby to concatenate a label from several text nodes</a> contains more examples of situations where names are created from several other text elements on the page.
+      <p>Like <code class="language-html">aria-describedby</code>, <code class="language-html">aria-labelledby</code> can accept multiple ids to point to other elements of the page using a space separated list. This capability makes <code class="language-html">aria-labelledby</code> especially useful in situations where sighted users use information from the surrounding context to identify a control. <a href="ARIA9">Using aria-labelledby to concatenate a label from several text nodes</a> contains more examples of situations where names are created from several other text elements on the page.
 </p>
       <p>While the function of aria-labelledby appears similar to the native HTML label element, there are some differences:
 </p>
       <ul>
          <li> 
-               <code class="att">aria-labelledby</code> can reference more than one text element; <code class="el">label</code> can only reference one.</li>
+               <code class="language-html">aria-labelledby</code> can reference more than one text element; <code class="language-html">label</code> can only reference one.</li>
          <li> 
-               <code class="att">aria-labelledby</code> can be used for a variety of elements while the <code class="el">label</code> element can only be used on form elements.</li>
-         <li> Clicking on a <code class="el">label</code> focuses the associated form field. This does not occur with <code class="att">aria-labelledby</code>. If this behaviour is required then use <code class="el">label</code> or implement this functionality using scripting.
+               <code class="language-html">aria-labelledby</code> can be used for a variety of elements while the <code class="language-html">label</code> element can only be used on form elements.</li>
+         <li> Clicking on a <code class="language-html">label</code> focuses the associated form field. This does not occur with <code class="language-html">aria-labelledby</code>. If this behaviour is required then use <code class="language-html">label</code> or implement this functionality using scripting.
 </li>
       </ul>
-      <p>Note that as of December 2013, <code class="el">label</code> has better support than <code class="att">aria-labelledby</code>, especially in older browsers and assistive technologies.
-</p>
+
    </section><section id="examples"><h2>Examples</h2>
       <section class="example">
          <h3>Labelling a simple text field</h3>
          
-            <p>The following is an example of <code class="att">aria-labelledby</code> used on a simple text field to provide a label in a situation where there is no text available for a dedicated label but there is other text on the page that can be used to accurately label the control.</p>
-            <pre xml:space="preserve">&lt;input name="searchtxt" type="text" aria-labelledby="searchbtn"&gt;
-&lt;input name="searchbtn" id="searchbtn" type="submit" value="Search"&gt;</pre>
+            <p>The following is an example of <code class="language-html">aria-labelledby</code> used on a simple text field to provide a label in a situation where there is no text available for a dedicated label but there is other text on the page that can be used to accurately label the control.</p>
+
+<pre xml:space="preserve"><code class="language-html">&lt;input name="searchtxt" type="text" aria-labelledby="searchbtn"&gt;
+&lt;input name="searchbtn" id="searchbtn" type="submit" value="Search"&gt;</code></pre>
          
       </section>
       <section class="example">
          <h3>Labelling a slider</h3>
          
-            <p>Below is an example of <code class="att">aria-labelledby</code> used to provide a label for a slider control. In this case the label text is selected from within a longer adjacent text string. Please note that this example is simplified to show only the labeling relationship; authors implementing custom controls also need to ensure that controls meet other success criteria.</p>
-            <pre xml:space="preserve">&lt;p&gt;Please select the &lt;span id="mysldr-lbl"&gt;number of days for your trip&lt;/span&gt;&lt;/p&gt;
-&lt;div id="mysldr" role="slider" aria-labelledby="mysldr-lbl"&gt;&lt;/div&gt;</pre>
+            <p>Below is an example of <code class="language-html">aria-labelledby</code> used to provide a label for a slider control. In this case the label text is selected from within a longer adjacent text string. Please note that this example is simplified to show only the labeling relationship; authors implementing custom controls also need to ensure that controls meet other success criteria.</p>
+<pre xml:space="preserve"><code class="language-html">&lt;p&gt;Please select the &lt;span id="mysldr-lbl"&gt;number of days for your trip&lt;/span&gt;&lt;/p&gt;
+&lt;div id="mysldr" role="slider" aria-labelledby="mysldr-lbl"&gt;&lt;/div&gt;</code></pre>
          
       </section>
       <section class="example">
          <h3>A label from multiple sources</h3>
          
-            <p>The following example of <code class="att">aria-labelledby</code> with multiple references uses the <code class="el">label</code> element. For additional detail on concatenating multiple sources of information into a label with <code class="att">aria-labelledby</code>, please view the technique <a href="ARIA9">Using ARIA labelledby to concatenate a label from several text nodes</a>.
+            <p>The following example of <code class="language-html">aria-labelledby</code> with multiple references uses the <code class="language-html">label</code> element. For additional detail on concatenating multiple sources of information into a label with <code class="language-html">aria-labelledby</code>, please view the technique <a href="ARIA9">Using ARIA labelledby to concatenate a label from several text nodes</a>.
 </p>
-            <pre xml:space="preserve">&lt;label id="l1" for="f3"&gt;Notify me&lt;/label&gt;
+<pre xml:space="preserve"><code class="language-html">&lt;label id="l1" for="f3"&gt;Notify me&lt;/label&gt;
 &lt;select name="amt" id="f3" aria-labelledby="l1 f3 l2"&gt;
   &lt;option value="1"&gt;1&lt;/option&gt;
   &lt;option value="2"&gt;2&lt;/option&gt;
 &lt;/select&gt;
-&lt;span id="l2" tabindex="-1"&gt;days in advance&lt;/span&gt;</pre>
-            <p>Note: The use of the <code class="el">label</code> element is included for a number of reasons. If the user clicks on the text of the <code class="el">label</code> element, the corresponding form field will receive focus, which makes the clicking target larger for people with dexterity problems. Also the <code class="el">label</code> element will always be exposed via the accessibility API. A <code class="el">span</code> could have been used (but if so, it should receive a tabindex="-1" so that it will be exposed via the accessibility API in all versions of Internet Explorer). However, a <code class="el">span</code> would lose the advantage of the larger clickable region.
+&lt;span id="l2"&gt;days in advance&lt;/span&gt;</code></pre>
+            <p>Note: The use of the <code class="language-html">label</code> element is included for a number of reasons. If the user clicks on the text of the <code class="language-html">label</code> element, the corresponding form field will receive focus, which makes the clicking target larger for people with dexterity problems. Also the <code class="language-html">label</code> element will always be exposed via the accessibility API. A <code class="language-html">span</code> could have been used. However, a <code class="language-html">span</code> would lose the advantage of the larger clickable region.
 </p>
          
       </section>
    </section><section id="tests"><h2>Tests</h2>
       <section class="procedure"><h3>Procedure</h3>
-         <p>For each user interface control element where an <code class="att">aria-labelledby</code> attribute is present:
+         <p>For each user interface control element where an <code class="language-html">aria-labelledby</code> attribute is present:
 </p>
          <ol>
-            <li>Check that the value of the <code class="att">aria-labelledby</code> attribute is the <code class="att">id</code> of an element or a space separated list of <code class="att">id</code>s on the web page. 
+            <li>Check that the value of the <code class="language-html">aria-labelledby</code> attribute is the <code class="language-html">id</code> of an element or a space separated list of <code class="language-html">id</code>s on the web page. 
 </li>
             <li>Check that the text of the referenced element or elements accurately labels the user interface control.
 </li>
@@ -72,16 +72,16 @@ <h3>A label from multiple sources</h3>
       <li><a href="../aria/ARIA7">ARIA7</a></li>
       <li><a href="../aria/ARIA13">ARIA13</a></li>
       <li><a href="../general/G92">G92</a></li>
-      <li><a href="../html/H45">H45</a></li>
    </ul></section><section id="resources"><h2>Resources</h2>
       
          <ul>
             <li> 
-                  <a href="https://www.w3.org/TR/wai-aria-practices/">WAI-ARIA Authoring Practices 1.1</a>
+                  <a href="https://www.w3.org/WAI/ARIA/apg/">WAI-ARIA Authoring Practices Guide</a>
                </li>
             <li> 
                   <a href="https://www.w3.org/TR/html-aapi/#accessible-name-and-description-calculation">HTML to Platform Accessibility APIs Implementation Guide: Accessible Name and Description Calculation</a>
                </li>
          </ul>
       
-   </section></body></html>
\ No newline at end of file
+   </section>
+</body></html>
\ No newline at end of file
diff --git a/techniques/aria/ARIA17.html b/techniques/aria/ARIA17.html
index a01bd6d059..777b743f31 100644
--- a/techniques/aria/ARIA17.html
+++ b/techniques/aria/ARIA17.html
@@ -1,69 +1,67 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using grouping roles to identify related form controls</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Using grouping roles to identify related form controls</h1><section class="meta"><p class="id">ID: ARIA17</p><p class="technology">Technology: aria</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using grouping roles to identify related form controls</title><link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/></head><body><h1>Using grouping roles to identify related form controls</h1><section class="meta"><p class="id">ID: ARIA17</p><p class="technology">Technology: aria</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
       <p>Technologies that support <a href="https://www.w3.org/TR/wai-aria/">Accessible Rich Internet Applications (WAI-ARIA)</a>. </p>
    </section><section id="description"><h2>Description</h2>
-      <p>The objective of this technique is to mark up a set of related controls within a form  as a group. Any label associated with the group also serves as a common label or qualifier for individual controls in the group. Assistive technologies can indicate the start and end of the group and the group’s label as one navigates into and out of the group.  This is a viable alternative for grouping form controls programmatically when the user interface’s design makes it difficult to employ the fieldset-legend technique (<a href="H71">H71</a>).</p>
-      <p>For a group of radio buttons, one could also use role="radiogroup" instead of role="group".</p>
-      <p>The group can be labeled using <code class="att">aria-labelledby</code>.</p>
-      <p>This technique is not meant for wrapping  all controls on a form within a single container with role="group".</p>
+      <p>The objective of this technique is to mark up a set of related controls within a form  as a group. Any label associated with the group also serves as a common label or qualifier for individual controls in the group. Assistive technologies can indicate the start and end of the group and the group's label as one navigates into and out of the group. This is a viable alternative for grouping form controls programmatically when the user interface's design makes it difficult to employ the <code class="language-html">fieldset</code> / <code class="language-html">legend</code> technique (<a href="../html/H71">H71</a>).</p>
+      <p>For a group of radio buttons, one should use <code class="language-html">role="radiogroup"</code> instead of <code class="language-html">role="group"</code>.</p>
+      <p>The group can be labeled using <code class="language-html">aria-labelledby</code>.</p>
+      <p>This technique is not meant for wrapping  all controls on a form within a single container with <code class="language-html">role="group"</code>.</p>
    </section><section id="examples"><h2>Examples</h2>
       <section class="example">
          <h3>Social Security Number</h3>
          
-            <p>Social security number fields which are 9 digits long and broken up into 3 segments can be grouped using role="group".</p>
-            <pre xml:space="preserve">&lt;div role="group" aria-labelledby="ssn1"&gt;
-   &lt;span id="ssn1"&gt;Social Security#&lt;/span&gt; 
-   &lt;span style="color: #D90D0D;"&gt; * &lt;/span&gt;
-   &lt;input size="3" type="text" aria-required="true" title="First 3 digits" /&gt;-
-   &lt;input size="2" type="text" aria-required="true" title="Next 2 digits" /&gt;-
-   &lt;input size="4" type="text" aria-required="true" title="Last 4 digits" /&gt;
-&lt;/div&gt;</pre>
+            <p>Social security number fields which are nine digits long and broken up into three segments can be grouped using <code class="language-html">role="group"</code>.</p>
+<pre xml:space="preserve"><code class="language-html">&lt;div role="group" aria-labelledby="ssn1"&gt;
+  &lt;span id="ssn1"&gt;Social Security Number&lt;/span&gt; 
+  &lt;span style="color: #D90D0D;"&gt; (required)&lt;/span&gt;
+  &lt;input size="3" type="text" aria-required="true" title="First 3 digits"&gt;-
+  &lt;input size="2" type="text" aria-required="true" title="Next 2 digits"&gt;-
+  &lt;input size="4" type="text" aria-required="true" title="Last 4 digits"&gt;
+&lt;/div&gt;</code></pre>
             <p class="working-example">Working example: <a href="../../working-examples/aria-grouping-multipart-fields-ssn/">Multiple part field groups</a>.</p>
          
       </section>
       <section class="example">
          <h3>Identifying radio groups</h3>
          
-            <p>This example demonstrates use role=radiogroup. Note also that the radio buttons are custom controls with role=radio. (But the script to make the span actually work like radio buttons is not included in this example. ) One may optionally employ CSS to place a border around groups of such fields to visually reinforce the group relationship. The CSS properties are available below the form.</p>
-            <pre xml:space="preserve">&lt;h3&gt;Set Alerts for your Account&lt;/h3&gt;
-  &lt;div role="radiogroup" aria-labelledby="alert1"&gt;
-    &lt;p id="alert1"&gt;Send an alert when balance exceeds $ 3,000&lt;/p&gt;
-    &lt;div&gt;
-      &lt;span role="radio" aria-labelledby="a1r1" name="a1radio"&gt;&lt;/span&gt;
-      &lt;span id="a1r1"&gt;Yes&lt;/span&gt;
-    &lt;/div&gt;
-    &lt;div&gt;
-      &lt;span role="radio" aria-labelledby="a1r2" name="a1radio"&gt;&lt;/span&gt;
-      &lt;span id="a1r2"&gt;No&lt;/span&gt;
-    &lt;/div&gt;
+            <p>This example demonstrates use <code class="language-html">role=radiogroup</code>. Note also that the radio buttons are custom controls with <code class="language-html">role=radio</code>. (But the script to make the span actually work like radio buttons is not included in this example.) One may optionally employ CSS to place a border around groups of such fields to visually reinforce the group relationship. The CSS properties are available below the form.</p>
+<pre xml:space="preserve"><code class="language-html">&lt;h3&gt;Set Alerts for your Account&lt;/h3&gt;
+&lt;div role="radiogroup" aria-labelledby="alert1"&gt;
+  &lt;p id="alert1"&gt;Send an alert when balance exceeds $ 3,000&lt;/p&gt;
+  &lt;div&gt;
+    &lt;span role="radio" aria-labelledby="a1r1" name="a1radio"&gt;&lt;/span&gt;
+    &lt;span id="a1r1"&gt;Yes&lt;/span&gt;
   &lt;/div&gt;
-  &lt;div role="radiogroup" aria-labelledby="alert2"&gt;
-    &lt;p id="alert2"&gt;Send an alert when a charge exceeds $ 250&lt;/p&gt;
-    &lt;div&gt;
-      &lt;span role="radio" aria-labelledby="a2r1" name="a2radio"&gt;&lt;/span&gt;
-      &lt;span id="a2r1"&gt;Yes&lt;/span&gt;
-    &lt;/div&gt;
-    &lt;div&gt;
-      &lt;span role="radio" aria-labelledby="a2r2" name="a2radio"&gt;&lt;/span&gt;
-      &lt;span id="a2r2"&gt;No&lt;/span&gt;
-    &lt;/div&gt;
+  &lt;div&gt;
+    &lt;span role="radio" aria-labelledby="a1r2" name="a1radio"&gt;&lt;/span&gt;
+    &lt;span id="a1r2"&gt;No&lt;/span&gt;
   &lt;/div&gt;
-  &lt;p&gt;&lt;input type="submit" value="Continue" id="continue_btn" name="continue_btn" /&gt;&lt;/p&gt;</pre>
-            <p>Related CSS Style Definition to place a border around the group of fields :</p>
-            <pre xml:space="preserve">div[role=radiogroup] {
+&lt;/div&gt;
+&lt;div role="radiogroup" aria-labelledby="alert2"&gt;
+  &lt;p id="alert2"&gt;Send an alert when a charge exceeds $ 250&lt;/p&gt;
+  &lt;div&gt;
+    &lt;span role="radio" aria-labelledby="a2r1" name="a2radio"&gt;&lt;/span&gt;
+    &lt;span id="a2r1"&gt;Yes&lt;/span&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;span role="radio" aria-labelledby="a2r2" name="a2radio"&gt;&lt;/span&gt;
+    &lt;span id="a2r2"&gt;No&lt;/span&gt;
+   &lt;/div&gt;
+&lt;/div&gt;
+&lt;p&gt;&lt;input type="submit" value="Continue" id="continue_btn" name="continue_btn"&gt;&lt;/p&gt;</code></pre>
+
+<p>Related CSS Style Definition to place a border around the group of fields:</p>
+<pre xml:space="preserve"><code class="language-css">div[role=radiogroup] {
   border: black thin solid;
-} </pre>
+}</code></pre>
             <p class="working-example">Working example: <a href="../../working-examples/aria-grouping-related-fields/">using grouping roles to identify related form controls</a>.</p>
          
       </section>
    </section><section id="tests"><h2>Tests</h2>
       <section class="procedure"><h3>Procedure</h3>
-         <p>For groups of related controls where the individual labels for each control do not provide a sufficient description, and an additional group level description is needed:
-</p>
+         <p>For groups of related controls where the individual labels for each control do not provide a sufficient description, and an additional group level description is needed:</p>
          <ol>
-            <li> Check that the group of logically related input or select elements are contained within an element with role=group. 
-</li>
-            <li> Check that this group has an accessible name defined using <code class="att">aria-label</code> or <code class="att">aria-labelledby</code>.
-</li>
+            <li> Check that the group of logically related input or select elements are contained within an element with <code class="language-html">role=group</code>.</li>
+            <li> Check that this group has an accessible name defined using <code class="language-html">aria-label</code> or <code class="language-html">aria-labelledby</code>.</li>
          </ol>
       </section>
       <section class="results"><h3>Expected Results</h3>
@@ -80,5 +78,5 @@ <h3>Identifying radio groups</h3>
                   <a href="https://www.w3.org/TR/wai-aria/#group">Accessible Rich Internet Applications (WAI-ARIA), The Roles Model</a>
                </li>
          </ul>
-      
-   </section></body></html>
\ No newline at end of file
+      </section>
+</body></html>
diff --git a/techniques/aria/ARIA18.html b/techniques/aria/ARIA18.html
index 639b366850..0cec95c903 100644
--- a/techniques/aria/ARIA18.html
+++ b/techniques/aria/ARIA18.html
@@ -1,68 +1,56 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using aria-alertdialog to Identify Errors</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Using aria-alertdialog to Identify Errors</h1><section class="meta"><p class="id">ID: ARIA18</p><p class="technology">Technology: aria</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using aria-alertdialog to Identify Errors</title><link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/></head><body><h1>Using aria-alertdialog to Identify Errors</h1><section class="meta"><p class="id">ID: ARIA18</p><p class="technology">Technology: aria</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
       <p>Technologies that support <a href="https://www.w3.org/TR/wai-aria/">Accessible Rich Internet Applications (WAI-ARIA)</a>. </p>
    </section><section id="description"><h2>Description</h2>
-      <p>The purpose of this technique is to alert people that an input error has occured. Using role="alertdialog" creates a notification. This notification should be modal with the following characteristics:
+      <p>The purpose of this technique is to alert people that an input error has occurred. Using <code class="language-html">role="alertdialog"</code> creates a notification. This notification should be modal with the following characteristics:
 </p>
       <ul>
-         <li>
-               <code class="att">aria-label</code> or <code class="att">aria-labelledby</code> attribute gives the alertdialog an accessible name.
-</li>
-         <li>
-               <code class="att">aria-describedby</code> provides a reference to the text of the alert.
-</li>
-         <li>The alertdialog contains at least one focusable control, and the focus should move to that control when the alertdialog opens.
-</li>
-         <li>The tab order is constrained within the alertdialog whilst it is open.
-</li>
-         <li>When the dialog is dismissed, the focus moves back to the position it had before the dialog opened, if possible.
-</li>
+         <li><code class="language-html">aria-label</code> or <code class="language-html">aria-labelledby</code> attribute gives the alertdialog an accessible name.</li>
+         <li>The <code class="language-html">alertdialog</code> contains at least one focusable element, and the focus should move to that element when the <code class="language-html">alertdialog</code> opens.</li>
+         <li>The tab order is constrained within the <code class="language-html">alertdialog</code> whilst it is open.</li>
+         <li>When the <code class="language-html">alertdialog</code> is dismissed, the focus moves back to the position it had before the <code class="language-html">alertdialog</code> opened, if possible.</li>
       </ul>
-      <p>Note that the alertdialog should not be present in a way that it will be accessed by AT until it is needed. One way to do this is not to include it in the static HTML and instead to insert it into the DOM via script when the error condition is triggered. The insertion would correspond to the following HTML sample.
+
+      <p>Note that the <code class="language-html">alertdialog</code> should not be present in a way that it will be accessed by assistive technology until it is needed. One way to do this is not to include it in the static HTML and instead to insert it into the DOM via script when the error condition is triggered. The insertion would correspond to the following HTML sample.
 </p>
    </section><section id="examples"><h2>Examples</h2>
       <section class="example">
          <h3>Alert dialog</h3>
          
-            <p>This example shows how a notification using role="alertdialog" can be used to notify someone they have entered invalid information.</p>
-            <pre xml:space="preserve">&lt;div role="alertdialog" aria-labelledby="alertHeading" aria-describedby="alertText"&gt;
-&lt;h1 id="alertHeading"&gt;Error&lt;/h1&gt;
-&lt;div id="alertText"&gt;Employee's Birth Date is after their hire date. Please verify the birth date and hire date.&lt;/div&gt;
-&lt;button&gt;Save and Continue&lt;/button&gt;
-&lt;button&gt;Return to page and correct error&lt;/button&gt;
-&lt;/div&gt;</pre>
+            <p>This example shows how a notification using <code class="language-html">role="alertdialog"</code> can be used to notify someone they have entered invalid information.</p>
+<pre xml:space="preserve"><code class="language-html">&lt;div role="alertdialog" aria-labelledby="alertHeading"&gt;
+  &lt;h1 id="alertHeading"&gt;Error&lt;/h1&gt;
+  &lt;p&gt;Employee's Birth Date is after their hire date.
+   Please verify the birth date and hire date.&lt;/p&gt;
+  &lt;button&gt;Save and Continue&lt;/button&gt;
+  &lt;button&gt;Return to page and correct error&lt;/button&gt;
+&lt;/div&gt;</code></pre>
             <p class="working-example">Working example: <a href="../../working-examples/aria-alertdialog-identify-errors/">Alert dialog</a>.</p>
          
       </section>
    </section><section id="tests"><h2>Tests</h2>
       <section class="procedure"><h3>Procedure</h3>
          <ol>
-            <li>Trigger the error that causes the alertdialog to appear.
-</li>
-            <li>Determine that the alertdialog contains at least one focusable control, and the focus moves to that control when the alertdialog opens.
-</li>
-            <li>Determine that the tab order is constrained within the alertdialog while it is open, and when the dialog is dismissed, the focus moves back to the position it had before the dialog opene, if possible.
-</li>
-            <li>Examine the element with role="alertdialog" applied.
-</li>
-            <li>Determine that either the <code class="att">aria-label</code> or <code class="att">aria-labelledby</code> attribute has been correctly used to give the alertdialog an accessible name.
-</li>
-            <li>Determine that the contents of the alertdialog identifies the input error.
-</li>
-            <li>Determine whether contents of the alertdialog suggests how to fix the error.
-</li>
+            <li>Trigger the error that causes the <code class="language-html">alertdialog</code> to appear.</li>
+            <li>Determine that the <code class="language-html">alertdialog</code> contains at least one focusable element, and the focus moves to that element when the <code class="language-html">alertdialog</code> opens.</li>
+            <li>Determine that the tab order is constrained within the <code class="language-html">alertdialog</code> while it is open, and when the <code class="language-html">alertdialog</code> is dismissed, the focus moves back to the position it had before the <code class="language-html">alertdialog</code> opened, if possible.</li>
+            <li>Examine the element with <code class="language-html">alertdialog</code> applied.</li>
+            <li>Determine that either the <code class="language-html">aria-label</code> or <code class="language-html">aria-labelledby</code> attribute has been correctly used to give the alertdialog an accessible name.</li>
+            <li>Determine that the contents of the <code class="language-html">alertdialog</code> identifies the input error.</li>
+            <li>Determine whether contents of the <code class="language-html">alertdialog</code> suggests how to fix the error.</li>
          </ol>
       </section>
       <section class="results"><h3>Expected Results</h3>
          <ul>
-            <li>Checks 2, 3, 5 and 6 are true. For SC 3.3.3, Check 7 is also true.</li>
+            <li>Checks #2, #3, #5 and #6 are true. For Success Criterion 3.3.3, check #7 is also true.</li>
          </ul>
       </section>
    </section><section id="related"><h2>Related Techniques</h2></section><section id="resources"><h2>Resources</h2>
       
          <ul>
             <li>
-                  <a href="https://www.w3.org/TR/wai-aria-practices/">WAI-ARIA Authoring Practices 1.1</a> 
+                  <a href="https://www.w3.org/WAI/ARIA/apg/">WAI-ARIA Authoring Practices Guide</a> 
                </li>
          </ul>
       
-   </section></body></html>
\ No newline at end of file
+   </section>
+</body></html>
\ No newline at end of file
diff --git a/techniques/aria/ARIA19.html b/techniques/aria/ARIA19.html
index dc14771408..4fb21771f4 100644
--- a/techniques/aria/ARIA19.html
+++ b/techniques/aria/ARIA19.html
@@ -1,9 +1,9 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using ARIA role=alert or Live Regions to Identify Errors</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Using ARIA role=alert or Live Regions to Identify Errors</h1><section class="meta"><p class="id">ID: ARIA19</p><p class="technology">Technology: aria</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using ARIA role=alert or Live Regions to Identify Errors</title><link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/></head><body><h1>Using ARIA role=alert or Live Regions to Identify Errors</h1><section class="meta"><p class="id">ID: ARIA19</p><p class="technology">Technology: aria</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
       <p>Technologies that support <a href="https://www.w3.org/TR/wai-aria/">Accessible Rich Internet Applications (WAI-ARIA)</a>. </p>
    </section><section id="description"><h2>Description</h2>
-      <p>The purpose of this technique is to notify Assistive Technologies (AT) when an input error occurs. The <code class="att">aria-live</code> attribute makes it possible for an AT (such as a screen reader) to be notified when error messages are injected into a Live Region container. The content within the <code class="att">aria-live</code> region is automatically read by the AT, without the AT having to focus on the place where the text is displayed.
+      <p>The purpose of this technique is to notify Assistive Technologies (AT) when an input error occurs. The <code class="language-html">aria-live</code> attribute makes it possible for an AT (such as a screen reader) to be notified when error messages are injected into a Live Region container. The content within the <code class="language-html">aria-live</code> region is automatically read by the AT, without the AT having to focus on the place where the text is displayed.
 </p>
-      <p>There are also a number of <a href="https://www.w3.org/WAI/PF/aria-practices/#chobet">special case live region roles</a> which can be used instead of applying live region properties directly.</p>
+      <p>There are also a number of <a href="https://www.w3.org/TR/wai-aria/#live_region_roles">special case live region roles</a> which can be used instead of applying live region properties directly.</p>
    </section><section id="examples"><h2>Examples</h2>
       <section class="example">
          <h3>Injecting error messages into a container with role=alert already present in the DOM</h3>
@@ -14,85 +14,75 @@ <h3>Injecting error messages into a container with role=alert already present in
 </p>
             <p>jQuery is used to test if the inputs are empty on submit and inject error messages into the live region containers if so. Each time a new submit is attempted the previous error messages are removed from the container and new error messages injected.
 </p>
-            <pre xml:space="preserve">&lt;script src="http://code.jquery.com/jquery.js"&gt;&lt;/script&gt;
-&lt;script&gt;
-$(document).ready(function(e) {
-	$('#signup').submit(function() {
-		$('#errors').html('');
-		if ($('#first').val() === '') {
-			$('#errors').append('&lt;p&gt;Please enter your first name.&lt;/p&gt;');
-		}
-		if ($('#last').val() === '') {
-			$('#errors').append('&lt;p&gt;Please enter your last name.&lt;/p&gt;');
-		} 
-		if ($('#email').val() === '') {
-			$('#errors').append('&lt;p&gt;Please enter your email address.&lt;/p&gt;');
-		} 
-		return false;
-	});
-});
-&lt;/script&gt;
-
-&lt;form name="signup" id="signup" method="post" action=""&gt;
+<pre xml:space="preserve"><code class="language-javascript">$(document).ready(function(e) {
+  $('#signup').submit(function() {
+    $('#errors').html('');
+    if ($('#first').val() === '') {
+      $('#errors').append('&lt;p&gt;Please enter your first name.&lt;/p&gt;');
+    }
+    if ($('#last').val() === '') {
+      $('#errors').append('&lt;p&gt;Please enter your last name.&lt;/p&gt;');
+    } 
+    if ($('#email').val() === '') {
+      $('#errors').append('&lt;p&gt;Please enter your email address.&lt;/p&gt;');
+    }
+    return false;
+  });
+});</code>
+<code class="language-html">&lt;form name="signup" id="signup"&gt;
   &lt;p id="errors" role="alert" aria-atomic="true"&gt;&lt;/p&gt;
-  &lt;p&gt;
+  &lt;div&gt;
     &lt;label for="first"&gt;First Name (required)&lt;/label&gt;&lt;br&gt;
     &lt;input type="text" name="first" id="first"&gt;
-  &lt;/p&gt;
-  &lt;p&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
     &lt;label for="last"&gt;Last Name (required)&lt;/label&gt;&lt;br&gt;
     &lt;input type="text" name="last" id="last"&gt;
-  &lt;/p&gt;
-  &lt;p&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
     &lt;label for="email"&gt;Email (required)&lt;/label&gt;&lt;br&gt;
     &lt;input type="text" name="email" id="email"&gt;
-  &lt;/p&gt;
-  &lt;p&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
     &lt;input type="submit" name="button" id="button" value="Submit"&gt;
-  &lt;/p&gt;
-&lt;/form&gt;</pre>
+  &lt;/div&gt;
+ &lt;/form&gt;</code></pre>
             <p class="working-example">Working example: <a href="../../working-examples/aria-alert-identify-errors/">Using role=alert to identify errors</a>.</p>
-         
       </section>
    </section><section id="tests"><h2>Tests</h2>
       <section class="procedure"><h3>Procedure</h3>
          <ol>
-            <li>Determine that an empty error container role=alert or aria-live=assertive attribute is present in the DOM at page load.</li>
-            <li> Trigger the error that causes the content in the live region to appear or update.
-</li>
-            <li> Determine that the error message was injected into the already present error container.
-</li>
+            <li>Determine that an empty error container <code class="language-html">role=alert</code> or <code class="language-html">aria-live=assertive</code> attribute is present in the DOM at page load.</li>
+            <li> Trigger the error that causes the content in the live region to appear or update.</li>
+            <li> Determine that the error message was injected into the already present error container.</li>
          </ol>
       </section>
-      <section class="results"><h3>Expected Results</h3>
-         <ul>
-            <li>#1 and #3 are true.</li>
-         </ul>
+      <section class="results">
+				<h3>Expected Results</h3>
+        <ul>
+        	<li>#1 and #3 are true.</li>
+        </ul>
       </section>
-   </section><section id="related"><h2>Related Techniques</h2></section><section id="resources"><h2>Resources</h2>
-      
-         <ul>
-            <li>
-                  <a href="https://www.w3.org/TR/wai-aria-practices/">WAI-ARIA Authoring Practices</a>
-               </li>
-            <li>
-                  <a href="https://www.paciellogroup.com/blog/2012/06/html5-accessibility-chops-aria-rolealert-browser-support/">HTML5 Accessibility Chops: ARIA role=alert browser support</a>
-               </li>
-            <li> 
-                  <a href="http://html.cita.illinois.edu/nav/form/aria/">Form Labels, ARIA Examples (Experimental)</a>
-               </li>
-            <li> 
-                  <a href="http://www.msfw.com/accessibility/">MSF&amp;W Accessibility</a>
-               </li>
-            <li> 
-                  <a href="https://www.w3.org/TR/wai-aria/#aria-describedby">WAI-ARIA, Supported States and Properties, aria-describedby</a>
-               </li>
-            <li> 
-                  <a href="https://www.w3.org/TR/wai-aria/#alert">WAI-ARIA, The Roles model, alert</a>
-               </li>
-            <li> 
-                  <a href="https://www.w3.org/TR/html5/">HTML5, A vocabulary and associated APIs for HTML and XHTML</a>
-               </li>
-         </ul>
-      
-   </section></body></html>
\ No newline at end of file
+   </section>
+   <section id="related">
+      <h2>Related Techniques</h2>
+   </section>
+   <section id="resources">
+      <h2>Resources</h2>
+      <ul>
+        <li>
+          <a href="https://www.w3.org/WAI/ARIA/apg/">WAI-ARIA Authoring Practices Guide</a>
+        </li>
+        <li>
+        	<a href="https://www.paciellogroup.com/blog/2012/06/html5-accessibility-chops-aria-rolealert-browser-support/">HTML5 Accessibility Chops: ARIA role=alert browser support</a>
+        </li>
+        <li> 
+          <a href="https://www.w3.org/TR/wai-aria/#aria-describedby">WAI-ARIA, Supported States and Properties, aria-describedby</a>
+        </li>
+        <li> 
+          <a href="https://www.w3.org/TR/wai-aria/#alert">WAI-ARIA, The Roles model, alert</a>
+        </li>
+      </ul>
+		</section>
+	</body>
+	</html>
\ No newline at end of file
diff --git a/techniques/aria/ARIA2.html b/techniques/aria/ARIA2.html
index 2049f559cd..713a9ac717 100644
--- a/techniques/aria/ARIA2.html
+++ b/techniques/aria/ARIA2.html
@@ -1,203 +1,138 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Identifying a required field with the aria-required property</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Identifying a required field with the aria-required property</h1><section class="meta"><p class="id">ID: ARIA2</p><p class="technology">Technology: aria</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>Identifying a required field with the aria-required property</title>
+    <link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+  </head>
+  <body>
+    <h1>Identifying a required field with the aria-required property</h1>
+    <section class="meta">
+      <p class="id">ID: ARIA2</p>
+      <p class="technology">Technology: aria</p>
+      <p class="type">Type: Technique</p>
+    </section>
+    <section id="applicability">
+      <h2>When to Use</h2>
       <p>Technologies that support <a href="https://www.w3.org/TR/wai-aria/">Accessible Rich Internet Applications (WAI-ARIA)</a>. </p>
-   </section><section id="description"><h2>Description</h2>
+   </section>
+   <section id="description">
+     <h2>Description</h2>
       <p>The objective of this technique is to provide programmatic indication that a form field (which shown through presentation to be required) is mandatory for successful submission of a form.</p>
       <p>The fact that the element is required is often visually presented (via a text or non-text symbol, or text indicating input is required or color / styling) but this is not programmatically determinable as part of the field's name.</p>
-      <p>The WAI-ARIA <code class="prop">aria-required</code> property indicates that user input is required before submission. The <code class="prop">aria-required</code> property can have values of <code class="attval">true</code> or <code class="attval">false</code>. For example, if a user must fill in an address field, then <code class="att">aria-required</code> is set to <code class="attval">true</code>.</p>
+      <p>The WAI-ARIA <code class="language-html">aria-required</code> property indicates that user input is required before submission. The <code class="language-html">aria-required</code> property can have values of <code class="language-html">true</code> or <code class="language-html">false</code>. For example, if a user must fill in an address field, then <code class="language-html">aria-required</code> is set to <code class="language-html">true</code>.</p>
       <div class="note">
-         <p>Note: Use of aria-required="true" might be beneficial even when an asterisk or other text symbol is programmatically associated with the field as it may reinforce its <code class="prop">required</code> property for some assistive technology users.</p>
-         <p>The fact that the element is required is often visually   presented (such as a sign or symbol after the control). Using the <code class="prop">aria-required</code> property in addition to the visual presentation makes it much easier   for user agents to pass on this important information to the user in a   user agent-specific manner.  Refer to <a href="https://www.w3.org/TR/wai-aria-primer/#ariahtml">Supporting   ARIA in XHTML and HTML 4.01</a> for information on how to provide   WAI-ARIA States and Properties with XHTML and HTML. WAI-ARIA States and   Properties is compatible with other languages as well; refer to documentation in those languages. </p>
+         <p>Use of <code class="language-html">aria-required="true"</code> might be beneficial even when an asterisk or other text symbol is programmatically associated with the field as it may reinforce its <code class="language-html">required</code> property for some assistive technology users.</p>
+         <p>The fact that the element is required is often visually presented (such as a sign or symbol after the control). Using the <code class="language-html">aria-required</code> property in addition to the visual presentation makes it much easier for user agents to pass on this important information to the user in a user agent-specific manner. Refer to <a href="https://www.w3.org/TR/html-aria/">ARIA in HTML</a> for information on how to provide WAI-ARIA States and Properties with HTML. WAI-ARIA States and Properties are compatible with other languages as well; refer to documentation in those languages. </p>
       </div>
-   </section><section id="examples"><h2>Examples</h2>
+   </section>
+   <section id="examples">
+     <h2>Examples</h2>
       <section class="example">
-         <h3></h3>
+         <h3>The <code class="language-html">required</code> property is indicated by an asterisk placed in the <code class="language-html">label</code> element</h3>
          
-            <p>The <code class="prop">required</code> property is indicated by an asterisk placed next to the label element:</p>
-            <pre xml:space="preserve">
-&lt;form action="#" method="post"  id="login1" onsubmit="return errorCheck1()"&gt;
-  &lt;p&gt;Note: [*]denotes mandatory field&lt;/p&gt;
-  &lt;p&gt;
-    &lt;label for="usrname"&gt;Login name: &lt;/label&gt;
-    &lt;input type="text" name="usrname" id="usrname" aria-required="true"/&gt;[*]
-  &lt;/p&gt;
-  &lt;p&gt;
-    &lt;label for="pwd"&gt;Password&lt;/label&gt;
-    &lt;input type="password" name="pwd" id="pwd" size="12" aria-required="true" /&gt;[*]
-  &lt;/p&gt;
-  &lt;p&gt;
-    &lt;input type="submit" value="Login" id="next_btn" name="next_btn"/&gt;
-  &lt;/p&gt;
-
-&lt;/form&gt;		</pre>
+<pre xml:space="preserve"><code class="language-html">&lt;form&gt;
+  &lt;p&gt;Note: * denotes a required field&lt;/p&gt;
+  &lt;div&gt;
+    &lt;label for="usrname"&gt;Login name *:&lt;/label&gt;
+    &lt;input aria-required="true" autocomplete="username" id="usrname" type="text"&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;label for="pwd"&gt;Password *:&lt;/label&gt;
+    &lt;input aria-required="true" autocomplete="current-password" 
+     id="pwd" type="password"&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;input type="submit" value="Login"&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</code></pre>
          
-      </section>
-      <section class="example">
-         <h3></h3>
+    </section>
+    <section class="example">
+      <h3>The <code class="language-html">required</code> property is indicated by the word "required" placed next to the <code class="language-html">label</code> element</h3>
          
-            <p>The <code class="prop">required</code> property is indicated by the word "required" placed next to the <code class="el">label</code> element:</p>
-            <pre xml:space="preserve">
-&lt;form action="#" method="post" id="step1" onsubmit="return errorCheck2()"&gt;
-  &lt;p&gt;
-    &lt;label for="fname"&gt;First name: &lt;/label&gt;
-    &lt;input type="text" id="fname" aria-required="true" /&gt;
-    [required]
-  &lt;/p&gt;
-  &lt;p&gt;
-    &lt;label for="mname"&gt;Middle name: &lt;/label&gt;
-    &lt;input type="text" id="mname" /&gt;
-  &lt;/p&gt;
-  &lt;p&gt;
-    &lt;label for="lname"&gt;Last name: &lt;/label&gt;
-    &lt;input type="text" id="lname" aria-required="true" /&gt;
-    [required]
-  &lt;/p&gt;
-  &lt;p&gt;
-    &lt;label for="email"&gt;Email address: &lt;/label&gt;
-    &lt;input type="text" id="email" aria-required="true" /&gt;
-    [required]
-  &lt;/p&gt;
-  &lt;p&gt;
-    &lt;label for="zip_post"&gt;Zip / Postal code: &lt;/label&gt;
-    &lt;input type="text" id="zip_post" size="6" aria-required="true" /&gt;
-    [required]
-  &lt;/p&gt;
-  &lt;p&gt;
-    &lt;input type="submit" value="Next Step" id="step_btn" name="step_btn" /&gt;
-  &lt;/p&gt;
-&lt;/form&gt; </pre>
+<pre xml:space="preserve"><code class="language-html">&lt;form&gt;
+  &lt;div&gt;
+    &lt;label for="fname"&gt;First name:&lt;/label&gt; &lt;span&gt;(required)&lt;/span&gt;
+    &lt;input aria-required="true" autocomplete="given-name" id="fname" type="text"&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;label for="mname"&gt;Middle name:&lt;/label&gt; &lt;span&gt;(required)&lt;/span&gt;
+    &lt;input autocomplete="additional-name" id="mname" type="text"&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;label for="lname"&gt;Last name:&lt;/label&gt; &lt;span&gt;(required)&lt;/span&gt;
+    &lt;input aria-required="true" autocomplete="family-name" id="lname" type="text"&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;label for="email"&gt;Email address:&lt;/label&gt; &lt;span&gt;(required)&lt;/span&gt;
+    &lt;input aria-required="true" autocomplete="email" id="email" type="text"&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;label for="zip_post"&gt;Zip / Postal code:&lt;/label&gt; &lt;span&gt;(required)&lt;/span&gt;
+    &lt;input aria-required="true" autocomplete="postal-code" id="zip_post" type="text"&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;input type="submit" value="Next Step"&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</code></pre>
          
       </section>
       <section class="example">
-         <h3></h3>
+         <h3>Required fields are indicated by a red border around the fields and a star icon rendered via CSS using <code class="language-css">::after</code></h3>
          
-            <p>Required fields are indicated by a red border around the fields and a star icon rendered via CSS using content:before. This example also uses custom radio buttons with role=radio but the script to make the span actually work like radio buttons is not included in this example. The CSS properties are available below the form.
-</p>
-            <pre xml:space="preserve">
-&lt;form action="#" method="post" id="alerts1"&gt;
-  &lt;label for="acctnum" data-required="true"&gt;Account Number&lt;/label&gt;
-  &lt;input size="12" type="text" id="acctnum"
-      aria-required="true" name="acctnum" /&gt;
+        <p>This example uses custom radio buttons with <code class="language-html">role=radio</code>. The CSS properties are available below the form.</p>
+<pre xml:space="preserve"><code class="language-html">&lt;form&gt;
+  &lt;label data-required="true" for="acctnum"&gt;Account Number&lt;/label&gt;
+  &lt;input aria-required="true" id="acctnum" type="text"&gt;
 
- &lt;p id="radio_label" data-required="true"&gt;Please send an alert when balance exceeds $3,000.&lt;/p&gt;
+  &lt;p data-required="true" id="radio_label"&gt;
+    Please send an alert when balance exceeds $3,000.
+  &lt;/p&gt;
 
- &lt;ul  id="rg" role="radiogroup" aria-required="true" aria-labelledby="radio_label"&gt;
-    &lt;li id="rb1" role="radio"&gt;Yes&lt;/li&gt;
-    &lt;li id="rb2" role="radio"&gt;No&lt;/li&gt;
- &lt;/ul&gt;
-&lt;/form&gt;
- </pre>
+  &lt;ul aria-required="true" aria-labelledby="radio_label" role="radiogroup"&gt;
+    &lt;li aria-checked="false" id="rb1" role="radio" tabindex="0"&gt;Yes&lt;/li&gt;
+    &lt;li aria-checked="false" id="rb2" role="radio" tabindex="-1"&gt;No&lt;/li&gt;
+  &lt;/ul&gt;
+&lt;/form&gt;</code></pre>
  <p>Related CSS style definition for this example:</p>
-            <pre xml:space="preserve">
-[aria-required=true] {
+<pre xml:space="preserve"><code class="language-css">[aria-required=true] {
   border: red thin solid;
 }
-[data-required=true]:after {
+[data-required=true]::after {
   content: url('/iconStar.gif');
-}
- </pre>
-         
-      </section>
-      <section class="example">
-         <h3>A required text input field in XHTML</h3>
-         
-            <p>The following example shows an XHTML document using the <code class="prop">aria-required</code> property to indicate that a form field must be submitted. The mandatory   nature of the field is also indicated in the label as a fallback for   user agents that do not support WAI-ARIA. </p>
-         
-         <pre xml:space="preserve">
-&lt;?xml version="1.0" encoding="UTF-8"?&gt;
-&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1
-    For Accessible Adaptable Applications//EN"
-  "https://www.w3.org/WAI/ARIA/schemata/xhtml-aria-1.dtd"&gt;
-&lt;html xmlns="http://www.w3.org/1999/xhtml"
-          xml:lang="en"&gt;
-  &lt;head&gt;
-    &lt;title&gt;Required Input&lt;/title&gt;
-  &lt;/head&gt;
-  &lt;body&gt;
-    &lt;h1&gt;Required Input&lt;/h1&gt;
-    &lt;p&gt;The following form input field must be completed by the user
-    before the form can be submitted.&lt;/p&gt;
-    &lt;form action="http://example.com/submit"&gt;
-      &lt;p&gt;
-        &lt;label for="test"&gt;Test (required)&lt;/label&gt;
-        &lt;input name="ariaexample" id="example" aria-required="true" aria-label="Test"/&gt;
-      &lt;/p&gt;
-      &lt;p&gt;
-        &lt;input type="submit" value="Submit" /&gt;
-      &lt;/p&gt;
-    &lt;/form&gt;
-  &lt;/body&gt;
-&lt;/html&gt;
-		</pre>
-      </section>
-      <section class="example">
-         <h3>Adding <code class="prop">aria-required</code> property via script</h3>
-         
-            <p>This example uses scripting to add the <code class="prop">aria-required</code> property to a form element. The required property is assigned using the setAttribute()   API. </p>
-            <p>The array variable, <var>requiredIds</var>, is created with the   ids of the elements which need to be marked as required. The setRequired()   function is called from the onload event of the <code class="obj">window</code>   object. </p>
-            <p>The setRequired() function loops through all of the   ids provided, retrieves the element and assigns the <code class="prop">aria-required</code> property of true using the setAttribute() function. </p>
-            <p>When this page is accessed using Firefox 3.0 or later and a   screen reader that supports WAI-ARIA, the screen reader will speak   "required" when reading the label for the input fields. </p>
-         
-         <pre xml:space="preserve">&lt;head&gt;
- &lt;script type="text/javascript"&gt;
- //&lt;![CDATA[
-
- // array or ids on the required fields on this page
- var requiredIds = new Array( "firstName", "lastName");
-
- // function that is run after the page has loaded to set the aria-required property on each of the
- //elements in requiredIds array of id values
- function setRequired(){
- 	if (requiredIds){
- 		var field;
- 		for (var i = 0; i&lt; requiredIds.length; i++){
- 			field = document.getElementById(requiredIds[i]);
- 			field.setAttribute("aria-required", "true");
- 		}
- 	}
- }
- window.onload=setRequired;
-//]]&gt;
- &lt;/script&gt;
- &lt;/head&gt;
- &lt;body&gt;
- &lt;p&gt;Please enter the following data.  Required fields have been programmatically identified
- as required and  marked with an asterisk (*) following the field label.&lt;/p&gt;
- &lt;form action="submit.php"&gt;
- &lt;p&gt;
- &lt;label for="firstName"&gt;First Name *: &lt;/label&gt;&lt;input type="text" name="firstName"
-    id="firstName" value="" /&gt;
- &lt;label for="lastName"&gt;Last Name *: &lt;/label&gt;&lt;input type="text" name="lastName"
-    id="lastName"  value="" /&gt;
- &lt;/p&gt;
- &lt;/form&gt;
- &lt;/body&gt;
-</pre>
-      </section>
-   </section><section id="tests"><h2>Tests</h2>
-      <section class="procedure"><h3>Procedure</h3>
+}</code></pre>
+    </section>
+  </section>
+   <section id="tests">
+     <h2>Tests</h2>
+      <section class="procedure">
+        <h3>Procedure</h3>
          <p>For each control which is shown via presentation to be required.</p>
          <ol>
-			<li>Check whether the <code class="att">aria-required</code> attribute is present:</li>
-            <li>Check whether the value of the <code class="att">aria-required</code> attribute is the correct required state of the user interface component.</li>
+			    <li>Check whether the <code class="language-html">aria-required</code> attribute is present:</li>
+          <li>Check whether the value of the <code class="language-html">aria-required</code> attribute is the correct required state of the user interface component.</li>
          </ol>
       </section>
-      <section class="results"><h3>Expected Results</h3>
+      <section class="results">
+        <h3>Expected Results</h3>
          <ul>
             <li>Checks #1 and #2 are true</li>
          </ul>
       </section>
-   </section><section id="resources"><h2>Resources</h2>
-      
-         <ul>
-            <li>
-									         <a href="https://www.w3.org/WAI/intro/aria">WAI-ARIA Overview</a>
-								       </li>
-            <li>
-                  <a href="https://www.w3.org/TR/wai-aria-practices/">WAI-ARIA Authoring Practices 1.1</a>
-               </li>
-            <li>
-                  <a href="http://www.deque.com/blog/aria-requiredtrue-wcag-2-compliance-practice/">Aria-required=true: WCAG 2 Compliance versus Best Practice</a>
-               </li>
-         </ul>
-      
-   </section></body></html>
\ No newline at end of file
+   </section>
+   <section id="resources">
+     <h2>Resources</h2> 
+      <ul>
+        <li>
+          <a href="https://www.w3.org/WAI/standards-guidelines/aria/">WAI-ARIA Overview</a>.
+        </li>
+        <li>
+          <a href="https://www.w3.org/WAI/ARIA/apg/">WAI-ARIA Authoring Practices Guide</a>.
+        </li>
+        <li>
+          <a href="http://www.deque.com/blog/aria-requiredtrue-wcag-2-compliance-practice/">aria-required=true: WCAG 2 Compliance versus Best Practice</a>.
+        </li>
+      </ul>
+   </section>
+</body>
+  </html>
\ No newline at end of file
diff --git a/techniques/aria/ARIA20.html b/techniques/aria/ARIA20.html
index 36b1cbe8cd..ff47428ffb 100644
--- a/techniques/aria/ARIA20.html
+++ b/techniques/aria/ARIA20.html
@@ -1,71 +1,86 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using the region role to identify a region of the page</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Using the region role to identify a region of the page</h1><section class="meta"><p class="id">ID: ARIA20</p><p class="technology">Technology: aria</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using the region role to identify a region of the page</title><link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/></head><body><h1>Using the region role to identify a region of the page</h1><section class="meta"><p class="id">ID: ARIA20</p><p class="technology">Technology: aria</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
       <p>Technologies that support <a href="https://www.w3.org/TR/wai-aria/">Accessible Rich Internet Applications</a>.</p>
    </section><section id="description"><h2>Description</h2>
-<p>This technique demonstrates how to assign a generic <code class="prop">region</code> role to a section of a page so that user agents and assistive technologies may be able to programmatically identify it. The <code class="prop">region</code> role demarcates a segment of the page that contains content of significance so that it is more readily discoverable and navigable. The generic region should be used when the section cannot be marked up using a standard document landmark role (see <a href="https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA11">ARIA11</a>).</p>
-<p>It is important to name regions, because they are generic grouping elements and users will need some way to tell which region they are in. Regions can be named using <code class="att">aria-labelledby</code>, <code class="att">aria-label</code>, or another technique. Doing so helps to better expose content and information relationships on the page. The role of <code class="prop">region</code> should be used prudently, because if overused they can make the page overly verbose for screen reader users.</p>
+<p>This technique demonstrates how to assign a generic <code class="language-html">region</code> role to a section of a page so that user agents and assistive technologies may be able to programmatically identify it. The <code class="language-html">region</code> role demarcates a segment of the page that contains content of significance so that it is more readily discoverable and navigable. The generic region should be used when the section cannot be marked up using a standard document landmark role (see <a href="ARIA11">ARIA11</a>).</p>
+<p>It is important to name regions, because they are generic grouping elements and users will need some way to tell which region they are in. Regions can be named using <code class="language-html">aria-labelledby</code>, <code class="language-html">aria-label</code>, or another technique. Doing so helps to better expose content and information relationships on the page. The role of <code class="language-html">region</code> should be used prudently, because if overused they can make the page overly verbose for screen reader users.</p>
    </section><section id="examples"><h2>Examples</h2>
       <section class="example">
          <h3>Region on a news website</h3>
          
-            <p>A section on the home page of a news website that contains a poll that changes every week is marked up with role="region". The h3 text above the form is referenced as the region's name using <code class="att">aria-labelledby</code>.</p>
-         <pre xml:space="preserve">
-&lt;div role="region" aria-labelledby="pollhead"&gt;
-&lt;h3 id="pollhead"&gt;This week's Poll&lt;/h3&gt;
-&lt;form method="post" action="#"&gt;
-  &lt;fieldset&gt;
-    &lt;legend&gt;Do you believe the tax code needs to be overhauled?&lt;/legend&gt;
-    &lt;input type="radio" id="r1" name="poll" /&gt;
-    &lt;label for="r1"&gt;No, it's fine the way it is&lt;/label&gt;
-    &lt;input type="radio" id="r2" name="poll" /&gt;
-    &lt;label for="r2"&gt;Yes, the wealthy need to pay more&lt;/label&gt;
-    &lt;input type="radio" id="r3" name="poll" /&gt;
-    &lt;label for="r3"&gt;Yes, we need to close corporate loopholes&lt;/label&gt;
-    &lt;input type="radio" id="r4" name="poll" /&gt;
-    &lt;label for="r4"&gt;Changes should be made across the board&lt;/label&gt;
-  &lt;/fieldset&gt;
-&lt;/form&gt;
-&lt;a href="results.php"&gt;See Poll Results&lt;/a&gt;
-&lt;/div&gt;			
-            </pre>
+            <p>A section on the home page of a news website that contains a poll that changes every week is marked up with <code class="language-html">role="region"</code>. The <code class="language-html">h3</code> above the form is referenced as the region's name using <code class="language-html">aria-labelledby</code>.</p>
+<pre xml:space="preserve"><code class="language-html">&lt;div role="region" aria-labelledby="pollhead"&gt;
+  &lt;h3 id="pollhead"&gt;This week's Poll&lt;/h3&gt;
+  &lt;form&gt;
+    &lt;fieldset&gt;
+      &lt;legend&gt;Do you believe the tax code needs to be overhauled?&lt;/legend&gt;
+      &lt;input type="radio" id="r1" name="poll"&gt;
+      &lt;label for="r1"&gt;No, it's fine the way it is&lt;/label&gt;
+      &lt;input type="radio" id="r2" name="poll"&gt;
+      &lt;label for="r2"&gt;Yes, the wealthy need to pay more&lt;/label&gt;
+      &lt;input type="radio" id="r3" name="poll"&gt;
+      &lt;label for="r3"&gt;Yes, we need to close corporate loopholes&lt;/label&gt;
+      &lt;input type="radio" id="r4" name="poll"&gt;
+      &lt;label for="r4"&gt;Changes should be made across the board&lt;/label&gt;
+    &lt;/fieldset&gt;
+  &lt;/form&gt;
+  &lt;a href="results.php"&gt;See Poll Results&lt;/a&gt;
+&lt;/div&gt;</code></pre>
             
          
       </section>
       <section class="example">
          <h3>Identifying a region on a banking site</h3>
          
-            <p>A user can expand links on a bank website after logging in to see details of term deposit accounts. The details are within a span marked up with <code class="prop">region</code> role. The heading for the region has role=heading and is included in the <code class="att">aria-labelledby</code> that names the region.</p>
-         <pre xml:space="preserve">
-&lt;ol&gt;
-	&lt;li&gt;&lt;a id="l1" href="#" aria-expanded="false" title="Show details" aria-controls="block1" &gt;John Henry's Account&lt;/a&gt;&lt;img src="images/panel_expand.gif" alt="" /&gt;
-		 &lt;div id="block1" class="nowHidden" tabindex="-1" aria-labelledby="l1 cd1" role="region"&gt;&lt;span id="cd1" role="heading" aria-level="3"&gt;Certificate of  Deposit:&lt;/span&gt;
-		 &lt;table&gt;
-			 &lt;tr&gt;&lt;th scope="row"&gt;Account:&lt;/th&gt; &lt;td&gt;25163522&lt;/td&gt;&lt;/tr&gt;
-			 &lt;tr&gt;&lt;th scope="row"&gt;Start date:&lt;/th&gt; &lt;td&gt;February 1, 2014&lt;/td&gt;&lt;/tr&gt;
-			 &lt;tr&gt;&lt;th scope="row"&gt;Maturity date:&lt;/th&gt;&lt;td&gt;February 1, 2016&lt;/td&gt;&lt;/tr&gt;
-			 &lt;tr&gt;&lt;th scope="row"&gt;Deposit Amount:&lt;/th&gt; &lt;td&gt;$ 3,000.00&lt;/td&gt;&lt;/tr&gt;
-			 &lt;tr&gt;&lt;th scope="row"&gt;Maturity Amount:&lt;/th&gt; &lt;td&gt;$ 3,072.43&lt;/td&gt;&lt;/tr&gt;
-		 &lt;/table&gt;
-		 &lt;/div&gt;
-	 &lt;/li&gt;
- &lt;/ol&gt;
-            </pre>
+            <p>A user can expand links on a bank website after logging in to see details of term deposit accounts. The details are within a <code class="language-html">span</code> marked up with <code class="language-html">region</code> role. The heading for the region has <code class="language-html">role=heading</code> and is included in the <code class="language-html">aria-labelledby</code> that names the region.</p>
+<pre xml:space="preserve"><code class="language-html">&lt;ol&gt;
+  &lt;li&gt;
+    &lt;button aria-controls=&quot;block1&quot; aria-expanded=&quot;false&quot; id=&quot;l1&quot; title=&quot;show details&quot;
+      type=&quot;button&quot;&gt;John Henry&#39;s Account &lt;img alt=&quot;&quot; src=&quot;images/panel_expand.gif&quot;&gt;
+    &lt;/button&gt;
+    &lt;div id=&quot;block1&quot; class=&quot;nowHidden&quot; tabindex=&quot;-1&quot; aria-labelledby=&quot;l1 cd1&quot;
+      role=&quot;region&quot;&gt;
+      &lt;span id=&quot;cd1&quot; role=&quot;heading&quot; aria-level=&quot;3&quot;&gt;Certificate Of Deposit&lt;/span&gt;
+      &lt;table&gt;
+        &lt;tr&gt;
+          &lt;th scope=&quot;row&quot;&gt;Account:&lt;/th&gt;
+          &lt;td&gt;25163522&lt;/td&gt;
+         &lt;/tr&gt;
+         &lt;tr&gt;
+          &lt;th scope=&quot;row&quot;&gt;Start date:&lt;/th&gt;
+          &lt;td&gt;February 1, 2014&lt;/td&gt;
+         &lt;/tr&gt;
+         &lt;tr&gt;
+          &lt;th scope=&quot;row&quot;&gt;Maturity date:&lt;/th&gt;
+          &lt;td&gt;February 1, 2016&lt;/td&gt;
+         &lt;/tr&gt;
+         &lt;tr&gt;
+          &lt;th scope=&quot;row&quot;&gt;Deposit Amount:&lt;/th&gt;
+          &lt;td&gt;$ 3,000.00&lt;/td&gt;
+         &lt;/tr&gt;
+         &lt;tr&gt;
+          &lt;th scope=&quot;row&quot;&gt;Maturity Amount:&lt;/th&gt;
+          &lt;td&gt;$ 3,072.43&lt;/td&gt;
+        &lt;/tr&gt;
+      &lt;/table&gt;
+    &lt;/div&gt;
+  &lt;/li&gt;
+&lt;/ol&gt;</code></pre>
             
          
       </section>
       <section class="example">
          <h3>Identifying a portlet with a generic region</h3>
          
-            <p>This example shows how a generic <code class="prop">region</code> landmark might be added to a weather portlet. There is no existing text on the page that can be referenced as the label, so it is labelled with <code class="att">aria-label</code>.
+            <p>This example shows how a generic <code class="language-html">region</code> landmark might be added to a weather portlet. There is no existing text on the page that can be referenced as the label, so it is labelled with <code class="language-html">aria-label</code>.
 </p>
          
-         <pre xml:space="preserve">
-&lt;div role="region" aria-label="weather portlet"&gt; 
-	...
-&lt;/div&gt;            </pre>
+<pre xml:space="preserve"><code class="language-html">&lt;div role="region" aria-label="weather portlet"&gt; 
+  ...
+&lt;/div&gt;</code></pre>
       </section>
    </section><section id="tests"><h2>Tests</h2>
       <section class="procedure"><h3>Procedure</h3>
-         <p>For each section marked up with role="region":</p>
+         <p>For each section marked up with <code class="language-html">role="region"</code>:</p>
          <ol>
             <li>Examine the content and ensure that it is important enough to have an independent landmark</li>
             <li>Ensure that a standard landmark role is not appropriate for this content</li>
@@ -78,15 +93,17 @@ <h3>Identifying a portlet with a generic region</h3>
          </ul>
       </section>
    </section><section id="related"><h2>Related Techniques</h2><ul>
-      <li><a href="../aria/ARIA11">ARIA11</a></li>
-      <li><a href="../aria/ARIA12">ARIA12</a></li>
-      <li><a href="../aria/ARIA13">ARIA13</a></li>
-   </ul></section><section id="resources"><h2>Resources</h2>
-      
-         <ul>
-            <li>
-                  <a href="https://www.w3.org/TR/wai-aria/#region">The Roles Model (role=region)</a>
-               </li>
-         </ul>
-      
-   </section></body></html>
\ No newline at end of file
+      <li><a href="ARIA11">ARIA11</a></li>
+      <li><a href="ARIA12">ARIA12</a></li>
+      <li><a href="ARIA13">ARIA13</a></li>
+   </ul></section>
+   <section id="resources">
+      <h2>Resources</h2>
+      <ul>
+         <li>
+            <a href="https://www.w3.org/TR/wai-aria/#region">The Roles Model (role=region)</a>
+         </li>
+      </ul>
+   </section>
+</body>
+</html>
\ No newline at end of file
diff --git a/techniques/aria/ARIA21.html b/techniques/aria/ARIA21.html
index 3db6794047..5a80a6672a 100644
--- a/techniques/aria/ARIA21.html
+++ b/techniques/aria/ARIA21.html
@@ -1,114 +1,117 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using Aria-Invalid to Indicate An Error Field</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Using Aria-Invalid to Indicate An Error Field</h1><section class="meta"><p class="id">ID: ARIA21</p><p class="technology">Technology: aria</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using aria-invalid to Indicate An Error Field</title><link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/></head><body><h1>Using <code class="language-html">aria-invalid</code> to Indicate An Error Field</h1><section class="meta"><p class="id">ID: ARIA21</p><p class="technology">Technology: aria</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
       <p>HTML with <a href="https://www.w3.org/TR/wai-aria/">Accessible Rich Internet Applications</a>.</p>
    </section><section id="description"><h2>Description</h2>
-<p>This technique demonstrates how <code class="att">aria-invalid</code> may be employed to specifically identify fields that have failed validation. Its use is most suitable when:</p>   
+<p>This technique demonstrates how <code class="language-html">aria-invalid</code> may be employed to specifically identify fields that have failed validation. Its use is most suitable when:</p>   
  <ul>
  <li>The error description does not programmatically identify the failed fields</li>
  <li>The failed fields are identified in a manner that is not available to some users - for example by using an error-icon rendered visually by some technique that does not rely on color such as a visual cue like a border.</li>
  </ul>
-<div class="note"><p>One of the above two situations may be true for a field which has programmatically associated label and / or instructions that conveys data format, a data range, or the <code class="prop">required</code> property.</p></div>   
-<p>While it is always preferable to programmatically associate specific error description with the failed field, the page's design or the framework employed may sometimes constrain the author's ability to do so. In these cases, authors may programmatically set <code class="att">aria-invalid</code> to "true" on the fields that have failed validation. This is interpretable mainly by assistive technologies (like screen readers / screen magnifiers) employed by users who are vision impaired. When a field has <code class="att">aria-invalid</code> set to “true”, VoiceOver in Safari announces “invalid data” when the field gets focus; JAWS and NVDA notify the error as an “invalid entry”.</p>
-<p>This ARIA attribute has to be set / turned on programmatically. It should not be set to “true” before input validation is performed or the form is submitted. Setting <code class="att">aria-invalid</code> to “false” is the same as not placing the attribute for the form control at all. Quite understandably, nothing is conveyed by assistive technology to users in this case.</p>
-<p>When visible text is used to programmatically identify a failed field and / or convey how the error can be corrected, setting <code class="att">aria-invalid</code> to "true" is not required from a strict compliance standpoint but may still provide helpful information for users.</p>
+<div class="note"><p>One of the above two situations may be true for a field which has programmatically associated label and / or instructions that conveys data format, a data range, or the <code class="language-html">required</code> property.</p></div>   
+<p>While it is always preferable to programmatically associate specific error description with the failed field, the page's design or the framework employed may sometimes constrain the author's ability to do so. In these cases, authors may programmatically set <code class="language-html">aria-invalid</code> to <code class="language-html">"true"</code> on the fields that have failed validation. This is interpretable mainly by assistive technologies (like screen readers / screen magnifiers) employed by users who are vision impaired. When a field has <code class="language-html">aria-invalid</code> set to “true”, VoiceOver in Safari announces <samp>invalid</samp> data when the field gets focus; JAWS and NVDA notify the error as an <samp>invalid entry</samp>.</p>
+<p>This ARIA attribute has to be set / turned on programmatically. It should not be set to “true” before input validation is performed or the form is submitted. Setting <code class="language-html">aria-invalid</code> to “false” is the same as not placing the attribute for the form control at all. Quite understandably, nothing is conveyed by assistive technology to users in this case.</p>
+<p>When visible text is used to programmatically identify a failed field and / or convey how the error can be corrected, setting <code class="language-html">aria-invalid</code> to "true" is not required from a strict compliance standpoint but may still provide helpful information for users.</p>
       </section><section id="examples"><h2>Examples</h2>
       <section class="example">
          <h3>Using aria-invalid on required fields</h3>
          
-            <p>The <code class="att">aria-invalid</code> attribute is used on required fields that have no input. A message above the form conveys that form submission has failed due to this.</p>
+            <p>The <code class="language-html">aria-invalid</code> attribute is used on required fields that have no input. A message above the form conveys that form submission has failed due to this.</p>
 			<p>A portion of the jQuery code and the HTML form markup follow:</p>
-         <pre xml:space="preserve">
-&lt;code&gt;
-&lt;script&gt;
+<pre xml:space="preserve"><code class="language-html">&lt;script&gt;
 ...
 ...
-		if ($('#first').val() === '') {
-			$('#first').attr("aria-invalid", "true");
+   if ($('#first').val() === '') {
+      $('#first').attr("aria-invalid", "true");
 $("label[for='first']").addClass('failed');
-		}
-		if ($('#last').val() === '') {
-			$('#last').attr("aria-invalid", "true");
+   }
+   if ($('#last').val() === '') {
+      $('#last').attr("aria-invalid", "true");
 $("label[for='last']").addClass('failed');
-		} 
-		if ($('#email').val() === '') {
-			$('#email').attr("aria-invalid", "true");
+   } 
+   if ($('#email').val() === '') {
+      $('#email').attr("aria-invalid", "true");
 $("label[for='email']").addClass('failed');
-		} 
+   } 
 ...
 ...
 &lt;/script&gt;
-&lt;style type="text/css"&gt;
-label.failed {
-	border: red thin solid;
-}
+
+&lt;style&gt;
+  label.failed {
+    border: red thin solid;
+  }
 &lt;/style&gt;
-&lt;form name="signup" id="signup" method="post" action="#"&gt;
- &lt;p&gt;
-    &lt;label for="first"&gt;First Name (required)&lt;/label&gt;&lt;br&gt;
+
+&lt;form name="signup" id="signup"&gt;
+  &lt;div&gt;
+    &lt;label for="first"&gt;First Name (required)&lt;/label&gt;
     &lt;input type="text" name="first" id="first"&gt;
-  &lt;/p&gt;
-  &lt;p&gt;
-    &lt;label for="last"&gt;Last Name (required)&lt;/label&gt;&lt;br&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;label for="last"&gt;Last Name (required)&lt;/label&gt;
     &lt;input type="text" name="last" id="last"&gt;
-  &lt;/p&gt;
-  &lt;p&gt;
-    &lt;label for="email"&gt;Email (required)&lt;/label&gt;&lt;br&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;label for="email"&gt;Email (required)&lt;/label&gt;
     &lt;input type="text" name="email" id="email"&gt;
-  &lt;/p&gt;
-  &lt;p&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
     &lt;input type="submit" name="button" id="button" value="Submit"&gt;
-  &lt;/p&gt;
-&lt;/form&gt;
-&lt;/code&gt;            </pre>
+  &lt;/div&gt;
+&lt;/form&gt;</code></pre>
       	<p class="working-example"><a href="../../working-examples/aria-invalid-required-fields/">Working example: Using aria-invalid on required fields</a>.</p>
          
       </section>
       <section class="example">
          <h3>Identifying errors in data format</h3>
          
-            <p><code class="att">Aria-invalid</code> and <code class="att">aria-describedby</code> are used together to indicate an error when the personal identification number (PIN), email address, or start date are not in the expected format. The error message is associated with the field using <code class="att">aria-describedby</code>, and <code class="att">aria-invalid</code> makes it easier to programmatically find fields with errors.</p>
+            <p><code class="language-html">Aria-invalid</code> and <code class="language-html">aria-describedby</code> are used together to indicate an error when the personal identification number (PIN), email address, or start date are not in the expected format. The error message is associated with the field using <code class="language-html">aria-describedby</code>, and <code class="language-html">aria-invalid</code> makes it easier to programmatically find fields with errors.</p>
             <p>Below is the rendered HTML code for the email address field in Example 1: When an invalid email address is entered by the user such as "samexample.com" (instead of sam@example.com), the HTML code is:</p>
-         <pre xml:space="preserve">
-&lt;div class="control"&gt;
-&lt;p&gt;&lt;label for="email"&gt;Email address: [*]&lt;/label&gt; 
-&lt;input type="text" name="email" id="email" class="error" aria-invalid="true" aria-describedBy="err_1" /&gt;&lt;/p&gt; 
-&lt;span class="errtext" id="err_1"&gt;Error: Incorrect data&lt;/span&gt;&lt;/div&gt;
-            </pre>
+<pre xml:space="preserve"><code class="language-html">&lt;div class="control"&gt;
+  &lt;div&gt;
+    &lt;label for="email"&gt;Email address: [*]&lt;/label&gt; 
+    &lt;input type="text" name="email" id="email" class="error"
+     aria-invalid="true" aria-describedBy="err_1"&gt;
+  &lt;/div&gt;
+  &lt;span class="errtext" id="err_1"&gt;Error: Incorrect data&lt;/span&gt;
+&lt;/div&gt;</code></pre>
 <p>And when no data is entered in the email field, the HTML code is:</p>
-         <pre xml:space="preserve">
-&lt;div class="control"&gt;
-&lt;p&gt;&lt;label for="email"&gt;Email address: [*]&lt;/label&gt; 
-&lt;input type="text" name="email" id="email" class="error" aria-invalid="true" aria-describedBy="err_2" /&gt;&lt;/p&gt;
-&lt;span class="errtext" id="err_2"&gt;
- Error: Input data missing&lt;/span&gt;
-&lt;/div&gt;            </pre>
+
+<pre xml:space="preserve"><code class="language-html">&lt;div class="control"&gt;
+  &lt;div&gt;&lt;label for="email"&gt;Email address: [*]&lt;/label&gt; 
+    &lt;input type="text" name="email" id="email" class="error"
+     aria-invalid="true" aria-describedBy="err_2"&gt;
+  &lt;/div&gt;
+  &lt;span class="errtext" id="err_2"&gt;Error: Input data missing&lt;/span&gt;
+&lt;/div&gt;</code></pre>
 <p>jQuery code: jQuery is used to add aria-invalid or aria-describedby attributes as well as the class attribute and append the error text. This is the code that inserts aria-invalid and class="error" but does not associate the error text "incorrect data" with the control programmatically:</p>
 
-         <pre xml:space="preserve">
-$(errFld).attr("aria-invalid", "true").attr("class", "error");
+<pre xml:space="preserve"><code class="language-javascript">$(errFld).attr("aria-invalid", "true").attr("class", "error");
 // Suffix error text: 
-$(errFld).parent().append('&lt;span class="errtext"&gt;Error: Incorrect data&lt;/span&gt;');
-            </pre>
+$(errFld).parent().append('&lt;span class="errtext"&gt;Error: Incorrect data&lt;/span&gt;');</code></pre>
 
 <p>CSS Code:</p>
-         <pre xml:space="preserve">
-input.error {
-   border: red thin solid;}
-span.errtext {
-	margin-bottom: 1em; 	padding: .25em 1.4em .25em .25em;
-	border: red thin solid; 	background-color: #EEEEFF;
-	background-image:url('images/iconError.gif');
-	background-repeat:no-repeat; 	background-position:right;	
+<pre xml:space="preserve"><code class="language-css">input.error {
+  border: red thin solid;
 }
-            </pre>
+
+span.errtext {
+  background-color: #EEEEFF;
+  background-image:url('images/iconError.gif');
+  background-position:right;	
+  background-repeat:no-repeat;
+  border: red thin solid;
+  margin-bottom: 1em;
+  padding: .25em 1.4em .25em .25em;
+}</code></pre>
       	<p class="working-example"><a href="../../working-examples/aria-invalid-data-format/">Working example: Identifying errors in data format</a>.</p>
          
       </section>
    </section><section id="tests"><h2>Tests</h2>
       <section class="procedure"><h3>Procedure</h3>
-         <p>For each form control that relies on <code class="att">aria-invalid</code> to convey a validation failure:</p>
+         <p>For each form control that relies on <code class="language-html">aria-invalid</code> to convey a validation failure:</p>
          <ol>
-            <li>Check that <code class="att">aria-invalid</code> is not set to true when a validation failure does not exist.</li>
-            <li>Check that <code class="att">aria-invalid</code> is set to true when a validation failure does exist.</li>
+            <li>Check that <code class="language-html">aria-invalid</code> is not set to true when a validation failure does not exist.</li>
+            <li>Check that <code class="language-html">aria-invalid</code> is set to true when a validation failure does exist.</li>
             <li>Check that the programmatically associated labels / programmatically associated instructional text for the field provide enough information to understand the error.</li>
          </ol>
       </section>
@@ -135,4 +138,5 @@ <h3>Identifying errors in data format</h3>
                </li>
          </ul>
       
-   </section></body></html>
\ No newline at end of file
+   </section>
+</body></html>
\ No newline at end of file
diff --git a/techniques/aria/ARIA22.html b/techniques/aria/ARIA22.html
index 175b8394f8..13b5c45310 100644
--- a/techniques/aria/ARIA22.html
+++ b/techniques/aria/ARIA22.html
@@ -1,11 +1,11 @@
 <!DOCTYPE html>
 <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
 	<head>
-		<title></title>
-		<link rel="stylesheet" type="text/css" href="sources.css"/>
+		<title>Using role=status to present status messages</title>
+		<link rel="stylesheet" type="text/css" href="../../css/editors.css"/>
 	</head>
 	<body>
-		<h1>Using role=status to present status messages</h1>
+		<h1>Using <code class="language-html">role=status</code> to present status messages</h1>
 		<section id="meta">
 			<h2>Metadata</h2>
 			<p class="id">ID: W##</p>
@@ -18,33 +18,24 @@ <h2>When to Use</h2>
 		<section id="description">
 			<h2>Description</h2>
 			<p>
-				This technique uses the <code>status</code> role from the ARIA specification to notify Assistive Technologies (AT) when content has been updated with information about the user's or application's status. This is done by adding <code>role="status"</code> to the element that contains the <a href="https://www.w3.org/TR/WCAG21/#dfn-status-messages">status message</a>. The aria live region role of <code>status</code> has an implicit <code>aria-live</code> value of <code>polite</code>, which allows a user to be notified via AT (such as a screen reader) when status messages are added. The role of <code>status</code> also has a default <code>aria-atomic</code> value of <code>true</code>, so that updates to the container marked with a role of <code>status</code> will result in the AT presenting the entire contents of the container to the user, including any author-defined labels (or additional nested elements). Such additional context can be critical where the status message text alone will not provide an equivalent to the visual experience. The content of the aria-live container is automatically read by the AT, without the AT having to focus on the place where the text is displayed. See <a href="https://www.w3.org/TR/wai-aria-1.1/#status">WAI-ARIA 1.1 status (role)</a> for more details.
-
-</p>
+				This technique uses the <code>status</code> role from the ARIA specification to notify Assistive Technologies (AT) when content has been updated with information about the user's or application's status. This is done by adding <code>role="status"</code> to the element that contains the <a>status message</a>. The aria live region role of <code>status</code> has an implicit <code>aria-live</code> value of <code>polite</code>, which allows a user to be notified via AT (such as a screen reader) when status messages are added. The role of <code>status</code> also has a default <code>aria-atomic</code> value of <code>true</code>, so that updates to the container marked with a role of <code>status</code> will result in the AT presenting the entire contents of the container to the user, including any author-defined labels (or additional nested elements). Such additional context can be critical where the status message text alone will not provide an equivalent to the visual experience. The content of the aria-live container is automatically read by the AT, without the AT having to focus on the place where the text is displayed. See <a href="https://www.w3.org/TR/wai-aria/#status">WAI-ARIA status (role)</a> for more details.</p>
 
 		</section>
 		<section id="examples">
 			<h2>Examples</h2>
 			<section class="example">
 				<h3>Including a search results message</h3>
-				<p>After a user presses a Search button, the page content is updated to include the results of the search, which are displayed in a section below the Search button. The change to content also includes the message "5 results returned" near the top of this new content. This text is given an appropriate role for a status message. A screen reader will announce "Five results returned".</p>
-<pre xml:space="preserve">
-<code>
-	&lt;div role="status"&gt;5 results returned.&lt;/div&gt;
-</code>
-					</pre>
+				<p>After a user presses a Search button, the page content is updated to include the results of the search, which are displayed in a section below the Search button. The change to content also includes the message <samp>"5 results returned"</samp> near the top of this new content. This text is given an appropriate role for a status message. A screen reader will announce "5 results returned".</p>
+<pre xml:space="preserve"><code class="language-html">&lt;div role="status"&gt;5 results returned.&lt;/div&gt;</code></pre>
 				<p class="working-example"><a href="../../working-examples/aria-role-status-searchresults/">Working example: role=status on search results</a></p>
 			</section>
 			<section class="example">
 				<h3>Updating the shopping cart status</h3>
-				<p>After a user presses an Add to Shopping Cart button, content near the Shopping Cart icon updates to read "1 items". The container for this text (in this case a <code>&lt;p&gt;</code>) is marked with the role of <code>status</code>. Because it adds visual context, the shopping cart image -- with succinct and accurate ALT text -- is also placed in the container. Due to the default <code>aria-atomic</code> value, a screen reader will announce "Shopping cart, six items".</p>
-<pre xml:space="preserve">
-<code>
-	&lt;p role="status" &gt;
-		&lt;img src="shopping-cart.png" alt="Shopping Cart"&gt;
-		&lt;br&gt;
-		&lt;span id="cart"&gt;0&lt;/span&gt; items
-	&lt;/p&gt;
+				<p>After a user presses an Add to Shopping Cart button, content near the Shopping Cart icon updates to read "1 items". The container for this text (in this case a <code class="language-html">&lt;p&gt;</code>) is marked with the role of <code class="language-html">status</code>. Because it adds visual context, the shopping cart image &#8212; with succinct and accurate <code class="language-html">alt</code> text &#8212; is also placed in the container. Due to the default <code class="language-html">aria-atomic</code> value, a screen reader will announce "Shopping cart, six items".</p>
+<pre xml:space="preserve"><code class="language-html">&lt;p role="status" &gt;
+  &lt;img src="shopping-cart.png" alt="Shopping Cart"&gt;
+  &lt;span id="cart"&gt;0&lt;/span&gt; items
+&lt;/p&gt;
 </code>
 </pre>
 				<p class="working-example"><a href="../../working-examples/aria-role-status-shoppingcart/">Working example: role=status on a shopping cart</a></p>
@@ -54,11 +45,11 @@ <h3>Updating the shopping cart status</h3>
 			<h2>Tests</h2>
 			<section class="test-procedure">
 				<h3>Procedure</h3>
-				<p>For each <a href="https://www.w3.org/TR/WCAG21/#dfn-status-messages">status message</a>:</p>
+				<p>For each <a>status message</a>:</p>
 				<ol>
-					<li>Check that the container destined to hold the status message has a <code>role</code> attribute with a value of <code>status</code> <em>before</em> the status message occurs.</li>
+					<li>Check that the container destined to hold the status message has a <code class="language-html">role</code> attribute with a value of <code class="language-html">status</code> <em>before</em> the status message occurs.</li>
 					<li>Check that when the status message is triggered, it is inside the container.</li>
-					<li>Check that elements or attributes that provide information equivalent to the visual experience for the status message (such as a shopping cart image with proper ALT text) also reside in the container.</li>
+					<li>Check that elements or attributes that provide information equivalent to the visual experience for the status message (such as a shopping cart image with proper <code class="language-html">alt</code> text) also reside in the container.</li>
 				</ol>
 			</section>
 			<section class="test-results">
@@ -68,5 +59,5 @@ <h3>Expected Results</h3>
 				</ul>
 			</section>
 		</section>
-	</body>
+</body>
 </html>
diff --git a/techniques/aria/ARIA23.html b/techniques/aria/ARIA23.html
index c62b298be1..1cd4f67ea9 100644
--- a/techniques/aria/ARIA23.html
+++ b/techniques/aria/ARIA23.html
@@ -1,11 +1,11 @@
 <!DOCTYPE html>
 <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
 	<head>
-		<title>WCAG 2.0 Technique</title>
-		<link rel="stylesheet" type="text/css" href="sources.css"/>
+		<title>Using role=log to identify sequential information updates</title>
+		<link rel="stylesheet" type="text/css" href="../../css/editors.css"/>
 	</head>
 	<body>
-		<h1>Using <code>role=log</code> to identify sequential information updates</h1>
+		<h1>Using <code class="language-html">role=log</code> to identify sequential information updates</h1>
 		<section id="meta">
 			<h2>Metadata</h2>
 			<p class="id">ID: W##</p>
@@ -30,32 +30,24 @@ <h3>Updating the contents of a chat conversation</h3>
 				<section class="description">
 					<p>Comments that users type into a chat input field are appended to the end of the chat history region. The region is marked with role of <code>log</code> so that new additions are announced by ATs. When each new chat message appears, a screen reader should announce its content (depending on AT/browser compatibility).</p>
 				</section>
-<pre xml:space="preserve">
-<code>
-	&lt;div id="chatRegion" role="log" aria-labelledby="chatHeading"&gt;
-		&lt;h4 id="chatHeading"&gt;Chat History&lt;/h4&gt;
-		&lt;ul id="conversation"&gt;
-			&lt;li&gt;The latest chat message&lt;/li&gt;
-		&lt;/ul&gt;
-	&lt;/div&gt;
-</code>
-</pre>
-				<p class="working-example">Working example: <a href="../../working-examples/aria-role-log/chatlog.html">chatlog.html</a></p>
+<pre xml:space="preserve"><code class="language-html">&lt;div id="chatRegion" role="log" aria-labelledby="chatHeading"&gt;
+  &lt;h4 id="chatHeading"&gt;Chat History&lt;/h4&gt;
+  &lt;ul id="conversation"&gt;
+    &lt;li&gt;The latest chat message&lt;/li&gt;
+  &lt;/ul&gt;
+&lt;/div&gt;</code></pre>
+				<p class="working-example"><a href="../../working-examples/aria-role-log/chatlog.html">Working example: using <code class="language-html">role="log"</code> with chat conversation</a></p>
 			</section>
 			<section class="example">
 				<h3>Updating the log of a server</h3>
 				<p>An application log records time-stamped activities. The log is exposed in the app as a view, with the region marked with the role of <code>log</code> so that the new additions are announced by the ATs. (The default value for the <code>aria-relevant</code> attribute is "additions", so the removal of the old top entries due to log size limitations will not be announced.)  When each new log entry is added, a screen reader announces it.</p>
-<pre>
-<code>
-	&lt;div id="activityLog" role="log"&gt;
-		&lt;h4 id="logHeading"&gt;Recent activity&lt;/h4&gt;
-		&lt;ul id="logentries""&gt;
-			&lt;li&gt;08:03 UserX logged off&lt;/li&gt;
-		&lt;/ul&gt;
-	&lt;/div&gt;
-</code>
-</pre>
-				<p class="working-example">Working example: <a href="../../working-examples/aria-role-log/serverlog.html">serverlog.html</a></p>
+<pre xml:space="preserve"><code class="language-html">&lt;div id="activityLog" role="log"&gt;
+  &lt;h4 id="logHeading"&gt;Recent activity&lt;/h4&gt;
+  &lt;ul id="logentries""&gt;
+    &lt;li&gt;08:03 UserX logged off&lt;/li&gt;
+  &lt;/ul&gt;
+&lt;/div&gt;</code></pre>
+				<p class="working-example"><a href="../../working-examples/aria-role-log/serverlog.html">Working example: using <code class="language-html">role="log"</code> with server log</a></p>
 			</section>
 		</section>
 		<section id="tests">
@@ -80,5 +72,5 @@ <h2>Related Techniques</h2>
 				<li>ID</li>
 			</ul>
 		</section>
-	</body>
+</body>
 </html>
diff --git a/techniques/aria/ARIA24.html b/techniques/aria/ARIA24.html
index 3a044a8dad..381f71161a 100644
--- a/techniques/aria/ARIA24.html
+++ b/techniques/aria/ARIA24.html
@@ -2,12 +2,11 @@
 <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
    <head>
       <title>Semantically identifying a font icon with role="img"</title>
-      <link rel="stylesheet" type="text/css" href="https://rawgit.com/w3c/wcag21/master/css/sources.css"/>
-      <link rel="stylesheet" type="text/css" href="../../css/editors.css" />
+      <link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove" />
    </head>
    <body>
 
-      <h1>Semantically identifying a font icon with <code>role=&quot;img&quot;</code></h1>
+      <h1>Semantically identifying a font icon with <code class="language-html">role="img"</code></h1>
 
       <section id="meta">
          <h2>Metadata</h2>
@@ -16,28 +15,21 @@ <h2>Metadata</h2>
          <p id="type">advisory</p>
       </section>
 
-      <section id="applicability">
-         <h2>When to Use</h2>
-         <p class="instructions">This technique is applicable to Markup languages that support ARIA.</p>
-      </section>
-
       <section id="description">
 
          <h2>Description</h2>
-         <p>The objective of this technique is to show how to semantically identify an element that uses a font file for icons. When a user  overrides font-family these icons typically disappear unless there is a means to identify them. The point is to provide a technique to differentiate icon fonts from general font (text) usage.</p>
+         <p>The objective of this technique is to show how to semantically identify an element that uses a font file for icons. When a user overrides font-family these icons typically disappear unless there is a means to identify them. The point is to provide a technique to differentiate icon fonts from general font (text) usage.</p>
 
          <p>Some low vision users need user stylesheets, scripts, or extensions to override the fonts on a page to perceive text content. However, they need to be able to perceive icon fonts that are meaningful, such as a star signifying a favorite, or an email icon in a link.</p>
 
-         <p>The key is for the author to semantically markup icon fonts with <code>role=&quot;img&quot;</code>. Then the user's font replacement selector can hook into that semantic and exclude <code>role=&quot;img&quot;</code>. This results in those icon fonts being shown.</p>
+         <p>The key is for the author to semantically markup icon fonts with <code class="language-html">role="img"</code>. Then the user's font replacement selector can hook into that semantic and exclude <code class="language-html">role="img"</code>. This results in those icon fonts being shown.</p>
 
          <h3>Basic principle of the technique</h3>
 
          <h4>1. Author adds a font-face to the CSS</h4>
          <p>The first step is used for adding a font face with icons via the CSS file.</p>
-         <pre>
-            <code>
-/* specify font-family name for icons */
-@font-face { font-family: 'IconFontRoleImg';/ }
+         <pre xml:space="preserve"><code class="language-html">/* specify font-family name for icons */
+@font-face { font-family: 'IconFontRoleImg'; }
 
 /* default class for fonts-face with icons */
 .icon,
@@ -45,29 +37,19 @@ <h4>1. Author adds a font-face to the CSS</h4>
 [class*=" icon-"] { font-family: 'IconFontRoleImg' !important; }
 
 /* specific class for icon */
-.icon-star-bg:before { content: "\e982"; }
-            </code>
-         </pre>
+.icon-star-bg:before { content: "\e982"; }</code></pre>
 
          <h4>2. Author adds the font classes to the HTML</h4>
          <p>The second step adds classes, the role="img" attribute for semantics and an accessible name.</p>
-         <pre>
-            <code>            
-&lt;!-- Icon via class names, role="img" and a text alternative --&gt;
+         <pre xml:space="preserve"><code class="language-html">&lt;!-- icon via class names, role="img" and a text alternative --&gt;
 &lt;p&gt;
-   &lt;span class=&quot;icon icon-star-bg&quot; role=&quot;img&quot; aria-label=&quot;Favorite&quot;&gt;&lt;/span&gt;
-&lt;/p&gt;
-            </code>
-         </pre>
+  &lt;span class=&quot;icon icon-star-bg&quot; role=&quot;img&quot; aria-label=&quot;Favorite&quot;&gt;&lt;/span&gt;
+&lt;/p&gt;</code></pre>
 
          <h4>3. User CSS file replaces the font-family except the icon file</h4>
          <p>The third step uses the ":not selector" in combination with the "[attribute] selector" to only replace font faces for regular text.</p>
-         <pre>
-            <code>
-/* Replaces font faces but excludes all elements with attribute role=""img&quot; */
-*:not([role="img"]) { font-family: Verdana, sans-serif !important; }
-         </code>
-      </pre>
+         <pre xml:space="preserve"><code class="language-html">/* replaces font faces but excludes all elements with attribute role="img" */
+*:not([role="img"]) { font-family: Verdana, sans-serif !important; }</code></pre>
 
       </section>
 
@@ -81,46 +63,30 @@ <h3>Star Icon Font used as an indicator (not interactive)</h3>
 
 			<section>
             <h4>Author CSS</h4>
-            <pre>
-               <code>
-/* default class for fonts-face with icons */
+            <pre xml:space="preserve"><code class="language-css">/* default class for fonts-face with icons */
 .icon { font-family: 'IconFontRoleImg' !important; }
 
 /* specific class for icon */
-.icon-star-bg:before { content: &quot;\e982&quot;; }
-               </code>
-            </pre>
+.icon-star-bg:before { content: &quot;\e982&quot;; }</code></pre>
 			</section>
          	<section>
             <h4>HTML</h4>
 			<section>
             <h5><strong>- Instead of... -</strong></h5>
-            <pre>
-               <code>
-&lt;p&gt;
-   &lt;span class=&quot;icon icon-star-bg&quot;&gt;&lt;/span&gt;
-&lt;/p&gt;
-               </code>
-            </pre>
+            <pre xml:space="preserve"><code class="language-html">&lt;p&gt;
+  &lt;span class=&quot;icon icon-star-bg&quot;&gt;&lt;/span&gt;
+&lt;/p&gt;</code></pre>
 			</section>
          	<section>
             <h5><strong>- Do... -</strong></h5>
-            <pre>
-               <code>
-&lt;p&gt;
-   &lt;span class=&quot;icon icon-star-bg&quot; role=&quot;img&quot; aria-label=&quot;Favorite&quot;&gt;&lt;/span&gt;
-&lt;/p&gt;
-               </code>
-            </pre>
-         	</section>
+            <pre xml:space="preserve"><code>&lt;p&gt;
+  &lt;span class=&quot;icon icon-star-bg&quot; role=&quot;img&quot; aria-label=&quot;Favorite&quot;&gt;&lt;/span&gt;
+&lt;/p&gt;</code></pre>
          	</section>
-         	<section>
+         </section>
+         <section>
             <h4>User CSS</h4>
-            <pre>
-               <code>
-*:not([role=&quot;img&quot;]) { font-family: Verdana, sans-serif !important; }
-               </code>
-            </pre>
+            <pre xml:space="preserve"><code class="language-css">*:not([role=&quot;img&quot;]) { font-family: Verdana, sans-serif !important; }</code></pre>
          	</section>
          	<section>
             <h4>Working example:</h4>
@@ -136,49 +102,33 @@ <h3>Two colored / stacked star Icon Font used as an indicator</h3>
             <p>In this example a two colored star icon is created by stacking two fonts with different colors on top of each other. This way it's possible to mimic only half the star is filled. It is not interactive and does not disappear if the user overrides the font family via CSS.</p>
 			<section>
             <h4>Author CSS</h4>
-            <pre>
-               <code>
-/* default class for fonts-face with icons */
+            <pre xml:space="preserve"><code class="language-css">/* default class for fonts-face with icons */
 .icon { font-family: 'IconFontRoleImg' !important; }
 
 /* specific classes for icons */
 .icon-star-bg:before    {content: &quot;\e982&quot;; }
-.icon-star-half:before  {content: &quot;\e983&quot;; }
-               </code>
-            </pre>
+.icon-star-half:before  {content: &quot;\e983&quot;; }</code></pre>
 			</section>
          	<section>
             <h4>HTML</h4>
 			<section>
             <h5><strong>- Instead of... -</strong></h5>
-            <pre>
-               <code>
-&lt;span class="icon-stacked"&gt;
-   &lt;span class="icon icon-star-bg grey"&gt;&lt;/span&gt;
-   &lt;span class="icon icon-star-half yellow"&gt;&lt;/span&gt;
-&lt;/span&gt;
-               </code>
-            </pre>
+            <pre xml:space="preserve"><code class="language-html">&lt;span class="icon-stacked"&gt;
+  &lt;span class="icon icon-star-bg grey"&gt;&lt;/span&gt;
+  &lt;span class="icon icon-star-half yellow"&gt;&lt;/span&gt;
+&lt;/span&gt;</code></pre>
 			</section>
          	<section>
             <h5><strong>- Do... -</strong></h5>
-            <pre>
-               <code>
-&lt;span class="icon-stacked" role="img" aria-label="Favorite star half filled"&gt;
-   &lt;span class="icon icon-star-bg grey" role="img" aria-hidden="true"&gt;&lt;/span&gt;
-   &lt;span class="icon icon-star-half yellow" role="img" aria-hidden="true"&gt;&lt;/span&gt;
-&lt;/span&gt;
-               </code>
-            </pre>
+            <pre xml:space="preserve"><code class="language-html">&lt;span class="icon-stacked" role="img" aria-label="Favorite star half filled"&gt;
+  &lt;span class="icon icon-star-bg grey" role="img" aria-hidden="true"&gt;&lt;/span&gt;
+  &lt;span class="icon icon-star-half yellow" role="img" aria-hidden="true"&gt;&lt;/span&gt;
+&lt;/span&gt;</code></pre>
          	</section>
          	</section>
          	<section>
             <h4>User CSS</h4>
-            <pre>
-               <code>
-*:not([role=&quot;img&quot;]) { font-family: Verdana, sans-serif !important; }
-               </code>
-            </pre>
+            <pre xml:space="preserve"><code class="language-css">*:not([role=&quot;img&quot;]) { font-family: Verdana, sans-serif !important; }</code></pre>
          	</section>
          	<section>
             <h4>Working example:</h4>
@@ -194,46 +144,30 @@ <h3>Email Icon Font in a link WITHOUT visible text</h3>
             <p>In this example an email icon is in a link with no visible text. It does not disappear if a user overrides font family. The icon font is identified by assistive technology as a "link image" and the name "Email" (keyboard or mouse).</p>
 			<section>
             <h4>Author CSS</h4>
-            <pre>
-               <code>
-/* default class for fonts-face with icons */
+            <pre xml:space="preserve"><code class="language-css">/* default class for fonts-face with icons */
 .icon { font-family: 'IconFontRoleImg' !important; }
 
 /* specific class for icon */
-.icon-email:before { content: &quot;\e93e&quot;; }
-               </code>
-            </pre>
+.icon-email:before { content: &quot;\e93e&quot;; }</code></pre>
 			</section>
          	<section>
             <h4>HTML</h4>
 			<section>
             <h5><strong>- Instead of... -</strong></h5>
-            <pre>
-               <code>
-&lt;a href=&quot;email.html&quot;&gt;
-   &lt;span class=&quot;icon icon-email&quot;&gt;&lt;/span&gt;
-&lt;/a&gt;
-               </code>
-            </pre>
+            <pre xml:space="preserve"><code class="language-html">&lt;a href=&quot;email.html&quot;&gt;
+  &lt;span class=&quot;icon icon-email&quot;&gt;&lt;/span&gt;
+&lt;/a&gt;</code></pre>
 			</section>
          	<section>
             <h5><strong>- Do... -</strong></h5>
-            <pre>
-               <code>
-&lt;a href=&quot;email.html&quot;&gt;
-   &lt;span class=&quot;icon icon-email&quot; role=&quot;img&quot; aria-label=&quot;Email&quot;&gt;&lt;/span&gt;
-&lt;/a&gt;
-               </code>
-            </pre>
+            <pre xml:space="preserve"><code class="language-html">&lt;a href=&quot;email.html&quot;&gt;
+  &lt;span class=&quot;icon icon-email&quot; role=&quot;img&quot; aria-label=&quot;Email&quot;&gt;&lt;/span&gt;
+&lt;/a&gt;</code></pre>
          	</section>
          	</section>
          	<section>
             <h4>User CSS</h4>
-            <pre>
-               <code>
-*:not([role=&quot;img&quot;]) { font-family: Verdana, sans-serif !important; }
-               </code>
-            </pre>
+            <pre xml:space="preserve"><code class="language-css">*:not([role=&quot;img&quot;]) { font-family: Verdana, sans-serif !important; }</code></pre>
          	</section>
          	<section>
             <h4>Working example:</h4>
@@ -250,61 +184,41 @@ <h3>Multiple Icon Fonts as part of another sematic element WITH visible text</h3
             <p>This example already has a visible text label in the link to be used as an accessible name, the mail and chevron font icons must stay visible when the font family is changed. This can be done by ensuring the icons are contained in their own element and the attribute <code>aria-hidden=&quot;true&quot;</code> is used so the font icons will be ignored by assistive technologies.</p>
 			<section>
             <h4>Author CSS</h4>
-            <pre>
-               <code>
-/* default class for fonts-face with icons */
+            <pre xml:space="preserve"><code class="language-css">/* default class for fonts-face with icons */
 .icon { font-family: 'IconFontRoleImg' !important; }
 
 /* specific class for icon */
-- See style declarations in HTML examples -
-
-               </code>
-            </pre>
+- See style declarations in HTML examples -</code></pre>
 			</section>
          	<section>
             <h4>HTML</h4>
 			<section>
             <h5><strong>- Instead of... -</strong></h5>
-            <pre>
-               <code>
-&lt;style&gt;
+            <pre xml:space="preserve"><code class="language-html">&lt;style&gt;
 .icon-double-link:before   { content: &quot;\e93e&quot;; }
 .icon-double-link:after    { content: &quot;\e993&quot;; }
 &lt;/style&gt;
 
-&lt;a href=&quot;email.html&quot; class=&quot;icon-double-link&quot;&gt;
-   Email
-&lt;/a&gt;
-               </code>
-            </pre>
+&lt;a href=&quot;email.html&quot; class=&quot;icon-double-link&quot;&gt;Email&lt;/a&gt;</code></pre>
 			</section>
          	<section>
             <h5><strong>- Do... -</strong></h5>
-            <pre>
-               <code>
-&lt;style&gt;
-.icon-email:before   { content: &quot;\e93e&quot;; }
-.icon-chevron:before {  content: &quot;\e993&quot;;  }
-
-.icon-double-link .icon-chevron  { float: right; margin-left: 1.5rem; }
+            <pre xml:space="preserve"><code class="language-html">&lt;style&gt;
+  .icon-email:before   { content: &quot;\e93e&quot;; }
+  .icon-chevron:before { content: &quot;\e993&quot;; }
+  .icon-double-link .icon-chevron  { float: right; margin-left: 1.5rem; }
 &lt;/style&gt;
 
 &lt;a href=&quot;email.html&quot; class=&quot;icon-double-link&quot;&gt;
-   &lt;span class=&quot;icon icon-email&quot; role=&quot;img&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;
-   &lt;span class=&quot;icon icon-chevron&quot; role=&quot;img&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;
+  &lt;span class=&quot;icon icon-email&quot; role=&quot;img&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;
+  &lt;span class=&quot;icon icon-chevron&quot; role=&quot;img&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;
    Email
-&lt;/a&gt;
-               </code>
-            </pre>
+&lt;/a&gt;</code></pre>
          	</section>
          	</section>
          	<section>
             <h4>User CSS</h4>
-            <pre>
-               <code>
-*:not([role=&quot;img&quot;]) { font-family: Verdana, sans-serif !important; }
-               </code>
-            </pre>
+            <pre xml:space="preserve"><code class="language-css">*:not([role=&quot;img&quot;]) { font-family: Verdana, sans-serif !important; }</code></pre>
          	</section>
          	<section>
             <h4>Working example:</h4>
@@ -332,5 +246,5 @@ <h3>Expected Results</h3>
             </ul>
          </section>
       </section>
-   </body>
+</body>
 </html>
diff --git a/techniques/aria/ARIA4.html b/techniques/aria/ARIA4.html
index 436e21caa6..fcc388ea41 100644
--- a/techniques/aria/ARIA4.html
+++ b/techniques/aria/ARIA4.html
@@ -1,91 +1,88 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using a WAI-ARIA role to expose the role of a user interface component</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Using a WAI-ARIA role to expose the role of a user interface component</h1><section class="meta"><p class="id">ID: ARIA4</p><p class="technology">Technology: aria</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using a WAI-ARIA role to expose the role of a user interface component</title><link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/></head><body><h1>Using a WAI-ARIA role to expose the role of a user interface component</h1><section class="meta"><p class="id">ID: ARIA4</p><p class="technology">Technology: aria</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
       <p>Technologies that support <a href="https://www.w3.org/TR/wai-aria/">Accessible Rich Internet Applications (WAI-ARIA)</a>.</p>
    </section><section id="description"><h2>Description</h2>
-      <p>The objective of this technique is to define the role of an element using the <code class="att">role</code> attribute with one of the non-abstract values defined in the <a href="https://www.w3.org/TR/wai-aria/#role_definitions">WAI-ARIA Definition of Roles</a>. The WAI-ARIA specification provides an informative description of each role, how it relates to other roles, and the states and properties for each role. When rich internet applications define new user interface widgets, exposing the roles enables users to understand the widget and how to interact with it.</p>
+      <p>The objective of this technique is to define the role of an element using the <code class="language-html">role</code> attribute with one of the non-abstract values defined in the <a href="https://www.w3.org/TR/wai-aria/#role_definitions">WAI-ARIA Definition of Roles</a>. The WAI-ARIA specification provides an informative description of each role, how it relates to other roles, and the states and properties for each role. When rich internet applications define new user interface widgets, exposing the roles enables users to understand the widget and how to interact with it.</p>
    </section><section id="examples"><h2>Examples</h2>
       <section class="example">
          <h3>A simple toolbar</h3>
          
-            <p>The WAI-ARIA Authoring Practices document <a href="https://www.w3.org/TR/wai-aria-practices-1.1/#accessiblewidget">demonstrates a toolbar containing three buttons</a>. The <code class="el">div</code> element has a role of "toolbar", and the <code class="el">img</code> elements have "button" roles:</p>
-            <pre xml:space="preserve">
-    &lt;div role="toolbar"
-      tabindex="0" 
-      id="customToolbar" 
-      onkeydown="return optionKeyEvent(event);"
-      onkeypress="return optionKeyEvent(event);"
-      onclick="return optionClickEvent(event);"
-      onblur="hideFocus()"
-      onfocus="showFocus()"
-      &gt; 
-      &lt;img src="img/btn1.gif" 
-           role="button" 
-           tabindex="-1" 
-           alt="Home" 
-           id="b1" 
-           title="Home"&gt;
-      &lt;img src="img/btn2.gif" 
-           role="button" 
-           tabindex="-1" 
-           alt="Refresh" 
-           id="b2" 
-           title="Refresh"&gt;
-     &lt;img src="img/btn3.gif" 
-           role="button" 
-           tabindex="-1" 
-           alt="Help" 
-           id="b3" 
-           title="Help"&gt; 
- &lt;/div&gt;  
-                        </pre>
-            <p>The Authoring Practices Toolbar Pattern <a href="https://www.w3.org/TR/wai-aria-practices-1.1/#toolbar">provides a working example of a toolbar.</a>.</p>
+            <p>A toolbar containing three buttons. The <code class="language-html">div</code> element has a role of "toolbar", and the <code class="language-html">img</code> elements have "button" roles:</p>
+<pre xml:space="preserve"><code class="language-html">&lt;div role="toolbar"
+   tabindex="0" 
+   id="customToolbar" 
+   onkeydown="return optionKeyEvent(event);"
+   onkeypress="return optionKeyEvent(event);"
+   onclick="return optionClickEvent(event);"
+   onblur="hideFocus()"
+   onfocus="showFocus()"
+   &gt; 
+   &lt;img src="img/btn1.gif" 
+        role="button" 
+        tabindex="-1" 
+        alt="Home" 
+        id="b1" 
+        title="Home"&gt;
+   &lt;img src="img/btn2.gif" 
+        role="button" 
+        tabindex="-1" 
+        alt="Refresh" 
+        id="b2" 
+        title="Refresh"&gt;
+  &lt;img src="img/btn3.gif" 
+        role="button" 
+        tabindex="-1" 
+        alt="Help" 
+        id="b3" 
+        title="Help"&gt; 
+&lt;/div&gt;  </code></pre>
+
+            <p>The Authoring Practices Toolbar Pattern <a href="https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/">provides a working example of a toolbar</a>.</p>
          
       </section>
       <section class="example">
          <h3>A Tree Widget</h3>
          
-            <p>The WAI-ARIA Authoring Practices <a href="https://www.w3.org/TR/wai-aria-practices-1.1/#exampletree">demonstrates a tree widget</a>. Note the use of the roles "tree", "treeitem", and "group" to identify the tree and its structure. Here is a simplified excerpt from the code:</p>
-            <pre xml:space="preserve">
-&lt;ul role="tree" tabindex="0"&gt;
-  &lt;li role="treeitem"&gt;Birds&lt;/li&gt;
-  &lt;li role="treeitem"&gt;Cats
-    &lt;ul role="group"&gt;
-      &lt;li role="treeitem"&gt;Siamese&lt;/li&gt;
-      &lt;li role="treeitem"&gt;Tabby&lt;/li&gt;
-    &lt;/ul&gt;
-  &lt;/li&gt;
-  &lt;li role="treeitem"&gt;Dogs
-    &lt;ul role="group"&gt;
-      &lt;li role="treeitem"&gt;Small Breeds
-        &lt;ul role="group"&gt;
-          &lt;li role="treeitem"&gt;Chihuahua&lt;/li&gt;
-          &lt;li role="treeitem"&gt;Italian Greyhound&lt;/li&gt;
-          &lt;li role="treeitem"&gt;Japanese Chin&lt;/li&gt;
-        &lt;/ul&gt;
-      &lt;/li&gt;
-      &lt;li role="treeitem"&gt;Medium Breeds
-        &lt;ul role="group"&gt;
-          &lt;li role="treeitem"&gt;Beagle&lt;/li&gt;
-          &lt;li role="treeitem"&gt;Cocker Spaniel&lt;/li&gt;
-          &lt;li role="treeitem"&gt;Pit Bull&lt;/li&gt;
-        &lt;/ul&gt;
-      &lt;/li&gt;
-      &lt;li role="treeitem"&gt;Large Breeds
-        &lt;ul role="group"&gt;
-          &lt;li role="treeitem"&gt;Afghan&lt;/li&gt;
-          &lt;li role="treeitem"&gt;Great Dane&lt;/li&gt;
-          &lt;li role="treeitem"&gt;Mastiff&lt;/li&gt;
-        &lt;/ul&gt;
-      &lt;/li&gt;
-    &lt;/ul&gt;
-  &lt;/li&gt;
-&lt;/ul&gt;
-</pre>
-            <p>The Authoring Practices Tree View Pattern <a href="https://www.w3.org/TR/wai-aria-practices-1.1/#TreeView"> provides a working example of a tree</a>.</p>
+            <p>A basic tree widget. Note the use of the roles "tree", "treeitem", and "group" to identify the tree and its structure. Here is a simplified excerpt from the code:</p>
+<pre xml:space="preserve"><code class="language-html">&lt;ul role="tree" tabindex="0"&gt;
+   &lt;li role="treeitem"&gt;Birds&lt;/li&gt;
+   &lt;li role="treeitem"&gt;Cats
+     &lt;ul role="group"&gt;
+       &lt;li role="treeitem"&gt;Siamese&lt;/li&gt;
+       &lt;li role="treeitem"&gt;Tabby&lt;/li&gt;
+     &lt;/ul&gt;
+   &lt;/li&gt;
+   &lt;li role="treeitem"&gt;Dogs
+     &lt;ul role="group"&gt;
+       &lt;li role="treeitem"&gt;Small Breeds
+         &lt;ul role="group"&gt;
+           &lt;li role="treeitem"&gt;Chihuahua&lt;/li&gt;
+           &lt;li role="treeitem"&gt;Italian Greyhound&lt;/li&gt;
+           &lt;li role="treeitem"&gt;Japanese Chin&lt;/li&gt;
+         &lt;/ul&gt;
+       &lt;/li&gt;
+       &lt;li role="treeitem"&gt;Medium Breeds
+         &lt;ul role="group"&gt;
+           &lt;li role="treeitem"&gt;Beagle&lt;/li&gt;
+           &lt;li role="treeitem"&gt;Cocker Spaniel&lt;/li&gt;
+           &lt;li role="treeitem"&gt;Pit Bull&lt;/li&gt;
+         &lt;/ul&gt;
+       &lt;/li&gt;
+       &lt;li role="treeitem"&gt;Large Breeds
+         &lt;ul role="group"&gt;
+           &lt;li role="treeitem"&gt;Afghan&lt;/li&gt;
+           &lt;li role="treeitem"&gt;Great Dane&lt;/li&gt;
+           &lt;li role="treeitem"&gt;Mastiff&lt;/li&gt;
+         &lt;/ul&gt;
+       &lt;/li&gt;
+     &lt;/ul&gt;
+   &lt;/li&gt;
+ &lt;/ul&gt;</code></pre>
+            <p>The Authoring Practices Tree View Pattern <a href="https://www.w3.org/WAI/ARIA/apg/patterns/treeview/"> provides a working example of a tree</a>.</p>
          
       </section>
    </section><section id="tests"><h2>Tests</h2>
       <section class="procedure"><h3>Procedure</h3>
-         <p>For a user interface component using the <code class="att">role</code> attribute:</p>
+         <p>For a user interface component using the <code class="language-html">role</code> attribute:</p>
          <ol>
             <li>Check that the value of the role attribute is one of the non-abstract roles from the values defined in the WAI-ARIA specification.</li>
             <li>Check that the characteristics of the user interface component are described by the role.</li>
@@ -109,11 +106,11 @@ <h3>A Tree Widget</h3>
                   <a href="https://www.w3.org/TR/html-aam-1.0/">HTML Accessibility API Mappings 1.0</a>
                </li>
          	<li>
-                  <a href="https://www.w3.org/TR/wai-aria-practices-1.1/">WAI-ARIA 1.1 Authoring Practices</a> 
+                  <a href="https://www.w3.org/WAI/ARIA/apg/">WAI-ARIA Authoring Practices Guide</a> 
                </li>
             <li>
                   <a href="https://www.w3.org/TR/aria-in-html/">Notes on using ARIA in HTML</a> 
                </li>
          </ul>
-      
-   </section></body></html>
\ No newline at end of file
+   </section>
+</body></html>
diff --git a/techniques/aria/ARIA5.html b/techniques/aria/ARIA5.html
index 22c8136155..706d9249f4 100644
--- a/techniques/aria/ARIA5.html
+++ b/techniques/aria/ARIA5.html
@@ -1,110 +1,95 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using WAI-ARIA state and property attributes to expose the state of a user interface component</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Using WAI-ARIA state and property attributes to expose the state of a user interface component</h1><section class="meta"><p class="id">ID: ARIA5</p><p class="technology">Technology: aria</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
-      <p>Technologies that support <a href="https://www.w3.org/TR/wai-aria/">Accessible Rich Internet Applications (WAI-ARIA)</a>. </p>
-   </section><section id="description"><h2>Description</h2>
-      <p>The objective of this technique is to use <a href="https://www.w3.org/TR/wai-aria/#states_and_properties">WAI-ARIA state and property attributes</a> to expose the state, properties and values of a user interface component so that they can be read and set by assistive technology, and so that assistive technology is notified of changes to these values. The WAI-ARIA specification provides a normative description of each attribute, and the role of the user interface elements that they support. When rich internet applications define new user interface widgets, exposing the state and property attributes enables users to understand the widget and how to interact with it.</p>
-   </section><section id="examples"><h2>Examples</h2>
-      <section class="example">
-         <h3>A toggle button</h3>
-         
-            <p>A widget with role <code class="att">button</code> acts as a toggle button when it implements the attribute <code class="att">aria-pressed</code>. When <code class="att">aria-pressed</code> is true, the button is in a "pressed" state. When <code class="att">aria-pressed</code> is false, it is not pressed. If the attribute is not present, the button is a simple command button.</p>
-            <p>The following snippet from The Open Ajax Accessibility Examples, Example 38, shows WAI-ARIA mark-up for a toggle button that selects bold text:</p>
-            <pre xml:space="preserve">
-  &lt;li id="bold1"  
-    class="toggleButton"
-    role="button"
-    tabindex="0"
-    aria-pressed="false"
-    aria-labelledby="bold_label"
-    aria-controls="text1"&gt;
-    &lt;img src="http://www.oaa-accessibility.org/media/examples/images/button-bold.png" alt="bold text" align="middle"&gt;
-&lt;/li&gt;
-</pre>
-            <p>The <code class="el">li</code> element has a role of "button" and an "aria-pressed" attribute. The following excerpt from the Javascript for this example updates the value of the "aria-pressed" attribute:</p>
-            <pre xml:space="preserve">                   
-                             /**
-   * togglePressed() toggles the aria-pressed atribute between true or false
-   *
-   * @param ( id object) button to be operated on
-   *
-   * @return N/A
-   */
-  function togglePressed(id) {
-  
-    // reverse the aria-pressed state
-    if ($(id).attr('aria-pressed') == 'true') {
-      $(id).attr('aria-pressed', 'false');
-    }
-    else {
-      $(id).attr('aria-pressed', 'true');
-    }
-  }
-                            </pre>
-            <p>This button is available as part of the <a href="http://www.oaa-accessibility.org/examplep/toolbar1/">working example of Example 38 - Toolbar using inline images for visual state</a>, on the OpenAjax Alliance site.</p>
-         
-      </section>
-      <section class="example">
-         <h3>A slider</h3>
-         
-            <p>A widget with role <code class="att">slider</code> lets a user select a value from within a given range. The slider represents the current value and the range of possible values via the size of the slider and the position of the handle. These properties of the slider are represented by the attributes <code class="att">aria-valuemin</code>, <code class="att">aria-valuemax</code>, and <code class="att">aria-valuenow</code>.</p>
-            <p>The following snippet from The Open Ajax Accessibility Examples, Example 32, shows WAI-ARIA mark-up for a slider created in Javascript. Note that the javascript sets the attributes aria-valuemin, aria-valuemax, and aria-valuenow:</p>
-            <pre xml:space="preserve">   var handle = '&lt;img id="' + id + '" class="' + (this.vert == true ? 'v':'h') +'sliderHandle" ' +
-    'src="http://www.oaa-accessibility.org/media/examples/images/slider_' + (this.vert == true ? 'v':'h') + '.png" ' + 'role="slider" ' +
-    'aria-valuemin="' + this.min +
-    '" aria-valuemax="' + this.max +
-    '" aria-valuenow="' + (val == undefined ? this.min : val) +
-           '" aria-labelledby="' + label +
-           '" aria-controls="' + controls + '" tabindex="0"&gt;&lt;/img&gt;';</pre>
-            <p>The following excerpt from the Javascript for this example updates the value of the "aria-valuenow" attribute when the value of the slider handle is changed:</p>
-            <pre xml:space="preserve"> slider.prototype.positionHandle = function($handle, val) {
-    ...
-   // Set the aria-valuenow position of the handle
-  $handle.attr('aria-valuenow', val);
-   ...
-  }
-</pre>
-            <p>This slider is available as part of the <a href="http://oaa-accessibility.org/example/32/">working example of Example 32 - Slider</a>, on the OpenAjax Alliance site.</p>
-         
-      </section>
-   </section><section id="tests"><h2>Tests</h2>
-      <section class="procedure"><h3>Procedure</h3>
-         <p>
-            <a href="https://www.w3.org/TR/wai-aria/#roles_categorization">The WAI-ARIA specification, Section 5.3, Categorization of Roles</a> defines the required and inherited states and properties for each role.</p>
-         <p>For a user interface component using the WAI-ARIA role attribute:</p>
-         <ol>
-            <li>Check that the required states and properties for the role are present.</li>
-            <li>Check that no WAI-ARIA states or properties that are neither required, supported, nor inherited are present.</li>
-            <li>Check that the state and property values are updated to reflect the current state when the user interface component changes state.</li>
-         </ol>
-      </section>
-      <section class="results"><h3>Expected Results</h3>
-         <ul>
-            <li>#1, #2, and #3 are true.</li>
-         </ul>
-      </section>
-   </section><section id="related"><h2>Related Techniques</h2><ul>
-      <li><a href="../aria/ARIA4">ARIA4</a></li>
-      <li><a href="../html/H91">H91</a></li>
-   </ul></section><section id="resources"><h2>Resources</h2>
-      
-         <ul>
-            <li>
-                  <a href="https://www.w3.org/TR/wai-aria/#usage_intro">Accessible Rich Internet Applications (WAI-ARIA), Roles</a>
-               </li>
-            <li>
-                  <a href="https://www.w3.org/TR/wai-aria/#roles">Accessible Rich Internet Applications (WAI-ARIA), The Roles Model</a>
-               </li>
-            <li>
-                  <a href="https://www.w3.org/TR/wai-aria/#states_and_properties">Accessible Rich Internet Applications (WAI-ARIA), Supported States and Properties</a>
-               </li>
-            <li>
-                  <a href="https://www.w3.org/TR/html-aapi/#html-element-to-accessibility-api-role-mapping-matrix">HTML to Platform Accessibility APIs Implementation Guide: HTML Element to Accessibility API Role Mapping Matrix</a>
-               </li>
-            <li>
-                  <a href="https://www.w3.org/TR/wai-aria-practices/">WAI-ARIA Authoring Practices</a>
-               </li>
-            <li>
-                  <a href="https://www.w3.org/TR/aria-in-html/">Using WAI-ARIA in HTML</a> 
-               </li>
-         </ul>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using WAI-ARIA state and property attributes to expose the state of a user interface component</title><link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/></head><body><h1>Using WAI-ARIA state and property attributes to expose the state of a user interface component</h1><section class="meta"><p class="id">ID: ARIA5</p><p class="technology">Technology: aria</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+   <p>Technologies that support <a href="https://www.w3.org/TR/wai-aria/">Accessible Rich Internet Applications (WAI-ARIA)</a>. </p>
+</section><section id="description"><h2>Description</h2>
+   <p>The objective of this technique is to use <a href="https://www.w3.org/TR/wai-aria/#states_and_properties">WAI-ARIA state and property attributes</a> to expose the state, properties and values of a user interface component so that they can be read and set by assistive technology, and so that assistive technology is notified of changes to these values. The WAI-ARIA specification provides a normative description of each attribute, and the role of the user interface elements that they support. When rich internet applications define new user interface widgets, exposing the state and property attributes enables users to understand the widget and how to interact with it.</p>
+</section>
+<section id="examples">
+   <h2>Examples</h2>
+   <section class="example">
+      <h3>A toggle button</h3>
+         <p>A widget with role <code class="language-html">button</code> acts as a toggle button when it implements the attribute <code class="language-html">aria-pressed</code>. When <code class="language-html">aria-pressed</code> is true, the button is in a "pressed" state. When <code class="language-html">aria-pressed</code> is false, it is not pressed. If the attribute is not present, the button is a simple command button.</p>
+         <p>The following snippet from the <a href="https://www.w3.org/WAI/ARIA/apg/example-index/button/button.html">ARIA Authoring Practices Guide (APG) examples for button</a> shows WAI-ARIA mark-up for a toggle button to mute/unmute audio:</p>
+<pre xml:space="preserve"><code class="language-html">&lt;a tabindex="0"
+  role="button"
+  id="toggle"
+  aria-pressed="false"&gt;
+  Mute
+  ...
+&lt;/a&gt;</code></pre>
+         <p>The <code class="language-html">a</code> element has a <code>role="button"</code> and an <code>aria-pressed</code> attribute. The following excerpt from the Javascript for this example updates the value of the <code>aria-pressed</code> attribute:</p>
+<pre xml:space="preserve"><code class="language-javascript">/**
+* Toggles the toggle button's state between *pressed* and *not pressed*.
+*
+* @param {HTMLElement} button
+*/
+
+function toggleButtonState(button) {
+  var isAriaPressed = button.getAttribute('aria-pressed') === 'true';
+  button.setAttribute('aria-pressed', isAriaPressed ? 'false' : 'true');
+  ...
+}</code></pre>
+
+   </section>
+   <section class="example">
+      <h3>A slider</h3>
       
-   </section></body></html>
\ No newline at end of file
+         <p>A widget with role <code class="language-html">slider</code> lets a user select a value from within a given range. The slider represents the current value and the range of possible values via the size of the slider and the position of the handle. These properties of the slider are represented by the attributes <code class="language-html">aria-valuemin</code>, <code class="language-html">aria-valuemax</code>, and <code class="language-html">aria-valuenow</code>.</p>
+         <p>The following snippet from the <a href="https://www.w3.org/WAI/ARIA/apg/example-index/slider/slider-color-viewer.html">ARIA Authoring Practices Guide (APG) color viewer slider example</a> shows WAI-ARIA mark-up for one of the sliders:</p>
+<pre xml:space="preserve"><code class="language-html">&lt;div id="id-red" class="color-slider-label"&gt;Red&lt;/div&gt;
+&lt;div class="color-slider red"
+  role="slider"
+  tabindex="0"
+  aria-valuemin="0"
+  aria-valuenow="128"
+  aria-valuemax="255"
+  aria-labelledby="id-red"&gt;
+   ...
+&lt;/div&gt;</code></pre>
+         <p>The following excerpt from the Javascript for this example updates the value of the <code>aria-valuenow</code> attribute when the value of the slider handle is changed:</p>
+<pre xml:space="preserve"><code class="language-javascript">moveSliderTo(slider, value) {
+  ...
+  slider.sliderNode.setAttribute('aria-valuenow', value);
+  ...
+}</code></pre>
+
+   </section>
+</section>
+<section id="tests"><h2>Tests</h2>
+   <section class="procedure"><h3>Procedure</h3>
+      <p>
+         <a href="https://www.w3.org/TR/wai-aria/#roles_categorization">The WAI-ARIA specification, Section 5.3, Categorization of Roles</a> defines the required and inherited states and properties for each role.</p>
+      <p>For a user interface component using the WAI-ARIA role attribute:</p>
+      <ol>
+         <li>Check that the required states and properties for the role are present.</li>
+         <li>Check that no WAI-ARIA states or properties that are neither required, supported, nor inherited are present.</li>
+         <li>Check that the state and property values are updated to reflect the current state when the user interface component changes state.</li>
+      </ol>
+   </section>
+   <section class="results"><h3>Expected Results</h3>
+      <ul>
+         <li>#1, #2, and #3 are true.</li>
+      </ul>
+   </section>
+</section><section id="related"><h2>Related Techniques</h2><ul>
+   <li><a href="../aria/ARIA4">ARIA4</a></li>
+   <li><a href="../html/H91">H91</a></li>
+</ul></section><section id="resources"><h2>Resources</h2>
+   
+      <ul>
+         <li>
+               <a href="https://www.w3.org/TR/wai-aria/#usage_intro">Accessible Rich Internet Applications (WAI-ARIA), Roles</a>
+            </li>
+         <li>
+               <a href="https://www.w3.org/TR/wai-aria/#roles">Accessible Rich Internet Applications (WAI-ARIA), The Roles Model</a>
+            </li>
+         <li>
+               <a href="https://www.w3.org/TR/wai-aria/#states_and_properties">Accessible Rich Internet Applications (WAI-ARIA), Supported States and Properties</a>
+            </li>
+         <li>
+               <a href="https://www.w3.org/WAI/ARIA/apg/">WAI-ARIA Authoring Practices Guide</a>
+            </li>
+         <li>
+               <a href="https://www.w3.org/TR/aria-in-html/">Using WAI-ARIA in HTML</a> 
+            </li>
+      </ul>
+</section></body></html>
\ No newline at end of file
diff --git a/techniques/aria/ARIA6.html b/techniques/aria/ARIA6.html
index 357ffbaba0..ffe7362e3b 100644
--- a/techniques/aria/ARIA6.html
+++ b/techniques/aria/ARIA6.html
@@ -1,47 +1,53 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using aria-label to provide labels for objects</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Using aria-label to provide labels for objects</h1><section class="meta"><p class="id">ID: ARIA6</p><p class="technology">Technology: aria</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using aria-label to provide labels for objects</title><link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/></head><body><h1>Using aria-label to provide labels for objects</h1><section class="meta"><p class="id">ID: ARIA6</p><p class="technology">Technology: aria</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
       <p>Technologies that support <a href="https://www.w3.org/TR/wai-aria/">Accessible Rich Internet Applications (WAI-ARIA)</a>. </p>
    </section><section id="description"><h2>Description</h2>
-      <p>The purpose of this technique is to provide a label for objects that can be read by assistive technology. The <code class="att">aria-label</code> attribute provides the text label for an object, such as a button. When a screen reader encounters the object, the <code class="att">aria-label</code> text is read so that the user will know what it is.</p>
-      <p>Authors should be aware that <code class="att">aria-label</code> may be disregarded by assistive technologies in situations where <code class="att">aria-labelledby</code> is used for the same object. For more information on the naming hierarchy please consult the <a href="https://www.w3.org/TR/wai-aria/#textalternativecomputation">ARIA specification</a> and the <a href="https://www.w3.org/TR/html-aapi/#accessible-name-and-description-calculation">accessible name and description calculation</a> in the HTML to Platform Accessibility APIs Implementation Guide. Authors should be aware that use of <code class="att">aria-label</code> will override any native naming such as <code class="att">alt</code> on images or <code class="el">label</code> associated with a form field using the <code class="att">for</code> attribute.</p>
+      <p>The purpose of this technique is to provide a label for objects that can be read by assistive technology. The <code class="language-html">aria-label</code> attribute provides the text label for an object, such as a button. When a screen reader encounters the object, the <code class="language-html">aria-label</code> text is read so that the user will know what it is.</p>
+      <p>Authors should be aware that <code class="language-html">aria-label</code> may be disregarded by assistive technologies in situations where <code class="language-html">aria-labelledby</code> is used for the same object. For more information on the naming hierarchy please consult the <a href="https://www.w3.org/TR/accname/#mapping_additional_nd_te">accessible name and description computation</a> section of the Accessible Name And Description Computation recommendation. Authors should be aware that use of <code class="language-html">aria-label</code> will override any native naming such as <code class="language-html">alt</code> on images or <code class="language-html">label</code> associated with a form field using the <code class="language-html">for</code> attribute.</p>
    </section><section id="examples"><h2>Examples</h2>
       <section class="example">
          <h3>Distinguishing navigation landmarks</h3>
          
-            <p>The following example shows how <code class="att">aria-label</code> could be used to distinguish two navigation landmarks in a HTML4 and XHTML 1.0 document, where there are more than two of the same type of landmark on the same page, and there is no existing text on the page that can be referenced as the label.</p>
-            <pre xml:space="preserve">&lt;div role="navigation" aria-label="Primary"&gt;
-&lt;ul&gt;&lt;li&gt;...a list of links here ...&lt;/li&gt;&lt;/ul&gt; &lt;/div&gt;
+            <p>The following example shows how <code class="language-html">aria-label</code> could be used to distinguish two navigation landmarks in an HTML document, where there are more than two of the same type of landmark on the same page, and there is no existing text on the page that can be referenced as the label.</p>
+<pre xml:space="preserve"><code class="language-html">&lt;div role="navigation" aria-label="Primary"&gt;
+  &lt;ul&gt;
+    &lt;li&gt;...a list of links here ...&lt;/li&gt;
+  &lt;/ul&gt;
+&lt;/div&gt;
 &lt;div role="navigation" aria-label="Secondary"&gt;
-&lt;ul&gt;&lt;li&gt;...a list of links here ...&lt;/li&gt; &lt;/ul&gt;&lt;/div&gt;</pre>
+  &lt;ul&gt;
+    &lt;li&gt;...a list of links here ...&lt;/li&gt;
+  &lt;/ul&gt;
+&lt;/div&gt;</code></pre>
          
       </section>
       <section class="example">
          <h3>Identifying region landmarks</h3>
          
-            <p>The following example shows how a generic "region" landmark might be added to a weather portlet. There is no existing text on the page that can be referenced as the label, so it is labelled with <code class="att">aria-label</code>.</p>
-            <pre xml:space="preserve">&lt;div role="region" aria-label="weather portlet"&gt; 
-...
-&lt;/div&gt;</pre>
+            <p>The following example shows how a generic "region" landmark might be added to a weather portlet. There is no existing text on the page that can be referenced as the label, so it is labelled with <code class="language-html">aria-label</code>.</p>
+<pre xml:space="preserve"><code class="language-html">&lt;div role="region" aria-label="weather portlet"&gt; 
+  ...
+&lt;/div&gt;</code></pre>
          
       </section>
       <section class="example">
          <h3>Providing a label for Math</h3>
          
             <p>Below is an example of a MathML function, using the math role, appropriate label, and MathML rendering:</p>
-            <pre xml:space="preserve">&lt;div role="math" aria-label="6 divided by 4 equals 1.5"&gt;
+<pre xml:space="preserve"><code class="language-html">&lt;div role="math" aria-label="6 divided by 4 equals 1.5"&gt;
   &lt;math xmlns="https://www.w3.org/1998/Math/MathML"&gt;
     &lt;mfrac&gt;
       &lt;mn&gt;6&lt;/mn&gt;
       &lt;mn&gt;4&lt;/mn&gt;
     &lt;/mfrac&gt;
-    &lt;mo&gt;=&lt;/mo&gt;
-    &lt;mn&gt;1.5&lt;/mn&gt;
+      &lt;mo&gt;=&lt;/mo&gt;
+      &lt;mn&gt;1.5&lt;/mn&gt;
   &lt;/math&gt;
-&lt;/div&gt;</pre>
+&lt;/div&gt;</code></pre>
          
       </section>
    </section><section id="tests"><h2>Tests</h2>
       <section class="procedure"><h3>Procedure</h3>
-         <p>For each element where a <code class="att">aria-label</code> attribute is present.</p>
+         <p>For each element where a <code class="language-html">aria-label</code> attribute is present.</p>
          <ol>
             <li>Examine whether the text description accurately labels the object or provides a description of its purpose or provides equivalent information.</li>
          </ol>
@@ -58,11 +64,11 @@ <h3>Providing a label for Math</h3>
       
          <ul>
             <li>
-                  <a href="https://www.w3.org/TR/html-aapi/#html-element-to-accessibility-api-role-mapping-matrix">HTML to Platform Accessibility APIs Implementation Guide: HTML Element to Accessibility API Role Mapping Matrix</a>
+                  <a href="https://www.w3.org/TR/html-aam-1.0/">HTML Accessibility API Mappings 1.0</a>
                </li>
             <li>
-                  <a href="https://www.w3.org/TR/wai-aria-practices/">WAI-ARIA Authoring Practices 1.1</a> 
+                  <a href="https://www.w3.org/WAI/ARIA/apg/">WAI-ARIA Authoring Practices Guide</a> 
                </li>
          </ul>
-      
-   </section></body></html>
\ No newline at end of file
+      </section>
+</body></html>
\ No newline at end of file
diff --git a/techniques/aria/ARIA7.html b/techniques/aria/ARIA7.html
index 494273413e..e611de7531 100644
--- a/techniques/aria/ARIA7.html
+++ b/techniques/aria/ARIA7.html
@@ -1,41 +1,42 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using aria-labelledby for link purpose</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Using aria-labelledby for link purpose</h1><section class="meta"><p class="id">ID: ARIA7</p><p class="technology">Technology: aria</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using aria-labelledby for link purpose</title><link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/></head><body><h1>Using aria-labelledby for link purpose</h1><section class="meta"><p class="id">ID: ARIA7</p><p class="technology">Technology: aria</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
       <p>Technologies that support <a href="https://www.w3.org/TR/wai-aria/">Accessible Rich Internet Applications (WAI-ARIA)</a>. </p>
    </section><section id="description"><h2>Description</h2>
-      <p>With the <code class="att">aria-labelledby</code> attribute, authors can use a visible text element on the page as a label for a focusable element (a form control or a link). For example, a "read more..." link could be associated with the text of the heading of the preceding section to make the purpose of the link unambiguous (see example 1).</p>
-      <p>When associating text to a focusable element with the help of <code class="att">aria-labelledby</code>, the target text element is given an ID which is referenced in the value of the <code class="att">aria-labelledby</code> attribute of the focusable element.</p>
-      <p>It is also possible to use several text elements on the page as a label for a focusable element. Each of the text elements used must be given a unique ID which is referenced as a string of IDs (IDREF) in the value of the <code class="att">aria-labelledby</code> attribute. The label text should then be concatenated following the order of IDs in the value of the <code class="att">aria-labelledby</code> attribute.</p>
-      <p>When applied on links, <code class="att">aria-labelledby</code> can be used to identify the purpose of a link that may be readily apparent for sighted users, but less obvious for screen reader users.</p>
-      <p>The specified behavior of <code class="att">aria-labelledby</code> is that the associated label text is announced instead of the link text (not in addition to the link text). When the link text itself should be included in the label text, the ID of the link should be referenced as well in the string of IDs forming the value of the <code class="att">aria-labelledby</code> attribute.</p>
-      <p>For more information on the naming hierarchy please consult the <a href="https://www.w3.org/TR/accname/">Accessible Name and Description Computation</a> and the <a href="https://www.w3.org/TR/html-aapi/#a-element">accessible name and description calculation for links</a> in the HTML to Platform Accessibility APIs Implementation Guide.</p>
+      <p>With the <code class="language-html">aria-labelledby</code> attribute, authors can use a visible text element on the page as a label for a focusable element (a form control or a link). For example, a "read more..." link could be associated with the text of the heading of the preceding section to make the purpose of the link unambiguous (see example 1).</p>
+      <p>When associating text to a focusable element with the help of <code class="language-html">aria-labelledby</code>, the target text element is given an <code class="language-html">id</code> which is referenced in the value of the <code class="language-html">aria-labelledby</code> attribute of the focusable element.</p>
+      <p>It is also possible to use several text elements on the page as a label for a focusable element. Each of the text elements used must be given a unique ID which is referenced as a string of <code class="language-html">id</code>s (IDREF) in the value of the <code class="language-html">aria-labelledby</code> attribute. The label text should then be concatenated following the order of <code class="language-html">id</code>s in the value of the <code class="language-html">aria-labelledby</code> attribute.</p>
+      <p>When applied on links, <code class="language-html">aria-labelledby</code> can be used to identify the purpose of a link that may be readily apparent for sighted users, but less obvious for screen reader users.</p>
+      <p>The specified behavior of <code class="language-html">aria-labelledby</code> is that the associated label text is announced instead of the link text (not in addition to the link text). When the link text itself should be included in the label text, the ID of the link should be referenced as well in the string of IDs forming the value of the <code class="language-html">aria-labelledby</code> attribute.</p>
+      <p>For more information on the naming hierarchy please consult the <a href="https://www.w3.org/TR/accname/">Accessible Name and Description Computation</a>.</p>
    </section><section id="examples"><h2>Examples</h2>
       <section class="example">
          <h3>Providing additional information for links</h3>
          
-            <p>This example will mean that the link text as shown on screen is then used as the start of the accessible name for the link. Popular screen readers like JAWS and NVDA will announce this as:
+            <p>This example will mean that the link text as shown on screen is then used as the start of the accessible name for the link. Screen readers will announce this as:
 "Read more ...Storms hit east coast" and will display that same text in the links list which is very useful for screen reader users who may browse by links.</p>
-            <pre xml:space="preserve">&lt;h2 id="headline"&gt;Storms hit east coast&lt;/h2&gt;
-
-&lt;p&gt;Torrential rain and gale force winds have struck the east coast, causing flooding in many coastal towns.
-&lt;a id="p123" href="news.html" aria-labelledby="p123 headline"&gt;Read more...&lt;/a&gt;&lt;/p&gt;</pre>
+<pre xml:space="preserve"><code class="language-html">&lt;h2 id="headline"&gt;Storms hit east coast&lt;/h2&gt;
+&lt;p&gt;Torrential rain and gale force winds have struck the east coast, 
+   causing flooding in many coastal towns.
+  &lt;a id="p123" href="news.html" aria-labelledby="p123 headline"&gt;Read more...&lt;/a&gt;
+&lt;/p&gt;</code></pre>
          
       </section>
       <section class="example">
          <h3>Concatenating link text from multiple sources</h3>
          
-            <p>There may be cases where an author will placed a tag around a section of code that will be referenced.</p>
-            <p>Note: The use of tabindex="-1" on the <code class="el">span</code> element is not meant to support focusing by scripts - here, it merely serves to ensure that some browsers (IE9, IE10) will include the <code class="el">span</code> element in the accessibility tree, thus making it available for reference by <code class="att">aria-labelledby</code>. For more details see <a href="https://msdn.microsoft.com/en-us/library/ie/gg701963%28v=vs.85%29.aspx#Accessible_HTML_Elements">Accessible HTML Elements</a>.</p>
-            <pre xml:space="preserve">&lt;p&gt;Download &lt;span id="report-title" tabindex="-1"&gt;2012 Sales Report&lt;/span&gt;:
-&lt;a aria-labelledby="report-title pdf" href="#" id="pdf"&gt;PDF&lt;/a&gt; |
-&lt;a aria-labelledby="report-title doc" href="#" id="doc"&gt;Word&lt;/a&gt; |
-&lt;a aria-labelledby="report-title ppt" href="#" id="ppt"&gt;Powerpoint&lt;/a&gt;&lt;/p&gt;</pre>
+            <p>There may be cases where an author will place a tag around a section of code that will be referenced.</p>
+<pre xml:space="preserve"><code class="language-html">&lt;p&gt;Download &lt;span id="report-title"&gt;2012 Sales Report&lt;/span&gt;:
+   &lt;a aria-labelledby="report-title pdf" href="#" id="pdf"&gt;PDF&lt;/a&gt; |
+   &lt;a aria-labelledby="report-title doc" href="#" id="doc"&gt;Word&lt;/a&gt; |
+   &lt;a aria-labelledby="report-title ppt" href="#" id="ppt"&gt;PowerPoint&lt;/a&gt;
+&lt;/p&gt;</code></pre>
          
       </section>
    </section><section id="tests"><h2>Tests</h2>
       <section class="procedure"><h3>Procedure</h3>
-         <p>For each link that has an <code class="att">aria-labelledby</code> attribute:</p>
+         <p>For each link that has an <code class="language-html">aria-labelledby</code> attribute:</p>
          <ol>
-            <li>Check that each ID in the value of the <code class="att">aria-labelledby</code> attribute matches an ID of a text element used as part of the link purpose.</li>
-            <li>Check that the combined value of the text referenced by the one or more ID's in the <code class="att">aria-labelledby</code> attribute properly describes the purpose of the link element.</li>
+            <li>Check that each <code class="language-html">id</code> in the value of the <code class="language-html">aria-labelledby</code> attribute matches an <code class="language-html">id</code> of a text element used as part of the link purpose.</li>
+            <li>Check that the combined value of the text referenced by the one or more <code class="language-html">id</code>s in the <code class="language-html">aria-labelledby</code> attribute properly describes the purpose of the link element.</li>
          </ol>
       </section>
       <section class="results"><h3>Expected Results</h3>
@@ -50,5 +51,5 @@ <h3>Concatenating link text from multiple sources</h3>
                <a href="https://www.w3.org/TR/accname/">Accessible Name and Description Computation</a> 
                </li>
          </ul>
-      
-   </section></body></html>
\ No newline at end of file
+   </section>
+</body></html>
diff --git a/techniques/aria/ARIA8.html b/techniques/aria/ARIA8.html
index 84890f8e54..d38e1967fe 100644
--- a/techniques/aria/ARIA8.html
+++ b/techniques/aria/ARIA8.html
@@ -1,30 +1,32 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using aria-label for link purpose</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Using aria-label for link purpose</h1><section class="meta"><p class="id">ID: ARIA8</p><p class="technology">Technology: aria</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using aria-label for link purpose</title><link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/></head><body><h1>Using aria-label for link purpose</h1><section class="meta"><p class="id">ID: ARIA8</p><p class="technology">Technology: aria</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
       <p>Technologies that support <a href="https://www.w3.org/TR/wai-aria/">Accessible Rich Internet Applications (WAI-ARIA)</a>. </p>
    </section><section id="description"><h2>Description</h2>
-      <p>The objective of this technique is to describe the purpose of a link using the <code class="att">aria-label</code> attribute. The <code class="att">aria-label</code> attribute provides a way to place a descriptive text label on an object, such as a link, when there are no elements visible on the page that describe the object. If descriptive elements are visible on the page, the <code class="att">aria-labelledby</code> attribute should be used instead of <code class="att">aria-label</code>. Providing a descriptive text label lets a user distinguish the link from links in the Web page that lead to other destinations and helps the user determine whether to follow the link. In some assistive technologies the <code class="att">aria-label</code> value will show in the list of links instead of the actual link text.</p>
-      <p>Per the <a href="https://www.w3.org/TR/accname/">Accessible Name and Description Computation</a> and the <a href="https://www.w3.org/TR/html-aapi/#accessible-name-and-description-calculation">HTML to Platform Accessibility APIs Implementation Guide</a>, the <code class="att">aria-label</code> text will override the text supplied within the link. As such the text supplied will be used instead of the link text by AT. Due to this it is recommended to start the text used in <code class="att">aria-label</code> with the text used within the link. This will allow consistent communication between users.</p>
+      <p>The objective of this technique is to describe the purpose of a link using the <code class="language-html">aria-label</code> attribute. The <code class="language-html">aria-label</code> attribute provides a way to place a descriptive text label on an object, such as a link, when there are no elements visible on the page that describe the object. If descriptive elements are visible on the page, the <code class="language-html">aria-labelledby</code> attribute should be used instead of <code class="language-html">aria-label</code>. Providing a descriptive text label lets a user distinguish the link from links in the Web page that lead to other destinations and helps the user determine whether to follow the link. In some assistive technologies the <code class="language-html">aria-label</code> value will show in the list of links instead of the actual link text.</p>
+      <p>Per the <a href="https://www.w3.org/TR/accname/">Accessible Name and Description Computation</a> and the <a href="https://www.w3.org/TR/html-aam-1.0/#accessible-name-and-description-computation">Accessible Name and Description Computation</a> in the HTML Accessibility API Mappings 1.0, the <code class="language-html">aria-label</code> text will override the text supplied within the link. As such the text supplied will be used instead of the link text by assistive technology. Due to this it is recommended to start the text used in <code class="language-html">aria-label</code> with the text used within the link. This will allow consistent communication between users.</p>
    </section><section id="examples"><h2>Examples</h2>
       <section class="example">
          <h3>Describing the purpose of a link in HTML using aria-label.</h3>
          
             <p>In some situations, designers may choose to lessen the visual appearance of links on a page by using shorter, repeated link text such as "read more". These situations provide a good use case for aria-label in that the simpler, non-descriptive "read more" text on the page can be replaced with a more descriptive label of the link. The words 'read more' are repeated in the aria-label (which replaces the original anchor text of "[Read more...]") to allow consistent communication between users.</p>
-            <pre xml:space="preserve"> &lt;h4&gt;Neighborhood News&lt;/h4&gt;
- &lt;p&gt;Seminole tax hike:  Seminole city managers are proposing a 75% increase in 
- property taxes for the coming fiscal year.
- &lt;a href="taxhike.html" aria-label="Read more about Seminole tax hike"&gt;[Read more...]&lt;/a&gt;
- &lt;/p&gt; 
-
- &lt;p&gt;Baby Mayor:  Seminole voters elect the city's youngest mayor ever by voting in 3 year
- old Willy "Dusty" Williams in yesterday's mayoral election.
- &lt;a href="babymayor.html" aria-label="Read more about Seminole's new baby mayor"&gt;[Read more...]&lt;/a&gt;
- &lt;/p&gt;</pre>
+<pre xml:space="preserve"><code class="language-html">&lt;h4&gt;Neighborhood News&lt;/h4&gt;
+&lt;p&gt;Seminole tax hike: Seminole city managers are proposing a 75% increase in 
+  property taxes for the coming fiscal year.
+  &lt;a href="taxhike.html" aria-label="Read more about Seminole tax hike"&gt;
+   [Read more...]&lt;/a&gt;
+&lt;/p&gt; 
+  
+&lt;p&gt;Baby Mayor: Seminole voters elect the city's youngest mayor ever by voting
+   in 3 year old Willy "Dusty" Williams in yesterday's mayoral election.
+   &lt;a href="babymayor.html" aria-label="Read more about Seminole's new baby mayor"&gt;
+    [Read more...]&lt;/a&gt;
+&lt;/p&gt;</code></pre>
          
       </section>
    </section><section id="tests"><h2>Tests</h2>
       <section class="procedure"><h3>Procedure</h3>
-         <p>For link elements that use <code class="att">aria-label</code>:</p>
+         <p>For link elements that use <code class="language-html">aria-label</code>:</p>
          <ol>
-            <li>Check that the value of the <code class="att">aria-label</code> attribute properly describes the purpose of the link element.</li>
+            <li>Check that the value of the <code class="language-html">aria-label</code> attribute properly describes the purpose of the link element.</li>
          </ol>
       </section>
       <section class="results"><h3>Expected Results</h3>
@@ -42,11 +44,11 @@ <h3>Describing the purpose of a link in HTML using aria-label.</h3>
       
          <ul>
             <li>
-                  <a href="https://www.w3.org/TR/html-aapi/#accessible-name-and-description-calculation">HTML to Platform Accessibility APIs Implementation Guide: Accessible Name and Description Calculation</a> 
+               <a href="https://www.w3.org/TR/html-aam/">HTML Accessibility API Mappings</a>
                </li>
             <li>
                <a href="https://www.w3.org/TR/accname/">Accessible Name and Description Computation</a>
                </li>
          </ul>
-      
-   </section></body></html>
\ No newline at end of file
+      </section>
+</body></html>
\ No newline at end of file
diff --git a/techniques/aria/ARIA9.html b/techniques/aria/ARIA9.html
index f90b8c40ca..6bcae65398 100644
--- a/techniques/aria/ARIA9.html
+++ b/techniques/aria/ARIA9.html
@@ -1,155 +1,138 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using aria-labelledby to concatenate a label from several text nodes</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Using aria-labelledby to concatenate a label from several text nodes</h1><section class="meta"><p class="id">ID: ARIA9</p><p class="technology">Technology: aria</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using aria-labelledby to concatenate a name from several text nodes</title><link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/></head><body><h1>Using aria-labelledby to concatenate a label from several text nodes</h1><section class="meta"><p class="id">ID: ARIA9</p><p class="technology">Technology: aria</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
       <p>Technologies that support <a href="https://www.w3.org/TR/wai-aria/">Accessible Rich Internet Applications (WAI-ARIA)</a>. </p>
    </section><section id="description"><h2>Description</h2>
-      <p>The <code class="prop">aria-labelledby</code> property can be used to label all visual objects. Applied to inputs, the <code class="prop">aria-labelledby</code> property can be used to label native inputs as well as non-native elements, such as custom text inputs constructed with div contenteditable="true".</p>
-      <p>One particular use of <code class="prop">aria-labelledby</code> is for text inputs in situations where a meaningful label should consist of more than one label string.</p>
-      <p>Authors assign unique <code class="att">id</code>s to the label strings to be concatenated as the label for the <code class="el">input</code> element. The value of the <code class="att">aria-labelledby</code> attribute is then a space-separated list of all <code class="att">id</code>s in the order in which the label strings referenced should be read by screen readers. Supporting user agents will concatenate the label strings referenced and read them as one continuous label of the input.</p>
-      <p>The concatenation of label strings can be useful for different reasons. In example 1, an input is nested within the context of a full sentence. The desired screen reader output is "Extend time-out to [ 20 ] minutes - edit with autocomplete, selected 20". Since the <code class="att">id</code> of the text input is included in the string of <code class="att">id</code>s referenced by aria-labelledby, the value of the input is included in the concatenated label at the right position.</p>
-      <p>Another application of <code class="att">aria-labelledby</code> is when there is no space to provide a visible label next to the input, or when using native labels would create unnecessary redundancy. Here, the use <code class="att">aria-labelledby</code> makes it possible to associate visible elements on the page as label for such inputs. This is demonstrated in example 2 where table column and row headings are concatenated into labels for the text input elements inside the table.</p>
+      <p>The <code class="language-html">aria-labelledby</code> property can be used to provide a name for all visual objects. Applied to inputs, the <code class="language-html">aria-labelledby</code> property can be used to provide a name to native inputs as well as non-native elements, such as custom text inputs constructed with div contenteditable="true".</p>
+      <p>One particular use of <code class="language-html">aria-labelledby</code> is for text inputs in situations where a meaningful name should consist of more than one text string.</p>
+      <p>Authors assign unique <code class="language-html">id</code>s to the label strings to be concatenated as the name for the <code class="language-html">input</code> element. The value of the <code class="language-html">aria-labelledby</code> attribute is then a space-separated list of all <code class="language-html">id</code>s in the order in which the label strings referenced should be read by screen readers. Supporting user agents will concatenate the label strings referenced and read them as one continuous name for the input.</p>
+      <p>The concatenation of strings can be useful for different reasons. In example 1, an input is nested within the context of a full sentence. The desired screen reader output is "Extend time-out to [ 20 ] minutes - edit with autocomplete, selected 20". Since the <code class="language-html">id</code> of the text input is included in the string of <code class="language-html">id</code>s referenced by aria-labelledby, the value of the input is included in the concatenated name at the right position.</p>
+      <p>Another application of <code class="language-html">aria-labelledby</code> is when there is no space to provide a visible label next to the input, or when using native labels would create unnecessary redundancy. Here, the use <code class="language-html">aria-labelledby</code> makes it possible to associate visible elements on the page as name for such inputs. This is demonstrated in example 2 where table column and row headings are concatenated into names for the text input elements inside the table.</p>
       <div class="note">
-         <p>The <a href="https://www.w3.org/TR/html-aapi/#accessible-name-and-description-calculation">ARIA accessible name and description calculation</a> specifies that the string specified in <code class="att">aria-labelledby</code> should replace rather than add to the content of the element that carries the property. So adding the <code class="att">aria-labelledby</code> property to a native label should replace the text content inside that label unless the label itself is referenced as part of the sequence of <code class="att">id</code>s in <code class="att">aria-labelledby</code>.</p>
+         <p>The <a href="https://www.w3.org/TR/html-aam-1.0/#accessible-name-and-description-computation">Accessible Name and Description Computation</a> specifies that the string specified in <code class="language-html">aria-labelledby</code> should replace rather than add to the content of the element that carries the property. So adding the <code class="language-html">aria-labelledby</code> property to a native label should replace the text content inside that label unless the label itself is referenced as part of the sequence of <code class="language-html">id</code>s in <code class="language-html">aria-labelledby</code>.</p>
       </div>
    </section><section id="examples"><h2>Examples</h2>
       <section class="example">
-         <h3> A time-out input field with concatenated label</h3>
+         <h3>A time-out input field with concatenated name</h3>
          
             <p>A text input allows users to extend the default time before a time-out occurs.</p>
-            <p>The string "Extend time-out to" is contained in a native <code class="el">label</code> element and is associated with the input with the input by id="timeout-duration" . This label is associated with this input using the for/id association only on user agents that don't support ARIA. On user agents that support ARIA, the for/id association is ignored and the label for the input is provided only by <code class="att">aria-labelledby</code>, per the <a href="https://www.w3.org/TR/html-aapi/#accessible-name-and-description-calculation">accessible name and description calculation</a> in the HTML to Platform Accessibility APIs Implementation Guide.</p>
-            <p>The <code class="att">aria-labelledby</code> attribute on the text input references three elements: (1) the <code class="el">span</code> containing the native label, (2) the text input containing the default text '20' (recall that this input is not labelled with the for/id associated label text), and (3) the string 'minutes' contained in a <code class="el">span</code>. These elements should be concatenated to provide the full label for the text input</p>
-            <div class="note">
-               <p>The use of tabindex="-1" on the <code class="el">span</code> element is not meant to support focusing by scripts - here, it merely serves to ensure that some browsers (IE9, IE10) will include the <code class="el">span</code> element in the accessibility tree, thus making it available for reference by <code class="att">aria-labelledby</code>. For more details see <a href="https://msdn.microsoft.com/en-us/library/ie/gg701963%28v=vs.85%29.aspx#Accessible_HTML_Elements">Accessible HTML Elements</a>
-               </p>
-            </div>
-            <pre xml:space="preserve">&lt;form&gt;
-&lt;p&gt;&lt;span id="timeout-label" tabindex="-1"&gt;&lt;label for="timeout-duration"&gt;Extend time-out to&lt;/label&gt;&lt;/span&gt;
-&lt;input type="text" size="3" id="timeout-duration" value="20" 
-    aria-labelledby="timeout-label timeout-duration timeout-unit"&gt;
-&lt;span id="timeout-unit" tabindex="-1"&gt; minutes&lt;/span&gt;&lt;/p&gt;
-&lt;/form&gt;</pre>
+            <p>The string "Extend time-out to" is contained in a native <code class="language-html">label</code> element and is associated with the input with the input by id="timeout-duration" . This label is associated with this input using the for/id association only on user agents that don't support ARIA. On user agents that support ARIA, the for/id association is ignored and the name for the input is provided only by <code class="language-html">aria-labelledby</code>, per the <a href="https://www.w3.org/TR/html-aam-1.0/#accessible-name-and-description-computation">Accessible Name and Description Computation</a> in the HTML Accessibility API Mappings 1.0.</p>
+            <p>The <code class="language-html">aria-labelledby</code> attribute on the text input references three elements: (1) the <code class="language-html">span</code> containing the native label, (2) the text input containing the default text '20' (recall that this input is not labelled with the for/id associated label text), and (3) the string 'minutes' contained in a <code class="language-html">span</code>. These elements should be concatenated to provide the full name for the text input</p>
+<pre xml:space="preserve"><code class="language-html">&lt;div&gt;
+  &lt;span id="timeout-label"&gt;
+    &lt;label for="timeout-duration"&gt;Extend time-out to&lt;/label&gt;
+  &lt;/span&gt;
+  &lt;input type="text" size="3" id="timeout-duration" value="20" 
+   aria-labelledby="timeout-label timeout-duration timeout-unit"&gt;
+  &lt;span id="timeout-unit"&gt; minutes&lt;/span&gt;
+&lt;/div&gt;</code></pre>
             <p class="working-example">Working example, <a href="../../working-examples/aria-labelledby-time-out-input-concatenated-label/">Time-out input field with concatenated label</a>, adapted from Easy ARIA tip #2: aria-labelledby and aria-describedby, an example put together by Marco Zehe.</p>
          
       </section>
       <section class="example">
          <h3>A simple data table with text inputs</h3>
          
-            <p>A simple data table containing text inputs. The input labels are concatenated through <code class="att">aria-labelledby</code> referencing the respective column and row headers.</p>
-            <pre xml:space="preserve">&lt;table&gt;
-	&lt;tr&gt;
-		&lt;td&gt;&lt;/td&gt;
-		&lt;th id="tpayer"&gt;Taxpayer&lt;/th&gt;
-		&lt;th id="sp"&gt;Spouse&lt;/th&gt;
-	&lt;/tr&gt;
-
-	&lt;tr&gt;
-		&lt;th id="gross"&gt;W2 Gross&lt;/th&gt;
-		&lt;td&gt;&lt;input type="text" size="20" aria-labelledby="tpayer gross" /&gt;&lt;/td&gt;
-		&lt;td&gt;&lt;input type="text" size="20" aria-labelledby="sp gross" /&gt;&lt;/td&gt;
-	&lt;/tr&gt;
-	
-	&lt;tr&gt;
-		&lt;th id="div"&gt;Dividends&lt;/th&gt;
-		&lt;td&gt;&lt;input type="text" size="20" aria-labelledby="tpayer div" /&gt;&lt;/td&gt;
-		&lt;td&gt;&lt;input type="text" size="20" aria-labelledby="sp div" /&gt;&lt;/td&gt;
-	&lt;/tr&gt;
-&lt;/table&gt;</pre>
+            <p>A simple data table containing text inputs. The input labels are concatenated through <code class="language-html">aria-labelledby</code> referencing the respective column and row headers.</p>
+<pre xml:space="preserve"><code class="language-html">&lt;table&gt;
+  &lt;tr&gt;
+    &lt;td&gt;&lt;/td&gt;
+    &lt;th id="tpayer"&gt;Taxpayer&lt;/th&gt;
+    &lt;th id="sp"&gt;Spouse&lt;/th&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;th id="gross"&gt;W2 Gross&lt;/th&gt;
+    &lt;td&gt;&lt;input type="text" size="20" aria-labelledby="tpayer gross"&gt;&lt;/td&gt;
+    &lt;td&gt;&lt;input type="text" size="20" aria-labelledby="sp gross"&gt;&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;th id="divi"&gt;Dividends&lt;/th&gt;
+    &lt;td&gt;&lt;input type="text" size="20" aria-labelledby="tpayer divi"&gt;&lt;/td&gt;
+    &lt;td&gt;&lt;input type="text" size="20" aria-labelledby="sp divi"&gt;&lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/table&gt;</code></pre>
             <p class="working-example">Working example, <a href="../../working-examples/aria-labelledby-table-text-inputs/">Using aria-labelledby for simple table with text inputs</a>, based on an example by Jim Thatcher.</p>
          
       </section>
       <section class="example">
          <h3>A conference workshop booking table</h3>
          
-            <p>A conference workshop booking table with two parallel tracks allows users to select the workshop they want to attend. When tabbing through the checkbox inputs in the table, the track (1 or 2), the title, and the speaker of the workshop followed by the adjacent checkbox label "Attend" are provided as concatenated label for the checkboxes via <code class="att">aria-labelledby</code>.</p>
-            <p>Some browser / screen reader combinations (e.g. Mozilla Firefox and NVDA) will in addition speak the relevant table cell headers.</p>
-            <pre xml:space="preserve">&lt;h1&gt;Dinosaur Conference workshops timetable Thursday, 14.  &amp; Friday, 15. March 2013&lt;/h1&gt;
+            <p>A conference workshop booking table with two parallel tracks allows users to select the workshop they want to attend. When tabbing through the checkbox inputs in the table, the track (1 or 2), the title, and the speaker of the workshop followed by the adjacent checkbox label "Attend" are provided as concatenated name for the checkboxes via <code class="language-html">aria-labelledby</code>.</p>
+<pre xml:space="preserve"><code class="language-html">&lt;h1&gt;Dinosaur Conference workshops timetable Thursday, 14 &amp; Friday, 15 March 2013&lt;/h1&gt;
 &lt;table&gt;
-&lt;caption&gt;Dinosaur Conference workshop booking table&lt;/caption&gt;
-&lt;tbody&gt;&lt;tr&gt;
-	&lt;td rowspan="2"&gt;&lt;/td&gt;
-	&lt;th colspan="2" scope="colgroup"&gt;Thursday&lt;/th&gt;
-	&lt;th colspan="2" scope="colgroup"&gt;Friday&lt;/th&gt;
-&lt;/tr&gt;
-
-&lt;tr&gt;
-	&lt;th scope="col" id="am1"&gt;9 to 12 AM&lt;/th&gt;
-	&lt;th scope="col" id="pm1"&gt;2 to 5 PM&lt;/th&gt;
-	&lt;th scope="col" id="am2"&gt;9 to 12 AM&lt;/th&gt;
-	&lt;th scope="col" id="pm2"&gt;2 to 5 PM&lt;/th&gt;
-&lt;/tr&gt;
-
-&lt;tr&gt;
-	&lt;th id="track1" scope="row"&gt;track 1&lt;/th&gt;
-	&lt;td&gt;
-		&lt;h2 id="title-TM1"&gt;The Paleozoic era &lt;/h2&gt;
-		&lt;p&gt;2 places left&lt;/p&gt;
-		&lt;p&gt;&lt;input type="checkbox" id="TM1" aria-labelledby="title-TM1 track1 am1 TM1-att"&gt;
-                &lt;label id="TM1-att" for="TM1"&gt;Attend&lt;/label&gt;&lt;/p&gt;
-	&lt;/td&gt;
-	
-	&lt;td&gt;
-		&lt;h2 id="title-TA1"&gt;The Mesozoic era overview&lt;/h2&gt;
-		&lt;p&gt;2 places left&lt;/p&gt;
-		&lt;p&gt;&lt;input type="checkbox" id="TA1" aria-labelledby="title-TA1 track1 am2 TA1-att"&gt;
-                &lt;label id="TA1-att" for="TA1"&gt;Attend&lt;/label&gt;&lt;/p&gt;
-	&lt;/td&gt;
-	
-	&lt;td&gt;
-		&lt;h2 id="title-FM1"&gt;The Triassic period, rise of the dinosaurs&lt;/h2&gt;
-		&lt;p&gt;1 place left&lt;/p&gt;
-		&lt;p&gt;&lt;input type="checkbox" id="FM1" aria-labelledby="title-FM1 track1 pm1 FM1-att"&gt;
-                &lt;label id="FM1-att" for="FM1"&gt;Attend&lt;/label&gt;&lt;/p&gt;
-
-	&lt;/td&gt;
-	
-	&lt;td&gt;
-		&lt;h2 id="title-FA1"&gt;The Jurassic period&lt;/h2&gt;
-		&lt;p&gt;11 places left&lt;/p&gt;
-		&lt;p&gt;&lt;input type="checkbox" id="FA1" aria-labelledby="title-FA1 track1 pm2 FA1-att"&gt;
-                &lt;label id="FA1-att" for="FA1"&gt;Attend&lt;/label&gt;&lt;/p&gt;
-	&lt;/td&gt;
-&lt;/tr&gt;
-
-
-&lt;tr&gt;
-	&lt;th id="track2" scope="row"&gt;track 2&lt;/th&gt;
-	&lt;td&gt;
-		&lt;h2 id="title-TM2"&gt;The Cretaceous period&lt;/h2&gt;
-		&lt;p&gt;18 places left&lt;/p&gt;
-		&lt;p&gt;&lt;input type="checkbox" id="TM2" aria-labelledby="title-TM2 track2 am1 TM2-att"&gt;
-                &lt;label id="TM2-att" for="TM2"&gt;Attend&lt;/label&gt;&lt;/p&gt;
-	&lt;/td&gt;
-	
-	&lt;td&gt;
-		&lt;h2 id="title-TA2"&gt;The end of the dinosaurs&lt;/h2&gt;
-		&lt;p&gt;2 places left&lt;/p&gt;
-		&lt;p&gt;&lt;input type="checkbox" id="TA2" aria-labelledby="title-TA2 track2 am2 TA2-att"&gt;
-                &lt;label id="TA2-att" for="TA2"&gt;Attend&lt;/label&gt;&lt;/p&gt;
-	&lt;/td&gt;
-	
-	&lt;td&gt;
-		&lt;h2 id="title-FM2"&gt;First discoveries of dinosaurs&lt;/h2&gt;
-		&lt;p&gt;2 places left&lt;/p&gt;
-		&lt;p&gt;&lt;input type="checkbox" id="FM2" aria-labelledby="title-FM2 track2 pm1 FM2-att"&gt;
-                &lt;label id="FM2-att" for="FM2"&gt;Attend&lt;/label&gt;&lt;/p&gt;
-	&lt;/td&gt;
-	
-	&lt;td&gt;
-		&lt;h2 id="title-FA2"&gt;Emerging scholarship&lt;/h2&gt;
-		&lt;p&gt;19 places left&lt;/p&gt;
-		&lt;p&gt;&lt;input type="checkbox" id="FA2" aria-labelledby="title-FA2 track2 pm2 FA2-att"&gt;
-                &lt;label id="FA2-att" for="FA2"&gt;Attend&lt;/label&gt;&lt;/p&gt;
-	&lt;/td&gt;
-&lt;/tr&gt;
-&lt;/tbody&gt;
-&lt;/table&gt;</pre>
+  &lt;caption&gt;Dinosaur Conference workshop booking table&lt;/caption&gt;
+  &lt;tr&gt;
+    &lt;th rowspan="2" scope="col"&gt;Track&lt;/th&gt;
+    &lt;th colspan="2" scope="colgroup"&gt;Thursday&lt;/th&gt;
+    &lt;th colspan="2" scope="colgroup"&gt;Friday&lt;/th&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;th scope="col" id="am1"&gt;9 to 12 AM&lt;/th&gt;
+    &lt;th scope="col" id="pm1"&gt;2 to 5 PM&lt;/th&gt;
+    &lt;th scope="col" id="am2"&gt;9 to 12 AM&lt;/th&gt;
+    &lt;th scope="col" id="pm2"&gt;2 to 5 PM&lt;/th&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;th id="track1" scope="row"&gt;Track 1&lt;/th&gt;
+    &lt;td&gt;
+      &lt;h2 id="title-TM1"&gt;The Paleozoic era &lt;/h2&gt;
+      &lt;p&gt;2 places left&lt;/p&gt;
+      &lt;input type="checkbox" id="TM1" aria-labelledby="title-TM1 track1 am1 TM1-att"&gt;
+      &lt;label id="TM1-att" for="TM1"&gt;Attend&lt;/label&gt;
+    &lt;/td&gt;
+    &lt;td&gt;
+      &lt;h2 id="title-TA1"&gt;The Mesozoic era overview&lt;/h2&gt;
+      &lt;p&gt;2 places left&lt;/p&gt;
+      &lt;input type="checkbox" id="TA1" aria-labelledby="title-TA1 track1 am2 TA1-att"&gt;
+      &lt;label id="TA1-att" for="TA1"&gt;Attend&lt;/label&gt;
+    &lt;/td&gt;
+    &lt;td&gt;
+      &lt;h2 id="title-FM1"&gt;The Triassic period, rise of the dinosaurs&lt;/h2&gt;
+      &lt;p&gt;1 place left&lt;/p&gt;
+      &lt;input type="checkbox" id="FM1" aria-labelledby="title-FM1 track1 pm1 FM1-att"&gt;
+      &lt;label id="FM1-att" for="FM1"&gt;Attend&lt;/label&gt;
+    &lt;/td&gt;
+    &lt;td&gt;
+      &lt;h2 id="title-FA1"&gt;The Jurassic period&lt;/h2&gt;
+      &lt;p&gt;11 places left&lt;/p&gt;
+      &lt;input type="checkbox" id="FA1" aria-labelledby="title-FA1 track1 pm2 FA1-att"&gt;
+      &lt;label id="FA1-att" for="FA1"&gt;Attend&lt;/label&gt;
+    &lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;th id="track2" scope="row"&gt;Track 2&lt;/th&gt;
+    &lt;td&gt;
+      &lt;h2 id="title-TM2"&gt;The Cretaceous period&lt;/h2&gt;
+      &lt;p&gt;18 places left&lt;/p&gt;
+      &lt;input type="checkbox" id="TM2" aria-labelledby="title-TM2 track2 am1 TM2-att"&gt;
+      &lt;label id="TM2-att" for="TM2"&gt;Attend&lt;/label&gt;
+   &lt;/td&gt;
+   &lt;td&gt;
+      &lt;h2 id="title-TA2"&gt;The end of the dinosaurs&lt;/h2&gt;
+      &lt;p&gt;2 places left&lt;/p&gt;
+      &lt;input type="checkbox" id="TA2" aria-labelledby="title-TA2 track2 am2 TA2-att"&gt;
+      &lt;label id="TA2-att" for="TA2"&gt;Attend&lt;/label&gt;
+    &lt;/td&gt;
+    &lt;td&gt;
+      &lt;h2 id="title-FM2"&gt;First discoveries of dinosaurs&lt;/h2&gt;
+      &lt;p&gt;2 places left&lt;/p&gt;
+      &lt;input type="checkbox" id="FM2" aria-labelledby="title-FM2 track2 pm1 FM2-att"&gt;
+      &lt;label id="FM2-att" for="FM2"&gt;Attend&lt;/label&gt;
+    &lt;/td&gt;
+    &lt;td&gt;
+      &lt;h2 id="title-FA2"&gt;Emerging scholarship&lt;/h2&gt;
+      &lt;p&gt;19 places left&lt;/p&gt;
+      &lt;input type="checkbox" id="FA2" aria-labelledby="title-FA2 track2 pm2 FA2-att"&gt;
+      &lt;label id="FA2-att" for="FA2"&gt;Attend&lt;/label&gt;
+    &lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/table&gt;</code></pre>
             <p class="working-example">Working example: <a href="../../working-examples/aria-labelledby-workshop-booking-timetable/">Conference workshop booking timetable</a>.</p>
          
       </section>
    </section><section id="tests"><h2>Tests</h2>
       <section class="procedure"><h3>Procedure</h3>
-         <p>For inputs that use <code class="att">aria-labelledby</code>:</p>
+         <p>For inputs that use <code class="language-html">aria-labelledby</code>:</p>
          <ol>
-            <li>Check that <code class="att">id</code>s referenced in <code class="att">aria-labelledby</code> are unique and match the <code class="att">id</code>s of the text nodes that together provide the label</li>
-            <li>Check that the concatenated content of elements referenced by <code class="att">aria-labelledby</code> is descriptive for the purpose or function of the element labeled</li>
+            <li>Check that <code class="language-html">id</code>s referenced in <code class="language-html">aria-labelledby</code> are unique and match the <code class="language-html">id</code>s of the text nodes that together provide the label</li>
+            <li>Check that the concatenated content of elements referenced by <code class="language-html">aria-labelledby</code> is descriptive for the purpose or function of the element labeled</li>
          </ol>
       </section>
       <section class="results"><h3>Expected Results</h3>
@@ -167,13 +150,15 @@ <h3>A conference workshop booking table</h3>
       
          <ul>
             <li> 
-                  <a href="https://www.w3.org/TR/html-aapi/#accessible-name-and-description-calculation">HTML to Platform Accessibility APIs Implementation Guide: Accessible Name and Description Calculation</a> 
+               <a href="https://www.w3.org/TR/html-aam/">HTML Accessibility API Mappings</a>
                </li>
             <li>
-                  <a href="https://www.w3.org/TR/wai-aria-practices/">WAI-ARIA Authoring Practices 1.1</a> 
+                  <a href="https://www.w3.org/WAI/ARIA/apg/">WAI-ARIA Authoring Practices Guide</a> 
                </li>
             <li>
-                  <a href="https://www.w3.org/TR/aria-in-html/">Using WAI-ARIA in HTML</a>: Section 2.7 aria-labelledby and aria-describedby</li>
+                  <a href="https://www.w3.org/TR/aria-in-html/">Using ARIA</a>: Practical Support: aria-label, aria-labelledby and aria-describedby
+            </li>
          </ul>
       
-   </section></body></html>
\ No newline at end of file
+   </section>
+</body></html>
diff --git a/techniques/client-side-script/SCR1.html b/techniques/client-side-script/SCR1.html
index 0f34473f40..d109507a17 100644
--- a/techniques/client-side-script/SCR1.html
+++ b/techniques/client-side-script/SCR1.html
@@ -1,46 +1,54 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Allowing the user to extend the default time limit
-        </title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Allowing the user to extend the default time limit
-        </h1><section class="meta"><p class="id">ID: SCR1</p><p class="technology">Technology: client-side-script</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
-      <p>
-            Time limits that are controlled by client-side scripting.
-</p>
-   </section><section id="description"><h2>Description</h2>
-      <p>The objective of this technique is to allow user to extend the default time limit by providing a mechanism to extend the time when scripts provide functionality that has default time limits. In order to allow the user to request a longer time limit, the script can provide a form (for example) allowing the user to enter a larger time limit or indicating that more time is needed. If the user is being warned that a time limit is about to expire (see <a href="#SCR16"></a>), this form can be made available from the warning dialog. The user can extend the time limit to at least 10 times the default time limit, either by allowing the user to indicate how much additional time is needed or by repeatedly allowing the user to extend the time limit.</p>
-   </section><section id="examples"><h2>Examples</h2>
-      <ul>
-         <li>
-A Web page contains current stock market statistics and is set to refresh periodically. When the user is warned prior to refreshing the first time, the user is provided with an option to extend the time period between refreshes. 
-    </li>
-         <li>
-In an online chess game, each player is given a time limit for completing each move. When the player is warned that time is almost up for this move, the user is provided with an option to increase the time.
-    </li>
-      </ul>
-   </section><section id="tests"><h2>Tests</h2>
-      <section class="procedure"><h3>Procedure</h3>
-         <ol>
-            <li>
-On a Web page that uses scripts to enforce a time limit, wait until the time limit has expired.
-    </li>
-            <li>
-Determine if an option was provided to extend the time limit.
-    </li>
-         </ol>
-      </section>
-      <section class="results"><h3>Expected Results</h3>
-         <ul>
-            <li>
-#2 is true and more time is provided to complete the interaction.
-    </li>
-         </ul>
-      </section>
-   </section><section id="related"><h2>Related Techniques</h2><ul>
-      <li><a href="../client-side-script/SCR16">SCR16</a></li>
-   </ul></section><section id="resources"><h2>Resources</h2>
-      
-         <ol>
-            <li> 
-                  <a href="http://www.phpbuilder.com/tips/item.php?id=141">PHPBuilder Time-out Info</a> 
-               </li>
-         </ol>
-      
-   </section></body></html>
\ No newline at end of file
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>Allowing the user to extend the default time limit</title>
+		<link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+	</head>
+	<body>
+		<h1>Allowing the user to extend the default time limit</h1>
+		<section class="meta">
+			<p class="id">ID: SCR1</p>
+			<p class="technology">Technology: client-side-script</p>
+			<p class="type">Type: Technique</p>
+		</section>
+		<section id="applicability">
+			<h2>When to Use</h2>
+			<p>Time limits that are controlled by client-side scripting.</p>
+		</section>
+		<section id="description">
+			<h2>Description</h2>
+      <p>The objective of this technique is to allow user to extend the default time limit by providing a mechanism to extend the time when scripts provide functionality that has default time limits. In order to allow the user to request a longer time limit, the script can provide a form allowing the user to enter a larger time limit or indicating that more time is needed. If the user is being warned that a time limit is about to expire (see <a href="SCR16">providing a script that warns the user a time limit is about to expire</a>), this form can be made available from the warning dialog. The user can extend the time limit to at least 10 times the default time limit, either by allowing the user to indicate how much additional time is needed or by repeatedly allowing the user to extend the time limit.</p>
+   </section>
+	 <section id="examples">
+		<h2>Examples</h2>
+		<ul>
+			<li>A Web page contains current stock market statistics and is set to refresh periodically. When the user is warned prior to refreshing the first time, the user is provided with an option to extend the time period between refreshes.</li>
+			<li>In an online chess game, each player is given a time limit for completing each move. When the player is warned that time is almost up for this move, the user is provided with an option to increase the time.</li>
+		</ul>
+	</section>
+	<section id="tests">
+		<h2>Tests</h2>
+		<section class="procedure">
+			<h3>Procedure</h3>
+			<ol>
+				<li>On a Web page that uses scripts to enforce a time limit, wait until the time limit has expired.</li>
+				<li>Determine if an option was provided to extend the time limit.</li>
+			</ol>
+		</section>
+		<section class="results">
+			<h3>Expected Results</h3>
+			<ul>
+				<li>2 is true and more time is provided to complete the interaction.</li>
+			</ul>
+		</section>
+	</section>
+	<section id="related">
+		<h2>Related Techniques</h2>
+		<ul>
+			<li><a href="../client-side-script/SCR16">SCR16</a></li>
+		</ul>
+	</section>
+<!-- <section id="resources"><h2>Resources</h2>
+</section> -->
+	</body>
+</html>
\ No newline at end of file
diff --git a/techniques/client-side-script/SCR14.html b/techniques/client-side-script/SCR14.html
index ff6c8def6a..b019823173 100644
--- a/techniques/client-side-script/SCR14.html
+++ b/techniques/client-side-script/SCR14.html
@@ -1,73 +1,107 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using scripts to make nonessential alerts optional</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Using scripts to make nonessential alerts optional</h1><section class="meta"><p class="id">ID: SCR14</p><p class="technology">Technology: client-side-script</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>Using scripts to make nonessential alerts optional</title>
+		<link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+	</head>
+	<body>
+		<h1>Using scripts to make nonessential alerts optional</h1>
+		<section class="meta">
+			<p class="id">ID: SCR14</p>
+			<p class="technology">Technology: client-side-script</p>
+			<p class="type">Type: Technique</p>
+		</section>
+		<section id="applicability">
+			<h2>When to Use</h2>
       <p>Scripting technologies which use scripting alerts for non-emergency communication.</p>
-   </section><section id="description"><h2>Description</h2>
-      <p>The objective of this technique is to display a dialog containing a message (alert) to the user.  When the alert is displayed, it receives focus and the user must activate the OK button on the dialog to dismiss it. Since these alerts cause focus to change they may distract the user, especially when used for non-emergency information. Alerts for non-emergency purposes such as displaying a quote of the day, helpful usage tip, or count down to a particular event, are not presented unless the user enables them through an option provided in the Web page.</p>
-      <p>This technique assigns a global JavaScript variable to store the user preference for displaying alerts. The default value is false. A wrapper function is created to check the value of this variable before displaying an alert. All calls to display an alert are made to this wrapper function rather than calling the alert() function directly. Early in the page, a button is provided for the user to enable the display of alerts on the page. This technique works on a visit by visit basis.     Each time the page is loaded, alerts will be disabled and the user must manually enable them. Alternatively, the author could use cookies to store user preferences across sessions.</p>
-   </section><section id="examples"><h2>Examples</h2>
-      <section class="example">
+		</section>
+		<section id="description">
+			<h2>Description</h2>
+      <p>The objective of this technique is to toggle announcements to screen readers of changes in a stock-price alert component. By default, when the stock price changes, the change is announced by screen readers. This could be annoying to some users, so there are buttons to allow users to toggle the announcements on or off.</p>
+      <p>This technique uses the <code class="language-html">aria-live</code> property to turn the stock component into a live region and the <code class="language-html">aria-atomic</code> property to tell screen readers to announce all of the component's content rather than just what was updated when the stock is updated. For the sake of this demo, the stock updates every 10 seconds. If announcements are turned on, the <code class="language-html">aria-live</code> property is set to <code class="language-html">assertive</code>; if announcements are turned off, the <code class="language-html">aria-live</code> property is set to <code class="language-html">off</code>. The two buttons used to control the announcements use the <code class="language-html">aria-pressed</code> property, updated to either <code class="language-html">true</code> or <code class="language-html">false</code>, to inform screen reader users which button is pressed and therefore whether their screen reader will announce the stock updates or not. In a real-life situation, an author should consider setting a cookie (or equivalent) to store the user's preference so that it's set over multiple visits to the page.</p>
+		</section>
+		<section id="examples">
+			<h2>Examples</h2>
+			<section class="example">
+				<h3>Updating screen reader settings for stock price update alerts</h3>
+				<p>The script below will update a stock value in an aria-live component every 10 seconds. If the user presses the "Turn Announcements Off" button, their screen reader will stop making announcements when the stock value changes; if they press the "Turn Announcements On" button, the announcements will start again.</p>
+        <section id="the-javascript">
+				<h4>The JavaScript</h4>
          
-            <p>The script below will display a quote in an alert box every ten seconds, if the user selects the "Turn Alerts On" button. The user can turn the quotes off again by choosing "Turn Alerts Off".</p>
-         
-         <pre xml:space="preserve">
-&lt;script type="text/javascript"&gt;
-var bDoAlerts = false;  // global variable which specifies whether to 
-                                       // display alerts or not
-/* function to enable/disable alerts.
- * param boolean bOn - true to enable alerts, false to disable them.
-*/
-function modifyAlerts(isEnabled) {
-   bDoAlerts = isEnabled;
-}
-/* wrapper function for displaying alerts.  Checks the value of bDoAlerts
-*and only calls the alert() function when bDoAlerts is true.
-*/
-function doAlert(aMessage) {
-    if (bDoAlerts) {
-       alert(aMessage);
+<pre xml:space="preserve"><code class="language-javascript">&lt;script&gt;
+document.addEventListener("DOMContentLoaded", function (e) {
+  const stockBox = document.querySelector("#stock-box");
+  const stockMovement = document.querySelector("#stock-movement");
+  const onBtn = document.querySelector("#live-on");
+  const offBtn = document.querySelector("#live-off"); 
+  const stocks = new Array("stock went down", "stock stayed the same", "stock went up");
+  let loopCount = 0;	
+		
+  onBtn.addEventListener("click", modifyLive, false);
+  offBtn.addEventListener("click", modifyLive, false);
+		
+  function modifyLive(e){
+    let elm = e.currentTarget;
+    let liveState = elm.getAttribute("id");
+    if (liveState === "live-off"){
+      stockBox.setAttribute("aria-live", "off");
+      onBtn.setAttribute("aria-pressed", "false");
+      offBtn.setAttribute("aria-pressed", "true");
     }
-}
-// example usage - a loop to display famous quotes.
-var gCounter = -1;  // global to store counter
-// quotes variable would be initialized with famous quotations
-var quotes = new Array("quote 1", "quote 2", "quote 3", "quote 4", "quote 5");
-function showQuotes() {
-   if (++gCounter &amp;gt;= quotes.length) {
-     gCounter = 0;
-   }
-   doAlert(quotes[gCounter]);
-   setTimeout("showQuotes();", 10000);
-}
-showQuotes();
-&lt;/script&gt;
-</pre>
-         
-            <p>Within the body of the page, include a way to turn the alerts on and off. Below is one example:</p>
-         
-         <pre xml:space="preserve">
-&lt;body&gt;
-&lt;p&gt;Press the button below to enable the display of famous quotes 
-using an alert box&lt;br /&gt;
-&lt;button id="enableBtn" type="button" onclick="modifyAlerts(true);"&gt;
-Turn Alerts On&lt;/button&gt;&lt;br /&gt;
-&lt;button id="disableBtn" type="button" onclick="modifyAlerts(false);"&gt;
-Turn Alerts Off&lt;/button&gt;&lt;/p&gt;
-</pre>
+    else{
+      stockBox.setAttribute("aria-live", "assertive");
+      onBtn.setAttribute("aria-pressed", "true");
+      offBtn.setAttribute("aria-pressed", "false");      
+    }
+  }
+		
+  setInterval(() => {
+    if(loopCount >2){
+      loopCount = 0;
+    }
+    stockMovement.innerHTML = stocks[loopCount];
+      loopCount++;
+    }, 10000)
+  });
+&lt;/script&gt;</code></pre>
+        </section>
+        <section id="the-html">
+<h4>The <abbr title="HyperText Markup Language">HTML</abbr></h4>
          
-            <p class="working-example">Working example of this code: <a href="../../working-examples/script-enable-alerts/">Demonstration of Alerts</a>.</p>
+<pre xml:space="preserve"><code class="language-html">&lt;body&gt;
+  &lt;h1&gt;Turbo Encabulator Stock Information&lt;/h1&gt;	
+  &lt;div id=&quot;stock-box&quot; aria-atomic=&quot;true&quot; aria-live=&quot;assertive&quot;&gt;
+    &lt;span&gt;Turbo Encabulator Stock Price: &lt;/span&gt;
+    &lt;span id=&quot;stock-movement&quot;&gt;stock went up&lt;/span&gt;
+  &lt;/div&gt;
+  &lt;p&gt;Use the buttons to toggle screen reader announcements of stock changes:&lt;/p&gt;
+  &lt;div&gt;
+    &lt;button aria-pressed=&quot;true&quot; id=&quot;live-on&quot; type=&quot;button&quot;&gt;
+     Turn Announcements On&lt;/button&gt;
+    &lt;button aria-pressed=&quot;false&quot; id=&quot;live-off&quot; type=&quot;button&quot;&gt;
+     Turn Announcements Off&lt;/button&gt;
+  &lt;/div&gt;
+&lt;/body&gt;</code></pre>
+        </section>
+         <p class="working-example">Working example of this code: <a href="../../working-examples/script-toggle-aria-alerts/">Demonstration of toggling ARIA alerts</a>.</p>
          
       </section>
    </section><section id="tests"><h2>Tests</h2>
       <section class="procedure"><h3>Procedure</h3>
-         <p>For a Web page that supports non-emergency interruptions using a JavaScript alert:</p>
+         <p>For a Web page that supports non-emergency interruptions:</p>
          <ol>
             <li>Load the Web page and verify that no non-emergency alerts are displayed.</li>
-            <li>Verify there is a mechanism to activate the non-emergency alerts.</li>
-            <li>Activate the non-emergency alerts and verify that the alerts are displayed.</li>
+            <li>Verify there is a mechanism to activate and deactivate the non-emergency interruptions.</li>
          </ol>
       </section>
-      <section class="results"><h3>Expected Results</h3>
+      <section class="results">
+				<h3>Expected Results</h3>
          <ul>
-            <li>For a Web page that supports non-emergency interruptions using a JavaScript alert, checks 1, 2, and 3 above are true.</li>
+            <li>For a Web page that supports non-emergency interruptions, checks #1 and #2 are true.</li>
          </ul>
       </section>
-   </section></body></html>
\ No newline at end of file
+   </section>
+	 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/default.min.css"/>
+	 <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
+	 <script>hljs.highlightAll();</script>	 
+</body></html>
diff --git a/techniques/client-side-script/SCR16.html b/techniques/client-side-script/SCR16.html
index 6b6efd59e7..f31a4114a8 100644
--- a/techniques/client-side-script/SCR16.html
+++ b/techniques/client-side-script/SCR16.html
@@ -1,79 +1,89 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing a script that warns the user a time limit is about to expire</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Providing a script that warns the user a time limit is about to expire</h1><section class="meta"><p class="id">ID: SCR16</p><p class="technology">Technology: client-side-script</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
-      <p>
-Time limits exist that are controlled by script.
-</p>
-   </section><section id="description"><h2>Description</h2>
-      <p>
-The objective of this technique is to notify users that they are almost out of time to complete an interaction. When scripts provide functionality that has time limits, the script can include functionality to warn the user of imminent time limits and provide a mechanism to request more time. 20 seconds or more before the time limit occurs, the script provides a confirm dialog that states that a time limit is imminent and asks if the user needs more time. If the user answers "yes" then the time limit is reset. If the user answers "no" or does not respond, the time limit is allowed to expire.
-</p>
-      <p>
-This technique involves time limits set with the window.setTimeout() method. If, for example, the time limit is set to expire in 60 seconds, you can set the time limit for 40 seconds and provide the confirm dialog. When the confirm dialog appears, a new time limit is set for the remaining 20 seconds. Upon expiry of the "grace period time limit" the action that would have been taken at the expiry of the 60 second time limit in the original design is taken.
-</p>
-   </section><section id="examples"><h2>Examples</h2>
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head>
+   <title>Providing a script that warns the user a time limit is about to expire</title>
+   <link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+</head>
+<body>
+   <h1>Providing a script that warns the user a time limit is about to expire</h1>
+   <section class="meta">
+      <p class="id">ID: SCR16</p>
+      <p class="technology">Technology: client-side-script</p>
+      <p class="type">Type: Technique</p>
+   </section>
+   <section id="applicability">
+      <h2>When to Use</h2>
+      <p>Time limits exist that are controlled by script.</p>
+   </section>
+   <section id="description">
+      <h2>Description</h2>
+      <p>The objective of this technique is to notify users that they are almost out of time to complete an interaction. When scripts provide functionality that has time limits, the script can include functionality to warn the user of imminent time limits and provide a mechanism to request more time. 20 seconds or more before the time limit occurs, the script provides a confirm dialog that states that a time limit is imminent and asks if the user needs more time. If the user answers "yes" then the time limit is reset. If the user answers "no" or does not respond, the time limit is allowed to expire.</p>
+      <p>This technique involves time limits set with the <code class="language-javascript">window.setTimeout()</code> method. If, for example, the time limit is set to expire in 60 seconds, you can set the time limit for 40 seconds and provide the confirm dialog. When the confirm dialog appears, a new time limit is set for the remaining 20 seconds. Upon expiry of the "grace period time limit" the action that would have been taken at the expiry of the 60 second time limit in the original design is taken.</p>
+   </section>
+   <section id="examples">
+      <h2>Examples</h2>
       <section class="example">
          
-            <p>
-A page of stock market quotes uses script to refresh the page every five minutes in order to ensure the latest statistics remain available. 20 seconds before the five minute period expires, a confirm dialog appears asking if the user needs more time before the page refreshes. This allows the user to be aware of the impending refresh and to avoid it if desired.
-</p>
+         <p>A page of stock market quotes uses script to refresh the page every five minutes in order to ensure the latest statistics remain available. 20 seconds before the five minute period expires, a confirm dialog appears asking if the user needs more time before the page refreshes. This allows the user to be aware of the impending refresh and to avoid it if desired.</p>
          
-         <pre xml:space="preserve">
-&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
-   "https://www.w3.org/TR/html4/loose.dtd"&gt;
+<pre xml:space="preserve"><code class="language-html">&lt;!doctype html&gt;
 &lt;html lang="en"&gt;
 &lt;head&gt;
-&lt;title&gt;Stock Market Quotes&lt;/title&gt;
-&lt;script type="text/javascript"&gt;
-&lt;!--
-function timeControl() {
-	// set timer for 4 min 40 sec, then ask user to confirm.
-	setTimeout('userCheck()', 280000);
-}
-function userCheck() {
-	// set page refresh for 20 sec
-	var id=setTimeout('pageReload()', 20000);
-	// If user selects "OK" the timer is reset 
-	// else the page will refresh from the server.
-	if (confirm("This page is set to refresh in 20 seconds. 
-	Would you like more time?"))
-	{
-	clearTimeout(id);
-	timeControl();
-	}
-}
-function pageReload() {
-	window.location.reload(true);
-}
-timeControl();
---&gt;
-&lt;/script&gt;
+   &lt;meta charset="utf-8"&gt;
+   &lt;title&gt;Stock Market Quotes&lt;/title&gt;
+   &lt;script&gt;
+     function timeControl() {
+     // set timer for 4 min 40 sec, then ask user to confirm.
+     setTimeout('userCheck()', 280000);
+     }
+
+     function userCheck() {
+     // set page refresh for 20 sec
+     var id=setTimeout('pageReload()', 20000);
+     // If user selects "OK" the timer is reset 
+     // else the page will refresh from the server.
+     if (confirm("This page is set to refresh in 20 seconds. 
+       Would you like more time?"))
+       {
+          clearTimeout(id);
+          timeControl();
+       }
+     }
+
+     function pageReload() {
+       window.location.reload(true);
+     }
+
+    timeControl();
+  &lt;/script&gt;
 &lt;/head&gt;
 &lt;body&gt;
-&lt;h1&gt;Stock Market Quotes&lt;/h1&gt;
-...etc...
+   &lt;h1&gt;Stock Market Quotes&lt;/h1&gt;
+   ...
 &lt;/body&gt;
-&lt;/html&gt;
-</pre>
+&lt;/html&gt;</code></pre>
       </section>
-   </section><section id="tests"><h2>Tests</h2>
+   </section>
+   <section id="tests">
+      <h2>Tests</h2>
       <section class="procedure"><h3>Procedure</h3>
-         <p>
-On a Web page that has a time limit controlled by a script: </p>
+         <p>On a Web page that has a time limit controlled by a script:</p>
          <ol>
-            <li>
-load the page and start a timer that is 20 seconds less than the time limit.
-    </li>
-            <li>
-when the timer expires, check that a confirmation dialog is displayed warning of the impending time limit.
-    </li>
+            <li>Load the page and start a timer that is 20 seconds less than the time limit.</li>
+            <li>When the timer expires, check that a confirmation dialog is displayed warning of the impending time limit.</li>
          </ol>
       </section>
-      <section class="results"><h3>Expected Results</h3>
+      <section class="results">
+         <h3>Expected Results</h3>
          <ul>
-            <li>
-#2 is true.
-    </li>
+            <li>#2 is true.</li>
          </ul>
       </section>
-   </section><section id="related"><h2>Related Techniques</h2><ul>
-      <li><a href="../client-side-script/SCR1">SCR1</a></li>
-   </ul></section></body></html>
\ No newline at end of file
+   </section>
+   <section id="related">
+      <h2>Related Techniques</h2>
+      <ul>
+         <li><a href="../client-side-script/SCR1">SCR1</a></li>
+      </ul>
+   </section>
+</body>
+</html>
\ No newline at end of file
diff --git a/techniques/client-side-script/SCR18.html b/techniques/client-side-script/SCR18.html
index cfc2fda989..caa954b783 100644
--- a/techniques/client-side-script/SCR18.html
+++ b/techniques/client-side-script/SCR18.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing client-side validation and alert</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Providing client-side validation and alert</h1><section class="meta"><p class="id">ID: SCR18</p><p class="technology">Technology: client-side-script</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing client-side validation and alert</title><link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/></head><body><h1>Providing client-side validation and alert</h1><section class="meta"><p class="id">ID: SCR18</p><p class="technology">Technology: client-side-script</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
       <p>Content that validates user input.</p>
    </section><section id="description"><h2>Description</h2>
       <p>The objective of this technique is to validate user input as values are entered for each field, by means of client-side scripting. If errors are found, an alert dialog describes the nature of the error in text. Once the user dismisses the alert dialog, it is helpful if the script positions the keyboard focus on the field where the error occurred.</p>
@@ -8,60 +8,62 @@ <h3>Checking a single control with an event handler</h3>
          
             <p>The following script will check that a valid date has been entered in the form control.</p>
          
-         <pre xml:space="preserve">
-&lt;label for="date"&gt;Date:&lt;/label&gt;
+<pre xml:space="preserve"><code class="language-html">&lt;label for="date"&gt;Date:&lt;/label&gt;
 &lt;input type="text" name="date" id="date" 
-onchange="if(isNaN(Date.parse(this.value))) 
-alert('This control is not a valid date. 
-Please re-enter the value.');" /&gt;
-</pre>
+  onchange="if(isNaN(Date.parse(this.value))) 
+  alert('This control is not a valid date. 
+  Please re-enter the value.');"&gt;</code></pre>
       </section>
    	<section class="example">
    		<h3>Checking multiple controls when the user submits the form</h3>
    		
-   			<p>The following sample shows multiple controls in a form. The <code class="el">form</code> element uses the <code class="att">onsubmit</code> attribute which creates an event handler to execute the validation script when the user attempts to submit the form. If the validation is successful, the event returns <code class="propval">true</code> and the form submission proceeds; if the validation finds errors, it displays an error message and returns <code class="propval">false</code> to cancel the submit attempt so the user can fix the problems.</p>
+   			<p>The following sample shows multiple controls in a form. The <code class="language-html">form</code> element uses the <code class="language-html">onsubmit</code> attribute which creates an event handler to execute the validation script when the user attempts to submit the form. If the validation is successful, the event returns <code class="javascript">true</code> and the form submission proceeds; if the validation finds errors, it displays an error message and returns <code class="javascript">false</code> to cancel the submit attempt so the user can fix the problems.</p>
    			<div class="note">
    				<p>This example demonstrates an alert for simplicity. A more helpful notification to the user would be to highlight the controls with problems and add information to the page about the nature of the errors and how to navigate to the controls that require data fixes.</p>
-   				<p>Although this example uses an <code class="att">onsubmit</code> attribute on the <code class="el">form</code> element for brevity, normal practice is to create a submit event listener when the page is loaded.</p>
+   				<p>Although this example uses an <code class="language-javascript">onsubmit</code> attribute on the <code class="language-html">form</code> element for brevity, normal practice is to create a submit event listener when the page is loaded.</p>
    			</div>
    			<p>Script code:</p>
-   			<pre xml:space="preserve">
-function validate() {
-	// initialize error message
-	var msg = "";
+<pre xml:space="preserve"><code class="language-javascript">function validate() {
+  // initialize error message
+  var msg = "";
 	
-	//validate name
-	var pattern = /^[a-zA-Z\s]+$/;
-	var el = document.getElementById("name");
-	if (!pattern.test(el.value))  msg += "Name can only have letters and spaces. ";
+  //validate name
+  var pattern = /^[a-zA-Z\s]+$/;
+  var el = document.getElementById("name");
+  
+  if (!pattern.test(el.value)) {
+    msg += "Name can only have letters and spaces. ";
+  }
 	
-	// validate number
-	var pattern = /^[\d\-+\.\s]+$/;
-	var el = document.getElementById("tel");
-	if (!pattern.test(el.value))  msg += "Telephone number can only have digits and separators. ";
+  // validate number
+  var pattern = /^[\d\-+\.\s]+$/;
+  var el = document.getElementById("tel");
+
+  if (!pattern.test(el.value)) {
+    msg += "Telephone number can only have digits and separators. ";
+  }
 	
-	if (msg != "") {
-		alert(msg);
-		return false;
-	} else return true;
-}
-</pre>
+  if (msg != "") {
+    alert(msg);
+    return false;
+  }
+  else {
+  return true;
+  }</code></pre>
    			<p>Form code:</p>
-   			<pre xml:space="preserve">
-&lt;form action="multiple-controls.html" onsubmit="return validate()"&gt;
-	&lt;p&gt;
-		&lt;label for="name"&gt;Name: &lt;/label&gt;
-		&lt;input type="text" name="name" id="name" /&gt;
-	&lt;/p&gt;
-	&lt;p&gt;
-		&lt;label for="tel"&gt;Telephone number: &lt;/label&gt;
-		&lt;input type="text" name="tel" id="tel" /&gt;				
-	&lt;/p&gt;
-	&lt;p&gt;
-		&lt;input type="submit" /&gt;
-	&lt;/p&gt;
-&lt;/form&gt;
-</pre>
+<pre xml:space="preserve"><code class="language-html">&lt;form action="multiple-controls.html" onsubmit="return validate()"&gt;
+  &lt;div&gt;
+    &lt;label for="name"&gt;Name:&lt;/label&gt;
+    &lt;input autocomplete="name" id="name" name="name" type="text"&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;label for="tel"&gt;Telephone number:&lt;/label&gt;
+    &lt;input autocomplete="tel" id="tel" name="tel" type="tel"&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;input type="submit"&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</code></pre>
    			<p class="working-example">This is demonstrated in the <a href="../../working-examples/script-check-multiple-controls/">working example of checking multiple controls when the user submits the form</a>.</p>
    		
    	</section>
@@ -80,4 +82,5 @@ <h3>Checking multiple controls when the user submits the form</h3>
       </section>
    </section><section id="related"><h2>Related Techniques</h2><ul>
       <li><a href="../general/G89">G89</a></li>
-   </ul></section></body></html>
\ No newline at end of file
+   </ul></section>
+</body></html>
\ No newline at end of file
diff --git a/techniques/client-side-script/SCR19.html b/techniques/client-side-script/SCR19.html
index 0d8ef83873..4e479cc70e 100644
--- a/techniques/client-side-script/SCR19.html
+++ b/techniques/client-side-script/SCR19.html
@@ -1,97 +1,79 @@
 <!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using an onchange event on a select element without causing a change of
-                    context</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Using an onchange event on a select element without causing a change of
+                    context</title><link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/></head><body><h1>Using an <code class="language-javascript">onchange</code> event on a <code class="language-html">select</code> element without causing a change of
                     context</h1><section class="meta"><p class="id">ID: SCR19</p><p class="technology">Technology: client-side-script</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
-      <p> HTML and XHTML with support for scripting. This technique uses the try/catch
-                        construct of JavaScript 1.4. </p>
+      <p>HTML with support for scripting.</p>
    </section><section id="description"><h2>Description</h2>
-      <p> The objective of this technique is to demonstrate how to correctly use an
-                        onchange event with a select element to update other elements on the Web page. This technique will not cause a change of context. When there are one
-                        or more select elements on the Web page, an onchange event on one, can
-                        update the options in another select element on the Web page. All of the
-                        data required by the select elements is included within the Web page. </p>
-      <p> It is important to note that the select item which is modified is after the
-                        trigger select element in the reading order of the Web page. This ensures
-                        that assistive technologies will pick up the change and users will encounter
-                        the new data when the modified element receives focus. This technique relies
-                        on JavaScript support in the user agent. </p>
+      <p>The objective of this technique is to demonstrate how to correctly use an onchange event with a select element to update other elements on the Web page. This technique will not cause a change of context. When there are one or more select elements on the Web page, an onchange event on one, can update the options in another select element on the Web page. All of the data required by the select elements is included within the Web page.</p>
+      <p> It is important to note that the select item which is modified is after the trigger select element in the reading order of the Web page. This ensures that assistive technologies will pick up the change and users will encounter the new data when the modified element receives focus. This technique relies on JavaScript support in the user agent. </p>
    </section><section id="examples"><h2>Examples</h2>
       <section class="example">
-         
-            <p> This example contains two select elements. When an item is selected
-                                in the first select, the choices in the other select are updated
-                                appropriately. The first select element contains a list of
-                                continents. The second select element will contain a partial list of
-                                countries located in the selected continent. There is an onchange
-                                event associated with the continent select. When the continent
-                                selection changes, the items in the country select are modified
-                                using JavaScript via the Document Object Model (DOM). All of the
-                                data required, the list of countries and continents, is included
-                                within the Web page. </p>
+         <p>This example contains two select elements. When an item is selected in the first select, the choices in the other select are updated appropriately. The first select element contains a list of continents. The second select element will contain a partial list of countries located in the selected continent. There is an onchange event associated with the continent select. When the continent selection changes, the items in the country select are modified using JavaScript via the Document Object Model (DOM). All of the data required, the list of countries and continents, is included within the Web page.</p>
             <p>Overview of the code below</p>
             <ul>
-               <li> countryLists array variable which contains the list of
-                                        countries for each continent in the trigger select element.
-                                    </li>
-               <li> countryChange() function which is called by the onchange
-                                        event of the continent select element. </li>
-               <li> The XHTML code to create the select elements in the body of
-                                        the Web page. </li>
+               <li><code class="language-javascript">countryLists</code> array variable which contains the list of countries for each continent in the trigger select element.</li>
+               <li><code class="language-javascript">countryChange()</code> function which is called by the onchange event of the continent select element.</li>
+               <li>The HTML code to create the select elements in the body of the Web page.</li>
             </ul>
          
-         <pre xml:space="preserve">
-&lt;?xml version="1.0" encoding="UTF-8"?&gt; 
-&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
-  "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; 
-&lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"&gt; 
+<pre xml:space="preserve"><code class="language-html">&lt;!doctype html&gt; 
+&lt;html lang="en"&gt; 
   &lt;head&gt; 
-    &lt;meta http-equiv="content-type" content="text/xhtml; charset=utf-8" /&gt; 
+    &lt;meta charset=utf-8"&gt; 
     &lt;title&gt;Dynamic Select Statements&lt;/title&gt; 
-&lt;script type="text/javascript"&gt;
- //&lt;![CDATA[ 
- // array of possible countries in the same order as they appear in the country selection list 
- var countryLists = new Array(4) 
- countryLists["empty"] = ["Select a Country"]; 
- countryLists["North America"] = ["Canada", "United States", "Mexico"]; 
- countryLists["South America"] = ["Brazil", "Argentina", "Chile", "Ecuador"]; 
- countryLists["Asia"] = ["Russia", "China", "Japan"]; 
- countryLists["Europe"]= ["Britain", "France", "Spain", "Germany"]; 
- /* CountryChange() is called from the onchange event of a select element. 
- * param selectObj - the select object which fired the on change event. 
- */ 
- function countryChange(selectObj) { 
- // get the index of the selected option 
- var idx = selectObj.selectedIndex; 
- // get the value of the selected option 
- var which = selectObj.options[idx].value; 
- // use the selected option value to retrieve the list of items from the countryLists array 
- cList = countryLists[which]; 
- // get the country select element via its known id 
- var cSelect = document.getElementById("country"); 
- // remove the current options from the country select 
- var len=cSelect.options.length; 
- while (cSelect.options.length &gt; 0) { 
- cSelect.remove(0); 
- } 
- var newOption; 
- // create new options 
- for (var i=0; i&lt;cList.length; i++) { 
- newOption = document.createElement("option"); 
- newOption.value = cList[i];  // assumes option string and value are the same 
- newOption.text=cList[i]; 
- // add the new option 
- try { 
- cSelect.add(newOption);  // this will fail in DOM browsers but is needed for IE 
- } 
- catch (e) { 
- cSelect.appendChild(newOption); 
- } 
- } 
- } 
-//]]&gt;
-&lt;/script&gt;
+    &lt;script&gt;
+    // array of possible countries in the same order as they appear
+    // in the country selection list 
+    var countryLists = new Array(4) 
+    countryLists["empty"] = ["Select a Country"]; 
+    countryLists["North America"] = ["Canada", "United States", "Mexico"]; 
+    countryLists["South America"] = ["Brazil", "Argentina", "Chile", "Ecuador"]; 
+    countryLists["Asia"] = ["Russia", "China", "Japan"]; 
+    countryLists["Europe"]= ["Britain", "France", "Spain", "Germany"]; 
+  
+    /* CountryChange() is called from the onchange event of a select element. 
+     * param selectObj - the select object which fired the on change event. 
+    */ 
+  
+    function countryChange(selectObj) { 
+    // get the index of the selected option 
+    var idx = selectObj.selectedIndex; 
+  
+    // get the value of the selected option 
+    var which = selectObj.options[idx].value; 
+  
+    // use the selected option value to retrieve the list of items 
+    // from the countryLists array 
+    cList = countryLists[which]; 
+  
+    // get the country select element via its known id 
+    var cSelect = document.getElementById("country"); 
+  
+    // remove the current options from the country select 
+    var len=cSelect.options.length; 
+  
+    while (cSelect.options.length &gt; 0) { 
+      cSelect.remove(0); 
+    } 
+  
+    var newOption; 
+    // create new options 
+    for (var i=0; i&lt;cList.length; i++) { 
+      newOption = document.createElement("option"); 
+      newOption.value = cList[i];  // assumes option string and value are the same 
+      newOption.text=cList[i]; 
+  
+   // add the new option 
+    try { 
+      cSelect.add(newOption);  // this will fail in DOM browsers but is needed for IE 
+    } 
+    catch (e) { 
+      cSelect.appendChild(newOption); 
+    } 
+  } 
+} 
+  &lt;/script&gt;
 &lt;/head&gt;
 &lt;body&gt;
-  &lt;noscript&gt;This page requires JavaScript be available and enabled to function properly&lt;/noscript&gt;
   &lt;h1&gt;Dynamic Select Statements&lt;/h1&gt;
   &lt;label for="continent"&gt;Select Continent&lt;/label&gt;
   &lt;select id="continent" onchange="countryChange(this);"&gt;
@@ -101,36 +83,29 @@
     &lt;option value="Asia"&gt;Asia&lt;/option&gt;
     &lt;option value="Europe"&gt;Europe&lt;/option&gt;
   &lt;/select&gt;
-  &lt;br/&gt;
-  &lt;label for="country"&gt;Select a country&lt;/label&gt;
-  &lt;select id="country"&gt;
-    &lt;option value="0"&gt;Select a country&lt;/option&gt;
-  &lt;/select&gt;
+  &lt;div&gt;
+    &lt;label for="country"&gt;Select a country&lt;/label&gt;
+    &lt;select id="country"&gt;
+      &lt;option value="0"&gt;Select a country&lt;/option&gt;
+    &lt;/select&gt;
+  &lt;/div&gt;
 &lt;/body&gt;
- &lt;/html&gt;</pre>
+&lt;/html&gt;</code></pre>
          
-            <p class="working-example"> Here is a working example: <a href="../../working-examples/script-dynamic-select/">Dynamic
-                                    Select</a> 
+            <p class="working-example"> Here is a working example: <a href="../../working-examples/script-dynamic-select/">Dynamic Select</a> 
             </p>
          
       </section>
    </section><section id="tests"><h2>Tests</h2>
       <section class="procedure"><h3>Procedure</h3>
          <ol>
-            <li> Navigate to the trigger select element (in this example, the one
-                                    to select continents) and change the value of the select. </li>
-            <li> Navigate to the select element that is updated by the trigger
-                                    (in this example, the one to select countries). </li>
-            <li> Check that the matching option values are displayed in the other
-                                    select element. </li>
-            <li> Navigate to the trigger select element, navigate through the
-                                    options but do not change the value. </li>
-            <li> Check that the matching option values are still displayed in the
-                                    associated element. </li>
+            <li> Navigate to the trigger select element (in this example, the one to select continents) and change the value of the select. </li>
+            <li> Navigate to the select element that is updated by the trigger (in this example, the one to select countries). </li>
+            <li> Check that the matching option values are displayed in the other select element. </li>
+            <li> Navigate to the trigger select element, navigate through the options but do not change the value. </li>
+            <li> Check that the matching option values are still displayed in the associated element.</li>
          </ol>
-         <p>It is recommended that the select elements are tested with an assistive
-                            technology to verify that the changes to the associated element are
-                            recognized. </p>
+         <p>It is recommended that the select elements are tested with an assistive technology to verify that the changes to the associated element are recognized.</p>
       </section>
       <section class="results"><h3>Expected Results</h3>
          <ul>
@@ -144,8 +119,9 @@
                   <a href="http://usability.com.au/2008/09/accessible-forms-using-wcag-2-0/">Accessible Forms using WCAG 2.0</a>
                </li>
              <li>
-                  <a href="https://www.w3.org/TR/WCAG21/#dfn-change-of-context">Change of context definition</a>
+                  <a>Change of context</a> definition
                </li>
          </ul>
       
-   </section></body></html>
\ No newline at end of file
+   </section>
+</body></html>
\ No newline at end of file
diff --git a/techniques/client-side-script/SCR2.html b/techniques/client-side-script/SCR2.html
index 32db521d84..7851421d6b 100644
--- a/techniques/client-side-script/SCR2.html
+++ b/techniques/client-side-script/SCR2.html
@@ -1,75 +1,93 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using redundant keyboard and mouse event handlers</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Using redundant keyboard and mouse event handlers</h1><section class="meta"><p class="id">ID: SCR2</p><p class="technology">Technology: client-side-script</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
-      <p>HTML and XHTML with scripting support. </p>
-   </section><section id="description"><h2>Description</h2>
-      <p>The objective of this technique is to demonstrate using device independent events to change a decorative image in response to a mouse or focus event. Use the onmouseover and onmouseout events to change a decorative image when the mouse moves on top of or away from an element on the page. Also, use the onfocus and onblur events to change the image when the element receives and loses focus.</p>
-      <p>The example below has a decorative image in front of an anchor element. When the user mouses over the anchor tag, the decorative image in front of the anchor is changed. When the mouse moves off of the anchor, the image is changed back to its original version. The same image change effect occurs when the user gives keyboard focus to the anchor element. When focus is received the image changes, when focus is lost the image is changed back. This is accomplished by attaching onmouseover, onmouseout, onfocus and onblur event handlers to the anchor element. The event handler is a JavaScript function called updateImage(), which changes the src attribute of the image. The updateImage() is called in response to the onmouseover, onmouseout, onfocus, and onblur events.</p>
-      <p>Each image is given a unique id. This unique id is passed to updateImage() along with a boolean value indicating which image is to be used: updateImage(imgId, isOver);. The boolean value of true is passed when the mouse is over the anchor element or it has focus. A false value is passed when the mouse moves off of the anchor element or it loses focus. The updateImage() function uses the image id to load the image and then changes the src attribue based on the boolean value. Note that since the image is for decorative purposes, it has a null alt attribute. </p>
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+   <head>
+      <title>Using redundant keyboard and mouse event handlers</title>
+      <link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+   </head>
+   <body>
+      <h1>Using redundant keyboard and mouse event handlers</h1>
+      <section class="meta">
+         <p class="id">ID: SCR2</p>
+         <p class="technology">Technology: client-side-script</p>
+         <p class="type">Type: Technique</p>
+      </section>
+      <section id="applicability">
+         <h2>When to Use</h2>
+         <p><abbr title="HyperText Markup Language">HTML</abbr> with scripting support.</p>
+      </section>
+      <section id="description">
+         <h2>Description</h2>
+         <p>The objective of this technique is to demonstrate using device independent events to change a decorative image in response to a mouse or focus event. Use the <code class="language-javascript">onmouseover</code> and <code class="language-javascript">onmouseout</code> events to change a decorative image when the mouse moves on top of or away from an element on the page. Also, use the <code class="language-javascript">onfocus</code> and <code class="language-javascript">onblur</code> events to change the image when the element receives and loses focus.</p>
+         <p>The example below has a decorative image in front of an anchor element. When the user mouses over the anchor tag, the decorative image in front of the anchor is changed. When the mouse moves off of the anchor, the image is changed back to its original version. The same image change effect occurs when the user gives keyboard focus to the anchor element. When focus is received the image changes, when focus is lost the image is changed back. This is accomplished by attaching <code class="language-javascript">onmouseover</code>, <code class="language-javascript">onmouseout</code>, <code class="language-javascript">onfocus</code> and <code class="language-javascript">onblur</code> event handlers to the anchor element. The event handler is a JavaScript function called <code class="language-javascript">updateImage()</code>, which changes the <code class="language-html">src</code> attribute of the image. The <code class="language-javascript">updateImage()</code> is called in response to the <code class="language-javascript">onmouseover</code>, <code class="language-javascript">onmouseout</code>, <code class="language-javascript">onfocus</code>, and <code class="language-javascript">onblur</code> events.</p>
+         <p>Each image is given a unique <code class="language-html">id</code>. This unique <code class="language-html">id</code> is passed to <code class="language-javascript">updateImage()</code> along with a boolean value indicating which image is to be used: <code class="language-javascript">updateImage(imgId, isOver)</code>;. The boolean value of true is passed when the mouse is over the anchor element or it has focus. A false value is passed when the mouse moves off of the anchor element or it loses focus. The <code class="language-javascript">updateImage()</code> function uses the image <code class="language-html">id</code> to load the image and then changes the <code class="language-html">src</code> attribute based on the boolean value. Note that since the image is for decorative purposes, it has a null <code class="language-html">alt</code> attribute.</p>
       <div class="note">
-         <p>It is best to use images that are similar in size and to specify the height and width attributes on the image element. This will prevent any changes to the layout of the page when the image is updated. This example uses images which are identical in size. </p>
+         <p>It is best to use images that are similar in size and to specify the height and width attributes on the image element. This will prevent any changes to the layout of the page when the image is updated. This example uses images which are identical in size.</p>
       </div>
-   </section><section id="examples"><h2>Examples</h2>
+   </section>
+   <section id="examples">
+      <h2>Examples</h2>
       <section class="example">
-         <pre xml:space="preserve">
-&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "https://www.w3.org/TR/html4/loose.dtd"&gt;
- &lt;html lang="en"&gt;
- &lt;head&gt;
- &lt;meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"&gt;
- &lt;title&gt;Changing Image Source in a Device Independent Manner&lt;/title&gt;
- &lt;script type="text/javascript"&gt;
- /* This function will change the image src of an image element.
-  * param imgId - the id of the image object to change
-  * param isOver - true when mouse is over or object has focus,
-  *                false when mouse move out or focus is lost
- */
- function updateImage(imgId, isOver) {
-   var theImage = document.getElementById(imgId);
-   if (theImage != null) { //could use a try/catch block for user agents supporting at least JavaScript 1.4
-                           // These browsers support try/catch - NetScape 6, IE 5, Mozilla, Firefox
-      if (isOver) {
-        theImage.setAttribute("src","yellowplus.gif");
-      }
-      else {
-        theImage.setAttribute("src","greyplus.gif");
-      }
-   }
- }
- &lt;/script&gt;
- &lt;/head&gt;
- &lt;body&gt;
- &lt;p&gt;Mouse over or tab to the links below and see the image change.&lt;/p&gt;
- &lt;a href="https://www.w3.org/wai" onmouseover="updateImage('wai', true);" onfocus="updateImage('wai', true);"
-   onmouseout="updateImage('wai',false);" onblur="updateImage('wai',false);"&gt;
- &lt;img src="greyplus.gif" border="0" alt="" id="wai"&gt;
-   W3C Web Accessibility Initiative&lt;/a&gt; &amp;
- &lt;a href="https://www.w3.org/International/" onmouseover="updateImage('i18n', true);" 
-   onfocus="updateImage('i18n',true);" onmouseout="updateImage('i18n',false);"
-   onblur="updateImage('i18n',false);"&gt;
-   &lt;img src="greyplus.gif" border="0" alt="" id="i18n"&gt;
-   W3C Internationalization&lt;/a&gt;
- &lt;/body&gt;
- &lt;/html&gt;
-</pre>
-      </section>
-   </section><section id="tests"><h2>Tests</h2>
+<pre xml:space="preserve"><code class="language-html">&lt;!doctype html&gt;
+  &lt;html lang="en"&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;Changing Image Source in a Device Independent Manner&lt;/title&gt;
+    &lt;script&gt;
+       /* This function will change the image src of an image element.
+        * param imgId - the id of the image object to change
+        * param isOver - true when mouse is over or object has focus,
+         false when mouse move out or focus is lost
+       */
+       function updateImage(imgId, isOver) {
+       var theImage = document.getElementById(imgId);
+       if (theImage != null) {
+         if (isOver) {
+           theImage.setAttribute("src","yellowplus.gif");
+         }
+         else {
+           theImage.setAttribute("src","greyplus.gif");
+         }
+       }
+     }
+    &lt;/script&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;p&gt;Mouse over or tab to the links below and see the image change.&lt;/p&gt;
+    &lt;a href="https://www.w3.org/WAI/"
+       onmouseover="updateImage('wai', true);" onfocus="updateImage('wai', true);"
+       onmouseout="updateImage('wai',false);" onblur="updateImage('wai',false);"&gt;
+       &lt;img alt="" id="wai" src="greyplus.gif"&gt;
+       W3C Web Accessibility Initiative&lt;/a&gt; &amp;amp;
+    &lt;a href="https://www.w3.org/International/" onmouseover="updateImage('i18n', true);" 
+       onfocus="updateImage('i18n',true);" onmouseout="updateImage('i18n',false);"
+       onblur="updateImage('i18n',false);"&gt;
+       &lt;img alt="" id="i18n" src="greyplus.gif"&gt;
+       W3C Internationalization&lt;/a&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</code></pre>
+   </section>
+   </section>
+   <section id="tests">
+      <h2>Tests</h2>
       <section class="procedure"><h3>Procedure</h3>
          <p>Load the Web page and test the events using a mouse and via the keyboard. </p>
          <ol>
             <li>Check that the "standard" image is displayed as expected when the Web page is loaded. </li>
             <li>
-               <p>Using the Mouse </p>
+               <p>Using the mouse:</p>
                <ol>
                   <li>Move the mouse over the element containing the event handlers (in this example it is an anchor element). Check that the image changes to the expected image.</li>
-                  <li>Move the mouse off of the element. Check that the image changes back to the "standard" image. </li>
+                  <li>Move the mouse off of the element. Check that the image changes back to the "standard" image.</li>
                </ol>
             </li>
             <li>
-               <p>Using the Keyboard </p>
+               <p>Using the keyboard:</p>
                <ol>
                   <li>Use the keyboard to set focus to the element containing the event handlers. Check that the image changes to the expected image. </li>
                   <li>Use the keyboard to remove focus from the element (generally by moving focus to another element). Check that the image changes to the "standard" image.</li>
                </ol>
             </li>
-            <li>Verify that the layout of other elements on the page is not affected when the image is changed. </li>
+            <li>Verify that the layout of other elements on the page is not affected when the image is changed.</li>
          </ol>
       </section>
       <section class="results"><h3>Expected Results</h3>
@@ -77,4 +95,6 @@
             <li>All of the steps for the above checks are true. </li>
          </ul>
       </section>
-   </section></body></html>
\ No newline at end of file
+   </section>
+</body>
+</html>
\ No newline at end of file
diff --git a/techniques/client-side-script/SCR20.html b/techniques/client-side-script/SCR20.html
index 58fbeca570..566156e12e 100644
--- a/techniques/client-side-script/SCR20.html
+++ b/techniques/client-side-script/SCR20.html
@@ -1,15 +1,27 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using both keyboard and other device-specific functions</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Using both keyboard and other device-specific functions</h1><section class="meta"><p class="id">ID: SCR20</p><p class="technology">Technology: client-side-script</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+   <head>
+      <title>Using both keyboard and other device-specific functions</title>
+      <link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+   </head>
+<body>
+   <h1>Using both keyboard and other device-specific functions</h1>
+   <section class="meta">
+      <p class="id">ID: SCR20</p>
+      <p class="technology">Technology: client-side-script</p>
+      <p class="type">Type: Technique</p>
+   </section>
+   <section id="applicability">
+      <h2>When to Use</h2>
       <p>Applies to all content that uses Script to implement functionality.</p>
-   </section><section id="description"><h2>Description</h2>
-      <p>
-                        The objective of this technique is to illustrate the use of both keyboard-specific and mouse-specific events with code that has a scripting function associated with an event. Using both keyboard-specific and mouse-specific events together ensures that content can be operated by a wide range of devices. For example, a script may perform the same action when a keypress is detected that is performed when a mouse button is clicked. This technique goes beyond the Success Criterion requirement for keyboard access by including not only keyboard access but access using other devices as well. 
-                    </p>
-      <p>
-            In JavaScript, commonly used event handlers include, onblur, onchange, onclick, ondblclick, onfocus, onkeydown, onkeypress, onkeyup, onload, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onreset, onselect, onsubmit, onunload. Some mouse-specific functions have a logical corresponding keyboard-specific function (such as 'onmouseover' and 'onfocus'). A keyboard event handler should be provided that executes the same function as the mouse event handler.
-                    </p>
-      <p>
-                        The following table suggests keyboard event handlers to pair mouse event handlers.
-                    </p>
+   </section>
+   <section id="description">
+      <h2>Description</h2>
+      <p>The objective of this technique is to illustrate the use of both keyboard-specific and mouse-specific events with code that has a scripting function associated with an event. Using both keyboard-specific and mouse-specific events together ensures that content can be operated by a wide range of devices. For example, a script may perform the same action when a keypress is detected that is performed when a mouse button is clicked. This technique goes beyond the Success Criterion requirement for keyboard access by including not only keyboard access but access using other devices as well.</p>
+
+      <p>In JavaScript, commonly used event handlers include, <code class="language-javascript">onblur</code>, <code class="language-javascript">onchange</code>, <code class="language-javascript">onclick</code>, <code class="language-javascript">ondblclick</code>, <code class="language-javascript">onfocus</code>, <code class="language-javascript">onkeydown</code>, <code class="language-javascript">onkeypress</code>, <code class="language-javascript">onkeyup</code>, <code class="language-javascript">onload</code>, <code class="language-javascript">onmousedown</code>, <code class="language-javascript">onmousemove</code>, <code class="language-javascript">onmouseout</code>, <code class="language-javascript">onmouseover</code>, <code class="language-javascript">onmouseup</code>, <code class="language-javascript">onreset</code>, <code class="language-javascript">onselect</code>, <code class="language-javascript">onsubmit</code>, <code class="language-javascript">onunload</code>. Some mouse-specific functions have a logical corresponding keyboard-specific function (such as '<code class="language-javascript">onmouseover</code>' and '<code class="language-javascript">onfocus</code>'). A keyboard event handler should be provided that executes the same function as the mouse event handler.</p>
+      
+      <p>The following table suggests keyboard event handlers to pair mouse event handlers.</p>
       
    	<table id="SCR20_mappings">
          <caption>Device Handler Correspondences</caption>
@@ -19,110 +31,78 @@
    				<th scope="col">...with</th>
             </tr>
             <tr>
-               <td rowspan="1" colspan="1"> 
-                  mousedown 
-               </td>
-               <td rowspan="1" colspan="1"> 
-                  keydown
-								       </td>
+               <td><code class="language-javascript">mousedown</code></td>
+               <td><code class="language-javascript">keydown</code></td>
             </tr>
             <tr>
-               <td rowspan="1" colspan="1"> 
-                  mouseup 
-               </td>
-               <td rowspan="1" colspan="1"> 
-                  keyup
-								       </td>
+               <td><code class="language-javascript">mouseup</code></td>
+               <td><code class="language-javascript">keyup</code></td>
             </tr>
             <tr>
-               <td rowspan="1" colspan="1"> 
-                  click 
-								 
-                  <sup>[1]</sup> 
-               </td>
-               <td rowspan="1" colspan="1"> 
-                  keypress 
-								 
-                  <sup>[2]</sup> 
-               </td>
+               <td><code class="language-javascript">click</code> <sup>[1]</sup></td>
+               <td><code class="language-javascript">keypress</code> <sup>[2]</sup></td>
             </tr>
             <tr>
-               <td rowspan="1" colspan="1"> 
-                  mouseover 
-               </td>
-               <td rowspan="1" colspan="1"> 
-                  focus
-								       </td>
+               <td><code class="language-javascript">mouseover</code></td>
+               <td><code class="language-javascript">focus</code></td>
             </tr>
             <tr>
-               <td rowspan="1" colspan="1"> 
-                  mouseout 
-               </td>
-               <td rowspan="1" colspan="1"> 
-                  blur 
-               </td>
+               <td><code class="language-javascript">mouseout</code></td>
+               <td><code class="language-javascript">blur</code></td>
             </tr>
          </tbody>
       </table>
-      <p>
-						   <sup>1</sup> Although click is in principle a mouse event handler, most HTML and XHTML user agents also process this event when a native HTML control (e.g. a button or a link) is activated, regardless of whether it was activated with the mouse or the keyboard. In practice, therefore, it is not necessary to duplicate this event when adding handlers to natively focusable HTML elements. However, it is necessary when adding handlers to other events, such as in Example 2 below.</p>
-      <p>
-						   <sup>2</sup> Since the keypress event handler reacts to any key, the event handler function should check first to ensure the Enter key was pressed before proceeding to handle the event. Otherwise, the event handler will run each time the user presses any key, even the tab key to leave the control, and this is usually not desirable.
-                    </p>
-      <p>
-                    Some mouse-specific functions (such as dblclick and mousemove) do  not have a corresponding keyboard-specific function. This means that some functions may need  to be implemented differently for each device (for example, including a series of buttons to execute, via keyboard, the equivalent mouse-specific functions implemented).</p>
-   </section><section id="examples"><h2>Examples</h2>
+      
+      <p><sup>1</sup> Although click is in principle a mouse event handler, most HTML user agents also process this event when a native HTML control (e.g. a button or a link) is activated, regardless of whether it was activated with the mouse or the keyboard. In practice, therefore, it is not necessary to duplicate this event when adding handlers to natively focusable HTML elements. However, it is necessary when adding handlers to other events, such as in Example 2 below.</p>
+      <p><sup>2</sup> Since the keypress event handler reacts to any key, the event handler function should check first to ensure the Enter key was pressed before proceeding to handle the event. Otherwise, the event handler will run each time the user presses any key, even the tab key to leave the control, and this is usually not desirable.</p>
+      <p>Some mouse-specific functions (such as dblclick and mousemove) do not have a corresponding keyboard-specific function. This means that some functions may need  to be implemented differently for each device (for example, including a series of buttons to execute, via keyboard, the equivalent mouse-specific functions implemented).</p>
+   </section>
+   <section id="examples">
+      <h2>Examples</h2>
       <section class="example">
+         <p>In this example of an image link, the image is changed when the user positions the pointer over the image. To provide keyboard users with a similar experience, the image is also changed when the user tabs to it.</p>
          
-            <p>In this example of an image link, the image is changed when the user positions the pointer over the image. To provide keyboard users with a similar experience, the image is also changed when the user tabs to it.
-                            </p>
-         
-         <pre xml:space="preserve">
-&lt;a href="menu.php" onmouseover="swapImageOn('menu')" onfocus="swapImageOn('menu')" 
-onmouseout="swapImageOff('menu')" onblur="swapImageOff('menu')"&gt; 
-&lt;img id="menu" src="menu_off.gif" alt="Menu" /&gt; 
-&lt;/a&gt;</pre>
+<pre xml:space="preserve"><code class="language-html">&lt;a href="menu.php" onmouseover="swapImageOn('menu')" onfocus="swapImageOn('menu')" 
+   onmouseout="swapImageOff('menu')" onblur="swapImageOff('menu')"&gt; 
+   &lt;img id="menu" src="menu_off.gif" alt="Menu"&gt; 
+&lt;/a&gt;</code></pre>
       </section>
       <section class="example">
+         <p>This example shows a custom link control where both the mouse and the keyboard can be used to activate the function. The mouse onclick event is duplicated by an appropriate keyboard onkeypress event. The tabindex attribute ensures that the keyboard will have a tab stop on the span element. Note that in this example, the nextPage() function should check that the key pressed was Enter, otherwise it will respond to all keyboard actions while the span has focus, which is not the desired behavior.</p>
          
-            <p>
-								This example shows a custom image control for which both the mouse and the keyboard can be used to activate the function. The mouse event onclick is duplicated by an appropriate keyboard event onkeypress. The tabindex attribute ensures that the keyboard will have a tab stop on the image. Note that in this example, the nextPage() function should check that the keyboard key pressed was Enter, otherwise it will respond to all keyboard actions while the image has focus, which is not the desired behavior.</p>
-         
-         <pre xml:space="preserve">
-&lt;img onclick="nextPage();" onkeypress="nextPage();" tabindex="0" src="arrow.gif" 
-alt="Go to next page"&gt; </pre>
-         
-            <div class="note">
-               <p>This example uses tabindex on an img element. Even though this is currently invalid, it is provided as a transitional technique to make this function work. Custom controls like this should also use WAI-ARIA to expose the role and state of the control.</p>
-            </div>
-         
-      </section>
-   </section><section id="tests"><h2>Tests</h2>
-      <section class="procedure"><h3>Procedure</h3>
+<pre xml:space="preserve"><code class="language-html">&lt;span onclick="nextPage();" onkeypress="nextPage();" role="link" tabindex="0"&gt;
+  &lt;img alt="Go to next page" src="arrow.gif"&gt;
+&lt;/span&gt;</code></pre></section>
+   </section>
+   <section id="tests">
+      <h2>Tests</h2>
+      <section class="procedure">
+         <h3>Procedure</h3>
          <ol>
-            <li>
-                                Find all interactive functionality
-                            </li>
-            <li>
-                                Check that all interactive functionality can be accessed using the keyboard alone
-                            </li>
+            <li>Find all interactive functionality</li>
+            <li>Check that all interactive functionality can be accessed using the keyboard alone</li>
          </ol>
       </section>
-      <section class="results"><h3>Expected Results</h3>
+      <section class="results">
+         <h3>Expected Results</h3>
          <ul>
-            <li>
-                                #2 is true
-                            </li>
+            <li>#2 is true</li>
          </ul>
       </section>
-   </section><section id="related"><h2>Related Techniques</h2><ul>
-      <li><a href="../general/G90">G90</a></li>
-   </ul></section><section id="resources"><h2>Resources</h2>
-      
-         <ul>
-            <li> 
-                  <a href="http://webaim.org/techniques/javascript/">Overview of Creating Accessible JavaScript</a> 
-               </li>
-         </ul>
-      
-   </section></body></html>
\ No newline at end of file
+   </section>
+   <section id="related">
+      <h2>Related Techniques</h2>
+      <ul>
+         <li><a href="../general/G90">G90</a></li>
+      </ul>
+   </section>
+   <section id="resources">
+      <h2>Resources</h2>   
+      <ul>
+         <li>
+            <a href="https://webaim.org/techniques/javascript/">Overview of Creating Accessible JavaScript</a> 
+         </li>
+      </ul>
+   </section>
+</body>
+</html>
diff --git a/techniques/client-side-script/SCR21.html b/techniques/client-side-script/SCR21.html
deleted file mode 100644
index 4ae80d3877..0000000000
--- a/techniques/client-side-script/SCR21.html
+++ /dev/null
@@ -1,193 +0,0 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using functions of the Document Object Model (DOM) to add content to a page</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Using functions of the Document Object Model (DOM) to add content to a page</h1><section class="meta"><p class="id">ID: SCR21</p><p class="technology">Technology: client-side-script</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
-      <p>ECMAScript used inside HTML and XHTML</p>
-   </section><section id="description"><h2>Description</h2>
-      <p>The objective of this technique is to demonstrate how to use functions of the Document Object Model (DOM) to add content to a page instead of using document.write or object.innerHTML. The document.write() method does not work with XHTML when served with the correct MIME type (application/xhtml+xml), and the innerHTML property is not part of the DOM specification and thus should be avoided.  If the DOM functions are used to add the content, user agents can access the DOM to retrieve the content. The createElement() function can be used to create elements within the DOM.  The createTextNode() is used to create text associated with elements.  The appendChild(), removeChild(), insertBefore() and replaceChild() functions are used to add and remove elements and nodes. Other DOM functions are used to assign attributes to the created elements.</p>
-      <div class="note">
-         <p>When adding focusable elements into the document, do not add tabindex attributes to explicitly set the tab order as this can cause problems when adding focusable elements into the middle of a document. Let the default tab order be assigned to the new element by not explicitly setting a tabindex attribute.</p>
-      </div>
-   </section><section id="examples"><h2>Examples</h2>
-      <section class="example">
-         
-            <p>This example demonstrates use of client-side scripting to validate a form. If errors are found appropriate error messages are displayed.  The example uses the DOM functions to add error notification consisting of a title, a short paragraph explaining that an error has occurred, and a list of errors in an ordered list. The content of the title is written as a link so that it can be used to draw the user's attention to the error using the focus method. Each item in the list is also written as a link that places the focus onto the form field in error when the link is followed.</p>
-            <p>For simplicity, the example just validates two text fields, but can easily be extended to become a generic form handler. Client-side validation should not be the sole means of validation , and should be backed up with server-side validation. The benefit of client-side validation is that you can provide immediate feedback to the user to save them waiting for the errors to come back from the server, and it helps reduce unnecessary traffic to the server.</p>
-            <p>Here is the script that adds the event handlers to the form. If scripting is enabled, the validateNumbers() function will be called to perform client-side validation before the form is submitted to the server. If scripting is not enabled, the form will be immediately submitted to the server, so validation should also be implemented on the server. 
-              </p>
-         
-         <pre xml:space="preserve">
-window.onload = initialise;
-function initialise()
-{
-  // Ensure we're working with a relatively standards compliant user agent
-  if (!document.getElementById || !document.createElement || !document.createTextNode)
-    return;
-
-  // Add an event handler for the number form
-  var objForm = document.getElementById('numberform');
-  objForm.onsubmit= function(){return validateNumbers(this);};
-}
-</pre>
-         
-            <p>Here is the validation function.  Note the use of the createElement(), createTextNode(), and appendChild() DOM functions to create the error message elements.</p>
-         
-         <pre xml:space="preserve">
-function validateNumbers(objForm)
-{
-  // Test whether fields are valid
-  var bFirst = isNumber(document.getElementById('num1').value);
-  var bSecond = isNumber(document.getElementById('num2').value);
-  // If not valid, display errors
-  if (!bFirst || !bSecond)
-  {
-    var objExisting = document.getElementById('validationerrors');
-    var objNew = document.createElement('div');
-    var objTitle = document.createElement('h2');
-    var objParagraph = document.createElement('p');
-    var objList = document.createElement('ol');
-    var objAnchor = document.createElement('a');
-    var strID = 'firsterror';
-    var strError;
-    // The heading element will contain a link so that screen readers
-    // can use it to place focus - the destination for the link is 
-    // the first error contained in a list
-    objAnchor.appendChild(document.createTextNode('Errors in Submission'));
-    objAnchor.setAttribute('href', '#firsterror');
-    objTitle.appendChild(objAnchor);
-    objParagraph.appendChild(document.createTextNode('Please review the following'));
-    objNew.setAttribute('id', 'validationerrors');
-    objNew.appendChild(objTitle);
-    objNew.appendChild(objParagraph);
-    // Add each error found to the list of errors
-    if (!bFirst)
-    {
-      strError = 'Please provide a numeric value for the first number';
-      objList.appendChild(addError(strError, '#num1', objForm, strID));
-      strID = '';
-    }
-    if (!bSecond)
-    {
-      strError = 'Please provide a numeric value for the second number';
-      objList.appendChild(addError(strError, '#num2', objForm, strID));
-      strID = '';
-    }
-    // Add the list to the error information
-    objNew.appendChild(objList);
-    // If there were existing errors, replace them with the new lot,
-    // otherwise add the new errors to the start of the form
-    if (objExisting)
-      objExisting.parentNode.replaceChild(objNew, objExisting);
-    else
-    {
-      var objPosition = objForm.firstChild;
-      objForm.insertBefore(objNew, objPosition);
-    }
-    // Place focus on the anchor in the heading to alert
-    // screen readers that the submission is in error
-    objAnchor.focus();
-    // Do not submit the form
-    objForm.submitAllowed = false;
-    return false;
-  }
-  return true;
-}
-
-// Function to validate a number
-function isNumber(strValue)
-{
-  return (!isNaN(strValue) &amp;&amp; strValue.replace(/^\s+|\s+$/, '') !== '');
-} 
-</pre>
-         
-            <p>Below are the helper functions to create the error message and to set focus to the associated form field.</p>
-         
-         <pre xml:space="preserve">
-// Function to create a list item containing a link describing the error
-// that points to the appropriate form field
-function addError(strError, strFragment, objForm, strID)
-{
-  var objAnchor = document.createElement('a');
-  var objListItem = document.createElement('li');
-  objAnchor.appendChild(document.createTextNode(strError));
-  objAnchor.setAttribute('href', strFragment);
-  objAnchor.onclick = function(event){return focusFormField(this, event, objForm);};
-  objAnchor.onkeypress = function(event){return focusFormField(this, event, objForm);};
-  // If strID has a value, this is the first error in the list
-  if (strID.length &gt; 0)
-    objAnchor.setAttribute('id', strID);
-  objListItem.appendChild(objAnchor);
-  return objListItem;
-}
-
-// Function to place focus to the form field in error
-function focusFormField(objAnchor, objEvent, objForm)
-{
-  // Allow keyboard navigation over links
-  if (objEvent &amp;&amp; objEvent.type == 'keypress')
-    if (objEvent.keyCode != 13 &amp;&amp; objEvent.keyCode != 32)
-      return true;
-  // set focus to the form control
-  var strFormField = objAnchor.href.match(/[^#]\w*$/);
-  objForm[strFormField].focus();
-  return false;
-}</pre>
-         
-            <p>Here is the HTML for the example form.</p>
-         
-         <pre xml:space="preserve">
-&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd"&gt;
-&lt;html&gt;
-&lt;head&gt;
-	&lt;title&gt;ECMAScript Form Validation&lt;/title&gt;
-	&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
-	&lt;script type="text/javascript" src="validate.js"&gt;&lt;/script&gt;
-&lt;/head&gt;
-&lt;body&gt;
-&lt;h1&gt;Form Validation&lt;/h1&gt;
-&lt;form id="numberform" method="post" action="form.php"&gt;
-&lt;fieldset&gt;
-&lt;legend&gt;Numeric Fields&lt;/legend&gt;
-&lt;p&gt;
-&lt;label for="num1"&gt;Enter first number&lt;/label&gt;
-&lt;input type="text" size="20" name="num1" id="num1"&gt;
-&lt;/p&gt;
-&lt;p&gt;
-&lt;label for="num2"&gt;Enter second number&lt;/label&gt;
-&lt;input type="text" size="20" name="num2" id="num2"&gt;
-&lt;/p&gt;
-&lt;/fieldset&gt;
-&lt;p&gt;
-&lt;input type="submit" name="submit" value="Submit Form"&gt;
-&lt;/p&gt;
-&lt;/form&gt;
-&lt;/body&gt;
-&lt;/html&gt;
-</pre>
-         
-            <p>This example is limited to client-side scripting, and should be backed up with server-side validation. The example is limited to the creation of error messages when client-side scripting is available. 
-              </p>
-            <p class="working-example">Here is a link to a working example: <a href="../../working-examples/script-form-validation/">Form Validation</a> 
-            </p>
-         
-      </section>
-   </section><section id="tests"><h2>Tests</h2>
-      <section class="procedure"><h3>Procedure</h3>
-         <p>For pages that dynamically create new content:</p>
-         <ol>
-            <li>Examine the source code and check that the new content is not created using document.write(), innerHTML, outerHTML, innerText or outerText.</li>
-         </ol>
-      </section>
-      <section class="results"><h3>Expected Results</h3>
-         <ul>
-            <li>Check #1 is true.</li>
-         </ul>
-      </section>
-   </section><section id="related"><h2>Related Techniques</h2></section><section id="resources"><h2>Resources</h2>
-      
-         <ul>
-            <li>HTML 4.01  <a href="http://www.webreference.com/js/column44/index.html">The Document Object Model, More methods</a> from Webreference.com
-									</li>
-            <li>
-                  <a href="http://usability.com.au/2008/09/accessible-forms-using-wcag-2-0/">Accessible Forms using WCAG 2.0</a>
-               </li>
-         </ul>
-      
-   </section></body></html>
\ No newline at end of file
diff --git a/techniques/client-side-script/SCR22.html b/techniques/client-side-script/SCR22.html
index f17b821db2..265f0376f2 100644
--- a/techniques/client-side-script/SCR22.html
+++ b/techniques/client-side-script/SCR22.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using scripts to control blinking and stop it in five seconds or less</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Using scripts to control blinking and stop it in five seconds or less</h1><section class="meta"><p class="id">ID: SCR22</p><p class="technology">Technology: client-side-script</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using scripts to control blinking and stop it in five seconds or less</title><link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/></head><body><h1>Using scripts to control blinking and stop it in five seconds or less</h1><section class="meta"><p class="id">ID: SCR22</p><p class="technology">Technology: client-side-script</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
       <p>Technologies that support script-controlled blinking of content.</p>
    </section><section id="description"><h2>Description</h2>
       <p>The objective of this technique is to control blinking with script so it can be set to stop in less than five seconds by the script. Script is used to start the blinking effect of content, control the toggle between visible and hidden states, and also stop the effect at five seconds or less. The setTimeout() function can be used to toggle blinking content between visible and hidden states, and stop when the number of iterations by the time between them adds up to nearly five seconds.</p>
@@ -7,34 +7,31 @@
          
             <p>This example uses JavaScript to control blinking of some HTML and XHTML content. JavaScript creates the blinking effect by changing the visibility status of the content. It controls the start of the effect and stops it within five seconds.</p>
          
-         <pre xml:space="preserve">
-...
+<pre xml:space="preserve"><code class="language-html">...
 &lt;div id="blink1" class="highlight"&gt;New item!&lt;/div&gt;
-&lt;script type="text/javascript"&gt;
-&lt;!--
-// blink "on" state
-function show()
-{
-	if (document.getElementById)
-	document.getElementById("blink1").style.visibility = "visible";
+&lt;script&gt;
+  // blink "on" state
+  function show() {
+   if (document.getElementById){
+    document.getElementById("blink1").style.visibility = "visible";
+  }
 }
+   
 // blink "off" state
-function hide()
-{
-	if (document.getElementById)
-	document.getElementById("blink1").style.visibility = "hidden";
+function hide() {
+  if (document.getElementById){
+    document.getElementById("blink1").style.visibility = "hidden";
+  }
 }
+
 // toggle "on" and "off" states every 450 ms to achieve a blink effect
 // end after 4500 ms (less than five seconds)
-for(var i=900; i &lt; 4500; i=i+900)
-{
-	setTimeout("hide()",i);
-	setTimeout("show()",i+450);
+for(let i=900; i &lt; 4500; i=i+900) {
+  setTimeout("hide()",i);
+  setTimeout("show()",i+450);
 }
---&gt;
 &lt;/script&gt;
-...
-            </pre>
+...</code></pre>
          
             <p class="working-example">Working example of this code: <a href="../../working-examples/script-control-blink/">Using script to control blinking</a>.</p>
          
@@ -52,4 +49,5 @@
             <li>For each instance of blinking content, #2 is true.</li>
          </ul>
       </section>
-   </section></body></html>
\ No newline at end of file
+   </section>
+</body></html>
\ No newline at end of file
diff --git a/techniques/client-side-script/SCR24.html b/techniques/client-side-script/SCR24.html
index dd2841b37e..aba30c5530 100644
--- a/techniques/client-side-script/SCR24.html
+++ b/techniques/client-side-script/SCR24.html
@@ -1,41 +1,44 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using progressive enhancement to open new windows on user request</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Using progressive enhancement to open new windows on user request</h1><section class="meta"><p class="id">ID: SCR24</p><p class="technology">Technology: client-side-script</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
-      <p> HTML 4.01 and XHTML 1.0 </p>
-   </section><section id="description"><h2>Description</h2>
-      <p> The objective of this technique is to avoid confusion that may be caused by
-                        the appearance of new windows that were not requested by the user. Suddenly
-                        opening new windows can disorient or be missed completely by some users.
-                        If the document type does not allow the target attribute (it
-                        does not exist in HTML 4.01 Strict or XHTML 1.0 Strict) or if the developer
-                        prefers not to use it, new windows can be opened with ECMAScript. The
-                        example below demonstrates how to open new windows with script: it adds an
-                        event handler to a link (a element) and warns the user that the
-                        content will open in a new window. </p>
-   </section><section id="examples"><h2>Examples</h2>
-      <section class="example">
-         <h3></h3>
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>Using progressive enhancement to open new windows on user request</title>
+		<link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+	</head>
+	<body>
+		<h1>Using progressive enhancement to open new windows on user request</h1>
+		<section class="meta">
+			<p class="id">ID: SCR24</p>
+			<p class="technology">Technology: client-side-script</p>
+			<p class="type">Type: Technique</p>
+		</section>
+		<section id="applicability">
+			<h2>When to Use</h2>
+      <p>HTML</p>
+		</section>
+		<section id="description">
+			<h2>Description</h2>
+      <p>The objective of this technique is to avoid confusion that may be caused by the appearance of new windows that were not requested by the user. Suddenly opening new windows can disorient or be missed completely by some users. New windows / tabs can be opened with the HTML <code class="language-html">target</code> attribute or JavaScript. The example below demonstrates how to open new windows with script: it adds an event handler to a link and warns the user that the content will open in a new window.</p>
+		</section>
+		<section id="examples">
+			<h2>Examples</h2>
+			<section class="example">
+				<h3>Using JavaScript to open a new tab / window</h3>
+				<section>
+				<h4>Markup:</h4>
+				<p>The script is included in the head of the document, and the link has an <code class="language-html">id</code> that can be used as a hook by the script.</p>
          
-            <p>Markup:</p>
-            <p> The script is included in the head of the document, and the link has
-                                an id that can be used as a hook by the script. </p>
+<pre xml:space="preserve"><code class="language-html">&lt;script src="popup.js"&gt;&lt;/script&gt;
+...
+&lt;a href="help.html" id="newwin"&gt;Show Help&lt;/a&gt;</code></pre>
          
-         <pre xml:space="preserve">
-&lt;script type="text/javascript" src="popup.js"&gt;&lt;/script&gt;
-…
-&lt;a href="help.html" id="newwin"&gt;Show Help&lt;/a&gt;</pre>
+            <h4>Script:</h4>
          
-            <p>Script:</p>
-         
-         <pre xml:space="preserve"> 
-// Use traditional event model whilst support for event registration
-// amongst browsers is poor.
-window.onload = addHandlers;
+<pre xml:space="preserve"><code class="language-javascript">window.onload = addHandlers;
 
-function addHandlers()
-{
+function addHandlers(){
   var objAnchor = document.getElementById('newwin');
-
-  if (objAnchor)
-  {
+  
+  if (objAnchor){
     objAnchor.firstChild.data = objAnchor.firstChild.data + ' (opens in a new window)';
     objAnchor.onclick = function(event){return launchWindow(this, event);}
     // UAAG requires that user agents handle events in a device-independent manner
@@ -43,64 +46,78 @@ <h3></h3>
     objAnchor.onkeypress = function(event){return launchWindow(this, event);}
   }
 }
+   
+   function launchWindow(objAnchor, objEvent)
+   {
+     var iKeyCode, bSuccess=false;
+   
+     // If the event is from a keyboard, we only want to open the
+     // new window if the user requested the link (return or space)
+     if (objEvent &amp;&amp; objEvent.type == 'keypress')
+     {
+       if (objEvent.keyCode)
+         iKeyCode = objEvent.keyCode;
+       else if (objEvent.which)
+         iKeyCode = objEvent.which;
+   
+       // If not carriage return or space, return true so that the user agent
+       // continues to process the action
+       if (iKeyCode != 13 &amp;&amp; iKeyCode != 32)
+         return true;
+     }
+   
+     bSuccess = window.open(objAnchor.href);
+   
+     // If the window did not open, allow the browser to continue the default
+     // action of opening in the same window
+     if (!bSuccess)
+       return true;
+   
+     // The window was opened, so stop the browser processing further
+     return false;
+   }</code></pre>
 
-function launchWindow(objAnchor, objEvent)
-{
-  var iKeyCode, bSuccess=false;
-
-  // If the event is from a keyboard, we only want to open the
-  // new window if the user requested the link (return or space)
-  if (objEvent &amp;&amp; objEvent.type == 'keypress')
-  {
-    if (objEvent.keyCode)
-      iKeyCode = objEvent.keyCode;
-    else if (objEvent.which)
-      iKeyCode = objEvent.which;
-
-    // If not carriage return or space, return true so that the user agent
-    // continues to process the action
-    if (iKeyCode != 13 &amp;&amp; iKeyCode != 32)
-      return true;
-  }
-
-  bSuccess = window.open(objAnchor.href);
-
-  // If the window did not open, allow the browser to continue the default
-  // action of opening in the same window
-  if (!bSuccess)
-    return true;
-
-  // The window was opened, so stop the browser processing further
-  return false;
-}</pre>
-      </section>
-   </section><section id="tests"><h2>Tests</h2>
-      <section class="procedure"><h3>Procedure</h3>
-         <ol>
-            <li> Activate each link in the document to check if it opens a new window. </li>
-            <li>
-               <p>For each link that opens a new window, check that it uses script to accomplish each of the following:</p>
-               <ol>
-                  <li>indicates that the link will open in a new window,</li>
-                  <li>uses device-independent event handlers, and</li>
-                  <li>allows the browser to open the content in the same window if a new window was not opened.</li>
-               </ol>
-            </li>
-         </ol>
-      </section>
-      <section class="results"><h3>Expected Results</h3>
-         <ul>
-            <li> #2 is true. </li>
-         </ul>
-      </section>
-   </section><section id="related"><h2>Related Techniques</h2><ul>
-      <li><a href="../html/H83">H83</a></li>
-   </ul></section><section id="resources"><h2>Resources</h2>
-      
-         <ul>
-            <li>
-                  <a href="https://en.wikipedia.org/wiki/Progressive_enhancement">Wikipedia: Progressive Enhancement</a>
-               </li>
-         </ul>
-      
-   </section></body></html>
\ No newline at end of file
+				</section>
+			</section>
+		</section>
+		<section id="tests">
+			<h2>Tests</h2>
+			<section class="procedure">
+				<h3>Procedure</h3>
+				<ol>
+					<li>Activate each link in the document to check if it opens a new window.</li>
+					<li><p>For each link that opens a new window, check that it uses script to accomplish each of the following:</p>
+						<ol>
+							<li>indicates that the link will open in a new window,</li>
+							<li>uses device-independent event handlers, and</li>
+							<li>allows the browser to open the content in the same window if a new window was not opened.</li>
+						</ol>
+					</li>
+				</ol>
+			</section>
+			<section class="results">
+				<h3>Expected Results</h3>
+				<ul>
+					<li>#2 is true.</li>
+				</ul>
+			</section>
+		</section>
+		<section id="related">
+			<h2>Related Techniques</h2>
+			<ul>
+				<li><a href="../html/H83">H83</a></li>
+			</ul>
+		</section>
+		<section id="resources">
+			<h2>Resources</h2>
+			<ul>
+				<li>
+					<a href="https://html.spec.whatwg.org/multipage/document-sequences.html#navigable-target-names">HTML - Navigable target names</a>
+				</li>
+				<li>
+					<a href="https://en.wikipedia.org/wiki/Progressive_enhancement">Wikipedia: Progressive Enhancement</a>
+				</li>
+			</ul>
+    </section>
+	</body>
+</html>
\ No newline at end of file
diff --git a/techniques/client-side-script/SCR26.html b/techniques/client-side-script/SCR26.html
index 323cc26b03..fe4f3708aa 100644
--- a/techniques/client-side-script/SCR26.html
+++ b/techniques/client-side-script/SCR26.html
@@ -1,38 +1,44 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Inserting dynamic content into the Document Object Model immediately following its trigger element</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Inserting dynamic content into the Document Object Model immediately following its trigger element</h1><section class="meta"><p class="id">ID: SCR26</p><p class="technology">Technology: client-side-script</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
-      <p>HTML and XHTML, script</p>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Inserting dynamic content into the Document Object Model immediately following its trigger element</title><link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/></head><body><h1>Inserting dynamic content into the Document Object Model immediately following its trigger element</h1><section class="meta"><p class="id">ID: SCR26</p><p class="technology">Technology: client-side-script</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+      <p>HTML and script</p>
    </section><section id="description"><h2>Description</h2>
       <p>The objective of this technique is to place inserted user interface elements into the Document Object Model (DOM) in such a way that the tab order and screen-reader reading order are set correctly by the default behavior of the user agent. This technique can be used for any user interface element that is hidden and shown, such as menus and dialogs.</p>
-      <p>The reading order in a screen-reader is based on the order of the HTML or XHTML elements in the Document Object Model, as is the default tab order. This technique inserts new content into the DOM immediately following the element that was activated to trigger the script. The triggering element must be a link or a button, and the script must be called from its onclick event. These elements are natively focusable, and their onclick event is device independent. Focus remains on the activated element and the new content, inserted after it, becomes the next thing in both the tab order and screen-reader reading order.</p>
+      <p>The reading order in a screen-reader is based on the order of the HTML elements in the Document Object Model, as is the default tab order. This technique inserts new content into the DOM immediately following the element that was activated to trigger the script. The triggering element must be a link or a button, and the script must be called from its <code class="language-javascript">onclick</code> event. These elements are natively focusable, and their <code class="language-javascript">onclick</code> event is device independent. Focus remains on the activated element and the new content, inserted after it, becomes the next thing in both the tab order and screen-reader reading order.</p>
       <p>Note that this technique works for synchronous updates. For asynchronous updates (sometimes called AJAX), an additional technique is needed to inform the assistive technology that the asynchronous content has been inserted. </p>
    </section><section id="examples"><h2>Examples</h2>
       <section class="example">
          
-            <p>This example creates a menu when a link is clicked and inserts it after the link. The onclick event of the link is used to call the ShowHide script, passing in an ID for the new menu as a parameter.</p>
+            <p>This example creates a menu when a link is clicked and inserts it after the link. The <code class="language-javascript">onclick</code> event of the link is used to call the ShowHide script, passing in an <code class="language-html">id</code> for the new menu as a parameter.</p>
          
-         <pre xml:space="preserve">&lt;a href="#" onclick="ShowHide('foo',this)"&gt;Toggle&lt;/a&gt;</pre>
+<pre xml:space="preserve"><code class="language-html">&lt;button aria-expanded="false" type="button" onclick="ShowHide('foo',this)"&gt;
+  Toggle
+&lt;/button&gt;</code></pre>
          
-            <p>The ShowHide script creates a div containing the new menu, and inserts a link into it. The last line is the core of the script. It finds the parent of the element that triggered the script, and appends the div it created as a new child to it. This causes the new div to be in the DOM after the link. When the user hits tab, the focus will go to the first focusable item in the menu, the link we created.</p>
+            <p>The ShowHide script creates a <code class="language-html">div</code> containing the new menu, and inserts a link into it. The last line is the core of the script. It finds the parent of the element that triggered the script, and appends the div it created as a new child to it. This causes the new <code class="language-html">div</code> to be in the DOM after the menu. When the user hits tab, the focus will go to the first focusable item in the menu, the link we created.</p>
          
-         <pre xml:space="preserve">function ShowHide(id,src)
-{
-	var el = document.getElementById(id);
-	if (!el)
-	{
-		el = document.createElement("div");
-		el.id = id;
-		var link = document.createElement("a");
-		link.href = "javascript:void(0)";
-		link.appendChild(document.createTextNode("Content"));
-		el.appendChild(link);
-		src.parentElement.appendChild(el);
-	}
-	else
-	{
-		el.style.display = ('none' == el.style.display ? 'block' : 'none');
-	}
-}</pre>
+<pre xml:space="preserve"><code class="language-javascript">function ShowHide(id,src){
+  var el = document.getElementById(id);
+  if (!el){
+    el = document.createElement("div");
+    el.id = id;
+    var link = document.createElement("a");
+    link.href = "/laptops";
+    link.appendChild(document.createTextNode("Laptops"));
+    el.appendChild(link);
+    src.parentElement.appendChild(el);
+    src.setAttribute("aria-controls", id);
+    src.setAttribute("aria-expanded", "true");
+   }
+   else if (el &amp;&amp; src.getAttribute("aria-expanded") === "false"){
+     el.style.display = 'block';
+     src.setAttribute("aria-expanded", "true");
+   }
+   else{
+     el.style.display = 'none';
+     src.setAttribute("aria-expanded", "false");    
+   }   
+}</code></pre>
          
-            <p>CSS is used to make the div and link look like a menu.</p>
+   <p>CSS is used to make the <code class="language-html">div</code> and link look like a menu.</p>
          
       </section>
    </section><section id="tests"><h2>Tests</h2>
@@ -48,4 +54,5 @@
             <li>#2 and #3 are true.</li>
          </ul>
       </section>
-   </section></body></html>
\ No newline at end of file
+   </section>
+</body></html>
\ No newline at end of file
diff --git a/techniques/client-side-script/SCR27.html b/techniques/client-side-script/SCR27.html
index 70b46b0592..48ff4a7765 100644
--- a/techniques/client-side-script/SCR27.html
+++ b/techniques/client-side-script/SCR27.html
@@ -1,6 +1,22 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Reordering page sections using the Document Object Model</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Reordering page sections using the Document Object Model</h1><section class="meta"><p class="id">ID: SCR27</p><p class="technology">Technology: client-side-script</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
-      <p>HTML and XHTML, script</p>
-   </section><section id="description"><h2>Description</h2>
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>Reordering page sections using the Document Object Model</title>
+    <link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+  </head>
+  <body>
+    <h1>Reordering page sections using the Document Object Model</h1>
+    <section class="meta">
+      <p class="id">ID: SCR27</p>
+      <p class="technology">Technology: client-side-script</p>
+      <p class="type">Type: Technique</p>
+    </section>
+    <section id="applicability">
+      <h2>When to Use</h2>
+      <p><abbr title="HyperText Markup Language">HTML</abbr>, script</p>
+    </section>
+    <section id="description">
+      <h2>Description</h2>
       <p>The objective of this technique is to provide a mechanism for re-ordering component which is both highly usable and accessible. The two most common mechanisms for reordering are to send users to a set-up page where they can number components, or to allow them to drag and drop components to the desired location. The drag and drop method is much more usable, as it allows the user to arrange the items in place, one at a time, and get a feeling for the results. Unfortunately, drag and drop relies on the use of a mouse. This technique allows users to interact with a menu on the components to reorder them in place in a device independent way. It can be used in place of, or in conjunction with drag and drop reordering functionality.</p>
       <p>The menu is a list of links using the device-independent onclick event to trigger scripts which re-order the content. The content is re-ordered in the Document Object Model (DOM), not just visually, so that it is in the correct order for all devices. </p>
    </section><section id="examples"><h2>Examples</h2>
@@ -8,103 +24,146 @@
          
             <p>This example does up and down reordering. This approach can also be used for two-dimensional reordering by adding left and right options.</p>
             <p>The components in this example are list items in an unordered list. Unordered lists are a very good semantic model for sets of similar items, like these components. The menu approach can also be used for other types of groupings.</p>
-            <p>The modules are list items, and each module, in addition to content in div elements, contains a menu represented as a nested list. </p>
+            <p>The modules are list items, and each module, in addition to content in <code class="language-html">div</code> elements, contains a menu represented as a nested list.</p>
          
-         <pre xml:space="preserve">&lt;ul id="swapper"&gt;
+<pre xml:space="preserve"><code class="language-html">&lt;ul id="swapper"&gt;
     &lt;li id="black"&gt;
-        &lt;div class="module"&gt;
-            &lt;div class="module_header"&gt;
-                &lt;!-- menu link --&gt;
-                &lt;a href="#" onclick="ToggleMenu(event);"&gt;menu&lt;/a&gt;
-                &lt;!-- menu --&gt;
-                &lt;ul class="menu"&gt;
-                    &lt;li&gt;&lt;a href="#" onclick="OnMenuClick(event)" 
-                        onkeypress="OnMenuKeypress(event);"&gt;up&lt;/a&gt;&lt;/li&gt;
-                    &lt;li&gt;&lt;a href="#" onclick="OnMenuClick(event)" 
-                        onkeypress="OnMenuKeypress(event);"&gt;down&lt;/a&gt;&lt;/li&gt;
-                &lt;/ul&gt;
-            &lt;/div&gt;
-            &lt;div class="module_body"&gt;
-                Text in the black module
-            &lt;/div&gt;
+      &lt;div class="module"&gt;
+        &lt;div class="module_header"&gt;
+          &lt;!-- menu link --&gt;
+          &lt;a href="#" onclick="ToggleMenu(event);"&gt;menu&lt;/a&gt;
+          &lt;!-- menu --&gt;
+          &lt;ul class="menu"&gt;
+            &lt;li&gt;&lt;a href="#" onclick="OnMenuClick(event)" 
+              onkeypress="OnMenuKeypress(event);"&gt;up&lt;/a&gt;&lt;/li&gt;
+            &lt;li&gt;&lt;a href="#" onclick="OnMenuClick(event)" 
+              onkeypress="OnMenuKeypress(event);"&gt;down&lt;/a&gt;&lt;/li&gt;
+          &lt;/ul&gt;
         &lt;/div&gt;
-    &lt;/li&gt;
-    ...
-&lt;/ul&gt;</pre>
+      &lt;div class="module_body"&gt;
+        Text in the black module
+      &lt;/div&gt;
+    &lt;/div&gt;
+  &lt;/li&gt;
+  ...
+&lt;/ul&gt;</code></pre>
          
-            <p>Since we've covered the showing and hiding of menus in the simple tree samples, we'll focus here just on the code that swaps the modules. Once we harmonize the events and cancel the default link action, we go to work. First, we set a bunch of local variables for the elements with which we'll be working: the menu, the module to be reordered, the menuLink. Then, after checking the reorder direction, we try to grab the node to swap. If we find one, we then call swapNode() to swap our two modules, and PositionElement() to move the absolutely-positioned menu along with the module, and then set focus back on the menu item which launched the whole thing.</p>
+            <p>Since we've covered the showing and hiding of menus in the simple tree samples, we'll focus here just on the code that swaps the modules. Once we harmonize the events and cancel the default link action, we go to work. First, we set a bunch of local variables for the elements with which we'll be working: the menu, the module to be reordered, the menuLink. Then, after checking the reorder direction, we try to grab the node to swap. If we find one, we then call <code class="language-javascript">swapNode()</code> to swap our two modules, and <code class="language-javascript">PositionElement()</code> to move the absolutely-positioned menu along with the module, and then set focus back on the menu item which launched the whole thing.</p>
          
-         <pre xml:space="preserve">function MoveNode(evt,dir)
-{
-    HarmonizeEvent(evt);
-    evt.preventDefault();
-
-    var src = evt.target;
-    var menu = src.parentNode.parentNode;
-    var module = menu.parentNode.parentNode.parentNode;
-    var menuLink = module.getElementsByTagName("a")[0];
-    var swap = null;
+<pre xml:space="preserve"><code class="language-javascript">function MoveNode(evt,dir){
+  
+  HarmonizeEvent(evt);
+  evt.preventDefault();
     
-    switch(dir)
-    {
-        case 'up':
-        {
-            swap = module.previousSibling;
-            while (swap &amp;&amp; swap.nodeType != 1)
-            {
-                swap = swap.previousSibling;
-            }
-            break;
-        }
-        case 'down':
-        {
-            swap = module.nextSibling;
-            while (swap &amp;&amp; swap.nodeType != 1)
-            {
-                swap = swap.nextSibling;
-            }
-            break;
-        }
+  var src = evt.target;
+  var menu = src.parentNode.parentNode;
+  var module = menu.parentNode.parentNode.parentNode;
+  var menuLink = module.getElementsByTagName("a")[0];
+  var swap = null;
+  
+  switch(dir){
+    case 'up': {
+      swap = module.previousSibling;
+      while (swap &amp;&amp; swap.nodeType != 1){
+        swap = swap.previousSibling;
+      }
+        break;
     }
-    if (swap &amp;&amp; swap.tagName == node.tagName)
-    {
-        module.swapNode(swap);
-        PositionElement(menu,menuLink,false,true);
+    case 'down': {
+      swap = module.nextSibling;
+      while (swap &amp;&amp; swap.nodeType != 1){
+        swap = swap.nextSibling;
+      }
+        break;
     }
-    src.focus();
-}</pre>
+  }
+  if (swap &amp;&amp; swap.tagName == node.tagName){
+    module.swapNode(swap);
+    PositionElement(menu,menuLink,false,true);
+  }
+  src.focus();
+}</code></pre>
          
-            <p>The CSS for the node swap is not much different than that of our previous tree samples, with some size and color adjustment for the modules and the small menu.</p>
+            <p>The <abbr title="Cascading Style Sheets">CSS</abbr> for the node swap is not much different than that of our previous tree samples, with some size and color adjustment for the modules and the small menu.</p>
          
-         <pre xml:space="preserve">ul#swapper { margin:0px; padding:0px; list-item-style:none; }
-ul#swapper li { padding:0; margin:1em; list-style:none; height:5em; width:15em; 
-    border:1px solid black; }
-ul#swapper li a { color:white; text-decoration:none; font-size:90%; }
+<pre xml:space="preserve"><code class="language-css">ul#swapper {
+  list-item-style:none;
+  margin:0px;
+  padding:0px;
+}
 
-ul#swapper li div.module_header { text-align:right; padding:0 0.2em; }
-ul#swapper li div.module_body { padding:0.2em; }
+ul#swapper li {
+  border:1px solid black;
+  height:5em;
+  list-style:none;
+  margin:1em;
+  padding:0;
+  width:15em;
+}
 
-ul#swapper ul.menu { padding:0; margin:0; list-style:none; background-color:#eeeeee; 
-    height:auto; position:absolute; text-align:left; border:1px solid gray; display:none; }
-ul#swapper ul.menu li { height:auto; border:none; margin:0; text-align:left; 
-    font-weight:normal; width:5em; }
-ul#swapper ul.menu li a { text-decoration:none; color:black; padding:0 0.1em; 
-    display:block; width:100%; }
-</pre>
-      </section>
-   </section><section id="tests"><h2>Tests</h2>
-      <section class="procedure"><h3>Procedure</h3>
-         <ol>
-            <li>Find all components in the Web Unit which can be reordered via drag and drop.</li>
-            <li>Check that there is also a mechanism to reorder them using menus build of lists of links.</li>
-            <li>Check that the menus are contained within the reorderable items in the DOM.</li>
-            <li>Check that scripts for reordering are triggered only from the onclick event of links.</li>
-            <li>Check that items are reordered in the DOM, not only visually.</li>
-         </ol>
-      </section>
-      <section class="results"><h3>Expected Results</h3>
-         <ul>
-            <li>#2 through #5 are true.</li>
-         </ul>
+ul#swapper li a {
+  color:white;
+  font-size:90%;
+  text-decoration:none;
+}
+    
+ul#swapper li div.module_header {
+  padding:0 0.2em;
+  text-align:right;
+}
+
+ul#swapper li div.module_body {
+  padding:0.2em;
+}
+    
+ul#swapper ul.menu {
+  background-color:#eeeeee; 
+  border:1px solid gray;
+  display:none;
+  height:auto;
+  list-style:none;
+  margin:0;
+  padding:0;
+  position:absolute;
+  text-align:left;
+}
+
+ul#swapper ul.menu li {
+  border:none;
+  font-weight:normal;
+  height:auto;
+  margin:0;
+  text-align:left;
+  width:5em;
+}
+
+ul#swapper ul.menu li a {
+  color:black;
+  display:block;
+  padding:0 0.1em;
+  text-decoration:none;
+  width:100%;
+}</code></pre>
       </section>
-   </section></body></html>
\ No newline at end of file
+   </section>
+   <section id="tests">
+    <h2>Tests</h2>
+    <section class="procedure">
+      <h3>Procedure</h3>
+      <ol>
+        <li>Find all components in the Web Unit which can be reordered via drag and drop.</li>
+        <li>Check that there is also a mechanism to reorder them using menus build of lists of links.</li>
+        <li>Check that the menus are contained within the re-orderable items in the DOM.</li>
+        <li>Check that scripts for reordering are triggered only from the onclick event of links.</li>
+        <li>Check that items are reordered in the DOM, not only visually.</li>
+      </ol>
+    </section>
+    <section class="results">
+      <h3>Expected Results</h3>
+      <ul>
+        <li>#2 through #5 are true.</li>
+      </ul>
+    </section>
+  </section>
+</body>
+</html>
\ No newline at end of file
diff --git a/techniques/client-side-script/SCR28.html b/techniques/client-side-script/SCR28.html
index 58507354ab..94c236da59 100644
--- a/techniques/client-side-script/SCR28.html
+++ b/techniques/client-side-script/SCR28.html
@@ -1,65 +1,48 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using an expandable and collapsible menu to bypass block of content</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Using an expandable and collapsible menu to bypass block of content</h1><section class="meta"><p class="id">ID: SCR28</p><p class="technology">Technology: client-side-script</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using an expandable and collapsible menu to bypass block of content</title><link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/></head><body><h1>Using an expandable and collapsible menu to bypass block of content</h1><section class="meta"><p class="id">ID: SCR28</p><p class="technology">Technology: client-side-script</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
       <p>Technologies that provide client side scripting.</p>
    </section><section id="description"><h2>Description</h2>
       <p>This technique allows users to skip repeated material by placing that material in a menu that can be expanded or collapsed under user control. The user can skip the repeated material by collapsing the menu. The user invokes a user interface control to hide or remove the elements of the menu. The resources section lists several techniques for menus, toolbars and trees, any of which can be used to provide a mechanism for skipping navigation.</p>
       <div class="note">
-         <p>Similiar approaches can be implemented using server-side scripting and reloading a modified version of the Web page.</p>
+         <p>Similar approaches can be implemented using server-side scripting and reloading a modified version of the Web page.</p>
       </div>
    </section><section id="examples"><h2>Examples</h2>
       <section class="example">
+         <h3>Toggling a table of contents</h3>
          
-            <p>The navigation links at top of a Web page are all entries in a menu implemented using HTML, CSS, and Javascript. When the navigation bar is expanded, the navigation links are available to the user. When the navigation bar is collapsed, the links are not available.</p>
+         <p>The table of contents for a set of Web pages is repeated near the beginning of each Web page. A button at the beginning of the table of contents lets the user remove or restore it on the page.</p>
          
-         <pre xml:space="preserve">
-...
+<pre xml:space="preserve"><code class="language-html">...
+&lt;script&gt;
+let tocToggle = document.querySelector(".toc-toggle");
+let toc = document.querySelector("#toc");
+tocToggle.addEventListener("click", toggle, false);
 
-  &lt;script type="text/javascript"&gt;
-  function toggle(id){
-    var n = document.getElementById(id);
-    n.style.display =  (n.style.display != 'none' ? 'none' : '' );
+function toggle(e){
+  let elm = e.currentTarget;
+  if(elm.getAttribute("aria-expanded") === "false"){
+    elm.setAttribute("aria-expanded", "true");
+  }
+  else{
+    elm.setAttribute("aria-expanded", "false");
   }
-  &lt;/script&gt;
+}
+&lt;/script&gt;
 
 ...
 
-  &lt;a href="#" onclick="toggle('navbar')"&gt;Toggle Navigation Bar&lt;/a&gt;
-
-  &lt;ul id="navbar"&gt;
-  &lt;li&gt;&lt;a href="http://target1.html"&gt;Link 1&lt;/a&gt;&lt;/li&gt;
-  &lt;li&gt;&lt;a href="http://target2.html"&gt;Link 2&lt;/a&gt;&lt;/li&gt;
-  &lt;li&gt;&lt;a href="http://target3.html"&gt;Link 3&lt;/a&gt;&lt;/li&gt;
-  &lt;li&gt;&lt;a href="http://target4.html"&gt;Link 4&lt;/a&gt;&lt;/li&gt;
+&lt;button aria-controls="toc" aria-expanded="true" class="toc-toggle" type="button"&gt;
+  Toggle Table Of Contents
+&lt;/button&gt;
+&lt;nav aria-labelledby="toc-header" id="toc"&gt;
+  &lt;h2 id=&quot;toc-header&quot;&gt;Table of Contents&lt;/h2&gt;
+  &lt;ul&gt;
+    &lt;li&gt;&lt;a href="#sec1"&gt;Section 1&lt;/a&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;a href="#sec2"&gt;Section 2&lt;/a&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;a href="#sec3"&gt;Section 3&lt;/a&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;a href="#sec4"&gt;Section 4&lt;/a&gt;&lt;/li&gt;
   &lt;/ul&gt;
-
-...
-</pre>
-         
-            <p class="working-example">Working example of this code: <a href="../../working-examples/script-toggle-navbar-link/">Toggle navigation bar with a link</a>.</p>
-         
-      </section>
-      <section class="example">
-         
-            <p>The table of contents for a set of Web pages is repeated near the beginning of each Web page. A button at the beginning of the table of contents lets the user remove or restore it on the page.</p>
-         
-         <pre xml:space="preserve">
-...
-
-   &lt;script type="text/javascript"&gt;
-  function toggle(id){
-    var n = document.getElementById(id);
-    n.style.display =  (n.style.display != 'none' ? 'none' : '' );
-  }
-  &lt;/script&gt;
-
-  ...
-
-  &lt;button onclick="return toggle('toc');"&gt;Toggle Table of Contents&lt;/button&gt;
-  &lt;div id="toc"&gt;
-    ...
-  &lt;/div&gt;
-
-...
-</pre>
+&lt;/nav&gt;
+...</code></pre>
          
             <p class="working-example">Working example of this code: <a href="../../working-examples/script-toggle-toc-button/">Toggle table of contents with a button</a>.</p>
          
@@ -79,18 +62,13 @@
       </section>
    </section><section id="related"><h2>Related Techniques</h2><ul>
       <li><a href="../html/H69">H69</a></li>
-      <li><a href="../html/H50">H50</a></li>
-      <li><a href="../html/H70">H70</a></li>
-      
    </ul></section><section id="resources"><h2>Resources</h2>
       
          <ul>
             <li>
-                  <a href="http://www.bobbyvandersluis.com/articles/unobtrusive-show-hide/">Unobtrusive show/hide behavior reloaded</a>
-               </li>
-            <li>
-                  <a href="http://www.dustindiaz.com/seven-togglers/">Seven ways to toggle an element with JavaScript</a>
+                  <a href="https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/">ARIA - Disclosure (Show/Hide) pattern.</a>
                </li>
          </ul>
       
-   </section></body></html>
\ No newline at end of file
+   </section>
+</body></html>
diff --git a/techniques/client-side-script/SCR29.html b/techniques/client-side-script/SCR29.html
index e24b2ad018..cc7cdd91d1 100644
--- a/techniques/client-side-script/SCR29.html
+++ b/techniques/client-side-script/SCR29.html
@@ -1,109 +1,142 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Adding keyboard-accessible actions to static HTML elements</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Adding keyboard-accessible actions to static HTML elements</h1><section class="meta"><p class="id">ID: SCR29</p><p class="technology">Technology: client-side-script</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
-      <p>HTML and XHTML, Script</p>
-   </section><section id="description"><h2>Description</h2>
-      <p>The objective of this technique is to demonstrate how to provide keyboard access to a user interface control that is implemented by actions to static HTML elements such as div or span. This technique ensures that the element is focusable by setting the tabindex attribute, and it ensures that the action can be triggered from the keyboard by providing an onkeyup or onkeypress handler in addition to an onclick handler. </p>
-      <p>When the tabindex attribute has the value 0, the element can be focused via the keyboard and is included in the tab order of the document. When the tabindex attribute has the value -1, the element cannot be tabbed to, but focus can be set programmatically, using element.focus().</p>
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>Adding keyboard-accessible actions to static HTML elements</title>
+		<link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+	</head>
+	<body>
+		<h1>Adding keyboard-accessible actions to static <abbr title="HyperText Markup Language">HTML</abbr> elements</h1>
+		<section class="meta">
+			<p class="id">ID: SCR29</p>
+			<p class="technology">Technology: client-side-script</p>
+			<p class="type">Type: Technique</p>
+		</section>
+		<section id="applicability">
+			<h2>When to Use</h2>
+      <p>HTML, script</p>
+		</section>
+		<section id="description">
+			<h2>Description</h2>
+      <p>The objective of this technique is to demonstrate how to provide keyboard access to a user interface control that is implemented by actions to static HTML elements such as <code class="language-html">div</code> or <code class="language-html">span</code>. This technique ensures that the element is focusable by setting the <code class="language-html">tabindex</code> attribute, and it ensures that the action can be triggered from the keyboard by providing an <code class="language-javascript">onkeyup</code> or <code class="language-javascript">onkeypress</code> handler in addition to an <code class="language-javascript">onclick</code> handler.</p>
+      <p>When the <code class="language-html">tabindex</code> attribute has the value <code class="language-html">0</code>, the element can be focused via the keyboard and is included in the tab order of the document. When the <code class="language-html">tabindex</code> attribute has the value <code class="language-html">-1</code>, the element cannot be tabbed to, but focus can be set programmatically, using <code class="language-javascript">element.focus()</code>.</p>
       <p>Because static HTML elements do not have actions associated with them, it is not possible to provide a backup implementation or explanation in environments in which scripting is not available. This technique should only be used in environments in which client-side scripting can be relied upon.</p>
       <div class="note">
-         <p> Such user interface controls must still satisfy Success Criterion 4.1.2. Applying this technique without also providing role, name, and state information about the user interface control will results in Failure F59, Failure of Success Criterion 4.1.2 due to using script to make div or span a user interface control in HTML.</p>
+				<p>Such user interface controls must still satisfy Success Criterion 4.1.2. Applying this technique without also providing role, name, and state information about the user interface control will results in <a href="../failures/F59">Failure F59</a>, Failure of Success Criterion 4.1.2 due to using script to make <code class="language-html">div</code> or <code class="language-html">span</code> a user interface control in HTML.</p>
       </div>
-   </section><section id="examples"><h2>Examples</h2>
-      <section class="example">
-         <h3> Adding a JavaScript action to a div element</h3>
+		</section>
+		<section id="examples">
+			<h2>Examples</h2>
+			<section class="example">
+				<h3>Adding a JavaScript action to a <code class="language-html">div</code> element</h3>
+				<p>The <code class="language-html">div</code> element on the page is given a unique <code class="language-html">id</code> attribute and a <code class="language-html">tabindex</code> attribute with value <code class="language-html">0</code>. A script uses the Document Object Model (DOM) to find the <code class="language-html">div</code> element by its <code class="language-html">id</code> and add the <code class="language-javascript">onclick</code> handler and the <code class="language-javascript">onkeyup</code> handler. The <code class="language-javascript">onkeyup</code> handler will invoke the action when the <kbd>Enter</kbd> key is pressed. Note that the <code class="language-html">div</code> element must be loaded into the DOM before it can be found and modified. This is usually accomplished by calling the script from the <code class="language-javascript">onload</code> event of the body element. The script to add the event handlers will only execute if the user agent supports and has JavaScript enabled.</p>
          
-            <p>The div element on the page is given a unique id attribute and a tabindex attribute with value 0.  A script uses the Document Object Model (DOM) to find the div element by its id and add the onclick handler and the onkeyup handler. The onkeyup handler will invoke the action when the Enter key is pressed. Note that the div element must be loaded into the DOM before it can be found and modified. This is usually accomplished by calling the script from the onload event of the body element.  The script to add the event handlers will only execute if the user agent supports and has JavaScript enabled.   </p>
-         
-         <pre xml:space="preserve">
-...
-&lt;script type="text/javascript"&gt;
- // this is the function to perform the action. This simple example toggles a message.
- function doSomething(event) {
-   var msg=document.getElementById("message");
-   msg.style.display = msg.style.display=="none" ? "" : "none";
-   //return false from the function to make certain that the href of the link does not get invoked
-   return false;
- }
- // this is the function to perform the action when the Enter key has been pressed.  
- function doSomethingOnEnter(event) {
-   var key = 0;
-   // Determine the key pressed, depending on whether window.event or the event object is in use
-   if (window.event) {
-     key = window.event.keyCode;
-   } else if (event) {
-     key = event.keyCode;
-   }
-   // Was the Enter or Space key pressed?
-   if (key == 13 || key == 32) {
-     return doSomething(event);
-   } 
-   // The event has not been handled, so return true
-   return true;
- }
- // This setUpActions() function must be called to set the onclick and onkeyup event handlers onto the existing 
- // div element. This function must be called after the div element with id="active" has been loaded into the DOM.
- // In this example the setUpActions() function is called from the onload event for the body element.
- function setUpActions() {
-   // get the div object
-   var active=document.getElementById("active");
-   // assign the onclick handler to the object.
-   active.onclick=doSomething;
-   // assign the onkeyup handler to the object.
-   active.onkeyup=doSomethingOnEnter;
- }
- &lt;/script&gt;
+<pre xml:space="preserve"><code class="language-html">&lt;script&gt;
+// this is the function to perform the action. This simple example toggles a message.
+function doSomething(event) {
+  var msg=document.getElementById("message");
+  msg.style.display = msg.style.display=="none" ? "" : "none";
 
- &lt;body onload="setUpActions();"&gt;
- &lt;p&gt;Here is the link to modify with a javascript action:&lt;/p&gt;
- &lt;div&gt;
-  &lt;span id="active" tabindex="0" role="button" &gt;Do Something&lt;/span&gt;
- &lt;/div&gt;
- &lt;div aria-live="polite"&gt;
- &lt;div id="message"&gt;Hello, world!&lt;/div&gt;
- &lt;/div&gt;
-...
-</pre>
-         
-            <p class="working-example">Working example of this code: <a href="../../working-examples/script-action-on-div/">Creating Divs with Actions using JavaScript</a>.</p>
+  //return false from the function to make certain
+  // that the href of the link does not get invoked
+  return false;
+  }
+	
+  // this is the function to perform the action when the Enter key has been pressed.  
+  function doSomethingOnEnter(event) {
+    var key = 0;
+
+     // Determine the key pressed, depending on whether window.event
+    // or the event object is in use
+    if (window.event) {
+      key = window.event.keyCode;
+    }
+    else if (event) {
+      key = event.keyCode;
+    }
+		
+    // Was the Enter or Space key pressed?
+    if (key == 13 || key == 32) {
+      return doSomething(event);
+    } 
+
+    // The event has not been handled, so return true
+    return true;
+  }
+	
+  // This setUpActions() function must be called to set the onclick and onkeyup
+  // event handlers onto the existing div element.
+  // This function must be called after the div element with id="active" 
+  // has been loaded into the DOM.
+  // In this example the setUpActions() function is called from the onload event
+  // for the body element.
+  function setUpActions() {
+   
+    // get the div object
+    var active=document.getElementById("active");
+
+    // assign the onclick handler to the object.
+    active.onclick=doSomething;
+
+    // assign the onkeyup handler to the object.
+    active.onkeyup=doSomethingOnEnter;
+}
+&lt;/script&gt;
+ 
+&lt;body onload="setUpActions();"&gt;
+  &lt;p&gt;Here is the link to modify with a javascript action:&lt;/p&gt;
+  &lt;div&gt;
+    &lt;span id="active" role="button" tabindex="0"&gt;Do Something&lt;/span&gt;
+  &lt;/div&gt;
+  &lt;div aria-live="polite"&gt;
+    &lt;div id="message"&gt;Hello, world!&lt;/div&gt;
+  &lt;/div&gt;
+&lt;/body&gt;</code></pre>
          
-      </section>
-   </section><section id="tests"><h2>Tests</h2>
-      <section class="procedure"><h3>Procedure</h3>
-         <p>In a user agent that supports Scripting:</p>
-         <ol>
-            <li>Click on the control with the mouse</li>
-            <li>Check that the scripting action executes properly</li>
-            <li>Check that it is possible to navigate to and give focus to the control via the keyboard</li>
-            <li>Set keyboard focus to the control</li>
-            <li>Check that pressing ENTER or SPACE invokes the scripting action.</li>
-         </ol>
-      </section>
-      <section class="results"><h3>Expected Results</h3>
+			<p class="working-example">Working example of this code: <a href="../../working-examples/script-action-on-div/">Creating Divs with Actions using JavaScript</a>.</p>
+		</section>
+	</section>
+	<section id="tests">
+		<h2>Tests</h2>
+		<section class="procedure">
+			<h3>Procedure</h3>
+			<p>In a user agent that supports Scripting:</p>
+			<ol>
+				<li>Click on the control with the mouse</li>
+				<li>Check that the scripting action executes properly</li>
+				<li>Check that it is possible to navigate to and give focus to the control via the keyboard</li>
+				<li>Set keyboard focus to the control</li>
+				<li>Check that pressing <kbd>Enter</kbd> or <kbd>Space</kbd> invokes the scripting action.</li>
+      </ol>
+		</section>
+		<section class="results">
+			<h3>Expected Results</h3>
          <ul>
             <li>All of the checks are true</li>
          </ul>
       </section>
-   </section><section id="related"><h2>Related Techniques</h2><ul>
-      <li><a href="../client-side-script/SCR20">SCR20</a></li>
-      <li><a href="../client-side-script/SCR24">SCR24</a></li>
-      <li><a href="../client-side-script/SCR35">SCR35</a></li>
-      <li><a href="../failures/F59">F59</a></li>
-   </ul></section><section id="resources"><h2>Resources</h2>
+		</section>
+		<section id="related">
+			<h2>Related Techniques</h2>
+			<ul>
+				<li><a href="../client-side-script/SCR20">SCR20</a></li>
+				<li><a href="../client-side-script/SCR24">SCR24</a></li>
+				<li><a href="../client-side-script/SCR35">SCR35</a></li>
+				<li><a href="../failures/F59">F59</a></li>
+			</ul>
+		</section>
+		<section id="resources">
+			<h2>Resources</h2>
       
          <ul>
-            <li>HTML 4.01 <a href="https://www.w3.org/TR/REC-html40/interact/scripts.html">Scripts</a>
-               </li>
-            <li>HTML 4.01 <a href="https://www.w3.org/TR/REC-html40/interact/forms.html#h-17.11">Giving focus to an element</a>
-               </li>
-            <li>Accessible Rich Internet Applications (WAI-ARIA) <a href="https://www.w3.org/TR/wai-aria/#global_states">Global States and Properties</a>
-               </li>
-            <li>WAI-ARIA Primer, <a href="https://www.w3.org/TR/wai-aria-primer/#focus">Provision of the keyboard or input focus</a>
-               </li>
             <li>
-                  <a href="https://www.w3.org/DOM/DOMTR">Document Object Model (DOM) Technical Reports</a>
-               </li>
+							<a href="https://html.spec.whatwg.org/multipage/scripting.html#scripting-3">HTML - Scripting</a>
+						</li>
             <li>
-                  <a href="https://msdn.microsoft.com/en-us/library/ms534654(VS.85).aspx">Internet Explorer, HTML and DHTML Reference, tabIndex Property</a>
-               </li>
+							<a href="https://html.spec.whatwg.org/multipage/interaction.html#focus">HTML - Focus</a>
+						</li>
+            <li>
+							<a href="https://www.w3.org/TR/wai-aria/#global_states"><abbr title="Accessible Rich Internet Applications">ARIA</abbr> Global States And Properties</a>
+						</li>
          </ul>
-      
-   </section></body></html>
+   </section>
+</body></html>
diff --git a/techniques/client-side-script/SCR30.html b/techniques/client-side-script/SCR30.html
index d7ad24e35a..58ba54762d 100644
--- a/techniques/client-side-script/SCR30.html
+++ b/techniques/client-side-script/SCR30.html
@@ -1,81 +1,101 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using scripts to change the link text</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Using scripts to change the link text</h1><section class="meta"><p class="id">ID: SCR30</p><p class="technology">Technology: client-side-script</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
-      <p>Client-side scripting used with HTML and XHTML</p>
-   </section><section id="description"><h2>Description</h2>
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>Using scripts to change the link text</title>
+		<link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+	</head>
+	<body>
+		<h1>Using scripts to change the link text</h1>
+		<section class="meta">
+			<p class="id">ID: SCR30</p>
+			<p class="technology">Technology: client-side-script</p>
+			<p class="type">Type: Technique</p>
+		</section>
+		<section id="applicability">
+			<h2>When to Use</h2>
+			<p>Client-side scripting used with <abbr title="HyperText Markup Language">HTML</abbr></p>
+		</section>
+		<section id="description">
+			<h2>Description</h2>
       <p>The purpose of this technique is to allow users to choose to have additional information added to the text of links so that the links can be understood out of context.</p>
       <p>Some users prefer to have links that are self-contained, where there is no need to explore the context of the link. Other users find including the context information in each link to be repetitive and to reduce their ability to use a site. Among users of assistive technology, the feedback to the working group on which is preferable has been divided. This technique allows users to pick the approach that works best for them.</p>
       <p>A link is provided near the beginning of the page that will expand the link text of the links on the page so that no additional context is needed to understand the purpose of any link. It must always be possible to understand the purpose of the expansion link directly from its link text.</p>
-      <p>This technique expands the links only for the current page view. It is also possible, and in some cases would be advisable, to save this preference in a cookie or server-side user profile, so that users would only have to make the selection once per site. </p>
-   </section><section id="examples"><h2>Examples</h2>
-      <section class="example">
-         
-            <p>This example uses Javascript to add contextual information directly to the text of a link. The link class is used to determine which additional text to add. When the "Expand Links" link is activated, each link on the page is tested to see whether additional text should be added.</p>
-         
-         <pre xml:space="preserve">
-...
-&lt;script type="text/javascript"&gt;
-var expanded = false;
-var linkContext = {
-	"hist":" version of The History of the Web",
-	"cook":" version of Cooking for Nerds"
-};
+      <p>This technique expands the links only for the current page view. It is also possible, and in some cases would be advisable, to save this preference in a cookie or server-side user profile, so that users would only have to make the selection once per site.</p>
+		</section>
+		<section id="examples">
+			<h2>Examples</h2>
+			<section class="example">
+				<p>This example uses Javascript to add contextual information directly to the text of a link. The link class is used to determine which additional text to add. When the "Expand Links" link is activated, each link on the page is tested to see whether additional text should be added.</p>
 
-function doExpand() {
-	var links = document.links;
+<pre xml:space="preserve"><code class="language-html">...
+&lt;script&gt;
+  var expanded = false;
+  var linkContext = {
+    "hist":" version of The History of the Web",
+    "cook":" version of Cooking for Nerds"
+  };
 	
-	for (var i=0; i&lt;links.length; i++) {
-		var link = links[i];
-		var cn = link.className;
-		if (linkContext[cn]) {
-			span = link.appendChild(document.createElement("span"));
-			span.setAttribute("class", "linkexpansion");
-			span.appendChild(document.createTextNode(linkContext[cn]));
-		}
-	}
-	objUpdate = document.getElementById('expand');
-	if (objUpdate)
-	{
-		objUpdate.childNodes[0].nodeValue = "Collapse links";
-	}
-	expanded = true;
-}
-
-function doCollapse() {
-	objUpdate = document.getElementById('expand');
-	var spans = document.getElementsByTagName("span");
-	var span;
-
-	// go backwards through the set as removing from the front changes indices
-	// and messes up the process
-	for (i = spans.length - 1; i &gt;= 0; i--) {
-		span = spans[i];
-		if (span.getAttribute("class") == "linkexpansion")
-			span.parentNode.removeChild(span);
-	}
-	if (objUpdate)
-	{
-		objUpdate.childNodes[0].nodeValue = "Expand links";
-	}
-	expanded = false;
-}
-
-function toggle() {
-	if (expanded) doCollapse();
-	else doExpand();
-}
+  function doExpand() {
+    var links = document.links;
+		
+    for (var i=0; i&lt;links.length; i++) {
+      var link = links[i];
+      var cn = link.className;
+      if (linkContext[cn]) {
+        span = link.appendChild(document.createElement("span"));
+        span.setAttribute("class", "linkexpansion");
+        span.appendChild(document.createTextNode(linkContext[cn]));
+      }
+    }
+    objUpdate = document.getElementById('expand');
+    if (objUpdate) {
+      objUpdate.childNodes[0].nodeValue = "Collapse links";
+    }
+    expanded = true;
+  }
+	
+  function doCollapse() {
+    objUpdate = document.getElementById('expand');
+    var spans = document.getElementsByTagName("span");
+    var span;
+	
+    // go backwards through the set as removing from the front changes indices
+    // and messes up the process
+    for (i = spans.length - 1; i &gt;= 0; i--) {
+      span = spans[i];
+      if (span.getAttribute("class") == "linkexpansion")
+        span.parentNode.removeChild(span);
+      }
+      if (objUpdate) {
+      objUpdate.childNodes[0].nodeValue = "Expand links";
+    }
+    expanded = false;
+  }
+	
+  function toggle() {
+    if (expanded) doCollapse();
+    else doExpand();
+  }
 &lt;/script&gt;
 
 ...
-
+	
 &lt;h1&gt;Books for download&lt;/h1&gt;
-&lt;p&gt;&lt;button id="expand" onclick="toggle();"&gt;Expand Links&lt;/button&gt;&lt;/p&gt;
+&lt;p&gt;&lt;button id="expand" onclick="toggle(); type="button"&gt;Expand Links&lt;/button&gt;&lt;/p&gt;
 &lt;ul&gt;
-	&lt;li&gt;The History of the Web: &lt;a href="history.docx" class="hist"&gt;Word&lt;/a&gt;, &lt;a href="history.pdf" class="hist"&gt;PDF&lt;/a&gt;, &lt;a href="history.html" class="hist"&gt;HTML&lt;/a&gt; &lt;/li&gt;
-
-	&lt;li&gt;Cooking for Nerds: &lt;a href="history.docx" class="cook"&gt;Word&lt;/a&gt;, &lt;a href="history.pdf" class="cook"&gt;PDF&lt;/a&gt;, &lt;a href="history.html" class="cook"&gt;HTML&lt;/a&gt; &lt;/li&gt;
+  &lt;li&gt;The History of the Web:
+    &lt;a href="history.docx" class="hist"&gt;Word&lt;/a&gt;, 
+    &lt;a href="history.pdf" class="hist"&gt;PDF&lt;/a&gt;, 
+    &lt;a href="history.html" class="hist"&gt;HTML&lt;/a&gt;
+  &lt;/li&gt;
+  &lt;li&gt;Cooking for Nerds: 
+    &lt;a href="history.docx" class="cook"&gt;Word&lt;/a&gt;, 
+    &lt;a href="history.pdf" class="cook"&gt;PDF&lt;/a&gt;, 
+    &lt;a href="history.html" class="cook"&gt;HTML&lt;/a&gt;
+  &lt;/li&gt;
 &lt;/ul&gt;
 
-...
-</pre>
+...</code></pre>
          
             <p class="working-example">Working example of this code: <a href="../../working-examples/script-expand-links/">Providing link expansions on demand</a>.</p>
          
@@ -95,9 +115,15 @@
             <li>Checks #1, #2, and #5 are true</li>
          </ul>
       </section>
-   </section><section id="related"><h2>Related Techniques</h2><ul>
+   </section>
+	 <section id="related">
+		<h2>Related Techniques</h2>
+		<ul>
       <li><a href="../general/G91">G91</a></li>
       <li><a href="../html/H30">H30</a></li>
       <li><a href="../html/H33">H33</a></li>
       <li><a href="../css/C7">C7</a></li>
-   </ul></section></body></html>
\ No newline at end of file
+   </ul>
+	</section>
+</body>
+</html>
\ No newline at end of file
diff --git a/techniques/client-side-script/SCR31.html b/techniques/client-side-script/SCR31.html
index f9a6b90274..5e066c7b2d 100644
--- a/techniques/client-side-script/SCR31.html
+++ b/techniques/client-side-script/SCR31.html
@@ -1,39 +1,58 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using script to change the background color or border of the element with focus</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Using script to change the background color or border of the element with focus</h1><section class="meta"><p class="id">ID: SCR31</p><p class="technology">Technology: client-side-script</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
-      <p>HTML and XHTML, CSS, Script</p>
-   </section><section id="description"><h2>Description</h2>
-      <p>This purpose of this technique is to allow the author to use JavaScript to apply CSS, in order to make the focus indicator more visible than it would ordinarily be. When an element receives focus, the background color or border is changed to make it visually distinct. When the element loses focus, it returns to its normal styling. This technique can be used on any HTML user agent that supports Script and CSS, regardless of whether it supports the :focus pseudoclass.</p>
-   </section><section id="examples"><h2>Examples</h2>
-      <section class="example">
-         
-            <p>In this example, when the link receives focus, its background turns yellow. When it loses focus, the yellow is removed. Note that if the link had a background color to begin with, you would use that color rather than "" in the script.</p>
-         
-         <pre xml:space="preserve">
-...
-&lt;script&gt;
- function toggleFocus(el)
- {
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>Using script to change the background color or border of the element with focus</title>
+		<link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+	</head>
+	<body>
+		<h1>Using script to change the background color or border of the element with focus</h1>
+		<section class="meta">
+			<p class="id">ID: SCR31</p>
+			<p class="technology">Technology: client-side-script</p>
+			<p class="type">Type: Technique</p>
+		</section>
+		<section id="applicability">
+			<h2>When to Use</h2>
+      <p><abbr title="HyperText Markup Language">HTML</abbr> <abbr title="Cascading Style Sheets">CSS</abbr>, script</p>
+		</section>
+		<section id="description">
+			<h2>Description</h2>
+      <p>This purpose of this technique is to allow the author to use JavaScript to apply CSS, in order to make the focus indicator more visible than it would ordinarily be. When an element receives focus, the background color or border is changed to make it visually distinct. When the element loses focus, it returns to its normal styling. This technique can be used on any HTML user agent that supports Script and CSS, regardless of whether it supports the :focus pseudo class.</p>
+   </section>
+	 <section id="examples">
+		<h2>Examples</h2>
+		<section class="example">
+			<p>In this example, when the link receives focus, its background turns yellow. When it loses focus, the yellow is removed. Note that if the link had a background color to begin with, you would use that color rather than "" in the script.</p>
+<pre xml:space="preserve"><code class="language-html">&lt;script&gt;function toggleFocus(el) {
   el.style.backgroundColor =  el.style.backgroundColor=="yellow" ? "inherit" : "yellow";
- }
+}
 &lt;/script&gt;
-
-...
-
-&lt;a href="example.html" onfocus="toggleFocus(this)" onblur="toggleFocus(this)"&gt;focus me&lt;/a&gt;
 ...
-</pre>
+&lt;a href="example.html" 
+ onfocus="toggleFocus(this)" onblur="toggleFocus(this)"&gt;focus me&lt;/a&gt;
+...</code></pre>
       </section>
-   </section><section id="tests"><h2>Tests</h2>
-      <section class="procedure"><h3>Procedure</h3>
-         <ol>
-            <li>Tab to each element in the page</li>
-            <li>Check that the focus indicator is visible</li>
-         </ol>
+		</section>
+		<section id="tests">
+			<h2>Tests</h2>
+			<section class="procedure">
+				<h3>Procedure</h3>
+				<ol>
+					<li>Tab to each element in the page</li>
+					<li>Check that the focus indicator is visible</li>
+				</ol>
       </section>
-      <section class="results"><h3>Expected Results</h3>
-         <ul>
-            <li>Step #2 is true</li>
-         </ul>
+			<section class="results"><h3>Expected Results</h3>
+				<ul>
+					<li>Step #2 is true</li>
+				</ul>
       </section>
-   </section><section id="related"><h2>Related Techniques</h2><ul>
-      <li><a href="../css/C15">C15</a></li>
-   </ul></section></body></html>
\ No newline at end of file
+		</section>
+		<section id="related">
+			<h2>Related Techniques</h2>
+			<ul>
+				<li><a href="../css/C15">C15</a></li>
+			</ul>
+		</section>
+	</body>
+</html>
\ No newline at end of file
diff --git a/techniques/client-side-script/SCR32.html b/techniques/client-side-script/SCR32.html
index dcd8c8f81f..4988ca7367 100644
--- a/techniques/client-side-script/SCR32.html
+++ b/techniques/client-side-script/SCR32.html
@@ -1,406 +1,382 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing client-side validation and adding error text via the DOM</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Providing client-side validation and adding error text via the DOM</h1><section class="meta"><p class="id">ID: SCR32</p><p class="technology">Technology: client-side-script</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
-      <p>Script used with HTML or XHTML.</p>
-   </section><section id="description"><h2>Description</h2>
-      <p>The objective of this technique is to demonstrate the display of an error message when client side validation of a form field has failed. Anchor elements are used to display the error messages in a list and are inserted above the fields to be validated. Anchor elements are used in the error messages so that focus can be placed on the error message(s), drawing the user's attention to it. The <code class="att">href</code> of the anchor elements contain an in-page link which references the fields where error(s) have been found. </p>
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>Providing client-side validation and adding error text via the DOM</title>
+		<link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+   </head>
+   <body>
+		<h1>Providing client-side validation and adding error text via the <abbr title="Document Object Model">DOM</abbr></h1>
+		<section class="meta">
+			<p class="id">ID: SCR32</p>
+      <p class="technology">Technology: client-side-script</p>
+      <p class="type">Type: Technique</p>
+		</section>
+		<section id="applicability">
+			<h2>When to Use</h2>
+      <p>Script used with <abbr title="HyperText Markup Language">HTML</abbr>.</p>
+		</section>
+		<section id="description">
+			<h2>Description</h2>
+      <p>The objective of this technique is to demonstrate the display of an error message when client side validation of a form field has failed. Anchor elements are used to display the error messages in a list and are inserted above the fields to be validated. Anchor elements are used in the error messages so that focus can be placed on the error message(s), drawing the user's attention to it. The <code class="language-html">href</code> of the anchor elements contain an in-page link which references the fields where error(s) have been found.</p>
       <p>In a deployed application, if Javascript is turned off, client side validation will not occur. Therefore, this technique would only be sufficient in situations where scripting is relied upon for conformance or when server side validation techniques are also used to catch any errors and return the page with information about the fields with errors. </p>
-   </section><section id="examples"><h2>Examples</h2>
-      <section class="example">
-         
-            <p>This example validates required fields as well as fields where a specific format is required. When an error is identified, the script inserts a list of error messages into the DOM and moves focus to them.</p>
-      	
-      	<figure id="figure-form-errors">
-      		<img src="img/form2.jpg"/>
-      		<figcaption>Screenshot showing the error messages for several fields that were not filled out correctly. Error messages appear as a list of links near the top of the form.</figcaption>
+   </section>
+	 <section id="examples">
+		<h2>Examples</h2>
+		<section class="example">
+			<h3>Listing errors in a block at the top of a form</h3>
+			<p>This example validates required fields as well as fields where a specific format is required. When an error is identified, the script inserts a list of error messages into the DOM and moves focus to them.</p>
+			<figure id="figure-form-errors">
+				<img alt="Screenshot showing the error messages for several fields that were not filled out correctly" src="img/form2.jpg"/>
+				<figcaption>Error messages appear as a list of links near the top of the form.</figcaption>
       	</figure>
-            
-            <p>
-               <em>HTML and Javascript code </em>
-            </p>
-            <p>Here is the HTML for the example form: </p>
-         
-         <pre xml:space="preserve">
-&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd"&gt;
-&lt;html&gt;
-    &lt;head&gt;
-        &lt;title&gt;Form Validation&lt;/title&gt;
-        &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"/&gt;
-        &lt;link href="css/validate.css" rel="stylesheet" type="text/css"/&gt;
-        &lt;script type="text/javascript" src="scripts/validate.js"/&gt;
-    &lt;/head&gt;
-    &lt;body&gt;
-
-        &lt;h1&gt;Form Validation&lt;/h1&gt;
-
-        &lt;p&gt;The following form is validated before being submitted if scripting is available,
-            otherwise the form is validated on the server. All fields are required, except those
-            marked optional. If errors are found in the submission, the form is cancelled and 
-            a list of errors is displayed at the top of the form.&lt;/p&gt;
-
-        &lt;p&gt; Please enter your details below. &lt;/p&gt;
-
-        &lt;h2&gt;Validating Form&lt;/h2&gt;
-
-        &lt;form id="personalform" method="post" action="index.php"&gt;
-            &lt;div class="validationerrors"/&gt;
-            &lt;fieldset&gt;
-                &lt;legend&gt;Personal Details&lt;/legend&gt;
-                &lt;p&gt;
-                    &lt;label for="forename"&gt;Please enter your forename&lt;/label&gt;
-                    &lt;input type="text" size="20" name="forename" id="forename" class="string"
-                        value=""/&gt;
-                &lt;/p&gt;
-                &lt;p&gt;
-                    &lt;label for="age"&gt;Please enter your age&lt;/label&gt;
-                    &lt;input type="text" size="20" name="age" id="age" class="number" value=""/&gt;
-                &lt;/p&gt;
-                &lt;p&gt;
-                    &lt;label for="email"&gt;Please enter your email address&lt;/label&gt;
-                    &lt;input type="text" size="20" name="email" id="email" class="email" value=""/&gt;
-                &lt;/p&gt;
-            &lt;/fieldset&gt;
-            &lt;p&gt;
-                &lt;input type="submit" name="signup" value="Sign up"/&gt;
-            &lt;/p&gt;
-        &lt;/form&gt;
-        &lt;h2&gt;Second Form&lt;/h2&gt;
-        &lt;form id="secondform" method="post" action="index.php#focuspoint"&gt;
-            &lt;div class="validationerrors"/&gt;
-            &lt;fieldset&gt;
-                &lt;legend&gt;Second Form Details&lt;/legend&gt;
-                &lt;p&gt;
-                    &lt;label for="suggestion"&gt;Enter a suggestion&lt;/label&gt;
-                    &lt;input type="text" size="20" name="suggestion" id="suggestion" 
-                      class="string" value=""/&gt;
-                &lt;/p&gt;
-                &lt;p&gt;
-                    &lt;label for="optemail"&gt;Please enter your email address (optional)&lt;/label&gt;
-                    &lt;input type="text" size="20" name="optemail" id="optemail"
-                        class="optional email" value=""/&gt;
-                &lt;/p&gt;
-                &lt;p&gt;
-                    &lt;label for="rating"&gt;Please rate this suggestion&lt;/label&gt;
-                    &lt;input type="text" size="20" name="rating" id="rating" 
-                      class="number" value=""/&gt;
-                &lt;/p&gt;
-                &lt;p&gt;
-                    &lt;label for="jibberish"&gt;Enter some jibberish (optional)&lt;/label&gt;
-                    &lt;input type="text" size="20" name="jibberish" id="jibberish" value=""/&gt;
-                &lt;/p&gt;
-
-            &lt;/fieldset&gt;
-            &lt;p&gt;
-                &lt;input type="submit" name="submit" value="Add Suggestion"/&gt;
-            &lt;/p&gt;
-        &lt;/form&gt;
-    &lt;/body&gt;
-&lt;/html&gt;                      </pre>
-         
-            <p>Here is the Javascript which performs the validation and inserts the error messages: </p>
+        <section id="html-for-the-form">
+				<h4>HTML for the form</h4>
+<pre xml:space="preserve"><code class="language-html">&lt;!DOCTYPE HTML&gt;
+&lt;html lang="en"&gt;
+  &lt;head&gt;
+    &lt;title&gt;Form Validation&lt;/title&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;link href="css/validate.css" rel="stylesheet"&gt;
+    &lt;script src="scripts/validate.js"&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;h1&gt;Form Validation&lt;/h1&gt;
+    &lt;p&gt;The following form is validated before being submitted if scripting
+      is available, otherwise the form is validated on the server. All fields are
+      required, except those marked optional. If errors are found in the submission,
+      the form is cancelled and a list of errors is displayed
+      at the top of the form.&lt;/p&gt;
+
+    &lt;p&gt;Please enter your details below.&lt;/p&gt;
+	
+    &lt;h2&gt;Validating Form&lt;/h2&gt;
+    &lt;form id="personalform"&gt;
+      &lt;div class="validationerrors"&gt;&lt;/div&gt;
+      &lt;fieldset&gt;
+        &lt;legend&gt;Personal Details&lt;/legend&gt;
+          &lt;div&gt;
+            &lt;label for="forename"&gt;Please enter your forename&lt;/label&gt;
+            &lt;input autocomplete="given-name" class="string"
+             id="forename" name="forename" type="text" value=""&gt;
+         &lt;/div&gt;
+         &lt;div&gt;
+            &lt;label for="age"&gt;Please enter your age&lt;/label&gt;
+            &lt;input class="number" id="age" name="age" type="text" value=""&gt;
+         &lt;/div&gt;
+         &lt;div&gt;
+           &lt;label for="email"&gt;Please enter your email address&lt;/label&gt;
+           &lt;input autocomplete="email" class="email" id="email"
+            name="email" type="text" value=""&gt;
+         &lt;/div&gt;
+      &lt;/fieldset&gt;
+      &lt;div&gt;
+        &lt;input type="submit" name="signup" value="Sign up"&gt;
+      &lt;/div&gt;
+    &lt;/form&gt;
+    
+    &lt;h2&gt;Second Form&lt;/h2&gt;
+    &lt;form id="secondform"&gt;
+      &lt;div class="validationerrors"&gt;&lt;/div&gt;
+      &lt;fieldset&gt;
+        &lt;legend&gt;Second Form Details&lt;/legend&gt;
+          &lt;div&gt;
+            &lt;label for="suggestion"&gt;Enter a suggestion&lt;/label&gt;
+            &lt;input class="string" id="suggestion" name="suggestion" type="text" value=""&gt;
+          &lt;/div&gt;
+          &lt;div&gt;
+            &lt;label for="optemail"&gt;Please enter your email address (optional)&lt;/label&gt;
+            &lt;input autocomplete="email" class="optional email" id="optemail"
+             name="optemail" type="text" value=""&gt;
+          &lt;/div&gt;
+          &lt;div&gt;
+            &lt;label for="rating"&gt;Please rate this suggestion&lt;/label&gt;
+            &lt;input class="number" id="rating" name="rating" type="text" value=""&gt;
+          &lt;/div&gt;
+          &lt;div&gt;
+            &lt;label for="jibberish"&gt;Enter some jibberish (optional)&lt;/label&gt;
+            &lt;input id="jibberish" name="jibberish" type="text" value=""&gt;
+          &lt;/div&gt;
+      &lt;/fieldset&gt;
+      &lt;div&gt;
+        &lt;input type="submit" name="submit" value="Add Suggestion"&gt;
+      &lt;/div&gt;
+    &lt;/form&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</code></pre>
+      </section>
+      <section id="the-javascript">
+<h4>The Javascript which performs the validation and inserts the error messages</h4>
          
-         <pre xml:space="preserve">
-window.onload = initialise;
-
-function initialise()
-{
-   var objForms = document.getElementsByTagName('form');
-   var iCounter;
-
-   // Attach an event handler for each form
-   for (iCounter=0; iCounter&lt;objForms.length; iCounter++)
-   {
-      objForms[iCounter].onsubmit = function(){return validateForm(this);};
-   }
+<pre xml:space="preserve"><code class="language-javascript">window.onload = initialise;
+function initialise() {
+  var objForms = document.getElementsByTagName('form');
+  var iCounter;
+	
+  // Attach an event handler for each form
+  for (iCounter=0; iCounter&lt;objForms.length; iCounter++) {
+    objForms[iCounter].onsubmit = function(){return validateForm(this);};
+  }
 }
-
-
+		
 // Event handler for the form
-function validateForm(objForm)
-{
-   var arClass = [];
-   var iErrors = 0;
-   var objField = objForm.getElementsByTagName('input');
-   var objLabel = objForm.getElementsByTagName('label');
-   var objList = document.createElement('ol');
-   var objError, objExisting, objNew, objTitle, objParagraph, objAnchor, objPosition;
-   var strLinkID, iFieldCounter, iClassCounter, iCounter;
-
-   // Get the id or name of the form, to make a unique
-   // fragment identifier
-   if (objForm.id)
-   {
-      strLinkID = objForm.id + 'ErrorID';
-   }
-   else
-   {
-      strLinkID = objForm.name + 'ErrorID';
-   }
-
-   // Iterate through input form controls, looking for validation classes
-   for (iFieldCounter=0; iFieldCounter&lt;objField.length; iFieldCounter++)
-   {
-      // Get the class for the field, and look for the appropriate class
-      arClass = objField[iFieldCounter].className.split(' ');
-      for (iClassCounter=0; iClassCounter&lt;arClass.length; iClassCounter++)
-      {
-         switch (arClass[iClassCounter])
-         {
-            case 'string':
-               if (!isString(objField[iFieldCounter].value, arClass))
-               {
-                  if (iErrors === 0)
-                  {
-                     logError(objField[iFieldCounter], objLabel, objList, strLinkID);
-                  }
-                  else
-                  {
-                     logError(objField[iFieldCounter], objLabel, objList, '');
-                  }
-                  iErrors++;
-               }
-               break;
-            case 'number':
-               if (!isNumber(objField[iFieldCounter].value, arClass))
-               {
-                  if (iErrors === 0)
-                  {
-                     logError(objField[iFieldCounter], objLabel, objList, strLinkID);
-                  }
-                  else
-                  {
-                     logError(objField[iFieldCounter], objLabel, objList, '');
-                  }
-                  iErrors++;
-               }
-               break;
-
-            case 'email' :
-               if (!isEmail(objField[iFieldCounter].value, arClass))
-               {
-                  if (iErrors === 0)
-                  {
-                     logError(objField[iFieldCounter], objLabel, objList, strLinkID);
-                  }
-                  else
-                  {
-                     logError(objField[iFieldCounter], objLabel, objList, '');
-                  }
-                  iErrors++;
-               }
-               break;
-         }
-      }
-   }
-
-   if (iErrors &gt; 0)
-   {
-      // If not valid, display error messages
-      objError = objForm.getElementsByTagName('div');
-      
-      // Look for existing errors
-      for (iCounter=0; iCounter&lt;objError.length; iCounter++)
-      {
-         if (objError[iCounter].className == 'validationerrors')
-         {
-            objExisting = objError[iCounter];
-         }
-      }
-
-      objNew = document.createElement('div');
-      objTitle = document.createElement('h2');
-      objParagraph = document.createElement('p');
-      objAnchor = document.createElement('a');
-
-      if (iErrors == 1)
-      {
-         objAnchor.appendChild(document.createTextNode('1 Error in Submission'));
-      }
-      else
-      {
-         objAnchor.appendChild(document.createTextNode(iErrors + ' Errors in Submission'));
-      }
-      objAnchor.href = '#' + strLinkID;
-      objAnchor.className = 'submissionerror';
-
-      objTitle.appendChild(objAnchor);
-      objParagraph.appendChild(document.createTextNode('Please review the following'));
-      objNew.className = 'validationerrors';
-
-      objNew.appendChild(objTitle);
-      objNew.appendChild(objParagraph);
-      objNew.appendChild(objList);
-      
-      // If there were existing error, replace them with the new lot,
-      // otherwise add the new errors to the start of the form
-      if (objExisting)
-      {
-         objExisting.parentNode.replaceChild(objNew, objExisting);
+function validateForm(objForm) {
+  var arClass = [];
+  var iErrors = 0;
+  var objField = objForm.getElementsByTagName('input');
+  var objLabel = objForm.getElementsByTagName('label');
+  var objList = document.createElement('ol');
+  var objError, objExisting, objNew, objTitle, objParagraph, objAnchor, objPosition;
+  var strLinkID, iFieldCounter, iClassCounter, iCounter;
+	
+  // Get the id or name of the form, to make a unique
+  // fragment identifier
+  if (objForm.id) {
+    strLinkID = objForm.id + 'ErrorID';
+  }
+  else {
+    strLinkID = objForm.name + 'ErrorID';
+  }
+	
+  // Iterate through input form controls, looking for validation classes
+  for (iFieldCounter=0; iFieldCounter&lt;objField.length; iFieldCounter++) {
+    
+  // Get the class for the field, and look for the appropriate class
+  arClass = objField[iFieldCounter].className.split(' ');
+  for (iClassCounter=0; iClassCounter&lt;arClass.length; iClassCounter++) {
+    switch (arClass[iClassCounter]) {
+      case 'string':
+        if (!isString(objField[iFieldCounter].value, arClass)) {
+          if (iErrors === 0) {
+            logError(objField[iFieldCounter], objLabel, objList, strLinkID);
+          }
+          else {
+            logError(objField[iFieldCounter], objLabel, objList, '');
+          }
+          iErrors++;
+        }
+      break;
+      case 'number':
+        if (!isNumber(objField[iFieldCounter].value, arClass)) {
+          if (iErrors === 0) {
+            logError(objField[iFieldCounter], objLabel, objList, strLinkID);
+          }
+          else {
+            logError(objField[iFieldCounter], objLabel, objList, '');
+          }
+          iErrors++;
+        }
+      break;
+      case 'email' :
+        if (!isEmail(objField[iFieldCounter].value, arClass)) {
+          if (iErrors === 0) {
+            logError(objField[iFieldCounter], objLabel, objList, strLinkID);
+          }
+          else {
+            logError(objField[iFieldCounter], objLabel, objList, '');
+          }
+          iErrors++;
+        }
+        break;
       }
-      else
-      {
-         objPosition = objForm.firstChild;
-         objForm.insertBefore(objNew, objPosition);
+    }
+  }
+	
+  if (iErrors &gt; 0) {
+
+    // If not valid, display error messages
+    objError = objForm.getElementsByTagName('div');
+				
+    // Look for existing errors
+    for (iCounter=0; iCounter&lt;objError.length; iCounter++) {
+      if (objError[iCounter].className == 'validationerrors') {
+        objExisting = objError[iCounter];
       }
-
-      // Allow for latency
-      setTimeout(function() { objAnchor.focus(); }, 50);
-      
-      // Don't submit the form
-      objForm.submitAllowed = false;
-      return false;
-   }
-
-   // Submit the form
-   return true;
-}
-
-// Function to add a link in a list item that points to problematic field control
-function addError(objList, strError, strID, strErrorID)
-{
-   var objListItem = document.createElement('li');
-   var objAnchor = document.createElement('a');
-   
-   // Fragment identifier to the form control
-   objAnchor.href='#' + strID;
-
-   // Make this the target for the error heading
-   if (strErrorID.length &gt; 0)
-   {
+    }
+	
+    objNew = document.createElement('div');
+    objTitle = document.createElement('h2');
+    objParagraph = document.createElement('p');
+    objAnchor = document.createElement('a');
+	
+    if (iErrors == 1) {
+      objAnchor.appendChild(document.createTextNode('1 Error in Submission'));
+    }
+    else {
+      objAnchor.appendChild(document.createTextNode(iErrors + ' Errors in Submission'));
+    }
+
+    objAnchor.href = '#' + strLinkID;
+    objAnchor.className = 'submissionerror';
+
+    objTitle.appendChild(objAnchor);
+    objParagraph.appendChild(document.createTextNode('Please review the following'));
+    objNew.className = 'validationerrors';
+
+    objNew.appendChild(objTitle);
+    objNew.appendChild(objParagraph);
+    objNew.appendChild(objList);
+				
+    // If there were existing error, replace them with the new lot,
+    // otherwise add the new errors to the start of the form
+    if (objExisting) {
+      objExisting.parentNode.replaceChild(objNew, objExisting);
+    }
+    else {
+      objPosition = objForm.firstChild;
+      objForm.insertBefore(objNew, objPosition);
+    }
+	
+    // Allow for latency
+    setTimeout(function() { objAnchor.focus(); }, 50);
+				
+    // Don't submit the form
+    objForm.submitAllowed = false;
+    return false;
+  }
+	
+  // Submit the form
+  return true;
+	}
+	
+  // Function to add a link in a list item that points to problematic field control
+  function addError(objList, strError, strID, strErrorID) {
+    
+		var objListItem = document.createElement('li');
+    var objAnchor = document.createElement('a');
+		 
+    // Fragment identifier to the form control
+    objAnchor.href='#' + strID;
+
+    // Make this the target for the error heading
+    if (strErrorID.length &gt; 0) {
       objAnchor.id = strErrorID;
-   }
-
-   // Use the label prompt for the error message
-   objAnchor.appendChild(document.createTextNode(strError));
-   // Add keyboard and mouse events to set focus to the form control
-   objAnchor.onclick = function(event){return focusFormField(this, event);};
-   objAnchor.onkeypress = function(event){return focusFormField(this, event);};
-   objListItem.appendChild(objAnchor);
-   objList.appendChild(objListItem);
-}
-
-function focusFormField(objAnchor, objEvent)
-{
-   var strFormField, objForm;
-
-   // Allow keyboard navigation over links
-   if (objEvent &amp;&amp; objEvent.type == 'keypress')
-   {
-      if (objEvent.keyCode != 13 &amp;&amp; objEvent.keyCode != 32)
-      {
-         return true;
+    }
+	
+    // Use the label prompt for the error message
+    objAnchor.appendChild(document.createTextNode(strError));
+
+    // Add keyboard and mouse events to set focus to the form control
+    objAnchor.onclick = function(event){return focusFormField(this, event);};
+    objAnchor.onkeypress = function(event){return focusFormField(this, event);};
+    objListItem.appendChild(objAnchor);
+    objList.appendChild(objListItem);
+  }
+
+  function focusFormField(objAnchor, objEvent) {
+    var strFormField, objForm;
+
+    // Allow keyboard navigation over links
+    if (objEvent &amp;&amp; objEvent.type == 'keypress') {
+      if (objEvent.keyCode != 13 &amp;&amp; objEvent.keyCode != 32) {
+        return true;
       }
-   }
-
-   // set focus to the form control
-   strFormField = objAnchor.href.match(/[^#]\w*$/);
-   objForm = getForm(strFormField);
-   objForm[strFormField].focus();
-   return false;
-}
-
-// Function to return the form element from a given form field name
-function getForm(strField)
-{
-   var objElement = document.getElementById(strField);
-
-   // Find the appropriate form
-   do
-   {
+    }
+	
+    // set focus to the form control
+    strFormField = objAnchor.href.match(/[^#]\w*$/);
+    objForm = getForm(strFormField);
+    objForm[strFormField].focus();
+    return false;
+  }
+
+    // Function to return the form element from a given form field name
+    function getForm(strField) {
+      var objElement = document.getElementById(strField);
+
+    // Find the appropriate form
+    do {
       objElement = objElement.parentNode;
-   } while (!objElement.tagName.match(/form/i) &amp;&amp; objElement.parentNode);
-
-   return objElement;
-}
-
-// Function to log the error in a list
-function logError(objField, objLabel, objList, strErrorID)
-{
-   var iCounter, strError;
-
-   // Search the label for the error prompt
-   for (iCounter=0; iCounter&lt;objLabel.length; iCounter++)
-   {
-      if (objLabel[iCounter].htmlFor == objField.id)
-      {
-         strError = objLabel[iCounter].firstChild.nodeValue;
+    } while (!objElement.tagName.match(/form/i) &amp;&amp; objElement.parentNode);
+
+    return objElement;
+  }
+	
+  // Function to log the error in a list
+  function logError(objField, objLabel, objList, strErrorID) {
+    var iCounter, strError;
+
+    // Search the label for the error prompt
+    for (iCounter=0; iCounter&lt;objLabel.length; iCounter++) {
+      if (objLabel[iCounter].htmlFor == objField.id) {
+        strError = objLabel[iCounter].firstChild.nodeValue;
       }
-   }
+    }
 
-   addError(objList, strError, objField.id, strErrorID);
-}
+    addError(objList, strError, objField.id, strErrorID);
+  }
+	
+  // Validation routines - add as required
 
-// Validation routines - add as required
+  function isString(strValue, arClass) {
+    var bValid = (typeof strValue == 'string' &amp;&amp; strValue.replace(/^\s*|\s*$/g, '') 
+    !== '' &amp;&amp; isNaN(strValue));
 
-function isString(strValue, arClass)
-{
-   var bValid = (typeof strValue == 'string' &amp;&amp; strValue.replace(/^\s*|\s*$/g, '') 
-     !== '' &amp;&amp; isNaN(strValue));
+    return checkOptional(bValid, strValue, arClass);
+  }
 
-   return checkOptional(bValid, strValue, arClass);
-}
+  function isEmail(strValue, arClass) {
+    var objRE = /^[\w-\.\']{1,}\@([\da-zA-Z\-]{1,}\.){1,}[\da-zA-Z\-]{2,}$/;
+    var bValid = objRE.test(strValue);
 
-function isEmail(strValue, arClass)
-{
-   var objRE = /^[\w-\.\']{1,}\@([\da-zA-Z\-]{1,}\.){1,}[\da-zA-Z\-]{2,}$/;
-   var bValid = objRE.test(strValue);
+    return checkOptional(bValid, strValue, arClass);
+  }
+	
+  function isNumber(strValue, arClass) {
+    var bValid = (!isNaN(strValue) &amp;&amp; strValue.replace(/^\s*|\s*$/g, '') !== '');
 
-   return checkOptional(bValid, strValue, arClass);
-}
+    return checkOptional(bValid, strValue, arClass);
+  }
 
-function isNumber(strValue, arClass)
-{
-   var bValid = (!isNaN(strValue) &amp;&amp; strValue.replace(/^\s*|\s*$/g, '') !== '');
+  function checkOptional(bValid, strValue, arClass) {
+    var bOptional = false;
+    var iCounter;
 
-   return checkOptional(bValid, strValue, arClass);
-}
-
-function checkOptional(bValid, strValue, arClass)
-{
-   var bOptional = false;
-   var iCounter;
-
-   // Check if optional
-   for (iCounter=0; iCounter&lt;arClass.length; iCounter++)
-   {
-      if (arClass[iCounter] == 'optional')
-      {
-         bOptional = true;
+    // Check if optional
+    for (iCounter=0; iCounter&lt;arClass.length; iCounter++) {
+      if (arClass[iCounter] == 'optional') {
+        bOptional = true;
       }
-   }
+    }
 
-   if (bOptional &amp;&amp; strValue.replace(/^\s*|\s*$/g, '') === '')
-   {
+    if (bOptional &amp;&amp; strValue.replace(/^\s*|\s*$/g, '') === '') {
       return true;
-   }
+    }
 
-   return bValid;
-   }
-   </pre>
-         
-            <p class="working-example">Working example of this technique implemented using PHP, Javascript, CSS and XHTML: <a href="../../working-examples/script-form-validation-2/index.php">Form Validation Example</a>.</p>
-         
+    return bValid;
+  }</code></pre>
+
+				<p class="working-example">Working example of this technique implemented using PHP, Javascript, CSS and HTML: <a href="../../working-examples/script-form-validation-2/index.php">Form Validation Example</a>.</p>
       </section>
+	</section>
    </section><section id="tests"><h2>Tests</h2>
       <section class="procedure"><h3>Procedure</h3>
          <p>Create error messages using anchor tags and appropriate scripting via the technique above. </p>
          <ol>
             <li>Load the page.</li>
-            <li>Enter a valid value in the field(s) associated with an error message and verify that no error messages are displayed. </li>
-            <li>Enter an invalid value in the field(s) associated with an error message and verify that the correct error message for the field is displayed. </li>
+            <li>Enter a valid value in the field(s) associated with an error message and verify that no error messages are displayed.</li>
+            <li>Enter an invalid value in the field(s) associated with an error message and verify that the correct error message for the field is displayed.</li>
             <li>Verify that the error messages receive focus.</li>
-            <li>Enter a valid value in the field(s) associated with the displayed error message and verify that the error message is removed. </li>
-            <li>Repeat for all fields with associated error messages created via anchor tags. </li>
+            <li>Enter a valid value in the field(s) associated with the displayed error message and verify that the error message is removed.</li>
+            <li>Repeat for all fields with associated error messages created via anchor tags.</li>
          </ol>
          <div class="note">
-            <p>It is recommended that you also run the above procedure using an assistive technology. </p>
+            <p>It is recommended that you also run the above procedure using an assistive technology.</p>
          </div>
       </section>
-      <section class="results"><h3>Expected Results</h3>
-         <ul>
-            <li>Checks #2, #3, #4, and #5 are all true.</li>
-         </ul>
+      <section class="results">
+				<h3>Expected Results</h3>
+        <ul>
+          <li>Checks #2, #3, #4, and #5 are all true.</li>
+        </ul>
       </section>
-   </section><section id="related"><h2>Related Techniques</h2><ul>
-      <li><a href="../general/G83">G83</a></li>
-      <li><a href="../general/G85">G85</a></li>
-      <li><a href="../client-side-script/SCR18">SCR18</a></li>
-   </ul></section></body></html>
+   	</section>
+	 	<section id="related">
+			<h2>Related Techniques</h2>
+			<ul>
+				<li><a href="../general/G83">G83</a></li>
+      	<li><a href="../general/G85">G85</a></li>
+      	<li><a href="../client-side-script/SCR18">SCR18</a></li>
+   		</ul>
+		</section>
+	</body>
+</html>
diff --git a/techniques/client-side-script/SCR33.html b/techniques/client-side-script/SCR33.html
index ff3a662615..477068eb3b 100644
--- a/techniques/client-side-script/SCR33.html
+++ b/techniques/client-side-script/SCR33.html
@@ -1,98 +1,123 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using script to scroll content, and providing a mechanism to pause it</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Using script to scroll content, and providing a mechanism to pause it</h1><section class="meta"><p class="id">ID: SCR33</p><p class="technology">Technology: client-side-script</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
-      <p>Technologies that support script-controlled scrolling of content. </p>
-   </section><section id="description"><h2>Description</h2>
-      <p>The objective of this technique is to provide a way for users to stop scrolling content when the scrolling is created by a script. Scrolling content can be difficult or impossible to read by users with low vision or with cognitive disabilities. The movement can also be distracting for some people making it difficult for them to concentrate on other parts of the Web page. </p>
-   </section><section id="examples"><h2>Examples</h2>
-      <section class="example">
-         
-            <p>In this example CSS and Javascript are used to visually present some text in a scrolling format. A link is included to pause the scrolling movement. </p>
-            <p>This implementation will display the full text and omit the link when Javascript or CSS are unsupported or inactive. </p>
-            <p>The following code is an amended version of webSemantic's Accessible Scroller (as at July 2008). </p>
-            <p>The XHTML component: </p>
-         
-         <pre xml:space="preserve">
-...
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>Using script to scroll content, and providing a mechanism to pause it</title>
+    <link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+  </head>
+  <body>
+    <h1>Using script to scroll content, and providing a mechanism to pause it</h1>
+    <section class="meta">
+      <p class="id">ID: SCR33</p>
+      <p class="technology">Technology: client-side-script</p>
+      <p class="type">Type: Technique</p>
+    </section>
+    <section id="applicability">
+      <h2>When to Use</h2>
+      <p>Technologies that support script-controlled scrolling of content.</p>
+    </section>
+    <section id="description">
+      <h2>Description</h2>
+      <p>The objective of this technique is to provide a way for users to stop scrolling content when the scrolling is created by a script. Scrolling content can be difficult or impossible to read by users with low vision or with cognitive disabilities. The movement can also be distracting for some people making it difficult for them to concentrate on other parts of the Web page.</p>
+    </section>
+    <section id="examples">
+      <h2>Examples</h2>
+      <section class="example">   
+            <p>In this example <abbr title="Cascading Style Sheets">CSS</abbr> and JavaScript are used to visually present some text in a scrolling format. A link is included to pause the scrolling movement.</p>
+            <p>This implementation will display the full text and omit the link when JavaScript or CSS are unsupported or inactive.</p>
+            <h3>The HTML component</h3>
+<pre xml:space="preserve"><code class="language-html">...
 &lt;div id="scroller"&gt;
-&lt;p id="tag"&gt;This text will scroll and a Pause/Scroll link will be present 
-when Javascript and CSS are supported and active.&lt;/p&gt;
+  &lt;p id="tag"&gt;This text will scroll and a Pause/Scroll link will be present 
+  when JavaScript and CSS are supported and active.&lt;/p&gt;
 &lt;/div&gt;
-...
-</pre>
-         
-            <p>The CSS component: </p>
+...</code></pre>
          
-         <pre xml:space="preserve">
-...
-body {font:1em verdana,sans-serif; color:#000; margin:0}
-
-/* position:relative and overflow:hidden are required */
-#scroller { position:relative; overflow:hidden; width:15em; border:1px solid #008080; }
+<h3>The CSS component</h3>
+<pre xml:space="preserve"><code class="language-css">...
+body {
+  font:1em verdana,sans-serif;
+  color:#000;
+  margin:0
+}
 
-/* add formatting for the scrolling text */
-#tag { margin:2px 0; }
+#scroller {
+  position:relative;
+  overflow:hidden;
+  width:15em;
+  border:1px solid #008080;
+}
+  
+#tag {
+  margin:2px 0;
+}
 
-/* #testP must also contain all text-sizing properties of #tag  */
-#testP { visibility:hidden; position:absolute; white-space:nowrap; } 
+#testP {
+  visibility:hidden;
+  position:absolute;
+  white-space:nowrap;
+} 
 
-/* used as a page top marker and to limit width */
-#top { width:350px; margin:auto; }
-...
-</pre>
+ #top {
+  width:350px;
+  margin:auto;
+}
+...</code></pre>
          
-            <p>The JavaScript component: </p>
+<h3>The JavaScript component</h3>
          
-         <pre xml:space="preserve">
-var speed=50        // speed of scroller
+<pre xml:space="preserve"><code class="language-javascript">var speed=50        // speed of scroller
 var step=3          // smoothness of movement
 var StartActionText= "Scroll"  // Text for start link
 var StopActionText = "Pause"   // Text for stop link
-
+ 
 var x, scroll, divW, sText=""
-
+ 
 function onclickIE(idAttr,handler,call){
   if ((document.all)&amp;&amp;(document.getElementById)){idAttr[handler]="Javascript:"+call}
 }
-
+ 
 function addLink(id,call,txt){
-  var e=document.createElement('a')
-  e.setAttribute('href',call)
-  var linktext=document.createTextNode(txt)
-  e.appendChild(linktext)
-  document.getElementById(id).appendChild(e)
+  var e=document.createElement('a');
+  e.setAttribute('href',call);
+  var linktext=document.createTextNode(txt);
+  e.appendChild(linktext);
+  document.getElementById(id).appendChild(e);
 }
-
+ 
 function getElementStyle() {
-    var elem = document.getElementById('scroller');
-    if (elem.currentStyle) {
-        return elem.currentStyle.overflow;
-    } else if (window.getComputedStyle) {
-        var compStyle = window.getComputedStyle(elem, '');
-        return compStyle.getPropertyValue("overflow");
-    }
-    return "";
+  var elem = document.getElementById('scroller');
+  if (elem.currentStyle) {
+    return elem.currentStyle.overflow;
+  }
+  else if (window.getComputedStyle) {
+    var compStyle = window.getComputedStyle(elem, '');
+    return compStyle.getPropertyValue("overflow");
+  }
+  return "";
 }
 
 function addControls(){
-// test for CSS support first 
-// test for the overlow property value set in style element or external file
-if (getElementStyle()=="hidden") {
-  var f=document.createElement('div');
-  f.setAttribute('id','controls');
-  document.getElementById('scroller').parentNode.appendChild(f);
-  addLink('controls','Javascript:clickAction(0)',StopActionText);
-  onclickIE(document.getElementById('controls').childNodes[0],"href",'clickAction(0)');
-  document.getElementById('controls').style.display='block';
+  
+  // test for CSS support first 
+  // test for the overlow property value set in style element or external file
+  if (getElementStyle()=="hidden") {
+    var f=document.createElement('div');
+    f.setAttribute('id','controls');
+    document.getElementById('scroller').parentNode.appendChild(f);
+    addLink('controls','Javascript:clickAction(0)',StopActionText);
+    onclickIE(document.getElementById('controls').childNodes[0],"href",'clickAction(0)');
+    document.getElementById('controls').style.display='block';
   }
 }
-
+ 
 function stopScroller(){clearTimeout(scroll)}
-
+  
 function setAction(callvalue,txt){
   var c=document.getElementById('controls')
   c.childNodes[0].setAttribute('href','Javascript:clickAction('+callvalue+')')
-  onclickIE(document.getElementById('controls').childNodes[0],"href",'clickAction
+    onclickIE(document.getElementById('controls').childNodes[0],"href",'clickAction
 
-('+callvalue+')')
+  ('+callvalue+')')
   c.childNodes[0].firstChild.nodeValue=txt
 }
 
@@ -116,16 +141,16 @@
   x-=step
   if (document.getElementById('tag').className) p.className=document.getElementById
 
-('tag').className
-  p.appendChild(document.createTextNode(sText))
-  document.body.appendChild(p)
-  pw=p.offsetWidth
-  document.body.removeChild(p)
-  if (x&lt;(pw*4)*-1){x=divW}
-  document.getElementById('tag').style.left=x+'px'
-  scroll=setTimeout('startScroller()',speed)
+  ('tag').className
+    p.appendChild(document.createTextNode(sText))
+    document.body.appendChild(p)
+    pw=p.offsetWidth
+    document.body.removeChild(p)
+    if (x&lt;(pw*4)*-1){x=divW}
+    document.getElementById('tag').style.left=x+'px'
+    scroll=setTimeout('startScroller()',speed)
 }
-
+  
 function initScroller(){
   if (document.getElementById &amp;&amp; document.createElement &amp;&amp; document.body.appendChild) {
     addControls();
@@ -138,7 +163,7 @@
     scroll=setTimeout('startScroller()',speed);
   }
 }
-
+  
 function addLoadEvent(func) {
   if (!document.getElementById | !document.getElementsByTagName) return
   var oldonload = window.onload
@@ -151,9 +176,8 @@
     }
   }
 }
-
-addLoadEvent(initScroller)
-</pre>
+  
+addLoadEvent(initScroller)</code></pre>
          
             <p class="working-example">A working example of this code, <a href="../../working-examples/script-scroll-pause/">Example of using script to scroll content and providing a mechanism to pause it</a>, is available.</p>
          
@@ -176,12 +200,8 @@
       </section>
    </section><section id="related"><h2>Related Techniques</h2><ul>
       <li><a href="../general/G4">G4</a></li>
-   </ul></section><section id="resources"><h2>Resources</h2>
-      
-         <ul>
-            <li>
-                  <a href="http://www.websemantics.co.uk/tutorials/accessible_scroller/">webSemantics Accessible Scroller</a>
-               </li>
-         </ul>
-      
-   </section></body></html>
\ No newline at end of file
+   </ul></section>
+   <!-- <section id="resources">
+    <h2>Resources</h2>
+  </section> -->
+</body></html>
\ No newline at end of file
diff --git a/techniques/client-side-script/SCR34.html b/techniques/client-side-script/SCR34.html
index 2588f89ee4..e7443246c9 100644
--- a/techniques/client-side-script/SCR34.html
+++ b/techniques/client-side-script/SCR34.html
@@ -1,83 +1,92 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Calculating size and position in a way that scales with text size</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Calculating size and position in a way that scales with text size</h1><section class="meta"><p class="id">ID: SCR34</p><p class="technology">Technology: client-side-script</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
-      <p>Client-side scripting.</p>
-   </section><section id="description"><h2>Description</h2>
-      <p>The objective of this technique is to calculate the size and position of elements in a way that will scale appropriately as the text size is scaled. </p>
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+   <head>
+      <title>Calculating size and position in a way that scales with text size</title>
+      <link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+   </head>
+   <body>
+      <h1>Calculating size and position in a way that scales with text size</h1>
+      <section class="meta">
+         <p class="id">ID: SCR34</p>
+         <p class="technology">Technology: client-side-script</p>
+         <p class="type">Type: Technique</p>
+      </section>
+      <section id="applicability">
+         <h2>When to Use</h2>
+         <p>Client-side scripting.</p>
+      </section>
+      <section id="description">
+         <h2>Description</h2>
+         <p>The objective of this technique is to calculate the size and position of elements in a way that will scale appropriately as the text size is scaled.</p>
       <p>There are four properties in JavaScript that help determine the size and position of elements: </p>
       <ul>
-         <li>
-               offsetHeight (the height of the element in pixels) </li>
-         <li>
-               offsetWidth (the width of the element in pixels) </li>
-         <li>
-               offsetLeft (the distance of the element from the left of its parent (offsetParent) in pixels) </li>
-         <li>
-               offsetTop (the distance of the element from the top of its parent (offsetParent) in pixels) </li>
+         <li><code class="language-javascript">offsetHeight</code> (the height of the element in pixels)</li>
+         <li><code class="language-javascript">offsetWidth</code> (the width of the element in pixels)</li>
+         <li><code class="language-javascript">offsetLeft</code> (the distance of the element from the left of its parent (<code class="language-javascript">offsetParent</code>) in pixels)</li>
+         <li><code class="language-javascript">offsetTop</code> (the distance of the element from the top of its parent (<code class="language-javascript">offsetParent</code>) in pixels)</li>
       </ul>
-      <p>Calculating the height and width using offsetHeight and offsetWidth is straightforward, but when calculating an object's left and top position as absolute values, we need to consider the parent element. The calculatePosition function below iterates through all of an element's parent nodes to give a final value. The function takes two parameters; objElement (the name of the element in question), and the offset property (offsetLeft or offsetTop): </p>
-   </section><section id="examples"><h2>Examples</h2>
+      <p>Calculating the height and width using <code class="language-javascript">offsetHeight</code> and <code class="language-javascript">offsetWidth</code> is straightforward, but when calculating an object's left and top position as absolute values, we need to consider the parent element. The <code class="language-javascript">calculatePosition</code> function below iterates through all of an element's parent nodes to give a final value. The function takes two parameters: <code class="language-javascript">objElement</code> (the name of the element in question), and the offset property (<code class="language-javascript">offsetLeft</code> or <code class="language-javascript">offsetTop</code>):</p>
+   </section>
+   <section id="examples">
+      <h2>Examples</h2>
       <section class="example">
-         
-            <p>The Javascript function:</p>
-         
-         <pre xml:space="preserve">
-function calculatePosition(objElement, strOffset)
-{
-    var iOffset = 0;
-
-    if (objElement.offsetParent)
-    {
-        do 
-        {
-            iOffset += objElement[strOffset];
-            objElement = objElement.offsetParent;
-        } while (objElement);
-    }
-
-    return iOffset;
-}
-
-</pre>
+				<h3>Calculating the size and position of elements in a way that will scale appropriately as the text size is scaled</h3>
+  
+<pre xml:space="preserve"><code class="language-javascript">function calculatePosition(objElement, strOffset {
+  var iOffset = 0;
+	if (objElement.offsetParent) {
+    do {
+      iOffset += objElement[strOffset];
+      objElement = objElement.offsetParent;
+    } while (objElement);
+  }
+  return iOffset;
+}</code></pre>
          
             <p>The following example illustrates using the function above by aligning an object beneath a reference object, the same distance from the left: </p>
          
-         <pre xml:space="preserve">
-// Get a reference object
+<pre xml:space="preserve"><code class="language-javascript">// Get a reference object
 var objReference = document.getElementById('refobject');
 // Get the object to be aligned
 var objAlign = document.getElementById('lineup');
 
 objAlign.style.position = 'absolute';
 objAlign.style.left = calculatePosition(objReference, 'offsetLeft') + 'px';
-objAlign.style.top = calculatePosition(objReference, 'offsetTop') + objReference.offsetHeight + 'px'; 
-</pre>
-      </section>
-   </section><section id="tests"><h2>Tests</h2>
-      <section class="procedure"><h3>Procedure</h3>
-         <ol>
-            <li>Open a page that is designed to adjust container sizes as text size changes. </li>
-            <li>Increase the text size up to 200% using the browser's text size adjustment (not the zoom feature). </li>
-            <li>Examine the text to ensure the text container size is adjusted to accommodate the size of the text. </li>
-            <li>Ensure that no text is "clipped" or has disappeared as a result of the increase in text size. </li>
-         </ol>
+objAlign.style.top = calculatePosition(objReference, 'offsetTop')
+ + objReference.offsetHeight + 'px'; </code></pre>
       </section>
-      <section class="results"><h3>Expected Results</h3>
+		</section>
+		<section id="tests">
+			<h2>Tests</h2>
+			<section class="procedure">
+				<h3>Procedure</h3>
+				<ol>
+					<li>Open a page that is designed to adjust container sizes as text size changes. </li>
+					<li>Increase the text size up to 200% using the browser's text size adjustment (not the zoom feature). </li>
+					<li>Examine the text to ensure the text container size is adjusted to accommodate the size of the text. </li>
+					<li>Ensure that no text is "clipped" or has disappeared as a result of the increase in text size. </li>
+        </ol>
+			</section>
+      <section class="results">
+				<h3>Expected Results</h3>
          <ul>
             <li>Checks #3 and #4 are true.</li>
          </ul>
       </section>
-   </section><section id="related"><h2>Related Techniques</h2><ul>
+		</section>
+		<section id="related">
+			<h2>Related Techniques</h2>
+			<ul>
       <li><a href="../css/C12">C12</a></li>
       <li><a href="../css/C14">C14</a></li>
       <li><a href="../css/C17">C17</a></li>
       <li><a href="../css/C20">C20</a></li>
       <li><a href="../css/C24">C24</a></li>
       <li><a href="../general/G206">G206</a></li>
-   </ul></section><section id="resources"><h2>Resources</h2>
-      
-         <ul>
-            <li>
-                  <a href="https://msdn.microsoft.com/en-us/library/bb250395(VS.85).aspx#cssenhancements_topic3">MSDN: Fix the Box Instead of Thinking Outside It</a>
-               </li>
-         </ul>
-      
-   </section></body></html>
\ No newline at end of file
+		</ul>
+	</section>
+	<!-- <section id="resources">
+		<h2>Resources</h2>
+   </section> -->
+	</body>
+</html>
\ No newline at end of file
diff --git a/techniques/client-side-script/SCR35.html b/techniques/client-side-script/SCR35.html
index 1c3c05ee90..8448d01323 100644
--- a/techniques/client-side-script/SCR35.html
+++ b/techniques/client-side-script/SCR35.html
@@ -1,121 +1,122 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Making actions keyboard accessible by using the onclick event of anchors and buttons</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Making actions keyboard accessible by using the onclick event of anchors and buttons</h1><section class="meta"><p class="id">ID: SCR35</p><p class="technology">Technology: client-side-script</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
-      <p>Script used with HTML or XHTML.</p>
-   </section><section id="description"><h2>Description</h2>
-      <p>The objective of this technique is to demonstrate how to invoke a scripting function in a way that is keyboard accessible by attaching it to a keyboard-accessible control. In order to ensure that scripted actions can be invoked from the keyboard, they are associated with "natively actionable" HTML elements (links and buttons). The onclick event of these elements is device independent. While "onclick" sounds like it is tied to the mouse, the onclick event is actually mapped to the default action of a link or button. The default action occurs when the user clicks the element with a mouse, but it also occurs when the user focuses the element and hits enter or space, and when the element is triggered via the accessibility API.</p>
-      <p>This technique relies on client-side scripting. However, it is beneficial to provide a backup implementation or explanation for environments in which scripting is not available.  When using anchor elements to invoke a JavaScript action, a backup implementation or explanation is provided via the <code class="att">href</code> attribute. When using buttons, it is provided via a form post. </p>
-   </section><section id="examples"><h2>Examples</h2>
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>Making actions keyboard accessible by using the onclick event of anchors and buttons</title>
+		<link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+	</head>
+	<body>
+		<h1>Making actions keyboard accessible by using the <code class="language-javascript">onclick</code> event of anchors and buttons</h1>
+		<section class="meta">
+			<p class="id">ID: SCR35</p>
+			<p class="technology">Technology: client-side-script</p>
+			<p class="type">Type: Technique</p>
+		</section>
+		<section id="applicability">
+			<h2>When to Use</h2>
+      <p>Script used with <abbr title="HyperText Markup Language">HTML</abbr>.</p>
+		</section>
+		<section id="description">
+			<h2>Description</h2>
+      <p>The objective of this technique is to demonstrate how to invoke a scripting function in a way that is keyboard accessible by attaching it to a keyboard-accessible control. In order to ensure that scripted actions can be invoked from the keyboard, they are associated with "natively actionable" HTML elements (links and buttons). The onclick event of these elements is device independent. While "<code class="language-javascript">onclick</code>" sounds like it is tied to the mouse, the <code class="language-javascript">onclick</code> event is actually mapped to the default action of a link or button. The default action occurs when the user clicks the element with a mouse, but it also occurs when the user focuses the element and hits enter or space, and when the element is triggered via the accessibility <abbr title="Application Programming Interface">API</abbr>.</p>
+      <p>This technique relies on client-side scripting. However, it is beneficial to provide a backup implementation or explanation for environments in which scripting is not available. When using anchor elements to invoke a JavaScript action, a backup implementation or explanation is provided via the <code class="language-html">href</code> attribute. When using buttons, it is provided via a form post. </p>
+   </section>
+	 <section id="examples">
+		<h2>Examples</h2>
       <section class="example">
-         
-            <p>Link that runs a script and has no fallback for non-scripted browsers. This approach should only be used when script is relied upon as an Accessibility Supported Technology.</p>
-            <p>Even though we do not want to navigate from this link, we must use the href attribute on the <code class="el">a</code> element in order to make this a true link and get the proper eventing. In this case, we're using "#" as the link target, but you could use anything. This link will never be navigated.</p>
-            <p>The "return false;" at the end of the doStuff() event handling function tells the browser not to navigate to the URI. Without it, the page would refresh after the script ran. </p>
-         
-         <pre xml:space="preserve">
-&lt;script&gt; 
-function doStuff()
- {
-  //do stuff
+				<h3>Link that runs a script and has no fallback for non-scripted browsers</h3>
+				<p>This approach should only be used when script is relied upon as an Accessibility Supported Technology.</p>
+				<p>Even though we do not want to navigate from this link, we must use the href attribute on the <code class="language-html">a</code> element in order to make this a true link and get the proper eventing. In this case, we're using <code class="language-html">"#"</code> as the link target, but you could use anything. This link will never be navigated.</p>
+				<p>The "<code class="language-javascript">return false;</code>" at the end of the <code class="language-javascript">doStuff()</code> event handling function tells the browser not to navigate to the <abbr title="Uniform Resource Identifier">URI</abbr>. Without it, the page would refresh after the script ran.</p>
+         
+<pre xml:space="preserve"><code class="language-html">&lt;script&gt; 
+  function doStuff() {
+    //do stuff
     return false;
   }
 &lt;/script&gt;
-&lt;a href="#" onclick="return doStuff();"&gt;do stuff&lt;/a&gt;
-</pre>
+&lt;a href="#" onclick="return doStuff();"&gt;do stuff&lt;/a&gt;</code></pre>
       </section>
       <section class="example">
+				<h3>Link that runs script, but navigates to another page when script is not available</h3>
+				<p>This approach can be used to create sites that don't rely on script, if and only if the navigation target provides the same functionality as the script. This example is identical to the example 1, except that its <code class="language-html">href</code> is now set to a real page, dostuff.html. The dostuff.html page must provide the same functionality as the script. The "<code class="language-javascript">return false;</code>" at the end of the <code class="language-javascript">doStuff()</code> event handling function tells the browser not to navigate to the URI. Without it, the browser would navigate to dostuff.html after the script ran.</p>
          
-            <p>Link that runs script, but navigates to another page when script is not available. This approach can be used to create sites that don't rely on script, if and only if the navigation target provides the same functionality as the script. This example is identical to the example 1, except that its href is now set to a real page, dostuff.htm. Dostuff.htm must provide the same functionality as the script.The "return false;" at the end of the doStuff() event handling function tells the browser not to navigate to the URI. Without it, the browser would navigate to dostuff.htm after the script ran.</p>
-         
-         <pre xml:space="preserve">
-&lt;script&gt; 
-function doStuff() 
- {  
-  //do stuff  
-  return false; 
- }
+<pre xml:space="preserve"><code class="language-html">&lt;script&gt; 
+  function doStuff() {  
+  //do stuff
+  return false;
+}
 &lt;/script&gt;
-&lt;a href="dostuff.htm" onclick="return doStuff();"&gt;do stuff&lt;/a&gt;
-</pre>
+&lt;a href="dostuff.html" onclick="return doStuff();"&gt;do stuff&lt;/a&gt;</code></pre>
          
             <p class="working-example">A working example of this code is available. Refer to <a href="../../working-examples/script-action-links/">Creating Action Links using JavaScript</a>.</p>
          
       </section>
       <section class="example">
+				<h3>Button that runs a script and falls back to a form post for users without script</h3>
+         <p>This approach can be used by sites that do not rely on script, if and only if the form post provides the same functionality as the script. The onsubmit="return false;" prevents the form from submitting. </p>
          
-            <p>Button that runs a script and falls back to a form post for users without script. This approach can be used by sites that do not rely on script, if and only if the form post provides the same functionality as the script. The onsubmit="return false;" prevents the form from submitting. </p>
-         
-         <pre xml:space="preserve">
-&lt;script&gt;
-  function doStuff()
- {
-     //do stuff
- }
+<pre xml:space="preserve"><code class="language-html">&lt;script&gt;
+function doStuff() {
+  //do stuff
+}
 &lt;/script&gt;
 &lt;form action="doStuff.aspx" onsubmit="return false;"&gt;
- &lt;input type="submit" value="Do Stuff" onclick="doStuff();" /&gt;
-&lt;/form&gt;
-</pre>
-         
-            <p class="working-example">A working example of this code is available. Refer to <a href="../../working-examples/script-action-buttons/">Creating Action Buttons using JavaScript</a>.</p>
-         
-      </section>
-      <section class="example">
-         
-            <p>Button that runs a script, implemented with input type="image". Note that an alt attribute must be added to the <code class="el">input</code> to provide a text equivalent for the image. This approach should only be used when script is relied upon. </p>
-         
-         <pre xml:space="preserve">
-&lt;script&gt;
-  function doStuff()
-  {
-     //do stuff
-   return false;
-  }
+  &lt;input type="submit" value="Do Stuff" onclick="doStuff();"&gt;
+&lt;/form&gt;</code></pre>
+
+			<p class="working-example">A working example of this code is available. Refer to <a href="../../working-examples/script-action-buttons/">Creating Action Buttons using JavaScript</a>.</p>
+		</section>
+		<section class="example">
+			<h3>Button that runs a script, implemented with <code class="language-html">input type="image"</code></h3>
+			<p>Note that an <code class="language-html">alt</code> attribute must be added to the <code class="language-html">input</code> to provide a text equivalent for the image. This approach should only be used when script is relied upon.</p>
+         
+<pre xml:space="preserve"><code class="language-html">&lt;script&gt;
+function doStuff() {
+  //do stuff
+  return false;
+}
 &lt;/script&gt;
-&lt;input  type="image"  src="stuff.gif"  alt="Do stuff"  onclick="return doStuff();" /&gt;
-</pre>
+&lt;input type="image" src="stuff.gif" alt="Do stuff" onclick="return doStuff();"&gt;</code></pre>
       </section>
       <section class="example">
+				<h3>Button that runs a script, implemented with <code class="language-html">input type="submit"</code>, <code class="language-html">input type="reset"</code> or <code class="language-html">input type="button"</code></h3>
+				<p>This approach should only be used when script is relied upon.</p>
          
-            <p>Button that runs a script, implemented with input type="submit", input type="reset" or input type="button". This approach should only be used when script is relied upon.  </p>
-         
-         <pre xml:space="preserve">
-&lt;input type="submit" onclick="return doStuff();" value=”Do Stuff” /&gt;
-</pre>
+<pre xml:space="preserve"><code class="language-html">&lt;input type="submit" onclick="return doStuff();" value="Do Stuff"&gt;</code></pre>
       </section>
       <section class="example">
+				<h3>Button that runs a script, implemented with <code class="language-html">button</code></h3>
+        <p>This is valuable when you want more control over the look of your button. In this particular example, the button contains both an icon and some text. This approach should only be used when script is relied upon. </p>
          
-            <p>Button that runs a script, implemented with <code class="el">button</code>…<code class="el">/button</code>. This is valuable when you want more control over the look of your button. In this particular example, the button contains both an icon and some text. This approach should only be used when script is relied upon. </p>
-         
-         <pre xml:space="preserve">
-&lt;button onclick="return doStuff();"&gt;
- &lt;img src="stuff.gif" alt="stuff icon"&gt;
- Do Stuff
-&lt;/button&gt;
-</pre>
+<pre xml:space="preserve"><code class="language-html">&lt;button onclick="return doStuff();"&gt;
+  &lt;img src="stuff.gif" alt="stuff icon"&gt;
+  Do Stuff
+&lt;/button&gt;</code></pre>
       </section>
    </section><section id="tests"><h2>Tests</h2>
       <section class="procedure"><h3>Procedure</h3>
-         <p>For all script actions associated with <code class="el">a</code>, <code class="el">button</code>, or <code class="el">input</code> elements: </p>
+         <p>For all script actions associated with <code class="language-html">a</code>, <code class="language-html">button</code>, or <code class="language-html">input</code> elements: </p>
          <ol>
             <li>
-               <p>In a user agent that supports Scripting </p>
+               <p>In a user agent that supports Scripting</p>
                <ul>
-                  <li>Click on the control with the mouse. </li>
-                  <li>Check that the scripting action executes properly. </li>
-                  <li>If the control is an anchor element, check that the URI in the <code class="att">href</code> attribute of the anchor element is not invoked. </li>
+                  <li>Click on the control with the mouse.</li>
+                  <li>Check that the scripting action executes properly.</li>
+                  <li>If the control is an anchor element, check that the URI in the <code class="language-html">href</code> attribute of the anchor element is not invoked.</li>
                   <li>Check that it is possible to navigate to and give focus to the control via the keyboard.</li>
                   <li>Set keyboard focus to the control.</li>
-                  <li>Check that pressing ENTER invokes the scripting action. </li>
-                  <li>If the control is an anchor element, check that the URI in the <code class="att">href</code> attribute of the anchor element is not invoked. </li>
+                  <li>Check that pressing <kbd>ENTER</kbd> invokes the scripting action. </li>
+                  <li>If the control is an anchor element, check that the URI in the <code class="language-html">href</code> attribute of the anchor element is not invoked.</li>
                </ul>
             </li>
             <li>
-               <p>In a user agent that does not support Scripting </p>
+               <p>In a user agent that does not support Scripting</p>
                <ul>
                   <li>Click on the control with the mouse.</li>
-                  <li>If the control is an anchor element, check that the URI in the <code class="att">href</code> attribute of the anchor element is invoked. </li>
+                  <li>If the control is an anchor element, check that the URI in the <code class="language-html">href</code> attribute of the anchor element is invoked. </li>
                   <li>Check that it is possible to navigate to and give focus to the control via the keyboard.</li>
                   <li>Set keyboard focus to the control.</li>
-                  <li>If the control is an anchor element, check that pressing ENTER invokes the URI of the anchor element's <code class="att">href</code> attribute.</li>
+                  <li>If the control is an anchor element, check that pressing <kbd>ENTER</kbd> invokes the URI of the anchor element's <code class="language-html">href</code> attribute.</li>
                </ul>
             </li>
          </ol>
@@ -125,7 +126,10 @@
             <li>All of the above checks are true. </li>
          </ul>
       </section>
-   </section><section id="related"><h2>Related Techniques</h2><ul>
+   </section>
+	 <section id="related">
+		<h2>Related Techniques</h2>
+		<ul>
       <li><a href="../general/G90">G90</a></li>
       <li><a href="../general/G108">G108</a></li>
       <li><a href="../html/H91">H91</a></li>
@@ -133,21 +137,21 @@
       <li><a href="../client-side-script/SCR24">SCR24</a></li>
       <li><a href="../failures/F42">F42</a></li>
       <li><a href="../failures/F59">F59</a></li>
-   </ul></section><section id="resources"><h2>Resources</h2>
-      
-         <ul>
-            <li>
-                  <a href="https://www.w3.org/TR/REC-html40/interact/scripts.html">HTML 4.01 Scripts</a>
-               </li>
-            <li>
-                  <a href="https://www.w3.org/TR/REC-html40/interact/forms.html">HTML 4.01 Forms</a>
-               </li>
-            <li>
-                  <a href="https://www.w3.org/TR/REC-html40/struct/links.html">HTML 4.01 Links</a>
-               </li>
-            <li>
-                  <a href="https://www.w3.org/DOM/DOMTR">Document Object Model (DOM) Technical Reports</a>
-               </li>
-         </ul>
-      
-   </section></body></html>
\ No newline at end of file
+   </ul>
+	</section>
+	<section id="resources">
+		<h2>Resources</h2>
+		<ul>
+			<li>
+				<a href="https://html.spec.whatwg.org/multipage/scripting.html#the-script-element">HTML - the <code class="language-html">script</code> element</a>
+			</li>
+			<li>
+				<a href="https://html.spec.whatwg.org/multipage/forms.html#forms">HTML - Forms</a>
+			</li>
+			<li>
+				<a href="https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-a-element">HTML - the <code class="language-html">a</code> element</a>
+			</li>
+		</ul>
+	</section>
+</body>
+</html>
\ No newline at end of file
diff --git a/techniques/client-side-script/SCR36.html b/techniques/client-side-script/SCR36.html
index 881b1e9672..30202cc195 100644
--- a/techniques/client-side-script/SCR36.html
+++ b/techniques/client-side-script/SCR36.html
@@ -1,94 +1,129 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing a mechanism to allow users to display moving, scrolling, or auto-updating text in a static window or area</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Providing a mechanism to allow users to display moving, scrolling, or auto-updating text in a static window or area</h1><section class="meta"><p class="id">ID: SCR36</p><p class="technology">Technology: client-side-script</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
-      <p>Any technology that moves, blinks, or updates text and can create a static block of text. </p>
-   </section><section id="description"><h2>Description</h2>
-      <p>Some Web pages display scrolling text because there is limited space available. Scrolling the text in a small text window makes the content available for users who can read quickly enough, but causes problems for users who read more slowly or use assistive technology. This technique provides a mechanism to stop the movement and make the entire block of text available statically. The text may be made available in a separate window or in a (larger) section of the page. Users can then read the text at their own speed. </p>
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>Providing a mechanism to allow users to display moving, scrolling, or auto-updating text in a static window or area</title>
+		<link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+	</head>
+	<body>
+		<h1>Providing a mechanism to allow users to display moving, scrolling, or auto-updating text in a static window or area</h1>
+		<section class="meta">
+			<p class="id">ID: SCR36</p>
+			<p class="technology">Technology: client-side-script</p>
+			<p class="type">Type: Technique</p>
+		</section>
+		<section id="applicability">
+			<h2>When to Use</h2>
+      <p>Any technology that moves, blinks, or updates text and can create a static block of text.</p>
+		</section>
+		<section id="description">
+			<h2>Description</h2>
+      <p>Some Web pages display scrolling text because there is limited space available. Scrolling the text in a small text window makes the content available for users who can read quickly enough, but causes problems for users who read more slowly or use assistive technology. This technique provides a mechanism to stop the movement and make the entire block of text available statically. The text may be made available in a separate window or in a (larger) section of the page. Users can then read the text at their own speed.</p>
       <p>This technique does not apply when the text that is moving can not be displayed all at once on the screen (e.g., a long chat conversation).</p>
       <div class="note">
-         <p>This technique can be used in combination with a style switching technique to present a page that is a <a>conforming alternate version</a> for non-conforming content. Refer to <a href="https://www.w3.org/WAI/WCAG21/Techniques/css/C29">C29: Using a style switcher to provide a conforming alternate version</a> and <a href="https://www.w3.org/WAI/WCAG21/Understanding/conformance#conforming-alt-versions">Understanding Conforming Alternate Versions</a> for more information. </p>
+         <p>This technique can be used in combination with a style switching technique to present a page that is a <a>conforming alternate version</a> for non-conforming content. Refer to <a href="../css/C29">C29: Using a style switcher to provide a conforming alternate version</a> and <a href="../../Understanding/conformance#conforming-alt-versions">Understanding Conforming Alternate Versions</a> for more information. </p>
       </div>
-   </section><section id="examples"><h2>Examples</h2>
+   </section>
+	 <section id="examples">
+		<h2>Examples</h2>
       <section class="example">
-         <h3>Expanding Scrolling Text in Place </h3>
+         <h3>Expanding Scrolling Text in Place</h3>
          
             <p>A large block of text is scrolled through a small marquee area of the page. A button lets the user stop the scrolling and display the entire block of text. </p>
             <div class="note">
                <p>This code example requires that both CSS and JavaScript be turned on and available. </p>
             </div>
-            <p>The CSS component:</p>
+            <section id="css-component">
+            <h4>The CSS component</h4>
          
-         <pre xml:space="preserve">#scrollContainer {
-        visibility: visible;
-        overflow: hidden;
-        top: 50px; left: 10px;
-        background-color: darkblue;
-      }
-      .scrolling {
-        position: absolute;
-        width: 200px;
-        height: 50px;
-      }
-      .notscrolling {
-        width: 500px;
-        margin:10px;
-      }
-      #scrollingText {
-        top: 0px;
-        color: white;
-      }
-      .scrolling #scrollingText {
-        position: absolute;
-      }
-      &lt;/a&gt;    </pre>
-         
-            <p>The script and HTML content:</p>
+<pre xml:space="preserve"><code class="language-css">#scrollContainer {
+  background-color: darkblue;
+  left: 10px;
+  overflow: hidden;
+  top: 50px;
+  visibility: visible;
+}
+
+.scrolling {
+  height: 50px;
+  position: absolute;
+  width: 200px;
+}
+
+.notscrolling {
+  margin:10px;
+  width: 500px;
+}
+
+#scrollingText {
+  color: white;
+  top: 0px;
+}
+
+.scrolling #scrollingText {
+  position: absolute;
+}</code></pre>
          
-         <pre xml:space="preserve">&lt;script type="text/javascript"&gt;
+<h4>The script and HTML content:</h4>
+<pre xml:space="preserve"><code class="language-html">&lt;script&gt;
+var tid;
+function init() {
+  var st = document.getElementById('scrollingText');
+  st.style.top = '0px';
+  initScrolling();
+}
 
-      var tid;
-      function init() {
-        var st = document.getElementById('scrollingText');
-        st.style.top = '0px';
-        initScrolling();
-      }
-      function initScrolling () {
-        tid = setInterval('scrollText()', 300);
-      }
-      function scrollText () {
-        var st = document.getElementById('scrollingText');
-        if (parseInt(st.style.top) &gt; (st.offsetHeight*(-1) + 8)) {
-          st.style.top = (parseInt(st.style.top) - 5) + 'px';
-        } else {
-          var sc = document.getElementById('scrollContainer');
-          st.style.top = parseInt(sc.offsetHeight) + 8 + 'px';
-        }
-      }
-      function toggle() {
-        var scr = document.getElementById('scrollContainer');
-        if (scr.className == 'scrolling') {
-          scr.className = 'notscrolling';
-          clearInterval(tid);
-           document.getElementById('scrollButton').value="Shrink";
-        } else {
-          scr.className = 'scrolling';
-          initScrolling();
-          document.getElementById('scrollButton').value="Expand";
-        }
-      }
-  &lt;input type="button" id="scrollButton" value="Expand" onclick="toggle()" /&gt;
-  &lt;div id="scrollContainer" class="scrolling"&gt;
-    &lt;div id="scrollingText" class="on"&gt;
-    .... Text to be scrolled ...
-    &lt;/div&gt;
+function initScrolling () {
+  tid = setInterval('scrollText()', 300);
+}
+	
+function scrollText () {
+  var st = document.getElementById('scrollingText');
+  if (parseInt(st.style.top) &gt; (st.offsetHeight*(-1) + 8)) {
+    st.style.top = (parseInt(st.style.top) - 5) + 'px';
+  }
+  else {
+    var sc = document.getElementById('scrollContainer');
+    st.style.top = parseInt(sc.offsetHeight) + 8 + 'px';
+  }
+}
+
+function toggle() {
+  var scr = document.getElementById('scrollContainer');
+  if (scr.className == 'scrolling') {
+    scr.className = 'notscrolling';
+    clearInterval(tid);
+    document.getElementById('scrollButton').value="Shrink";
+  }
+  else {
+    scr.className = 'scrolling';
+    initScrolling();
+    document.getElementById('scrollButton').value="Expand";
+  }
+}
+
+&lt;input type="button" id="scrollButton" value="Expand" onclick="toggle()"&gt;
+&lt;div id="scrollContainer" class="scrolling"&gt;
+  &lt;div id="scrollingText" class="on"&gt;
+    ... Text to be scrolled ...
   &lt;/div&gt;
-...
+&lt;/div&gt;
+...</code>
 </pre>
-         
-            <p class="working-example">Working example of this code: <a href="../../working-examples/script-scroll-text-expand/">Expanding Scrolling Text in Place</a>.</p>
-         
+        </section>
+         <p class="working-example">Working example of this code: <a href="../../working-examples/script-scroll-text-expand/">Expanding Scrolling Text in Place</a>.</p>
+
       </section>
-   </section><section id="tests"><h2>Tests</h2></section><section id="related"><h2>Related Techniques</h2><ul>
+   </section>
+	 <section id="tests">
+		<h2>Tests</h2>
+	</section>
+	<section id="related">
+		<h2>Related Techniques</h2>
+		<ul>
       <li><a href="../general/G4">G4</a></li>
-      <li><a href="../general/G187">G187</a></li>
       <li><a href="../client-side-script/SCR33">SCR33</a></li>
       <li><a href="../client-side-script/SCR22">SCR22</a></li>
-   </ul></section></body></html>
\ No newline at end of file
+   </ul>
+	</section>
+</body>
+</html>
\ No newline at end of file
diff --git a/techniques/client-side-script/SCR37.html b/techniques/client-side-script/SCR37.html
index f5246fce4f..e99c08cc66 100644
--- a/techniques/client-side-script/SCR37.html
+++ b/techniques/client-side-script/SCR37.html
@@ -1,3 +1,8 @@
+---
+obsoleteMessage: |
+  See <a href="../html/H102">H102: Creating modal dialogs with the HTML dialog element</a> for a standards-based approach instead.
+obsoleteSince: 20
+---
 <!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Creating Custom Dialogs in a Device Independent Way</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Creating Custom Dialogs in a Device Independent Way</h1><section class="meta"><p class="id">ID: SCR37</p><p class="technology">Technology: client-side-script</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
       <p>HTML and XHTML used with script.</p>
    </section><section id="description"><h2>Description</h2>
@@ -19,7 +24,7 @@ <h3>An options button that opens a dialog</h3>
          
          <pre xml:space="preserve">...
 &lt;button onclick="TogglePopup(event,true)"
-	name="pop0001"&gt;Options&lt;/button&gt;
+  name="pop0001"&gt;Options&lt;/button&gt;
 
 &lt;div class="popover" id="pop0001"&gt;
   &lt;h3&gt;Edit Sort Information&lt;/h3&gt;
@@ -59,58 +64,46 @@ <h3>An options button that opens a dialog</h3>
             <p>The script toggles the display of the popup <code class="el">div</code>, showing it and hiding it. </p>
          
          <pre xml:space="preserve">...
-function TogglePopup(evt,show)
-{
-	HarmonizeEvent(evt);
-	var src = evt.target;
-	if ("click" == evt.type)
-	{
-		evt.returnValue = false;
-	}
-	var popID = src.getAttribute("name");
-	if (popID)
-	{
-		var popup = document.getElementById(popID);
-		if (popup)
-		{
-			if (true == show)
-			{
-				popup.style.display = "block";
-			}
-			else if (false == show)
-			{
-				popup.style.display = "none";
-			}
-			else
-			{
-				popup.style.display = "block" == popup.style.display ? "none" : "block";
-			}
-			if ("block" == popup.style.display)
-			{
-				//window.alert(document.documentElement.scrollHeight);
-				popup.style.top = ((document.documentElement.offsetHeight - popup.offsetHeight) / 2 ) + 'px';
-				popup.style.left = ((document.documentElement.offsetWidth - popup.offsetWidth) / 2) + 'px';
-			}
-		}
-	}
+function TogglePopup(evt,show) {
+  HarmonizeEvent(evt);
+  var src = evt.target;
+  if ("click" == evt.type) {
+    evt.returnValue = false;
+  }
+  var popID = src.getAttribute("name");
+  if (popID) {
+    var popup = document.getElementById(popID);
+    if (popup) {
+      if (true == show) {
+        popup.style.display = "block";
+      }
+      else if (false == show) {
+        popup.style.display = "none";
+      }
+      else {
+        popup.style.display = "block" == popup.style.display ? "none" : "block";
+      }
+      if ("block" == popup.style.display) {
+        //window.alert(document.documentElement.scrollHeight);
+        popup.style.top = ((document.documentElement.offsetHeight - popup.offsetHeight) / 2 ) + 'px';
+        popup.style.left = ((document.documentElement.offsetWidth - popup.offsetWidth) / 2) + 'px';
+      }
+    }
+  }
 }
 
-function SubmitForm(elem)
-{ 
-	elem.parentNode.style.display='none'; 
-	return false;
+function SubmitForm(elem) {
+  elem.parentNode.style.display='none'; 
+  return false;
 }
 
-function ResetForm(elem)
-{ 
-	elem.parentNode.style.display='none'; 
-	return false;
+function ResetForm(elem) {
+  elem.parentNode.style.display='none'; 
+  return false;
 }
 ...
 </pre>
          
-            <p class="working-example">A working example, <a href="../../working-examples/script-options-button-dialog/">an options button that opens a dialog</a>, is available. </p>
-         
       </section>
    </section><section id="tests"><h2>Tests</h2>
       <section class="procedure"><h3>Procedure</h3>
@@ -134,19 +127,8 @@ <h3>An options button that opens a dialog</h3>
    </ul></section><section id="resources"><h2>Resources</h2>
       
          <ul>
-            <li>Microsoft Developer Network Whitepaper:<a href="http://download.microsoft.com/download/0/f/5/0f5e941c-c495-401a-9031-eab8315da35e/writing_accessible_web_applications.doc"> Writing Accessible Web Applications</a> by Cynthia C. Shelly and George Young. (Microsoft Word Format)</li>
-            <li>
-                  <a href="https://msdn.microsoft.com/en-us/library/ms695716.aspx">Microsoft Active Accessibility 2.0 SDK</a>. Includes Inspect32.exe and other MSAA tools.</li>
-            <li>
-                  <a href="https://msdn.microsoft.com/en-us/library/windows/desktop/dd318521(v=vs.85).aspx">Instructions for the Inspect tool</a>
-               </li>
-            <li>
-                  <a href="http://www.eramp.com/david/name-role-value-using-inspect.htm">Using the Inspect tool to find name Name, Role and Value for Javascript</a>
-               </li>
-            <li>
-                  <a href="http://www.microsoft.com/en-us/download/details.aspx?id=18359">Microsoft Internet Explorer Developer Toolbar.</a>. Allows examination of script-generated DOM in Microsoft Internet Explorer</li>
-            <li>
-                  <a href="http://getfirebug.com/">Firebug</a>. Allows examination of script-generated DOM in Firefox. </li>
+          <li><a href="https://www.w3.org/WAI/ARIA/apg/patterns/dialogmodal/">ARIA Authoring Practices Guide - Dialog (Modal)</a>.</li>
+          <li><a href="https://html.spec.whatwg.org/multipage/interactive-elements.html#the-dialog-element">HTML - the <code class="language-html">dialog</code> element</a>.</li>
          </ul>
       
-   </section></body></html>
\ No newline at end of file
+   </section></body></html>
diff --git a/techniques/client-side-script/SCR38.html b/techniques/client-side-script/SCR38.html
index 34be4a6be2..2400dfcaa5 100644
--- a/techniques/client-side-script/SCR38.html
+++ b/techniques/client-side-script/SCR38.html
@@ -1,156 +1,154 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Creating a conforming alternate version for a web page designed with progressive enhancement</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Creating a conforming alternate version for a web page designed with progressive enhancement</h1><section class="meta"><p class="id">ID: SCR38</p><p class="technology">Technology: client-side-script</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
-      <p>HTML with scripting.</p>
-   </section><section id="description"><h2>Description</h2>
-      <p>This objective of this technique is to offer a conforming alternate version for a web page designed with progressive enhancement. The technique demonstrates how to use a scripting technique to accomplish this by:</p>
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>Creating a conforming alternate version for a web page designed with progressive enhancement</title>
+		<link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+	</head>
+	<body>
+		<h1>Creating a conforming alternate version for a web page designed with progressive enhancement</h1><section class="meta"><p class="id">ID: SCR38</p>
+			<p class="technology">Technology: client-side-script</p>
+			<p class="type">Type: Technique</p>
+		</section>
+		<section id="applicability">
+			<h2>When to Use</h2>
+      <p><abbr title="HyperText Markup Language">HTML</abbr> with scripting.</p>
+		</section>
+		<section id="description">
+			<h2>Description</h2>
+			<p>This objective of this technique is to offer a conforming alternate version for a web page designed with progressive enhancement. The technique demonstrates how to use a scripting technique to accomplish this by:</p>
       <ol>
          <li>Storing the initial pre-enhanced version of the web page so that it can act as a "conforming alternate version" for any later enhanced versions of the content; and</li>
          <li>Inserting a mechanism into all enhanced versions of the web page which allows a user to revert the content back to the stored pre-enhanced Alternate Version.</li>
       </ol>
-<p>Web pages designed with progressive enhancement detect features in the web-enabled accessing device (size, capability and software) to allow those supported web technologies to be applied in layers on top of an HTML foundation. The basic content and functionality of such a web page are available through the HTML foundation to anyone using a more simple web-enabled accessing device, whilst enhanced versions of the page are created to suit the different features in more advanced accessing devices.</p>
-<p>The current guidance for web pages delivered in alternate versions reads: "Note 4: Alternate versions may be provided to accommodate different technology environments or user groups. Each version should be as conformant as possible. One version would need to be fully conformant in order to meet conformance requirement 1." With regard to web pages designed with progressive enhancement this leaves the problem of which version to select as the one fully conformant version - all whilst trying to ensure that no set of users is disadvantaged by that choice.</p>
-<p>One solution to this challenge is to select the pre-enhanced version of the web page (e.g. the DOM state created solely from the HTML in the source code in the absence of support for scripts, styles or non-HTML plugins) as the "fully conformant version", due to its broad reach, with regard to support, across all the possible web-enabled devices accessing the content.</p>
-<div class="note"><p>This technique removes all scripts, styles, and plugins, but it is important to state that this is not required for conformance with WCAG 2.0. An author could use a similar technique, but retain a reduced set of styles and scripts in the “pre-enhanced” version.</p></div>
-<p>While this technique offers a way to base conformance claims on a single version, authors should continue to work to ensure that each enhanced version of the web page is as conformant as possible.</p>
-   </section><section id="examples"><h2>Examples</h2>
+			<p>Web pages designed with progressive enhancement detect features in the web-enabled accessing device (size, capability and software) to allow those supported web technologies to be applied in layers on top of an HTML foundation. The basic content and functionality of such a web page are available through the HTML foundation to anyone using a more simple web-enabled accessing device, whilst enhanced versions of the page are created to suit the different features in more advanced accessing devices.</p>
+			<p>The current guidance for web pages delivered in alternate versions reads: "Note 4: Alternate versions may be provided to accommodate different technology environments or user groups. Each version should be as conformant as possible. One version would need to be fully conformant in order to meet conformance requirement 1." With regard to web pages designed with progressive enhancement this leaves the problem of which version to select as the one fully conformant version - all whilst trying to ensure that no set of users is disadvantaged by that choice.</p>
+			<p>One solution to this challenge is to select the pre-enhanced version of the web page (e.g. the DOM state created solely from the HTML in the source code in the absence of support for scripts, styles or non-HTML plugins) as the "fully conformant version", due to its broad reach, with regard to support, across all the possible web-enabled devices accessing the content.</p>
+			<div class="note"><p>This technique removes all scripts, styles, and plugins, but it is important to state that this is not required for conformance with WCAG 2.x. An author could use a similar technique, but retain a reduced set of styles and scripts in the "pre-enhanced" version.</p></div>
+			<p>While this technique offers a way to base conformance claims on a single version, authors should continue to work to ensure that each enhanced version of the web page is as conformant as possible.</p>
+		</section>
+		<section id="examples">
+			<h2>Examples</h2>
       <section class="example">
-         <h3>Using JavaScript</h3>
-         
-            <p>The example uses JavaScript in the "accToggle.js" file to store the initial pre-enhanced version of the web page, created solely from the HTML in the source code, so that it can act as a "conforming alternate version" for any later enhanced versions of the web page; and inserts a toggle link into all enhanced versions of the web page which allows a user to revert the web page back to the stored pre-enhanced "Conforming Alternate Version". Note: The "sayhello.js" file is simply there as an example payload external file, and is to be replaced by any other external scripts which are desired.</p>
-            <p>The script in the acctoggle.js file stores the pre-enhanced version - assigning the version the url postfix #accessible. Clicking the "WCAG 2.0 conforming alternate version" link (inserted as the first child of the <code class="el">body</code> element in any enhanced versions) changes the url to include the postfix "#accessible" which then resets the html located in the <code class="el">body</code> element and the <code class="el">head</code> element to pre-enhanced code. The pre-enhanced state can be reached from the link, or directly from a url typed into the browser. In addition, a link is inserted into the pre-enhanced "Conforming Alternate Version" which allows the user to re-enhance the web page (something which can also be done using the web browser's back button).</p>
-            <p>acctoggle.js source code:</p>
-         <pre xml:space="preserve">window.onload = function(event) {
+				<h3>Using JavaScript</h3>
+				<p>The example uses JavaScript in the "accToggle.js" file to store the initial pre-enhanced version of the web page, created solely from the HTML in the source code, so that it can act as a "conforming alternate version" for any later enhanced versions of the web page; and inserts a toggle link into all enhanced versions of the web page which allows a user to revert the web page back to the stored pre-enhanced "Conforming Alternate Version". Note: The "sayhello.js" file is simply there as an example payload external file, and is to be replaced by any other external scripts which are desired.</p>
+				<p>The script in the acctoggle.js file stores the pre-enhanced version - assigning the version the url postfix #accessible. Clicking the "WCAG 2.0 conforming alternate version" link (inserted as the first child of the <code class="language-html">body</code> element in any enhanced versions) changes the url to include the postfix "#accessible" which then resets the html located in the <code class="language-html">body</code> element and the <code class="language-html">head</code> element to pre-enhanced code. The pre-enhanced state can be reached from the link, or directly from a url typed into the browser. In addition, a link is inserted into the pre-enhanced "Conforming Alternate Version" which allows the user to re-enhance the web page (something which can also be done using the web browser's back button).</p>
+				<section id="the-javscript">
+				<h4>acctoggle.js JavaScript:</h4>
+<pre xml:space="preserve"><code class="language-javascript">window.onload = function(event) {
 
-    // store pre-enhanced element content
-    var initialHead = document.head.innerHTML;
-    var initialBody = document.body.innerHTML;
-    var initialURL = location.href;
-    
-    var runOnce = function() {
-        // payload you want to run per page call - e.g. Google Analytics code
-    }
-    
-    var setup = function() {
-        // create conforming alternate version link
+// store pre-enhanced element content
+var initialHead = document.head.innerHTML;
+var initialBody = document.body.innerHTML;
+var initialURL = location.href;
+				
+var runOnce = function() {
+  // payload you want to run per page call - e.g. analytics code
+}
+
+var setup = function() {
+  // create conforming alternate version link
+
+  var toggleEnhanced = document.querySelector("#toggle_enhanced");
+  if (toggleEnhanced) {
+    toggleEnhanced.outerHTML = "";
+  }
 
-        var toggleEnhanced = document.querySelector("#toggle_enhanced");
-        if (toggleEnhanced) {
-            toggleEnhanced.outerHTML = "";
-        }
-        
-        var nel = document.createElement("a");
-        nel.id = "acctoggle";
-        nel.setAttribute("href", "#accessible");
-        nel.innerHTML = "WCAG 2.0 conforming alternate version";
-        document.body.insertBefore(nel, document.body.firstChild);
-        
-        // payload
-        var s = document.createElement("SCRIPT");
-        s.setAttribute("src", "sayhello.js");
-        document.querySelector("HEAD").appendChild(s);   
-       }
-    
-    setup();
-    runOnce();
-    
-    window.onpopstate = function(event) {
-        if (location.href.indexOf("#accessible") != -1) {
-            // revert element contents to pre-enhanced version
-            document.head.innerHTML = initialHead;
-            document.body.innerHTML = initialBody;
-            
-            // create enhanced version link
-            var el = document.createElement("a");
-            el.id = "toggle_enhanced";
-            el.setAttribute("href", "");
-            el.innerHTML = "Enhanced version";
-            var back = function(e) {
-                 e.preventDefault();
-                 window.history.back();
-            }
-            el.addEventListener("click", back, false);
-            document.body.insertBefore(el, document.body.firstChild);
-        }
-        if (location.href == initialURL) {
-            setup();
-        }
-    };
+  var nel = document.createElement("a");
+  nel.id = "acctoggle";
+  nel.setAttribute("href", "#accessible");
+  nel.innerHTML = "WCAG 2.0 conforming alternate version";
+  document.body.insertBefore(nel, document.body.firstChild);
+
+  // payload
+  var s = document.createElement("SCRIPT");
+  s.setAttribute("src", "sayhello.js");
+  document.querySelector("HEAD").appendChild(s);   
 }
-		 </pre>
+					
+setup();
+runOnce();
 
-            <p>HTML web page source code:</p>
-         <pre xml:space="preserve">&lt;!DOCTYPE html&gt;
-  &lt;html lang="en"&gt;
-    &lt;head&gt;
-        &lt;title&gt;Evaluera Ltd&lt;/title&gt;
-        &lt;meta charset="UTF-8" /&gt;
-        &lt;script src="accSwitch.js"&gt;&lt;/script&gt;
-    &lt;/head&gt;
-    &lt;body&gt; 
-        &lt;h1&gt;Test Page&lt;/h1&gt;
-        &lt;p&gt;Say: &lt;span id="change"&gt;Goodbye&lt;/span&gt;&lt;/p&gt;
-    &lt;/body&gt;
-&lt;/html&gt;			
-		 </pre>
+window.onpopstate = function(event) {
+  if (location.href.indexOf("#accessible") != -1) {
+  
+  // revert element contents to pre-enhanced version
+  document.head.innerHTML = initialHead;
+  document.body.innerHTML = initialBody;
 
-<p>sayhello.js source code</p>
-         <pre xml:space="preserve">var change = document.querySelector("#change");
-         change.innerText = "Hello";			
-		 </pre>
+  // create enhanced version link
+  var el = document.createElement("a");
+  el.id = "toggle_enhanced";
+  el.setAttribute("href", "");
+  el.innerHTML = "Enhanced version";
+  var back = function(e) {
+    e.preventDefault();
+    window.history.back();
+  }
+  el.addEventListener("click", back, false);
+  document.body.insertBefore(el, document.body.firstChild);
+}
 
-         
-      </section>
-	<section class="example">
-		<h3>Using EnhanceJS - A Javascript framework designed to improve the application of Progressive Enhancement</h3>
-		
-<p><a href="https://code.google.com/p/enhancejs/">EnhanceJS</a> is an open source JavaScript framework "designed to improve the application of Progressive Enhancement by first testing browser capabilities for key Javascript and CSS support before applying advanced styles and scripts to the page". In addition, the default EnhanceJS script automatically creates a toggle link in any post-enhanced versions of the page which allows a user to return the web page to its pre-enhanced state (in EnhanceJS with default settings this is called the "low bandwidth version"). The setting have been changed in EnhanceJS to indicate that the pre-enhanced state is to be considered the "WCAG 2.0 conforming alternate version", rather than the "low bandwidth version".</p>
-<p>HTML Component:</p>		
-<pre xml:space="preserve">&lt;!DOCTYPE html&gt;
+if (location.href == initialURL) {
+  setup();
+}
+};
+}</code></pre>
+</section>
+
+<section id="the-html">
+  <h4>HTML web page source code:</h4>
+<pre xml:space="preserve"><code class="language-html">&lt;!DOCTYPE html&gt;
 &lt;html lang="en"&gt;
-    &lt;head&gt;
-    &lt;script type="text/javascript" src="enhance.js"&gt;&lt;/script&gt;
-    &lt;script type="text/javascript"&gt;
-        // Run capabilities test
-        enhance({
-            loadStyles: [
-                "example.css"
-            ], 
-            loadScripts: [
-                "example.js"
-            ],
-            // text shown in enhanced mode
-            forceFailText: "WCAG 2.0 conforming alternate version",
-            // text shown in accessible mode
-            forcePassText: "Enhanced version"
-        });
-    &lt;/script&gt;
-    &lt;/head&gt;
-    ....
+  &lt;head&gt;
+    &lt;title&gt;Evaluera Ltd&lt;/title&gt;
+    &lt;meta charset="UTF-8"&gt;
+    &lt;script src="accSwitch.js"&gt;&lt;/script&gt;
+  &lt;/head&gt;
+  &lt;body&gt; 
+    &lt;h1&gt;Test Page&lt;/h1&gt;
+    &lt;p&gt;Say: &lt;span id="change"&gt;Goodbye&lt;/span&gt;&lt;/p&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</code></pre>
 
-</pre>
-		
-	</section>
-   </section><section id="tests"><h2>Tests</h2>
-      <section class="procedure"><h3>Procedure</h3>
-         <ol>
-            <li>Check enhanced versions of the web page contain a link to the "Conforming Alternate Version".</li>
-            <li>Check that the alternate version is a <a>conforming alternate version</a> of the original page and that it conforms to WCAG 2.0 at the claimed conformance level.</li>
-         </ol>
+<h4>sayhello.js source code</h4>
+<pre xml:space="preserve"><code class="language-javascript">var change = document.querySelector("#change");
+change.innerText = "Hello";</code></pre>    
+</section>     
       </section>
-      <section class="results"><h3>Expected Results</h3>
-         <ul>
-            <li>Checks #1 and #2 are true. </li>
-         </ul>
-      </section>
-   </section><section id="related"><h2>Related Techniques</h2><ul>
+   </section>
+	 <section id="tests">
+		<h2>Tests</h2>
+		<section class="procedure">
+			<h3>Procedure</h3>
+			<ol>
+				<li>Check enhanced versions of the web page contain a link to the "Conforming Alternate Version".</li>
+				<li>Check that the alternate version is a <a>conforming alternate version</a> of the original page and that it conforms to WCAG 2.0 at the claimed conformance level.</li>
+			</ol>
+    </section>
+    <section class="results">
+			<h3>Expected Results</h3>
+			<ul>
+				<li>Checks #1 and #2 are true.</li>
+			</ul>
+    </section>
+   </section>
+	 <section id="related">
+		<h2>Related Techniques</h2>
+		<ul>
       <li><a href="../general/G136">G136</a></li>
       <li><a href="../css/C29">C29</a></li>
       <li><a href="../server-side-script/SVR4">SVR4</a></li>
-   </ul></section><section id="resources"><h2>Resources</h2>
-      
-         <ul>
-            <li>
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/css/C29#C29-sa1">Using Cookies</a></li>
-            <li><a href="https://www.w3.org/WAI/WCAG21/Techniques/css/C29#C29-sa2">Progressive Enhancement and Unobtrusive JavaScript</a></li>
-         </ul>
-      
-   </section></body></html>
\ No newline at end of file
+   </ul>
+	</section>
+	<section id="resources">
+		<h2>Resources</h2>
+		<ul>
+			<li>
+				<a href="../css/C29#using-cookies">Using Cookies</a>
+			</li>
+			<li><a href="../css/C29#progressive-enhancement-and-unobtrusive-javascript">Progressive Enhancement and Unobtrusive JavaScript</a>
+			</li>
+		</ul>
+   </section>
+</body>
+</html>
\ No newline at end of file
diff --git a/techniques/client-side-script/SCR39.html b/techniques/client-side-script/SCR39.html
index dd1a636f45..56f88e344e 100644
--- a/techniques/client-side-script/SCR39.html
+++ b/techniques/client-side-script/SCR39.html
@@ -1,11 +1,9 @@
 <!DOCTYPE html>
 <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
-
 <head>
   <title>Making content on focus or hover hoverable, dismissible, and persistent</title>
-  <link rel="stylesheet" type="text/css" href="../../css/editors.css" />
+  <link rel="stylesheet" type="text/css" href="../../css/editors.css"/>
 </head>
-
 <body>
   <h1>Making content on focus or hover hoverable, dismissible, and persistent</h1>
   <section id="meta">
@@ -31,69 +29,70 @@ <h2>Description</h2>
   </section>
   <section id="examples">
     <h2>Examples</h2>
-    <p class="instructions"></p>
     <section class="example">
 		<h3>Content preview for links</h3>
 		<p>When hovering over or focusing on a link, a content preview for the link appears just above or below that link.
-			Users can move the pointer over the additional content (pop-up) so that they can fully read the additional content. Pressing the Esc
+			Users can move the pointer over the additional content (pop-up) so that they can fully read the additional content. Pressing the <kbd>Esc</kbd>
 			key dismisses (closes) the additional content.</p>
 		<section>
 			<h4>HTML of example 1</h4>
-			<pre><code>&lt;p&gt;This is the &lt;a class=&quot;a-and-tooltip&quot; id=&quot;parent&quot; href=&quot;index.html&quot;&gt;trigger
-&lt;span id=&quot;popup&quot; role=&quot;tooltip&quot;&gt;And this additional text 
-gives additional context on the trigger term&lt;/span&gt;&lt;/a&gt;.
-Text and popup are &lt;strong&gt;in one link (a)&lt;/strong&gt; element.&lt;/p&gt;</code></pre>
-<hr />
+<pre xml:space="preserve"><code class="language-html">&lt;p&gt;This is the 
+   &lt;a class=&quot;a-and-tooltip&quot; id=&quot;parent&quot; href=&quot;index.html&quot;&gt;trigger
+   &lt;span id=&quot;popup&quot; role=&quot;tooltip&quot;&gt;And this additional text 
+    gives additional context on the trigger term
+   &lt;/span&gt;
+  &lt;/a&gt;.
+   Text and popup are &lt;strong&gt;in one link (a)&lt;/strong&gt; element.
+&lt;/p&gt;</code></pre>
 		</section>
 		<section>
 			<h4>CSS of example 1</h4>
-			<pre><code>[role=&quot;tooltip&quot;] {
-    display: none;
-    padding: 0.5em;
-    background:white;
-    color: black;
-    border:solid black 2px;
-    width:10em;
+<pre xml:space="preserve"><code class="language-css">[role=&quot;tooltip&quot;] {
+  display: none;
+  padding: 0.5em;
+  background:white;
+  color: black;
+  border:solid black 2px;
+  width:10em;
 }
 
 .a-and-tooltip {
   position: relative;
 }
 
-[role=&quot;tooltip&quot;] {
-    position: absolute;
-    left:0;
-    top:1em;
+[role="tooltip"] {
+  position: absolute;
+  left:0;
+  top:1em;
 }</code></pre>
-			<hr />
 		</section>
 		<section>
 			<h4>JavaScript of example 1</h4>
-			<pre><code>// trigger and popup inside the same link
+			<pre xml:space="preserve"><code class="language-javascript">// trigger and popup inside the same link
 
-var parent = document.getElementById(&apos;parent&apos;);
+var parent = document.getElementById("parent");
 
 parent.onmouseover = function() {
-    document.getElementById(&apos;popup&apos;).style.display = &apos;block&apos;;
+  document.getElementById("popup").style.display = "block";
 }
 
 parent.onmouseout = function() {
-    document.getElementById(&apos;popup&apos;).style.display = &apos;none&apos;;
+  document.getElementById("popup").style.display = "none";
 }
 
 parent.onfocus = function() {
-    document.getElementById(&apos;popup&apos;).style.display = &apos;block&apos;;
+  document.getElementById("popup").style.display = "block";
 }
 
 parent.onblur = function() {
-    document.getElementById(&apos;popup&apos;).style.display = &apos;none&apos;;
+  document.getElementById("popup").style.display = "none";
 }
 
 // hide when ESC is pressed
 
-document.addEventListener(&apos;keydown&apos;, (e) =&gt; {
+document.addEventListener("keydown", (e) =&gt; {
   if ((e.keyCode || e.which) === 27)
-       document.getElementById(&apos;popup&apos;).style.display = &apos;none&apos;;
+    document.getElementById("popup").style.display = "none";
 });</code></pre>
 		</section>
 
@@ -138,5 +137,4 @@ <h2>Related Techniques</h2>
     </ul>
   </section>
 </body>
-
 </html>
diff --git a/techniques/css/C12.html b/techniques/css/C12.html
index f42b5f750d..b094b80ece 100644
--- a/techniques/css/C12.html
+++ b/techniques/css/C12.html
@@ -1,46 +1,71 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using percent for font sizes</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Using percent for font sizes</h1><section class="meta"><p class="id">ID: C12</p><p class="technology">Technology: css</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
-      <p>CSS</p>
-   </section><section id="description"><h2>Description</h2>
-      <p>The objective of this technique is to specify text font size proportionally so that user agents can scale content effectively. If a font-size is specified for the <code class="el">body</code> element, all other elements inherit that value, unless overridden by a more specific selector.</p>
-   </section><section id="examples"><h2>Examples</h2>
-      <section class="example">
-         <h3>Percent font sizes in CSS</h3>
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>Using percent for font sizes</title>
+		<link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+	</head>
+	<body>
+		<h1>Using percent for font sizes</h1>
+		<section class="meta">
+			<p class="id">ID: C12</p>
+			<p class="technology">Technology: css</p>
+			<p class="type">Type: Technique</p>
+		</section>
+		<section id="applicability">
+			<h2>When to Use</h2>
+      <p><abbr title="Cascading Style Sheets">CSS</abbr></p>
+		</section>
+		<section id="description">
+			<h2>Description</h2>
+      <p>The objective of this technique is to specify text font size proportionally so that user agents can scale content effectively. If a <code class="language-css">font-size</code> is specified for the <code class="language-html">body</code> element, all other elements inherit that value, unless overridden by a more specific selector.</p>
+		</section>
+		<section id="examples">
+			<h2>Examples</h2>
+			<section class="example">
+				<h3>Percent font sizes in CSS</h3> 
+				<p>This example defines the font size for the <code class="language-html">strong</code> element so that its text will always be larger than the surrounding text, in whatever context it is used. Assuming that headings and paragraphs use different font sizes, the emphasized words in this example will each be larger than their surrounding text.</p>
          
-            <p>This example defines the font size for the <code class="el">strong</code> element so that its text will always be larger than the surrounding text, in whatever context it is used. Assuming that headings and paragraphs use different font sizes, the emphasized words in this example will each be larger than their surrounding text.</p>
-         
-         <pre xml:space="preserve">
-strong {font-size: 120%}
-
-...
+<pre xml:space="preserve"><code class="language-html">&lt;style&gt;
+  strong {font-size: 120%}
+&lt;/style&gt;
 
 &lt;h1&gt;Letting the &lt;strong&gt;user&lt;/strong&gt; control text size&lt;/h1&gt;
-&lt;p&gt;Since only the user can know what size text works for him, 
-it is &lt;strong&gt;very&lt;/strong&gt; important to let him configure the text size.  
-…</pre>
-      </section>
-   </section><section id="tests"><h2>Tests</h2>
-      <section class="procedure"><h3>Procedure</h3>
-         <ol>
-            <li>Check that the value of the CSS property that defines the font size is a percentage.</li>
-         </ol>
-      </section>
-      <section class="results"><h3>Expected Results</h3>
-         <ul>
-            <li>Check #1 is true</li>
-         </ul>
-      </section>
-   </section><section id="related"><h2>Related Techniques</h2><ul>
+&lt;p&gt;Since only the user can know what size text works for them, 
+it is &lt;strong&gt;very&lt;/strong&gt; important to let them configure the text size.&lt;/p&gt;</code></pre>
+		</section>
+	</section>
+	<section id="tests">
+		<h2>Tests</h2>
+		<section class="procedure">
+			<h3>Procedure</h3>
+			<ol>
+				<li>Check that the value of the CSS property that defines the font size is a percentage.</li>
+			</ol>
+		</section>
+		<section class="results">
+			<h3>Expected Results</h3>
+			<ul>
+				<li>Check #1 is true</li>
+			</ul>
+		</section>
+	</section>
+	<section id="related">
+		<h2>Related Techniques</h2>
+		<ul>
       <li><a href="../css/C13">C13</a></li>
       <li><a href="../css/C14">C14</a></li>
-   </ul></section><section id="resources"><h2>Resources</h2>
-      
-         <ul>
-            <li> 
-                  <a href="https://www.w3.org/TR/CSS2/fonts.html">Cascading Style Sheets, Level 2 (CSS2), Fonts</a> 
-               </li>
-            <li> 
-                  <a href="https://www.w3.org/TR/CSS2/fonts.html#font-size-props">CSS 2 Font Size Property</a> 
-               </li>
-         </ul>
-      
-   </section></body></html>
\ No newline at end of file
+   </ul>
+	</section>
+	<section id="resources">
+		<h2>Resources</h2>
+		<ul>
+			<li>
+				<a href="https://www.w3.org/TR/css-fonts-3/">Cascading Style Sheets, Fonts</a>.
+			</li>
+			<li>
+				<a href="https://www.w3.org/TR/css-fonts-3/#font-size-prop">CSS <code class="language-css">font-size</code> property</a>.
+			</li>
+		</ul>
+	</section>
+</body>
+</html>
\ No newline at end of file
diff --git a/techniques/css/C13.html b/techniques/css/C13.html
index a7ea0c99f2..593352e7ff 100644
--- a/techniques/css/C13.html
+++ b/techniques/css/C13.html
@@ -1,46 +1,74 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using named font sizes</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Using named font sizes</h1><section class="meta"><p class="id">ID: C13</p><p class="technology">Technology: css</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
-      <p>CSS</p>
-   </section><section id="description"><h2>Description</h2>
-      <p>The objective of this technique is to specify a named font size that expresses the relative font size desired. These values provide hints so that the user agent can choose a font-size relative to the inherited font-size.</p>
-   </section><section id="examples"><h2>Examples</h2>
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>Using named font sizes</title>
+		<link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+	</head>
+	<body>
+		<h1>Using named font sizes</h1>
+		<section class="meta">
+			<p class="id">ID: C13</p>
+			<p class="technology">Technology: css</p>
+			<p class="type">Type: Technique</p>
+		</section>
+		<section id="applicability">
+			<h2>When to Use</h2>
+      <p><abbr title="Cascading Style Sheets">CSS</abbr></p>
+		</section>
+		<section id="description">
+			<h2>Description</h2>
+      <p>The objective of this technique is to specify a named font size that expresses the relative font size desired. These values provide hints so that the user agent can choose a <code class="language-css">font-size</code> relative to the inherited <code class="language-css">font-size</code>.</p>
+		</section>
+		<section id="examples">
+			<h2>Examples</h2>
       <section class="example">
-         <h3>Named font sizes in CSS</h3>
+				<h3>Named font sizes in CSS</h3>
+				<p>This example selects a larger font size for <code class="language-html">strong</code> elements so that their text will always be larger than the surrounding text, in whatever context they are used. Assuming that headings and paragraphs use different font sizes, the emphasized words in this example will each be larger than their surrounding text.</p>
          
-            <p>This example selects a larger font size for <code class="el">strong</code> elements so that their text will always be larger than the surrounding text, in whatever context they are used. Assuming that headings and paragraphs use different font sizes, the emphasized words in this example will each be larger than their surrounding text.</p>
-         
-         <pre xml:space="preserve">
-strong {font-size: larger}
-
+<pre xml:space="preserve"><code class="language-html">&lt;style&gt;
+  strong {font-size: larger}
+&lt;/style&gt;
 ...
-
 &lt;h1&gt;Letting the &lt;strong&gt;user&lt;/strong&gt; control text size&lt;/h1&gt;
-&lt;p&gt;Since only the user can know what size text works for him, 
-it is &lt;strong&gt;very&lt;/strong&gt; important to let him configure the text size.  
-…</pre>
+&lt;p&gt;Since only the user can know what size text works for them, 
+ it is &lt;strong&gt;very&lt;/strong&gt; important to let them configure the text size.  
+...</code>
+</pre>
       </section>
-   </section><section id="tests"><h2>Tests</h2>
-      <section class="procedure"><h3>Procedure</h3>
-         <ol>
-            <li>Check that the value of the CSS property that defines the font size is one of xx-small, xx-small, x-small, small, medium, large, x-large, xx-large, xsmaller, or larger.</li>
+		</section>
+		<section id="tests">
+			<h2>Tests</h2>
+      <section class="procedure">
+				<h3>Procedure</h3>
+				<ol>
+					<li>Check that the value of the CSS property that defines the font size is one of <code class="language-css">xx-small</code>, <code class="language-css">x-small</code>, <code class="language-css">small</code>, <code class="language-css">medium</code>, <code class="language-css">large</code>, <code class="language-css">x-large</code>, <code class="language-css">xx-large</code>, <code class="language-css">smaller</code>, or <code class="language-css">larger</code>.</li>
          </ol>
-      </section>
-      <section class="results"><h3>Expected Results</h3>
-         <ul>
-            <li>Check #1 is true</li>
-         </ul>
-      </section>
-   </section><section id="related"><h2>Related Techniques</h2><ul>
-      <li><a href="../css/C12">C12</a></li>
-      <li><a href="../css/C14">C14</a></li>
-   </ul></section><section id="resources"><h2>Resources</h2>
-      
+				</section>
+				<section class="results">
+					<h3>Expected Results</h3>
+					<ul>
+						<li>Check #1 is true</li>
+					</ul>
+				</section>
+			</section>
+			<section id="related">
+				<h2>Related Techniques</h2>
+				<ul>
+					<li><a href="../css/C12">C12</a></li>
+					<li><a href="../css/C14">C14</a></li>
+				</ul>
+			</section>
+			<section id="resources">
+				<h2>Resources</h2>
          <ul>
-            <li> 
-                  <a href="https://www.w3.org/TR/CSS2/fonts.html">Cascading Style Sheets, Level 2 (CSS2), Fonts</a> 
-               </li>
-            <li> 
-                  <a href="https://www.w3.org/TR/CSS2/fonts.html#font-size-props">CSS 2 Font Size Property</a> 
-               </li>
-         </ul>
-      
-   </section></body></html>
\ No newline at end of file
+            <li>
+							<a href="https://www.w3.org/TR/css-fonts-3/">CSS Fonts Module Level 3</a>.
+						</li>
+            <li>
+							<a href="https://www.w3.org/TR/css-fonts-3/#font-size-prop">CSS 3 <code class="language-css">font-size</code> Property</a>.
+						</li>
+					</ul>
+				</section>
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/default.min.css"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script> <script>hljs.highlightAll();</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/techniques/css/C14.html b/techniques/css/C14.html
index 9a28cc2e05..25842052b8 100644
--- a/techniques/css/C14.html
+++ b/techniques/css/C14.html
@@ -1,46 +1,71 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using em units for font sizes</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Using em units for font sizes</h1><section class="meta"><p class="id">ID: C14</p><p class="technology">Technology: css</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
-      <p>CSS</p>
-   </section><section id="description"><h2>Description</h2>
-      <p>The objective of this technique is to specify text font size in em units so that user agents can scale content effectively. Since the em is a property of the font, it scales as the font changes size. If a font-size is specified for the <code class="el">body</code> element, all other elements inherit that value, unless overridden by a more specific selector.</p>
-   </section><section id="examples"><h2>Examples</h2>
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>Using em units for font sizes</title>
+		<link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+	</head>
+	<body>
+		<h1>Using <code class="language-css">em</code> units for font sizes</h1>
+		<section class="meta">
+			<p class="id">ID: C14</p>
+			<p class="technology">Technology: css</p>
+			<p class="type">Type: Technique</p>
+		</section>
+		<section id="applicability">
+			<h2>When to Use</h2>
+      <p><abbr title="Cascading Style Sheets">CSS</abbr></p>
+		</section>
+		<section id="description">
+			<h2>Description</h2>
+      <p>The objective of this technique is to specify text font size in <code class="language-css">em</code> units so that user agents can scale content effectively. Since the <code class="language-css">em</code> is a property of the font, it scales as the font changes size. If a <code class="language-css">font-size</code> is specified for the <code class="language-html">body</code> element, all other elements inherit that value, unless overridden by a more specific selector.</p>
+		</section>
+		<section id="examples">
+			<h2>Examples</h2>
       <section class="example">
-         <h3>Em font sizes in CSS</h3>
-         
-            <p>This example defines the font size for strong element so that its text will always be larger than the surrounding text, in whatever context it is used. Assuming that headings and paragraphs use different font sizes, the strong words in this example will each be larger than their surrounding text.</p>
-         
-         <pre xml:space="preserve">
-strong {font-size: 1.6em}
-
-...
-
+				<h3><code class="language-css">em</code> font sizes in CSS</h3>
+				<p>This example defines the font size for strong element so that its text will always be larger than the surrounding text, in whatever context it is used. Assuming that headings and paragraphs use different font sizes, the strong words in this example will each be larger than their surrounding text.</p>  
+<pre xml:space="preserve"><code class="language-html">&lt;style&gt;
+  strong {font-size: 1.6em}
+&lt;/style&gt;
+...	
 &lt;h1&gt;Letting the &lt;strong&gt;user&lt;/strong&gt; control text size&lt;/h1&gt;
-&lt;p&gt;Since only the user can know what size text works for him, 
-it is &lt;strong&gt;very&lt;/strong&gt; important to let him configure the text size.  &lt;/p&gt;
-…</pre>
+&lt;p&gt;Since only the user can know what size text works for them, 
+   it is &lt;strong&gt;very&lt;/strong&gt; important to let them configure the text size.&lt;/p&gt;
+…</code></pre>
       </section>
-   </section><section id="tests"><h2>Tests</h2>
-      <section class="procedure"><h3>Procedure</h3>
-         <ol>
-            <li>Check that the value of the CSS property that defines the font size is expressed in em units.</li>
-         </ol>
+		</section>
+		<section id="tests">
+			<h2>Tests</h2>
+			<section class="procedure">
+				<h3>Procedure</h3>
+				<ol>
+					<li>Check that the value of the CSS property that defines the font size is expressed in em units.</li>
+				</ol>
       </section>
-      <section class="results"><h3>Expected Results</h3>
-         <ul>
-            <li>Check #1 is true</li>
-         </ul>
+			<section class="results">
+				<h3>Expected Results</h3>
+				<ul>
+					<li>Check #1 is true</li>
+				</ul>
       </section>
-   </section><section id="related"><h2>Related Techniques</h2><ul>
-      <li><a href="../css/C12">C12</a></li>
-      <li><a href="../css/C13">C13</a></li>
-   </ul></section><section id="resources"><h2>Resources</h2>
-      
-         <ul>
-            <li> 
-                  <a href="https://www.w3.org/TR/CSS2/fonts.html">Cascading Style Sheets, Level 2 (CSS2), Fonts</a> 
-               </li>
-            <li> 
-                  <a href="https://www.w3.org/TR/CSS2/fonts.html#font-size-props">CSS 2 Font Size Property</a> 
-               </li>
-         </ul>
-      
-   </section></body></html>
\ No newline at end of file
+		</section>
+		<section id="related">
+			<h2>Related Techniques</h2>
+			<ul>
+				<li><a href="../css/C12">C12</a></li>
+				<li><a href="../css/C13">C13</a></li>
+			</ul>
+		</section>
+		<section id="resources">
+			<h2>Resources</h2>
+			<ul>
+				<li>
+					<a href="https://www.w3.org/TR/css-fonts-3/">CSS Fonts Module Level 3</a>.
+				</li>
+				<li>
+					<a href="https://www.w3.org/TR/css-fonts-3/#font-size-prop">CSS 3 <code class="language-css">font-size</code> Property</a>.
+				</li>
+			</ul>
+		</section>
+	</body>
+</html>
\ No newline at end of file
diff --git a/techniques/css/C15.html b/techniques/css/C15.html
index bed91b140f..e71655ff33 100644
--- a/techniques/css/C15.html
+++ b/techniques/css/C15.html
@@ -1,67 +1,85 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using CSS to change the presentation of a user interface component when it receives focus</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Using CSS to change the presentation of a user interface component when it receives focus</h1><section class="meta"><p class="id">ID: C15</p><p class="technology">Technology: css</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
-      <p>CSS, HTML and XHTML</p>
-   </section><section id="description"><h2>Description</h2>
-      <p>The objective of this technique is to demonstrate how visual appearance may be enhanced via style sheets to provide visual feedback when an interactive element has focus or when a user hovers over it using a pointing device. Highlighting the element that has focus or is hovered over can provide information such as the fact that the element is interactive or the scope of the interactive element. </p>
-      <p>Providing visual feedback may be possible through more than one mode. Usually, it is attained through using a mouse to hover over the element or a keyboard to tab to the element. </p>
-   </section><section id="examples"><h2>Examples</h2>
-      <section class="example">
-         <h3>Link elements</h3>
-         
-            <p>In this example, mouse and keyboard focus indicators have been applied to the link elements. CSS has been used to apply a background color when the link elements receive focus. </p>
-            <p>Here is the content to be displayed:</p>
-         
-         <pre xml:space="preserve">
-&lt;ul id="mainnav"&gt;
-  &lt;li class="page_item"&gt;Home&lt;/li&gt;
-  &lt;li class="page_item"&gt;&lt;a href="/services"&gt;Services&lt;/a&gt;&lt;/li&gt;
-  &lt;li class="page_item"&gt;&lt;a href="/projects"&gt;Projects&lt;/a&gt;&lt;/li&gt;
-  &lt;li class="page_item"&gt;&lt;a href="/demos"&gt;Demos&lt;/a&gt;&lt;/li&gt;
-  &lt;li class="page_item"&gt;&lt;a href="/about-us"&gt;About us&lt;/a&gt;&lt;/li&gt;
-  &lt;li class="page_item"&gt;&lt;a href="/contact-us"&gt;Contact us&lt;/a&gt;&lt;/li&gt;
-  &lt;li class="page_item"&gt;&lt;a href="/links"&gt;Links&lt;/a&gt;&lt;/li&gt;
-&lt;/ul&gt;</pre>
-         
-            <p>Here is the CSS that changes the background color for the above elements when they receive mouse or keyboard focus:</p>
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>Using CSS to change the presentation of a user interface component when it receives focus</title>
+		<link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+	</head>
+	<body>
+		<h1>Using <abbr title="Cascading Style Sheets">CSS</abbr> to change the presentation of a user interface component when it receives focus</h1>
+		<section class="meta">
+			<p class="id">ID: C15</p>
+			<p class="technology">Technology: css</p>
+			<p class="type">Type: Technique</p>
+		</section>
+		<section id="applicability">
+			<h2>When to Use</h2>
+      <p>CSS, <abbr title="HyperText Markup Language">HTML</abbr></p>
+		</section>
+		<section id="description">
+			<h2>Description</h2>
+      <p>The objective of this technique is to demonstrate how visual appearance may be enhanced via style sheets to provide visual feedback when an interactive element has focus or when a user hovers over it using a pointing device. Highlighting the element that has focus or is hovered over can provide information such as the fact that the element is interactive or the scope of the interactive element.</p>
+      <p>Providing visual feedback may be possible through more than one mode. Usually, it is attained through using a mouse to hover over the element or a keyboard to tab to the element.</p>
+   </section>
+	 <section id="examples">
+		<h2>Examples</h2>
+		<section class="example">
+			<h3>Link elements</h3>
+			<p>In this example, mouse and keyboard focus indicators have been applied to the link elements. CSS has been used to apply a background color when the link elements receive focus.</p>
+			<p>Here is the content to be displayed:</p>
          
-         <pre xml:space="preserve">
-#mainnav a:hover, #mainnav a:active, #mainnav a:focus {
+<pre xml:space="preserve"><code class="language-html">&lt;nav id="main-nav"&gt;
+  &lt;ul&gt;
+    &lt;li&gt;Home&lt;/li&gt;
+    &lt;li&gt;&lt;a href="/services"&gt;Services&lt;/a&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;a href="/projects"&gt;Projects&lt;/a&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;a href="/demos"&gt;Demos&lt;/a&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;a href="/about-us"&gt;About us&lt;/a&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;a href="/contact-us"&gt;Contact us&lt;/a&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;a href="/links"&gt;Links&lt;/a&gt;&lt;/li&gt;
+  &lt;/ul&gt;
+&lt;nav&gt;</code></pre>
+			<p>Here is the CSS that changes the background color for the above elements when they receive mouse or keyboard focus:</p>   
+<pre xml:space="preserve"><code class="language-css">#main-nav a:hover, #main-nav a:active, #main-nav a:focus-visible {
   background-color: #DCFFFF;
   color:#000066;
-}</pre>
+}</code></pre>
       </section>
       <section class="example">
-         <h3>Highlighting elements that receive focus</h3>
+				<h3>Highlighting elements that receive focus</h3>
+				<p>In this example, the :focus pseudo-class is used to change the style applied to input fields when they receive focus by changing the background color.</p>
          
-            <p>In this example, the :focus pseudo-class is used to change the style applied to input fields when they receive focus by changing the background color. </p>
-         
-         <pre xml:space="preserve">
-&lt;html&gt;
+<pre xml:space="preserve"><code class="language-">&lt;!doctype html&gt;
+&lt;html lang="en"&gt;
   &lt;head&gt;
-    &lt;style type="text/css"&gt;
-      input.text:focus {
-        background-color: #7FFF00; 
-        color: #000;
+    &lt;style&gt;
+      input[type=text]:focus-visible {
+        outline:2px solid #0054AE;
+        outline-offset:2px;
       }
+
       input[type=checkbox]:focus + label, input[type=radio]:focus + label {
-        background-color: #FF6; 
-        color: #000; 
+        background-color:#1E2EB8; 
+        color:#FFF;
       }
     &lt;/style&gt;
   &lt;/head&gt;
   &lt;body&gt;
-    &lt;form method="post" action="form.php"&gt;
-      &lt;p&gt;&lt;label for="fname"&gt;Name: &lt;/label&gt;
-        &lt;input class="text" type="text" name="fname" id="fname" /&gt;
-      &lt;/p&gt;
-      &lt;p&gt;
-        &lt;input type="radio" name="sex" value="male" id="sm" /&gt; &lt;label for="sm"&gt;Male&lt;/label&gt;&lt;br /&gt;
-        &lt;input type="radio" name="sex" value="female" id="sf" /&gt; &lt;label for="sf"&gt;Female&lt;/label&gt;
-      &lt;p&gt;
+    &lt;form&gt;
+      &lt;div&gt;
+        &lt;label for="fname"&gt;Name: &lt;/label&gt;
+        &lt;input autocomplete="name" type="text" name="fname" id="fname"&gt;
+      &lt;/div&gt;
+      &lt;div&gt;
+        &lt;input type="radio" name="sex" value="male" id="sm"&gt;
+        &lt;label for="sm"&gt;Male&lt;/label&gt;
+      &lt;/div&gt;
+      &lt;div&gt;			
+        &lt;input type="radio" name="sex" value="female" id="sf"&gt;
+        &lt;label for="sf"&gt;Female&lt;/label&gt;
+      &lt;/div&gt;
     &lt;/form&gt;
   &lt;/body&gt;
-&lt;/html&gt;
-
-            </pre>
+&lt;/html&gt;</code></pre>
          
             <p class="working-example">Working example of this code: <a href="../../working-examples/focus-pseudo-class/">Example of highlighting elements that receive focus</a>.</p>
          
@@ -70,28 +88,38 @@ <h3>Highlighting elements that receive focus</h3>
       <section class="procedure"><h3>Procedure</h3>
          <p>For each element able to attain focus: </p>
          <ol>
-            <li>Using a mouse, hover over the element. </li>
-            <li>Check that the background or border changes color. </li>
-            <li>Move the mouse away from the object before attempting keyboard focus. </li>
-            <li>Using a keyboard, tab to the element.</li>
-            <li>Check that the background or border changes color.</li>
-            <li>Check that the background or border changes in color are removed when the element loses focus.</li>
+            <li>Using a keyboard, tab to the component.</li>
+            <li>Check that the focus indicator changes color.</li>
+            <li>Check that the focus indicator is removed when the component loses focus.</li>
          </ol>
       </section>
-      <section class="results"><h3>Expected Results</h3>
-         <ul>
-            <li>Checks #2, #5 and #6 are true.</li>
-         </ul>
-      </section>
-   </section><section id="resources"><h2>Resources</h2>
-      
-         <ul>
-            <li> 
-                  <a href="https://www.w3.org/TR/CSS2/selector.html#dynamic-pseudo-classes">CSS 2: 5.11.3 The dynamic pseudo-classes: :hover, :active, and :focus</a>
-								       </li>
-            <li> 
-                  <a href="https://www.w3.org/TR/CSS2/selector.html#adjacent-selectors">CSS 2: 5.7 Adjacent sibling selectors</a> 
-               </li>
-         </ul>
-      
-   </section></body></html>
\ No newline at end of file
+      <section class="results">
+				<h3>Expected Results</h3>
+				<ul>
+					<li>Checks #2 and #3 true.</li>
+				</ul>
+			</section>
+		</section>
+    <section id="related">
+      <h2>Related Techniques</h2>
+      <ul>
+         <li><a href="../general/G165">G165</a></li>
+         <li><a href="../general/G195">G195</a></li>
+         <li><a href="C40">C40</a></li>
+         <li><a href="C45">C45</a></li>
+      </ul>
+    </section>
+		<section id="resources">
+			<h2>Resources</h2>
+			<ul>
+				<li>
+					<a href="https://www.w3.org/TR/selectors-3/#dynamic-pseudos">CSS Selectors Level 3: 6.6.1 Dynamic pseudo-classes</a>
+				</li>
+				<li>
+					<a href="https://www.w3.org/TR/selectors-3/#adjacent-sibling-combinators">CSS Selectors Level 3: 8.3.1. Next-sibling combinator</a>
+				</li>
+			</ul>
+		</section>
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/default.min.css"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script> <script>hljs.highlightAll();</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/techniques/css/C17.html b/techniques/css/C17.html
index ec6a678c25..f2c10a1667 100644
--- a/techniques/css/C17.html
+++ b/techniques/css/C17.html
@@ -1,60 +1,83 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Scaling form elements which contain text</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Scaling form elements which contain text</h1><section class="meta"><p class="id">ID: C17</p><p class="technology">Technology: css</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
-      <p>(X)HTML, CSS</p>
-   </section><section id="description"><h2>Description</h2>
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>Scaling form elements which contain text</title>
+		<link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+	</head>
+	<body>
+		<h1>Scaling form elements which contain text</h1>
+		<section class="meta">
+			<p class="id">ID: C17</p>
+			<p class="technology">Technology: css</p>
+			<p class="type">Type: Technique</p>
+		</section>
+		<section id="applicability">
+			<h2>When to Use</h2>
+      <p><abbr title="HyperText Markup Language">HTML</abbr>, <abbr title="Cascading Style Sheets">CSS</abbr></p>
+		</section>
+		<section id="description">
+			<h2>Description</h2>
       <p>The objective of this technique is to ensure text-based form controls resize when text size is changed in the user agent. This will allow users to enter text and read what they have entered in input boxes because the text is displayed at the size required by the user.</p>
-      <p>Text-based form controls include input boxes (text and textarea) as well as buttons.</p>
-   </section><section id="examples"><h2>Examples</h2>
+      <p>Text-based form controls include <code class="language-html">input</code> boxes (<code class="language-html">text</code> and <code class="language-html">textarea</code>) as well as buttons.</p>
+		</section>
+		<section id="examples">
+			<h2>Examples</h2>
       <section class="example">
-         <h3>A Contact Form</h3>
+				<h3>A Contact Form</h3>
+				<p>A Contact Us form has some introductory information and then form controls for users to enter their first name, last name, telephone number and email address. All of the text and form controls have been implemented in a scalable way.</p>
+				<section id="the-html">
+				<h4>The HTML</h4>
          
-            <p>A Contact Us form has some introductory information and then form controls for users to enter their first name, last name, telephone number and email address. All of the text and form controls have been implemented in a scalable way. This includes specifying a font size for the form controls themselves because the font size is not inherited in Internet Explorer.</p>
-            <p>The XHTML component:</p>
+<pre xml:space="preserve"><code class="language-html">&lt;h1&gt;Contact Us&lt;/h1&gt;
+&lt;p&gt;Please provide us with your details and we will contact you as soon as we can.
+  Note that all of the form fields are required.&lt;/p&gt;
+&lt;div&gt;
+  &lt;label for="fname"&gt;First Name&lt;/label&gt;
+  &lt;input autocomplete="given-name" id="fname" name="fname" type="text"&gt;
+&lt;/div&gt;
+&lt;div&gt;
+  &lt;label for="lname"&gt;Last Name&lt;/label&gt;
+  &lt;input autocomplete="family-name" id="lname" name="lname" type="text"&gt;
+&lt;/div&gt;
+&lt;div&gt;
+  &lt;label for="phone"&gt;Telephone&lt;/label&gt;
+  &lt;input autocomplete="tel" id="phone" name="phone" type="text"&gt;
+&lt;/div&gt;
+&lt;div&gt;
+  &lt;label for="email"&gt;Email&lt;/label&gt;
+  &lt;input autocomplete="email" id="email" name="email" type="text"&gt;
+&lt;/div&gt;
+&lt;input id="submit" name="submit" type="submit" value="Submit"&gt;</code></pre>
+				</section>
+				<section id="the-css">
+					<h4>The CSS component</h4>
          
-         <pre xml:space="preserve">&lt;h1&gt;Contact Us&lt;/h1&gt;
-&lt;p&gt;Please provide us with your details and we will contact you as soon as we can. Note that all of the form fields are required.&lt;/p&gt;
-&lt;label for="fname"&gt;First Name&lt;/label&gt;&lt;input type="text" name="fname" id="fname" /&gt;&lt;br /&gt;
-&lt;label for="lname"&gt;Last Name&lt;/label&gt;&lt;input type="text" name="lname" id="lname" /&gt;&lt;br /&gt;
-&lt;label for="phone"&gt;Telephone&lt;/label&gt;&lt;input type="text" name="phone" id="phone" /&gt;&lt;br /&gt;
-&lt;label for="email"&gt;Email&lt;/label&gt;&lt;input type="text" name="email" id="email" /&gt;&lt;br /&gt;
-&lt;input type="submit" name="Submit" value="Submit" id="Submit" /&gt;</pre>
+<pre xml:space="preserve"><code class="language-css">h1 { font-size: 2em; }
+p, label { font-size: 1em; }
+label { display:block; }
+input { font: inherit; }
+div { margin-bottom: 1rem; }</code></pre>
+				</section>
          
-            <p>The CSS component:</p>
-         
-         <pre xml:space="preserve">h1 { font-size: 2em; }
-            p, label, input { font-size: 1em; }</pre>
-         
-            <p class="working-example">Working example of this code: <a href="../../working-examples/input-resize/">Example of resizing input with CSS</a>.</p>
-         
-      </section>
-      <section class="example">
-         <h3>Radio button</h3>
-         
-            <p>This example works in IE with its text size feature. However, it doesn't scale in Firefox 2.0.</p>
-            <p>The XHTML component:</p>
-         
-         <pre xml:space="preserve">&lt;input type="radio" name="r1" value="r1" id="r1" class="geomsize" /&gt;
-&lt;input type="checkbox" name="c1" id="c1" value="c1" class="geomsize" /&gt;</pre>
-         
-            <p>The CSS component:</p>
-         
-         <pre xml:space="preserve">input.geomsize {
-width: 1.2em;
-height: 1.2em;}</pre>
-         
-            <p class="working-example">Working example of this code: <a href="../../working-examples/radio-checkbox-resize/">Example of resizing radio buttons and checkboxes with CSS</a>.</p>
-         
-      </section>
-   </section><section id="tests"><h2>Tests</h2>
-      <section class="procedure"><h3>Procedure</h3>
-         <ol>
-            <li>Enter some text into text-based form controls that receive user entered text.</li>
-            <li>Increase the text size of the content by 200%.</li>
-            <li>Check that the text in text-based form controls has increased by 200%.</li>
-         </ol>
-      </section>
-      <section class="results"><h3>Expected Results</h3>
-         <ul>
-            <li>#3 is true.</li>
-         </ul>
-      </section>
-   </section></body></html>
\ No newline at end of file
+				<p class="working-example">Working example of this code: <a href="../../working-examples/input-resize/">Example of resizing input with CSS</a>.</p>
+			</section>
+		</section>
+		<section id="tests">
+			<h2>Tests</h2>
+			<section class="procedure">
+				<h3>Procedure</h3>
+				<ol>
+					<li>Enter some text into text-based form controls that receive user entered text.</li>
+					<li>Increase the text size of the content by 200%.</li>
+					<li>Check that the text in text-based form controls has increased by 200%.</li>
+				</ol>
+			</section>
+			<section class="results">
+				<h3>Expected Results</h3>
+				<ul>
+					<li>#3 is true.</li>
+				</ul>
+			</section>
+		</section>
+	</body>
+</html>
\ No newline at end of file
diff --git a/techniques/css/C18.html b/techniques/css/C18.html
index bfafa0f7ea..6cb35c732f 100644
--- a/techniques/css/C18.html
+++ b/techniques/css/C18.html
@@ -1,57 +1,65 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using CSS margin and padding rules instead of spacer images for layout design</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Using CSS margin and padding rules instead of spacer images for layout design</h1><section class="meta"><p class="id">ID: C18</p><p class="technology">Technology: css</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
-      <p>All technologies that support CSS</p>
-   </section><section id="description"><h2>Description</h2>
-      <p>Web designers sometimes use spacer images (usually 1x1 pixel, transparent GIFs) for better control over layout, for example in tables or to indent a paragraph. However, Cascading Style Sheets (CSS) allow sufficient control over layout to replace spacer images. The CSS properties for margins and padding can be used on their own or in combination to control the layout. The margin properties ('margin-top', 'margin-right', 'margin-bottom', 'margin-left', and the shorthand 'margin') can be used on any element that is displayed as a block; they add space at the outside of an element. The padding properties ('padding-top', 'padding-right', 'padding-bottom', 'padding-left', and the shorthand 'padding') can be used on any element; they add space inside the element.</p>
-   </section><section id="examples"><h2>Examples</h2>
-      <section class="example">
-         
-            <p>The following example consists of two parts: the CSS code, which specifies a margin on all sides of the table, and padding for the table cells; and the HTML code for the table, which does not contain spacer images and is not nested inside another table.</p>
-         
-         <pre xml:space="preserve">
-              
-              table { margin: .5em; border-collapse: collapse; } 
-              td, th { padding: .4em; border: 1px solid #000; }
-            
-            ...
-            
-              &lt;table summary="Titles, authors and publication dates of books in Web development category"&gt;
-                &lt;caption&gt;Books in the category 'Web development'&lt;/caption&gt;
-                &lt;thead&gt;
-                  &lt;tr&gt;
-                    &lt;th&gt;Title&lt;/th&gt;
-                    &lt;th&gt;Author&lt;/th&gt;
-                    &lt;th&gt;Date&lt;/th&gt;
-                  &lt;/tr&gt;
-                &lt;/thead&gt;
-                &lt;tbody&gt;
-                  &lt;tr&gt;
-                    &lt;td&gt;How to Think Straight About Web Standards&lt;/td&gt;
-                    &lt;td&gt;Andrew Stanovich&lt;/td&gt;
-                    &lt;td&gt;1 April 2007&lt;/td&gt;
-                  &lt;/tr&gt;
-                &lt;/tbody&gt;
-              &lt;/table&gt;
-            
-            </pre>
-      </section>
-   </section><section id="tests"><h2>Tests</h2></section><section id="resources"><h2>Resources</h2>
-      
-         <ul>
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>Using CSS margin and padding rules instead of spacer images for layout design</title>
+		<link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+	</head>
+	<body>
+		<h1>Using <abbr title="Cascading Style Sheets">CSS</abbr> margin and padding rules instead of spacer images for layout design</h1>
+		<section class="meta">
+			<p class="id">ID: C18</p>
+			<p class="technology">Technology: css</p>
+			<p class="type">Type: Technique</p>
+		</section>
+		<section id="applicability">
+			<h2>When to Use</h2>
+      <p><abbr title="Cascading Style Sheets">CSS</abbr></p>
+		</section>
+		<section id="description">
+			<h2>Description</h2>
+      <p>Web designers sometimes use spacer images (usually 1x1 pixel, transparent GIFs) for better control over layout, for example in tables or to indent a paragraph. However, Cascading Style Sheets (CSS) allow sufficient control over layout to replace spacer images. The CSS properties for margins and padding can be used on their own or in combination to control the layout. The margin properties ('<code class="language-css">margin-top</code>', '<code class="language-css">margin-right</code>', '<code class="language-css">margin-bottom</code>', '<code class="language-css">margin-left</code>', and the shorthand '<code class="language-css">margin</code>') can be used on any element that is displayed as a block; they add space at the outside of an element. The padding properties ('<code class="language-css">padding-top</code>', '<code class="language-css">padding-right</code>', '<code class="language-css">padding-bottom</code>', '<code class="language-css">padding-left</code>', and the shorthand '<code class="language-css">padding</code>') can be used on any element; they add space inside the element.</p>
+		</section>
+		<section id="examples">
+			<h2>Examples</h2>
+			<section class="example">
+				<p>The following example consists of two parts: the CSS code, which specifies a margin on all sides of the table, and padding for the table cells; and the <abbr title="HyperText Markup Language">HTML</abbr> code for the table, which does not contain spacer images and is not nested inside another table.</p>
+				<h4>The CSS</h4>
+<pre xml:space="preserve"><code class="language-css">table { margin: .5em; border-collapse: collapse; } 
+td, th { padding: .4em; border: 1px solid #000; }</code></pre>
+          <h4>The HTML</h4>
+<pre xml:space="preserve"><code class="language-html">&lt;table&gt;
+  &lt;caption&gt;Books in the category 'Web development'&lt;/caption&gt;
+  &lt;thead&gt;
+    &lt;tr&gt;
+      &lt;th&gt;Title&lt;/th&gt;
+      &lt;th&gt;Author&lt;/th&gt;
+      &lt;th&gt;Date&lt;/th&gt;
+    &lt;/tr&gt;
+  &lt;/thead&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;td&gt;How to Think Straight About Web Standards&lt;/td&gt;
+      &lt;td&gt;Andrew Stanovich&lt;/td&gt;
+      &lt;td&gt;1 April 2007&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;</code></pre>
+      		</section>
+				</section>
+				<!-- <section id="tests">
+					<h2>Tests</h2>
+				</section> -->
+				<section id="resources">
+					<h2>Resources</h2>
+					<ul>
+						<li>
+							<a href="https://www.w3.org/TR/css-box-3/#margins">Margin properties: '<code class="language-css">margin-top</code>', '<code class="language-css">margin-right</code>', '<code class="language-css">margin-bottom</code>', '<code class="language-css">margin-left</code>', and '<code class="language-css">margin</code>' in the CSS Box Model Module Level 3 specification</a>
+						</li>
             <li>
-                  <a href="https://www.w3.org/TR/CSS2/box.html#margin-properties">Margin properties: 'margin-top', 'margin-right', 'margin-bottom', 'margin-left', and 'margin' in the CSS2 specification</a>
-               </li>
-            <li>
-                  <a href="https://www.w3.org/TR/CSS2/box.html#padding-properties">Padding properties: 'padding-top', 'padding-right', 'padding-bottom', 'padding-left', and 'padding' in the CSS2 specification</a>
-               </li>
-            <li>
-                  <a href="http://veerle-v2.duoh.com/blog/comments/a_css_styled_table_version_2/">A CSS styled table version 2</a>
-               </li>
-            <li>
-                  <a href="https://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug">IE box model bug</a>
-               </li>
-            <li>
-                  <a href="http://www.456bereastreet.com/archive/200612/internet_explorer_and_the_css_box_model/">Internet Explorer and the CSS box model </a>
-               </li>
+							<a href="https://www.w3.org/TR/css-box-3/#paddings">Padding properties: '<code class="language-css">padding-top</code>', '<code class="language-css">padding-right</code>', '<code class="language-css">padding-bottom</code>', '<code class="language-css">padding-left</code>', and '<code class="language-css">padding</code>' in the CSS Box Model Module Level 3 specification</a>
+						</li>
          </ul>
-      
-   </section></body></html>
\ No newline at end of file
+				</section>
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/default.min.css"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script> <script>hljs.highlightAll();</script>
+</body>
+</html>
diff --git a/techniques/css/C19.html b/techniques/css/C19.html
index cd004d4621..641c79d3e0 100644
--- a/techniques/css/C19.html
+++ b/techniques/css/C19.html
@@ -1,37 +1,54 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Specifying alignment either to the left or right in CSS</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Specifying alignment either to the left OR right in CSS</h1><section class="meta"><p class="id">ID: C19</p><p class="technology">Technology: css</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
-      <p>All technologies that support CSS</p>
-   </section><section id="description"><h2>Description</h2>
-      <p>This technique describes how to align blocks of text either left or right by setting the CSS text-align property.</p>
-   </section><section id="examples"><h2>Examples</h2>
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head>
+	<title>Specifying alignment either to the left or right in CSS</title>
+	<link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+</head>
+<body>
+	<h1>Specifying alignment either to the left or right in CSS</h1>
+	<section class="meta">
+		<p class="id">ID: C19</p>
+		<p class="technology">Technology: css</p>
+		<p class="type">Type: Technique</p>
+	</section>
+	<section id="applicability">
+		<h2>When to Use</h2>
+		<p><abbr title="Cascading Style Sheets">CSS</abbr></p>
+	</section>
+	<section id="description">
+		<h2>Description</h2>
+		<p>This technique describes how to align blocks of text either left or right by setting the CSS text-align property.</p>
+   </section>
+	 <section id="examples">
+		<h2>Examples</h2>
+		<section class="example">
+			<h3>Aligning text to the left</h3>
+			<p>In the following example, text is aligned left. In the style sheet, define the class:</p>
+<pre xml:space="preserve"><code class="language-css">p.left {text-align: left}</code></pre>
+<p>In the content call the up the class.</p>
+<pre xml:space="preserve"><code class="language-html">&lt;p class="left"&gt; Lorem ipsum dolor sit ...&lt;/p&gt;</code></pre>
+		</section>
       <section class="example">
-         
-            <p>In the following example, text is aligned left. In the style sheet, define the class:</p>
-         
-         <pre xml:space="preserve">p.left {text-align: left}</pre>
-         
-            <p>In the content call the up the class.</p>
-         
-         <pre xml:space="preserve">&lt;p class="left"&gt; Lorem ipsum dolor sit …&lt;/p&gt;</pre>
-      </section> to the left OR right in CSS
-      <section class="example">
-         
-            <p>In the following example, text is aligned right.</p>
-         
-         <pre xml:space="preserve">p.right {text-align: right}</pre>
-         
-            <p>In the content call the up the class.</p>
-         
-         <pre xml:space="preserve">&lt;p class="right"&gt; Lorem ipsum dolor sit …&lt;/p&gt;</pre>
+				<h3>Aligning text to the right</h3>
+				<p>In the following example, text is aligned right.</p> 
+<pre xml:space="preserve"><code class="language-css">p.right {text-align: right}</code></pre>
+<p>In the content call the up the class.</p>
+<pre xml:space="preserve"><code class="language-html">&lt;p class="right"&gt; Lorem ipsum dolor sit ...&lt;/p&gt;</code></pre>
       </section>
-   </section><section id="tests"><h2>Tests</h2>
-      <section class="procedure"><h3>Procedure</h3>
-         <ol>
-            <li>Check that the text is aligned either left or right.</li>
-         </ol>
+		</section>
+		<section id="tests">
+			<h2>Tests</h2>
+      <section class="procedure">
+				<h3>Procedure</h3>
+				<ol>
+					<li>Check that the text is aligned either left or right.</li>
+				</ol>
       </section>
-      <section class="results"><h3>Expected Results</h3>
-         <ul>
-            <li>Check #1 is true.</li>
-         </ul>
+      <section class="results">
+				<h3>Expected Results</h3>
+				<ul>
+					<li>Check #1 is true.</li>
+				</ul>
       </section>
-   </section></body></html>
+		</section>
+	</body>
+</html>
diff --git a/techniques/css/C20.html b/techniques/css/C20.html
index 42c9ad7b8b..fd971ea5d2 100644
--- a/techniques/css/C20.html
+++ b/techniques/css/C20.html
@@ -1,38 +1,44 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using relative measurements to set column widths so that lines can average 80 characters or less when the browser is resized</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Using relative measurements to set column widths so that lines can average 80 characters or less when the browser is resized</h1><section class="meta"><p class="id">ID: C20</p><p class="technology">Technology: css</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
-      <p>CSS</p>
-   </section><section id="description"><h2>Description</h2>
-      <p>The purpose of this technique is to ensure that CSS is used in a way that allows users to view content in such a way that line length can average 80 characters or less. This makes it possible for users with certain reading or vision disabilities that have trouble keeping their place when reading long lines of text to view and interact with the content more efficiently. This technique also allows for column width to grow wider as font sizes increase, which will reduce the possibility of clipping as the text size increases..</p>
-      <p>
-            Note that this technique does not require authors to use CSS to limit the width of lines of text to less than 80 characters in the default view. Rather, the recommendation to use relative measurements in CSS layouts helps to ensure that authors do not set column widths in such a way that makes it impossible for users to view content with line lengths of 80 characters or less. </p>
-   </section><section id="examples"><h2>Examples</h2>
-      <section class="example">
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head>
+	<title>Using relative measurements to set column widths so that lines can average 80 characters or less when the browser is resized</title>
+	<link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+</head>
+<body>
+	<h1>Using relative measurements to set column widths so that lines can average 80 characters or less when the browser is resized</h1>
+	<section class="meta">
+		<p class="id">ID: C20</p>
+		<p class="technology">Technology: css</p>
+		<p class="type">Type: Technique</p>
+	</section>
+	<section id="applicability">
+		<h2>When to Use</h2>
+		<p><abbr title="Cascading Style Sheets">CSS</abbr></p>
+	</section>
+	<section id="description">
+		<h2>Description</h2>
+		<p>The purpose of this technique is to ensure that CSS is used in a way that allows users to view content in such a way that line length can average 80 characters or less. This makes it possible for users with certain reading or vision disabilities that have trouble keeping their place when reading long lines of text to view and interact with the content more efficiently. This technique also allows for column width to grow wider as font sizes increase, which will reduce the possibility of clipping as the text size increases.</p>
+		<p>Note that this technique does not require authors to use CSS to limit the width of lines of text to less than 80 characters in the default view. Rather, the recommendation to use relative measurements in CSS layouts helps to ensure that authors do not set column widths in such a way that makes it impossible for users to view content with line lengths of 80 characters or less.</p>
+   </section>
+	 <section id="examples">
+		<h2>Examples</h2>
+		<section class="example">
+			<p>In this example the <code class="language-html">div</code> width is set in ems in the stylesheet.</p>
+<pre xml:space="preserve"><code class="language-css">#main-content {max-width: 70em}</code></pre>
+<p>And the text block would be placed inside the <code class="language-html">div</code> in the content</p>
          
-            <p>In this example the <code class="el">div</code> width is set in ems in the stylesheet.</p>
-            <div class="note">
-               <p>The CSS property max-width is not supported in versions of Internet Explorer 6 and below.</p>
-            </div>
-         
-         <pre xml:space="preserve">#main_content {max-width: 70em}</pre>
-         
-            <p>And the text block would be placed inside the <code class="el">div</code> in the content</p>
-         
-         <pre xml:space="preserve">
-&lt;div id="main_content"&gt; 
+<pre xml:space="preserve"><code class="language-html">&lt;div id="main-content"&gt; 
   &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing ...&lt;/p&gt;
-&lt;/div&gt;</pre>
-      </section>
-      <section class="example">
-         
-            <p>In this example the <code class="el">div</code> width is set in percent in the stylesheet</p>
-         
-         <pre xml:space="preserve">#main_content {width: 90%}</pre>
+&lt;/div&gt;</code></pre>
+		</section>
+		<section class="example">
+			<p>In this example the <code class="language-html">div</code> width is set in percent in the stylesheet</p>
          
-            <p>And the text block would be placed inside the <code class="el">div</code> in the content</p>
+<pre xml:space="preserve"><code class="language-css">#main-content {width: 90%}</code></pre>
+        <p>And the text block would be placed inside the <code class="language-html">div</code> in the content</p>
          
-         <pre xml:space="preserve">
-&lt;div id="main_content"&gt; 
+<pre xml:space="preserve"><code class="language-html">&lt;div id="main-content"&gt; 
   &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing ...&lt;/p&gt;
-&lt;/div&gt;</pre>
+&lt;/div&gt;</code></pre>
       </section>
    </section><section id="tests"><h2>Tests</h2>
       <section class="procedure"><h3>Procedure</h3>
@@ -41,32 +47,26 @@
             <li>Check to see that line length can be set to 80 characters or less by resizing the browser window.</li>
          </ol>
       </section>
-      <section class="results"><h3>Expected Results</h3>
-         <ul>
-            <li>Checks #1 and #2 are true.</li>
-         </ul>
+      <section class="results">
+				<h3>Expected Results</h3>
+				<ul>
+					<li>Checks #1 and #2 are true.</li>
+				</ul>
       </section>
-   </section><section id="resources"><h2>Resources</h2>
-      
-         <ul>
-            <li> 
-                  <a href="https://www.w3.org/TR/CSS2/box.html">CSS 2 Box Model</a> 
-               </li>
-            <li> 
-                  <a href="https://www.w3.org/TR/CSS2/visuren.html">CSS 2 Visual formatting Model</a> 
-               </li>
-            <li> 
-                  <a href="https://www.w3.org/TR/CSS2/visudet.html">CSS 2 Visual formatting Model Details</a> 
-               </li>
-            <li> 
-                  <a href="http://www.456bereastreet.com/archive/200504/about_fluid_and_fixed_width_layouts/">About fluid and fixed width layouts</a> 
-               </li>
-            <li> 
-                  <a href="http://cookiecrook.com/AIR/2003/train/accessiblecss.php">Accessible CSS</a> 
-               </li>
-            <li> 
-                  <a href="http://maxdesign.com.au/articles/em/">Ideal line length for content</a> 
-               </li>
-         </ul>
-      
-   </section></body></html>
\ No newline at end of file
+		</section>
+		<section id="resources">
+			<h2>Resources</h2>
+			<ul>
+				<li>
+					<a href="https://www.w3.org/TR/css-box-3/">CSS Box Model Module Level 3</a> 
+				</li>
+				<li>
+					<a href="https://www.smashingmagazine.com/2009/06/fixed-vs-fluid-vs-elastic-layout-whats-the-right-one-for-you/">Fixed, fluid and elastic layouts</a>
+				</li>
+				<li>
+					<a href="http://webtypography.net/2.1.2">Choose a comfortable measure - The Elements of Typographic Style Applied to the Web</a>
+				</li>
+			</ul>
+		</section>
+	</body>
+</html>
diff --git a/techniques/css/C21.html b/techniques/css/C21.html
index 48ab1f4fa5..65bef956ec 100644
--- a/techniques/css/C21.html
+++ b/techniques/css/C21.html
@@ -1,48 +1,59 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Specifying line spacing in CSS</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Specifying line spacing in CSS</h1><section class="meta"><p class="id">ID: C21</p><p class="technology">Technology: css</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
-      <p>All technologies that support CSS</p>
-   </section><section id="description"><h2>Description</h2>
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>Specifying line spacing in CSS</title>
+		<link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+	</head>
+	<body>
+		<h1>Specifying line spacing in <abbr title="Cascading Style Sheets">CSS</abbr></h1>
+		<section class="meta">
+			<p class="id">ID: C21</p>
+			<p class="technology">Technology: css</p>
+			<p class="type">Type: Technique</p>
+		</section>
+		<section id="applicability">
+			<h2>When to Use</h2>
+      <p>CSS</p>
+		</section>
+		<section id="description">
+			<h2>Description</h2>
       <p>Many people with cognitive disabilities have trouble tracking lines of text when a block of text is single spaced. Providing spacing between 1.5 to 2 allows them to start a new line more easily once they have finished the previous one.</p>
-   </section><section id="examples"><h2>Examples</h2>
-      <section class="example">
-         
-            <p>Setting the element to 1.5 line height. In the style sheet set the characteristics of the element.</p>
-         
-         <pre xml:space="preserve">p { line-height: 150%; }</pre>
-         
-            <p>In the content the element will now be 1.5 line height, throughout the document.</p>
-         
-         <pre xml:space="preserve">&lt;p&gt; Lorem ipsum dolor sit …  &lt;/p&gt;</pre>
-      </section>
-      <section class="example">
-         
-            <p>Setting a class to 1.5 line height (space-and-a-half line spacing). In the stylesheet, define the class.</p>
-         
-         <pre xml:space="preserve">p.tall {line-height:150%}</pre>
-         
-            <p>In the content, call up the class = "left".</p>
-         
-         <pre xml:space="preserve">&lt;p class="tall"&gt; Lorem ipsum dolor sit …  &lt;/p&gt;</pre>
-      </section>
-      <section class="example">
-         
-            <p>Setting a class to double-spaced line height. In the stylesheet, define the class.</p>
-         
-         <pre xml:space="preserve">p.tall {line-height:200%}</pre>
-         
-            <p>In the content, call up the class = "right".</p>
-         
-         <pre xml:space="preserve">&lt;p class="tall"&gt; Lorem ipsum dolor sit …  &lt;/p&gt;</pre>
-      </section>
-   </section><section id="tests"><h2>Tests</h2>
-      <section class="procedure"><h3>Procedure</h3>
-         <ol>
-            <li>Open content in a browser.</li>
+		</section>
+		<section id="examples">
+			<h2>Examples</h2>
+			<section class="example">
+				<h3>Setting the element to 1.5 line height</h3>
+				<p>In the style sheet set the characteristics of the element.</p>
+<pre xml:space="preserve"><code class="language-css">body { line-height: 1.5; }</code></pre>
+				<p>This sets the line height of everything in the body of the document to 1.5.</p>
+      	</section>
+			</section>
+			<section id="tests">
+				<h2>Tests</h2>
+				<section class="procedure">
+					<h3>Procedure</h3>
+					<ol>
+						<li>Open content in a browser.</li>
             <li>Check that the spacing between lines in blocks of text is between 1.5 and 2.</li>
-         </ol>
-      </section>
-      <section class="results"><h3>Expected Results</h3>
-         <ul>
-            <li>Test Procedure #2 is true.</li>
-         </ul>
-      </section>
-   </section></body></html>
\ No newline at end of file
+					</ol>
+				</section>
+				<section class="results">
+					<h3>Expected Results</h3>
+					<ul>
+						<li>Check #2 is true.</li>
+					</ul>
+				</section>
+			</section>
+			<section id="resources">
+				<h2>Resources</h2>
+				<ul>
+					<li>
+						<a href="https://www.w3.org/TR/css-inline-3/#line-height-property">CSS3 Line spacing: the <code class="language-css">line-height</code> property</a>.
+					</li>
+					<li>
+						<a href="http://meyerweb.com/eric/thoughts/2006/02/08/unitless-line-heights/">Eric Meyer - Unitless line heights</a>
+					</li>
+				</ul>
+			</section>
+		</body>
+	</html>
\ No newline at end of file
diff --git a/techniques/css/C22.html b/techniques/css/C22.html
index ca413e4a46..2bc667de8b 100644
--- a/techniques/css/C22.html
+++ b/techniques/css/C22.html
@@ -1,6 +1,22 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using CSS to control visual presentation of text</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Using CSS to control visual presentation of text</h1><section class="meta"><p class="id">ID: C22</p><p class="technology">Technology: css</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>Using CSS to control visual presentation of text</title>
+		<link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+	</head>
+	<body>
+		<h1>Using <abbr title="Cascading Style Sheets">CSS</abbr> to control visual presentation of text</h1>
+		<section class="meta">
+			<p class="id">ID: C22</p>
+			<p class="technology">Technology: css</p>
+			<p class="type">Type: Technique</p>
+		</section>
+		<section id="applicability">
+			<h2>When to Use</h2>
       <p>All technologies that support CSS.</p>
-   </section><section id="description"><h2>Description</h2>
+		</section>
+		<section id="description">
+			<h2>Description</h2>
       <p>The objective of this technique is to demonstrate how CSS can be used to control the visual presentation of text. This will allow users to modify, via the user agent, the visual characteristics of the text to meet their requirement. The text characteristics include aspects such as size, color, font family and relative placement.</p>
       <p>CSS benefits accessibility primarily by separating document structure from presentation. Style sheets were designed to allow precise control - outside of markup - of character spacing, text alignment, object position on the page, audio and speech output, font characteristics, etc. By separating style from markup, authors can simplify and clean up the markup in their content, making it more accessible at the same time.</p>
       <p>Text within images has several accessibility problems, including the inability to:</p>
@@ -12,220 +28,205 @@
       <p>It is better to use real text for the text portion of these elements, and a combination of semantic markup and style sheets to create the appropriate visual presentation. For this to work effectively, choose fonts that are likely to be available on the user's system and define fallback fonts for users who may not have the first font that is specified. Newer machines and user agents often smooth or anti-alias all text, so it is likely that your headings and buttons will look nice on these systems without resorting to images of text.</p>
       <p>The following CSS properties are useful to style text and avoid the need for text in images:</p>
       <ul>
-         <li>The font-family property is used to display the code aspect in a monospace font family.</li>
-         <li>The text-align property is used to display the text to the right of the viewport.</li>
-         <li>The font-size property is used to display the text in a larger size.</li>
-         <li>The font-style property is used to display text in italics.</li>
-         <li>The font-weight property is used to set how thick or thin characters in text should be displayed.</li>
-         <li>The color property is used to display the color of text or text containers.</li>
-         <li>The line-height property is used to display the line height for a block of text.</li>
-         <li>The text-transform property is used to control the case of letters in text.</li>
-         <li>The letter-spacing property is used to control the spacing of letters in text.</li>
-         <li>The background-image property can be used to display text on a non-text background.</li>
-         <li>The first-line pseudo class can be used to modify the presentation of the first line in a block of text.</li>
-         <li>The :first-letter pseudo class can be used to modify the presentation of the first letter in a block of text.</li>
-         <li>The :before and :after pseudo classes can be used to insert decorative non-text content before or after blocks of text.</li>
+         <li>The <code class="language-css">font-family</code> property is used to display the code aspect in a monospace font family.</li>
+         <li>The <code class="language-css">text-align</code> property is used to display the text to the right of the viewport.</li>
+         <li>The <code class="language-css">font-size</code> property is used to display the text in a larger size.</li>
+         <li>The <code class="language-css">font-style</code> property is used to display text in italics.</li>
+         <li>The <code class="language-css">font-weight</code> property is used to set how thick or thin characters in text should be displayed.</li>
+         <li>The <code class="language-css">color</code> property is used to display the color of text or text containers.</li>
+         <li>The <code class="language-css">line-height</code> property is used to display the line height for a block of text.</li>
+         <li>The <code class="language-css">text-transform</code> property is used to control the case of letters in text.</li>
+         <li>The <code class="language-css">letter-spacing</code> property is used to control the spacing of letters in text.</li>
+         <li>The <code class="language-css">background-image</code> property can be used to display text on a non-text background.</li>
+         <li>The <code class="language-css">::first-line</code> pseudo-element can be used to modify the presentation of the first line in a block of text.</li>
+         <li>The <code class="language-css">::first-letter</code> pseudo-element can be used to modify the presentation of the first letter in a block of text.</li>
+         <li>The <code class="language-css">::before</code> and <code class="language-css">::after</code> pseudo-elements can be used to insert decorative non-text content before or after blocks of text.</li>
       </ul>
-   </section><section id="examples"><h2>Examples</h2>
-      <section class="example">
-         <h3>Using CSS font-family to control the font family for text</h3>
-         
-            <p>The XHTML component:</p>
-         
-         <pre xml:space="preserve">
-&lt;p&gt;The Javascript method to convert a string to uppercase is &lt;code&gt;toUpperCase()&lt;/code&gt;.&lt;/p&gt;
-</pre>
-         
-            <p>The CSS component:</p>
-         
-         <pre xml:space="preserve">
-code { font-family:"Courier New", Courier, monospace }
-</pre>
+		</section>
+		<section id="examples">
+			<h2>Examples</h2>
+			<section class="example">
+				<h3>Using CSS font-family to control the font family for text</h3>
+        <section id="the-html">
+				<h4>The HTML component</h4>
+         <pre xml:space="preserve"><code class="language-html">&lt;p&gt;The JavaScript method to convert a string to uppercase is &lt;code&gt;toUpperCase()&lt;/code&gt;.&lt;/p&gt;</code></pre>
+        </section>
+        <section id="the-css">
+				<h4>The CSS component</h4>
+<pre xml:space="preserve"><code class="language-css">code { font-family:"Courier New", Courier, monospace }</code></pre>
+        </section>
       </section>
       <section class="example">
-         <h3>Using CSS text-align to control the placement (alignment) of text</h3>
-         
-            <p>The XHTML component:</p>
-         
-         <pre xml:space="preserve">
-&lt;p class="right"&gt;This text should be to the right of the viewport.&lt;/p&gt;  
-</pre>
-         
-            <p>The CSS component:</p>
-         
-         <pre xml:space="preserve">
-.right { text-align: right; }
-</pre>
+				<h3>Using CSS text-align to control the placement (alignment) of text</h3>
+        <section id="the-html2">
+          <h4>The HTML component</h4>
+  <pre xml:space="preserve"><code class="language-html">&lt;p class="right"&gt;This text should be to the right of the viewport.&lt;/p&gt;</code></pre>
+        </section>
+        <section id="the=css2">
+          <h4>The CSS component</h4>
+  <pre xml:space="preserve"><code class="language-css">.right { text-align: right; }</code></pre>
+        </section>
       </section>
       <section class="example">
-         <h3> Using CSS font-size to control the size of text</h3>
-         
-            <p>The XHTML component:</p>
-         
-         <pre xml:space="preserve">
-&lt;p&gt;09 &lt;strong class="largersize"&gt;March&lt;/strong&gt; 2008&lt;/p&gt;  
-</pre>
-         
-            <p>The CSS component:</p>
-         
-         <pre xml:space="preserve">
-strong.largersize { font-size: 1.5em; }
+				<h3>Using CSS font-size to control the size of text</h3>
+        <section id="the-html3">
+          <h4>The HTML component</h4>
+  <pre xml:space="preserve"><code class="language-html">&lt;p&gt;09 &lt;strong class="largersize"&gt;March&lt;/strong&gt; 2008&lt;/p&gt;</code></pre>
+          </section>
+          <section id="the-css3">
+            <h4>The CSS component</h4>
+<pre xml:space="preserve"><code class="language-css">strong.largersize { font-size: 1.5em; }</code>
 </pre>
+          </section>
+      	</section>
+				<section class="example">
+					<h3>Using CSS color to control the color of text</h3>
+					<div class="note">
+						<p>The style used in this example is not used to convey information, structure or relationships.</p>
+          </div>
+          <section id="the-html4">
+            <h4>The HTML component</h4>
+<pre xml:space="preserve"><code class="language-html">&lt;p&gt;09 &lt;em class="highlight"&gt;March&lt;/em&gt; 2008&lt;/p&gt;</code></pre>
+          </section>
+          <section id="the-css4">
+            <h4>The CSS component</h4>
+<pre xml:space="preserve"><code class="language-css">.highlight{ color: red; }</code></pre>
+          </section>
       </section>
-      <section class="example">
-         <h3>Using CSS color to control the color of text</h3>
-         
-            <div class="note">
-               <p>The style used in this example is not used to convey information, structure or relationships.</p>
-            </div>
-            <p>The XHTML component:</p>
-         
-         <pre xml:space="preserve">
-&lt;p&gt;09 &lt;em class="highlight"&gt;March&lt;/em&gt; 2008&lt;/p&gt;  
-</pre>
-         
-            <p>The CSS component:</p>
-         
-         <pre xml:space="preserve">
-.highlight{ color: red; }
-</pre>
-      </section>
-      <section class="example">
+			<section class="example">
          <h3>Using CSS font-style to italicize text</h3>
          
             <div class="note">
                <p>The style used in this example is not used to convey information, structure or relationships.</p>
             </div>
-            <p>The XHTML component:</p>
-         
-         <pre xml:space="preserve">
-&lt;p&gt;The article is available in the &lt;a href="http://www.example.com" class="featuredsite"&gt;Endocrinology 
-Blog&lt;/a&gt;.&lt;/p&gt;
-</pre>
-         
-            <p>The CSS component:</p>
-         
-         <pre xml:space="preserve">
-.featuredsite{ font-style:italic; }
-</pre>
+            <section id="the-html5">
+              <h4>The HTML component</h4>
+         
+<pre xml:space="preserve"><code class="language-html">&lt;p&gt;The article is available in the
+  &lt;a href="https://www.example.com" class="featuredsite"&gt;Endocrinology Blog&lt;/a&gt;.
+&lt;/p&gt;</code></pre>
+            </section>
+            <section id="the-css5">
+              <h4>The CSS component</h4>
+         
+<pre xml:space="preserve"><code class="language-css">.featuredsite{ font-style:italic; }</code></pre>
+            </section>
       </section>
       <section class="example">
-         <h3>Using CSS font-weight to control the font weight of the text</h3>
-         
-            <div class="note">
-               <p>The style used in this example is not used to convey information, structure or relationships.</p>
-            </div>
-            <p>The XHTML component:</p>
-         
-         <pre xml:space="preserve">
-&lt;p&gt;This deal is available &lt;span class="highlight"&gt;now!&lt;/span&gt;&lt;/p&gt; 
-</pre>
-         
-            <p>The CSS component:</p>
-         
-         <pre xml:space="preserve">
-.highlight { font-weight:bold; color:#990000; }
-</pre>
+				<h3>Using CSS font-weight to control the font weight of the text</h3>
+				<div class="note">
+					<p>The style used in this example is not used to convey information, structure or relationships.</p>
+				</div>
+        <section id="the-html6">
+          <h4>The HTML component</h4> 
+<pre xml:space="preserve"><code class="language-html">&lt;p&gt;This deal is available &lt;span class="highlight"&gt;now!&lt;/span&gt;&lt;/p&gt;</code></pre>
+        </section>
+        <section id="the-css6">
+            <h4>The CSS component</h4>
+<pre xml:space="preserve"><code class="language-css">.highlight { font-weight:bold; color:#990000; }</code></pre>
+        </section>
       </section>
       <section class="example">
-         <h3>Using CSS text-transform to control the case of text</h3>
-         
-            <div class="note">
-               <p>The style used in this example is not used to convey information, structure or relationships.</p>
-            </div>
-            <p>The XHTML component:</p>
-         
-         <pre xml:space="preserve">
-&lt;p&gt;09 &lt;span class="caps"&gt;March&lt;/span&gt; 2008&lt;/p&gt;  
-</pre>
-         
-            <p>The CSS component:</p>
-         
-         <pre xml:space="preserve">
-.caps { text-transform:uppercase; }
-</pre>
+				<h3>Using CSS text-transform to control the case of text</h3>
+				<div class="note">
+					<p>The style used in this example is not used to convey information, structure or relationships.</p>
+				</div>
+        <section id="the-html7">
+          <h4>The HTML component</h4> 
+<pre xml:space="preserve"><code class="language-html">&lt;p&gt;09 &lt;span class="caps"&gt;March&lt;/span&gt; 2008&lt;/p&gt;</code></pre>
+        </section>
+         <section id="the-css7">
+          <h4>The CSS component</h4>
+<pre xml:space="preserve"><code class="language-css">.caps { text-transform:uppercase; }</code></pre>
+          </section>
       </section>
       <section class="example">
-         <h3>Using CSS line-height to control spacing between lines of text</h3>
-         
-            <p>The CSS line-height property is used to display the line height for the paragraph at twice the height of the font.</p>
-            <p>The XHTML component:</p>
-         
-         <pre xml:space="preserve">
-&lt;p&gt;Concern for man and his fate must always form the&lt;br /&gt;  
-chief interest of all technical endeavors. &lt;br /&gt;
-Never forget this in the  midst of your diagrams and equations. &lt;/p&gt;
-</pre>
-         
-            <p>The CSS component:</p>
-         
-         <pre xml:space="preserve">
-p { line-height:2em; }
-</pre>
-         
-            <p>The CSS line-height property is used to display the line height for the text at less than the height of the font. The second line of text is positioned after the first line of text and visually appears as though the text is part of the first line but dropped a little.</p>
-            <p>The XHTML component:</p>
-         
-         <pre xml:space="preserve">
-&lt;h1 class="overlap"&gt;&lt;span class="upper"&gt;News&lt;/span&gt;&lt;br /&gt;
-&lt;span class="byline"&gt;today&lt;/span&gt;&lt;/h1&gt;
-</pre>
-         
-            <p>The CSS component:</p>
-         
-         <pre xml:space="preserve">
-.overlap { line-height:0.2em;  }
+				<h3>Using CSS <code class="language-css">line-height</code> to control spacing between lines of text</h3>
+         <p>The CSS <code class="language-css">line-height</code> property is used to display the line height for the paragraph at twice the height of the font.</p>
+         <section id="the-html8">
+          <h4>The HTML component</h4>
+         
+<pre xml:space="preserve"><code class="language-html">&lt;p&gt;Concern for man and his fate must always form the chief interest of all technical 
+endeavors. Never forget this in the  midst of your diagrams and equations.&lt;/p&gt;</code></pre>
+        </section>
+        <section id="the-css8">
+          
+          <h4>The CSS component</h4>
+         
+          <pre xml:space="preserve"><code class="language-css">p { line-height:2; }</code></pre>
+        </section>
+
+<p>The CSS <code class="language-css">line-height</code> property is used to display the line height for the text at less than the height of the font. The second line of text is positioned after the first line of text and visually appears as though the text is part of the first line but dropped a little.</p>
+          <section id="the-html9">
+            <h4>The HTML component</h4>
+         
+<pre xml:space="preserve"><code class="language-html">&lt;h1 class="overlap"&gt;&lt;span class="upper"&gt;News&lt;/span&gt;
+  &lt;span class="byline"&gt;today&lt;/span&gt;
+&lt;/h1&gt;</code></pre>
+            </section>
+            <section id="the-css9">
+              <h4>The CSS component</h4>
+         
+<pre xml:space="preserve"><code class="language-css">.overlap { line-height:0.2;}
 .upper { text-transform:uppercase; }
-.byline { color:red; font-style:italic; font-weight:bold; padding-left:3em; }
-</pre>
-      </section>
+.byline {
+  color:red;
+  font-style:italic;
+  font-weight:bold;
+  padding-left:3em;
+}</code></pre>
+              </section>
+        </section>
       <section class="example">
-         <h3>Using CSS letter-spacing to space text</h3>
-         
-            <p>The CSS letter-spacing property is used to display the letters farther apart in the heading.</p>
-            <p>The XHTML component:</p>
-         
-         <pre xml:space="preserve">
-&lt;h1 class="overlap"&gt;&lt;span class="upper"&gt;News&lt;/span&gt;&lt;br /&gt;
-&lt;span class="byline"&gt;today&lt;/span&gt;&lt;/h1&gt;
-</pre>
-         
-            <p>The CSS component:</p>
-         
-         <pre xml:space="preserve">
-.overlap { line-height:0.2em;  }
+				<h3>Using CSS <code class="language-css">letter-spacing</code> to space text</h3> 
+        <p>The CSS <code class="language-css">letter-spacing</code> property is used to display the letters farther apart in the heading.</p>
+        <section id="the-html10">
+          <h4>The HTML component</h4> 
+<pre xml:space="preserve"><code class="language-html">&lt;h1 class="overlap"&gt;&lt;span class="upper"&gt;News&lt;/span&gt;&lt;br&gt;
+  &lt;span class="byline"&gt;today&lt;/span&gt;
+&lt;/h1&gt;</code></pre>
+        </section>
+        <section id="the-css10">
+          <h4>The CSS component</h4> 
+<pre xml:space="preserve"><code class="language-css">.overlap { line-height:0.2em; }
 .upper { text-transform:uppercase; }
-.byline { color:red; font-style:italic; font-weight:bold; padding-left:3em; letter-spacing:-0.1em; }
-</pre>
-         
-            <p>The CSS letter-spacing property is used to display the letters closer together in the second line of text.</p>
-            <p>The XHTML component:</p>
+.byline {
+  color:red;
+  font-style:italic;
+  font-weight:bold;
+  padding-left:3em;
+  letter-spacing:-0.1em;
+}</code></pre>
+          </section>
          
-         <pre xml:space="preserve">
-&lt;h1 class="upper2"&gt;News&lt;/h1&gt;
-</pre>
+        <p>The CSS <code class="language-css">letter-spacing</code> property is used to display the letters closer together in the second line of text.</p>
+        <section id="the-html11">
+        
+          <h4>The HTML component</h4>
          
-            <p>The CSS component:</p>
+<pre xml:space="preserve"><code class="language-html">&lt;h1 class="upper2"&gt;News&lt;/h1&gt;</code></pre>
+        </section>
+        <section id="the-css11">
+            <h4>The CSS component</h4>
          
-         <pre xml:space="preserve">
-.upper2 { text-transform:uppercase; letter-spacing:1em; }
-</pre>
+<pre xml:space="preserve"><code class="language-css">.upper2 { text-transform:uppercase; letter-spacing:1em; }</code></pre>
+        </section> 
       </section>
       <section class="example">
-         <h3>Using CSS background-image to layer text and images</h3>
-         
-            <p>The CSS font-style property is used to display the textual component of a banner and background-image property is used to display a picture behind the text.</p>
-            <p>The XHTML component:</p>
-         
-         <pre xml:space="preserve">
-&lt;div id="banner"&gt;&lt;span id="bannerstyle1"&gt;Welcome&lt;/span&gt; 
-&lt;span id="bannerstyle2"&gt;to your local city council&lt;/span&gt;&lt;/div&gt;
-</pre>
-         
-            <p>The CSS component:</p>
+         <h3>Using CSS <code class="language-css">background-image</code> to layer text and images</h3>
          
-         <pre xml:space="preserve">
-#banner { 
+				 <p>The CSS <code class="language-css">font-style</code> property is used to display the textual component of a banner and <code class="language-css">background-image</code> property is used to display a picture behind the text.</p>
+         <section id="the-html12">
+            <h4>The HTML component</h4>
+
+<pre xml:space="preserve"><code class="language-html">&lt;div id="banner"&gt;&lt;span id="bannerstyle1"&gt;Welcome&lt;/span&gt; 
+  &lt;span id="bannerstyle2"&gt;to your local city council&lt;/span&gt;
+&lt;/div&gt;</code></pre>
+          </section>
+          <section id="the-css12">
+            <h4>The CSS component</h4>
+         
+<pre xml:space="preserve"><code class="language-css">#banner { 
   color:white; 
   background-image:url(banner-bg.gif); 
   background-repeat:no-repeat; 
@@ -244,71 +245,97 @@ <h3>Using CSS background-image to layer text and images</h3>
   font-weight:bold; 
   letter-spacing:-0.1em;
   font-size:1.5em; 
-}</pre>
+}</code></pre>
+          </section>
       </section>
       <section class="example">
-         <h3>Using CSS first-line to control the presentation of the first line of text</h3>
+         <h3>Using CSS <code class="language-css">::first-line</code> to control the presentation of the first line of text</h3>
          
-            <p>The CSS :first-line pseudo class is used to display the first line of text in a larger, red font.</p>
-            <p>The XHTML component:</p>
-         
-         <pre xml:space="preserve">
-&lt;p class="startline"&gt;Once upon a time...&lt;br /&gt;
-...in a land far, far away...  &lt;/p&gt;  
-</pre>
+            <p>The CSS <code class="language-css">::first-line</code> pseudo-element is used to display the first line of text in a larger, red font.</p>
+
+          <section id="the-html13">
+            <h4>The HTML component</h4>
          
-            <p>The CSS component:</p>
+<pre xml:space="preserve"><code class="language-html">&lt;p class="startline"&gt;Once upon a time...&lt;br /&gt;
+  ...in a land far, far away...&lt;/p&gt;</code></pre>
+          </section>
+          <section id="the-css13">
+            <h4>The CSS component</h4>
          
-         <pre xml:space="preserve">
-.startline:first-line { font-size:2em; color:#990000; }
-</pre>
+<pre xml:space="preserve"><code class="language-css">.startline::first-line { font-size:2em; color:#990000; }</code></pre>
+          </section>
       </section>
       <section class="example">
-         <h3> Using CSS first-letter to control the presentation of the first letter of text</h3>
-         
-            <p>The CSS :first-letter pseudo class is used to display the first letter in a larger font size, red and vertically aligned in the middle.</p>
-            <p>The XHTML component:</p>
+         <h3>Using CSS <code class="language-css">::first-letter</code> to control the presentation of the first letter of text</h3>
          
-         <pre xml:space="preserve">
-&lt;p class="startletter"&gt;Once upon a time...&lt;/p&gt;  
-</pre>
+            <p>The CSS <code class="language-css">::first-letter</code> pseudo-element is used to display the first letter in a larger font size, red and vertically aligned in the middle.</p>
+
+          <section id="the-html14">
+            <h4>The HTML component</h4>
          
-            <p>The CSS component:</p>
+<pre xml:space="preserve"><code class="language-html">&lt;p class="startletter"&gt;Once upon a time...&lt;/p&gt;</code></pre>
+          </section>
+          <section id="the-css14">
+            <h4>The CSS component</h4>
          
-         <pre xml:space="preserve">
-.startletter:first-letter { font-size:2em; color:#990000; vertical-align:middle; }
-</pre>
+<pre xml:space="preserve"><code class="language-css">.startletter::first-letter { font-size:2em; color:#990000; vertical-align:middle; }</code></pre>
+          </section>
       </section>
-   </section><section id="tests"><h2>Tests</h2>
-      <section class="procedure"><h3>Procedure</h3>
-         <ol>
-            <li>Check whether CSS properties were used to control the visual presentation of text </li>
-         </ol>
+		</section>
+		<section id="tests">
+			<h2>Tests</h2>
+      <section class="procedure">
+				<h3>Procedure</h3>
+				<ol>
+					<li>Check whether CSS properties were used to control the visual presentation of text</li>
+				</ol>
       </section>
-      <section class="results"><h3>Expected Results</h3>
-         <ul>
-            <li>Check #1 is true.</li>
-         </ul>
+      <section class="results">
+				<h3>Expected Results</h3>
+				<ul>
+					<li>Check #1 is true.</li>
+				</ul>
       </section>
-   </section><section id="related"><h2>Related Techniques</h2><ul>
-      <li><a href="../css/C8">C8</a></li>
-      <li><a href="../css/C12">C12</a></li>
-      <li><a href="../css/C13">C13</a></li>
-      <li><a href="../css/C14">C14</a></li>
-      <li><a href="../css/C21">C21</a></li>
-      <li><a href="../client-side-script/SCR34">SCR34</a></li>
-   </ul></section><section id="resources"><h2>Resources</h2>
-      
-         <ul>
-            <li>
-                  <a href="https://www.w3.org/TR/CSS21/">CSS2.1 Specification</a>
-               </li>
-            <li>
-                  <a href="https://www.w3.org/Style/CSS/learning">Learning CSS</a>
-               </li>
-            <li>
-                  <a href="https://www.w3.org/TR/CSS-access">CSS and Accessibility</a>
-               </li>
-         </ul>
-      
-   </section></body></html>
\ No newline at end of file
+		</section>
+		<section id="related">
+			<h2>Related Techniques</h2>
+			<ul>
+				<li><a href="../css/C8">C8</a></li>
+      	<li><a href="../css/C12">C12</a></li>
+      	<li><a href="../css/C13">C13</a></li>
+      	<li><a href="../css/C14">C14</a></li>
+      	<li><a href="../css/C21">C21</a></li>
+      	<li><a href="../client-side-script/SCR34">SCR34</a></li>
+			</ul>
+		</section>
+		<section id="resources">
+			<h2>Resources</h2>
+			<ul>
+				<li>
+					<a href="https://www.w3.org/TR/CSS21/">CSS2.1 Specification</a>
+				</li>
+				<li>
+					<a href="https://www.w3.org/TR/css-fonts-3/">CSS Fonts Module Level 3</a>
+				</li>
+				<li>
+					<a href="https://www.w3.org/TR/css-color-4/">CSS Color Module Level 4</a>
+				</li>
+				<li>
+					<a href="https://www.w3.org/TR/css-text-3/">CSS Text Module Level 3</a>
+				</li>
+				<li>
+					<a href="https://www.w3.org/TR/css-backgrounds-3/">CSS Backgrounds and Borders Module Level 3</a>
+				</li>
+				<li>
+					<a href="https://www.w3.org/TR/selectors-3/">Selectors Level 3</a>
+				</li>
+				<li>
+					<a href="https://www.w3.org/Style/CSS/learning">Learning CSS</a>
+				</li>
+				<li>
+					<a href="https://www.w3.org/TR/CSS-access">CSS and Accessibility</a>
+				</li>
+			</ul>
+		</section>
+	</body>
+</html>
\ No newline at end of file
diff --git a/techniques/css/C23.html b/techniques/css/C23.html
index 6ad42083e9..4b26657405 100644
--- a/techniques/css/C23.html
+++ b/techniques/css/C23.html
@@ -1,49 +1,68 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Specifying text and background colors of secondary content such as banners, features and navigation in CSS while not specifying text and background colors of the main content</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Specifying text and background colors of secondary content such as banners, features and navigation in CSS while not specifying text and background colors of the main content</h1><section class="meta"><p class="id">ID: C23</p><p class="technology">Technology: css</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
-      <p>Pages that use CSS.</p>
-   </section><section id="description"><h2>Description</h2>
-      <p>Some Web pages use colors to identify different groupings. The objective of this technique is to allow users to select specific color combinations for the text and background of the main content while retaining visual clues to the groupings and organization of the web page. When a user overrides the foreground and background colors of all the text on a page, visual clues to the grouping and organization of the Web page may be lost, making it much more difficult to understand and use. </p>
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>Specifying text and background colors of secondary content such as banners, features and navigation in CSS while not specifying text and background colors of the main content</title>
+		<link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+	</head>
+	<body>
+		<h1>Specifying text and background colors of secondary content such as banners, features and navigation in <abbr title="Cascading Style Sheets">CSS</abbr> while not specifying text and background colors of the main content</h1>
+		<section class="meta">
+			<p class="id">ID: C23</p>
+			<p class="technology">Technology: css</p>
+			<p class="type">Type: Technique</p>
+		</section>
+		<section id="applicability">
+			<h2>When to Use</h2>
+      <p>CSS</p>
+		</section>
+		<section id="description">
+			<h2>Description</h2>
+      <p>Some Web pages use colors to identify different groupings. The objective of this technique is to allow users to select specific color combinations for the text and background of the main content while retaining visual clues to the groupings and organization of the web page. When a user overrides the foreground and background colors of all the text on a page, visual clues to the grouping and organization of the Web page may be lost, making it much more difficult to understand and use.</p>
       <p>When an author does not specify the colors of the text and background of the main content, it is possible to change the colors of those regions in the browser without the need to override the colors with a user style sheet. Specifying the text and background colors of secondary content means that the browser will not override those colors.</p>
-      <p>With this technique the author uses the default text color and background color of the main area. As a result the colors are completely determined by the user agent via the user's color preferences. The user can ensure that the color selection best meets his needs and provides the best reading experience. </p>
-   </section><section id="examples"><h2>Examples</h2>
-      <section class="example">
-         
-            <p>An HTML Web page uses CSS to specify the text and background colors of all secondary content such as navigation bars, menu bars, and the table of contents. Neither the text color nor background of the main content is specified. The user sets their own color preferences in the browser so that they view the main content in colors and contrasts that work well for them. The distinction between the separate sections of the page are still visually obvious. </p>
-         
+      <p>With this technique the author uses the default text color and background color of the main area. As a result the colors are completely determined by the user agent via the user's color preferences. The user can ensure that the color selection best meets their needs and provides the best reading experience.</p>
+		</section>
+		<section id="examples">
+			<h2>Examples</h2>
+			<section class="example">
+				<p>An <abbr title="HyperText Markup Language">HTML</abbr> Web page uses CSS to specify the text and background colors of all secondary content such as navigation bars, menu bars, and the table of contents. Neither the text color nor background of the main content is specified. The user sets their own color preferences in the browser so that they view the main content in colors and contrasts that work well for them. The distinction between the separate sections of the page are still visually obvious.</p>
       </section>
       <section class="example">
-         
-            <p>A music magazine has an article that is blue text on a white background. The site provides a link near the beginning of the page which assigns a different style sheet to the page. The new style sheet does not have any colors specified for the text or background.</p>
-         
-      </section>
-   </section><section id="tests"><h2>Tests</h2>
-      <section class="procedure"><h3>Procedure</h3>
-         <ol>
-            <li>
-               <p>Change the text, link and background colors in the browser settings so they are different from the default color and different from those specified in the secondary content.</p>
-               <div class="note">
-                  <p>Do not select the option that tells the browser to ignore the colors specified in the page. </p>
-               </div>
-            </li>
-            <li>Check that the main content uses the new text, link and background colors. </li>
-            <li>Check that the colors of the text, links and backgrounds in the secondary content has not changed. </li>
-         </ol>
-      </section>
-      <section class="results"><h3>Expected Results</h3>
-         <ul>
-            <li>Checks #2 and #3 are true. </li>
-         </ul>
-      </section>
-   </section><section id="related"><h2>Related Techniques</h2><ul>
-      <li><a href="../general/G148">G148</a></li>
-      <li><a href="../general/G156">G156</a></li>
-      <li><a href="../general/G175">G175</a></li>
-      <li><a href="../css/C25">C25</a></li>
-   </ul></section><section id="resources"><h2>Resources</h2>
-      
+				<p>A music magazine has an article that is blue text on a white background. The site provides a link near the beginning of the page which assigns a different style sheet to the page. The new style sheet does not have any colors specified for the text or background.</p>
+			</section>
+		</section>
+		<section id="tests">
+			<h2>Tests</h2>
+      <section class="procedure">
+				<h3>Procedure</h3>
+				<ol>
+					<li>
+						<p>Change the text, link and background colors in the browser settings so they are different from the default color and different from those specified in the secondary content.</p>
+						<div class="note">
+							<p>Do not select the option that tells the browser to ignore the colors specified in the page.</p>
+						</div>
+					</li>
+          <li>Check that the main content uses the new text, link and background colors.</li>
+          <li>Check that the colors of the text, links and backgrounds in the secondary content has not changed.</li>
+				</ol>
+			</section>
+      <section class="results">
+				<h3>Expected Results</h3>
          <ul>
-            <li>
-                  <a href="http://www.bbc.co.uk/accessibility/guides/change_colours/ ">BBC's Web page with instructions how to change the browser colors in most browsers</a>
-               </li>
+					<li>Checks #2 and #3 are true.</li>
          </ul>
-      
-   </section></body></html>
\ No newline at end of file
+				</section>
+			</section>
+			<section id="related">
+				<h2>Related Techniques</h2>
+				<ul>
+					<li><a href="../general/G148">G148</a></li>
+					<li><a href="../general/G156">G156</a></li>
+					<li><a href="../general/G175">G175</a></li>
+					<li><a href="../css/C25">C25</a></li>
+				</ul>
+			</section>
+			<!-- <section id="resources">
+				<h2>Resources</h2>
+			</section> -->
+		</body>
+	</html>
diff --git a/techniques/css/C24.html b/techniques/css/C24.html
index cabdc58500..705e82eb17 100644
--- a/techniques/css/C24.html
+++ b/techniques/css/C24.html
@@ -1,27 +1,53 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using percentage values in CSS for container sizes</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Using percentage values in CSS for container sizes</h1><section class="meta"><p class="id">ID: C24</p><p class="technology">Technology: css</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
-      <p>Pages that use CSS.</p>
-   </section><section id="description"><h2>Description</h2>
-      <p>The objective of this technique is to enable users to increase the size of text without having to scroll horizontally to read that text. To use this technique, an author specifies the width of text containers using percent values. </p>
-   </section><section id="examples"><h2>Examples</h2>
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>Using percentage values in CSS for container sizes</title>
+		<link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+	</head>
+	<body>
+		<h1>Using percentage values in <abbr title="Cascading Style Sheets">CSS</abbr> for container sizes</h1>
+		<section class="meta">
+			<p class="id">ID: C24</p>
+			<p class="technology">Technology: css</p>
+			<p class="type">Type: Technique</p>
+		</section>
+		<section id="applicability">
+			<h2>When to Use</h2>
+      <p>CSS</p>
+		</section>
+		<section id="description">
+			<h2>Description</h2>
+      <p>The objective of this technique is to enable users to increase the size of text without having to scroll horizontally to read that text. To use this technique, an author specifies the width of text containers using percent values.</p>
+		</section>
+		<section id="examples">
+			<h2>Examples</h2>
       <section class="example">
-         
-            <p>A newspaper has content in the middle of the window. The width of the container for the content is specified in page percentages, so that when a person with low vision increases the font size the text reflows inside the browser window at the new size and there is no need to scroll horizontally. </p>
-         
+				<p>A newspaper has content in the middle of the window. The width of the container for the content is specified in page percentages, so that when a person with low vision increases the font size the text reflows inside the browser window at the new size and there is no need to scroll horizontally. </p> 
       </section>
-   </section><section id="tests"><h2>Tests</h2>
-      <section class="procedure"><h3>Procedure</h3>
-         <ol>
-            <li>Check that all container widths are specified as percentage values. </li>
-            <li>Increase the text size to 200%. </li>
-            <li>Check to make sure that horizontal scrolling is not required to read any line of text. </li>
-            <li>Check that all text is still visible on the page. </li>
-         </ol>
+		</section>
+		<section id="tests">
+			<h2>Tests</h2>
+      <section class="procedure">
+				<h3>Procedure</h3>
+				<ol>
+					<li>Check that all container widths are specified as percentage values. </li>
+          <li>Increase the text size to 200%. </li>
+          <li>Check to make sure that horizontal scrolling is not required to read any line of text. </li>
+					<li>Check that all text is still visible on the page.</li>
+				</ol>
       </section>
-      <section class="results"><h3>Expected Results</h3>
-         <ul>
-            <li>Checks #1, #3, and #4 are true. </li>
-         </ul>
-      </section>
-   </section><section id="related"><h2>Related Techniques</h2><ul>
-      <li><a href="../css/C20">C20</a></li>
-   </ul></section></body></html>
\ No newline at end of file
+      <section class="results">
+				<h3>Expected Results</h3>
+				<ul>
+					<li>Checks #1, #3, and #4 are true.</li>
+				</ul>
+			</section>
+		</section>
+		<section id="related">
+			<h2>Related Techniques</h2>
+			<ul>
+				<li><a href="../css/C20">C20</a></li>
+			</ul>
+		</section>
+	</body>
+</html>
\ No newline at end of file
diff --git a/techniques/css/C25.html b/techniques/css/C25.html
index c0915b587f..cf11374a3d 100644
--- a/techniques/css/C25.html
+++ b/techniques/css/C25.html
@@ -1,38 +1,66 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Specifying borders and layout in CSS to delineate areas of a Web page while not specifying text and text-background colors</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Specifying borders and layout in CSS to delineate areas of a Web page while not specifying text and text-background colors</h1><section class="meta"><p class="id">ID: C25</p><p class="technology">Technology: css</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
-      <p>Pages that use CSS.</p>
-   </section><section id="description"><h2>Description</h2>
-      <p>The intent of this technique is to specify borders and layout using CSS and leave text and background colors to render according to the user's browser and/or operating system settings (Please see above note in relation to Safari). This allows users to view the text in the colors they require while maintaining other aspects of the layout and page design such as columns of text, borders around sections or vertical lines between a menu and main content area. It will also prevent some display issues in some browsers when pages contain Javascript pop-up boxes or drop-down menus and have the colors overridden.</p>
-      <p>Borders and layout indicators help many people with cognitive disabilities, as does flexibility over the text and background colors. Sometimes these two needs are in conflict when the user has to over-ride the author's color selection of text and background in the browser and the browser also removes the borders and the intended layout. This can mean the page is displayed in a single column with one block of content below the other, which can result in unnecessary whitespace and long lines of text. It can also mean that pop-up boxes gain a transparent background, superimposing the text of the box on the text of the page, and drop-down menus either become transparent or gain a dark-grey background. When a Web author does not specify the colors of any text and background, while specifying border colors and layout, it is possible, in most popular browsers, to change the text and background colors without affecting the other (author-specified) CSS declarations. </p>
-   </section><section id="examples"><h2>Examples</h2>
-      <section class="example">
-         
-            <p>A Web page is designed using HTML. CSS is used to specify border colors around discrete areas of the page and to layout the content so that the menu floats to the left of the main content area. Neither the text color nor background is specified. The user sets their own colors in the browser. They can view the page in colors and contrasts that work well for them without disrupting the layout. </p>
-         
-      </section>
-   </section><section id="tests"><h2>Tests</h2>
-      <section class="procedure"><h3>Procedure</h3>
-         <ol>
-            <li>Open the Web page in a browser that allows users to change colors of HTML content. </li>
-            <li>
-               <p>Change the text, link and background colors in the browser settings so they are different than those currently set in the browser. </p>
-               <div class="note">
-                  <p>Make sure that you do not select the option that tells the browser to ignore the colors specified in the page.</p>
-               </div>
-            </li>
-            <li>Return to the page and check that it is displaying the page in the new text, link and background colors. </li>
-            <li>Check that any borders are still displayed and that the layout is retained. </li>
-         </ol>
-      </section>
-      <section class="results"><h3>Expected Results</h3>
-         <ul>
-            <li>Checks #3 and Check #4 are true.</li>
-         </ul>
-      </section>
-   </section><section id="related"><h2>Related Techniques</h2><ul>
-      <li><a href="../general/G17">G17</a></li>
-      <li><a href="../general/G18">G18</a></li>
-      <li><a href="../general/G145">G145</a></li>
-      <li><a href="../general/G148">G148</a></li>
-      <li><a href="../general/G156">G156</a></li>
-      <li><a href="../css/C23">C23</a></li>
-   </ul></section></body></html>
\ No newline at end of file
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+<head>
+	<title>Specifying borders and layout in CSS to delineate areas of a Web page while not specifying text and text-background colors</title>
+	<link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+</head>
+<body>
+	<h1>Specifying borders and layout in <abbr title="Cascading Style Sheets">CSS</abbr> to delineate areas of a Web page while not specifying text and text-background colors</h1>
+	<section class="meta">
+		<p class="id">ID: C25</p>
+		<p class="technology">Technology: css</p>
+		<p class="type">Type: Technique</p>
+	</section>
+	<section id="applicability">
+		<h2>When to Use</h2>
+		<p>Pages that use CSS.</p>
+	</section>
+	<section id="description">
+		<h2>Description</h2>
+		<p>The intent of this technique is to specify borders and layout using CSS and leave text and background colors to render according to the user's browser and/or operating system settings. This allows users to view the text in the colors they require while maintaining other aspects of the layout and page design such as columns of text, borders around sections or vertical lines between a menu and main content area. It will also prevent some display issues in some browsers when pages contain Javascript pop-up boxes or drop-down menus and have the colors overridden.</p>
+		<p>Borders and layout indicators help many people with cognitive disabilities, as does flexibility over the text and background colors. Sometimes these two needs are in conflict when the user has to over-ride the author's color selection of text and background in the browser and the browser also removes the borders and the intended layout. This can mean the page is displayed in a single column with one block of content below the other, which can result in unnecessary whitespace and long lines of text. It can also mean that pop-up boxes gain a transparent background, superimposing the text of the box on the text of the page, and drop-down menus either become transparent or gain a dark-grey background. When a Web author does not specify the colors of any text and background, while specifying border colors and layout, it is possible, in most popular browsers, to change the text and background colors without affecting the other (author-specified) CSS declarations. </p>
+	</section>
+	<section id="examples">
+		<h2>Examples</h2>
+		<section class="example">
+
+			<p>A Web page is designed using HTML. CSS is used to specify border colors around discrete areas of the page and to layout the content so that the menu floats to the left of the main content area. Neither the text color nor background is specified. The user sets their own colors in the browser. They can view the page in colors and contrasts that work well for them without disrupting the layout. </p>
+
+		</section>
+	</section>
+	<section id="tests">
+		<h2>Tests</h2>
+		<section class="procedure">
+			<h3>Procedure</h3>
+			<ol>
+				<li>Open the Web page in a browser that allows users to change colors of HTML content. </li>
+				<li>
+					<p>Change the text, link and background colors in the browser settings so they are different than those currently set in the browser. </p>
+					<div class="note">
+						<p>Make sure that you do not select the option that tells the browser to ignore the colors specified in the page.</p>
+					</div>
+				</li>
+				<li>Return to the page and check that it is displaying the page in the new text, link and background colors. </li>
+				<li>Check that any borders are still displayed and that the layout is retained. </li>
+			</ol>
+		</section>
+		<section class="results">
+			<h3>Expected Results</h3>
+			<ul>
+				<li>Checks #3 and Check #4 are true.</li>
+			</ul>
+		</section>
+	</section>
+	<section id="related">
+		<h2>Related Techniques</h2>
+		<ul>
+			<li><a href="../general/G17">G17</a></li>
+			<li><a href="../general/G18">G18</a></li>
+			<li><a href="../general/G145">G145</a></li>
+			<li><a href="../general/G148">G148</a></li>
+			<li><a href="../general/G156">G156</a></li>
+			<li><a href="../css/C23">C23</a></li>
+		</ul>
+	</section>
+</body>
+</html>
diff --git a/techniques/css/C27.html b/techniques/css/C27.html
index a65c1425e7..a3f1360977 100644
--- a/techniques/css/C27.html
+++ b/techniques/css/C27.html
@@ -1,40 +1,75 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Making the DOM order match the visual order</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Making the DOM order match the visual order</h1><section class="meta"><p class="id">ID: C27</p><p class="technology">Technology: css</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
-      <p>CSS used with HTML and XHTML</p>
-   </section><section id="description"><h2>Description</h2>
-      <p>The objective of this technique is to ensure that the order of content in the source code is the same as the visual presentation of the content. The order of content in the source code can be changed by the author to any number of visual presentations with CSS. Each order may be meaningful in itself but may cause confusion for assistive technology users. This could be due to the user switching off the author-specified presentation, by accessing the content directly from the source code (such as with a screen reader), or by interacting with the content with a keyboard. If a blind user, who reads the page with a screen reader that follows the source order, is working with a sighted user who reads the page in visual order, they may be confused when they encounter information in different orders. A user with low vision who uses a screen magnifier in combination with a screen reader may be confused when the reading order appears to skip around on the screen. A keyboard user may have trouble predicting where focus will go next when the source order does not match the visual order. </p>
-      <p>There may also be situations where the visually presented order is necessary to the overall understanding of the page, and if the source order is presented differently, it may be much more difficult to understand. </p>
-      <p>When the source order matches the visual order, everyone will read the content and interact with it in the same (correct) order. </p>
-      <div class="note">
-         <p>The <code class="att">tabindex</code> attribute in HTML has two functions. One is to make an element focusable and the other is to assign the element a position in the focus order. A <code class="att">tabindex</code> of 0 makes an element focusable, but adds it to the focus order in the order of source elements. The focus order will follow positive values of tabindex in ascending order. Setting <code class="att">tabindex</code> values that result in an order different from the order of elements in the Document Object Model (DOM) can mean the order is incorrect for users of assistive technologies. This is largely because the tabindex property is specified in the HTML or XHTML and not the CSS. This may change in future specifications. It may also differ from the visual presentation order. </p>
-      </div>
-   </section><section id="examples"><h2>Examples</h2>
-      <ul>
-         <li>An online newspaper has placed a navigation bar visually in the top left corner of the page directly below its initial logo. In the source code, the navigation elements appear after the elements encoding the logo. </li>
-      </ul>
-   </section><section id="tests"><h2>Tests</h2>
-      <section class="procedure"><h3>Procedure</h3>
-         <ol>
-            <li>Visually examine the order of the content in the Web page as it is presented to the end user.</li>
-            <li>Examine the elements in the DOM using a tool that allows you to see the DOM. </li>
-            <li>Ensure that the order of the content in the source code sections match the visual presentation of the content in the Web page. (e.g., for an English language page the order is from top to bottom and from left to right.) " </li>
-         </ol>
-      </section>
-      <section class="results"><h3>Expected Results</h3>
-         <ul>
-            <li>Step #3 is true. </li>
-         </ul>
-      </section>
-   </section><section id="related"><h2>Related Techniques</h2><ul>
-      <li><a href="../html/H4">H4</a></li>
-      <li><a href="../general/G57">G57</a></li>
-      <li><a href="../general/G59">G59</a></li>
-   </ul></section><section id="resources"><h2>Resources</h2>
-      
-         <ul>
-            <li>
-                  <a href="http://www.microsoft.com/en-us/download/details.aspx?id=18359">Microsoft Internet Explorer Developer Toolbar</a>. Allows examination of script-generated DOM in Microsoft Internet Explorer.</li>
-            <li>
-                  <a href="http://getfirebug.com/">Firebug</a>. Allows examination of script-generated DOM in Firefox.</li>
-         </ul>
-      
-   </section></body></html>
\ No newline at end of file
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+<head>
+	<title>Making the DOM order match the visual order</title>
+	<link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+</head>
+<body>
+	<h1>Making the <abbr title="Document Object Model">DOM</abbr> order match the visual order</h1>
+	<section class="meta">
+		<p class="id">ID: C27</p>
+		<p class="technology">Technology: css</p>
+		<p class="type">Type: Technique</p>
+	</section>
+	<section id="applicability">
+		<h2>When to Use</h2>
+		<p><abbr title="Cascading Style Sheets">CSS</abbr> used with <abbr title="HyperText Markup Language">HTML</abbr></p>
+	</section>
+	<section id="description">
+		<h2>Description</h2>
+		<p>The objective of this technique is to ensure that the order of content in the source code is the same as the visual presentation of the content. The order of content in the source code can be changed by the author to any number of visual presentations with CSS. Each order may be meaningful in itself but may cause confusion for assistive technology users. This could be due to the user switching off the author-specified presentation, by accessing the content directly from the source code (such as with a screen reader), or by interacting with the content with a keyboard. If a blind user, who reads the page with a screen reader that follows the source order, is working with a sighted user who reads the page in visual order, they may be confused when they encounter information in different orders. A user with low vision who uses a screen magnifier in combination with a screen reader may be confused when the reading order appears to skip around on the screen. A keyboard user may have trouble predicting where focus will go next when the source order does not match the visual order. </p>
+		<p>There may also be situations where the visually presented order is necessary to the overall understanding of the page, and if the source order is presented differently, it may be much more difficult to understand. </p>
+		<p>When the source order matches the visual order, everyone will read the content and interact with it in the same (correct) order. </p>
+		<div class="note">
+			<p>The <code class="language-html">tabindex</code> attribute in HTML has two functions. One is to make an element focusable and the other is to assign the element a position in the focus order. A <code class="language-html">tabindex</code> of 0 makes an element focusable, but adds it to the focus order in the order of source elements. The focus order will follow positive values of tabindex in ascending order. Setting <code class="language-html">tabindex</code> values that result in an order different from the order of elements in the Document Object Model (DOM) can mean the order is incorrect for users of assistive technologies. This is largely because the tabindex property is specified in the HTML and not the CSS. This may change in future specifications. It may also differ from the visual presentation order. </p>
+		</div>
+	</section>
+	<section id="examples">
+		<h2>Examples</h2>
+		<ul>
+			<li>An online newspaper has placed a navigation bar visually in the top left corner of the page directly below its initial logo. In the source code, the navigation elements appear after the elements encoding the logo. </li>
+		</ul>
+	</section>
+	<section id="tests">
+		<h2>Tests</h2>
+		<section class="procedure">
+			<h3>Procedure</h3>
+			<ol>
+				<li>Visually examine the order of the content in the Web page as it is presented to the end user.</li>
+				<li>Examine the elements in the DOM using a tool that allows you to see the DOM. </li>
+				<li>Ensure that the order of the content in the source code sections match the visual presentation of the content in the Web page. (e.g., for an English language page the order is from top to bottom and from left to right.) " </li>
+			</ol>
+		</section>
+		<section class="results">
+			<h3>Expected Results</h3>
+			<ul>
+				<li>Step #3 is true. </li>
+			</ul>
+		</section>
+	</section>
+	<section id="related">
+		<h2>Related Techniques</h2>
+		<ul>
+			<li><a href="../general/G57">G57</a></li>
+			<li><a href="../general/G59">G59</a></li>
+		</ul>
+	</section>
+	<section id="resources">
+		<h2>Resources</h2>
+		<ul>
+			<li><a href="https://accessibility.blog.gov.uk/2017/03/27/how-users-change-colours-on-websites/">How users change colours on websites (gov.uk)</a>
+			</li>
+			<li>Most browsers offer developer tools to inspect the source code. These tools can usually  be called up by pressing F12 or via the browser settings.      
+				<ul>
+               <li>
+                  <a href="https://addons.mozilla.org/en/firefox/addon/web-developer/">The Web Developer Toolbar (Firefox)</a>. Allows examination of the source code with CSS turned off in Firefox. This can be helpful in determining whether reading order and source code order match.
+               </li>
+					<li>
+						<a href="https://chrome.google.com/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm">Web Developer Toolbar (Chrome)</a>. Allows examination of the source code with CSS turned off in Chrome. This can be helpful in determining whether reading order and source code order match.
+					</li>
+				</ul>
+			</li>
+		</ul>			
+	</section>
+</body>
+</html>
diff --git a/techniques/css/C28.html b/techniques/css/C28.html
index 985d1ced3b..0969060eec 100644
--- a/techniques/css/C28.html
+++ b/techniques/css/C28.html
@@ -1,63 +1,86 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Specifying the size of text containers using em units</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Specifying the size of text containers using em units</h1><section class="meta"><p class="id">ID: C28</p><p class="technology">Technology: css</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
-      <p>CSS</p>
-   </section><section id="description"><h2>Description</h2>
-      <p>The objective of this technique is to specify the width and/or height of containers, that contain text or that will accept text input, in em units. This will allow user agents that support text resizing to resize the text containers in line with changes in text size settings. </p>
-      <p>The width and/or height of text containers that have been specified using other units risk text cropping because it falls outside the container boundaries when the text size has been increased. </p>
-      <p>The containers generally control the placement of text within the Web page and can include layout elements, structural elements and form controls. </p>
-   </section><section id="examples"><h2>Examples</h2>
-      <section class="example">
-         <h3> Em units for sizes for layout container containing text </h3>
-         
-            <p>In this example, a <code class="el">div</code> element, with <code class="att">id</code> value of "nav_menu", is used to position the navigation menu along the left-hand side of the main content area of the Web page. The navigation menu consists of a list of text links, with <code class="att">id</code> value of "nav_list." The text size for the navigation links and the width of the container are specified in em units. </p>
-         
-         <pre xml:space="preserve">
-#nav_menu { width: 20em; height: 100em }
-
-#nav_list { font-size: 100%; }
-</pre>
-      </section>
-      <section class="example">
-         <h3>Em units for text-based form controls </h3>
-         
-            <p>In this example, <code class="el">input</code> elements that contain text or accept text input by the user have been given the class name "form1." CSS rules are used to define the font size in percent units and width for these elements in em units. This will allow the text within the form control to resize in response to changes in text size settings without being cropped (because the width of the form control itself also resizes according to the font size). </p>
-         
-         <pre xml:space="preserve">
-input.form1 { font-size: 100%; width: 15em; }
-</pre>
-      </section>
-      <section class="example">
-         <h3>Em units in dropdown boxes </h3>
-         
-            <p>In this example, <code class="el">select</code> elements have been given the class name "pick." CSS rules are used to define the font size in percent units and width in em units. This will allow the text within the form control to resize in response to changes in text size settings without being cropped. </p>
-         
-         <pre xml:space="preserve">
-input.pick { font-size: 100%; width: 10em; }
-</pre>
-      </section>
-      <section class="example">
-         <h3>Em units for non-text-based form controls </h3>
-         
-            <p>In this example, <code class="el">input</code> elements that define checkboxes or radio buttons have been given the class name "choose." CSS rules are used to define the width and height for these elements in em units. This will allow the form control to resize in response to changes in text size settings. </p>
-         
-         <pre xml:space="preserve">
-input.choose { width: 1.2em; height: 1.2em; }
-</pre>
-      </section>
-   </section><section id="tests"><h2>Tests</h2>
-      <section class="procedure"><h3>Procedure</h3>
-         <ul>
-            <li>Identify containers that contain text or allow text input.</li>
-            <li>Check the container's width and/or height are specified in em units.</li>
-         </ul>
-      </section>
-      <section class="results"><h3>Expected Results</h3>
-         <ul>
-            <li>Check #2 is true.</li>
-         </ul>
-      </section>
-   </section><section id="related"><h2>Related Techniques</h2><ul>
-      <li><a href="../css/C12">C12</a></li>
-      <li><a href="../css/C14">C14</a></li>
-      <li><a href="../css/C17">C17</a></li>
-      <li><a href="../css/C20">C20</a></li>
-   </ul></section></body></html>
\ No newline at end of file
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+<head>
+	<title>Specifying the size of text containers using em units</title>
+	<link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+</head>
+<body>
+	<h1>Specifying the size of text containers using <code class="language-css">em</code> units</h1>
+	<section class="meta">
+		<p class="id">ID: C28</p>
+		<p class="technology">Technology: css</p>
+		<p class="type">Type: Technique</p>
+	</section>
+	<section id="applicability">
+		<h2>When to Use</h2>
+		<p><abbr title="Cascading Style Sheets">CSS</abbr></p>
+	</section>
+	<section id="description">
+		<h2>Description</h2>
+		<p>The objective of this technique is to specify the width and/or height of containers, that contain text or that will accept text input, in <code class="language-css">em</code> units. This will allow user agents that support text resizing to resize the text containers in line with changes in text size settings.</p>
+		<p>The width and/or height of text containers that have been specified using other units risk text cropping because it falls outside the container boundaries when the text size has been increased.</p>
+		<p>The containers generally control the placement of text within the Web page and can include layout elements, structural elements and form controls.</p>
+
+		<div class="note">
+			<p>This technique uses <code>em</code> units, but using <code>rem</code> units instead would have the same effect.</p>
+		</div>
+	</section>
+	<section id="examples">
+		<h2>Examples</h2>
+		<section class="example">
+			<h3><code class="language-css">em</code> units for sizes for layout container containing text </h3>
+
+			<p>In this example, a <code class="language-html">div</code> element, with <code class="language-html">id</code> value of <code class="language-html">"nav_menu"</code>, is used to position the navigation menu along the left-hand side of the main content area of the Web page. The navigation menu consists of a list of text links, with <code class="language-html">id</code> value of <code class="language-html">"nav_list"</code>. The text size for the navigation links and the width of the container are specified in <code class="language-css">em</code> units.</p>
+
+<pre xml:space="preserve"><code class="language-css">#nav_menu { width: 20em; height: 100em; }
+#nav_list { font-size: 100%; }</code></pre>
+		</section>
+		<section class="example">
+			<h3><code class="language-css">em</code> units for text-based form controls</h3>
+
+			<p>In this example, <code class="language-html">input</code> elements that contain text or accept text input by the user have been given the class name "form1". CSS rules are used to define the font size in percent units and width for these elements in <code class="language-css">em</code> units. This will allow the text within the form control to resize in response to changes in text size settings without being cropped (because the width of the form control itself also resizes according to the font size). </p>
+
+			<pre xml:space="preserve"><code class="language-css">input.form1 { font-size: 100%; width: 15em; }</code></pre>
+		</section>
+		<section class="example">
+			<h3><code class="language-css">em</code> units in dropdown boxes</h3>
+
+			<p>In this example, <code class="language-html">select</code> elements have been given the class name "pick." CSS rules are used to define the font size in percent units and width in em units. This will allow the text within the form control to resize in response to changes in text size settings without being cropped. </p>
+
+			<pre xml:space="preserve"><code class="language-css">select.pick { font-size: 100%; width: 10em; }</code></pre>
+		</section>
+		<section class="example">
+			<h3><code class="language-css">em</code> units for non-text-based form controls</h3>
+
+			<p>In this example, <code class="language-html">input</code> elements that define checkboxes or radio buttons have been given the class name "choose." CSS rules are used to define the width and height for these elements in <code class="language-css">em</code> units. This will allow the form control to resize in response to changes in text size settings.</p>
+
+			<pre xml:space="preserve"><code class="language-css">input.choose { width: 1.2em; height: 1.2em; }</code></pre>
+		</section>
+	</section>
+	<section id="tests">
+		<h2>Tests</h2>
+		<section class="procedure">
+			<h3>Procedure</h3>
+			<ul>
+				<li>Identify containers that contain text or allow text input.</li>
+				<li>Check the container's width and/or height are specified in <code class="language-css">em</code> units.</li>
+			</ul>
+		</section>
+		<section class="results">
+			<h3>Expected Results</h3>
+			<ul>
+				<li>Check #2 is true.</li>
+			</ul>
+		</section>
+	</section>
+	<section id="related">
+		<h2>Related Techniques</h2>
+		<ul>
+			<li><a href="../css/C12">C12</a></li>
+			<li><a href="../css/C14">C14</a></li>
+			<li><a href="../css/C17">C17</a></li>
+			<li><a href="../css/C20">C20</a></li>
+		</ul>
+	</section>
+</body>
+</html>
\ No newline at end of file
diff --git a/techniques/css/C29.html b/techniques/css/C29.html
index fe0182f671..0017c69e29 100644
--- a/techniques/css/C29.html
+++ b/techniques/css/C29.html
@@ -1,169 +1,213 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using a style switcher to provide a conforming alternate version</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Using a style switcher to provide a conforming alternate version</h1><section class="meta"><p class="id">ID: C29</p><p class="technology">Technology: css</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
-      <p>CSS used with client-side or server-side scripting. </p>
-   </section><section id="description"><h2>Description</h2>
-      <p>When some aspect of the default presentation of a Web page does not meet a Success Criterion, it is possible to meet that requirement using the "Alternate Version" clause in the conformance requirements (Conformance Requirement 1). For some requirements, invoking a style switcher via a link or control on the page that can adjust the presentation so that all aspects of the page conform at the level claimed allows authors to avoid having to provide multiple versions of the same information.</p>
-      <p>The objective of this technique is to demonstrate how CSS can be used in combination with scripting to provide conforming alternate versions of a Web page. In this technique, an author provides alternative views of the content by providing controls that adjust the CSS that is used to control the visual presentation of content. Controls provided within the Web page allow users to select or modify the presentation in a way that meets the success criterion at the level claimed. This makes it possible for different visual presentations to be selected by users in situations such as the following:</p>
-      <ul>
-         <li>the user may not be able to adjust browser or operating system settings, due to a lack of familiarity or rights </li>
-         <li>the text is provided in a manner that does not respond to browser or operating system settings (such as text within an image) </li>
-         <li>the default presentation of the content does not include sufficient contrast for some users </li>
-      </ul>
-      <p>For this technique to be used successfully, three things must be true. </p>
-      <ol>
-         <li>The link or control on the original page must itself meet the success criterion to be met via the alternate presentation. For example, if a style switcher is used to provide increased font sizes and the control is presented using a small font, users may not be able to activate the control and view the alternate presentation. </li>
-         <li>The new page must contain all the same information and functionality as the original page. </li>
-         <li>The new page must conform to all of the Success Criteria for the desired level of conformance. For example, an alternate stylesheet can not be used to meet one requirement if it causes a different requirement to no longer conform. </li>
-      </ol>
-      <p>When using a style switcher, it is important to consider the following challenges and limitations: </p>
-      <ul>
-         <li>The number and type of changes that a user can make is limited to the scope of the controls provided by the author of the Web page. A variety of presentation and preferences should be provided in order to address the needs of as wide an audience as possible. However, it is also important for authors to consider interactions between preferences and the complexity for users that might result from providing large numbers of options to users.</li>
-         <li>Maintaining the user's preference from one page to the next may be achieved by storing a cookie on the user's machine (see Resources section for more information) or by including their preferences in a profile saved on the Web server by passing a query string parameter, or by other means. </li>
-         <li>The technical method used to implement a style switcher may be subject to the support and availability of one or more technologies on the user's machine (for example, many client-side solutions require support for both JavaScript and CSS). Unless these technologies are relied upon for conformance, authors should consider using server-side technologies where client-side support and availability of technologies can not be assured. Alternatively, the use of techniques which ensure that content will transform gracefully when one or more of the technologies used are not available can be an effective way to enhance pages when support for these technologies is not relied upon for conformance.</li>
-      </ul>
-   </section><section id="examples"><h2>Examples</h2>
-      <section class="example">
-         <h3>Using a JavaScript control to apply a different external CSS file </h3>
-         
-            <p>This example is of a page that provides links to change text and background colors for the page via JavaScript. The links should only be inserted if JavaScript is supported by and available on the user's system. Otherwise, selecting the links will not result in the desired changes. This can be achieved by using script to insert the links themselves (which means that the links would only be present when scripting is supported and available). </p>
-            <p>The following code shows the JavaScript-dependent color-change links and a snippet of other content in the Web page, the associated style sheet rules, and the JavaScript that changes the style sheet in use when a color-change link is selected. </p>
-            <p>The example applies only to the current page view. In a production environment, it would be advisable to save this preference in a cookie or server-side user profile, so that users would only have to make the selection once per site. </p>
-            <p>The XHTML components:</p>
-         
-         <pre xml:space="preserve">
-In &lt;head&gt; section:
-
-  &lt;link href="main.css" rel="stylesheet" type="text/css" /&gt;
-  &lt;link id="currentCSS" href="defaultColors.css" rel="stylesheet" type="text/css" /&gt;
-
-In &lt;body&gt; section:
-
-&lt;div id="colorswitch"&gt;
-&lt;p&gt;Change colors:&lt;/p&gt;
-  &lt;ul class="inline"&gt;
-    &lt;li&gt;&lt;a href="#" onClick="javascript:changeColors('altColors1.css');return false;" 
-      id="altColors1"&gt;dark blue on white&lt;/a&gt;&lt;/li&gt;
-    &lt;li&gt;&lt;a href="#" onClick="javascript:changeColors('altColors2.css');return false;" 
-      id="altColors2"&gt;yellow on black&lt;/a&gt;&lt;/li&gt;
-    &lt;li&gt;&lt;a href="#" onClick="javascript:changeColors('altColors3.css');return false;" 
-      id="altColors3"&gt;black on pale yellow&lt;/a&gt;&lt;/li&gt;
-    &lt;li&gt;&lt;a href="#" onClick="javascript:changeColors('altColors4.css');return false;" 
-      id="altColors4"&gt;black on white&lt;/a&gt;&lt;/li&gt;
-    &lt;li&gt;&lt;a href="#" onClick="javascript:changeColors('defaultColors.css');return false;" 
-      id="default"&gt;Reset to default&lt;/a&gt;&lt;/li&gt;
-  &lt;/ul&gt;
-&lt;/div&gt;
-&lt;div id="mainbody"&gt;
-  &lt;h1&gt;Conference report&lt;/h1&gt;
-  &lt;p&gt;Last week's conference presented an impressive line-up of speakers...&lt;/p&gt;
-&lt;/div&gt;
-
-</pre>
-         
-            <p>The CSS components:</p>
-         
-         <pre xml:space="preserve">
-In main.css:
-
-body{ font-family: Geneva, Arial, Helvetica, sans-serif; margin: 2em; }
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+<head><title>Using a style switcher to provide a conforming alternate version</title>
+	<link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+</head>
+<body>
+	<h1>Using a style switcher to provide a conforming alternate version</h1>
+	<section class="meta">
+		<p class="id">ID: C29</p>
+		<p class="technology">Technology: css</p>
+		<p class="type">Type: Technique</p>
+	</section>
+	<section id="applicability">
+		<h2>When to Use</h2>
+		<p><abbr title="Cascading Style Sheets">CSS</abbr> used with client-side or server-side scripting.</p>
+	</section>
+	<section id="description">
+		<h2>Description</h2>
+		<p>When some aspect of the default presentation of a Web page does not meet a Success Criterion, it is possible to meet that requirement using the "Alternate Version" clause in the conformance requirements (Conformance Requirement 1). For some requirements, invoking a style switcher via a link or control on the page that can adjust the presentation so that all aspects of the page conform at the level claimed allows authors to avoid having to provide multiple versions of the same information.</p>
+		<p>The objective of this technique is to demonstrate how CSS can be used in combination with scripting to provide conforming alternate versions of a Web page. In this technique, an author provides alternative views of the content by providing controls that adjust the CSS that is used to control the visual presentation of content. Controls provided within the Web page allow users to select or modify the presentation in a way that meets the success criterion at the level claimed. This makes it possible for different visual presentations to be selected by users in situations such as the following:</p>
+		<ul>
+			<li>the user may not be able to adjust browser or operating system settings, due to a lack of familiarity or rights</li>
+			<li>the text is provided in a manner that does not respond to browser or operating system settings (such as text within an image)</li>
+			<li>the default presentation of the content does not include sufficient contrast for some users</li>
+		</ul>
+		<p>For this technique to be used successfully, three things must be true.</p>
+		<ol>
+			<li>The link or control on the original page must itself meet the success criterion to be met via the alternate presentation. For example, if a style switcher is used to provide increased font sizes and the control is presented using a small font, users may not be able to activate the control and view the alternate presentation.</li>
+			<li>The new page must contain all the same information and functionality as the original page.</li>
+			<li>The new page must conform to all of the Success Criteria for the desired level of conformance. For example, an alternate stylesheet can not be used to meet one requirement if it causes a different requirement to no longer conform.</li>
+		</ol>
+		<p>When using a style switcher, it is important to consider the following challenges and limitations:</p>
+		<ul>
+			<li>The number and type of changes that a user can make is limited to the scope of the controls provided by the author of the Web page. A variety of presentation and preferences should be provided in order to address the needs of as wide an audience as possible. However, it is also important for authors to consider interactions between preferences and the complexity for users that might result from providing large numbers of options to users.</li>
+			<li>Maintaining the user's preference from one page to the next may be achieved by storing a cookie on the user's machine (see Resources section for more information) or by including their preferences in a profile saved on the Web server by passing a query string parameter, or by other means. </li>
+			<li>The technical method used to implement a style switcher may be subject to the support and availability of one or more technologies on the user's machine (for example, many client-side solutions require support for both JavaScript and CSS). Unless these technologies are relied upon for conformance, authors should consider using server-side technologies where client-side support and availability of technologies can not be assured. Alternatively, the use of techniques which ensure that content will transform gracefully when one or more of the technologies used are not available can be an effective way to enhance pages when support for these technologies is not relied upon for conformance.</li>
+		</ul>
+	</section>
+	<section id="examples">
+		<h2>Examples</h2>
+		<section class="example">
+			<h3>Using a JavaScript control to apply a different external CSS file</h3>
+			<p>This example is of a page that provides links to change text and background colors for the page via JavaScript. The links should only be inserted if JavaScript is supported by and available on the user's system. Otherwise, selecting the links will not result in the desired changes. This can be achieved by using script to insert the links themselves (which means that the links would only be present when scripting is supported and available).</p>
+			<p>The following code shows the JavaScript-dependent color-change links and a snippet of other content in the Web page, the associated style sheet rules, and the JavaScript that changes the style sheet in use when a color-change link is selected.</p>
+			<p>The example applies only to the current page view. In a production environment, it would be advisable to save this preference in a cookie or server-side user profile, so that users would only have to make the selection once per site.</p>
+			
+			<section id="the-html">
+
+				<h4>The <abbr title="HyperText Markup Language">HTML</abbr> components</h4>
+			
+<pre xml:space="preserve"><code class="language-html">&lt;!doctype html&gt;
+&lt;html lang="en"&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;link href="main.css" rel="stylesheet"&gt;
+    &lt;link id="currentCSS" href="defaultColors.css" rel="stylesheet"&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;div id="colorswitch"&gt;
+    &lt;p&gt;Change colors:&lt;/p&gt;
+    &lt;ul class="inline"&gt;
+      &lt;li&gt;
+        &lt;a href="#" onClick="javascript:changeColors('altColors1.css');return false;" 
+	id="altColors1"&gt;dark blue on white&lt;/a&gt;
+      &lt;/li&gt;
+      &lt;li&gt;
+        &lt;a href="#" onClick="javascript:changeColors('altColors2.css');return false;" 
+	id="altColors2"&gt;yellow on black&lt;/a&gt;
+      &lt;/li&gt;
+      &lt;li&gt;
+        &lt;a href="#" onClick="javascript:changeColors('altColors3.css');return false;" 
+	id="altColors3"&gt;black on pale yellow&lt;/a&gt;
+      &lt;/li&gt;
+      &lt;li&gt;
+        &lt;a href="#" onClick="javascript:changeColors('altColors4.css');return false;" 
+	id="altColors4"&gt;black on white&lt;/a&gt;
+      &lt;/li&gt;
+      &lt;li&gt;
+        &lt;a href="#" onClick="javascript:changeColors('defaultColors.css');return false;" 
+	id="default"&gt;Reset to default&lt;/a&gt;
+      &lt;/li&gt;
+    &lt;/ul&gt;
+  &lt;/div&gt;
+  &lt;div id="mainbody"&gt;
+    &lt;h1&gt;Conference report&lt;/h1&gt;
+      &lt;p&gt;Last week's conference presented an impressive line-up of speakers...&lt;/p&gt;
+    &lt;/div&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</code></pre>
+			</section>
+			<section id="the-css">
+				<h4>The CSS components</h4>
+				<section id="main-css">
+					<h5>In main.css</h5>
+			
+<pre xml:space="preserve"><code class="language-css">body{ font-family: Geneva, Arial, Helvetica, sans-serif; margin: 2em; }
 
 #mainbody { 
-    padding: 1em; 
+  padding: 1em; 
 }
 
 #colorswitch {
-    float: right; 
-    width: 12em; 
-    border: 1px #000066 solid; 
-    padding:0 1em 1em 1em; margin:0;
+  float: right; 
+  width: 12em; 
+  border: 1px #000066 solid; 
+  padding:0 1em 1em 1em; margin:0;
 }
 
 #colorswitch p { 
-    padding-top:.5em; 
-    font-weight:bold;
-}
-
-In defaultColors.css:
-
-body, p { 
-    color:#000000; 
-    background-color:#FFFFFF; 
+  padding-top:.5em; 
+  font-weight:bold;
+}</code></pre>
+				</section>
+
+				<section id="defaultColours">
+					<h5>In defaultColors.css</h5>
+<pre xml:space="preserve"><code class="language-css">body, p { 
+  color:#000000; 
+  background-color:#FFFFFF; 
 }
 
 h1, h2, h3 {
-        color:#990000; 
-        background-color:#FFFFFF;
-}
-
-In altColors1.css:
-
-body, h1, h2, h3, p, a { 
-    color:#000066; 
-    background-color:#FFFFFF; 
-}
-
-In altColors2.css:
-
-body, h1, h2, h3, p, a { 
-    color:#FFFF33; 
-       background-color:#000000; 
-}
-
-In altColors3.css:
-
-body, h1, h2, h3, p, a { 
-    color:#000000; 
-    background-color:#FFFF99; 
-}
-
-In altColors4.css:
-
-body, h1, h2, h3, p, a { 
-    color:#000000; 
-    background-color:#FFFFFF; 
-}
-  </pre>
-         
-            <p>The JavaScript components:</p>
-         
-         <pre xml:space="preserve">
-function changeColors (newCSS)
-{
+  color:#990000; 
+  background-color:#FFFFFF;
+}</code></pre>	
+				</section>
+				<section id="altColors1">	
+
+					<h5>In altColors1.css</h5>
+
+<pre xml:space="preserve"><code class="language-css">body, h1, h2, h3, p, a { 
+  color:#000066; 
+  background-color:#FFFFFF; 
+}</code></pre>
+				</section>
+				<section id="altColors2">
+					<h5>In altColors2.css</h5>
+<pre xml:space="preserve"><code class="language-css">body, h1, h2, h3, p, a { 
+  color:#FFFF33; 
+  background-color:#000000; 
+}</code></pre>
+				</section>
+				<section id="altColors3">
+
+					<h5>In altColors3.css</h5>
+<pre xml:space="preserve"><code class="language-css">body, h1, h2, h3, p, a { 
+  color:#000000; 
+  background-color:#FFFF99; 
+}</code></pre>
+				</section>
+				<section id="altColors4">
+
+<h5>In altColors4.css</h5>
+<pre xml:space="preserve"><code class="language-css">body, h1, h2, h3, p, a { 
+  color:#000000; 
+  background-color:#FFFFFF; 
+}</code></pre>
+				</section>
+			</section>
+			<section id="javascriptComponents">
+			
+				<h4>The JavaScript components</h4>
+			
+<pre xml:space="preserve"><code class="language-javascript">function changeColors (newCSS){
   document.getElementById('currentCSS').href = newCSS; 
-}
-</pre>
-         
-            <p class="working-example">A working example of this code, <a href="../../working-examples/script-swap-css/">Using a JavaScript control to apply a different external CSS file</a>, is available.</p>
-         
-      </section>
-      <section class="example">
-         <h3>Using a client-side JavaScript to change a CSS property </h3>
-         
-            <p>This example can be used for simple changes to a section of content and may be less practical for complex sites or pages. The example uses a client-side JavaScript to change the class name to visually present the user's color selection (from a defined set of options) as a background for highlighting specific content. </p>
-            <div class="note">
-               <p>The following code includes JavaScript calls within the XHTML code to aid understanding of the technique. However, the author is encouraged to use current best practice for including JavaScript (see resources for more information about Unobtrusive JavaScript and progressive enhancement). </p>
-            </div>
-            <p>The XHTML components:</p>
-         
-         <pre xml:space="preserve">
-&lt;h1&gt;Product comparison&lt;/h1&gt;
+}</code></pre>
+			
+			<p class="working-example">A working example of this code, <a href="../../working-examples/script-swap-css/">Using a JavaScript control to apply a different external CSS file</a>, is available.</p>
+			</section>
+		</section>
+		<section class="example">
+			<h3>Using a client-side JavaScript to change a CSS property</h3>
+			
+			<p>This example can be used for simple changes to a section of content and may be less practical for complex sites or pages. The example uses a client-side JavaScript to change the class name to visually present the user's color selection (from a defined set of options) as a background for highlighting specific content. </p>
+			<div class="note">
+				<p>The following code includes JavaScript calls within the HTML code to aid understanding of the technique. However, the author is encouraged to use current best practice for including JavaScript (see resources for more information about Unobtrusive JavaScript and progressive enhancement). </p>
+			</div>
+			<section id="the-html2">
+				<h4>The HTML components</h4>
+			
+<pre xml:space="preserve"><code class="language-html">&lt;h1&gt;Product comparison&lt;/h1&gt;
 &lt;p&gt;The products you selected to compare are listed below. 
-Any differences between the products are highlighted and italicized.&lt;/p&gt;
+  Any differences between the products are highlighted and italicized.&lt;/p&gt;
 &lt;p class="inlinePara"&gt;Change hightlight color: &lt;/p&gt;
 &lt;ul class="inline"&gt;
-  &lt;li&gt;&lt;a href="#" onClick="changeColor('hghltLightYellow');return false;" 
-    class="hghltLightYellow"&gt;light yellow&lt;/a&gt;&lt;/li&gt;
-  &lt;li&gt;&lt;a href="#" onClick="changeColor('hghltBrightYellow');return false;" 
-    class="hghltBrightYellow"&gt;bright yellow&lt;/a&gt;&lt;/li&gt;
-  &lt;li&gt;&lt;a href="#" onClick="changeColor('hghltLightBlue');return false;" 
-    class="hghltLightBlue"&gt;light blue&lt;/a&gt;&lt;/li&gt;
-  &lt;li&gt;&lt;a href="#" onClick="changeColor('hghltBrightBlue');return false;" 
-    class="hghltBrightBlue"&gt;bright blue&lt;/a&gt;&lt;/li&gt;
-  &lt;li&gt;&lt;a href="#" onClick="changeColor('hghltLightRed');return false;" 
-    class="hghltLightRed"&gt;light red&lt;/a&gt;&lt;/li&gt;
-  &lt;li&gt;&lt;a href="#" onClick="changeColor('hghltDrkRed');return false;" 
-    class="hghltDrkRed"&gt;dark red&lt;/a&gt;&lt;/li&gt;
+  &lt;li&gt;
+    &lt;a href="#" onClick="changeColor('hghltLightYellow');return false;" 
+     class="hghltLightYellow"&gt;light yellow&lt;/a&gt;
+  &lt;/li&gt;
+  &lt;li&gt;
+    &lt;a href="#" onClick="changeColor('hghltBrightYellow');return false;" 
+     class="hghltBrightYellow"&gt;bright yellow&lt;/a&gt;
+  &lt;/li&gt;
+  &lt;li&gt;
+    &lt;a href="#" onClick="changeColor('hghltLightBlue');return false;" 
+     class="hghltLightBlue"&gt;light blue&lt;/a&gt;&lt;/li&gt;
+	&lt;li&gt;
+    &lt;a href="#" onClick="changeColor('hghltBrightBlue');return false;" 
+     class="hghltBrightBlue"&gt;bright blue&lt;/a&gt;
+  &lt;/li&gt;
+  &lt;li&gt;
+    &lt;a href="#" onClick="changeColor('hghltLightRed');return false;" 
+     class="hghltLightRed"&gt;light red&lt;/a&gt;
+  &lt;/li&gt;
+  &lt;li&gt;
+    &lt;a href="#" onClick="changeColor('hghltDrkRed');return false;" 
+     class="hghltDrkRed"&gt;dark red&lt;/a&gt;
+  &lt;/li&gt;
 &lt;/ul&gt;
-&lt;table width="400" border="1"&gt;
+&lt;table&gt;
   &lt;tr&gt;
     &lt;td&gt; &lt;/td&gt;
     &lt;th scope="col"&gt;Product 1&lt;/th&gt;
@@ -184,15 +228,12 @@ <h3>Using a client-side JavaScript to change a CSS property </h3>
     &lt;td&gt;Yes&lt;/td&gt;
     &lt;td&gt;Yes&lt;/td&gt;
   &lt;/tr&gt;
-&lt;/table&gt;
-
-</pre>
-         
-            <p>The CSS components:</p>
-         
-         <pre xml:space="preserve">
-body { color:#000000; background-color:#FFFFFF; }
-
+&lt;/table&gt;</code></pre>
+			</section>
+			<section id="the-css2">
+				<h4>The CSS components</h4>
+			
+<pre xml:space="preserve"><code class="language-css">body { color:#000000; background-color:#FFFFFF; }
 .hghltLightYellow { color: #000000; background-color: #FFFF99; font-style:oblique; }
 .hghltBrightYellow { color: #000000; background-color: #FFFF00; font-style:oblique; }
 .hghltLightBlue { color: #000000; background-color: #33FFFF; font-style:oblique; }
@@ -200,339 +241,171 @@ <h3>Using a client-side JavaScript to change a CSS property </h3>
 .hghltLightRed { color: #000000; background-color: #FF6266; font-style:oblique; }
 .hghltDrkRed { color: #FFFFFF; background-color: #993300; font-style:oblique; }
 
-.inlinePara {display:inline; }
-.inline {display: inline; margin-left:0px; padding-left:0px; line-height:3em; }
+.inlinePara { display:inline; }
+.inline { display: inline; margin-left:0px; padding-left:0px; line-height:3em; }
 .inline li { display:inline; }
-.inline li a {padding: 0.5em 1em; border: 2px solid #000000; }
-
-</pre>
-         
-            <p>The JavaScript components:</p>
-         
-         <pre xml:space="preserve">
-function changeColor(hghltColor)
-{
-  // collects table data cells into an array
- 
- var els = document.getElementsByTagName('td');
+.inline li a { padding: 0.5em 1em; border: 2px solid #000000; }</code></pre>
+			</section>
+			<section id="javascriptComponents2">
+				<h4>The JavaScript components</h4>
+			
+<pre xml:space="preserve"><code class="language-javascript">function changeColor(hghltColor) {
+  // collects table data cells into an array 
+  var els = document.getElementsByTagName('td');
 
   // for each item in the array, look for a class name starting with "hghlt"
   // if found, change the class value to the current selection
   // note that this script assumes the  'td' class attribute is only used for highlighting
 
-  for (var i=0; i&lt;els.length; i++)
-  {
+  for (var i=0; i&lt;els.length; i++) {
     if (els[i].className.indexOf("hghlt") == 0) { els[i].className = hghltColor; }
   }
-}
-
-</pre>
-         
-            <p class="working-example">A working example of this code, <a href="../../working-examples/script-change-css-property/">Using a client-side JavaScript to change a CSS property</a>, is available.</p>
-         
-      </section>
-      <section class="example">
-         <h3>Using PHP $_GET to apply a different external CSS file </h3>
-         
-            <p>This simple example uses PHP $_GET to assign one of two available external style sheets. Similar functionality could be achieved using a variety of PHP features. The example applies only to the current page view. In a production environment, it would be advisable to save this preference in a cookie or server-side user profile, so that users would only have to make the selection once per site. </p>
-            <p>The following code is PHP, but a similar approach would work with a variety of server-side technologies. </p>
-            <p>The PHP and XHTML components: </p>
-         
-         <pre xml:space="preserve">
-At the beginning of the PHP page:
-
-&lt;?php
-$thestyle = $_GET['set'];
-if ($thestyle == "style1")
-	{
-	$thestyle = "style2";
-	}
-else
-	{
-	$thestyle = "style1";
-	}
-?&gt;
-
-In the &lt;head&gt; section:
-
-   &lt;link rel="stylesheet" type="text/css" media="screen" href="&lt;?php echo($thestyle);?&gt;.css" &gt;
-
-In &lt;body&gt; section:
-
-&lt;?php
-if ($thestyle == "style1") {
-	echo "&lt;a href=\"index.php?set=style1\"&gt;Switch to Style Sheet Two&lt;/a&gt;";
-	}
-else {
-	echo "&lt;a href=\"index.php?set=style2\"&gt;Switch to Style Sheet One&lt;/a&gt;";
-	}
+}</code></pre>
+			</section>
+			
+			<p class="working-example">A working example of this code, <a href="../../working-examples/script-change-css-property/">Using a client-side JavaScript to change a CSS property</a>, is available.</p>
+			
+		</section>
+		<section class="example">
+			<h3>Using PHP $_GET to apply a different external CSS file </h3>
+			
+			<p>This simple example uses PHP $_GET to assign one of two available external style sheets. Similar functionality could be achieved using a variety of PHP features. The example applies only to the current page view. In a production environment, it would be advisable to save this preference in a cookie or server-side user profile, so that users would only have to make the selection once per site. </p>
+			<p>The following code is PHP, but a similar approach would work with a variety of server-side technologies. </p>
+
+			<section id="php-html">
+				<h4>The PHP and HTML components</h4>
+				<section id="start-php">
+					<h5>At the beginning of the PHP page</h5>
+<pre xml:space="preserve"><code class="language-php">&lt;?php
+  $thestyle = $_GET['set'];
+  if ($thestyle == "style1") {
+    $thestyle = "style2";
+  }
+  else {
+    $thestyle = "style1";
+  }
+?&gt;</code></pre>
+				</section>
+				<section id="head-section">
+
+					<h5>In the &lt;head&gt; section</h5>
+<pre xml:space="preserve"><code class="language-html">&lt;link rel="stylesheet" media="screen" href="&lt;?php echo($thestyle);?&gt;.css"&gt;</code></pre>
+				</section>
+				<section id="body-section">
+					<h5>In &lt;body&gt; section</h5>
+<pre xml:space="preserve"><code class="language-html">&lt;?php
+  if ($thestyle == "style1") {
+    echo "&lt;a href=\"index.php?set=style1\"&gt;Switch to Style Sheet Two&lt;/a&gt;";
+  }
+  else {
+    echo "&lt;a href=\"index.php?set=style2\"&gt;Switch to Style Sheet One&lt;/a&gt;";
+  }
 ?&gt;
-
+	
 &lt;div id="mainbody"&gt;
   &lt;h1&gt;Conference report&lt;/h1&gt;
   &lt;p&gt;Last week's conference presented an impressive line-up of speakers...&lt;/p&gt;
-&lt;/div&gt;
-
-</pre>
-         
-            <p>The CSS components: </p>
-         
-         <pre xml:space="preserve">
-In style1.css:
-
-  body, p { color:#000000; background-color:#FFFFFF; }
-  h1, h2, h3 {color:#990000; background-color:#FFFFFF; }
-
-In style2.css:
-
-  body, h1, h2, h3, p, a { color:#FFFF00; background-color:#000000; }
-
-</pre>
-         
-            <p class="working-example">A working example of this code, <a href="../../working-examples/uri-parameter-choose-stylesheet/">Using PHP $_GET to apply a different external CSS file</a>, is available.</p>
-         
-      </section>
-      <section class="example">
-         <h3>Using JSP to provide an alternative style sheet </h3>
-         
-            <p>The example below uses two files </p>
-            <ul>
-               <li>a Java Server Page (JSP) with the form and the form processing code, and </li>
-               <li>an include file with functions used by the previous page and in other pages use the same style. </li>
-            </ul>
-            <p>The server-side code outputs a normal link element for the stylesheet that the user chooses and link elements with "alternate stylesheet" for the other styles. The code can thus be used as a fallback for the client-side code in the second example. </p>
-            <p>The JSP page with the form: </p>
-         
-         <pre xml:space="preserve">
- &lt;%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"
- %&gt;&lt;%@include file="_jsp/styleswitch.jsp"%&gt;&lt;?xml version="1.0" encoding="UTF-8"?&gt;
- &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
-   "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
- &lt;html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"&gt;
- &lt;head&gt;
-   &lt;meta content="text/html; charset=utf-8" http-equiv="Content-Type" /&gt;
-   &lt;title&gt;Change Style&lt;/title&gt;
-   &lt;%
-     String fStyle = "";
-     String styleName = "style";
-     String defaultStyle = "default";
-     Cookie[] cookies = request.getCookies();
- 
-     // get style from post request parameters
-     if (request.getMethod().equals("POST") &amp;&amp; request.getParameter("styleSelect") != null) {
-       fStyle = request.getParameter("styleSelect");
-       // code that validates user input (security) not shown
-       
-       if (fStyle.equals("nostyle")) { // user prefers no author style
-       } else { // user requests author style
-         out.println(createStyleLinks(fStyle).toString());
-       }
-       
-       storeStylePreferenceCookie(request, response, fStyle);
-     } else if (request.getMethod().equals("GET")) { 
-     // GET request; get style from cookie; else default style links
-       // get style from cookie
-       if (cookies != null) {
-         // get style from cookies
-         fStyle = getStyleFromCookies(cookies);
- 
-         if ( !fStyle.equals("NULL_STYLE") ) { // user requests author style
-             out.println(createStyleLinks(fStyle).toString());
-         } else { // no cookie for style; process request for style preference
-           // default style links
-           out.println(createStyleLinks(defaultStyle).toString());
-         }
-       } else { // GET request without cookies: default styles
-         out.println(createStyleLinks(defaultStyle).toString());
-       }//end else cookies
-     }
-   %&gt;
- &lt;/head&gt;
- &lt;body id="home"&gt;
-   &lt;form action="_styleSwitch.jsp" method="post" id="styleswitchform" name="styleswitchform"&gt;
-     &lt;p&gt;&lt;label for="styleSelect"&gt;Select style: &lt;/label&gt;
-       &lt;select id="styleSelect" name="styleSelect"&gt;
-         &lt;option value="default"&gt;Default (shades of green)&lt;/option&gt;
-         &lt;option value="wonb"&gt;White on black&lt;/option&gt;
-         &lt;option value="bonw"&gt;Black on white&lt;/option&gt;
-       &lt;/select&gt;
-       &lt;input type="submit" value="Change Style" /&gt;
-     &lt;/p&gt;
-   &lt;/form&gt;
- &lt;/body&gt;
- &lt;/html&gt;
- </pre>
-         
-            <p>The styleswitcher.jsp file included in the previous file: </p>
-         
-         <pre xml:space="preserve">
- &lt;%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%&gt;
- &lt;%!
-   /**
-    * Get the links (link elements) to the CSS files based on cookies, ...
-   */
-   private String getStyleLinks(HttpServletRequest request) {
-     String styleLinks = "";
-     Cookie[] cookies = request.getCookies();
-     String defaultStyle = "default";
-     String tempStyle = "";
-     // GET request; get style from cookie; else default style links
-     // get style from cookie
-     if (cookies != null) {
-       // get style from cookies
-       tempStyle = getStyleFromCookies(cookies);
- 
-       if ( tempStyle.equals("NULL_STYLE") ) { 
-         // no cookie for style; process request for style preference
-         // default style links
-         styleLinks = createStyleLinks(defaultStyle).toString();
-       } else { // user requests author style
-         styleLinks = createStyleLinks(tempStyle).toString();
-       }
-     } else { // GET request without cookies: default styles
-       styleLinks = createStyleLinks(defaultStyle).toString();
-     }//end else cookies
-     
-     return styleLinks;
-   }
- 
-   /**
-    * Get style cookie from request
-   */
-   private String getStyleFromCookies( Cookie[] cookies ) {
-     String fStyle = "NULL_STYLE";
-     for (int i = 0; i &lt; cookies.length; i++) {
-       Cookie cookie = cookies[i];
-       String name = cookie.getName();
-       
-       if ( name.equals("style") ) {
-         fStyle = cookie.getValue();
-         // code that validates cookie value (security) not shown
-       }
-     }
-     return fStyle;
-   }
- 
-   /**
-    * Store the style preference in a persistent cookie
-   */
-   private void storeStylePreferenceCookie(HttpServletRequest request, 
-     HttpServletResponse response, String theStyle) {
-     final int ONE_YEAR = 60 * 60 * 24 * 365;
-     Cookie styleCookie = new Cookie("style", theStyle);
-     styleCookie.setMaxAge(ONE_YEAR);
-     response.addCookie(styleCookie);
-   }
- 
-   /**
-    * Create the link elements for the stylesheets
-   */
-   private StringBuffer createStyleLinks(String prefStyle) {
-     StringBuffer theStyleLinks = new StringBuffer();
-     //two-dimensional array with identifiers (adding '.css' gives the name of the CSS file) 
-     // and strings for the title attribute of the link element
-    // the identifiers must correspond to the in the "value" attributes in the "option"
-    // elements in the style switcher form
-     String [] [] styles = {
-       { "default", "Default style"},
-       { "wonb", "White on black"},
-       { "bonw", "Black on white"}
-     };
- 
-     // loop over 2dim array: if styles[i][1] matches prefStyle, 
-     // output as normal, else as alternate stylesheet
-     for (int i = 0; i &lt; styles.length; i++) {
-       if ( styles[i][0].equals(prefStyle) ) { // output pref stylesheet as normal stylesheet
-         theStyleLinks.append("&lt;link rel=\"stylesheet\" href=\"_css/").append(styles[i][0])
-           .append(".css\" title=\"").append(styles[i][1]).append("\" type=\"text/css\" /&gt;").append("\n");
-       } else { // output other stylesheets as alternate stylesheets
-         theStyleLinks.append("&lt;link rel=\"alternate stylesheet\" href=\"_css/")
-           .append(styles[i][0]).append(".css\" title=\"").append(styles[i][1])
-           .append("\" type=\"text/css\" /&gt;").append("\n");
-       }
-     } // end for loop
- 
-     return theStyleLinks;
-   }
- %&gt;
- </pre>
-         
-            <p>Other JSP pages can use this code by means of the following include and scriptlet code:</p>
-         
-         <pre xml:space="preserve">
- &lt;%@include file="_jsp/styleswitch.jsp"%&gt;&lt;% out.println(getStyleLinks(request)); %&gt;
- </pre>
-      </section>
-   </section><section id="tests"><h2>Tests</h2>
-      <section class="procedure"><h3>Procedure</h3>
-         <ol>
-            <li>Check that the Web page contains controls that allow users to select alternate presentations. </li>
-            <li>Check that the control changes the presentation by modifying individual CSS style properties or by activating an alternate style sheet.</li>
-            <li>Verify that the resulting page is a conforming alternate version for the original page. </li>
-         </ol>
-      </section>
-      <section class="results"><h3>Expected Results</h3>
-         <ul>
-            <li>All of the above checks are true.</li>
-         </ul>
-      </section>
-   </section><section id="related"><h2>Related Techniques</h2><ul>
-      <li><a href="../general/G140">G140</a></li>
-      <li><a href="../general/G174">G174</a></li>
-      <li><a href="../general/G178">G178</a></li>
-      <li><a href="../general/G188">G188</a></li>
-      <li><a href="../general/G189">G189</a></li>
-      <li><a href="../general/G191">G191</a></li>
-      <li><a href="../general/G206">G206</a></li>
-      <li><a href="../css/C7">C7</a></li>
-      <li><a href="../css/C22">C22</a></li>
-      <li><a href="../client-side-script/SCR38">SCR38</a></li>
-   </ul></section><section id="resources"><h2>Resources</h2>
-      
-         <ul>
-            <li>
-                  <a href="http://www.456bereastreet.com/archive/200608/build_your_own_php_style_sheet_switcher/">Build your own PHP style sheet switcher</a>
-               </li>
-         </ul>
-      
-      <section>
-         <h4>Using cookies</h4>
-         <p>A user's selection can be made persistent across pages, and from one visit to another, by storing information on the user's computer via a cookie. This functionality requires cookies to be supported by and allowed on the user's computer. Cookies can be created, read, modified and erased by using client-side scripts, such as Javascript, or by server-side scripts, such as CGI scripts. Reliance on client-side technologies will require the support and availability of the technology on the user's computer in addition to supporting and allowing cookies. </p>
-         <p>Information on creating and using cookies can be found on the web. Here are some suggestions: </p>
-         <ul>
-            <li>
-                  <a href="http://www.quirksmode.org/js/cookies.html">JavaScript - Cookies</a>
-               </li>
-            <li>
-                  <a href="http://webdesign.about.com/od/cookies/a/aa083198.htm">Write Your First HTTP Cookie</a>
-               </li>
-            <li>
-                  <a href="http://www.w3schools.com/ASP/asp_cookies.asp">ASP Cookies</a>
-               </li>
-            <li>
-                  <a href="http://ruby-doc.com/docs/ProgrammingRuby/">Programming Ruby</a>
-               </li>
-         </ul>
-         <p>It is recommended that authors test for cookie support and provide an extra control if cookies are not supported. This extra control should include information about the persistence of the selection, such as "Apply selection to all pages". The message or page presented to the user in response to selecting the extra control provides information about the cookie requirement and their options for solving it. In the event that the user is unable to turn cookie support on, include a statement about what this will mean for them if they choose to continue to browse the site and provide information about how they can adjust their user agent to achieve similar results. </p>
-         <p>For example, "Your browser is not configured to accept cookies. On this site, cookies are required in order to apply your selected changes across all of the pages of the site. To find out how to enable cookies on your computer, visit <a href="https://support.google.com/accounts/answer/61416?rd=1">How to Enable Cookies</a>. Note that this may require administrative rights for the computer you are using. Without cookie support, your settings will not persist to include other pages on this site. We are endeavoring to provide this functionality without relying on your computer's capability. In the meantime, you will be able to select the change for each page that you visit." </p>
-      </section>
-      <section>
-         <h4>Progressive Enhancement and Unobtrusive Javascript</h4>
-         <p>Current best practice for implementing JavaScript in an HTML or XHTML page is to use it in a way that separates the behavior of content from its structure and presentation. The terms 'Progressive Enhancement' and 'Unobtrusive JavaScript' are often used to describe scripts that enhance or improve the functionality of a page, yet transform gracefully so that content continues to function even when JavaScript is not supported.</p>
-         <p>Here are some suggested starting points for more information: </p>
-         <ul>
-            <li>
-                  <a href="http://alistapart.com/article/behavioralseparation">Behavioral Separation</a>
-               </li>
-            <li>
-                  <a href="https://en.wikipedia.org/wiki/Unobtrusive_JavaScript">Wikipedia: Unobtrusive JavaScript</a>
-               </li>
-            <li>
-                  <a href="http://javascript.about.com/library/blunobtrusive.htm">About.com: Unobtrusive JavaScript</a>
-               </li>
-            <li>
-                  <a href="https://en.wikipedia.org/wiki/Progressive_enhancement">Progressive enhancement</a>
-               </li>
-         </ul>
-      </section>
-   </section></body></html>
\ No newline at end of file
+&lt;/div&gt;</code></pre>
+				</section>
+			</section>
+
+
+			<section>
+				<h4>The CSS components</h4>
+				<section id="style1-css">
+					<h5>In style1.css</h5>
+			
+<pre xml:space="preserve"><code class="language-css">body, p { color:#000000; background-color:#FFFFFF; }
+h1, h2, h3 {color:#990000; background-color:#FFFFFF; }</code></pre>
+				</section>
+				<section id="style2-css">
+
+					<h5>In style2.css</h5>
+<pre xml:space="preserve"><code class="language-css">body, h1, h2, h3, p, a { color:#FFFF00; background-color:#000000; }</code></pre>
+				</section>
+			</section>
+		</section>
+			<p class="working-example">A working example of this code, <a href="../../working-examples/uri-parameter-choose-stylesheet/">Using PHP $_GET to apply a different external CSS file</a>, is available.</p>
+			
+	</section>
+	<section id="tests">
+		<h2>Tests</h2>
+		<section class="procedure">
+			<h3>Procedure</h3>
+			<ol>
+				<li>Check that the Web page contains controls that allow users to select alternate presentations. </li>
+				<li>Check that the control changes the presentation by modifying individual CSS style properties or by activating an alternate style sheet.</li>
+				<li>Verify that the resulting page is a conforming alternate version for the original page. </li>
+			</ol>
+		</section>
+		<section class="results">
+			<h3>Expected Results</h3>
+			<ul>
+				<li>All of the above checks are true.</li>
+			</ul>
+		</section>
+	</section>
+	<section id="related">
+		<h2>Related Techniques</h2>
+		<ul>
+			<li><a href="../general/G140">G140</a></li>
+			<li><a href="../general/G174">G174</a></li>
+			<li><a href="../general/G178">G178</a></li>
+			<li><a href="../general/G188">G188</a></li>
+			<li><a href="../general/G189">G189</a></li>
+			<li><a href="../general/G191">G191</a></li>
+			<li><a href="../general/G206">G206</a></li>
+			<li><a href="../css/C7">C7</a></li>
+			<li><a href="../css/C22">C22</a></li>
+			<li><a href="../client-side-script/SCR38">SCR38</a></li>
+		</ul>
+	</section>
+	<section id="resources">
+		<h2>Resources</h2>
+		
+		<ul>
+			<li>
+				<a href="http://www.456bereastreet.com/archive/200608/build_your_own_php_style_sheet_switcher/">Build your own PHP style sheet switcher</a>
+			</li>
+		</ul>
+		
+		<section>
+			<h3>Using cookies</h3>
+			<p>A user's selection can be made persistent across pages, and from one visit to another, by storing information on the user's computer via a cookie. This functionality requires cookies to be supported by and allowed on the user's computer. Cookies can be created, read, modified and erased by using client-side scripts, such as Javascript, or by server-side scripts, such as CGI scripts. Reliance on client-side technologies will require the support and availability of the technology on the user's computer in addition to supporting and allowing cookies. </p>
+			<p>Information on creating and using cookies can be found on the web. Here are some suggestions: </p>
+			<ul>
+				<li>
+					<a href="http://www.quirksmode.org/js/cookies.html">JavaScript - Cookies</a>
+				</li>
+				<li>
+					<a href="http://webdesign.about.com/od/cookies/a/aa083198.htm">Write Your First HTTP Cookie</a>
+				</li>
+				<li>
+					<a href="http://www.w3schools.com/ASP/asp_cookies.asp">ASP Cookies</a>
+				</li>
+				<li>
+					<a href="http://ruby-doc.com/docs/ProgrammingRuby/">Programming Ruby</a>
+				</li>
+			</ul>
+			<p>It is recommended that authors test for cookie support and provide an extra control if cookies are not supported. This extra control should include information about the persistence of the selection, such as "Apply selection to all pages". The message or page presented to the user in response to selecting the extra control provides information about the cookie requirement and their options for solving it. In the event that the user is unable to turn cookie support on, include a statement about what this will mean for them if they choose to continue to browse the site and provide information about how they can adjust their user agent to achieve similar results. </p>
+			<p>For example, "Your browser is not configured to accept cookies. On this site, cookies are required in order to apply your selected changes across all of the pages of the site. To find out how to enable cookies on your computer, visit <a href="https://support.google.com/accounts/answer/61416?rd=1">turn cookies on or off</a>. Note that this may require administrative rights for the computer you are using. Without cookie support, your settings will not persist to include other pages on this site. We are endeavoring to provide this functionality without relying on your computer's capability. In the meantime, you will be able to select the change for each page that you visit." </p>
+		</section>
+		<section>
+			<h3>Progressive Enhancement and Unobtrusive Javascript</h3>
+			<p>Current best practice for implementing JavaScript in an HTML page is to use it in a way that separates the behavior of content from its structure and presentation. The terms 'Progressive Enhancement' and 'Unobtrusive JavaScript' are often used to describe scripts that enhance or improve the functionality of a page, yet transform gracefully so that content continues to function even when JavaScript is not supported.</p>
+			<p>Here are some suggested starting points for more information:</p>
+			<ul>
+				<li>
+					<a href="http://alistapart.com/article/behavioralseparation">Behavioral Separation</a>
+				</li>
+				<li>
+					<a href="https://en.wikipedia.org/wiki/Unobtrusive_JavaScript">Wikipedia: Unobtrusive JavaScript</a>
+				</li>
+				<li>
+					<a href="https://en.wikipedia.org/wiki/Progressive_enhancement">Progressive enhancement</a>
+				</li>
+			</ul>
+		</section>
+	</section>
+</body>
+</html>
\ No newline at end of file
diff --git a/techniques/css/C30.html b/techniques/css/C30.html
index d106dadfcc..d83a32b31d 100644
--- a/techniques/css/C30.html
+++ b/techniques/css/C30.html
@@ -1,107 +1,134 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using CSS to replace text with images of text and providing user interface controls to switch</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Using CSS to replace text with images of text and providing user interface controls to switch</h1><section class="meta"><p class="id">ID: C30</p><p class="technology">Technology: css</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
-      <p>Any technology that supports CSS. </p>
-   </section><section id="description"><h2>Description</h2>
-      <p>The objective of this technique is to demonstrate how CSS can be used to replace structured HTML text with images of text in a way that makes it possible for users to view content according to their preferences. To use this technique, an author starts by creating an HTML page that uses semantic elements to mark up the structure of the page. The author then designs two or more stylesheets for that page. One stylesheet presents the HTML text as text and the second uses CSS features to replace some of the HTML text with images of text. Finally, through the use of server-side or client-side scripting, the author provides a control that allows the user to switch between the available views. </p>
-      <p>This technique can be used to meet Success Criterion 1.4.5 or 1.4.9 if a presentation that does not include images of text is available and as long as the user interface control that is provided to allow users to switch to an alternate presentation meets the relevant criteria. Where possible, authors should deliver the presentation that does not include images of text as the default presentation. In addition, the control used to switch should be located near the beginning of the page. </p>
-      <p>A variety of "image replacement" techniques have been developed to address a variety of user agent, configuration and compatibility with assistive technology issues (See resources for more information). While there are a variety of approaches authors may use to replace text, it is important to consider compatibility with assistive technology, whether the technique will work correctly if scripting, CSS, images (or combinations of these) are turned off. Since it can be difficult to find a single solution that works in all cases, this technique recommends the use of a control that allows users to switch to a presentation that does not include an image replacement technique. </p>
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>Using CSS to replace text with images of text and providing user interface controls to switch</title>
+		<link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+	</head>
+	<body>
+		<h1>Using <abbr title="Cascading Style Sheets">CSS</abbr> to replace text with images of text and providing user interface controls to switch</h1>
+		<section class="meta">
+			<p class="id">ID: C30</p>
+			<p class="technology">Technology: css</p>
+			<p class="type">Type: Technique</p>
+		</section>
+		<section id="applicability">
+			<h2>When to Use</h2>
+      <p>CSS.</p>
+		</section>
+		<section id="description">
+			<h2>Description</h2>
+      <p>The objective of this technique is to demonstrate how CSS can be used to replace structured <abbr title="HyperText Markup Language">HTML</abbr> text with images of text in a way that makes it possible for users to view content according to their preferences. To use this technique, an author starts by creating an HTML page that uses semantic elements to mark up the structure of the page. The author then designs two or more stylesheets for that page. One stylesheet presents the HTML text as text and the second uses CSS features to replace some of the HTML text with images of text. Finally, through the use of server-side or client-side scripting, the author provides a control that allows the user to switch between the available views.</p>
+      <p>This technique can be used to meet Success Criterion 1.4.5 or 1.4.9 if a presentation that does not include images of text is available and as long as the user interface control that is provided to allow users to switch to an alternate presentation meets the relevant criteria. Where possible, authors should deliver the presentation that does not include images of text as the default presentation. In addition, the control used to switch should be located near the beginning of the page.</p>
+      <p>A variety of "image replacement" techniques have been developed to address a variety of user agent, configuration and compatibility with assistive technology issues (See resources for more information). While there are a variety of approaches authors may use to replace text, it is important to consider compatibility with assistive technology, whether the technique will work correctly if scripting, CSS, images (or combinations of these) are turned off. Since it can be difficult to find a single solution that works in all cases, this technique recommends the use of a control that allows users to switch to a presentation that does not include an image replacement technique.</p>
       <div class="note">
-         <p>This technique can be used in combination with a style switching technique to present a page that is a <a>conforming alternate version</a> for non-conforming content. Refer to <a href="#C29"></a> and <a href="https://www.w3.org/WAI/WCAG21/Understanding/conformance#conforming-alt-versions">Understanding Conforming Alternate Versions</a> for more information.</p>
+				<p>This technique can be used in combination with a style switching technique to present a page that is a <a>conforming alternate version</a> for non-conforming content. Refer to <a href="C29">C29</a> and <a href="../../Understanding/conformance#conforming-alt-versions">Understanding Conforming Alternate Versions</a> for more information.</p>
       </div>
-   </section><section id="examples"><h2>Examples</h2>
+		</section>
+		<section id="examples">
+			<h2>Examples</h2>
       <section class="example">
-         
-            <p>A design studio site uses a style switcher to allow users to view two presentations of their home page. For the default version, the heading text is replaced with images of text. A control on the page allows users to switch to a version that presents the headings as text. </p>
-            <p>The CSS component: </p>
-         
-         <pre xml:space="preserve">...
-&lt;div id="Header"&gt; 
+				<h3>Replacing heading text with images of text</h3>
+				<p>A design studio site uses a style switcher to allow users to view two presentations of their home page. For the default version, the heading text is replaced with images of text. A control on the page allows users to switch to a version that presents the headings as text.</p>
+				<section id="the-html">
+					<h4>The HTML component</h4>
+<pre xml:space="preserve"><code class="language-html">&lt;div id="Header"&gt; 
   &lt;h1&gt;&lt;span&gt;Pufferfish Design Studio&lt;/span&gt;&lt;/h1&gt; 
   &lt;h2&gt;&lt;span&gt;Surprising Identity and Design Solutions&lt;/span&gt;&lt;/h2&gt; 
-  &lt;/div&gt; 
-...
-</pre>
+&lt;/div&gt;</code></pre>
+				</section>
          
-            <p>The CSS for the presentation that includes images of text follows. Note that the CSS uses positioning to place the contents of the heading elements offscreen so that the text remains available to screen reader users.</p>
+				<section id="the-css-images">
+					<h4>The CSS for the presentation that includes images of text</h4>
+					<p>Note that the CSS uses positioning to place the contents of the heading elements offscreen so that the text remains available to screen reader users.</p>
          
-         <pre xml:space="preserve">...
-#Header h1 {
-	background-image: url(pufferfish-logo.png);
-	height: 195px;
-	width: 290px;
-	background-repeat: no-repeat;
-	margin-top: 0;
-	position: absolute;
-	}
+<pre xml:space="preserve"><code class="language-css">#Header h1 {
+  background-image: url(pufferfish-logo.png);
+  height: 195px;
+  width: 290px;
+  background-repeat: no-repeat;
+  margin-top: 0;
+  position: absolute;
+}
 #Header h1 span {
-	position: absolute;
-        left: -999em;
-	}
+  position: absolute;
+  left: -999em;
+}
 #Header h2 {
-	background-image: url(beauty.png);
-	background-repeat: no-repeat;
-	height: 234px;
-	width: 33px;
-	margin-left: 8px;
-	position: absolute;
-	margin-top: 250px;
-	}
+  background-image: url(beauty.png);
+  background-repeat: no-repeat;
+  height: 234px;
+  width: 33px;
+  margin-left: 8px;
+  position: absolute;
+  margin-top: 250px;
+}
 #Header h2 span {
-	position: absolute;
-        left: -999em;
-	}
-	</pre>
+  position: absolute;
+  left: -999em;
+}</code></pre>
+				</section>
+
+				<section id="the-css-non-images">
          
-            <p>The CSS for the presentation that does not include images of text. </p>
+					<h4>The CSS for the presentation that does not include images of text</h4>
          
-         <pre xml:space="preserve">...
-#Header h1 {
-	font: normal 200%/100% Garamond, "Times New Roman", serif;
-	margin-bottom: 0;
-	color: #000099;
-	background: #ffffff;
-	}
-
+<pre xml:space="preserve"><code class="language-css">#Header h1 {
+  font: normal 200%/100% Garamond, "Times New Roman", serif;
+  margin-bottom: 0;
+  color: #000099;
+  background: #ffffff;
+}
 #Header h2 {
-	font: normal 160%/100% Garamond, "Times New Roman", serif;
-	margin-bottom: 0;
-	color: #336600;
-	background: #ffffff;
-	}
-</pre>
-      </section>
-   </section><section id="tests"><h2>Tests</h2>
-      <section class="procedure"><h3>Procedure</h3>
-         <ol>
-            <li>Check that the Web page includes a control that allows users to select an alternate presentation. </li>
-            <li>Check that when the control is activated the resulting page includes text (programmatically determined text) wherever images of text had been used. </li>
+  font: normal 160%/100% Garamond, "Times New Roman", serif;
+  margin-bottom: 0;
+  color: #336600;
+  background: #ffffff;
+}</code></pre>
+				</section>
+			</section>
+		</section>
+		<section id="tests">
+			<h2>Tests</h2>
+      <section class="procedure">
+				<h3>Procedure</h3>
+				<ol>
+					<li>Check that the Web page includes a control that allows users to select an alternate presentation.</li>
+					<li>Check that when the control is activated the resulting page includes text (programmatically determined text) wherever images of text had been used.</li>
          </ol>
       </section>
-      <section class="results"><h3>Expected Results</h3>
-         <ul>
-            <li> All of the above checks are true. </li>
-         </ul>
+      <section class="results">
+				<h3>Expected Results</h3>
+				<ul>
+					<li>All of the above checks are true </li>
+				</ul>
       </section>
-   </section><section id="related"><h2>Related Techniques</h2><ul>
-      <li><a href="../css/C29">C29</a></li>
-      <li><a href="../failures/F3">F3</a></li>
-   </ul></section><section id="resources"><h2>Resources</h2>
-      
-         <ul>
-            <li>
-                  <a href="http://wellstyled.com/css-replace-text-by-image.html">Replacing Text By An Image</a>
-               </li>
-            <li>
-                  <a href="http://alistapart.com/article/fir">Facts and Opinion About Fahrner Image Replacement</a>
-               </li>
-            <li>
-                  <a href="http://www.digital-web.com/articles/in_defense_of_fahrner_image_replacement/">In Defense of Fahrner Image Replacement</a>
-               </li>
-            <li>
-                  <a href="https://en.wikipedia.org/wiki/Fahrner_Image_Replacement">Fahrner Image Replacement</a>
-               </li>
-            <li>
-                  <a href="https://www.w3.org/TR/CSS2/colors.html#background-properties">CSS2: 14.2.1 Background properties: 'background-color', 'background-image', 'background-repeat', 'background-attachment', 'background-position', and 'background'</a>
-               </li>
-         </ul>
-      
-   </section></body></html>
\ No newline at end of file
+		</section>
+		<section id="related">
+			<h2>Related Techniques</h2>
+			<ul>
+				<li><a href="C29">C29</a></li>
+				<li><a href="../failures/F3">F3</a></li>
+			</ul>
+		</section>
+		<section id="resources">
+			<h2>Resources</h2>
+			<ul>
+				<li>
+					<a href="https://wellstyled.com/css-replace-text-by-image.html">Replacing Text By An Image</a>
+				</li>
+				<li>
+					<a href="https://alistapart.com/article/fir">Facts and Opinion About Fahrner Image Replacement</a>
+				</li>
+				<li>
+					<a href="https://www.digital-web.com/articles/in_defense_of_fahrner_image_replacement/">In Defense of Fahrner Image Replacement</a>
+				</li>
+				<li>
+					<a href="https://en.wikipedia.org/wiki/CSS_image_replacement">CSS image replacement</a>
+				</li>
+        <li>
+					<a href="https://www.w3.org/TR/css-backgrounds/">CSS Backgrounds And Borders Module</a>
+				</li>
+			</ul>
+		</section>
+	</body>
+</html>
\ No newline at end of file
diff --git a/techniques/css/C31.html b/techniques/css/C31.html
index fdae402fc8..330a026359 100644
--- a/techniques/css/C31.html
+++ b/techniques/css/C31.html
@@ -2,10 +2,10 @@
 <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
   <head>
     <title>Using CSS Flexbox to reflow content</title>
-    <link rel="stylesheet" type="text/css" href="https://rawgit.com/w3c/wcag21/master/css/sources.css"/>
+    <link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
   </head>
   <body>
-    <h1>Using CSS Flexbox to reflow content</h1>
+    <h1>Using <abbr title="Cascading Style Sheets">CSS</abbr> Flexbox to reflow content</h1>
     <section id="meta">
       <h2>Metadata</h2>
       <p id="id"></p>
@@ -30,11 +30,11 @@ <h2>Description</h2>
     <section id="examples">
       <h2>Examples</h2>
       <section class="example">
-        <h3>Example 1: Medium complex flexbox layout in HTML and CSS</h3>
+        <h3>Example 1: Medium complex flexbox layout in <abbr title="HyperText Markup Language">HTML</abbr> and CSS</h3>
         <p>The following medium complex example uses HTML and CSS to create a flexbox layout. The layout regions adjust their size as the viewport is adjusted. When the total viewport width matches the width defined via media queries, columns wrap to be positioned below, rather than beside each other or vice versa.</p>
         <p>The zoom level can be increased to 400% without requiring scrolling in more than one direction. This particular example uses percent sizes for the flex items by using the "flex-basis" property and are laid out in source order.</p>
         
-<pre><code>
+<pre xml:space="preserve"><code class="language-html">
   &lt;!DOCTYPE html&gt;
   &lt;html lang="en"&gt;
     &lt;head&gt;
@@ -68,26 +68,21 @@ <h3>Example 1: Medium complex flexbox layout in HTML and CSS</h3>
     }
 
     @media all and (min-width: 992px) { 
-      main[role="main"] {
+      main {
         flex: 0 1 66.333333%;
       }
-      aside[role="complementary"] {
+      aside {
         flex: 0 1 33.333333%;
         margin-top: 0;
       }
     }
-
     &lt;/style&gt;
-
     &lt;/head&gt;
-
     &lt;body class="row"&gt;
-
-      &lt;header role="banner" class="col"&gt;
+      &lt;header class="col"&gt;
         ...
       &lt;/header&gt;
-
-      &lt;main role="main" class="col"&gt;
+      &lt;main class="col"&gt;
         ...
         ...     
         &lt;div class="row row-nested"&gt;
@@ -99,15 +94,12 @@ <h3>Example 1: Medium complex flexbox layout in HTML and CSS</h3>
           &lt;/div&gt;
         &lt;/div&gt;
       &lt;/main&gt;
-
-      &lt;aside role="complementary" class="col"&gt;
+      &lt;aside class="col"&gt;
         ...
       &lt;/aside&gt;
-
-      &lt;footer role="contentinfo" class="col"&gt;
+      &lt;footer class="col"&gt;
         ...
       &lt;/footer&gt;
-
     &lt;/body&gt;
   &lt;/html&gt;</code></pre>
         
@@ -124,7 +116,9 @@ <h3>Procedure</h3>
           <li>For content read horizontally, check that all content and functionality is available without horizontal scrolling.</li>
           <li>For content read vertically, check that all content and functionality is available without vertical scrolling.</li>
         </ol>
-      <p class="note">If the browser is not capable of zooming to 400%, you can reduce the width of the browser proportionally. For example, at 300% zoom the viewport should be sized to 960px wide.</p>
+      <div class="note">
+        <p>If the browser is not capable of zooming to 400%, you can reduce the width of the browser proportionally. For example, at 300% zoom the viewport should be sized to 960px wide.</p>
+      </div>
       </section>
       <section class="test-results">
         <h3>Expected Results</h3>
diff --git a/techniques/css/C32.html b/techniques/css/C32.html
index f4c121b39b..204b13eb55 100644
--- a/techniques/css/C32.html
+++ b/techniques/css/C32.html
@@ -2,10 +2,10 @@
 <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
   <head>
     <title>Using media queries and grid CSS to reflow columns</title>
-    <link rel="stylesheet" type="text/css" href="https://rawgit.com/w3c/wcag21/master/css/sources.css"/>
+    <link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
   </head>
   <body>
-    <h1>Using media queries and grid CSS to reflow columns</h1>
+    <h1>Using media queries and grid <abbr title="Cascading Style Sheets">CSS</abbr> to reflow columns</h1>
     <section id="meta">
       <h2>Metadata</h2>
       <p id="id"></p>
@@ -14,6 +14,7 @@ <h2>Metadata</h2>
     </section>
     <section id="applicability">
       <h2>When to Use</h2>
+			<p>CSS</p>
     </section>
     <section id="description">
       <h2>Description</h2>
@@ -29,11 +30,11 @@ <h2>Description</h2>
     <section id="examples">
       <h2>Examples</h2>
       <section class="example">
-        <h3>Example 1: Grid layout in HTML and CSS - Medium complexity</h3>
+        <h3>Grid layout in HTML and CSS - Medium complexity</h3>
         <p>The following medium complexity example uses HTML and CSS to create a grid layout. The layout regions adjust their size as the viewport is adjusted. When the total viewport width matches the width defined via media queries, columns wrap to be positioned below, rather than beside each other or vice versa.</p>
         
         <p>The zoom level can be increased to 400% without requiring scrolling in more than one direction. This particular example uses fr units as a fraction of the free space of the grid container for the grid items by using the "grid-template-columns" property and are laid out in source order.</p>
-<pre><code>
+<pre xml:space="preserve"><code class="language-html">
   &lt;!DOCTYPE html&gt;
     &lt;html lang="en"&gt;
       &lt;head&gt;
@@ -42,10 +43,10 @@ <h3>Example 1: Grid layout in HTML and CSS - Medium complexity</h3>
         &lt;style&gt;
 
         /* Reflow Styling */
-        header[role="banner"]       { grid-area: header; }
-        main[role="main"]           { grid-area: main; }
-        aside[role="complementary"] { grid-area: aside; }
-        footer[role="contentinfo"]  { grid-area: footer; }
+        header { grid-area: header; }
+        main   { grid-area: main; }
+        aside  { grid-area: aside; }
+        footer { grid-area: footer; }
 
         .grid,
         .subgrid {
@@ -98,11 +99,11 @@ <h3>Example 1: Grid layout in HTML and CSS - Medium complexity</h3>
 
       &lt;body class="grid"&gt;
 
-        &lt;header role="banner" class="grid-item"&gt;
+        &lt;header class="grid-item"&gt;
           ...
         &lt;/header&gt;
 
-        &lt;main role="main" class="grid-item"&gt;        
+        &lt;main class="grid-item"&gt;        
           ...
           ...
           &lt;div class="subgrid"&gt;
@@ -115,11 +116,11 @@ <h3>Example 1: Grid layout in HTML and CSS - Medium complexity</h3>
           &lt;/div&gt;
         &lt;/main&gt;
 
-        &lt;aside role="complementary" class="grid-item"&gt;
+        &lt;aside class="grid-item"&gt;
           ...
         &lt;/aside&gt;
 
-        &lt;footer role="contentinfo" class="grid-item"&gt;
+        &lt;footer class="grid-item"&gt;
           ...
         &lt;/footer&gt;
 
@@ -149,7 +150,7 @@ <h3>Expected Results</h3>
     <section id="related">
       <h2>Related Techniques</h2>
       <ul>
-        <li><a href="../../techniques/css/C31">Flexbox reflow technique</a></li>
+        <li><a href="../../Techniques/css/C31">Flexbox reflow technique</a></li>
       </ul>
     </section>
     <section id="resources">
diff --git a/techniques/css/C33.html b/techniques/css/C33.html
index 33472913af..c7a933097b 100644
--- a/techniques/css/C33.html
+++ b/techniques/css/C33.html
@@ -2,25 +2,24 @@
 <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
 <head>
 <title>Allowing for Reflow with Long URLs and Strings of Text</title>
-<link rel="stylesheet" type="text/css" href="../../css/sources.css"/>
-
+<link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
 </head>
 <body>
-<h1>Allowing for Reflow with Long URLs and Strings of Text</h1>
+<h1>Allowing for Reflow with Long <abbr title="Uniform Resource Locator">URL</abbr>s and Strings of Text</h1>
 <section id="meta"></section>
 <section id="applicability">
   <h2>When to Use</h2>
-  <p>This technique is applicable to Cascading Style Sheet / HTML technologies.</p>
+  <p><abbr title="Cascading Style Sheets">CSS</abbr> and <abbr title="HyperText Markup Language">HTML</abbr>.</p>
 </section>
 <section id="description">
   <h2>Description</h2>
-  <p>Long sets of characters without a space, such as URLs shown as content, can break reflow when the page is zoomed. The objective of this technique is to present URLs without introducing a horizontal scroll bar at a width equivalent to 320 CSS pixels or a vertical scroll bar at a height equivalent to 256 CSS pixels. This is done by using CSS techniques that adapt to the available viewport space. Note: Using a human readable text link, rather than a long URL, is better for usability and accessibility.</p>
+  <p>Long sets of characters without a space, such as URLs shown as content, can break reflow when the page is zoomed. The objective of this technique is to present URLs without introducing a horizontal scroll bar at a width equivalent to 320 <abbr title="Cascading Style Sheets">CSS</abbr> pixels or a vertical scroll bar at a height equivalent to 256 CSS pixels. This is done by using CSS techniques that adapt to the available viewport space. Note: Using a human readable text link, rather than a long URL, is better for usability and accessibility.</p>
   <p>By default most browsers will wrap long URLs at the following characters:</p>
   <ul>
-    <li>&quot;-&quot; Hyphen  </li>
-    <li>&quot; &quot; Space</li>
-    <li>"?" Question (IE,  Chrome, Safari) </li>
-    <li>&quot;&amp;&quot; Ampersand (Firefox only)</li>
+    <li>&quot;&amp;&quot; Ampersand</li>
+    <li>&quot;/&quot; Forward Slash</li>
+    <li>&quot;-&quot; Hyphen</li>
+    <li>"?" Question Mark</li>
   </ul> 
   <p>Sometimes these are not enough to ensure that long URLs will not overflow the viewport.</p>
 </section>
@@ -28,15 +27,16 @@ <h2>Description</h2>
   <h2>Examples</h2>
   <section class="example">
     <h3>Breaking long URLs</h3>
-    <p>Using the following CSS will cause long URLs to break at appropriate places (hyphens, spaces, etc.) and within words without causing reflow. </p>
+    <p>Using the following CSS will cause long URLs to break at appropriate places (hyphens, forward slashes, etc.) and within words without causing reflow.</p>
     <p>List of CSS declarations used and why they are used:</p>
     <ul>
-     <li><strong>overflow-wrap: break-word</strong>: Allows words to be broken and wrapped within words. </li>
-	    <li><strong>word-wrap: break-word</strong>: Allows words to be broken and wrapped within. (Microsoft only)</li>
+     <li><code class="language-css">overflow-wrap: break-word</code>: Allows words to be broken and wrapped within words. </li>
+	    <li><code class="language-css">word-wrap: break-word</code>: Allows words to be broken and wrapped within.</li>
     </ul>
-    <pre>    a {overflow-wrap: break-word;}</pre>
-    <p class="note">IE and Edge  only support this declaration when used with the * (wildcard) selector</p>
-    <pre>    * { word-wrap: break-word;}</pre>
+<pre xml:space="preserve"><code class="language-css">a {
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+}</code></pre>
   <p><a href="../../working-examples/css-reflow-url/">Working Example</a></p>
   </section>
 </section>
diff --git a/techniques/css/C34.html b/techniques/css/C34.html
index a072f78508..b477432e2b 100644
--- a/techniques/css/C34.html
+++ b/techniques/css/C34.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
     <title>Using media queries to un-fix sticky headers / footers</title>
-    <link rel="stylesheet" type="text/css" href="https://rawgit.com/w3c/wcag21/master/css/sources.css"/>
+    <link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
   </head>
   <body>
     <h1>Using media queries to un-fixing sticky headers / footers</h1>
@@ -16,11 +16,11 @@ <h2>Metadata</h2>
     </section>
     <section id="applicability">
       <h2>When to Use</h2>
-      <p>This technique is applicable to Cascading Style Sheet / HTML technologies.</p>
+      <p><abbr title="Cascading Style Sheets">CSS</abbr> and <abbr title="HyperText Markup Language">HTML</abbr>.</p>
     </section>
     <section id="description">
       <h2>Description</h2>
-      <p>The objective of this technique is to be able to present content with sticky headers and footers when there is enough space. This is done by using <code>min-height</code>, <code>max-height</code> and <code>min-width</code> media queries techniques that adapt to the available space of the viewport.</p>
+      <p>The objective of this technique is to be able to present content with sticky headers and footers when there is enough space. This is done by using <code class="language-css">min-height</code>, <code class="language-css">max-height</code>, and <code class="language-css">min-width</code> media queries techniques that adapt to the available space of the viewport.</p>
 
       <p>Sticky regions always stay visible in the viewport while the other content will disappear underneath when scrolling. In terms of content visibility, this is often not a problem on the desktop and on mobile devices in portrait orientation. However, when using mobile devices in landscape orientation or when zooming in on the desktop, sticky regions may block a big portion of the screen: the height of the sticky region may leave only a small part of the screen for the display of page content.</p>
       
@@ -30,9 +30,9 @@ <h2>Description</h2>
 
       <p>The basic approach for un-fixing sticky headers / footers is to:</p>
       <ol>
-        <li>Define the first sticky regions using media query <code>min-height</code> properties, so they get fixed or un-fixed depending on the available space;</li>
+        <li>Define the first sticky regions using media query <code class="language-css">min-height</code> properties, so they get fixed or un-fixed depending on the available space;</li>
 
-        <li>Define other sticky regions using media query <code>min-width</code> and <code>max-height</code> properties for specific viewport sizes, so they get fixed or un-fixed depending on the available space, e.g. for tablets depending on the portrait or landscape position of the device;</li>
+        <li>Define other sticky regions using media query <code class="language-css">min-width</code> and <code class="language-css">max-height</code> properties for specific viewport sizes, so they get fixed or un-fixed depending on the available space, e.g. for tablets depending on the portrait or landscape position of the device.</li>
       </ol>
 
     </section>
@@ -40,12 +40,8 @@ <h2>Description</h2>
       <h2>Examples</h2>
       <section class="example">
         <h3>Un-fix sticky headers / footers in HTML and CSS</h3>
-        <p>The following example uses HTML and CSS to un-fix sticky headers / footers.
-
-        The sticky regions get un-fixed as the height of the viewport is limited or the orientation is changed.
-
-        When the <code>min-height</code> property matches the viewport space defined via media queries, regions which are not sticky get fixed or vice versa. This particular example uses the CSS <code>min-height</code>, <code>max-height</code> and <code>min-width</code> media query properties.</p>
-<pre><code>
+        <p>The following example uses HTML and CSS to un-fix sticky headers / footers. The sticky regions get un-fixed as the height of the viewport is limited or the orientation is changed. When the <code class="language-css">min-height</code> property matches the viewport space defined via media queries, regions which are not sticky get fixed or vice versa. This particular example uses the CSS <code class="language-css">min-height</code>, <code class="language-css">max-height</code> and <code class="language-css">min-width</code> media query properties.</p>
+<pre xml:space="preserve"><code class="language-html">
 &lt;!DOCTYPE html&gt;
 &lt;html lang="en"&gt;
   &lt;head&gt;
@@ -65,7 +61,9 @@ <h3>Un-fix sticky headers / footers in HTML and CSS</h3>
       }
     }
 
-    @media (min-device-width: 576px) and (max-device-width: 1024px) and (orientation: landscape) {
+    @media (min-device-width: 576px) and 
+    (max-device-width: 1024px) and 
+    (orientation: landscape) {
       header {
         position: static;
       }
@@ -75,13 +73,14 @@ <h3>Un-fix sticky headers / footers in HTML and CSS</h3>
 
     @media (min-height: 480px) {
       footer {
-        position: -webkit-sticky;
         position: sticky;
         bottom: 0;
       }
     }
 
-    @media (min-device-width: 576px) and (max-device-width: 1024px) and (orientation: landscape)  {
+    @media (min-device-width: 576px) and
+    (max-device-width: 1024px) and
+    (orientation: landscape)  {
       footer {
         position: static;
       }
@@ -93,26 +92,26 @@ <h3>Un-fix sticky headers / footers in HTML and CSS</h3>
 
   &lt;body class="grid"&gt;
 
-    &lt;header role="banner" class="grid-item"&gt;
+    &lt;header class="grid-item"&gt;
       ...
     &lt;/header&gt;
 
-    &lt;main role="main" class="grid-item"&gt;        
+    &lt;main class="grid-item"&gt;        
       ...
     &lt;/main&gt;
 
-    &lt;aside role="complementary" class="grid-item"&gt;
+    &lt;aside class="grid-item"&gt;
       ...
     &lt;/aside&gt;
 
-    &lt;footer role="contentinfo" class="grid-item"&gt;
+    &lt;footer class="grid-item"&gt;
       ...
     &lt;/footer&gt;
 
   &lt;/body&gt;
 &lt;/html&gt;
 </code></pre>
-        <p class="working-example">Working example: <a href="../../working-examples/css-sticky/">Using CSS Flexbox for Reflow</a></p>
+        <p class="working-example">Working example: <a href="../../working-examples/css-sticky/">Using media queries to un-fix sticky headers / footers</a></p>
       </section>
     </section>
     <section id="tests">
diff --git a/techniques/css/C35.html b/techniques/css/C35.html
index 70c9b7b2a3..c5c06d4d92 100644
--- a/techniques/css/C35.html
+++ b/techniques/css/C35.html
@@ -2,7 +2,7 @@
 <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
    <head>
       <title>Allowing for text-spacing without wrapping</title>
-      <link rel="stylesheet" type="text/css" href="https://rawgit.com/w3c/wcag21/master/css/sources.css"/>
+      <link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
    </head>
 <body>
       <h1>Allowing for text spacing without wrapping</h1>
@@ -20,48 +20,62 @@ <h2>Description</h2>
          <p>The objective of this technique is to allow a user to override text spacing via user stylesheet, bookmarklet, extension, or application. Increased spacing between paragraphs, lines, words, and characters benefits people with low vision or some cognitive disabilities. Content needs to allow spacing changes without loss of content or functionality by allowing the elements containing the text to expand as needed.</p>
          <p><strong>Where text is not intended to wrap</strong>, authors should either:</p>
          <ul>
-               <li>size containers to a have a value greater than the default width of the text, or</li>
-               <li>allow the containers to expand in the direction of text.</li>
+					<li>size containers to a have a value greater than the default width of the text, or</li>
+					<li>allow the containers to expand in the direction of text.</li>
          </ul>
          <p>There is some variability in the width that words or phrases will grow to when setting the letter and word spacing. If elements must use a fixed width, a safe value is 20% wider than the default maximum width. For example, if a small text-container allows for 20 characters, allowing enough width for 24 characters should allow enough space for text-spacing to be applied.</p>
-         <p>For boxes which can expand with the text, authors can take advantage of the inline-block value of the CSS display property and not set negative margins to allow for text-spacing overrides.</p>
+         <p>For boxes which can expand with the text, authors can take advantage of the <code class="language-css">inline-block</code> value of the <abbr title="Cascading Style Sheets">CSS</abbr> <code class="language-css">display</code> property and not set negative margins to allow for text-spacing overrides.</p>
       </section>
    <section id="examples">
       <h2>Examples</h2>
       <p>When a user adapts the page to increase the text spacing, text fits within the bounds of its containing box.</p>
-      <p class="note">The <code>ex</code> unit has been used as as the closest available unit for character width, <code>ex </code>&quot;Represents the x-height of the element's font.&quot; (<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/length">MDN page for CSS units</a>). It is not perfect, different characters have different default widths.</p>
+      <p class="note">The <code class="language-css">ex</code> unit has been used as as the closest available unit for character width, <code class="language-css">ex</code> <q>Represents the x-height of the element's font.</q> (<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/length">MDN page for CSS units</a>). It is not perfect, different characters have different default widths.</p>
       <section class="example">
          <h3>A box sized with space to allow for expansion</h3>
          <p>The containers are sized to a value greater than the default width of the text.</p>
-         <pre xml:space="preserve"><code>/* Links are less than 8ex wide, so 10ex width of each li allows for expanded letter and word width*/
- nav li { width: 10em; }
+            <section id="the-css">
+               <h4>The CSS</h4>
+<pre xml:space="preserve"><code class="language-css">&lt;style&gt;
+/* Links are less than 8ex wide,
+so 10ex width of each li allows for expanded letter and word width */
+nav li { width: 10em; }
+&lt;/style&gt;</code></pre>
+            </section>
 
-&lt;!-- HTML --&gt;
- &lt;nav&gt;
+            <section id="the-html">
+               <h4>The <abbr title="HyperText Markup Language">HTML</abbr></h4>
+<pre xml:space="preserve"><code class="language-html">&lt;nav&gt;
   &lt;ul&gt;
-   &lt;li&gt;&lt;a href=&quot;/&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
-   &lt;li&gt;&lt;a href=&quot;/contact/&quot;&gt;Contact&lt;/a&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;a href="/"&gt;Home&lt;/a&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;a href="/contact/"&gt;Contact&lt;/a&gt;&lt;/li&gt;
   &lt;ul&gt;
- &lt;/nav&gt;</code>
-</pre>
-<p>If the navigation element used fix-width containers of the same size, the width would need to allow for text 20% larger than the longest word.</p>
+&lt;/nav&gt;</code></pre>
+            </section>
+            <p>If the navigation element used fix-width containers of the same size, the width would need to allow for text 20% larger than the longest word.</p>
       </section>
       <section class="example">
          <h3>A box which expands with the text size</h3>
-         <pre xml:space="preserve"><code>/* CSS containers are given a display of inline-block. No negative margins set. */
+            <section id="the-css2">
+               <h4>The CSS</h4>
+<pre xml:space="preserve"><code class="language-css">&lt;style&gt;
+/* CSS containers are given a display of inline-block. No negative margins set. */
  nav li { display: inline-block; }
+ &lt;/style&gt;</code></pre>
+            </section>
 
-&lt;!-- HTML --&gt;
- &lt;nav&gt;
+            <section id="the-html2">
+               <h4>The HTML</h4>
+<pre xml:space="preserve"><code class="language-html">&lt;nav&gt;
   &lt;ul&gt;
-   &lt;li&gt;&lt;a href=&quot;/&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
-   &lt;li&gt;&lt;a href=&quot;/contact/&quot;&gt;Contact&lt;/a&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;a href="/"&gt;Home&lt;/a&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;a href="/contact/"&gt;Contact&lt;/a&gt;&lt;/li&gt;
   &lt;ul&gt;
- &lt;/nav&gt;</code>
+&lt;/nav&gt;</code>
 </pre>
-<p>In the case of variable-width text containers for each item, the parent item may need to allow for wrapping of the items.</p>
-<p class="working-example"><a href="../../working-examples/css-text-spacing/">Working examples of #1 and #2</a> are available.</p>
-</section>
+            </section>
+            <p>In the case of variable-width text containers for each item, the parent item may need to allow for wrapping of the items.</p>
+            <p class="working-example"><a href="../../working-examples/css-text-spacing/">Working examples of #1 and #2</a> are available.</p>
+         </section>
   
    </section>
    <section id="tests">
diff --git a/techniques/css/C36.html b/techniques/css/C36.html
index 8956097616..aea4c520ce 100644
--- a/techniques/css/C36.html
+++ b/techniques/css/C36.html
@@ -2,7 +2,7 @@
 <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
    <head>
       <title>Allowing for text spacing override</title>
-      <link rel="stylesheet" type="text/css" href="https://rawgit.com/w3c/wcag21/master/css/sources.css"/>
+      <link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
    </head>
 <body>
       <h1>Allowing for text spacing override</h1>
@@ -15,25 +15,28 @@ <h2>Metadata</h2>
       <section id="applicability">
       </section>
       <section id="description">
-            <h2>Description</h2>
-            <p>The objective of this technique is to allow a user to override text spacing via user stylesheet, bookmarklet, extension, or application. Increased spacing between paragraphs, lines, words, and characters benefits people with low vision or some cognitive disabilities. Content needs to allow spacing changes without loss of content or functionality, so text containers must either have room for the text to expand or the container must be able to expand. This technique will typically apply to short strings of text such as in a navigation bar, as longer strings of text are increasingly likely to require wrapping to be readable when styles are changed.</p>
-         <p>In English languages, if authors do not set the CSS <code>height</code> property, it can help ensure paragraphs expand. Paragraphs need to allow text to increase vertically for languages or scripts such as English which are read horizontally or to increase horizontally for languages or scripts which are read vertically.</p>
-      </section>
+				<h2>Description</h2>
+				<p>The objective of this technique is to allow a user to override text spacing via user stylesheet, bookmarklet, extension, or application. Increased spacing between paragraphs, lines, words, and characters benefits people with low vision or some cognitive disabilities. Content needs to allow spacing changes without loss of content or functionality, so text containers must either have room for the text to expand or the container must be able to expand. This technique will typically apply to short strings of text such as in a navigation bar, as longer strings of text are increasingly likely to require wrapping to be readable when styles are changed.</p>
+				<p>In English languages, if authors do not set the CSS <code class="language-css">height</code> property, it can help ensure paragraphs expand. Paragraphs need to allow text to increase vertically for languages or scripts such as English which are read horizontally or to increase horizontally for languages or scripts which are read vertically.</p>
+			</section>
       <section id="examples">
-            <h2>Examples</h2>
-            <p>When a user adapts the page to increase the text spacing, text fits within the bounds of its containing box.</p>
-
-            <section class="example">
-            <h3>A paragraph expands vertically within container</h3>
-            <pre xml:space="preserve"><code>/* CSS: No height property is set.*/
-
-&lt;!-- HTML --&gt;
- &lt;div class=&quot;card&quot;&gt;
-  &lt;img src=&quot;image.png&quot; alt=&quot;proper alt text&quot;&gt;
+				<h2>Examples</h2>
+				<p>When a user adapts the page to increase the text spacing, text fits within the bounds of its containing box.</p>
+				
+				<section class="example">
+					<h3>A paragraph expands vertically within container</h3>
+               <section id="the-css">
+                  <h4>The CSS</h4>
+<pre xml:space="preserve"><code class="language-css">&lt;style&gt;
+/* CSS: No height property is set.*/
+&lt;/style&gt;</code></pre>
+<h4>The <abbr title="HyperText Markup Language">HTML</abbr></h4>
+<pre xml:space="preserve"><code class="language-html">&lt;div class="card"&gt;
+  &lt;img alt="" src="image.png"&gt;
   &lt;h3&gt;Heading&lt;/h3&gt;
-  &lt;p class=&quot;lede&quot;&gt;Long lede paragraph…&lt;/p&gt;
- &lt;/div&gt;</code>
-</pre>
+  &lt;p class="lede"&gt;Long lede paragraph...&lt;/p&gt;
+&lt;/div&gt;</code></pre>
+               </section>
          <p>None of the paragraphs on this page have a height specified, so all are effectively using this technique.</p>
             </section>
       </section>
@@ -54,7 +57,7 @@ <h3>Expected Results</h3>
             <ul>
                <li>#3 is true.</li>
             </ul>
-            <p class="note">Where a page has multiple layouts (e.g. in a responsive design) text spacing should be tested in each layout. </p>
+            <p class="note">Where a page has multiple layouts (e.g. in a responsive design) text spacing should be tested in each layout.</p>
          </section>
       </section>
       <section id="related">
diff --git a/techniques/css/C37.html b/techniques/css/C37.html
index 1eb7b9cb16..4e8ecc2e77 100644
--- a/techniques/css/C37.html
+++ b/techniques/css/C37.html
@@ -2,10 +2,10 @@
 <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
   <head>
     <title>Using CSS max-width and height to fit images</title>
-    <link rel="stylesheet" type="text/css" href="https://rawgit.com/w3c/wcag21/master/css/sources.css"/>
+    <link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
   </head>
   <body>
-    <h1>Using CSS max-width and height to fit images</h1>
+    <h1>Using <abbr title="Cascading Style Sheets">CSS</abbr> <code class="language-css">max-width</code> and <code class="language-css">height</code> to fit images</h1>
     <section id="meta">
       <h2>Metadata</h2>
       <p id="id"></p>
@@ -14,17 +14,17 @@ <h2>Metadata</h2>
     </section>
     <section id="applicability">
       <h2>When to Use</h2>
-      <p>This technique is applicable to Cascading Style Sheet / HTML technologies.</p>
+      <p><abbr title="Cascading Style Sheets">CSS</abbr> and <abbr title="HyperText Markup Language">HTML</abbr>.</p>
     </section>
     <section id="description">
       <h2>Description</h2>
-      <p>The objective of this technique is to be able to present images without introducing a horizontal scroll bar at a width equivalent to 320 CSS pixels, or a vertical scroll bar at a height equivalent to 256 CSS pixels for content intended to scroll horizontally. This is done by using CSS <code>max-width</code> and <code>height</code> property techniques that adapt to the available space and keep the original dimensions of the image.</p>      
+      <p>The objective of this technique is to be able to present images without introducing a horizontal scroll bar at a width equivalent to 320 CSS pixels, or a vertical scroll bar at a height equivalent to 256 CSS pixels for content intended to scroll horizontally. This is done by using CSS <code class="language-css">max-width</code> and <code class="language-css">height</code> property techniques that adapt to the available space and keep the original dimensions of the image.</p>      
       <p>Responsive layouts can add or remove columns or layout blocks, and each part of the layout can be wider or smaller at different points. This technique ensures images do not break out of their layout area, including in one-column layouts where it would cause scrolling.</p>
       <p>The basic principles of fitting images are to:</p>
       
       <ol>
-        <li>Define the <code>max-width</code> property for images, and;</li>
-        <li>Define the <code>height</code> property for images, so they enlarge or shrink in the available space and respond to zoom levels.</li>
+        <li>Define the <code class="language-css">max-width</code> property for images, and;</li>
+        <li>Define the <code class="language-css">height</code> property for images, so they enlarge or shrink in the available space and respond to zoom levels.</li>
       </ol>
       
       <p>All images require design finesse by making sure the original size fits the biggest size of the available spaces to achieve good-looking results at a wide range of viewport sizes and zoom levels.</p>
@@ -35,27 +35,18 @@ <h2>Examples</h2>
       <section class="example">
         <h3>Fitting images in HTML and CSS</h3>
         <p>The following simple example uses HTML and CSS to create a fitting image. The layout regions adjust their size as the viewport is adjusted. The images subsequently adjust their size to fit within the layout region containers.</p>
-        <p>The zoom level can be increased to 400% without requiring scrolling in more than one direction. This particular example uses a percent size for the <code>max-width</code> and auto size for the <code>height</code> of the image to remain the original dimensions.</p>
-
-<pre>
-<code>
-
-&lt;style&gt;
-
-/* Fitting Images Styling */
+        <p>The zoom level can be increased to 400% without requiring scrolling in more than one direction. This particular example uses a percent size for the <code class="language-css">max-width</code> and auto size for the <code class="language-css">height</code> of the image to remain the original dimensions.</p>
 
+<pre xml:space="preserve"><code class="language-html">&lt;style&gt;
 .img-responsive {
   max-width: 100%;
 }
-
 &lt;/style&gt;
 
 &lt;div class="panel"&gt;
-  &lt;img class="img-responsive" src="..." alt=""&gt;
+  &lt;img alt="" class="img-responsive" src="..."&gt;
   ...
-&lt;/div&gt;
-</code>
-</pre>
+&lt;/div&gt;</code></pre>
         
         <p class="working-example">Working example: <a href="../../working-examples/css-fitting-images/">Using Fitting Images for Reflow</a></p>
         
diff --git a/techniques/css/C38.html b/techniques/css/C38.html
index 467d6b71bf..f8f903057b 100644
--- a/techniques/css/C38.html
+++ b/techniques/css/C38.html
@@ -5,7 +5,7 @@
     <link rel="stylesheet" type="text/css" href="../../css/editors.css"/>
   </head>
   <body>
-    <h1>Using <code>CSS width</code>, <code>max-width</code> and <code>flexbox</code> to fit labels and inputs</h1>
+    <h1>Using <abbr title="Cascading Style Sheets">CSS</abbr> width, <code class="language-css">max-width</code> and flexbox to fit labels and inputs</h1>
     <section id="meta">
       <h2>Metadata</h2>
       <p id="id"></p>
@@ -14,11 +14,11 @@ <h2>Metadata</h2>
     </section>
     <section id="applicability">
       <h2>When to Use</h2>
-      <p>This technique is applicable to Cascading Style Sheet / HTML technologies.</p>
+      <p>CSS and <abbr title="HyperText Markup Language">HTML</abbr>.</p>
     </section>
     <section id="description">
       <h2>Description</h2>
-      <p>The objective of this technique is to be able to present labels and inputs without introducing a horizontal scroll bar at a width equivalent to 320 CSS pixels for content intended to scroll vertically. When space is limited in the viewport for the label and input to sit next to each other horizontally, they will be changed to a vertical alignment. This is done by using CSS properties for <code>width</code>, <code>max-width</code> and <code>flexbox</code> that adapt to the available space.</p>
+      <p>The objective of this technique is to be able to present labels and inputs without introducing a horizontal scroll bar at a width equivalent to 320 CSS pixels for content intended to scroll vertically. When space is limited in the viewport for the label and input to sit next to each other horizontally, they will be changed to a vertical alignment. This is done by using CSS properties for <code class="language-css">width</code>, <code class="language-css">max-width</code> and flexbox that adapt to the available space.</p>
       
       <p>Responsive layouts can add or remove columns or layout blocks, and each part of the layout can be wider or smaller at different points. This technique ensures labels and inputs do not break out of their layout area, including in one-column layouts where it would cause horizontal scrolling.</p>
 
@@ -38,12 +38,9 @@ <h2>Examples</h2>
       <section class="example">
         <h3>Fitting labels, inputs and flexbox layout with HTML and CSS.</h3>
         <p>The following example uses HTML and CSS to fit labels and inputs within various width containers, including the viewport. The layout regions adjust their size as the viewport is adjusted. The labels and inputs subsequently adjust their size to fit within the layout region containers.</p>
-        <p>The zoom level can be increased to 400% without requiring horizontal scrolling. This particular example uses a percent size for the <code>width</code> and <code>max-width</code> for the labels and inputs. The <code>max-width</code> is applied in order to fix elements spilling out of the grid in a cross-browser way, as replaced elements such as the <code>select</code> have intrinsic sizing.</p>
+        <p>The zoom level can be increased to 400% without requiring horizontal scrolling. This particular example uses a percent size for the <code class="language-css">width</code> and <code class="language-css">max-width</code> for the labels and inputs. The <code class="language-css">max-width</code> is applied in order to fix elements spilling out of the grid in a cross-browser way, as replaced elements such as the <code class="language-css">select</code> have intrinsic sizing.</p>
 
-<pre>
-<code>
-
-&lt;style&gt;
+<pre xml:space="preserve"><code class="language-html">&lt;style&gt;
 
 /* Fitting Inputs Styling */
 
@@ -68,11 +65,10 @@ <h3>Fitting labels, inputs and flexbox layout with HTML and CSS.</h3>
     flex: 0 0 66.66667%;
     max-width: 66.66667%;
   }
-  
+
   .offset-form-col-4 {
     margin-left: 33.33333%;
   }
-  
 }
 
 input {
@@ -80,8 +76,7 @@ <h3>Fitting labels, inputs and flexbox layout with HTML and CSS.</h3>
   width: 100%;
 }
 
-label,
-select {
+label, select {
   display: block;
   width: 100%;
   max-width: 100%;
@@ -111,8 +106,8 @@ <h3>Fitting labels, inputs and flexbox layout with HTML and CSS.</h3>
   &lt;div class="form-col-4"&gt;
    &lt;label for="favorite-fruit"&gt;Favorite fruit&lt;/label&gt;
   &lt;/div&gt;
-  &lt;div id="favorite-fruit" class="form-col-8"&gt;
-    &lt;select&gt;
+  &lt;div class="form-col-8"&gt;
+    &lt;select id="favorite-fruit"&gt;
       &lt;option&gt;Banana&lt;/option&gt;
       &lt;option&gt;Pineapple&lt;/option&gt;
       &lt;option&gt;Strawberry&lt;/option&gt;
@@ -122,7 +117,7 @@ <h3>Fitting labels, inputs and flexbox layout with HTML and CSS.</h3>
 
 &lt;div class="form-group"&gt;
   &lt;div class="offset-form-col-4 form-col-8"&gt;
-    &lt;button&gt;Submit&lt;/button&gt;
+    &lt;button type="submit"&gt;Submit&lt;/button&gt;
   &lt;/div&gt;
 &lt;/div&gt;
 </code>
diff --git a/techniques/css/C39.html b/techniques/css/C39.html
index 31f6f0f7f7..2c5577becf 100644
--- a/techniques/css/C39.html
+++ b/techniques/css/C39.html
@@ -6,7 +6,7 @@
 </head>
 <body>
 
-<h1>Using the CSS reduce-motion query to prevent motion</h1>
+<h1>Using the <abbr title="Cascading Style Sheets">CSS</abbr> reduce-motion query to prevent motion</h1>
 
 <section id="meta">
   <h2>Metadata</h2>
@@ -17,17 +17,17 @@ <h2>Metadata</h2>
 
 <section id="applicability">
   <h2>When to Use</h2>
-  <p class="instructions">
+  <p>
     CSS which causes motion that is triggered by user interactions.
   </p>
 </section>
 
 <section id="description">
   <h2>Description</h2>
-  <p>The objective of this technique is to allow users to prevent animation from being displayed on Web pages, via the use of of the 'prefers-reduced-motion' CSS Media Query.</p>
+  <p>The objective of this technique is to allow users to prevent animation from being displayed on Web pages, via the use of the <code class="language-css">prefers-reduced-motion</code> CSS Media Query.</p>
   <p>Some users experience distraction or nausea from animated content. For example, if scrolling a page causes elements to move (other than the essential movement associated with scrolling) it can trigger vestibular disorders. Enclosing the CSS that creates the animations in a media query allows people to prevent those symptoms.</p>
   <p>A typical example is 'parallax scrolling', where backgrounds move at different rates. The movement due to scrolling the page is essential (and under the users control), but additional movement triggered by the scrolling can also trigger vestibular symptoms.</p>
-  <p>The understanding document for <a href="../../understanding/motion-actuation.html#resources">Motion Actuation</a> includes links for changing the reduce motion setting.</p>
+  <p>The understanding document for <a href="../../Understanding/motion-actuation.html#resources">Motion Actuation</a> includes links for changing the reduce motion setting.</p>
 </section>
 
 <section id="examples">
@@ -35,10 +35,9 @@ <h2>Examples</h2>
   <section class="example">
     <h3>'prefers-reduced-motion' CSS Media Query</h3>
     <p>Users can indicate their motion preference for interfaces in their system and the 'prefers-reduced-motion' CSS Media Query will respect that choice. CSS can then be applied to disable that motion for users that request it.</p>
-<pre>
-@media (prefers-reduced-motion: reduce) {
+<pre xml:space="preserve"><code class="language-css">@media (prefers-reduced-motion: reduce) {
   /* CSS to disable motion goes here */
-}</pre>
+}</code></pre>
     <p class="working-example">
       <a href="../../working-examples/css-reduced-motion-query/">Working example of 'prefers-reduced-motion' CSS Media Query</a>
     </p>
@@ -63,6 +62,5 @@ <h3>Expected Results</h3>
     </ul>
   </section>
 </section>
-
 </body>
 </html>
diff --git a/techniques/css/C40.html b/techniques/css/C40.html
index b2353644d3..dd9103696b 100644
--- a/techniques/css/C40.html
+++ b/techniques/css/C40.html
@@ -14,67 +14,55 @@ <h2>Metadata</h2>
 		</section>
 		<section id="applicability">
 			<h2>When to Use</h2>
-			<p>All technologies that support CSS.</p>
+			<p><abbr title="Cascading Style Sheets">CSS</abbr>.</p>
 		</section>
 		<section id="description">
 			<h2>Description</h2>
-			<p>The objective of this technique is to create a two-color focus indicator that has sufficient contrast against any background color. This technique eliminates the need for multiple classes to ensure sufficient contrast of the focus indicator when viewed against different backgrounds.</p>	
+			<p>The objective of this technique is to create a two-color focus indicator that has sufficient contrast against any solid background color. This technique can avoid the need for multiple classes to ensure sufficient contrast of the focus indicator when viewed against different backgrounds.</p>
 
-			<p>The default focus indicators provided by browsers are typically one color, so they are highly visible when some components have focus and not well seen on other components. For instance, if a focus indicator is dark blue and a button is on a white background then it will be easily seen, but if the background is also blue it will not be easily seen.</p>
+			<p>Authors may apply this technique to sites that use a variety of different colored backgrounds. Although it is possible to create different colored focus indicators for different parts of a page, this can be time consuming and it can be easy to miss some components. However, if the focus indicator uses two highly-contrasting colors - a light color and a dark color - then the same indicator can be re-used, since at least one of the two colors will always have enough contrast against any background color.</p>
 
-			<p>Although it is possible to create individual CSS classes to address the different buttons across a site, this can be time consuming and easy to miss some types of interactive content. However, if the focus indicator is two colors - a light color and a dark color - then it will always have sufficient contrast against any background color. Currently, this can be done by combining the <code>text-shadow</code> property with the <code>outline</code> property on the <code>focus</code> indicator.</p>
+			<p>As long as the two indicator colors have a contrast ratio of at least 9:1 with each other, at least one of the two colors is guaranteed to meet 3:1 contrast with any solid background color.</p>
 
-			<p>Developers may apply this technique to parts of the site where its hard to keep track of the focus indicator (such as when there are lots of different component colors). Developers can also provide a single-color focus indicator for components such as a navigation menus that are used across a site, have specific design requirements, and are easy to test and maintain.</p>
+			<p class="note">This technique only guarantees that an indicator will pass if the entire indicator is drawn over the background, not within the boundary of the focused component, and if the entire background behind the indicator is one single, solid color. For example, if the background is an image or gradient, or if the indicator is partially overlaid on top of a different UI component, it may still be necessary to compare the indicator pixel-by-pixel against the background.</p>
 
-			<p class="note">If it can be determined that the two-color focus indicator CSS takes precedence then the test can be applied programmatically rather than by manually focusing on each interface component.</p>
-		
+			<p>In CSS, two-color indicators can be implemented by combining the <code class="language-css">outline</code> and <code class="language-css">box-shadow</code> properties with the <code class="language-css">:focus</code> or <code class="language-css">:focus-visible</code> pseudo-classes.</p>
+
+			<p class="note">Avoid setting <code class="language-css">outline: none</code> to use <code class="language-css">box-shadow</code> on its own. User agents commonly suppress the <code class="language-css">box-shadow</code> property in forced-color modes, so authors should avoid relying on <code class="language-css">box-shadow</code> alone to implement focus indicators. If <code class="language-css">box-shadow</code> only styling is required, consider combining it with an <code class="language-css">outline: 2px transparent solid</code> property to ensure compatibility with forced-color modes.</p>
 		</section>
 		<section id="examples">
 			<h2>Examples</h2>
-			<p>The examples demonstrate a simple implementation where focus styles are applied to all links and inputs. In use on a more complex website care would need to be taken that these styles are not overridden by more specific styles.</p>
+			<p>This example demonstrates a simple implementation where focus styles are applied to all focusable components. In use on a more complex website care would need to be taken that these styles are not overridden by more specific styles.</p>
 
 			<section class="example">
-				<h3>A light and dark dotted indicator</h3>
-				<p>Description</p>
-				<pre><code>*:focus {
-	box-shadow: 0 0 0px 2px white;
-	outline: dotted;
+				<h3>A thick two-color indicator</h3>
+				<p>In this example, the indicator consists of two solid bands of color. Because each color band is 2 CSS pixels thick, either color band is large enough to meet the minimum indicator size requirement on its own. As long as one of the two colors has 3:1 change contrast with the pixels behind and around the focus indicator, the indicator will satisfy both the Focus Appearance and Non-Text Contrast success criteria.</p>
+				<pre xml:space="preserve"><code class="language-css">*:focus {
+	/* inner indicator */
+	outline: 2px #F9F9F9 solid;
+	outline-offset: 0;
+	/* outer indicator */
+	box-shadow: 0 0 0 4px #193146;
 }</code></pre>
-			<p class="working-example"><a href="../../working-examples/css-two-focus-colors/dotted.html">Working example of combining a dark outline and light text shadow</a></p>
-        
+				<p class="working-example"><a href="../../working-examples/css-two-focus-colors/">Working example of a thick two-color indicator</a></p>
 			</section>
-      
-			<section class="example">
-			<h3>A thicker light and dark indicator</h3>
-			<p>Description</p>
-			<pre><code>*:focus { 
-	/* ensure high-contrast mode still has an indicator */
-	outline: 2px transparent solid;
-
-	/* Apply a thick yellow box-shadow with 
-	   a thin dark blue indicator in the middle */
-	box-shadow: 0 0 0 2px #F9F9D1, 0 0 0 4px #396196, 0 0 4px 8px #F9F9D1;
-}</code></pre>
-			<p class="working-example"><a href="../../working-examples/css-two-focus-colors/lined.html">Working example of combining a dark outline and light text shadow</a></p>
-        
-		</section>
-
 		</section>
 		<section id="tests">
 			<h2>Tests</h2>
 			
 			<section class="test-procedure">
 				<h3>Procedure</h3>
-				<p>For each focusable user interface element:</p>
+				<p>For each focusable user interface component:</p>
 				<ol>
-					<li>Check that the two-colors in the focus indicator are adjacent and have a contrast ratio that is 3:1 or greater with each other.</li>
-					<li>Check that the colors used contrast with the adjacent colors, or are at least 2 CSS pixels thick.</li>
+					<li>Check that the two colors in the focus indicator have a contrast ratio that is 9:1 or greater with each other.</li>
+					<li>Check that each color band is at least 2 CSS pixels thick.</li>
+					<li>Check that the indicator only appears overtop one solid background color at a time.</li>
 				</ol>
 			</section>
 			<section class="test-results">
 				<h3>Expected Results</h3>
 				<ul>
-					<li>#1 and #2 are true.</li>
+					<li>#1, #2, and #3 are true.</li>
 				</ul>
 			</section>
 		</section>
@@ -83,13 +71,16 @@ <h2>Related Techniques</h2>
 			<ul>
 				<li><a href="../general/G149">G149</a></li>
 				<li><a href="../general/G195">G195</a></li>
+				<li><a href="C15">C15</a></li>
+				<li><a href="../general/G165">G165</a></li>
+        <li><a href="C45">C45</a></li>
 			</ul>
 		</section>
 		<section id="resources">
 			<h2>Resources</h2>
 			<ul>
-				<li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:focus">The :focus pseudo-class on the Mozilla Developer Network</a></li>
-				<li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible">The :focus-visible pseudo-class on the Mozilla Developer Network</a></li>
+				<li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible">The <code class="language-css">:focus-visible</code> pseudo-class on the Mozilla Developer Network</a></li>
+				<li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:focus">The <code class="language-css">:focus</code> pseudo-class on the Mozilla Developer Network</a></li>
 			</ul>
 		</section>
 	</body>
diff --git a/techniques/css/C41-enhanced.html b/techniques/css/C41-enhanced.html
deleted file mode 100644
index eac9d380d8..0000000000
--- a/techniques/css/C41-enhanced.html
+++ /dev/null
@@ -1,86 +0,0 @@
-<!DOCTYPE html>
-<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
-	<head>
-		<title>Creating a strong focus indicator within the component</title>
-		<link rel="stylesheet" type="text/css" href="../../css/editors.css"/>
-	</head>
-	<body>
-		<h1>Creating a strong focus indicator within the component</h1>
-		<section id="meta">
-			<h2>Metadata</h2>
-			<p id="id"></p>
-			<p id="technology">CSS</p>
-			<p id="type"></p>
-		</section>
-		<section id="applicability">
-			<h2>When to Use</h2>
-			<p>All technologies that support CSS.</p>
-		</section>
-		<section id="description">
-			<h2>Description</h2>
-			<p>The objective of this technique is to create a highly visible focus indicator that has sufficient contrast against the internal background color of a component.</p>	
-		
-		</section>
-		<section id="examples">
-			<h2>Examples</h2>
-			<p>The examples demonstrate a simple implementation where a focus styles is applied to blue background. As the indicator is contained inside the component, you can be sure it maintains contrast whatever background the component is placed on</p>
-
-			<section class="example">
-				<h3>Inner border</h3>
-				<p>HTML</p>
-                <pre><code>&lt;button&gt;Example button&lt;/button&gt;</code></pre>
-                
-                <p>CSS to provide the indicator. It narrows the scope to buttons within the <code>main</code> element.</p>
-                <pre><code>button { 
-    background-color: #3f86d4 /* medium blue */
-    color: white;
-    padding: 10px;
-    border: 1px #333 solid;
-}
-main button:focus { 
-    outline: 2px #fff5be solid; /* light yellow */
-    outline-offset: -4px;
-}</code></pre>
-
-                <figure id="focus-indicator-inside">
-                    <img src="../../understanding/22/img/focus-indicator-innerline-strong.png" alt="Three blue buttons with a dark border, the middle button showing a bright yellow outline inside the button." width="300" />
-                    <figcaption>The default and focused states of the button.</figcaption>
-                </figure>
-        
-			</section>
-      
-		</section>
-		<section id="tests">
-			<h2>Tests</h2>
-			
-			<section class="test-procedure">
-				<h3>Procedure</h3>
-				<p>For each focusable user interface element: </p>
-				<ol>
-                    <li>Place keyboard focus on each focusable user interface element on the page using the keyboard.</li>
-                    <li>Check that the focus indicator area is at least the size of a 2 CSS px border around the component.</li>
-                    <li>Check that the change of contrast of the indicator between focused and unfocused states has a ratio of 4.5:1 for the minimum focus indicator area.</li>
-				</ol>
-			</section>
-			<section class="test-results">
-				<h3>Expected Results</h3>
-				<ul>
-					<li>#2 and #3 are true.</li>
-				</ul>
-			</section>
-		</section>
-		<section id="related">
-			<h2>Related Techniques</h2>
-			<ul>
-				<li><a href="../general/G195">G195</a></li>
-			</ul>
-		</section>
-		<section id="resources">
-			<h2>Resources</h2>
-			<ul>
-				<li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:focus">The :focus pseudo-class on the Mozilla Developer Network</a></li>
-				<li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible">The :focus-visible pseudo-class on the Mozilla Developer Network</a></li>
-			</ul>
-		</section>
-	</body>
-</html>
diff --git a/techniques/css/C41.html b/techniques/css/C41.html
index cd881bb529..1ac157bc4d 100644
--- a/techniques/css/C41.html
+++ b/techniques/css/C41.html
@@ -1,11 +1,11 @@
 <!DOCTYPE html>
 <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
 	<head>
-		<title>Creating a focus indicator within the component</title>
+		<title>Creating a strong focus indicator within the component</title>
 		<link rel="stylesheet" type="text/css" href="../../css/editors.css"/>
 	</head>
 	<body>
-		<h1>Creating a focus indicator within the component</h1>
+		<h1>Creating a strong focus indicator within the component</h1>
 		<section id="meta">
 			<h2>Metadata</h2>
 			<p id="id"></p>
@@ -14,7 +14,7 @@ <h2>Metadata</h2>
 		</section>
 		<section id="applicability">
 			<h2>When to Use</h2>
-			<p>All technologies that support CSS.</p>
+			<p><abbr title="Cascading Style Sheets">CSS</abbr>.</p>
 		</section>
 		<section id="description">
 			<h2>Description</h2>
@@ -27,23 +27,27 @@ <h2>Examples</h2>
 
 			<section class="example">
 				<h3>Inner border</h3>
-				<p>HTML</p>
-                <pre><code>&lt;button&gt;Example button&lt;/button&gt;</code></pre>
-                
-                <p>CSS to provide the indicator. It narrows the scope to buttons within the <code>main</code> element.</p>
-                <pre><code>button { 
-    background-color: #3f86d4 /* medium blue */
-    color: white;
-    padding: 10px;
-    border: 1px #333 solid;
+				<section id="the-html">
+					<h4><abbr title="HyperText Markup Language">HTML</abbr></h4>
+<pre xml:space="preserve"><code class="language-html">&lt;button type="button"&gt;Example button&lt;/button&gt;</code></pre>
+				</section>
+				<section id="the-css">
+					<h4>CSS</h4>                
+					<p>CSS to provide the indicator. It narrows the scope to buttons within the <code class="language-html">main</code> element.</p>
+<pre xml:space="preserve"><code class="language-css">button { 
+  background-color: #236AB8; /* medium-dark blue */
+  color: white;
+  padding: 10px;
 }
+
 main button:focus { 
-    outline: 2px #fff5be solid; /* light yellow */
-    outline-offset: -4px;
+  outline: 3px #fff5be solid; /* light yellow */
+  outline-offset: -4px;
 }</code></pre>
+				</section>
 
                 <figure id="focus-indicator-inside">
-                    <img src="../../understanding/22/img/focus-indicator-inside.png" alt="Three blue buttons with a dark border, the middle button showing a bright yellow outline inside the button." width="200" />
+                    <img src="../../Understanding/22/img/focus-indicator-innerline-strong.png" alt="Three blue buttons with a dark border, the middle button showing a bright yellow outline inside the button." width="300"/>
                     <figcaption>The default and focused states of the button.</figcaption>
                 </figure>
         
@@ -55,19 +59,19 @@ <h2>Tests</h2>
 			
 			<section class="test-procedure">
 				<h3>Procedure</h3>
-				<p>For each focusable user interface element: </p>
+				<p>For each focusable user interface component:</p>
 				<ol>
                     <li>Place keyboard focus on each focusable user interface element on the page using the keyboard.</li>
-                    <li>Check that the focus indicator area is at least the size of a 1 CSS px border around the component.</li>
-                    <li>Check that the change of contrast of the indicator between focused and unfocused states has a ratio of 3:1 for the minimum focus indicator area.</li>
-                    <li>If the focus indicator does not have 3:1 contrast ratio with its adjacent colors, check that it is at least 2px thick.</li>
+                    <li>Check that the focus indicator area is at least the size of a 2 CSS px border around the component.</li>
+                    <li>Check that the change of contrast of the indicator between focused and unfocused states has a ratio of 4.5:1 for the minimum focus indicator area.</li>
 				</ol>
 			</section>
 			<section class="test-results">
 				<h3>Expected Results</h3>
 				<ul>
-					<li>#2, #3, #4 are true.</li>
+					<li>#2 and #3 are true.</li>
 				</ul>
+				<p>The required change of contrast for <a href="focus-not-obscured-minimum">Focus Appearance (Minimum)</a> is 3:1, this technique goes slightly beyond the minumum requirement.</p>
 			</section>
 		</section>
 		<section id="related">
@@ -82,6 +86,6 @@ <h2>Resources</h2>
 				<li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:focus">The :focus pseudo-class on the Mozilla Developer Network</a></li>
 				<li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible">The :focus-visible pseudo-class on the Mozilla Developer Network</a></li>
 			</ul>
-		</section>
+		</section>	
 	</body>
 </html>
diff --git a/techniques/css/C42.html b/techniques/css/C42.html
index a5ba9c3e07..65fccc35df 100644
--- a/techniques/css/C42.html
+++ b/techniques/css/C42.html
@@ -5,7 +5,7 @@
 		<link rel="stylesheet" type="text/css" href="../../css/editors.css"/>
 	</head>
 	<body>
-		<h1>Using min-height and min-width to ensure sufficient target spacing</h1>
+		<h1>Using <code class="language-css">min-height</code> and <code class="language-css">min-width</code> to ensure sufficient target spacing</h1>
 		<section id="meta">
 			<h2>Metadata</h2>
 			<p id="id"></p>
@@ -14,11 +14,11 @@ <h2>Metadata</h2>
 		</section>
 		<section id="applicability">
 			<h2>When to Use</h2>
-			<p>All technologies that support CSS and pointer input.</p>
+			<p>All technologies that support <abbr title="Cascading Style Sheets">CSS</abbr> and pointer input.</p>
 		</section>
 		<section id="description">
 			<h2>Description</h2>
-			<p>The objective of this technique is to ensure that links in navigation or pagination menus will be spaced so that they fall within an area that measures at least 44 x 44 CSS pixels if the target area itself is smaller than that. The aim is to provide an adequate target clearance so the offset to adjacent targets is sufficient to prevent accidental pointer activation of adjacent targets.</p>	
+			<p>The objective of this technique is to ensure that links in navigation or pagination menus will be spaced so that they fall within an area that measures at least 44 &#215; 44 CSS pixels if the target area itself is smaller than that. The aim is to provide an adequate target clearance so the offset to adjacent targets is sufficient to prevent accidental pointer activation of adjacent targets.</p>	
 		
 		</section>
 		<section id="examples">
@@ -26,60 +26,71 @@ <h2>Examples</h2>
 			<p>The following examples can be seen as rendered versions in the <a href="../../working-examples/css-pointer-spacing/">working examples</a>.</p>
 
 			<section class="example">
-				<h3>Using a display value of inline-block and min-height / width</h3>
-				<p>The first example shows a situation where the targets (in this case, the linked numbers in th pagination menu) are smaller than 44 x 44 CSS pixels. However, the list items that contain them have a minimum height and width of 44 px set, so that sufficient target spacing is assured.</p>
+				<h3>Using a display value of <code class="language-css">inline-block</code>, <code class="language-css">min-height</code>, and <code class="language-css">min-width</code></h3>
+				<p>The first example shows a situation where the targets (in this case, the linked numbers in the pagination navigation) are smaller than 44 &#215; 44 CSS pixels. However, the list items that contain them have a minimum height and width of 44 px set, so that sufficient target spacing is assured.</p>
 				<figure id="pointer-spacing-block">
-					<img src="img/pointer-spacing-1.png" alt="A horizontal pagination component immediately above the search results." />
+					<img src="img/pointer-spacing-1.png" alt="A horizontal pagination component immediately above the search results."/>
 					<figcaption>Example of using CSS to ensure enough spacing around targets</figcaption>
 				</figure>
-				<p>Given the following HTML:</p>
-				<pre><code>&lt;nav class=&quot;pag&quot; aria-label=&quot;pagination menu&quot;&gt;
-	&lt;ol class=&quot;pagination-1&quot;&gt;
-		&lt;li&gt;&lt;span&gt;previous&lt;/span&gt;&lt;/li&gt;
-		&lt;li&gt;&lt;strong&gt;1&lt;/strong&gt;&lt;/li&gt;
-		&lt;li&gt;&lt;a href=&quot;#&quot;&gt;2&lt;/a&gt;&lt;/li&gt;
-		&lt;li&gt;&lt;a href=&quot;#&quot;&gt;3&lt;/a&gt;&lt;/li&gt;
-		&lt;li&gt;&lt;a href=&quot;#&quot;&gt;4&lt;/a&gt;&lt;/li&gt;
-		&lt;li&gt;&lt;a href=&quot;#&quot;&gt;5&lt;/a&gt;&lt;/li&gt;
-		&lt;li&gt;&lt;a href=&quot;#&quot;&gt;next&lt;/a&gt;&lt;/li&gt;
-	&lt;/ol&gt;
+
+				<section id="the-html">
+					<h4>The <abbr title="HyperText Markup Language">HTML</abbr></h4>
+<pre xml:space="preserve"><code class="language-html">&lt;nav aria-label="pagination"&gt;
+  &lt;ol class="pagination-1"&gt;
+    &lt;li&gt;&lt;a class="previous"&gt;previous&lt;/a&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;a aria-current="page"&gt;1&lt;/li&gt;
+    &lt;li&gt;&lt;a href="/page-2"&gt;2&lt;/a&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;a href="/page-3"&gt;3&lt;/a&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;a href="/page-4"&gt;4&lt;/a&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;a href="/page-5"&gt;5&lt;/a&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;a href="/pages-6-10"&gt;next&lt;/a&gt;&lt;/li&gt;
+  &lt;/ol&gt;
 &lt;/nav&gt;</code></pre>
-				<p>The following CSS would ensure the minimum spacing is applied:</p>
-				<pre><code>ol.pagination-1 li {
-	display: inline-block; 
-	min-width: 44px;
-	min-height: 44px;
+<h4>The CSS</h4>
+<pre xml:space="preserve"><code class="language-css">.pagination-1 li {
+  display: inline-block; 
+  min-height: 44px;
+  min-width: 44px;
 }</code></pre>
+				</section>
 			
 			</section>
 			<section class="example">
-				<h3>Using a display value of flex and min-height / width</h3>
-				<p>The second example uses min-width and min-height on the targets (the linked numbers in the pagination menu) and not on the parent container, thereby meeting this target spacing Success Criterion and incidentally also the AAA Success Criterion 2.5.5 Target Size.</p>
+				<h3>Using a <code class="language-css">display</code> value of <code class="language-css">flex</code> and <code class="language-css">min-height</code> / <code class="language-css">width</code></h3>
+				<p>The second example uses <code class="language-css">min-width</code> and <code class="language-css">min-height</code> on the targets (the linked numbers in the pagination menu) and not on the parent container, thereby meeting this target spacing Success Criterion and incidentally also the AAA Success Criterion 2.5.5 Target Size.</p>
 				<figure id="pointer-spacing-flex">
-					<img src="img/pointer-spacing-1.png" alt="A horizontal pagination component immediately above the search results. It looks identical to the previous example. " />
+					<img src="img/pointer-spacing-2.png" alt="A horizontal pagination component immediately above the search results."/>
 					<figcaption>Example of using CSS to ensure enough spacing within targets</figcaption>
 				</figure>
-				<p>Given the following HTML:</p>
-				<pre><code>&lt;nav class=&quot;pag&quot; aria-label=&quot;pagination menu&quot;&gt;
-	&lt;ol class=&quot;pagination-2&quot;&gt;
-		&lt;li&gt;&lt;span&gt;previous&lt;/span&gt;&lt;/li&gt;
-		&lt;li&gt;&lt;strong&gt;1&lt;/strong&gt;&lt;/li&gt;
-		&lt;li&gt;&lt;a href=&quot;#&quot;&gt;2&lt;/a&gt;&lt;/li&gt;
-		&lt;li&gt;&lt;a href=&quot;#&quot;&gt;3&lt;/a&gt;&lt;/li&gt;
-		&lt;li&gt;&lt;a href=&quot;#&quot;&gt;4&lt;/a&gt;&lt;/li&gt;
-		&lt;li&gt;&lt;a href=&quot;#&quot;&gt;5&lt;/a&gt;&lt;/li&gt;
-		&lt;li&gt;&lt;a href=&quot;#&quot;&gt;next&lt;/a&gt;&lt;/li&gt;
-	&lt;/ol&gt;
-  &lt;/nav&gt;</code></pre>
-					<p>The following CSS ensures the minimum size is applied:</p>
-					<pre><code>ol.pagination-2 a,
-ol.pagination-2 strong,
-ol.pagination-2 span {
-	display: block;
-	line-height:44px;
-	min-height:44px;
-	min-width: 44px;
+				<section id="the-html">
+					<h4>The HTML</h4>
+<pre xml:space="preserve"><code class="language-html">&lt;nav aria-label="pagination"&gt;
+  &lt;ol class="pagination-2"&gt;
+    &lt;li&gt;&lt;a class="previous"&gt;previous&lt;/a&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;a aria-current="page"&gt;1&lt;/li&gt;
+    &lt;li&gt;&lt;a href="/page-2"&gt;2&lt;/a&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;a href="/page-3"&gt;3&lt;/a&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;a href="/page-4"&gt;4&lt;/a&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;a href="/page-5"&gt;5&lt;/a&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;a href="/pages-6-10"&gt;next&lt;/a&gt;&lt;/li&gt;
+  &lt;/ol&gt;
+&lt;/nav&gt;</code></pre>
+				</section>
+
+				<section id="the-css">
+					<h4>The CSS</h4>
+<pre xml:space="preserve"><code class="language-css">.pagination-2 {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+ol.pagination-2 a {
+  display: block;
+  line-height: 44px;
+  min-height: 44px;
+  min-width: 44px;
 }</code></pre>
+				</section>
 			</section>
       
 		</section>
@@ -101,13 +112,12 @@ <h3>Expected Results</h3>
 				</ul>
 			</section>
 		</section>
-		<section id="related">
+		<!-- <section id="related">
 			<h2>Related Techniques</h2>
 
-		</section>
-		<section id="resources">
+		</section> -->
+		<!-- <section id="resources">
 			<h2>Resources</h2>
-
-		</section>
+		</section> -->
 	</body>
 </html>
diff --git a/techniques/css/C43.html b/techniques/css/C43.html
new file mode 100644
index 0000000000..ee3d14329f
--- /dev/null
+++ b/techniques/css/C43.html
@@ -0,0 +1,198 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
+	<head>
+		<title>Using CSS scroll-padding to un-obscure content</title>
+		<link rel="stylesheet" type="text/css" href="../../css/editors.css"/>
+	</head>
+	<body>
+		<h1>Using <abbr title="Cascading Style Sheets">CSS</abbr> <code class="language-css">scroll-padding</code> to un-obscure content</h1>
+		<section id="meta">
+			<h2>Metadata</h2>
+			<p id="id"></p>
+			<p id="technology">CSS</p>
+			<p id="type"></p>
+		</section>
+		<section id="applicability">
+			<h2>When to Use</h2>
+			<p>All technologies that support CSS.</p>
+		</section>
+		<section id="description">
+			<h2>Description</h2>
+			<p>The objective of this technique is to ensure that user interface components (for example: links, buttons, and form fields) that are initially completely obscured by a fixed-position component can still be accessed by users. In this example, this is achieved using CSS <code class="language-css">padding</code> and <code class="language-css">scroll-padding</code> properties to create space underneath the site footer and allow the link in the footer to scroll into view when it is focused with a keyboard.</p>
+		</section>
+		<section id="examples">
+			<h2>Examples</h2>
+
+			<section class="example">
+				<h3>Using CSS <code class="language-css">scroll-padding</code> to un-obscure content</h3>
+				<p>This example shows a situation where there is a fixed-position banner at the bottom of the screen that is covering up the site footer, which contains a link. This type of fixed-position banner is a common design for cookie-consent banners.</p>
+        <aside class="note">
+          <p>This example demonstrates a technique to un-obscure content underneath a fixed-position banner. To prevent the page becoming unusable at smaller screen sizes, the banner becomes un-fixed. To observe the <code class="language-css">scroll-padding</code> effect you will need to use a viewport over 800px wide.</p>
+        </aside>
+				<p>Working example: <a href="../../working-examples/css-padding-focus-not-obscured/">Using CSS <code class="language-css">scroll-padding</code> to un-obscure content</a>.</p>
+<pre xml:space="preserve"><code>&lt;!doctype html&gt;
+&lt;html lang="en"&gt;
+&lt;head&gt;
+  &lt;meta charset="utf-8"&gt;
+  &lt;meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"&gt;
+  &lt;title&gt;Using CSS scroll-padding to un-obscure content&lt;/title&gt;
+  &lt;style&gt;
+    ...
+
+    :root{
+      --height-dialog: 400px;
+      --breathing-room: 20px;
+      --scroll-padding: calc(var(--height-dialog) + var(--breathing-room));      
+    }
+
+    .wrapper {
+      display:grid;
+      gap:1rem;
+      grid-template-columns:repeat(9, 1fr);
+      grid-template-rows:8rem auto minmax(10rem, max-content);
+      min-block-size: 100vh;
+    }
+
+    .wrapper &gt; * {
+      border:1px solid var(--black);
+      padding:1rem;
+    }
+
+    header {
+      grid-column:1 / -1;
+      grid-row:1;
+    }
+
+    main {
+      grid-column:1 / 8;
+    }
+
+    aside {
+      grid-column:8 / 10;
+    }
+
+    footer {
+      grid-column:1 / -1;
+    }
+
+    @media (max-width:50rem) {
+      main {
+       grid-column:1 / -1;
+      }
+
+      aside {
+        grid-column:1 / -1;
+      }
+    }
+
+    .fixed-position-banner {
+      background:var(--banner-background);
+      border:3px solid var(--banner-border);
+      margin-block-end:0.5rem;
+      padding:1rem 1rem 5rem;
+      position:relative;
+      width:calc(100vw - 1rem);
+    }
+
+    @media (min-width: 50rem) {
+      html {
+        padding-bottom:var(--height-dialog);
+        scroll-padding-bottom:var(--scroll-padding);
+      }
+
+     .fixed-position-banner {
+        margin-block-end:0;
+        position:fixed;
+        inset:auto 0 0 0;
+      }
+    } 
+    ...
+  &lt;/style&gt;
+&lt;/head&gt;
+&lt;body&gt;
+  &lt;dialog class="fixed-position-banner"&gt;
+    &lt;h2 tabindex="-1"&gt;Fixed-Position Banner&lt;/h2&gt;
+    &lt;button aria-label="close fixed-position banner" class="close-banner" type="button"&gt;
+      ...
+    &lt;/button&gt;
+  &lt;/dialog&gt;
+  &lt;div class="wrapper"&gt;
+    &lt;header&gt;
+      &lt;p&gt;Header Content&lt;/p&gt;
+    &lt;/header&gt;
+    &lt;main&gt;
+      &lt;h1&gt;Main Content&lt;/h1&gt;
+    &lt;/main&gt;
+    &lt;aside&gt;
+      &lt;h2&gt;Sidebar Content&lt;/h2&gt;
+      &lt;p&gt;&lt;a href="https://example.com"&gt;Here's an example link in the sidebar&lt;/a&gt;.&lt;/p&gt;
+    &lt;/aside&gt;
+    &lt;footer&gt;
+      &lt;h2&gt;Footer Content&lt;/h2&gt;
+      &lt;p&gt;&lt;a href="https://example.com"&gt;Here&#39;s an example link in the footer&lt;/a&gt;.&lt;/p&gt;
+    &lt;/footer&gt;
+  &lt;/div&gt;
+  &lt;script&gt;
+    window.addEventListener('DOMContentLoaded', () => {
+      const elFixedBanner = document.querySelector('dialog');
+      const elCloseBannerBtn = document.querySelector(".close-banner");
+
+      elFixedBanner.show();
+
+      const getDialogHeight = () => {
+        const height = elFixedBanner.offsetHeight;
+        document.documentElement.style.setProperty('--height-dialog', `${height}px`);
+        document.documentElement.style.setProperty('--breathing-room', `${height ? 20 : 0}px`);
+      }
+
+      const observer = new ResizeObserver(getDialogHeight);
+      observer.observe(elFixedBanner);
+
+      elCloseBannerBtn.addEventListener("click", function(e){
+        elFixedBanner.close();
+      }, false);
+    });
+  &lt;/script&gt;	
+&lt;/body&gt;
+&lt;/html&gt;</code></pre>
+
+			</section>      
+		</section>
+		
+		<section id="tests">
+			<h2>Tests</h2>
+			<section class="test-procedure">
+				<h3>Procedure</h3>
+
+				<p>For each user interface component that can receive keyboard focus:</p>
+				<ol>
+					<li>Check that the user interface component is not entirely hidden when it receives keyboard focus.</li>
+          <li>Check that no part of the user interface component is hidden when it receives keyboard focus.</li>
+				</ol>
+			</section>
+			<section class="test-results">
+				<h3>Expected Results</h3>
+				<ul>
+					<li>Check #1 is true.</li>
+          <li>For Focus Not Obscured (Enhanced) (Level AAA), #2 is also true.</li>
+				</ul>
+			</section>
+		</section>
+		<section id="related">
+			<h2>Related Techniques</h2>
+			<ol>
+				<li><a href="C32.html">C32</a></li>
+				<li><a href="C34.html">C34</a></li>
+			</ol>
+
+		</section>
+		<section id="resources">
+			<h2>Resources</h2>
+			<ol>
+				<li><a href="https://www.w3.org/TR/css-box/#padding"><abbr title="World Wide Web Consortium">W3C</abbr> - CSS padding</a>.</li>
+				<li><a href="https://www.w3.org/TR/css-scroll-snap/#scroll-padding">W3C - CSS the <code class="language-css">scroll-padding</code> property</a>.</li>
+			</ol>
+
+		</section>
+	</body>
+</html>
diff --git a/techniques/css/C45.html b/techniques/css/C45.html
new file mode 100644
index 0000000000..8c9fd37786
--- /dev/null
+++ b/techniques/css/C45.html
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
+	<head>
+		<title>Using CSS :focus-visible to provide keyboard focus indication</title>
+		<link rel="stylesheet" type="text/css" href="../../css/editors.css"/>
+	</head>
+	<body>
+		<h1>Using <abbr title="Cascading Style Sheets">CSS</abbr> <code class="language-css">:focus-visible</code> to provide keyboard focus indication</h1>
+		<section id="meta">
+			<h2>Metadata</h2>
+			<p id="id"></p>
+			<p id="technology">CSS</p>
+			<p id="type"></p>
+		</section>
+		<section id="applicability">
+			<h2>When to Use</h2>
+			<p>All technologies that support CSS.</p>
+		</section>
+		<section id="description">
+			<h2>Description</h2>
+			<p>The objective of this technique is to provide custom styles for interactive elements when they receive keyboard focus. In this example, this is achieved using the CSS <code class="language-css">:focus-visible</code> pseudo-class.</p>
+      <p>Styles defined with the regular <code class="language-css">:focus</code> pseudo-class are applied whenever an element has focus, regardless of how it received focus. In contrast, user agents apply additional heuristics and logic to decide when to show <code class="language-css">:focus-visible</code> styles – in particular, browsers always show these styles when a user is navigating using the keyboard, but will generally <em>not</em> show them as a result of a mouse/pointer interaction (with the exception of elements that also support keyboard input, such as <code>&lt;input&gt;</code> elements). This allows authors to provide strong visible focus indication for keyboard users, without forcing them on mouse/pointer users who may not necessarily want or need them (for instance, because they find them visually distracting).</p>
+			<p>This satisfies the requirement of providing a <q>mode of operation where the keyboard focus indicator is visible</q>.</p>
+			<div class="note">
+				<p>This technique is only sufficient <em>if</em> it uses styles that provide a <em>visible</em> focus indicator.</p>
+			</div>
+			<div class="note">
+				<p>There may be situations where mouse/pointer users could also benefit from having a visible focus indicator, even though they did not set focus to an element using the keyboard. As a best practice, consider still providing an explicit <code class="language-css">:focus</code> style for these cases.</p>
+      </div>
+		</section>
+		<section id="examples">
+			<h2>Examples</h2>
+			<section class="example">
+				<h3>Using <abbr title="Cascading Style Sheets">CSS</abbr> <code class="language-css">:focus-visible</code> to provide keyboard focus indication</h3>
+				<p>In this example, we have a standard <code>&lt;button&gt;</code> control in the HTML.</p>
+        <p>By default, in all modern browsers, this button does not show any focus indication when activated using a mouse/pointer. Browsers show their default focus outline/indication when a user sets focus on the button using <kbd>Tab</kbd>.</p>
+        <p>In order to make this focus indication more prominent, we use the <code class="language-css">:focus-visible</code> pseudo-class selector to define a more intentional and pronounced focus style.</p>
+				<p>Working example: <a href="../../working-examples/css-focus-visible/">Using CSS <code class="language-css">:focus-visible</code> to provide keyboard focus indication</a>.</p>
+<pre><code>&lt;!DOCTYPE html&gt;
+&lt;html lang="en"&gt;
+&lt;head&gt;
+  &lt;meta charset="utf-8"&gt;
+  &lt;meta name="viewport" content="width=device-width,
+              initial-scale=1, shrink-to-fit=no"&gt;
+  &lt;title&gt;Using CSS :focus-visible to
+         provide keyboard focus indication&lt;/title&gt;
+  &lt;style&gt;
+    /* Specific :focus-visible styles */
+
+    :focus-visible {
+      outline: 5px solid red;
+    }
+    …
+  &lt;/style&gt;
+&lt;/head&gt;
+&lt;body&gt;
+  …
+  &lt;button&gt;Example button&lt;/button&gt;
+  …
+&lt;/body&gt;
+&lt;/html&gt;</code></pre>
+			</section>      
+		</section>
+		<section id="tests">
+			<h2>Tests</h2>
+			<section class="test-procedure">
+				<h3>Procedure</h3>
+				<p>For each user interface component that can receive keyboard focus:</p>
+				<ol>
+					<li>Set focus to the interface component using the keyboard (generally, navigating to the component using <kbd>Tab</kbd>/<kbd>Shift+Tab</kbd>)</li>
+          <li>Verify that once the component has received focus, a focus indicator is visible</li>
+				</ol>
+			</section>
+			<section class="test-results">
+				<h3>Expected Results</h3>
+				<ul>
+					<li>Check #2 is true.</li>
+				</ul>
+			</section>
+		</section>
+		<section id="related">
+			<h2>Related Techniques</h2>
+			<ol>
+				<li><a href="C15">C15</a></li>
+				<li><a href="../general/G165">G165</a></li>
+        <li><a href="../general/G195">G195</a></li>
+        <li><a href="C40">C40</a></li>
+			</ol>
+		</section>
+		<section id="resources">
+			<h2>Resources</h2>
+			<ol>
+				<li><a href="https://www.w3.org/TR/selectors-4/#the-focus-visible-pseudo">CSS Selectors Level 4 - <code class="language-css">:focus-visible</code> pseudo-class</a>.</li>
+				<li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible"><abbr title="Mozilla Developer Network">MDN</abbr> - <code class="language-css">:focus-visible</code> pseudo-class</a>.</li>
+			</ol>
+		</section>
+	</body>
+</html>
diff --git a/techniques/css/C6.html b/techniques/css/C6.html
index ee2529e349..a02a84a905 100644
--- a/techniques/css/C6.html
+++ b/techniques/css/C6.html
@@ -1,15 +1,31 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Positioning content based on structural markup</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Positioning content based on structural markup</h1><section class="meta"><p class="id">ID: C6</p><p class="technology">Technology: css</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
-      <p>All technologies that support CSS</p>
-   </section><section id="description"><h2>Description</h2>
-      <p>The objective of this technique is to demonstrate how visual appearance may be enhanced via style sheets while still maintaining a meaningful presentation when style sheets are not applied. Using the positioning properties of CSS2, content may be displayed at any position on the user's viewport. Using structural elements ensures that the meaning of the content can still be determined when styling is not available. </p>
-   </section><section id="examples"><h2>Examples</h2>
-      <section class="example">
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>Positioning content based on structural markup</title>
+		<link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+	</head>
+	<body>
+		<h1>Positioning content based on structural markup</h1>
+		<section class="meta">
+			<p class="id">ID: C6</p>
+			<p class="technology">Technology: css</p>
+			<p class="type">Type: Technique</p>
+		</section>
+		<section id="applicability">
+			<h2>When to Use</h2>
+      <p>All technologies that support <abbr title="Cascading Style Sheets">CSS</abbr></p>
+   </section>
+	 <section id="description">
+		<h2>Description</h2>
+		<p>The objective of this technique is to demonstrate how visual appearance may be enhanced via style sheets while still maintaining a meaningful presentation when style sheets are not applied. Using the positioning properties of CSS, content may be displayed at any position on the user's viewport. Using structural elements ensures that the meaning of the content can still be determined when styling is not available.</p>
+   </section>
+	 <section id="examples">
+		<h2>Examples</h2>
+		<section class="example">
+			<p>In this example structural markup (description lists) have been applied to the content. CSS has been used to style the content into columnar form. Each class absolutely positions the content into columns and the margins have been set to 0 to override the default behavior of user agents to display <abbr title="HyperText Markup Language">HTML</abbr> definition lists with the <code class="language-html">dd</code> element indented.</p>
+			<p>Here is the content to be displayed:</p>
          
-            <p>In this example structural markup (definition lists) have been applied to the content. CSS has been used to style the content into columnar form. Each class absolutely positions the content into columns and the margins have been set to 0 to override the default behavior of user agents to display HTML definition lists with the DD element indented. </p>
-            <p>Here is the content to be displayed:</p>
-         
-         <pre xml:space="preserve">
- &lt;div class="box"&gt;
+<pre xml:space="preserve"><code class="language-html">&lt;div class="box"&gt;
   &lt;dl&gt;
     &lt;dt class="menu1"&gt;Products&lt;/dt&gt;
     &lt;dd class="item1"&gt;Telephones&lt;/dd&gt;
@@ -18,15 +34,12 @@
     &lt;dt class="menu2"&gt;Locations&lt;/dt&gt;
     &lt;dd class="item4"&gt;Idaho&lt;/dd&gt;
     &lt;dd class="item5"&gt;Wisconsin&lt;/dd&gt;
-    &lt;/dt&gt;
   &lt;/dl&gt;
- &lt;/div&gt;
-</pre>
+&lt;/div&gt;</code></pre>
          
-            <p>Here is the CSS which positions and styles the above elements:</p>
+<p>Here is the CSS which positions and styles the above elements:</p>
          
-         <pre xml:space="preserve">
- .item1 {
+<pre xml:space="preserve"><code class="language-css">.item1 {
    left: 0;
    margin: 0;
    position: absolute;
@@ -80,27 +93,33 @@
    left: 5em;
    position: absolute;
    top: 5em;
- }
-
-</pre>
-         
-            <p>When style sheets are applied, the data are displayed in two columns of "Products" and "Locations." When the style sheets are not applied, the text appears in a definition list which maintains the structure and reading order. </p>
+ }</code></pre>
          
-      </section>
-   </section><section id="tests"><h2>Tests</h2>
-      <section class="procedure"><h3>Procedure</h3>
-         <p>For content which uses CSS for positioning
-							</p>
-         <ol>
-            <li>Remove the style information from the document or turn off use of style sheets in the user agent.</li>
-            <li>Check that the structural relations and the meaning of the content are preserved.</li>
-         </ol>
-      </section>
-      <section class="results"><h3>Expected Results</h3>
-         <ul>
-            <li>Check #2 is true.</li>
-         </ul>
-      </section>
-   </section><section id="related"><h2>Related Techniques</h2><ul>
+		<p>When style sheets are applied, the data are displayed in two columns of "Products" and "Locations." When the style sheets are not applied, the text appears in a definition list which maintains the structure and reading order.</p>
+	</section>
+   </section>
+	 <section id="tests">
+		<h2>Tests</h2>
+		<section class="procedure">
+			<h3>Procedure</h3>
+			<p>For content which uses CSS for positioning:</p>
+			<ol>
+				<li>Remove the style information from the document or turn off use of style sheets in the user agent</li>
+				<li>Check that the structural relations and the meaning of the content are preserved.</li>
+			</ol>
+		</section>
+		<section class="results">
+			<h3>Expected Results</h3>
+			<ul>
+				<li>Check #2 is true.</li>
+			</ul>
+		</section>
+   </section>
+	 <section id="related">
+		<h2>Related Techniques</h2>
+		<ul>
       <li><a href="../failures/F1">F1</a></li>
-   </ul></section></body></html>
\ No newline at end of file
+		</ul>
+	</section>
+</body>
+</html>
\ No newline at end of file
diff --git a/techniques/css/C7.html b/techniques/css/C7.html
index a1704f2f60..750f6bc6a5 100644
--- a/techniques/css/C7.html
+++ b/techniques/css/C7.html
@@ -2,68 +2,69 @@
 <html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
 <head>
    <title>Using CSS to hide a portion of the link text </title>
-   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link>
+   <link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
 </head>
 <body>
-   <h1>Using CSS to hide a portion of the link text</h1>
+	<h1>Using <abbr title="Cascading Style Sheets">CSS</abbr> to hide a portion of the link text</h1>
    <section class="meta">
-      <p class="id">ID: C7</p>
-      <p class="technology">Technology: css</p>
-      <p class="type">Type: Technique</p>
+		<p class="id">ID: C7</p>
+    <p class="technology">Technology: css</p>
+    <p class="type">Type: Technique</p>
    </section>
    <section id="applicability">
       <h2>When to Use</h2>
-      <p>All technologies that support CSS .</p>
+      <p>All technologies that support CSS.</p>
    </section>
-   <section id="description"><h2>Description</h2>
-      <p>The objective of this technique is to supplement the link text by adding additional text that describes the unique function of the link and styling the additional text so that it is not rendered on the screen by user agents that support CSS. When information in the surrounding context is needed to interpret the displayed link text, this technique provides a complete description of the link's input function while permitting the less complete text to be displayed.</p>
-      <p>This technique works by creating a CSS selector to target text that is to be hidden. The rule set for the selector places the text to be hidden in a 1-pixel box with overflow hidden. This ensures the text does not display on screen but remains accessible to assistive technologies such as screen readers and braille displays. Note that the technique does not use visibility:hidden or display:none properties, since these can have the unintentional effect of hiding the text from assistive technology in addition to preventing on-screen display.</p>
-      <p>This technique is <strong>not</strong> a method for hiding complete links, only a section of text within a link. The <a href="#resources">resources</a> below include methods for hiding and showing links aimed at screenreader users.</p>
-      <div class="note">
-         <p>This technique to hide link text has been advocated by some screen reader users and corporate Web authors. It has proved effective on some Web sites. Other screen reader users and accessibility experts don't recommend this as a general technique because the results can be overly chatty and constrain the ability of the experienced screen reader user to control the verbosity. The working group believes the technique can be useful for Web pages that do not have repetitive content in the hidden text areas.</p>
-         <p>This technique can be used in combination with a style switching technique to present a page that is a <a>conforming alternate version</a> for non-conforming content. Refer to <a href="#C29"></a> and <a href="https://www.w3.org/WAI/WCAG21/Understanding/conformance#conforming-alt-versions">Understanding Conforming Alternate Versions</a> for more information. </p>
-      </div>
+   <section id="description">
+		<h2>Description</h2>
+		<p>The objective of this technique is to supplement the link text by adding additional text that describes the unique function of the link and styling the additional text so that it is not rendered on the screen by user agents that support CSS. When information in the surrounding context is needed to interpret the displayed link text, this technique provides a complete description of the link's input function while permitting the less complete text to be displayed.</p>
+    <p>This technique works by creating a CSS selector to target text that is to be hidden. The rule set for the selector places the text to be hidden in a 1-pixel box with <code class="language-css">overflow:hidden</code>. This ensures the text does not display on screen but remains accessible to assistive technologies such as screen readers and braille displays. Note that the technique does not use <code class="language-css">visibility:hidden</code> or <code class="language-css">display:none</code> properties, since these have the effect of hiding the text from assistive technology in addition to preventing on-screen display.</p>
+    <p>This technique is <strong>not</strong> a method for hiding complete links, only a section of text within a link. The <a href="#resources">resources</a> section includes methods for hiding and showing links aimed at screen reader users.</p>
+		<div class="note">
+			<p>This technique to hide link text has been advocated by some screen reader users and corporate Web authors. It has proved effective on some Web sites. Other screen reader users and accessibility experts don't recommend this as a general technique because the results can be overly chatty and constrain the ability of the experienced screen reader user to control the verbosity. The working group believes the technique can be useful for Web pages that do not have repetitive content in the hidden text areas.</p>
+			<p>This technique can be used in combination with a style switching technique to present a page that is a <a>conforming alternate version</a> for non-conforming content. Refer to <a href="../css/C29">C29</a> and <a href="../../Understanding/conformance#conforming-alt-versions">Understanding Conforming Alternate Versions</a> for more information.</p>
+		</div>
    </section>
    <section id="examples">
-      <h2>Examples</h2>
-      <p>The following examples use the CSS selector and rule set below:</p>
-<pre><code>.visually-hidden {
-   clip-path: inset(100%);
-   clip: rect(1px, 1px, 1px, 1px);
-   height: 1px;
-   overflow: hidden;
-   position: absolute;
-   white-space: nowrap;
-   width: 1px;
+		<h2>Examples</h2>
+		<p>The following examples use the CSS selector and rule set below:</p>
+<pre xml:space="preserve"><code class="language-css">.visually-hidden {
+  clip-path: inset(100%);
+  clip: rect(1px, 1px, 1px, 1px);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
 }</code></pre>      
 
       <section class="example">
+				<h3>A news site with "full story" links</h3>
+				<p>This example describes a news site that has a series of short synopsis of stories followed by a link that says "full story". Hidden link text describes the purpose of the link.</p>
          
-            <p>This example describes a news site that has a series of short synopsis of stories followed by a link that says "full story". Hidden link text describes the purpose of the link.</p>
-         
-<pre><code>
+<pre xml:space="preserve"><code class="language-html">
 &lt;p&gt;Washington has announced plans to stimulate economic growth.
-  &lt;a href="#"&gt;&lt;span class="visually-hidden"&gt;Washington stimulates economic growth &lt;/span&gt;
-  Full Story&lt;/a&gt;&lt;/p&gt;</code></pre>
+  &lt;a href="/washington-growth/"&gt;&lt;span class="visually-hidden"&gt;Washington stimulates
+   economic growth &lt;/span&gt;Full Story&lt;/a&gt;
+&lt;/p&gt;</code></pre>
       </section>
       <section class="example">
+         <h3>A list of books in different formats</h3>
+         <p>This example describes a resource that has electronic books in different formats. The title of each book is followed by links that say "HTML" and "PDF." Visually-hidden text describes the purpose of each link.</p>
          
-         <p>This example describes a resource that has electronic books in different formats. The title of each book is followed by links that say "HTML" and "PDF." Hidden text describes the purpose of each link.</p>
-         
-<pre><code>&lt;dl&gt;
-&lt;dt&gt;Winnie the Pooh &lt;/dt&gt;
-   &lt;dd&gt;&lt;a href="winnie_the_pooh.html"&gt;
-      &lt;span class="visually-hidden"&gt;Winnie the Pooh &lt;/span&gt;HTML&lt;/a&gt;&lt;/dd&gt;
-   &lt;dd&gt;&lt;a href="winnie_the_pooh.pdf"&gt;
-         &lt;span class="visually-hidden"&gt;Winnie the Pooh &lt;/span&gt;PDF&lt;/a&gt;&lt;/dd&gt;
-&lt;dt&gt;War and Peace&lt;/dt&gt;
-    &lt;dd&gt;&lt;a href="war_and_peace.html"&gt;
-      &lt;span class="visually-hidden"&gt;War and Peace &lt;/span&gt;HTML&lt;/a&gt;&lt;/dd&gt; 
-    &lt;dd&gt;&lt;a href="war_and_peace.pdf"&gt;
-      &lt;span class="visually-hidden"&gt;War and Peace &lt;/span&gt;PDF&lt;/a&gt;&lt;/dd&gt;
+<pre xml:space="preserve"><code class="language-html">&lt;dl&gt;
+  &lt;dt&gt;Winnie the Pooh&lt;/dt&gt;
+  &lt;dd&gt;&lt;a href="winnie-the-pooh.html"&gt;
+    &lt;span class="visually-hidden"&gt;Winnie the Pooh &lt;/span&gt;HTML&lt;/a&gt;&lt;/dd&gt;
+  &lt;dd&gt;&lt;a href="winnie_the_pooh.pdf"&gt;
+    &lt;span class="visually-hidden"&gt;Winnie the Pooh &lt;/span&gt;PDF&lt;/a&gt;&lt;/dd&gt;
+  &lt;dt&gt;War and Peace&lt;/dt&gt;
+  &lt;dd&gt;&lt;a href="war-and-peace.html"&gt;
+    &lt;span class="visually-hidden"&gt;War and Peace &lt;/span&gt;HTML&lt;/a&gt;&lt;/dd&gt; 
+  &lt;dd&gt;&lt;a href="war_and_peace.pdf"&gt;
+    &lt;span class="visually-hidden"&gt;War and Peace &lt;/span&gt;PDF&lt;/a&gt;&lt;/dd&gt;
 &lt;/dl&gt;</code></pre>
-
-      </section>
+			</section>
    </section>
    <section id="tests">
       <h2>Tests</h2>
@@ -88,11 +89,11 @@ <h2>Tests</h2>
       </ul>
    </section>
    <section id="resources">
-      <h2>Resources</h2>
-         <ul>
-            <li><a href="https://developer.paciellogroup.com/blog/2012/05/html5-accessibility-chops-hidden-and-aria-hidden/">HTML5 Accessibility Chops: hidden and aria-hidden</a></li>
-            <li><a href="http://webaim.org/techniques/css/invisiblecontent/">CSS in Action: Invisible Content Just for Screen Reader Users</a></li>
-         </ul>
+		<h2>Resources</h2>
+		<ul>
+			<li><a href="https://developer.paciellogroup.com/blog/2012/05/html5-accessibility-chops-hidden-and-aria-hidden/">HTML5 Accessibility Chops: hidden and aria-hidden</a></li>
+			<li><a href="http://webaim.org/techniques/css/invisiblecontent/">CSS in Action: Invisible Content Just for Screen Reader Users</a></li>
+		</ul>
    </section>
-</body>
+	</body>
 </html>
diff --git a/techniques/css/C8.html b/techniques/css/C8.html
index e7c63d5422..75fa32ab84 100644
--- a/techniques/css/C8.html
+++ b/techniques/css/C8.html
@@ -1,49 +1,78 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using CSS letter-spacing to control spacing within a word</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Using CSS letter-spacing to control spacing within a word</h1><section class="meta"><p class="id">ID: C8</p><p class="technology">Technology: css</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>Using CSS letter-spacing to control spacing within a word</title>
+		<link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+	</head>
+	<body>
+		<h1>Using <abbr title="Cascading Style Sheets">CSS</abbr> letter-spacing to control spacing within a word</h1>
+		<section class="meta">
+			<p class="id">ID: C8</p>
+			<p class="technology">Technology: css</p>
+			<p class="type">Type: Technique</p>
+		</section>
+		<section id="applicability">
+			<h2>When to Use</h2>
       <p>All technologies that support CSS.</p>
-   </section><section id="description"><h2>Description</h2>
-      <p>The objective of this technique is to demonstrate how the visual appearance of spacing in text may be enhanced via style sheets while still maintaining meaningful text sequencing. The CSS letter-spacing property helps developers control the amount of white space between characters. This is recommended over adding blank characters to control the spacing, since the blank characters can change the meaning and pronunciation of the word.</p>
-   </section><section id="examples"><h2>Examples</h2>
-      <section class="example">
-         <h3>Separating characters in a word </h3>
+		</section>
+		<section id="description">
+			<h2>Description</h2>
+      <p>The objective of this technique is to demonstrate how the visual appearance of spacing in text may be enhanced via style sheets while still maintaining meaningful text sequencing. The CSS <code class="language-css">letter-spacing</code> property helps developers control the amount of white space between characters. This is recommended over adding blank characters to control the spacing, since the blank characters can change the meaning and pronunciation of the word.</p>
+   </section>
+	 <section id="examples">
+		<h2>Examples</h2>
+		<section class="example">
+			<h3>Increasing the spacing between characters in a word</h3>
+			<p>The following CSS would add the equivalent of a space between each character in a level-2 heading:</p>
+
+			<section id="the-css">
+			<h4>The CSS</h4>
+<pre xml:space="preserve"><code class="language-css">h2 {
+  letter-spacing: 1em;
+}</code></pre>
+</section>
          
-            <p>The following CSS would add the equivalent of a space between each character in a level-2 heading:</p>
+	<section id="the-html">
+			<h4>The HTML</h4>
          
-         <pre xml:space="preserve">h2 {	letter-spacing: 1em; }</pre>
+<pre xml:space="preserve"><code class="language-html">&lt;h2&gt;Museum&lt;/h2&gt;</code></pre>
          
-            <p>So for the markup:</p>
+            <p>The rendered result might look something like:</p>
          
-         <pre xml:space="preserve">
-&lt;h2&gt;Museum&lt;/h2&gt;
-</pre>
-         
-            <p>the rendered result might look something like:</p>
-         
-         <pre xml:space="preserve">
-M u s e u m
-</pre>
+<pre xml:space="preserve">M u s e u m</pre>
+</section>
       </section>
-   </section><section id="tests"><h2>Tests</h2>
-      <section class="procedure"><h3>Procedure</h3>
-         <p>For each word that appears to have non-standard spacing between characters:
-							</p>
+		</section>
+		<section id="tests">
+			<h2>Tests</h2>
+      <section class="procedure">
+				<h3>Procedure</h3>
+				<p>For each word that appears to have non-standard spacing between characters:</p>
          <ol>
             <li>Check whether the CSS letter-spacing property was used to control spacing.</li>
          </ol>
       </section>
-      <section class="results"><h3>Expected Results</h3>
+      <section class="results">
+				<h3>Expected Results</h3>
          <ul>
             <li>Check #1 is true.</li>
          </ul>
       </section>
-   </section><section id="related"><h2>Related Techniques</h2><ul>
-      <li><a href="../failures/F1">F1</a></li>
-      <li><a href="../failures/F32">F32</a></li>
-   </ul></section><section id="resources"><h2>Resources</h2>
-      
-         <ul>
-            <li> 
-                  <a href="https://www.w3.org/TR/CSS2/text.html#spacing-props">CSS 2: Letter and word spacing</a> 
-               </li>
-         </ul>
-      
-   </section></body></html>
\ No newline at end of file
+		</section>
+		<section id="related">
+			<h2>Related Techniques</h2>
+			<ul>
+      	<li><a href="../failures/F1">F1</a></li>
+      	<li><a href="../failures/F32">F32</a></li>
+			</ul>
+		</section>
+		<section id="resources">
+			<h2>Resources</h2>
+			<ul>
+				<li> 
+					<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/letter-spacing"><abbr title="Mozilla Developer Network">MDN</abbr> - <code class="language-css">letter-spacing</code></a> 
+				</li>
+			</ul>
+		</section>
+	</body>
+</html>
\ No newline at end of file
diff --git a/techniques/css/C9.html b/techniques/css/C9.html
index 4e8b6287f9..d21a26a8a9 100644
--- a/techniques/css/C9.html
+++ b/techniques/css/C9.html
@@ -1,112 +1,82 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using CSS to include decorative images</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Using CSS to include decorative images</h1><section class="meta"><p class="id">ID: C9</p><p class="technology">Technology: css</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
-      <p> Any technology that can use CSS to include images. </p>
-   </section><section id="description"><h2>Description</h2>
-      <p> The objective of this technique is to provide a mechanism to add purely
-                        decorative images and images used for visual formatting to Web content
-                        without requiring additional markup within the content. This makes it
-                        possible for assistive technologies to ignore the non-text content. Some
-                        user agents can ignore or turn off CSS at the user's request, so that
-                        background images included with CSS simply "disappear" and do not interfere
-                        with display settings such as enlarged fonts or high contrast settings. </p>
-      <p>Background images can be included with the following CSS properties:</p>
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head>
+	<title>Using CSS to include decorative images</title>
+	<link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+</head>
+<body>
+	<h1>Using <abbr title="Cascading Style Sheets">CSS</abbr> to include decorative images</h1>
+	<section class="meta">
+		<p class="id">ID: C9</p>
+		<p class="technology">Technology: css</p>
+		<p class="type">Type: Technique</p>
+	</section>
+	<section id="applicability">
+		<h2>When to Use</h2>
+		<p>Any technology that can use CSS to include images.</p>
+   </section>
+	 <section id="description">
+		<h2>Description</h2>
+		<p> The objective of this technique is to provide a mechanism to add purely decorative images and images used for visual formatting to Web content without requiring additional markup within the content. This makes it possible for assistive technologies to ignore the non-text content. Some user agents can ignore or turn off CSS at the user's request, so that background images included with CSS simply "disappear" and do not interfere with display settings such as enlarged fonts or high contrast settings.</p>
+		<p>Background images can be included with the following CSS properties:</p>
       <ul>
-         <li> 
-               background, </li>
-         <li> 
-               background-image, </li>
-         <li>
-								       content, combined with the :before and
-                                    :after pseudo-elements, </li>
-         <li> 
-               list-style-image. </li>
+         <li><code class="language-css">background</code>;</li>
+         <li><code class="language-css">background-image</code>;</li>
+         <li><code class="language-css">content</code>, combined with the <code class="language-css">::before</code> and <code class="language-css">::after</code> pseudo-elements;</li>
+         <li><code class="language-css">list-style-image</code>.</li>
       </ul>
-      <p>Note: This technique is not appropriate for any image that conveys
-                        information or provides functionality, or for any image primarily intended
-                        to create a specific sensory experience.</p>
-   </section><section id="examples"><h2>Examples</h2>
-      <section class="example">
-         <h3>Background image for an HTML page </h3>
-         
-            <p> The stylesheet for a Web page specifies a background image for the
-                                whole page.</p>
+      <div class="note">
+        <p>This technique is not appropriate for any image that conveys information or provides functionality, or for any image primarily intended to create a specific sensory experience.</p>
+      </div>
+   </section>
+	 <section id="examples">
+		<h2>Examples</h2>
+		<section class="example">
+			<h3>Background image for an <abbr title="HyperText Markup Language">HTML</abbr> page</h3>
+      <p>The stylesheet for a Web page specifies a background image for the whole page.</p>
          
-         <pre xml:space="preserve">…
-  &lt;style type="text/css"&gt;
-    body { background: #ffe url('/images/home-bg.jpg') repeat; }
-  &lt;/style&gt;
-&lt;/head&gt;
-&lt;body&gt;
-...
-</pre>
+<pre xml:space="preserve"><code class="language-html">&lt;style&gt;
+  body { background: #ffe url('/images/home-bg.jpg') repeat; }
+&lt;/style&gt;</code></pre>
       </section>
       <section class="example">
          <h3>Background image with CSS for image rollovers </h3>
+         <p>The stylesheet for a Web page uses the CSS background property to create a decorative rollover effects when a user hovers their mouse pointer over a link.</p>
          
-            <p> The stylesheet for a Web page uses the CSS background
-                                property to create a decorative rollover effects when a user hovers
-                                the mouse pointer over a link. </p>
-         
-         <pre xml:space="preserve">a:hover { background: #ffe url('/images/hover.gif') repeat; color: #000;
+<pre xml:space="preserve"><code class="language-css">a:hover {
+  background: #ffe url('/images/hover.gif') repeat;
+  color: #000;
   text-decoration: none;
-}</pre>
-      </section>
-      <section class="example">
-         <h3>Background images with CSS to create rounded corners on
-                            tabs or other elements </h3>
-         
-            <p> The styleseet for a Web page uses the CSS background
-                                property to create rounded corners on elements. </p>
-         
-         <pre xml:space="preserve">…
-  &lt;style type="text/css"&gt;
-    div#theComments { width:600px; }
-    div.aComment { background: url('images/middle.gif') repeat-y left top; 
-    margin:0 0 30px 0; }
-    div.aComment blockquote { background: url('images/top.gif') no-repeat left top; 
-    margin:0; padding:8px 16px; }
-    div.aComment div.submitter { background:#fff url('images/bottom.gif') no-repeat left top; 
-    margin:0; padding-top:30px; }
-  &lt;/style&gt;
-&lt;/head&gt;
-&lt;body&gt;
-  &lt;div id="theComments"&gt;
-    &lt;div class="aComment"&gt;
-      &lt;blockquote&gt;
-        &lt;p&gt;Hi John, I really like this technique and I'm gonna use it on my own Website!&lt;/p&gt;
-      &lt;/blockquote&gt;
-      &lt;div class="submitter"&gt;
-        &lt;cite&gt;&lt;a href="http://example.com/"&gt;anonymous coward&lt;/a&gt; from Elbonia&lt;/cite&gt;
-      &lt;/div&gt;
-    &lt;/div&gt;
-    &lt;div class="aComment"&gt;
-…
- &lt;/div&gt;
-&lt;/div&gt;
-…</pre>
-      </section>
-   </section><section id="tests"><h2>Tests</h2>
-      <section class="procedure"><h3>Procedure</h3>
-         <ol>
-            <li> Check for the presence of decorative images </li>
-            <li> Check that they are included with CSS </li>
-         </ol>
-      </section>
-      <section class="results"><h3>Expected Results</h3>
-         <ul>
-            <li> If #1 is true, then #2 is true. </li>
-         </ul>
-      </section>
-   </section><section id="related"><h2>Related Techniques</h2><ul>
-      <li><a href="../css/C30">C30</a></li>
-      <li><a href="../failures/F3">F3</a></li>
-   </ul></section><section id="resources"><h2>Resources</h2>
-      
-         <ul>
-            <li> The <a href="https://www.w3.org/TR/CSS2/colors.html#propdef-background">background property in the CSS 2 specification</a> 
-               </li>
-            <li> The <a href="https://www.w3.org/TR/1999/REC-html401-19991224/struct/global.html#adef-background">HTML 4.01 specification</a> states that the
-                                        background attribute of the body
-                                    element is deprecated </li>
-         </ul>
-      
-   </section></body></html>
\ No newline at end of file
+}</code></pre>
+		</section>
+   </section>
+	 <section id="tests">
+		<h2>Tests</h2>
+		<section class="procedure">
+			<h3>Procedure</h3>
+			<ol>
+				<li>Check for the presence of decorative images</li>
+				<li>Check that they are included with CSS</li>
+			</ol>
+		</section>
+		<section class="results">
+			<h3>Expected Results</h3>
+			<ul>
+				<li>If #1 is true, then #2 is true.</li>
+			</ul>
+		</section>
+	</section>
+	<section id="related">
+		<h2>Related Techniques</h2>
+		<ul>
+			<li><a href="../css/C30">C30</a></li>
+			<li><a href="../failures/F3">F3</a></li>
+		</ul>
+	</section>
+	<section id="resources">
+		<h2>Resources</h2>
+		<ul>
+			<li>The <a href="https://www.w3.org/TR/css-backgrounds-3/#propdef-background"><code class="language-css">background</code> property in the CSS specification</a>.</li>
+		</ul>
+	</section>
+</body>
+</html>
diff --git a/techniques/css/img/pointer-spacing-1.png b/techniques/css/img/pointer-spacing-1.png
index 3297ef987f..8efdd9b1a3 100644
Binary files a/techniques/css/img/pointer-spacing-1.png and b/techniques/css/img/pointer-spacing-1.png differ
diff --git a/techniques/css/img/pointer-spacing-2.png b/techniques/css/img/pointer-spacing-2.png
index e124b426e1..fe60f00c57 100644
Binary files a/techniques/css/img/pointer-spacing-2.png and b/techniques/css/img/pointer-spacing-2.png differ
diff --git a/techniques/failures/F1.html b/techniques/failures/F1.html
index 643ff15b48..765be98867 100644
--- a/techniques/failures/F1.html
+++ b/techniques/failures/F1.html
@@ -1,12 +1,12 @@
 <!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Failure of Success Criterion 1.3.2 due to changing the meaning of content by
-                    positioning information with CSS</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Failure of Success Criterion 1.3.2 due to changing the meaning of content by
+                    positioning information with CSS</title><link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/></head><body><h1>Failure of Success Criterion 1.3.2 due to changing the meaning of content by
                     positioning information with CSS</h1><section class="meta"><p class="id">ID: F1</p><p class="technology">Technology: failures</p><p class="type">Type: Failure</p></section><section id="applicability"><h2>When to Use</h2>
       <p>All technologies that support CSS.</p>
    </section><section id="description"><h2>Description</h2>
       <p>This describes the failure condition that results when CSS, rather than
                         structural markup, is used to modify the visual layout of the content, and
                         the modified layout changes the meaning of the content. Using the
-                        positioning properties of CSS2, content may be displayed at any position on
+                        positioning properties of CSS, content may be displayed at any position on
                         the user's viewport. The order in which items appear on a screen may be
                         different than the order they are found in the source document. Assistive
                         technologies rely on the source code or other programmatically determined
@@ -32,8 +32,7 @@
                                 Players Wisconsin Idaho." </p>
             <p>Here is the HTML content:</p>
          
-         <pre xml:space="preserve">
-&lt;div class="box"&gt;      
+<pre xml:space="preserve"><code class="language-html">&lt;div class="box"&gt;      
      &lt;span class="menu1"&gt;Products&lt;/span&gt;       
      &lt;span class="menu2"&gt;Locations&lt;/span&gt;       
      &lt;span class="item1"&gt;Telephones&lt;/span&gt;       
@@ -41,13 +40,11 @@
      &lt;span class="item3"&gt;Portable MP3 Players&lt;/span&gt;       
      &lt;span class="item5"&gt;Wisconsin&lt;/span&gt;       
      &lt;span class="item4"&gt;Idaho&lt;/span&gt;
-&lt;/div&gt;
-</pre>
+&lt;/div&gt;</code></pre>
          
             <p>Here are the styles for the above content:</p>
          
-         <pre xml:space="preserve">
-.menu1 { 
+<pre xml:space="preserve"><code class="language-css">.menu1 { 
      position: absolute; 
      top: 3em; 
      left: 0em;     
@@ -100,8 +97,7 @@
      position: absolute; 
      top: 5em; 
      left: 5em 
-} 
-</pre>
+}</code></pre>
          
             <p>A better solution for this content would be to use more meaningful
                                 elements, such as a table or a definition list.</p>
@@ -129,10 +125,11 @@
       </section>
       <section class="results"><h3>Expected Results</h3>
          <ul>
-            <li>If step #2 is false, then this failure condition applies and the
+            <li>If check #2 is false, then this failure condition applies and the
                                     content fails this Success Criterion.</li>
          </ul>
       </section>
    </section><section id="related"><h2>Related Techniques</h2><ul>
       <li><a href="../css/C6">C6</a></li>
-   </ul></section><section id="resources"><h2>Resources</h2></section></body></html>
\ No newline at end of file
+   </ul></section><section id="resources"><h2>Resources</h2></section>
+</body></html>
\ No newline at end of file
diff --git a/techniques/failures/F10.html b/techniques/failures/F10.html
index 9553a25914..e49d1f0793 100644
--- a/techniques/failures/F10.html
+++ b/techniques/failures/F10.html
@@ -1,12 +1,12 @@
 <!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Failure of Success Criterion 2.1.2 and Conformance Requirement 5 due to combining multiple content formats in a way
-                    that traps users inside one format type</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Failure of Success Criterion 2.1.2 and Conformance Requirement 5 due to combining multiple content formats in a way
+                    that traps users inside one format type</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/></head><body><h1>Failure of Success Criterion 2.1.2 and Conformance Requirement 5 due to combining multiple content formats in a way
                     that traps users inside one format type</h1><section class="meta"><p class="id">ID: F10</p><p class="technology">Technology: failures</p><p class="type">Type: Failure</p></section><section id="applicability"><h2>When to Use</h2>
       <p>Applies when content creates a situation where the user can enter the content
                         using the keyboard, but cannot exit the content using the keyboard.</p>
    </section><section id="description"><h2>Description</h2>
       <p>When content includes multiple formats, one or more user agents or plug-ins
                         are often needed in order to successfully present the content to users. For
-                        example, a page that includes XHTML, SVG, SMIL and XForms may require a
+                        example, a page that includes HTML, SVG, SMIL and XForms may require a
                         browser to load as many as three different plug-ins in order for a user to
                         successfully interact with the content. Some plug-ins create a common
                         situation in which the keyboard focus can become "stuck" in a
@@ -15,7 +15,7 @@
    </section><section id="examples"><h2>Examples</h2>
       <ul>
          <li> 
-               <strong>A plug-in traps the user </strong>A user tabs into a
+               <strong>A plug-in traps the user: </strong>A user tabs into a
                                 plug-in and is unable to return to content outside the plug-in
                                 content with the keyboard. The user has to restart their browser in
                                 order to regain control and navigate to a new page and is unable to
@@ -39,4 +39,4 @@
    </section><section id="related"><h2>Related Techniques</h2><ul>
       <li><a href="../general/G21">G21</a></li>
       <li><a href="../client-side-script/SCR20">SCR20</a></li>
-   </ul></section><section id="resources"><h2>Resources</h2></section></body></html>
\ No newline at end of file
+   </ul></section><section id="resources"><h2>Resources</h2></section></body></html>
diff --git a/techniques/failures/F100.html b/techniques/failures/F100.html
index 9de87067ae..caaa8549b9 100644
--- a/techniques/failures/F100.html
+++ b/techniques/failures/F100.html
@@ -2,7 +2,6 @@
 <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
   <head>
     <title>Failure of Success Criterion 1.3.4 due to showing a message asking to reorient device</title>
-    <link rel="stylesheet" type="text/css" href="https://rawgit.com/w3c/wcag21/master/css/sources.css"/>
     <link rel="stylesheet" type="text/css" href="../../css/editors.css"/>
   </head>
   <body>
@@ -38,11 +37,7 @@ <h3>Block an orientation ("door slam") by using HTML and CSS</h3>
 
         When the <code>portrait</code> property matches the viewport space defined via media queries, the message will disappear or vice versa. This particular example uses the CSS <code>landscape</code>, <code>portrait</code> media query properties.</p>
 
-<pre>
-<code>
-
-&lt;style&gt;
-
+<pre xml:space="preserve"><code class="language-css">&lt;style&gt;
 /* Orientation "door slam" Styling */
 
 @media all and (orientation: landscape) {
@@ -60,20 +55,18 @@ <h3>Block an orientation ("door slam") by using HTML and CSS</h3>
   font-size: 2rem;
   margin-top: 4rem;
 }
+&lt;/style&gt;</code></pre>
 
-/* Orientation "door slam" HTML */
+<pre xml:space="preserve"><code class="language-html">
+&lt;!-- Orientation "door slam" HTML --&gt;
 
-&lt;div class="rotate"&gt;
-  Please rotate your device!
-&lt;/div&gt;
+&lt;div class="rotate"&gt;Please rotate your device!&lt;/div&gt;
 
 &lt;div class="content"&gt;
   ...
-&lt;/div&gt;
-</code>
-</pre>
+&lt;/div&gt;</code></pre>
         
-        <p>Working example: <a href="../../working-examples/css-reorient/">Show message asking to reorient device</a></p>
+        <p>Working example: <a href="../../working-examples/failure-orientation-message/">Show message asking to reorient device</a></p>
         
       </section>
     </section>
@@ -92,11 +85,11 @@ <h3>Expected Results</h3>
         <p>If check #1 or #2 is true, and check #3 is false, then this failure condition applies and content fails the Success Criterion.</p>
 </section>
     </section>
-    <section id="related">
+    <!-- <section id="related">
       <h2>Related Techniques</h2>
       <ul>
         <li>ID</li>
       </ul>
-    </section>
+    </section> -->  
   </body>
 </html>
diff --git a/techniques/failures/F101.html b/techniques/failures/F101.html
index 2160c56f37..eb411eba80 100644
--- a/techniques/failures/F101.html
+++ b/techniques/failures/F101.html
@@ -8,7 +8,7 @@
 		<h1>Failure of Success Criterion 2.5.2 due to activating a control on the down-event</h1>
 		<section id="meta">
 			<h2>Metadata</h2>
-			<p id="id">FXX</p>
+			<p id="id">F101</p>
 			<p id="technology"></p>
 			<p id="type">failure</p>
 		</section>
@@ -27,9 +27,9 @@ <h2>Description</h2>
 					<li>The up-event does not reverse the outcome of the activation;</li>
 					<li>It is not essential for the functionality to execute and complete on the down-event.</li>
 				</ol>
-			<p>Rather than taking advantage of the <code>click</code> event, authors may use down-events such as <code>mousedown</code>, <code>touchstart</code> or <code>pointerdown</code>. As a result, functionality will be executed as soon as a mouse button is pressed (but not released yet), or a finger or stylus makes contact with a touchscreen.</p>
+			<p>Rather than taking advantage of the <code class="language-javascript">click</code> event, authors may use down-events such as <code class="language-javascript">mousedown</code>, <code class="language-javascript">touchstart</code> or <code class="language-javascript">pointerdown</code>. As a result, functionality will be executed as soon as a mouse button is pressed (but not released yet), or a finger or stylus makes contact with a touchscreen.</p>
 			<p>It is possible to use the down event and mitigate potential issues to avoid failing the Success Criterion. For example, provide a method to easily undo or abort the functionality, or reverse the outcome on the up-event (when the mouse button is released, or when the finger or stylus are lifted from the touchscreen). And note that some uses of the down-event are essential for the functionality (e.g., where the control simulates the operation of a musical instrument like a set of piano keys, or when the control is used as an on-screen control for a game where a fast and immediate response is required), in which case they would not fail this Success Criterion.</p>
-			<p class="note">The test procedure outlined below could be supplemented with automated or semi-automated tests to scan for JavaScript that registers event listeners such as <code>mousedown</code>, <code>touchstart</code>, or <code>pointerdown</code>. The automated test would not be sufficient to make a pass/fail determination, but it can help narrow down the number of potentially problematic controls.</p>
+			<p class="note">The test procedure outlined below could be supplemented with automated or semi-automated tests to scan for JavaScript that registers event listeners such as <code class="language-javascript">mousedown</code>, <code class="language-javascript">touchstart</code>, or <code class="language-javascript">pointerdown</code>. The automated test would not be sufficient to make a pass/fail determination, but it can help narrow down the number of potentially problematic controls.</p>
 		</section>
 		
 		<section id="examples">
@@ -37,16 +37,13 @@ <h2>Examples</h2>
       
       		<section class="example">
 				<h3>A close button that triggers on down-events</h3>
-				<p>A modal dialog contains a lengthy form that a user needs to complete. The modal provides a simple "Close" control that closes the dialog and loses all information the user may already have entered in the form. However, instead of simply listening to the <code>click</code> event - which in most user agents is triggered on the up-event - the author decided to close the dialog on the down-event. This may lead to the user accidentally closing the dialog and losing all the data they entered into the form up to that point.</p>
-<pre><code>
-<!-- modal dialog with a form -->
+				<p>A modal dialog contains a lengthy form that a user needs to complete. The modal provides a simple "Close" control that closes the dialog and loses all information the user may already have entered in the form. However, instead of simply listening to the <code class="language-javascript">click</code> event - which in most user agents is triggered on the up-event - the author decided to close the dialog on the down-event. This may lead to the user accidentally closing the dialog and losing all the data they entered into the form up to that point.</p>
+<pre xml:space="preserve"><code class="language-html">&lt;!-- modal dialog with a form --&gt;
 ...
-&lt;button id="close"&gt;Close&lt;/button&gt;
-...
-</code></pre>
+&lt;button id="close" type="button"&gt;Close&lt;/button&gt;
+...</code></pre>
 
-<pre><code>
-const trigger = document.getElementById("close");
+<pre xml:space="preserve"><code class="language-javascript">const trigger = document.getElementById("close");
 
 function closeDialog() {
   /* close the modal dialog */
@@ -55,8 +52,7 @@ <h3>A close button that triggers on down-events</h3>
 
 trigger.addEventListener('mousedown', closeDialog);
 trigger.addEventListener('touchstart', closeDialog);
-trigger.addEventListener('pointerdown', closeDialog);
-</code></pre>
+trigger.addEventListener('pointerdown', closeDialog);</code></pre>
 			</section>
     	</section>
     
@@ -67,7 +63,7 @@ <h3>Procedure</h3>
 				<p>Open the content on a device with pointer inputs (mouse, touchscreen, stylus) and for all available controls (buttons, links, complex widgets):</p>
 				<ol>
 					<li>Trigger down-events (e.g. by pressing but not releasing the mouse button, or placing a finger or stylus on the touchscreen) and check if functionality is executed prior to the up-event (e.g. releasing the mouse button or lifting the finger/stylus)</li>
-                    <li>If functionality was executed on the down-event, check if triggering the up-event (releasing the pressed mouse button, or lifing the finger or stylus from the touchscreen) reverses the outcome</li>
+                    <li>If functionality was executed on the down-event, check if triggering the up-event (releasing the pressed mouse button, or lifting the finger or stylus from the touchscreen) reverses the outcome</li>
                     <li>Evaluate if it could be deemed essential for the controls to execute and complete functionality on the down-event</li>
 				</ol>
 			</section>
diff --git a/techniques/failures/F102.html b/techniques/failures/F102.html
index 715076f9e1..b080c9a30e 100644
--- a/techniques/failures/F102.html
+++ b/techniques/failures/F102.html
@@ -8,7 +8,6 @@
 		<h1>Failure of Success Criterion 1.4.10 due to content disappearing and not being available when content has reflowed</h1>
 		<section id="meta">
 			<h2>Metadata</h2>
-			<p class="instructions">Provide information below to help editors associate the technique properly. Contents of the meta section are not output by the processor.</p>
 			<p id="sc"><!-- SC to which this applies --></p>
 			<p id="type"><!-- sufficient, advisory, or failure --></p>
 		</section>
@@ -44,7 +43,7 @@ <h3>Procedure</h3>
 				<ol>
 					<li>Check visible content elements at a desktop viewport width such as 1280px</li>
           <li>Set the viewport width to 320px by narrowing the browser window, or by zooming in so that the viewport width is now 320px (when starting with a 1280px viewport width at 100% browser zoom, this can be done by zooming in to 400%)</li>
-          <li>For each content element that is not provided at the viewport width of 320px, check that there is a way to reach the same or equivalent content via discolure widgets, pop-ups, or links to other views</li>
+          <li>For each content element that is not provided at the viewport width of 320px, check that there is a way to reach the same or equivalent content via disclosure widgets, pop-ups, or links to other views</li>
 				</ol>
 			</section>
 			<section class="test-results">
diff --git a/techniques/failures/F103.html b/techniques/failures/F103.html
index 18be3bc43e..aabec5461e 100644
--- a/techniques/failures/F103.html
+++ b/techniques/failures/F103.html
@@ -29,14 +29,15 @@ <h2>Description</h2>
 					<li>the new content does not take focus (does not change context);</li>
 					<li>the new content provides information to the user on the outcome of an action, the state of an application, the progress of a process, or the existence of errors.</li>
 				</ol>
-			 Where updated content does not conform to the <a href="https://www.w3.org/TR/WCAG21/#dfn-status-messages">definition of status message</a>, a failure of 4.1.3 has not taken place.</p>
+			 Where updated content does not conform to the definition of <a>status messages</a>, a failure of 4.1.3 has not taken place.</p>
 				<p>The second step in this failure technique involves examining code.  Where dynamic content meets the definition of a status message, its container can be examined for an appropriate WAI-ARIA role or property which allows it to be programmatically determinable as a status message. Currently there are only a small number of techniques available to indicate status messages to assistive technologies. They are:
 					<ul>
-						<li><code>role="status"</code></li>
-						<li><code>role="alert"</code></li>
-						<li>the use of an <code>aria-live</code> attribute on an element, set to either "polite" or "assertive"</li>
-						<li><code>role="log"</code></li>
-						<li><code>role="progressbar"</code></li>
+						<li>the HTML <code class="language-html">output</code> element</li>
+						<li><code class="language-html">role="status"</code></li>
+						<li><code class="language-html">role="alert"</code></li>
+						<li>the use of an <code class="language-html">aria-live</code> attribute on an element, set to either "<code class="language-html">polite</code>" or "<code class="language-html">assertive</code>"</li>
+						<li><code class="language-html">role="log"</code></li>
+						<li><code class="language-html">role="progressbar"</code></li>
 						</ul>
 				The absence of all of these techniques predicts a failure for the status message be announced to the user. Additionally, if the role or property is not set <em>before</em> the dynamic content is added, this also predicts a failure.</p>
 				<p>Since additional techniques may exist to alert an assistive technology, the final step of this failure technique is confirming whether an assistive technology (such as a screen reader) detects the dynamic content and exposes the information to users. Where a status message exists but is not surfaced by assistive technology, it is confirmation that a failure has taken place.</p>
@@ -64,13 +65,14 @@ <h3>Procedure</h3>
 				<p>For content that is dynamically added to the page:</p>
 				<ol>
 					<li>Check that the element containing the updated content does not take focus</li>
-					<li>Check that the new content provides information to the user on one of the following:</li>
+					<li>Check that the new content provides information to the user on one of the following:
 						<ul>
 							<li>the success or result of an action</li>
 							<li>the waiting state of an application</li>
 							<li>the progress of a process</li>
 							<li>the existence of errors</li>
 						</ul>
+					</li>
 					<li>Check that the element containing the new content does not have a pre-existing aria role of <code>status</code>, <code>alert</code>, <code>log</code>, or <code>progressbar</code>, or an <code>aria-live</code> attribute</li>
 					<li>Check that the status message is not surfaced (i.e., announced) by assistive technology</li>
 				</ol>
@@ -82,11 +84,11 @@ <h3>Expected Results</h3>
 				</ul>
 			</section>
 		</section>
-		<section id="related">
+		<!-- <section id="related">
 			<h2>Related Techniques</h2>
 			<ul>
 				<li>ID</li>
 			</ul>
-		</section>
+		</section> -->
 	</body>
 </html>
diff --git a/techniques/failures/F104.html b/techniques/failures/F104.html
index fa65dacc22..8d15f33157 100644
--- a/techniques/failures/F104.html
+++ b/techniques/failures/F104.html
@@ -21,7 +21,7 @@ <h2>Description</h2>
 			<p>The purpose of this technique is to identify and test a failure condition where part of the content clips and is unreadable when the user overrides the spacing of the text within the boundaries set out in the Text Spacing success criterion. In general, this failure occurs when text is presented in a size-constrained block which does not expand if the size of the content increases. Some of the ways in which this can occur include:</p>
 			<ul>
 			  <li>
-			   Setting the overflow property of the enclosing element to hidden
+			   Setting the <code class="language-css">overflow</code> property of the enclosing element to <code class="language-css">hidden</code>
 		      </li>
 			  <li>
 			   Using absolutely positioned content
@@ -37,36 +37,44 @@ <h2>Examples</h2>
 			<section class="example">
 				<h3>Text inside a box overflows and overlaps text below it when text spacing is implemented.</h3>
 				<p>The code below is what is implemented in the DOM <em><strong>before</strong></em> the user implements any CSS test spacing overrides. The text renders correctly in the box and doesn't interfere with the next paragraph.</p>
-				<p><code>&lt;div style=&quot;font-size:100%; width:130px; height:95px; border: thin solid gray;&quot;&gt;
-			    Now is the time for all good men to come to the aid of their country.
-  &lt;/div&gt;
-  &lt;p&gt;Now is the time for all good men to come to the aid of their country.&lt;/p&gt;</code></p>
-				<p><div style="font-size:100%; width:130px; height:95px; border: thin solid gray;"> 
-  Now is the time for all good men to come to the aid of their country. 
-				</div></p>
-<p>Now is the time for all good men to come to the aid of their country.</p> 
-				<p>Here is the  view AFTER the text spacing has been overridden by the user with the text spacing in the success criterion. The text overlaps the paragraph below it.</p>
-        <p><div style="font-size:100%; width:130px; height:95px;  border: thin solid gray; line-height: 1.5; margin-bottom: 2em; letter-spacing: 0.12em; word-spacing: 0.16em;">
-				Now is the time for all good men to come to the aid of their country. 
-</div></p>
-<p>Now is the time for all good men to come to the aid of their country.</p>
+
+<pre xml:space="preserve"><code class="language-html">&lt;div style="font-size:100%; width:130px; height:125px; border: thin solid gray;"&gt;
+  &lt;p style="margin:0;"&gt;Now is the time for all good men to come to 
+   the aid of their country.&lt;/p&gt;
+&lt;/div&gt;
+&lt;p style="margin:0;"&gt;The quick brown fox jumps over the lazy dog.&lt;/p&gt;</code></pre>
+
+<div style="font-size:100%; width:130px; height:125px; border:thin solid gray;"> 
+  <p style="margin:0;">Now is the time for all good men to come to the aid of their country.</p>
+</div>
+<p style="margin:0;">The quick brown fox jumps over the lazy dog.</p> 
+				<p>Here is the view AFTER the text spacing has been overridden by the user with the text spacing in the success criterion. The text overlaps the paragraph below it.</p>
+        <div style="font-size:100%; width:130px; height:125px; border:thin solid gray;">
+					<p style="margin:0; line-height: 1.5; margin-bottom: 2em; letter-spacing: 0.12em; word-spacing: 0.16em;">Now is the time for all good men to come to the aid of their country.</p>
+				</div>
+				<p style="margin:0;">The quick brown fox jumps over the lazy dog.</p>
 
 </section>
 			
 			<section class="example">
 				<h3>Text inside a box is clipped when text spacing is implemented.</h3>
 				<p>The code below is what is implemented in the DOM <em><strong>before</strong></em> the user implements any CSS test spacing overrides. The text renders correctly in the box and doesn't interfere with the next paragraph.</p>
-				<p><code>&lt;div style="font-size:100%; width:130px; height:95px; overflow: hidden; border: thin solid gray;"&gt;  Now is the time for all good men to come to the aid of their country.  &lt;/div&gt; &lt;p&gt;Now is the time for all good men to come to the aid of their country.&lt;/p&gt;</code></p>
-				<p>Here is the default view before the text spacing has been overridden by the user, The text renders properly in the box</p>
-				<p><div style="font-size:100%; width:130px; height:95px; overflow: hidden; border: thin solid gray;">
- Now is the time for all good men to come to the aid of their country. 
-				</div></p>
-<p>Now is the time for all good men to come to the aid of their country.</p>
+<pre xml:space="preserve"><code class="language-html">&lt;div style="font-size:100%; width:130px;
+ height:95px; overflow:hidden; border:thin solid gray;"&gt;
+  &lt;p&gt;Now is the time for all good men to come to the aid of their country.&lt;/p&gt;
+&lt;/div&gt;
+&lt;p&gt;The quick brown fox jumps over the lazy dog.&lt;/p&gt;</code></pre>
+				<p>Here is the default view before the text spacing has been overridden by the user, The text renders properly in the box.</p>
+				<div style="font-size:100%; width:130px; height:125px; overflow:hidden; border:thin solid gray;">
+					<p style="margin:0;">Now is the time for all good men to come to the aid of their country.</p>
+				</div>
+				<p style="margin:0;">The quick brown fox jumps over the lazy dog.</p>
+
 <p>Here is the  view AFTER the text spacing has been overridden by the user with the maximum text spacing in the success criterion,  the text is clipped.</p>
-<p><div style="font-size:100%; width:130px; height:95px; overflow: hidden; border: thin solid gray; line-height: 1.5; margin-bottom: 2em; letter-spacing: 0.12em; word-spacing: 0.16em;">
- Now is the time for all good men to come to the aid of their country. 
-				</div></p>
-<p>Now is the time for all good men to come to the aid of their country.</p>
+<div style="font-size:100%; width:130px; height:125px; overflow: hidden; border: thin solid gray;">
+	<p style="margin:0; line-height: 1.5; margin-bottom: 2em; letter-spacing: 0.12em; word-spacing: 0.16em;">Now is the time for all good men to come to the aid of their country.</p>
+</div>
+<p style="margin:0;">The quick brown fox jumps over the lazy dog.</p>
 			
 	</section>
 </section>
diff --git a/techniques/failures/F105.html b/techniques/failures/F105.html
index c7279574fc..a43791e9ac 100644
--- a/techniques/failures/F105.html
+++ b/techniques/failures/F105.html
@@ -8,7 +8,6 @@
 		<h1>Failure of Success Criterion 2.5.1 due to providing functionality via a path-based gesture without simple pointer alternative</h1>
 		<section id="meta">
 			<h2>Metadata</h2>
-			<p class="instructions">Provide information below to help editors associate the technique properly. Contents of the meta section are not output by the processor.</p>
 			<p id="sc">Applies to 2.5.1 Pointer Gestures</p>
 			<p id="type">Failure Technique</p>
 		</section>
@@ -20,8 +19,8 @@ <h2>Applicability</h2>
 		<section id="description">
 			<h2>Description</h2>
 			<p>The objective of this Failure is to describe situations where authors have implemented a function that is operated via a path-based gesture, and no alternative ways of operating this function via simple pointer gestures exist.</p>
-      <p>If you did not create the content and functionality you can find path-based gestures by exploring the content on a touch screen, or checking the page code for the existence of specific event handlers such as touchstart or touchend. See the <a href="https://www.w3.org/WAI/WCAG21/Understanding/pointer-gestures.html">Understanding document for Pointer Gestures</a> for more on the path-based gestures.</p>
-      <p><em>Note:</em> For functionality implemented with a path-based gesture, the possibility of also operating it via the keyboard is beneficial (and may serve to meet Success Criterion 2.1.1 Keyboard). The point of Success Crtierion 2.5.1, however, is to ensure that pointer users who on many devices will have no keyboard available, have alternative ways of operating the function via simple pointer input.</p>
+      <p>If you did not create the content and functionality you can find path-based gestures by exploring the content on a touch screen, or checking the page code for the existence of specific event handlers such as touchstart or touchend. See the <a href="../../Understanding/pointer-gestures.html">Understanding document for Pointer Gestures</a> for more on the path-based gestures.</p>
+      <p><em>Note:</em> For functionality implemented with a path-based gesture, the possibility of also operating it via the keyboard is beneficial (and may serve to meet <a href="../../Understanding/keyboard">Success Criterion 2.1.1 Keyboard</a>). The point of Success Criterion 2.5.1, however, is to ensure that pointer users who on many devices will have no keyboard available, have alternative ways of operating the function via simple pointer input.</p>
 		</section>
 		<section id="examples">
 			<h2>Examples</h2>
@@ -51,15 +50,8 @@ <h3>Expected Results</h3>
 		<section id="related">
 			<h2>Related Techniques</h2>
       <ul>
-      <li><a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G216">Providing single point activation for a control slider</a></li>
-			<li><a href="https://www.w3.org/WAI/WCAG21/Techniques/failures/F101">Failure of Success Criterion 2.5.2 due to activating a control on the down-event</a>.</li>
-			</ul>
-		</section>
-		<section id="resources">
-			<h2>Resources</h2>
-			<p class="instructions">Provide links to external resources that are relevant to users of the technique. This section is optional.</p>
-			<ul>
-				<li>Link</li>
+				<li><a href="F101">Failure of Success Criterion 2.5.2 due to activating a control on the down-event</a>.</li>
+      	<li><a href="../general/G216">Providing single point activation for a control slider</a></li>
 			</ul>
 		</section>
 	</body>
diff --git a/techniques/failures/F106.html b/techniques/failures/F106.html
index ce5afb38ca..519b7d392c 100644
--- a/techniques/failures/F106.html
+++ b/techniques/failures/F106.html
@@ -19,7 +19,7 @@ <h2>Applicability</h2>
 		<section id="description">
 			<h2>Description</h2>
 			<p>This describes the failure condition that results when motion actuation can not be deactivated.  People who may accidentally activate sensors due to tremors or other motor impairments need the ability to turn off motion actuation to prevent such accidental triggering of functions.  </p>
-			<p class="note">The type of motion covered by the <a href="../../guidelines/sc/21/motion-actuation.html">Motion Actuation Success Criterion</a> does not relate to the movement of users through space as registered by geolocation sensors or beacons, or events observed by the device other than intentional gesturing by the user. It also does not cover indirect motion associated with operating a keyboard, pointer, or assistive technology.</p>
+			<p class="note">The type of motion covered by the <a href="motion-actuation">Motion Actuation Success Criterion</a> does not relate to the movement of users through space as registered by geolocation sensors or beacons, or events observed by the device other than intentional gesturing by the user. It also does not cover indirect motion associated with operating a keyboard, pointer, or assistive technology.</p>
 			
 		</section>
 		<section id="examples">
diff --git a/techniques/failures/F107.html b/techniques/failures/F107.html
index 75df78d4c0..94c2938830 100644
--- a/techniques/failures/F107.html
+++ b/techniques/failures/F107.html
@@ -2,91 +2,77 @@
 <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
 <head>
       <title>Failure of Success Criterion 1.3.5 due to incorrect autocomplete attribute values</title>
-
       <link rel="stylesheet" type="text/css" href="../../css/editors.css"/>
-
 </head>
 <body>
-
-
-    <h1>Failure of Success Criterion 1.3.5 due to incorrect autocomplete attribute values</h1>
-
-    <section id="meta">
-        <h2>Metadata</h2>
-        <p id="id"></p>
-        <p id="technology">failures</p>
-        <p id="type">failure</p>
+    <h1>Failure of Success Criterion 1.3.5 due to incorrect <code class="language-html">autocomplete</code> attribute values</h1>
+    <section class="meta">
+			<p id="id">ID: F107</p>
+			<p id="technology">Technology: failures</p>
+			<p id="type">Type: failure</p>
     </section>
-
     <section id="applicability">
-        <h2>Applicability</h2>
-        <p>This technique applies to <em>form inputs</em> created in HTML which collect information about the user of the form.</p>
-        </section>
-        <section id="description">
-        <h2>Description</h2>
-        <p>The purpose of this technique is to identify a failure condition where form inputs do not have the correct autocomplete attribute values for inputs that request information about the user of the form.</p>
+      <h2>Applicability</h2>
+      <p>This technique applies to <em>form inputs</em> created in <abbr title="Hypertext Markup Language">HTML</abbr> which collect information about the user of the form.</p>
+    </section>
+    <section id="description">
+      <h2>Description</h2>
+      <p>The purpose of this technique is to identify a failure condition where form inputs do not have the correct <code class="language-html">autocomplete</code> attribute values for inputs that request information about the user of the form.</p>
 
-        <p>Success Criteria 1.3.5 uses a fixed list of tokens in <a href="https://www.w3.org/TR/WCAG21/#input-purposes">Input Purposes for User Interface Components</a> (based on the HTML 5.2 <code>autocomplete</code> attribute’s fixed list of token values) because the programmatic association of specified token values (metadata) allows for other machine processing, such as expressing the input label in different modalities.</p>
+      <p>Success Criterion 1.3.5 uses a fixed list of tokens in <a href="/TR/WCAG/#input-purposes">Input Purposes for user interface components</a> (based on the HTML 5.2 <code class="language-html">autocomplete</code> attribute's fixed list of token values) because the programmatic association of specified token values (metadata) allows for other machine processing, such as expressing the input label in different modalities.</p>
 
-        <p>Another important part of this Success Criterion is that the token values are associated with inputs that are <strong>scoped directly to the primary end user</strong>.</p>
+      <p>Another important part of this Success Criterion is that the token values are associated with inputs that are <strong>scoped directly to the primary end user</strong>.</p>
     </section>
     
     <section id="examples">
-        <h2>Examples</h2>
-
-        <section class="example" id="example-1">
-            <h3>Incorrect attribute</h3>
-            <p>An online form used to collect the user's name and birthday which uses incorrect autocomplete attributes.  The correct attribute value for the first control is <code>name</code> and for the second control the made-up attribute value <code>birthday</code> was used instead of <code>bday</code> for this example.</p>
+      <h2>Examples</h2>
+			<section class="example" id="example-1">
+				<h3>Incorrect attribute</h3>
+				<p>An online form used to collect the user's name and birthday which uses incorrect <code class="language-html">autocomplete</code> attributes. The correct attribute value for the first control is <code class="language-html">name</code>, and for the second control the made-up attribute value <code class="language-html">birthday</code> was used instead of <code class="language-html">bday</code>.</p>
         
-<pre>
-&lt;h2&gt;Your details:&lt;/h2&gt;
-&lt;label for="name1"&gt;Name:&lt;/label&gt;
-&lt;input type="text" name="field1a" <span style="background:yellow; font-weight:bold;">autocomplete="email"</span> id="name1"&gt; 
-&lt;label for="birthday1"&gt;Birthday:&lt;/label&gt;
-&lt;input type="text" name="field1b" <span style="background:yellow; font-weight:bold;">autocomplete="birthday"</span> id="birthday1&gt;</pre>
-        
-        </section>
+<pre xml:space="preserve"><code class="language-html">&lt;h2&gt;Your details:&lt;/h2&gt;
+&lt;label for="uname"&gt;Name:&lt;/label&gt;
+&lt;input autocomplete="email" id="uname" type="text"&gt; 
+&lt;label for="ubirthday"&gt;Birthday:&lt;/label&gt;
+&lt;input autocomplete="birthday" id="ubirthday" type="text"&gt;</code></pre>
+</section>
         
     </section>
 
-
     <section id="tests">
-        <h2>Tests</h2>
-
-        <section class="test-procedure">
-            <h3>Procedure</h3>
-
-            <p>For each form field which collects information about the user of the form:</p>
-            <ol>
-              <li>Check that the form field has an autocomplete attribute and value pair that does not match the purpose of the input.</li>
-              <li>Check that the input purpose is not communicated programmatically through any other method.</li>
-            </ol>
-
+			<h2>Tests</h2>
+			<section class="test-procedure">
+				<h3>Procedure</h3>
+
+				<p>For each form field which collects information about the user of the form:</p>
+				<ol>
+					<li>Check that the form field has an <code class="language-html">autocomplete</code> attribute and value pair that does not match the purpose of the input.</li>
+					<li>Check that the input purpose is not communicated programmatically through any other method.</li>
+				</ol>
         </section>
         <section class="test-results">
-            <h3>Expected Results</h3>
-
-            <ul>
-                <li>If checks #1-2 are true, then the failure condition applies, and the content fails the Success Criterion.</li>
-            </ul>
+          <h3>Expected Results</h3>
+          <ul>
+            <li>If checks #1 and #2 are true, then the failure condition applies, and the content fails the Success Criterion.</li>
+          </ul>
         </section>
     </section>
     <section id="related">
         <h2>Related Techniques</h2>
         <ul>
-            <li><a href="https://www.w3.org/WAI/WCAG21/Techniques/html/H98">H98: Using HTML 5.2 autocomplete attributes</a></li>
+          <li><a href="../html/H98">H98: Using HTML <code class="language-html">autocomplete</code> attributes</a></li>
         </ul>
     </section>
     <section id="resources">
-        <h2>Resources</h2>
-        <ul>
-            <li>WCAG 2.1 - Input Purposes for User Interface Components: 
-                <a href="https://www.w3.org/TR/WCAG21/#input-purposes">https://www.w3.org/TR/WCAG21/#input-purposes</a></li>
-            <li>The HTML5 <code>autocomplete</code> attribute:
-                <a href="https://www.w3.org/TR/html52/sec-forms.html#sec-autofill">https://www.w3.org/TR/html52/sec-forms.html#sec-autofill</a>
-            </li>
-        </ul>
+			<h2>Resources</h2>
+			<ul>
+				<li>
+					<a href="/TR/WCAG/#input-purposes">WCAG - Input Purposes for User Interface Components</a>.
+				</li>
+				<li>
+					<a href="https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofilling-form-controls:-the-autocomplete-attribute">HTML - Autofilling form controls: the <code class="language-html">autocomplete</code> attribute</a>.
+				</li>
+			</ul>
     </section>
-</body>
-
+	</body>
 </html>
diff --git a/techniques/failures/F108.html b/techniques/failures/F108.html
index 3cbefd185f..9e7f0195ea 100644
--- a/techniques/failures/F108.html
+++ b/techniques/failures/F108.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
 <head>
-      <title>Failure of Success Criterion 2.5.X Dragging due to not providing a single pointer method for the user to operate a function that does not require a dragging movement</title>
+      <title>Failure of Success Criterion 2.5.7 due to not providing a single pointer method for the user to operate a function that does not require a dragging movement</title>
 
       <link rel="stylesheet" type="text/css" href="../../css/editors.css"/>
 
@@ -9,7 +9,7 @@
 <body>
 
 
-    <h1>Failure of Success Criterion 2.5.X Dragging due to not providing a single pointer method for the user to operate a function that does not require a dragging movement</h1>
+    <h1>Failure of Success Criterion 2.5.7 Dragging Movements due to not providing a single pointer method for the user to operate a function that does not require a dragging movement</h1>
 
     <section id="meta">
         <h2>Metadata</h2>
diff --git a/techniques/failures/F109.html b/techniques/failures/F109.html
new file mode 100644
index 0000000000..f5cf0f7383
--- /dev/null
+++ b/techniques/failures/F109.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+ 
+ <head>
+    <title>Failure of Success Criterion 3.3.8 and 3.3.9 due to preventing password or code re-entry in the same format</title>
+   
+    <link rel="stylesheet" type="text/css" href="../../css/editors.css"/>
+</head>
+ 
+ <body>
+    
+    <h1>Failure of Success Criterion 3.3.8 and 3.3.9 due to preventing password or code re-entry in the same format</h1>
+    
+    <section class="meta">
+        <p class="id">ID: F109</p><p class="technology">Technology: failures</p><p class="type">Type: Failure</p>
+    </section>
+
+    <section id="applicability"><h2>When to Use</h2>
+      <p>All technologies that require authentication.</p>
+    </section>
+   
+   <section id="description">
+    <h2>Description</h2>
+
+    <p>Requiring users to authenticate by entering a password or code in a different format from which it was originally created is a failure to meet Success Criteria 3.3.8 and 3.3.9 (unless alternative authentication methods are available). The string to be entered could include a password, verification code, or any string of characters the user has to remember or record to authenticate.</p>
+
+    <p>If a user is required to enter individual characters across multiple fields in a way that prevents pasting the password in a single action, it prevents use of a password manager or pasting from local copy of the password. This means users cannot avoid transcription, resulting in a <a>cognitive function test</a>. This applies irrespective of whether users are required to enter all characters in the string, or just a subset.</p>
+  
+   </section>
+
+   <section id="examples">
+    <h2>Examples</h2>
+    <p>These examples would prevent a user from entering a password or code in the same format in which it was originally created:</p>
+    <ul>
+        <li>A fieldset that prompts a user to "Enter the 2nd, 6th and last characters of your password", with separate input fields for each character.</li>
+        <li>A fieldset that prompts a user to enter each digit of a verification code in a separate input (unless the user can paste the entire code in the first input, and the remaining inputs are populated automatically).</li>
+        <li>A password input fieldset composed of <code class="language-html">&lt;select&gt;</code> elements that requires a user to select each character of a fixed-length password from individual dropdown fields.</li>
+    </ul>
+   </section>
+   
+   <section id="tests"><h2>Tests</h2>
+      <section class="procedure"><h3>Procedure</h3>
+        <p>For each form field which accepts password or code entry:</p>
+         <ol>
+            <li>Check if the structure of the input field(s) prevents the user from pasting or auto-filling the entire password or code in the format in which it was originally created.</li>
+            <li>Confirm that no other acceptable authentication methods are present that satisfy Success Criteria 3.3.8 or 3.3.9 (such as an authentication method that does not rely on a cognitive function test).</li>
+         </ol>
+      </section>
+      <section class="results"><h3>Expected Results</h3>
+         <ul>
+            <li>If checks #1 and #2 are true, then this failure condition applies and content fails the Success Criterion.</li>
+         </ul>
+      </section>
+   </section>
+   <section id="related">
+    <h2>Related Techniques</h2>
+    </section>
+    <section id="resources">
+        <h2>Resources</h2>
+    </section>
+</body>
+</html>
diff --git a/techniques/failures/F110.html b/techniques/failures/F110.html
new file mode 100644
index 0000000000..6327f0b4ae
--- /dev/null
+++ b/techniques/failures/F110.html
@@ -0,0 +1,67 @@
+<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
+	<head>
+			<title>Failure of Success Criterion 2.4.11 Focus Not Obscured (Minimum) due to a sticky footer or header completely hiding focused elements</title>
+			<link rel="stylesheet" type="text/css" href="../../css/editors.css"/>
+	</head>
+	<body>
+		<h1>Failure of Success Criterion 2.4.11 Focus Not Obscured (Minimum) due to a sticky footer or header completely hiding focused elements</h1>
+		<section id="meta">
+			<h2>Metadata</h2>
+			<p id="id"></p>
+			<p id="technology">failures</p>
+			<p id="type">failure</p>
+		</section>
+		<section id="applicability">
+			<h2>Applicability</h2>
+				<p>Content using any technology which supports keyboard interfaces.</p>
+		</section>
+		<section id="description">
+			<h2>Description</h2>
+			<p>The objective of this failure is to avoid situations in which people using a keyboard interface (e.g. tabbing through links and controls) cannot see where the indicator is due to other authored content.</p>
+			<p>Any 'sticky' content that moves with the viewport can potentially obscure other elements on the page, including controls the user may tab to.</p>
+		</section>
+		<section id="examples">
+			<h2>Examples</h2>
+			<section class="example" id="example-1">
+				<h3>Sticky footer</h3>
+				<p>A Web page has a sticky footer, an element that stays visible at the bottom of the viewport as the user scrolls the page. The footer is tall enough to completely cover the element in focus as a user tabs down the page.</p>
+        <p class="working-example">
+          <a href="../../working-examples/sticky-elements-hiding-focused-elements/sticky-footer.html">Failure example of sticky footer that completely cover elements in focus as a user tabs down the page</a>.
+        </p>
+			</section>
+			<section class="example" id="example-2">
+				<h3>Sticky header</h3>
+				<p>A Web page has a sticky header, an element that stays visible at the top of the viewport as the user scrolls the page. The header is tall enough to completely cover the element in focus as a user tabs up the page.</p>
+			  <p class="working-example">
+          <a href="../../working-examples/sticky-elements-hiding-focused-elements/sticky-header.html">Failure example of sticky header that completely cover elements in focus as a user tabs up the page</a>.
+        </p>
+      </section>
+		</section>
+		<section id="tests">
+			<h2>Tests</h2>
+			<section class="test-procedure">
+				<h3>Procedure</h3>
+					<p>Tab through the links and controls on the page. Both progressing down through the page, and back up:</p>
+				<ol>
+					<li>Check whether the focused element is completely obscured by other content</li>
+				</ol>
+			</section>
+			<section class="test-results">
+				<h3>Expected Results</h3>
+				<ul>
+					<li>If #1 is true, then this failure condition applies and the content fails the Success Criterion.</li>
+				</ul>
+			</section>
+		</section>
+		<section id="related">
+			<h2>Related Techniques</h2>
+			<ul>
+			</ul>
+		</section>
+		<section id="resources">
+			<h2>Resources</h2>
+			<ul>
+			</ul>
+		</section>
+	</body>
+</html>
diff --git a/techniques/failures/F111.html b/techniques/failures/F111.html
new file mode 100644
index 0000000000..d2a73fc8ba
--- /dev/null
+++ b/techniques/failures/F111.html
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
+	<head>
+		<title>Failure of Success Criteria 1.3.1, 2.5.3, and 4.1.2 due to a control with visible label text but no accessible name</title>
+		<link rel="stylesheet" type="text/css" href="../../css/editors.css"/>
+	</head>
+	<body>
+		<h1>Failure of Success Criteria 1.3.1, 2.5.3, and 4.1.2 due to a control with visible label text but no accessible name</h1>
+		<section id="meta">
+			<h2>Metadata</h2>
+			<p id="id"></p>
+			<p id="technology">general</p>
+			<p id="type">failure</p>
+		</section>
+
+		<section id="applicability">
+			<h2>When to Use</h2>
+			<p>All technologies that include interactive controls (such as links or form inputs).</p>
+		</section>
+
+		<section id="description">
+			<h2>Description</h2>
+			<p>The objective of this Failure is to describe situations where speech input users cannot reliably speak the name of a control because although it has a visible label, it lacks an accessible name.</p>
+			<p>When speech input users interact with a web page, they usually speak a command followed by the reference to some visible label (like the text in a button or a link, or the text labelling some input). If the control lacks an accessible name, speech users won't be able to activate the control using its visible label.</p>	
+		</section>
+		
+		<section id="examples">
+			<h2>Examples</h2>
+      
+      <section class="example">
+				<h3>A text input with a visible label, but without an accessible name</h3>
+				<p>The text input is preceded by a visible text label "Enter name", but the text is not marked up as a <code>&lt;label&gt;</code> for the input, and there is no alternative way (e.g., <code>aria-label</code>) to provide the input with an accessible name at all.</p>
+				<pre><code>
+					&lt;p&gt;Enter name&lt;/p&gt;
+					&lt;input type="text"&gt;
+        </code></pre>
+      </section>
+
+			<section class="example">
+				<h3>A text input with a visible label and aria-labelledby pointing to a non-existent id</h3>
+				<p>The text input is preceded by a visible text label "Enter name". The text's container has an <code>id</code> of <code>nameEntry</code>, but the input has an <code>aria-labelledby</code> referencing a non-existent <code>name-entry</code> <code>id</code>. As a result, the input lacks an accessible name altogether.</p>
+				<pre><code>
+					&lt;p id="nameEntry"&gt;Enter name&lt;/p&gt;
+					&lt;input type="text" aria-labelledby="name-entry" &gt;
+        </code></pre>
+      </section>
+    </section>
+    
+		<section id="tests">
+			<h2>Tests</h2>
+			<section class="test-procedure">
+				<h3>Procedure</h3>
+				<p>For all controls with a visible label (e.g., link text, button text, programmatically linked label, images in links or buttons with text, etc.), check that:</p>
+				<ol>
+					<li>The control has a visible text label.</li>
+					<li>The control has an accessible name.</li>
+          <li>The accessible name contains the text that appears as the visible label.</li>
+				</ol>
+			</section>
+			<section class="test-results">
+				<h3>Expected Results</h3>
+				<ul>
+					<li>If check #1 is false, the Success Criterion does not apply.</li>
+					<li>If check #1 is true, but checks #2 and/or #3 are false, the content fails the Success Criterion.</li>
+					<li>If all checks are true, the content passes the Success Criterion.</li>
+				</ul>
+			</section>
+		</section>
+		<section id="related">
+			<h2>Related Techniques</h2>
+			<ul>
+				<li><a href="../../techniques/general/F96">F96</a></li>
+        <li><a href="../../techniques/general/G131">G131</a></li>
+        <li><a href="../../techniques/aria/ARIA7">ARIA7</a></li>
+        <li><a href="../../techniques/aria/ARIA8">ARIA8</a></li>
+        <li><a href="../../techniques/aria/ARIA9">ARIA9</a></li>
+				<li><a href="../../techniques/aria/ARIA14">ARIA14</a></li>
+        <li><a href="../../techniques/aria/ARIA16">ARIA16</a></li>
+        <li><a href="../../techniques/client-side-script/SCR30">SCR30</a></li>
+			</ul>
+		</section>
+	</body>
+</html>
diff --git a/techniques/failures/F12.html b/techniques/failures/F12.html
index 1b302a45bc..6fed1e99e3 100644
--- a/techniques/failures/F12.html
+++ b/techniques/failures/F12.html
@@ -1,6 +1,6 @@
 <!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Failure of Success Criterion 2.2.5 due to having a session time limit without a mechanism
                     for saving user's input and re-establishing that information upon
-                    re-authentication</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Failure of Success Criterion 2.2.5 due to having a session time limit without a mechanism
+                    re-authentication</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/></head><body><h1>Failure of Success Criterion 2.2.5 due to having a session time limit without a mechanism
                     for saving user's input and re-establishing that information upon
                     re-authentication</h1><section class="meta"><p class="id">ID: F12</p><p class="technology">Technology: failures</p><p class="type">Type: Failure</p></section><section id="applicability"><h2>When to Use</h2>
       <p>Sites that require user login to submit input and that terminate the session
@@ -11,11 +11,11 @@
                         This is sometimes done for security reasons, to protect users who are
                         assumed to have left their computer exposed in a state where someone could
                         do something harmful to them such as transfer bank funds or make an
-                        unauthorized purchase. A user with a disability may actually still be
-                        working to complete the form as it may take him or her longer to complete
+                        unauthorized purchase. Users with disabilities may actually still be
+                        working to complete the form as it may take them longer to complete
                         the form than would normally be expected. Upon re-authentication, if the
-                        state of the user's session is not restored, including all data that had
-                        been previously entered into the form, he or she will have to start over.
+                        state of users' sessions are not restored, including all data that had
+                        been previously entered into the form, they will have to start over.
                         And for these users, it is likely that the session will time out again
                         before they can complete the form. This sets up a situation where a user who
                         needs more time to complete the form can never complete it.</p>
@@ -46,7 +46,7 @@
       </section>
       <section class="results"><h3>Expected Results</h3>
          <ul>
-            <li>If step #3 is false, the site fails the Success Criterion.</li>
+            <li>If check #3 is false, the site fails the Success Criterion.</li>
          </ul>
       </section>
    </section><section id="related"><h2>Related Techniques</h2><ul>
diff --git a/techniques/failures/F13.html b/techniques/failures/F13.html
index 7df6583276..0f09808dec 100644
--- a/techniques/failures/F13.html
+++ b/techniques/failures/F13.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Failure of Success Criterion 1.1.1 and 1.4.1 due to having a text alternative that does not
-                    include information that is conveyed by color differences in the image</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Failure of Success Criterion 1.1.1 and 1.4.1 due to having a text alternative that does not
+                    include information that is conveyed by color differences in the image</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/></head><body><h1>Failure of Success Criterion 1.1.1 and 1.4.1 due to having a text alternative that does not
                     include information that is conveyed by color differences in the image</h1><section class="meta"><p class="id">ID: F13</p><p class="technology">Technology: failures</p><p class="type">Type: Failure</p></section><section id="applicability"><h2>When to Use</h2>
       <p>All technologies.</p>
    </section><section id="description"><h2>Description</h2>
@@ -31,7 +31,7 @@
       </section>
       <section class="results"><h3>Expected Results</h3>
          <ul>
-            <li>If step #1 is true, then this failure condition applies and
+            <li>If check #1 is true, then this failure condition applies and
                                     content fails the Success Criterion.</li>
          </ul>
       </section>
diff --git a/techniques/failures/F14.html b/techniques/failures/F14.html
index 7bafecff56..36863c89b2 100644
--- a/techniques/failures/F14.html
+++ b/techniques/failures/F14.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Failure of Success Criterion 1.3.3 due to identifying content only by its shape or
-                    location</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Failure of Success Criterion 1.3.3 due to identifying content only by its shape or
+                    location</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/></head><body><h1>Failure of Success Criterion 1.3.3 due to identifying content only by its shape or
                     location</h1><section class="meta"><p class="id">ID: F14</p><p class="technology">Technology: failures</p><p class="type">Type: Failure</p></section><section id="applicability"><h2>When to Use</h2>
       <p>All technologies.</p>
    </section><section id="description"><h2>Description</h2>
@@ -45,7 +45,7 @@
       </section>
       <section class="results"><h3>Expected Results</h3>
          <ul>
-            <li>If step #2 is false, then this failure condition applies and the
+            <li>If check #2 is false, then this failure condition applies and the
                                     content fails this Success Criterion.</li>
          </ul>
       </section>
diff --git a/techniques/failures/F15.html b/techniques/failures/F15.html
index 950a2c7bf2..c9b3748484 100644
--- a/techniques/failures/F15.html
+++ b/techniques/failures/F15.html
@@ -1,10 +1,23 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Failure of Success Criterion 4.1.2 due to implementing custom controls that do not use an accessibility API for the technology, or do so incompletely</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Failure of Success Criterion 4.1.2 due to implementing custom controls that do not use an accessibility API for the technology, or do so incompletely</h1><section class="meta"><p class="id">ID: F15</p><p class="technology">Technology: failures</p><p class="type">Type: Failure</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+    <head>
+      <title>Failure of Success Criterion 4.1.2 due to implementing custom controls that do not use an accessibility API for the technology, or do so incompletely</title>
+      <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/></head>
+    <body>
+      <h1>Failure of Success Criterion 4.1.2 due to implementing custom controls that do not use an accessibility API for the technology, or do so incompletely</h1>
+      <section class="meta"><p class="id">ID: F15</p><p class="technology">Technology: failures</p><p class="type">Type: Failure</p></section><section id="applicability"><h2>When to Use</h2>
       <p> Applies to all technologies that support an accessibility API. </p>
    </section><section id="description"><h2>Description</h2>
-      <p> When standard controls from accessible technologies are used, they usually are programmed in a way that uses and supports the accessibility API. If custom controls are created, however, then it is up to the programmer to be sure that the newly created control supports the accessibility API. If this is not done, then assistive technologies will not be able to understand what the control is or how to operate it or may not even know of its existence.</p>
+      <p> When standard controls from accessible technologies are used, they usually are programmed in a way that uses and supports the accessibility API. 
+        However, when custom controls are created, it is up to the control's author to ensure that the control is correctly exposed to users via the platform's accessibility API. 
+        If this is not done, then assistive technologies will not be able to understand what the control is or how to operate it or may not even know of its existence.</p>
       <div class="note">
          <p>For technologies that support it, WAI-ARIA can be used to expose a custom control's role, name, value, states, and properties via the accessibility API for the technology.</p>
       </div>
+     <div class="note">
+        <p>Along with ensuring custom controls are properly exposed to users via the platform's accessibility API, there are many other considerations that need to be made so the
+        control is accessible to as many people as possible. Keyboard functionality, target size, and color contrast requirements are only a few of the additional considerations that need to be accounted for, 
+        all of which go beyond what 4.1.2 Name, Role, Value, and this technique cover.</p>
+     </div>
    </section><section id="examples"><h2>Examples</h2>
       <section class="example">
          
@@ -19,32 +32,37 @@
       <section class="procedure"><h3>Procedure</h3>
          <ol>
             <li> Using the accessibility checker for the technology (or if
-                                    that is not available, inspect the code or test with an
+                                    that is not available, inspect the code using a browser's developer tools, or test with an
                                     assistive technology), check the controls to see if they support
-                                    the accessibility API. </li>
+                                    the accessibility API.</li>
          </ol>
       </section>
       <section class="results"><h3>Expected Results</h3>
          <ul>
-            <li> If step #1 is false, then this failure condition applies and the
-                                    content fails this Success Criterion </li>
+            <li> If check #1 is false, then this failure condition applies and the
+                                    content fails this success criterion.</li>
          </ul>
       </section>
    </section><section id="related"><h2>Related Techniques</h2></section><section id="resources"><h2>Resources</h2>
       
          <ul>
+           <li>
+             <a href="https://accessibilityinsights.io/docs/windows/overview/">Accessibility Insights for Windows</a>
+           </li>
             <li> 
                   <a href="https://msdn.microsoft.com/en-us/library/ms696082.aspx">Active Accessibility Checker (AccExplorer)</a> 
                </li>
             <li>
-                  <a href="https://www.w3.org/TR/wai-aria/">Accessible Rich Internet Applications (WAI-ARIA) 1.0</a>
+                  <a href="https://www.w3.org/TR/wai-aria/">Accessible Rich Internet Applications (WAI-ARIA)</a>
                </li>
             <li>
-                  <a href="https://www.w3.org/TR/wai-aria-practices/">WAI-ARIA 1.0 Authoring Practices</a> 
+                  <a href="https://www.w3.org/WAI/ARIA/apg/">WAI-ARIA Authoring Practices Guide</a> 
                </li>
             <li>
-                  <a href="https://www.w3.org/TR/aria-in-html/">Using WAI-ARIA in HTML</a> 
+                  <a href="https://www.w3.org/TR/html-aria/">ARIA in HTML</a> 
                </li>
          </ul>
       
-   </section></body></html>
\ No newline at end of file
+   </section>
+  </body>
+</html>
diff --git a/techniques/failures/F16.html b/techniques/failures/F16.html
index 3a151a3534..3d220c8e1a 100644
--- a/techniques/failures/F16.html
+++ b/techniques/failures/F16.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Failure of Success Criterion 2.2.2 due to including scrolling content where movement is not essential to the activity without also including a mechanism to pause and restart the content</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Failure of Success Criterion 2.2.2 due to including scrolling content where movement is not essential to the activity without also including a mechanism to pause and restart the content</h1><section class="meta"><p class="id">ID: F16</p><p class="technology">Technology: failures</p><p class="type">Type: Failure</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Failure of Success Criterion 2.2.2 due to including scrolling content where movement is not essential to the activity without also including a mechanism to pause and restart the content</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/></head><body><h1>Failure of Success Criterion 2.2.2 due to including scrolling content where movement is not essential to the activity without also including a mechanism to pause and restart the content</h1><section class="meta"><p class="id">ID: F16</p><p class="technology">Technology: failures</p><p class="type">Type: Failure</p></section><section id="applicability"><h2>When to Use</h2>
       <p>All technologies that support visual movement or scrolling.</p>
    </section><section id="description"><h2>Description</h2>
       <p>In this failure technique, there is moving or scrolling content that cannot
diff --git a/techniques/failures/F19.html b/techniques/failures/F19.html
index cf796f5ec1..4cde7a8bad 100644
--- a/techniques/failures/F19.html
+++ b/techniques/failures/F19.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Failure of Conformance Requirement 1 due to not providing a method for the user to find the alternative conforming version of a non-conforming Web page</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Failure of Conformance Requirement 1 due to not providing a method for the user to find the alternative conforming version of a non-conforming Web page</h1><section class="meta"><p class="id">ID: F19</p><p class="technology">Technology: failures</p><p class="type">Type: Failure</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Failure of Conformance Requirement 1 due to not providing a method for the user to find the alternative conforming version of a non-conforming Web page</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/></head><body><h1>Failure of Conformance Requirement 1 due to not providing a method for the user to find the alternative conforming version of a non-conforming Web page</h1><section class="meta"><p class="id">ID: F19</p><p class="technology">Technology: failures</p><p class="type">Type: Failure</p></section><section id="applicability"><h2>When to Use</h2>
       <p> Sites that provide alternative, WCAG-conforming versions of nonconforming
                         primary content.</p>
    </section><section id="description"><h2>Description</h2>
@@ -29,7 +29,7 @@
       </section>
       <section class="results"><h3>Expected Results</h3>
          <ol>
-            <li> If step #2 is false, the content fails the Success Criterion. </li>
+            <li> If check #2 is false, the content fails the Success Criterion. </li>
          </ol>
       </section>
    </section><section id="related"><h2>Related Techniques</h2><ul>
diff --git a/techniques/failures/F2.html b/techniques/failures/F2.html
index 5eefd2e285..48eb9c2713 100644
--- a/techniques/failures/F2.html
+++ b/techniques/failures/F2.html
@@ -1,30 +1,27 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Failure of Success Criterion 1.3.1 due to using changes in text presentation to convey information without using the appropriate markup or text</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Failure of Success Criterion 1.3.1 due to using changes in text presentation to convey information without using the appropriate markup or text</h1><section class="meta"><p class="id">ID: F2</p><p class="technology">Technology: failures</p><p class="type">Type: Failure</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Failure of Success Criterion 1.3.1 due to using changes in text presentation to convey information without using the appropriate markup or text</title><link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/></head><body><h1>Failure of Success Criterion 1.3.1 due to using changes in text presentation to convey information without using the appropriate markup or text</h1><section class="meta"><p class="id">ID: F2</p><p class="technology">Technology: failures</p><p class="type">Type: Failure</p></section><section id="applicability"><h2>When to Use</h2>
       <p>All technologies that support images or presentation markup.</p>
    </section><section id="description"><h2>Description</h2>
       <p>This document describes a failure that occurs when a change in the appearance of text conveys meaning without using appropriate semantic markup. This failure also applies to images of text that are not enclosed in the appropriate semantic markup.</p>
    </section><section id="examples"><h2>Examples</h2>
       <section class="example">
-         <h3>Using CSS to style the <code class="el">p</code> element to look like a heading</h3>
+         <h3>Using CSS to style the <code class="language-html">p</code> element to look like a heading</h3>
          
-            <p>The author intended to make a heading but didn't want the look of the default HTML heading. So they used CSS to style the P element to look like a heading and they called it a heading. But they failed to use the proper HTML heading element. Therefore, the Assisitive Technology could not distinguish it as a heading.</p>
+            <p>The author intended to make a heading but didn't want the look of the default HTML heading. So they used CSS to style the P element to look like a heading and they called it a heading. But they failed to use the proper HTML heading element. Therefore, the Assistive Technology could not distinguish it as a heading.</p>
          
-         <pre xml:space="preserve">
- &lt;style type="text/css"&gt;
- .heading1{
-        font-family: Times, serif;
-        font-size:200%;
-        font-weight:bold;
- }
- &lt;/style&gt;
-
- &lt;p class="heading1"&gt;Introduction&lt;/p&gt;
- &lt;p&gt;This introduction provides detailed information about how to use this 
- ........
- &lt;/p&gt;
+<pre xml:space="preserve"><code class="language-css">&lt;style&gt;
+.heading1{
+  font-family: Times, serif;
+  font-size:200%;
+  font-weight:bold;
+}
+&lt;/style&gt;
+</code>
+<code class="language-html">&lt;p class="heading1"&gt;Introduction&lt;/p&gt;
+&lt;p&gt;This introduction provides detailed information about how to use this ...&lt;/p&gt;</code>
 </pre>
          
             <div class="note">
-               <p>In this case, the proper approach would be to use CSS to style the <code class="el">H1</code> element in HTML.</p>
+               <p>In this case, the proper approach would be to use CSS to style the <code class="language-html">H1</code> element in HTML.</p>
             </div>
          
       </section>
@@ -33,31 +30,25 @@ <h3>Images of text used as headings where the images are not marked up with head
          
             <p>Chapter1.gif is an image of the words, "Chapter One" in a Garamond font sized at 20 pixels. This is a failure because at a minimum the img element should be enclosed within a header element. A better solution would be to eliminate the image and to enclose the text within a header element which has been styled using CSS.</p>
          
-         <pre xml:space="preserve">
-&lt;img src="Chapter1.gif" alt="Chapter One"&gt;
- 
-&lt;p&gt;Once upon a time in the land of the Web.....
-&lt;/p&gt;
-</pre>
+<pre xml:space="preserve"><code class="language-html">&lt;img src="Chapter1.gif" alt="Chapter One"&gt;
+&lt;p&gt;Once upon a time in the land of the Web...&lt;/p&gt;</code></pre>
       </section>
       <section class="example">
          <h3>Using CSS to visually emphasize a phrase or word without conveying that emphasis semantically</h3>
          
             <p>The following example fails because the information conveyed by using the CSS font-weight property to change to a bold font is not conveyed through semantic markup or stated explicitly in the text.</p>
             <p>Here is a CSS class to specify bold:</p>
-            <pre xml:space="preserve">
-.yell {
-  font-weight:bold;
-  text-transform: uppercase;
-}
+<pre xml:space="preserve"><code class="language-css">.yell {
+   font-weight:bold;
+   text-transform: uppercase;
+ }</code>
 </pre>
             <p>And here is the corresponding HTML:</p>
-            <pre xml:space="preserve">
-&lt;p&gt;
- "I said, &lt;span class="yell"&gt;no&lt;/span&gt;, not before dinner!", 
- was the exasperated response when Timmy asked his mother for the 
- fourth time for an ice cream cone. 
- &lt;/p&gt;
+<pre xml:space="preserve"><code class="language-html">&lt;p&gt;
+   "I said, &lt;span class="yell"&gt;no&lt;/span&gt;, not before dinner!", 
+   was the exasperated response when Timmy asked his mother for the 
+   fourth time for an ice cream cone.
+&lt;/p&gt;</code>
 </pre>
          
       </section>
@@ -91,4 +82,5 @@ <h3>Using CSS to visually emphasize a phrase or word without conveying that emph
       <li><a href="../html/H49">H49</a></li>
       <li><a href="../general/G115">G115</a></li>
       <li><a href="../general/G117">G117</a></li>
-   </ul></section><section id="resources"><h2>Resources</h2></section></body></html>
\ No newline at end of file
+   </ul></section><section id="resources"><h2>Resources</h2></section>
+</body></html>
\ No newline at end of file
diff --git a/techniques/failures/F20.html b/techniques/failures/F20.html
index 5d9ec590c4..8e21565ba7 100644
--- a/techniques/failures/F20.html
+++ b/techniques/failures/F20.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Failure of Success Criterion 1.1.1 and 4.1.2 due to not updating text alternatives when
-                    changes to non-text content occur</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Failure of Success Criterion 1.1.1 and 4.1.2 due to not updating text alternatives when
+                    changes to non-text content occur</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/></head><body><h1>Failure of Success Criterion 1.1.1 and 4.1.2 due to not updating text alternatives when
                     changes to non-text content occur</h1><section class="meta"><p class="id">ID: F20</p><p class="technology">Technology: failures</p><p class="type">Type: Failure</p></section><section id="applicability"><h2>When to Use</h2>
       <p> Applies to all technologies. </p>
    </section><section id="description"><h2>Description</h2>
@@ -33,7 +33,7 @@
       </section>
       <section class="results"><h3>Expected Results</h3>
          <ul>
-            <li> If step #1 is true then the text alternative is not up to date with
+            <li> If check #1 is true then the text alternative is not up to date with
                                     current item, this failure condition applies, and content fails
                                     these Success Criteria. </li>
          </ul>
diff --git a/techniques/failures/F22.html b/techniques/failures/F22.html
index e8f2d54038..5e8d0cf538 100644
--- a/techniques/failures/F22.html
+++ b/techniques/failures/F22.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Failure of Success Criterion 3.2.5 due to opening windows that are not requested by the
-                    user</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Failure of Success Criterion 3.2.5 due to opening windows that are not requested by the
+                    user</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/></head><body><h1>Failure of Success Criterion 3.2.5 due to opening windows that are not requested by the
                     user</h1><section class="meta"><p class="id">ID: F22</p><p class="technology">Technology: failures</p><p class="type">Type: Failure</p></section><section id="applicability"><h2>When to Use</h2>
       <p>General </p>
    </section><section id="description"><h2>Description</h2>
@@ -56,9 +56,9 @@ <h3></h3>
       </section>
       <section class="results"><h3>Expected Results</h3>
          <ul>
-            <li> If step #2 is true, the failure condition applies and the content
+            <li> If check #2 is true, the failure condition applies and the content
                                     fails the Success Criterion </li>
-            <li> If step #5 is true and step #6 is false, the failure condition applies and
+            <li> If check #5 is true and check #6 is false, the failure condition applies and
                                     the content fails the Success Criterion </li>
          </ul>
       </section>
diff --git a/techniques/failures/F23.html b/techniques/failures/F23.html
index d23a562c31..450427644e 100644
--- a/techniques/failures/F23.html
+++ b/techniques/failures/F23.html
@@ -1,40 +1,60 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Failure of  1.4.2 due to playing a sound longer than 3 seconds where
-                    there is no mechanism to turn it off</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Failure of  1.4.2 due to playing a sound longer than 3 seconds where
-                    there is no mechanism to turn it off</h1><section class="meta"><p class="id">ID: F23</p><p class="technology">Technology: failures</p><p class="type">Type: Failure</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+<head>
+   <title>Failure of  1.4.2 due to playing a sound longer than 3 seconds where there is no mechanism to turn it off</title>
+   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/>
+</head>
+<body>
+   <h1>Failure of 1.4.2 due to playing a sound longer than 3 seconds where there is no mechanism to turn it off</h1>
+   <section class="meta">
+      <p class="id">ID: F23</p><p class="technology">Technology: failures</p><p class="type">Type: Failure</p>
+   </section>
+   <section id="applicability">
+      <h2>When to Use</h2>
       <p> Applies to all technologies except those for voice interaction. </p>
-   </section><section id="description"><h2>Description</h2>
-      <p> This describes a failure condition for Success Criteria involving sound. If sound does not
-                        turn off automatically within 3 seconds and there is no way to turn the
-                        sound off then Success Criterion 1.4.2 would not be met. Sounds that play over 3 seconds
-                        when there is no mechanism to turn off the sound included in the content
-                        would fall within this failure condition. </p>
-   </section><section id="examples"><h2>Examples</h2>
+   </section>
+   <section id="description">
+      <h2>Description</h2>
+      <p>This describes a failure condition for Success Criteria involving sound. If sound does not
+         turn off automatically within 3 seconds and there is no way to turn the
+         sound off, independently from the overall system volume level, then Success Criterion 1.4.2 would not be met.
+         The sound would fall within this failure condition. </p>
+   </section>
+   <section id="examples">
+      <h2>Examples</h2>
       <section class="example">
-         
-            <ul>
-               <li> A site that plays continuous background music </li>
-            </ul>
-         
+         <ul>
+            <li>A site that plays continuous background music </li>
+         </ul>
       </section>
       <section class="example">
-         
-            <ul>
-               <li> A site with a narrator that lasts more than 3 seconds before
-                  	stopping, and there is no mechanism to stop it. </li>
-            </ul>
-         
+         <ul>
+            <li>A site with a narrator that lasts more than 3 seconds before
+               stopping, and there is no mechanism to stop it. </li>
+         </ul>
       </section>
-   </section><section id="tests"><h2>Tests</h2>
+   </section
+   ><section id="tests">
+      <h2>Tests</h2>
       <section class="procedure"><h3>Procedure</h3>
          <ol>
-            <li> Check that there is a way in a Web page to turn off any sound that
-                                    plays automatically for more than three seconds.</li>
+            <li>Check that there is a mechanism, independent from the overall system volume control, to turn off any sound that
+               plays automatically for more than three seconds.
+            </li>
          </ol>
       </section>
-      <section class="results"><h3>Expected Results</h3>
+      <section class="results">
+         <h3>Expected Results</h3>
          <ul>
-            <li> If step #1 is not true then content fails Success Criterion 1.4.2
-                                </li>
+            <li>If check #1 is not true then content fails Success Criterion 1.4.2</li>
          </ul>
       </section>
-   </section><section id="related"><h2>Related Techniques</h2></section><section id="resources"><h2>Resources</h2></section></body></html>
\ No newline at end of file
+   </section>
+   <section id="related">
+      <h2>Related Techniques</h2>
+   </section>
+   <section id="resources">
+      <h2>Resources</h2>
+   </section>
+</body>
+</html>
\ No newline at end of file
diff --git a/techniques/failures/F24.html b/techniques/failures/F24.html
index 0faeeb7963..a99be50a3a 100644
--- a/techniques/failures/F24.html
+++ b/techniques/failures/F24.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Failure of Success Criterion 1.4.3, 1.4.6 and 1.4.8 due to specifying foreground colors without
-      specifying background colors or vice versa</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Failure of Success Criterion 1.4.3, 1.4.6 and 1.4.8 due to specifying foreground colors without
+      specifying background colors or vice versa</title><link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/></head><body><h1>Failure of Success Criterion 1.4.3, 1.4.6 and 1.4.8 due to specifying foreground colors without
       specifying background colors or vice versa</h1><section class="meta"><p class="id">ID: F24</p><p class="technology">Technology: failures</p><p class="type">Type: Failure</p></section><section id="applicability"><h2>When to Use</h2>
       <p> All technologies that allow user agents to control foreground and background
          colors through personal stylesheets or other means. </p>
@@ -19,22 +19,18 @@ <h3>Specifying only background color with CSS</h3>
                stylesheet, however the foreground color is not defined. Therefore,
                the example fails the Success Criterion.</p>
          
-         <pre xml:space="preserve">
-  &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
-    "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
-&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
-&lt;html&gt;
-&lt;head&gt;
- &lt;title&gt;Setting the canvas background&lt;/title&gt;
-    &lt;style type="text/css"&gt;
-
-       body {background-color:white}
+<pre xml:space="preserve"><code class="language-html">&lt;!doctype&gt;
+  &lt;html lang="en&gt;
+  &lt;head&gt;
+    &lt;title&gt;Setting the canvas background&lt;/title&gt;
+    &lt;style&gt;
+      body {background-color:white}
     &lt;/style&gt;
   &lt;/head&gt;
   &lt;body&gt;
     &lt;p&gt;My background is white.&lt;/p&gt;
   &lt;/body&gt;
-&lt;/html&gt;</pre>
+&lt;/html&gt;</code></pre>
       </section>
       <section class="example">
          <h3>Specifying only foreground color with CSS</h3>
@@ -43,22 +39,18 @@ <h3>Specifying only foreground color with CSS</h3>
                stylesheet, however the background color is not defined. Therefore,
                the example fails the Success Criterion. </p>
          
-         <pre xml:space="preserve">
- &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
-   "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
-&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
-&lt;html&gt;
+<pre xml:space="preserve"><code class="language-html">&lt;!doctype&gt;
+&lt;html lang="en"&gt;
 &lt;head&gt;
- &lt;title&gt;Setting the canvas foreground&lt;/title&gt;
-    &lt;style type="text/css"&gt;
-       body {color:white}
-    &lt;/style&gt;
-  &lt;/head&gt;
-
-  &lt;body&gt;
-    &lt;p&gt;My foreground is white.&lt;/p&gt;
-  &lt;/body&gt;
-&lt;/html&gt;</pre>
+  &lt;title&gt;Setting the canvas foreground&lt;/title&gt;
+  &lt;style&gt;
+    body {color:white}
+  &lt;/style&gt;
+&lt;/head&gt;
+&lt;body&gt;
+  &lt;p&gt;My foreground is white.&lt;/p&gt;
+&lt;/body&gt;
+&lt;/html&gt;</code></pre>
       </section>
       <section class="example">
          <h3>Specifying foreground color of link text with CSS</h3>
@@ -67,67 +59,20 @@ <h3>Specifying foreground color of link text with CSS</h3>
                the body element. However, the background color is not defined.
                Therefore, the example fails the Success Criterion. </p>
          
-         <pre xml:space="preserve">
-  &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
-    "https://www.w3.org/TR/html4/strict.dtd"&gt;
-&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
-&lt;html&gt;
+<pre xml:space="preserve"><code class="language-html">&lt;!doctype&gt;
+&lt;html lang="en"&gt;
 &lt;head&gt;
- &lt;title&gt;A study of population dynamics&lt;/TITLE&gt;
- &lt;style type="text/css"&gt;
-  a:link { color: red }
-  a:visited { color: maroon }
-  a:active { color: fuchsia }
- &lt;/style&gt;
-
+  &lt;title&gt;A study of population dynamics&lt;/TITLE&gt;
+  &lt;style&gt;
+    a:link { color: red }
+    a:visited { color: maroon }
+    a:active { color: fuchsia }
+&lt;/style&gt;
 &lt;/head&gt;
 &lt;body&gt;
-  &lt;p&gt;... document body... &lt;a href="foo.htm"&gt;Foo&lt;/a&gt;&lt;/p&gt;
-&lt;/body&gt;
-&lt;/html&gt;</pre>
-      </section>
-      <section class="example">
-         <h3>Specifying only background color with <code class="att">bgcolor</code> in HTML </h3>
-         
-            <p>In the example below the background color is defined on the body
-               element, however the foreground color is not defined. Therefore, the
-               example fails the Success Criterion.</p>
-            <p>Note that the use of the <code class="att">bgcolor</code> attribute is deprecated as of HTML 4, but this failure example is included as this usage is still found on some web sites.</p>
-         
-         <pre xml:space="preserve">   
-&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
-  "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
-  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
-      &lt;html&gt;
-          &lt;head&gt;
-              &lt;title&gt;A study of population dynamics&lt;/title&gt;
-          &lt;/head&gt;
-          &lt;body bgcolor="white"&gt;
-              &lt;p&gt; ... document body...&lt;/p&gt;
-          &lt;/body&gt;
-  &lt;/html&gt;</pre>
-      </section>
-      <section class="example">
-         <h3>Specifying only foreground color with the <code class="att">text</code> attribute in HTML </h3>
-         
-            <p>In the example below the foreground color is defined on the body
-               element, however the background color is not defined. Therefore, the
-               example fails the Success Criterion. </p>
-            <p>Note that the use of the <code class="att">text</code> attribute is deprecated as of HTML 4, but this failure example is included as this usage is still found on some web sites.</p>
-         
-         <pre xml:space="preserve">
- &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
-   "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
-&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
-&lt;html&gt;
-&lt;head&gt;
- &lt;title&gt;A study of population dynamics&lt;/title&gt;
-
-&lt;/head&gt;
-&lt;body text="white"&gt;
-  &lt;p&gt;... document body...&lt;/p&gt;
+ &lt;p&gt;... document body... &lt;a href="foo.htm"&gt;Foo&lt;/a&gt;&lt;/p&gt;
 &lt;/body&gt;
-&lt;/html&gt;</pre>
+&lt;/html&gt;</code></pre>
       </section>
    </section><section id="tests"><h2>Tests</h2>
       <section class="procedure"><h3>Procedure</h3>
@@ -145,7 +90,7 @@ <h3>Specifying only foreground color with the <code class="att">text</code> attr
          </div>
       </section>
       <section class="results"><h3>Expected Results</h3>
-         <p>If step #2 is true but step #3 is false, OR if step #3 is true but step #2 is false then this
+         <p>If check #2 is true but step #3 is false, <em>or</em> if check #3 is true but step #2 is false then this
             failure condition applies and content fails these Success Criteria.</p>
       </section>
    </section><section id="related"><h2>Related Techniques</h2><ul>
@@ -155,8 +100,8 @@ <h3>Specifying only foreground color with the <code class="att">text</code> attr
       
          <ul>
             <li>
-                  <a href="https://www.w3.org/TR/CSS2/cascade.html#inheritance">Assigning property values, Cascading, and Inheritance</a>
-               </li>
+              <a href="https://www.w3.org/TR/css-cascade-4/">CSS Cascading and Inheritance Level 4</a>
+            </li>
          </ul>
       
    </section></body></html>
\ No newline at end of file
diff --git a/techniques/failures/F25.html b/techniques/failures/F25.html
index de9d049218..555545977d 100644
--- a/techniques/failures/F25.html
+++ b/techniques/failures/F25.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Failure of Success Criterion 2.4.2 due to the title of a Web page not identifying the
-                    contents</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Failure of Success Criterion 2.4.2 due to the title of a Web page not identifying the
+                    contents</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/></head><body><h1>Failure of Success Criterion 2.4.2 due to the title of a Web page not identifying the
                     contents</h1><section class="meta"><p class="id">ID: F25</p><p class="technology">Technology: failures</p><p class="type">Type: Failure</p></section><section id="applicability"><h2>When to Use</h2>
       <p>All technologies.</p>
    </section><section id="description"><h2>Description</h2>
@@ -43,7 +43,7 @@
       </section>
       <section class="results"><h3>Expected Results</h3>
          <ul>
-            <li>If step #1 is false, then this failure condition applies and the
+            <li>If check #1 is false, then this failure condition applies and the
                                     content fails this Success Criterion.</li>
          </ul>
       </section>
diff --git a/techniques/failures/F26.html b/techniques/failures/F26.html
index 0b440cf66d..b2d9c34167 100644
--- a/techniques/failures/F26.html
+++ b/techniques/failures/F26.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>
-          Failure of Success Criterion 1.3.3 due to using a graphical symbol alone to convey information</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>
+          Failure of Success Criterion 1.3.3 due to using a graphical symbol alone to convey information</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/></head><body><h1>
           Failure of Success Criterion 1.3.3 due to using a graphical symbol alone to convey information</h1><section class="meta"><p class="id">ID: F26</p><p class="technology">Technology: failures</p><p class="type">Type: Failure</p></section><section id="applicability"><h2>When to Use</h2>
       <p>All technologies.</p>
    </section>
@@ -30,5 +30,6 @@ <h3>Glyphs Used to Indicate Status</h3>
       </section>
    </section><section id="related"><h2>Related Techniques</h2><ul>
       <li><a href="../html/H37">H37</a></li>
-      <li><a href="../aria/ARIA24">ARIA24</a></li>
+	  <li><a href="../aria/ARIA14">ARIA14</a></li>
+	  <li><a href="../aria/ARIA24">ARIA24</a></li>
    </ul></section><section id="resources"><h2>Resources</h2></section></body></html>
diff --git a/techniques/failures/F3.html b/techniques/failures/F3.html
index 84fb847705..6f2830c143 100644
--- a/techniques/failures/F3.html
+++ b/techniques/failures/F3.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Failure of Success Criterion 1.1.1 due to using CSS to include images that convey
-                    important information</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Failure of Success Criterion 1.1.1 due to using CSS to include images that convey
+                    important information</title><link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/></head><body><h1>Failure of Success Criterion 1.1.1 due to using CSS to include images that convey
                     important information</h1><section class="meta"><p class="id">ID: F3</p><p class="technology">Technology: failures</p><p class="type">Type: Failure</p></section><section id="applicability"><h2>When to Use</h2>
       <p> All technologies that support CSS. </p>
    </section><section id="description"><h2>Description</h2>
@@ -21,19 +21,15 @@ <h3></h3>
                                 image that is presented by CSS alone. In this example, the image
                                 TopRate.png is a 180 by 200 pixel image that contains the text,
                                 "19.3% APR Typical Variable." </p>
+<pre xml:space="preserve"><code class="language-css">p#bestinterest {
+   padding-left: 200px;
+   background: transparent url(/images/TopRate.png) no-repeat top left;
+ }</code>
+</pre>
+         <p> It is used in this excerpt: </p>
          
-         <pre xml:space="preserve"> The CSS contains: 
-p#bestinterest {
-  padding-left: 200px;
-  background: transparent url(/images/TopRate.png) no-repeat top left;
-}</pre>
-         
-            <p> It is used in this excerpt: </p>
-         
-         <pre xml:space="preserve"> 
-&lt;p id="bestinterest"&gt;
-  Where else would you find a better interest rate?
-&lt;/p&gt;</pre>
+<pre xml:space="preserve"><code class="language-html">&lt;p id="bestinterest"&gt;Where else would you find a better interest rate?&lt;/p&gt;</code>
+</pre>
       </section>
       <section class="example">
          <h3></h3>
@@ -43,53 +39,51 @@ <h3></h3>
                                 in-stock, or out of stock. </p>
             <p>The CSS contains: </p>
          
-         <pre xml:space="preserve">
-ul#booklist li {
-  padding-left: 20px;
-}
-
-ul#booklist li.new {
-  background: transparent url(new.png) no-repeat top left; 
-}
-                            
-ul#booklist li.limited {
-  background: transparent url(limited.png) no-repeat top left; 
-}
-                            
-ul#booklist li.instock {
-  background: transparent url(instock.png) no-repeat top left; 
-}
-
-ul#booklist li.outstock {
-  background: transparent url(outstock.png) no-repeat top left; 
-}</pre>
+<pre xml:space="preserve"><code class="language-css">ul#booklist li {
+   padding-left: 20px;
+ }
+ 
+ ul#booklist li.new {
+   background: transparent url(new.png) no-repeat top left; 
+ }
+                             
+ ul#booklist li.limited {
+   background: transparent url(limited.png) no-repeat top left; 
+ }
+                             
+ ul#booklist li.instock {
+   background: transparent url(instock.png) no-repeat top left; 
+ }
+ 
+ ul#booklist li.outstock {
+   background: transparent url(outstock.png) no-repeat top left; 
+ }</code>
+</pre>
          
             <p>It is used in this excerpt: </p>
          
-         <pre xml:space="preserve">
-&lt;ul id="booklist"&gt;
+<pre xml:space="preserve"><code class="language-html">&lt;ul id="booklist"&gt;
   &lt;li class="new"&gt;Some book&lt;/li&gt;
   &lt;li class="instock"&gt;Some other book&lt;/li&gt;
   &lt;li class="limited"&gt;A book we desperately want to get rid of&lt;/li&gt;
   ...
   &lt;li class="outstock"&gt;A book you actually want &lt;/li&gt;
-&lt;/ul&gt;</pre>
+&lt;/ul&gt;</code></pre>
       </section>
       <section class="example">
          <h3></h3>
          
             <p>Using the code from example 1, the same background image is declared in the HTML style attribute:</p>
-            <pre xml:space="preserve">&lt;p id="bestinterest" style="background: transparent url(/images/TopRate.png) no-repeat top left;" &gt;
-Where else would you find a better interest rate?
-&lt;p&gt;</pre>
+<pre xml:space="preserve"><code class="language-html">&lt;p id="bestinterest" style="background: transparent url(/images/TopRate.png) no-repeat top left;"&gt;
+   Where else would you find a better interest rate?&lt;p&gt;</code></pre>
             <p>In the following code, the background image declaration is created in a client script:</p>
-            <pre xml:space="preserve">&lt;script type="text/javascript"&gt;
-var newP = document.createElement('p');
-var newPText = document.createTextNode('Where else would you find a better interest rate?');
-newP.appendChild(newPText);
-newP.style.background = 'transparent url(/images/TopRate.png) no-repeat top left';
-document.body.appendChild(newP);
-&lt;/script&gt; </pre>
+<pre xml:space="preserve"><code class="language-javascript">&lt;script&gt;
+   var newP = document.createElement('p');
+   var newPText = document.createTextNode('Where else would you find a better interest rate?');
+   newP.appendChild(newPText);
+   newP.style.background = 'transparent url(/images/TopRate.png) no-repeat top left';
+   document.body.appendChild(newP);
+&lt;/script&gt;</code></pre>
          
       </section>
    </section><section id="tests"><h2>Tests</h2>
@@ -99,14 +93,15 @@ <h3></h3>
             <li> Check that the images do not convey important information. </li>
             <li>If an image does convey important information,  the information is
                 provided to assistive technologies and is also available when the CSS image is
-                not displayed.  </li>
+                not displayed.</li>
          </ol>
       </section>
       <section class="results"><h3>Expected Results</h3>
          <ul>
-            <li> If step #2 and step #3 are both false, then this failure condition applies and the content fails this Success Criterion. </li>
+            <li> If checks #2 and #3 are both false, then this failure condition applies and the content fails this Success Criterion. </li>
          </ul>
       </section>
    </section><section id="related"><h2>Related Techniques</h2><ul>
       <li><a href="../html/H37">H37</a></li>
-   </ul></section><section id="resources"><h2>Resources</h2></section></body></html>
\ No newline at end of file
+   </ul></section><section id="resources"><h2>Resources</h2></section>
+</body></html>
\ No newline at end of file
diff --git a/techniques/failures/F30.html b/techniques/failures/F30.html
index 08e15123f5..5dc6217ad2 100644
--- a/techniques/failures/F30.html
+++ b/techniques/failures/F30.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Failure of Success Criterion 1.1.1 and 1.2.1 due to using text alternatives that are not
-                    alternatives (e.g., filenames or placeholder text)</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Failure of Success Criterion 1.1.1 and 1.2.1 due to using text alternatives that are not
+                    alternatives (e.g., filenames or placeholder text)</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/></head><body><h1>Failure of Success Criterion 1.1.1 and 1.2.1 due to using text alternatives that are not
                     alternatives (e.g., filenames or placeholder text)</h1><section class="meta"><p class="id">ID: F30</p><p class="technology">Technology: failures</p><p class="type">Type: Failure</p></section><section id="applicability"><h2>When to Use</h2>
       <p> Applies to all technologies. </p>
    </section><section id="description"><h2>Description</h2>
@@ -33,7 +33,7 @@
       </section>
       <section class="results"><h3>Expected Results</h3>
          <ul>
-            <li> If step #1 is true then this failure condition applies and content
+            <li> If check #1 is true then this failure condition applies and content
                                     fails the Success Criterion. </li>
          </ul>
       </section>
diff --git a/techniques/failures/F31.html b/techniques/failures/F31.html
index e4149940b3..6437950910 100644
--- a/techniques/failures/F31.html
+++ b/techniques/failures/F31.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Failure of Success Criterion 3.2.4 due to using two different labels for the same function on different Web pages within a set of Web pages </title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Failure of Success Criterion 3.2.4 due to using two different labels for the same function on different Web pages within a set of Web pages </h1><section class="meta"><p class="id">ID: F31</p><p class="technology">Technology: failures</p><p class="type">Type: Failure</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Failure of Success Criterion 3.2.4 due to using two different labels for the same function on different Web pages within a set of Web pages </title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/></head><body><h1>Failure of Success Criterion 3.2.4 due to using two different labels for the same function on different Web pages within a set of Web pages </h1><section class="meta"><p class="id">ID: F31</p><p class="technology">Technology: failures</p><p class="type">Type: Failure</p></section><section id="applicability"><h2>When to Use</h2>
       <p> Applies to all technologies. </p>
    </section><section id="description"><h2>Description</h2>
       <p> Components that have the same function in different Web pages are more
@@ -42,7 +42,7 @@ <h3></h3>
          </ol>
       </section>
       <section class="results"><h3>Expected Results</h3>
-         <p> If step #2 is false then this failure condition applies and content fails
+         <p> If check #2 is false then this failure condition applies and content fails
                             the Success Criterion. </p>
       </section>
    </section><section id="related"><h2>Related Techniques</h2></section><section id="resources"><h2>Resources</h2></section></body></html>
\ No newline at end of file
diff --git a/techniques/failures/F32.html b/techniques/failures/F32.html
index 42ce1bfbff..5d0963cce6 100644
--- a/techniques/failures/F32.html
+++ b/techniques/failures/F32.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Failure of Success Criterion 1.3.2 due to using white space characters to control
-                    spacing within a word</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Failure of Success Criterion 1.3.2 due to using white space characters to control
+                    spacing within a word</title><link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/></head><body><h1>Failure of Success Criterion 1.3.2 due to using white space characters to control
                     spacing within a word</h1><section class="meta"><p class="id">ID: F32</p><p class="technology">Technology: failures</p><p class="type">Type: Failure</p></section><section id="applicability"><h2>When to Use</h2>
       <p>All technologies.</p>
    </section><section id="description"><h2>Description</h2>
@@ -18,16 +18,12 @@ <h3>Failure due to adding white space in the middle of a word</h3>
                                 in a heading. Screen readers may read each letter individually
                                 instead of the word "Welcome."</p>
          
-         <pre xml:space="preserve">
-&lt;h1&gt;W e l c o m e&lt;/h1&gt;
+<pre xml:space="preserve"><code class="language-html">&lt;h1&gt;W e l c o m e&lt;/h1&gt;</code>
 </pre>
          
-            <p>&amp;nbsp; can also be used to add white space, producing similar
-                                failures:</p>
+            <p>&amp;nbsp; can also be used to add white space, producing similar failures:</p>
          
-         <pre xml:space="preserve">
-&lt;h1&gt;H&amp;nbsp;E&amp;nbsp;L&amp;nbsp;L&amp;nbsp;O&lt;/h1&gt;
-</pre>
+<pre xml:space="preserve"><code class="language-html">&lt;h1&gt;H&amp;nbsp;E&amp;nbsp;L&amp;nbsp;L&amp;nbsp;O&lt;/h1&gt;</code></pre>
       </section>
       <section class="example">
          <h3>White space in the middle of a word changing its meaning</h3>
@@ -39,9 +35,7 @@ <h3>White space in the middle of a word changing its meaning</h3>
                                 characters. The characters mean "Tokyo," but screen readers say
                                 "Higashi Kyo".</p>
          
-         <pre xml:space="preserve">
-&lt;h1&gt;東　京&lt;/h1&gt;
-</pre>
+<pre xml:space="preserve"><code class="language-html">&lt;h1&gt;東　京&lt;/h1&gt;</code></pre>
       </section>
       <section class="example">
          <h3>Using line break characters to format vertical text</h3>
@@ -53,21 +47,20 @@ <h3>Using line break characters to format vertical text</h3>
                                 following example, "東京都"(Tokyo-to) will be read "Higashi Kyo
                                 Miyako".</p>
          
-         <pre xml:space="preserve">
-&lt;table&gt;
-&lt;caption&gt;表1.　都道府県別一覧表&lt;/caption&gt;
-&lt;tr&gt;
-&lt;td&gt;&lt;/td&gt;
-&lt;th scope="col"&gt;（見出しセル 1.）&lt;/th&gt;
-&lt;th scope="col"&gt;（見出しセル 2.）&lt;/th&gt;
-&lt;/tr&gt;
-&lt;tr&gt;
-&lt;th scope="row"&gt;東&lt;br /&gt;京&lt;br /&gt;都&lt;/th&gt;
-&lt;td&gt;（データセル 1.）&lt;/td&gt;
-&lt;td&gt;（データセル 2.）&lt;/td&gt;
-&lt;/tr&gt;
-・・・・・・
-&lt;/table&gt;
+<pre xml:space="preserve"><code class="language-html">&lt;table&gt;
+   &lt;caption&gt;表1.　都道府県別一覧表&lt;/caption&gt;
+   &lt;tr&gt;
+     &lt;td&gt;&lt;/td&gt;
+     &lt;th scope="col"&gt;（見出しセル 1.）&lt;/th&gt;
+     &lt;th scope="col"&gt;（見出しセル 2.）&lt;/th&gt;
+   &lt;/tr&gt;
+   &lt;tr&gt;
+     &lt;th scope="row"&gt;東&lt;br /&gt;京&lt;br /&gt;都&lt;/th&gt;
+     &lt;td&gt;（データセル 1.）&lt;/td&gt;
+     &lt;td&gt;（データセル 2.）&lt;/td&gt;
+   &lt;/tr&gt;
+   ...
+&lt;/table&gt;</code>
 </pre>
       </section>
    </section><section id="tests"><h2>Tests</h2>
@@ -81,7 +74,7 @@ <h3>Using line break characters to format vertical text</h3>
       </section>
       <section class="results"><h3>Expected Results</h3>
          <ul>
-            <li>If step #1 is true, then this failure condition applies and the
+            <li>If check #1 is true, then this failure condition applies and the
                                     content fails this Success Criterion.</li>
          </ul>
       </section>
diff --git a/techniques/failures/F33.html b/techniques/failures/F33.html
index 2795e3c19d..ce5ccdd64b 100644
--- a/techniques/failures/F33.html
+++ b/techniques/failures/F33.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Failure of Success Criterion 1.3.1 and 1.3.2 due to using white space characters to
-                    create multiple columns in plain text content</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Failure of Success Criterion 1.3.1 and 1.3.2 due to using white space characters to
+                    create multiple columns in plain text content</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/></head><body><h1>Failure of Success Criterion 1.3.1 and 1.3.2 due to using white space characters to
                     create multiple columns in plain text content</h1><section class="meta"><p class="id">ID: F33</p><p class="technology">Technology: failures</p><p class="type">Type: Failure</p></section><section id="applicability"><h2>When to Use</h2>
       <p>All technologies.</p>
    </section><section id="description"><h2>Description</h2>
@@ -64,7 +64,7 @@
       </section>
       <section class="results"><h3>Expected Results</h3>
          <ul>
-            <li>If step #2 is true, then this failure condition applies and the
+            <li>If check #2 is true, then this failure condition applies and the
                                     content fails these Success Criteria.</li>
          </ul>
       </section>
diff --git a/techniques/failures/F34.html b/techniques/failures/F34.html
index 155d270f48..99c9d327aa 100644
--- a/techniques/failures/F34.html
+++ b/techniques/failures/F34.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Failure of Success Criterion 1.3.1 and 1.3.2 due to using white space characters to
-                    format tables in plain text content</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Failure of Success Criterion 1.3.1 and 1.3.2 due to using white space characters to
+                    format tables in plain text content</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/></head><body><h1>Failure of Success Criterion 1.3.1 and 1.3.2 due to using white space characters to
                     format tables in plain text content</h1><section class="meta"><p class="id">ID: F34</p><p class="technology">Technology: failures</p><p class="type">Type: Failure</p></section><section id="applicability"><h2>When to Use</h2>
       <p>All technologies.</p>
    </section><section id="description"><h2>Description</h2>
@@ -67,7 +67,7 @@
       </section>
       <section class="results"><h3>Expected Results</h3>
          <ul>
-            <li>If step #2 is true, then this failure condition applies and the
+            <li>If check #2 is true, then this failure condition applies and the
                                     content fails these Success Criteria.</li>
          </ul>
       </section>
diff --git a/techniques/failures/F36.html b/techniques/failures/F36.html
index bc599ac77e..32b12fcb6b 100644
--- a/techniques/failures/F36.html
+++ b/techniques/failures/F36.html
@@ -1,9 +1,9 @@
 <!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Failure of Success Criterion 3.2.2 due to automatically submitting a form and
                     presenting new content without prior warning when the last field in the form is
-                    given a value</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Failure of Success Criterion 3.2.2 due to automatically submitting a form and
+                    given a value</title><link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/></head><body><h1>Failure of Success Criterion 3.2.2 due to automatically submitting a form and
                     presenting new content without prior warning when the last field in the form is
                     given a value</h1><section class="meta"><p class="id">ID: F36</p><p class="technology">Technology: failures</p><p class="type">Type: Failure</p></section><section id="applicability"><h2>When to Use</h2>
-      <p>HTML and XHTML</p>
+      <p>HTML</p>
    </section><section id="description"><h2>Description</h2>
       <p>Forms are frequently designed so that they submit automatically when the user
                         has filled in all the fields, or when focus leaves the last field. There are
@@ -26,12 +26,11 @@ <h3></h3>
                                 the form's default behavior of submitting when the user hits enter
                                 in a text field. </p>
          
-         <pre xml:space="preserve"> 
-&lt;form method="get" id="form1"&gt;
-  &lt;input type="text" name="text1" size="3" maxlength="3"&gt; - 
-  &lt;input type="text" name="text2" size="3" maxlength="3"&gt; - 
-  &lt;input type="text" name="text3" size="4" maxlength="4" onchange="form1.submit();"&gt;
-&lt;/form&gt; </pre>
+<pre xml:space="preserve"><code class="language-html">&lt;form method="get" id="form1"&gt;
+   &lt;input type="text" name="text1" size="3" maxlength="3"&gt; - 
+   &lt;input type="text" name="text2" size="3" maxlength="3"&gt; - 
+   &lt;input type="text" name="text3" size="4" maxlength="4" onchange="form1.submit();"&gt;
+ &lt;/form&gt;</code></pre>
       </section>
       <section class="example">
          <h3></h3>
@@ -39,16 +38,15 @@ <h3></h3>
             <p>This is a  example that submits a form when the user
                                 selects an option from the menu when there is no warning of this behavior in advance. The form will submit as soon as an item from the menu is selected. A user using a keyboard will not be able to navigate past the first item in the menu. Blind users and users with hand tremors can easily make a mistake on which item on the dropdown menu to choose and they are taken to the wrong destination before they can correct it.  </p>
          
-         <pre xml:space="preserve"> 
-&lt;form method="get" id="form2"&gt;
- &lt;input type="text" name="text1"&gt;
-  &lt;select name="select1" onchange="form2.submit();"&gt;
-    &lt;option&gt;one&lt;/option&gt;
-    &lt;option&gt;two&lt;/option&gt;
-    &lt;option&gt;three&lt;/option&gt;
-    &lt;option&gt;four&lt;/option&gt;
-  &lt;/select&gt;
-&lt;/form&gt;</pre>
+<pre xml:space="preserve"><code class="language-html">&lt;form method="get" id="form2"&gt;
+   &lt;input type="text" name="text1"&gt;
+    &lt;select name="select1" onchange="form2.submit();"&gt;
+      &lt;option&gt;one&lt;/option&gt;
+      &lt;option&gt;two&lt;/option&gt;
+      &lt;option&gt;three&lt;/option&gt;
+      &lt;option&gt;four&lt;/option&gt;
+    &lt;/select&gt;
+  &lt;/form&gt;</code></pre>
       </section>
    </section><section id="tests"><h2>Tests</h2>
       <section class="procedure"><h3>Procedure</h3>
@@ -61,10 +59,11 @@ <h3></h3>
       </section>
       <section class="results"><h3>Expected Results</h3>
          <ul>
-            <li> If step #3 is true, then this failure condition applies and content
+            <li> If check #3 is true, then this failure condition applies and content
                                     fails the Success Criterion. </li>
          </ul>
       </section>
    </section><section id="resources"><h2>Resources</h2>
       
-   </section></body></html>
\ No newline at end of file
+   </section>
+</body></html>
\ No newline at end of file
diff --git a/techniques/failures/F37.html b/techniques/failures/F37.html
index 9893f7baaa..3fe8f663e2 100644
--- a/techniques/failures/F37.html
+++ b/techniques/failures/F37.html
@@ -1,14 +1,14 @@
 <!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Failure of Success Criterion 3.2.2 due to launching a new window without prior warning
-                    when the selection of a radio button, check box or select list is changed</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Failure of Success Criterion 3.2.2 due to launching a new window without prior warning
+                    when the selection of a radio button, check box or select list is changed</title><link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/></head><body><h1>Failure of Success Criterion 3.2.2 due to launching a new window without prior warning
                     when the selection of a radio button, check box or select list is changed</h1><section class="meta"><p class="id">ID: F37</p><p class="technology">Technology: failures</p><p class="type">Type: Failure</p></section><section id="applicability"><h2>When to Use</h2>
-      <p>HTML and XHTML</p>
+      <p>HTML</p>
    </section><section id="description"><h2>Description</h2>
       <p> This document describes a failure that occurs when changing the selection of a
                         radio button, a check box or an item in a select list causes a new window to
                         open. It is possible to use scripting to create an input
                         element that causes a change of context (submit the form, open a new page, a
                         new window) when the element is selected. Developers can instead use a
-                        submit button (see <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G80">Providing a submit
+                        submit button (see <a href="../general/G80">Providing a submit
                             button to initiate a change of context</a>) or clearly indicate the
                         expected action. </p>
    </section><section id="examples"><h2>Examples</h2>
@@ -19,31 +19,30 @@ <h3></h3>
                                 the form when a radio button is selected instead of using a submit
                                 button. </p>
          
-         <pre xml:space="preserve">  
-&lt;script type="text/JavaScript"&gt; 
-  function goToMirror(theInput) {
-   var mirrorSite = "http://download." + theInput.value + "/"; 
-   window.open(mirrorSite); 
-  }
-&lt;/script&gt;
-  …
-&lt;form name="mirror_form" id="mirror_form" action="" method="get"&gt;
-       &lt;p&gt;Please select a mirror download site:&lt;/p&gt; 
-       &lt;p&gt; 
-       &lt;input type="radio" onclick="goToMirror(this);" name="mirror" 
-       id="mirror_belnet" value="belnet.be" /&gt; 
-       &lt;label for="mirror_belnet"&gt;belnet (&lt;abbr&gt;BE&lt;/abbr&gt;)&lt;/label&gt;&lt;br /&gt; 
-       &lt;input type="radio" onclick="goToMirror(this);" name="mirror" 
-       id="mirror_surfnet" value="surfnet.nl" /&gt; 
-       &lt;label for="mirror_surfnet"&gt;surfnet (&lt;abbr&gt;NL&lt;/abbr&gt;)&lt;/label&gt;&lt;br /&gt; 
-       &lt;input type="radio" onclick="goToMirror(this);" name="mirror" 
-       id="mirror_puzzle" value="puzzle.ch" /&gt; 
-       &lt;label for="mirror_puzzle"&gt;puzzle (&lt;abbr&gt;CH&lt;/abbr&gt;)&lt;/label&gt;&lt;br /&gt; 
-       &lt;input type="radio" onclick="goToMirror(this);" name="mirror" 
-       id="mirror_voxel" value="voxel.com" /&gt; 
-       &lt;label for="mirror_voxel"&gt;voxel (&lt;abbr&gt;US&lt;/abbr&gt;)&lt;/label&gt;&lt;br /&gt; 
-       &lt;/p&gt; 
-&lt;/form&gt;</pre>
+<pre xml:space="preserve"><code class="language-javascript">&lt;script&gt; 
+   function goToMirror(theInput) {
+    var mirrorSite = "https://download." + theInput.value + "/"; 
+    window.open(mirrorSite); 
+   }
+&lt;/script&gt;</code>
+...
+<code class="language-html">&lt;form name="mirror_form" id="mirror_form" action="" method="get"&gt;
+  &lt;p&gt;Please select a mirror download site:&lt;/p&gt; 
+  &lt;p&gt; 
+    &lt;input type="radio" onclick="goToMirror(this);" name="mirror" 
+     id="mirror_belnet" value="belnet.be" /&gt; 
+    &lt;label for="mirror_belnet"&gt;belnet (&lt;abbr&gt;BE&lt;/abbr&gt;)&lt;/label&gt;&lt;br /&gt; 
+    &lt;input type="radio" onclick="goToMirror(this);" name="mirror" 
+     id="mirror_surfnet" value="surfnet.nl" /&gt; 
+    &lt;label for="mirror_surfnet"&gt;surfnet (&lt;abbr&gt;NL&lt;/abbr&gt;)&lt;/label&gt;&lt;br /&gt; 
+    &lt;input type="radio" onclick="goToMirror(this);" name="mirror" 
+     id="mirror_puzzle" value="puzzle.ch" /&gt; 
+    &lt;label for="mirror_puzzle"&gt;puzzle (&lt;abbr&gt;CH&lt;/abbr&gt;)&lt;/label&gt;&lt;br /&gt; 
+    &lt;input type="radio" onclick="goToMirror(this);" name="mirror" 
+     id="mirror_voxel" value="voxel.com" /&gt; 
+    &lt;label for="mirror_voxel"&gt;voxel (&lt;abbr&gt;US&lt;/abbr&gt;)&lt;/label&gt;&lt;br /&gt; 
+  &lt;/p&gt; 
+&lt;/form&gt;</code></pre>
       </section>
    </section><section id="tests"><h2>Tests</h2>
       <section class="procedure"><h3>Procedure</h3>
@@ -57,7 +56,7 @@ <h3></h3>
          </ol>
       </section>
       <section class="results"><h3>Expected Results</h3>
-         <p> If step #3 is false, then this failure condition applies and content
+         <p> If check #3 is false, then this failure condition applies and content
                             fails the Success Criterion.</p>
       </section>
    </section><section id="related"><h2>Related Techniques</h2></section><section id="resources"><h2>Resources</h2></section></body></html>
\ No newline at end of file
diff --git a/techniques/failures/F38.html b/techniques/failures/F38.html
index 44d7784883..be379d952f 100644
--- a/techniques/failures/F38.html
+++ b/techniques/failures/F38.html
@@ -1,28 +1,28 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Failure of Success Criterion 1.1.1 due to not marking up decorative images in HTML in a way that allows assistive technology to ignore them</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Failure of Success Criterion 1.1.1 due to not marking up decorative images in HTML in a way that allows assistive technology to ignore them</h1><section class="meta"><p class="id">ID: F38</p><p class="technology">Technology: failures</p><p class="type">Type: Failure</p></section><section id="applicability"><h2>When to Use</h2>
-      <p>HTML and XHTML</p>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Failure of Success Criterion 1.1.1 due to not marking up decorative images in HTML in a way that allows assistive technology to ignore them</title><link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/></head><body><h1>Failure of Success Criterion 1.1.1 due to not marking up decorative images in HTML in a way that allows assistive technology to ignore them</h1><section class="meta"><p class="id">ID: F38</p><p class="technology">Technology: failures</p><p class="type">Type: Failure</p></section><section id="applicability"><h2>When to Use</h2>
+      <p>HTML</p>
    </section><section id="description"><h2>Description</h2>
       <p> This describes a failure condition for text alternatives for images that
                         should be ignored by AT. If there is no alt attribute at all assistive
                         technologies are not able to ignore the non-text content. The alt attribute
                         must be provided and have a null value (i.e., alt="" ) to avoid a failure of this Success Criterion. </p>
-      <p>This describes a failure condition for text alternatives for images that should be ignored by assistive technology (AT). If an image has the attribute role="presentation", it will be ignored by AT. However, if it does not have role="presentation", and if there is no <code class="att">alt</code> attribute at all assistive technologies are not able to ignore the image. For decorative images which need to be ignored by AT, either role="presentation" must be used or the alt attribute must be provided and have a null value (i.e., alt="") to avoid a failure of this Success Criterion.</p>
+      <p>This describes a failure condition for text alternatives for images that should be ignored by assistive technology (AT). If an image has the attribute role="presentation", it will be ignored by AT. However, if it does not have role="presentation", and if there is no <code class="language-html">alt</code> attribute at all assistive technologies are not able to ignore the image. For decorative images which need to be ignored by AT, either role="presentation" must be used or the alt attribute must be provided and have a null value (i.e., alt="") to avoid a failure of this Success Criterion.</p>
    </section><section id="examples"><h2>Examples</h2>
       <ul>
-         <li>Decorative images that have no <code class="att">alt</code>
-                                attribute and no <code class="att">role</code> attribute
+         <li>Decorative images that have no <code class="language-html">alt</code>
+                                attribute and no <code class="language-html">role</code> attribute
             </li>
       </ul>
    </section><section id="tests"><h2>Tests</h2>
       <section class="procedure"><h3>Procedure</h3>
-         <p>For any <code class="el">img</code> element that is used for purely decorative content:</p>
+         <p>For any <code class="language-html">img</code> element that is used for purely decorative content:</p>
          <ol>
-            <li>Check whether the element has no <code class="att">role</code> attribute or has a <code class="att">role</code> attribute value that is not <code class="attval">presentation</code>.</li>
-            <li>Check whether the element has no <code class="att">alt</code> attribute or has an <code class="att">alt</code> attribute with a value that is not null.</li>
+            <li>Check whether the element has no <code class="language-html">role</code> attribute or has a <code class="language-html">role</code> attribute value that is not <code class="language-html">presentation</code>.</li>
+            <li>Check whether the element has no <code class="language-html">alt</code> attribute or has an <code class="language-html">alt</code> attribute with a value that is not null.</li>
          </ol>
       </section>
       <section class="results"><h3>Expected Results</h3>
          <ul>
-            <li>If step #1 is true and if step #2 is true, this failure condition applies and content fails the Success Criterion.</li>
+            <li>If check #1 and #2 are true, this failure condition applies and content fails the Success Criterion.</li>
          </ul>
       </section>
-   </section><section id="related"><h2>Related Techniques</h2></section><section id="resources"><h2>Resources</h2></section></body></html>
\ No newline at end of file
+   </section><section id="related"><h2>Related Techniques</h2></section><section id="resources"><h2>Resources</h2></section></body></html>
diff --git a/techniques/failures/F39.html b/techniques/failures/F39.html
index 3b203a6ba8..c7d94352ca 100644
--- a/techniques/failures/F39.html
+++ b/techniques/failures/F39.html
@@ -1,5 +1,8 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Failure of Success Criterion 1.1.1 due to providing a text alternative that is not null (e.g., alt="spacer" or alt="image") for images that should be ignored by assistive technology</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Failure of Success Criterion 1.1.1 due to providing a text alternative that is not null (e.g., alt="spacer" or alt="image") for images that should be ignored by assistive technology</h1><section class="meta"><p class="id">ID: F39</p><p class="technology">Technology: failures</p><p class="type">Type: Failure</p></section><section id="applicability"><h2>When to Use</h2>
-      <p> Applies to HTML and XHTML.</p>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Failure of Success Criterion 1.1.1 due to providing a text alternative that is not null (e.g., alt="spacer" or alt="image") for images that should be ignored by assistive technology</title>
+   <link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+
+</head><body><h1>Failure of Success Criterion 1.1.1 due to providing a text alternative that is not null (e.g., alt="spacer" or alt="image") for images that should be ignored by assistive technology</h1><section class="meta"><p class="id">ID: F39</p><p class="technology">Technology: failures</p><p class="type">Type: Failure</p></section><section id="applicability"><h2>When to Use</h2>
+      <p>HTML</p>
    </section><section id="description"><h2>Description</h2>
       <p>This technique describes a failure condition for images that should
             be ignored by assistive technologies. A text alternative for an image
@@ -12,7 +15,7 @@
             of this Success Criterion. </p>
    </section><section id="examples"><h2>Examples</h2>
       <section class="example">
-         <h3>Decorative images that have no <code class="att">alt</code> attribute</h3>
+         <h3>Decorative images that have no <code class="language-html">alt</code> attribute</h3>
          
             <p>An image is used to create a blank space between content, where the
                 spacing itself is not meaningful to the content. The image has an alt
@@ -20,7 +23,10 @@ <h3>Decorative images that have no <code class="att">alt</code> attribute</h3>
                 because the text alternative does not serve an equivalent purpose.
                 The image is meant to be ignored but its alternative text "spacer" is
                 announced by screen readers and displayed in some alternate color schemes. </p>
-            <pre xml:space="preserve">&lt;div&gt;Tree type: &lt;img src="spacer.gif" width="100" height="1" alt="spacer"/&gt;Cedrus deodara&lt;/div&gt;
+<pre xml:space="preserve"><code class="language-html">&lt;div&gt;
+  Tree type: &lt;img src="spacer.gif" width="100" height="1" alt="spacer"&gt;
+  Cedrus deodara
+&lt;/div&gt;</code>
 </pre>
          
       </section>
@@ -35,7 +41,7 @@ <h3>Decorative images that have no <code class="att">alt</code> attribute</h3>
       </section>
       <section class="results"><h3>Expected Results</h3>
          <ul>
-            <li> If step #2 is false, this failure condition applies and the content
+            <li> If check #2 is false, this failure condition applies and the content
               fails the Success Criterion. </li>
          </ul>
       </section>
@@ -43,4 +49,5 @@ <h3>Decorative images that have no <code class="att">alt</code> attribute</h3>
       <li><a href="../html/H37">H37</a></li>
       <li><a href="../css/C9">C9</a></li>
       <li><a href="../failures/F38">F38</a></li>
-   </ul></section><section id="resources"><h2>Resources</h2></section></body></html>
\ No newline at end of file
+   </ul></section><section id="resources"><h2>Resources</h2></section>
+</body></html>
\ No newline at end of file
diff --git a/techniques/failures/F4.html b/techniques/failures/F4.html
index 932ee7f95f..bd9979b812 100644
--- a/techniques/failures/F4.html
+++ b/techniques/failures/F4.html
@@ -1,51 +1,57 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Failure of Success Criterion 2.2.2 due to using text-decoration:blink without a
-                    mechanism to stop it in less than five seconds</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Failure of Success Criterion 2.2.2 due to using text-decoration:blink without a
-                    mechanism to stop it in less than five seconds</h1><section class="meta"><p class="id">ID: F4</p><p class="technology">Technology: failures</p><p class="type">Type: Failure</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+<head>
+   <title>Failure of Success Criterion 2.2.2 due to using text-decoration:blink without a mechanism to stop it in less than five seconds</title>
+   <link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+</head>
+<body>
+   <h1>Failure of Success Criterion 2.2.2 due to using text-decoration:blink without a mechanism to stop it in less than five seconds</h1>
+   <section class="meta">
+      <p class="id">ID: F4</p>
+      <p class="technology">Technology: failures</p>
+      <p class="type">Type: Failure</p>
+   </section>
+   <section id="applicability">
+      <h2>When to Use</h2>
       <p>Cascading Style Sheets.</p>
-   </section><section id="description"><h2>Description</h2>
-      <p>CSS defines the blink value for the text-decoration
-                        property. When used, it causes any text in elements with this property to
-                        blink at a predetermined rate. This cannot be interrupted by the user, nor
-                        can it be disabled as a user agent preference. The blinking continues as
-                        long as the page is displayed. Therefore, content that uses
-                            text-decoration:blink fails the Success Criterion because
-                        blinking can continue for more than three seconds.</p>
-   </section><section id="examples"><h2>Examples</h2>
+   </section>
+   <section id="description">
+      <h2>Description</h2>
+      <p>CSS defines the blink value for the text-decoration property. When used, it causes any text in elements with this property to blink at a predetermined rate. This cannot be interrupted by the user, nor can it be disabled as a user agent preference. The blinking continues as long as the page is displayed. Therefore, content that uses text-decoration:blink fails the Success Criterion because blinking can continue for more than five seconds.</p>
+   </section>
+   <section id="examples">
+      <h2>Examples</h2>
       <section class="example">
-         
-            <p>A product list page uses the text-decoration:blink style
-                                on an element to draw attention to sale prices. This fails the
-                                Success Criterion because users cannot control the blink.</p>
-         
-         <pre xml:space="preserve">
-&lt;p&gt;My Great Product &lt;span style="text-decoration:blink"&gt;Sale! $44,995!&lt;/span&gt;&lt;/p&gt;
-</pre>
+         <p>A product list page uses the text-decoration:blink style on an element to draw attention to sale prices. This fails the Success Criterion because users cannot control the blink.</p>
+<pre xml:space="preserve"><code class="language-html">&lt;p&gt;My Great Product &lt;span style="text-decoration:blink"&gt;Sale! $44,995!&lt;/span&gt;&lt;/p&gt;</code></pre>
       </section>
-   </section><section id="tests"><h2>Tests</h2>
-      <section class="procedure"><h3>Procedure</h3>
-         <ol>
-            <li>Examine inline styles, internal stylesheets, and external
-                                    stylesheets for the text-decoration property with a
-                                    value of "blink".</li>
-            <li>If the property is used, determine if the ID, class, or element
-                                    identified by selectors on which this property is defined are
-                                    used in the document.</li>
+   </section>
+   <section id="tests">
+      <h2>Tests</h2>
+      <section class="procedure">
+         <h3>Procedure</h3>
+            <ol>
+               <li>Examine inline styles, internal stylesheets, and external stylesheets for the text-decoration property with a value of <code>blink</code>.</li>
+               <li>If the property is used, determine if the ID, class, or element identified by selectors on which this property is defined are used in the document.</li>
          </ol>
       </section>
-      <section class="results"><h3>Expected Results</h3>
+      <section class="results">
+         <h3>Expected Results</h3>
          <ul>
-            <li>If step #1 and step #2 are true, the content fails the success
-                                criterion.</li>
+            <li>If checks #1 and #2 are true, the content fails the success criterion.</li>
          </ul>
       </section>
-   </section><section id="related"><h2>Related Techniques</h2><ul>
-      <li><a href="../client-side-script/SCR22">SCR22</a></li>
-   </ul></section><section id="resources"><h2>Resources</h2>
-      
+   </section><section id="related">
+      <h2>Related Techniques</h2>
+      <ul>
+         <li><a href="../client-side-script/SCR22">SCR22</a></li>
+      </ul>
+   </section>
+   <section id="resources">
+      <h2>Resources</h2>
          <ul>
-            <li> 
-                  <a href="https://www.w3.org/TR/CSS2/text.html#propdef-text-decoration">CSS 2 text-decoration property</a> 
-               </li>
+            <li><a href="https://www.w3.org/TR/css-text-decor-3/#text-decoration-property">CSS Text Decoration Module Level 3: text-decoration property</a></li>
          </ul>
-      
-   </section></body></html>
\ No newline at end of file
+   </section>
+</body>
+</html>
\ No newline at end of file
diff --git a/techniques/failures/F40.html b/techniques/failures/F40.html
index a5a3f87fc8..c73100bb25 100644
--- a/techniques/failures/F40.html
+++ b/techniques/failures/F40.html
@@ -1,49 +1,43 @@
 <!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Failure due to using meta redirect with a time limit
-        </title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Failure due to using meta redirect with a time limit
+        </title><link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/></head><body><h1>Failure due to using meta redirect with a time limit
         </h1><section class="meta"><p class="id">ID: F40</p><p class="technology">Technology: failures</p><p class="type">Type: Failure</p></section><section id="applicability"><h2>When to Use</h2>
       <p> All pages</p>
    </section><section id="description"><h2>Description</h2>
-      <p> 
-         meta
-						   http-equiv of {time-out}; url=... is often used to
+      <p><code class="language-html">meta http-equiv content="{time} url=..."</code> is often used to
                         automatically redirect users. When this occurs after a time delay, it is an
                         unexpected change of context that may interrupt the user.</p>
       <p>It is acceptable to use the meta element to create a redirect
                         when the time-out is set to zero, since the redirect is instant and will not
                         be perceived as a change of context. However, it is preferable to use
-                        server-side methods to accomplish this. See <a href="https://www.w3.org/WAI/WCAG21/Techniques/server-side-script/SVR1">Implementing automatic redirects on the server side
+                        server-side methods to accomplish this. See <a href="../server-side-script/SVR1">Implementing automatic redirects on the server side
                             instead of on the client side</a>.</p>
    </section><section id="examples"><h2>Examples</h2>
       <section class="example">
          
-            <p> The page below is a failure because it will redirect to the URI
-                                http://www.example.com/newpage after a time limit of 5 seconds.</p>
+            <p> The page below is a failure because it will redirect to the <abbr title="Uniform Resource Identifier">URI</abbr> https://www.example.com/newpage after a time limit of 5 seconds.</p>
          
-         <pre xml:space="preserve">
-&lt;html xmlns="http://www.w3.org/1999/xhtml" lang="en"&gt;
-   &lt;head&gt;     
-      &lt;title&gt;Do not use this!&lt;/title&gt;     
-      &lt;meta http-equiv="refresh"
-      content="5; url=http://www.example.com/newpage" /&gt;   
-   &lt;/head&gt;   
-   &lt;body&gt;     
-      &lt;p&gt;       
-         If your browser supports Refresh, you'll be       
-         transported to our        
-         &lt;a href="http://www.example.com/newpage"&gt;new site&lt;/a&gt;        
-         in 5 seconds, otherwise, select the link manually.     
-      &lt;/p&gt;   
-   &lt;/body&gt; 
-&lt;/html&gt;
-</pre>
+<pre xml:space="preserve"><code class="language-html">&lt;!doctype&gt;
+&lt;html lang="en"&gt;
+&lt;head&gt;
+  &lt;title&gt;Do not use this!&lt;/title&gt;     
+  &lt;meta http-equiv="refresh" content="5; url=https://www.example.com/newpage"&gt;
+&lt;/head&gt;   
+&lt;body&gt;     
+  &lt;p&gt;
+    If your browser supports Refresh, you'll be transported to our
+    &lt;a href="https://www.example.com/newpage"&gt;new site&lt;/a&gt; in 5 seconds,
+    otherwise select the link manually.     
+  &lt;/p&gt;   
+&lt;/body&gt; 
+&lt;/html&gt;</code></pre>
       </section>
    </section><section id="tests"><h2>Tests</h2>
       <section class="procedure"><h3>Procedure</h3>
-        <p>For a page that uses <code>meta http-equiv="refresh"</code>:</p> 
+        <p>For a page that uses <code class="language-html">meta http-equiv="refresh"</code>:</p> 
         <ol>
           <li>Check that the numerical value for seconds until refresh in the <att>content</att> attribute is present.</li>
           <li>Check that the numerical value for seconds until refresh in the <att>content</att> attribute is less than one or greater than 72,000.</li>
-          <li>Check if the page qualifies for Real-time or Essential Exceptions in <a href="https://www.w3.org/TR/WCAG21/#timing-adjustable">Success Criterion 2.2.1 Timing Adjustable</a>.</li>
+          <li>Check if the page qualifies for Real-time or Essential Exceptions in <a href="/TR/WCAG/#timing-adjustable">Success Criterion 2.2.1 Timing Adjustable</a>.</li>
           <li>Check if the user is provided an opportunity to turn off, extend, or adjust the timing of the page refresh.</li>
             <li>Check if the page does not redirect after the duration specified in the <att>content</att> attribute.</li>
         </ol>
@@ -62,8 +56,9 @@
       
          <ul>
             <li> 
-                  <a href="https://www.w3.org/TR/html401/struct/global.html#h-7.4.4">HTML 4.01 META element</a> 
-               </li>
+              <a href="https://html.spec.whatwg.org/multipage/semantics.html#the-meta-element">HTML - the <code class="language-html">meta</code> element</a>
+            </li>
          </ul>
-      
-   </section></body></html>
+   </section>
+</body>
+</html>
diff --git a/techniques/failures/F41.html b/techniques/failures/F41.html
index 95561eb64b..4f8445997f 100644
--- a/techniques/failures/F41.html
+++ b/techniques/failures/F41.html
@@ -1,47 +1,35 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Failure of Success Criterion 2.2.1, 2.2.4, and 3.2.5 due to using meta refresh to reload the page</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Failure of Success Criterion 2.2.1, 2.2.4, and 3.2.5 due to using meta refresh to reload the page</h1><section class="meta"><p class="id">ID: F41</p><p class="technology">Technology: failures</p><p class="type">Type: Failure</p></section><section id="applicability"><h2>When to Use</h2>
-      <p>HTML and XHTML</p>
-   </section><section id="description"><h2>Description</h2>
-      <p> 
-         meta
-						   http-equiv of refresh is often used to periodically refresh
-                        pages or to redirect users to another page. If the time interval is too
-                        short, and there is no way to turn auto-refresh off, people who are blind will not have enough time to make their screen
-                        readers read the page before the page refreshes unexpectedly and causes the
-                        screen reader to begin reading at the top. Sighted users may also be
-                        disoriented by the unexpected refresh.</p>
-   </section><section id="examples"><h2>Examples</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Failure of Success Criterion 2.2.1, 2.2.4, and 3.2.5 due to using meta refresh to reload the page</title><link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/></head><body><h1>Failure of Success Criterion 2.2.1, 2.2.4, and 3.2.5 due to using meta refresh to reload the page</h1><section class="meta"><p class="id">ID: F41</p><p class="technology">Technology: failures</p><p class="type">Type: Failure</p></section><section id="applicability"><h2>When to Use</h2>
+   <p>HTML</p>
+   </section>
+   <section id="description">
+      <h2>Description</h2>
+      <p><code class="language-html">meta http-equiv</code> of <code class="language-html">refresh</code> is often used to periodically refresh pages or to redirect users to another page. If the time interval is too short, and there is no way to turn auto-refresh off, people who are blind will not have enough time to make their screen readers read the page before the page refreshes unexpectedly and causes the screen reader to begin reading at the top. Sighted users may also be disoriented by the unexpected refresh.</p>
+   </section>
+   <section id="examples">
+      <h2>Examples</h2>
       <section class="example">
+         <p>This is a deprecated example that changes the user's page at regular intervals. Content developers should not use this technique to simulate "push" technology. Developers cannot predict how much time a user will require to read a page; premature refresh can disorient users. Content developers should avoid periodic refresh and allow users to choose when they want the latest information. (The number in the content attribute is the refresh interval in seconds.)</p>
          
-            <p> This is a deprecated example that changes the user's page at regular
-                                intervals. Content developers should not use this technique to
-                                simulate "push" technology. Developers cannot predict how much time
-                                a user will require to read a page; premature refresh can disorient
-                                users. Content developers should avoid periodic refresh and allow
-                                users to choose when they want the latest information. (The number
-                                in the content attribute is the refresh interval in
-                                seconds.)</p>
-         
-         <pre xml:space="preserve">
-&lt;html xmlns="http://www.w3.org/1999/xhtml" lang="en"&gt;
-  &lt;head&gt;     
-    &lt;title&gt;HTML Techniques for WCAG 2.0&lt;/title&gt;     
-    &lt;meta http-equiv="refresh" content="60" /&gt;   
-  &lt;/head&gt;   
-  &lt;body&gt;
-    ...     
-  &lt;/body&gt; 
-&lt;/html&gt;
-</pre>
+<pre xml:space="preserve"><code class="language-html">&lt;!doctype&gt;
+&lt;html lang="en"&gt;
+&lt;head&gt;     
+  &lt;title&gt;HTML Techniques for WCAG 2&lt;/title&gt;     
+  &lt;meta http-equiv="refresh" content="60" /&gt;   
+&lt;/head&gt;
+&lt;body&gt;
+  ...     
+&lt;/body&gt; 
+&lt;/html&gt;</code></pre>
       </section>
    </section><section id="tests"><h2>Tests</h2>
       <section class="procedure"><h3>Procedure</h3>
-        <p>For a page that uses <code>meta http-equiv="refresh"</code>:</p> 
+        <p>For a page that uses <code class="language-html">meta http-equiv="refresh"</code>:</p> 
         <ol>
-          <li>Check that the numerical value for seconds until refresh in the <att>content</att> attribute is present.</li>
-          <li>Check that the numerical value for seconds until refresh in the <att>content</att> attribute is less than one or greater than 72,000.</li>
-          <li>Check if the page qualifies for Real-time or Essential Exceptions in <a href="https://www.w3.org/TR/WCAG21/#timing-adjustable">Success Criterion 2.2.1 Timing Adjustable</a>.</li>
+          <li>Check that the numerical value for seconds until refresh in the <code class="language-html">content</code> attribute is present.</li>
+          <li>Check that the numerical value for seconds until refresh in the <code class="language-html">content</code> attribute is less than one or greater than 72,000.</li>
+          <li>Check if the page qualifies for Real-time or Essential Exceptions in <a href="../../Understanding/timing-adjustable">Success Criterion 2.2.1 Timing Adjustable</a>.</li>
           <li>Check if the user is provided an opportunity to turn off, extend, or adjust the timing of the page refresh.</li>
-            <li>Check if the page does not refresh after the duration specified in the <att>content</att> attribute.</li>
+            <li>Check if the page does not refresh after the duration specified in the <code class="language-html">content</code> attribute.</li>
         </ol>
       </section>
       <section class="results"><h3>Expected Results</h3>
@@ -51,4 +39,5 @@
             <li>If checks #1 and #4 are false then this failure condition applies and content fails Success Criterion 3.2.5.</li>
          </ul>
       </section>
-   </section><section id="related"><h2>Related Techniques</h2></section></body></html>
+   </section><section id="related"><h2>Related Techniques</h2></section>
+</body></html>
diff --git a/techniques/failures/F42.html b/techniques/failures/F42.html
index e24a82a2d6..001e1962f5 100644
--- a/techniques/failures/F42.html
+++ b/techniques/failures/F42.html
@@ -1,5 +1,5 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Failure of Success Criteria 1.3.1, 2.1.1, 2.1.3, or 4.1.2 when emulating links</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Failure of Success Criteria 1.3.1, 2.1.1, 2.1.3, or 4.1.2 when emulating links</h1><section class="meta"><p class="id">ID: F42</p><p class="technology">Technology: failures</p><p class="type">Type: Failure</p></section><section id="applicability"><h2>When to Use</h2>
-      <p>HTML and XHTML</p>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Failure of Success Criteria 1.3.1, 2.1.1, 2.1.3, or 4.1.2 when emulating links</title><link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/></head><body><h1>Failure of Success Criteria 1.3.1, 2.1.1, 2.1.3, or 4.1.2 when emulating links</h1><section class="meta"><p class="id">ID: F42</p><p class="technology">Technology: failures</p><p class="type">Type: Failure</p></section><section id="applicability"><h2>When to Use</h2>
+      <p>HTML</p>
    </section><section id="description"><h2>Description</h2>
       <p>This failure occurs when JavaScript event handlers are attached to elements
                         to emulate links. A link created in this manner cannot be tabbed to from the keyboard and does not gain keyboard focus like other controls and/or links.
@@ -7,129 +7,105 @@
                         agents including assistive technology may not be able to identify the links
                         in the content as links. They may be recognized as interactive controls but still not recognized as links.  Such elements do not appear in the links
                         list generated by user agents or assistive technology.</p>
-                        <p><div class="note">It is possible to use the ARIA <code class="att">role</code> attribute to identify an anonymous element as link control for assistive technologies. However, best practice for ARIA calls for <a href="https://www.w3.org/TR/aria-in-html/#first-rule-of-aria-use">making use of native elements whenever possible</a>, so the use of the <code class="att">role</code> attribute to identify anonymous elements as links is not recommended.</div></p>
-      <p>The <code class="el">a</code> and <code class="el">area</code>
+                        <p><div class="note">It is possible to use the ARIA <code class="language-html">role</code> attribute to identify an anonymous element as link control for assistive technologies. However, best practice for ARIA calls for <a href="https://www.w3.org/TR/aria-in-html/#rule1">making use of native elements whenever possible</a>, so the use of the <code class="language-html">role</code> attribute to identify anonymous elements as links is not recommended.</div></p>
+      <p>The <code class="language-html">a</code> and <code class="language-html">area</code>
                         elements are intended to mark up links.</p>
    </section><section id="examples"><h2>Examples</h2>
       <section class="example">
-         <h3>Scripting a <code class="el">span</code> element</h3>
+         <h3>Scripting a <code class="language-html">span</code> element</h3>
          
-            <p>Scripted event handling is added to a <code class="el">span</code> element so
+            <p>Scripted event handling is added to a <code class="language-html">span</code> element so
                                 that it functions as a link when clicked with a mouse. Assistive
                                 technology does not recognize this element as a link.</p>
          
-         <pre xml:space="preserve">
-&lt;span onclick="location.href='newpage.html'"&gt;
-    Fake link
-&lt;/span&gt;
-</pre>
+<pre xml:space="preserve"><code class="language-html">&lt;span onclick="location.href='newpage.html'"&gt;Fake link&lt;/span&gt;</code></pre>
       </section>
       <section class="example">
-         <h3>Scripting an <code class="el">img</code> element</h3>
+         <h3>Scripting an <code class="language-html">img</code> element</h3>
          
-            <p>Scripted event handling is added to an <code class="el">img</code> element so
+            <p>Scripted event handling is added to an <code class="language-html">img</code> element so
                                 that it functions as a link when clicked with a mouse. Assistive
                                 technology does not recognize this element as a link.</p>
          
-         <pre xml:space="preserve">
-   &lt;img src="go.gif" 
-   alt="go to the new page" 
-   onclick="location.href='newpage.html'"&gt;
+<pre xml:space="preserve"><code class="language-html">&lt;img src="go.gif" alt="go to the new page" onclick="location.href='newpage.html'"&gt;</code>
 </pre>
       </section>
       <section class="example">
-         <h3>Scripting an <code class="el">img</code> element, with keyboard
+         <h3>Scripting an <code class="language-html">img</code> element, with keyboard
                             support</h3>
          
-            <p>Scripted event handling is added to an <code class="el">img</code> element so
+            <p>Scripted event handling is added to an <code class="language-html">img</code> element so
                                 that it functions as a link. In this example, the link functionality
                                 can be invoked with the mouse or via the Enter key if the user agent
                                 includes the element in the tab chain. Nevertheless, the element
                                 will not be recognized as a link.</p>
          
-         <pre xml:space="preserve">
-function doNav(url)
-{
-   window.location.href = url;
-}
-
-function doKeyPress(url)
-{
-   //if the enter key was pressed
-   if (window.event.type == "keypress" &amp;&amp;
-       window.event.keyCode == 13)
-   {
-      doNav(url);
-   }
+<pre xml:space="preserve"><code class="language-javascript">function doNav(url){
+  window.location.href = url;
 }
-</pre>
+   
+function doKeyPress(url){
+  //if the enter key was pressed
+  if (window.event.type == "keypress" &amp;&amp; window.event.keyCode == 13){
+    doNav(url);
+  }
+}</code></pre>
          
             <p>The markup for the image is:</p>
          
-         <pre xml:space="preserve">
-&lt;p&gt;
-	&lt;img src="bargain.jpg"
-		tabindex="0" 
-		alt="View Bargains"
-		onclick="doNav('viewbargains.html');"
-		onkeypress="doKeyPress('viewbargains.html');"&gt;
-&lt;/p&gt;
-</pre>
+<pre xml:space="preserve"><code class="language-html">&lt;p&gt;
+  &lt;img src="bargain.jpg"
+  tabindex="0" 
+  alt="View Bargains"
+  onclick="doNav('viewbargains.html');"
+  onkeypress="doKeyPress('viewbargains.html');"&gt;
+&lt;/p&gt;</code></pre>
       </section>
       <section class="example">
-         <h3>Scripting a <code class="el">div</code> element</h3>
+         <h3>Scripting a <code class="language-html">div</code> element</h3>
          
-            <p>This example uses script to make a <code class="el">div</code> element behave
+            <p>This example uses script to make a <code class="language-html">div</code> element behave
                                 like a link. Although the author has provided complete keyboard
                                 access and separated the event handlers from the markup to enable
-                                repurposing of the content, the <code class="el">div</code> element will not be
+                                repurposing of the content, the <code class="language-html">div</code> element will not be
                                 recognized as a link by assistive technology.</p>
          
-         <pre xml:space="preserve">
-window.onload = init;
-
-function init()
-{
-	var objAnchor = document.getElementById('linklike');
-
-	objAnchor.onclick = function(event){return changeLocation(event,
-'surveyresults.html');};
-	objAnchor.onkeypress = function(event){return changeLocation(event,
-'surveyresults.html');};
-}
-
-function changeLocation(objEvent, strLocation)
-{
-	var iKeyCode;
-
-	if (objEvent &amp;&amp; objEvent.type == 'keypress')
-	{
-		if (objEvent.keyCode)
-			iKeyCode = objEvent.keyCode;
-		else if (objEvent.which)
-			iKeyCode = objEvent.which;
-
-		if (iKeyCode != 13 &amp;&amp; iKeyCode != 32)
-			return true;
-	}
-
-	window.location.href = strLocation;
+<pre xml:space="preserve"><code class="language-javascript">window.onload = init;
+function init(){
+  var objAnchor = document.getElementById('linklike');
+  
+  objAnchor.onclick = function(event){return changeLocation(event,
+   'surveyresults.html');};
+      objAnchor.onkeypress = function(event){return changeLocation(event,
+   'surveyresults.html');};
 }
-</pre>
+   
+function changeLocation(objEvent, strLocation){
+  var iKeyCode;
+   
+  if (objEvent &amp;&amp; objEvent.type == 'keypress'){
+    if (objEvent.keyCode){
+      iKeyCode = objEvent.keyCode;
+    }
+    else if (objEvent.which){
+      iKeyCode = objEvent.which;
+    }
+  if (iKeyCode != 13 &amp;&amp; iKeyCode != 32){
+    return true;
+    }
+  }
+  window.location.href = strLocation;
+}</code></pre>
          
-            <p>The markup for the <code class="el">div</code> element is:</p>
+            <p>The markup for the <code class="language-html">div</code> element is:</p>
          
-         <pre xml:space="preserve">
-&lt;div id="linklike"&gt;
-View the results of the survey.
-&lt;/div&gt;
-</pre>
+<pre xml:space="preserve"><code class="language-html">&lt;div id="linklike"&gt;View the results of the survey.&lt;/div&gt;</code></pre>
       </section>
    </section><section id="tests"><h2>Tests</h2>
       <section class="procedure"><h3>Procedure</h3>
 		<p>For all elements presented as links which use JavaScript event handlers to make the element emulate a link:</p>
          <ol>
-            <li>Check if the programmatically determined role of the element is <code class="prop">link</code>.</li>
+            <li>Check if the programmatically determined role of the element is "link".</li>
             <li>Check if the emulated link can be activated using the keyboard.</li>
          </ol>
       </section>
@@ -140,14 +116,15 @@ <h3>Scripting a <code class="el">div</code> element</h3>
          </ul>
       </section>
    </section><section id="related"><h2>Related Techniques</h2><ul>
-      <li><a href="../general/G115">G115</a></li>
       <li><a href="../failures/F59">F59</a></li>
+      <li><a href="../general/G115">G115</a></li>
    </ul></section><section id="resources"><h2>Resources</h2>
       
          <ul>
             <li>
-                  <a href="https://www.w3.org/TR/wai-aria/">Accessible Rich Internet Applications (WAI-ARIA) Version 1.0</a>
+                  <a href="https://www.w3.org/TR/wai-aria/">Accessible Rich Internet Applications (WAI-ARIA)</a>
                </li>
          </ul>
       
-   </section></body></html>
\ No newline at end of file
+   </section>
+</body></html>
\ No newline at end of file
diff --git a/techniques/failures/F43.html b/techniques/failures/F43.html
index 2d6e91d915..ecf7892f17 100644
--- a/techniques/failures/F43.html
+++ b/techniques/failures/F43.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Failure of Success Criterion 1.3.1 due to using structural markup in a way that does
-                    not represent relationships in the content</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Failure of Success Criterion 1.3.1 due to using structural markup in a way that does
+                    not represent relationships in the content</title><link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/></head><body><h1>Failure of Success Criterion 1.3.1 due to using structural markup in a way that does
                     not represent relationships in the content</h1><section class="meta"><p class="id">ID: F43</p><p class="technology">Technology: failures</p><p class="type">Type: Failure</p></section><section id="applicability"><h2>When to Use</h2>
-      <p>HTML and XHTML</p>
+      <p>HTML</p>
    </section><section id="description"><h2>Description</h2>
       <p>The objective of this technique is to describe a failure that occurs when
                         structural markup is used to achieve a presentational effect, but indicates
@@ -13,7 +13,7 @@
                             &lt;th&gt; or &lt;caption&gt;
                         elements.</p>
       <div class="note">
-         <p>Though an element's semantic meaning is generally exposed to AT, the WAI-ARIA presentation role can be used to suppress the native semantics of an element so that they are not mapped to the accessibility API. Setting an element's <code class="att">role</code> to presentation may avoid this failure by hiding that element's semantics from the user.</p>
+         <p>Though an element's semantic meaning is generally exposed to AT, the WAI-ARIA presentation role can be used to suppress the native semantics of an element so that they are not mapped to the accessibility API. Setting an element's <code class="language-html">role</code> to presentation may avoid this failure by hiding that element's semantics from the user.</p>
       </div>
    </section><section id="examples"><h2>Examples</h2>
       <section class="example">
@@ -23,12 +23,9 @@ <h3>A heading used only for visual effect</h3>
                                 large, bold font. The address does not identify a new section of the
                                 document, however, so it should not be marked as a heading.</p>
          
-         <pre xml:space="preserve">
-&lt;p&gt;Interested in learning more? Write to us at&lt;/p&gt; 
+<pre xml:space="preserve"><code class="language-html">&lt;p&gt;Interested in learning more? Write to us at&lt;/p&gt; 
 &lt;h4&gt;3333 Third Avenue, Suite 300 · New York City&lt;/h4&gt;
-
-&lt;p&gt;And we'll send you the complete informational packet absolutely Free!&lt;/p&gt;
-</pre>
+&lt;p&gt;And we'll send you the complete informational packet absolutely Free!&lt;/p&gt;</code></pre>
       </section>
       <section class="example">
          <h3>Using heading elements for presentational effect</h3>
@@ -42,45 +39,38 @@ <h3>Using heading elements for presentational effect</h3>
                                 effect — to control the fonts used to display the authors' names and
                                 the date.</p>
          
-         <pre xml:space="preserve">
-&lt;h1&gt;Study on the Use of Heading  Elements in Web Pages&lt;/h1&gt;
+<pre xml:space="preserve"><code class="language-html">&lt;h1&gt;Study on the Use of Heading Elements in Web Pages&lt;/h1&gt;
 &lt;h3&gt;Joe Jones and Mary Smith&lt;h3&gt;
 &lt;h4&gt;March 14, 2006&lt;/h4&gt;
 &lt;h2&gt;Abstract&lt;/h2&gt;
-&lt;p&gt;A study was conducted in early 2006 ...
-&lt;/p&gt;
-</pre>
+&lt;p&gt;A study was conducted in early 2006 ...&lt;/p&gt;</code></pre>
       </section>
       <section class="example">
-         <h3>Using <code class="el">blockquote</code> elements to provide additional
+         <h3>Using <code class="language-html">blockquote</code> elements to provide additional
                             indentation</h3>
          
             <p>The following example uses blockquote for text that is
                                 not a quotation to give it prominence by indenting it when displayed
                                 in graphical browsers.</p>
          
-         <pre xml:space="preserve">
-&lt;p&gt;After extensive study of the company Web site, the task force 
-identified the following common problem.&lt;/p&gt;
-
+<pre xml:space="preserve"><code class="language-html">&lt;p&gt;After extensive study of the company Web site, the task force identified 
+   the following common problem.&lt;/p&gt;
+   
 &lt;blockquote&gt;
-&lt;p&gt;The use of markup for presentational effects made Web 
-pages confusing to screen reader users.&lt;/p&gt;
+  &lt;p&gt;The use of markup for presentational effects made Web 
+   pages confusing to screen reader users.&lt;/p&gt;
 &lt;/blockquote&gt;
-
+   
 &lt;p&gt;The committee lists particular examples of the problems 
-introduced by this practice below.&lt;/p&gt;
-</pre>
+  introduced by this practice below.&lt;/p&gt;</code></pre>
       </section>
       <section class="example">
          <h3>Using the fieldset and legend elements to
                             give a border to text</h3>
-         <pre xml:space="preserve">
-&lt;fieldset&gt;
-&lt;legend&gt;Bargain Corner&lt;/legend&gt;
-&lt;p&gt;Buy today, and save 20%&lt;/p&gt;
-&lt;/fieldset&gt;
-</pre>
+<pre xml:space="preserve"><code class="language-html">&lt;fieldset&gt;
+  &lt;legend&gt;Bargain Corner&lt;/legend&gt;
+  &lt;p&gt;Buy today, and save 20%&lt;/p&gt;
+&lt;/fieldset&gt;</code></pre>
       </section>
    </section><section id="tests"><h2>Tests</h2>
       <section class="procedure"><h3>Procedure</h3>
@@ -98,5 +88,5 @@ <h3>Using the fieldset and legend elements to
       <li><a href="../general/G115">G115</a></li>
       <li><a href="../html/H39">H39</a></li>
       <li><a href="../html/H42">H42</a></li>
-      <li><a href="../html/H73">H73</a></li>
-   </ul></section><section id="resources"><h2>Resources</h2></section></body></html>
\ No newline at end of file
+   </ul></section><section id="resources"><h2>Resources</h2></section>
+</body></html>
\ No newline at end of file
diff --git a/techniques/failures/F44.html b/techniques/failures/F44.html
index 4eac0a788f..10f4fa21bd 100644
--- a/techniques/failures/F44.html
+++ b/techniques/failures/F44.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Failure of Success Criterion 2.4.3 due to using tabindex to create a tab order that
-        	does not preserve meaning and operability</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Failure of Success Criterion 2.4.3 due to using tabindex to create a tab order that
+        	does not preserve meaning and operability</title><link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/></head><body><h1>Failure of Success Criterion 2.4.3 due to using tabindex to create a tab order that
         	does not preserve meaning and operability</h1><section class="meta"><p class="id">ID: F44</p><p class="technology">Technology: failures</p><p class="type">Type: Failure</p></section><section id="applicability"><h2>When to Use</h2>
-      <p>HTML and XHTML</p>
+      <p>HTML</p>
    </section><section id="description"><h2>Description</h2>
       <p>This document describes a failure that occurs when the tab order does not
                         follow logical relationships and sequences in the content.</p>
@@ -22,14 +22,12 @@
             <p>The following example incorrectly uses tabindex to specify an
                                 alternative tab order:</p>
          
-         <pre xml:space="preserve">
-&lt;ol&gt;
-   &lt;li&gt;&lt;a href="main.html" tabindex="1"&gt;Homepage&lt;/a&gt;&lt;/li&gt;
-   &lt;li&gt;&lt;a href="chapter1.html" tabindex="4"&gt;Chapter 1&lt;/a&gt;&lt;/li&gt;
-   &lt;li&gt;&lt;a href="chapter2.html" tabindex="3"&gt;Chapter 2&lt;/a&gt;&lt;/li&gt;
-   &lt;li&gt;&lt;a href="chapter3.html" tabindex="2"&gt;Chapter 3&lt;/a&gt;&lt;/li&gt;
-&lt;/ol&gt;
-</pre>
+<pre xml:space="preserve"><code class="language-html">&lt;ol&gt;
+  &lt;li&gt;&lt;a href="main.html" tabindex="1"&gt;Homepage&lt;/a&gt;&lt;/li&gt;
+  &lt;li&gt;&lt;a href="chapter1.html" tabindex="4"&gt;Chapter 1&lt;/a&gt;&lt;/li&gt;
+  &lt;li&gt;&lt;a href="chapter2.html" tabindex="3"&gt;Chapter 2&lt;/a&gt;&lt;/li&gt;
+  &lt;li&gt;&lt;a href="chapter3.html" tabindex="2"&gt;Chapter 3&lt;/a&gt;&lt;/li&gt;
+&lt;/ol&gt;</code></pre>
          
             <p>If this list is navigated by the tab key, the list is navigated in
                                 the order Homepage, chapter 3, chapter 2, chapter 1, which does not
@@ -61,12 +59,12 @@
          </ul>
       </section>
    </section><section id="related"><h2>Related Techniques</h2><ul>
-      <li><a href="../html/H4">H4</a></li>
    </ul></section><section id="resources"><h2>Resources</h2>
       
          <ul>
-            <li>HTML 4.01 <a href="https://www.w3.org/TR/html4/interact/forms.html#adef-tabindex">Tabbing navigation</a> 
-               </li>
+            <li>
+              <a href="https://html.spec.whatwg.org/multipage/interaction.html#the-tabindex-attribute">HTML - the <code class="language-html">tabindex</code> attribute</a>
+            </li>
          </ul>
-      
-   </section></body></html>
\ No newline at end of file
+   </section>
+</body></html>
\ No newline at end of file
diff --git a/techniques/failures/F46.html b/techniques/failures/F46.html
index 127913169a..84515bf18b 100644
--- a/techniques/failures/F46.html
+++ b/techniques/failures/F46.html
@@ -1,24 +1,24 @@
 <!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Failure of Success Criterion 1.3.1 due to using th elements,
                     caption elements, or non-empty summary attributes in
-                    layout tables</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Failure of Success Criterion 1.3.1 due to using th elements,
+                    layout tables</title><link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/></head><body><h1>Failure of Success Criterion 1.3.1 due to using th elements,
                     caption elements, or non-empty summary attributes in
                     layout tables</h1><section class="meta"><p class="id">ID: F46</p><p class="technology">Technology: failures</p><p class="type">Type: Failure</p></section><section id="applicability"><h2>When to Use</h2>
-      <p>HTML and XHTML</p>
+      <p>HTML</p>
    </section><section id="description"><h2>Description</h2>
       <p>The objective of this technique is to describe a failure that occurs when a
                         table used only for layout includes either th elements, a
                             summary attribute, or a caption element. This
                         is a failure because it uses structural (or semantic) markup only for
-                        presentation. The intent of the HTML and XHTML table elements is to present data. </p>
+                        presentation. The intent of the HTML table elements is to present data. </p>
       <p>Although not commonly used in a layout table, the following structural markup would also be failures of Success Criterion 1.3.1 if used in a layout table: </p>
       <ul>
          <li> 
-               <code class="att">headers</code> attributes </li>
+               <code class="language-html">headers</code> attributes </li>
          <li> 
-               <code class="att">scope</code> attributes 
+               <code class="language-html">scope</code> attributes 
               </li>
       </ul>
-      <p>Assistive technologies use the structure of an HTML or XHTML table to present data to
+      <p>Assistive technologies use the structure of an HTML table to present data to
                         the user in a logical manner. The th element is used to mark
                         the column and row headers of the table. A screen reader uses the
                         information in th elements to speak the header information that
@@ -47,24 +47,21 @@
                                 three column format. The navigation bar is in the left column, the
                                 main content in the middle column, and an additional sidebar is on
                                 the right. At the top is a page title. The example marks the page
-                                title as &lt;th&gt;, and provides a summary
-                                attribute indicating that the table is a layout table.</p>
+                                title as &lt;th&gt;.</p>
          
-         <pre xml:space="preserve">
- &lt;table summary="layout table"&gt;
- &lt;tr&gt;
-   &lt;th colspan=3&gt;Page Title&lt;/th&gt;
- &lt;/tr&gt;
- &lt;tr&gt;
-   &lt;td&gt;&lt;div&gt;navigation content&lt;/div&gt;&lt;/td&gt;
-   &lt;td&gt;&lt;div&gt;main content&lt;/div&gt;&lt;/td&gt;
-   &lt;td&gt;&lt;div&gt;right sidebar content&lt;/div&gt;&lt;/td&gt;
- &lt;/tr&gt;
- &lt;tr&gt;
-   &lt;td colspan=3&gt;footer&lt;/td&gt;
- &lt;/tr&gt;
- &lt;/table&gt;
-</pre>
+<pre xml:space="preserve"><code class="language-html">&lt;table&gt;
+  &lt;tr&gt;
+    &lt;th colspan=3&gt;Page Title&lt;/th&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;&lt;div&gt;navigation content&lt;/div&gt;&lt;/td&gt;
+    &lt;td&gt;&lt;div&gt;main content&lt;/div&gt;&lt;/td&gt;
+    &lt;td&gt;&lt;div&gt;right sidebar content&lt;/div&gt;&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td colspan=3&gt;footer&lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/table&gt;</code></pre>
       </section>
    </section><section id="tests"><h2>Tests</h2>
       <section class="procedure"><h3>Procedure</h3>
@@ -94,5 +91,5 @@
    </section><section id="related"><h2>Related Techniques</h2><ul>
       <li><a href="../html/H39">H39</a></li>
       <li><a href="../html/H51">H51</a></li>
-      <li><a href="../html/H73">H73</a></li>
-   </ul></section><section id="resources"><h2>Resources</h2></section></body></html>
\ No newline at end of file
+   </ul></section><section id="resources"><h2>Resources</h2></section>
+</body></html>
\ No newline at end of file
diff --git a/techniques/failures/F47.html b/techniques/failures/F47.html
index f61c47f583..f65fd7e5a6 100644
--- a/techniques/failures/F47.html
+++ b/techniques/failures/F47.html
@@ -1,23 +1,13 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Failure of Success Criterion 2.2.2 due to using the blink element</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Failure of Success Criterion 2.2.2 due to using the blink element</h1><section class="meta"><p class="id">ID: F47</p><p class="technology">Technology: failures</p><p class="type">Type: Failure</p></section><section id="applicability"><h2>When to Use</h2>
-      <p>HTML and XHTML</p>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Failure of Success Criterion 2.2.2 due to using the blink element</title><link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/></head><body><h1>Failure of Success Criterion 2.2.2 due to using the blink element</h1><section class="meta"><p class="id">ID: F47</p><p class="technology">Technology: failures</p><p class="type">Type: Failure</p></section><section id="applicability"><h2>When to Use</h2>
+   <p>HTML</p>
    </section><section id="description"><h2>Description</h2>
-      <p>The blink element, while not part of the official HTML or XHTML
-                        specification, is supported by many user agents. It causes any text inside
-                        the element to blink at a predetermined rate. This cannot be interrupted by
-                        the user, nor can it be disabled as a preference. The blinking continues as
-                        long as the page is displayed. Therefore, content that uses
-                        blink fails the Success Criterion because blinking can continue
-                        for more than three seconds.</p>
+      <p>The blink element, while not part of the official HTML specification, is supported by many user agents. It causes any text inside the element to blink at a predetermined rate. This cannot be interrupted by the user, nor can it be disabled as a preference. The blinking continues as long as the page is displayed. Therefore, content that uses blink fails the Success Criterion because blinking can continue for more than three seconds.</p>
    </section><section id="examples"><h2>Examples</h2>
       <section class="example">
          
-            <p>A product list page uses the blink element to draw
-                                attention to sale prices. This fails the Success Criterion because
-                                users cannot control the blink.</p>
+            <p>A product list page uses the blink element to draw attention to sale prices. This fails the Success Criterion because users cannot control the blink.</p>
          
-         <pre xml:space="preserve">
-&lt;p&gt;My Great Product &lt;blink&gt;Sale! $44,995!&lt;/blink&gt;&lt;/p&gt;
-</pre>
+         <pre xml:space="preserve"><code class="language-html">&lt;p&gt;My Great Product &lt;blink&gt;Sale! $44,995!&lt;/blink&gt;&lt;/p&gt;</code></pre>
       </section>
    </section><section id="tests"><h2>Tests</h2>
       <section class="procedure"><h3>Procedure</h3>
@@ -35,11 +25,9 @@
       
          <ul>
             <li> 
-                  <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blink">Mozilla Developer Network: &lt;blink&gt;</a> 
-               </li>
-            <li> 
-                  <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blink">Mozilla Developer Network: text-decoration</a> 
+                  <a href="https://en.wikipedia.org/wiki/Blink_element">Wikipedia: Blink element</a> 
                </li>
          </ul>
       
-   </section></body></html>
\ No newline at end of file
+   </section>
+</body></html>
diff --git a/techniques/failures/F48.html b/techniques/failures/F48.html
index 010ddd4464..c2e3159f62 100644
--- a/techniques/failures/F48.html
+++ b/techniques/failures/F48.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Failure of Success Criterion 1.3.1 due to using the pre element to markup
-                    tabular information</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Failure of Success Criterion 1.3.1 due to using the pre element to markup
+                    tabular information</title><link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/></head><body><h1>Failure of Success Criterion 1.3.1 due to using the pre element to markup
                     tabular information</h1><section class="meta"><p class="id">ID: F48</p><p class="technology">Technology: failures</p><p class="type">Type: Failure</p></section><section id="applicability"><h2>When to Use</h2>
-      <p>HTML and XHTML</p>
+      <p>HTML</p>
    </section><section id="description"><h2>Description</h2>
       <p>This document describes a failure caused by use of the HTML pre
                         element to markup tabular information. The pre element
@@ -15,42 +15,37 @@
                         using the pre element.</p>
    </section><section id="examples"><h2>Examples</h2>
       <section class="example">
-         <h3>A schedule formatted with tabs between columns </h3>
-         <pre xml:space="preserve">
- &lt;pre&gt;
- 	Monday	Tuesday	Wednesday	Thursday	Friday
- 8:00-
- 9:00	Meet with Sam				
- 9:00-
- 10:00			Dr. Williams	Sam again	Leave for San Antonio
- &lt;/pre&gt;
-</pre>
+         <h3>A schedule formatted with tabs between columns</h3>
+<pre xml:space="preserve"><code class="language-html">&lt;pre&gt;
+         Monday   Tuesday     Wednesday      Thursday         Friday
+8:00-
+9:00	          Meet with Sam
+9:00-
+10:00    		      Dr. Williams   Sam again        Leave for San Antonio
+&lt;/pre&gt;</code></pre>
       </section>
       <section class="example">
          <h3>Election results displayed using preformatted text</h3>
-         <pre xml:space="preserve">
- &lt;pre&gt;
-   CIRCUIT COURT JUDGE BRANCH 3
-                                                  W
-                                                   R
-                                          M R E     I
-                                           A . L     T
-                                     M L    R   B     E
-                                      I A    Y   E     -
-                                       K N        R     I
-                                        E G        T     N
-                                       -----   -----   -----
-0001 TOWN OF ALBION WDS 1-2               22      99       0
-0002 TOWN OF BERRY WDS 1-2                52     178       0
-0003 TOWN OF BLACK EARTH                  16      49       0
-0004 TOWN OF BLOOMING GROVE WDS 1-3       44     125       0
-0005 TOWN OF BLUE MOUNDS                  33     117       0
-0006 TOWN OF BRISTOL WDS 1-3             139     639       1
-0007 TOWN OF BURKE WDS 1-4                80     300       0
-0008 TOWN OF CHRISTIANA WDS 1-2           22      50       0
-
- &lt;/pre&gt;
-</pre>
+         <pre xml:space="preserve"><code class="language-html">&lt;pre&gt;
+         CIRCUIT COURT JUDGE BRANCH 3
+                                                           W
+                                                            R
+                                                   M R E     I
+                                                    A . L     T
+                                              M L    R   B     E
+                                               I A    Y   E     -
+                                                K N        R     I
+                                                 E G        T     N
+                                                -----   -----   -----
+         0001 TOWN OF ALBION WDS 1-2               22      99       0
+         0002 TOWN OF BERRY WDS 1-2                52     178       0
+         0003 TOWN OF BLACK EARTH                  16      49       0
+         0004 TOWN OF BLOOMING GROVE WDS 1-3       44     125       0
+         0005 TOWN OF BLUE MOUNDS                  33     117       0
+         0006 TOWN OF BRISTOL WDS 1-3             139     639       1
+         0007 TOWN OF BURKE WDS 1-4                80     300       0
+         0008 TOWN OF CHRISTIANA WDS 1-2           22      50       0
+&lt;/pre&gt;</code></pre>
       </section>
    </section><section id="tests"><h2>Tests</h2>
       <section class="procedure"><h3>Procedure</h3>
@@ -68,4 +63,5 @@ <h3>Election results displayed using preformatted text</h3>
       </section>
    </section><section id="related"><h2>Related Techniques</h2><ul>
       <li><a href="../html/H51">H51</a></li>
-   </ul></section><section id="resources"><h2>Resources</h2></section></body></html>
\ No newline at end of file
+   </ul></section><section id="resources"><h2>Resources</h2></section>
+</body></html>
\ No newline at end of file
diff --git a/techniques/failures/F49.html b/techniques/failures/F49.html
index 46366482ef..04c7e84114 100644
--- a/techniques/failures/F49.html
+++ b/techniques/failures/F49.html
@@ -1,9 +1,9 @@
 <!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>
-          Failure of Success Criterion 1.3.2 due to using an HTML layout table that does not make sense when linearized  </title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>
+          Failure of Success Criterion 1.3.2 due to using an HTML layout table that does not make sense when linearized  </title><link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/></head><body><h1>
           Failure of Success Criterion 1.3.2 due to using an HTML layout table that does not make sense when linearized  </h1><section class="meta"><p class="id">ID: F49</p><p class="technology">Technology: failures</p><p class="type">Type: Failure</p></section><section id="applicability"><h2>When to Use</h2>
-      <p>HTML and XHTML</p>
+      <p>HTML</p>
    </section><section id="description"><h2>Description</h2>
-      <p>Although WCAG 2 does not prohibit the use of layout tables, CSS-based layouts are recommended in order to retain the defined semantic meaning of the HTML <code class="el">table</code> elements and to conform to the coding practice of separating presentation from content. If a layout table is used, however, it is important that the content make sense when linearized.
+      <p>Although WCAG 2 does not prohibit the use of layout tables, CSS-based layouts are recommended in order to retain the defined semantic meaning of the HTML <code class="language-html">table</code> elements and to conform to the coding practice of separating presentation from content. If a layout table is used, however, it is important that the content make sense when linearized.
           </p>
       <p>This failure occurs when a meaningful sequence of content conveyed through
                         presentation is lost because HTML tables used to control the visual
@@ -33,16 +33,15 @@ <h3>A layout table that does not linearize correctly</h3>
             <p>An advertisement makes clever use of visual positioning, but changes
                                 meaning when linearized.</p>
          
-         <pre xml:space="preserve">
-&lt;table&gt;
-&lt;tr&gt;
-  &lt;td &gt;&lt;img src="logo.gif" alt="XYZ mountaineering"&gt;&lt;/td&gt;
-  &lt;td rowspan="2" valign="bottom"&gt;top!&lt;/td&gt;
-&lt;/tr&gt;
-&lt;tr&gt;
-  &lt;td&gt;XYZ gets you to the&lt;/td&gt;
-&lt;/tr&gt;
-&lt;/table&gt;</pre>
+<pre xml:space="preserve"><code class="language-html">&lt;table&gt;
+  &lt;tr&gt;
+    &lt;td&gt;&lt;img src="logo.gif" alt="XYZ mountaineering"&gt;&lt;/td&gt;
+    &lt;td rowspan="2" valign="bottom"&gt;top!&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;XYZ gets you to the&lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/table&gt;</code></pre>
          
             <p>The reading order from this example would be: </p>
             <ul>
@@ -67,48 +66,46 @@ <h3>A layout table that separates a meaningful sequence when linearized</h3>
                                 links in the navigation bar are split into different cells in the
                                 leftmost column.</p>
          
-         <pre xml:space="preserve">
-&lt;table&gt;
-&lt;tr&gt;
-	&lt;td&gt;&lt;a href="#"&gt;Link 1&lt;/a&gt;&lt;/td&gt;
-	&lt;td rowspan="20"&gt;&lt;img src="img.png" alt="Museum Picture"&gt;&lt;/td&gt;
-	&lt;td rowspan="6"&gt;&lt;img src="placard.png" alt="Placard text"&gt;&lt;/td&gt; 
-&lt;/tr&gt; 
-&lt;tr&gt;
-	&lt;td&gt;&lt;a href="#"&gt;Link 2&lt;/a&gt;&lt;/td&gt;
-&lt;/tr&gt;
-&lt;tr&gt;
-	&lt;td&gt;&lt;a href="#"&gt;Link 3&lt;/a&gt;&lt;/td&gt;
-&lt;/tr&gt;
-&lt;tr&gt;
-	&lt;td&gt;&lt;a href="#"&gt;Link 4&lt;/a&gt;&lt;/td&gt;
-&lt;/tr&gt;
-&lt;tr&gt;
-	&lt;td&gt;&lt;a href="#"&gt;Link 5&lt;/a&gt;&lt;/td&gt;
-&lt;/tr&gt;
-&lt;tr&gt;
-	&lt;td&gt;&lt;a href="#"&gt;Link 6&lt;/a&gt;&lt;/td&gt;
-&lt;/tr&gt;
-&lt;tr&gt;
-	&lt;td&gt;&lt;a href="#"&gt;Link 7&lt;/a&gt;&lt;/td&gt;
-	&lt;td rowspan="2"&gt;&lt;h2&gt;Image Heading&lt;/h2&gt;&lt;/td&gt; 
-&lt;/tr&gt; 
-&lt;tr&gt;
-	&lt;td&gt;&lt;a href="#"&gt;Link 8&lt;/a&gt;&lt;/td&gt;
-&lt;/tr&gt;
-&lt;tr&gt;
-	&lt;td&gt;&lt;a href="#"&gt;Link 9&lt;/a&gt;&lt;/td&gt;
-	&lt;td rowspan="12"&gt;Description of the image&lt;/td&gt; 
-&lt;/tr&gt; 
-&lt;tr&gt;
-	&lt;td&gt;&lt;a href="#"&gt;Link 10&lt;/a&gt;&lt;/td&gt;
-&lt;/tr&gt;
- ...
-&lt;tr&gt;
-	&lt;td&gt;&lt;a href="#"&gt;Link 20&lt;/a&gt;&lt;/td&gt;
-&lt;/tr&gt;
-&lt;/table&gt;
-</pre>
+<pre xml:space="preserve"><code class="language-html">&lt;table&gt;
+  &lt;tr&gt;
+    &lt;td&gt;&lt;a href="#"&gt;Link 1&lt;/a&gt;&lt;/td&gt;
+    &lt;td rowspan="20"&gt;&lt;img src="img.png" alt="Museum Picture"&gt;&lt;/td&gt;
+    &lt;td rowspan="6"&gt;&lt;img src="placard.png" alt="Placard text"&gt;&lt;/td&gt; 
+  &lt;/tr&gt; 
+  &lt;tr&gt;
+    &lt;td&gt;&lt;a href="#"&gt;Link 2&lt;/a&gt;&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;&lt;a href="#"&gt;Link 3&lt;/a&gt;&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;&lt;a href="#"&gt;Link 4&lt;/a&gt;&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;&lt;a href="#"&gt;Link 5&lt;/a&gt;&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;&lt;a href="#"&gt;Link 6&lt;/a&gt;&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;&lt;a href="#"&gt;Link 7&lt;/a&gt;&lt;/td&gt;
+    &lt;td rowspan="2"&gt;&lt;h2&gt;Image Heading&lt;/h2&gt;&lt;/td&gt; 
+  &lt;/tr&gt; 
+  &lt;tr&gt;
+    &lt;td&gt;&lt;a href="#"&gt;Link 8&lt;/a&gt;&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;&lt;a href="#"&gt;Link 9&lt;/a&gt;&lt;/td&gt;
+    &lt;td rowspan="12"&gt;Description of the image&lt;/td&gt; 
+  &lt;/tr&gt; 
+  &lt;tr&gt;
+    &lt;td&gt;&lt;a href="#"&gt;Link 10&lt;/a&gt;&lt;/td&gt;
+  &lt;/tr&gt;
+    ...
+  &lt;tr&gt;
+    &lt;td&gt;&lt;a href="#"&gt;Link 20&lt;/a&gt;&lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/table&gt;</code></pre>
          
             <p>The reading order from this example would be: </p>
             <ul>
@@ -156,4 +153,5 @@ <h3>A layout table that separates a meaningful sequence when linearized</h3>
       </section>
    </section><section id="related"><h2>Related Techniques</h2><ul>
       <li><a href="../css/C6">C6</a></li>
-   </ul></section><section id="resources"><h2>Resources</h2></section></body></html>
\ No newline at end of file
+   </ul></section><section id="resources"><h2>Resources</h2></section>
+</body></html>
\ No newline at end of file
diff --git a/techniques/failures/F50.html b/techniques/failures/F50.html
index e9f0bdcfa1..39d3d5f099 100644
--- a/techniques/failures/F50.html
+++ b/techniques/failures/F50.html
@@ -1,40 +1,33 @@
 <!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Failure of Success Criterion 2.2.2 due to a script that causes a blink effect without a
-                    mechanism to stop the blinking at 5 seconds or less</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Failure of Success Criterion 2.2.2 due to a script that causes a blink effect without a
+                    mechanism to stop the blinking at 5 seconds or less</title><link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/></head><body><h1>Failure of Success Criterion 2.2.2 due to a script that causes a blink effect without a
                     mechanism to stop the blinking at 5 seconds or less</h1><section class="meta"><p class="id">ID: F50</p><p class="technology">Technology: failures</p><p class="type">Type: Failure</p></section><section id="applicability"><h2>When to Use</h2>
       <p>Technologies that support script-controlled blinking of content.</p>
    </section><section id="description"><h2>Description</h2>
-      <p>Scripts can be used to blink content by toggling the content's visibility on and off at regular intervals. It is a failure for the script not to include a mechanism to stop the blinking at 5 seconds or earlier. See <a href="https://www.w3.org/WAI/WCAG21/Techniques/client-side-script/SCR22">Using scripts to control blinking and stop it in five seconds or less</a> for information about how to modify the technique to stop the blinking.</p>
+      <p>Scripts can be used to blink content by toggling the content's visibility on and off at regular intervals. It is a failure for the script not to include a mechanism to stop the blinking at 5 seconds or earlier. See <a href="../client-side-script/SCR22">Using scripts to control blinking and stop it in five seconds or less</a> for information about how to modify the technique to stop the blinking.</p>
    </section><section id="examples"><h2>Examples</h2>
       <section class="example">
          
             <p>The following example uses script to blink content, but the blink
                                 continues indefinitely rather than stopping after five seconds.</p>
          
-         <pre xml:space="preserve">
+<pre xml:space="preserve"><code class="language-javascript">&lt;script&gt;
+  // blink "on" state
+  function show(){
+      document.getElementById("blink1").style.visibility = "visible";
+      settime-out("hide()", 450);
+   }
+    
+   // blink "off" state
+   function hide(){
+      document.getElementById("blink1").style.visibility = "hidden";
+      settime-out("show()", 450);
+   }
+
+   // kick it off
+   show();
+&lt;/script&gt;</code>
 ...
-&lt;script type="text/javascript"&gt;
-&lt;!--
-// blink "on" state
-function show()
-{
-	if (document.getElementById)
-	document.getElementById("blink1").style.visibility = "visible";
-	settime-out("hide()", 450);
-}
-// blink "off" state
-function hide()
-{
-	if (document.getElementById)
-	document.getElementById("blink1").style.visibility = "hidden";
-	settime-out("show()", 450);
-}
-// kick it off
-show();
-//--&gt;
-&lt;/script&gt;
-...
-&lt;span id="blink1"&gt;This content will blink&lt;/span&gt;
-</pre>
+<code class="language-html">&lt;span id="blink1"&gt;This content will blink&lt;/span&gt;</code></pre>
       </section>
    </section><section id="tests"><h2>Tests</h2>
       <section class="procedure"><h3>Procedure</h3>
@@ -48,4 +41,5 @@
       </section>
    </section><section id="related"><h2>Related Techniques</h2><ul>
       <li><a href="../client-side-script/SCR22">SCR22</a></li>
-   </ul></section></body></html>
\ No newline at end of file
+   </ul></section>
+</body></html>
\ No newline at end of file
diff --git a/techniques/failures/F52.html b/techniques/failures/F52.html
index acddcd1229..8ac67caca3 100644
--- a/techniques/failures/F52.html
+++ b/techniques/failures/F52.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Failure of Success Criterion 3.2.1 and 3.2.5 due to opening a new window as soon as a new page is loaded</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Failure of Success Criterion 3.2.1 and 3.2.5 due to opening a new window as soon as a new page is loaded</h1><section class="meta"><p class="id">ID: F52</p><p class="technology">Technology: failures</p><p class="type">Type: Failure</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Failure of Success Criterion 3.2.5 due to opening a new window as soon as a new page is loaded</title><link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/></head><body><h1>Failure of Success Criterion 3.2.5 due to opening a new window as soon as a new page is loaded</h1><section class="meta"><p class="id">ID: F52</p><p class="technology">Technology: failures</p><p class="type">Type: Failure</p></section><section id="applicability"><h2>When to Use</h2>
       <p>Applies when scripting is used to open new windows. </p>
    </section><section id="description"><h2>Description</h2>
       <p> Some Web sites open a new window when a page is loaded, to advertise a
@@ -12,35 +12,14 @@
                             user agents are listed as examples below. </p>
       </div>
       <section class="example">
-         <h3></h3>
+         <h3>example commonly used to open new windows when pages are loaded</h3>
          
-            <p>The following example is commonly used in HTML 4.01 to open new
-                                windows when pages are loaded.</p>
-         
-         <pre xml:space="preserve">
-window.onload = showAdvertisement;
- function showAdvertisement()
- {
-  window.open('advert.html', '_blank', 'height=200,width=150');
- }</pre>
-      </section>
-      <section class="example">
-         <h3></h3>
-         
-            <p>The following example commonly used in XHTML to open new windows when
-                                pages are loaded.</p>
-         
-         <pre xml:space="preserve">
-if (window.addEventListener) { 
-    window.addEventListener("load", showAdvertisement, true);
-}
-if (window.attachEvent) {
-    window.attachEvent("onload", showAdvertisement);
-}
-function showAdvertisement()
-{
-window.open('noscript.html', '_blank', 'height=200,width=150');
-}</pre>
+<pre xml:space="preserve"><code class="language-javascript">window.addEventListener("load", showAdvertisement, true);
+window.attachEvent("onload", showAdvertisement);
+   
+function showAdvertisement(){
+  window.open('noscript.html', '_blank', 'height=200,width=150');
+}</code></pre>
       </section>
    </section><section id="tests"><h2>Tests</h2>
       <section class="procedure"><h3>Procedure</h3>
@@ -53,7 +32,7 @@ <h3></h3>
       </section>
       <section class="results"><h3>Expected Results</h3>
          <ul>
-            <li> If step 2 and step 3 are true, then this failure condition applies and
+            <li> If check #2 and check #3 are true, then this failure condition applies and
                                     content fails the Success Criterion. </li>
          </ul>
       </section>
@@ -61,4 +40,5 @@ <h3></h3>
       <li><a href="../general/G107">G107</a></li>
    </ul></section><section id="resources"><h2>Resources</h2>
       
-   </section></body></html>
\ No newline at end of file
+   </section>
+</body></html>
diff --git a/techniques/failures/F54.html b/techniques/failures/F54.html
index 56771ba525..30b89d39b5 100644
--- a/techniques/failures/F54.html
+++ b/techniques/failures/F54.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Failure of Success Criterion 2.1.1 due to using only pointing-device-specific event
-                    handlers (including gesture) for a function</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Failure of Success Criterion 2.1.1 due to using only pointing-device-specific event
+                    handlers (including gesture) for a function</title><link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/></head><body><h1>Failure of Success Criterion 2.1.1 due to using only pointing-device-specific event
                     handlers (including gesture) for a function</h1><section class="meta"><p class="id">ID: F54</p><p class="technology">Technology: failures</p><p class="type">Type: Failure</p></section><section id="applicability"><h2>When to Use</h2>
       <p>Technologies that have event handlers specific to pointing devices.</p>
       <p>User Agent and Assistive Technology Support Notes</p>
@@ -17,13 +17,12 @@
                         
    </section><section id="examples"><h2>Examples</h2>
       <section class="example">
+         <h3>An image that responds to a mouse click to go to another page</h3>
          
-            <p>The following example is of an image that responds to a mouse click
-                                to go to another page. This is a failure because the keyboard cannot
-                                be used to move to the next page.  
-&lt;p&gt;&lt;img onmousedown="nextPage();" src="nextarrow.gif" 
-alt="Go to next page"&gt;&lt;/p&gt; 
-            </p>
+         <p>This is a failure because the keyboard cannot be used to move to the next page.</p>
+
+<pre xml:space="preserve"><code class="language-html">&lt;p&gt;&lt;img onmousedown="nextPage();" src="nextarrow.gif" alt="Go to next page"&gt;&lt;/p&gt;</code></pre> 
+
          
       </section>
    </section><section id="tests"><h2>Tests</h2>
@@ -44,4 +43,5 @@
       <li><a href="../client-side-script/SCR20">SCR20</a></li>
    </ul></section><section id="resources"><h2>Resources</h2>
       
-   </section></body></html>
+   </section>
+</body></html>
diff --git a/techniques/failures/F55.html b/techniques/failures/F55.html
index c42890210b..a6b9c1cf36 100644
--- a/techniques/failures/F55.html
+++ b/techniques/failures/F55.html
@@ -1,36 +1,75 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>
-          Failure of Success Criteria 2.1.1, 2.4.7, and 3.2.1 due to using script to remove focus when focus is received</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>
-          Failure of Success Criteria 2.1.1, 2.4.7, and 3.2.1 due to using script to remove focus when focus is received</h1><section class="meta"><p class="id">ID: F55</p><p class="technology">Technology: failures</p><p class="type">Type: Failure</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+
+<head>
+   <title>Failure of Success Criteria 2.1.1, 2.4.7, 2.4.13, and 3.2.1 due to using script to remove focus when focus is received</title>
+   <link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+</head>
+
+<body>
+   <h1>Failure of Success Criteria 2.1.1, 2.4.7, 2.4.13, and 3.2.1 due to using script to remove focus when focus is received</h1>
+   <section class="meta">
+      <p class="id">ID: F55</p>
+      <p class="technology">Technology: failures</p>
+      <p class="type">Type: Failure</p>
+   </section>
+   <section id="applicability">
+      <h2>When to Use</h2>
+
       <p>Applies to all content that supports script.</p>
       <p> User Agent and Assistive Technology Support Notes</p>
       <ul>
          <li> None listed. </li>
       </ul>
-   </section><section id="description"><h2>Description</h2>
-      <p>Content that normally receives focus when the content is accessed by keyboard may have this focus removed by scripting. This is sometimes done when designer considers the system focus indicator to be unsightly.  However, the system focus indicator is an important part of accessibility for keyboard users.  In addition, this practice removes focus from the content entirely, which means that the content can only be operated by a pointing device such as a mouse.</p>
-   </section><section id="examples"><h2>Examples</h2>
+   </section>
+   <section id="description">
+      <h2>Description</h2>
+      <p>Content that normally receives focus when the content is accessed by keyboard may have this focus removed by
+         scripting. This is sometimes done when designer considers the system focus indicator to be unsightly. However,
+         the system focus indicator is an important part of accessibility for keyboard users. In addition, this practice
+         removes focus from the content entirely, which means that the content can only be operated by a pointing device
+         such as a mouse.</p>
+   </section>
+   <section id="examples">
+      <h2>Examples</h2>
       <section class="example">
-         <pre xml:space="preserve">&lt;input type="submit" onFocus="this.blur();"&gt; </pre>
+         <pre
+            xml:space="preserve"><code class="language-html">&lt;input type="submit" onFocus="this.blur();"&gt;</code></pre>
       </section>
       <section class="example">
-         <pre xml:space="preserve">&lt;a onFocus="this.blur()" href="Page.html"&gt;&lt;img src="myImage.gif"&gt;&lt;/a&gt; </pre>
+         <pre
+            xml:space="preserve"><code class="language-html">&lt;a onFocus="this.blur()" href="Page.html"&gt;&lt;img src="myImage.gif"&gt;&lt;/a&gt;</code></pre>
       </section>
       <section class="example">
-         <pre xml:space="preserve">&lt;a href="link.html" onfocus="if(this.blur)this.blur();"&gt;Link Phrase&lt;/a&gt; </pre>
+         <pre
+            xml:space="preserve"><code class="language-html">&lt;a href="link.html" onfocus="if(this.blur)this.blur();"&gt;Link Phrase&lt;/a&gt;</code></pre>
       </section>
-   </section><section id="tests"><h2>Tests</h2>
-      <section class="procedure"><h3>Procedure</h3>
+   </section>
+   <section id="tests">
+      <h2>Tests</h2>
+      <section class="procedure">
+         <h3>Procedure</h3>
          <ol>
             <li> Use the keyboard to verify that you can get to all interactive
-                                    elements using the keyboard. </li>
+               elements using the keyboard. </li>
             <li> Check that when focus is placed on each element, focus remains
-                                    there until user moves it. </li>
+               there until user moves it. </li>
          </ol>
       </section>
-      <section class="results"><h3>Expected Results</h3>
+      <section class="results">
+         <h3>Expected Results</h3>
          <ul>
             <li> If #2 is false then this failure condition applies and content
-                                    fails the Success Criterion. </li>
+               fails the Success Criterion. </li>
          </ul>
       </section>
-   </section><section id="related"><h2>Related Techniques</h2></section><section id="resources"><h2>Resources</h2></section></body></html>
\ No newline at end of file
+   </section>
+   <section id="related">
+      <h2>Related Techniques</h2>
+   </section>
+   <section id="resources">
+      <h2>Resources</h2>
+   </section>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/techniques/failures/F58.html b/techniques/failures/F58.html
index b509cdf1a1..3d78e73be5 100644
--- a/techniques/failures/F58.html
+++ b/techniques/failures/F58.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Failure of Success Criterion 2.2.1 due to using server-side techniques to automatically
-                    redirect pages after a time-out</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Failure of Success Criterion 2.2.1 due to using server-side techniques to automatically
+                    redirect pages after a time-out</title><link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/></head><body><h1>Failure of Success Criterion 2.2.1 due to using server-side techniques to automatically
                     redirect pages after a time-out</h1><section class="meta"><p class="id">ID: F58</p><p class="technology">Technology: failures</p><p class="type">Type: Failure</p></section><section id="applicability"><h2>When to Use</h2>
       <ul>
          <li> Any server-side scripting language </li>
@@ -25,42 +25,22 @@
                                 redirect is implemented in Java Servlets or JavaServer Pages
                             (JSP).</p>
          
-         <pre xml:space="preserve">
-public void doGet (HttpServletRequest request, HttpServletResponse response)
-      throws IOException, ServletException {
-        response.setContentType("text/html");
-	PrintWriter out = response.getWriter();
-	response.setHeader("Refresh", "10; URL=TargetPage.html");
-	out.println("&lt;!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\"
-	 \"https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\"&gt;");
-	out.println("&lt;html&gt;&lt;head&gt;&lt;title&gt;Redirect&lt;/title&gt;&lt;/head&gt;&lt;body&gt;");
-	out.println("&lt;p&gt;This page will redirect you in 10 seconds.&lt;/p&gt;");
-	out.println("&lt;/body&gt;&lt;/html&gt;");
-  }
-</pre>
-      </section>
-      <section class="example">
-         
-            <p>The following example is a failure because a timed server-side
-                                redirect is implemented in Active Server Pages (ASP) with VBScript.</p>
-         
-         <pre xml:space="preserve">
- &lt;% @Language = "VBScript" %&gt;
- &lt;% option explicit 
- Response.Clear
- Response.AddHeader "Refresh", "5; URL=TargetPage.htm"
- %&gt;&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
- "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
- &lt;html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"&gt;
- …
- &lt;!--HTML code for content that is shown before the redirect is triggered--&gt;
- </pre>
+<pre xml:space="preserve"><code class="language-java">public void doGet (HttpServletRequest request, HttpServletResponse response)
+   throws IOException, ServletException {
+      response.setContentType("text/html");
+PrintWriter out = response.getWriter();
+response.setHeader("Refresh", "10; URL=TargetPage.html");
+out.println("&lt;!DOCTYPE html&gt;");
+out.println("&lt;html&gt;&lt;head&gt;&lt;title&gt;Redirect&lt;/title&gt;&lt;/head&gt;&lt;body&gt;");
+out.println("&lt;p&gt;This page will redirect you in 10 seconds.&lt;/p&gt;");
+out.println("&lt;/body&gt;&lt;/html&gt;");
+}</code></pre>
       </section>
    </section><section id="tests"><h2>Tests</h2>
       <section class="procedure"><h3>Procedure</h3>
          <ol>
             <li>Check to see if the web page automatically redirects to another page after some period of time without the user taking any action.</li>
-          <li>Check if the page qualifies for Real-time or Essential Exceptions in <a href="https://www.w3.org/TR/WCAG21/#timing-adjustable">Success Criterion 2.2.1 Timing Adjustable</a>.</li>
+          <li>Check if the page qualifies for Real-time or Essential Exceptions in <a href="/TR/WCAG/#timing-adjustable">Success Criterion 2.2.1 Timing Adjustable</a>.</li>
           <li>Check if the user is provided an opportunity to turn off, extend, or adjust the timing of the page refresh.</li>
          </ol>
       </section>
@@ -76,14 +56,9 @@
       
          <ul>
             <li> 
-                  <a href="http://www.ietf.org/rfc/rfc1945.txt">Hypertext
-                                        Transfer Protocol -- HTTP/1.0 (IETF Request for Comments
-                                        1945)</a> (plain text) </li>
-            <li> 
-                  <a href="http://www.ietf.org/rfc/rfc2616.txt">Hypertext
-                                        Transfer Protocol -- HTTP/1.1 (IETF Request for Comments
-                                        2616)</a> (plain text) </li>
+              <a href="https://www.rfc-editor.org/rfc/rfc9110#name-redirection-3xx">RFC 9110: HTTP Semantics 15.4. Redirection 3xx</li>
             
          </ul>
       
-   </section></body></html>
+   </section>
+</body></html>
diff --git a/techniques/failures/F59.html b/techniques/failures/F59.html
index 0bec2fe310..ae6d7dbd99 100644
--- a/techniques/failures/F59.html
+++ b/techniques/failures/F59.html
@@ -1,17 +1,17 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Failure of Success Criterion 4.1.2 due to using script to make div or span a user interface control in HTML without providing a role for the control</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Failure of Success Criterion 4.1.2 due to using script to make div or span a user interface control in HTML without providing a role for the control</h1><section class="meta"><p class="id">ID: F59</p><p class="technology">Technology: failures</p><p class="type">Type: Failure</p></section><section id="applicability"><h2>When to Use</h2>
-      <p> HTML and XHTML</p>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Failure of Success Criterion 4.1.2 due to using script to make div or span a user interface control in HTML without providing a role for the control</title><link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/></head><body><h1>Failure of Success Criterion 4.1.2 due to using script to make div or span a user interface control in HTML without providing a role for the control</h1><section class="meta"><p class="id">ID: F59</p><p class="technology">Technology: failures</p><p class="type">Type: Failure</p></section><section id="applicability"><h2>When to Use</h2>
+      <p>HTML</p>
    </section><section id="description"><h2>Description</h2>
       <p> This failure demonstrates how using generic HTML elements to create user
                         interface controls can make the controls inaccessible to assistive
                         technology. Assistive technologies rely on knowledge of the role and current
                         state of a component in order to provide that information to the user. Many
                         HTML elements have well defined roles, such as links, buttons, text fields,
-                        etc. Generic elements such as <code class="el">div</code> and <code class="el">span</code> do not
+                        etc. Generic elements such as <code class="language-html">div</code> and <code class="language-html">span</code> do not
                         have any predefined roles. When these generic elements are used to create
                         user interface controls in HTML the assistive technology may not have the
                         necessary information to describe and interact with the control. </p>
       <p><div class="note">Attaching event handlers to elements that are not normally interactive, such
-                        as <code class="el">span</code> and <code class="el">div</code>, can be disorienting to
+                        as <code class="language-html">span</code> and <code class="language-html">div</code>, can be disorienting to
                         users. Even if care is taken to provide keyboard access to such elements,
                         users may have a difficult time discovering that there are interactive
                         controls in the content or understanding what type of behavior to expect
@@ -19,32 +19,31 @@
                         the script to activate the element. Additionally, these elements do not
                         generate the same operating system events as interactive elements, so
                         assistive technology may not be notified when the user activates them.</div></p>
-      <p> The W3C Candidate Recommendation "<a href="https://www.w3.org/TR/wai-aria/">Accessible Rich Internet Applications (WAI-ARIA) 1.0</a>" describes mechanisms to provide the necessary role and state information to create fully accessible user interface controls.</p>
+      <p><a href="https://www.w3.org/TR/wai-aria/">Accessible Rich Internet Applications (WAI-ARIA)</a> describes mechanisms to provide the necessary role and state information to create fully accessible user interface controls.</p>
    </section><section id="examples"><h2>Examples</h2>
       <section class="example">
          
             <p>The following example fails because it creates a checkbox using a span and an image.</p>
-            <pre xml:space="preserve">
-  &lt;p&gt; 
-  &lt;span  onclick="toggleCheckbox('chkbox')"&gt; 
-  &lt;img src="unchecked.gif"  id="chkbox" alt=""&gt; Include Signature 
-  &lt;/span&gt; 
-  &lt;/p&gt;</pre>
-            <p>Here is the scripting code which changes the image source when the <code class="el">span</code> is clicked with the mouse.</p>
-            <pre xml:space="preserve"> 
-  var CHECKED = "check.gif"; 
-  var UNCHECKED = "unchecked.gif"; 
-  function toggleCheckbox(imgId) { 
+<pre xml:space="preserve"><code class="language-html">&lt;p&gt; 
+   &lt;span onclick="toggleCheckbox('chkbox')"&gt; 
+     &lt;img src="unchecked.gif" id="chkbox" alt=""&gt; Include Signature 
+   &lt;/span&gt; 
+&lt;/p&gt;</code></pre>
+            <p>Here is the scripting code which changes the image source when the <code class="language-html">span</code> is clicked with the mouse.</p>
+<pre xml:space="preserve"><code class="language-javascript">var CHECKED = "check.gif"; 
+var UNCHECKED = "unchecked.gif"; 
+function toggleCheckbox(imgId) { 
   var theImg = document.getElementById(imgId); 
-  if ( theImg.src.lastIndexOf(CHECKED)!= -1 ) { 
-  theImg.src = UNCHECKED; 
-  // additional code to implement unchecked action 
+  if (theImg.src.lastIndexOf(CHECKED)!= -1) {
+    theImg.src = UNCHECKED; 
+    // additional code to implement unchecked action 
   } 
   else { 
-  theImg.src = CHECKED; 
-  // additional code to implement checked action 
+    theImg.src = CHECKED; 
+    // additional code to implement checked action 
   } 
-  } </pre>
+}</code>
+</pre>
             <p> A checkbox created in this manner will not work with assistive technology since there is no information that identifies it as a checkbox. In addition, this example is also not operable from the keyboard and would fail guideline 2.1.</p>
          
       </section>
@@ -60,18 +59,19 @@
          <p>If check #2 AND check #3 are false, the failure condition applies.</p>
       </section>
    </section><section id="related"><h2>Related Techniques</h2><ul>
-      <li><a href="../failures/F42">F42</a></li>
       <li><a href="../aria/ARIA4">ARIA4</a></li>
+      <li><a href="../failures/F42">F42</a></li>
       
    </ul></section><section id="resources"><h2>Resources</h2>
       
          <ul>
             <li>
-                  <a href="https://www.w3.org/TR/wai-aria/">Accessible Rich Internet Applications (WAI-ARIA) 1.0</a>
-               </li>
+               <a href="https://www.w3.org/TR/wai-aria/">Accessible Rich Internet Applications (WAI-ARIA)</a>
+            </li>
             <li>
-                  <a href="https://www.w3.org/TR/wai-aria-practices/">WAI-ARIA 1.0 Authoring Practices</a> 
-               </li>
+               <a href="https://www.w3.org/WAI/ARIA/apg/">WAI-ARIA Authoring Practices Guide</a> 
+            </li>
          </ul>
       
-   </section></body></html>
\ No newline at end of file
+   </section>
+</body></html>
\ No newline at end of file
diff --git a/techniques/failures/F60.html b/techniques/failures/F60.html
index ef1024c307..6f01bd287b 100644
--- a/techniques/failures/F60.html
+++ b/techniques/failures/F60.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Failure of Success Criterion 3.2.5 due to launching a new window when a user enters
-                    text into an input field</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Failure of Success Criterion 3.2.5 due to launching a new window when a user enters
+                    text into an input field</title><link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/></head><body><h1>Failure of Success Criterion 3.2.5 due to launching a new window when a user enters
                     text into an input field</h1><section class="meta"><p class="id">ID: F60</p><p class="technology">Technology: failures</p><p class="type">Type: Failure</p></section><section id="applicability"><h2>When to Use</h2>
       <p>General</p>
    </section><section id="description"><h2>Description</h2>
@@ -11,16 +11,16 @@
          <h3></h3>
          
             <p> This is a deprecated example showing a failure: A user is filling in
-                                his mailing address. When he fills in his postal code, a new window
-                                opens containing advertisements for services available in his city.
+                                their mailing address. When they fill in their postal code, a new window
+                                opens containing advertisements for services available in their city.
                             </p>
          
       </section>
       <section class="example">
          <h3></h3>
          
-            <p>This example is acceptable: A user is filling in his mailing address
-                                in a form. When he fills in the postal code field, a script runs to
+            <p>This example is acceptable: A user is filling in their mailing address
+                                in a form. When they fill in the postal code field, a script runs to
                                 validate that it is a valid postal code. If the value is not valid,
                                 a window opens with instructions on how to fill in the field. </p>
          
@@ -46,4 +46,5 @@ <h3></h3>
       <li><a href="../failures/F37">F37</a></li>
    </ul></section><section id="resources"><h2>Resources</h2>
       
-   </section></body></html>
\ No newline at end of file
+   </section>
+</body></html>
\ No newline at end of file
diff --git a/techniques/failures/F61.html b/techniques/failures/F61.html
index 27216a6d3e..7be2de3247 100644
--- a/techniques/failures/F61.html
+++ b/techniques/failures/F61.html
@@ -1,9 +1,9 @@
 <!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Failure of Success Criterion 3.2.5 due to complete change of main content through an
-                    automatic update that the user cannot disable from within the content</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Failure of Success Criterion 3.2.5 due to complete change of main content through an
+                    automatic update that the user cannot disable from within the content</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/></head><body><h1>Failure of Success Criterion 3.2.5 due to complete change of main content through an
                     automatic update that the user cannot disable from within the content</h1><section class="meta"><p class="id">ID: F61</p><p class="technology">Technology: failures</p><p class="type">Type: Failure</p></section><section id="applicability"><h2>When to Use</h2>
       <p>General </p>
    </section><section id="description"><h2>Description</h2>
-      <p> This document describes a failure that occurs when the content in the main <a href="https://www.w3.org/TR/WCAG21/#dfn-viewport">viewport</a> viewport is automatically updated, and there is no option for a user to disable this behavior. </p>
+      <p> This document describes a failure that occurs when the content in the main <a>viewport</a> is automatically updated, and there is no option for a user to disable this behavior. </p>
       <p>Two procedures are presented below to test for the existence of a failure against Success Criterion 3.2.5. Procedure 1 is the preferred procedure and assumes that content authors have access to the code that generates the viewport content.</p>
       <p>However there may be instances where this may not be possible (eg: in certain content management systems, application environments such as django or ruby-on-rails, or content generated through scripting languages such as AJAX or PHP that are generated by third parties.) To that end, the second procedure is supplied to allow testing in these instances. Note that timeframes are indicative only, and that any change after any amount of time should be treated as a failure if the test otherwise does not pass the other step evaluations. </p>
    </section><section id="examples"><h2>Examples</h2>
@@ -38,7 +38,7 @@ <h3></h3>
       </section>
       <section class="results"><h3>Expected Results</h3>
          <ul>
-            <li>If both checks 3 and 4 are true, then this failure condition applies and the content fails this Success Criterion</li>
+            <li>If checks #3 and #4 are true, then this failure condition applies and the content fails this Success Criterion</li>
          </ul>
       </section>
    </section><section id="tests"><h2>Tests</h2>
@@ -65,4 +65,4 @@ <h3></h3>
       </section>
    </section><section id="related"><h2>Related Techniques</h2></section><section id="resources"><h2>Resources</h2>
       
-   </section></body></html>
\ No newline at end of file
+   </section></body></html>
diff --git a/techniques/failures/F63.html b/techniques/failures/F63.html
index f1c06809c5..55d4239f70 100644
--- a/techniques/failures/F63.html
+++ b/techniques/failures/F63.html
@@ -1,10 +1,10 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Failure of Success Criterion 2.4.4 due to providing link context only in content that is not related to the link</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Failure of Success Criterion 2.4.4 due to providing link context only in content that is not related to the link</h1><section class="meta"><p class="id">ID: F63</p><p class="technology">Technology: failures</p><p class="type">Type: Failure</p></section><section id="applicability"><h2>When to Use</h2>
-      <p>HTML and XHTML</p>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Failure of Success Criterion 2.4.4 due to providing link context only in content that is not related to the link</title><link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/></head><body><h1>Failure of Success Criterion 2.4.4 due to providing link context only in content that is not related to the link</h1><section class="meta"><p class="id">ID: F63</p><p class="technology">Technology: failures</p><p class="type">Type: Failure</p></section><section id="applicability"><h2>When to Use</h2>
+      <p>HTML</p>
    </section><section id="description"><h2>Description</h2>
       <p>This describes a failure condition when the context needed for understanding the purpose of a link is located in content that is not programmatically determined link context.  If the context for the link is not provided in one of the following ways:</p>
       <ul>
          <li>in the same sentence, paragraph, list item, or table cell as the link</li>
-         <li>via a suitable ARIA property such as <code class="att">aria-label</code> or <code class="att">aria-labelledby</code>
+         <li>via a suitable ARIA property such as <code class="language-html">aria-label</code> or <code class="language-html">aria-labelledby</code>
             </li>
       </ul>
       <p>then the user will not be able to find out where the link is going with any ease. If the user must leave the link to search for the context, the context is not programmatically determined link context and this failure condition occurs.</p>
@@ -14,31 +14,27 @@ <h3>A Link in an Adjacent Paragraph</h3>
          
             <p>
 A news service lists the first few sentences of an article in a paragraph. The next paragraph contains the link "Read More...". Because the link is not in the same paragraph as the lead sentence, the user cannot easily discover what the link will let the user read more about.</p>
-            <pre xml:space="preserve">
-&lt;p&gt;A British businessman has racked up 2 million flyer miles and plans to 
-travel on the world's first commercial tourism flights to space.&lt;/p&gt;
-
-&lt;p&gt;&lt;a href="ff.html"&gt;Read More...&lt;/a&gt;&lt;/p&gt;
-</pre>
+<pre xml:space="preserve"><code class="language-html">&lt;p&gt;A British businessman has racked up 2 million flyer miles and plans to 
+   travel on the world's first commercial tourism flights to space.&lt;/p&gt;
+&lt;p&gt;&lt;a href="ff.html"&gt;Read More...&lt;/a&gt;&lt;/p&gt;</code></pre>
          
       </section>
       <section class="example">
          <h3>A Link in an Adjacent Cell Within a Layout Table</h3>
          
             <p>An audio site provides links to where its player can be downloaded. The information about what would be downloaded by the link is in the preceding row of the layout table, which is not programmatically determined context for the link.</p>
-            <pre xml:space="preserve">
- &lt;table&gt;
-   &lt;tr&gt; 
-       &lt;td&gt;Play music from your browser&lt;/td&gt;
-   &lt;/tr&gt;
-   &lt;tr&gt;
-       &lt;td&gt;
-       &lt;a href="http://www.example.com/download.htm"&gt;
-       &lt;img src="download.jpg" width="165" height="32" alt="Download now"&gt;&lt;/a&gt;
-       &lt;/td&gt;
-   &lt;/tr&gt;
- &lt;/table&gt;
-</pre>
+<pre xml:space="preserve"><code class="language-html">&lt;table&gt;
+  &lt;tr&gt; 
+    &lt;td&gt;Play music from your browser&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;
+      &lt;a href="https://www.example.com/download.htm"&gt;
+        &lt;img src="download.jpg" width="165" height="32" alt="Download now"&gt;
+      &lt;/a&gt;
+    &lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/table&gt;</code></pre>
          
       </section>
    </section><section id="tests"><h2>Tests</h2>
@@ -46,7 +42,7 @@ <h3>A Link in an Adjacent Cell Within a Layout Table</h3>
          <p>Locate links where some additional link context is needed to understand the purpose of the link. For each link:</p>
          <ol>
             <li>Check whether the context is contained in the same sentence, paragraph, list item, table cell, or associated table headers.</li>
-            <li>Check whether the link context can be programmatically determined in some other way, for example, by using a WAI-ARIA property such as <code class="att">aria-label</code>, <code class="att">aria-labelledby</code> or <code class="att">aria-describedby</code> on the link to provide sufficient context</li>
+            <li>Check whether the link context can be programmatically determined in some other way, for example, by using a WAI-ARIA property such as <code class="language-html">aria-label</code>, <code class="language-html">aria-labelledby</code> or <code class="language-html">aria-describedby</code> on the link to provide sufficient context</li>
          </ol>
       </section>
       <section class="results"><h3>Expected Results</h3>
@@ -55,17 +51,18 @@ <h3>A Link in an Adjacent Cell Within a Layout Table</h3>
          </ul>
       </section>
    </section><section id="related"><h2>Related Techniques</h2><ul>
-      <li><a href="../aria/ARIA8">ARIA8</a></li>
       <li><a href="../aria/ARIA7">ARIA7</a></li>
+      <li><a href="../aria/ARIA8">ARIA8</a></li>
    </ul></section><section id="resources"><h2>Resources</h2>
       
          <ul>
             <li>
-                  <a href="https://www.w3.org/TR/wai-aria/">Accessible Rich Internet Applications (WAI-ARIA) 1.0</a>
-               </li>
+               <a href="https://www.w3.org/TR/wai-aria/">Accessible Rich Internet Applications (WAI-ARIA)</a>
+            </li>
             <li>
-                  <a href="https://www.w3.org/TR/wai-aria-practices/">WAI-ARIA 1.0 Authoring Practices</a>
-               </li>
+               <a href="https://www.w3.org/WAI/ARIA/apg/">WAI-ARIA Authoring Practices Guide</a>
+            </li>
          </ul>
       
-   </section></body></html>
\ No newline at end of file
+   </section>
+</body></html>
\ No newline at end of file
diff --git a/techniques/failures/F65.html b/techniques/failures/F65.html
index a0775c46ec..1979795151 100644
--- a/techniques/failures/F65.html
+++ b/techniques/failures/F65.html
@@ -1,9 +1,9 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Failure of Success Criterion 1.1.1 due to omitting the alt attribute or text alternative on img elements, area elements, and input elements of type "image"</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Failure of Success Criterion 1.1.1 due to omitting the alt attribute or text alternative on img elements, area elements, and input elements of type "image"</h1><section class="meta"><p class="id">ID: F65</p><p class="technology">Technology: failures</p><p class="type">Type: Failure</p></section><section id="applicability"><h2>When to Use</h2>
-      <p>HTML and XHTML</p>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Failure of Success Criterion 1.1.1 due to omitting the alt attribute or text alternative on img elements, area elements, and input elements of type "image"</title><link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"></link></head><body><h1>Failure of Success Criterion 1.1.1 due to omitting the alt attribute or text alternative on img elements, area elements, and input elements of type "image"</h1><section class="meta"><p class="id">ID: F65</p><p class="technology">Technology: failures</p><p class="type">Type: Failure</p></section><section id="applicability"><h2>When to Use</h2>
+      <p>HTML</p>
    </section><section id="description"><h2>Description</h2>
-      <p>This describes a failure condition for text alternatives on images. If there is no source of text to provide an alternative for the image then assistive technologies are not able to identify the image or to convey its purpose to the user. The <code class="att">alt</code> attribute continues to be the preferred way to provide alternative text for images. Appropriate WAI-ARIA attributes may be used to provide alternative text, as long as they are accessibility supported.  For more information about accessibility support, see <a href="https://www.w3.org/WAI/WCAG21/Understanding/documenting-accessibility-support">Documenting Accessibility Support</a>. The <a href="https://www.w3.org/TR/accname/">Accessible Name and Description Computation</a> described the method of deriving text alternative from the HTML and WAI-ARIA attributes of an element.</p>
+      <p>This describes a failure condition for text alternatives on images. If there is no source of text to provide an alternative for the image then assistive technologies are not able to identify the image or to convey its purpose to the user. The <code class="language-html">alt</code> attribute continues to be the preferred way to provide alternative text for images. Appropriate WAI-ARIA attributes may be used to provide alternative text, as long as they are accessibility supported.  For more information about accessibility support, see <a href="../../Understanding/documenting-accessibility-support">Documenting Accessibility Support</a>. The <a href="https://www.w3.org/TR/accname/">Accessible Name and Description Computation</a> described the method of deriving text alternative from the HTML and WAI-ARIA attributes of an element.</p>
       <p>
-Some Assistive Technologies attempt to compensate for the missing text alternatives by reading the file name of the image. But it is insufficient to rely simply on the file name for many reasons. For example, file names may not be descriptive (e.g., images/nav01.gif), and technology specifications do not require descriptive file names. And some Assistive Technologies do not read the file name if there is no text alternative provided via HTML attributes.
+Some Assistive Technologies attempt to compensate for the missing text alternatives by reading the file name of the image. But it is insufficient to rely simply on the file name for many reasons. For example, file names may not be descriptive (e.g., <code class="language-html">images/nav01.gif</code>), and technology specifications do not require descriptive file names. And some Assistive Technologies do not read the file name if there is no text alternative provided via HTML attributes.
 </p>
    </section><section id="examples"><h2>Examples</h2>
       <section class="example">
@@ -11,27 +11,16 @@ <h3>Missing text alternative</h3>
          
             <p>In the code example below, the person using a screen reader would not know the purpose of the image.</p>
          
-         <pre xml:space="preserve">
-&lt;img src="../images/animal.jpg" /&gt;
-</pre>
+         <pre xml:space="preserve"><code class="language-html">&lt;img src="../images/animal.jpg"&gt;</code></pre>
       </section>
    </section><section id="tests"><h2>Tests</h2>
       <section class="procedure"><h3>Procedure</h3>
-         <p>Identify <code class="el">img</code>, <code class="el">area</code> and <code class="el">input</code> elements of type <code class="attval">image</code>. For each of these elements:</p>
+         <p>Identify <code class="language-html">img</code>, <code class="language-html">area</code>, and <code class="language-html">input</code> elements of type <code class="language-html">image</code>. For each of these elements:</p>
          <ol>
-            <li>
-									         Check if the <code class="att">alt</code> attribute is present. 
-									
-               </li>
-            <li>
-                  Check if <code class="att">aria-labelledby</code> attribute is present AND references one or more id elements in the page AND check if <code class="att">aria-labelledby</code> is <a>accessibility supported</a>.
-								       </li>
-            <li>
-                  Check if the <code class="att">aria-label</code> attribute is present AND check if <code class="att">aria-label</code> is <a>accessibility supported</a>.
-               </li>
-            <li>
-                  Check if the <code class="att">title</code> attribute is present AND check if <code class="att">title</code> is <a> accessibility supported</a>.
-               </li>
+            <li>Check if the <code class="language-html">alt</code> attribute is present.</li>
+            <li>Check if <code class="language-html">aria-labelledby</code> attribute is present AND references one or more <code class="language-html">id</code> attributes in the page AND check if <code class="language-html">aria-labelledby</code> is <a>accessibility supported</a>.</li>
+            <li>Check if the <code class="language-html">aria-label</code> attribute is present AND check if <code class="language-html">aria-label</code> is <a>accessibility supported</a>.</li>
+            <li>Check if the <code class="language-html">title</code> attribute is present AND check if <code class="language-html">title</code> is <a> accessibility supported</a>.</li>
          </ol>
       </section>
       <section class="results"><h3>Expected Results</h3>
@@ -40,19 +29,17 @@ <h3>Missing text alternative</h3>
          </ul>
       </section>
    </section><section id="related"><h2>Related Techniques</h2><ul>
-      <li><a href="../html/H67">H67</a></li>
-      <li><a href="../html/H37">H37</a></li>
       <li><a href="../aria/ARIA10">ARIA10</a></li>
+      <li><a href="../html/H37">H37</a></li>
+      <li><a href="../html/H67">H67</a></li>
       
    </ul></section><section id="resources"><h2>Resources</h2>
       
          <ul>
-            <li>
-                  <a href="https://www.w3.org/TR/html-aapi/#accessible-name-and-description-calculation"> HTML to Platform Accessibility APIs Implementation Guide: Accessible Name and Description Calculation</a>
-               </li>
             <li>
                <a href="https://www.w3.org/TR/accname/">Accessible Name and Description Computation</a>
-               </li>
+            </li>
          </ul>
       
-   </section></body></html>
\ No newline at end of file
+   </section>
+</body></html>
\ No newline at end of file
diff --git a/techniques/failures/F66.html b/techniques/failures/F66.html
index 285dae8011..095963bb97 100644
--- a/techniques/failures/F66.html
+++ b/techniques/failures/F66.html
@@ -1,38 +1,37 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Failure of Success Criterion 3.2.3 due to presenting navigation links in a different relative order on different pages</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Failure of Success Criterion 3.2.3 due to presenting navigation links in a different relative order on different pages</h1><section class="meta"><p class="id">ID: F66</p><p class="technology">Technology: failures</p><p class="type">Type: Failure</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Failure of Success Criterion 3.2.3 due to presenting navigation links in a different relative order on different pages</title><link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/></head><body><h1>Failure of Success Criterion 3.2.3 due to presenting navigation links in a different relative order on different pages</h1><section class="meta"><p class="id">ID: F66</p><p class="technology">Technology: failures</p><p class="type">Type: Failure</p></section><section id="applicability"><h2>When to Use</h2>
       <p>Applies to all technologies</p>
    </section><section id="description"><h2>Description</h2>
       <p>This describes a failure condition for  all techniques involving navigation mechanisms that are repeated on multiple Web pages within a set of Web pages (Success Criterion 3.2.3). If the mechanism presents the order of links in a different order on two or more pages, then the failure is triggered.
 </p>
    </section><section id="examples"><h2>Examples</h2>
       <section class="example">
-         <h3>An XHTML menu presenting a series of links that are in a different relative order on two different pages</h3>
+         <h3>Navigation presenting a series of links that are in a different relative order on two different pages</h3>
          
             <p>Examples of a navigation mechanism that presents links in a different order.</p>
-            <p> 
-               <strong>Page 1 Menu</strong> 
-            </p>
+            <section id="page1nav">
+               <h4>Page 1 navigation</h4>
          
-         <pre xml:space="preserve">
-&lt;div id="menu"&gt; 
-    &lt;a href="Brazil.htm"&gt;Brazil&lt;/a&gt;&lt;br /&gt;
-    &lt;a href="Canada.htm"&gt;Canada&lt;/a&gt;&lt;br /&gt;
-    &lt;a href="Germany.htm"&gt;Germany&lt;/a&gt;&lt;br /&gt;
-    &lt;a href="Poland.htm"&gt;Poland&lt;/a&gt; 
-&lt;/div&gt;
-</pre>
+<pre xml:space="preserve"><code class="language-html">&lt;nav&gt;
+  &lt;ul&gt;
+    &lt;li&gt;&lt;a href="brazil.html"&gt;Brazil&lt;/a&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;a href="canada.html"&gt;Canada&lt;/a&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;a href="germany.html"&gt;Germany&lt;/a&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;a href="poland.html"&gt;Poland&lt;/a&gt;&lt;/li&gt;
+  &lt;/ul&gt;
+&lt;/nav&gt;</code></pre>
+            </section>
+            <section id="page2nav">
+               <h4>Page 2 navigation</h4>
          
-            <p> 
-               <strong>Page 2 Menu</strong> 
-            </p>
-         
-         <pre xml:space="preserve">
-&lt;div id="menu"&gt; 
-    &lt;a href="Canada.htm"&gt;Canada&lt;/a&gt;&lt;br /&gt;
-    &lt;a href="Brazil.htm"&gt;Brazil&lt;/a&gt;&lt;br /&gt;
-    &lt;a href="Germany.htm"&gt;Germany&lt;/a&gt;&lt;br /&gt;
-    &lt;a href="Poland.htm"&gt;Poland&lt;/a&gt; 
-&lt;/div&gt;
-</pre>
+<pre xml:space="preserve"><code class="language-html">&lt;nav&gt;
+  &lt;ul&gt;
+     &lt;li&gt;&lt;a href="canada.html"&gt;Canada&lt;/a&gt;&lt;/li&gt;
+     &lt;li&gt;&lt;a href="brazil.html"&gt;Brazil&lt;/a&gt;&lt;/li&gt;
+     &lt;li&gt;&lt;a href="germany.html"&gt;Germany&lt;/a&gt;&lt;/li&gt;
+     &lt;li&gt;&lt;a href="poland.html"&gt;Poland&lt;/a&gt;&lt;/li&gt;
+  &lt;/ul&gt;
+&lt;/nav&gt;</code></pre>
+            </section>
       </section>
    </section><section id="tests"><h2>Tests</h2>
       <section class="procedure"><h3>Procedure</h3>
@@ -55,4 +54,5 @@ <h3>An XHTML menu presenting a series of links that are in a different relative
     </li>
          </ul>
       </section>
-   </section><section id="related"><h2>Related Techniques</h2></section><section id="resources"><h2>Resources</h2></section></body></html>
\ No newline at end of file
+   </section><section id="related"><h2>Related Techniques</h2></section><section id="resources"><h2>Resources</h2></section>
+</body></html>
\ No newline at end of file
diff --git a/techniques/failures/F67.html b/techniques/failures/F67.html
index d10dca48c4..b5a9400b4c 100644
--- a/techniques/failures/F67.html
+++ b/techniques/failures/F67.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Failure of Success Criterion 1.1.1 and 1.2.1 due to providing long descriptions for non-text content that does not serve the same purpose or does not present the same information</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Failure of Success Criterion 1.1.1 and 1.2.1 due to providing long descriptions for non-text content that does not serve the same purpose or does not present the same information</h1><section class="meta"><p class="id">ID: F67</p><p class="technology">Technology: failures</p><p class="type">Type: Failure</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Failure of Success Criterion 1.1.1 and 1.2.1 due to providing long descriptions for non-text content that does not serve the same purpose or does not present the same information</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/></head><body><h1>Failure of Success Criterion 1.1.1 and 1.2.1 due to providing long descriptions for non-text content that does not serve the same purpose or does not present the same information</h1><section class="meta"><p class="id">ID: F67</p><p class="technology">Technology: failures</p><p class="type">Type: Failure</p></section><section id="applicability"><h2>When to Use</h2>
       <p>All technologies.</p>
    </section><section id="description"><h2>Description</h2>
       <p>The objective of this technique is to describe the failure that occurs when the long description for non-text content does not serve the same purpose or does not present the same information as the non-text content.  This can cause problems for people who cannot interpret the non-text content because they rely on the long description to provide the necessary information conveyed by the non-text content.  Without a long description that provides complete information, a person may not be able to comprehend or interact with the Web page.
@@ -17,7 +17,7 @@
       </section>
       <section class="results"><h3>Expected Results</h3>
          <ul>
-            <li>If step #1 is false, then this failure condition applies and the content fails this Success Criterion.</li>
+            <li>If check #1 is false, then this failure condition applies and the content fails this Success Criterion.</li>
          </ul>
       </section>
    </section><section id="related"><h2>Related Techniques</h2><ul>
diff --git a/techniques/failures/F68.html b/techniques/failures/F68.html
index 527521f0d6..941409b2c6 100644
--- a/techniques/failures/F68.html
+++ b/techniques/failures/F68.html
@@ -1,87 +1,82 @@
 <!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Failure of Success Criterion 4.1.2 due to a user interface control not having a programmatically determined name
-   </title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Failure of Success Criterion 4.1.2 due to a user interface control not having a programmatically determined name
+   </title><link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/></head><body><h1>Failure of Success Criterion 4.1.2 due to a user interface control not having a programmatically determined name
    </h1><section class="meta"><p class="id">ID: F68</p><p class="technology">Technology: failures</p><p class="type">Type: Failure</p></section><section id="applicability"><h2>When to Use</h2>
       <p>HTML controls</p>
    </section><section id="description"><h2>Description</h2>
-      <p>This failure describes a problem that occurs when a form control does not have a name exposed to assistive technologies. The result is that some users will not be able to identify the purpose of the form control. The name can be provided in multiple ways, including the <code class="el">label</code> element. Other options include use of the <code class="att">title</code> attribute and <code class="att">aria-label</code> which are used to directly provide text that is used for the accessibility name or <code class="att">aria-labelledby</code> which indicates an association with other text on a page that is providing the name. Button controls can have a name assigned in other ways, as indicated below, but in certain situations may require use of <code class="att">label</code>, <code class="att">title</code>, <code class="att">aria-label</code>, or <code class="att">aria-labelledby</code>.</p>
+      <p>This failure describes a problem that occurs when a form control does not have a name exposed to assistive technologies. The result is that some users will not be able to identify the purpose of the form control. The name can be provided in multiple ways, including the <code class="language-html">label</code> element. Other options include use of the <code class="language-html">title</code> attribute and <code class="language-html">aria-label</code> which are used to directly provide text that is used for the accessibility name or <code class="language-html">aria-labelledby</code> which indicates an association with other text on a page that is providing the name. Button controls can have a name assigned in other ways, as indicated below, but in certain situations may require use of <code class="language-html">label</code>, <code class="language-html">title</code>, <code class="language-html">aria-label</code>, or <code class="language-html">aria-labelledby</code>.</p>
       <div class="note">
-         <p>Elements that can use an explicitly-associated <code class="el">label</code> element are:</p>
+         <p>Elements that can use an explicitly-associated <code class="language-html">label</code> element are:</p>
          <ul>
             <li>
-                  <code class="el">input</code>
+                  <code class="language-html">input</code>
                </li>
             <li>
-                  <code class="el">textarea</code>
+                  <code class="language-html">textarea</code>
                </li>
             <li>
-                  <code class="el">select</code>
+                  <code class="language-html">select</code>
                </li>
          </ul>
-         <p>The <code class="el">label</code> element is not used for the following because labels for these elements are provided via the <code class="att">value</code> attribute (for Submit and Reset buttons), the <code class="att">alt</code> attribute (for image buttons), or element content itself (<code class="el">button</code>):</p>
+         <p>The <code class="language-html">label</code> element is not used for the following because labels for these elements are provided via the <code class="language-html">value</code> attribute (for Submit and Reset buttons), the <code class="language-html">alt</code> attribute (for image buttons), or element content itself (<code class="language-html">button</code>):</p>
          <ul>
-            <li>Submit and Reset buttons (input type="submit" or input type="reset")</li>
-            <li>Image buttons (input type="image")</li>
-            <li>Hidden input fields (input type="hidden")</li>
-            <li>Buttons (button elements or &lt;input type="button"&gt;)</li>
+            <li>Submit and Reset buttons (<code class="language-html">&lt;input type="submit"&gt;</code> or <code class="language-html">&lt;input type="reset"&gt;</code>)</li>
+            <li>Image buttons (<code class="language-html">&lt;input type="image"&gt;</code>)</li>
+            <li>Hidden input fields (<code class="language-html">&lt;input type="hidden"&gt;</code>)</li>
+            <li>Buttons (button elements or <code class="language-html">&lt;input type="button"&gt;</code>)</li>
          </ul>
       </div>
    </section><section id="examples"><h2>Examples</h2>
       <section class="example">
          <h3></h3>
          
-            <p>The following example demonstrates a form that visually presents labels for form controls, but does not use the <code class="el">label</code> element to associate them with their controls. The code example below is a failure because assistive technology may not be able to determine which label goes with which control.</p>
-            <pre xml:space="preserve">
-&lt;form&gt;
- First name: 
- &lt;input type="text" name="firstname"&gt;
- &lt;br&gt;
- Last name: 
- &lt;input type="text" name="lastname"&gt;
- &lt;br&gt;
- I have a dog &lt;input type="checkbox" name="pet" value="dog"&gt;
- I have a cat &lt;input type="checkbox" name="pet" value="cat"&gt;
-&lt;/form&gt;
-</pre>
+            <p>The following example demonstrates a form that visually presents labels for form controls, but does not use the <code class="language-html">label</code> element to associate them with their controls. The code example below is a failure because assistive technology may not be able to determine which label goes with which control.</p>
+            <pre xml:space="preserve"><code class="language-html">&lt;form&gt;
+  First name:
+  &lt;input type="text" name="firstname"&gt;
+  &lt;br&gt;
+  Last name: 
+  &lt;input type="text" name="lastname"&gt;
+  &lt;br&gt;
+  I have a dog &lt;input type="checkbox" name="pet" value="dog"&gt;
+  I have a cat &lt;input type="checkbox" name="pet" value="cat"&gt;
+&lt;/form&gt;</code></pre>
          
       </section>
       <section class="example">
          <h3></h3>
          
-            <p>In the following code example, <code class="el">label</code> elements are present, but they are not programmatically linked to the corresponding input controls and may therefore not be properly determined by assistive technology.</p>
-            <pre xml:space="preserve">
-&lt;form action="..." method="post"&gt; 
-&lt;p&gt; 
-&lt;label&gt;First Name&lt;/label&gt;
-&lt;input type="text" name="firstname"&gt; 
-&lt;label&gt;Last Name&lt;/label&gt; 
-&lt;input type="text" name="lastname"&gt; 
-&lt;/p&gt; 
-&lt;/form&gt;
-</pre>
+            <p>In the following code example, <code class="language-html">label</code> elements are present, but they are not programmatically linked to the corresponding input controls and may therefore not be properly determined by assistive technology.</p>
+<pre xml:space="preserve"><code class="language-html">&lt;form&gt; 
+  &lt;p&gt; 
+    &lt;label&gt;First Name&lt;/label&gt;
+    &lt;input type="text" name="firstname"&gt; 
+    &lt;label&gt;Last Name&lt;/label&gt; 
+    &lt;input type="text" name="lastname"&gt; 
+  &lt;/p&gt; 
+&lt;/form&gt;</code></pre>
          
       </section>
       <section class="example">
          <h3></h3>
          
             <p>The search text box in the following code example does not have a programmatically determinable name. The name can be supplied with any of the approaches mentioned above.</p>
-            <pre xml:space="preserve">
-&lt;input type="text" value="Type your search here"&gt;&lt;input type="submit" type="submit" value="Search"&gt;
-</pre>
+<pre xml:space="preserve"><code class="language-html">&lt;input type="text" value="Type your search here"&gt;
+&lt;input type="submit" value="Search"&gt;</code></pre>
          
       </section>
    </section><section id="tests"><h2>Tests</h2>
       <section class="procedure"><h3>Procedure</h3>
-         <p>For all <code class="el">input</code>, <code class="el">textarea</code> and <code class="el">select</code> elements in the Web page (except inputs of type <code class="attval">hidden</code>, <code class="attval">submit</code>, <code class="attval">reset</code>, or <code class="attval">button</code>:</p>
+         <p>For all <code class="language-html">input</code>, <code class="language-html">textarea</code>, and <code class="language-html">select</code> elements in the Web page (except inputs of type <code class="language-html">hidden</code>, <code class="language-html">submit</code>, <code class="language-html">reset</code>, or <code class="language-html">button</code>:</p>
          <ol>
             <li>
                <p>Check that each element has a programmatically determined name using one of the following ways:</p>
                <ol>
-				  <li>the text label or labels are programmatically associated with the control element via the <code class="att">aria-labelledby</code> attribute (each id given as a value in the <code class="att">aria-labelledby</code> attribute matches the <code class="att">id</code> of the text label element).</li>
-				  <li>the control is programmatically determined through the value of its <code class="att">aria-label</code> attribute.</li>
-                  <li>the text label is contained in a <code class="el">label</code> element that is correctly associated to the respective <code class="el">input</code> element via the label's <code class="att">for</code> attribute (the <code class="att">id</code> given as value in the <code class="att">for</code> attribute matches the <code class="att">id</code> of the input element).</li>
-                  <li>the control is contained within a <code class="el">label</code> element that also contains the label text.</li>
-				  <li>the control is an <code class="el">input</code> of <code class="att">type</code> <code class="attval">image</code> and the <code class="att">alt</code> attribute provides a text label.</li>
-                  <li>the control is programmatically determined through the value of <code class="att">title</code> attribute.</li>
+				  <li>the text label or labels are programmatically associated with the control element via the <code class="language-html">aria-labelledby</code> attribute (each id given as a value in the <code class="language-html">aria-labelledby</code> attribute matches the <code class="language-html">id</code> of the text label element).</li>
+				  <li>the control is programmatically determined through the value of its <code class="language-html">aria-label</code> attribute.</li>
+                  <li>the text label is contained in a <code class="language-html">label</code> element that is correctly associated to the respective <code class="language-html">input</code> element via the label's <code class="language-html">for</code> attribute (the <code class="language-html">id</code> given as value in the <code class="language-html">for</code> attribute matches the <code class="language-html">id</code> of the input element).</li>
+                  <li>the control is contained within a <code class="language-html">label</code> element that also contains the label text.</li>
+				  <li>the control is an <code class="language-html">input</code> of <code class="language-html">type</code> <code class="language-html">image</code> and the <code class="language-html">alt</code> attribute provides a text label.</li>
+                  <li>the control is programmatically determined through the value of <code class="language-html">title</code> attribute.</li>
                </ol>
             </li>
          </ol>
@@ -111,4 +106,5 @@ <h3></h3>
                </li>
          </ul>
       
-   </section></body></html>
\ No newline at end of file
+   </section>
+</body></html>
\ No newline at end of file
diff --git a/techniques/failures/F69.html b/techniques/failures/F69.html
index 5fcb6c7b63..fda9f3e2fc 100644
--- a/techniques/failures/F69.html
+++ b/techniques/failures/F69.html
@@ -1,5 +1,5 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Failure of Success Criterion 1.4.4 when resizing visually rendered text up to 200 percent causes the text, image or controls to be clipped, truncated or obscured</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Failure of Success Criterion 1.4.4 when resizing visually rendered text up to 200 percent causes the text, image or controls to be clipped, truncated or obscured</h1><section class="meta"><p class="id">ID: F69</p><p class="technology">Technology: failures</p><p class="type">Type: Failure</p></section><section id="applicability"><h2>When to Use</h2>
-      <p>HTML, XHTML and CSS</p>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Failure of Success Criterion 1.4.4 when resizing visually rendered text up to 200 percent causes the text, image or controls to be clipped, truncated or obscured</title><link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/></head><body><h1>Failure of Success Criterion 1.4.4 when resizing visually rendered text up to 200 percent causes the text, image or controls to be clipped, truncated or obscured</h1><section class="meta"><p class="id">ID: F69</p><p class="technology">Technology: failures</p><p class="type">Type: Failure</p></section><section id="applicability"><h2>When to Use</h2>
+      <p>HTML and CSS</p>
    </section><section id="description"><h2>Description</h2>
       <p>The objective of this failure condition is to describe a problem that occurs when changing the size of text causes text to be clipped, truncated, or obscured, so that it is no longer available to the user. In general, this failure occurs when there is no way for a user agent's layout engine to honor all the layout hints in the HTML at the new font size. Some of the ways in which this can occur include:</p>
       <ul>
@@ -14,40 +14,38 @@
       </div>
    </section><section id="examples"><h2>Examples</h2>
       <section class="example">
-         <h3></h3>
+         <h3>Overflowing text</h3>
          
-            <p>The font size is set in a scalable way, but the container is set to a fixed pixel size. A gray border shows the boundaries of the text container. When the text is resized, it spills out of its container, and obsures the next paragraph.</p>
+            <p>The font size is set in a scalable way, but the container is set to a fixed pixel size. A gray border shows the boundaries of the text container. When the text is resized, it spills out of its container, and obscures the next paragraph.</p>
          
-         <pre xml:space="preserve">
-&lt;div style="font-size:100%; width:120px; height:100px; border: thin solid gray;"&gt; 
+<pre xml:space="preserve"><code class="language-html">&lt;div style="font-size:100%; width:120px; height:100px; border: thin solid gray;"&gt; 
   Now is the time for all good men to come to the aid of their country. 
 &lt;/div&gt;
-&lt;p&gt;Now is the time for all good men to come to the aid of their country.&lt;/p&gt;
-</pre>
+&lt;p&gt;The quick brown fox jumps over the lazy dog.&lt;/p&gt;</code></pre>
          
             <p>Illustration of example 1:</p>
             <figure id="figure-text-out-of-container">
-            	<img src="img/F69-obscured.gif"/>
+            	<img alt="The 'now is the time' text extends out of the bottom of its container, and obscures the start of the 'quick brown fox' text that is outside of the container." src="img/F69-obscured.png" height="129" width="335"/>
             	<figcaption>Example showing text that spills outside of its container, obscuring other text on the page.</figcaption>
             </figure>
             
          
       </section>
       <section class="example">
-         <h3></h3>
+         <h3>Truncated text</h3>
          
             <p>This example is identical to the last one, except that the container is set to clip the text. The text is no longer bleeding into the next paragraph, but now it is truncated. This is also a failure.</p>
          
-         <pre xml:space="preserve">
-&lt;div style="font-size:100%; width:120px; height:100px; overflow: hidden; border: thin solid gray;"&gt;
+<pre xml:space="preserve"><code class="language-html">&lt;div style="font-size:100%; width:120px; height:100px; overflow: hidden; 
+ border: thin solid gray;"&gt;
  Now is the time for all good men to come to the aid of their country. 
 &lt;/div&gt;
-&lt;p&gt;Now is the time for all good men to come to the aid of their country.&lt;/p&gt;
+&lt;p&gt;The quick brown fox jumps over the lazy dog.&lt;/p&gt;</code>
 </pre>
          
             <p>Illustration of example 2:</p>
             <figure id="figure-text-truncated-resized">
-            	<img src="img/F69-truncated.gif"/>
+            	<img alt="The 'now is the time' text is clipped so that content after the word 'their' is hidden." src="img/F69-truncated.png" height="129" width="335"/>
             	<figcaption>Example showing text that truncated due to resized text.</figcaption>
             </figure>
             
@@ -69,4 +67,5 @@ <h3></h3>
             <li>If check #2 is false, then the failure condition applies and the content fails these Success Criteria.</li>
          </ul>
       </section>
-   </section><section id="related"><h2>Related Techniques</h2></section></body></html>
+   </section><section id="related"><h2>Related Techniques</h2></section>
+</body></html>
diff --git a/techniques/failures/F7.html b/techniques/failures/F7.html
index 7fa4fd5b1d..fe97a93eb1 100644
--- a/techniques/failures/F7.html
+++ b/techniques/failures/F7.html
@@ -1,6 +1,6 @@
 <!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Failure of Success Criterion 2.2.2 due to an object or applet
                     that has blinking content without a mechanism to pause the content that blinks
-                    for more than five seconds</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Failure of Success Criterion 2.2.2 due to an object or applet
+                    for more than five seconds</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/></head><body><h1>Failure of Success Criterion 2.2.2 due to an object or applet
                     that has blinking content without a mechanism to pause the content that blinks
                     for more than five seconds</h1><section class="meta"><p class="id">ID: F7</p><p class="technology">Technology: failures</p><p class="type">Type: Failure</p></section><section id="applicability"><h2>When to Use</h2>
       <p>Technologies that support blinking content within an object, applet, or a
@@ -30,7 +30,7 @@
       </section>
       <section class="results"><h3>Expected Results</h3>
          <ul>
-            <li>If step #1 is true and step #2 is false, the content fails the success
+            <li>If check #1 is true and check #2 is false, the content fails the success
                                     criterion.</li>
          </ul>
       </section>
diff --git a/techniques/failures/F70.html b/techniques/failures/F70.html
index 68220a198b..0b2d9cd0a9 100644
--- a/techniques/failures/F70.html
+++ b/techniques/failures/F70.html
@@ -1,5 +1,10 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Failure of Success Criterion 4.1.1 due to incorrect use of start and end tags or attribute markup</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Failure of Success Criterion 4.1.1 due to incorrect use of start and end tags or attribute markup</h1><section class="meta"><p class="id">ID: F70</p><p class="technology">Technology: failures</p><p class="type">Type: Failure</p></section><section id="applicability"><h2>When to Use</h2>
-      <p>Markup languages: HTML, XHTML, and other SGML or XML-based technologies.</p>
+---
+obsoleteMessage: |
+  This failure relates to 4.1.1: Parsing, which was removed as of WCAG 2.2.
+obsoleteSince: 22
+---
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Failure of Success Criterion 4.1.1 due to incorrect use of start and end tags or attribute markup</title><link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/></head><body><h1>Failure of Success Criterion 4.1.1 due to incorrect use of start and end tags or attribute markup</h1><section class="meta"><p class="id">ID: F70</p><p class="technology">Technology: failures</p><p class="type">Type: Failure</p></section><section id="applicability"><h2>When to Use</h2>
+      <p>Markup languages: HTML, and other SGML or XML-based technologies.</p>
    </section><section id="description"><h2>Description</h2>
       <p>The objective of this failure is to identify examples of markup errors in element tags that could cause assistive technology to be unable to generate a satisfactory model of the page. Different user agents may implement different heuristics to recover from errors, resulting in inconsistent presentations of the page between user agents.</p>
       <p>Some common types of problems with start and end tags that lead to this failure condition (though this is not an exhaustive list):</p>
@@ -13,59 +18,47 @@
       </ul>
    </section><section id="examples"><h2>Examples</h2>
       <section class="example">
-         <h3>Missing angle brackets in XHTML</h3>
+         <h3>Missing angle brackets</h3>
          
             <p>The following code fails because the opening tag is missing an angle bracket, and the intended boundary of the tag is unclear.</p>
          
-         <pre xml:space="preserve">
-&lt;p This is a paragraph&lt;/p&gt;
-</pre>
+         <pre xml:space="preserve"><code class="language-html">&lt;p This is a paragraph&lt;/p&gt;</code></pre>
       </section>
       <section class="example">
-         <h3>Missing slash on closing tag in XHTML</h3>
+         <h3>Missing slash on closing tag</h3>
          
             <p>The following code fails because the closing tag is missing the slash, making it look like it is in fact another opening tag.</p>
          
-         <pre xml:space="preserve">
-&lt;p&gt;This is a paragraph&lt;p&gt;
-</pre>
+         <pre xml:space="preserve"><code class="language-html">&lt;p&gt;This is a paragraph&lt;p&gt;</code></pre>
       </section>
       <section class="example">
          <h3>Unbalanced attribute quoting</h3>
          
             <p>The following code fails because the attribute value is missing the closing quote, which makes the boundary of the attribute-value pair unclear.</p>
          
-         <pre xml:space="preserve">
-&lt;input title="name type="text"&gt;
-</pre>
+         <pre xml:space="preserve"><code class="language-html">&lt;input title="name type="text"&gt;</code></pre>
       </section>
       <section class="example">
          <h3>Lack of whitespace between attributes</h3>
          
             <p>The following code fails because the there is not whitespace between attributes, which makes the boundary between attribute-value pairs unclear.</p>
          
-         <pre xml:space="preserve">
-&lt;input title="name"type="text"&gt;
-</pre>
+         <pre xml:space="preserve"><code class="language-html">&lt;input title="name"type="text"&gt;</code></pre>
       </section>
       <section class="example">
          <h3>Unquoted attribute with whitespace value</h3>
          
             <p>The following code fails because an attribute value is not quoted and contains whitespace, which makes the boundary of the attribute-value pair unclear.</p>
          
-         <pre xml:space="preserve">
-&lt;input title=Enter name here type=text&gt;
-</pre>
+         <pre xml:space="preserve"><code class="language-html">&lt;input title=Enter name here type=text&gt;</code></pre>
       </section>
       <section class="example">
-         <h3>Missing end tags in XHTML</h3>
+         <h3>Missing end tags</h3>
          
             <p>The following code fails because the closing tag of the first paragraph is missing, making it unclear whether the second paragraph is a child or sibling of the first.</p>
          
-         <pre xml:space="preserve">
-&lt;p&gt;This is a paragraph
-&lt;p&gt;This is another paragraph&lt;/p&gt;
-</pre>
+         <pre xml:space="preserve"><code class="language-html">&lt;p&gt;This is a paragraph
+&lt;p&gt;This is another paragraph&lt;/p&gt;</code></pre>
       </section>
    </section><section id="tests"><h2>Tests</h2>
       <section class="procedure"><h3>Procedure</h3>
@@ -79,4 +72,5 @@ <h3>Missing end tags in XHTML</h3>
             <li>If check #2 is true, then the failure condition applies and the content does not meet this Success Criterion.</li>
          </ul>
       </section>
-   </section><section id="related"><h2>Related Techniques</h2></section></body></html>
\ No newline at end of file
+   </section><section id="related"><h2>Related Techniques</h2></section>
+</body></html>
diff --git a/techniques/failures/F71.html b/techniques/failures/F71.html
index e1bb85df76..4e3dc80c9d 100644
--- a/techniques/failures/F71.html
+++ b/techniques/failures/F71.html
@@ -1,8 +1,8 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Failure of Success Criterion 1.1.1 due to using text look-alikes to represent text without providing a text alternative</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Failure of Success Criterion 1.1.1 due to using text look-alikes to represent text without providing a text alternative</h1><section class="meta"><p class="id">ID: F71</p><p class="technology">Technology: failures</p><p class="type">Type: Failure</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Failure of Success Criterion 1.1.1 due to using text look-alikes to represent text without providing a text alternative</title><link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/></head><body><h1>Failure of Success Criterion 1.1.1 due to using text look-alikes to represent text without providing a text alternative</h1><section class="meta"><p class="id">ID: F71</p><p class="technology">Technology: failures</p><p class="type">Type: Failure</p></section><section id="applicability"><h2>When to Use</h2>
       <p>Any technology.</p>
    </section><section id="description"><h2>Description</h2>
       <p>The objective of this failure condition is to avoid substituting characters whose glyphs look similar to the intended character, for that intended character. The Unicode character set defines thousands of characters, covering dozens of writing systems. While the glyphs for some of these characters may look like the glyphs for other characters in visual presentation, they are not processed the same by text-to-speech tools.</p>
-      <p>For example, the characters U+0063 and U+03F2 both look like the letter "c", yet the first is from the Western alphabet and the second from the Greek alphabet and not used in Western languages. The characters U+0033 and U+04E0 both look like the number "3", yet the second is actually a letter from the Cyrillic alphabet.</p>
+      <p>For example, the characters <code>U+0063</code> and <code>U+03F2</code> both look like the letter "c", yet the first is from the Western alphabet and the second from the Greek alphabet and not used in Western languages. The characters <code>U+0033</code> and <code>U+04E0</code> both look like the number "3", yet the second is actually a letter from the Cyrillic alphabet.</p>
       <div class="note">
          <p>This failure also applies to the use of character entities. It is the incorrect character used because of its glyph representation that comprises a failure, not the mechanism by which that character is implemented.</p>
       </div>
@@ -10,20 +10,16 @@
       <section class="example">
          <h3>Characters </h3>
          
-            <p>The following word looks, in browsers with appropriate font support, like the English word "cook", yet is composed of the string U+03f2 U+043E U+03BF U+006B, only one of which is a letter from the Western alphabet. This word will not be processed meaningfully, and a text alternative is not provided.</p>
+            <p>The following word looks, in browsers with appropriate font support, like the English word "cook", yet is composed of the string <code>U+03f2 U+043E U+03BF U+006B</code>, only one of which is a letter from the Western alphabet. This word will not be processed meaningfully, and a text alternative is not provided.</p>
          
-         <pre xml:space="preserve">
-ϲоοk
-</pre>
+         <pre xml:space="preserve"><code>ϲоοk</code></pre>
       </section>
       <section class="example">
          <h3>Character entities</h3>
          
-            <p>The following example, like the one above, will look like the English word "cook" when rendered in browsers with appropriate font support. In this case, the characters are implemented with character entities, but the word will still not be processed meaningfully, and a text alternative is not provided.</p>
+            <p>The following example, like its predecessor, will look like the English word "cook" when rendered in browsers with appropriate font support. In this case, the characters are implemented with character entities, but the word will still not be processed meaningfully, and a text alternative is not provided.</p>
          
-         <pre xml:space="preserve">
-&amp;#x03F2;&amp;#x043E;&amp;#x03BF;&amp;#x006B;
-</pre>
+         <pre xml:space="preserve"><code>&amp;#x03F2;&amp;#x043E;&amp;#x03BF;&amp;#x006B;</code></pre>
          
             <p>Working Example: "ϲоοk"</p>
          
@@ -40,4 +36,5 @@ <h3>Character entities</h3>
             <li>If look-alike glyphs are used, and there is not a text alternative for any range of text that uses look-alike glyphs, then the content does not meet the Success Criterion.</li>
          </ul>
       </section>
-   </section><section id="related"><h2>Related Techniques</h2></section></body></html>
\ No newline at end of file
+   </section><section id="related"><h2>Related Techniques</h2></section>
+</body></html>
\ No newline at end of file
diff --git a/techniques/failures/F72.html b/techniques/failures/F72.html
index a317e901a6..f0fc1dfde9 100644
--- a/techniques/failures/F72.html
+++ b/techniques/failures/F72.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Failure of Success Criterion 1.1.1 due to using ASCII art without providing a text alternative</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Failure of Success Criterion 1.1.1 due to using ASCII art without providing a text alternative</h1><section class="meta"><p class="id">ID: F72</p><p class="technology">Technology: failures</p><p class="type">Type: Failure</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Failure of Success Criterion 1.1.1 due to using ASCII art without providing a text alternative</title><link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/></head><body><h1>Failure of Success Criterion 1.1.1 due to using ASCII art without providing a text alternative</h1><section class="meta"><p class="id">ID: F72</p><p class="technology">Technology: failures</p><p class="type">Type: Failure</p></section><section id="applicability"><h2>When to Use</h2>
       <p>Any technology.</p>
    </section><section id="description"><h2>Description</h2>
       <p>The objective of this failure condition is to avoid the use of <a>ASCII art</a> when a text alternative is not provided. Although ASCII art is implemented as a character string, its meaning comes from the pattern of glyphs formed by a visual presentation of that string, not from the text itself. Therefore ASCII art is non-text content and requires a text alternative. Text alternatives, or links to them, should be placed near the ASCII art in order to be associated with it.</p>
@@ -6,10 +6,9 @@
       <section class="example">
          <h3> ASCII Art chart without a text alternative </h3>
          
-            <p>The following ASCII art chart lacks a text alternative and therefore does not meet Success Criterion 1.1.1. Note this failure example does in fact cause this page to fail, but you may <a href="#F72-related-techs">skip over the example</a>.</p>
+            <p>The following ASCII art chart lacks a text alternative and therefore does not meet Success Criterion 1.1.1. Note this failure example does in fact cause this page to fail, but you may <a href="#tests">skip over the example</a>.</p>
          
          <pre xml:space="preserve">
-&lt;pre&gt;
   %   __ __ __ __ __ __ __ __ __ __ __ __ __ __   
 100 |             *                             |
  90 |                *  *                       |
@@ -23,7 +22,6 @@ <h3> ASCII Art chart without a text alternative </h3>
  10 |    @                       @  @  @  @     |
       0  5 10 15 20 25 30 35 40 45 50 55 60 65 70
       Flash frequency (Hz)
-&lt;/pre&gt;
 </pre>
       </section>
    </section><section id="tests"><h2>Tests</h2>
@@ -38,4 +36,5 @@ <h3> ASCII Art chart without a text alternative </h3>
             <li>If check #2 is false, then this failure condition applies and the content fails this Success Criterion.</li>
          </ul>
       </section>
-   </section><section id="related"><h2>Related Techniques</h2></section></body></html>
\ No newline at end of file
+   </section><section id="related"><h2>Related Techniques</h2></section>
+</body></html>
\ No newline at end of file
diff --git a/techniques/failures/F73.html b/techniques/failures/F73.html
index badc77bf53..a4581df617 100644
--- a/techniques/failures/F73.html
+++ b/techniques/failures/F73.html
@@ -1,46 +1,40 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Failure of Success Criterion 1.4.1 due to creating links that are not visually evident without color vision</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Failure of Success Criterion 1.4.1 due to creating links that are not visually evident without color vision</h1><section class="meta"><p class="id">ID: F73</p><p class="technology">Technology: failures</p><p class="type">Type: Failure</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Failure of Success Criterion 1.4.1 due to creating links that are not visually evident without color vision</title><link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/></head><body><h1>Failure of Success Criterion 1.4.1 due to creating links that are not visually evident without color vision</h1><section class="meta"><p class="id">ID: F73</p><p class="technology">Technology: failures</p><p class="type">Type: Failure</p></section><section id="applicability"><h2>When to Use</h2>
       <p>Any technology.</p>
    </section><section id="description"><h2>Description</h2>
-      <p>The objective of this failure is to avoid situations in which people who cannot perceive color differences cannot identify links (when people with color vision can identify links). Link underlines or some other non-color visual distinction are required (when the links are discernible to those with color vision). </p>
+      <p>The objective of this failure is to avoid situations in which people who cannot perceive color differences cannot identify links (when people with color vision can identify links). Link underlines or some other non-color visual distinction are required (when the links are discernible to those with color vision).</p>
       <p>While some links may be visually evident from page design and context, such as navigational links, links within text are often visually understood only from their own display attributes. Removing the underline and leaving only the color difference for such links would be a failure because there would be no other visual indication (besides color) that it is a link.</p>
       <div class="note">
-         <p>Red and Pink are the same color (hue) but they have different lightness (which is not color ).   So red and pink would pass the requirement for "not distinguished by color (hue) alone" since they differ by lightness (which is not color) - as long as the difference in lightness (contrast) is 3:1 or greater. For example, if surrounding text is RED and the link is PINK it would pass.  Similarly a light green and a dark red differ BOTH by color AND by lightness so they would pass if the contrast (lightness) difference is 3:1 or greater before focus or pointing.</p>
+         <p>Red and pink are the same color (hue) but they have different lightness (which is not color). So red and pink would pass the requirement for "not distinguished by color (hue) alone" since they differ by lightness (which is not color) - as long as the difference in lightness (contrast) is 3:1 or greater. For example, if surrounding text is red and the link is pink it would pass.  Similarly a light green and a dark red differ <strong>both</strong> by color <strong>and</strong> by lightness so they would pass if the contrast (lightness) difference is 3:1 or greater before focus or pointing.</p>
          <p>There is no requirement that links be identifiable by people who cannot perceive color if they are not perceivable for those with color vision. (e.g. if the links are hidden for everyone – as in a game or test).</p>
          <p>If the non-color cue only happens when the mouse hovers over the link or when the link receives focus, it is still a failure.</p>
          <p>If the link is a different color and bold it would not fail because the boldness is not color dependent.</p>
       </div>
    </section><section id="examples"><h2>Examples</h2>
       <section class="example">
-         <h3></h3>
+         <h3>Links with no underlines and similar contrast to body text</h3>
          
             <p>A Web page includes a large number of links within the body text. The links are styled so that they do not have underlines and are very similar in color to the body text. This would be a failure because users would be unable to differentiate the links from the body text.</p>
          
       </section>
       <section class="example">
-         <h3></h3>
+         <h3>Removing the underline from a link in a sentence or paragraph without providing another visual cue besides color</h3>
          
-            <p>The following code is an example of removing the underline from a link in a sentence or paragraph without providing another visual cue besides color.</p>
-         
-         <pre xml:space="preserve">
-&lt;head&gt;
-&lt;style type="text/css"&gt;
-p a:link {text-decoration: none}
-p a:visited {text-decoration: none}
-p a:active {text-decoration: none}
-p a:hover {text-decoration: underline; color: red;}
-&lt;/style&gt;
+<pre xml:space="preserve"><code class="language-html">&lt;head&gt;
+  &lt;style&gt;
+    p a:link {text-decoration: none}
+    p a:visited {text-decoration: none}
+    p a:active {text-decoration: none}
+    p a:hover {text-decoration: underline; color: red;}
+  &lt;/style&gt;
 &lt;/head&gt;
-
 &lt;body&gt;
-
-&lt;p&gt;To find out more about the &lt;a href="rain_in_spain.htm"&gt;rain in spain&lt;/a&gt;there are many resources.&lt;/p&gt;
-
-&lt;/body&gt;
-</pre>
+  &lt;p&gt;There are many resources to find out more about the 
+     &lt;a href="rain-in-spain.html"&gt;rain in Spain&lt;/a&gt;.
+  &lt;/p&gt;
+&lt;/body&gt;</code></pre>
          
             <div class="note">
-               <p>If the visual cue is only provided on hover (as in the example above), it would still fail.
-</p>
+               <p>If the visual cue is only provided on hover (as in the example above), it would still fail.</p>
             </div>
          
       </section>
@@ -58,4 +52,5 @@ <h3></h3>
    </section><section id="related"><h2>Related Techniques</h2><ul>
       <li><a href="../general/G182">G182</a></li>
       <li><a href="../general/G183">G183</a></li>
-   </ul></section></body></html>
+   </ul></section>
+</body></html>
diff --git a/techniques/failures/F74.html b/techniques/failures/F74.html
index 74d48b775e..e51051996f 100644
--- a/techniques/failures/F74.html
+++ b/techniques/failures/F74.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Failure of  Success Criterion 1.2.2 and 1.2.8 due to not labeling a synchronized media alternative to text as an alternative</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Failure of  Success Criterion 1.2.2 and 1.2.8 due to not labeling a synchronized media alternative to text as an alternative</h1><section class="meta"><p class="id">ID: F74</p><p class="technology">Technology: failures</p><p class="type">Type: Failure</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Failure of  Success Criterion 1.2.2 and 1.2.8 due to not labeling a synchronized media alternative to text as an alternative</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/></head><body><h1>Failure of  Success Criterion 1.2.2 and 1.2.8 due to not labeling a synchronized media alternative to text as an alternative</h1><section class="meta"><p class="id">ID: F74</p><p class="technology">Technology: failures</p><p class="type">Type: Failure</p></section><section id="applicability"><h2>When to Use</h2>
       <p>Pages that provide synchronized media alternatives to text.</p>
    </section><section id="description"><h2>Description</h2>
       <p>The objective of this failure is to avoid situations in which synchronized media alternatives are not labeled with the text for which they are alternatives. Synchronized media alternatives provide enhanced access to users for whom synchronized media is a more effective format than text. Since they are alternatives to text, they do not need themselves to have redundant text alternatives. However, they need to be clearly labeled with the text for which they substitute, so users can find them and so users who normally expect text alternatives to synchronized media know not to look for them.</p>
diff --git a/techniques/failures/F75.html b/techniques/failures/F75.html
index f6cb1ba3b4..1c18a743f8 100644
--- a/techniques/failures/F75.html
+++ b/techniques/failures/F75.html
@@ -1,7 +1,7 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Failure of Success Criterion 1.2.2 by providing synchronized media without captions when the synchronized media presents more information than is presented on the page</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Failure of Success Criterion 1.2.2 by providing synchronized media without captions when the synchronized media presents more information than is presented on the page</h1><section class="meta"><p class="id">ID: F75</p><p class="technology">Technology: failures</p><p class="type">Type: Failure</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Failure of Success Criterion 1.2.2 by providing synchronized media without captions when the synchronized media presents more information than is presented on the page</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/></head><body><h1>Failure of Success Criterion 1.2.2 by providing synchronized media without captions when the synchronized media presents more information than is presented on the page</h1><section class="meta"><p class="id">ID: F75</p><p class="technology">Technology: failures</p><p class="type">Type: Failure</p></section><section id="applicability"><h2>When to Use</h2>
       <p>Any technology.</p>
    </section><section id="description"><h2>Description</h2>
-      <p>The objective of this failure is to avoid situations in which synchronized media alternatives provide more information than the text for which they are alternatives, but do not provide their own text alternatives to provide access to the extra information. Synchronized media alternatives provide enhanced access to users for whom synchronized media is a more effective format than text. Since they are alternatives to text, they do not need themselves to have redundant text alternatives in the form of captions, audio descriptions or full text alternatives. However, if they provide more information than the text for which they are an alternative, then they are not just alternatives but are synchronized media content in their own right. In this case they are subject to the full requirements of <a href="https://www.w3.org/WAI/WCAG21/Understanding/captions-prerecorded">Success Criterion 1.2.2</a> to provide captions and to <a href="https://www.w3.org/WAI/WCAG21/Understanding/audio-description-or-media-alternative-prerecorded">Success Criterion 1.2.3</a> and <a href="https://www.w3.org/WAI/WCAG21/Understanding/audio-description-prerecorded">1.2.5</a>.</p>
+      <p>The objective of this failure is to avoid situations in which synchronized media alternatives provide more information than the text for which they are alternatives, but do not provide their own text alternatives to provide access to the extra information. Synchronized media alternatives provide enhanced access to users for whom synchronized media is a more effective format than text. Since they are alternatives to text, they do not need themselves to have redundant text alternatives in the form of captions, audio descriptions or full text alternatives. However, if they provide more information than the text for which they are an alternative, then they are not just alternatives but are synchronized media content in their own right. In this case they are subject to the full requirements of <a href="../../Understanding/captions-prerecorded">Success Criterion 1.2.2</a> to provide captions and to <a href="../../Understanding/audio-description-or-media-alternative-prerecorded">Success Criterion 1.2.3</a>, and <a href="../../Understanding/audio-description-prerecorded">Success Criterion 1.2.5</a>.</p>
    </section><section id="examples"><h2>Examples</h2></section><section id="tests"><h2>Tests</h2>
       <section class="procedure"><h3>Procedure</h3>
          <ol>
diff --git a/techniques/failures/F77.html b/techniques/failures/F77.html
index 4e3f288d48..a40cc65e83 100644
--- a/techniques/failures/F77.html
+++ b/techniques/failures/F77.html
@@ -1,32 +1,37 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Failure of Success Criterion 4.1.1 due to duplicate values of type ID</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Failure of Success Criterion 4.1.1 due to duplicate values of type ID</h1><section class="meta"><p class="id">ID: F77</p><p class="technology">Technology: failures</p><p class="type">Type: Failure</p></section><section id="applicability"><h2>When to Use</h2>
-      <p>HTML, and any XML-based markup languages including XHTML and SVG</p>
+---
+obsoleteMessage: |
+  This failure relates to 4.1.1: Parsing, which was removed as of WCAG 2.2.
+obsoleteSince: 22
+---
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Failure of Success Criterion 4.1.1 due to duplicate values of type ID</title><link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/></head><body><h1>Failure of Success Criterion 4.1.1 due to duplicate values of type ID</h1><section class="meta"><p class="id">ID: F77</p><p class="technology">Technology: failures</p><p class="type">Type: Failure</p></section><section id="applicability"><h2>When to Use</h2>
+      <p>HTML, and any XML-based markup languages including SVG</p>
    </section><section id="description"><h2>Description</h2>
-      <p>This describes a failure condition where duplicate ID errors are known to cause problems for assistive technologies when they are trying to interact with content. Duplicate values of type ID can be problematic for user agents that rely on this attribute to accurately convey relationships between different parts of content to users. For example, a screen reader may use ID values to identify the applicable header content for a data cell within a data table, or an input control to which a given label applies. If these values are not unique, the screen reader will be unable to programmatically determine which headers are associated with the data cell or which control is associated with which label or name.</p>
-      <p>Checking that ID attribute values are unique within a document can be done by validating the document against its specification, because the specification defines which attributes contain document-wide unique identifiers.</p>
+      <p>This describes a failure condition where duplicate <code class="language-html">id</code> errors are known to cause problems for assistive technologies when they are trying to interact with content. Duplicate values of type <code class="language-html">id</code> can be problematic for user agents that rely on this attribute to accurately convey relationships between different parts of content to users. For example, a screen reader may use <code class="language-html">id</code> values to identify the applicable header content for a data cell within a data table, or an input control to which a given label applies. If these values are not unique, the screen reader will be unable to programmatically determine which headers are associated with the data cell or which control is associated with which label or name.</p>
+      <p>Checking that <code class="language-html">id</code> attribute values are unique within a document can be done by validating the document against its specification, because the specification defines which attributes contain document-wide unique identifiers.</p>
       <div class="note">
-         <p>In most markup languages, ID values are attribute values, for example in HTML and SVG.</p>
-         <p>XML documents that use only the xml:id attribute as an ID attribute, parsing the XML document with a validating parser that supports the <a href="https://www.w3.org/TR/2005/REC-xml-id-20050909/">xml:id specification</a> is sufficient.</p>
+         <p>In most markup languages, <code class="language-html">id</code> values are attribute values, for example in HTML and SVG.</p>
+         <p>XML documents that use only the <code class="language-xml">xml:id</code> attribute as an <code class="language-xml">id</code> attribute, parsing the XML document with a validating parser that supports the <a href="https://www.w3.org/TR/2005/REC-xml-id-20050909/">xml:id specification</a> is sufficient.</p>
       </div>
    </section><section id="examples"><h2>Examples</h2>
       <section class="example">
          
-            <p>An author uses an online validation service to check that all id attribute values are unique.</p>
+            <p>An author uses an online validation service to check that all <code class="language-html">id</code> attribute values are unique.</p>
          
       </section>
       <section class="example">
          
-            <p>A developer utilizes features in their authoring tool to ensure that id attribute values are unique.</p>
+            <p>A developer utilizes features in their authoring tool to ensure that <code class="language-html">id</code> attribute values are unique.</p>
          
       </section>
    </section><section id="tests"><h2>Tests</h2>
       <section class="procedure"><h3>Procedure</h3>
          <ol>
-            <li>Check that all values of type ID are unique in the Web page</li>
+            <li>Check that all values of type <code class="language-html">id</code> are unique in the Web page</li>
          </ol>
       </section>
       <section class="results"><h3>Expected Results</h3>
          <ul>
-            <li>If Step #1 is false, then this failure condition applies and the content fails the Success Criterion.</li>
+            <li>If check #1 is false, then this failure condition applies and the content fails the Success Criterion.</li>
          </ul>
       </section>
    </section><section id="related"><h2>Related Techniques</h2><ul>
@@ -35,9 +40,7 @@
    </ul></section><section id="resources"><h2>Resources</h2>
       
          <ul>
-            <li>HTML 5: <a href="https://www.w3.org/TR/html5/dom.html#the-id-attribute">id attribute</a> 
-               </li>
-            <li>HTML 4.01: <a href="https://www.w3.org/TR/html4/struct/global.html#adef-id">id attribute</a> 
+            <li>HTML: <a href="https://html.spec.whatwg.org/multipage/dom.html#the-id-attribute">id attribute</a> 
                </li>
 			<li> 
                   <a href="https://www.w3.org/TR/2005/REC-xml-id-20050909/">xml:id Version 1.0</a> - W3C Recommendation 9 September 2005.</li>
@@ -45,4 +48,5 @@
                </li>
          </ul>
       
-   </section></body></html>
\ No newline at end of file
+   </section>
+</body></html>
diff --git a/techniques/failures/F78.html b/techniques/failures/F78.html
index 6bcb7703f7..58a07e5e24 100644
--- a/techniques/failures/F78.html
+++ b/techniques/failures/F78.html
@@ -1,39 +1,84 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Failure of Success Criterion 2.4.7 due to styling element outlines and borders in a way that removes or renders non-visible the visual focus indicator</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Failure of Success Criterion 2.4.7 due to styling element outlines and borders in a way that removes or renders non-visible the visual focus indicator</h1><section class="meta"><p class="id">ID: F78</p><p class="technology">Technology: failures</p><p class="type">Type: Failure</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+
+<head>
+   <title>Failure of Success Criterion 1.4.11, 2.4.7 and 2.4.13 due to styling element outlines and borders in a way
+      that removes or renders non-visible the visual focus indicator</title>
+   <link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove">
+   </link>
+</head>
+
+<body>
+   <h1>Failure of Success Criterion 1.4.11, 2.4.7 and 2.4.13 due to styling element outlines and borders in a way that
+      removes or renders non-visible the visual focus indicator</h1>
+   <section class="meta">
+      <p class="id">ID: F78</p>
+      <p class="technology">Technology: failures</p>
+      <p class="type">Type: Failure</p>
+   </section>
+   <section id="applicability">
+      <h2>When to Use</h2>
+
       <p>Any technology</p>
-   </section><section id="description"><h2>Description</h2>
-      <p>This describes a failure condition that occurs when the user agent's default visual indication of keyboard focus is turned off or rendered non-visible by other styling on the page without providing an author-supplied visual focus indicator. Turning off the focus indicator instructs the user agent not to present the focus indicator. Other styling may make it difficult to see the focus indicator even though it is present, such as outlines that look the same as the focus outline, or thick borders that are the same color as the focus indicator so it cannot be seen against them.</p>
-   </section><section id="examples"><h2>Examples</h2>
+   </section>
+   <section id="description">
+      <h2>Description</h2>
+      <p>This describes a failure condition that occurs when the user agent's default visual indication of keyboard
+         focus is turned off or rendered non-visible by other styling on the page without providing an author-supplied
+         visual focus indicator. Turning off the focus indicator instructs the user agent not to present the focus
+         indicator. Other styling may make it difficult to see the focus indicator even though it is present, such as
+         outlines that look the same as the focus outline, or thick borders that are the same color as the focus
+         indicator so it cannot be seen against them.</p>
+   </section>
+   <section id="examples">
+      <h2>Examples</h2>
       <section class="example">
          <h3>The focus indicator is turned off with CSS</h3>
-         
-            <p>The following CSS example will remove the default focus indicator, which fails the requirement to provide a visible focus indicator.</p>
-         
-         <pre xml:space="preserve">:focus {outline: none}</pre>
+
+         <p>The following CSS example will remove the default focus indicator, which fails the requirement to provide a
+            visible focus indicator.</p>
+
+         <pre xml:space="preserve"><code class="language-css">:focus {outline: none}</code></pre>
       </section>
       <section class="example">
          <h3>The outline of elements is visually similar to the focus indicator</h3>
-         
-            <p>The following CSS example will create an outline around links that looks the same as the focus indicator. This makes it impossible for users to determine which one in fact has the focus, even though the user agent does draw the focus indicator.</p>
-         
-         <pre xml:space="preserve">a {outline: thin dotted black}</pre>
+
+         <p>The following CSS example will create an outline around links that looks the same as the focus indicator.
+            This makes it impossible for users to determine which one in fact has the focus, even though the user agent
+            does draw the focus indicator.</p>
+
+         <pre xml:space="preserve"><code class="language-css">a {outline: thin dotted black}</code></pre>
       </section>
       <section class="example">
          <h3>Elements have a border that occludes the focus indicator</h3>
-         
-            <p>The following CSS example creates a border around links that does not have enough contrast for the focus indicator to be seen when drawn on top of it. In this case the focus indicator is drawn just ouside the border, but as both are black and the border is thicker than the focus indicator, it no longer meets the definition of "visible".</p>
-         
-         <pre xml:space="preserve">a {border: medium solid black}</pre>
+
+         <p>The following CSS example creates a border around links that does not have enough contrast for the focus
+            indicator to be seen when drawn on top of it. In this case the focus indicator is drawn just outside the
+            border, but as both are black and the border is thicker than the focus indicator, it no longer meets the
+            definition of "visible".</p>
+
+         <pre xml:space="preserve"><code class="language-css">a {border: medium solid black}</code></pre>
       </section>
-   </section><section id="tests"><h2>Tests</h2>
-      <section class="procedure"><h3>Procedure</h3>
+   </section>
+   <section id="tests">
+      <h2>Tests</h2>
+      <section class="procedure">
+         <h3>Procedure</h3>
          <ol>
             <li>Set the focus to all focusable elements on a page using the keyboard.</li>
             <li>Check that the focus indicator is visible.</li>
          </ol>
       </section>
-      <section class="results"><h3>Expected Results</h3>
+      <section class="results">
+         <h3>Expected Results</h3>
          <ul>
             <li>#2 is true.</li>
          </ul>
       </section>
-   </section><section id="resources"><h2>Resources</h2></section></body></html>
\ No newline at end of file
+   </section>
+   <section id="resources">
+      <h2>Resources</h2>
+   </section>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/techniques/failures/F79.html b/techniques/failures/F79.html
index f071ef9f12..ded8345b63 100644
--- a/techniques/failures/F79.html
+++ b/techniques/failures/F79.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Failure of Success Criterion 4.1.2 due to the focus state of a user interface component not being programmatically determinable or no notification of change of focus state available</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Failure of Success Criterion 4.1.2 due to the focus state of a user interface component not being programmatically determinable or no notification of change of focus state available</h1><section class="meta"><p class="id">ID: F79</p><p class="technology">Technology: failures</p><p class="type">Type: Failure</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Failure of Success Criterion 4.1.2 due to the focus state of a user interface component not being programmatically determinable or no notification of change of focus state available</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/></head><body><h1>Failure of Success Criterion 4.1.2 due to the focus state of a user interface component not being programmatically determinable or no notification of change of focus state available</h1><section class="meta"><p class="id">ID: F79</p><p class="technology">Technology: failures</p><p class="type">Type: Failure</p></section><section id="applicability"><h2>When to Use</h2>
       <p>All technologies</p>
    </section><section id="description"><h2>Description</h2>
       <p>Whether a user interface component has focus is a particularly important facet of its state. Many types of assistive technology rely on tracking the current keyboard focus. Screen readers will move the user's point of regard to the focused user interface component, and screen magnifiers will change the display of the content so that the focused component is visible. If assistive technology is not notified when focus moves to a new component, the user will become confused when they attempt to interact with the wrong component.</p>
diff --git a/techniques/failures/F8.html b/techniques/failures/F8.html
index e6e5d88655..6aa4539ca8 100644
--- a/techniques/failures/F8.html
+++ b/techniques/failures/F8.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Failure of Success Criterion 1.2.2 due to captions omitting some dialogue or important
-                    sound effects</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Failure of Success Criterion 1.2.2 due to captions omitting some dialogue or important
+                    sound effects</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/></head><body><h1>Failure of Success Criterion 1.2.2 due to captions omitting some dialogue or important
                     sound effects</h1><section class="meta"><p class="id">ID: F8</p><p class="technology">Technology: failures</p><p class="type">Type: Failure</p></section><section id="applicability"><h2>When to Use</h2>
       <p> Applies to all technologies. </p>
    </section><section id="description"><h2>Description</h2>
@@ -7,9 +7,9 @@
                         the "caption" does not include all of the dialogue (either verbatim or in
                         essence) as well as all important sounds then the 'Captions' are not real
                         captions. </p>
-      <p> NOTE: Captions sometimes simplify the spoken text both to make it easier to
-                        read and to avoid forcing the viewer to read at very high speed. This is
-                        standard procedure and does not invalidate a caption. </p>
+       <div class="note">
+        <p>Captions sometimes simplify the spoken text both to make it easier to read and to avoid forcing the viewer to read at very high speed. This is standard procedure and does not invalidate a caption.</p>
+       </div>
    </section><section id="examples"><h2>Examples</h2>
       <section class="example">
          
@@ -34,4 +34,4 @@
             <li>If check #2 and check #3 are false, then this failure condition applies and the content fails the Success Criterion.</li>
          </ul>
       </section>
-   </section><section id="related"><h2>Related Techniques</h2></section><section id="resources"><h2>Resources</h2></section></body></html>
\ No newline at end of file
+   </section><section id="related"><h2>Related Techniques</h2></section><section id="resources"><h2>Resources</h2></section></body></html>
diff --git a/techniques/failures/F80.html b/techniques/failures/F80.html
index 85989fbc24..9758dedfa3 100644
--- a/techniques/failures/F80.html
+++ b/techniques/failures/F80.html
@@ -1,5 +1,5 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Failure of Success Criterion 1.4.4 when text-based form controls do not resize when visually rendered text is resized up to 200%</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Failure of Success Criterion 1.4.4 when text-based form controls do not resize when visually rendered text is resized up to 200%</h1><section class="meta"><p class="id">ID: F80</p><p class="technology">Technology: failures</p><p class="type">Type: Failure</p></section><section id="applicability"><h2>When to Use</h2>
-      <p>HTML, XHTML, and CSS</p>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Failure of Success Criterion 1.4.4 when text-based form controls do not resize when visually rendered text is resized up to 200%</title><link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/></head><body><h1>Failure of Success Criterion 1.4.4 when text-based form controls do not resize when visually rendered text is resized up to 200%</h1><section class="meta"><p class="id">ID: F80</p><p class="technology">Technology: failures</p><p class="type">Type: Failure</p></section><section id="applicability"><h2>When to Use</h2>
+      <p>HTML and CSS</p>
    </section><section id="description"><h2>Description</h2>
       <p>The objective of this failure condition is to describe a problem that occurs when changing the size of text does not cause the text-based form controls to resize accordingly. This means that the user may have difficulty entering text and being able to read what they have entered because the text is not displayed at the text size required by the user.</p>
       <p>Text-based form controls include input boxes (text and textarea) as well as buttons.</p>
@@ -8,21 +8,34 @@
          <h3>A Contact Form</h3>
          
             <p>A Contact Us form has some introductory information and then form controls for users to enter their first name, last name, telephone number and email address. The heading, introductory text and form control labels have been implemented in a scalable way but the form controls themselves have not.</p>
-            <p>The XHTML component:</p>
+            <p>The HTML component:</p>
          
-         <pre xml:space="preserve"> &lt;h1&gt;Contact Us&lt;/h1&gt;
- &lt;p&gt;Please provide us with your details and we will contact you as soon as we can. Note that all of the form fields are required.&lt;/p&gt;
- &lt;label for="fname"&gt;First Name&lt;/label&gt;&lt;input type="text" name="fname" id="fname" /&gt;&lt;br /&gt;
- &lt;label for="lname"&gt;Last Name&lt;/label&gt;&lt;input type="text" name="lname" id="lname" /&gt;&lt;br /&gt;
- &lt;label for="phone"&gt;Telephone&lt;/label&gt;&lt;input type="text" name="phone" id="phone" /&gt;&lt;br /&gt;
- &lt;label for="email"&gt;Email&lt;/label&gt;&lt;input type="text" name="email" id="email" /&gt;&lt;br /&gt;
- &lt;input type="submit" name="Submit" value="Submit" id="Submit" /&gt;</pre>
+<pre xml:space="preserve"><code class="language-html">&lt;h1&gt;Contact Us&lt;/h1&gt;
+&lt;p&gt;Please provide us with your details and we will contact you as soon as we can.
+   Note that all of the form fields are required.&lt;/p&gt;
+&lt;div&gt;
+  &lt;label for="fname"&gt;First Name&lt;/label&gt;
+  &lt;input type="text" name="fname" id="fname"&gt;
+&lt;/div&gt;
+&lt;div&gt;
+  &lt;label for="lname"&gt;Last Name&lt;/label&gt;
+  &lt;input type="text" name="lname" id="lname"&gt;
+&lt;/div&gt;
+&lt;div&gt;
+  &lt;label for="phone"&gt;Telephone&lt;/label&gt;
+  &lt;input type="text" name="phone" id="phone"&gt;
+&lt;/div&gt;
+&lt;div&gt;
+  &lt;label for="email"&gt;Email&lt;/label&gt;
+  &lt;input type="text" name="email" id="email"&gt;
+&lt;/div&gt;  
+&lt;input type="submit" name="Submit" value="Submit" id="Submit"&gt;</code></pre>
          
             <p>The CSS component:</p>
          
-         <pre xml:space="preserve"> h1 { font-size: 2em; }
- p, label { font-size: 1em; }
- input {font-size: 12pt}</pre>
+<pre xml:space="preserve"><code class="language-css">h1 { font-size: 2em; }
+p, label { font-size: 1em; }
+input {font-size: 12pt;}</code></pre>
       </section>
    </section><section id="tests"><h2>Tests</h2>
       <section class="procedure"><h3>Procedure</h3>
@@ -37,4 +50,5 @@ <h3>A Contact Form</h3>
             <li>If check #3 is false, then the failure condition applies and the content fails these Success Criteria.</li>
          </ul>
       </section>
-   </section><section id="related"><h2>Related Techniques</h2></section><section id="resources"><h2>Resources</h2></section></body></html>
\ No newline at end of file
+   </section><section id="related"><h2>Related Techniques</h2></section><section id="resources"><h2>Resources</h2></section>
+</body></html>
\ No newline at end of file
diff --git a/techniques/failures/F81.html b/techniques/failures/F81.html
index d35fac5c09..607ea7973d 100644
--- a/techniques/failures/F81.html
+++ b/techniques/failures/F81.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Failure of Success Criterion 1.4.1 due to identifying required or error fields using color differences only</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Failure of Success Criterion 1.4.1 due to identifying required or error fields using color differences only</h1><section class="meta"><p class="id">ID: F81</p><p class="technology">Technology: failures</p><p class="type">Type: Failure</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Failure of Success Criterion 1.4.1 due to identifying required or error fields using color differences only</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/></head><body><h1>Failure of Success Criterion 1.4.1 due to identifying required or error fields using color differences only</h1><section class="meta"><p class="id">ID: F81</p><p class="technology">Technology: failures</p><p class="type">Type: Failure</p></section><section id="applicability"><h2>When to Use</h2>
       <p>All technologies</p>
    </section><section id="description"><h2>Description</h2>
       <p>This objective of this technique is to describe the failure that occurs when a required field or an error field is marked with color differences only, without an alternate way to identify the required field or error field. This can cause problems for people who are blind or colorblind, because they may not be able to perceive the color differences that indicate which field is required or which field is causing an error.</p>
@@ -19,7 +19,7 @@
       </section>
       <section class="results"><h3>Expected Results</h3>
          <ul>
-            <li>If step #1 is false, then this failure condition applies and content fails the Success Criterion.</li>
+            <li>If check #1 is false, then this failure condition applies and content fails the Success Criterion.</li>
          </ul>
       </section>
    </section></body></html>
\ No newline at end of file
diff --git a/techniques/failures/F82.html b/techniques/failures/F82.html
index f2d59338c8..3a6a7da1e6 100644
--- a/techniques/failures/F82.html
+++ b/techniques/failures/F82.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Failure of Success Criterion 3.3.2 by visually formatting a set of phone number fields but not including a text label</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Failure of Success Criterion 3.3.2 by visually formatting a set of phone number fields but not including a text label</h1><section class="meta"><p class="id">ID: F82</p><p class="technology">Technology: failures</p><p class="type">Type: Failure</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Failure of Success Criterion 3.3.2 by visually formatting a set of phone number fields but not including a text label</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/></head><body><h1>Failure of Success Criterion 3.3.2 by visually formatting a set of phone number fields but not including a text label</h1><section class="meta"><p class="id">ID: F82</p><p class="technology">Technology: failures</p><p class="type">Type: Failure</p></section><section id="applicability"><h2>When to Use</h2>
       <p>Any technology</p>
    </section><section id="description"><h2>Description</h2>
       <p>This failure ensures that people with visual or cognitive disabilities will recognize phone number fields and understand what information to provide to fill in the fields. Phone numbers are frequently formatted in fixed, distinctive ways, and authors may feel that just providing visual formatting of the fields will be sufficient to identify them. However, even if all the fields have programmatically determined names, a text label must also identify the set of fields as a phone number.</p>
@@ -9,11 +9,18 @@ <h3></h3>
             <p>In the United States, phone numbers are broken into a three digit area code, a three digit prefix, and a four digit extension. A web page creates fixed length text input fields for the three parts of the phone number, surrounding the first field with parenthesis and separating the second and third fields with a dash. Because of this formatting, some users recognize the fields as a phone number. However, there is no text label for the phone number on the web page. This is because the label for each field will be the closest preceding text, so the three fields would be labeled "(", ")" , and "-" respectively.</p>
          
       </section>
-   </section><section id="tests"><h2>Tests</h2>
+   </section>
+    <section id="related">
+         <h2>Related Techniques</h2>
+         <ul>
+          <li><a href="../html/H71">H71</a></li>
+        </ul>
+      </section>
+  <section id="tests"><h2>Tests</h2>
       <section class="procedure"><h3>Procedure</h3>
          <ol>
             <li>For each set of phone number fields in the web page that represents a single phone number, check that the set of fields are labeled with a visible text label that is positioned near the set of phone number fields.</li>
-            <li>For each set of phone number fields in the Web page that represent a single phone number, instructions are provided about how to fill in the fields.</li>
+            <li>For each set of phone number fields in the web page that represent a single phone number, instructions are provided about how to fill in the fields.</li>
          </ol>
       </section>
       <section class="results"><h3>Expected Results</h3>
@@ -21,4 +28,4 @@ <h3></h3>
             <li>If both check #1 and check #2 are false, then this failure condition applies and the content fails this success criterion.</li>
          </ul>
       </section>
-   </section></body></html>
\ No newline at end of file
+   </section></body></html>
diff --git a/techniques/failures/F83.html b/techniques/failures/F83.html
index b28ba69d3c..f8010d123c 100644
--- a/techniques/failures/F83.html
+++ b/techniques/failures/F83.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Failure of Success Criterion 1.4.3 and 1.4.6 due to using background images that do not provide sufficient contrast with foreground text (or images of text)</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Failure of Success Criterion 1.4.3 and 1.4.6 due to using background images that do not provide sufficient contrast with foreground text (or images of text)</h1><section class="meta"><p class="id">ID: F83</p><p class="technology">Technology: failures</p><p class="type">Type: Failure</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Failure of Success Criterion 1.4.3 and 1.4.6 due to using background images that do not provide sufficient contrast with foreground text (or images of text)</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/></head><body><h1>Failure of Success Criterion 1.4.3 and 1.4.6 due to using background images that do not provide sufficient contrast with foreground text (or images of text)</h1><section class="meta"><p class="id">ID: F83</p><p class="technology">Technology: failures</p><p class="type">Type: Failure</p></section><section id="applicability"><h2>When to Use</h2>
       <p>Any technology</p>
    </section><section id="description"><h2>Description</h2>
       <p>This failure occurs when people with low vision are not able to read text that is displayed over a background image. When there is not sufficient contrast between the background image and the text, features of the background image can be confused with the text making it difficult to accurately read the text.</p>
diff --git a/techniques/failures/F84.html b/techniques/failures/F84.html
index 347781f6bc..5714427154 100644
--- a/techniques/failures/F84.html
+++ b/techniques/failures/F84.html
@@ -1,28 +1,29 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Failure of Success Criterion 2.4.9 due to using a non-specific link such as "click here" or "more" without a mechanism to change the link text to specific text.</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Failure of Success Criterion 2.4.9 due to using a non-specific link such as "click here" or "more" without a mechanism to change the link text to specific text.</h1><section class="meta"><p class="id">ID: F84</p><p class="technology">Technology: failures</p><p class="type">Type: Failure</p></section><section id="applicability"><h2>When to Use</h2>
-      <p>HTML and XHTML</p>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Failure of Success Criterion 2.4.9 due to using a non-specific link such as "click here" or "more" without a mechanism to change the link text to specific text.</title><link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/></head><body><h1>Failure of Success Criterion 2.4.9 due to using a non-specific link such as "click here" or "more" without a mechanism to change the link text to specific text.</h1><section class="meta"><p class="id">ID: F84</p><p class="technology">Technology: failures</p><p class="type">Type: Failure</p></section><section id="applicability"><h2>When to Use</h2>
+      <p>HTML</p>
    </section><section id="description"><h2>Description</h2>
       <p>This failure describes a common condition where links such as "click here" or "more" are used as anchor elements where you need to have the surrounding text to understand their purpose and where there isn't any mechanism to make the destination clear by itself, such as a button to expand the link text.</p>
       <p>Many blind people who use screen readers call up a dialog box that has a list of links from the page. They use this list of links to decide where they will go. But if many of the links in that list simply say "click here" or "more" they will be unable to use this feature in their screen reader, which is a core navigation strategy. That's why it's a failure of 2.4.9 to not provide any way of allowing them to know the destination from the link text alone. It is also true for people who tab through links. If all they hear as they tab through the document is "click here, click here, click here etc." they will become confused. </p>
    </section><section id="examples"><h2>Examples</h2>
       <section class="example">
-         <pre xml:space="preserve">&lt;a href="file110.htm"&gt;Click here&lt;/a&gt; for more information on the Rocky Mountains.</pre>
+<pre xml:space="preserve"><code class="language-html">&lt;a href="file110.html"&gt;Click here&lt;/a&gt; for more information on the Rocky Mountains.</code></pre>
       </section>
       <section class="example">
-         <pre xml:space="preserve">&lt;h2&gt;News headlines&lt;/h2&gt;
-The middle east peace meetings have yielded fruitful dialogue. 
-&lt;a href="r4300.htm"&gt;read more&lt;/a&gt;</pre>
+<pre xml:space="preserve"><code class="language-html">&lt;h2&gt;News headlines&lt;/h2&gt;
+&lt;p&gt;Bishops Tickle Darwin's Monkey Theory&lt;/p&gt;
+&lt;a href="btdmt.html"&gt;read more&lt;/a&gt;</code></pre>
       </section>
    </section><section id="tests"><h2>Tests</h2>
       <section class="procedure"><h3>Procedure</h3>
          <ol>
             <li>Examine each link on the page.</li>
-            <li>Check to see if it has non-descript link text such as "click here" or "more" whose purpose can be determined from the surrounding text but not from the link text alone.</li>
-            <li>Check to see if there is a mechanism on the page which turns all non-descript links on the page into descriptive links.</li>
+            <li>Check to see if it has nondescript link text such as "click here" or "more" whose purpose can be determined from the surrounding text but not from the link text alone.</li>
+            <li>Check to see if there is a mechanism on the page which turns all nondescript links on the page into descriptive links.</li>
          </ol>
       </section>
       <section class="results"><h3>Expected Results</h3>
          <ul>
-            <li>If step #2 is true AND #3 is false, then this failure condition applies and content fails the success criterion.</li>
+            <li>If check #2 is true AND #3 is false, then this failure condition applies and content fails the success criterion.</li>
          </ul>
       </section>
-   </section></body></html>
\ No newline at end of file
+   </section>
+</body></html>
\ No newline at end of file
diff --git a/techniques/failures/F85.html b/techniques/failures/F85.html
index b6cef107df..f3545df239 100644
--- a/techniques/failures/F85.html
+++ b/techniques/failures/F85.html
@@ -1,12 +1,12 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Failure of Success Criterion 2.4.3 due to using dialogs or menus that are not adjacent to their trigger control in the sequential navigation order</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Failure of Success Criterion 2.4.3 due to using dialogs or menus that are not adjacent to their trigger control in the sequential navigation order</h1><section class="meta"><p class="id">ID: F85</p><p class="technology">Technology: failures</p><p class="type">Type: Failure</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Failure of Success Criterion 2.4.3 due to using dialogs or menus that are not adjacent to their trigger control in the sequential navigation order</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/></head><body><h1>Failure of Success Criterion 2.4.3 due to using dialogs or menus that are not adjacent to their trigger control in the sequential navigation order</h1><section class="meta"><p class="id">ID: F85</p><p class="technology">Technology: failures</p><p class="type">Type: Failure</p></section><section id="applicability"><h2>When to Use</h2>
       <p>All technologies.</p>
    </section><section id="description"><h2>Description</h2>
-      <p>This describes the failure condition that results when a Web page opens a dialog or menu interface component embedded on the page in a way that makes it difficult for a keyboard user to operate because of its position in the sequential navigation order. When the user opens the dialog or menu embedded on the page by activating a button or link, his next action will be to interact with the dialog or menu. If focus is not set to the dialog or menu, and it is not adjacent to the trigger control in the sequential navigation order, it will be difficult for the keyboard user to operate the dialog or menu.</p>
+      <p>This describes the failure condition that results when a Web page opens a dialog or menu interface component embedded on the page in a way that makes it difficult for a keyboard user to operate because of its position in the sequential navigation order. When the user opens the dialog or menu embedded on the page by activating a button or link, their next action will be to interact with the dialog or menu. If focus is not set to the dialog or menu, and it is not adjacent to the trigger control in the sequential navigation order, it will be difficult for the keyboard user to operate the dialog or menu.</p>
    </section><section id="examples"><h2>Examples</h2>
       <section class="example">
          <h3>Adding a dialog or menu embedded on the page to the end of the sequential navigation order</h3>
          
-            <p>When a DHTML menu or dialog is activated, it is created dynamically, positioned visually near the trigger, and appended to the end of the DOM. Because it is appended to the end of the DOM, it is at the end of the sequential navigation order. The user must tab through the rest of the web page before he can interact with the dialog or menu.</p>
+            <p>When a DHTML menu or dialog is activated, it is created dynamically, positioned visually near the trigger, and appended to the end of the DOM. Because it is appended to the end of the DOM, it is at the end of the sequential navigation order. The user must tab through the rest of the web page before they can interact with the dialog or menu.</p>
          
       </section>
       <section class="example">
@@ -43,4 +43,4 @@ <h3>Setting focus to the document after dismissing a menu embedded on the page</
       </section>
    </section><section id="related"><h2>Related Techniques</h2><ul>
       <li><a href="../client-side-script/SCR26">SCR26</a></li>
-   </ul></section></body></html>
\ No newline at end of file
+   </ul></section></body></html>
diff --git a/techniques/failures/F86.html b/techniques/failures/F86.html
index a148ecfb68..7725e7222a 100644
--- a/techniques/failures/F86.html
+++ b/techniques/failures/F86.html
@@ -1,31 +1,32 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Failure of Success Criterion 4.1.2 due to not providing names for each part of a multi-part form field, such as a US telephone number</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Failure of Success Criterion 4.1.2 due to not providing names for each part of a multi-part form field, such as a US telephone number</h1><section class="meta"><p class="id">ID: F86</p><p class="technology">Technology: failures</p><p class="type">Type: Failure</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Failure of Success Criterion 4.1.2 due to not providing names for each part of a multi-part form field, such as a US telephone number</title><link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/></head><body><h1>Failure of Success Criterion 4.1.2 due to not providing names for each part of a multi-part form field, such as a US telephone number</h1><section class="meta"><p class="id">ID: F86</p><p class="technology">Technology: failures</p><p class="type">Type: Failure</p></section><section id="applicability"><h2>When to Use</h2>
       <p>General</p>
    </section><section id="description"><h2>Description</h2>
-      <p>This describes a failure condition of Success Criterion 4.1.2 where some or all of the parts of multi-part form field do not have names. Often there is a label for the multi-part field, which is either programatically associated with the first part, or not programatically associated with any parts.</p>
+      <p>This describes a failure condition of Success Criterion 4.1.2 where some or all of the parts of multi-part form field do not have names. Often there is a label for the multi-part field, which is either programmatically associated with the first part, or not programmatically associated with any parts.</p>
       <div class="note">
          <p>A name does not necessarily have to be visible, but is visible to assistive technologies.</p>
       </div>
    </section><section id="examples"><h2>Examples</h2>
       <section class="example">
          
-            <p>A US telephone number consists of a 3-digit area code, a 3-digit prefix, and a 4-digit suffix. They are typically formatted as follows ([area code]) [prefix]-[suffix], such as (206) 555-1212. Often, forms asking for a telephone number will include 3 separate fields, but with a single label, such as:</p>
-            <pre xml:space="preserve">Phone number: 
-(&lt;input type="text" size="3"&gt;) &lt;input type="text" size="3"&gt;-&lt;input type="text" size="4"&gt;</pre>
-            <p>The failure occurs when there is not a name for each of the 3 fields in the Accessibility API. A user with assistive technology will experience these as three undefined text fields. Some assistive technologies will read the punctuation as identification for the text fields, which can be even more confusing. In the case of a 3-field US phone number, some assistive technologies would name the fields "(", ")" and "-", which is not very useful.</p>
+            <p>A US telephone number consists of a three-digit area code, a three-digit prefix, and a four-digit suffix. They are typically formatted as follows ([area code]) [prefix]-[suffix], such as (939) 555-0113. Often, forms asking for a telephone number will include three separate fields, but with a single label, such as:</p>
+            <pre xml:space="preserve"><code class="language-html">Phone number: (&lt;input type="text" size="3"&gt;) 
+&lt;input type="text" size="3"&gt;-&lt;input type="text" size="4"&gt;</code></pre>
+            <p>The failure occurs when there is not a name for each of the three fields in the Accessibility API. A user with assistive technology will experience these as three undefined text fields. Some assistive technologies will read the punctuation as identification for the text fields, which can be even more confusing. In the case of a three-field US phone number, some assistive technologies would name the fields "(", ")" and "-", which is not very useful.</p>
          
       </section>
       <section class="example">
          
-            <p>The same US telephone number. In this case, the label is not programatically associated with any of the parts. </p>
-            <pre xml:space="preserve">Phone number: (&lt;input type="text" size="3"&gt;) &lt;input type="text" size="3"&gt;-&lt;input type="text" size="4"&gt;</pre>
+            <p>The same US telephone number. In this case, the label is not programmatically associated with any of the parts. </p>
+<pre xml:space="preserve"><code class="language-html">Phone number: (&lt;input type="text" size="3"&gt;) 
+&lt;input type="text" size="3"&gt;-&lt;input type="text" size="4"&gt;</code></pre>
             <p> A user with assistive technology will experience these as three undefined text fields. </p>
          
       </section>
       <section class="example">
          
-            <p>The same US telephone number. In this case, the label is programatically associated with the first part.</p>
-            <pre xml:space="preserve">&lt;label for="area"&gt;Phone number:&lt;/label&gt; 
-(&lt;input id="area" type="text" size="3"&gt;) &lt;input type="text" size="3"&gt;-&lt;input type="text" size="4"&gt;</pre>
+            <p>The same US telephone number. In this case, the label is programmatically associated with the first part.</p>
+<pre xml:space="preserve"><code class="language-html">&lt;label for="area"&gt;Phone number:&lt;/label&gt; (&lt;input id="area" type="text" size="3"&gt;)
+&lt;input type="text" size="3"&gt;-&lt;input type="text" size="4"&gt;</code></pre>
             <p>A user with assistive technology will be led to believe that the first field is for the entire phone number, and will experience the second and third fields as undefined text fields.</p>
          
       </section>
@@ -52,15 +53,9 @@
    </ul></section><section id="resources"><h2>Resources</h2>
       
          <ul>
-            <li>
-                  <a href="https://msdn.microsoft.com/en-us/library/ms695716.aspx">Microsoft Active Accessibility 2.0 SDK</a>. Includes Inspect32.exe and other MSAA tools.</li>
             <li>
                   <a href="https://developer.gnome.org/atk/unstable/">Gnome Accessibility Toolkit documentation</a>
                </li>
-            <li>
-                  <a href="http://www.microsoft.com/en-us/download/details.aspx?id=18359">Microsoft Internet Explorer Developer Toolbar</a>. Allows examination of script-generated DOM in Microsoft Internet Explorer.</li>
-            <li>
-                  <a href="http://getfirebug.com/">Firebug</a>. Allows examination of script-generated DOM in Firefox.</li>
          </ul>
-      
-   </section></body></html>
\ No newline at end of file
+   </section>
+</body></html>
\ No newline at end of file
diff --git a/techniques/failures/F87.html b/techniques/failures/F87.html
index 140d719939..fd303d1d24 100644
--- a/techniques/failures/F87.html
+++ b/techniques/failures/F87.html
@@ -1,50 +1,49 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Failure of Success Criterion 1.3.1 due to inserting non-decorative content by using :before and :after pseudo-elements and the 'content' property in CSS</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Failure of Success Criterion 1.3.1 due to inserting non-decorative content by using :before and :after pseudo-elements and the 'content' property in CSS</h1><section class="meta"><p class="id">ID: F87</p><p class="technology">Technology: failures</p><p class="type">Type: Failure</p></section><section id="applicability"><h2>When to Use</h2>
+---
+obsoleteMessage: CSS-generated content does not always constitute a failure, as support for it has improved in user agents and screen readers. It may still present other usability issues, such as unselectable text.
+obsoleteSince: 20
+---
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Failure of Success Criterion 1.3.1 due to inserting non-decorative content by using ::before and ::after pseudo-elements and the 'content' property in CSS</title><link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/></head><body><h1>Failure of Success Criterion 1.3.1 due to inserting non-decorative content by using ::before and ::after pseudo-elements and the 'content' property in CSS</h1><section class="meta"><p class="id">ID: F87</p><p class="technology">Technology: failures</p><p class="type">Type: Failure</p></section><section id="applicability"><h2>When to Use</h2>
       <p>All technologies that support CSS.</p>
    </section><section id="description"><h2>Description</h2>
-      <p>The CSS :before and :after pseudo-elements specify the location of content before and after an element's document tree content. The content property, in conjunction with these pseudo-elements, specifies what is inserted. For users who need to customize style information in order to view content according to their needs, they may not be able to access the information that is inserted using CSS. Therefore, it is a failure to use these properties to insert non-decorative content.</p>
+      <p>The CSS <code>::before</code> and <code>::after</code> pseudo-elements specify the location of content before and after an element's document tree content. The content property, in conjunction with these pseudo-elements, specifies what is inserted. For users who need to customize style information in order to view content according to their needs, they may not be able to access the information that is inserted using CSS. Therefore, it is a failure to use these properties to insert non-decorative content.</p>
   <p class="note">A common way to test this critieria is to disable CSS styles to view whether content added using pseudo-elements remains visible.</p>
   
    </section><section id="examples"><h2>Examples</h2>
       <section class="example">
          
-            <p>In the following example, :before and :after are used to indicate speaker changes and to insert quotation marks in a screenplay.</p>
+            <p>In the following example, <code class="language-css">::before</code> and <code class="language-css">::after</code> are used to indicate speaker changes and to insert quotation marks in a screenplay.</p>
             <p>The CSS contains:</p>
          
-         <pre xml:space="preserve"> p.jim:before {	content: "Jim: " }
-p.mary:before { content: "Mary: " }
-
-q:before { content: open-quote }
-q:after  { content: close-quote }</pre>
+<pre xml:space="preserve"><code class="language-css">p.jim::before {	content: "Jim: " }
+p.mary::before { content: "Mary: " }
+q::before { content: open-quote }
+q::after  { content: close-quote }</code></pre>
          
             <p>It is used in this excerpt:</p>
          
-         <pre xml:space="preserve"> &lt;p class="jim"&gt;
- &lt;q&gt;Do you think he's going to make it?&lt;/q&gt;
+<pre xml:space="preserve"><code class="language-html">&lt;p class="jim"&gt;
+  &lt;q&gt;Do you think he's going to make it?&lt;/q&gt;
 &lt;/p&gt;
 &lt;p class="mary"&gt;
- &lt;q&gt;It's not looking good.&lt;/q&gt;
-&lt;/p&gt;</pre>
+  &lt;q&gt;It's not looking good.&lt;/q&gt;
+&lt;/p&gt;</code></pre>
       </section>
       <section class="example">
          
-            <p>In this example, :before is used to differentiate facts from opinions.</p>
+            <p>In this example, <code class="language-css">::before</code> is used to differentiate facts from opinions.</p>
             <p>The CSS contains:</p>
          
-         <pre xml:space="preserve"> p.fact:before { content: "Fact: "; font-weight: bold; }
- p.opinion:before { content: "Opinion: "; font-weight: bold; }</pre>
+<pre xml:space="preserve"><code class="language-css">p.fact::before { content: "Fact: "; font-weight: bold; }
+p.opinion::before { content: "Opinion: "; font-weight: bold; }</code></pre>
          
             <p>It is used in this excerpt:</p>
          
-         <pre xml:space="preserve"> &lt;p class="fact"&gt;
- The defendant was at the scene of the crime when it occurred. 
-&lt;/p&gt;
-&lt;p class="opinion"&gt;
- The defendant committed the crime. 
-&lt;/p&gt;</pre>
+<pre xml:space="preserve"><code class="language-html">&lt;p class="fact"&gt;The defendant was at the scene of the crime when it occurred.&lt;/p&gt;
+&lt;p class="opinion"&gt;The defendant committed the crime.&lt;/p&gt;</code></pre>
       </section>
    </section><section id="tests"><h2>Tests</h2>
       <section class="procedure"><h3>Procedure</h3>
-  <p>For each instance of content inserted through use of the :before and :after pseudo-elements and the content property:</p>
+  <p>For each instance of content inserted through use of the <code class="language-css">::before</code> and <code class="language-css">::after</code> pseudo-elements and the content property:</p>
         <ol>
             <li>Check that non-decorative information presented by the generated content is available when styles are overridden.</li>
          </ol>
@@ -60,8 +59,9 @@
       
          <ul>
             <li>
-                  <a href="https://www.w3.org/TR/CSS21/generate.html">CSS 2.1: Generated content, automatic numbering, and lists</a>
+                  <a href="https://www.w3.org/TR/selectors-3/#pseudo-elements">Selectors Level 3: 7. Pseudo-elements</a>
                </li>
          </ul>
       
-   </section></body></html>
+   </section>
+</body></html>
diff --git a/techniques/failures/F88.html b/techniques/failures/F88.html
index c7cf39875e..be0b80d375 100644
--- a/techniques/failures/F88.html
+++ b/techniques/failures/F88.html
@@ -1,37 +1,30 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Failure of Success Criterion 1.4.8 due to using text that is justified (aligned to both the left and the right margins)</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Failure of Success Criterion 1.4.8 due to using text that is justified (aligned to both the left and the right margins)</h1><section class="meta"><p class="id">ID: F88</p><p class="technology">Technology: failures</p><p class="type">Type: Failure</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Failure of Success Criterion 1.4.8 due to using text that is justified (aligned to both the left and the right margins)</title><link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/></head><body><h1>Failure of Success Criterion 1.4.8 due to using text that is justified (aligned to both the left and the right margins)</h1><section class="meta"><p class="id">ID: F88</p><p class="technology">Technology: failures</p><p class="type">Type: Failure</p></section><section id="applicability"><h2>When to Use</h2>
       <p>All technologies.</p>
    </section><section id="description"><h2>Description</h2>
       <p>Many people with cognitive disabilities have a great deal of trouble with blocks of text that are justified (aligned to both the left and the right margins). The spaces between words create "rivers of white" running down the page, which can make the text difficult for some people to read. This failure describes situations where this confusing text layout occurs. The best way to avoid this problem is not to create text layout that is fully justified (aligned to both the left and the right margins).</p>
    </section><section id="examples"><h2>Examples</h2>
       <section class="example">
          
-            <p>In the following example of a failure, the HTML <code class="att">align</code> attribute is used to create justified text.</p>
+            <p>In the following example of a failure, the HTML <code class="language-html">align</code> attribute is used to create justified text.</p>
          
-         <pre xml:space="preserve"> 
-&lt;p align="justify"&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum sit amet pede. Phasellus 
-nec sem id mauris vehicula tincidunt. Morbi ac arcu. Maecenas vehicula velit et orci. Donec 
-ullamcorper porttitor velit. Sed arcu lorem, cursus sit amet, auctor eu, convallis ut, purus. 
-Vivamus imperdiet accumsan nunc. Maecenas pellentesque nunc a libero. Vestibulum ante ipsum 
-primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur pharetra commodo 
-justo. Nulla facilisi. Phasellus nulla lacus, tempor quis, tincidunt ac, rutrum et, mauris.
-&lt;/p&gt;</pre>
+<pre xml:space="preserve"><code class="language-html">&lt;p align="justify"&gt;
+ Peter Piper picked a peck of pickled peppers
+ A peck of pickled peppers Peter Piper picked
+ If Peter Piper picked a peck of pickled peppers
+ Where's the peck of pickled peppers Peter Piper picked?
+&lt;/p&gt;</code></pre>
       </section>
       <section class="example">
          
             <p>In this example of a failure, the CSS text-align property is used to create justified text.</p>
          
-         <pre xml:space="preserve"> 
-...
-p {text-align: justify}
-
-...
-
-&lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum sit amet pede. Phasellus 
-nec sem id mauris vehicula tincidunt. Morbi ac arcu. Maecenas vehicula velit et orci. Donec 
-ullamcorper porttitor velit. Sed arcu lorem, cursus sit amet, auctor eu, convallis ut, purus. 
-Vivamus imperdiet accumsan nunc. Maecenas pellentesque nunc a libero. Vestibulum ante ipsum 
-primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur pharetra commodo 
-justo. Nulla facilisi. Phasellus nulla lacus, tempor quis, tincidunt ac, rutrum et, mauris.&lt;/p&gt;</pre>
+<pre xml:space="preserve"><code class="language-css">p {text-align: justify}</code>
+<code class="language-html">&lt;p&gt;
+ How much wood would a woodchuck chuck if a woodchuck could chuck wood?
+ He would chuck, he would, as much as he could, and chuck as much wood
+ As a woodchuck would if a woodchuck could chuck wood.
+&lt;/p&gt;</code>
+</pre>
       </section>
    </section><section id="tests"><h2>Tests</h2>
       <section class="procedure"><h3>Procedure</h3>
@@ -42,9 +35,10 @@
       </section>
       <section class="results"><h3>Expected Results</h3>
          <ul>
-            <li>If test procedure #2 is false, then this failure condition applies and the content fails to meet Success Criterion 1.4.8.</li>
+            <li>If check #2 is false, then this failure condition applies and the content fails to meet Success Criterion 1.4.8.</li>
          </ul>
       </section>
    </section><section id="related"><h2>Related Techniques</h2><ul>
       <li><a href="../css/C22">C22</a></li>
-   </ul></section></body></html>
\ No newline at end of file
+   </ul></section>
+</body></html>
\ No newline at end of file
diff --git a/techniques/failures/F89.html b/techniques/failures/F89.html
index fd84199a2a..34d25d4f67 100644
--- a/techniques/failures/F89.html
+++ b/techniques/failures/F89.html
@@ -1,29 +1,27 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Failure of Success Criteria 2.4.4, 2.4.9 and 4.1.2 due to not providing an accessible name for an image which is the only content in a link</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Failure of Success Criteria 2.4.4, 2.4.9 and 4.1.2 due to not providing an accessible name for an image which is the only content in a link</h1><section class="meta"><p class="id">ID: F89</p><p class="technology">Technology: failures</p><p class="type">Type: Failure</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Failure of Success Criteria 2.4.4, 2.4.9 and 4.1.2 due to not providing an accessible name for an image which is the only content in a link</title><link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/></head><body><h1>Failure of Success Criteria 2.4.4, 2.4.9 and 4.1.2 due to not providing an accessible name for an image which is the only content in a link</h1><section class="meta"><p class="id">ID: F89</p><p class="technology">Technology: failures</p><p class="type">Type: Failure</p></section><section id="applicability"><h2>When to Use</h2>
       <p>Content that contains links.</p>
    </section><section id="description"><h2>Description</h2>
       <p>This failure condition occurs when a link contains only non-text content, such as an image, and that link cannot be identified by an accessible name. The accessible name for a link is defined according to the <a href="https://www.w3.org/TR/accname/">Accessible Name and Description Computation</a>.</p>
-      <p>This also applies when both text and images are used separately on a page to link to the same target. In this case success technique <a href="https://www.w3.org/WAI/WCAG21/Techniques/html/H2">H2: Combining adjacent image and text links for the same resource</a> is the recommended approach to reduce the number of separate links and the undesirable redundancy.</p>
+      <p>This also applies when both text and images are used separately on a page to link to the same target. In this case success technique <a href="../html/H2">H2: Combining adjacent image and text links for the same resource</a> is the recommended approach to reduce the number of separate links and the undesirable redundancy.</p>
    </section><section id="examples"><h2>Examples</h2>
       <section class="example">
-         <h3>HTML Search Results</h3>
+         <h3>Search Results</h3>
          
-            <p>A search site returns search results that include both a text link and an image link to the match site. The image has a null <code class="att">alt</code> attribute, since the result already contains a link with a text description. However, the screen reader does not ignore the image link but uses heuristics to find some text that might describe the purpose of the link. For example, the screen reader might announce, "football dot gif Football Scorecard." </p>
+            <p>A search site returns search results that include both a text link and an image link to the match site. The image has a null <code class="language-html">alt</code> attribute, since the result already contains a link with a text description. However, the screen reader does not ignore the image link but uses heuristics to find some text that might describe the purpose of the link. For example, the screen reader might announce, "football dot gif Football Scorecard." </p>
          
-         <pre xml:space="preserve"> &lt;a href="scores.html"&gt;
-   &lt;img src="football.gif" alt="" /&gt;
- &lt;/a&gt;
- &lt;a href="scores.html"&gt;
-   Football Scoreboard
- &lt;/a&gt;
-}</pre>
+<pre xml:space="preserve"><code class="language-html">&lt;a href="scores.html"&gt;
+  &lt;img src="football.gif" alt=""&gt;
+&lt;/a&gt;
+&lt;a href="scores.html"&gt;Football Scoreboard&lt;/a&gt;
+</code></pre>
       </section>
    </section><section id="tests"><h2>Tests</h2>
       <section class="procedure"><h3>Procedure</h3>
          <ol>
             <li>Check whether the link contains only non-text content.</li>
-            <li>Check whether the non-text content has been implemented in a way that it can be ignored by assistive technologies, such as using role="presentation" or alt=""
+            <li>Check whether the non-text content has been implemented in a way that it can be ignored by assistive technologies, such as using <code class="language-html">role="presentation"</code> or <code class="language-html">alt=""</code>
                   .</li>
-            <li>Check that the link does not have an accessible name provided in another way such as <code class="att">aria-label</code> or <code class="att">aria-labelledby</code>.</li>
+            <li>Check that the link does not have an accessible name provided in another way such as <code class="language-html">aria-label</code> or <code class="language-html">aria-labelledby</code>.</li>
          </ol>
       </section>
       <section class="results"><h3>Expected Results</h3>
@@ -48,5 +46,5 @@ <h3>HTML Search Results</h3>
                   <a href="http://jimthatcher.com/webcourse2.htm">Text Alternatives for Images (alt-text)</a>
                </li>
          </ul>
-      
-   </section></body></html>
\ No newline at end of file
+   </section>
+</body></html>
\ No newline at end of file
diff --git a/techniques/failures/F9.html b/techniques/failures/F9.html
index ceed6c643a..56017f6c7b 100644
--- a/techniques/failures/F9.html
+++ b/techniques/failures/F9.html
@@ -1,7 +1,18 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Failure of Success Criterion 3.2.5 due to changing the context when the user removes
-                    focus from a form element</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Failure of Success Criterion 3.2.5 due to changing the context when the user removes
-                    focus from a form element</h1><section class="meta"><p class="id">ID: F9</p><p class="technology">Technology: failures</p><p class="type">Type: Failure</p></section><section id="applicability"><h2>When to Use</h2>
-      <p>General. </p>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>Failure of Success Criterion 3.2.5 due to changing the context when the user removes focus from a form element</title>
+    <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/>
+  </head>
+  <body>
+    <h1>Failure of Success Criterion 3.2.5 due to changing the context when the user removes focus from a form element</h1>
+    <section class="meta">
+      <p class="id">ID: F9</p>
+      <p class="technology">Technology: failures</p>
+      <p class="type">Type: Failure</p>
+    </section>
+    <section id="applicability">
+      <h2>When to Use</h2>
+      <p>General.</p>
    </section><section id="description"><h2>Description</h2>
       <p>This document describes a failure that occurs when removing focus from a form
                         element, such as by moving to the next element, causes a change of context.
@@ -9,11 +20,11 @@
    </section><section id="examples"><h2>Examples</h2>
       <section class="example">
          <h3></h3>
-         
-            <p> The user is going through the form filling out the fields in order.
-                                When he moves from the third field to the forth, the form submits.
-                            </p>
-         
+
+            <p>Users are going through the form filling out the fields in order.
+               When they move from the third field to the forth, the form submits.
+            </p>
+
       </section>
    </section><section id="tests"><h2>Tests</h2>
       <section class="procedure"><h3>Procedure</h3>
@@ -30,7 +41,7 @@ <h3></h3>
       </section>
       <section class="results"><h3>Expected Results</h3>
          <ul>
-            <li> If step #3, step #4, or step #5 is true, then this failure condition applies and
+            <li> If check #3, step #4, or step #5 is true, then this failure condition applies and
                                     the content fails the Success Criterion. </li>
          </ul>
       </section>
@@ -38,5 +49,5 @@ <h3></h3>
       <li><a href="../failures/F37">F37</a></li>
       <li><a href="../failures/F60">F60</a></li>
    </ul></section><section id="resources"><h2>Resources</h2>
-      
+
    </section></body></html>
\ No newline at end of file
diff --git a/techniques/failures/F90.html b/techniques/failures/F90.html
index 343d829100..de1f7b5ec2 100644
--- a/techniques/failures/F90.html
+++ b/techniques/failures/F90.html
@@ -1,43 +1,41 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Failure of Success Criterion 1.3.1 for incorrectly associating table headers and content via the headers and id attributes</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Failure of Success Criterion 1.3.1 for incorrectly associating table headers and content via the headers and id attributes</h1><section class="meta"><p class="id">ID: F90</p><p class="technology">Technology: failures</p><p class="type">Type: Failure</p></section><section id="applicability"><h2>When to Use</h2>
-      <p>HTML and XHTML.</p>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Failure of Success Criterion 1.3.1 for incorrectly associating table headers and content via the headers and id attributes</title><link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/></head><body><h1>Failure of Success Criterion 1.3.1 for incorrectly associating table headers and content via the headers and id attributes</h1><section class="meta"><p class="id">ID: F90</p><p class="technology">Technology: failures</p><p class="type">Type: Failure</p></section><section id="applicability"><h2>When to Use</h2>
+      <p>HTML</p>
    </section><section id="description"><h2>Description</h2>
       <p>One way for authors to explicitly associate header cells to data cells is by using the id and headers attributes. These allow the author to associate multiple header cells to a particular data cell, which can be necessary when complex data tables with more than one level of heading are used. </p>
-      <p>The failure occurs when the relationship between data cells and corresponding header cells cannot be programmatically determined correctly because the association of <code class="att">id</code> and <code class="att">headers</code> attributes is faulty. This can happen, for example, when copying code within tables and forgetting to update the code.</p>
+      <p>The failure occurs when the relationship between data cells and corresponding header cells cannot be programmatically determined correctly because the association of <code class="language-html">id</code> and <code class="language-html">headers</code> attributes is faulty. This can happen, for example, when copying code within tables and forgetting to update the code.</p>
    </section><section id="examples"><h2>Examples</h2>
-      <p>Note: The example below is based on the complex data table presented as example 1 of <a href="https://www.w3.org/WAI/WCAG21/Techniques/html/H43">Technique H43: Using id and headers attributes to associate data cells with header cells in data tables</a>.
+      <p>Note: The example below is based on the complex data table presented as example 1 of <a href="../html/H43">Technique H43: Using id and headers attributes to associate data cells with header cells in data tables</a>.
 					</p>
       <section class="example">
          <h3>Table content not correctly associated to nested headers</h3>
          
-            <p>In this example, nested headers are used, but the content cells are incorrectly associated via the id and headers attributes. All cells reference top level header 'Exams' (id="e") - this isn't correct for the last three columns which should reference header 'Projects'. Also, the referencing of the second level column headers has been accidentally swapped even though in this example this makes no difference as the contents (1, 2, Final) are repeated.
+            <p>In this example, nested headers are used, but the content cells are incorrectly associated via the <code class="language-html">id</code> and <code class="language-html">headers</code> attributes. All cells reference top level header 'Exams' (<code class="language-html">id="e"</code>) - this isn't correct for the last three columns which should reference header 'Projects'. Also, the referencing of the second level column headers has been accidentally swapped even though in this example this makes no difference as the contents (1, 2, Final) are repeated.
 							</p>
             <p>Example Code:</p>
-            <pre xml:space="preserve">
-&lt;table&gt;
-   &lt;tr&gt;
-     &lt;th rowspan="2" id="h"&gt;Homework&lt;/th&gt;
-     &lt;th colspan="3" id="e"&gt;Exams&lt;/th&gt;
-     &lt;th colspan="3" id="p"&gt;Projects&lt;/th&gt;
-   &lt;/tr&gt;
-   &lt;tr&gt;
-     &lt;th id="e1" headers="e"&gt;1&lt;/th&gt;
-     &lt;th id="e2" headers="e"&gt;2&lt;/th&gt;
-     &lt;th id="ef" headers="e"&gt;Final&lt;/th&gt;
-     &lt;th id="p1" headers="p"&gt;1&lt;/th&gt;
-     &lt;th id="p2" headers="p"&gt;2&lt;/th&gt;
-     &lt;th id="pf" headers="p"&gt;Final&lt;/th&gt;
-   &lt;/tr&gt;
-   &lt;tr&gt;
-     &lt;td headers="h"&gt;15%&lt;/td&gt;       
-     &lt;td headers="e p1"&gt;15%&lt;/td&gt;  // should be "e e1"
-     &lt;td headers="e p2"&gt;15%&lt;/td&gt;  // should be "e e2"
-     &lt;td headers="e pf"&gt;20%&lt;/td&gt;  // should be "e ef"
-     &lt;td headers="e e1"&gt;10%&lt;/td&gt;  // should be "p p1"
-     &lt;td headers="e e2"&gt;10%&lt;/td&gt;  // should be "p p2"
-     &lt;td headers="e ef"&gt;15%&lt;/td&gt;  // should be "p pf"
-   &lt;/tr&gt;
-&lt;/table&gt;
-							</pre>
+<pre xml:space="preserve"><code class="language-html">&lt;table&gt;
+  &lt;tr&gt;
+    &lt;th rowspan="2" id="h"&gt;Homework&lt;/th&gt;
+    &lt;th colspan="3" id="e"&gt;Exams&lt;/th&gt;
+    &lt;th colspan="3" id="p"&gt;Projects&lt;/th&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;th id="e1" headers="e"&gt;1&lt;/th&gt;
+    &lt;th id="e2" headers="e"&gt;2&lt;/th&gt;
+    &lt;th id="ef" headers="e"&gt;Final&lt;/th&gt;
+    &lt;th id="p1" headers="p"&gt;1&lt;/th&gt;
+    &lt;th id="p2" headers="p"&gt;2&lt;/th&gt;
+    &lt;th id="pf" headers="p"&gt;Final&lt;/th&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td headers="h"&gt;15%&lt;/td&gt;       
+    &lt;td headers="e p1"&gt;15%&lt;/td&gt;  &lt;!-- should be "e e1" --&gt;
+    &lt;td headers="e p2"&gt;15%&lt;/td&gt;  &lt;!-- should be "e e2" --&gt;
+    &lt;td headers="e pf"&gt;20%&lt;/td&gt;  &lt;!-- should be "e ef" --&gt;
+    &lt;td headers="e e1"&gt;10%&lt;/td&gt;  &lt;!-- should be "p p1" --&gt;
+    &lt;td headers="e e2"&gt;10%&lt;/td&gt;  &lt;!-- should be "p p2" --&gt;
+    &lt;td headers="e ef"&gt;15%&lt;/td&gt;  &lt;!-- should be "p pf" --&gt;
+  &lt;/tr&gt;
+&lt;/table&gt;</code></pre>
             <p class="working-example">
                <a href="../../working-examples/failure-table-headers-incorrect-association/">Failure example of table incorrectly associating headers attributes in table content (td) to table headers (th)</a>.</p>
          
@@ -45,8 +43,7 @@ <h3>Table content not correctly associated to nested headers</h3>
    </section><section id="tests"><h2>Tests</h2>
       <section class="procedure"><h3>Procedure</h3>
          <ol>
-            <li>For tables that associate data cells to header cells via the id and headers attributes, check that the programmatic association is correct.
-							</li>
+            <li>For tables that associate data cells to header cells via the id and headers attributes, check that the programmatic association is correct.</li>
          </ol>
       </section>
       <section class="results"><h3>Expected Results</h3>
@@ -55,7 +52,8 @@ <h3>Table content not correctly associated to nested headers</h3>
          </ul>
       </section>
    </section><section id="related"><h2>Related Techniques</h2><ul>
-      <li><a href="../html/H43">H43</a></li>
-      <li><a href="../failures/F46">F46</a></li>
       <li><a href="../general/G115">G115</a></li>
-   </ul></section></body></html>
\ No newline at end of file
+      <li><a href="../html/H43">H43</a></li>
+      <li><a href="F46">F46</a></li>
+   </ul></section>
+</body></html>
\ No newline at end of file
diff --git a/techniques/failures/F91.html b/techniques/failures/F91.html
index 298872bd2e..eda8842a11 100644
--- a/techniques/failures/F91.html
+++ b/techniques/failures/F91.html
@@ -1,53 +1,46 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Failure of Success Criterion 1.3.1 for not correctly marking up table headers</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Failure of Success Criterion 1.3.1 for not correctly marking up table headers</h1><section class="meta"><p class="id">ID: F91</p><p class="technology">Technology: failures</p><p class="type">Type: Failure</p></section><section id="applicability"><h2>When to Use</h2>
-      <p>HTML and XHTML.</p>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Failure of Success Criterion 1.3.1 for not correctly marking up table headers</title><link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/></head><body><h1>Failure of Success Criterion 1.3.1 for not correctly marking up table headers</h1><section class="meta"><p class="id">ID: F91</p><p class="technology">Technology: failures</p><p class="type">Type: Failure</p></section><section id="applicability"><h2>When to Use</h2>
+      <p>HTML</p>
    </section><section id="description"><h2>Description</h2>
-      <p>This failure occurs when data tables do not use header elements (th) or other appropriate table mark-up (the scope attribute, headers and id or the ARIA roles columnheader / rowheader) to make the headers programatically determinable from within table content.  Making headers programmatically determinable is especially important when data cells are only intelligible together with header information. When screen reader users navigate through the table content horizontally or vertically, the headers that change can be read out to provide the necessary context for the information in the data cells.</p>
+      <p>This failure occurs when data tables do not use header elements (<code class="language-html">th</code>) or other appropriate table mark-up (the <code class="language-html">scope</code> attribute, <code class="language-html">headers</code> and <code class="language-html">id</code> or the ARIA <code class="language-html">columnheader</code> and <code class="language-html">rowheader</code>) roles to make the headers programmatically determinable from within table content.  Making headers programmatically determinable is especially important when data cells are only intelligible together with header information. When screen reader users navigate through the table content horizontally or vertically, the headers that change can be read out to provide the necessary context for the information in the data cells.</p>
    </section><section id="examples"><h2>Examples</h2>
       <section class="example">
          <h3>Headers not marked up appropriately</h3>
          
-            <p>This table does not use th (or other appropriate header markup) for headers. Instead, it uses td elements for all cells. Navigating cell by cell, screen readers will often fail to read the header cells associated with content.
+            <p>This table does not use <code class="language-html">th</code> (or other appropriate header markup) for headers. Instead, it uses <code class="language-html">td</code> elements for all cells. Navigating cell by cell, screen readers will often fail to read the header cells associated with content.
 							</p>
             <p>Example Code:</p>
-            <pre xml:space="preserve">
-&lt;table&gt;
-   
-   &lt;tr&gt;
-      &lt;td&gt;Name&lt;/td&gt;
-      &lt;td&gt;Age&lt;/td&gt;
-      &lt;td&gt;Height (cm)&lt;/td&gt;
-      &lt;td&gt;Weight (kg)&lt;/td&gt;
-   &lt;/tr&gt;   
-   
-   &lt;tr&gt;
-      &lt;td&gt;Linda&lt;/td&gt;
-      &lt;td&gt;33&lt;/td&gt;
-      &lt;td&gt;169&lt;/td&gt;
-      &lt;td&gt;59&lt;/td&gt;
-   &lt;/tr&gt;   
-   
-   &lt;tr&gt;
-      &lt;td&gt;Jack&lt;/td&gt;
-      &lt;td&gt;37&lt;/td&gt;
-      &lt;td&gt;184&lt;/td&gt;
-      &lt;td&gt;74&lt;/td&gt;
-   &lt;/tr&gt;    
-   
-   &lt;tr&gt;
-      &lt;td&gt;Kira&lt;/td&gt;
-      &lt;td&gt;8&lt;/td&gt;
-      &lt;td&gt;120&lt;/td&gt;
-      &lt;td&gt;21&lt;/td&gt;
-   &lt;/tr&gt;   
-   
-   &lt;tr&gt;
-      &lt;td&gt;Daniel&lt;/td&gt;
-      &lt;td&gt;3&lt;/td&gt;
-      &lt;td&gt;79&lt;/td&gt;
-      &lt;td&gt;14&lt;/td&gt;
-   &lt;/tr&gt;  
-&lt;/table&gt;
-							</pre>
+<pre xml:space="preserve"><code class="language-html">&lt;table&gt;
+  &lt;tr&gt;
+    &lt;td&gt;Name&lt;/td&gt;
+    &lt;td&gt;Age&lt;/td&gt;
+    &lt;td&gt;Height (cm)&lt;/td&gt;
+    &lt;td&gt;Weight (kg)&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;Linda&lt;/td&gt;
+    &lt;td&gt;33&lt;/td&gt;
+    &lt;td&gt;169&lt;/td&gt;
+    &lt;td&gt;59&lt;/td&gt;
+  &lt;/tr&gt;   
+  &lt;tr&gt;
+    &lt;td&gt;Jack&lt;/td&gt;
+    &lt;td&gt;37&lt;/td&gt;
+    &lt;td&gt;184&lt;/td&gt;
+    &lt;td&gt;74&lt;/td&gt;
+  &lt;/tr&gt;    
+  &lt;tr&gt;
+    &lt;td&gt;Kira&lt;/td&gt;
+    &lt;td&gt;8&lt;/td&gt;
+    &lt;td&gt;120&lt;/td&gt;
+    &lt;td&gt;21&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;Daniel&lt;/td&gt;
+    &lt;td&gt;3&lt;/td&gt;
+    &lt;td&gt;79&lt;/td&gt;
+    &lt;td&gt;14&lt;/td&gt;
+  &lt;/tr&gt;  
+&lt;/table&gt;</code></pre>
             <p class="working-example">
                <a href="../../working-examples/failure-td-not-th/">View example 1 (opens in same browser window)</a>
 							     </p>
@@ -58,16 +51,11 @@ <h3>Headers not marked up appropriately</h3>
          <p>For all data tables, check if table headers can be correctly programmatically determined by use of one of the following mechanisms: 
 						</p>
          <ol>
-            <li> headers marked up with table header (<code class="el">th</code>) elements
-						</li>
-         	<li><code class="att">scope</code> attributes on <code class="el">th</code> for tables with more than a single row or column of table headers.</li>
-			<li><code class="att">scope</code> attributes on <code class="el">th</code> for tables with more than a single row or column of table headers.</li>
-            <li> headers and data cells associated using <code class="att">headers</code> and <code class="att">id</code> attributes
-						</li>
-            <li> headers marked up as <code class="el">td</code> elements with the <code class="att">scope</code> attribute
-						</li>
-            <li> headers marked up with ARIA role attributes <code class="att">rowheader</code> or <code class="att">columnheader</code>
-						         </li>
+            <li>headers marked up with table header (<code class="language-html">th</code>) elements</li>
+         	<li><code class="language-html">scope</code> attributes on <code class="language-html">th</code> for tables with more than a single row or column of table headers.</li>
+            <li>headers and data cells associated using <code class="language-html">headers</code> and <code class="language-html">id</code> attributes</li>
+            <li>headers marked up as <code class="language-html">td</code> elements with the <code class="language-html">scope</code> attribute</li>
+            <li>headers marked up with ARIA role attributes <code class="language-html">rowheader</code> or <code class="language-html">columnheader</code></li>
          </ol>
       </section>
       <section class="results"><h3>Expected Results</h3>
@@ -76,9 +64,7 @@ <h3>Headers not marked up appropriately</h3>
          </ul>
       </section>
    </section><section id="related"><h2>Related Techniques</h2><ul>
-      <li><a href="../html/H51">H51</a></li>
-      <li><a href="../failures/F46">F46</a></li>
-      <li><a href="../general/G115">G115</a></li>
-      <li><a href="../html/H43">H43</a></li>
-      <li><a href="../general/G63">G63</a></li>
-   </ul></section></body></html>
\ No newline at end of file
+     <li><a href="../html/H43">H43</a></li> 
+     <li><a href="../html/H51">H51</a></li>
+   </ul></section>
+</body></html>
diff --git a/techniques/failures/F92.html b/techniques/failures/F92.html
index d5c5da3378..85a378000b 100644
--- a/techniques/failures/F92.html
+++ b/techniques/failures/F92.html
@@ -1,9 +1,9 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Failure of Success Criterion 1.3.1 due to the use of role presentation on content which conveys semantic information</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Failure of Success Criterion 1.3.1 due to the use of role presentation on content which conveys semantic information</h1><section class="meta"><p class="id">ID: F92</p><p class="technology">Technology: failures</p><p class="type">Type: Failure</p></section><section id="applicability"><h2>When to Use</h2>
-      <p>HTML and XHTML</p>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Failure of Success Criterion 1.3.1 due to the use of role presentation on content which conveys semantic information</title><link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/></head><body><h1>Failure of Success Criterion 1.3.1 due to the use of role presentation on content which conveys semantic information</h1><section class="meta"><p class="id">ID: F92</p><p class="technology">Technology: failures</p><p class="type">Type: Failure</p></section><section id="applicability"><h2>When to Use</h2>
+      <p>HTML</p>
    </section><section id="description"><h2>Description</h2>
-      <p>This failure occurs when a role of presentation is applied to an element whose purpose is to convey information or relationships in the content. Elements such as <code class="el">table</code>, can convey information about the content contained in them via their semantic markup. The WAI-ARIA role of <a href="https://www.w3.org/TR/wai-aria/#presentation">
-            <code class="attval">presentation</code>
-         </a> on the other hand, is intended to suppress semantic information of content from the accessibility API and prevent user agents from conveying that information to the user. Use of the <code class="attval">presentation</code> role for content which should convey semantic information may prevent the user from understanding that content.
+      <p>This failure occurs when a role of presentation is applied to an element whose purpose is to convey information or relationships in the content. Elements such as <code class="language-html">table</code>, can convey information about the content contained in them via their semantic markup. The WAI-ARIA role of <a href="https://www.w3.org/TR/wai-aria/#presentation">
+            <code class="language-html">presentation</code>
+         </a> on the other hand, is intended to suppress semantic information of content from the accessibility API and prevent user agents from conveying that information to the user. Use of the <code class="language-html">presentation</code> role for content which should convey semantic information may prevent the user from understanding that content.
 </p>
    </section><section id="examples"><h2>Examples</h2>
       <section class="example">
@@ -11,31 +11,29 @@ <h3></h3>
          
             <p>In this example, tabular data is marked up with role=presentation. Though design layout tables can be marked up in such a way, data tables need to retain their semantic information and should therefore not be marked up with role=presentation.</p>
             <p>Example Code:</p>
-            <pre xml:space="preserve">
-&lt;table role="presentation"&gt;
-   &lt;caption&gt;Fruits and their colors&lt;/caption&gt;
-   &lt;tr&gt;
-     &lt;th&gt;Name&lt;/th&gt;
-     &lt;th&gt;Color&lt;/th&gt;
-   &lt;/tr&gt;
-   &lt;tr&gt;
+<pre xml:space="preserve"><code class="language-html">&lt;table role="presentation"&gt;
+  &lt;caption&gt;Fruits and their colors&lt;/caption&gt;
+  &lt;tr&gt;
+    &lt;th&gt;Name&lt;/th&gt;
+    &lt;th&gt;Color&lt;/th&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
     &lt;td scope="row"&gt;banana&lt;/td&gt;
     &lt;td&gt;yellow&lt;/td&gt;
-   &lt;/tr&gt;
-   &lt;tr&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
     &lt;td scope="row"&gt;orange&lt;/td&gt;
     &lt;td&gt;orange&lt;/td&gt;
-   &lt;/tr&gt;
-  &lt;/table&gt;
-                            </pre>
-         
+  &lt;/tr&gt;
+&lt;/table&gt;</code></pre>
+       
       </section>
    </section><section id="tests"><h2>Tests</h2>
       <section class="procedure"><h3>Procedure</h3>
          <ol>
             <li>Check if an element which conveys information, structure, or relationships through its semantic markup
 </li>
-            <li>Element has the attribute role="presentation".
+            <li>Element has the attribute <code class="language-html">role="presentation"</code>.
 </li>
          </ol>
       </section>
@@ -51,5 +49,5 @@ <h3></h3>
                   <a href="https://www.w3.org/TR/wai-aria/#presentation">The Accessible Rich Internet Applications (WAI-ARIA) Roles Model</a>
                </li>
          </ul>
-      
-   </section></body></html>
\ No newline at end of file
+   </section>
+</body></html>
\ No newline at end of file
diff --git a/techniques/failures/F93.html b/techniques/failures/F93.html
index 8e2f981669..f229715b67 100644
--- a/techniques/failures/F93.html
+++ b/techniques/failures/F93.html
@@ -1,46 +1,43 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Failure of Success Criterion 1.4.2 for absence of a way to pause or stop an HTML5 media element that autoplays</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Failure of Success Criterion 1.4.2 for absence of a way to pause or stop an HTML5 media element that autoplays</h1><section class="meta"><p class="id">ID: F93</p><p class="technology">Technology: failures</p><p class="type">Type: Failure</p></section><section id="applicability"><h2>When to Use</h2>
-      <p>HTML5</p>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Failure of Success Criterion 1.4.2 for absence of a way to pause or stop an HTML5 media element that autoplays</title><link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/></head><body><h1>Failure of Success Criterion 1.4.2 for absence of a way to pause or stop an HTML5 media element that autoplays</h1><section class="meta"><p class="id">ID: F93</p><p class="technology">Technology: failures</p><p class="type">Type: Failure</p></section><section id="applicability"><h2>When to Use</h2>
+      <p>HTML</p>
    </section><section id="description"><h2>Description</h2>
-<p>This failure occurs when an <code class="el">audio</code> or <code class="el">video</code> element with an audio track contains the <code class="att">autoplay</code> attribute and does not contain the <code class="att">muted</code> attribute, and no controls or commands have been provided to pause or stop the media resource.</p>
-<p>When the <code class="att">autoplay</code> attribute is present, the user agent will automatically begin playback of the media resource as soon as it can do so without stopping. When the <code class="att">muted</code> attribute is present, the user agent will initially mute the media resource's audio output, overriding any user preference.</p>
+<p>This failure occurs when an <code class="language-html">audio</code> or <code class="language-html">video</code> element with an audio track contains the <code class="language-html">autoplay</code> attribute and does not contain the <code class="language-html">muted</code> attribute, and no controls or commands have been provided to pause or stop the media resource.</p>
+<p>When the <code class="language-html">autoplay</code> attribute is present, the user agent will automatically begin playback of the media resource as soon as it can do so without stopping. When the <code class="language-html">muted</code> attribute is present, the user agent will initially mute the media resource's audio output, overriding any user preference.</p>
 <p>If the media element is shorter than 3 seconds, the failure does not occur. If the user agent provides user preferences to override autoplay behavior, the failure does not occur.</p>
 <p>The HTML spec contains the following notes:</p>
-<ul><li>User agents do not need to support autoplay, and it is suggested that user agents honor user preferences on the matter. Authors are urged to use the <code class="att">autoplay</code> attribute rather than using script to force the video to play, so as to allow the user to override the behavior if so desired.</li>
-<li>Authors are urged to use the <code class="att">autoplay</code> attribute rather than using script to trigger automatic playback, as this allows the user to override the automatic playback when it is not desired, e.g. when using a screen reader. Authors are also encouraged to consider not using the automatic playback behavior at all, and instead to let the user agent wait for the user to start playback explicitly.</li></ul>
+<ul><li>User agents do not need to support autoplay, and it is suggested that user agents honor user preferences on the matter. Authors are urged to use the <code class="language-html">autoplay</code> attribute rather than using script to force the video to play, so as to allow the user to override the behavior if so desired.</li>
+<li>Authors are urged to use the <code class="language-html">autoplay</code> attribute rather than using script to trigger automatic playback, as this allows the user to override the automatic playback when it is not desired, e.g. when using a screen reader. Authors are also encouraged to consider not using the automatic playback behavior at all, and instead to let the user agent wait for the user to start playback explicitly.</li></ul>
    </section><section id="examples"><h2>Examples</h2>
       <section class="example">
          <h3>An auto-playing audio track</h3>
          
-            <p>In this example, the advertising video contains an audio track. The video will play continuously because of the <code class="att">loop</code> attribute, and the video will start automatically because of the <code class="att">autoplay</code> attribute and because there does not appear to be any controls to allow the user to stop the video.</p>
+            <p>In this example, the advertising video contains an audio track. The video will play continuously because of the <code class="language-html">loop</code> attribute, and the video will start automatically because of the <code class="language-html">autoplay</code> attribute and because there does not appear to be any controls to allow the user to stop the video.</p>
          
-         <pre xml:space="preserve">
-				 &lt;video src="ads.cgi?kind=video" autoplay loop&gt;&lt;/video&gt;
-            </pre>
+<pre xml:space="preserve"><code class="language-html">&lt;video src="ads.cgi?kind=video" autoplay loop&gt;&lt;/video&gt;</code>
+</pre>
       </section>
    </section><section id="tests"><h2>Tests</h2>
       <section class="procedure"><h3>Procedure</h3>
          <ol>
-            <li>Check if an <code class="el">audio</code> or <code class="el">video</code> element has an active audio track.</li>
+            <li>Check if an <code class="language-html">audio</code> or <code class="language-html">video</code> element has an active audio track.</li>
             <li>Check if the audio or video lasts longer than 3 seconds.</li>
-            <li>Check if the element has an <code class="att">autoplay</code> attribute.</li>
-            <li>Check if the element does not have a <code class="att">muted</code> attribute.</li>
+            <li>Check if the element has an <code class="language-html">autoplay</code> attribute.</li>
+            <li>Check if the element does not have a <code class="language-html">muted</code> attribute.</li>
             <li>Check if no command or control has been provided to stop or pause the media element.</li>
           </ol>
       </section>
       <section class="results"><h3>Expected Results</h3>
          <ul>
-            <li>If checks 1-5 are true, then this failure condition applies and the content fails the Success Criterion.</li>
+            <li>If checks #1-5 are true, then this failure condition applies and the content fails the Success Criterion.</li>
          </ul>
       </section>
    </section><section id="related"><h2>Related Techniques</h2></section><section id="resources"><h2>Resources</h2>
       
          <ul>
             <li>
-               	<a href="https://www.w3.org/TR/html5/">HTML5</a>
-               </li>
-            <li>
-                  <a href="https://html.spec.whatwg.org/">HTML5 Living Standard</a>
-               </li>
+              <a href="https://html.spec.whatwg.org/">HTML Living Standard</a>
+            </li>
          </ul>
       
-   </section></body></html>
\ No newline at end of file
+   </section>
+</body></html>
\ No newline at end of file
diff --git a/techniques/failures/F94.html b/techniques/failures/F94.html
index edd20c9d1c..f1692fab60 100644
--- a/techniques/failures/F94.html
+++ b/techniques/failures/F94.html
@@ -2,7 +2,7 @@
 <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
 	<head>
 		<title>Failure of Success Criterion 1.4.4 due to incorrect use of viewport units to resize text</title>
-		<link rel="stylesheet" type="text/css" href="https://rawgit.com/w3c/wcag21/master/css/sources.css"/>
+		<link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
 	</head>
 	<body>
 		<h1>Failure of Success Criterion 1.4.4 due to incorrect use of viewport units to resize text</h1>
@@ -19,64 +19,59 @@ <h2>Metadata</h2>
 			<h2>Description</h2>
 			<p>The objective of this technique is to document the failure of text to re-scale when <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/length">viewport units</a> are used on text. As these units are relative to the viewport, it means they cannot be resized by zooming or adjusting text-size.</p>
 			<p>There are various methods to increase and decrease the size of text and other content, but viewport units applied to text (generally via <code>font-size</code> in CSS) prevent most available methods. Attempts to use browser controls to zoom or adjust text-size will not work. Only methods that completely override the CSS will work, and those could cause other issues such as layouts collapsing or text overlapping.</p>
-			<p>Some uses of viewport units may not prevent text-size adjustments, but if they are used as the primary method for defining text-size, they are likely to cause a failure of <a href="../../guidelines/sc/20/resize-text.html">Success Criterion 1.4.4</a>.</p>
-
-            <p class="note">If media queries were used to adjust the size of text or unit of measure at different screen sizes, it may not be a failure of <a href="https://www.w3.org/WAI/WCAG21/Understanding/resize-text.html">Resize text</a>. On-page controls provided by the author are also a way of passing the resize text success criteria.</p>
+			<p>Some uses of viewport units may not prevent text-size adjustments, but if they are used as the primary method for defining text-size, they are likely to cause a failure of <a href="../../Understanding/resize-text">Success Criterion 1.4.4</a>.</p>
+      <p class="note">If media queries were used to adjust the size of text or unit of measure at different screen sizes, it may not be a failure of <a href="../../Understanding/resize-text">Resize Text</a>. On-page controls provided by the author are also a way of passing the resize text success criteria.</p>
 		</section>
 		<section id="examples">
 			<h2>Examples</h2>
 			<section class="example">
 				<h3>Failure example 1</h3>
 				<p>The following CSS and HTML snippet uses VW units to size the text.</p>
-				<pre><code>/* CSS */
+<pre xml:space="preserve"><code class="language-css">/* CSS */
 .callout {
-    font-size:1vw;
-}
+  font-size:1vw;
+}</code>
 
-&lt;p class="callout"&gt;
-  Text that scales by viewport units&lt;p/&gt;</code></pre>
-  <p class="working-example">Example <a href="../../working-examples/failure-viewport-units/">page with an example of text sized in <code>vh</code> units</a>.</p>
+<code class="language-html">&lt;p class="callout"&gt;Text that scales by viewport units&lt;/p&gt;</code></pre>
+				<p class="working-example">Example <a href="../../working-examples/failure-viewport-units/">page with an example of text sized in <code class="language-css">vh</code> units</a>.</p>
 			</section>
 		</section>
 		<section id="tests">
 			<h2>Tests</h2>
 			<section class="test-procedure">
 				<h3>Procedure</h3>
-				<p>In a desktop browser with a resizable window:</p>
 				<ol>
-					<li>Set zoom level to 100%.</li>
-                    <li>Set window size to 1280 pixels wide.</li>
-                    <li>Visit the page to be tested.</li>
-                    <li>Use any of the following methods to resize text when available:
+					<li>Visit the page to be tested.</li>
+					<li>Use any of the following methods to resize text when available:
 						<ul>
-							<li>the zoom feature of the browser</li>
+							<li>the zoom feature of the browser,</li>
 							<li>the text-sizing feature of the browser,</li>
 							<li>on-page controls for resizing text.</li>
 						</ul>
 					</li>
-                    <li>Check that the text resizes by one of the methods above, and can be resized to at least 200% of the default.</li>
+          <li>Check that the text resizes by one of the methods above, and can be resized up to 200% of the default.</li>
 				</ol>
 			</section>
 			<section class="test-results">
 				<h3>Expected Results</h3>
 				<ul>
-					<li>If step #5 is false, then this failure condition applies and the content fails Success Criteria 1.4.4, Resize Text.</li>
+					<li>If the last step is false, then this failure condition applies and the content fails Success Criterion 1.4.4 Resize Text.</li>
 				</ul>
 			</section>
 		</section>
 		<section id="related">
 			<h2>Related Techniques</h2>
 			<ul>
-                <li><a href="../../techniques/general/G179">G179</a></li>
-                <li><a href="../../techniques/css/C12">C12</a></li>
-				<li><a href="../../techniques/css/C13">C13</a></li>
-				<li><a href="../../techniques/css/C14">C14</a></li>
+        <li><a href="../general/G179">G179</a></li>
+        <li><a href="../css/C12">C12</a></li>
+				<li><a href="../css/C13">C13</a></li>
+				<li><a href="../css/C14">C14</a></li>
 			</ul>
 		</section>
 		<section id="resources">
 				<h2>Related Resources</h2>
 				<ul>
-					<li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/length"><abbr title="Mozilla Development Network">MDN</abbr> CSS units</a> including <code>vh</code> and <code>vw</code> units.</li>
+					<li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/length"><abbr title="Mozilla Development Network">MDN</abbr> CSS units</a> including <code class="language-css">vh</code> and <code class="language-css">vw</code> units.</li>
 					<li><a href="https://www.w3.org/TR/css-values/#viewport-relative-lengths">Viewport percentage lengths</a> in the CSS Values and Units Module Level 4 specification.</li>
 				</ul>
 			</section>
diff --git a/techniques/failures/F96.html b/techniques/failures/F96.html
index c2c5192856..46a1503834 100644
--- a/techniques/failures/F96.html
+++ b/techniques/failures/F96.html
@@ -25,36 +25,32 @@ <h2>Description</h2>
 			<p>There are techniques that go beyond the visible label text of elements. The idea is to provide more context for users of assistive technologies to whom the visible context may not be available. Examples are the use of accessible hidden (e.g., offscreen-positioned) text, the use of the aria-label attribute to overwrite the label text, or the use of the aria-labelledby attribute to compose a label text from one or more strings strings on the page.</p>
 			<p>When the use of these techniques results in an accessible name in which the exact string of the visible label does not occur in the accessible name, speech users may be unable to activate that control. Refer to the <a href="https://www.w3.org/TR/accname/">Accessible Name and Description Computation</a> algorithm to work out the order of precedence in computing the accessible name of a control.</p>
 		</section>
-		
+
 		<section id="examples">
 			<h2>Examples</h2>
-      
+
       <section class="example">
 				<h3>Mismatch of visible button text and accessible name supplied via aria-label</h3>
 				<p>The text in a search button reads "Go" but the accessible name provided in an aria-label attribute is "Find in this site"</p>
-				<pre><code>
-        &lt;button id="sitesearch" aria-label="Find in this site"&gt;Go&lt;/button&gt;
-        </code></pre>
+<pre xml:space="preserve"><code class="language-html">&lt;button id="sitesearch" aria-label="Find in this site"&gt;Go&lt;/button&gt;
+</code></pre>
       </section>
-      
+
       <section class="example">
 				<h3>Invisible link text disrupts visible label text string in accessible name</h3>
 				<p>A download link reads "Download specification" but there is invisible link text so that the accessible name of that link is "Download gizmo specification". While the visible label text is contained in the accessible name, there is no string match which may prevent the link from being activated by speech input.</p>
-        <pre><code>
-        &lt;a href="#"&gt;Download &lt;span class="accessibly-hidden"&gt;gizmo&lt;/span&gt; specification&lt;/a&gt;
-        </code></pre>
+<pre xml:space="preserve"><code class="language-html">&lt;a href="#"&gt;Download &lt;span class="accessibly-hidden"&gt;gizmo&lt;/span&gt; specification&lt;/a&gt;</code></pre>
       </section>
-          
+
       <section class="example">
 				<h3>Input with a hidden label carrying text that differs from the input's value attribute</h3>
 				<p>An input of type="submit" with the value="search" which is exposed as visible label of the input, has a programmatically linked and accessibly hidden label enclosing the text "Find in this site" referenced by aria-labelledby. Because aria-labelledby takes precedence over the value of the input, the accessible name of the input in most browser / screen reader combinations will be "Find in this site". Speech users speaking a command such as "Click search" will be unable to activate the input.</p>
-        <pre><code>
-        &lt;div id="hidden-label"&gt;Find in this site&lt;/div&gt;
-        &lt;input type="submit" aria-labelledby="hidden-label" value="search"&gt;
-        </code></pre>
+<pre xml:space="preserve"><code class="language-html">&lt;div id="hidden-label"&gt;Find in this site&lt;/div&gt;
+&lt;input type="submit" aria-labelledby="hidden-label" value="search"&gt;
+</code></pre>
       </section>
     </section>
-    
+
 		<section id="tests">
 			<h2>Tests</h2>
 			<section class="test-procedure">
@@ -75,13 +71,14 @@ <h3>Expected Results</h3>
 		<section id="related">
 			<h2>Related Techniques</h2>
 			<ul>
-        <li><a href="../../techniques/general/G131">G131</a></li>
-        <li><a href="../../techniques/aria/ARIA7">ARIA7</a></li>
-        <li><a href="../../techniques/aria/ARIA8">ARIA8</a></li>
-        <li><a href="../../techniques/aria/ARIA9">ARIA9</a></li>
-				<li><a href="../../techniques/aria/ARIA14">ARIA14</a></li>
-        <li><a href="../../techniques/aria/ARIA16">ARIA16</a></li>
-        <li><a href="../../techniques/client-side-script/SCR30">SCR30</a></li>
+				<li><a href="../../Techniques/general/F111">F111</a></li>
+        <li><a href="../../Techniques/general/G131">G131</a></li>
+        <li><a href="../../Techniques/aria/ARIA7">ARIA7</a></li>
+        <li><a href="../../Techniques/aria/ARIA8">ARIA8</a></li>
+        <li><a href="../../Techniques/aria/ARIA9">ARIA9</a></li>
+				<li><a href="../../Techniques/aria/ARIA14">ARIA14</a></li>
+        <li><a href="../../Techniques/aria/ARIA16">ARIA16</a></li>
+        <li><a href="../../Techniques/client-side-script/SCR30">SCR30</a></li>
 			</ul>
 		</section>
 	</body>
diff --git a/techniques/failures/F97.html b/techniques/failures/F97.html
index 71a93ed44d..a4509cc518 100644
--- a/techniques/failures/F97.html
+++ b/techniques/failures/F97.html
@@ -14,7 +14,7 @@ <h2>Metadata</h2>
 		</section>
 		<section id="applicability">
 			<h2>When to Use</h2>
-			<p class="instructions">All technologies that allow the viewing of content to be restricted to one orientation.</p>
+			<p>All technologies that allow the viewing of content to be restricted to one orientation.</p>
 		</section>
 		<section id="description">
 			<h2>Description</h2>
@@ -36,7 +36,7 @@ <h3>Procedure</h3>
 					<li>Open the content in landscape view. Check that the content is oriented for this view.</li>
           <li>Open the content in portrait view. Check that the content is oriented for this view.</li>
 					<li>Check if portrait or landscape view is essential for the viewing and operation of the content.</li>
-          <li>If there are any controls in the content, user agent, operating system, or device that restrict or allow orientation changes, check that the controls can be set to allow checks one and two to be true.</li>
+          <li>If there are any controls in the content, user agent, operating system, or device that restrict or allow orientation changes, check that the controls can be set to allow checks #1 and #2 to be true.</li>
 				</ol>
 			</section>
 			<section class="test-results">
@@ -46,11 +46,11 @@ <h3>Expected Results</h3>
 				</ul>
 			</section>
 		</section>
-		<section id="related">
+    <section id="related">
 			<h2>Related Techniques</h2>
-<!--			<ul>
-				<li></li>
+			<ul>
+				<li><a href="../general/G214">G214</a></li>
 			</ul>
--->		</section>
+		</section>
 	</body>
 </html>
diff --git a/techniques/failures/F98.html b/techniques/failures/F98.html
index d1abb96e28..a97c7eea25 100644
--- a/techniques/failures/F98.html
+++ b/techniques/failures/F98.html
@@ -8,7 +8,7 @@
 		<h1>Failure due to interactions being limited to touch-only on touchscreen devices</h1>
 		<section id="meta">
 			<h2>Metadata</h2>
-			<p id="id">F97</p>
+			<p id="id">F98</p>
 			<p id="technology">general</p>
 			<p id="type">failure</p>
 		</section>
@@ -30,8 +30,8 @@ <h2>Examples</h2>
       
       <section class="example">
 				<h3>Only using touch-specific JavaScript event listeners when a touchscreen is detected</h3>
-				<p>These types of approaches have historically been popular for "mobile" specific development, to ensure that touchscreen interactions are more responsive and immediate (due to the way that touch interactions used to add a delay of approximately 300ms between a "tap" interaction and the generic <code>click</code> event being fired).</p>
-				<pre><code>
+				<p>These types of approaches have historically been popular for "mobile" specific development, to ensure that touchscreen interactions are more responsive and immediate (due to the way that touch interactions used to add a delay of approximately 300ms between a "tap" interaction and the generic click event being fired).</p>
+				<pre xml:space="preserve"><code class="language-javascript">
 /* inferring the presence of a touchscreen based on
    support for the Touch Events API */
 
@@ -39,13 +39,13 @@ <h3>Only using touch-specific JavaScript event listeners when a touchscreen is d
   /* set up event listeners for touch */
   target.addEventListener('touchend', ...);
   ...
-} else {
+}
+else {
   /* set up event listeners for mouse/keyboard */
   target.addEventListener('click', ...);
   ...
-}
-				</code></pre>
-				<pre><code>
+}</code></pre>
+<pre xml:space="preserve"><code class="language-javascript">
 /* inferring the presence of a touchscreen based on
    the CSS Media Queries 4 Interaction Media Features
    match for a "coarse" primary input mechanism */
@@ -54,16 +54,16 @@ <h3>Only using touch-specific JavaScript event listeners when a touchscreen is d
   /* set up event listeners for touch */
   target.addEventListener('touchend', ...);
   ...
-} else {
+}
+else {
   /* set up event listeners for mouse/keyboard */
   target.addEventListener('click', ...);
   ...
-}
-				</code></pre>
+}</code></pre>
 			
 				<p>Similarly, web content that omits relevant/necessary keyboard event listeners (e.g. for the correct keyboard interaction with a complex widget, such as a tab interface) when a touchscreen is detected - under the assumption that on a touch device, keyboard support won't be necessary.</p>
 
-				<pre><code>
+<pre xml:space="preserve"><code class="language-javascript">
 /* inferring the presence of a touchscreen based on
    the navigator.maxTouchPoints property defined in
    the Pointer Events API */
@@ -72,12 +72,12 @@ <h3>Only using touch-specific JavaScript event listeners when a touchscreen is d
     (navigator.maxTouchPoints > 0)) {
 	/* no need to listen to keyboard - there's a touchscreen... */
 	...
-} else {
+}
+else {
 	/* set up event listeners for keyboard interactions */
   target.addEventListener('keyup', ...);
   ...
-}
-				</code></pre>
+}</code></pre>
 			
 				<p class="note">Generally, these approaches will <em>also</em> result in a failure of Success Criterion 2.1.1 Keyboard - but only in situations where a touchscreen interface was also detected.</p>
 
@@ -86,15 +86,13 @@ <h3>Only using touch-specific JavaScript event listeners when a touchscreen is d
       <section class="example">
 				<h3>Hiding/omitting controls for mouse and keyboard users when a touchscreen is detected</h3>
 				<p>Web content containing interactive widgets such as content carousels, with visible buttons to operate the widget (such as previous/next buttons, or a visible scrollbar/slider). These visible controls are hidden/omitted when a touchscreen is detected, under the assumption that users will simply use touch gestures to operate the widgets, and no other alternatives are then provided for keyboard or mouse users.</p>
-        <pre><code>
-/* using CSS Media Queries 4 Interaction Media Features
+<pre xml:space="preserve"><code class="language-css">/* using CSS Media Queries 4 Interaction Media Features
    to hide particular elements in the page (such as a container
    with visible controls) when a "coarse" primary input is present */
 
 @media (pointer: coarse) {
   #widget .controls { display: none; }
-}
-				</code></pre>
+}</code></pre>
 				<p>Depending on the specific implementation, authors may allow mouse interactions with widgets that mirror touch gestures - for instance, allowing mouse users to also drag/swipe carousels, rather than just relying on clickable previous/next controls or scrollbars. In these cases, hiding controls when a touchscreen is detected will still allow users to operate the widget with the mouse (unless this interaction has also been suppressed/omitted when the touchscreen was detected, as per the previous example). However, if the only keyboard-operable controls for the widget were hidden, and no alternative for keyboard users was provided (such as allowing cursor key operation), this situation would still fail Success Criterion 2.5.6.</p>
 				<p class="note">Generally, these approaches will <em>also</em> result in a failure of Success Criterion 2.1.1 Keyboard <em>and</em> (depending on the touch gesture that the user is expected to perform) Success Criterion 2.5.1 Pointer Gestures.</p>
 
diff --git a/techniques/failures/F99.html b/techniques/failures/F99.html
index 1cd9556e09..6cc68da54e 100644
--- a/techniques/failures/F99.html
+++ b/techniques/failures/F99.html
@@ -4,7 +4,7 @@
 <head>
   <title>Failure of Success Criterion 2.1.4 due to implementing character key shortcuts that cannot be turned off or
     remapped</title>
-  <link rel="stylesheet" type="text/css" href="../../css/editors.css" />
+  <link rel="stylesheet" type="text/css" href="../../css/editors.css"/>
 </head>
 
 <body>
@@ -30,13 +30,10 @@ <h2>Description</h2>
     <p class="note">The use of a single key keyboard shortcut is not a failure if the shortcut is only active when a particular interface element has focus. For example, when a select element or a custom listbox has focus, the input of single character keys to navigate the list is a useful feature.</p>
     <p>The test procedure suggests asking the author (often the developer of the site) whether keyboard shortcuts are used. If that information is trusted then the procedure can be simpler than pressing all the keys.</p>
 
-    <p>The success criterion does not apply when single key shortcuts are only active when interface elements have the focus, for example, a <code>select</code> element. Here, pressing a letter key is used for fast navigation within the select options.</p>
-    <p>Viewing page scripts and searching for typical keyboard event handlers like <code>document.addEventListener('keydown' ...) </code> or the presence of the <code>.keycode</code> attribute
-      may establish the presence of scripts that intercept keyboard shortcuts without modification keys like ALT or
-      STR being held down at the same time. As there are several ways of implementing character key events, this
-      method is not considered reliable.</p>
-    <p>Some browsers employ single key shortcuts with <kbd>Shift</kbd>. For example, Firefox opens a page search when pressing
-      <kbd>Shift</kbd> + <kbd>/</kbd> and a search in page links when pressing <kbd>Shift</kbd> + <kbd>'</kbd>. In these cases, it will be necessary to press <kbd>Esc</kbd> or click an empty part of the page to remove the focus from the browser input.</p>
+    <p>The success criterion does not apply when single key shortcuts are only active when interface elements have the focus, for example, a <code class="language-html">select</code> element. Here, pressing a letter key is used for fast navigation within the select options.</p>
+    <p>Viewing page scripts and searching for typical keyboard event handlers like <code class="language-javascript">document.addEventListener('keydown' ...) </code> or the presence of the <code class="language-javascript">.keycode</code> attribute
+      may establish the presence of scripts that intercept keyboard shortcuts without modification keys like <kbd>ALT</kbd> or <kbd>Ctrl</kbd> being held down at the same time. As there are several ways of implementing character key events, this method is not considered reliable.</p>
+    <p>Some browsers employ single key shortcuts with <kbd>Shift</kbd>. For example, Firefox opens a page search when pressing <kbd>Shift</kbd> + <kbd>/</kbd> and a search in page links when pressing <kbd><kbd>Shift</kbd> + <kbd>'</kbd></kbd>. In these cases, it will be necessary to press <kbd>Esc</kbd> or click an empty part of the page to remove the focus from the browser input.</p>
   </section>
   <section id="examples">
     <h2>Example</h2>
@@ -50,8 +47,7 @@ <h3>Procedure</h3>
       <ol>
         <li>If loading the page sets focus to an input, click on an empty part of the page to ensure that
           no inputs are in focus.</li>
-          <li>Press keys identified by the author as shortcut keys, or if this information is not available, press all printing characters (i.e., all number, letter, sign and punctuation keys). Do not press non-printing
-          modifier and control keys such as <kbd>Ctrl</kbd>, <kbd>Alt</kbd>, <kbd>Esc</kbd>, Arrow keys and (where present) the function keys <kbd>F1</kbd>-<kbd>F12</kbd>. Also
+          <li>Press keys identified by the author as shortcut keys, or if this information is not available, press all printing characters (i.e., all number, letter, sign and punctuation keys). Do not press non-printing modifier and control keys such as <kbd>Ctrl</kbd>, <kbd>Alt</kbd>, <kbd>Esc</kbd>, Arrow keys and (where present) the function keys <kbd>F1</kbd>-<kbd>F12</kbd>. Also
           exempt are <kbd>Space</kbd>, <kbd>Enter</kbd>, <kbd>Return</kbd>, <kbd>Tab</kbd>, and the <kbd>Delete</kbd> key.</li>
         <li>Hold the <kbd>Shift</kbd> key and press the same keys again.</li>
         <li>Check whether a function has been triggered by pressing the keys</li>
@@ -59,16 +55,10 @@ <h3>Procedure</h3>
     </section>
     <section class="test-results">
       <h3>Expected Results</h3>
-	  <p>If step #4 is false then this failure condition applies and the content fails the Success Criterion.</p>
+	  <p>If check #4 is false then this failure condition applies and the content fails the Success Criterion.</p>
 
     </section>
   </section>
-  <section id="related">
-    <h2>Related Techniques</h2>
-    <ul>
-      <li>ID</li>
-    </ul>
-  </section>
 </body>
 
 </html>
diff --git a/techniques/failures/img/F69-obscured.gif b/techniques/failures/img/F69-obscured.gif
deleted file mode 100644
index e9f69137c1..0000000000
Binary files a/techniques/failures/img/F69-obscured.gif and /dev/null differ
diff --git a/techniques/failures/img/F69-obscured.png b/techniques/failures/img/F69-obscured.png
new file mode 100644
index 0000000000..50a3f3efc0
Binary files /dev/null and b/techniques/failures/img/F69-obscured.png differ
diff --git a/techniques/failures/img/F69-truncated.gif b/techniques/failures/img/F69-truncated.gif
deleted file mode 100644
index 29382f88e2..0000000000
Binary files a/techniques/failures/img/F69-truncated.gif and /dev/null differ
diff --git a/techniques/failures/img/F69-truncated.png b/techniques/failures/img/F69-truncated.png
new file mode 100644
index 0000000000..f71d289b4e
Binary files /dev/null and b/techniques/failures/img/F69-truncated.png differ
diff --git a/techniques/flash/FLASH1.html b/techniques/flash/FLASH1.html
new file mode 100644
index 0000000000..daa2aa48c1
--- /dev/null
+++ b/techniques/flash/FLASH1.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Setting the name property for a non-text object</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Setting the name property for a non-text object</h1><section class="meta"><p class="id">ID: FLASH1</p><p class="technology">Technology: flash</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+      <ul id="flash.applicability.general">
+         <li>Adobe Flash Professional version MX and higher </li>
+         <li>Adobe Flex</li>
+      </ul>
+   </section><section id="description"><h2>Description</h2>
+      <p>The objective of this technique is to show how non-text objects in Flash can be marked so that they can be read by assistive technology.</p>
+      <p>The Flash Player supports text alternatives to non-text objects using the <code class="prop">name</code> property in the accessibility object, which can be defined in ActionScript or within Flash authoring tools.</p>
+      <p>When an object contains words that are important to understanding the content, the <code class="prop">name</code> property should include those words. This will allow the <code class="prop">name</code> property to play the same function on the page as the object. Note that it does not necessarily describe the visual characteristics of the object itself but must convey the same meaning as the object. </p>
+   </section><section id="examples"><h2>Examples</h2>
+      <section class="example">
+         <h3>Applying a textual alternative for a symbol (graphic, button or movieclip)</h3>
+         
+            <p>The Flash Professional authoring tool's Accessibility panel lets  authors provide accessibility information to assistive technology and  set accessibility options for individual Flash objects or entire Flash  applications. </p>
+            <ol>
+               <li>For a text alternative to be applied to a non-text object, it must be saved as a symbol in the movie's library. <em>Note:</em> Flash does not support text alternatives for graphic symbols. Instead,  the graphic must be converted to or stored in a movie clip or button  symbol.</li>
+               <li>Bring up the Accessibility panel by selecting "Window &gt;  Other Panels &gt; Accessibility" in the application menu, or through  the shortcut ALT + F11. Ensure that the 'Make object accessible'  checkbox is checked.</li>
+               <li>Select the non-text instance on the movie stage, the fields in the Accessibility panel become editable.</li>
+               <li>Enter a meaningful text alternative in the 'name' field, properly describing the purpose of the symbol.</li>
+            </ol>
+            <figure id="figure-flash-authoring-accessibility-panel">
+            	<img src="img/acc_name_scrn.jpg"/>			       
+                  
+                  <figcaption>The Accessibility panel in the Flash authoring environment.</figcaption>
+               
+							     </figure>
+         
+      </section>
+      <section class="example">
+         <h3>Applying textual alternatives programmatically in ActionScript 2.0</h3>
+         
+            <p>To manage an object's text equivalent programmatically using  ActionScript 2, the _accProps object must be used. This references an  object containing accessibility related properties set for the object.  The code example below shows a simple example of how the _accProps  object is used to set an objects name in ActionScript. </p>
+         
+         <pre xml:space="preserve">// 'print_btn' is an instance placed on the movie's main timeline
+_root.print_btn._accProps = new Object();
+_root.print_btn._accProps.name = "Print";</pre>
+      </section>
+      <section class="example">
+         <h3>Applying textual alternatives programmatically in ActionScript 3.0</h3>
+         
+            <p>To manage an object's text equivalents programmatically using  ActionScript 3, the <code class="obj">AccessibilityProperties</code> object and <code class="prop">name</code> property  must be used. The code example below shows a simple example of how the  <code class="prop">name</code> property is used to set an objects name in ActionScript. </p>
+         
+         <pre xml:space="preserve">// 'print_btn' is an instance placed on the movie's main timeline
+print_btn.accessibilityProperties = new AccessibilityProperties();
+print_btn.accessibilityProperties.name = "Print";</pre>
+      </section>
+   </section><section id="tests"><h2>Tests</h2>
+      <section class="procedure"><h3>Procedure</h3>
+         <ol>
+            <li>Publish the SWF file</li>
+            <li>Open the SWF file in Internet Explorer 6 or higher (using  Flash Player 6 or higher), or Firefox 3 or higher (using Flash Player 9  or higher)</li>
+            <li>Use a tool which is capable of showing an object's name text alternative, such as ACTF aDesigner 1.0 to open the Flash movie.</li>
+            <li>In the GUI summary panel, loop over each object which is  contained by the Flash movie and ensure the object that was provided a  name has a proper name attribute appearing in the tool's display.</li>
+            <li>Authors may also test with a screen reader, by reading the  Flash content and listening to hear that the equivalent text is read  when tabbing to the non-text object (if it is tabbable) or hearing the  alternative text read when reading the content line-by-line.</li>
+            <li>All non-text objects have text equivalents that can serve  the same purpose and convey the same information as the non-text object</li>
+         </ol>
+      </section>
+      <section class="results"><h3>Expected Results</h3>
+         <p>Check #6 is true. </p>
+      </section>
+   </section><section id="related"><h2>Related Techniques</h2><ul>
+      <li><a href="../general/G94">G94</a></li>
+   </ul></section></body></html>
diff --git a/techniques/flash/FLASH10.html b/techniques/flash/FLASH10.html
new file mode 100644
index 0000000000..c9e63b22df
--- /dev/null
+++ b/techniques/flash/FLASH10.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Indicating required form controls in Flash</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Indicating required form controls in Flash</h1><section class="meta"><p class="id">ID: FLASH10</p><p class="technology">Technology: flash</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+      <ul id="flash.applicability.general">
+         <li>Adobe Flash Professional version MX and higher </li>
+         <li>Adobe Flex</li>
+      </ul>
+   </section><section id="description"><h2>Description</h2>
+      <p>The objective of this technique is to provide a clear indication that   a specific form control in a Web application or form is required for   successful data submission. The word "required" is added to the form   control's accessible name, and a visual indicator is placed next to the   label. </p>
+   </section><section id="examples"><h2>Examples</h2>
+      <section class="example">
+         <h3>Adding the word "required" to the control's accessible name</h3>
+         
+            <p>This example shows how to use the Accessibility panel to indicate a   field as being 'required' to users: </p>
+            <ol>
+               <li> Visually, place asterisk character or some other indication   adjacent to the form control's label. </li>
+               <li> Use the Accessibility panel to combine the word "required"   with the control's label in the "Name" field. </li>
+            </ol>
+            <p>This approach is illustrated in the screenshot below: </p>
+            <figure id="figure-flash-required-control">
+					<img src="img/required_flash_control.png"/>			       
+                  
+                  <figcaption>Using the Accessibility panel to indicate a form control as being   required</figcaption>
+               
+							     </figure>
+      	<p class="working-example">This is demonstrated in the <a href="../../working-examples/flash-required_form_fields/">working example of Adding the word "required" to the control's accessible name</a>. The <a href="../../working-examples/flash-required_form_fields/required_form_fields_as2.fla">source of Adding the word "required" to the control's accessible name</a> is available.</p>
+         
+      </section>
+   </section><section id="tests"><h2>Tests</h2>
+      <section class="procedure"><h3>Procedure</h3>
+         <p>For each required form control within a Flash movie, confirm that: </p>
+         <ul>
+            <li> The required state is indicated visually </li>
+            <li> The required state is indicated textually using the 'Name'   field in the Accessibility panel </li>
+         </ul>
+      </section>
+      <section class="results"><h3>Expected Results</h3>
+         <ul>
+            <li> Each of the above is true </li>
+         </ul>
+      </section>
+   </section></body></html>
diff --git a/techniques/flash/FLASH11.html b/techniques/flash/FLASH11.html
new file mode 100644
index 0000000000..e06bec85f9
--- /dev/null
+++ b/techniques/flash/FLASH11.html
@@ -0,0 +1,90 @@
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing a longer text description of an object</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Providing a longer text description of an object</h1><section class="meta"><p class="id">ID: FLASH11</p><p class="technology">Technology: flash</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+      <ul id="flash.applicability.general">
+         <li>Adobe Flash Professional version MX and higher </li>
+         <li>Adobe Flex</li>
+      </ul>
+   </section><section id="description"><h2>Description</h2>
+      <p>The objective of this technique is to a provide longer, more detailed   textual information for an image than would be suitable for the image's   accessible name. An accessible button is provided adjacent to the image   that displays a new panel containing the image's long description text. </p>
+   </section><section id="examples"><h2>Examples</h2>
+      <section class="example">
+         <h3>Making a hidden description visible on request</h3>
+         
+            <p>In this example, an image containing statistical data is shown. The   image is provided a short textual alternative ("Graph of percentage of   total U.S. noninsitutionalized population age 16-64 declaring one or   more disabilities"). Below the image, the user can click a button that   will overlay a long textual description of the statistical information   itself. When the button is clicked, the following actions are taken: </p>
+            <ul>
+               <li> The MovieClip containing the long text description is made   visible, and its <code class="prop">AccessibilityProperties.silent</code> property is   set to false to make it visible to assistive technology. Its contents   are placed in the tab order. </li>
+               <li> The original image and button are temporarily hidden from   assistive technology and the tab order. </li>
+            </ul>
+            <p>The image and descriptive text were taken from a previously published HTML example for long image descriptions on WebAIM.org
+							     </p>
+      	<p class="working-example">The results for this technique are shown in the <a href="../../working-examples/flash-long-description-for-image/">working version of Making a hidden description visible on request</a>. The <a href="../../working-examples/flash-long-description-for-image/long_description_for_image_as3.fla">source of Making a hidden description visible on request</a> is available.</p>
+         
+         <pre xml:space="preserve">import flash.accessibility. *;
+import fl.accessibility.ButtonAccImpl;
+import flash.system.Capabilities;
+
+ButtonAccImpl.enableAccessibility();
+
+//set accessibility properties
+graph_mc.accessibilityProperties = new AccessibilityProperties();
+graph_mc.accessibilityProperties.name = "Graph of percentage of total U.S. \ 
+  noninsitutionalized population age 16-64 declaring one or more disabilities";
+longDescBtn.accessibilityProperties = new AccessibilityProperties();
+longDesc_mc.accessibilityProperties = new AccessibilityProperties();
+longDesc_mc.accessibilityProperties.forceSimple = false;
+hideLongDesc();
+
+//set click handlers for button
+longDescBtn.addEventListener("click", function () {
+  showLongDesc()
+});
+longDesc_mc.longDescCloseBtn.addEventListener("click", function () {
+  hideLongDesc()
+});
+
+function showLongDesc() {
+  // hide the original content from screen readers
+  graph_mc.accessibilityProperties.silent = true;
+  graph_mc.tabEnabled = false;
+  graph_mc.alpha = 0.2;
+  longDescBtn.enabled = false;
+  longDescBtn.accessibilityProperties.silent = true;
+  longDesc_mc.accessibilityProperties.silent = false;
+  // make the long description panel visible, both visually and to screen readers
+  longDesc_mc.visible = true;
+  longDesc_mc.tabEnabled = true;
+  longDesc_mc.longDescTitle.stage.focus = longDesc_mc.longDescTitle;
+  if (Capabilities.hasAccessibility)
+  Accessibility.updateProperties();
+}
+
+function hideLongDesc() {
+  //do the opposite to what showLongDesc does
+  graph_mc.accessibilityProperties.silent = false;
+  graph_mc.tabEnabled = true;
+  graph_mc.alpha = 1;
+  longDescBtn.enabled = true;
+  longDescBtn.accessibilityProperties.silent = false;
+  longDesc_mc.visible = false;
+  longDesc_mc.accessibilityProperties.silent = true;
+  longDesc_mc.tabEnabled = false;
+  longDescBtn.stage.focus = longDescBtn;
+  if (Capabilities.hasAccessibility)
+  Accessibility.updateProperties();
+}
+</pre>
+      </section>
+   </section><section id="tests"><h2>Tests</h2>
+      <section class="procedure"><h3>Procedure</h3>
+         <p>When a Flash movie contains images that require long descriptions,   confirm that a longer description is made available through a separate   button. </p>
+      </section>
+      <section class="results"><h3>Expected Results</h3>
+         <ul>
+            <li> The above is true </li>
+         </ul>
+      </section>
+   </section><section id="related"><h2>Related Techniques</h2><ul>
+      <li><a href="../general/G73">G73</a></li>
+      <li><a href="../general/G74">G74</a></li>
+      <li><a href="../general/G92">G92</a></li>
+      <li><a href="../general/G94">G94</a></li>
+   </ul></section></body></html>
\ No newline at end of file
diff --git a/techniques/flash/FLASH12.html b/techniques/flash/FLASH12.html
new file mode 100644
index 0000000000..de380e4294
--- /dev/null
+++ b/techniques/flash/FLASH12.html
@@ -0,0 +1,113 @@
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing client-side validation and adding error text via the accessible description</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Providing client-side validation and adding error text via the accessible description</h1><section class="meta"><p class="id">ID: FLASH12</p><p class="technology">Technology: flash</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+      <ul id="flash.applicability.general">
+         <li>Adobe Flash Professional version MX and higher </li>
+         <li>Adobe Flex</li>
+      </ul>
+   </section><section id="description"><h2>Description</h2>
+      <p>The objective of this technique is to validate user input as values   are entered for each field, by means of client-side scripting. If errors   are found, a description is added to the controls that have invalid   data. Visually, the description will be placed adjacent to the control.   Additionally, the error message text is added to the control's   accessible description so that it is readable by assistive technology   when the control receives focus. </p>
+      
+   </section><section id="examples"><h2>Examples</h2>
+      <section class="example">
+         <h3>Validating a text field</h3>
+         
+            <p>In this example, a sample form is shown with two text fields ('name'   and 'zip code'). Both fields are required. When the form's submit button   is pressed, the values of the text fields will be validated. If a   textfield contains an invalid value, an <code class="obj">_accProps</code> object is   created for the textfield, and its <code class="prop">description</code> property is   set the error message. </p>
+            <div class="note">
+               <p>Instead of using the accessible description, the error text   can also be added to the accessible name (<code class="prop">_accProps.name</code>),   which is supported by a wider range of assistive technology than the <code class="prop">_accProps.description</code>   property. </p>
+            </div>
+            <p>ActionScript 2.0 Code</p>
+         
+         <pre xml:space="preserve">import flash.accessibility. *;
+import mx.accessibilty.ButtonAccImpl;
+import mx.controls.Alert;
+import mx.accessibility.AlertAccImpl;
+
+AlertAccImpl.enableAccessibility();
+ButtonAccImpl.enableAccessibility;
+
+resetTextFieldAccNames();
+Accessibility.updateProperties();
+
+submit_btn.addEventListener("click", handleClick);
+function handleClick(e) {
+  //reset values
+  resetTextFieldAccNames();
+  resetTextFieldAccDescriptions();
+  resetErrorLabels();
+  //perform validation
+  var errors =[];
+  if (name_txt.text == '')
+    errors.push([name_txt, "You must enter your name", name_error_lbl]);
+  if (zipcode_txt.text == '')
+    errors.push([zipcode_txt, "You must enter your zip code", zipcode_error_lbl]);
+  else if (zipcode_txt.text.length != 5 || isNaN(zipcode_txt.text))
+    errors.push([zipcode_txt, "Zip code must be 5 digits", zipcode_error_lbl]);
+  
+  //add validation error messages, if any
+  var field, errorMsg, errorLabel;
+  if (errors.length &gt; 0) {
+    //loop over encountered errors
+    for (var i = 0; i &lt; errors.length; i++) {
+      field = errors[i][0];
+      errorMsg = errors[i][1];
+      errorLabel = errors[i][2];
+      
+      updateAccDescription(field, "Warning: " + errorMsg);
+      errorLabel.text = errorMsg;
+    }
+  } else {
+    Alert.show("Form field values were entered correctly");
+  }
+  Accessibility.updateProperties();
+}
+
+function updateAccName(obj, newName: String) {
+  if (! obj._accProps)
+  obj._accProps = new Object();
+  obj._accProps.name = newName;
+}
+
+function updateAccDescription(obj, newDescription: String) {
+  if (! obj._accProps)
+  obj._accProps = new Object();
+  obj._accProps.description = newDescription;
+}
+
+function getAccName(obj) {
+  return obj._accProps? obj._accProps.name: "";
+}
+
+function resetTextFieldAccNames() {
+  updateAccName(name_txt, "name, required");
+  updateAccName(zipcode_txt, "zip code, required");
+}
+
+function resetTextFieldAccDescriptions() {
+  updateAccDescription(name_txt, "");
+  updateAccDesciption(zipcode_txt, "");
+}
+
+function resetErrorLabels() {
+  name_error_lbl.text = "";
+  zipcode_error_lbl.text = "";
+}</pre>
+         
+      	<p class="working-example">This approach is demonstrated in <a href="../../working-examples/flash-client-side-validation-forms-using-alert/">working version of Validating a text field</a>. The <a href="../../working-examples/flash-client-side-validation-forms-using-alert/client_side_validation_flash_forms_using_alert_as2.fla">source of Validating a text field</a> is available.</p>
+            
+         
+      </section>
+   </section><section id="tests"><h2>Tests</h2>
+      <section class="procedure"><h3>Procedure</h3>
+         <p>When a Flash movie provides interactive forms that can be submitted,   confirm that: </p>
+         <ol>
+            <li> The validation warnings are placed next to the control   visually. </li>
+            <li> The validation warnings are added to the accessible name or   description of each control. </li>
+         </ol>
+      </section>
+      <section class="results"><h3>Expected Results</h3>
+         <ul>
+            <li> #1 and #2 are true </li>
+         </ul>
+      </section>
+   </section><section id="related"><h2>Related Techniques</h2><ul>
+      <li><a href="../client-side-script/SCR32">SCR32</a></li>
+   </ul></section></body></html>
\ No newline at end of file
diff --git a/techniques/flash/FLASH13.html b/techniques/flash/FLASH13.html
new file mode 100644
index 0000000000..520a7db452
--- /dev/null
+++ b/techniques/flash/FLASH13.html
@@ -0,0 +1,92 @@
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using HTML language attributes to specify language in Flash content</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Using HTML language attributes to specify language in Flash content</h1><section class="meta"><p class="id">ID: FLASH13</p><p class="technology">Technology: flash</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+      <ul id="flash.applicability.general">
+         <li>Adobe Flash Professional version MX and higher </li>
+         <li>Adobe Flex</li>
+      </ul>
+   </section><section id="description"><h2>Description</h2>
+      <p>The objective of this technique is to identify the default language   of the Flash content by providing the lang and/or xml:lang attribute on   the HTML or object elements for the page containing the Flash. The   embedded Flash content will inherit the language specified. If the   entire web page uses the same language, the lang and/or xml:lang   attribute can be placed on the page's HTML element, as described in <a href="https://www.w3.org/WAI/WCAG21/Techniques/html/H57">H57:   Using language attributes on the html element</a>. </p>
+      <p>Since Flash inherits the language from the HTML or object   element, all text within the Flash content is expected to be in that   inherited language. This means that it is possible to have a Flash   object in the French language on a page that is primarily in another   language, or to have a page with multiple Flash objects, each in a   different language. It is not possible, however, to indicate changes in the human language of content <em>within</em> a single Flash object using this technique.</p>
+   </section><section id="examples"><h2>Examples</h2>
+      <section class="example">
+         <h3>Using the language of the page as whole in the embedded Flash</h3>
+         
+            <p>This example defined the content of the entire web page to be in the   French language. The Flash content will inherit the specified language   from the HTML container. </p>
+         
+         <pre xml:space="preserve">&lt;?xml version="1.0" encoding="UTF-8"?&gt;
+&lt;html lang="fr" xml:lang="fr" xmlns="http://www.w3.org/1999/xhtml"&gt;
+  &lt;head&gt;
+    &lt;meta content="text/html; charset=iso-8859-1"
+      http-equiv="Content-Type"/&gt;
+    &lt;title&gt;Flash Languages Examples - French&lt;/title&gt;
+    &lt;script src="swfobject.js" type="text/javascript"/&gt;
+    &lt;script type="text/javascript"&gt;
+    swfobject.registerObject("myMovie", "9.0.115", "expressInstall.swf");
+&lt;/script&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
+      height="420" id="myMovie" width="780"&gt;
+      &lt;param name="movie" value="myMovie.swf"/&gt;
+      &lt;!--[if !IE]&gt;--&gt;
+      &lt;object data="languages.swf" height="420"
+        type="application/x-shockwave-flash" width="780"&gt;
+        &lt;!--&lt;![endif]--&gt;
+        &lt;!--[if !IE]&gt;--&gt;
+      &lt;/object&gt;
+      &lt;!--&lt;![endif]--&gt;
+    &lt;/object&gt;
+  &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+         
+      	<p class="working-example">This is demonstrated in the <a href="../../working-examples/flash-language-page/language_en.html">working example of Using the language of the page as whole in the embedded Flash</a>. The <a href="../../working-examples/flash-language-page/languages.fla">source of Using the language of the page as whole in the embedded Flash</a> is available.</p>
+         
+      </section>
+      <section class="example">
+         <h3>Applying a language just to the embedded Flash</h3>
+         
+            <p>This example defines the content of a Flash movie to be in the French   language. The Flash movie is embedded using <a href="https://github.com/swfobject/swfobject">SWFObject's static publishing method</a>. This means   that there are two nested object elements, the outer to target Internet   Explorer, the Inner to target other browsers. For this reason the lang   and xml:lang attributes must be added twice. </p>
+         
+         <pre xml:space="preserve">&lt;object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
+  height="420" id="myMovie" lang="fr" width="780" xml:lang="fr"&gt;
+  &lt;param name="movie" value="myMovie.swf"/&gt;
+  &lt;!--[if !IE]&gt;--&gt;
+  &lt;object data="languages.swf" height="420" lang="fr"
+    type="application/x-shockwave-flash" width="780" xml:lang="fr"&gt;
+    &lt;!--&lt;![endif]--&gt;
+    &lt;!--[if !IE]&gt;--&gt;
+  &lt;/object&gt;
+  &lt;!--&lt;![endif]--&gt;
+&lt;/object&gt;
+</pre>
+      </section>
+   </section><section id="tests"><h2>Tests</h2>
+      <section class="procedure"><h3>Procedure</h3>
+         <ol>
+            <li> Examine the html element and the object element of the HTML   document containing the reference to the SWF. </li>
+            <li> Check that the human language of the Flash content is the same   as the inherited language for the object element as specified in HTML   4.01, Inheritance of language codes </li>
+            <li> Check that the value of the lang attribute conforms to BCP 47:   Tags for the Identification of Languages or its successor and reflects   the  primary language used by the Flash content. </li>
+            <li>Check that no changes in human language occur within the Flash content</li>
+         </ol>
+      </section>
+      <section class="results"><h3>Expected Results</h3>
+         <ul>
+            <li>For Success Criterion 3.1.1: Checks 1-3 are all true.</li>
+            <li>For Success Criterion 3.1.2: Checks 1-4 are all true.</li>
+         </ul>
+      </section>
+   </section><section id="related"><h2>Related Techniques</h2><ul>
+      <li><a href="../html/H57">H57</a></li>
+      <li><a href="../html/H58">H58</a></li>
+   </ul></section><section id="resources"><h2>Resources</h2>
+      
+         <ul>
+            <li>
+									         <a href="http://www.rfc-editor.org/rfc/bcp/bcp47.txt">BCP 47: Tags for the Identification of Languages</a>
+								       </li>
+            <li>
+									         <a href="https://www.w3.org/TR/1999/REC-html401-19991224/struct/dirlang.html#h-8.1.2">Inheritance of language codes</a>
+								       </li>
+         </ul>
+      
+   </section></body></html>
\ No newline at end of file
diff --git a/techniques/flash/FLASH14.html b/techniques/flash/FLASH14.html
new file mode 100644
index 0000000000..3476ab6f49
--- /dev/null
+++ b/techniques/flash/FLASH14.html
@@ -0,0 +1,87 @@
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using redundant keyboard and mouse event handlers in Flash</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Using redundant keyboard and mouse event handlers in Flash</h1><section class="meta"><p class="id">ID: FLASH14</p><p class="technology">Technology: flash</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+      <ul id="flash.applicability.general">
+         <li>Adobe Flash Professional version MX and higher </li>
+         <li>Adobe Flex</li>
+      </ul>
+   </section><section id="description"><h2>Description</h2>
+      <p>The objective of this technique is to demonstrate how to provide   device independence by providing equivalent event handlers in response   to a mouse or focus event. Supporting both mouse and keyboard events   ensures that users will be able to perceive the same information,   regardless of the input device they used. If the event changes the state   of the control, it may be important to change the descriptive name of   the control in the event handlers. </p>
+   </section><section id="examples"><h2>Examples</h2>
+      <section class="example">
+         <h3>Updating button text with multiple event handlers</h3>
+         
+            <p>In this example, a group of buttons is assigned the same event   handlers for the flash.events.FocusEvent.FOCUS_IN and flash.events.MouseEvent.MOUSE_OVER   events. When a button receives focus or is hovered over using a mouse,   text describing the button will be updated. </p>
+         
+         <pre xml:space="preserve">import fl.accessibility.ButtonAccImpl;
+import fl.controls.Button;
+import flash.accessibility. *
+import flash.events.FocusEvent;
+import flash.events.MouseEvent;
+import flash.net.navigateToURL;
+import flash.net.URLRequest;
+
+ButtonAccImpl.enableAccessibility();
+var states: Object = {
+  "Alabama": "Alabama is a state located in the southeastern region of the \
+    United States of America.",
+  "California": "California is the most populous state in the United States",
+  "New York": "New York is a state in the Mid-Atlantic and Northeastern \
+    regions of the United States"
+};
+
+var buttons: Array =[];
+var button: Button;
+var accProps: AccessibilityProperties;
+var count = 0;
+for (var i in states) {
+  button = new Button();
+  button.label = i;
+  button.addEventListener(MouseEvent.CLICK, clickHandler);
+  button.addEventListener(MouseEvent.MOUSE_OVER, highlightHandler);
+  button.addEventListener(MouseEvent.MOUSE_OUT, unHighlightHandler);
+  button.addEventListener(FocusEvent.FOCUS_IN, highlightHandler);
+  button.addEventListener(FocusEvent.FOCUS_OUT, unHighlightHandler);
+  accProps = new AccessibilityProperties();
+  accProps.description = states[i];
+  button.accessibilityProperties = accProps;
+  addChild(button);
+  button.x = 30
+  button.y = 30 + count * 30;
+  buttons[i] = button;
+  count++;
+}
+
+function highlightHandler(e) {
+  descText.text = states[e.target.label];
+}
+
+function unHighlightHandler(e) {
+  descText.text = "";
+}
+
+
+function clickHandler(e) {
+  var url: URLRequest = new URLRequest("http://www.wikipedia.org/wiki/" + e.target.label);
+  navigateToURL(url, "_self");
+}</pre>
+         
+            <div class="note">
+               <p>To improve accessibility for screen reader users, the   descriptive text is also attached to the buttons themselves as an   accessible description. Also note that for button components, the MouseEvent.CLICK   event will fire on mouse clicks as well as when the Enter key is   pressed. </p>
+            </div>
+      	<p class="working-example">This technique is illustrated in the <a href="../../working-examples/flash-redundant-event-handlers/">working version of Updating button text with multiple event handlers</a>. The <a href="../../working-examples/flash-redundant-event-handlers/redundant_event_handlers_as3.fla">source of Updating button text with multiple event handlers</a> is available. </p>
+         
+      </section>
+   </section><section id="tests"><h2>Tests</h2>
+      <section class="procedure"><h3>Procedure</h3>
+         <p>For all scripted event handlers in a Flash Movie, </p>
+         <ol>
+            <li> Confirm that event handlers are assigned for both mouse and   keyboard events </li>
+         </ol>
+      </section>
+      <section class="results"><h3>Expected Results</h3>
+         <ul>
+            <li> The above is true </li>
+         </ul>
+      </section>
+   </section><section id="related"><h2>Related Techniques</h2><ul>
+      <li><a href="../client-side-script/SCR2">SCR2</a></li>
+   </ul></section></body></html>
\ No newline at end of file
diff --git a/techniques/flash/FLASH15.html b/techniques/flash/FLASH15.html
new file mode 100644
index 0000000000..03838d76e8
--- /dev/null
+++ b/techniques/flash/FLASH15.html
@@ -0,0 +1,88 @@
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using the tabIndex property to specify a logical reading order and a logical tab order in Flash</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Using the tabIndex property to specify a logical reading order and a logical tab order in Flash</h1><section class="meta"><p class="id">ID: FLASH15</p><p class="technology">Technology: flash</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+      <ul id="flash.applicability.general">
+         <li>Adobe Flash Professional version MX and higher </li>
+         <li>Adobe Flex</li>
+      </ul>
+   </section><section id="description"><h2>Description</h2>
+      <p>The objective of this technique is to control the Flash Movie's   reading order and tab order by assigning tabIndex values to its elements. </p>
+      <p>The tab order is the order in which objects receive input focus when users press the Tab key. The tab order does not necessarily contain the same elements as the reading order does, as the reading order can also contain elements that are not focusable. However, both the reading order and tab order can be controlled using tab index values. </p>
+      <p>Flash Player uses a default tab index order from left to right and top to bottom.</p>
+      <p>To create a custom reading order, assign a tab index value to every instance on the stage, either through ActionScript or through the Accessibility panel. Create a tabIndex value for every accessible object, not just the focusable objects. For example, dynamic text must have tab indexes, even though a user cannot tab to dynamic text.</p>
+      <p>You can create a custom tab-order index in the Accessibility panel for keyboard navigation for the following objects:</p>
+      <ul>
+         <li>Dynamic text</li>
+         <li>Input text</li>
+         <li>Buttons</li>
+         <li>Movie clips, including compiled movie clips</li>
+         <li>Components</li>
+         <li>Screens</li>
+      </ul>
+      <p>Tab focus occurs in numerical order, starting from the lowest index number. After tab focus reaches the highest tab index, focus returns to the lowest index number. When you move tab-indexed objects that are user-defined in your document, or to another document, Flash retains the index attributes. Check for and resolve index conflicts (for example, two different objects on the Stage with the same tab-index number). If two or more objects have the same tab index in any given frame, Flash follows the order in which the objects were placed on the Stage.</p>
+      <p>To add a tabIndex value using the Accessibility panel, perform   the following steps for every accessible object on the stage: </p>
+      <ol>
+         <li> Select the element by clicking on it. </li>
+         <li> In the Accessibility panel, enter a numeric value in the "Tab   index"  field. The value must be  a positive integer (up to 65535) that   reflects the order in which the selected object should be read. Elements   with higher tab index values will be read after elements with lower   values.  If two or more objects have the same tab index in any given   frame, Flash follows the order in which the objects were placed on the   Stage. </li>
+         <li> To visualize the currently defined tab order, select View &gt;   Show Tab Order. Tab index numbers for individual objects appear in the   upper-left corner of the object. </li>
+      </ol>
+      <div class="note">
+         <p>You can also use ActionScript code to create a tab-order index for keyboard navigation. </p>
+      </div>
+      <p>These steps are illustrated in the screenshots below </p>
+      <figure id="figure-tab-order-visualization">
+			<img src="img/ac_show_tab_order_view.png"/>			   
+            
+            <figcaption>visualizing the tab order</figcaption>
+         
+					</figure>
+      <figure id="figure-setting-tab-index">
+			<img src="img/setting_tabindex_in_accessibility_panel.png"/>			   
+            
+            <figcaption>Setting a tab index value in the Accessibility panel</figcaption>
+         
+					</figure>
+      <div class="note">
+         <p>Flash Player no longer requires that you add all of the   objects in a FLA file to a list of tab index values. Even if you do not   specify a tab index for all objects, a screen reader reads each object   correctly. </p>
+      </div>
+   </section><section id="examples"><h2>Examples</h2>
+      <section class="example">
+         <h3>Using tabIndex to navigate a column structure</h3>
+         
+            <p>This example contains dynamic TextField instances that are grouped   into columns. To ensure the reading order follows the column structure.   The TextField instances are given a tab index value that corresponds to   their textual content (for example, the TextField containing the text   "Sample Text 3" has a tabindex value of 3. Additionally, a single   TextField is added that has no tabindex value set. This field contains   the text "Not in tab order". Even though this field is visually placed   between sample text 2 and 3, it is placed at the end of the custom tab   order because it is not assigned a tabindex value. </p>
+      	<p class="working-example">The results can be found in the <a href="../../working-examples/flash-custom-reading-order/">working version of Using tabindex to navigate a column structure</a>. The <a href="../../working-examples/flash-custom-reading-order/custom_reading_order_as3.fla">source of Using tabindex to navigate a column structure</a> is available.</p>
+         
+      </section>
+      <section class="example">
+         <h3>Controlling tab order in a two-column layout</h3>
+         
+            <p>This example contains a Flash based form that is laid out over two
+    						columns. To make the tab order follow the column structure, each form
+    						control is assigned a tab index value in the Accessibility panel. </p>
+      	<p class="working-example">The results are shown in the <a href="../../working-examples/flash-custom-tab-order/">working version of Controlling tab order in a two-column layout</a>.  The <a href="../../working-examples/flash-custom-tab-order/custom_tab_order_as3.fla">source of Controlling tab order in a two-column layout</a> is available.</p>
+         
+      </section>
+   </section><section id="tests"><h2>Tests</h2>
+      <section class="procedure"><h3>Procedure</h3>
+         <ol>
+            <li>Use a screen reader to navigate through the Flash movie, one element   at a time. </li>
+            <li>Check that the order in which the screen reader announces the content, matches   the logical visual order. </li>
+            <li>When focus has been placed inside the Flash movie, press the Tab key repeatedly to traverse its contents by keyboard. </li>
+            <li>Verify that all interactive and focusable elements are reachable by keyboard, in a logical order. </li>
+         </ol>
+      </section>
+      <section class="results"><h3>Expected Results</h3>
+         <ul>
+            <li>Checks #2 and #4 are true.</li>
+         </ul>
+      </section>
+   </section><section id="related"><h2>Related Techniques</h2><ul>
+      <li><a href="../general/G57">G57</a></li>
+      <li><a href="../general/G59">G59</a></li>
+   </ul></section><section id="resources"><h2>Resources</h2>
+      
+         <ul>
+            <li>
+									         <a href="http://www.adobe.com/devnet/flash/articles/concept_tab_order.html">Flash glossary: Tab order</a>
+								       </li>
+         </ul>
+      
+   </section></body></html>
diff --git a/techniques/flash/FLASH16.html b/techniques/flash/FLASH16.html
new file mode 100644
index 0000000000..5dea2aee33
--- /dev/null
+++ b/techniques/flash/FLASH16.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Making actions keyboard accessible by using the click event on standard components</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Making actions keyboard accessible by using the click event on standard components</h1><section class="meta"><p class="id">ID: FLASH16</p><p class="technology">Technology: flash</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+      <ul id="flash.applicability.general">
+         <li>Adobe Flash Professional version MX and higher </li>
+         <li>Adobe Flex</li>
+      </ul>
+   </section><section id="description"><h2>Description</h2>
+      <p>The objective of this technique is to demonstrate how to invoke a   scripting function in a way that is keyboard accessible by attaching it   to keyboard-accessible, standard Flash components provided by the Adobe   Flash Professional authoring tool. In order to ensure that scripted   actions can be invoked from the keyboard, they are associated with   standard Flash components such as the Button component. The click event   of these components is device independent. While the "CLICK" event is a   mouse event, it is actually mapped to the default action of a button.   The default action occurs when the user clicks the element with a mouse,   but it also occurs when the user focuses the element and hits the space   key, and when the element is triggered via the accessibility API. </p>
+   </section><section id="examples"><h2>Examples</h2>
+      <section class="example">
+         <h3>Click event on a button</h3>
+         
+            <p>This example shows a button that uses the MouseEvent.CLICK   event to change its label. This event will fire both on mouse click and   when the space key is pressed </p>
+         
+         <pre xml:space="preserve">import fl.controls.Button;
+import fl.accessibility.ButtonAccImpl;
+
+ButtonAccImpl.enableAccessibility();
+
+var testBtn = new Button();
+testBtn.label = "click me";
+testBtn.addEventListener(MouseEvent.CLICK, clickHandler, false);
+addChild(testBtn);
+testBtn.x = testBtn.y = 10;
+
+function clickHandler(e) {
+  e.target.label = "Thanks";
+}</pre>
+         
+      	<p class="working-example">This approach is demonstrated in the <a href="../../working-examples/flash-device-independent-event-handler-on-component/">working version of click event on a button</a>. The <a href="../../working-examples/flash-device-independent-event-handler-on-component/device_independent_event_handler_on_component_as3.fla">source of click event on a button</a> is available. </p>
+         
+      </section>
+      <section class="example">
+         <h3>Pending example</h3>
+         
+            
+               The <a href="http://trace.wisc.edu/wcag_wiki/index.php?title=Making_actions_keyboard_accessible_by_using_the_click_event_on_standard_components">wiki source for FLASH16</a> indicated there was an action to add a second example.
+            
+         
+      </section>
+   </section><section id="tests"><h2>Tests</h2>
+      <section class="procedure"><h3>Procedure</h3>
+         <p>When a Flash Movie contains interactive controls, confirm that: </p>
+         <ol>
+            <li> Standard Flash components are used for the controls </li>
+            <li> The controls use the "click" event </li>
+         </ol>
+      </section>
+      <section class="results"><h3>Expected Results</h3>
+         <ul>
+            <li> #1 and #2 are true </li>
+         </ul>
+      </section>
+   </section><section id="related"><h2>Related Techniques</h2><ul>
+      <li><a href="../client-side-script/SCR35">SCR35</a></li>
+   </ul></section></body></html>
\ No newline at end of file
diff --git a/techniques/flash/FLASH17.html b/techniques/flash/FLASH17.html
new file mode 100644
index 0000000000..d60164c759
--- /dev/null
+++ b/techniques/flash/FLASH17.html
@@ -0,0 +1,190 @@
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing keyboard access to a Flash object and avoiding a keyboard trap</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Providing keyboard access to a Flash object and avoiding a keyboard trap</h1><section class="meta"><p class="id">ID: FLASH17</p><p class="technology">Technology: flash</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+      <ul id="flash.applicability.general">
+         <li>Adobe Flash Professional version MX and higher </li>
+         <li>Adobe Flex</li>
+      </ul>
+   </section><section id="description"><h2>Description</h2>
+      <p>The objective of this technique is to allow keyboard focus to move to and from Flash content embedded in a web page. In browsers other than Internet   Explorer, there is a problem related to keyboard accessibility of   embedded Flash content. The problem is that, while both the Flash   content and the HTML content around it may be keyboard accessible, many browsers do not support moving keyboard focus between the Flash content and HTML   content without using a mouse. Once focus is placed inside the Flash   content, a keyboard user will be trapped there. Similarly, when focus is   placed somewhere else on the HTML content (outside the Flash content), it   will be impossible to move focus into the content.  This technique is designed to let the Flash author address this issue and provide support for moving focus between the Flash content and the HTML content via the keyboard. </p>
+      <p>This issue has been around for a long time, and is related to the   way browsers implement embedded plug-ins. Until this problem is fixed,   it is up to the Flash developer to come up with a work around. This   technique is one of those workarounds. The approach behind this   technique is the following: </p>
+      <ul>
+         <li> Two 'neighbor' focusable HTML objects are identified for each   Flash content in the document (one before and one after the content). These   elements can be any HTML elements that are part of the web page's tab   order (such as links and form controls). </li>
+         <li> The Flash content object itself is added to the document tab   order as well, making it possible to tab into the content. </li>
+         <li> Inside the Flash content, the Flash Player maintains its own tab   order. Normally, when the start or end of the Flash tab order is   reached (when tabbing through the content), focus will wrap to the   beginning or end of the content's tab order, and it will not be possible   to (shift) tab out of it. With this technique however, when a 'focus   wrap' is detected focus will instead be moved to the neighboring element   in the HTML tab order (allowing a keyboard user to 'break out' of the   Flash tab order). </li>
+      </ul>
+      <p>When the SWFFocus class is imported into a Flash project, the   following will happen: </p>
+      <ul>
+         <li>
+            <p> A JavaScript &lt;script&gt; tag will be generated   and added to the HTML document containing the Flash content. This   JavaScript code will:</p>
+            <ul>
+               <li> Set a tabIndex value of "0" on the &lt;object&gt; element of   each Flash content found in the page. This causes the Flash objects to   become part of the tab order. </li>
+               <li> Optionally, create a hidden anchor element before and after   the Flash content, which is used by the SWFFocus class to move focus out   of the Flash content back into the HTML page. Alternatively, the developer   can specify existing focusable HTML elements as adjacent tab stops for   the Flash content. </li>
+               <li> Set event handlers for the Flash content object, so that when it   receives focus, the SWFFocus class is notified to manage the content's   internal tab order. </li>
+            </ul>
+         </li>
+         <li> The SWFFocus class monitors changes in focus within the Flash   content. When a focus wrap is detected in the content, a JavaScript function   will be called to instead move focus back to the neighboring HTML   content. </li>
+      </ul>
+      <p>As indicated above, there are two ways in which this technique can be   used: </p>
+      <ol>
+         <li>
+            <p>Letting the SWFFocus class generate neighboring focusable   elements in the HTML tab order for each Flash content (demonstrated in   example 1 below)</p>
+            <p>By default, the SWFFocus class will create a hidden link   element before and after an embedded Flash content. These elements are   needed as 'anchor' to move focus to when (shift) tabbing out of the   Flash content. This approach is the easiest to implement, as it does not   require any additional work by the developer. The downside is that the   hidden links will clutter the HTML tab order with meaningless elements   (although these elements are only used as tab stops when tabbing _out   of_ the Flash content, not when tabbing _into_ it). Because of this, it is   recommended to use the following approach instead:</p>
+         </li>
+         <li>
+            <p>Explicitly identifying focusable HTML elements that come before   and after the a Flash content in the HTML tab order (demonstrated in   example 2 below)</p>
+            <p>With this approach, the developer can use ID values to   identify the elements that come before and after the Flash content in the   HTML tab order. This is done by setting special class names on the Flash   content's &lt;object&gt; element. This is the preferred   approach, as it does not cause an unnecessary cluttering of the tab   order. However, it does require more work and awareness by the developer   (who has to manually set ID values). Also, in some scenarios there   simply may not be a next or previous focusable element for a Flash   content.</p>
+         </li>
+      </ol>
+   </section><section id="examples"><h2>Examples</h2>
+   	<p class="working-example">The two examples below are shown in the <a href="../../working-examples/flash-keyboard-trap-fix-custom/">working example of Preventing a keyboard trap in Flash content</a>. The example html file has two Flash contents embedded in it. The first Flash content is embedded with the approach described in example 1. The second example is embedded with the approach described in example 2. The <a href="../../working-examples/flash-keyboard-trap-fix-custom/keyboard_trap_fix_custom_as3.zip">source of Preventing a keyboard trap in Flash content</a> is available. The source zip file contains the SWFFocus class.</p>
+      <div class="note">
+         <p>To run the example from a local drive (as opposed to running it from a web server), the local directory needs to be added to Flash Player's security settings. </p>
+      </div>
+      <section class="example">
+         <h3>Using automatically generated links</h3>
+         
+            <p>In this example, the SWFFocus class is used without explicitly   identifying focusable HTML elements. This will cause SWFFocus to   dynamically insert hidden links before and after the Flash content. </p>
+            <p class="exsubhead">Loading the Flash Content</p>
+            <p>The Flash object in this example is added using <a href="https://github.com/swfobject/swfobject">SWFObject's dynamic publishing method</a>, which means   that the object tag is created dynamically by JavaScript in a way that   the browser supports. While this is the recommended approach, it is not a   requirement for using this technique. The SWFFocus class will also work   when the object tag is hardcoded into the HTML document. </p>
+            <p>The sample code below shows how to load the content dynamically   with SWFObject. </p>
+            <p class="exsubhead">HTML and Javascript Code Sample for Example 1 </p>
+         
+         <pre xml:space="preserve">&lt;?xml version="1.0" encoding="UTF-8"?&gt;
+&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
+  "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
+&lt;html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"&gt;
+  &lt;head&gt;
+    &lt;title&gt;Keyboard Trap Fix Example&lt;/title&gt;
+    &lt;meta content="text/html; charset=utf-8" http-equiv="Content-Type"/&gt;
+    &lt;script src="swfobject_2_1.js" type="text/javascript"/&gt;
+    &lt;script type="text/javascript"&gt;
+      var flashvars = {};
+      var params = {};
+      params.scale = "noscale";
+      var attributes = {};
+      attributes.id = "FlashSample1SWF";
+      attributes.name = "FlashSample1SWF";
+      swfobject.embedSWF("keyboard_trap_fix_custom_as3.swf", "flashSample1", \
+          "150", "200", "9.0.0", "expressInstall.swf", flashvars, params, attributes);
+&lt;/script&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;p&gt;The following Flash content automatically generates invisible
+      links before and after the flash content, allowing keyboard focus
+      to move out of the Flash content.&lt;/p&gt;
+    &lt;div id="flashSample1"&gt;
+      &lt;a href="http://www.adobe.com/go/getflashplayer"&gt;
+        &lt;img alt="Get Adobe Flash player"
+          src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif"
+        /&gt;
+      &lt;/a&gt;
+    &lt;/div&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+         
+            <p class="exsubhead">Importing and Initializing the SWFFocus class in Flash</p>
+            <p>The SWFFocus class needs to be added to a Flash or Flex project's source   path. The easiest way to achieve this is to import the SWFFocus.swc into Library path for your project or to copy the   com/swffocus/SWFFocus.as file (including the nested directory structure)   to the project's root directory. </p>
+            <p>When the SWFFocus class is added to the content's source path, it   needs to be initialized with the following code: </p>
+         
+         <pre xml:space="preserve">import com.adobe.swffocus.SWFFocus;
+SWFFocus.init(stage);</pre>
+         
+            <p>The code for the class itself can be found in the source files.</p>
+         
+      </section>
+      <section class="example">
+         <h3>Explicitly identifying existing focusable html element</h3>
+         
+            <p>For a large part, this technique is the same as example 1 : </p>
+            <ul>
+               <li> The dynamic loading approach by SWFObject is used to load the   Flash content </li>
+               <li> The SWFFocus class needs to be added to the content's sourcepath   and initialized in the Flash content </li>
+            </ul>
+            <p>For more details about these steps, see example 1. </p>
+            <p>In this case however, special class names are added to the Flash   content object. These class names indicate the ID values of the elements   previous and next of the content in the HTML tab order. The class names   are: </p>
+            <ul>
+               <li> 'swfPref-&lt;previous ID&gt;', where '&lt;previous element&gt;'   should be the ID value of the previous element in the tab order. </li>
+               <li> 'swfNext-&lt;next ID&gt;', where '&lt;next element&gt;' should   be the ID value of the next element in the tab order. </li>
+            </ul>
+            <p>For example, the HTML code could look like this (notice the added   class names on the object tag): </p>
+         
+         <pre xml:space="preserve">&lt;a href="http://www.lipsum.com/" id="focus1"&gt;test 1&lt;/a&gt;
+&lt;object class="swfPrev-focus1 swfNext-focus2"
+  data="keyboard_trap_fix_as3.swf" tabindex="0"
+  type="application/x-shockwave-flash"/&gt;
+&lt;a href="http://www.lipsum.com/" id="focus2"&gt;test 2&lt;/a&gt;</pre>
+         
+            <p>Since this example uses SWFObject's dynamic loading, the class names   will have to be specified as attribute when SWFObject is initialized.   This is demonstrated in the code example below. </p>
+            <p class="exsubhead">HTML and Javascript Code Sample for Example 2 </p>
+         
+         <pre xml:space="preserve">&lt;?xml version="1.0" encoding="UTF-8"?&gt;
+&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
+  "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
+&lt;html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"&gt;
+  &lt;head&gt;
+    &lt;title&gt;Keyboard Trap Fix Example &lt;/title&gt;
+    &lt;meta content="text/html; charset=utf-8" http-equiv="Content-Type"/&gt;
+    &lt;script src="swfobject_2_1.js" type="text/javascript"/&gt;
+
+    &lt;script type="text/javascript"&gt;
+      var flashvars = {};
+      var params = {};
+      params.scale = "noscale";
+      var attributes = {};
+      attributes.id = "FlashSample2SWF";
+      attributes.name = "FlashSample2SWF";
+      attributes["class"] = "swfPrev-focus1 swfNext-focus2";
+      swfobject.embedSWF("keyboard_trap_fix_as3.swf", "flashSample1", "150", 
+        "200", "9.0.0", "expressInstall.swf", flashvars, params, attributes);
+    &lt;/script&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;a href="http://www.lipsum.com/" id="focus1"&gt;lorem&lt;/a&gt;
+    &lt;p&gt;The following Flash content uses existing links in the document
+      to move focus to when (shift) tabbing out of the Flash content.
+      The existing links are defined by placing special classnames on
+      the Flash object.&lt;/p&gt;
+    &lt;div id="flashSample2"&gt;
+      &lt;a href="http://www.adobe.com/go/getflashplayer"&gt;
+        &lt;img alt="Get Adobe Flash player"
+          src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif"
+        /&gt;
+      &lt;/a&gt;
+    &lt;/div&gt;
+    &lt;a href="http://www.lipsum.com/"&gt;lorem&lt;/a&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+         
+            <p>Note: this example assumes that the focusable HTML elements exist and   have an ID value at the time SWFObject is called to insert the Flash   content. However, in some situations it is also possible that these   elements do not yet exist when the Flash content is created, or that the   elements will be deleted dynamically at a later point. If this happens,   it is possible to reassign ID values for previous and next focusable   elements. To do this, call the SWFsetFocusIds() method on the Flash   content object, like so: </p>
+         
+         <pre xml:space="preserve">var o = document.getElementById("FlashSample1SWF");
+o.SWFsetFocusIds('prevId', 'nextId');</pre>
+         
+            <p>From that point on the updated IDs will be used to move focus to when   tabbing out of the Flash content. </p>
+         
+      </section>
+   </section><section id="tests"><h2>Tests</h2>
+      <section class="procedure"><h3>Procedure</h3>
+         <p>For a Flash content on a web page: </p>
+         <ol>
+            <li> If possible, confirm that the source of the Flash content imports   and initializes the SWFFocus class </li>
+            <li> Press the tab key to move through tabbable items on the page </li>
+            <li> Confirm that it is possible to tab into the Flash content </li>
+            <li> Continue tabbing and confirm that it is possible to tab out of   the flash content </li>
+         </ol>
+      </section>
+      <section class="results"><h3>Expected Results</h3>
+         <ul>
+            <li> Checks 3 and 4 are true </li>
+         </ul>
+      </section>
+   </section><section id="resources"><h2>Resources</h2>
+      
+         <ul>
+            <li>
+            	<a href="../../working-examples/flash-keyboard-trap-fix-custom/keyboard_trap_fix_custom_as3.zip">Example source containing the SWFFocus class</a>
+								       </li>
+            <li>
+									         <a href="http://www.iheni.com/flash-and-keyboard-access-across-browsers/">Flash and keyboard access across browsers</a> by Henny Swan</li>
+         </ul>
+      
+   </section></body></html>
\ No newline at end of file
diff --git a/techniques/flash/FLASH18.html b/techniques/flash/FLASH18.html
new file mode 100644
index 0000000000..c247576485
--- /dev/null
+++ b/techniques/flash/FLASH18.html
@@ -0,0 +1,158 @@
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing a control to turn off sounds that play automatically in Flash</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Providing a control to turn off sounds that play automatically in Flash</h1><section class="meta"><p class="id">ID: FLASH18</p><p class="technology">Technology: flash</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+      <ul id="flash.applicability.general">
+         <li>Adobe Flash Professional version MX and higher </li>
+         <li>Adobe Flex</li>
+      </ul>
+   </section><section id="description"><h2>Description</h2>
+      <p>The intent of this technique is to allow a user to turn off sounds   that start automatically when a Flash movie loads. The control to turn   off the sounds should be located near the beginning of the page to allow   the control to be easily and quickly discovered by users . This is   useful for those who utilize assistive technologies (such as screen   readers, screen magnifiers, switch mechanisms, etc.) and those who may   not (such as those with cognitive, learning and language disabilities). </p>
+      <p>In this technique, an author includes a control that makes it   possible for users to turn off any sounds that are played automatically.   For maximum accessibility, the control can be added to the HTML   document rather than to the Flash movie. The HTML control will   communicate with the Flash movie through the ExternalInterface class.   This means that the user can control the sound playback without having   to interact with Flash content. If this is not practical, the control   can be provided within the Flash content, provided that the control is   keyboard operable, located early in the tab and reading order, and   clearly labeled to indicate that it will turn off the sounds that are   playing. </p>
+   </section><section id="examples"><h2>Examples</h2>
+      <section class="example">
+         <h3>Providing a button in the Flash to stop sound</h3>
+         
+            <p>This example demonstrates the addition of a button within the Flash   movie to allow the user to stop sounds from playing.  A class called   SoundHandler is created which automatically starts playing an mp3 file   when the movie loads. </p>
+         
+         <pre xml:space="preserve">package wcagSamples {
+  import flash.display.Sprite;
+  import flash.net.URLRequest;
+  import flash.media.Sound;
+  import flash.media.SoundChannel;
+  
+  import fl.controls.Button;
+  import fl.accessibility.ButtonAccImpl;
+  
+  import flash.events.MouseEvent;
+  public class SoundHandler extends Sprite {
+    private var snd: Sound = new Sound();
+    private var button: Button = new Button();
+    private var req: URLRequest = new URLRequest("http://av.adobe.com/podcast\
+      /csbu_dev_podcast_epi_2.mp3");
+    private var channel: SoundChannel = new SoundChannel();
+    
+    public function SoundHandler() {
+      ButtonAccImpl.enableAccessibility();
+      button.label = "Stop Sound";
+      button.x = 10;
+      button.y = 10;
+      button.addEventListener(MouseEvent.CLICK, clickHandler);
+      this.addChild(button);
+      snd.load(req);
+      channel = snd.play();
+    }
+    private function clickHandler(e: MouseEvent): void {
+      if (button.label == "Stop Sound") {
+        button.label = "Start Sound";
+        channel.stop();
+      } else {
+        channel = snd.play();
+        button.label = "Stop Sound";
+      }
+    }
+  }
+}</pre>
+         
+      	<p class="working-example">This is demonstrated in the <a href="../../working-examples/flash-control-to-toggle-audio/">working example of Providing a button in the Flash to stop sound</a>. The <a href="../../working-examples/flash-control-to-toggle-audio/control_to_toggle_audio_as3.fla">source of Providing a button in the Flash to stop sound</a> is available.</p>
+         
+      </section>
+      <section class="example">
+         <h3>Providing a button in the HTML before the Flash object to stop sound</h3>
+         
+            <p>A class called SoundHandler is created which automatically starts   playing an mp3 file when the movie loads. An HTML button is placed in   the HTML document containing the Flash movie. When the button is clicked   the action is communicated between the HTML page and the Flash movie   via the Flash Player JavaScript API, resulting in the toggleSound   method being called on the SoundHandler class. </p>
+            <p class="exsubhead">ActionScript 3.0 code for Example 2</p>
+         
+         <pre xml:space="preserve">package wcagSamples {
+  import flash.display.Sprite;
+  import flash.external.ExternalInterface;
+  import flash.net.URLRequest;
+  import flash.media.Sound;
+  import flash.media.SoundChannel;
+  
+  import flash.events.MouseEvent;
+  public class SoundHandler extends Sprite {
+    private var snd: Sound = new Sound();
+    private var soundOn: Boolean = true;
+    private var req: URLRequest = new URLRequest("http://av.adobe.com/podcast/\
+      csbu_dev_podcast_epi_2.mp3");
+    private var channel: SoundChannel = new SoundChannel();
+    
+    public function SoundHandler() {
+      if (ExternalInterface.available)
+      ExternalInterface.addCallback("toggleSound", this.toggleSound);
+      snd.load(req);
+      channel = snd.play();
+    }
+    
+    private function toggleSound(enable: Boolean): void {
+      if (! enable) {
+        channel.stop();
+        soundOn = true;
+      } else {
+        channel = snd.play();
+        soundOn = true
+      }
+    }
+  }
+}</pre>
+         
+            <p class="exsubhead">HTML code for Example 2</p>
+         
+         <pre xml:space="preserve">&lt;?xml version="1.0" encoding="UTF-8"?&gt;
+&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
+  "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
+&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
+  &lt;head&gt;
+    &lt;meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/&gt;
+    &lt;title&gt;Flash Sound Toggle example&lt;/title&gt;
+    &lt;script src="swfobject.js" type="text/javascript"/&gt;
+    &lt;script type="text/javascript"&gt;
+    function $(id) {
+        return document.getElementById(id);
+    }
+    
+    swfobject.embedSWF("html_control_to_toggle_audio_as3.swf", 
+      "flashPlaceHolder", "0", "0", "8");
+    function init() {
+            var soundOn = true;
+            $("soundToggle").onclick = function(event){
+                soundOn = !soundOn;
+                $("flashPlaceHolder").toggleSound(soundOn);
+                event.target.value = soundOn ? "Stop Sound" : "Start Sound";
+            };
+    }
+    window.onload = init;
+&lt;/script&gt;
+
+  &lt;/head&gt;
+  &lt;body id="header"&gt;
+    &lt;h1&gt;Flash Automatic Sound Demo&lt;/h1&gt;
+    &lt;p&gt;This page contains a Flash movie that automatically starts
+      playing sound. Use the button below to stop or start the
+      sound&lt;/p&gt;
+    &lt;input id="soundToggle" type="button" value="Stop Sound"/&gt;
+    &lt;p id="flashPlaceHolder"&gt;Flash needs to be installed for this
+      example to work&lt;/p&gt;
+  &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+         
+      	<p class="working-example">This is demonstrated in the <a href="../../working-examples/flash-html-control-to-toggle-audio/">working example of Providing a button in the HTML before the Flash object to stop sound</a>. The source of <a href="../../working-examples/flash-html-control-to-toggle-audio/html_control_to_toggle_audio_as3.zip">source of Providing a button in the HTML before the Flash object to stop sound</a> is available.</p>
+         
+      </section>
+   </section><section id="tests"><h2>Tests</h2>
+      <section class="procedure"><h3>Procedure</h3>
+         <p>For Flash movies that automatically start playing sound after   loading: </p>
+         <ol>
+            <li> Confirm that an HTML control that conforms to WCAG 2.0 is placed at the   beginning of the document's tab order </li>
+            <li> If there is no HTML-based control, confirm that an accessible   control is placed at the beginning of the Flash movie's tab order. </li>
+            <li> Activate the HTML or Flash-based control </li>
+            <li> Verify that audio playback stops </li>
+         </ol>
+      </section>
+      <section class="results"><h3>Expected Results</h3>
+         <ul>
+            <li> Check #1 or #2 is true, and #4 is true. </li>
+         </ul>
+      </section>
+   </section><section id="related"><h2>Related Techniques</h2><ul>
+      <li><a href="../general/G170">G170</a></li>
+   </ul></section></body></html>
\ No newline at end of file
diff --git a/techniques/flash/FLASH19.html b/techniques/flash/FLASH19.html
new file mode 100644
index 0000000000..4efe3e1528
--- /dev/null
+++ b/techniques/flash/FLASH19.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing a script that warns the user a time limit is about to expire and provides a way to extend it</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Providing a script that warns the user a time limit is about to expire and provides a way to extend it</h1><section class="meta"><p class="id">ID: FLASH19</p><p class="technology">Technology: flash</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+      <ul id="flash.applicability.general">
+         <li>Adobe Flash Professional version MX and higher </li>
+         <li>Adobe Flex</li>
+      </ul>
+   </section><section id="description"><h2>Description</h2>
+      <p>The objective of this technique is to notify users that they are   almost out of time to complete an interaction. When scripts provide   functionality that has time limits, the script can include functionality   to warn the user of imminent time limits and provide a mechanism to   request more time. 20 seconds or more before the time limit occurs, the   script provides a confirm dialog that states that a time limit is   imminent and asks if the user needs more time. If the user answers "yes"   then the time limit is reset. If the user answers "no" or does not   respond, the time limit is allowed to expire. </p>
+      <p>This technique involves time limits set with the setTimeout()   method. If, for example, the time limit should be 60 seconds, you can   set the time limit for 40 seconds (20 seconds less than the desired   timeout) and show a confirm dialog. The confirm dialog sets a new   timeout for the remaining 20 seconds. If the user requests more time, a   new timeout is set. However, if the 20-second "grace period time limit"   expires (meaning 60 seconds have now elapsed), the action appropriate   for the expiry of the 60 second time limit in the original design is   taken. </p>
+   </section><section id="examples"><h2>Examples</h2>
+      <section class="example">
+         <h3>Using ActionScript to offer a time limit extension before the timeout expires</h3>
+         
+            <p>This is a basic AS2 example of a time limit that can be extended by   the user.  An alert is shown after 40 seconds of inactivity, warning that the   session is about to expire. The user is given 20 seconds to press the   space bar or click on the "Yes" button.  Note that the 40 second   duration would be insufficient for most tasks and is artificially short   for ease of demonstration. </p>
+         
+         <pre xml:space="preserve">import mx.controls.Alert;
+import flash.accessibility.Accessibility;
+
+mx.accessibility.AlertAccImpl.enableAccessibility();
+
+var sessionTimeout;
+var sessionNotificationTimeout;
+var timeLimit: Number = 60000;
+var sessionAlert: Alert;
+resetTimeout();
+
+testField.addEventListener("change", resetTimeout);
+
+function resetTimeout() {
+  clearTimeout(sessionTimeout);
+  clearTimeout(sessionNotificationTimeout);
+  sessionTimeout = setTimeout(endSession, timeLimit);
+  sessionNotificationTimeout = setTimeout(showTimeoutAlert, timeLimit - 20000);
+}
+
+function showTimeoutAlert() {
+  sessionAlert = Alert.show("Click the YES button to extend your session",
+  "Your login session is about to expire, do you need more time?",
+  Alert.YES | Alert.NO, null, handleAlertClick);
+}
+
+function endSession() {
+  sessionAlert.deletePopUp();
+  Alert.show("please log in again",
+  "Your session has expired");
+}
+
+function handleAlertClick(e) {
+  if (e &amp;&amp; e.detail &amp;&amp; e.detail == Alert.YES)
+  resetTimeout();
+}</pre>
+         
+      	<p class="working-example">For a demonstration, see a <a href="../../working-examples/flash-timeout-extension/">working example of Using ActionScript to offer a time limit extension before the timeout expires</a>. The <a href="../../working-examples/flash-timeout-extension/timeout_extension_as2.fla">source of Using ActionScript to offer a time limit extension before the timeout expires</a> is available.</p>
+         
+      </section>
+   </section><section id="tests"><h2>Tests</h2>
+      <section class="procedure"><h3>Procedure</h3>
+         <ol>
+            <li> load the page and start a timer that is 20 seconds less than   the time limit. </li>
+            <li> when the timer expires, check that a confirmation dialog is   displayed warning of the impending time limit and allows the user to   extend the limit within 20 seconds. </li>
+         </ol>
+      </section>
+      <section class="results"><h3>Expected Results</h3>
+         <p>Check #2 is true </p>
+      </section>
+   </section><section id="related"><h2>Related Techniques</h2><ul>
+      <li><a href="../client-side-script/SCR16">SCR16</a></li>
+   </ul></section></body></html>
\ No newline at end of file
diff --git a/techniques/flash/FLASH2.html b/techniques/flash/FLASH2.html
new file mode 100644
index 0000000000..ac403e3412
--- /dev/null
+++ b/techniques/flash/FLASH2.html
@@ -0,0 +1,92 @@
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Setting the description property for a non-text object in Flash</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Setting the description property for a non-text object in Flash</h1><section class="meta"><p class="id">ID: FLASH2</p><p class="technology">Technology: flash</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+      <ul id="flash.applicability.general">
+         <li>Adobe Flash Professional version MX and higher </li>
+         <li>Adobe Flex</li>
+      </ul>
+   </section><section id="description"><h2>Description</h2>
+      <p>The objective of this technique is to provide a long text  alternative that serves the same purpose and presents the same  information as the original non-text content when a short text  alternative is not sufficient. </p>
+      <p>The Flash Player supports long text alternatives to non-text  objects, which can be defined in ActionScript or within Flash authoring  tools using the <code class="prop">description</code> property, as indicated in the examples  below. </p>
+   </section><section id="examples"><h2>Examples</h2>
+      <section class="example">
+         <h3>Applying a Description for a symbol (graphic, button or movieclip)</h3>
+         
+            <p>The Flash Professional authoring tool's Accessibility panel lets  authors provide accessibility information to assistive technology and  set accessibility options for individual Flash objects or entire Flash  applications. </p>
+            <ol>
+               <li> For a text alternative to be applied to a non-text object, it must be saved as a symbol in the movie's library. <em>Note:</em> Flash does not support text alternatives for graphic symbols. Instead,  the graphic must be converted to or stored in a movie clip or button  symbol. </li>
+               <li> Bring up the Accessibility panel by selecting "Window &gt;  Other Panels &gt; Accessibility" in the application menu, or through  the shortcut ALT + F11. Ensure that the 'Make object accessible'  checkbox is checked. </li>
+               <li> Select the non-text instance on the movie stage, the fields in the Accessibility panel become editable. </li>
+               <li> Enter a description describing the non-text object's contents  concisely. For example, a diagram could have a 'name' identifying what  information the diagram conveys, while the 'Description' field lists  this information in full detail. Alternatively, for an animation which  is part of an instructional movie about car repairs the name could be:  'how to replace a flat tire', while the long description describes each  step of the process in greater detail. </li>
+            </ol>
+            <p>
+								       <em>Important:</em> Only use the 'Description' field if a short text  alternative is not sufficient to describe the objects purpose.  Otherwise, leave the 'Description' field empty. </p>
+            <figure id="figure-Flash-accessibility-panel">
+					<img src="img/acc_name_scrn.jpg" />			       
+                  
+                  <figcaption>The Accessibility panel in the Flash authoring environment.</figcaption>
+               
+							     </figure>
+            
+         
+      </section>
+      <section class="example">
+         <h3>Applying Description programmatically in ActionScript 2.0 </h3>
+         
+            <p>To manage an object's text equivalents programmatically using  ActionScript, the <code class="obj">_accProps</code> object must be used. This references an  object containing accessibility related properties set for the object.  The code example below shows a simple example of how the <code class="obj">_accProps</code>  object is used to set an objects name and description in ActionScript. </p>
+            <p>A chart showing sales for October has a short text alternative  of "October sales chart". The long description would provide more  information, as shown in the code below. </p>
+         
+         <pre xml:space="preserve">// 'chart_mc' is an instance placed on the movie's main timeline
+_root.chart_mc._accProps = new Object();
+_root.chart_mc._accProps.name = "October Sales Chart";
+_root.chart_mc._accProps.description = "Bar Chart showing sales for October.\
+  There are 6 salespersons.Maria is highest with 349 units.Frances is next\
+  with 301.Then comes Juan with 256, Sue with 250, Li with 200 and Max\
+  with 195.The primary use of the chart is to show leaders, so the description\
+  is in sales order.";</pre>
+      </section>
+      <section class="example">
+         <h3>Applying Description programmatically in ActionScript 3.0</h3>
+         
+            <p>To manage an object's text equivalents programmatically using  ActionScript, the <code class="obj">AccessibilityProperties</code> object must be used. The code  example below shows a simple example of how the <code class="obj">AccessibilityProperties</code>  object used to set an objects name and description in ActionScript. </p>
+            <p>A chart showing sales for October has a short text alternative  of "October sales chart". The long description would provide more  information, as shown in the code below. </p>
+         
+         <pre xml:space="preserve">// 'chart_mc' is an instance placed on the movie's main timeline
+chart_mc.accessibilityProperties = new AccessibilityProperties();
+chart_mc.accessibilityProperties.name = "October Sales Chart";
+chart_mc.accessibilityProperties.description = "Bar Chart showing sales for October.\
+  There are 6 salespersons.Maria is highest with 349 units.Frances is next\
+  with 301.Then comes Juan with 256, Sue with 250, Li with 200 and Max\
+  with 195.The primary use of the chart is to show leaders, so the description\
+  is in sales order.";</pre>
+      </section>
+   </section><section id="tests"><h2>Tests</h2>
+      <section class="procedure"><h3>Procedure</h3>
+         <ol>
+            <li> Publish the SWF file </li>
+            <li> Open the SWF file in Internet Explorer 6 or higher (using  Flash Player 6 or higher), or Firefox 3 or higher (using Flash Player 9  or higher) </li>
+            <li> Use a tool which is capable of showing an object's long description, such as ACTF aDesigner 1.0 to open the Flash movie. </li>
+            <li> In the GUI summary panel, loop over each object which is  contained by the Flash movie and ensure the object that was provided a  description has a proper description value appearing in the tool's  display. </li>
+            <li> Authors may also test with a screen reader, by reading the  Flash content and listening to hear that the description is read when  tabbing to the non-text object (if it is tabbable) or hearing the  alternative text read when reading the content line-by-line. </li>
+            <li> All non-text objects have text equivalents that can serve  the same purpose and convey the same information as the non-text  object. </li>
+         </ol>
+      </section>
+      <section class="results"><h3>Expected Results</h3>
+         <p>#6 is true.</p>
+      </section>
+   </section><section id="related"><h2>Related Techniques</h2><ul>
+      <li><a href="../flash/FLASH1">FLASH1</a></li>
+      <li><a href="../general/G94">G94</a></li>
+   </ul></section><section id="resources"><h2>Resources</h2>
+      
+         <ul>
+            <li>
+									         <a href="http://www.adobe.com/accessibility.htmlproducts/flash/text.html">Adobe Flash Documentation for Text Equivalents</a>
+								       </li>
+            <li>
+									         <a href="http://www.eclipse.org/actf/downloads/tools/aDesigner/">aDesigner</a>
+								       </li>
+            <li>
+									         <a href="https://msdn.microsoft.com/en-us/library/ms695716.aspx">MS Active Accessibility 2.0 inspection tools</a>
+								       </li>
+         </ul>
+      
+   </section></body></html>
diff --git a/techniques/flash/FLASH20.html b/techniques/flash/FLASH20.html
new file mode 100644
index 0000000000..edb1aa23d5
--- /dev/null
+++ b/techniques/flash/FLASH20.html
@@ -0,0 +1,148 @@
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Reskinning Flash components to provide highly visible focus indication</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Reskinning Flash components to provide highly visible focus indication</h1><section class="meta"><p class="id">ID: FLASH20</p><p class="technology">Technology: flash</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+      <ul id="flash.applicability.general">
+         <li>Adobe Flash Professional version MX and higher </li>
+         <li>Adobe Flex</li>
+      </ul>
+   </section><section id="description"><h2>Description</h2>
+      <p>The purpose of this technique is to allow the author to use   ActionScript and component skins to apply a strong visual indication   when a component receives focus. In this particular technique, both the   component's background color and border will change. When the component   loses focus, it returns to its normal styling. </p>
+      <p>The visual highlights will be applied by switching some of the   component's skin parts. The Standard Flash components each have their   own set of skins that make up the component's visual appearance. Each   part is represented by a MovieClip which can be edited or replaced in   order to customize how the component looks. The most relevant skin for   this technique is the focusRectSkin skin, which is shared   by all components. By default this skin applies a subtle visual   highlight when the component receives focus. </p>
+      <p>This technique can be applied through the following steps: </p>
+      <ol>
+         <li> Create a customized version of focusRectSkin. </li>
+         <li> Use scripting to associate the component with the customized   skin. </li>
+      </ol>
+      <p>There are two ways to customize a skin: </p>
+      
+      <ol>
+         <li>
+            <p>Duplicating Existing Skin</p>
+            <p>With this approach you create a copy of the existing focusRect skin   for modification. You will manually have to apply the skin for each   individual component instance (as indicated in step 5 below). </p>
+            <ol>
+               <li> Drag the components you want to style to the stage. This will   ensure the appropriate component related skins are added to the movie's   library. </li>
+               <li> Open the Library panel, and navigate to the "Component Assets   &gt; Shared" folder. </li>
+               <li> Right-click (or Ctrl-click on a Mac) on the focusRectSkin   MovieClip, and choose "Duplicate" from the context menu. </li>
+               <li> Edit the visual border in the skin's MovieClip. For example,   the focus rectangle can be made thicker to stand out more (This step is   illustrated in the screenshot below this list). </li>
+               <li> Using ActionScript, associate form component instances with   your customized version of focusRectSkin. This can be achieved using the   setStyle method. </li>
+            </ol>
+            <figure id="figure-Flash-focusRectSkin">
+					<img src="img/editing_focusrect.png"/>			       
+								       
+                  <figcaption>Editing a duplicate of focusRectSkin</figcaption>
+                  
+							     </figure>
+         </li>
+         <li>
+            <p> Modifying Existing Skin </p>
+            <p>With this approach, the original focusRect skin is modified. This   means that the changes you make will be applied to the visual focus   indication of _every_ focusable component. </p>
+            <ol>
+               <li> Drag the components you want to style to the stage. This will   ensure the appropriate component related skins are added to the movie's   library. </li>
+               <li> Open the Library panel, and navigate to the "Component Assets   &gt; Shared" folder. </li>
+               <li> Open the focusRectSkin MovieClip for editing by double   clicking on it. </li>
+               <li> Edit the visual border in the skin's MovieClip. For example,   the focus rectangle can be made thicker to stand out more. </li>
+            </ol>
+            <div class="note">
+               <p>With this approach you will override the existing skin. If   you don't want this, follow the "Duplicate Existing Skin" approach   instead. </p>
+            </div>
+         </li>
+      </ol>
+      <p>The focusRect skin applies to all focusable Flash components. If you   want to modify other highlights (for example highlights that occur when   hovering over a component with the mouse), you will have to edit   component specific skins individually. For example, to edit the   mouseover highlights for the checkbox component, you will have to modify   or duplicate both Checkbox_overIcon and Checkbox_selectedOverIcon.   Similarly, for the Button component you will have to modify the   Button_over skin. </p>
+      <p>Also, keep in mind that the existing skins are automatically   applied on certain events (focus, mouseover, etc.). It is however also   possible to manually switch a skin at a moment of your own choosing   (e.g. to indicate invalid content for a text field). this can also be   achieved this by calling the setStyle method. </p>
+   </section><section id="examples"><h2>Examples</h2>
+      <section class="example">
+         <h3>A thick blue border to indicate focus</h3>
+         
+            <p>The code below shows an example where form component instances are   associated with a modified version of the focusRectSkin MovieClip. The   result is that the components receive a thick blue border rather than   the default thin border Flash provides. The code makes a reference to a   modified skin called Focus_custom, which has been added to   the movie's library in advance. </p>
+            <p>Note that the custom version of focusRectSkin also sets a   transparent yellow background to increase the visual highlight further.   Components such as Buttons and checkboxes will show this background, but   TextInput components will not. To ensure the yellow background will   still be applied to the TextInput instance, the following workaround is   applied: </p>
+            <ol>
+               <li> A duplicate version of the TextInput "normal" skin (which can   be found in the library at "Component Asssets &gt; TextInputSkins &gt;   TextInput_upSkin") is created and edited to show a yellow background. </li>
+               <li> FocusIn, FocusOut, MouseOver and MouseOut handlers are   assigned to the TextInput instance, which temporarily swap the default   "normal" skin with the custom "normal" skin while the component is   focused or hovered over. </li>
+            </ol>
+            <p>Additionally, the button_over skin is duplicated and modified to   change the default mouseover highlights for the button component   instance. The checkbox_overIcon and checkbox_selectedOverIcon skins are   directly modified, which means those changes will be applied to all   checkbox instances. </p>
+            <p class="working-example">The result of this technique can be found in the <a href="../../working-examples/flash-change-styles-on-focus/">working version of A thick blue border to indicate focus</a>. </p>
+            <p class="exsubhead">Code for Example 1 (ActionScript 3.0)</p>
+         
+         <pre xml:space="preserve">package wcagSamples {
+  import fl.accessibility.ButtonAccImpl;
+  import fl.accessibility.CheckBoxAccImpl;
+  import fl.controls.CheckBox;
+  import fl.controls.Button;
+  import fl.controls.Label;
+  import fl.controls.TextInput;
+  import flash.display.Sprite;
+  import flash.events.FocusEvent;
+  import flash.events.MouseEvent;
+  
+  public class FocusStyler extends Sprite {
+    public function FocusStyler() {
+      ButtonAccImpl.enableAccessibility()
+      CheckBoxAccImpl.enableAccessibility()
+      
+      var lbl1: Label = new Label();
+      lbl1.text = "name";
+      lbl1.x = lbl1.y = 20;
+      addChild(lbl1);
+      
+      var txt1: TextInput = new TextInput();
+      txt1.x = 60;
+      txt1.y = 20;
+      txt1.width = 200;
+      txt1.addEventListener(FocusEvent.FOCUS_IN, handleFocusIn);
+      txt1.addEventListener(FocusEvent.FOCUS_OUT, handleFocusOut);
+      txt1.addEventListener(MouseEvent.MOUSE_OVER, handleFocusIn);
+      txt1.addEventListener(MouseEvent.MOUSE_OUT, handleFocusOut);
+      txt1.setStyle("focusRectSkin", "focus_custom");
+      addChild(txt1);
+      
+      var chk1: CheckBox = new CheckBox();
+      chk1.label = "Check Me";
+      chk1.x = 60;
+      chk1.y = 70;
+      chk1.setStyle("focusRectSkin", "focus_custom");
+      addChild(chk1);
+      
+      var btn1: Button = new Button();
+      btn1.label = "Click Me";
+      btn1.x = 60;
+      btn1.y = 110;
+      btn1.setStyle("focusRectSkin", "focus_custom");
+      btn1.setStyle("overSkin", "Button_over_custom");
+      addChild(btn1);
+    }
+    
+    private function handleFocusIn(event) {
+      event.currentTarget.setStyle("upSkin", "TextInput_upSkin_custom");
+    }
+    
+    private function handleFocusOut(event) {
+      event.currentTarget.setStyle("upSkin", "TextInput_upSkin");
+    }
+  }
+}</pre>
+         
+      	<p class="working-example">This is demonstrated in <a href="../../working-examples/flash-change-styles-on-focus/">working version of A thick blue border to indicate focus</a>. The source of <a href="../../working-examples/flash-change-styles-on-focus/change_styles_on_focus_as3.zip">working version of A thick blue border to indicate focus</a> is available.</p>
+         
+      </section>
+   </section><section id="tests"><h2>Tests</h2>
+      <section class="procedure"><h3>Procedure</h3>
+         <p>When a Flash movie contains focusable components, confirm that: </p>
+         <ol>
+            <li> The visual highlight is applied by modifying the component's   skins </li>
+            <li> A visual highlight is shown when the components receive focus </li>
+         </ol>
+      </section>
+      <section class="results"><h3>Expected Results</h3>
+         <ul>
+            <li>#1 and #2 are true </li>
+         </ul>
+      </section>
+   </section><section id="related"><h2>Related Techniques</h2><ul>
+      <li><a href="../client-side-script/SCR31">SCR31</a></li>
+   </ul></section><section id="resources"><h2>Resources</h2>
+      
+         <ul>
+            <li>
+									         <a href="http://www.adobe.com/devnet/archive/flash/articles/creating_as3_components_pt5.html">Creating ActionScript 3.0 components in Flash – Part 5:   Styles and skins</a>
+								       </li>
+         </ul>
+      
+   </section></body></html>
diff --git a/techniques/flash/FLASH21.html b/techniques/flash/FLASH21.html
new file mode 100644
index 0000000000..14a60e6b40
--- /dev/null
+++ b/techniques/flash/FLASH21.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using the DataGrid component to associate column headers with cells</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Using the DataGrid component to associate column headers with cells</h1><section class="meta"><p class="id">ID: FLASH21</p><p class="technology">Technology: flash</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+      <ul id="flash.applicability.general">
+         <li>Adobe Flash Professional version MX and higher </li>
+         <li>Adobe Flex</li>
+      </ul>
+   </section><section id="description"><h2>Description</h2>
+      <p>The intent of this Technique is to ensure that information and   relationships that are implied visually by data tables are also made   available programmatically. Specifically, the association between table   column headers and their corresponding cells must be exposed to   assistive technology. In Flash, the DataGrid component can be used to   achieve this. When accessibility is enabled for the DataGrid component,   Flash will automatically prepend the column name in front of each cell   value when exposing the grid row's accessible name to assistive   technology. For example, the row in the screenshot below would be   announced by a screen reader as "Row 6 of 13 Name Patty Crawford Bats L   Throws L Year Jr Home Whittier, CA". </p>
+      <div class="note">
+         <p>The DataGrid component in Flash only supports column   headings, not row headings. </p>
+      </div>
+      <figure id="figure-flash-highlighted-datagrid">
+      	<img src="img/highlighted_row_in_flash_datagrid.png"/>
+						   
+            
+            <figcaption>screenshot of highlighted row in grid component</figcaption>
+         
+					</figure>
+   </section><section id="examples"><h2>Examples</h2>
+      <section class="example">
+         <h3>A statistical data table</h3>
+         
+            <p>In this example, statistical data is used as data provider for a   dynamically created DataGrid component. The lines import   fl.accessibility.DataGridAccImpl;   DataGridAccImpl.enableAccessibility(); are required to enable   accessibility for the Datagrid Component. </p>
+         
+         <pre xml:space="preserve">import fl.accessibility.DataGridAccImpl;
+DataGridAccImpl.enableAccessibility();
+
+import fl.data.DataProvider;
+bldRosterGrid(aDg);
+var aRoster: Array = new Array();
+aRoster = [ {
+  Name: "Wilma Carter", Bats: "R", Throws: "R", Year: "So", Home: "Redlands, CA"}, {
+  Name: "Sue Pennypacker", Bats: "L", Throws: "R", Year: "Fr", Home: "Athens, GA"}, {
+  Name: "Jill Smithfield", Bats: "R", Throws: "L", Year: "Sr", Home: "Spokane, WA"}, {
+  Name: "Shirley Goth", Bats: "R", Throws: "R", Year: "Sr", Home: "Carson, NV"}, {
+  Name: "Jennifer Dunbar", Bats: "R", Throws: "R", Year: "Fr", Home: "Seaside, CA"}, {
+  Name: "Patty Crawford", Bats: "L", Throws: "L", Year: "Jr", Home: "Whittier, CA"}, {
+  Name: "Angelina Davis", Bats: "R", Throws: "R", Year: "So", Home: "Odessa, TX"}, {
+  Name: "Maria Santiago", Bats: "L", Throws: "L", Year: "Sr", Home: "Tacoma, WA"}, {
+  Name: "Debbie Ferguson", Bats: "R", Throws: "R", Year: "Jr", Home: "Bend, OR"}, {
+  Name: "Karen Bronson", Bats: "R", Throws: "R", Year: "Sr", Home: "Billings, MO"}, {
+  Name: "Sylvia Munson", Bats: "R", Throws: "R", Year: "Jr", Home: "Pasadena, CA"}, {
+  Name: "Carla Gomez", Bats: "R", Throws: "L", Year: "Sr", Home: "Corona, CA"}, {
+  Name: "Betty Kay", Bats: "R", Throws: "R", Year: "Fr", Home: "Palo Alto, CA"}
+];
+aDg.dataProvider = new DataProvider(aRoster);
+aDg.rowCount = aDg.length;
+
+function bldRosterGrid(dg: DataGrid) {
+  dg.setSize(400, 300);
+  dg.columns =[ "Name", "Bats", "Throws", "Year", "Home"];
+  dg.columns[0].width = 120;
+  dg.columns[1].width = 50;
+  dg.columns[2].width = 50;
+  dg.columns[3].width = 40;
+  dg.columns[4].width = 120;
+  dg.move(50, 50);
+};</pre>
+         
+      	<p class="working-example">This is demonstrated in the <a href="../../working-examples/flash-using-datagrid-to-associate-headers-with-cells/">working version of A statistical data table</a>. The <a href="../../working-examples/flash-using-datagrid-to-associate-headers-with-cells/using_datagrid_to_associate_headers_with_cells_as3.fla">source of A statistical data table</a> is available.</p>
+         
+      </section>
+   </section><section id="tests"><h2>Tests</h2>
+      <section class="procedure"><h3>Procedure</h3>
+         <p>For Flash content that contains tabular data: </p>
+         <ol>
+            <li> Open the SWF file in Internet Explorer 6 or higher (using Flash   Player 6 or higher), or Firefox 3 or higher (using Flash Player 9 or   higher) </li>
+            <li> Use a tool which is capable of showing an object's   accessibility name, such as ACTF aDesigner 1.0 to open the Flash movie. </li>
+            <li> In the GUI summary panel, inspect the accessibility name for   the DataGrid rows and cells to ensure that the heading data is presented   in conjunction with the data cell data. </li>
+            <li> Authors may also test with a screen reader, by reading the   Flash content and listening to hear that the heading and data cell data   are read when reading the DataGrid. </li>
+            <li> Authors may also verify in the Flash authoring tool that the   DataGrid component is used to structure the data and that the DataGrid   has been made accessible using the DataGridAccImpl.enableAccessibility   method. </li>
+         </ol>
+      </section>
+      <section class="results"><h3>Expected Results</h3>
+         <ul>
+            <li> Check 3, 4, or 5 is true </li>
+         </ul>
+      </section>
+   </section></body></html>
diff --git a/techniques/flash/FLASH22.html b/techniques/flash/FLASH22.html
new file mode 100644
index 0000000000..ff0b94522b
--- /dev/null
+++ b/techniques/flash/FLASH22.html
@@ -0,0 +1,80 @@
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Adding keyboard-accessible actions to static elements</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Adding keyboard-accessible actions to static elements</h1><section class="meta"><p class="id">ID: FLASH22</p><p class="technology">Technology: flash</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+      <ul id="flash.applicability.general">
+         <li>Adobe Flash Professional version MX and higher </li>
+         <li>Adobe Flex</li>
+      </ul>
+   </section><section id="description"><h2>Description</h2>
+      <p>The objective of this technique is to demonstrate how to provide keyboard
+    				access to a Flash MovieClip that is not keyboard accessible by default.
+    				This technique ensures that the element is focusable by setting the
+    				<code class="prop">tabEnabled</code> property, and it ensures that the action can be triggered
+    				from the keyboard by providing a keydown handler in addition to a click
+    				handler. </p>
+   </section><section id="examples"><h2>Examples</h2>
+      <section class="example">
+         <h3>MovieClip used as a button</h3>
+         
+            <p>In this example, a custom MovieClip is used as a button. To make it
+    						keyboard accessible, the MovieClip is placed in the tab order using
+    						the tabEnabled. Additionally, redundant event handlers are added so
+    						that the custom button responds to both a mouse click and a space bar
+    						keypress. Finally, the custom button is provided an accessible name
+    						using the MovieClip's <code class="obj">AccessibilityProperties</code> object. This makes the
+    						button's label perceivable by assistive technology. </p>
+            <p class="working-example">This result can be viewed in the <a href="../../working-examples/flash-event-handlers-to-static-objects/">working
+            	version of MovieClip used as a button</a>. The <a href="../../working-examples/flash-event-handlers-to-static-objects/event_handlers_to_static_objects_as3.fla">source of MovieClip used as a button</a> is available.</p>
+            <div class="note">
+               <p>Using a generic MovieClip is generally not recommended, since
+    						the custom button will be perceived as a focusable graphic rather than
+    						a button. Instead, a better approach would be to use the standard Flash
+    						Button component, or create a new symbol with a type of "button". </p>
+            </div>
+         
+         <pre xml:space="preserve">import flash.accessibility. *
+import flash.events.KeyboardEvent;
+import flash.events.MouseEvent;
+import flash.net.navigateToURL;
+import flash.net.URLRequest;
+
+testMC.tabEnabled = true;
+updateAccName(testMC);
+testMC.addEventListener(MouseEvent.CLICK, clickHandler, false);
+testMC.addEventListener(KeyboardEvent.KEY_DOWN, keyDownHandler);
+
+updateAccName(testMC);
+
+function clickHandler(e) {
+  testMC.labelText.text = "THANKS";
+  updateAccName(testMC);
+}
+
+function keyDownHandler(e) {
+  if (e.keyCode == 32)
+  clickHandler(e);
+}
+
+function updateAccName(mc: MovieClip) {
+  if (! mc.accessibilityProperties)
+  mc.accessibilityProperties = new AccessibilityProperties();
+  mc.accessibilityProperties.name = mc.labelText.text;
+  Accessibility.updateProperties();
+}</pre>
+      </section>
+   </section><section id="tests"><h2>Tests</h2>
+      <section class="procedure"><h3>Procedure</h3>
+         <p>When a Flash Movie contains generic MovieClip instances that are used
+    					as interactive controls, confirm that: </p>
+         <ol>
+            <li> The MovieClip instance has its <code class="prop">tabEnabled</code> property set to true </li>
+            <li> The MovieClip instance has event handlers for both mouse and keyboard events </li>
+         </ol>
+      </section>
+      <section class="results"><h3>Expected Results</h3>
+         <ul>
+            <li> #1 and #2 are true </li>
+         </ul>
+      </section>
+   </section><section id="related"><h2>Related Techniques</h2><ul>
+      <li><a href="../client-side-script/SCR29">SCR29</a></li>
+      <li><a href="../flash/FLASH17">FLASH17</a></li>
+   </ul></section></body></html>
\ No newline at end of file
diff --git a/techniques/flash/FLASH23.html b/techniques/flash/FLASH23.html
new file mode 100644
index 0000000000..1b9ad2d59c
--- /dev/null
+++ b/techniques/flash/FLASH23.html
@@ -0,0 +1,110 @@
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Adding summary information to a DataGrid</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Adding summary information to a DataGrid</h1><section class="meta"><p class="id">ID: FLASH23</p><p class="technology">Technology: flash</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+      <ul id="flash.applicability.general">
+         <li>Adobe Flash Professional version MX and higher </li>
+         <li>Adobe Flex</li>
+      </ul>
+   </section><section id="description"><h2>Description</h2>
+      <p>The objective of this technique is to provide a brief overview of
+    				how data has been organized into a DataGrid or a brief explanation
+    				of how to navigate the grid. </p>
+      <p>As Flash does not provide a summary attribute, this descriptive text
+    				will be added to the DataGrid's accessible desription instead. This
+    				approach will make the summary information available to people who
+    				use screen readers; the information is not displayed visually. </p>
+      <p>The summary is useful when the table has a complex structure (for
+    				example, when there are several sets of row or column headers, or when
+    				there are multiple groups of columns or rows). The summary may also
+    				be helpful for simple data tables that contain many columns or rows
+    				of data. </p>
+   </section><section id="examples"><h2>Examples</h2>
+      <section class="example">
+         <h3>Adding a summary to a DataGrid in the Accessibility control panel</h3>
+         
+            <p>This is an example of a DataGrid being added to the stage in Flash
+    						Professional from the Components panel. The description field is used
+    						in the Accessibility control panel in Flash to serve as the summary
+    						information for the DataGrid. </p>
+            <ol>
+               <li> Create a new Flash file (.fla) or open an existing one to put
+    						a DataGrid into. </li>
+               <li> Open the Flash components panel from the Window menu </li>
+               <li> Drag a DataGrid component onto the stage and position as desired. </li>
+               <li> Select the DataGrid component and add the summary information
+    							to the description field for DataGrid, using the Accessibility control
+    							panel. </li>
+            </ol>
+         
+      </section>
+      <section class="example">
+         <h3>Adding a summary to a DataGrid with ActionScript 3</h3>
+         
+            <p>This is a basic AS3 example of a DataGrid component that has summary
+    						text added as its accessible description. </p>
+         
+         <pre xml:space="preserve">import fl.accessibility.DataGridAccImpl;
+import fl.controls.DataGrid;
+import fl.controls.Label;
+import fl.data.DataProvider;
+import flash.accessibility.Accessibility;
+import flash.accessibility.AccessibilityProperties;
+import flash.system.Capabilities;
+
+DataGridAccImpl.enableAccessibility();
+
+createGrid();
+
+//set the summary text as accessible description
+var accProps: AccessibilityProperties = new AccessibilityProperties();
+accProps.description = "The first column shows the player's name," +
+  "the second and third column shows the player's gaming statistics." +
+  "the fourth column shows the player's year as FR (Freshman), JR (junior) or SO (Sophomore)." +
+  "The fifth column shows the player's home city and state";
+aDg.accessibilityProperties = accProps;
+if (Capabilities.hasAccessibility)
+Accessibility.updateProperties();
+
+function createGrid() {
+  
+  //create and add the components
+  var aDg: DataGrid = new DataGrid();
+  addChild(aDg);
+  aDg.move(50, 50);
+  bldRosterGrid(aDg);
+  
+  var aRoster: Array = new Array();
+  aRoster =[ {
+    Name: "Wilma Carter", Bats: "R", Throws: "R", Year: "So", Home: "Redlands, CA"
+  }, {
+    Name: "Sue Pennypacker", Bats: "L", Throws: "R", Year: "Fr", Home: "Athens, GA"
+  }, {
+    Name: "Jill Smithfield", Bats: "R", Throws: "L", Year: "Sr", Home: "Spokane, WA"
+  }, {
+    Name: "Betty Kay", Bats: "R", Throws: "R", Year: "Fr", Home: "Palo Alto, CA"
+  },];
+  aDg.dataProvider = new DataProvider(aRoster);
+  aDg.rowCount = aDg.length;
+}
+
+function bldRosterGrid(dg: DataGrid) {
+  dg.setSize(400, 300);
+  dg.columns =[ "Name", "Bats", "Throws", "Year", "Home"];
+  dg.columns[0].width = 120;
+  dg.columns[1].width = 50;
+  dg.columns[2].width = 50;
+  dg.columns[3].width = 40;
+  dg.columns[4].width = 120;
+};</pre>
+         
+      	<p class="working-example">For a demonstration, see the <a href="../../working-examples/flash-datagrid-with-summary/">working version of Adding a summary to a DataGrid with ActionScript 3</a>. The <a href="../../working-examples/flash-datagrid-with-summary/datagrid_with_summary_as3.fla">source of Adding a summary to a DataGrid with ActionScript 3</a> is available.</p>
+         
+      </section>
+   </section><section id="tests"><h2>Tests</h2>
+      <section class="procedure"><h3>Procedure</h3>
+         <p>If the Flash movie contains a DataGrid component, confirm that summary
+    					text has been added to it through the corresponding accessible description
+    					property. </p>
+      </section>
+      <section class="results"><h3>Expected Results</h3>
+         <p>The above is true. </p>
+      </section>
+   </section></body></html>
\ No newline at end of file
diff --git a/techniques/flash/FLASH24.html b/techniques/flash/FLASH24.html
new file mode 100644
index 0000000000..04e6f469c4
--- /dev/null
+++ b/techniques/flash/FLASH24.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Allowing the user to extend the default time limit</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Allowing the user to extend the default time limit</h1><section class="meta"><p class="id">ID: FLASH24</p><p class="technology">Technology: flash</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+      <ul id="flash.applicability.general">
+         <li>Adobe Flash Professional version MX and higher </li>
+         <li>Adobe Flex</li>
+      </ul>
+   </section><section id="description"><h2>Description</h2>
+      <p>The objective of this technique is to allow the user to extend the
+    				default time limit by providing a mechanism to extend the time when
+    				scripts provide functionality that has default time limits. In order
+    				to allow the user to request a longer time limit, the script can provide
+    				a form (for example) allowing the user to enter a larger time limit
+    				or indicating that more time is needed. </p>
+   </section><section id="examples"><h2>Examples</h2>
+      <section class="example">
+         <h3>Changing timeout with a dropdown list</h3>
+         
+            <p>This is a basic AS2 example where the timeout duration can be changed
+    						by the user through a dropdown list. In this example there is a combobox
+    						with the instance name sessionLimitDuration. </p>
+         
+         <pre xml:space="preserve">import mx.controls.Alert;
+import mx.accessibility.AlertAccImpl;
+import mx.accessibility.ComboBoxAccImpl;
+
+ComboBoxAccImpl.enableAccessibility();
+AlertAccImpl.enableAccessibility();
+
+var sessionTimeout;
+var sessionNotificationTimeout;
+var timeLimit: Number;
+var sessionAlert: Alert;
+
+adjustTimeoutDuration();
+// reset the timeout when interaction occurs
+testField.addEventListener("change", resetTimeout);
+
+//
+//update limit duration when the combobox value changes
+//
+sessionLimitDuration.addEventListener("change", adjustTimeoutDuration);
+
+function adjustTimeoutDuration(e) {
+  timeLimit = sessionLimitDuration.value * 1000;
+  resetTimeout();
+  timeoutDescription.text = "A session timeout will be simulated after " + 
+    sessionLimitDuration.selectedLabel + " without interaction in the form field below."
+}
+
+function resetTimeout() {
+  clearTimeout(sessionTimeout);
+  sessionTimeout = setTimeout(endSession, timeLimit);
+}
+
+function endSession() {
+  sessionAlert.deletePopUp();
+  Alert.show("please log in again",
+  "Your session has expired");
+}</pre>
+         
+            <p class="working-example">For a demonstration, see the <a href="../../working-examples/flash-checkbox-for-extending-timelimit/">working
+            	version of Changing timeout with a dropdown list</a>. The <a href="../../working-examples/flash-checkbox-for-extending-timelimit/checkbox_for_extending_timelimit_as3.fla">source of Changing timeout with a dropdown list</a> is available. Please note that the session times are
+    						purposefully short for demonstration purposes, developers will
+    						want to provide durations that are sufficient to meet the requirements
+    						of <a href="https://www.w3.org/WAI/WCAG21/Understanding/timing-adjustable">Success
+    						Criterion 2.2.1 (Timing Adjustable)</a> . </p>
+            
+         
+      </section>
+   </section><section id="tests"><h2>Tests</h2>
+      <section class="procedure"><h3>Procedure</h3>
+         <p>For Flash content that include a time limit: </p>
+         <ol>
+            <li> Check that there is a control to adjust the time limit near the
+    					top of the page that allows the user to adjust the time to at least
+    					ten times longer than the default. </li>
+            <li> Verify that the default time limit for the page is long enough
+    						that a user can easily navigate to the control even if they are 10
+    						times slower than most users. </li>
+         </ol>
+      </section>
+      <section class="results"><h3>Expected Results</h3>
+         <p>The above is true </p>
+      </section>
+   </section><section id="related"><h2>Related Techniques</h2><ul>
+      <li><a href="../client-side-script/SCR1">SCR1</a></li>
+      <li><a href="../general/G133">G133</a></li>
+      <li><a href="../general/G198">G198</a></li>
+      <li><a href="../general/G180">G180</a></li>
+   </ul></section></body></html>
\ No newline at end of file
diff --git a/techniques/flash/FLASH25.html b/techniques/flash/FLASH25.html
new file mode 100644
index 0000000000..c75e5887c7
--- /dev/null
+++ b/techniques/flash/FLASH25.html
@@ -0,0 +1,150 @@
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Labeling a form control by setting its accessible name</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Labeling a form control by setting its accessible name</h1><section class="meta"><p class="id">ID: FLASH25</p><p class="technology">Technology: flash</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+      <ul id="flash.applicability.general">
+         <li>Adobe Flash Professional version MX and higher </li>
+         <li>Adobe Flex</li>
+      </ul>
+   </section><section id="description"><h2>Description</h2>
+      <p>The objective of this technique is to provide an accessible name to
+    				the built in form components provided by Flash. Some components, such
+    				as radio buttons, checkboxes and buttons, have their own <code class="prop">label</code> property.
+    				For other components, the developer needs to specify the component's
+    				label text as accessible name. This can be either be achieved through
+    				the Accessibility panel (for components placed on the stage during
+    				authoring) or through scripting (for components that are dynamically
+    				created at runtime). </p>
+      
+      <p>ActionScript 2</p>
+      <p>In ActionScript 2 the accessible name needs to be set on a component's
+    				<code class="prop">_accProps</code> property. This property must be an object. If the property
+    				has not been set yet, the developer needs to create a custom object
+    				and assign it to the <code class="prop">_accProps</code> property. The object itself can have
+    				several accessibility related properties, one of them being <code class="prop">_accProps.name</code>,
+    				which specifies the accessible name. When an <code class="prop">_accProps</code> property is
+    				updated, the developer must call Accessibility.UpdateProperties() for
+    				the changes to take effect. Before calling Accessibility.UpdateProperties(),
+    				it is recommended to check the <var>System.capabilities.hasAccessibility</var>
+    				flag. this will prevent an error on environments that do not support
+    				MSAA. </p>
+      <p>ActionScript 2 provides the following accessible components: </p>
+      <ul>
+         <li> SimpleButton </li>
+         <li> CheckBox </li>
+         <li> RadioButton </li>
+         <li> Label </li>
+         <li> TextInput </li>
+         <li> TextArea </li>
+         <li> ComboBox </li>
+         <li> ListBox </li>
+         <li> Window </li>
+         <li> Alert </li>
+         <li> DataGrid </li>
+      </ul>
+      
+      <p>ActionScript 3</p>
+      <p>In ActionScript 3 the accessible name needs to be set on a component's
+    				<code class="prop">accessibilityProperties</code> property. This property must be an instance
+    				of <code class="obj">flash.accessibility.AccessibilityProperties</code>. If the property has
+    				not been set yet, the developer needs to create the a new <code class="obj">AccessibilityProperties</code>
+    				instance and assign it to the <code class="prop">accessibilityProperties</code> property. The
+    				object itself can have several accessibility related properties, one
+    				of them being <code class="prop">accessibilityProperties.name</code> which specifies the accessible
+    				name. When an <code class="prop">accessibilityProperties property</code> is updated, the developer
+    				must call flash.accessibility.Accessibility.UpdateProperties() for the
+    				changes to take effect. Before calling Accessibility.UpdateProperties(),
+    				it is recommended to check the <var>flash.system.capabilities.hasAccessibility</var>
+    				flag. this will prevent an error on environments that do not support
+    				MSAA. </p>
+      <p>ActionScript 3 provides the following accessible components. </p>
+      <ul>
+         <li> Button </li>
+         <li> CheckBox </li>
+         <li> ComboBox </li>
+         <li> List </li>
+         <li> RadioButton </li>
+         <li> TileList </li>
+      </ul>
+   </section><section id="examples"><h2>Examples</h2>
+      <section class="example">
+         <h3>Setting a component's accessible name using the Accessibility panel</h3>
+         
+            <p>To add and label a component control, follow these steps: </p>
+            <ol>
+               <li> From the 'Components' panel, drag the component on to the stage,
+    							or use scripting to create a new instance. </li>
+               <li> With the newly created component instance selected, enter its
+    							label text in the Accessibility Panel's Name field. </li>
+            </ol>
+         
+      </section>
+      <section class="example">
+         <h3>Setting the accessible name through ActionScript 2.0</h3>
+         
+            <p>The code example below shows how a ListBox component is created and assigned an accessible name. </p>
+         
+         <pre xml:space="preserve">mx.accessibility.ListAccImpl.enableAccessibility();
+
+this.createClassObject(mx.controls.List, "my_list", 1);
+my_list.addItem({label: "R. Davis", data: 1});
+my_list.addItem({label: "V. Mann", data: 2});
+my_list.addItem({label: "L. Heart", data: 3});
+my_list.addItem({label: "P. Hill", data: dt4});
+my_list.addItem({label: "D. Gribble", data: 5});
+my_list.move(10, 10);
+
+if (System.capabilities.hasAccessibility) {
+  my_list._accProps = new Object();
+  my_list._accProps.name = "Staff Members";
+  Accessibility.updateProperties();
+}</pre>
+         
+      	<p class="working-example">This result can be viewed in the <a href="../../working-examples/flash-accessible-name-for-form_components-as2/">working version of Setting the accessible name through ActionScript 2.0</a>. The <a href="../../working-examples/flash-accessible-name-for-form_components-as2/accessible_name_for_form_components_as2.fla">source of Setting the accessible name through ActionScript 2.0</a> is available.</p>
+         
+      </section>
+      <section class="example">
+         <h3>Setting the accessible name through ActionScript 3.0</h3>
+         
+            <p>The code example below shows how a ListBox component is created and assigned an accessible name. </p>
+         
+         <pre xml:space="preserve">import fl.controls.List;
+import fl.accessibility.ListAccImpl;
+import flash.system.Capabilities;
+import flash.accessibility.*;
+
+ListAccImpl.enableAccessibility();
+var my_list:List = new List();
+my_list.addItem({label:"R. Davis", data:1});
+my_list.addItem({label:"V. Mann", data:2});
+my_list.addItem({label:"L. Heart", data:3});
+my_list.addItem({label:"P. Hill", data:4});
+my_list.addItem({label:"D. Gribble", data:5});
+my_list.x = my_list.y = 10;
+
+if (Capabilities.hasAccessibility) {
+  var accProps:AccessibilityProperties = new AccessibilityProperties();
+  accProps.name = "Staff Members";
+  my_list.accessibilityProperties = accProps;
+  Accessibility.updateProperties();
+}
+addChild(my_list);</pre>
+         
+      	<p class="working-example">This result can be viewed in the <a href="../../working-examples/flash-accessible-name-for-form_components-as3/">working version of Setting the accessible name through ActionScript 3.0</a>. The <a href="../../working-examples/flash-accessible-name-for-form_components-as3/accessible_name_for_form_components_as3.fla">source of Setting the accessible name through ActionScript 3.0</a> is available.</p>
+         
+      </section>
+   </section><section id="tests"><h2>Tests</h2>
+      <section class="procedure"><h3>Procedure</h3>
+         <p>For Flash movies that contain form components, confirm that either: </p>
+         <ol>
+            <li> The selected component's label text is specified in the Accessibility
+    					Panel's "name" field. </li>
+            <li> In ActionScript 2.0: Scripting is used to dynamically set the
+    					component's <code class="prop">_accProps.name</code> property </li>
+            <li> In ActionScript 3.0: Scripting is used to dynamically set the
+    					component's <code class="prop">accessibilityProperties.name</code> property </li>
+         </ol>
+      </section>
+      <section class="results"><h3>Expected Results</h3>
+         <p>One of the above is true </p>
+      </section>
+   </section><section id="related"><h2>Related Techniques</h2><ul>
+      <li><a href="../general/G94">G94</a></li>
+   </ul></section></body></html>
\ No newline at end of file
diff --git a/techniques/flash/FLASH26.html b/techniques/flash/FLASH26.html
new file mode 100644
index 0000000000..3f89961887
--- /dev/null
+++ b/techniques/flash/FLASH26.html
@@ -0,0 +1,143 @@
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Applying audio descriptions to Flash video</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Applying audio descriptions to Flash video</h1><section class="meta"><p class="id">ID: FLASH26</p><p class="technology">Technology: flash</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+      <ul>
+         <li> Flash CS3 and higher </li>
+         <li> ActionScript 3.0 and higher </li>
+      </ul>
+   </section><section id="description"><h2>Description</h2>
+      <p>The objective of this technique is to provide a way for people
+    				who are blind or otherwise have trouble seeing the video in
+    				audio-visual material to be able to access the material. With
+    				this technique a description of the video is provided via audio
+    				description that will fit into the gaps in the dialogue in
+    				the audio-visual material. </p>
+   </section><section id="examples"><h2>Examples</h2>
+      <section class="example">
+         <h3>Playing descriptions when cue points are reached</h3>
+         
+            <p>In this example, the FLVPlayback component is used to create
+    						a video player. A custom class called "AudioDescriptions" is
+    						added to manage the playback of extended audio descriptions.
+    						This class provides event listeners to listen for cue points
+    						in the media that have been identified by the audio description
+    						provider. When these cuepoints are reached, an mp3 file containing
+    						the corresponding description will start playing. The recorded
+    						descriptions have been timed to fit with in the gaps in the
+    						movie's dialog. </p>
+            <p>By default, audio descriptions will be enabled. A button (which
+    						must itself be accessible to meet other success criteria) is
+    						provided below the video player that allows the user to turn
+    						audio descriptions on or off. </p>
+         
+         <pre xml:space="preserve">package {
+  import fl.video. *;
+  import flash.events. *;
+  import flash.media.Sound;
+  import flash.media.SoundChannel;
+  import flash.net.URLRequest;
+  import flash.display.Sprite;
+  
+  public class AudioDescriptions extends Sprite {
+    private var channel: SoundChannel = new SoundChannel;
+    private var myPlayer: FLVPlayback;
+    private var _enabled: Boolean = true;
+    private var _toggleBtn: Button;
+    private var snd: Sound = new Sound();
+    public function AudioDescriptions() {
+      // point myPlayer to the FLVPlayback component instance on the stage, 
+      // which should be loaded with a valid video source.
+      myPlayer = my_FLVPlybk;
+      // add cue points. When any of these are reached, the 
+      // MetadataEvent.CUE_POINT event will fire
+      myPlayer.addASCuePoint(8.35, "ASpt1");
+      myPlayer.addASCuePoint(23.23, "ASpt2");
+      
+      enable();
+      
+      enable_AD_btn.addEventListener(MouseEvent.CLICK, handleBtnClick);
+    }
+    
+    private function handleBtnClick(e) {
+      _enabled = ! _enabled;
+      if (! _enabled) {
+        disable();
+        enable_AD_btn.label = "Enable Audio Descriptions";
+      } else {
+        enable();
+        enable_AD_btn.label = "Disable Audio Descriptions";
+      }
+    }
+    
+    public function enable() {
+      // set up an event handler which will be called each time a cue point is reached
+      myPlayer.addEventListener(MetadataEvent.CUE_POINT, cp_listener);
+    }
+    
+    public function disable() {
+      // remove the event handler called each time a cue point is reached, so 
+      // that audio description is disabled.
+      myPlayer.removeEventListener(MetadataEvent.CUE_POINT, cp_listener);
+    }
+    
+    private function cp_listener(eventObject: MetadataEvent): void {
+      snd = new Sound();
+      //recreate sound object as it can only load one mp3 file
+      //check to see which cue point was reached
+      switch (eventObject.info.name) {
+        case "ASpt1":
+        snd.load(new URLRequest("sphere.mp3"));
+        //create a new Sound object, and load the appropriate mp3
+        channel = snd.play();
+        // play the audio description, and assign it to the SoundChannel object
+        break;
+        case "ASpt2":
+        snd.load(new URLRequest("transfrm.mp3"));
+        channel = snd.play();
+        break;
+      }
+    }
+  }
+}</pre>
+         
+      	<p class="working-example">The result can be viewed in the <a href="../../working-examples/flash-audio-descriptions/">working version of Playing descriptions when cue points are reached</a>. The <a href="../../working-examples/flash-audio-descriptions/audio_descriptions_as3.zip">source of Playing descriptions when cue points are reached</a> is available.</p>
+         
+      </section>
+      <section class="example">
+         <h3>Providing an additional audio track for descriptions</h3>
+         
+            <p>Audio description can also be provided via an additional audio
+    						track that is the same length and plays simultaneously as the
+    						primary media, but that only includes sound for the segments
+    						when audio description needs to be played and silence at other
+    						times. A Flash author can provide a toggle to turn this additional
+    						audio track on or off, based on the listener's preference.
+    						When the additional track is enabled, there are two parallel
+    						audio tracks, one being the primary audio, and the second being
+    						the one containing only audio description. It is still necessary
+    						to ensure that the audio description and primary audio do not
+    						overlap in ways that make comprehension difficult. This method
+    						will achieve the same result as the method used in Example
+    						1, but may be chosen because of the type of audio description
+    						files that are provided to the Flash author. </p>
+         
+      </section>
+   </section><section id="tests"><h2>Tests</h2>
+      <section class="procedure"><h3>Procedure</h3>
+         <p>When Flash content contains video with an audio soundtrack,
+    					confirm that: </p>
+         <ol>
+            <li> Audio descriptions have been made available using separate
+    					sound files. </li>
+            <li> A button is provided that allows users to enable or disable
+    					the audio descriptions </li>
+         </ol>
+      </section>
+      <section class="results"><h3>Expected Results</h3>
+         <ul>
+            <li> #1 and #2 are true </li>
+         </ul>
+      </section>
+   </section><section id="related"><h2>Related Techniques</h2><ul>
+      <li><a href="../general/G78">G78</a></li>
+      <li><a href="../general/G69">G69</a></li>
+      <li><a href="../general/G173">G173</a></li>
+   </ul></section></body></html>
\ No newline at end of file
diff --git a/techniques/flash/FLASH27.html b/techniques/flash/FLASH27.html
new file mode 100644
index 0000000000..90a43e8ad3
--- /dev/null
+++ b/techniques/flash/FLASH27.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing button labels that describe the purpose of a button</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Providing button labels that describe the purpose of a button</h1><section class="meta"><p class="id">ID: FLASH27</p><p class="technology">Technology: flash</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+      <ul id="flash.applicability.general">
+         <li>Adobe Flash Professional version MX and higher </li>
+         <li>Adobe Flex</li>
+      </ul>
+   </section><section id="description"><h2>Description</h2>
+      <p>The objective of this technique is to describe the purpose
+    				of a button by providing descriptive text as the button's accessible
+    				name. The description lets a user distinguish this button from
+    				other buttons in the Flash movie and helps the user determine
+    				whether to activate the button. An empty string is not sufficient
+    				as a button's accessible name. </p>
+      <p>For buttons with text labels, the label text will be used
+    				as a buttons accessible name. If a button is image based and
+    				does not have a text label, the button's accessible name will
+    				have to be set separately using the Accessibility panel or
+    				through scripting. </p>
+   </section><section id="examples"><h2>Examples</h2>
+      <section class="example">
+         <h3>Using the label property to describe the button's purpose</h3>
+         <pre xml:space="preserve">import fl.controls.Button;
+import fl.accessibility.ButtonAccImpl;
+
+ButtonAccImpl.enableAccessibility();
+
+var myButton:Button = new Button();
+myButton.label = "View Items in Cart";
+</pre>
+      </section>
+      <section class="example">
+         <h3>Using scripting to set the accessible name for an image button using Actionscript 3.0</h3>
+         
+            <p>In this example, the button's <code class="prop">label</code> property is deliberately set to an empty string. To be perceivable to assistive technology, the button's <code class="prop">accessibilityProperties.name</code> property is set.</p>
+         
+         <pre xml:space="preserve">import fl.controls.Button;
+import fl.accessibility.ButtonAccImpl;
+import flash.accessibility.*;
+import flash.system.Capabilities;
+ButtonAccImpl.enableAccessibility();
+
+var soundIsMuted = false;
+var myButton:Button = new Button();
+myButton.setStyle("icon", unmuted);
+myButton.label = "";
+myButton.x = myButton.y = 10;
+myButton.width = myButton.height = 50;
+updateAccName(myButton, "mute sound");
+myButton.setStyle("icon", unmuted);
+myButton.addEventListener(MouseEvent.CLICK, handleBtnClick);
+addChild(myButton);
+
+function handleBtnClick(e) {
+  soundIsMuted = !soundIsMuted;
+  myButton.setStyle("icon", soundIsMuted ? muted : unmuted);
+  updateAccName(myButton, soundIsMuted ? "unmute sound" : "mute sound");
+}
+
+function updateAccName(obj, newName:String) {
+  if (!obj.accessibilityProperties)
+    obj.accessibilityProperties = new AccessibilityProperties();
+  obj.accessibilityProperties.name = newName;
+  if (Capabilities.hasAccessibility)
+    Accessibility.updateProperties();
+}</pre>
+      </section>
+   </section><section id="tests"><h2>Tests</h2>
+      <section class="procedure"><h3>Procedure</h3>
+         <p>For each button in the Flash movie that uses this technique: </p>
+         <ol>
+            <li> Check that the button's label text correctly describes
+    					the button's purpose </li>
+            <li> If a button does not have a text label, confirm that descriptive
+    					text has been added as the button's accessible name. </li>
+            <li> If a button contains both label text and an accessible
+    							name, confirm that the combination of the two makes sense
+    							as a description for the button's purpose. </li>
+         </ol>
+      </section>
+      <section class="results"><h3>Expected Results</h3>
+         <ul>
+            <li> Checks #1, #2, and #3 are true. </li>
+         </ul>
+      </section>
+   </section><section id="related"><h2>Related Techniques</h2><ul>
+      <li><a href="../general/G91">G91</a></li>
+      <li><a href="../flash/FLASH5">FLASH5</a></li>
+      <li><a href="../flash/FLASH4">FLASH4</a></li>
+      
+      <li><a href="../flash/FLASH30">FLASH30</a></li>
+      
+   </ul></section></body></html>
\ No newline at end of file
diff --git a/techniques/flash/FLASH28.html b/techniques/flash/FLASH28.html
new file mode 100644
index 0000000000..e290e1a540
--- /dev/null
+++ b/techniques/flash/FLASH28.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing text alternatives for ASCII art, emoticons, and leetspeak in Flash</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Providing text alternatives for ASCII art, emoticons, and leetspeak in Flash</h1><section class="meta"><p class="id">ID: FLASH28</p><p class="technology">Technology: flash</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+      <ul id="flash.applicability.general">
+         <li>Adobe Flash Professional version MX and higher </li>
+         <li>Adobe Flex</li>
+      </ul>
+   </section><section id="description"><h2>Description</h2>
+      <p>ASCII characters, emoticons, and leetspeek are sometimes used
+    			and present accessibility challenges since the meaning is conveyed
+    			through the visual appearance of groupings of individual characters. </p>
+      <p>In Flash, such groupings of characters can be made accessible
+    				by wrapping them in a MovieClip, and providing an accessible
+    				name. It is crucial that  the <code class="prop">forceSimple</code> property for the
+    				MovieClip is set to true also. This will hide the actual ASCII
+    				characters from assistive technology. </p>
+   </section><section id="examples"><h2>Examples</h2>
+      <section class="example">
+         <h3>Providing a text alternative for ASCII art in the Accessibility control panel</h3>
+         
+            <p>This example contains words written in ASCII art using leetspeek
+    						(the text says "WCAG 2 rulez"). To make this text
+    						accessible, the following steps are followed: </p>
+            <ol>
+               <li> Place the ASCII characters in a MovieClip instance </li>
+               <li>
+                  <p> Select the MovieClip instance containing the text, and
+    							make the following changes in the Accessibility panel:</p>
+                  <ul>
+                     <li> Add a meaningful text alternative for the ASCII art,
+	    							without leetspeak (such as "WCAG 2 RULEZ"). </li>
+                     <li> Uncheck the "Make child objects accessible" checkbox,
+    								so that the ASCII characters will not be read by screen
+    								readers </li>
+                  </ul>
+               </li>
+            </ol>
+            <p>These steps are ilustrated in the screenshot below: </p>
+            <figure id="figure-flash-ascii-alt">
+					<img src="img/ascii_art_alternative.png"/>			       
+                  
+                  <figcaption>Adding text alternative for ASCII art using the Accessibility panel</figcaption>
+               
+							     </figure>
+         
+      </section>
+      <section class="example">
+         <h3>Providing a text alternative for ASCII art using ActionScript</h3>
+         
+            <p>This example is the same as example 1, except using ActionScript
+    						instead of the Accessibility control panel in the Flash Professional
+    						authoring tool. </p>
+            <ol>
+               <li> Place the ASCII characters in a MovieClip instance </li>
+               <li> Provide an instance name for the MovieClip instance (e.g. myASCII) </li>
+               <li> Set the accessible name for the MovieClip and set the
+    							<code class="prop">forceSimple</code> property to true to hide the text inside the
+    							MovieClip. </li>
+            </ol>
+         
+         <pre xml:space="preserve">// 'myASCII' is a MovieClip instance placed on the movie's main timeline
+myASCII.accessibilityProperties = new AccessibilityProperties();
+myASCII.accessibilityProperties.name = "WCAG 2 Rulez";
+myASCII.accessibilityProperties.forceSimple = true;
+</pre>
+         
+      	<p class="working-example">This technique is demonstrated in the <a href="../../working-examples/flash-ascii-art-alternatives/">working version of Providing a text alternative for ASCII art using ActionScript</a>. The <a href="../../working-examples/flash-ascii-art-alternatives/ascii_art_alternatives_as3.html">source of Providing a text alternative for ASCII art using ActionScript</a> is available.</p>
+         
+      </section>
+   </section><section id="tests"><h2>Tests</h2>
+      <section class="procedure"><h3>Procedure</h3>
+         <ol>
+            <li> Publish the SWF file </li>
+            <li> Use a tool which is capable of showing an object's name
+    					to open the Flash movie. </li>
+            <li> Locate the ASCII grouping, leet speak, or emoticon and
+    						verify in the tool that the accessibility name represents
+    						the same information. </li>
+            <li> Authors may also test with a screen reader, by reading
+    							the Flash content and listening to hear that the equivalent
+    							text is read when tabbing to the non-text object (if it is
+    							tabbable) or hearing the alternative text read when reading
+    							the content line-by-line. </li>
+         </ol>
+      </section>
+      <section class="results"><h3>Expected Results</h3>
+         <ul>
+            <li> #3 or #4 above is true </li>
+         </ul>
+      </section>
+   </section></body></html>
diff --git a/techniques/flash/FLASH29.html b/techniques/flash/FLASH29.html
new file mode 100644
index 0000000000..aaa8841ae4
--- /dev/null
+++ b/techniques/flash/FLASH29.html
@@ -0,0 +1,122 @@
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Setting the label property for form components</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Setting the label property for form components</h1><section class="meta"><p class="id">ID: FLASH29</p><p class="technology">Technology: flash</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+      <ul id="flash.applicability.general">
+         <li>Adobe Flash Professional version MX and higher </li>
+         <li>Adobe Flex</li>
+      </ul>
+   </section><section id="description"><h2>Description</h2>
+      <p>The objective of this technique is to explicitly associate a form
+    				component with its label text by setting the component's <code class="prop">label</code> property.
+    				Setting this property will visually place a label next to the component,
+    				and exposes the label text to assistive technology. </p>
+      <p>Components that support the <code class="prop">label</code> property are: </p>
+      <ul>
+         <li>
+								       <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/fl/controls/Button.html">Button</a>
+							     </li>
+         <li>
+								       <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/fl/controls/CheckBox.html">CheckBox</a>
+							     </li>
+         <li>
+								       <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/fl/controls/RadioButton.html">RadioButton</a>
+							     </li>
+      </ul>
+      <p>For other components, the label text has to placed adjacent to the
+    				form component manually. For these components, the label text can be
+    				associated with the form component using one of these approaches: </p>
+      <ul>
+         <li>
+								       <a href="#FLASH25"></a>
+							     </li>
+         <li>
+								       <a href="#FLASH32"></a>
+							     </li>
+      </ul>
+   </section><section id="examples"><h2>Examples</h2>
+      <p>In order for these form controls to be accessible to assistive
+    				technology, the following lines of code will have to be added once
+    				to the movie's script: </p>
+      <p> When the Button component is used: </p>
+      <p>
+						   import fl.accessibility.ButtonAccImpl;
+ButtonAccImpl.enableAccessibility();
+					</p>
+      <p> When the RadioButton component is used: </p>
+      <p>
+						   import fl.accessibility.RadioButtonAccImpl;
+RadioButtonAccImpl.enableAccessibility();
+					</p>
+      <p> When the CheckBox component is used: </p>
+      <p>
+						   import fl.accessibility.CheckBoxAccImpl;
+CheckBoxAccImpl.enableAccessibility();
+					</p>
+      <section class="example">
+         <h3>Setting the label using the Component Inspector panel</h3>
+         
+            <ol>
+               <li> Add the Button, CheckBox or RadioButton component to the movie
+    						by dragging it on the stage from the 'Components' panel. </li>
+               <li> With the component selected, open the 'Component Inspector' panel
+    						by selecting it in the 'Window' menu or using the Shift + F7 shortcut. </li>
+               <li> In the Component Inspector, under the 'Parameters' tab, enter
+    						the label text for the 'label' parameter. </li>
+            </ol>
+            <p>The screenshot below illustrates this technique.</p>
+            <figure id="figure-flash-component-inspector">
+					<img src="img/component_inspector_label.png"/>			       
+								       
+                  <figcaption>Setting a component's label in the Component Inspector Panel</figcaption>
+                  
+							     </figure>
+               
+      </section>
+      <section class="example">
+         <h3>Setting the label on a Button, CheckBox and RadioButton component using ActionScript 3.0</h3>
+         <pre xml:space="preserve">import fl.accessibility.ButtonAccImpl
+import fl.accessibility.CheckBoxAccImpl
+import fl.accessibility.RadioButtonAccImpl
+import fl.controls.Button;
+import fl.controls.CheckBox;
+import fl.controls.RadioButton;
+
+ButtonAccImpl.enableAccessibility();
+var myButton: Button = new Button();
+myButton.label = "Submit Details";
+myButton.x = 10;
+myButton.y = 10
+addChild(myButton);
+
+CheckBoxAccImpl.enableAccessibility();
+var myCheckBox: CheckBox = new CheckBox();
+myCheckBox.label = "notify me";
+myCheckBox.x = 10;
+myCheckBox.y = 40
+addChild(myCheckBox);
+
+RadioButtonAccImpl.enableAccessibility();
+var myRadioButton: RadioButton = new RadioButton();
+myRadioButton.label = "Male";
+myRadioButton.x = 10;
+myRadioButton.y = 60;
+addChild(myRadioButton);</pre>
+         
+      	<p class="working-example">This technique is demonstrated in the <a href="../../working-examples/flash-setting-label-property/">working example of Setting the label on a Button, CheckBox and RadioButton component using ActionScript 3.0</a>. The <a href="../../working-examples/flash-setting-label-property/setting_label_property_as3.fla">source of Setting the label on a Button, CheckBox and RadioButton component using ActionScript 3.0</a> is available.</p>
+         
+      </section>
+   </section><section id="tests"><h2>Tests</h2>
+      <section class="procedure"><h3>Procedure</h3>
+         <p>When the Button, CheckBox or RadioButton components are used: </p>
+         <ol>
+            <li> confirm that labels describing the purpose of the button have
+    					been provided through the component's <code class="prop">label</code> property. </li>
+         </ol>
+      </section>
+      <section class="results"><h3>Expected Results</h3>
+         <ol>
+            <li> #1 is true </li>
+         </ol>
+      </section>
+   </section><section id="related"><h2>Related Techniques</h2><ul>
+      <li><a href="../flash/FLASH25">FLASH25</a></li>
+      <li><a href="../flash/FLASH32">FLASH32</a></li>
+   </ul></section></body></html>
diff --git a/techniques/flash/FLASH3.html b/techniques/flash/FLASH3.html
new file mode 100644
index 0000000000..4d29cfff38
--- /dev/null
+++ b/techniques/flash/FLASH3.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Marking objects in Flash so that they can be ignored by AT</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Marking objects in Flash so that they can be ignored by AT</h1><section class="meta"><p class="id">ID: FLASH3</p><p class="technology">Technology: flash</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+      <ul id="flash.applicability.general">
+         <li>Adobe Flash Professional version MX and higher </li>
+         <li>Adobe Flex</li>
+      </ul>
+   </section><section id="description"><h2>Description</h2>
+      <p>The purpose of this technique is to show how images can be marked so that they can be ignored by Assistive Technology. </p>
+      <p>The Flash Player supports the ability for authors to control  which graphics appear to assistive technologies using the <code class="prop">silent</code>  property of the accessibility object, as indicated in the examples  below. </p>
+   </section><section id="examples"><h2>Examples</h2>
+      <section class="example">
+         <h3>Hiding a graphic in the Flash Professional authoring tool</h3>
+         
+            <p>The Flash Professional authoring tool's Accessibility panel lets  authors provide accessibility information to assistive technology and  set accessibility options for individual Flash objects or entire Flash  applications. </p>
+            <ol>
+               <li> To apply changes to accessibility properties for a graphic, it must be saved as a symbol in the movie's library. <em>Note:</em> Flash does not support text alternatives for graphic symbols. Instead,  the graphic must be converted to or stored in a movie clip or button  symbol. </li>
+               <li> Bring up the Accessibility panel by selecting "Window &gt;  Other Panels &gt; Accessibility" in the application menu, or through  the shortcut ALT + F11. </li>
+               <li> Select the graphic object </li>
+               <li> If the 'Make object accessible' checkbox in the Accessibility  control panel is checked, uncheck this option to remove the graphic  from the accessiblity information conveyed to assistive technologies. </li>
+            </ol>
+         
+      </section>
+      <section class="example">
+         <h3>Applying textual alternatives programmatically in ActionScript 2.0</h3>
+         
+            <p>To manage an object's text equivalents programmatically using  ActionScript, the <code class="prop">_accProps</code> property must be used. This references an  object containing accessibility related properties set for the object.  The code example below shows a simple example of how the <code class="prop">_accProps</code>  property is used to remove an object from the accessibility information  for the movie using ActionScript. </p>
+         
+         <pre xml:space="preserve">// 'decorative_mc' is an instance placed on the movie's main timeline
+_root.decorative_mc._accProps = new Object();
+_root.decorative_mc._accProps.silent = true; </pre>
+      </section>
+   </section><section id="tests"><h2>Tests</h2>
+      <section class="procedure"><h3>Procedure</h3>
+         <ol>
+            <li> Publish the SWF file </li>
+            <li> Open the SWF file in Internet Explorer 6 or higher (using  Flash Player 6 or higher), or Firefox 3 or higher (using Flash Player 9  or higher) </li>
+            <li> Use a tool which is capable of showing an object's accessibility information, such as ACTF aDesigner 1.0 to open the Flash movie. </li>
+            <li> In the GUI summary panel, loop over each object which is  contained by the Flash movie and ensure the object that was designed to  be hidden does not appear in the tool's display. </li>
+            <li> Authors may also test with a screen reader, by reading the  Flash content and listening to hear that object is not mentioned when  the page is read. </li>
+            <li> Non-text objects that are coded to be hidden from assistive technologies are not available to assistive technology. </li>
+         </ol>
+      </section>
+      <section class="results"><h3>Expected Results</h3>
+         <p>Check #6 is true. </p>
+      </section>
+   </section><section id="related"><h2>Related Techniques</h2><ul>
+      <li><a href="../general/G94">G94</a></li>
+   </ul></section><section id="resources"><h2>Resources</h2>
+      
+         <ul>
+            <li>
+									         <a href="http://help.adobe.com/en_US/AS2LCR/Flash_10.0/help.html?content=00000619.html">Flash 10 Documention _accProps property</a>
+								       </li>
+            <li>
+									         <a href="http://www.eclipse.org/actf/downloads/tools/aDesigner/">aDesigner</a>
+								       </li>
+         </ul>
+      
+   </section></body></html>
\ No newline at end of file
diff --git a/techniques/flash/FLASH30.html b/techniques/flash/FLASH30.html
new file mode 100644
index 0000000000..99173fbdcb
--- /dev/null
+++ b/techniques/flash/FLASH30.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Specifying accessible names for image buttons</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Specifying accessible names for image buttons</h1><section class="meta"><p class="id">ID: FLASH30</p><p class="technology">Technology: flash</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+      <ul id="flash.applicability.general">
+         <li>Adobe Flash Professional version MX and higher </li>
+         <li>Adobe Flex</li>
+      </ul>
+   </section><section id="description"><h2>Description</h2>
+      <p>For image based Button components the accessible name needs to be
+    				set to provide a functional label. This label indicates the button's
+    				function, but does not attempt to describe the image. The label is
+    				especially important if there are multiple buttons on the page that
+    				each lead to different results. </p>
+      <p>The accessible name for a button may need to be updated if the button
+    				changes during the use of the Flash movie. </p>
+   </section><section id="examples"><h2>Examples</h2>
+      <section class="example">
+         <h3>Accessible name for a simple image button</h3>
+         
+            <p>In this example, an icon based button is given an accessible name
+    					through scripting. When the button is clicked a web page is opened. </p>
+         
+         <pre xml:space="preserve">//provide text equivalent for image button
+this.check_btn.accessibilityProperties = new AccessibilityProperties();
+this.check_btn.accessibilityProperties.name = "Check page validation";
+
+//set up event listener and function to navigate to URL
+
+this.check_btn.addEventListener(MouseEvent.CLICK, onClickHandler);
+
+function onClickHandler(e: MouseEvent): void {
+  var btn = e.target;
+  var url: String = "http://validator.w3.org";
+  var request: URLRequest = new URLRequest(url);
+  navigateToURL(request, '_blank');
+}</pre>
+         
+      	<p class="working-example">The result is demonstrated in the <a href="../../working-examples/flash-text-description-for-simpleimage-buttons/">working version of Accessible name for a simple image button</a>. The <a href="../../working-examples/flash-text-description-for-simpleimage-buttons/text_description_for_simpleimage_buttons_as3.fla">source of Accessible name for a simple image button</a> is available.</p>
+         
+      </section>
+      <section class="example">
+         <h3>Accessible name for a dynamic image button</h3>
+         
+         <pre xml:space="preserve">import fl.controls.Button;
+import fl.accessibility.ButtonAccImpl;
+
+ButtonAccImpl.enableAccessibility();
+
+var soundIsMuted = false;
+var myButton: Button = new Button();
+myButton.label = "";
+myButton.x = myButton.y = 10;
+myButton.width = myButton.height = 50;
+updateAccName(myButton, "mute sound");
+myButton.setStyle("icon", unmuted);
+myButton.addEventListener(MouseEvent.CLICK, handleBtnClick);
+addChild(myButton);
+
+function handleBtnClick(e) {
+  soundIsMuted = ! soundIsMuted;
+  myButton.setStyle("icon", soundIsMuted? muted: unmuted);
+  updateAccName(myButton, soundIsMuted? "unmute sound": "mute sound");
+}
+
+function updateAccName(obj, newName: String) {
+  if (! obj.accessibilityProperties)
+  obj.accessibilityProperties = new AccessibilityProperties();
+  obj.accessibilityProperties.name = newName;
+  if (Capabilities.hasAccessibility)
+  Accessibility.updateProperties();
+}</pre>
+         
+      	<p class="working-example">The result is demonstrated in the <a href="../../working-examples/flash-text-description-for-image-buttons/">working version of Accessible name for a dynamic image button</a>. The <a href="../../working-examples/flash-text-description-for-image-buttons/text_description_for_image_buttons_as3.fla">source of Accessible name for a dynamic image button</a> is available.</p>
+         
+      </section>
+   </section><section id="tests"><h2>Tests</h2>
+      <section class="procedure"><h3>Procedure</h3>
+         <p>When a Flash Movie contains image based buttons, confirm that: </p>
+         <ol>
+            <li> An accessible name is provided for the button that describes the
+    					button's action </li>
+            <li> If the button's action changes (for example when it is clicked)
+    					the accessible name changes correspondingly </li>
+         </ol>
+      </section>
+      <section class="results"><h3>Expected Results</h3>
+         <ul>
+            <li> #1 and #2 are true </li>
+         </ul>
+      </section>
+   </section><section id="related"><h2>Related Techniques</h2><ul>
+      <li><a href="../flash/FLASH1">FLASH1</a></li>
+   </ul></section></body></html>
\ No newline at end of file
diff --git a/techniques/flash/FLASH31.html b/techniques/flash/FLASH31.html
new file mode 100644
index 0000000000..8de5e70d97
--- /dev/null
+++ b/techniques/flash/FLASH31.html
@@ -0,0 +1,136 @@
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Specifying caption text for a DataGrid</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Specifying caption text for a DataGrid</h1><section class="meta"><p class="id">ID: FLASH31</p><p class="technology">Technology: flash</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+      <ul id="flash.applicability.general">
+         <li>Adobe Flash Professional version MX and higher </li>
+         <li>Adobe Flex</li>
+      </ul>
+   </section><section id="description"><h2>Description</h2>
+      <p>The objective of this technique is to programmatically associate captions
+    				for DataGrids where captions are provided in the presentation. Normally,
+    				the caption for a table is a table identifier and acts like a title
+    				or heading for the table. </p>
+      <p>Flash does not have a caption element for the DataGrid component,
+    				but the same effect can be achieved through the following approach: </p>
+      <ol>
+         <li> Place a label component or textfield above the DataGrid, containing
+    				the grid's caption text. </li>
+         <li> Duplicate the caption text and add it as the grid's accessible
+    					name. This can either be achieved by setting a value to the grid's   "name" field
+    					in the Accessibility panel or by setting the grid's <code class="prop">AccessibilityProperties.name</code>
+    					property. </li>
+      </ol>
+   </section><section id="examples"><h2>Examples</h2>
+      <section class="example">
+         <h3>Associating a label with a DataGrid</h3>
+         
+            <p>This is an example of a DataGrid being added to the stage in Flash
+    						Professional from the Components panel. A label element is also added
+    						from the Components panel to contain the caption text and the caption
+    						text is used in the Accessibility control panel in Flash to serve as
+    						the accessibility name for the DataGrid. </p>
+            <ul>
+               <li> Create a new Flash file (.fla) or open an existing one to put
+    						a DataGrid into. </li>
+               <li> Open the Flash components panel from the Window menu </li>
+               <li> Drag a DataGrid component onto the stage and position as desired. </li>
+               <li> Drag a label component onto the stage and position as desired. </li>
+               <li> Add text to the label component. </li>
+               <li> Select the DataGrid component and add the same text as is used
+    							in the label component to the name field for DataGrid, using the
+    							Accessibility control panel. </li>
+            </ul>
+         
+      </section>
+      <section class="example">
+         <h3>Associating a caption with a DataGrid using ActiveScript 3</h3>
+         
+            <p>This is a basic AS3 example of a DataGrid generated through scripting.
+    						Additionally a label element is created, containing the caption text,
+    						and the caption text is added to the grid as an accessible name. </p>
+         
+         <pre xml:space="preserve">import fl.accessibility.DataGridAccImpl;
+import fl.controls.DataGrid;
+import fl.controls.Label;
+import fl.data.DataProvider;
+import flash.accessibility.Accessibility;
+import flash.accessibility.AccessibilityProperties;
+import flash.system.Capabilities;
+
+// enable accessibility for the DataGrid
+DataGridAccImpl.enableAccessibility();
+
+createGrid();
+
+// set the data grid caption text
+var gridCaptionText: String = "Game Results";
+gridCaption.text = gridCaptionText;
+//add the caption text as the DataGrid's accessible name
+var accProps: AccessibilityProperties = new AccessibilityProperties();
+accProps.name = gridCaptionText;
+aDg.accessibilityProperties = accProps;
+if (Capabilities.hasAccessibility)
+Accessibility.updateProperties();
+
+function createGrid() {
+  
+  //create and add the components
+  var aDg: DataGrid = new DataGrid();
+  var gridCaption: Label = new Label();
+  addChild(aDg);
+  addChild(gridCaption);
+  aDg.move(50, 50);
+  gridCaption.move(50, 20);
+  
+  var captionFormat: TextFormat = new TextFormat();
+  captionFormat.size = 24;
+  gridCaption.setStyle("textFormat", captionFormat);
+  gridCaption.width = 300;
+  gridCaption.height = 100;
+  bldRosterGrid(aDg);
+  //prepare the data
+  var aRoster: Array = new Array();
+  aRoster =[ 
+    {Name: "Wilma Carter", Bats: "R", Throws: "R", Year: "So", Home: "Redlands, CA"},
+    {Name: "Sylvia Munson", Bats: "R", Throws: "R", Year: "Jr", Home: "Pasadena, CA"}, 
+    {Name: "Carla Gomez", Bats: "R", Throws: "L", Year: "Sr", Home: "Corona, CA"}, 
+    {Name: "Betty Kay", Bats: "R", Throws: "R", Year: "Fr", Home: "Palo Alto, CA"},
+  ];
+  aDg.dataProvider = new DataProvider(aRoster);
+  aDg.rowCount = aDg.length;
+};
+
+function bldRosterGrid(dg: DataGrid) {
+  dg.setSize(400, 300);
+  dg.columns =[ "Name", "Bats", "Throws", "Year", "Home"];
+  dg.columns[0].width = 120;
+  dg.columns[1].width = 50;
+  dg.columns[2].width = 50;
+  dg.columns[3].width = 40;
+  dg.columns[4].width = 120;
+};</pre>
+         
+            <p>Notes on this code sample:</p>
+            <ul>
+            	<li> For a demonstration, see the <a href="../../working-examples/flash-datagrid-with-caption/">working version of Associating a caption with a DataGrid using ActiveScript 3</a>. The <a href="../../working-examples/flash-datagrid-with-caption/datagrid_with_caption_as3.fla">source of Associating a caption with a DataGrid using ActiveScript 3</a> is available.</li>
+               <li> The accessible name can also be applied to the DataGrid using
+    						the Accessibility panel in the Flash authoring tool. </li>
+               <li> In the above example, the text used for the DataGrid caption will
+    								be read twice, once as the text label that is offered for sighted
+    								users, and again as the accessible name for the DataGrid. Authors
+    								can avoid duplicate voicing by setting the <code class="prop">silent</code> property for the
+    								label text to <code class="propval">true</code>. </li>
+            </ul>
+         
+      </section>
+   </section><section id="tests"><h2>Tests</h2>
+      <section class="procedure"><h3>Procedure</h3>
+         <ol>
+            <li> Check whether the Flash movie contains a DataGrid component. </li>
+            <li> Confirm that each DataGrid's caption text has been added to the component as an accessible name. </li>
+         </ol>
+      </section>
+      <section class="results"><h3>Expected Results</h3>
+         <p>Step 2 is true. </p>
+      </section>
+   </section><section id="related"><h2>Related Techniques</h2><ul>
+      <li><a href="../html/H39">H39</a></li>
+   </ul></section></body></html>
\ No newline at end of file
diff --git a/techniques/flash/FLASH32.html b/techniques/flash/FLASH32.html
new file mode 100644
index 0000000000..a4503ab68e
--- /dev/null
+++ b/techniques/flash/FLASH32.html
@@ -0,0 +1,86 @@
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using auto labeling to associate text labels with form controls</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Using auto labeling to associate text labels with form controls</h1><section class="meta"><p class="id">ID: FLASH32</p><p class="technology">Technology: flash</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+      <ul id="flash.applicability.general">
+         <li>Adobe Flash Professional version MX and higher </li>
+         <li>Adobe Flex</li>
+      </ul>
+   </section><section id="description"><h2>Description</h2>
+      <p>Except for the <code class="obj">CheckBox</code> and <code class="obj">RadioButton</code> component, the built in Flash
+    				components are not automatically provided an associated label. For
+    				these components, label text has to be placed adjacent to their control
+    				manually, using the <code class="obj">Label</code> component. If the 'auto-label' feature is
+    				enabled in the Accessibility panel, then the Flash Player will automatically
+    				associate the label text for the <code class="obj">TextInput</code> and <code class="obj">TextArea</code> components.
+    				This means that for these components, it is not necessary to duplicate
+    				the label text for the control using the Accessibility panel. The auto
+    				label feature is enabled by default. </p>
+      <p>Additionally, the auto label feature will enable the Flash Player
+    				to automatically add text contained by Button symbols as the symbol's
+    				accessible name. This will only work if the Button symbol only consists
+    				of one layer, containing the text label. </p>
+      <div class="note">
+         <p>Since auto-labeling associates labels without human intervention
+    				the accuracy of the association should be verified. For more predictable
+    				results authors are encouraged to explicitly add labels to all controls. </p>
+      </div>
+      <p>To auto labeling, perform the following steps: </p>
+      <ol>
+         <li> Ensure that the textual descriptions for each form control within
+    				the flash application are placed adjacent to the control itself. Text
+    				eligible to be used for auto-labeling must not be set to be hidden
+    				from assistive technology. </li>
+         <li> Select the movie stage, and open the Accessibility panel. </li>
+         <li> Ensure that the 'Auto Label' option is checked. This will automatically
+    					associate labels with their TextInput and TextArea controls, and
+    					add text inside custom button symbols as their accessible name. </li>
+         <li> If the auto label behavior is inappropriate to your Flash content,
+    						uncheck the 'Auto label' option, and ensure that each control receives
+    						a meaningful 'name' value in the Accessibility panel. </li>
+         <li> To disable auto labeling for a particular object but not the whole
+    							movie, convert the text to the 'dynamic text' type using the 'Property
+    							inspector'. Then select it, and uncheck its 'Make object accessible'
+    							option in the Accessibility panel. </li>
+      </ol>
+      <div class="note">
+         <p>As an alternative to using the Accessibility panel, the auto
+    				label feature can also be turned off by setting the <code class="prop">AccessibilityProperties.noAutoLabel</code>
+    				to <code class="propval">true</code> for the stage object. </p>
+      </div>
+   </section><section id="examples"><h2>Examples</h2>
+      <section class="example">
+         <h3>Using the "Auto Label" option in the Accessibility panel</h3>
+         
+            <p>This example shows two TextInput components, a TextArea component
+    						and a custom button symbol instance. For the TextInput components,
+    						a separate label element has been placed to the left of the control.
+    						For the TextArea component, the label has been placed above the control.
+    						For the custom button, the label text is placed inside the button symbol.
+    						Because the "Auto Label" option is enabled in the Accessibility
+    						panel, all these controls will be provided an accessible name based
+    						on their label. </p>
+            <p>The screenshot below illustrates the example:</p>
+      	<figure id="figure-flash-auto-label">
+      		<img src="img/using_auto_label.png"/>
+      		<figcaption>Using the Auto Label feature in the Flash Authoring Environment</figcaption>
+      	</figure>
+      	<p class="working-example">The results of this technique can be viewed in the <a href="../../working-examples/flash-using-auto-labeling-to-associate-label-text-with-controls/">working version of Using the "Auto Label" option in the Accessibility panel</a>. The <a href="../../working-examples/flash-using-auto-labeling-to-associate-label-text-with-controls/using_auto_labeling_to_associate_label_text_with_controls_as3.fla">source of Using the "Auto Label" option in the Accessibility panel</a> is available.</p>
+         
+      </section>
+   </section><section id="tests"><h2>Tests</h2>
+      <section class="procedure"><h3>Procedure</h3>
+         <p>If a Flash form contains TextInput or TextArea components, or custom
+    					button symbols with text labels, confirm that: </p>
+         <ol>
+            <li> The Auto Label option is enabled in the movie's Accessibility
+    					panel </li>
+            <li> Use a screen reader or MSAA checker to ensure that the label text
+    					is indeed exposed as the control's accessible name </li>
+         </ol>
+      </section>
+      <section class="results"><h3>Expected Results</h3>
+         <ul>
+            <li> #1 and #2 are true </li>
+         </ul>
+      </section>
+   </section><section id="related"><h2>Related Techniques</h2><ul>
+      <li><a href="../flash/FLASH25">FLASH25</a></li>
+   </ul></section></body></html>
diff --git a/techniques/flash/FLASH33.html b/techniques/flash/FLASH33.html
new file mode 100644
index 0000000000..a719779174
--- /dev/null
+++ b/techniques/flash/FLASH33.html
@@ -0,0 +1,84 @@
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using relative values for Flash object dimensions</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Using relative values for Flash object dimensions</h1><section class="meta"><p class="id">ID: FLASH33</p><p class="technology">Technology: flash</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+      <ul id="flash.applicability.general">
+         <li>Adobe Flash Professional version MX and higher </li>
+         <li>Adobe Flex</li>
+      </ul>
+   </section><section id="description"><h2>Description</h2>
+      <p>The objective of this technique is to specify the width and/or height
+    				of an embedded Flash object using relative units such as <code class="unit">em</code> values.
+    				The size of the Flash object is allowed to expand to fill the size
+    				of its container (a parent element) by setting the movie width and
+    				height to 100%. The container's width and height is set with relative
+    				units. This will allow user agents that support text resizing to resize
+    				the Flash object in line with changes in text size settings. When the
+    				Flash object's dimensions are adjusted its contents will be scaled,
+    				making it easier to read for low vision users. </p>
+      <div class="note">
+         <p>This technique is not necessary to support users who use zoom
+    				functionality in their browsers. </p>
+      </div>
+   </section><section id="examples"><h2>Examples</h2>
+      <section class="example">
+         <h3>Scaling text while keeping a minimum size</h3>
+         
+            <p>In this example, a Flash object is loaded into an HTML document using <a href="https://github.com/swfobject/swfobject">SWFObject's
+    						dynamic publishing method</a>. The Flash object's container element
+    						is given a class name of "flashPlaceHolder". This class
+    						name is then targeted using CSS to set its width and height using
+    						relative em values. When the user increases or decreases the browser's
+    						text size, the Flash object will scale accordingly. To ensure that
+    						the object does not become too small when text size is decreased,
+    						the <code class="prop">min-width</code> and <code class="prop">min-height</code> properties are set to the default dimensions. </p>
+         
+         <pre xml:space="preserve">&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
+  "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
+&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
+  &lt;head&gt;
+    &lt;meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/&gt;
+    &lt;title&gt;Flash Resize example&lt;/title&gt;
+    &lt;script src="swfobject/swfobject.js" type="text/javascript"/&gt;
+    &lt;script type="text/javascript"&gt;
+    swfobject.embedSWF("scale_movie_dimensions_on_text_resize_as3.swf", 
+    "flashPlaceHolder", "100%", "100%", "8")      
+&lt;/script&gt;
+
+    &lt;style type="text/css"&gt;
+  #flashPlaceHolder {
+    width: 20em;
+    height: 15em;
+    min-width: 320px;
+    min-height: 240px;
+  }
+&lt;/style&gt;
+  &lt;/head&gt;
+  &lt;body id="header"&gt;
+    &lt;h1&gt;Flash Resize Demonstration&lt;/h1&gt;
+    &lt;p&gt;When the browser's text size is changed, the Flash movie will be
+      resized accordingly.&lt;/p&gt;
+    &lt;p id="flashPlaceHolder"&gt;Flash needs to be installed for this
+      example to work&lt;/p&gt;
+  &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+         
+      	<p class="working-example">The result of this technique can be viewed in the <a href="../../working-examples/flash-scale-movie-dimensions-on-text-resize/">working version of Scaling text while keeping a minimum size</a>. The <a href="../../working-examples/flash-scale-movie-dimensions-on-text-resize/scale_movie_dimensions_on_text_resize_as3.fla">source of Scaling text while keeping a minimum size</a> is available.</p>
+            
+         
+      </section>
+   </section><section id="tests"><h2>Tests</h2>
+      <section class="procedure"><h3>Procedure</h3>
+         <ol>
+            <li> Open a web page containing an embedded flash object </li>
+            <li> View the HTML to confirm that the width and height dimensions
+    					for the object containing the Flash object are specified using relative
+    					units such as em or percent (%). </li>
+         </ol>
+      </section>
+      <section class="results"><h3>Expected Results</h3>
+         <ul>
+            <li> Check #2 is true. </li>
+         </ul>
+      </section>
+   </section><section id="related"><h2>Related Techniques</h2><ul>
+      <li><a href="../css/C24">C24</a></li>
+   </ul></section></body></html>
\ No newline at end of file
diff --git a/techniques/flash/FLASH34.html b/techniques/flash/FLASH34.html
new file mode 100644
index 0000000000..147a5b57f4
--- /dev/null
+++ b/techniques/flash/FLASH34.html
@@ -0,0 +1,125 @@
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Turning off sounds that play automatically when an assistive technology is detected</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Turning off sounds that play automatically when an assistive technology is detected</h1><section class="meta"><p class="id">ID: FLASH34</p><p class="technology">Technology: flash</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+      <ul id="flash.applicability.general">
+         <li>Adobe Flash Professional version MX and higher </li>
+         <li>Adobe Flex</li>
+      </ul>
+   </section><section id="description"><h2>Description</h2>
+      <p>The intent of this technique is to prevent sounds from playing when
+    				the Flash movie loads. This is useful for those who utilize assistive
+    				technologies (such as screen readers, screen magnifiers, switch mechanisms,
+    				etc.) and those who may not (such as those with cognitive, learning
+    				and language disabilities). By default, the sound will be played automatically.
+    				When a screen reader such as JAWS is detected however, the sound will
+    				have to be started manually. </p>
+      <p>To perform screen reader detection, Flash provides the <code class="prop">flash.accessibility.Accessibility.active</code>
+    				property. If this property is set to <code class="propval">true</code>, it means that the Flash
+    				player has detected running assistive technology. Based on this flag,
+    				the Flash developer can choose to run different functionality. </p>
+      <div class="note">
+         <p>The Flash Player requires some time to detect active assistive
+    				technology and set the <code class="prop">Accessibility.active</code> property. To get accurate
+    				results, do not check for this property immediately on the first frame
+    				of the movie. Instead, perform the check 5 frames in or based on a
+    				timed event. </p>
+         <p>Not every screen reader will be detected using this mechanism.
+    				In general, the property will be set to true when any  MSAA client
+    				is running. </p>
+         <p>Other assistive technology tools, including screen magnifiers,
+    				or tools not used as assistive technologies may also utilize MSAA in
+    				ways that result in <code class="prop">Accessibility.active</code> being set to <code class="propval">true</code>. </p>
+      </div>
+   </section><section id="examples"><h2>Examples</h2>
+      <section class="example">
+         <h3>A SoundHandler class</h3>
+         
+            <p>A class called SoundHandler is created which automatically starts
+    						playing an MP3 file only when <code class="prop">Accessibility.active</code> is set to <code class="propval">false</code>.
+    						Note that this example also checks the <code class="prop">flash.system.Capabilities.hasAccessibility</code>
+    						property. This property does not check whether a screen reader is running,
+    						but instead indicates whether the Flash Player is running in an environment
+    						that supports MSAA (which basically means the Windows operating system). </p>
+         
+         <pre xml:space="preserve">package wcagSamples {
+  import flash.accessibility.Accessibility;
+  import flash.display.Sprite;
+  import flash.net.URLRequest;
+  import flash.media.Sound;
+  import flash.media.SoundChannel;
+  import flash.system.Capabilities;
+  import fl.controls.Button;
+  import fl.accessibility.ButtonAccImpl;
+  import fl.controls.Label;
+  import flash.events.MouseEvent;
+  
+  public class SoundHandler extends Sprite {
+    private var snd: Sound = new Sound();
+    private var button: Button = new Button();
+    private var req: URLRequest = new URLRequest(
+      "http://av.adobe.com/podcast/csbu_dev_podcast_epi_2.mp3");
+    private var channel: SoundChannel = new SoundChannel();
+    private var statusLbl: Label = new Label();
+    public function SoundHandler() {
+      snd.load(req);
+      ButtonAccImpl.enableAccessibility();
+      button.x = 10;
+      button.y = 10;
+      statusLbl.autoSize = "left";
+      statusLbl.x = 10;
+      statusLbl.y = 40;
+      addChild(statusLbl);
+      button.addEventListener(MouseEvent.CLICK, clickHandler);
+      this.addChild(button);
+      if (! Capabilities.hasAccessibility || ! Accessibility.active) {
+        channel = snd.play();
+        button.label = "Stop Sound";
+        statusLbl.text = "No Assistive technology detected. \
+          Sound will play automatically";
+      } else {
+        button.label = "Start Sound";
+        statusLbl.text = "Assistive technology detected. \
+          Sound will not play automatically";
+      }
+    }
+    private function clickHandler(e: MouseEvent): void {
+      if (button.label == "Stop Sound") {
+        button.label = "Start Sound";
+        channel.stop();
+      } else {
+        channel = snd.play();
+        button.label = "Stop Sound";
+      }
+    }
+  }
+}</pre>
+         
+      	<p class="working-example">This technique can be viewed in the <a href="../../working-examples/flash-screen-reader-detection-to-prevent-autoplay/">working version of A SoundHandler class</a>. The <a href="../../working-examples/flash-screen-reader-detection-to-prevent-autoplay/screen_reader_detection_to_prevent_autoplay_as3.fla">source of A SoundHandler class</a> is available.</p>
+         
+      </section>
+   </section><section id="tests"><h2>Tests</h2>
+      <section class="procedure"><h3>Procedure</h3>
+         <ol>
+            <li> Start a screen reader that supports MSAA. </li>
+            <li> Open a page containing a Flash movie that starts playing audio
+    					automatically when a screen reader is not running </li>
+            <li> Confirm that the audio is stopped. </li>
+         </ol>
+      </section>
+      <section class="results"><h3>Expected Results</h3>
+         <ol>
+            <li> #3 is true </li>
+         </ol>
+      </section>
+   </section><section id="related"><h2>Related Techniques</h2><ul>
+      <li><a href="../general/G170">G170</a></li>
+   </ul></section><section id="resources"><h2>Resources</h2>
+      
+         <ul>
+            <li>
+									         <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/accessibility/Accessibility.html#active">ActionScript 3.0 Language and Components Reference: Accessibility.active property</a>
+								       </li>
+            <li>
+									         <a href="https://www.paciellogroup.com/blog/2008/04/developer-beware-using-flash-to-detect-screen-readers/">Developer Beware: Using Flash to Detect Screen Readers</a>
+								       </li>
+         </ul>
+      
+   </section></body></html>
\ No newline at end of file
diff --git a/techniques/flash/FLASH35.html b/techniques/flash/FLASH35.html
new file mode 100644
index 0000000000..5c0facdd01
--- /dev/null
+++ b/techniques/flash/FLASH35.html
@@ -0,0 +1,98 @@
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using script to scroll Flash content, and providing a mechanism to pause it</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Using script to scroll Flash content, and providing a mechanism to pause it</h1><section class="meta"><p class="id">ID: FLASH35</p><p class="technology">Technology: flash</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+      <ul id="flash.applicability.general">
+         <li>Adobe Flash Professional version MX and higher </li>
+         <li>Adobe Flex</li>
+      </ul>
+   </section><section id="description"><h2>Description</h2>
+      <p>The objective of this technique is to provide a way for users to stop
+    				scrolling content when the scrolling is created by a script. Scrolling
+    				content can be difficult or impossible to read by users with low vision
+    				or with cognitive disabilities. The movement can also be distracting
+    				for some people making it difficult for them to concentrate on other
+    				parts of the Web page. </p>
+   </section><section id="examples"><h2>Examples</h2>
+      <section class="example">
+         <h3>A toggle button to pause and resume scrolling</h3>
+         
+            <p>In this example, text scrolls from left to right. A toggle button
+    						is provided that allows the user to pause and resume the scrolling
+    						behavior. Additionally, a checkbox is provided which can be used to
+    						slow down the scrolling speed. </p>
+            <div class="note">
+               <p>Users may prefer a greater variety of scrolling speed options
+    						than are offered in this example. Developers might choose to provide
+    						several speed choices with a slider or drop down list control in order
+    						to accomplish this. </p>
+            </div>
+         
+         <pre xml:space="preserve">import fl.accessibility.ButtonAccImpl;
+import fl.accessibility.CheckBoxAccImpl;
+
+ButtonAccImpl.enableAccessibility();
+CheckBoxAccImpl.enableAccessibility();
+
+var scrollInterval: int;
+var intervalLength: int = 15;
+
+var expandedViewer: MovieClip = exampleScroller.expandedViewer;
+var scrollText: MovieClip = exampleScroller.scrollText;
+var scrollViewer: MovieClip = exampleScroller.scrollViewer;
+
+var scrollingPaused: Boolean = true;
+
+scrollStopper.addEventListener(MouseEvent.CLICK, handleBtnClick, false);
+slowDown_chk.addEventListener(MouseEvent.CLICK, handleChkClick, false);
+
+function handleBtnClick(e) {
+  toggleScroll(false);
+  e.target.label = scrollingPaused? "Resume Scrolling": "Stop Scrolling";
+}
+
+//slow down scrolling speed
+function handleChkClick(e) {
+  intervalLength = e.target.selected? 50: 15;
+  if (! scrollingPaused) {
+    clearTimeout(scrollInterval);
+    toggleScroll(true);
+  }
+}
+
+//pause or resume scrolling
+function toggleScroll(noToggle: Boolean) {
+  if (noToggle || scrollingPaused)
+  scrollInterval = setInterval(moveText, intervalLength); else
+  clearTimeout(scrollInterval);
+  if (! noToggle)
+  scrollingPaused = ! scrollingPaused;
+}
+
+function moveText() {
+  if (scrollText.x + scrollText.width &lt; scrollViewer.x)
+  scrollText.x = scrollViewer.x + scrollViewer.width;
+  scrollText.x -= 1;
+}
+
+//initiate scrolling
+toggleScroll(false);
+</pre>
+         
+      	<p class="working-example">The technique is demonstrated in the <a href="../../working-examples/flash-pause-scrolling/">working version of A toggle button to pause and resume scrolling</a>. The <a href="../../working-examples/flash-pause-scrolling/pause_scrolling_as3.fla">source of A toggle button to pause and resume scrolling</a> is available.</p>
+         
+      </section>
+   </section><section id="tests"><h2>Tests</h2>
+      <section class="procedure"><h3>Procedure</h3>
+         <p>When a Flash Movie contains scrolling content:</p>
+         <ol>
+            <li>Confirm that a button is provided that allows users to pause and resume the scrolling behavior</li>
+            <li>Confirm that pressing the button stops the scrolling</li>
+            <li>Confirm that pressing the button again restarts the scrolling</li>
+         </ol>
+      </section>
+      <section class="results"><h3>Expected Results</h3>
+         <ul>
+            <li>Checks #1, #2, and #3 are true.</li>
+         </ul>
+      </section>
+   </section><section id="related"><h2>Related Techniques</h2><ul>
+      <li><a href="../general/G4">G4</a></li>
+   </ul></section></body></html>
\ No newline at end of file
diff --git a/techniques/flash/FLASH36.html b/techniques/flash/FLASH36.html
new file mode 100644
index 0000000000..d29af992b7
--- /dev/null
+++ b/techniques/flash/FLASH36.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using scripts to control blinking and stop it in five seconds or less</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Using scripts to control blinking and stop it in five seconds or less</h1><section class="meta"><p class="id">ID: FLASH36</p><p class="technology">Technology: flash</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+      <ul id="flash.applicability.general">
+         <li>Adobe Flash Professional version MX and higher </li>
+         <li>Adobe Flex</li>
+      </ul>
+   </section><section id="description"><h2>Description</h2>
+      <p>The objective of this technique is to control blinking with script
+    				so it can be set to stop in less than five seconds by the script. The
+    				ActionScript setTimeout() method is used to stop the MovieClip's blinking
+    				behavior in less than 5 seconds. </p>
+   </section><section id="examples"><h2>Examples</h2>
+      <section class="example">
+         <h3>Stopping blinking after a timeout</h3>
+         
+            <p>In this example a MovieClip (blinkingTextMC) uses its timeline to
+    						generate a blinking effect. Before 5 seconds has passed, the MovieClip's
+    						gotoAndStop() method is called, which stops the blinking effect. </p>
+         
+         <pre xml:space="preserve">setTimeout(stopBlinking, 4500);
+function stopBlinking() {
+  var blinkingTextMC = getChildByName('blinkingTextMC');
+  blinkingTextMC.gotoAndStop(1);
+}
+</pre>
+         
+      	<p class="working-example">For a demonstration, view the <a href="../../working-examples/flash-control-blinking-with-script/">working version of Stopping blinking after a timeout</a>. The <a href="../../working-examples/flash-control-blinking-with-script/control_blinking_with_script_as3.fla">source of Stopping blinking after a timeout</a> is available. </p>
+         
+      </section>
+   </section><section id="tests"><h2>Tests</h2>
+      <section class="procedure"><h3>Procedure</h3>
+         <p>For each instance of blinking content: </p>
+         <ol>
+            <li> Start a timer for 5 seconds at the start of the blink effect. </li>
+            <li> When the timer expires, determine if the blinking has stopped. </li>
+         </ol>
+      </section>
+      <section class="results"><h3>Expected Results</h3>
+         <ul>
+            <li> For each instance of blinking content, #2 is true. </li>
+         </ul>
+      </section>
+   </section></body></html>
\ No newline at end of file
diff --git a/techniques/flash/FLASH4.html b/techniques/flash/FLASH4.html
new file mode 100644
index 0000000000..75288a3132
--- /dev/null
+++ b/techniques/flash/FLASH4.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing submit buttons in Flash</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Providing submit buttons in Flash</h1><section class="meta"><p class="id">ID: FLASH4</p><p class="technology">Technology: flash</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+      <ul id="flash.applicability.general">
+         <li>Adobe Flash Professional version MX and higher </li>
+         <li>Adobe Flex</li>
+      </ul>
+   </section><section id="description"><h2>Description</h2>
+      <p>The objective of this technique is to use submit buttons to allow  users to take actions that cause changes of context rather than  allowing changes in context to occur when the value or state of a  non-submit button control is modified. The intended use of a submit  button in this technique is to generate an HTTP request that submits  data entered in a form or to perform an action that triggers a change  in context, so it is an appropriate control to use to initiate this  change. </p>
+   </section><section id="examples"><h2>Examples</h2>
+      <section class="example">
+         <h3>ActionScript 3 combobox with submit button</h3>
+         
+            <p>This is a basic ActionScript 3 example of a combobox component with  a submit button to redirect the user to a different resource. </p>
+         
+         <pre xml:space="preserve">import fl.accessibility.ComboBoxAccImpl;
+import flash.net.navigateToURL;
+import flash.net.URLRequest;
+ComboBoxAccImpl.enableAccessibility();
+state_submit.addEventListener(MouseEvent.CLICK, submitHandler);
+function submitHandler(e) {
+  var url: URLRequest = new URLRequest("http://www.wikipedia.org/wiki/" + 
+    state_combo.selectedLabel);
+  navigateToURL(url, "_self");
+}</pre>
+      </section>
+      <section class="example">
+         <h3>ActionScript 2 combobox with submit button</h3>
+         
+            <p>This is a basic ActionScript 2 example of a combobox component with  a submit button to redirect the user to a different resource - the same  example as in example 1 except in ActionScript 2: </p>
+         
+         <pre xml:space="preserve">import fl.accessibility.ComboBoxAccImpl;
+ComboBoxAccImpl.enableAccessibility();
+state_submit.addEventListener("click", submitHandler);
+function submitHandler(e) {
+  getURL("http://www.wikipedia.org/wiki/" + state_combo.selectedLabel, "_self");
+}</pre>
+      </section>
+   </section><section id="tests"><h2>Tests</h2>
+      <section class="procedure"><h3>Procedure</h3>
+         <ol>
+            <li> Find all interactive control instances (that are not submit  buttons) in the flash movie that can initiate a change of context, e.g.  a combobox, radio button or checkbox. </li>
+            <li> For each instance, confirm that the event handler(s)  responsible for the change of context are not associated with the  controls themselves, but with a separate button instead. </li>
+         </ol>
+      </section>
+      <section class="results"><h3>Expected Results</h3>
+         <p> #2 is true </p>
+      </section>
+   </section><section id="related"><h2>Related Techniques</h2><ul>
+      <li><a href="../general/G80">G80</a></li>
+   </ul></section></body></html>
\ No newline at end of file
diff --git a/techniques/flash/FLASH5.html b/techniques/flash/FLASH5.html
new file mode 100644
index 0000000000..9db89a95e4
--- /dev/null
+++ b/techniques/flash/FLASH5.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Combining adjacent image and text buttons for the same resource</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Combining adjacent image and text buttons for the same resource</h1><section class="meta"><p class="id">ID: FLASH5</p><p class="technology">Technology: flash</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+      <ul id="flash.applicability.general">
+         <li>Adobe Flash Professional version MX and higher </li>
+         <li>Adobe Flex</li>
+      </ul>
+   </section><section id="description"><h2>Description</h2>
+      <p>The objective of this technique is to avoid unnecessary duplication  that occurs when adjacent text and iconic versions of a button are  contained in a Flash movie. </p>
+      <p>Many kinds of buttons have both a text and iconic button  adjacent to each other. Often the text and the icon button are rendered  in separate buttons, in part to create a slight visual separation from  each other. Although the sighted user can see this slight visual  separation, a blind or low vision user may not be able to recognize the  separation, and be confused by the redundant buttons. To avoid this,  some authors omit specifying the accessible name for the image, but  this would fail Success Criterion 1.1.1 because the text alternative  would not serve the same purpose as the graphical button. The preferred  method to address this is to put the text and image together in one  button symbol instance, and provide a single accessible name for the  button to eliminate duplication of text. </p>
+   </section><section id="examples"><h2>Examples</h2>
+      <p>The following examples are for a situation where a button instance  comprised of both an image and text is on the stage. The combined  button in this example uses the instance name 'flashLink1'. </p>
+      <p>To create the combined button in Flash Professional: </p>
+      <ol>
+         <li> Add a graphic object and text to the stage </li>
+         <li> Select both objects </li>
+         <li> Select 'New Symbol' from the Insert menu or hit Ctrl+F8 to create a new button object </li>
+         <li> Click on the button object on the stage and enter an instance name in the Properties panel. </li>
+         <li> Continue under example 1, 2, or 3 below. </li>
+      </ol>
+      <figure id="figure-combined-button">
+			<img src="img/adjacentbtns.jpg"/>			   
+            
+            <figcaption>screen shot showing the combined button with an instance name 'flashLink1'</figcaption>
+         
+					</figure>
+      <section class="example">
+         <h3>Using the Accessibility panel to specify the accessible name</h3>
+         
+            <p>The Accessibility panel is used to specify the accessible name (which in this case is the same as the visual text).</p>
+            <figure id="figure-acc-ontrol-panel">
+								       <img src="img/findoutmore.jpg"/>
+                  
+                  <figcaption>screen shot showing use of the Accessibility control panel to provide a name for the combined button</figcaption>
+               
+							     </figure>
+         
+      </section>
+      <section class="example">
+         <h3>Using ActionScript to specify the accessible name</h3>
+         
+            <p>ActionScript 3 can be used instead of the Accessibility control  panel to define the accessibility name for the combined button, as  follows: </p>
+         
+         <pre xml:space="preserve">// 'flashLink1' is an instance placed on the movie's main timeline
+flashLink1.accessibilityProperties = new AccessibilityProperties();
+flashLink1.accessibilityProperties.name = "Learn more about Flash";</pre>
+         
+            <p>ActionScript 2 can be used instead of the Accessibility control  panel to define the accessibility name for the combined button, as  follows </p>
+         
+         <pre xml:space="preserve">// 'flashLink1' is an instance placed on the movie's main timeline
+flashLink1._accProps = new Object();
+flashLink1._accProps.name = "Learn more about Flash";</pre>
+      </section>
+   </section><section id="tests"><h2>Tests</h2>
+      <section class="procedure"><h3>Procedure</h3>
+         <ol>
+            <li> Publish the SWF file </li>
+            <li> Open the SWF file in Internet Explorer 6 or higher (using  Flash Player 6 or higher), or Firefox 3 or higher (using Flash Player 9  or higher) </li>
+            <li> Use a tool which is capable of showing an object's name text alternative, such as ACTF aDesigner 1.0 to open the Flash movie. </li>
+            <li> If you are using ACTF aDesigner 1.0, use the GUI Summary panel to  check each image button in the Flash movie and ensure that there is no  separate, redundant text control adjacent to the image that performs  the same action. </li>
+         </ol>
+      </section>
+      <section class="results"><h3>Expected Results</h3>
+         <p>#4 is true. </p>
+      </section>
+   </section><section id="related"><h2>Related Techniques</h2><ul>
+      <li><a href="../general/G94">G94</a></li>
+      <li><a href="../general/G53">G53</a></li>
+   </ul></section></body></html>
diff --git a/techniques/flash/FLASH6.html b/techniques/flash/FLASH6.html
new file mode 100644
index 0000000000..3458eee243
--- /dev/null
+++ b/techniques/flash/FLASH6.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Creating accessible hotspots using invisible buttons</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Creating accessible hotspots using invisible buttons</h1><section class="meta"><p class="id">ID: FLASH6</p><p class="technology">Technology: flash</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+      <ul id="flash.applicability.general">
+         <li>Adobe Flash Professional version MX and higher </li>
+         <li>Adobe Flex</li>
+      </ul>
+   </section><section id="description"><h2>Description</h2>
+      <p>The objective of this technique is to provide text alternatives that serve the same purpose as the clickable hotspots of an image. Each hotspot serves as a clickable region for a part of the image which can trigger an action (such as opening a web page corresponding to the hotspot). The hotspots are implemented as invisible Flash buttons, which are each given an accessible name that describes the hotspot's target. </p>
+   </section><section id="examples"><h2>Examples</h2>
+      <section class="example">
+         <h3>Graphic with accessible clickable regions</h3>
+         
+            <ol>
+               <li> Add the original graphic that needs to have clickable hotspots to the stage. </li>
+               <li>
+                  <p> For each hotspot, do the following:</p>
+                  <ol>
+                     <li> Create a new button symbol by choosing "New Symbol" from the  Flash Professional 'Insert' menu or by using the Ctrl + F8 shortcut. </li>
+                     <li> Inside the button symbol, create a shape that matches the clickable surface. </li>
+                     <li> Place the newly created button on top of the original graphic. </li>
+                     <li> Open the button's properties panel, and choose "Alpha" from  the "Style" dropdown list under "Color Effect". Change the value of the  "Alpha" slider that appears to zero so that the button becomes  invisible. </li>
+                     <li> Using the Accessibility panel, specify a value for the "tabindex" field to give the button a logical position in the tab order. </li>
+                     <li> Using the Accessibility panel, specify an accessible name that describes the purpose of the hotspot. </li>
+                  </ol>
+               </li>
+            </ol>
+            <figure id="figure-add-graphic">
+					<img src="img/flash_hotspot_graphic.png"/>			       
+                  
+                  <figcaption>adding the graphic to the Flash authoring stage</figcaption>
+               
+							     </figure>
+            <figure id="figure-button-invisible">
+					<img src="img/flash_hotspot_invisible.png"/>			       
+                  
+                  <figcaption>making a button invisible using the Properties panel</figcaption>
+               
+							     </figure>
+            <figure id="figure-acc-name">
+					<img src="img/flash_hotspot_accessibleName.png"/>			       
+                  
+                  <figcaption>setting the button's name using the Accessibility panel</figcaption>
+               
+							     </figure>
+         
+         
+      	<p class="working-example">The result can be seen in the <a href="../../working-examples/flash-invisible_buttons_as_image_map_regions/">working example of creating accessible hotspots using invisible buttons</a>. The <a href="../../working-examples/flash-invisible_buttons_as_image_map_regions/invisible_buttons_as_image_map_regions.fla">source of creating accessible hotspots using invisible buttons</a> is available.</p>
+         
+      </section>
+   </section><section id="tests"><h2>Tests</h2>
+      <section class="procedure"><h3>Procedure</h3>
+         <p>Find all images with hotspots. For each hotspot, confirm that: </p>
+         <ol>
+            <li> The hotspot is implemented as an invisible button </li>
+            <li> The hotspot is provided with an accessible name, either through the Accessibility panel or through ActionScript </li>
+         </ol>
+      </section>
+      <section class="results"><h3>Expected Results</h3>
+         <ul>
+            <li> #1 and #2 are true </li>
+         </ul>
+      </section>
+   </section><section id="related"><h2>Related Techniques</h2><ul>
+      <li><a href="../general/G91">G91</a></li>
+      
+   </ul></section></body></html>
diff --git a/techniques/flash/FLASH7.html b/techniques/flash/FLASH7.html
new file mode 100644
index 0000000000..7425c666c4
--- /dev/null
+++ b/techniques/flash/FLASH7.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using scripting to change control labels</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Using scripting to change control labels</h1><section class="meta"><p class="id">ID: FLASH7</p><p class="technology">Technology: flash</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+      <ul id="flash.applicability.general">
+         <li>Adobe Flash Professional version MX and higher </li>
+         <li>Adobe Flex</li>
+      </ul>
+   </section><section id="description"><h2>Description</h2>
+      <p>The purpose of this technique is to allow users to choose to have  additional information added to the label of a button or other control  so that it can be understood out of context. </p>
+      <p>Some users prefer to have control labels that are  self-contained, where there is no need to explore the context of the  control. Other users find including the context information in each  button to be repetitive and to reduce their ability to use a site.  Among users of assistive technology, the feedback to the working group  on which is preferable has been divided. This technique allows users to  pick the approach that works best for them. </p>
+      <p>A control is provided near the beginning of the page that will  expand the labels for controls on the page so that no  additional context is needed to understand the purpose of those  controls. It must always be possible to understand purpose of the  control directly from its label. </p>
+      <p>This technique expands the control labels only for the current  page view. It is also possible, and in some cases would be advisable,  to save this preference in a cookie or server-side user profile, so  that users would only have to make the selection once per site. </p>
+   </section><section id="examples"><h2>Examples</h2>
+      <section class="example">
+         <h3>Using ActionScript to add contextual information  directly to the label of a button</h3>
+         
+            <p>This example uses ActionScript to add contextual information  directly to the label of a button. When the "Expand Button Labels"  button is toggled, each button on the page has its <code class="prop">label</code> property  modified. </p>
+         
+         <pre xml:space="preserve">import fl.accessibility.ButtonAccImpl;
+ButtonAccImpl.enableAccessibility();
+btn1.addEventListener(MouseEvent.CLICK, clickHandler);
+
+function clickHandler(e) {
+  btn2.label = btn1.selected? "PDF version of 2010 brochure": "PDF";
+  btn2.width = btn1.selected? 200: 100;
+  btn3.label = btn1.selected? "Text version of 2010 brochure": "Text";
+  btn3.width = btn1.selected? 200: 100;
+  btn4.label = btn1.selected? "Word version of 2010 brochure": "Word";
+  btn4.width = btn1.selected? 200: 100;
+}</pre>
+         
+      	<p class="working-example">The result can be seen in the <a href="../../working-examples/flash-change_button_label/">working example of adding contextual information to a button label</a>. The <a href="../../working-examples/flash-change_button_label/change_button_label.fla">source of adding contextual information to a button label</a> is available.</p>
+         
+      </section>
+   </section><section id="tests"><h2>Tests</h2>
+      <section class="procedure"><h3>Procedure</h3>
+         <p>When a Flash Movie contains content with context dependent labels,  confirm that a separate toggle control is provided that allows the user  to expand the labels so that they are no longer context dependent. </p>
+      </section>
+      <section class="results"><h3>Expected Results</h3>
+         <p>The above is true. </p>
+      </section>
+   </section><section id="related"><h2>Related Techniques</h2><ul>
+      <li><a href="../client-side-script/SCR30">SCR30</a></li>
+   </ul></section></body></html>
\ No newline at end of file
diff --git a/techniques/flash/FLASH8.html b/techniques/flash/FLASH8.html
new file mode 100644
index 0000000000..3ebb6e8745
--- /dev/null
+++ b/techniques/flash/FLASH8.html
@@ -0,0 +1,219 @@
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Adding a group name to the accessible name of a form control</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Adding a group name to the accessible name of a form control</h1><section class="meta"><p class="id">ID: FLASH8</p><p class="technology">Technology: flash</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+      <ul id="flash.applicability.general">
+         <li>Adobe Flash Professional version MX and higher </li>
+         <li>Adobe Flex</li>
+      </ul>
+   </section><section id="description"><h2>Description</h2>
+      <p>The objective of this technique is to provide a semantic grouping for   related form controls. This allows users to understand the relationship   of the controls and interact with the form more quickly and   effectively. </p>
+      <p>In Flash, when related form controls are grouped, this grouping   can be indicated by adding the group's name to each form control's   accessible name. </p>
+      <p>Grouping controls is most important for related radio buttons and   checkboxes. A set of radio buttons or checkboxes is related when they   all submit values for a single named field. They work in the same way as   selection lists, allowing the user to choose from a set of options,   except selection lists are single controls while radio buttons and   checkboxes are multiple controls. Because they are multiple controls, it   is particularly important that they be grouped semantically so they can   be more easily treated as a single control. Often, user agents will   present the value of the legend before the label of each control, to   remind users that they are part of the same group. </p>
+      <p>It can also be useful to group other sets of controls that are   not as tightly related as sets of radio buttons and checkboxes. For   instance, several fields that collect a user's address might be grouped   together with a legend of "Address". </p>
+   </section><section id="examples"><h2>Examples</h2>
+      <section class="example">
+         <h3>Adding a group name to the accessible name of radio buttons</h3>
+         
+            <p>This example shows how the group name for radio buttons in a group   can be made accessible by adding it to each button's accessible name: </p>
+            <ol>
+               <li> Add radio button components to the stage: </li>
+               <li> Enter each button's label using its <code class="prop">label</code> property </li>
+               <li> Add the visual group label to the left or above the buttons   added in step 1 </li>
+               <li> Select each radio button. In the Accessibility panel, add the   group name to the "Name" field; </li>
+            </ol>
+            <p>Flash will concatenate the group name with each button's individual   name, such as "gender male". </p>
+            <p>This approach is illustrated in the screenshot below: </p>
+            <figure id="figure-Flash-group-name-controls">
+					<img src="img/groupname.png"/>			       
+                  
+                  <figcaption>Using the Accessibility panel to add a group name to a form control</figcaption>
+               
+							     </figure>
+            <div class="note">
+               <p>To make the radio buttons in this example accessible, the   following two lines need to be added to the movie's script: import fl.accessibility.RadioButtonAccImpl;
+RadioButtonAccImpl.enableAccessibility();
+								       </p>
+            </div>
+      	<p class="working-example">For an illustration of this approach, see the <a href="../../working-examples/flash-radio-button-group/radio_button_group_as3.html">working version of Adding a group name to the accessible name of radio buttons</a>. The <a href="../../working-examples/flash-radio-button-group/radio_button_group_as3.fla">source of Adding a group name to the accessible name of radio buttons</a> is available.</p>
+         
+      </section>
+      <section class="example">
+         <h3>Programmatically adding a group name with the accessible name of radio buttons</h3>
+         
+            <p>The code example below shows a basic proof of concept of a class that   automatically places a set of form controls inside a fieldset like   rectangle, including a legend. For each added control an <code class="obj">AccessibilityProperties</code>   object is created, and its <code class="prop">name</code> property is set to a   combination of the legend text and the actual form control label. </p>
+         
+         <pre xml:space="preserve">
+package wcagSamples {
+  import flash.display. *;
+  import flash.text. *;
+  import fl.controls. *
+  import flash.accessibility. *;
+  import fl.accessibility. *;
+  
+  
+  /**
+  *  Basic example that demonstrates how to simulate a fieldset, as provided
+  *  in HTML. The FieldSet class takes a group of controls and places them 
+  *  inside a fieldset rectangle with the legend text at the top. For each form 
+  *  control, the legend text is prepended to the control's accessible name
+  *
+  *  Note: This is only a proof of concept, not a fully functional class
+  *
+  *  @langversion 3.0
+  *  @playerversion Flash 10
+  *
+  */
+  public class FieldSet extends Sprite {
+    private var legend: String;
+    private var bBox: Shape;
+    private var currentY: int = 20;
+    
+    public static var LABEL_OFFSET_X: int = 20;
+    public static var CONTROL_OFFSET_X: int = 110;
+    
+    /**
+    *  CONSTRUCTOR
+    *  Legend specifies the FieldSet's legend text, items is an array 
+    *  describing the controls to be added to the FieldSet
+    */
+    
+    public function FieldSet(legend: String, items: Array) {
+      // enable accessibility for components used in this example
+      RadioButtonAccImpl.enableAccessibility();
+      CheckBoxAccImpl.enableAccessibility();
+      
+      //create FieldSet rectangle and legend
+      legend = legend;
+      bBox = new Shape();
+      bBox.graphics.lineStyle(1);
+      bBox.graphics.drawRect(10, 10, 300, 250);
+      bBox.graphics.beginFill(0x0000FF, 1);
+      addChild(bBox);
+      
+      var fieldSetLegend: TextField = new TextField();
+      fieldSetLegend.text = legend;
+      fieldSetLegend.x = 20;
+      fieldSetLegend.y = 3;
+      fieldSetLegend.background = true;
+      fieldSetLegend.backgroundColor = 0xFFFFFF;
+      fieldSetLegend.border = true;
+      fieldSetLegend.borderColor = 0x000000;
+      fieldSetLegend.autoSize = TextFieldAutoSize.LEFT;
+      addChild(fieldSetLegend);
+      
+      // add controls
+      for (var i = 0; i &lt; items.length; i++) {
+        processItem(items[i]);
+      }
+    }
+    
+    /**
+    * Adds the control to the Fieldset and sets its accessible name. A 
+    * control is represented as an array, containing the following values:
+    * [0] : A string describing the component type 
+    *   (can be "TextInput", TextArea", Checkbox" or "RadioGroup").
+    * [1] : The label used to identify the control
+    * [2] : If [0] is "RadioGroup", then [2] needs to contain an array of the 
+    *    labels for each individual radio button. if [0] is "CheckBox", then 
+    *    [1] can either be empty or a question (e.g. "Do you smoke?"), and 
+    *    [2] the CheckBox label (e.g. "Yes").
+    *
+    */
+    function processItem(item: Array) {
+      if (item.length &lt; 2)
+      return;
+      currentY += 30;
+      var newControl;
+      //create visual label
+      var lbl: Label;
+      lbl = new Label();
+      lbl.text = item[1] + ": ";
+      lbl.x = FieldSet.LABEL_OFFSET_X;
+      lbl.y = currentY;
+      lbl.width = FieldSet.CONTROL_OFFSET_X;
+      lbl.autoSize = TextFieldAutoSize.RIGHT;
+      lbl.wordWrap = true;
+      addChild(lbl);
+      
+      switch (item[0]) {
+        case "TextInput":
+        case "TextArea":
+        newControl = item[0] == "TextInput"? new TextInput(): new TextArea();
+        newControl.x = FieldSet.CONTROL_OFFSET_X;
+        //concatenate accessible name, combining legend and label
+        setAccName(newControl, legend + " " + item[1]);
+        break;
+        case "CheckBox":
+        newControl = new CheckBox();
+        newControl.label = item[2];
+        newControl.x = FieldSet.CONTROL_OFFSET_X;
+        setAccName(newControl, legend + " " + item[1] + " " + item[2]);
+        break;
+        case "RadioGroup":
+        if (item[2] &amp;&amp; item[2].length &gt; 0) {
+          var radioGroup: RadioButtonGroup = new RadioButtonGroup(item[0]);
+          var newBtn: RadioButton;;
+          for (var i = 0; i &lt; item[2].length; i++) {
+            newBtn = new RadioButton();
+            // concatenate the legend, the group label, and the button label
+            setAccName(newBtn, legend + " " + item[1] + " " + item[2][i]);
+            newBtn.label = item[2][i];
+            newBtn.group = radioGroup;
+            newBtn.x = FieldSet.CONTROL_OFFSET_X;
+            newBtn.y = currentY;
+            addChild(newBtn);
+            if (i &lt; item[2].length - 1)
+            currentY += 30;
+          }
+        }
+        break;
+      }
+      
+      if (newControl) {
+        newControl.y = currentY;
+        addChild(newControl);
+      }
+    }
+    
+    /**
+    * Creates an AccessibilityProperties object for an object and sets its name property
+    */
+    public function setAccName(obj, accName) {
+      var accProps: AccessibilityProperties = new AccessibilityProperties();
+      accProps.name = accName;
+      obj.accessibilityProperties = accProps;
+    }
+  }
+}</pre>
+         
+            <p>This example class can be initialized as follows: </p>
+         
+         <pre xml:space="preserve">var myFieldSet = new FieldSet("Personal Details",  // the legend 
+  [["TextInput", "Name"],                          // text field
+  ["RadioGroup", "Gender", ["Male", "Female"]],    // radio button group
+  ["CheckBox", "Do you smoke", "yes"],             // checkbox
+  ["TextArea", "Comments"],                        // text area
+]);
+addChild(myFieldSet);
+</pre>
+         
+      	<p class="working-example">For an illustration of this approach, see the <a href="../../working-examples/flash-grouped_form_controls/">working version of Programmatically adding a group name with the accessible name of radio buttons</a>. The <a href="../../working-examples/flash-grouped_form_controls/grouped_form_controls.zip">source of Programmatically adding a group name with the accessible name of radio buttons</a> is available.</p>
+            <div class="note">
+               <p>Adobe Flex allows you to perform this type of behavior by   using the &lt;form&gt;, &lt;formitem&gt; and &lt;formheading&gt;   elements </p>
+            </div>
+         
+      </section>
+   </section><section id="tests"><h2>Tests</h2>
+      <section class="procedure"><h3>Procedure</h3>
+         <p>When a Flash Movie contains grouped form controls, confirm that   either : </p>
+         <ul>
+            <li> The group's name is included in the Accessibility panel's   "name" field for each control. </li>
+            <li> Each control has an <code class="prop">AccessibilityProperties.name</code> property,   which contains both the group's name and the control's label text </li>
+         </ul>
+      </section>
+      <section class="results"><h3>Expected Results</h3>
+         <ul>
+            <li> One of the above is true </li>
+         </ul>
+      </section>
+   </section><section id="related"><h2>Related Techniques</h2><ul>
+      <li><a href="../flash/FLASH25">FLASH25</a></li>
+   </ul></section></body></html>
diff --git a/techniques/flash/FLASH9.html b/techniques/flash/FLASH9.html
new file mode 100644
index 0000000000..57c45165e1
--- /dev/null
+++ b/techniques/flash/FLASH9.html
@@ -0,0 +1,94 @@
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Applying captions to prerecorded synchronized media</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Applying captions to prerecorded synchronized media</h1><section class="meta"><p class="id">ID: FLASH9</p><p class="technology">Technology: flash</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+      <p>Adobe Flash-based Content </p>
+      <ul>
+         <li> Adobe Flash CS3 and later </li>
+      </ul>
+   </section><section id="description"><h2>Description</h2>
+      <p>The objective of this technique is to provide an option for people   who have hearing impairments or otherwise have trouble hearing the sound   and dialogue in synchronized media to be able to choose to view   captions as an alternative to audio information. With this technique all   of the dialogue and important sounds are provided as text in a fashion   that allows the text to be hidden unless the user requests it. As a   result they are visible only when needed. This can be achieved using the   FLVPlayback and FLVPlaybackCaptioning   components.  Note: when using FLVPlayback skins the closed   caption button is accessible by default, but if implementing custom   skins authors need to test to verify that the button is accessible. </p>
+   </section><section id="examples"><h2>Examples</h2>
+      <section class="example">
+         <h3>Adding a timed text caption file to Flash</h3>
+         
+            <ol>
+               <li> Use an external tool (such as Magpie or a simple text editor)   to create a timed Text captions xml file. Stop and play the video   content, and for each relevant part of audio information (including   speech, important background noises and event sounds) include the start   and end time code as well as the textual alternative. Tools like Magpie   have advanced features to make this process easier, whereas a text   editor requires you to read the timecodes from your media player and   include them in the XML as illustrated in the sample captions document   below </li>
+               <li> In Flash, create a new instance of the FLVPlayback component   on your stage, and set its contentPath value to your flv video file   using the 'Component inspector' or 'Parameters' panel. </li>
+               <li> Set the 'Skin' parameter to use a skin which includes the CC   (closed captions) button. </li>
+               <li> From the components list also create an instance of the   FLVPlayback captioning component. In the 'Component inspector' panel set   its 'Source' parameter to the name of your timed text xml file. The   captions will automatically placed at the bottom of the player's frame. </li>
+            </ol>
+         
+         <pre xml:space="preserve">&lt;?xml version="1.0" encoding="UTF-8"?&gt;
+&lt;tt xml:lang="en" xmlns="https://www.w3.org/2006/04/ttaf1"
+  xmlns:tts="https://www.w3.org/2006/04/ttaf1#styling"&gt;
+  &lt;head&gt;
+    &lt;styling&gt;
+      &lt;style id="defaultSpeaker" tts:backgroundColor="black"
+        tts:color="white" tts:fontFamily="SansSerif" tts:fontSize="12"
+        tts:fontStyle="normal" tts:fontWeight="normal"
+        tts:textAlign="left" tts:textDecoration="none"/&gt;
+      &lt;style id="defaultCaption" tts:backgroundColor="black"
+        tts:color="white" tts:fontFamily="Arial" tts:fontSize="12"
+        tts:fontStyle="normal" tts:fontWeight="normal"
+        tts:textAlign="center" tts:textDecoration="none"/&gt;
+    &lt;/styling&gt;
+  &lt;/head&gt;
+  &lt;body id="thebody" style="defaultCaption"&gt;
+    &lt;div xml:lang="en"&gt;
+      &lt;p begin="0:00:00.20" end="0:00:02.20"&gt;If there were nothing in
+        our universe&lt;/p&gt;
+      &lt;p begin="0:00:02.20" end="0:00:05.65"&gt;the fabric of space-time
+        would be flat.&lt;/p&gt;
+      &lt;p begin="0:00:05.65" end="0:00:08.88"&gt;But add a mass, and
+        dimples form within it.&lt;/p&gt;
+      &lt;p begin="0:00:16.61" end="0:00:19.84"&gt;Smaller objects that
+        approach that large mass&lt;/p&gt;
+      &lt;p begin="0:00:19.84" end="0:00:23.41"&gt;will follow the curve in
+        space-time around it.&lt;/p&gt;
+      &lt;p begin="0:00:32.64" end="0:00:36.84"&gt;Our nearest star, the
+        sun, has formed such a dimple&lt;/p&gt;
+      &lt;p begin="0:00:36.84" end="0:00:38.00"&gt;and our tiny planet
+        Earth&lt;/p&gt;
+      &lt;p begin="0:00:38.00" end="0:00:41.50"&gt;goes along for the ride
+        in the curve of its dimple&lt;/p&gt;
+      &lt;p begin="0:00:41.50" end="0:00:43.80"&gt;staying in orbit around
+        the sun.&lt;/p&gt;
+      &lt;p begin="0:00:45.67" end="0:01:55.00"/&gt;
+    &lt;/div&gt;
+  &lt;/body&gt;
+&lt;/tt&gt;
+</pre>
+         
+      	<p class="working-example">This is demonstrated in <a href="../../working-examples/flash-adding-captions-to-video/">working example of Adding a timed text caption file to Flash</a>. The <a href="../../working-examples/flash-adding-captions-to-video/adding_captions_to_Flash_video_as3.zip">working example of Adding a timed text caption file to Flash</a> is available.</p>
+         
+      </section>
+   </section><section id="tests"><h2>Tests</h2>
+      <section class="procedure"><h3>Procedure</h3>
+         <p>Watch all video content displayed by your Flash movie. Ensure that: </p>
+         <ol>
+            <li> Captions are available for all audio content, either turned on   by default or as a user preference. </li>
+            <li> The captions properly describe all audio information contained   in the video. </li>
+         </ol>
+      </section>
+      <section class="results"><h3>Expected Results</h3>
+         <ul>
+            <li> #1 and #2 are true </li>
+         </ul>
+      </section>
+   </section><section id="related"><h2>Related Techniques</h2><ul>
+      <li><a href="../general/G87">G87</a></li>
+   </ul></section><section id="resources"><h2>Resources</h2>
+      
+         <p>
+							     <a href="http://ncam.wgbh.org/invent_build/web_multimedia/tools-guidelines">http://ncam.wgbh.org/invent_build/web_multimedia/tools-guidelines</a>
+						   </p>
+      
+      
+         <p>
+							     <a href="http://www.buraks.com/captionate/">http://www.buraks.com/captionate/</a>
+						   </p>
+      
+      
+         <p>
+							     <a href="https://www.w3.org/AudioVideo/TT/">https://www.w3.org/AudioVideo/TT/</a>
+						   </p>
+      
+   </section></body></html>
\ No newline at end of file
diff --git a/techniques/flash/flash.11tydata.json b/techniques/flash/flash.11tydata.json
new file mode 100644
index 0000000000..73eb5cd234
--- /dev/null
+++ b/techniques/flash/flash.11tydata.json
@@ -0,0 +1,4 @@
+{
+  "obsoleteSince": "20",
+  "obsoleteMessage": "<a href=\"https://helpx.adobe.com/enterprise/kb/eol-adobe-flash-shockwave-player.html\">Adobe stopped updating and distributing the Flash Player</a> at the end of 2020, and encourages authors interested in creating accessible web content to use HTML."
+}
diff --git a/techniques/flash/img/ac_show_tab_order_view.png b/techniques/flash/img/ac_show_tab_order_view.png
new file mode 100644
index 0000000000..deb383f886
Binary files /dev/null and b/techniques/flash/img/ac_show_tab_order_view.png differ
diff --git a/techniques/flash/img/acc_name_scrn.jpg b/techniques/flash/img/acc_name_scrn.jpg
new file mode 100644
index 0000000000..39cc324d02
Binary files /dev/null and b/techniques/flash/img/acc_name_scrn.jpg differ
diff --git a/techniques/flash/img/adjacentbtns.jpg b/techniques/flash/img/adjacentbtns.jpg
new file mode 100644
index 0000000000..dd8d43c099
Binary files /dev/null and b/techniques/flash/img/adjacentbtns.jpg differ
diff --git a/techniques/flash/img/ascii_art_alternative.png b/techniques/flash/img/ascii_art_alternative.png
new file mode 100644
index 0000000000..e41d58eb72
Binary files /dev/null and b/techniques/flash/img/ascii_art_alternative.png differ
diff --git a/techniques/flash/img/component_inspector_label.png b/techniques/flash/img/component_inspector_label.png
new file mode 100644
index 0000000000..03dc6e1d3d
Binary files /dev/null and b/techniques/flash/img/component_inspector_label.png differ
diff --git a/techniques/flash/img/editing_focusrect.png b/techniques/flash/img/editing_focusrect.png
new file mode 100644
index 0000000000..e09d5bba37
Binary files /dev/null and b/techniques/flash/img/editing_focusrect.png differ
diff --git a/techniques/flash/img/findoutmore.jpg b/techniques/flash/img/findoutmore.jpg
new file mode 100644
index 0000000000..8c2d178b33
Binary files /dev/null and b/techniques/flash/img/findoutmore.jpg differ
diff --git a/techniques/flash/img/flash_hotspot_accessibleName.png b/techniques/flash/img/flash_hotspot_accessibleName.png
new file mode 100644
index 0000000000..276f9aa941
Binary files /dev/null and b/techniques/flash/img/flash_hotspot_accessibleName.png differ
diff --git a/techniques/flash/img/flash_hotspot_graphic.png b/techniques/flash/img/flash_hotspot_graphic.png
new file mode 100644
index 0000000000..37d8e35e7a
Binary files /dev/null and b/techniques/flash/img/flash_hotspot_graphic.png differ
diff --git a/techniques/flash/img/flash_hotspot_invisible.png b/techniques/flash/img/flash_hotspot_invisible.png
new file mode 100644
index 0000000000..ad277dfaf4
Binary files /dev/null and b/techniques/flash/img/flash_hotspot_invisible.png differ
diff --git a/techniques/flash/img/groupname.png b/techniques/flash/img/groupname.png
new file mode 100644
index 0000000000..527e1613f8
Binary files /dev/null and b/techniques/flash/img/groupname.png differ
diff --git a/techniques/flash/img/required_flash_control.png b/techniques/flash/img/required_flash_control.png
new file mode 100644
index 0000000000..d8d5e999a8
Binary files /dev/null and b/techniques/flash/img/required_flash_control.png differ
diff --git a/techniques/flash/img/setting_tabindex_in_accessibility_panel.png b/techniques/flash/img/setting_tabindex_in_accessibility_panel.png
new file mode 100644
index 0000000000..694ff027eb
Binary files /dev/null and b/techniques/flash/img/setting_tabindex_in_accessibility_panel.png differ
diff --git a/techniques/flash/img/using_auto_label.png b/techniques/flash/img/using_auto_label.png
new file mode 100644
index 0000000000..4752de65a1
Binary files /dev/null and b/techniques/flash/img/using_auto_label.png differ
diff --git a/techniques/general/G1.html b/techniques/general/G1.html
index 94824fcd3b..c4d86ba445 100644
--- a/techniques/general/G1.html
+++ b/techniques/general/G1.html
@@ -1,9 +1,9 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Adding a link at the top of each page that goes directly to the main content area</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Adding a link at the top of each page that goes directly to the main content area</h1><section class="meta"><p class="id">ID: G1</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Adding a link at the top of each page that goes directly to the main content area</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/></head><body><h1>Adding a link at the top of each page that goes directly to the main content area</h1><section class="meta"><p class="id">ID: G1</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
       <p>All technologies that contain links</p>
    </section><section id="description"><h2>Description</h2>
       <p>The objective of this technique is to provide a mechanism to bypass blocks of material that are repeated on multiple Web pages by skipping directly to the main content of the Web page. The first interactive item in the Web page is a link to the beginning of the main content. Activating the link sets focus beyond the other content to the main content. This technique is most useful when a Web page has one main content area, rather than a set of content areas that are equally important, and when there are not multiple navigation sections on the page.</p>
       <div class="note">
-         <p>It is preferable for links to be visible at all times, since users navigating via the keyboard include switch users, those using techniques that generate keyboard strokes slowly, screen magnification software users, screen reader users working with sighted colleagues, keyboard only users and those navigating using voice recognition software. However, <a href="https://www.w3.org/WAI/WCAG21/Understanding/bypass-blocks">Success Criterion 2.4.1</a> does not require that they be visible when they do not have focus, and links that are visible only when they have focus can meet this success criterion.</p>
+         <p>It is preferable for links to be visible at all times, since users navigating via the keyboard include switch users, those using techniques that generate keyboard strokes slowly, screen magnification software users, screen reader users working with sighted colleagues, keyboard only users and those navigating using voice recognition software. However, <a href="../../Understanding/bypass-blocks">Success Criterion 2.4.1</a> does not require that they be visible when they do not have focus, and links that are visible only when they have focus can meet this success criterion.</p>
       </div>
    </section><section id="examples"><h2>Examples</h2>
       <section class="example">
@@ -41,8 +41,8 @@ <h3>A "Skip to main content" link</h3>
       
          <ul>
             <li>
-                  <a href="http://www.jimthatcher.com/skipnav.htm">Skip Navigation Links</a>
+                  <a href="https://html.spec.whatwg.org/multipage/interaction.html#focus">HTML - Focus</a>
                 </li>
          </ul>
       
-   </section></body></html>
\ No newline at end of file
+   </section></body></html>
diff --git a/techniques/general/G10.html b/techniques/general/G10.html
index b7ddbe8bcb..2e8b19ab8a 100644
--- a/techniques/general/G10.html
+++ b/techniques/general/G10.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Creating components using a technology that supports the accessibility
           API features of the platforms on which the user agents will be run to expose the
           names and roles, allow user-settable properties to be directly set, and provide
-          notification of changes</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Creating components using a technology that supports the accessibility
+          notification of changes</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/></head><body><h1>Creating components using a technology that supports the accessibility
           API features of the platforms on which the user agents will be run to expose the
           names and roles, allow user-settable properties to be directly set, and provide
           notification of changes</h1><section class="meta"><p class="id">ID: G10</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
@@ -31,12 +31,6 @@
                 Using the Java swing classes they are able to create an interface
                 component that exposes its name and role, is able to be set by AT
                 and alerts AT to any updates.</li>
-         <li>A Web page uses an original ActiveX control that is
-                written in the C++ programming language. The control is written to
-                explicitly support the Microsoft Active Accessibility (MSAA) API to
-                expose information about accept commands. The control then interacts
-                directly with assistive technology running the user agent on systems
-                that support MSAA.</li>
       </ul>
    </section><section id="tests"><h2>Tests</h2>
       <section class="procedure"><h3>Procedure</h3>
diff --git a/techniques/general/G100.html b/techniques/general/G100.html
index fb5749e2cd..23328c3cbe 100644
--- a/techniques/general/G100.html
+++ b/techniques/general/G100.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing a short text alternative which is the accepted name or a descriptive name of the non-text content</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Providing a short text alternative which is the accepted name or a descriptive name of the non-text content</h1><section class="meta"><p class="id">ID: G100</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing a short text alternative which is the accepted name or a descriptive name of the non-text content</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/></head><body><h1>Providing a short text alternative which is the accepted name or a descriptive name of the non-text content</h1><section class="meta"><p class="id">ID: G100</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
       <p>All technologies</p>
    </section><section id="description"><h2>Description</h2>
       <p>The objective of this technique is to allow users to identify the non-text
diff --git a/techniques/general/G101.html b/techniques/general/G101.html
index daac0912c4..a9b80ab330 100644
--- a/techniques/general/G101.html
+++ b/techniques/general/G101.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing the definition of a word or phrase used in an unusual or restricted way</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Providing the definition of a word or phrase used in an unusual or restricted way</h1><section class="meta"><p class="id">ID: G101</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing the definition of a word or phrase used in an unusual or restricted way</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/></head><body><h1>Providing the definition of a word or phrase used in an unusual or restricted way</h1><section class="meta"><p class="id">ID: G101</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
       <p>Any technology containing text.</p>
    </section><section id="description"><h2>Description</h2>
       <p>The objective of this technique is to provide a definition for any word used in an unusual or restricted way.</p>
diff --git a/techniques/general/G102.html b/techniques/general/G102.html
index d6a4743465..d1373caf39 100644
--- a/techniques/general/G102.html
+++ b/techniques/general/G102.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing the expansion or explanation of an abbreviation</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Providing the expansion or explanation of an abbreviation</h1><section class="meta"><p class="id">ID: G102</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing the expansion or explanation of an abbreviation</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/></head><body><h1>Providing the expansion or explanation of an abbreviation</h1><section class="meta"><p class="id">ID: G102</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
       <p>Any technology containing text.</p>
    </section><section id="description"><h2>Description</h2>
       <p>The objective of this technique is to provide information necessary to understand an abbreviation.</p>
diff --git a/techniques/general/G103.html b/techniques/general/G103.html
index 12635cdcdf..c479dd16e4 100644
--- a/techniques/general/G103.html
+++ b/techniques/general/G103.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing visual illustrations, pictures, and symbols to help explain ideas, events, and processes</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Providing visual illustrations, pictures, and symbols to help explain ideas, events, and processes</h1><section class="meta"><p class="id">ID: G103</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing visual illustrations, pictures, and symbols to help explain ideas, events, and processes</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/></head><body><h1>Providing visual illustrations, pictures, and symbols to help explain ideas, events, and processes</h1><section class="meta"><p class="id">ID: G103</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
       <p>All technologies.</p>
    </section><section id="description"><h2>Description</h2>
       <p>The objective of this technique is to provide visual illustrations that help users with reading disabilities understand difficult text that describes concepts or processes. The illustrations are provided in addition to the text.</p>
@@ -15,7 +15,7 @@
          <h3>An annual report for a company</h3>
          
             <p>An annual report discusses multiple factors that influenced the company's performance in the past year. The report also includes charts and graphs that illustrate how these factors interact. Each chart or graph has a text alternative as required by
-                <a href="https://www.w3.org/WAI/WCAG21/Understanding/non-text-content">Success Criterion 1.1.1</a>. Each one also has a number in its caption (e.g., “Figure 7"). These numbers are used in the text to reference the charts or graphs.</p>
+                <a href="../../Understanding/non-text-content">Success Criterion 1.1.1</a>. Each one also has a number in its caption (e.g., “Figure 7"). These numbers are used in the text to reference the charts or graphs.</p>
       </section>
       <section class="example">
          <h3>Screen shots in technical documentation</h3>
diff --git a/techniques/general/G105.html b/techniques/general/G105.html
index 2d30608e9f..83c6940f28 100644
--- a/techniques/general/G105.html
+++ b/techniques/general/G105.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Saving data so that it can be used after a user re-authenticates</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Saving data so that it can be used after a user re-authenticates</h1><section class="meta"><p class="id">ID: G105</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Saving data so that it can be used after a user re-authenticates</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/></head><body><h1>Saving data so that it can be used after a user re-authenticates</h1><section class="meta"><p class="id">ID: G105</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
       <p>Web pages that require user authentication and limit the time available for submitting data.</p>
    </section><section id="description"><h2>Description</h2>
       <p>Web servers that require user authentication often terminate the session after a set period of time if there is no activity from the user. If the user is unable to input the data quickly enough and the session times out before they submit, the server will require re-authentication before proceeding. When this happens, the server stores the data in a temporary cache while the user logs in, and when the user has re-authenticated, the data is made available from the cache and the form is processed as if there had never been a session time-out. The server does not keep the cache indefinitely, merely long enough to ensure success after re-authentication in a single user session, such as one day.</p>
diff --git a/techniques/general/G107.html b/techniques/general/G107.html
index 86bcdce732..fef10970bc 100644
--- a/techniques/general/G107.html
+++ b/techniques/general/G107.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using "activate" rather than "focus" as a trigger for changes of context</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Using "activate" rather than "focus" as a trigger for changes of context</h1><section class="meta"><p class="id">ID: G107</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using "activate" rather than "focus" as a trigger for changes of context</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/></head><body><h1>Using "activate" rather than "focus" as a trigger for changes of context</h1><section class="meta"><p class="id">ID: G107</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
       <p>Applies to all technologies.</p>
    </section><section id="description"><h2>Description</h2>
       <p>The objective of this technique is to provide a method for activating things that is predictable by the user. Users with cognitive disabilities and people using screen readers or screen magnifiers may be confused by an unexpected event such as automatic form submission or activation of a function that causes a change of context.</p>
diff --git a/techniques/general/G108.html b/techniques/general/G108.html
index 21901cd1a6..11a3cd56d8 100644
--- a/techniques/general/G108.html
+++ b/techniques/general/G108.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using markup features to expose the name and role, allow user-settable properties to be directly set, and provide notification of changes</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Using markup features to expose the name and role, allow user-settable properties to be directly set, and provide notification of changes</h1><section class="meta"><p class="id">ID: G108</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using markup features to expose the name and role, allow user-settable properties to be directly set, and provide notification of changes</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/></head><body><h1>Using markup features to expose the name and role, allow user-settable properties to be directly set, and provide notification of changes</h1><section class="meta"><p class="id">ID: G108</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
       <p>Markup technologies where it is possible to expose the name and role, allow
             user-settable properties to be directly set, and provide notification of
             changes.</p>
@@ -20,7 +20,7 @@
    </section><section id="examples"><h2>Examples</h2>
       <section class="example">
          
-            <p>Example 1: A Web page written in HTML or XHTML uses standard form
+            <p>Example 1: A Web page written in HTML uses standard form
                 controls, and identifies the form control using the title attribute.
                 The user agent makes information about these controls, including the
                 name, available to assistive technology through the DOM and through
@@ -47,7 +47,6 @@
       <li><a href="../html/H44">H44</a></li>
       <li><a href="../html/H88">H88</a></li>
       <li><a href="../html/H91">H91</a></li>
-      <li><a href="../client-side-script/SCR21">SCR21</a></li>
    </ul></section><section id="resources"><h2>Resources</h2>
       
    </section></body></html>
\ No newline at end of file
diff --git a/techniques/general/G11.html b/techniques/general/G11.html
index be638e14ee..6e68001753 100644
--- a/techniques/general/G11.html
+++ b/techniques/general/G11.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Creating content that blinks for less than 5 seconds</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Creating content that blinks for less than 5 seconds</h1><section class="meta"><p class="id">ID: G11</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Creating content that blinks for less than 5 seconds</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/></head><body><h1>Creating content that blinks for less than 5 seconds</h1><section class="meta"><p class="id">ID: G11</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
       <p>Technologies that support blinking content.</p>
    </section><section id="description"><h2>Description</h2>
       <p>The objective of this technique is to minimize the distraction caused by blinking content and enable users to re-focus on the other content on the page.</p>
@@ -22,7 +22,6 @@
    </section><section id="related"><h2>Related Techniques</h2><ul>
       <li><a href="../general/G152">G152</a></li>
       <li><a href="../general/G186">G186</a></li>
-      <li><a href="../general/G187">G187</a></li>
       <li><a href="../general/G191">G191</a></li>
       <li><a href="../client-side-script/SCR22">SCR22</a></li>
    </ul></section></body></html>
\ No newline at end of file
diff --git a/techniques/general/G110.html b/techniques/general/G110.html
index f5783ee103..3ebb2e953e 100644
--- a/techniques/general/G110.html
+++ b/techniques/general/G110.html
@@ -1,9 +1,9 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using an instant client-side redirect</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Using an instant client-side redirect</h1><section class="meta"><p class="id">ID: G110</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using an instant client-side redirect</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/></head><body><h1>Using an instant client-side redirect</h1><section class="meta"><p class="id">ID: G110</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
       <p>Applies to all technologies.</p>
    </section><section id="description"><h2>Description</h2>
       <p>The objective of this technique is to enable redirects on the client side
             without confusing the user. Redirects are preferably implemented on the
-            server side (see <a href="https://www.w3.org/WAI/WCAG21/Techniques/server-side-script/SVR1">Implementing automatic redirects on the server side instead of on the client side</a>), because a server-side
+            server side (see <a href="../server-side-script/SVR1">Implementing automatic redirects on the server side instead of on the client side</a>), because a server-side
             redirect does not cause new content to be displayed before the server sends
             the content located at the new URI. However, authors do not always have
             control over server-side technologies; in that case, they can use a
@@ -19,13 +19,13 @@ <h3>HTML:
               
               Refresh With a URI and No Timeout</h3>
          
-            <p>In HTML 4.x and XHTML 1.x, it is possible to implement a client-side
+            <p>In HTML, it is possible to implement a client-side
                 redirect using the
                 
                   meta
                 
                 element: see
-                <a href="https://www.w3.org/WAI/WCAG21/Techniques/html/H76">Using
+                <a href="../html/H76">Using
                   meta refresh to create an instant client-side redirect</a>.</p>
          
       </section>
diff --git a/techniques/general/G111.html b/techniques/general/G111.html
index e580ba4d93..644f03b6f2 100644
--- a/techniques/general/G111.html
+++ b/techniques/general/G111.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using color and pattern</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Using color and pattern</h1><section class="meta"><p class="id">ID: G111</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using color and pattern</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/></head><body><h1>Using color and pattern</h1><section class="meta"><p class="id">ID: G111</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
       <p>All technologies that support images.</p>
    </section><section id="description"><h2>Description</h2>
       <p>The objective of this technique is to ensure that when color differences are used to convey information within non-text content, patterns are included to convey the same information in a manner that does not depend on color.</p>
diff --git a/techniques/general/G112.html b/techniques/general/G112.html
index 5fdfb09d6c..4f6104a37a 100644
--- a/techniques/general/G112.html
+++ b/techniques/general/G112.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using inline definitions</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Using inline definitions</h1><section class="meta"><p class="id">ID: G112</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using inline definitions</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/></head><body><h1>Using inline definitions</h1><section class="meta"><p class="id">ID: G112</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
       <p>Any technology containing text.</p>
    </section><section id="description"><h2>Description</h2>
       <p>The objective of this technique is to provide a definition in context for any word used in an unusual or restricted way. The definition is provided in the text, either just before or just after the word is used. The definition may be included in the same sentence as the word that is being defined, or in a separate sentence.</p>
@@ -19,7 +19,7 @@ <h3>Driver</h3>
          <h3>W3C key words</h3>
          
             <p>Definition: The key words "must", "must not", "required", "shall", "shall not", "should", "should not", "recommended", "may", and "optional" in this specification are to be interpreted as described in
-                <a href="http://www.faqs.org/rfcs/rfc2119.html">RFC 2119</a>.</p>
+                <a href="https://www.rfc-editor.org/rfc/rfc2119">RFC 2119</a>.</p>
          
       </section>
       <section class="example">
@@ -27,7 +27,7 @@ <h3>A Japanese idiomatic expression defined in context</h3>
          
             <p>This example uses parentheses to provide the definition of an idiomatic expression in Japanese. The phrase in Japanese says that "he throws a spoon." It means that there was nothing he can do and finally he gives up.</p>
             <p>
-                <span lang="jp">さじを投げる（どうすることもできなくなり、あきらめること）。</span>
+                <span lang="ja">さじを投げる（どうすることもできなくなり、あきらめること）。</span>
               </p>
          
       </section>
diff --git a/techniques/general/G115.html b/techniques/general/G115.html
index c7f16f8eb5..b569cfb4a3 100644
--- a/techniques/general/G115.html
+++ b/techniques/general/G115.html
@@ -1,107 +1,73 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using semantic elements to mark up structure</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Using semantic elements to mark up structure</h1><section class="meta"><p class="id">ID: G115</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
-      <p>Markup languages, including HTML 4.01, XHTML 1.x</p>
-   </section><section id="description"><h2>Description</h2>
-      <p>The objective of this technique is to mark up the structure of the Web content using the appropriate semantic elements. In other words, the elements are used according to their meaning, not because of the way they appear visually.</p>
-      <p>Using the appropriate semantic elements will make sure the structure is available to the user agent. This involves explicitly indicating the role that different units have in understanding the meaning of the content. The nature of a piece of content as a paragraph, header, emphasized text, table, etc. can all be indicated in this way. In some cases, the relationships between units of content should also be indicated, such as between headings and subheadings, or amongst the cells of a table. The user agent can then make the structure perceivable to the user, for example using a different visual presentation for different types of structures or by using a different voice or pitch in an auditory presentation.</p>
-      <p>In HTML, for example, phrase-level elements such as
-            
-              em
-            ,
-            
-              abbr
-            , and
-            
-              cite
-            
-            add semantic information within sentences, marking text for emphasis and identifying abbreviations and citations, respectively. MathML, a markup language designed to maintain important distinctions between structure and presentation in mathematics, includes special "presentation" markup for the complex notations used to represent mathematical ideas as well as "content" (semantic) markup for the mathematical ideas themselves.</p>
-   </section><section id="examples"><h2>Examples</h2>
-      <section class="example">
-         
-            <p>A paragraph contains a hyperlink to another page. The hyperlink is marked up using the
-                
-                  a
-                
-                element.</p>
-         
-         <pre xml:space="preserve">
-              &lt;p&gt;Do you want to try our new tool yourself? A free 
-                demonstration version is available in our 
-                &lt;a href="download.html"&gt;download section&lt;/a&gt;&lt;/p&gt;
-            </pre>
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head>
+	<title>Using semantic elements to mark up structure</title>
+	<link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+</head>
+<body>
+	<h1>Using semantic elements to mark up structure</h1>
+	<section class="meta">
+		<p class="id">ID: G115</p>
+		<p class="technology">Technology: general</p>
+		<p class="type">Type: Technique</p>
+	</section>
+	<section id="applicability">
+		<h2>When to Use</h2>
+		<p>Markup languages, including <abbr title="HyperText Markup Language">HTML</abbr></p>
+   </section>
+	 <section id="description">
+		<h2>Description</h2>
+		<p>The objective of this technique is to mark up the structure of the Web content using the appropriate semantic elements. In other words, the elements are used according to their meaning, not because of the way they appear visually.</p>
+		<p>Using the appropriate semantic elements will make sure the structure is available to the user agent. This involves explicitly indicating the role that different units have in understanding the meaning of the content. The nature of a piece of content as a paragraph, header, emphasized text, table, etc. can all be indicated in this way. In some cases, the relationships between units of content should also be indicated, such as between headings and subheadings, or amongst the cells of a table. The user agent can then make the structure perceivable to the user, for example using a different visual presentation for different types of structures or by using a different voice or pitch in an auditory presentation.</p>
+		<p>In HTML, for example, phrase-level elements such as <code class="language-html">em</code>, <code class="language-html">abbr</code>, and <code class="language-html">cite</code> add semantic information within sentences, marking text for emphasis and identifying abbreviations and citations, respectively. MathML, a markup language designed to maintain important distinctions between structure and presentation in mathematics, includes special "presentation" markup for the complex notations used to represent mathematical ideas as well as "content" (semantic) markup for the mathematical ideas themselves.</p>
+	</section>
+	<section id="examples">
+		<h2>Examples</h2>
+		<section class="example">
+			<h3>Linking to another page</h3>
+			<p>A paragraph contains a hyperlink to another page. The hyperlink is marked up using the <code class="language-html">a</code> element.</p>   
+<pre xml:space="preserve"><code class="language-html">&lt;p&gt;Do you want to try our new tool yourself? A free demonstration
+  version is available in our &lt;a href="download.html"&gt;download section&lt;/a&gt;
+&lt;/p&gt;</code></pre>
       </section>
       <section class="example">
-         
-            <p>A page about the history of marriage uses a quotation from Jane Austen's novel, Pride and Prejudice, as an example. The reference to the book is marked up using the
-                
-                  cite
-                
-                element and the quotation itself is marked up using the
-                
-                  blockquote
-                
-                element.</p>
-         
-         <pre xml:space="preserve">
-              &lt;p&gt;Marriage was considered a logical step for a bachelor, 
-                as can be seen in the first chapter of the novel 
-                &lt;cite&gt;Pride and Prejudice&lt;/cite&gt;:&lt;/p&gt;
-                &lt;blockquote&gt;
-                &lt;p&gt;It is a truth universally acknowledged, that a single man in
-                possession of a good fortune, must be in want of a wife.&lt;/p&gt;
-                &lt;p&gt;However little known the feelings or views of such a man may
-                be on his first entering a neighbourhood, this truth is so well
-                fixed in the minds of the surrounding families, that he is considered
-                the rightful property of some one or other of their daughters.&lt;/p&gt;
-                &lt;/blockquote&gt;
-            </pre>
+				<h3>Using <code class="language-html">cite</code> and <code class="language-html">blockquote</code> to reference a book and a quotation from it</h3>
+				<p>A page about the history of marriage uses a quotation from Jane Austen's novel, Pride and Prejudice, as an example. The reference to the book is marked up using the <code class="language-html">cite</code> element and the quotation itself is marked up using the <code class="language-html">blockquote</code> element.</p>
+<pre xml:space="preserve"><code class="language-html">&lt;p&gt;Marriage was considered a logical step for a bachelor, as can be seen in the
+   first chapter of the novel &lt;cite&gt;Pride and Prejudice&lt;/cite&gt;:&lt;/p&gt;
+&lt;blockquote&gt;
+  &lt;p&gt;It is a truth universally acknowledged, that a single man in
+   possession of a good fortune, must be in want of a wife.&lt;/p&gt;
+  &lt;p&gt;However little known the feelings or views of such a man may
+   be on his first entering a neighbourhood, this truth is so well
+   fixed in the minds of the surrounding families, that he is considered
+   the rightful property of some one or other of their daughters.&lt;/p&gt;
+&lt;/blockquote&gt;</code></pre>
       </section>
       <section class="example">
-         
-            <p>A car manual explains how to start the engine. The instructions include a warning to make sure the gear is in neutral. The author feels the warning is so important that it should be emphasized so the warning is marked up using the
-                
-                  strong
-                
-                element.</p>
-         
-         <pre xml:space="preserve">
-              &lt;h1&gt;How to start the engine&lt;/h1&gt;
-                &lt;p&gt;Before starting the engine, &lt;strong&gt;make sure the gear 
-                is in neutral&lt;/strong&gt;. Next, turn the key in the ignition. 
-                The engine should start.&lt;/p&gt;
-            </pre>
+				<h3>Using the <code class="language-html">strong</code> element to emphasize important text</h3>
+				<p>A car manual explains how to start the engine. The instructions include a warning to make sure the gear is in neutral. The author feels the warning is so important that it should be emphasized so the warning is marked up using the <code class="language-html">strong</code> element.</p> 
+<pre xml:space="preserve"><code class="language-html">&lt;h1&gt;How to start the engine&lt;/h1&gt;
+&lt;p&gt;Before starting the engine, &lt;strong&gt;make sure the gear is in neutral&lt;/strong&gt;
+   Next, turn the key in the ignition. The engine should start.&lt;/p&gt;</code></pre>
       </section>
       <section class="example">
+				<h3>Using the <code class="language-html">em</code> and <code class="language-html">strong</code> elements to emphasize text</h3>
          
-            <p>This example shows how to use the
-                
-                  em
-                
-                and
-                
-                  strong
-                
-                elements to emphasize text.</p>
-         
-         <pre xml:space="preserve">
-              &lt;p&gt;What she &lt;em&gt;really&lt;/em&gt; meant to say was, 
-                "This is not ok, it is &lt;strong&gt;excellent&lt;/strong&gt;!"&lt;/p&gt;
-            </pre>
+<pre xml:space="preserve"><code class="language-html">&lt;p&gt;What the user &lt;em&gt;really&lt;/em&gt; meant to say was, 
+   &lt;q&gt;This is not ok, it is &lt;strong&gt;excellent&lt;/strong&gt;!&lt;/q&gt;
+&lt;/p&gt;</code></pre>
       </section>
       <section class="example">
-         <h3>Using highlighting and background color to visually and semantically identify important information.</h3>
-         <pre xml:space="preserve">
-              &lt;style type="text/css"&gt;
-                .vocab {
-                background-color:cyan;
-                font-style:normal;
-                }
-                &lt;/style&gt;
-                ...
-                &lt;p&gt;New vocabulary words are emphasized and highlighted 
-                with a cyan background&lt;/p&gt;
-                &lt;p&gt;The &lt;em class="vocab"&gt;scathing&lt;/em&gt; review of the play 
-                seemed a bit too harsh... &lt;/p&gt;
-            </pre>
+         <h3>Using highlighting and background color to visually and semantically identify important information</h3>
+<pre xml:space="preserve"><code class="language-html">&lt;style&gt;
+.vocab {
+  background-color:cyan;
+  font-style:normal;
+}
+&lt;/style&gt;
+...
+&lt;p&gt;New vocabulary words are emphasized and highlighted with a cyan background.&lt;/p&gt;
+&lt;p&gt;The &lt;em class="vocab"&gt;scathing&lt;/em&gt; review of the play seemed a bit too harsh.&lt;/p&gt;</code></pre>
       </section>
    </section><section id="tests"><h2>Tests</h2>
       <section class="procedure"><h3>Procedure</h3>
@@ -123,24 +89,21 @@ <h3>Using highlighting and background color to visually and semantically identif
       <li><a href="../html/H49">H49</a></li>
       <li><a href="../html/H51">H51</a></li>
       <li><a href="../html/H71">H71</a></li>
-   </ul></section><section id="resources"><h2>Resources</h2>
-      
-         <ul>
-            <li>
-                  <a href="https://www.w3.org/TR/html4/">HTML 4.01 specification</a>
-                </li>
-            <li>
-                  <a href="https://www.w3.org/TR/html4/struct/text.html#h-9.2">HTML 4.01 specification, using phrase elements</a>
-                </li>
-            <li>
-                  <a href="https://www.w3.org/TR/MathML3/">Mathematical Markup Language (MathML) Version 3.0 2nd Edition</a>
-                </li>
-            <li>Jeffrey Zeldman's book
-                  <a href="https://en.wikipedia.org/wiki/Designing_with_Web_Standards">"Designing with Web standards"</a>
-                </li>
-            <li>Web Design Group's article
-                  <a href="http://www.htmlhelp.com/design/style/docstyle-tags.html">"Document style: Use the right tag for the job"</a>
-                </li>
-         </ul>
-      
-   </section></body></html>
\ No newline at end of file
+   </ul>
+	</section>
+	<section id="resources">
+		<h2>Resources</h2>
+		<ul>
+			<li>
+				<a href="https://html.spec.whatwg.org/multipage/">HTML Living Standard</a>
+			</li>
+			<li>
+				<a href="https://html.spec.whatwg.org/multipage/rendering.html#phrasing-content-3">HTML - Phrasing content</a>
+			</li>
+			<li>
+				<a href="https://www.w3.org/TR/MathML/">Mathematical Markup Language (MathML)</a>
+			</li>
+		</ul>   
+   </section>
+  </body>
+	</html>
\ No newline at end of file
diff --git a/techniques/general/G117.html b/techniques/general/G117.html
index 0e0d7697e4..1449e35334 100644
--- a/techniques/general/G117.html
+++ b/techniques/general/G117.html
@@ -1,49 +1,76 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using text to convey information that is conveyed by variations in presentation of text</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Using text to convey information that is conveyed by variations in presentation of text</h1><section class="meta"><p class="id">ID: G117</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>Using text to convey information that is conveyed by variations in presentation of text</title>
+		<link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+	</head>
+	<body>
+		<h1>Using text to convey information that is conveyed by variations in presentation of text</h1>
+		<section class="meta">
+			<p class="id">ID: G117</p>
+			<p class="technology">Technology: general</p>
+			<p class="type">Type: Technique</p>
+		</section>
+		<section id="applicability">
+			<h2>When to Use</h2>
       <p>Technologies that support variations in the visual presentation of text.</p>
-   </section><section id="description"><h2>Description</h2>
+		</section>
+		<section id="description">
+			<h2>Description</h2>
       <p>The objective of this technique is to ensure that information conveyed through variations in the formatting of text is conveyed in text as well. When the visual appearance of text is varied to convey information, state the information explicitly in the text. Variations in the visual appearance can be made by changes in font face, font size, underline, strike through and various other text attributes. When these types of variations convey information, that information needs to be available elsewhere in the content via text. Including additional sections in the document or an inline description where the variation in presentation of text occurs can be used to convey the information.</p>
-   </section><section id="examples"><h2>Examples</h2>
+		</section>
+		<section id="examples">
+			<h2>Examples</h2>
       <section class="example">
          <h3>Indicating new content with boldface and a text indicator</h3>
+				 <p>The following example shows a list of accessibility standards. WCAG 2.2 is new, so is indicated in bold face. To avoid conveying information solely by presentation, the word "(new)" is included after it as well.</p>
          
-            <p>The following example shows a list of accessibility standards. WCAG 2.0 is new, so is indicated in bold face. To avoid conveying information solely by presentation, the word "(new)" is included after it as well.</p>
-         
-         <pre xml:space="preserve">
-              &lt;h2&gt;Web Accessibility Guidelines&lt;/h2&gt;
-                &lt;ul&gt;
-                &lt;li&gt;&lt;strong&gt;WCAG 2.0 (New)&lt;/strong&gt;&lt;/li&gt;
-                &lt;li&gt;WCAG 1.0&lt;/li&gt;
-                &lt;li&gt;Section 508&lt;/li&gt;
-                &lt;li&gt;JIS X 8341-3&lt;/li&gt;
-                ...
-                &lt;/ul&gt;
-            </pre>
+<pre xml:space="preserve"><code class="language-html">&lt;h2&gt;Web Accessibility Guidelines&lt;/h2&gt;
+&lt;ul&gt;
+  &lt;li&gt;&lt;strong&gt;WCAG 2.2 (New)&lt;/strong&gt;&lt;/li&gt;
+  &lt;li&gt;WCAG 2.1&lt;/li&gt;
+  &lt;li&gt;WCAG 2.0&lt;/li&gt;
+  &lt;li&gt;Section 508&lt;/li&gt;
+  &lt;li&gt;JIS X 8341-3&lt;/li&gt;
+  ...
+&lt;/ul&gt;</code></pre>
       </section>
       <section class="example">
          <h3>Font variations and explicit statements.</h3>
          
-            <p>An on-line document has gone through multiple drafts. Insertions are underlined and deletions are struck through. At the end of the draft a "change history" lists all changes made to each draft.</p>
+            <p>An online document has gone through multiple drafts. Insertions are underlined and deletions are struck through. At the end of the draft a "change history" lists all changes made to each draft.</p>
          
       </section>
       <section class="example">
          <h3>Providing an alternate way to know which words in the text have been identified by using a different font.</h3>
-         
-            <p>An on-line test requires students to write a short summary of a longer document. The summary must contain certain words from the original document. When a sentence in the original document contains a word or phrase that must be used in the summary, the word or phrase is shown in a different font than the rest of the sentence. A separate section also lists all the words and phrases that must be used in the summary.</p>
-         
-      </section>
-   </section><section id="tests"><h2>Tests</h2>
-      <section class="procedure"><h3>Procedure</h3>
-         <ol>
-            <li>Find items where variations in presentation of text are used to convey information.</li>
-            <li>For those items, check to determine if information conveyed visually is also stated explicitly in text.</li>
-         </ol>
+				 <p>An on-line test requires students to write a short summary of a longer document. The summary must contain certain words from the original document. When a sentence in the original document contains a word or phrase that must be used in the summary, the word or phrase is shown in a different font than the rest of the sentence. A separate section also lists all the words and phrases that must be used in the summary.</p>
       </section>
-      <section class="results"><h3>Expected Results</h3>
-         <ul>
-            <li>Check #2 is true.</li>
-         </ul>
+   </section>
+	 <section id="tests">
+		<h2>Tests</h2>
+		<section class="procedure">
+			<h3>Procedure</h3>
+			<ol>
+				<li>Find items where variations in presentation of text are used to convey information.</li>
+				<li>For those items, check to determine if information conveyed visually is also stated explicitly in text.</li>
+			</ol>
+		</section>
+		<section class="results">
+			<h3>Expected Results</h3>
+			<ul>
+				<li>Check #2 is true.</li>
+			</ul>
       </section>
-   </section><section id="related"><h2>Related Techniques</h2><ul>
+   </section>
+	 <section id="related">
+		<h2>Related Techniques</h2>
+		<ul>
       <li><a href="../html/H49">H49</a></li>
       <li><a href="../css/C22">C22</a></li>
-   </ul></section><section id="resources"><h2>Resources</h2></section></body></html>
\ No newline at end of file
+		</ul>
+	</section>
+	<section id="resources">
+		<h2>Resources</h2>
+	</section>
+</body>
+</html>
\ No newline at end of file
diff --git a/techniques/general/G120.html b/techniques/general/G120.html
index f756cf7bbc..30333815ff 100644
--- a/techniques/general/G120.html
+++ b/techniques/general/G120.html
@@ -1,33 +1,60 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing the pronunciation immediately following the word</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Providing the pronunciation immediately following the word</h1><section class="meta"><p class="id">ID: G120</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>Providing the pronunciation immediately following the word</title>
+		<link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+	</head>
+	<body>
+		<h1>Providing the pronunciation immediately following the word</h1>
+		<section class="meta"><p class="id">ID: G120</p>
+			<p class="technology">Technology: general</p>
+			<p class="type">Type: Technique</p>
+		</section>
+		<section id="applicability">
+			<h2>When to Use</h2>
       <p>All technologies.</p>
-   </section><section id="description"><h2>Description</h2>
+		</section>
+		<section id="description">
+			<h2>Description</h2>
       <p>The objective of this technique is to make the pronunciation of a word available by providing the pronunciation after the word at least the first time it occurs within a Web page.</p>
       <p>When a Web page contains words with the same spelling but different pronunciations, this technique is not appropriate for providing the pronunciation unless it is provided for each instance.</p>
       <p>This technique is applied to the first occurrence of an abbreviation in a Web page. When combining multiple resources into a single Web page, the abbreviation would be expanded at the beginning of each resource. In this case, however, using a different technique for providing the expanded form may be more appropriate.</p>
-   </section><section id="examples"><h2>Examples</h2>
+		</section>
+		<section id="examples">
+			<h2>Examples</h2>
       <section class="example">
+				<p>In the following example of Japanese text, the information giving the pronunciation in Han characters (Kanji) is rendered in parentheses immediately following the text.</p>
          
-            <p>In the following example of Japanese text, the information giving the pronunciation in Han characters(Kanji) is rendered in parentheses immediately following the text.</p>
-         
-         <pre xml:space="preserve">
-              &lt;p&gt; 慶應大学 (けいおうだいがく) &lt;/p&gt;
-            </pre>
+<pre xml:space="preserve"><code class="language-html">&lt;p&gt;慶應大学 (けいおうだいがく)&lt;/p&gt;</code></pre>
       </section>
-   </section><section id="tests"><h2>Tests</h2>
-      <section class="procedure"><h3>Procedure</h3>
+		</section>
+		<section id="tests">
+			<h2>Tests</h2>
+      <section class="procedure">
+				<h3>Procedure</h3>
          <p>For each word that requires pronunciation information:</p>
          <ol>
             <li>Search for the first use of that word in the Web page.</li>
             <li>Check that the first use is immediately followed by the pronunciation of the word.</li>
          </ol>
       </section>
-      <section class="results"><h3>Expected Results</h3>
-         <ul>
-            <li>Check #2 is true.</li>
-         </ul>
+      <section class="results">
+				<h3>Expected Results</h3>
+				<ul>
+					<li>Check #2 is true.</li>
+				</ul>
       </section>
-   </section><section id="related"><h2>Related Techniques</h2><ul>
-      <li><a href="../general/G121">G121</a></li>
-      <li><a href="../general/G163">G163</a></li>
-      <li><a href="../html/H62">H62</a></li>
-   </ul></section><section id="resources"><h2>Resources</h2></section></body></html>
\ No newline at end of file
+		</section>
+		<section id="related">
+			<h2>Related Techniques</h2>
+			<ul>
+				<li><a href="../general/G121">G121</a></li>
+      	<li><a href="../general/G163">G163</a></li>
+      	<li><a href="../html/H62">H62</a></li>
+			</ul>
+		</section>
+		<section id="resources">
+			<h2>Resources</h2>
+		</section>
+	</body>
+	</html>
\ No newline at end of file
diff --git a/techniques/general/G121.html b/techniques/general/G121.html
index 304fb7657e..6c4ce62c29 100644
--- a/techniques/general/G121.html
+++ b/techniques/general/G121.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Linking to pronunciations</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Linking to pronunciations</h1><section class="meta"><p class="id">ID: G121</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Linking to pronunciations</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/></head><body><h1>Linking to pronunciations</h1><section class="meta"><p class="id">ID: G121</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
       <p>All technologies that include links.</p>
    </section><section id="description"><h2>Description</h2>
       <p>The objective of this technique is to make the pronunciation of a word available by providing information about the pronunciation, either within the same Web page or in a different Web page, and establishing a link between the item and its pronunciation.</p>
diff --git a/techniques/general/G123.html b/techniques/general/G123.html
index ad5be60ad7..efaa9c3406 100644
--- a/techniques/general/G123.html
+++ b/techniques/general/G123.html
@@ -1,103 +1,101 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Adding a link at the beginning of a block of repeated content to go to the end of the block</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Adding a link at the beginning of a block of repeated content to go to the end of the block</h1><section class="meta"><p class="id">ID: G123</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>Adding a link at the beginning of a block of repeated content to go to the end of the block</title>
+		<link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+	</head>
+	<body>
+		<h1>Adding a link at the beginning of a block of repeated content to go to the end of the block</h1>
+		<section class="meta">
+			<p class="id">ID: G123</p>
+			<p class="technology">Technology: general</p>
+			<p class="type">Type: Technique</p>
+		</section>
+		<section id="applicability">
+			<h2>When to Use</h2>
       <p>All technologies that contain links.</p>
-   </section><section id="description"><h2>Description</h2>
+		</section>
+		<section id="description">
+			<h2>Description</h2>
       <p>The objective of this technique is to provide a mechanism to bypass a block of material by skipping to the end of the block. The first link in the block or the link directly preceding the block moves focus to the content immediately after the block. Activating the link advances the keyboard focus past the block. When there are multiple blocks to be skipped, the user skips from block to block via these links.</p>
-   </section><section id="examples"><h2>Examples</h2>
+		</section>
+		<section id="examples">
+			<h2>Examples</h2>
       <section class="example">
-         <h3>Skip navigation links</h3>
-         
-            <p>The pages on an organization's Web site include a navigation bar or main menu containing links to major sections of the site, the site map, information about the organization, and how to contact the organization. The first link in this area is titled "Skip Navigation Links". A user activates the link to skip over these links.</p>
-         
-      </section>
+				<h3>Skip navigation links</h3>
+				<p>The pages on an organization's Web site include a navigation bar or main menu containing links to major sections of the site, the site map, information about the organization, and how to contact the organization. The first link in this area is titled "Skip Navigation Links". A user activates the link to skip over these links.</p>
+			</section>
       <section class="example">
          <h3>A book index</h3>
-         
-            <p>A book contains an index that is divided into a set of pages. In the content at the beginning of each page of the index are links for each letter of the alphabet, linking into the index where the entries start with that letter. The first link in the set is titled "Skip Links into Index". A user activates this link to skip over the links.</p>
-         
+				 <p>A book contains an index that is divided into a set of pages. In the content at the beginning of each page of the index are links for each letter of the alphabet, linking into the index where the entries start with that letter. The first link in the set is titled "Skip Links into Index". A user activates this link to skip over the links.</p>
       </section>
       <section class="example">
          <h3>Several sets of links</h3>
-         
-            <p>All the pages on a Web site include a section containing links to the site map, information about the organization, and how to contact the organization. All the pages in each section of the site also contain a set of links to its subsections. The first link in the first block is titled "Skip Navigation Links" and skips over the first set of links. The first link in the second block is titled "Skip Section Links" and skips over the subsection links.</p>
-         
+				 <p>All the pages on a Web site include a section containing links to the site map, information about the organization, and how to contact the organization. All the pages in each section of the site also contain a set of links to its subsections. The first link in the first block is titled "Skip Navigation Links" and skips over the first set of links. The first link in the second block is titled "Skip Section Links" and skips over the subsection links.</p>
       </section>
       <section class="example">
-         <h3>HTML page with several blocks of navigation links</h3>
-         
-            <p>This example demonstrates both the use of Heading elements at the beginning of each section (H69) and links that skip to the end of each section. This allows people to skip blocks of repeated content using keyboard navigation or using heading navigation, depending on the capabilities of their user agents. Note that some sections of the content are wrapped in a
-                <code class="el">div</code>
-                element to work around a limitation of Internet Explorer (see the User Agents Notes for Creating HTML links to skip blocks of content (future link)).</p>
-         
-         <pre xml:space="preserve">
-              &lt;p&gt;&lt;a href="#content"&gt;Content title&lt;/a&gt;&lt;/p&gt;
-                &lt;h2&gt;Main Navigation&lt;/h2&gt;
-                &lt;ul&gt;
-                &lt;li&gt;&lt;a href="#subnav"&gt;Sub Navigation&lt;/a&gt;&lt;/li&gt;
-                &lt;li&gt;&lt;a href="/a/"&gt;Link A&lt;/a&gt;&lt;/li&gt;
-                &lt;li&gt;&lt;a href="/b/"&gt;Link B&lt;/a&gt;&lt;/li&gt;
-                &lt;li&gt;&lt;a href="/c/"&gt;Link C&lt;/a&gt;&lt;/li&gt;
-                ...
-                &lt;li&gt;&lt;a href="/j/"&gt;Link J&lt;/a&gt;&lt;/li&gt;
-                &lt;/ul&gt;
-                &lt;div class="iekbfix"&gt;
-                &lt;h2 id="subnav"&gt;Sub Navigation&lt;/h2&gt;
-                &lt;ul&gt;
-                &lt;li&gt;&lt;a href="#ultranav"&gt;Ultra Sub Navigation&lt;/a&gt;&lt;/li&gt;
-                &lt;li&gt;&lt;a href="/suba/"&gt;Sub A&lt;/a&gt;&lt;/li&gt;
-                &lt;li&gt;&lt;a href="/subb/"&gt;Sub B&lt;/a&gt;&lt;/li&gt;
-                &lt;li&gt;&lt;a href="/subc/"&gt;Sub C&lt;/a&gt;&lt;/li&gt;
-                ...
-                &lt;li&gt;&lt;a href="/subj/"&gt;Sub J&lt;/a&gt;&lt;/li&gt;
-                &lt;/ul&gt;
-                &lt;/div&gt;
-                &lt;div class="iekbfix"&gt;
-                &lt;h2 id="ultranav"&gt;Ultra Sub Navigation&lt;/h2&gt;
-                &lt;ul&gt;
-                &lt;li&gt;&lt;a href="#content"&gt;Content title&lt;/a&gt;&lt;/li&gt;
-                &lt;li&gt;&lt;a href="/ultraa/"&gt;Ultra A&lt;/a&gt;&lt;/li&gt;
-                &lt;li&gt;&lt;a href="/ultrab/"&gt;Ultra B&lt;/a&gt;&lt;/li&gt;
-                &lt;li&gt;&lt;a href="/ultrac/"&gt;Ultra C&lt;/a&gt;&lt;/li&gt;
-                ...
-                &lt;li&gt;&lt;a href="/ultraj/"&gt;Ultra J&lt;/a&gt;&lt;/li&gt;
-                &lt;/ul&gt;
-                &lt;/div&gt;
-                &lt;div&gt;
-                &lt;h2 id="content"&gt;Content title&lt;/h2&gt;
-                &lt;p&gt;Now that I have your attention...&lt;/p&gt;
-                &lt;/div&gt;
-            </pre>
+         <h3><abbr title="HyperText Markup Language">HTML</abbr> page with several blocks of navigation</h3>
+				 <p>This example demonstrates both the use of heading elements at the beginning of each section (<a href="../html/H69.html">H69</a>) and links that skip to the end of each section. This allows people to skip blocks of repeated content using keyboard navigation or using heading navigation, depending on the capabilities of their user agents.</p>
          
-            <p>And the CSS</p>
-         
-         <pre xml:space="preserve">
-              div.iekbfix {
-                width: 100%;
-                }
-            </pre>
-      </section>
-   </section><section id="tests"><h2>Tests</h2>
-      <section class="procedure"><h3>Procedure</h3>
-         <ol>
-            <li>Check that a link is the last focusable control before the block of repeated content or the first link in the block.</li>
-            <li>Check that the description of the link communicates that it skips the block.</li>
-            <li>Check that the link is either always visible or visible when it has keyboard focus.</li>
-            <li>Check that after activating the link, the keyboard focus has moved to the content immediately after the block.</li>
-         </ol>
-      </section>
-      <section class="results"><h3>Expected Results</h3>
-         <ul>
-            <li>All checks above are true.</li>
-         </ul>
+<pre xml:space="preserve"><code class="language-html">&lt;a href="#content"&gt;skip navigation&lt;/a&gt;
+&lt;h2&gt;&lt;span id="main-label"&gt;Main&lt;/span&gt; Navigation&lt;/h2&gt;
+&lt;nav aria-labelledby="main-label"&gt;
+  &lt;ul&gt;
+    &lt;li&gt;&lt;a href="#subnav"&gt;Sub Navigation&lt;/a&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;a href="/a/"&gt;Link A&lt;/a&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;a href="/b/"&gt;Link B&lt;/a&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;a href="/c/"&gt;Link C&lt;/a&gt;&lt;/li&gt;
+  &lt;/ul&gt;
+&lt;nav&gt;
+
+&lt;h2 id="subnav"&gt;&lt;span id="sub-label"&gt;Sub&lt;/span&gt; Navigation&lt;/h2&gt;
+&lt;nav aria-labelledby="sub-label"&gt;
+  &lt;ul&gt;
+    &lt;li&gt;&lt;a href="#ultranav"&gt;Ultra Sub Navigation&lt;/a&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;a href="/suba/"&gt;Sub A&lt;/a&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;a href="/subb/"&gt;Sub B&lt;/a&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;a href="/subc/"&gt;Sub C&lt;/a&gt;&lt;/li&gt;
+  &lt;/ul&gt;
+&lt;/nav&gt;
+
+&lt;main id="content"&gt;
+  &lt;h1&gt;Content title&lt;/h1&gt;
+  &lt;p&gt;Now that I have your attention...&lt;/p&gt;
+&lt;/main&gt;</code></pre>
       </section>
-   </section><section id="related"><h2>Related Techniques</h2><ul>
-      <li><a href="../general/G1">G1</a></li>
-      <li><a href="../general/G124">G124</a></li>
-   </ul></section><section id="resources"><h2>Resources</h2>
-      
-         <ul>
-            <li>
-                  <a href="http://www.jimthatcher.com/skipnav.htm">Skip Navigation Links</a>
-                </li>
-         </ul>
-      
-   </section></body></html>
\ No newline at end of file
+   </section>
+	 <section id="tests">
+		<h2>Tests</h2>
+		<section class="procedure">
+			<h3>Procedure</h3>
+			<ol>
+				<li>Check that a link is the last focusable control before the block of repeated content or the first link in the block.</li>
+				<li>Check that the description of the link communicates that it skips the block.</li>
+				<li>Check that the link is either always visible or visible when it has keyboard focus.</li>
+				<li>Check that after activating the link, the keyboard focus has moved to the content immediately after the block.</li>
+			</ol>
+		</section>
+		<section class="results">
+			<h3>Expected Results</h3>
+			<ul>
+				<li>All checks above are true.</li>
+			</ul>
+		</section>
+	</section>
+	<section id="related">
+		<h2>Related Techniques</h2>
+		<ul>
+			<li><a href="../general/G1">G1</a></li>
+			<li><a href="../general/G124">G124</a></li>
+		</ul>
+	</section>
+	<section id="resources">
+		<h2>Resources</h2>
+		<ul>
+			<li>
+				<a href="https://webaim.org/techniques/skipnav/">Skip Navigation Links</a>
+			</li>
+		</ul>  
+   </section>
+	</body>
+	</html>
\ No newline at end of file
diff --git a/techniques/general/G124.html b/techniques/general/G124.html
index 7a3b081abb..6b78831562 100644
--- a/techniques/general/G124.html
+++ b/techniques/general/G124.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Adding links at the top of the page to each area of the content</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Adding links at the top of the page to each area of the content</h1><section class="meta"><p class="id">ID: G124</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Adding links at the top of the page to each area of the content</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/></head><body><h1>Adding links at the top of the page to each area of the content</h1><section class="meta"><p class="id">ID: G124</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
       <p>All technologies that contain links</p>
    </section><section id="description"><h2>Description</h2>
       <p>The objective of this technique is to provide a mechanism to bypass blocks of material by providing a list of links to the different sections of the content. The links in this list, like a small table of contents at the beginning of the content, set focus to the different sections of the content. This technique is particularly useful for pages with many independent sections, such as portals. It may also be combined with other techniques for skipping blocks within a section.</p>
diff --git a/techniques/general/G125.html b/techniques/general/G125.html
index 690ec60614..73c2a05848 100644
--- a/techniques/general/G125.html
+++ b/techniques/general/G125.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing links to navigate to related Web pages</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Providing links to navigate to related Web pages</h1><section class="meta"><p class="id">ID: G125</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing links to navigate to related Web pages</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/></head><body><h1>Providing links to navigate to related Web pages</h1><section class="meta"><p class="id">ID: G125</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
       <p>All technologies that contain links</p>
    </section><section id="description"><h2>Description</h2>
       <p>The objective of this technique is to make it possible for users to locate additional information by providing links to related Web pages.
diff --git a/techniques/general/G126.html b/techniques/general/G126.html
index b91b5d35b9..cfee908e39 100644
--- a/techniques/general/G126.html
+++ b/techniques/general/G126.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing a list of links to all other Web pages</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Providing a list of links to all other Web pages</h1><section class="meta"><p class="id">ID: G126</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing a list of links to all other Web pages</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/></head><body><h1>Providing a list of links to all other Web pages</h1><section class="meta"><p class="id">ID: G126</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
       <p>All technologies that contain links</p>
    </section><section id="description"><h2>Description</h2>
       <p>The objective of this technique is to provide a list of links to all the Web pages in the set on each Web page. It is one of a series of techniques for locating content that are sufficient for addressing Success Criterion 2.4.5. 
diff --git a/techniques/general/G127.html b/techniques/general/G127.html
index 2d3a309699..e3426a6c21 100644
--- a/techniques/general/G127.html
+++ b/techniques/general/G127.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Identifying a Web page's relationship to a larger collection of Web pages</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Identifying a Web page's relationship to a larger collection of Web pages</h1><section class="meta"><p class="id">ID: G127</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Identifying a Web page's relationship to a larger collection of Web pages</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/></head><body><h1>Identifying a Web page's relationship to a larger collection of Web pages</h1><section class="meta"><p class="id">ID: G127</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
       <p>All technologies.</p>
    </section><section id="description"><h2>Description</h2>
       <p>The objective of this technique is to enable users to identify the relationship between the current Web page and other Web pages in the same collection (e.g., on the same Web site). In some cases this can be done programmatically—for example by using the
diff --git a/techniques/general/G128.html b/techniques/general/G128.html
index c4f0ba1fd4..381b0ab201 100644
--- a/techniques/general/G128.html
+++ b/techniques/general/G128.html
@@ -1,17 +1,12 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Indicating current location within navigation bars</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Indicating current location within navigation bars</h1><section class="meta"><p class="id">ID: G128</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Indicating current location within navigation bars</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/></head><body><h1>Indicating current location within navigation bars</h1><section class="meta"><p class="id">ID: G128</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
       <p>All technologies.</p>
    </section><section id="description"><h2>Description</h2>
-      <p>The objective of this technique is to help orient the user by providing information about the current location via the navigational user interface component. This technique is especially useful when the Web pages are steps in a task that must be processed in order. Providing this indication helps the user to better understand his place in the sequence. The location may be indicated by adding an icon or text, or by changing the state of the item.</p>
+      <p>The objective of this technique is to help orient the user by providing information about the current location via the navigational user interface component. This technique is especially useful when the Web pages are steps in a task that must be processed in order. Providing this indication helps the user to better understand their place in the sequence. The location may be indicated by adding an icon or text, or by changing the state of the item.</p>
    </section><section id="examples"><h2>Examples</h2>
       <section class="example">
          
             <p>A Web page implements tab panel style navigation. A list of panel tabs is displayed horizontally across the page. The current content is displayed in a panel below the list of panel tabs. When the user navigates to and selects a particular panel tab the content in the panel is updated to reflect the topic of the selected tab. In addition, the background color of the selected tab is changed from the default color and a check mark icon is displayed next to the tab panel text to indicate it is the active panel. The check mark icon includes an appropriate text alternative.</p>
          
-      </section>
-      <section class="example">
-         
-            <p>The layout for a Web page uses a frameset and frames. One of the frames is designated as the navigation frame and another frame displays the content of the Web site. When the user selects a link in the navigation frame, the information related to the link is displayed within the content frame. The text for the selected item in the navigation frame is updated with an asterisk character to indicate that it is the selected topic.</p>
-         
       </section>
       <section class="example">
          
diff --git a/techniques/general/G13.html b/techniques/general/G13.html
index e88bcf9d1e..a57bd9e195 100644
--- a/techniques/general/G13.html
+++ b/techniques/general/G13.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Describing what will happen before a change to a form control that causes a change of context to occur is made</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Describing what will happen before a change to a form control that causes a change of context to occur is made</h1><section class="meta"><p class="id">ID: G13</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Describing what will happen before a change to a form control that causes a change of context to occur is made</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/></head><body><h1>Describing what will happen before a change to a form control that causes a change of context to occur is made</h1><section class="meta"><p class="id">ID: G13</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
       <p>Applies to all technologies.</p>
    </section><section id="description"><h2>Description</h2>
       <p>The objective of this technique is to provide information to users about
diff --git a/techniques/general/G130.html b/techniques/general/G130.html
index c316a11029..1136d3b02e 100644
--- a/techniques/general/G130.html
+++ b/techniques/general/G130.html
@@ -1,38 +1,58 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing descriptive headings</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Providing descriptive headings</h1><section class="meta"><p class="id">ID: G130</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head>
+   <title>Providing descriptive headings</title>
+   <link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+</head>
+<body>
+   <h1>Providing descriptive headings</h1>
+   <section class="meta">
+      <p class="id">ID: G130</p>
+      <p class="technology">Technology: general</p>
+      <p class="type">Type: Technique</p>
+   </section>
+   <section id="applicability">
+      <h2>When to Use</h2>
       <p>All technologies.</p>
-   </section><section id="description"><h2>Description</h2>
-      <p>The objective of this technique is to make section headings within Web content descriptive. Descriptive headings and titles (see <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G88">Providing descriptive titles for Web pages</a>) work together to give users an overview of the content and its organization. Descriptive headings identify sections of the content in relation both to the Web page as a whole and to other sections of the same Web page.</p>
+   </section>
+   <section id="description">
+      <h2>Description</h2>
+      <p>The objective of this technique is to make section headings within Web content descriptive. Descriptive headings and titles (see <a href="../general/G88">Providing descriptive titles for Web pages</a>) work together to give users an overview of the content and its organization. Descriptive headings identify sections of the content in relation both to the Web page as a whole and to other sections of the same Web page.</p>
       <p>Descriptive headings help users find specific content and orient themselves within the Web page.</p>
-      <p>Authors may also want to consider putting the most important information at the beginning of each heading. This helps users “skim" the headings to locate the specific content they need, and is especially helpful when browsers or assistive technology allow navigation from heading to heading.</p>
-   </section><section id="examples"><h2>Examples</h2>
+      <p>Authors may also want to consider putting the most important information at the beginning of each heading. This helps users "skim" the headings to locate the specific content they need, and is especially helpful when browsers or assistive technology allow navigation from heading to heading.</p>
+   </section>
+   <section id="examples">
+      <h2>Examples</h2>
       <section class="example">
+         <h3>An <abbr title="HyperText Markup Language">HTML</abbr> page that describes the range of tasks for disaster preparation</h3>
+<pre xml:space="preserve"><code class="language-html">&lt;h1&gt;Disaster preparation&lt;/h1&gt;
+&lt;h2&gt;Flood preparation&lt;/h2&gt;
+&lt;h2&gt;Fire preparation&lt;/h2&gt;</code></pre>
          
-            <p>An HTML page that describes the range of tasks for disaster preparation may have the following headings:</p>
-         
-         <pre xml:space="preserve">
-              &lt;h1&gt;Disaster preparation&lt;/h1&gt;
-                &lt;h2&gt;Flood preparation&lt;/h2&gt;
-                &lt;h2&gt;Fire preparation&lt;/h2&gt;
-            </pre>
-         
-            <p>Note that the level 2 headings have the distinguishing information at the beginning (ie, instead of "Preparation for floods", "Preparation for fires", etc).</p>
+            <p>Note that the level 2 headings have the distinguishing information at the beginning (i.e., instead of "Preparation for floods", "Preparation for fires", etc).</p>
          
       </section>
       <section class="example">
-         
-            <p>A short article about the history of a town that explains about the founding and expansion of the town and then goes into some depth about the current situation. The title of the Web page is "History of Ourtown". The first section is called "The founding of Ourtown". The second section is called "Expansion of Ourtown". The third section is called "Ourtown today" which has the following subsections: "People in Ourtown", "Organizations in Ourtown" and "Buildings in Ourtown".</p>
-         
+         <h3>An article</h3>
+         <p>A short article about the history of a town that explains about the founding and expansion of the town and then goes into some depth about the current situation. The title of the Web page is "History of Ourtown". The first section is called "The founding of Ourtown". The second section is called "Expansion of Ourtown". The third section is called "Ourtown today" which has the following subsections: "People in Ourtown", "Organizations in Ourtown" and "Buildings in Ourtown".</p>
       </section>
-   </section><section id="tests"><h2>Tests</h2>
-      <section class="procedure"><h3>Procedure</h3>
+   </section>
+   <section id="tests">
+      <h2>Tests</h2>
+      <section class="procedure">
+         <h3>Procedure</h3>
          <ol>
             <li>Determine if the Web page contains headings.</li>
             <li>Check that each heading identifies its section of the content.</li>
          </ol>
       </section>
-      <section class="results"><h3>Expected Results</h3>
+      <section class="results">
+         <h3>Expected Results</h3>
          <ul>
             <li>Check #2 is true.</li>
          </ul>
       </section>
-   </section><section id="resources"><h2>Resources</h2></section></body></html>
\ No newline at end of file
+   </section>
+   <section id="resources">
+      <h2>Resources</h2>
+   </section>
+</body>
+</html>
\ No newline at end of file
diff --git a/techniques/general/G131.html b/techniques/general/G131.html
index dcbbbfdd79..260de82ea0 100644
--- a/techniques/general/G131.html
+++ b/techniques/general/G131.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing descriptive labels</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Providing descriptive labels</h1><section class="meta"><p class="id">ID: G131</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing descriptive labels</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/></head><body><h1>Providing descriptive labels</h1><section class="meta"><p class="id">ID: G131</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
       <p>All technologies.</p>
    </section><section id="description"><h2>Description</h2>
       <p>The objective of this technique is to ensure that the label for any interactive component within Web content makes the component's purpose clear. Using the appropriate technology-specific techniques for technologies for associating labels with interactive controls allows assistive technology to recognize the label and present it to the user, therefore allowing the user to identify the purpose of the control.The label may also be used to include text or a text symbol indicating that input is required.
diff --git a/techniques/general/G133.html b/techniques/general/G133.html
index 7bb1b86e22..017974b466 100644
--- a/techniques/general/G133.html
+++ b/techniques/general/G133.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing a checkbox on the first page of a multipart form that allows users to ask for longer session time limit or no session time limit</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Providing a checkbox on the first page of a multipart form that allows users to ask for longer session time limit or no session time limit</h1><section class="meta"><p class="id">ID: G133</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing a checkbox on the first page of a multipart form that allows users to ask for longer session time limit or no session time limit</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/></head><body><h1>Providing a checkbox on the first page of a multipart form that allows users to ask for longer session time limit or no session time limit</h1><section class="meta"><p class="id">ID: G133</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
       <p>Content that includes multipart forms</p>
    </section><section id="description"><h2>Description</h2>
       <p>The objective of this technique is to minimize the risk that users with disabilities will lose their work by providing a checkbox to request additional time to complete multipart forms. The checkbox can allow the user to request a specific amount of additional time (for example 15 minutes) or an indefinite extension. (Note that allowing an indefinite extension would be inappropriate if it jeopardized user privacy or network security.)</p>
diff --git a/techniques/general/G134.html b/techniques/general/G134.html
index fec970bfa9..3f4f8e2f37 100644
--- a/techniques/general/G134.html
+++ b/techniques/general/G134.html
@@ -1,255 +1,140 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Validating Web pages</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Validating Web pages</h1><section class="meta"><p class="id">ID: G134</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+---
+obsoleteMessage: |
+  This technique relates to 4.1.1: Parsing, which was removed as of WCAG 2.2.
+obsoleteSince: 22
+---
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>Validating Web pages</title>
+		<link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+  </head>
+  <body>
+		<h1>Validating Web pages</h1>
+		<section class="meta">
+			<p class="id">ID: G134</p>
+			<p class="technology">Technology: general</p>
+			<p class="type">Type: Technique</p>
+		</section>
+		<section id="applicability">
+			<h2>When to Use</h2>
       <p>Any markup languages and many other technologies.</p>
-   </section><section id="description"><h2>Description</h2>
-      <p>The objective of this technique is to avoid ambiguities in Web pages
-            that often result from code that does not validate against formal
-            specifications. Each technology's mechanism to specify the technology and
-            technology version is used, and the Web page is validated against the
-            formal specification of that technology. If a validator for that technology
-            is available, the developer can use it.</p>
-      <p>Validation will usually eliminate ambiguities (and more) because an
-            essential step in validation is to check for proper use of that technology's
-            markup (in a markup language) or code (in other technologies). Validation
-            does not necessarily check for full conformance with a specification but it
-            is the best means for automatically checking content against its
-            specification.</p>
-   </section><section id="examples"><h2>Examples</h2>
-      <section class="example">
-         <h3>Validating HTML</h3>
-         
-            <p>HTML pages include a document type declaration (sometimes referred
-                to as
-                
-                  !DOCTYPE
-                
-                statement) and are valid according to
-                the HTML version specified by the document type declaration. The
-                developer can use off-line or online validators (see Resources
-                below) to check the validity of the HTML pages.</p>
-         
+   </section>
+	 <section id="description">
+		<h2>Description</h2>
+		<p>The objective of this technique is to avoid ambiguities in Web pages that often result from code that does not validate against formal specifications. Each technology's mechanism to specify the technology and technology version is used, and the Web page is validated against the formal specification of that technology. If a validator for that technology is available, the developer can use it.</p>
+    <p>Validation will usually eliminate ambiguities (and more) because an essential step in validation is to check for proper use of that technology's markup (in a markup language) or code (in other technologies). Validation does not necessarily check for full conformance with a specification but it is the best means for automatically checking content against its specification.</p>
+   </section>
+	 <section id="examples">
+		<h2>Examples</h2>
+		<section class="example">
+			<h3>Validating <abbr title="HyperText Markup Language">HTML</abbr></h3>
+			<p>HTML pages include a document type declaration (sometimes referred to as <code class="language-html">!DOCTYPE</code> statement) and are valid according to the HTML version specified by the document type declaration. The developer can use off-line or online validators (see <a href="#resources">Resources section</a>) to check the validity of the HTML pages.</p>
+    </section>
+    <section class="example">
+			<h3>Validating <abbr title="Extensible Markup Language">XML</abbr></h3>
+			<p><abbr title="Scalable Vector Graphics">SVG</abbr>, <abbr title="Synchronized Multimedia Integration Language">SMIL</abbr> and other XML-based documents reference a Document Type Definition (DTD) or other type of XML schema. The developer can use online or off-line validators (including validation tools built into editors) to check the validity of the XML documents.</p>
+    </section>
+    <section class="example">
+			<h3>Batch validation with Ant</h3>
+      <p>The <code class="language-html">xmlvalidate</code> task of Apache Ant can be used for batch validation of XML files. The following Apache Ant target is a simple example for the validation of files with the extension .xml in the directory <code>dev\\Web</code> (relative to the Ant build file).</p>
+<pre xml:space="preserve"><code class="language-xml">&lt;target name="validate-xml"&gt; 
+  &lt;xmlvalidate lenient="no"&gt; 
+    &lt;fileset dir="dev/web" includes="*.xml" /&gt; 
+  &lt;/xmlvalidate&gt; 
+&lt;/target&gt;</code></pre>
       </section>
-      <section class="example">
-         <h3>Validating XML</h3>
-         
-            <p>XHTML, SVG, SMIL and other XML-based documents reference a Document
-                Type Definition (DTD) or other type of XML schema. The developer can
-                use online or off-line validators (including validation tools built
-                into editors) to check the validity of the XML documents.</p>
-         
-      </section>
-      <section class="example">
-         <h3>Batch validation with Ant</h3>
-         
-            <p>The
-                
-                  xmlvalidate
-                
-                task of Apache Ant can be used for
-                batch validation of XML files. The following Apache Ant target is a
-                simple example for the validation of files with the extension
-                
-                  .xml
-                
-                in the directory
-                
-                  dev\\Web
-                
-                (relative to the Ant build file).</p>
-         
-         <pre xml:space="preserve">
-              
-              &lt;target name="validate-xml"&gt; 
-                &lt;xmlvalidate lenient="no"&gt; 
-                &lt;fileset dir="dev/web" includes="*.xml" /&gt; 
-                &lt;/xmlvalidate&gt; 
-              &lt;/target&gt;
-            </pre>
-      </section>
-   </section><section id="tests"><h2>Tests</h2>
+		</section>
+		<section id="tests">
+			<h2>Tests</h2>
       <section class="procedure"><h3>Procedure</h3>
-         <p>For HTML, SGML-based and XML-based technologies:</p>
+         <p>For HTML, <abbr title="Standard Generalized Markup Language">SGML</abbr>-based and XML-based technologies:</p>
          <ol>
             <li>Load each page or document into a validating parser.</li>
             <li>Check that no validation errors are found.</li>
          </ol>
          <p>For other technologies:</p>
-         <p>Follow the validation procedure defined for the technology in use, if any
-              exists.</p>
+         <p>Follow the validation procedure defined for the technology in use, if any exists.</p>
       </section>
-      <section class="results"><h3>Expected Results</h3>
+      <section class="results">
+				<h3>Expected Results</h3>
          <p>For HTML, SGML-based and XML-based technologies:</p>
-         <p>Step 2 is true.</p>
+         <p>Check #2 is true.</p>
       </section>
-   </section><section id="related"><h2>Related Techniques</h2></section><section id="resources"><h2>Resources</h2>
-      
-         <ul>
-            <li>
-                  <a href="https://www.w3.org/QA/Tips/Doctype">Do not forget to
-                    add a doctype</a>
-                  by the W3C Quality Assurance Initiative
-                  explains what doctypes are and why you should use them.</li>
-            <li>
-                  <a href="https://www.w3.org/QA/2002/04/valid-dtd-list.html">Recommended DTDs to use in your Web document</a>
-                  by the
-                  W3C Quality Assurance Initiative is a list of commonly used
-                  declarations.</li>
-            <li>
-                  <a href="http://www.chami.com/html-kit/faq/pages/validate_tools.html">How do I validate my code or check for possible errors?</a>
-                  describes the tools in the free editor HTML-Kit for
-                  checking HTML, CSS and XML.</li>
-         </ul>
-         <p>Validating HTML and XHTML</p>
-         <ul>
-            <li>
-                  <a href="http://validator.w3.org/">The W3C Markup Validation
-                    Service</a>
-                  by the World Wide Web Consortium allows you
-                  to validate HTML and XHTML files by URI, by file upload and by
-                  direct input of complete HTML or XHTML documents. There are also
-                  separate pages with an extended interface for file upload and
-                  for validating by URI (advanced options such as encodings and
-                  document types).</li>
-            <li>
-                  <a href="http://validator.w3.org/docs/install.html">Installation Documentation for the W3C Markup Validation
-                    Service</a>
-                  explains how to install this service (for
-                  example for use on an intranet).</li>
-            <li>
-                  <a href="http://www.htmlhelp.com/tools/validator/">WDG HTML
-                    Validator</a>
-                  by the Web Design Group allows you to enter
-                  a URI to validate single pages or entire sites. There are also
-                  versions to validate Web pages in batch mode (by specifying one
-                  or more URIs of HTML documents to validate), by file upload and
-                  by direct input of HTML code.</li>
-            <li>
-                  <a href="http://www.htmlhelp.com/tools/validator/offline/index.html.en">Offline HTMLHelp.com Validator</a>
-                  is a tool for Unix
-                  users; it is the off-line version of the online WDG HTML
-                  Validator.</li>
-            <li>
-                  <a href="http://people.tuke.sk/igor.podlubny/ov.html">Off-line HTML
-                    Validator – A clipbook for NoteTab</a>
-                  by Professor Igor
-                  Podlubny is an extension for the programming editor NoteTab. It
-                  uses
-                  <a href="http://www.jclark.com/sp/">James Clark's
-                    open-source SGML parser</a>, which is also used by the
-                  W3C Markup Validation Service.</li>
-            <li>
-                  <a href="http://ktmatu.com/info/do-it-yourself-offline-html-validator/">Do-it-yourself Offline HTML Validator</a>
-                  by Matti
-                  Tukiainen explains how you can create a simple validator with
-                  James Clark's SGML parser on Windows.</li>
-            <li>
-                  <a href="http://www.standards-schmandards.com/2005/massvalidate/">Validating an entire site</a>
-                  by Peter Kranz explains
-                  how you can install a modified version of the W3C Markup
-                  Validation Service that outputs validation results as XML on Mac
-                  OS. Source code (in Perl and Python) is available.</li>
-            
-            <li>
-                  <a href="http://www.chami.com/html-kit/faq/pages/w3c_markup_validator.html">Can I use the W3C MarkUp Validation Service to validate
-                    HTML?</a>
-                  explains how you can validate HTML from within
-                  the free editor HTML-Kit.</li>
-            <li>
-                  <a href="http://validator.aborla.net/">HTML/XML Validator</a>
-                  is an online repair tool for HTML and XHTML based on Tidy
-                  and PHP 5. It is available in several languages but it is not a
-                  real validator.</li>
-            <li>
-                	<a href="http://alistapart.com/article/doctype">Fix Your
-                    Site With the Right DOCTYPE!</a>
-                  by Jeffrey Zeldman
-                  explains what HTML and XHTML doctypes work and what their effect
-                  is on the rendering mode of a few browsers.</li>
-            <li>
-                	<a href="http://alistapart.com/article/dreamweaver">Modifying Dreamweaver to Produce Valid XHTML</a>
-                  by
-                  Carrie Bickner.</li>
-            <li>
-                  <a href="http://schneegans.de/frontpage/xhtml-schema/">XHTML-Schemata für FrontPage 2003 und Visual Studio .NET</a>
-                  by Christoph Schneegans is a German article that explains
-                  how the W3C XML Schemas for XHTML 1.0 can be used in FrontPage
-                  2003 and Visual Studio .NET to create valid code.</li>
-            <li>
-                  <a href="http://www.nvu.com/">Nvu</a>
-                  is a free
-                  and open-source Web authoring tool for Windows, Macintosh and
-                  Linux that can call the W3C HTML Validation Service.</li>
-            <li>
-                  <a href="https://www.w3.org/Amaya/">Amaya</a>
-                  by the World
-                  Wide Web Consortium is a free and open-source Web authoring tool
-                  with support for HTML, XHTML, CSS, SVG and MathML that alerts
-                  you to validity errors when you save a document.</li>
-            <li>
-                  <a href="http://chrispederick.com/work/web-developer/">Web
-                    Developer Extension</a>
-                  is an extension for Mozilla,
-                  Firefox and Flock by Chris Pedrick that allows you to use the
-                  W3C Validation Services for HTML and CSS.</li>
-         </ul>
-         <p>Validating XML</p>
-         <ul>
-            <li>
-                  <a href="http://www.javaview.de/validator/">XML Validator - A
-                    Document Validation Service</a>
-                  by JavaView allows you to
-                  check wellformedness and validity of XML files, by file upload
-                  or by direct input of XML code.</li>
-            <li>Apache Ant's
-                  <a href="http://ant.apache.org/manual/Tasks/xmlvalidate.html">XMLValidate Task</a>
-                  can be used to validate XML-based
-                  documents. This tool can be used to validate entire directories
-                  (and subdirectories) of XML files.</li>
-            
-            <li>
-                  <a href="http://schneegans.de/sv/">XML Schema Validator</a>
-                  by Christoph Schneegans is an online tool that allows you to
-                  validate XML (and XHTML) files by URI, by file upload, by
-                  direct input of complete XML documents, and by direct input of
-                  XML code fragments. A bookmarklet that allows you to validate
-                  the page currently displayed in your browser is also available.
-                  This validator claims to be more accurate than the W3C
-                  validator.</li>
-            <li>
-                	<a href="http://www.corefiling.com/opensource/schemaValidate.html">XML Schema Validator</a>
-                  by CoreFiling is an online
-                  tool that allows you to validate an XML file against a W3C XML
-                  Schema, both of which can be uploaded.</li>
-            <li>
-                  <a href="http://www.xmlforasp.net/SchemaValidator.aspx">Schema Validator</a>: this is a validator that allows you to paste XML and W3C XML Schema code into text boxes to validate XML code.</li>
-         </ul>
-         <p>Note that many programming editors, XML editors and integrated
-              development environments (IDEs) can validate XML files. These include
-              the following free and/or open-source tools:</p>
-         <ul>
-            <li>the programming editor
-                  <a href="http://www.jedit.org/">JEdit</a>
-                  with the XML and SideKick plugins, which supports DTDs
-                  and W3C XML Schemas,</li>
-            <li>the “workbench"
-                  <a href="http://www.eclipse.org/">Eclipse</a>
-                  with the
-                  <a href="http://download.eclipse.org/webtools/downloads/">Web
-                    Tools Platform</a>,</li>
-            <li>the Web authoring tool
-                  <a href="http://www.screem.org/">SCREEM</a>
-                  for the Gnome desktop environment, which supports DTDs,</li>
-            <li>the XML editor
-                  <a href="http://jaxe.sourceforge.net/">Jaxe</a>, which validates XML files with Apache Xerces,</li>
-            <li>the XML editor
-                  <a href="http://www.xerlin.org/">Xerlin</a>,
-                  which supports DTDs and to some extent W3C XML schema,</li>
-            <li>the XML editor
-                  <a href="http://www.xmloperator.net/">xmloperator</a>, which supports DTDs and RELAX NG
-                  schemas,</li>
-            <li>Emacs in nXML mode (see the <a href="https://groups.yahoo.com/neo/groups/emacs-nxml-mode/info">YahooGroup Emacs nXML Mode</a>),</li>
-            <li>the XML editor
-                  <a href="http://pollo.sourceforge.net/">Pollo</a>, which supports DTDs, W3C XML Schemas and RELAX NG
-                  schemas, and is best suited for tree-like XML files.</li>
-         </ul>
-      
-   </section></body></html>
+		</section>
+		<section id="related">
+			<h2>Related Techniques</h2>
+		</section>
+		<section id="resources">
+			<h2>Resources</h2>
+			<ul>
+				<li>
+					<a href="https://www.w3.org/QA/Tips/Doctype">Do not forget to add a doctype</a> by the W3C Quality Assurance Initiative explains what doctypes are and why you should use them.</li>
+				<li>
+					<a href="https://www.w3.org/QA/2002/04/valid-dtd-list.html">Recommended DTDs to use in your Web document</a> by the W3C Quality Assurance Initiative is a list of commonly used declarations.</li>
+				<li>
+					<a href="http://www.chami.com/html-kit/faq/pages/validate_tools.html">How do I validate my code or check for possible errors?</a> describes the tools in the free editor HTML-Kit for checking HTML, <abbr title="Cascading Style Sheets">CSS</abbr> and XML.</li>
+			</ul>
+			<h3>Validating HTML</h3>
+			<ul>
+				<li>
+					<a href="https://validator.w3.org/">The W3C Markup Validation Service</a> by the World Wide Web Consortium allows you to validate HTML  files by <abbr title="Uniform Resource Identifier">URI</abbr>, by file upload and by direct input of complete HTML documents. There are also separate pages with an extended interface for file upload and for validating by URI (advanced options such as encodings and document types).</li>
+				<li>
+					<a href="https://validator.w3.org/docs/install.html">Installation Documentation for the W3C Markup Validation Service</a> explains how to install this service (for example for use on an intranet).
+				</li>
+				<li>
+					<a href="https://people.tuke.sk/igor.podlubny/ov.html">Off-line HTML Validator - A clipbook for NoteTab</a> by Professor Igor Podlubny is an extension for the programming editor NoteTab. It uses <a href="http://www.jclark.com/sp/">James Clark's open-source SGML parser</a>, which is also used by the W3C Markup Validation Service.
+				</li>
+				<li>
+					<a href="http://ktmatu.com/info/do-it-yourself-offline-html-validator/">Do-it-yourself Offline HTML Validator</a> by Matti Tukiainen explains how you can create a simple validator with James Clark's SGML parser on Windows.</li>
+				<li>
+					<a href="https://www.standards-schmandards.com/2005/massvalidate/">Validating an entire site</a> by Peter Kranz explains how you can install a modified version of the W3C Markup Validation Service that outputs validation results as XML on Mac OS. Source code (in Perl and Python) is available.
+				</li>
+				<li>
+					<a href="http://www.chami.com/html-kit/faq/pages/w3c_markup_validator.html">Can I use the W3C MarkUp Validation Service to validate HTML?</a> explains how you can validate HTML from within the free editor HTML-Kit.
+				</li>
+				<li>
+					<a href="https://validator.aborla.net/">HTML/XML Validator</a> is an online repair tool for HTML based on Tidy and PHP 5. It is available in several languages but it is not a real validator.
+				</li>
+				<li>
+					<a href="https://chrispederick.com/work/web-developer/">Web Developer Extension</a> is an extension for Firefox and Chromium browsers by Chris Pederick that allows you to use the W3C Validation Services for HTML and CSS.
+				</li>
+			</ul>
+      <h3>Validating XML</h3>
+			<ul>
+				<li>
+					<a href="http://www.javaview.de/validator/">XML Validator - A Document Validation Service</a> by JavaView allows you to check wellformedness and validity of XML files, by file upload or by direct input of XML code.
+				</li>
+				<li>
+					Apache Ant's <a href="https://ant.apache.org/manual/Tasks/xmlvalidate.html">XMLValidate Task</a> can be used to validate XML-based documents. This tool can be used to validate entire directories (and subdirectories) of XML files.
+				</li>
+				<li>
+					<a href="https://schneegans.de/sv/">XML Schema Validator</a> by Christoph Schneegans is an online tool that allows you to validate XML files by URI, by file upload, by direct input of complete XML documents, and by direct input of XML code fragments. A bookmarklet that allows you to validate the page currently displayed in your browser is also available. This validator claims to be more accurate than the W3C validator.
+				</li>
+				<li>
+					<a href="https://www.corefiling.com/opensource/schemaValidate/">XML Schema Validator</a> by CoreFiling is an online tool that allows you to validate an XML file against a W3C XML Schema, both of which can be uploaded.</li>
+				<li>
+					<a href="http://www.xmlforasp.net/SchemaValidator.aspx">Schema Validator</a>: this is a validator that allows you to paste XML and W3C XML Schema code into text boxes to validate XML code.
+				</li>
+      </ul>
+      <p>Note that many programming editors, XML editors and integrated development environments (IDEs) can validate XML files. These include the following free and/or open-source tools:</p>
+			<ul>
+				<li>
+					the programming editor <a href="http://www.jedit.org/">JEdit</a> with the XML and SideKick plugins, which supports DTDs and W3C XML Schemas,
+				</li>
+				<li>
+					the "workbench" <a href="https://www.eclipse.org/">Eclipse</a> with the <a href="https://www.eclipse.org/webtools/">Web Tools Platform</a>,
+				</li>
+				<li>
+					the XML editor <a href="http://jaxe.sourceforge.net/">Jaxe</a>, which validates XML files with Apache Xerces,
+				</li>
+				<li>
+					Emacs in nXML mode (see the <a href="https://www.emacswiki.org/emacs/NxmlMode">Emacs documentation wiki</a>),
+				</li>
+				<li>
+					the XML editor <a href="http://pollo.sourceforge.net/">Pollo</a>, which supports DTDs, W3C XML Schemas and RELAX NG schemas, and is best suited for tree-like XML files.
+				</li>
+			</ul> 
+   </section>
+	</body>
+	</html>
diff --git a/techniques/general/G135.html b/techniques/general/G135.html
index 53ab77a984..9ecffe6a44 100644
--- a/techniques/general/G135.html
+++ b/techniques/general/G135.html
@@ -1,6 +1,6 @@
 <!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using the accessibility API features of a technology to expose names and
           roles, to allow user-settable properties to be directly set, and to provide
-          notification of changes</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Using the accessibility API features of a technology to expose names and
+          notification of changes</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/></head><body><h1>Using the accessibility API features of a technology to expose names and
           roles, to allow user-settable properties to be directly set, and to provide
           notification of changes</h1><section class="meta"><p class="id">ID: G135</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
       <p>programming technologies that have standard components that are programmed
diff --git a/techniques/general/G136.html b/techniques/general/G136.html
index 36feaefbc9..bfccea04c2 100644
--- a/techniques/general/G136.html
+++ b/techniques/general/G136.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing a link at the beginning of a nonconforming Web page that points to a conforming alternate version</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Providing a link at the beginning of a nonconforming Web page that points to a conforming alternate version</h1><section class="meta"><p class="id">ID: G136</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing a link at the beginning of a nonconforming Web page that points to a conforming alternate version</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/></head><body><h1>Providing a link at the beginning of a nonconforming Web page that points to a conforming alternate version</h1><section class="meta"><p class="id">ID: G136</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
       <p>Primary content does not conform to WCAG but alternate versions exist that do conform to WCAG. This technique can only be used if a technology makes it possible to create an accessible link to an alternate version.</p>
    </section><section id="description"><h2>Description</h2>
       <p>The objective of this technique is to enable users to access alternate content that conforms to WCAG if the primary content, or the default content that users encounter when visiting a particular URI, does not conform. The alternate page, or conforming alternate version, may make some design or functionality compromises in order to conform, but must meet the requirements described in the definition in order to be a conforming alternate version. The definition of "conforming alternate version" is:</p>
diff --git a/techniques/general/G138.html b/techniques/general/G138.html
index f5035c492d..f3eaabcfcb 100644
--- a/techniques/general/G138.html
+++ b/techniques/general/G138.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using semantic markup whenever color cues are used</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Using semantic markup whenever color cues are used</h1><section class="meta"><p class="id">ID: G138</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using semantic markup whenever color cues are used</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/></head><body><h1>Using semantic markup whenever color cues are used</h1><section class="meta"><p class="id">ID: G138</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
       <p>All technologies that support color and text.</p>
    </section><section id="description"><h2>Description</h2>
       <p>The objective of this technique is to combine color and semantic markup to convey information. Most users can quickly scan the content to locate information conveyed by using color. For users who cannot see color, semantic markup can provide a different type of cue. User agents can then make this type of structure perceivable to the user, for example using a different visual presentation for different types of structures or by using a different voice or pitch in an auditory presentation.</p>
@@ -34,11 +34,8 @@ <h3>Color and strong emphasis for required form fields</h3>
                 	<a href="https://www.paciellogroup.com/blog/2008/02/screen-readers-lack-emphasis/">Screen Readers lack emphasis</a>
                 </li>
             <li>
-                  <a href="https://www.w3.org/TR/1999/REC-html401-19991224/struct/text.html#h-9.2.1">Phrase elements: EM, STRONG, DFN, CODE, SAMP, KBD, VAR, CITE, ABBR, and ACRONYM</a>
-                </li>
-            <li>
-                  <a href="https://www.w3.org/TR/html5/text-level-semantics.html#the-em-element">HTML 5.0: 4.5.2 The em element</a>
-                </li>
+              <a href="https://html.spec.whatwg.org/multipage/text-level-semantics.html#text-level-semantics">HTML: 4.5 Text-level semantics</a>
+            </li>
          </ul>
       
    </section></body></html>
\ No newline at end of file
diff --git a/techniques/general/G139.html b/techniques/general/G139.html
index 42f22757de..3b5608fe80 100644
--- a/techniques/general/G139.html
+++ b/techniques/general/G139.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Creating a mechanism that allows users to jump to errors</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Creating a mechanism that allows users to jump to errors</h1><section class="meta"><p class="id">ID: G139</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Creating a mechanism that allows users to jump to errors</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/></head><body><h1>Creating a mechanism that allows users to jump to errors</h1><section class="meta"><p class="id">ID: G139</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
       <p>Content that accepts user data input, with restrictions on the format, value, and/or type of the input.</p>
    </section><section id="description"><h2>Description</h2>
       <p>The objective of this technique is to help users find input errors where the information supplied by the user is not accepted. This includes fields with missing required information and fields with incorrect information. When users enter data input that is checked, and input errors are detected, a link to that error is provided so that the user does not have to search for it. One approach is to use server-side validation, and to re-display the form (including any previously entered data), and a text description at the top of the page that indicates the fact that there was an input error, describes the nature of the problem, and provides a link the field(s) with a problem.</p>
diff --git a/techniques/general/G14.html b/techniques/general/G14.html
index d786893492..a308b4277a 100644
--- a/techniques/general/G14.html
+++ b/techniques/general/G14.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Ensuring that information conveyed by color differences is also available in text</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Ensuring that information conveyed by color differences is also available in text</h1><section class="meta"><p class="id">ID: G14</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Ensuring that information conveyed by color differences is also available in text</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/></head><body><h1>Ensuring that information conveyed by color differences is also available in text</h1><section class="meta"><p class="id">ID: G14</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
       <p>All technologies that support color and text.</p>
    </section><section id="description"><h2>Description</h2>
       <p>The objective of this technique is to ensure that when color differences are used to convey information, such as required form fields, the information conveyed by the color differences are also conveyed explicitly in text.</p>
diff --git a/techniques/general/G140.html b/techniques/general/G140.html
index 3ef83b9b8d..7cc7355eec 100644
--- a/techniques/general/G140.html
+++ b/techniques/general/G140.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Separating information and structure from presentation to enable different presentations</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Separating information and structure from presentation to enable different presentations</h1><section class="meta"><p class="id">ID: G140</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Separating information and structure from presentation to enable different presentations</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/></head><body><h1>Separating information and structure from presentation to enable different presentations</h1><section class="meta"><p class="id">ID: G140</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
       <p>Any technology</p>
    </section><section id="description"><h2>Description</h2>
       <p>The objective of this technique is to facilitate the interaction of assistive technology with content by logically separating the content's structural encoding from the presentational encoding. Structural encoding is the indication of elements such as headings, paragraphs, lists, tables, etc., and is done by using technology features reserved for the purpose. By contrast, presentational encoding is the indication of formatting effects, such as typeface, color, size, position, borders, etc., and is also supported by technology features.</p>
diff --git a/techniques/general/G141.html b/techniques/general/G141.html
index 506dcbbc68..de6211185d 100644
--- a/techniques/general/G141.html
+++ b/techniques/general/G141.html
@@ -1,58 +1,83 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Organizing a page using headings</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Organizing a page using headings</h1><section class="meta"><p class="id">ID: G141</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>Organizing a page using headings</title>
+		<link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+	</head>
+	<body>
+		<h1>Organizing a page using headings</h1>
+		<section class="meta">
+			<p class="id">ID: G141</p>
+			<p class="technology">Technology: general</p>
+			<p class="type">Type: Technique</p>
+		</section>
+		<section id="applicability">
+			<h2>When to Use</h2>
       <p>Pages with content organized into sections.</p>
-   </section><section id="description"><h2>Description</h2>
+		</section>
+		<section id="description">
+			<h2>Description</h2>
       <p>The objective of this technique is to ensure that sections have headings that identify them. Success Criterion 1.3.1 requires that the headings be marked such that they can be programmatically identified.</p>
-      <p>In HTML, this could be done using the HTML heading elements (h1, h2, h3, h4, h5, and h6). These allow user agents to automatically identify section headings. Other technologies use other techniques for identifying headers. To facilitate navigation and understanding of overall document structure, authors should use headings that are properly nested (e.g., h1 followed by h2, h2 followed by h2 or h3, h3 followed by h3 or h4, etc.).</p>
-   </section><section id="examples"><h2>Examples</h2>
-      <section class="example">
-         <h3>Headings used to organize an HTML page</h3>
-         
-            <p>A page on cooking techniques uses a h1 element for the overall title, and h2 elements for major sections on cooking with oil vs cooking with butter, and h3 elements for sub-sections on oil-cooking techniques.</p>
-         
-         <pre xml:space="preserve">
-              &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
-                &lt;head&gt;
-                &lt;title&gt;Cooking techniques&lt;/title&gt;
-                &lt;/head&gt;
-                &lt;body&gt;
-                &lt;h1&gt;Cooking techniques&lt;/h1&gt;
-                ... some text here ...
-                &lt;h2&gt;Cooking with oil&lt;/h2&gt;
-                ... text of the section ...
-                &lt;h3&gt;Sautéeing&lt;/h3&gt;
-                ...
-                &lt;h3&gt;Deep frying&lt;/h3&gt;
-                &lt;h2&gt;Cooking with butter&lt;/h2&gt;
-                ... text of the section ...
-                &lt;/body&gt;
-              &lt;/html&gt;
-            </pre>
+      <p>In <abbr title="HyperText Markup Language">HTML</abbr>, this could be done using the HTML heading elements (<code class="language-html">h1</code>, <code class="language-html">h2</code>, <code class="language-html">h3</code>, <code class="language-html">h4</code>, <code class="language-html">h5</code>, and <code class="language-html">h6</code>). These allow user agents to automatically identify section headings. Other technologies use other techniques for identifying headers. To facilitate navigation and understanding of overall document structure, authors should use headings that are properly nested (e.g., <code class="language-html">h1</code> followed by <code class="language-html">h2</code>, <code class="language-html">h2</code> followed by <code class="language-html">h2</code> or <code class="language-html">h3</code>, <code class="language-html">h3</code> followed by <code class="language-html">h3</code> or <code class="language-html">h4</code>, etc.).</p>
+   </section>
+	 <section id="examples">
+		<h2>Examples</h2>
+		<section class="example">
+			<h3>Headings used to organize an HTML page</h3>   
+			<p>A page on cooking techniques uses a h1 element for the overall title, and h2 elements for major sections on cooking with oil vs cooking with butter, and h3 elements for sub-sections on oil-cooking techniques.</p>         
+<pre xml:space="preserve"><code class="language-html">&lt;!doctype html&gt;
+&lt;html lang="en"&gt;
+  &lt;head&gt;
+    &lt;title&gt;Cooking techniques&lt;/title&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;h1&gt;Cooking techniques&lt;/h1&gt;
+    ... some text here ...
+    &lt;h2&gt;Cooking with oil&lt;/h2&gt;
+    ... text of the section ...
+    &lt;h3&gt;Sautéeing&lt;/h3&gt;
+    ...
+    &lt;h3&gt;Deep frying&lt;/h3&gt;
+    &lt;h2&gt;Cooking with butter&lt;/h2&gt;
+    ... text of the section ...
+  &lt;/body&gt;
+&lt;/html&gt;</code></pre>
       </section>
-   </section><section id="tests"><h2>Tests</h2>
-      <section class="procedure"><h3>Procedure</h3>
-         <ol>
-            <li>Examine a page with content organized into sections.</li>
-            <li>Check that a heading for each section exists.</li>
-         </ol>
+		</section>
+		<section id="tests">
+			<h2>Tests</h2>
+      <section class="procedure">
+				<h3>Procedure</h3>
+				<ol>
+					<li>Examine a page with content organized into sections.</li>
+					<li>Check that a heading for each section exists.</li>
+				</ol>
       </section>
-      <section class="results"><h3>Expected Results</h3>
-         <ul>
-            <li>Check #2 is true.</li>
-         </ul>
+			<section class="results">
+				<h3>Expected Results</h3>
+        <ul>
+          <li>Check #2 is true.</li>
+        </ul>
       </section>
-   </section><section id="related"><h2>Related Techniques</h2><ul>
-      <li><a href="../aria/ARIA12">ARIA12</a></li>
+   </section>
+	 <section id="related">
+		<h2>Related Techniques</h2>
+		<ul>
+			<li><a href="../aria/ARIA12">ARIA12</a></li>
       <li><a href="../html/H42">H42</a></li>
       <li><a href="../html/H69">H69</a></li>
-   </ul></section><section id="resources"><h2>Resources</h2>
-      
-         <ul>
-            <li>
-                  <a href="http://webaim.org/techniques/semanticstructure/">WebAIM: Semantic Structure</a>
-               </li>
-            <li>
-                  <a href="http://accessibility.psu.edu/headingshtml/">Heading Tags</a>
-               </li>
-         </ul>
-      
-   </section></body></html>
\ No newline at end of file
+   </ul>
+	</section>
+	<section id="resources">
+		<h2>Resources</h2>
+		<ul>
+			<li>
+				<a href="https://webaim.org/techniques/semanticstructure/">WebAIM: Semantic Structure</a>
+			</li>
+			<li>
+				<a href="https://html.spec.whatwg.org/multipage/sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements">HTML - The <code class="language-html">h1</code>, <code class="language-html">h2</code>, <code class="language-html">h3</code>, <code class="language-html">h4</code>, <code class="language-html">h5</code>, and <code class="language-html">h6</code> elements</a>
+			</li>
+		</ul>
+	</section>
+</body>
+</html>
\ No newline at end of file
diff --git a/techniques/general/G142.html b/techniques/general/G142.html
index 6b79317b51..145d6a6018 100644
--- a/techniques/general/G142.html
+++ b/techniques/general/G142.html
@@ -1,12 +1,12 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using a technology that has commonly-available user agents that support zoom</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Using a technology that has commonly-available user agents that support zoom</h1><section class="meta"><p class="id">ID: G142</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
-      <p>All technologies with user-agent provided zoom capability.</p>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using a technology that has commonly-available user agents that support zoom</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/></head><body><h1>Using a technology that has commonly-available user agents that support zoom</h1><section class="meta"><p class="id">ID: G142</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+      <p>All technologies with user agent provided zoom capability.</p>
    </section><section id="description"><h2>Description</h2>
       <p>The objective of this technique is to ensure content can be scaled uniformly by using a Web technology supported by user agents that change text size via a Zoom tool.</p>
       <p>Content authored in technologies that are supported by user agents that can scale content uniformly (that is, zoom into content) satisfy this Success Criterion. Because this technique relies completely on user agent functionality, it is critical to test with a wide variety of user agents.</p>
       <p>This technique requires that the zoom function preserve all spatial relationships on the page and that all functionality continues to be available.</p>
    </section><section id="examples"><h2>Examples</h2>
       <ul>
-         <li>Internet Explorer 7 and Opera 9 provide a zoom function that scales HTML/CSS page content uniformly.</li>
+         <li>Most modern browsers provide a zoom function that scales HTML/CSS page content uniformly.</li>
          <li>To allow users to resize text, Adobe Reader provides a magnification tool that scales PDF pages uniformly.</li>
       </ul>
    </section><section id="tests"><h2>Tests</h2>
diff --git a/techniques/general/G143.html b/techniques/general/G143.html
index c04003af46..b1fb63ca32 100644
--- a/techniques/general/G143.html
+++ b/techniques/general/G143.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing a text alternative that describes the purpose of the CAPTCHA</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Providing a text alternative that describes the purpose of the CAPTCHA</h1><section class="meta"><p class="id">ID: G143</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing a text alternative that describes the purpose of the CAPTCHA</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/></head><body><h1>Providing a text alternative that describes the purpose of the CAPTCHA</h1><section class="meta"><p class="id">ID: G143</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
       <p>Applies to all technologies.</p>
    </section><section id="description"><h2>Description</h2>
       <p>The purpose of this technique is to provide information via the text alternative that identifies the non-text content as a
diff --git a/techniques/general/G144.html b/techniques/general/G144.html
index 9ddd6260f3..e12a336fa3 100644
--- a/techniques/general/G144.html
+++ b/techniques/general/G144.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Ensuring that the Web Page contains another CAPTCHA serving the same purpose using a different modality</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Ensuring that the Web Page contains another CAPTCHA serving the same purpose using a different modality</h1><section class="meta"><p class="id">ID: G144</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Ensuring that the Web Page contains another CAPTCHA serving the same purpose using a different modality</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/></head><body><h1>Ensuring that the Web Page contains another CAPTCHA serving the same purpose using a different modality</h1><section class="meta"><p class="id">ID: G144</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
       <p>Applies to all technologies.</p>
    </section><section id="description"><h2>Description</h2>
       <p>The purpose of this technique is to reduce occasions in which a user with a disability cannot complete a CAPTCHA task. Because there are alternate CAPTCHA tasks that use different modalities, a user is more likely to be able to complete one of the tasks successfully.</p>
diff --git a/techniques/general/G145.html b/techniques/general/G145.html
index 04a910e3cd..474ab4be88 100644
--- a/techniques/general/G145.html
+++ b/techniques/general/G145.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Ensuring that a contrast ratio of at least 3:1 exists between text (and images of text) 
-          and background behind the text</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Ensuring that a contrast ratio of at least 3:1 exists between text (and images of text) 
+          and background behind the text</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/></head><body><h1>Ensuring that a contrast ratio of at least 3:1 exists between text (and images of text) 
           and background behind the text</h1><section class="meta"><p class="id">ID: G145</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
       <p>Any technology that produces visual output.</p>
    </section><section id="description"><h2>Description</h2>
@@ -52,7 +52,7 @@
                      <ul>
                         <li>if R
                           sRGB
-                          &lt;= 0.03928 then
+                          &lt;= 0.04045 then
                           <strong>R</strong>
                           = R
                           sRGB
@@ -63,7 +63,7 @@
                           +0.055)/1.055) ^ 2.4</li>
                         <li>if G
                           sRGB
-                          &lt;= 0.03928 then
+                          &lt;= 0.04045 then
                           <strong>G</strong>
                           = G
                           sRGB
@@ -74,7 +74,7 @@
                           +0.055)/1.055) ^ 2.4</li>
                         <li>if B
                           sRGB
-                          &lt;= 0.03928 then
+                          &lt;= 0.04045 then
                           <strong>B</strong>
                           = B
                           sRGB
@@ -146,20 +146,18 @@
             <li>#4 is true</li>
          </ul>
       </section>
+      <p class="note">Before May 2021 the value of 0.04045 in the definition was different (0.03928). It was taken from an older version of the specification and has been updated. It has no practical effect on the calculations in the context of these guidelines.</p>
    </section><section id="related"><h2>Related Techniques</h2></section><section id="resources"><h2>Resources</h2>
       
          <ul>
             <li>
-                  <a href="https://www.paciellogroup.com/resources/contrastanalyser/">Contrast Analyser – Application</a>
+                  <a href="https://github.com/ThePacielloGroup/CCAe">TPGi Colour Contrast Analyser (CCA) – Application</a>
                 </li>
             <li>
                   <a href="http://juicystudio.com/services/luminositycontrastratio.php">Contrast Ratio Analyser - online service</a>
                 </li>
             <li>
-                  <a href="http://juicystudio.com/article/colour-contrast-analyser-firefox-extension.php">Colour Contrast Analyser - Firefox Extension</a>
-                </li>
-            <li>
-                  <a href="http://trace.wisc.edu/contrast-ratio-examples/">Color Contrast Samples</a>
+                  <a href="https://web.archive.org/web/20160814160227/http://trace.wisc.edu/contrast-ratio-examples">Color Contrast Samples</a>
                 </li>
             <li>
                   <a href="https://www.w3.org/Graphics/atypical-color-response">Atypical colour response</a>
diff --git a/techniques/general/G146.html b/techniques/general/G146.html
index b3105762cb..a16762242f 100644
--- a/techniques/general/G146.html
+++ b/techniques/general/G146.html
@@ -1,91 +1,111 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using liquid layout</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Using liquid layout</h1><section class="meta"><p class="id">ID: G146</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>Using liquid layout</title>
+		<link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+	</head>
+	<body>
+		<h1>Using liquid layout</h1>
+		<section class="meta">
+			<p class="id">ID: G146</p>
+			<p class="technology">Technology: general</p>
+			<p class="type">Type: Technique</p>
+		</section>
+		<section id="applicability">
+			<h2>When to Use</h2>
       <p>Applies to all technologies.</p>
-   </section><section id="description"><h2>Description</h2>
-      <p>The objective of this technique is to be able to present content without introducing horizontal scroll bars by using layout techniques that adapt to the available horizontal space. Liquid layouts define layout regions that both resize with text, and
-            reflow as needed to display the region on the screen. Although the exact layout therefore varies, the relationship of elements and the reading order remains the same. This is an effective way to create designs that present well on different devices and for users with different font size preferences.</p>
+		</section>
+		<section id="description">
+			<h2>Description</h2>
+      <p>The objective of this technique is to be able to present content without introducing horizontal scroll bars by using layout techniques that adapt to the available horizontal space. Liquid layouts define layout regions that both resize with text, and reflow as needed to display the region on the screen. Although the exact layout therefore varies, the relationship of elements and the reading order remains the same. This is an effective way to create designs that present well on different devices and for users with different font size preferences.</p>
       <p>The basic principles of liquid layouts are to:</p>
       <ol>
          <li>Define the size of layout regions using units that will cause the region to scale relative to text, so they enlarge or shrink as text is enlarged or shrunk;</li>
          <li>Position the layout regions as a row of adjacent floating boxes, which wrap to new rows as needed in much the same way as words in a paragraph wrap.</li>
       </ol>
       <p>Complex liquid layouts may be achieved by nesting layout regions, thus creating localized liquid layouts within a larger liquid layout. Even simple liquid layouts require design finesse to achieve good-looking results at a wide range of text sizes, but well-designed liquid layouts can be the most effective page design.</p>
-   </section><section id="examples"><h2>Examples</h2>
-      <section class="example">
-         <h3>Simple liquid layout in HTML and CSS</h3>
-         
-            <p>The following fairly simple example uses HTML and CSS to create a liquid layout. The three columns adjust their size as text size is adjusted. When the total horizontal width exceeds the available width of the columns, the last column wraps to be positioned below, rather than beside, the previous column. The font size can be increased without either clipping or introducing horizontal scrolling until the longest word no longer fits in a column. This particular example uses percent sizes for the columns and defines them as floating regions using the "float" property.</p>
-         
-         <pre xml:space="preserve">
-              &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
-                &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
-                &lt;head&gt;
-                &lt;meta http-equiv="content-type" content="text/html; charset=utf-8" /&gt;
-                &lt;title&gt;Example of Basic Liquid Layout&lt;/title&gt;
-                &lt;style type="text/css"&gt;
-                .column
-                {
-                border-left: 1px solid green;
-                padding-left:1%;
-                float: left;
-                width: 32%;
-                }
-                #footer
-                {
-                border-top: 1px solid green;
-                clear: both;
-                }
-                &lt;/style&gt;
-                &lt;/head&gt;
-                &lt;body&gt;
-                &lt;h1&gt;WCAG Example&lt;/h1&gt;
-                &lt;h2&gt;Text in Three Columns&lt;/h2&gt;
-                &lt;div title="column one" class="column"&gt;
-                &lt;h3&gt;Block 1&lt;/h3&gt;
-                &lt;p&gt; The objective of this technique is to be able to present content 
-                without introducing horizontal scroll bars by using layout 
-                techniques that adapt to the available horizontal space.
-                &lt;/p&gt;
-                &lt;/div&gt;
-                &lt;div title="column two" class="column"&gt;
-                &lt;h3&gt;Block 2&lt;/h3&gt;
-                &lt;p&gt; This is a very simple example of a page layout that adapts as the
-                text size changes.
-                &lt;/p&gt;
-                &lt;/div&gt;
-                &lt;div title="column three" class="column"&gt;
-                &lt;h3&gt;Block 3&lt;/h3&gt;
-                &lt;p&gt; For techniques that support more complex page layouts, see the
-                Resources listed below.
-                &lt;/p&gt;
-                &lt;/div&gt;
-                &lt;p id="footer"&gt;Footer text&lt;/p&gt;
-                &lt;/body&gt;
-                &lt;/html&gt;
-            </pre>
-      </section>
-   </section><section id="tests"><h2>Tests</h2>
-      <section class="procedure"><h3>Procedure</h3>
-         <ol>
-            <li>Display content in a user agent.</li>
-            <li>Increase text size to 200%.</li>
-            <li>Check whether all content and functionality is available with no horizontal scrolling.</li>
-         </ol>
-      </section>
-      <section class="results"><h3>Expected Results</h3>
-         <ul>
-            <li>Check #3 is true.</li>
-         </ul>
-      </section>
-   </section><section id="related"><h2>Related Techniques</h2><ul>
-      <li><a href="../css/C12">C12</a></li>
-      <li><a href="../css/C13">C13</a></li>
-      <li><a href="../css/C14">C14</a></li>
-   </ul></section><section id="resources"><h2>Resources</h2>
-      
-         <ul>
-            <li>
-                	<a href="http://webreference.com/authoring/style/sheets/css_mastery2/index-2.html">CSS Mastery: Fixed-Width, Liquid, and Elastic Layouts and Faux Columns</a>
-                </li>
-         </ul>
-      
-   </section></body></html>
+   </section>
+	 <section id="examples">
+		<h2>Examples</h2>
+		<section class="example">
+			<h3>Simple liquid layout in <abbr title="HyperText Markup Language">HTML</abbr> and <abbr title="Cascading Style Sheets">CSS</abbr></h3>
+			<p>The following fairly simple example uses HTML and CSS to create a liquid layout. The three columns adjust their size as text size is adjusted. When the total horizontal width exceeds the available width of the columns, the last column wraps to be positioned below, rather than beside, the previous column. The font size can be increased without either clipping or introducing horizontal scrolling until the longest word no longer fits in a column. This particular example uses percent sizes for the columns and defines them as floating regions using the "float" property.</p>
+<pre xml:space="preserve"><code class="language-html">&lt;!DOCTYPE html&gt;
+&lt;html lang="en"&gt;
+&lt;head&gt;
+  &lt;meta charset="utf-8"&gt;
+  &lt;title&gt;Example of Basic Liquid Layout&lt;/title&gt;
+  &lt;style&gt;
+  .column {
+    border-left: 1px solid green;
+    padding-left:1%;
+    float: left;
+    width: 32%;
+  }
+
+  .column:nth-of-type(1){
+    border:0;
+  }
+	
+  footer {
+    border-top: 1px solid green;
+    clear: both;
+  }
+  &lt;/style&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;h1&gt;WCAG Example&lt;/h1&gt;
+    &lt;h2&gt;Text in Three Columns&lt;/h2&gt;
+    &lt;div class="column"&gt;
+      &lt;h3&gt;Block 1&lt;/h3&gt;
+      &lt;p&gt;The objective of this technique is to be able to present content 
+        without introducing horizontal scroll bars by using layout 
+        techniques that adapt to the available horizontal space.&lt;/p&gt;
+    &lt;/div&gt;
+    &lt;div class="column"&gt;
+      &lt;h3&gt;Block 2&lt;/h3&gt;
+      &lt;p&gt;This is a very simple example of a page layout that adapts as the
+	text size changes.&lt;/p&gt;
+    &lt;/div&gt;
+    &lt;div class="column"&gt;
+      &lt;h3&gt;Block 3&lt;/h3&gt;
+      &lt;p&gt;For techniques that support more complex page layouts, see the
+	Resources listed below.&lt;/p&gt;
+    &lt;/div&gt;
+    &lt;footer&gt;
+      &lt;p&gt;Footer text&lt;/p&gt;
+    &lt;/footer&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</code></pre>
+</section>
+</section>
+<section id="tests">
+	<h2>Tests</h2>
+	<section class="procedure">
+		<h3>Procedure</h3>
+		<ol>
+			<li>Display content in a user agent.</li>
+			<li>Increase text size to 200%.</li>
+			<li>Check whether all content and functionality is available with no horizontal scrolling.</li>
+		</ol>
+	</section>
+	<section class="results">
+		<h3>Expected Results</h3>
+		<ul>
+			<li>Check #3 is true.</li>
+		</ul>
+	</section>
+</section>
+<section id="related">
+	<h2>Related Techniques</h2>
+	<ul>
+		<li><a href="../css/C12">C12</a></li>
+		<li><a href="../css/C13">C13</a></li>
+		<li><a href="../css/C14">C14</a></li>
+	</ul>
+</section>
+<!-- <section id="resources">
+	<h2>Resources</h2>
+</section> -->
+</body>
+</html>
diff --git a/techniques/general/G148.html b/techniques/general/G148.html
index e0f9b85ef2..566a0b79c3 100644
--- a/techniques/general/G148.html
+++ b/techniques/general/G148.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Not specifying background color, not specifying text color, and not using technology features that change those defaults</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Not specifying background color, not specifying text color, and not using technology features that change those defaults</h1><section class="meta"><p class="id">ID: G148</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Not specifying background color, not specifying text color, and not using technology features that change those defaults</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/></head><body><h1>Not specifying background color, not specifying text color, and not using technology features that change those defaults</h1><section class="meta"><p class="id">ID: G148</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
       <p>Any technology where text and background color are specified
             separately and browsers can control default colors.</p>
    </section><section id="description"><h2>Description</h2>
@@ -11,7 +11,7 @@
    </section><section id="examples"><h2>Examples</h2>
       <section class="example">
          
-            <p>The author specifies neither text color nor background, and does not use CSS. As a result the user can set his browser
+            <p>The author specifies neither text color nor background, and does not use CSS. As a result the user can set their browser
                 defaults to provide the colors and contrasts that work well for
                 them.</p>
          
@@ -38,16 +38,13 @@
       
          <ul>
             <li>
-                  <a href="https://www.paciellogroup.com/resources/contrastanalyser/">Contrast Analyser – Application</a>
+                  <a href="https://github.com/ThePacielloGroup/CCAe">TPGi Colour Contrast Analyser (CCA) – Application</a>
                 </li>
             <li>
                   <a href="http://juicystudio.com/services/luminositycontrastratio.php">Contrast Ratio Analyser - online service</a>
                 </li>
             <li>
-                  <a href="http://juicystudio.com/article/colour-contrast-analyser-firefox-extension.php">Colour Contrast Analyser - Firefox Extension</a>
-                </li>
-            <li>
-                  <a href="http://trace.wisc.edu/contrast-ratio-examples/">Color Contrast Samples</a>
+                  <a href="https://web.archive.org/web/20160814160227/http://trace.wisc.edu/contrast-ratio-examples">Color Contrast Samples</a>
                 </li>
             <li>
                   <a href="https://www.w3.org/Graphics/atypical-color-response">Atypical colour response</a>
diff --git a/techniques/general/G149.html b/techniques/general/G149.html
index 07c76d7462..301cb00972 100644
--- a/techniques/general/G149.html
+++ b/techniques/general/G149.html
@@ -1,5 +1,5 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using user interface components that are highlighted by the user agent when they receive focus</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Using user interface components that are highlighted by the user agent when they receive focus</h1><section class="meta"><p class="id">ID: G149</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
-      <p>All technologies with user-agent provided focus highlighting.</p>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using user interface components that are highlighted by the user agent when they receive focus</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/></head><body><h1>Using user interface components that are highlighted by the user agent when they receive focus</h1><section class="meta"><p class="id">ID: G149</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+      <p>All technologies with user agent provided focus highlighting.</p>
    </section><section id="description"><h2>Description</h2>
       <p>The objective of this technique is to ensure that the focused component can be visually identified by the user by relying on user agent support. It is common for user agents to highlight standard controls in some way when they receive focus. UAAG-conformant user agents do so when they satisfy checkpoint 10.2 "Highlight selection, content focus, enabled elements, visited links". When authors use standard controls for which the user agent provides this support, users are informed of the focus location in a standard, predictable way.</p>
    </section><section id="examples"><h2>Examples</h2>
diff --git a/techniques/general/G15.html b/techniques/general/G15.html
index 980d129355..d6e3df8857 100644
--- a/techniques/general/G15.html
+++ b/techniques/general/G15.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using a tool to ensure that content does not violate the general flash threshold or red flash threshold</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Using a tool to ensure that content does not violate the general flash threshold or red flash threshold</h1><section class="meta"><p class="id">ID: G15</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using a tool to ensure that content does not violate the general flash threshold or red flash threshold</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/></head><body><h1>Using a tool to ensure that content does not violate the general flash threshold or red flash threshold</h1><section class="meta"><p class="id">ID: G15</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
       <p>Applies to any technology</p>
    </section><section id="description"><h2>Description</h2>
       <p>The purpose of testing for violations of the general and red flash thresholds is to allow people who have photosensitive seizures to view Web sites without encountering material that is likely to cause a seizure. Warnings can be provided but people may miss them and children may not be able to read or understand them. With this technique all material is checked and if it violates flash or red flash thresholds it is either not put on the site or it is modified so that it does not violate the thresholds.</p>
@@ -6,10 +6,10 @@
          <p>There are some simple tests that can be run for particular simple types of flashing. For example:</p>
          <ul>
             <li>If material flashes 3 times per second or less then the simple test in
-                  <a href="#G19"></a>
+                  <a href="../general/G19">G19</a>
                   can be used.</li>
             <li>If material flashes in only one place on screen at a time and is quite small then the simple test in technique
-                  <a href="#G176"></a>
+                  <a href="../general/G176">G176</a>
                   can be used.</li>
          </ul>
          <p>For all other types, a tool is needed to keep track of all the factors and apply them to the video on a time-continuous basis.</p>
@@ -37,11 +37,11 @@
       
          <ul>
             <li>
-                  <a href="http://www.hardingfpa.com/">Harding FPA Web Site</a>
+                  <a href="https://www.hardingfpa.com/">Harding FPA Web Site</a>
                 </li>
             <li>
-                  <a href="http://trace.wisc.edu/peat/">Trace Center Photosensitive Epilepsy Analysis Tool (PEAT)</a>
+                  <a href="https://trace.umd.edu/peat/">Trace Center Photosensitive Epilepsy Analysis Tool (PEAT)</a>
                 </li>
          </ul>
       
-   </section></body></html>
\ No newline at end of file
+   </section></body></html>
diff --git a/techniques/general/G150.html b/techniques/general/G150.html
index 68ab6ba643..0623723760 100644
--- a/techniques/general/G150.html
+++ b/techniques/general/G150.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing text based alternatives for live audio-only content</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Providing text based alternatives for live audio-only content</h1><section class="meta"><p class="id">ID: G150</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing text based alternatives for live audio-only content</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/></head><body><h1>Providing text based alternatives for live audio-only content</h1><section class="meta"><p class="id">ID: G150</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
       <p>All technologies that present live audio-only information</p>
    </section><section id="description"><h2>Description</h2>
       <p>The objective of this technique is to allow users who cannot hear to be able to access real-time audio broadcasts. It is more difficult to create accurate real-time alternatives because there is little time to correct mistakes, to listen a second time or to consult someone to be sure the words are accurately reproduced. It is also harder to simplify or paraphrase information if it is flowing too quickly.</p>
diff --git a/techniques/general/G151.html b/techniques/general/G151.html
index 016b7aa526..1058cdefe9 100644
--- a/techniques/general/G151.html
+++ b/techniques/general/G151.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing a link to a text transcript of a prepared statement or script if the script is followed</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Providing a link to a text transcript of a prepared statement or script if the script is followed</h1><section class="meta"><p class="id">ID: G151</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing a link to a text transcript of a prepared statement or script if the script is followed</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/></head><body><h1>Providing a link to a text transcript of a prepared statement or script if the script is followed</h1><section class="meta"><p class="id">ID: G151</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
       <p>All technologies that present live audio-only information</p>
    </section><section id="description"><h2>Description</h2>
       <p>The objective of this technique is to provide a transcript or script if the live audio content is following a set script. Because it is prepared in advance, the script can be more accurate and complete than live transcription. However, the script will not be synchronized with the audio as it plays. Live audio should not deviate from the script for this technique.</p>
diff --git a/techniques/general/G152.html b/techniques/general/G152.html
index 1174733c40..12f7b1043c 100644
--- a/techniques/general/G152.html
+++ b/techniques/general/G152.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Setting animated gif images to stop blinking after n cycles (within 5 seconds)</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Setting animated gif images to stop blinking after n cycles (within 5 seconds)</h1><section class="meta"><p class="id">ID: G152</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Setting animated gif images to stop blinking after n cycles (within 5 seconds)</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/></head><body><h1>Setting animated gif images to stop blinking after n cycles (within 5 seconds)</h1><section class="meta"><p class="id">ID: G152</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
       <p>Any technology that supports animated gif (GIF89a)</p>
    </section><section id="description"><h2>Description</h2>
       <p>The objective of this technique is to ensure that animated gif images stop blinking within five seconds. There are three aspects of the design of animated gif images that work together to determine how long the image blinks (or otherwise animates):</p>
diff --git a/techniques/general/G153.html b/techniques/general/G153.html
index 8066b4a6bf..0d6d3d9df9 100644
--- a/techniques/general/G153.html
+++ b/techniques/general/G153.html
@@ -1,19 +1,19 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Making the text easier to read</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Making the text easier to read</h1><section class="meta"><p class="id">ID: G153</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Making the text easier to read</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/></head><body><h1>Making the text easier to read</h1><section class="meta"><p class="id">ID: G153</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
       <p>All technologies.</p>
    </section><section id="description"><h2>Description</h2>
       <p>The objective of this technique is to ensure that the text of the Web page is not difficult to read. Users with disabilities that make it difficult to decode words and sentences are likely to have trouble reading and understanding complex text. If the text does not require reading ability more advanced than the lower secondary education level, no supplements or alternative versions are needed.</p>
       <p>In order to reduce the complexity of the text:</p>
       <ul>
          <li>Develop a single topic or subtopic per paragraph.</li>
-         <li>Use the simplest sentence forms consistent with the purpose of the content. For example, the simplest sentence-form for English consists of Subject-Verb-Object, as in John hit the ball or The Web site conforms to WCAG 2.0.</li>
+         <li>Use the simplest sentence forms consistent with the purpose of the content. For example, the simplest sentence form for English consists of Subject-Verb-Object, as in <i>John hit the ball</i> or <i>The Web site conforms to WCAG 2.1</i>.</li>
          <li>Use sentences that are no longer than the typical accepted length for secondary education. (Note: In English that is 25 words.)</li>
          <li>Consider dividing longer sentences into two.</li>
-         <li>Use sentences that contain no more than two conjunction.</li>
+         <li>Use sentences that contain no more than two conjunctions.</li>
          <li>Indicate logical relationships between phrases, sentences, paragraphs, or sections of the text.</li>
          <li>Avoid professional jargon, slang, and other terms with a specialized meaning that may not be clear to people.</li>
          <li>Replace long or unfamiliar words with shorter, more common terms.</li>
          <li>Remove redundant words, that is, words that do not change the meaning of the sentence.</li>
-         <li>Use single nouns or short noun-phrases.</li>
+         <li>Use single nouns or short noun phrases.</li>
          <li>Remove complex words or phrases that could be replaced with more commonly used words without changing the meaning of the sentence.</li>
          <li>Use bulleted or numbered lists instead of paragraphs that contain long series of words or phrases separated by commas.</li>
          <li>Make clear pronoun references and references to other points in the document.</li>
@@ -37,4 +37,4 @@
             <li>Check #2 is true.</li>
          </ul>
       </section>
-   </section></body></html>
\ No newline at end of file
+   </section></body></html>
diff --git a/techniques/general/G155.html b/techniques/general/G155.html
index b57b7114cb..0b65a0d170 100644
--- a/techniques/general/G155.html
+++ b/techniques/general/G155.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing a checkbox in addition to a submit button</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Providing a checkbox in addition to a submit button</h1><section class="meta"><p class="id">ID: G155</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing a checkbox in addition to a submit button</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/></head><body><h1>Providing a checkbox in addition to a submit button</h1><section class="meta"><p class="id">ID: G155</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
       <p>Any technology</p>
    </section><section id="description"><h2>Description</h2>
       <p>The objective of this technique is to provide a checkbox that users must select to indicate they have reviewed their input and are ready for it to be committed. This is important when the nature of the transaction is such that it may not be reversible if input errors are subsequently discovered or when the result of an action is that data is deleted. The author provides a checkbox that is not selected when the page loads, with a label like "I confirm that the input is correct and am ready to submit" or "I confirm that I wish to delete this data". The checkbox should be located near the submit button to help the user notice it during the submission process. If the checkbox is not selected when the form is submitted, the input is rejected and the user is prompted to review their entry, select the checkbox, and resubmit. Only if the checkbox is selected will the input be accepted and the transaction processed.</p>
diff --git a/techniques/general/G156.html b/techniques/general/G156.html
index a16291e5e7..1e7805c9d5 100644
--- a/techniques/general/G156.html
+++ b/techniques/general/G156.html
@@ -1,12 +1,12 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using a technology that has commonly-available user agents that can change the foreground and background of blocks of text</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Using a technology that has commonly-available user agents that can change the foreground and background of blocks of text</h1><section class="meta"><p class="id">ID: G156</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using a technology that has commonly-available user agents that can change the foreground and background of blocks of text</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/></head><body><h1>Using a technology that has commonly-available user agents that can change the foreground and background of blocks of text</h1><section class="meta"><p class="id">ID: G156</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
       <p>All technologies</p>
    </section><section id="description"><h2>Description</h2>
       <p>Some people with cognitive disabilities require specific color combinations of foreground text and background to help them successfully understand the contents of the Web page. Most popular browsers provide the option to change colors settings globally within the browser. In this case the colors selected by the user override the foreground and background colors specified by the Web author.</p>
       <p>In order to meet this success criterion, the Web author would design the page so that it works with browsers that have these controls, and the author does not override these controls.</p>
-      <p>Note that overriding the foreground and background colors of all text on a page may hide visual clues to the grouping and organization of the Web page, making it much more difficult to understand and use. This technique may not be appropriate when background colors are used to delineate areas of the page. This technique may be appropriate for technologies and user agents that do not alter border colors when background colors are overridden. If background colors are used to delineate areas of the page, "<a href="https://www.w3.org/WAI/WCAG21/Techniques/css/C23">Specifying text and background colors of secondary content such as banners, features and navigation in CSS while not specifying text and background colors of the main content</a>" may be used to permit the user to control the colors of the main text while retaining the visual structure of the Web page.</p>
+      <p>Note that overriding the foreground and background colors of all text on a page may hide visual clues to the grouping and organization of the Web page, making it much more difficult to understand and use. This technique may not be appropriate when background colors are used to delineate areas of the page. This technique may be appropriate for technologies and user agents that do not alter border colors when background colors are overridden. If background colors are used to delineate areas of the page, "<a href="../css/C23">Specifying text and background colors of secondary content such as banners, features and navigation in CSS while not specifying text and background colors of the main content</a>" may be used to permit the user to control the colors of the main text while retaining the visual structure of the Web page.</p>
    </section><section id="examples"><h2>Examples</h2>
       <ul>
-         <li>A Web page is designed using HTML and CSS to specify the foreground and background colors. The user sets their own colors in Internet Explorer 7 and they can view the content with their chosen foreground and background colors.</li>
+         <li>A Web page is designed using HTML and CSS to specify the foreground and background colors. The user sets their own colors in the browser and they can view the content with their chosen foreground and background colors.</li>
          <li>A Web page is designed using HTML and CSS. There is a link on the page to instructions on how to set colors in various browsers.</li>
       </ul>
    </section><section id="tests"><h2>Tests</h2>
diff --git a/techniques/general/G157.html b/techniques/general/G157.html
index d7090ca21c..60c0c2d153 100644
--- a/techniques/general/G157.html
+++ b/techniques/general/G157.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Incorporating a live audio captioning service into a Web page</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Incorporating a live audio captioning service into a Web page</h1><section class="meta"><p class="id">ID: G157</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Incorporating a live audio captioning service into a Web page</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/></head><body><h1>Incorporating a live audio captioning service into a Web page</h1><section class="meta"><p class="id">ID: G157</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
       <p>All technologies that present live audio-only information.</p>
    </section><section id="description"><h2>Description</h2>
       <p>The objective of this technique is to use a real-time caption service to provide a text version of live audio content. Such services use a trained human operator who listens in to what is being said and uses a special keyboard to enter the text with only a small delay. They are able to capture a live event with a high degree of fidelity, and also to insert notes on any non spoken audio which is essential to understanding the event. The viewport containing the caption text is available on the same Web page as the live audio content.</p>
@@ -44,10 +44,7 @@
                <p>Web conferencing products with integrated support for captioning viewport</p>
                <ul>
                   <li>
-                        <a href="http://www.onlineconferencingsystems.com/vpat/">IDEAL Conference</a>
-                    </li>
-                  <li>
-                    	   <a href="http://www.adobe.com/products/adobeconnect/apps/closed-captioning.html">Acrobat Connect</a>
+                    	   <a href="http://www.adobe.com/products/adobeconnect/apps/closed-captioning.html">Adobe Connect</a>
                     </li>
                   <li>
                         <a href="http://captionfirst.com/">Caption First</a>
diff --git a/techniques/general/G158.html b/techniques/general/G158.html
index d6a937ba22..3c20a0efb5 100644
--- a/techniques/general/G158.html
+++ b/techniques/general/G158.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing an alternative for time-based media for audio-only content</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Providing an alternative for time-based media for audio-only content</h1><section class="meta"><p class="id">ID: G158</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing an alternative for time-based media for audio-only content</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/></head><body><h1>Providing an alternative for time-based media for audio-only content</h1><section class="meta"><p class="id">ID: G158</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
       <p>General technique. Applies to all technologies.</p>
    </section><section id="description"><h2>Description</h2>
       <p>The purpose of this technique is to provide an accessible alternative way of presenting the information in an audio-only presentation.</p>
diff --git a/techniques/general/G159.html b/techniques/general/G159.html
index aa483e47d8..6dc6badd74 100644
--- a/techniques/general/G159.html
+++ b/techniques/general/G159.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing an alternative for time-based media for video-only content</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Providing an alternative for time-based media for video-only content</h1><section class="meta"><p class="id">ID: G159</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing an alternative for time-based media for video-only content</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/></head><body><h1>Providing an alternative for time-based media for video-only content</h1><section class="meta"><p class="id">ID: G159</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
       <p>General technique. Applies to all technologies.</p>
    </section><section id="description"><h2>Description</h2>
       <p>The purpose of this technique is to provide an accessible alternative way of presenting the information in a video-only presentation.</p>
diff --git a/techniques/general/G160.html b/techniques/general/G160.html
index 82682c65e5..d5dd5bf2c2 100644
--- a/techniques/general/G160.html
+++ b/techniques/general/G160.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing sign language versions of information, ideas, and processes that must be understood in order to use the content</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Providing sign language versions of information, ideas, and processes that must be understood in order to use the content</h1><section class="meta"><p class="id">ID: G160</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing sign language versions of information, ideas, and processes that must be understood in order to use the content</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/></head><body><h1>Providing sign language versions of information, ideas, and processes that must be understood in order to use the content</h1><section class="meta"><p class="id">ID: G160</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
       <p>All technologies.</p>
    </section><section id="description"><h2>Description</h2>
       <p>For some people who are deaf or have certain cognitive disabilities, sign language may be their first language. A sign language version of the page may be easier for them to understand than a written language version. The objective of this technique is to provide sign language versions of content that help signing users understand difficult text that describes concepts or processes. The sign language content is provided in addition to the text.</p>
@@ -45,19 +45,16 @@
                   <a href="http://www.sign-lang.uni-hamburg.de/signingbooks/sbrc/grid/d71/guide12.htm">Techniques for filming sign language interpreters</a>
                 </li>
             <li>
-                  <a href="http://ieeexplore.ieee.org/application/enterprise/entconfirmation.jsp?arnumber=1251527&amp;icp=false">Perceptually optimised sign language video coding based on eye tracking analysis</a>
+                  <a href="https://www.researchgate.net/publication/221458250_Optimised_sign_language_video_coding_based_on_eye-tracking_analysis">Optimised sign language video coding based on eye tracking analysis</a>
                 </li>
             <li>
                   <a href="http://rid.org/">Registry of Interpreters for the Deaf</a>
                 </li>
-            <li>
-                  <a href="http://www.aslnetwork.com/">American Sign Language Interpreter Network</a>
-                </li>
             <li>
                   <a href="http://aslservices.com">American Sign Language Services, Inc.</a>
                 </li>
          </ul>
          <p>See also
-              <a href="https://www.w3.org/WAI/WCAG21/Understanding/sign-language-prerecorded">Related Resources for Success Criterion 1.2.6 - Sign Language</a>.</p>
+              <a href="../../Understanding/sign-language-prerecorded#resources">Related Resources for Success Criterion 1.2.6 - Sign Language</a>.</p>
       
    </section></body></html>
\ No newline at end of file
diff --git a/techniques/general/G161.html b/techniques/general/G161.html
index 02923842d6..3480579c6b 100644
--- a/techniques/general/G161.html
+++ b/techniques/general/G161.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing a search function to help users find content</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Providing a search function to help users find content</h1><section class="meta"><p class="id">ID: G161</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing a search function to help users find content</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/></head><body><h1>Providing a search function to help users find content</h1><section class="meta"><p class="id">ID: G161</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
       <p>All technologies that include forms.</p>
    </section><section id="description"><h2>Description</h2>
       <p>Providing a search function that searches your Web pages is a design strategy that offers users a way to find content. Users can locate content by searching for specific words or phrases, without needing to understand or navigate through the structure of the Web site. This can be a quicker or easier way to find content, particularly on large sites.</p>
diff --git a/techniques/general/G162.html b/techniques/general/G162.html
index eee0aeb4b9..e3e1924860 100644
--- a/techniques/general/G162.html
+++ b/techniques/general/G162.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Positioning labels to maximize predictability of relationships</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Positioning labels to maximize predictability of relationships</h1><section class="meta"><p class="id">ID: G162</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Positioning labels to maximize predictability of relationships</title><link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/></head><body><h1>Positioning labels to maximize predictability of relationships</h1><section class="meta"><p class="id">ID: G162</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
       <p>All technologies that support forms</p>
    </section><section id="description"><h2>Description</h2>
       <p>When labels for form fields are positioned where the user expects them visually, it is easier to understand complex forms and to locate specific fields. Labels for most fields are positioned immediately before the field, that is, for left-to-right languages, either to the left of the field or above it, and for right-to-left languages, to the right of the field or above it. Labels for radio buttons and checkboxes are positioned after the field.</p>
@@ -8,30 +8,22 @@
    </section><section id="examples"><h2>Examples</h2>
       <section class="example">
          <h3>Labels above text fields</h3>
-         
-            <figure id="figure-labels-above">
-            	<img src="img/lbl-position_01.gif"/>
-            	<figcaption>Two form fields with labels positioned immediately above them.</figcaption>
-              </figure>
-         
+            <div>
+            	<img alt="Two form fields with labels positioned immediately above them." src="img/lbl-position_01.gif"/>
+            </div>
       </section>
       <section class="example">
          <h3>Labels to the left of text fields</h3>
-         
-            <figure id="figure-labels-left">
-            	<img src="img/lbl-position_02.gif"/>
-            	<figcaption>Two form fields with labels positioned immediately to the left.</figcaption>
-              </figure>
+         <div>
+            <img alt="Two form fields with labels positioned immediately to the left." src="img/lbl-position_02.gif"/>
+         </div>
          
       </section>
       <section class="example">
          <h3>Labels to the right of radio buttons</h3>
-         
-            <figure id="figure-labels-right">
-            	<img src="img/lbl-position_03.gif"/>
-            	<figcaption>A group of form controls contains two radio buttons with labels positioned to the right of the radio buttons.</figcaption>
-              </figure>
-         
+         <div>
+            <img alt="A group of form controls contains two radio buttons with labels positioned to the right of the radio buttons." src="img/lbl-position_03.gif"/>
+         </div>
       </section>
    </section><section id="tests"><h2>Tests</h2>
       <section class="procedure"><h3>Procedure</h3>
diff --git a/techniques/general/G163.html b/techniques/general/G163.html
index 8fd3f38693..d829729920 100644
--- a/techniques/general/G163.html
+++ b/techniques/general/G163.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using standard diacritical marks that can be turned off</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Using standard diacritical marks that can be turned off</h1><section class="meta"><p class="id">ID: G163</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using standard diacritical marks that can be turned off</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/></head><body><h1>Using standard diacritical marks that can be turned off</h1><section class="meta"><p class="id">ID: G163</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
       <p>All technologies.</p>
    </section><section id="description"><h2>Description</h2>
       <p>The objective of this technique is to provide users with a mechanism for turning standard diacritical marks on or off.</p>
@@ -12,7 +12,7 @@
                <li>Use the footmark (‘) for the ʻokina, but do not display macrons</li>
                <li>Show all diacritical markings</li>
             </ul>
-            <p>The visitor selects the level he or she prefers, and this preference is stored into a session cookie. All subsequent pages during that same session have access to the cookie, and show or hide diacritics according to the selected level.</p>
+            <p>Visitors select the level they prefer, and this preference is stored into a session cookie. All subsequent pages during that same session have access to the cookie, and show or hide diacritics according to the selected level.</p>
             <p>On the server side, content is stored with all diacritical markings. If a visitor prefers fewer or no diacritics, a server-side function replaces or removes diacritics as desired before sending the response.</p>
             <p>Example at
                 <a href="http://www.hawaii.edu/site/info/diacritics.php">Hawaiian language online</a>.</p>
@@ -30,7 +30,7 @@
       </section>
       <section class="results"><h3>Expected Results</h3>
          <ul>
-            <li>Checks #1 - #4 are true.</li>
+            <li>Checks #1-4 are true.</li>
          </ul>
       </section>
    </section></body></html>
\ No newline at end of file
diff --git a/techniques/general/G164.html b/techniques/general/G164.html
index 94063e020c..1e363b1893 100644
--- a/techniques/general/G164.html
+++ b/techniques/general/G164.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing a stated time within which an online request (or transaction) may be amended or canceled by the user after making the request</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Providing a stated time within which an online request (or transaction) may be amended or canceled by the user after making the request</h1><section class="meta"><p class="id">ID: G164</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing a stated time within which an online request (or transaction) may be amended or canceled by the user after making the request</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/></head><body><h1>Providing a stated time within which an online request (or transaction) may be amended or canceled by the user after making the request</h1><section class="meta"><p class="id">ID: G164</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
       <p>All technologies that provide forms.</p>
    </section><section id="description"><h2>Description</h2>
       <p>The objective of this technique is to allow users to recover from errors made when placing an order by providing them with a period of time during which they can cancel or change the order. In general, a contract or an order is a legal commitment and cannot be canceled. However, a Web site may choose to offer this capability, and it provides a way for users to recover from errors.</p>
diff --git a/techniques/general/G165.html b/techniques/general/G165.html
index bfde40e27a..fd0fa16830 100644
--- a/techniques/general/G165.html
+++ b/techniques/general/G165.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using the default focus indicator for the platform so that high visibility default focus indicators will carry over</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Using the default focus indicator for the platform so that high visibility default focus indicators will carry over</h1><section class="meta"><p class="id">ID: G165</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using the default focus indicator for the platform so that high visibility default focus indicators will carry over</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/></head><body><h1>Using the default focus indicator for the platform so that high visibility default focus indicators will carry over</h1><section class="meta"><p class="id">ID: G165</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
       <p>Technologies that contain focusable elements</p>
    </section><section id="description"><h2>Description</h2>
       <p>Operating systems have a native indication of focus, which is available in many user agents. The default rendering of the focus indicator isn't always highly visible and may even be difficult to see against certain backgrounds. However, many platforms allow the user to customize the rendering of this focus indicator. Assistive technology can also change the appearance of the native focus indicator. If you use the native focus indicator, any system-wide settings for its visibility will carry over to the Web page. If you draw your own focus indicator, for example by coloring sections of the page in response to user action, these settings will not carry over, and AT will not usually be able to find your focus indicator.</p>
@@ -27,7 +27,11 @@
          </ul>
       </section>
    </section><section id="related"><h2>Related Techniques</h2><ul>
-      <li><a href="../general/G149">G149</a></li>
+      <li><a href="G149">G149</a></li>
       <li><a href="../css/C15">C15</a></li>
       <li><a href="../client-side-script/SCR31">SCR31</a></li>
+      <li><a href="../css/C15">C15</a></li>
+      <li><a href="G195">G195</a></li>
+      <li><a href="../css/C40">C40</a></li>
+      <li><a href="../css/C45">C45</a></li>
    </ul></section></body></html>
\ No newline at end of file
diff --git a/techniques/general/G166.html b/techniques/general/G166.html
index caa39661f8..8b840f5ec8 100644
--- a/techniques/general/G166.html
+++ b/techniques/general/G166.html
@@ -1,31 +1,55 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing audio that describes the important video content and describing it as such</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Providing audio that describes the important video content and describing it as such</h1><section class="meta"><p class="id">ID: G166</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>Providing audio that describes the important video content and describing it as such</title>
+		<link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+	</head>
+	<body>
+		<h1>Providing audio that describes the important video content and describing it as such</h1><section class="meta">
+			<p class="id">ID: G166</p>
+			<p class="technology">Technology: general</p>
+			<p class="type">Type: Technique</p>
+		</section>
+		<section id="applicability">
+			<h2>When to Use</h2>
       <p>All technologies that can contain video content</p>
-   </section><section id="description"><h2>Description</h2>
+		</section>
+		<section id="description">
+			<h2>Description</h2>
       <p>Video-only content is inaccessible to people who are blind and to some who have low vision. Therefore, it is important for them to have an audio alternative. One way of doing this is to provide an audio track describing the information in the video. The audio should be a common audio format used on the internet, such as MP3.</p>
-   </section><section id="examples"><h2>Examples</h2>
+		</section>
+		<section id="examples">
+			<h2>Examples</h2>
       <section class="example">
-         
-            <p>A Web page has a link to a video-only presentation of a spaceship landing on Mars. The link to the video is a picture of a spaceship. Near the video is a link to an audio file of a person describing the video. This would look something like the following code example in HTML.</p>
-         
-         <pre xml:space="preserve">
-              &lt;a href="../video/marslanding.mp4"&gt;&lt;img src="../images/spaceship.jpg" 
-                alt="Mars landing, video-only" width="193" height="255"/&gt;&lt;/a&gt;
-                &lt;br /&gt;
-                &lt;a href="Mars_landing_audio.mp3"&gt;Audio description of "Mars Landing"&lt;/a&gt;
-            </pre>
+				<p>A Web page has a link to a video-only presentation of a spaceship landing on Mars. The link to the video is a picture of a spaceship. Near the video is a link to an audio file of a person describing the video. This would look something like the following code example in HTML.</p>
+<pre xml:space="preserve"><code class="language-html">&lt;a href="../video/marslanding.mp4"&gt;
+  &lt;img src="../images/spaceship.jpg" alt="Mars landing, video-only"
+   width="193" height="255"/&gt;
+&lt;/a&gt;
+&lt;p&gt;&lt;a href="mars-landing-audio.mp3"&gt;Audio description of "Mars Landing"&lt;/a&gt;&lt;/p&gt;</code></pre>
       </section>
-   </section><section id="tests"><h2>Tests</h2>
-      <section class="procedure"><h3>Procedure</h3>
-         <p>For a Web page that contains video-only content:</p>
-         <ol>
-            <li>Check that there is link to an audio alternative which describes the contents of the video immediately before or after the video-only content.</li>
-         </ol>
+		</section>
+		<section id="tests">
+			<h2>Tests</h2>
+      <section class="procedure">
+				<h3>Procedure</h3>
+				<p>For a Web page that contains video-only content:</p>
+				<ol>
+					<li>Check that there is link to an audio alternative which describes the contents of the video immediately before or after the video-only content.</li>
+				</ol>
       </section>
-      <section class="results"><h3>Expected Results</h3>
-         <ul>
-            <li>Check #1 is true.</li>
-         </ul>
+      <section class="results">
+				<h3>Expected Results</h3>
+				<ul>
+					<li>Check #1 is true.</li>
+				</ul>
       </section>
-   </section><section id="related"><h2>Related Techniques</h2><ul>
-      <li><a href="../general/G159">G159</a></li>
-   </ul></section></body></html>
\ No newline at end of file
+		</section>
+		<section id="related">
+			<h2>Related Techniques</h2>
+			<ul>
+				<li><a href="../general/G159">G159</a></li>
+			</ul>
+		</section>
+	</body>
+	</html>
\ No newline at end of file
diff --git a/techniques/general/G167.html b/techniques/general/G167.html
index 92bf6a355a..e1c364fe83 100644
--- a/techniques/general/G167.html
+++ b/techniques/general/G167.html
@@ -1,26 +1,25 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using an adjacent button to label the purpose of a field</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Using an adjacent button to label the purpose of a field</h1><section class="meta"><p class="id">ID: G167</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using an adjacent button to label the purpose of a field</title><link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/></head><body><h1>Using an adjacent button to label the purpose of a field</h1><section class="meta"><p class="id">ID: G167</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
       <p>All technologies that support forms</p>
    </section><section id="description"><h2>Description</h2>
       <p>When a button invokes a function on an input field, has a clear text label, and is rendered adjacent to the input field, the button also acts as a label for the input field. This label helps users understand the purpose of the field without introducing repetitive text on the Web page. Buttons that label single text fields typically follow the input field.</p>
       <div class="note">
          <p>The field must also have a programmatically determined name, per
-              <a href="https://www.w3.org/WAI/WCAG21/Understanding/name-role-value">Success Criterion 4.1.2</a>.</p>
+              <a href="../../Understanding/name-role-value">Success Criterion 4.1.2</a>.</p>
       </div>
    </section><section id="examples"><h2>Examples</h2>
       <section class="example">
          <h3>A search function</h3>
          
             <p>A Web page contains a text field where the user can enter search terms and a button labeled "Search" for performing the search. The button is positioned right after the text field so that it is clear to the user that the text field is where to enter the search term.</p>
-            <figure id="figure-button-label-field">
-            	<img src="img/button-as-label.jpg"/>
-            	<figcaption>A text field with a button positioned to the right demonstrating the use of a button to label a field.</figcaption>
-            </figure>
+            <div>
+            	<img alt="A text field with a button positioned to the right demonstrating the use of a button to label a field." src="img/button-as-label.jpg"/>
+            </div>
          
       </section>
       <section class="example">
          <h3>Picking a form</h3>
          
-            <p>A user in the United States must fill in a form. Since the laws and requirements are different in different states within the United States, the user must select the version of a form for his state of residence. A dropdown list allows the user to pick a state. The adjacent button is labeled "Get Form for State." Pressing the button takes the user to the Web page containing the form for the selected state.</p>
+            <p>A user in the United States must fill in a form. Since the laws and requirements are different in different states within the United States, the user must select the version of a form for their state of residence. A dropdown list allows the user to pick a state. The adjacent button is labeled "Get Form for State." Pressing the button takes the user to the Web page containing the form for the selected state.</p>
          
       </section>
    </section><section id="tests"><h2>Tests</h2>
diff --git a/techniques/general/G168.html b/techniques/general/G168.html
index 74e9c0325d..a5b05e9c85 100644
--- a/techniques/general/G168.html
+++ b/techniques/general/G168.html
@@ -1,14 +1,14 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Requesting confirmation to continue with selected action</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Requesting confirmation to continue with selected action</h1><section class="meta"><p class="id">ID: G168</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Requesting confirmation to continue with selected action</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/></head><body><h1>Requesting confirmation to continue with selected action</h1><section class="meta"><p class="id">ID: G168</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
       <p>All technologies.</p>
    </section><section id="description"><h2>Description</h2>
-      <p>This technique is to seek confirmation from the user that the selected action is his or her intended action. Use this technique in situations where the action can not be undone after it has been followed through. This will help users avoid submitting a form or deleting data by mistake.</p>
+      <p>This technique is to seek confirmation from the user that the selected action is their intended action. Use this technique in situations where the action can not be undone after it has been followed through. This will help users avoid submitting a form or deleting data by mistake.</p>
       <p>For example, this may occur when the user expects the 'submit' and 'cancel' buttons to occur in an order contrary to what is provided and selects a button too quickly to notice the unexpected order. Presenting the user with a confirmation request allows the user to recognize the error and either stop the submission of data or stop the loss of entered data.</p>
       <p>The request for confirmation should inform the user of the action that was selected and the consequences of continuing with the action.</p>
    </section><section id="examples"><h2>Examples</h2>
       <section class="example">
          <h3>Airline travel</h3>
          
-            <p>An online travel Web site lets users create travel itineraries that reserve seats with different airlines. Users may look up, amend and cancel their current itineraries. If the user needs to cancel his travel plans, he finds the itinerary on the Web page and deletes it from his list of current itineraries. This action results in the cancellation of his seat reservations and is not reversible. The user is informed that the selected action will cancel their current seat reservations and that it may not be possible to make a comparable booking on the same flights once this action has been taken. The user is asked to confirm or cancel the deletion of the itinerary.</p>
+            <p>An online travel Web site lets users create travel itineraries that reserve seats with different airlines. Users may look up, amend and cancel their current itineraries. If the user needs to cancel their travel plans, they find the itinerary on the Web page and delete it from their list of current itineraries. This action results in the cancellation of their seat reservations and is not reversible. The user is informed that the selected action will cancel their current seat reservations and that it may not be possible to make a comparable booking on the same flights once this action has been taken. The user is asked to confirm or cancel the deletion of the itinerary.</p>
          
       </section>
       <section class="example">
diff --git a/techniques/general/G169.html b/techniques/general/G169.html
index f79670b526..68956131b8 100644
--- a/techniques/general/G169.html
+++ b/techniques/general/G169.html
@@ -1,36 +1,56 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Aligning text on only one side</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Aligning text on only one side</h1><section class="meta"><p class="id">ID: G169</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>Aligning text on only one side</title>
+		<link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+	</head>
+	<body>
+		<h1>Aligning text on only one side</h1>
+		<section class="meta">
+			<p class="id">ID: G169</p>
+			<p class="technology">Technology: general</p>
+			<p class="type">Type: Technique</p>
+		</section>
+		<section id="applicability">
+			<h2>When to Use</h2>
       <p>All technologies.</p>
-   </section><section id="description"><h2>Description</h2>
+		</section>
+		<section id="description">
+			<h2>Description</h2>
       <p>Many people with cognitive disabilities have a great deal of trouble with blocks of text that are justified (aligned to both the left and the right margins). The spaces between words create "rivers of white" running down the page, which can make the text difficult for some people to read. This failure describes situations where this confusing text layout occurs. The best way to avoid this problem is not to create text layout that is fully justified.</p>
-   </section><section id="examples"><h2>Examples</h2>
+		</section>
+		<section id="examples">
+			<h2>Examples</h2>
       <section class="example">
-         
-            <p>For most technologies, simply leave out any alignment declarations. For example, the following text will be justified to the left by default in HTML where the language of the page is left to right.</p>
-         
-         <pre xml:space="preserve">
-              &lt;p&gt;
-                Lorem ipsum dolor sit amet, ...
-                &lt;/p&gt;
-            </pre>
+				<p>For most technologies, simply leave out any alignment declarations. For example, the following text will be justified to the left by default in <abbr title="HyperText Markup Language">HTML</abbr> where the language of the page is left to right.</p> 
+	<pre xml:space="preserve"><code class="language-html">&lt;p&gt;Lorem ipsum dolor sit amet, ...&lt;/p&gt;</code></pre>
       </section>
       <section class="example">
-         
-            <p>A Web page includes sections with mixed alignment. Paragraphs in the body of the page are aligned to the left margin. The text also includes a number of pulled quotations which are aligned to the right margin.</p>
-         
+				<p>A Web page includes sections with mixed alignment. Paragraphs in the body of the page are aligned to the left margin. The text also includes a number of pulled quotations which are aligned to the right margin.</p> 
       </section>
-   </section><section id="tests"><h2>Tests</h2>
-      <section class="procedure"><h3>Procedure</h3>
-         <ol>
-            <li>Open the page in a common browser.</li>
-            <li>Verify that content is not justified (aligned to both the left and the right margins).</li>
-         </ol>
+		</section>
+		<section id="tests">
+			<h2>Tests</h2>
+      <section class="procedure">
+				<h3>Procedure</h3>
+				<ol>
+					<li>Open the page in a common browser.</li>
+					<li>Verify that content is not justified (aligned to both the left and the right margins).</li>
+				</ol>
+			</section>
+      <section class="results">
+				<h3>Expected Results</h3>
+				<ul>
+					<li>Check #2 is true.</li>
+				</ul>
       </section>
-      <section class="results"><h3>Expected Results</h3>
-         <ul>
-            <li>Test procedure #2 is true.</li>
-         </ul>
-      </section>
-   </section><section id="related"><h2>Related Techniques</h2><ul>
-      <li><a href="../css/C22">C22</a></li>
-      <li><a href="../failures/F88">F88</a></li>
-   </ul></section></body></html>
\ No newline at end of file
+		</section>
+		<section id="related">
+			<h2>Related Techniques</h2>
+			<ul>
+      	<li><a href="../css/C22">C22</a></li>
+      	<li><a href="../failures/F88">F88</a></li>
+			</ul>
+		</section>
+	</body>
+	</html>
\ No newline at end of file
diff --git a/techniques/general/G17.html b/techniques/general/G17.html
index e565671603..32532c6cd6 100644
--- a/techniques/general/G17.html
+++ b/techniques/general/G17.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Ensuring that a contrast ratio of at least 7:1 exists between text (and images of text)
-          and background behind the text</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Ensuring that a contrast ratio of at least 7:1 exists between text (and images of text)
+          and background behind the text</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/></head><body><h1>Ensuring that a contrast ratio of at least 7:1 exists between text (and images of text)
           and background behind the text</h1><section class="meta"><p class="id">ID: G17</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
       <p>Any technology that produces visual output.</p>
    </section><section id="description"><h2>Description</h2>
@@ -53,7 +53,7 @@
                      <ul>
                         <li>if R
                           sRGB
-                          &lt;= 0.03928 then
+                          &lt;= 0.04045 then
                           <strong>R</strong>
                           = R
                           sRGB
@@ -64,7 +64,7 @@
                           +0.055)/1.055) ^ 2.4</li>
                         <li>if G
                           sRGB
-                          &lt;= 0.03928 then
+                          &lt;= 0.04045 then
                           <strong>G</strong>
                           = G
                           sRGB
@@ -75,7 +75,7 @@
                           +0.055)/1.055) ^ 2.4</li>
                         <li>if B
                           sRGB
-                          &lt;= 0.03928 then
+                          &lt;= 0.04045 then
                           <strong>B</strong>
                           = B
                           sRGB
@@ -147,6 +147,7 @@
             <li>#4 is true</li>
          </ul>
       </section>
+      <p class="note">Before May 2021 the value of 0.04045 in the definition was different (0.03928). It was taken from an older version of the specification and has been updated. It has no practical effect on the calculations in the context of these guidelines.</p>
    </section><section id="related"><h2>Related Techniques</h2><ul>
       <li><a href="../general/G148">G148</a></li>
       <li><a href="../general/G174">G174</a></li>
@@ -154,16 +155,13 @@
       
          <ul>
             <li>
-                  <a href="https://www.paciellogroup.com/resources/contrastanalyser/">Contrast Analyser – Application</a>
+                  <a href="https://github.com/ThePacielloGroup/CCAe">TPGi Colour Contrast Analyser (CCA) – Application</a>
                 </li>
             <li>
                   <a href="http://juicystudio.com/services/luminositycontrastratio.php">Contrast Ratio Analyser - online service</a>
                 </li>
             <li>
-                  <a href="http://juicystudio.com/article/colour-contrast-analyser-firefox-extension.php">Colour Contrast Analyser - Firefox Extension</a>
-                </li>
-            <li>
-                  <a href="http://trace.wisc.edu/contrast-ratio-examples/">Color Contrast Samples</a>
+                  <a href="https://web.archive.org/web/20160814160227/http://trace.wisc.edu/contrast-ratio-examples">Color Contrast Samples</a>
                 </li>
             <li>
                   <a href="https://www.w3.org/Graphics/atypical-color-response">Atypical colour response</a>
diff --git a/techniques/general/G170.html b/techniques/general/G170.html
index 7f0b521b21..382111a34a 100644
--- a/techniques/general/G170.html
+++ b/techniques/general/G170.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing a control near the beginning of the Web page that turns off sounds that play automatically</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Providing a control near the beginning of the Web page that turns off sounds that play automatically</h1><section class="meta"><p class="id">ID: G170</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing a control near the beginning of the Web page that turns off sounds that play automatically</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/></head><body><h1>Providing a control near the beginning of the Web page that turns off sounds that play automatically</h1><section class="meta"><p class="id">ID: G170</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
       <p>All technologies where sound can be played automatically.</p>
    </section><section id="description"><h2>Description</h2>
       <p>The intent of this technique is to allow a user to turn off sounds that start automatically when a page loads. The control to turn off the sounds should be located near the beginning of the page to allow the control to be easily and quickly discovered by users. This is useful for those who utilize assistive technologies (such as screen readers, screen magnifiers, switch mechanisms, etc.) and those who may not (such as those with cognitive, learning and language disabilities).</p>
diff --git a/techniques/general/G171.html b/techniques/general/G171.html
index d3f64e9686..dd25698023 100644
--- a/techniques/general/G171.html
+++ b/techniques/general/G171.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Playing sounds only on user request</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Playing sounds only on user request</h1><section class="meta"><p class="id">ID: G171</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Playing sounds only on user request</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/></head><body><h1>Playing sounds only on user request</h1><section class="meta"><p class="id">ID: G171</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
       <p>All technologies that can play sound.</p>
    </section><section id="description"><h2>Description</h2>
       <p>The intent of this technique is to allow a user to control the use of sounds in Web content. Someone that uses a screen reader may find it very distracting and difficult to listen to their screen reader if there are also sounds coming from Web content. Providing a way to play sounds only upon request will give a user the control needed to listen to any sounds or other audio without interfering with the output from a screen reader.</p>
diff --git a/techniques/general/G172.html b/techniques/general/G172.html
index bfc2f214fe..ee07a6dd44 100644
--- a/techniques/general/G172.html
+++ b/techniques/general/G172.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing a mechanism to remove full justification of text</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Providing a mechanism to remove full justification of text</h1><section class="meta"><p class="id">ID: G172</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing a mechanism to remove full justification of text</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/></head><body><h1>Providing a mechanism to remove full justification of text</h1><section class="meta"><p class="id">ID: G172</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
       <p>All technologies.</p>
    </section><section id="description"><h2>Description</h2>
       <p>The objective of this technique is to provide a version of the page that does not have full justification (justified both left and right).</p>
@@ -7,9 +7,9 @@
          <p>This technique can be used in combination with a style switching technique to present a page that is a
               <a>conforming alternate version</a>
               for non-conforming content. Refer to
-              <a href="https://www.w3.org/WAI/WCAG21/Techniques/css/C29">C29: Using a style switcher to provide a conforming alternate version</a>
+              <a href="../css/C29">C29: Using a style switcher to provide a conforming alternate version</a>
               and
-              <a href="https://www.w3.org/WAI/WCAG21/Understanding/conformance#conforming-alt-versions">Understanding Conforming Alternate Versions</a>
+              <a href="../../Understanding/conformance#conforming-alt-versions">Understanding Conforming Alternate Versions</a>
               for more information.</p>
       </div>
    </section><section id="examples"><h2>Examples</h2>
diff --git a/techniques/general/G173.html b/techniques/general/G173.html
index 0c0c413ccb..aa3ed47500 100644
--- a/techniques/general/G173.html
+++ b/techniques/general/G173.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing a version of a movie with audio descriptions</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Providing a version of a movie with audio descriptions</h1><section class="meta"><p class="id">ID: G173</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing a version of a movie with audio descriptions</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/></head><body><h1>Providing a version of a movie with audio descriptions</h1><section class="meta"><p class="id">ID: G173</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
       <p>Any technology that supports audio and video.</p>
    </section><section id="description"><h2>Description</h2>
       <p>The objective of this technique is to provide a second version of video content that provides audio desciptions so that it is possible for people who cannot see to be able to understand audio-visual material.</p>
diff --git a/techniques/general/G174.html b/techniques/general/G174.html
index e4d13fd915..f78fd023c0 100644
--- a/techniques/general/G174.html
+++ b/techniques/general/G174.html
@@ -1,10 +1,10 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing a control with a sufficient contrast ratio that allows users to switch to a presentation that uses sufficient contrast</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Providing a control with a sufficient contrast ratio that allows users to switch to a presentation that uses sufficient contrast</h1><section class="meta"><p class="id">ID: G174</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing a control with a sufficient contrast ratio that allows users to switch to a presentation that uses sufficient contrast</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/></head><body><h1>Providing a control with a sufficient contrast ratio that allows users to switch to a presentation that uses sufficient contrast</h1><section class="meta"><p class="id">ID: G174</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
       <p>Any technology.</p>
    </section><section id="description"><h2>Description</h2>
       <p>When the contrast between the text and its background for some portion of the page has not been designed to meet the contrast level for
-            <a href="https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum">Success Criterion 1.4.3</a>
+            <a href="../../Understanding/contrast-minimum">Success Criterion 1.4.3</a>
             or
-            <a href="https://www.w3.org/WAI/WCAG21/Understanding/contrast-enhanced">1.4.6</a>, it is possible to meet these guidelines using the "Alternate Version" clause in the conformance requirements (<a href="https://www.w3.org/WAI/WCAG21/Understanding/conformance#conf-req1">Conformance Requirement 1</a>). A link or control on the page can either change the page so that all aspects conform, or it could take the viewer to a new version of the page that does conform at the desired level. Placing the link or control prominently on the page will assist users in accessing the conforming content readily.</p>
+            <a href="../../Understanding/contrast-enhanced">1.4.6</a>, it is possible to meet these guidelines using the "Alternate Version" clause in the conformance requirements (<a href="../../Understanding/conformance#conf-req1">Conformance Requirement 1</a>). A link or control on the page can either change the page so that all aspects conform, or it could take the viewer to a new version of the page that does conform at the desired level. Placing the link or control prominently on the page will assist users in accessing the conforming content readily.</p>
       <p>For this technique to be used successfully, three things must be true:</p>
       <ol>
          <li>The link or control on the original page must itself meet the contrast requirement of the desired SC. (If the user cannot see the control they may not be able to use it to go to the new page.)</li>
@@ -16,9 +16,9 @@
          <p>This technique can be used in combination with a style switching technique to present a page that is a
               <a>conforming alternate version</a>
               for non-conforming content. Refer to
-              <a href="https://www.w3.org/WAI/WCAG21/Techniques/css/C29">C29: Using a style switcher to provide a conforming alternate version</a>
+              <a href="../css/C29">C29: Using a style switcher to provide a conforming alternate version</a>
               and
-              <a href="https://www.w3.org/WAI/WCAG21/Understanding/conformance#conforming-alt-versions">Understanding Conforming Alternate Versions</a>
+              <a href="../../Understanding/conformance#conforming-alt-versions">Understanding Conforming Alternate Versions</a>
               for more information.</p>
       </div>
    </section><section id="examples"><h2>Examples</h2>
diff --git a/techniques/general/G175.html b/techniques/general/G175.html
index 9de6fc87ff..9dc5716048 100644
--- a/techniques/general/G175.html
+++ b/techniques/general/G175.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing a multi color selection tool on the page for foreground and background colors</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Providing a multi color selection tool on the page for foreground and background colors</h1><section class="meta"><p class="id">ID: G175</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing a multi color selection tool on the page for foreground and background colors</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/></head><body><h1>Providing a multi color selection tool on the page for foreground and background colors</h1><section class="meta"><p class="id">ID: G175</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
       <p>Any technology that allows users to store preferences for reuse on other pages.</p>
    </section><section id="description"><h2>Description</h2>
       <p>The objective of this technique is to include a control on a Web page or set of Web pages that allows users to specify preferred foreground and background colors for the content. This technique can be implemented using any technology that allows users to store preferences that can be used across pages. Using this technique, an author includes a color picker control on the site which allows users to select and save foreground and background color preferences for use on other pages in a site. Pages are designed to look for these preferences and adapt accordingly when saved settings are found.</p>
@@ -17,7 +17,7 @@
             	<img src="img/opencolorpicker.jpg"/>
             	<figcaption>Screenshot showing the color selection tool with the color picker opened to select a color for the foreground. The user is presented with a choice of 216 colors.</figcaption>
             </figure>
-            <p class="working-example">Here is a working example of this technique implemented using PHP, Javascript, CSS and XHTML:
+            <p class="working-example">Here is a working example of this technique implemented using PHP, Javascript, CSS and HTML:
                 <a href="../../working-examples/colour-picker/">Color Picker Example</a>.</p>
          
       </section>
diff --git a/techniques/general/G176.html b/techniques/general/G176.html
index 30dd527eb7..b77f6f0aab 100644
--- a/techniques/general/G176.html
+++ b/techniques/general/G176.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Keeping the flashing area small enough</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Keeping the flashing area small enough</h1><section class="meta"><p class="id">ID: G176</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Keeping the flashing area small enough</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/></head><body><h1>Keeping the flashing area small enough</h1><section class="meta"><p class="id">ID: G176</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
       <p>Appropriate to use for all general Web content including special cases like material that is specifically designed for a display in a foyer.</p>
    </section><section id="description"><h2>Description</h2>
       <p>The purpose of this technique is to provide an easy way to pass the success criterion for things that flash, but are small.</p>
@@ -22,7 +22,7 @@
             <strong>any single flashing event on a screen (there is no other flashing on screen) that is smaller than a contiguous area of 21,824 sq pixels (any shape), would pass the General and Red Flash Thresholds</strong>.</p>
       <p>1024 x 768 was chosen because it represents the most common screen size. It also works with higher resolution screens since the tighter pixel density would result in a smaller and safer image size.</p>
       <p>Users with lower resolution displays or that enlarge or view their screens closely would have a higher risk depending on the viewing distance. To address the needs of this group,
-            <a href="#G19"></a>
+            <a href="../general/G19">G19</a>
             should be used since it is independent of screen resolution or viewing distance.</p>
       <p id="smallsafe2">
             <strong>Formula 2: Small Safe Area for Known Displays</strong>
@@ -79,10 +79,10 @@
                   <a href="http://www.hardingfpa.com/">Harding FPA Web Site</a>
                 </li>
             <li>
-                  <a href="http://trace.wisc.edu/peat/">Trace Center Photosensitive Epilepsy Analysis Tool (PEAT)</a>
+                  <a href="https://trace.umd.edu/peat/">Trace Center Photosensitive Epilepsy Analysis Tool (PEAT)</a>
                 </li>
             <li>
-                  <a href="http://trace.wisc.edu/peat/photosensitive.php">Information about Photosensitive Seizure Disorders</a>
+                  <a href="https://trace.umd.edu/information-about-photosensitive-seizure-disorders/">Information about Photosensitive Seizure Disorders</a>
                 </li>
             <li>
                   <a href="https://www.epilepsy.org.uk/">Epilepsy Action</a>
@@ -90,9 +90,6 @@
             <li>
                   <a href="http://www.epilepsy.com/learn/triggers-seizures/photosensitivity-and-seizures">Epilepsy Foundation</a>
                 </li>
-            <li>
-                  <a href="http://www.ofcom.org.uk/static/archive/itc/itc_publications/codes_guidance/flashing_images/index.asp.html">ITC Guidance Note for Licensees on Flashing Images and Regular Patterns in Television</a>
-                </li>
          </ul>
       
    </section></body></html>
\ No newline at end of file
diff --git a/techniques/general/G177.html b/techniques/general/G177.html
index 03608f617f..d067637e71 100644
--- a/techniques/general/G177.html
+++ b/techniques/general/G177.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing suggested correction text</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Providing suggested correction text</h1><section class="meta"><p class="id">ID: G177</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing suggested correction text</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/></head><body><h1>Providing suggested correction text</h1><section class="meta"><p class="id">ID: G177</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
       <p>Content that accepts user data input, with restrictions on the format, value, and/or type of the input.</p>
    </section><section id="description"><h2>Description</h2>
       <p>The objective of this technique is to suggest correct text where the information supplied by the user is not accepted and possible correct text is known. The suggestions may include correct spelling or similar text from a known pool of possible text.</p>
diff --git a/techniques/general/G178.html b/techniques/general/G178.html
index d1b97757db..fcb9d888d1 100644
--- a/techniques/general/G178.html
+++ b/techniques/general/G178.html
@@ -1,25 +1,17 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing controls on the Web page that allow users to incrementally change the size of all text on the page up to 200 percent</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Providing controls on the Web page that allow users to incrementally change the size of all text on the page up to 200 percent</h1><section class="meta"><p class="id">ID: G178</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing controls on the Web page that allow users to incrementally change the size of all text on the page up to 200 percent</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/></head><body><h1>Providing controls on the Web page that allow users to incrementally change the size of all text on the page up to 200 percent</h1><section class="meta"><p class="id">ID: G178</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
       <p>All technologies.</p>
    </section><section id="description"><h2>Description</h2>
       <p>The purpose of this technique is to provide a mechanism on the Web page to incrementally increase the size of text. Many people with low vision do not use magnifying software, and they may not be familiar with their browser's text size adjustments. This may be particularly true of older people who are learning about computers later in life and who may be experiencing age related vision loss. It may also be true of some people with cognitive disabilities who require increased font size.</p>
       <p>This technique provides a mechanism that some users will find easier to use. The mechanism may include links or buttons that will switch the visual presentation to a different style sheet or use scripts to change the text size dynamically.</p>
-      <p>To implement this technique, an author provides controls that allow the user to incrementally increase or decrease the text size of all of the text on the page to a size that is at least 200% of the default text size.</p>
+      <p>To implement this technique, an author provides controls that allow the user to incrementally increase or decrease the text size of all of the text on the page to a size up to 200% of the default text size.</p>
       <p>This can be achieved by providing links, buttons or linked images and the controls themselves should be as easy to find (e.g. prominently positioned within the page, presented in a larger text size, high contrast, etc.) as possible.</p>
       <p>This technique can also be used in circumstances where scalable fonts cannot be used, such as legacy code situations.</p>
       <div class="note">
-         <p>This technique can be used in combination with a style switching technique to present a page that is a
-              <a>conforming alternate version</a>
-              for non-conforming content. Refer to
-              <a href="https://www.w3.org/WAI/WCAG21/Techniques/css/C29">C29: Using a style switcher to provide a conforming alternate version</a>
-              and
-              <a href="https://www.w3.org/WAI/WCAG21/Understanding/conformance#conforming-alt-versions">Understanding Conforming Alternate Versions</a>
-              for more information.</p>
+         <p>This technique can be used in combination with a style switching technique to present a page that is a <a>conforming alternate version</a> for non-conforming content. Refer to <a href="../css/C29">C29: Using a style switcher to provide a conforming alternate version</a> and <a href="../../Understanding/conformance#conforming-alt-versions">Understanding Conforming Alternate Versions</a> for more information.</p>
       </div>
    </section><section id="examples"><h2>Examples</h2>
       <ul>
-         <li>A newspaper article has two buttons near the top of the page. The "increase text size" button has a big letter "T" with an upward arrow and the "decrease text size" button has a small letter "T" with a down arrow. There is
-                <code class="att">alt</code>
-                text on each button.</li>
+         <li>A newspaper article has two buttons near the top of the page. The "increase text size" button has a big letter "T" with an upward arrow and the "decrease text size" button has a small letter "T" with a down arrow. There is <code class="language-html">alt</code> text on each button.</li>
          <li>A site has a number of style sheets with different text size. The user can choose any of the style sheets if their browser provides this functionality. Each page also includes the links "Increase text size" and "Decrease text size" that will change the style sheet currently applied to the appropriate alternate style sheet.</li>
          <li>A site includes the text "Change text size:" followed by text links "Up" and "Down" on every Web page. The links trigger a Javascript that alters the value of the text-size property accordingly.</li>
          <li>A site includes a link on every page that reads "Change text size." The resulting page includes a series of links that includes options representing the available sizes. The links read, "Smallest font size," "Small font size," "Default font size," "Large font size," etc. Instructions preceding the list direct users to choose a link to change to the desired font size.</li>
diff --git a/techniques/general/G179.html b/techniques/general/G179.html
index c83d701fbe..f8e347a65b 100644
--- a/techniques/general/G179.html
+++ b/techniques/general/G179.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Ensuring that there is no loss of content or functionality when the text resizes and text containers do not change their width</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Ensuring that there is no loss of content or functionality when the text resizes and text containers do not change their width</h1><section class="meta"><p class="id">ID: G179</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Ensuring that there is no loss of content or functionality when the text resizes and text containers do not change their width</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/></head><body><h1>Ensuring that there is no loss of content or functionality when the text resizes and text containers do not change their width</h1><section class="meta"><p class="id">ID: G179</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
       <p>All technologies that reflow text when windows are resized.</p>
    </section><section id="description"><h2>Description</h2>
       <p>Some user agents support changing the size of text without changing other dimensions of the text container. Loss of content or functionality can occur when the text overflows the space that was allocated for it. However, the layout properties may provide a way to continue to display the content effectively. The block sizes may be defined wide enough that the text does not overflow when resized by 200%. Text may wrap when it no longer fits within the block, and the block may be tall enough that all the text continues to fit in the block. The block may provide scrollbars when the resized text no longer fits.</p>
diff --git a/techniques/general/G18.html b/techniques/general/G18.html
index d5d40b8a49..30806b5af4 100644
--- a/techniques/general/G18.html
+++ b/techniques/general/G18.html
@@ -1,10 +1,10 @@
 <!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of text) 
-          and background behind the text</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of text) 
+          and background behind the text</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/></head><body><h1>Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of text) 
           and background behind the text</h1><section class="meta"><p class="id">ID: G18</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
       <p>Any technology that produces visual output.</p>
    </section><section id="description"><h2>Description</h2>
       <p>The objective of this technique is to make sure that users can read text
-            that is presented over a background. For Success Criterion 1.4.3, this technique describes the minimum contrast ratio for text that is less than 18 point (if not bold) and less than 14 point (if bold). For Success Criterion 1.4.5, this technique relaxes the 7:1 contrast ratio requirement  for text that is at least 18 point (if not bold) or at least 14 point (if bold).</p>
+            that is presented over a background. For Success Criterion 1.4.3, this technique describes the minimum contrast ratio for text that is less than 18 point (if not bold) and less than 14 point (if bold). For Success Criterion 1.4.6, this technique relaxes the 7:1 contrast ratio requirement  for text that is at least 18 point (if not bold) or at least 14 point (if bold).</p>
       <div class="note">
         <p>When evaluating this success criterion, the font size in points should be obtained from the user agent or calculated on font metrics in the way that user agents do. Point sizes are based on the CSS pt size <a href="https://www.w3.org/TR/css3-values/#absolute-lengths">CSS3 Values</a>. The ratio between sizes in points and CSS pixels is 1pt = 1.333px, therefore 14pt and 18pt are equivalent to approximately 18.5px and 24px.</p>
       </div>
@@ -58,7 +58,7 @@
                      <ul>
                         <li>if R
                           sRGB
-                          &lt;= 0.03928 then
+                          &lt;= 0.04045 then
                           <strong>R</strong>
                           = R
                           sRGB
@@ -69,7 +69,7 @@
                           +0.055)/1.055) ^ 2.4</li>
                         <li>if G
                           sRGB
-                          &lt;= 0.03928 then
+                          &lt;= 0.04045 then
                           <strong>G</strong>
                           = G
                           sRGB
@@ -80,7 +80,7 @@
                           +0.055)/1.055) ^ 2.4</li>
                         <li>if B
                           sRGB
-                          &lt;= 0.03928 then
+                          &lt;= 0.04045 then
                           <strong>B</strong>
                           = B
                           sRGB
@@ -152,20 +152,18 @@
             <li>#4 is true.</li>
          </ul>
       </section>
+      <p class="note">Before May 2021 the value of 0.04045 in the definition was different (0.03928). It was taken from an older version of the specification and has been updated. It has no practical effect on the calculations in the context of these guidelines.</p>
    </section><section id="related"><h2>Related Techniques</h2></section><section id="resources"><h2>Resources</h2>
       
          <ul>
             <li>
-                  <a href="https://www.paciellogroup.com/resources/contrastanalyser/">Contrast Analyser – Application</a>
+                  <a href="https://github.com/ThePacielloGroup/CCAe">TPGi Colour Contrast Analyser (CCA) – Application</a>
                 </li>
             <li>
                   <a href="http://juicystudio.com/services/luminositycontrastratio.php">Contrast Ratio Analyser - online service</a>
                 </li>
             <li>
-                  <a href="http://juicystudio.com/article/colour-contrast-analyser-firefox-extension.php">Colour Contrast Analyser - Firefox Extension</a>
-                </li>
-            <li>
-                  <a href="http://trace.wisc.edu/contrast-ratio-examples/">Color Contrast Samples</a>
+                  <a href="https://web.archive.org/web/20160814160227/http://trace.wisc.edu/contrast-ratio-examples">Color Contrast Samples</a>
                 </li>
             <li>
                   <a href="https://www.w3.org/Graphics/atypical-color-response">Atypical colour response</a>
@@ -181,4 +179,4 @@
                 </li>
          </ul>
       
-   </section></body></html>
\ No newline at end of file
+   </section></body></html>
diff --git a/techniques/general/G180.html b/techniques/general/G180.html
index d885dec9fc..8e6db194f2 100644
--- a/techniques/general/G180.html
+++ b/techniques/general/G180.html
@@ -1,7 +1,7 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing the user with a means to set the time limit to 10 times the default time limit</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Providing the user with a means to set the time limit to 10 times the default time limit</h1><section class="meta"><p class="id">ID: G180</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing the user with a means to set the time limit to 10 times the default time limit</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/></head><body><h1>Providing the user with a means to set the time limit to 10 times the default time limit</h1><section class="meta"><p class="id">ID: G180</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
       <p>All technologies.</p>
    </section><section id="description"><h2>Description</h2>
-      <p>The objective of this technique is to give people with disabilities enough time to complete tasks which may take them longer than someone without those challenges. Some mechanism such as a preference setting or a control on the page lets the user change the time limits to at least 10 times the default time limit. Preferably, the mechanism would have a variable adjustment that lets the user change the time limit to any value in its range, but could also provide ways to change the time limit by discrete increments. The user changes the time limit at the beginning of his session, before any activity that has a time limit.</p>
+      <p>The objective of this technique is to give people with disabilities enough time to complete tasks which may take them longer than someone without those challenges. Some mechanism such as a preference setting or a control on the page lets the user change the time limits to at least 10 times the default time limit. Preferably, the mechanism would have a variable adjustment that lets the user change the time limit to any value in its range, but could also provide ways to change the time limit by discrete increments. The user changes the time limit at the beginning of their session, before any activity that has a time limit.</p>
    </section><section id="examples"><h2>Examples</h2>
       <ul>
          <li>An airline has an online ticket purchasing application. By default, the application has a 1 minute time limit for each step of the purchase process. At the beginning of the session, a Web page includes information that says, "We expect that each step in the purchasing process will take users one minute to complete. Would you like to adjust the time limit?" followed by several radio buttons "1 minute, 2 minutes, 5 minutes, 10 minutes."</li>
diff --git a/techniques/general/G181.html b/techniques/general/G181.html
index 699acb094e..333d041e53 100644
--- a/techniques/general/G181.html
+++ b/techniques/general/G181.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Encoding user data as hidden or encrypted data in a re-authorization page</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Encoding user data as hidden or encrypted data in a re-authorization page</h1><section class="meta"><p class="id">ID: G181</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Encoding user data as hidden or encrypted data in a re-authorization page</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/></head><body><h1>Encoding user data as hidden or encrypted data in a re-authorization page</h1><section class="meta"><p class="id">ID: G181</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
       <p>Pages that require user authentication where the time available for submitting data is limited.</p>
    </section><section id="description"><h2>Description</h2>
       <p>Web servers that require user authentication often terminate the session after a set period of time if there is no activity from the user. If the user is unable to input the data quickly enough and the session times out before they submit, the server will require re-authentication before proceeding. When this happens, the server passes (as hidden data) the information from the form into the page that is used for re-authentication. Then, when the user re-authenticates, the server can use the information passed on from the re-authentication page to submit the form directly or to present a page that includes the data that is to be submitted for review. In this technique, the server does not have to store any user-submitted data on server. This is an important technique for those cases where it is either illegal or a security risk for the server to store information temporarily. It also is useful in that it frees the server from having to maintain the stored information and reconnect it with the newly authenticated session.</p>
@@ -8,7 +8,7 @@
    </section><section id="examples"><h2>Examples</h2>
       <ul>
          <li>A user has logged in to use a wiki and begins editing a page. The time taken to complete the edits exceeds the time allowed by the server for session inactivity. When the user submits the edits, the user is notified that the session has timed out and is redirected to a login page. The script that handles the original form submission passes the edits as a variable to the login page and when the user successfully logs in, passes the users edits back to the script that handles form submissions and the edits are processed as though no session timeout had occurred.</li>
-         <li>A user had logged in to a secure shopping site and fills out some of the information on an order form. For security reasons, the session times out after 30 mintues, but the user does not submit the form until 45 minutes after loading the page. The user is informed of the time out and is prompted to log-in again. If the user logs in correctly, the order form is presented to the user with all of the data previously entered and the user is able to review their submission and submit the form. If the log-in is not successfully completed, then the form data is discarded by the server.</li>
+         <li>A user had logged in to a secure shopping site and fills out some of the information on an order form. For security reasons, the session times out after 30 minutes, but the user does not submit the form until 45 minutes after loading the page. The user is informed of the time out and is prompted to log-in again. If the user logs in correctly, the order form is presented to the user with all of the data previously entered and the user is able to review their submission and submit the form. If the log-in is not successfully completed, then the form data is discarded by the server.</li>
       </ul>
    </section><section id="tests"><h2>Tests</h2>
       <section class="procedure"><h3>Procedure</h3>
@@ -29,4 +29,4 @@
       </section>
    </section><section id="related"><h2>Related Techniques</h2><ul>
       <li><a href="../general/G105">G105</a></li>
-   </ul></section></body></html>
\ No newline at end of file
+   </ul></section></body></html>
diff --git a/techniques/general/G182.html b/techniques/general/G182.html
index c44abfa655..8fa80302d4 100644
--- a/techniques/general/G182.html
+++ b/techniques/general/G182.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Ensuring that additional visual cues are available when text color differences are used to convey information</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Ensuring that additional visual cues are available when text color differences are used to convey information</h1><section class="meta"><p class="id">ID: G182</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Ensuring that additional visual cues are available when text color differences are used to convey information</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/></head><body><h1>Ensuring that additional visual cues are available when text color differences are used to convey information</h1><section class="meta"><p class="id">ID: G182</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
       <p>Colored text when the color is used to convey information such as:</p>
       <ul>
          <li>Words that are links in a paragraph</li>
@@ -9,7 +9,7 @@
       <p>To use this technique, an author incorporates a visual cue in addition to color for each place where color alone is used to convey information. Visual cues can take many forms including changes to the font style, the addition of underlines, bold, or italics, or changes to the font size.</p>
       <div class="note">
          <p>While this technique is sufficient to meet the visual requirements of Success Criterion 1.4.1, the information conveyed by the color must also be available programmatically to satisfy Success Criterion 1.3.1. See
-              <a href="https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships">How to Meet 1.3.1</a>.</p>
+              <a href="../../Understanding/info-and-relationships">How to Meet 1.3.1</a>.</p>
       </div>
    </section><section id="examples"><h2>Examples</h2>
       <ul>
diff --git a/techniques/general/G183.html b/techniques/general/G183.html
index a55367e8c3..77c8730f5f 100644
--- a/techniques/general/G183.html
+++ b/techniques/general/G183.html
@@ -1,11 +1,13 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using a contrast ratio of 3:1 with surrounding text and providing additional visual cues on focus for links or controls where color alone is used to identify them</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Using a contrast ratio of 3:1 with surrounding text and providing additional visual cues on focus for links or controls where color alone is used to identify them</h1><section class="meta"><p class="id">ID: G183</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head>
+   <title>Using a contrast ratio of 3:1 with surrounding text and providing additional visual cues on hover for links or controls where color alone is used to identify them</title>
+   <link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+</head>
+<body><h1>Using a contrast ratio of 3:1 with surrounding text and providing additional visual cues on hover for links or controls where color alone is used to identify them</h1><section class="meta"><p class="id">ID: G183</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
       <p>Colored text when color alone is used to convey information such as words that are links in a paragraph</p>
    </section><section id="description"><h2>Description</h2>
-      <p>The intent of this technique is to provide a redundant visual cue for users who may not be able to discern a difference in text color. Color is commonly used to indicate words that are links within a paragraph or other block of text. For example, scattered words in text may be hypertext links that are identified only by a difference in color with surrounding text. This technique describes a way to provide additional cues on hover and focus so that users who may have difficulty perceiving color differences or have low vision can identify them.</p>
-      <p>With this technique, a
-            <a>relative luminance</a>
-            (lightness) difference of 3:1 or greater with the text around it can be used if additional visual confirmation is available when a user points or tabs to the link. Visual highlights may, for example, take the form of underline, a change in font style such as bold or italics, or an increase in font size.</p>
-      <p>While using this technique is sufficient to meet this success criterion, it is not the preferred technique to differentiate link text. This is because links that use the relative luminance of color alone may not be obvious to people with black/white color blindness. If there are not a large number of links in the block of text, underlines are recommended for links.</p>
+      <p>The intent of this technique is to provide a redundant visual cue for users who may not be able to discern a difference in text color. Color (generally defined as a combination of hue, saturation and luminance) is commonly used to indicate words that are links within a paragraph or other block of text. For example, scattered words in text may be hypertext links that are identified only by a difference in color with surrounding text. This technique describes a way to provide a difference in contrast rather than relying on hue.</p>
+      <p>To meet success criterion 1.4.1: Use of Color a <a>relative luminance</a> (lightness) difference of 3:1 or greater with the text around can be used. This technique goes beyond the success criterion and asks for visual highlights when the user hovers over each link, such as an underline, a change in font style such as bold or italics, or an increase in font size. Such a hover effect provides confirmation to pointer users that the text is a link, similar to how the link alters its appearance for keyboard users when it receives focus, in order to meet <a href="sensory-characteristics">2.4.7 Focus Visible</a>.</p>
+      <p>While using this technique is sufficient to meet this success criterion, it is not the preferred technique to differentiate link text. This is because links that use the relative luminance of color alone may not be obvious to people with low vision. If there are not a large number of links in the block of text, underlines are recommended for links in blocks of text.</p>
       <div class="note">
          <p>This technique is about the use of color in addition to luminosity. In this technique, the contrast ratio refers to the contrast between a link and the words around it. In Success Criterion 1.4.3 and 1.4.6, contrast ratio refers to the contrast between a word and its background. The difference is that  this technique is about the ability for users to tell the difference (a noticeable difference) between different pieces of text whereas the contrast ratio used in success criterion 1.4.3 and 1.4.6 is about the readability of the text with its background for different color and vision disabilities.</p>
          <p>If an author wants to use the color portion of this technique (i.e., using different colors for the words where the colors have sufficient contrast with each other) and the author also wants to conform to SC 1.4.3 (contrast of both words with their backgrounds) the following colors can be used. (e.g., black text in a paragraph on a white background with the links shown as one of the colors in example 1 below.</p>
@@ -22,23 +24,20 @@ <h3>Colors that would provide 3:1 contrast with black words and 4.5:1 contrast w
       </section>
       <section class="example">
          
-            <p>The hypertext links in a document are medium-light blue (#3366CC) and the regular text is black (#000000). Because the blue text is light enough, it has a contrast of 3.9:1 with the surrounding text and can be identified as being different than the surrounding text by people with all types of color blindness, including those individuals who cannot see color at all.</p>
+            <p>The hypertext links in a document are medium-light blue (<code>#3366CC</code>) and the regular text is black (<code>#000000</code>). Beyond the difference in color, the links have no other styles differences compared with the regular text. Because the blue text is light enough, it has a contrast of 3.9:1 with the surrounding text and can be identified as being different from the surrounding text by people with all types of color blindness, including those individuals who cannot see color at all. In addition to the contrast difference, the links have <code>:focus</code> and <code>:hover</code> styles that reintroduce the underline when the links receive keyboard focus or when a mouse pointer hovers over them. Hover or focus style changes alone are not sufficient to meet the criterion.</p>
          
       </section>
    </section><section id="tests"><h2>Tests</h2>
       <section class="procedure"><h3>Procedure</h3>
+        <p>For each instance where color is used to convey information about text:</p>
          <ol>
-            <li>Locate all instances where color alone is used to convey information about text.</li>
-            <li>Check that the
-                  <a>relative luminance</a>
-                  of the color of the text differs from the relative luminance of the surrounding text by a contrast ratio of at least 3:1.</li>
-            <li>Check that pointing (mouseover) to the link causes a visual enhancement (such as an underline, font change, etc.)</li>
-            <li>Check that moving keyboard focus to the link causes a visual enhancement (such as an underline, font change, etc.)</li>
+            <li>Check that the <a>relative luminance</a> of the color of the text differs from the relative luminance of the surrounding text by a contrast ratio of at least 3:1.</li>
+            <li>Check that hovering over the link causes a visual enhancement (such as an underline, font change, etc.)</li>
          </ol>
       </section>
       <section class="results"><h3>Expected Results</h3>
          <ul>
-            <li>Checks #2, #3, and #4 are all true.</li>
+            <li>Checks #1 and #2 are true.</li>
          </ul>
       </section>
    </section><section id="related"><h2>Related Techniques</h2><ul>
@@ -50,14 +49,14 @@ <h3>Colors that would provide 3:1 contrast with black words and 4.5:1 contrast w
       
          <ul>
             <li>
-                  <a href="https://www.paciellogroup.com/resources/contrastanalyser/">Contrast Analyser – Application</a>
-                </li>
+               <a href="https://webaim.org/resources/linkcontrastchecker/">Link Contrast Checker - online service</a>
+            </li>
             <li>
-                  <a href="http://juicystudio.com/services/luminositycontrastratio.php">Contrast Ratio Analyser - online service</a>
+                  <a href="https://github.com/ThePacielloGroup/CCAe">TPGi Colour Contrast Analyser (CCA) – Application</a>
                 </li>
             <li>
-                  <a href="http://juicystudio.com/article/colour-contrast-analyser-firefox-extension.php">Colour Contrast Analyser - Firefox Extension</a>
+                  <a href="http://juicystudio.com/services/luminositycontrastratio.php">Contrast Ratio Analyser - online service</a>
                 </li>
          </ul>
       
-   </section></body></html>
\ No newline at end of file
+   </section></body></html>
diff --git a/techniques/general/G184.html b/techniques/general/G184.html
index adbcd676ac..c6b6e02452 100644
--- a/techniques/general/G184.html
+++ b/techniques/general/G184.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing text instructions at the beginning of a form or set of fields that describes the necessary input</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Providing text instructions at the beginning of a form or set of fields that describes the necessary input</h1><section class="meta"><p class="id">ID: G184</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing text instructions at the beginning of a form or set of fields that describes the necessary input</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/></head><body><h1>Providing text instructions at the beginning of a form or set of fields that describes the necessary input</h1><section class="meta"><p class="id">ID: G184</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
       <p>All technologies.</p>
    </section><section id="description"><h2>Description</h2>
       <p>The objective of this technique is to help the user avoid input errors by informing them ahead of time about restrictions on the format of data that they must enter. Instructions on such restrictions are provided at the top of forms. This technique works best for forms that have a small number of fields or those where many form fields require data in the same format. In these cases, it is more efficient to describe the format once in instructions at the top of the form rather than repeating the same information for each field that has the same restricted format requirement.</p>
diff --git a/techniques/general/G185.html b/techniques/general/G185.html
index cbe91e00df..340d6cb554 100644
--- a/techniques/general/G185.html
+++ b/techniques/general/G185.html
@@ -1,10 +1,10 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Linking to all of the pages on the site from the home page</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Linking to all of the pages on the site from the home page</h1><section class="meta"><p class="id">ID: G185</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Linking to all of the pages on the site from the home page</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/></head><body><h1>Linking to all of the pages on the site from the home page</h1><section class="meta"><p class="id">ID: G185</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
       <p>All technologies that contain links.</p>
    </section><section id="description"><h2>Description</h2>
       <p>The objective of this technique is to make it possible for users to locate all the information in a small Web site by providing links to all Web pages from the home page. When the number of pages in the site is small enough, the home page can contain site map information directly. The other pages in the Web site contain links to the home page.</p>
       <p>In this way, the home page serves as two mechanisms in one. It provides the usual navigation to pages. It also is a de facto site map to the site.</p>
       <p>All the Web pages in the site may contain links to all the other pages, and those sets of links satisfy
-            <a href="https://www.w3.org/WAI/WCAG21/Understanding/consistent-navigation">Success Criterion 3.2.3 (Consistent Navigation)</a>.</p>
+            <a href="../../Understanding/consistent-navigation">Success Criterion 3.2.3 (Consistent Navigation)</a>.</p>
    </section><section id="examples"><h2>Examples</h2>
       <ul>
          <li>A small commercial Web site for a consultant contains a home page, a Contacts page for contacting the consultant, a page describing the consultant's background, and a page with examples of the consultant's work. Each page contains a navigation bar that links to all the other pages in the site.</li>
diff --git a/techniques/general/G186.html b/techniques/general/G186.html
index b61ad08ee1..ee79859e6f 100644
--- a/techniques/general/G186.html
+++ b/techniques/general/G186.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using a control in the Web page that stops moving, blinking, or auto-updating content</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Using a control in the Web page that stops moving, blinking, or auto-updating content</h1><section class="meta"><p class="id">ID: G186</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using a control in the Web page that stops moving, blinking, or auto-updating content</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/></head><body><h1>Using a control in the Web page that stops moving, blinking, or auto-updating content</h1><section class="meta"><p class="id">ID: G186</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
       <p>All technologies.</p>
    </section><section id="description"><h2>Description</h2>
       <p>The objective of this technique is to provide the user a control that allows him to stop moving or blinking content. Since the control is in the web page, the control itself meets the appropriate level of WCAG conformance e.g., it has appropriate contrast, it has a name that identifies it, it is keyboard accessible. The control is either at the top of the page or adjacent to the moving content. A single control may stop all moving or blinking content on the page, or there may be separate controls for separate parts of the content.</p>
diff --git a/techniques/general/G187.html b/techniques/general/G187.html
index 1813bfe6f5..1df33d06fb 100644
--- a/techniques/general/G187.html
+++ b/techniques/general/G187.html
@@ -1,4 +1,8 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using a technology to include blinking content that can be turned off via the user agent</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Using a technology to include blinking content that can be turned off via the user agent</h1><section class="meta"><p class="id">ID: G187</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+---
+obsoleteMessage: Most user agents do not implement a stop animation command as described in this technique.
+obsoleteSince: 20
+---
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using a technology to include blinking content that can be turned off via the user agent</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/></head><body><h1>Using a technology to include blinking content that can be turned off via the user agent</h1><section class="meta"><p class="id">ID: G187</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
       <p>All technologies.</p>
    </section><section id="description"><h2>Description</h2>
       <p>The objective of this technique is to ensure that blinking content can be turned off using user agent features. User agents allow users to stop animation of content in certain technologies. When the user activates this feature, all animation, including blinking, is stopped. This feature can be provided either through interactive controls that conform to WCAG or through documented keyboard shortcuts.</p>
@@ -25,4 +29,4 @@
             <li>Check #3 is true.</li>
          </ul>
       </section>
-   </section></body></html>
\ No newline at end of file
+   </section></body></html>
diff --git a/techniques/general/G188.html b/techniques/general/G188.html
index 205999c037..bcaa35fc2b 100644
--- a/techniques/general/G188.html
+++ b/techniques/general/G188.html
@@ -1,49 +1,73 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing a button on the page to increase line spaces and paragraph spaces</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Providing a button on the page to increase line spaces and paragraph spaces</h1><section class="meta"><p class="id">ID: G188</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>Providing a button on the page to increase line spaces and paragraph spaces</title>
+		<link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+	</head>
+	<body>
+		<h1>Providing a button on the page to increase line spaces and paragraph spaces</h1>
+		<section class="meta">
+			<p class="id">ID: G188</p>
+			<p class="technology">Technology: general</p>
+			<p class="type">Type: Technique</p>
+		</section>
+		<section id="applicability">
+			<h2>When to Use</h2>
       <p>Any technology.</p>
-   </section><section id="description"><h2>Description</h2>
+		</section>
+		<section id="description">
+			<h2>Description</h2>
       <p>Many people with cognitive disabilities have trouble reading text that is single spaced. A button that increases the line height will help them read the content. In order to retain the separation of paragraphs, the space between paragraphs should also increase so that it is at least 1.5 times as high as the line spacing.</p>
-      <div class="note">
-         <p>This technique can be used in combination with a style switching technique to present a page that is a
-              <a>conforming alternate version</a>
-              for non-conforming content. Refer to
-              <a href="https://www.w3.org/WAI/WCAG21/Techniques/css/C29">C29: Using a style switcher to provide a conforming alternate version</a>
-              and
-              <a href="https://www.w3.org/WAI/WCAG21/Understanding/conformance#conforming-alt-versions">Understanding Conforming Alternate Versions</a>
-              for more information.</p>
-      </div>
-   </section><section id="examples"><h2>Examples</h2>
-      <section class="example">
-         
-            <p>Use standard style page switching and have a button or link on the page that switches the stylesheet. The new stylesheet contains a rule to increase the line height and a class to increase the paragraph spacing.</p>
-         
-         <pre xml:space="preserve">
-              p {line-height: 150%; margin-bottom: 2em;}
-            </pre>
+			<div class="note">
+         <p>This technique can be used in combination with a style switching technique to present a page that is a <a>conforming alternate version</a> for non-conforming content. Refer to <a href="../css/C29">C29: Using a style switcher to provide a conforming alternate version</a> and <a href="../../Understanding/conformance#conforming-alt-versions">Understanding Conforming Alternate Versions</a> for more information.</p>
+				</div>
+			</section>
+			<section id="examples">
+				<h2>Examples</h2>
+				<section class="example">
+					<p>Use standard style page switching and have a button or link on the page that switches the stylesheet. The new stylesheet contains a rule to increase the line height and a class to increase the paragraph spacing.</p>
+<pre xml:space="preserve"><code class="language-html">p {
+  line-height: 1.5;
+  margin-bottom: 2em;
+}</code></pre>
       </section>
-   </section><section id="tests"><h2>Tests</h2>
-      <section class="procedure"><h3>Procedure</h3>
-         <ol>
-            <li>Check that there is a button or link on the page that increases the size of the line height and the paragraph spacing, which is labeled as such.</li>
-            <li>Activate the button or link.</li>
-            <li>Check that the button or link increases the line height to at least 1.5 (150%)</li>
-            <li>Check that the button or link increases the paragraph spacing at least 1.5 times greater than the line spacing.</li>
+		</section>
+		<section id="tests">
+			<h2>Tests</h2>
+      <section class="procedure">
+				<h3>Procedure</h3>
+				<ol>
+					<li>Check that there is a button or link on the page that increases the size of the line height and the paragraph spacing, which is labeled as such.</li>
+          <li>Activate the button or link.</li>
+          <li>Check that the button or link increases the line height to at least 1.5 (150%)</li>
+          <li>Check that the button or link increases the paragraph spacing at least 1.5 times greater than the line spacing.</li>
          </ol>
-      </section>
-      <section class="results"><h3>Expected Results</h3>
-         <ul>
-            <li>Checks #1, #3 and #4 are true.</li>
+				</section>
+				<section class="results">
+					<h3>Expected Results</h3>
+					<ul>
+						<li>Checks #1, #3 and #4 are true.</li>
          </ul>
       </section>
-   </section><section id="related"><h2>Related Techniques</h2><ul>
+   </section>
+	 <section id="related">
+		<h2>Related Techniques</h2>
+		<ul>
       <li><a href="../css/C21">C21</a></li>
       <li><a href="../css/C22">C22</a></li>
       <li><a href="../css/C29">C29</a></li>
-   </ul></section><section id="resources"><h2>Resources</h2>
-      
-         <ul>
-            <li>
-                  <a href="http://juicystudio.com/article/cognitive-impairment.php">Developing sites for users with Cognitive disabilities and learning difficulties</a>
-                </li>
-         </ul>
-      
-   </section></body></html>
\ No newline at end of file
+   </ul>
+	</section>
+	<section id="resources">
+		<h2>Resources</h2>
+		<ul>
+			<li>
+				<a href="https://www.w3.org/WAI/cognitive/">Cognitive Accessibility at W3C</a>
+			</li>
+			<li>
+				<a href="https://juicystudio.com/article/cognitive-impairment.php">Developing sites for users with Cognitive disabilities and learning difficulties</a>
+			</li>
+		</ul>  
+   </section>
+</body>
+</html>
\ No newline at end of file
diff --git a/techniques/general/G189.html b/techniques/general/G189.html
index 37f8e0e7e9..8253ada80b 100644
--- a/techniques/general/G189.html
+++ b/techniques/general/G189.html
@@ -1,76 +1,88 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing a control near the beginning of the Web page that changes the link text</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Providing a control near the beginning of the Web page that changes the link text</h1><section class="meta"><p class="id">ID: G189</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>Providing a control near the beginning of the Web page that changes the link text</title>
+		<link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+	</head>
+	<body>
+		<h1>Providing a control near the beginning of the Web page that changes the link text</h1>
+		<section class="meta">
+			<p class="id">ID: G189</p>
+			<p class="technology">Technology: general</p>
+			<p class="type">Type: Technique</p>
+		</section>
+		<section id="applicability">
+			<h2>When to Use</h2>
       <p>All technologies that contain links.</p>
-   </section><section id="description"><h2>Description</h2>
+		</section>
+		<section id="description">
+			<h2>Description</h2>
       <p>The objective of this technique is to provide the user with a control near the beginning of the page that takes the user to a conforming alternate version of the Web page where the link text alone of each link is sufficient to determine its purpose out of context.</p>
       <p>Some users prefer to have links that are self-contained, where there is no need to explore the context of the link. Other users find including the context information in each link to be repetitive and to reduce their ability to use a site. Among users of assistive technology, the feedback to the working group on which is preferable has been divided. This technique allows users to pick the approach that works best for them. Users who need or prefer potentially longer but complete link text use this version.</p>
       <p>If the control for switching to the alternate version is a link, it must always be possible to understand the purpose of the control directly from its link text.</p>
       <p>This technique provides the alternate version for the current page view. It is also possible, and in some cases would be advisable, to save this preference in a cookie or server-side user profile, so that users would only have to make the selection once per site and would automatically be taken to their preferred version.</p>
       <div class="note">
-         <p>This technique can be used in combination with a style switching technique to present a page that is a
-              <a>conforming alternate version</a>
-              for non-conforming content. Refer to
-              <a href="https://www.w3.org/WAI/WCAG21/Techniques/css/C29">C29: Using a style switcher to provide a conforming alternate version</a>
-              and
-              <a href="https://www.w3.org/WAI/WCAG21/Understanding/conformance#conforming-alt-versions">Understanding Conforming Alternate Versions</a>
-              for more information.</p>
+				<p>This technique can be used in combination with a style switching technique to present a page that is a <a>conforming alternate version</a> for non-conforming content. Refer to <a href="../css/C29">C29: Using a style switcher to provide a conforming alternate version</a> and <a href="../../Understanding/conformance#conforming-alt-versions">Understanding Conforming Alternate Versions</a> for more information.</p>
       </div>
-   </section><section id="examples"><h2>Examples</h2>
-      <section class="example">
-         <h3>Providing a Link to another Version</h3>
+   </section>
+	 <section id="examples">
+		<h2>Examples</h2>
+		<section class="example">
+			<h3>Providing a Link to another Version</h3>
+			<p>A Web page lists books for download in different formats. Alternate versions of the Web page use just the book format as the link text or the book title and format type.</p>
+			<p>Version with short link text:</p>         
+<pre xml:space="preserve"><code class="language-html">&lt;h1&gt;Books for download&lt;/h1&gt;
+&lt;p&gt;&lt;a href="books-full-links.html"&gt;Full link Version&lt;/a&gt;&lt;/p&gt;
+&lt;ul&gt;
+  &lt;li&gt;The History of the Web: 
+    &lt;a href="history.docx"&gt;Word&lt;/a&gt;, 
+    &lt;a href="history.pdf"&gt;PDF&lt;/a&gt;, 
+    &lt;a href="history.html"&gt;HTML&lt;/a&gt;
+  &lt;/li&gt;
+&lt;/ul&gt;</code></pre>
          
-            <p>A Web page lists books for download in different formats. Alternate versions of the Web page use just the book format as the link text or the book title and format type.</p>
-            <p>Version with short link text:</p>
-         
-         <pre xml:space="preserve">
-              ...
-                &lt;h1&gt;Books for download&lt;/h1&gt;
-                &lt;p&gt;&lt;a href="books-full-links.html" &gt;Full link Version&lt;/a&gt;&lt;/p&gt;
-                &lt;ul&gt;
-                &lt;li&gt;The History of the Web: 
-                &lt;a href="history.docx" class="hist"&gt;Word&lt;/a&gt;, 
-                &lt;a href="history.pdf" class="hist"&gt;PDF&lt;/a&gt;, 
-                &lt;a href="history.html" class="hist"&gt;HTML&lt;/a&gt;
-                &lt;/li&gt;
-                ...
-                &lt;/ul&gt;
-            </pre>
-         
-            <p>Version with full link text:</p>
-         
-         <pre xml:space="preserve">
-              ...
-                &lt;h1&gt;Books for download&lt;/h1&gt;
-                &lt;p&gt;&lt;a href="books-short-links.html" &gt;Short link Version&lt;/a&gt;&lt;/p&gt;
-                &lt;ul&gt;
-                &lt;li&gt;The History of the Web: 
-                &lt;a href="history.docx" class="hist"&gt;The History of the Web(Word)&lt;/a&gt;, 
-                &lt;a href="history.pdf" class="hist"&gt;The History of the Web(PDF)&gt;/a&gt;, 
-                &lt;a href="history.html" class="hist"&gt;The History of the Web(HTML)&lt;/a&gt;
-                &lt;/li&gt;
-                ...
-                &lt;/ul&gt;
-            </pre>
-      </section>
-   </section><section id="tests"><h2>Tests</h2>
-      <section class="procedure"><h3>Procedure</h3>
-         <ol>
-            <li>Check that there is a control near the beginning of the Web page to change link text.</li>
-            <li>Activate the control.</li>
-            <li>Check that all links in the resulting Web page have link text that describes their purpose.</li>
-         </ol>
-      </section>
-      <section class="results"><h3>Expected Results</h3>
-         <ul>
-            <li>Checks #1 and #3 are true.</li>
-         </ul>
+			<section id="full-version">
+				<h4>Version with full link text:</h4>
+<pre xml:space="preserve"><code class="language-html">&lt;h1&gt;Books for download&lt;/h1&gt;
+&lt;p&gt;&lt;a href="books-short-links.html"&gt;Short link Version&lt;/a&gt;&lt;/p&gt;
+&lt;ul&gt;
+  &lt;li&gt;The History of the Web: 
+    &lt;a href="history.docx" class="hist"&gt;The History of the Web (Word)&lt;/a&gt;, 
+    &lt;a href="history.pdf" class="hist"&gt;The History of the Web (PDF)&lt;/a&gt;, 
+    &lt;a href="history.html" class="hist"&gt;The History of the Web (HTML)&lt;/a&gt;
+  &lt;/li&gt;
+&lt;/ul&gt;</code></pre>
+				</section>
+			</section>
+		</section>
+		<section id="tests">
+			<h2>Tests</h2>
+      <section class="procedure">
+				<h3>Procedure</h3>
+				<ol>
+					<li>Check that there is a control near the beginning of the Web page to change link text.</li>
+					<li>Activate the control.</li>
+					<li>Check that all links in the resulting Web page have link text that describes their purpose.</li>
+				</ol>
       </section>
-   </section><section id="related"><h2>Related Techniques</h2><ul>
-      <li><a href="../general/G91">G91</a></li>
-      <li><a href="../html/H30">H30</a></li>
-      <li><a href="../html/H24">H24</a></li>
-      <li><a href="../css/C7">C7</a></li>
-      <li><a href="../client-side-script/SCR30">SCR30</a></li>
-      <li><a href="../general/G136">G136</a></li>
-      <li><a href="../css/C29">C29</a></li>
-      
-   </ul></section></body></html>
\ No newline at end of file
+      <section class="results">
+				<h3>Expected Results</h3>
+				<ul>
+					<li>Checks #1 and #3 are true.</li>
+				</ul>
+			</section>
+		</section>
+		<section id="related">
+			<h2>Related Techniques</h2>
+			<ul>
+      	<li><a href="../general/G91">G91</a></li>
+      	<li><a href="../html/H30">H30</a></li>
+      	<li><a href="../html/H24">H24</a></li>
+      	<li><a href="../css/C7">C7</a></li>
+      	<li><a href="../client-side-script/SCR30">SCR30</a></li>
+      	<li><a href="../general/G136">G136</a></li>
+      	<li><a href="../css/C29">C29</a></li>
+			</ul>
+		</section>
+</body>
+</html>
\ No newline at end of file
diff --git a/techniques/general/G19.html b/techniques/general/G19.html
index 987f8e3506..42397557db 100644
--- a/techniques/general/G19.html
+++ b/techniques/general/G19.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Ensuring that no component of the content flashes more than three times in any 1-second period</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Ensuring that no component of the content flashes more than three times in any 1-second period</h1><section class="meta"><p class="id">ID: G19</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Ensuring that no component of the content flashes more than three times in any 1-second period</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/></head><body><h1>Ensuring that no component of the content flashes more than three times in any 1-second period</h1><section class="meta"><p class="id">ID: G19</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
       <p>Applies to any technology</p>
    </section><section id="description"><h2>Description</h2>
       <p>The objective of this technique is to avoid flashing at rates that are known to cause seizures if the flashes are bright and large enough. Since some users may be using screen enlargers, this technique limits the flashing of any size content to no more than three flashes in any 1-second period.</p>
@@ -26,7 +26,7 @@
       </section>
       <section class="results"><h3>Expected Results</h3>
          <ul>
-            <li>Both Step 1 and Step 2 are true.</li>
+            <li>Both checks #1 and #2 are true.</li>
          </ul>
       </section>
    </section><section id="related"><h2>Related Techniques</h2><ul>
@@ -35,7 +35,7 @@
       
          <ul>
             <li>
-                  <a href="http://trace.wisc.edu/peat/">Trace Center Photosensitive Epilepsy Analysis Tool (PEAT)</a>
+                  <a href="https://trace.umd.edu/peat/">Trace Center Photosensitive Epilepsy Analysis Tool (PEAT)</a>
                 </li>
          </ul>
       
diff --git a/techniques/general/G190.html b/techniques/general/G190.html
index 31e9867ada..1baab03d84 100644
--- a/techniques/general/G190.html
+++ b/techniques/general/G190.html
@@ -1,7 +1,7 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing a link adjacent to or associated with a non-conforming object that links to a conforming alternate version</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Providing a link adjacent to or associated with a non-conforming object that links to a conforming alternate version</h1><section class="meta"><p class="id">ID: G190</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing a link adjacent to or associated with a non-conforming object that links to a conforming alternate version</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/></head><body><h1>Providing a link adjacent to or associated with a non-conforming object that links to a conforming alternate version</h1><section class="meta"><p class="id">ID: G190</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
       <p>All technologies.</p>
    </section><section id="description"><h2>Description</h2>
-      <p>It is better for all objects on a page to conform, but there are certain circumstances where that may not be possible. There may be situations when an object or section of content targets people with certain disabilities while those same attributes make it inaccessible for someone else. There may also be other reasons not to have a conforming object on the Web page. When an object does not conform, then a link to a conforming alternate version is adjacent to the non-conforming object in the linear reading order or is associated with the the non-conforming content. The conforming alternate version conveys the same information as the non-conforming version.</p>
+      <p>It is better for all objects on a page to conform, but there are certain circumstances where that may not be possible. There may be situations when an object or section of content targets people with certain disabilities while those same attributes make it inaccessible for someone else. There may also be other reasons not to have a conforming object on the Web page. When an object does not conform, then a link to a conforming alternate version is adjacent to the non-conforming object in the linear reading order or is associated with the non-conforming content. The conforming alternate version conveys the same information as the non-conforming version.</p>
    </section><section id="examples"><h2>Examples</h2>
       <section class="example">
          <h3>A video of a rap song where audio descriptions would interfere with the artistic integrity of the music</h3>
@@ -37,4 +37,4 @@ <h3>An animation that is not accessibility supported</h3>
       </section>
    </section><section id="related"><h2>Related Techniques</h2><ul>
       <li><a href="../general/G136">G136</a></li>
-   </ul></section></body></html>
\ No newline at end of file
+   </ul></section></body></html>
diff --git a/techniques/general/G191.html b/techniques/general/G191.html
index 5aa870cbcd..0b4214da7b 100644
--- a/techniques/general/G191.html
+++ b/techniques/general/G191.html
@@ -1,8 +1,8 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing a link, button, or other mechanism that reloads the page without any blinking content</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Providing a link, button, or other mechanism that reloads the page without any blinking content</h1><section class="meta"><p class="id">ID: G191</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing a link, button, or other mechanism that reloads the page without any blinking content</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/></head><body><h1>Providing a link, button, or other mechanism that reloads the page without any blinking content</h1><section class="meta"><p class="id">ID: G191</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
       <p>This technique relates to all technologies.</p>
    </section><section id="description"><h2>Description</h2>
       <p>This is a general technique for allowing people who cannot use a page with blinking content to turn the blinking content off.
-            <a href="https://www.w3.org/WAI/WCAG21/Understanding/conformance#conf-req1">Conformance Requirement 1</a>
+            <a href="../../Understanding/conformance#conf-req1">Conformance Requirement 1</a>
             allows for conforming alternate pages to be used to meet conformance. This technique is an example of that approach applied to success criteria 2.2.2.</p>
       <p>It is important that the page without blinking content contain all of the information that was on the page with blinking content.</p>
       <div class="note">
@@ -10,9 +10,8 @@
          <p>This technique can be used in combination with a style switching technique to present a page that is a
               <a>conforming alternate version</a>
               for non-conforming content. Refer to
-              <a href="https://www.w3.org/WAI/WCAG21/Techniques/css/C29"></a>
-              and
-              <a href="https://www.w3.org/WAI/WCAG21/Understanding/conformance#conforming-alt-versions">Understanding Conforming Alternate Versions</a>
+              <a href="../css/C29">Using a style switcher to provide a conforming alternate version</a>
+              and <a href="../../Understanding/conformance#conforming-alt-versions">Understanding Conforming Alternate Versions</a>
               for more information.</p>
       </div>
    </section><section id="examples"><h2>Examples</h2>
@@ -37,7 +36,6 @@
       <li><a href="../general/G11">G11</a></li>
       <li><a href="../general/G152">G152</a></li>
       <li><a href="../general/G186">G186</a></li>
-      <li><a href="../general/G187">G187</a></li>
       <li><a href="../client-side-script/SCR22">SCR22</a></li>
       <li><a href="../client-side-script/SCR33">SCR33</a></li>
    </ul></section></body></html>
\ No newline at end of file
diff --git a/techniques/general/G192.html b/techniques/general/G192.html
index cdc0f0f265..5c8670065c 100644
--- a/techniques/general/G192.html
+++ b/techniques/general/G192.html
@@ -1,4 +1,9 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Fully conforming to specifications</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Fully conforming to specifications</h1><section class="meta"><p class="id">ID: G192</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+---
+obsoleteMessage: |
+  This technique relates to 4.1.1: Parsing, which was removed as of WCAG 2.2.
+obsoleteSince: 22
+---
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Fully conforming to specifications</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/></head><body><h1>Fully conforming to specifications</h1><section class="meta"><p class="id">ID: G192</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
       <p>This technique relates to all markup languages with specifications.</p>
    </section><section id="description"><h2>Description</h2>
       <p>When markup languages are used in a way that fully conforms to their specifications, all of the requirements in 4.1.1 are met. Therefore, while fully conforming to specifications is not required to conform to WCAG 2.0, it is a best practice and is sufficient to meet Success Criterion 4.1.1.</p>
@@ -25,4 +30,4 @@
       <li><a href="../html/H74">H74</a></li>
       <li><a href="../html/H75">H75</a></li>
       <li><a href="../html/H88">H88</a></li>
-   </ul></section></body></html>
\ No newline at end of file
+   </ul></section></body></html>
diff --git a/techniques/general/G193.html b/techniques/general/G193.html
index d90c41b595..24c77d6e55 100644
--- a/techniques/general/G193.html
+++ b/techniques/general/G193.html
@@ -1,10 +1,10 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing help by an assistant in the Web page</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Providing help by an assistant in the Web page</h1><section class="meta"><p class="id">ID: G193</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing help by an assistant in the Web page</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/></head><body><h1>Providing help by an assistant in the Web page</h1><section class="meta"><p class="id">ID: G193</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
       <p>All technologies.</p>
    </section><section id="description"><h2>Description</h2>
       <p>The purpose of this technique is to provide help using a multimedia avatar that provides assistance in using the Web page. An avatar can be particularly helpful to people with cognitive disabilities who may have trouble reading text. The use of visuals will help some people to focus on the material presented.</p>
       <div class="note">
          <p>The multimedia avatar must also satisfy relevant Success Criterion in
-              <a href="https://www.w3.org/WAI/WCAG21/Understanding/time-based-media">Guideline 1.2</a>.</p>
+              <a href="../../Understanding/time-based-media">Guideline 1.2</a>.</p>
       </div>
    </section><section id="examples"><h2>Examples</h2>
       <ul>
diff --git a/techniques/general/G194.html b/techniques/general/G194.html
index e9ecd7beae..bfdfd02400 100644
--- a/techniques/general/G194.html
+++ b/techniques/general/G194.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing spell checking and suggestions for text input</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Providing spell checking and suggestions for text input</h1><section class="meta"><p class="id">ID: G194</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing spell checking and suggestions for text input</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/></head><body><h1>Providing spell checking and suggestions for text input</h1><section class="meta"><p class="id">ID: G194</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
       <p>This technique relates to all technologies.</p>
    </section><section id="description"><h2>Description</h2>
       <p>In this technique spell checking and suggestions for text are provided. Often people with cognitive disabilities have trouble spelling a word, but may be able to get the spelling approximately correct. A spell checking program will save them time-consuming research on how to spell the word. This may also be true for blind and low vision users who might make a mistake when typing. It will also help people with dexterity disabilities who may be using a head pointer, or who may have scanning software which makes it very slow and difficult to type. A spell-checking solution that provides word suggestion(s) and a simple mechanism to select one and input it into the text input field provides important help for these users and others.</p>
diff --git a/techniques/general/G195.html b/techniques/general/G195.html
index 6aedf9e9e9..e2746fd30e 100644
--- a/techniques/general/G195.html
+++ b/techniques/general/G195.html
@@ -1,8 +1,8 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using an author-supplied, highly visible focus indicator</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Using an author-supplied, highly visible focus indicator</h1><section class="meta"><p class="id">ID: G195</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using an author-supplied, visible focus indicator</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/></head><body><h1>Using an author-supplied, visible focus indicator</h1><section class="meta"><p class="id">ID: G195</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
       <p>Generally applicable.</p>
    </section><section id="description"><h2>Description</h2>
-      <p>The objective of this technique is enhance the focus indicator in the browser, by creating a highly visible one in the content. The default focus indicator in many browsers is a thin, dotted, black line. It can be difficult to see the line when it is around a form element which already has an outline, when the focused element is inside a table cell, when the focused element is very small, or when the background of the page is a dark color. Some browsers use a pale blue outline, which can be difficult to see on some backgrounds.</p>
-      <p>In this technique, when the user places focus on an element, using the mouse, tab key, arrow keys, keyboard shortcuts, or any other method, the application makes that focus more visible, using a combination of a highly contrasting color, a thick line, and other visual indicators such as a glow.</p>
+      <p>The objective of this technique is enhance the focus indicator in the browser, by creating a visible one in the content. The default focus indicator in some browsers is a thin, dotted, black line. It can be difficult to see the line when it is around a form element which already has an outline, when the focused element is inside a table cell, when the focused element is very small, or when the background of the page is a dark color. Some browsers use a pale blue outline, which can be difficult to see on some backgrounds.</p>
+      <p>In this technique, when the user places focus on an element using the keyboard, the application makes that focus more visible, using a combination of a highly contrasting color, a thick line, and other visual indicators such as a glow.</p>
    </section>
    <section id="examples">
       <h2>Examples</h2>
@@ -13,34 +13,36 @@ <h3>Links</h3>
       <section class="example">
          <h3>Form Elements</h3>
          
-            <p>A Web page includes a form inside a table. The borders of both the table and the form elements are thin, black lines. When focus lands on a form element, the element is outlined with a 5 pixel red line that is partially transparent.</p>
+            <p>A Web page includes a form inside a table. The borders of both the table and the form elements are thin, black lines. When focus lands on a form element, the element is outlined with a 5 pixel red line that is partially transparent. The red is equivalent to a hex color of #FF3838, providing a 3.6:1 contrast ratio with the white background.</p>
          
       </section>
       <section class="example">
          <h3>Menus</h3>
          
-            <p>A Web page includes an interactive menu with sub-menus. A user can move focus in the menu using the arrow keys. As focus moves, the currently focused menu item changes its background to a different color, which has a 3:1 contrast ratio with the surrouding items and a 4.5:1 contrast ratio with its own text.</p>
+            <p>A Web page includes an interactive menu with sub-menus. A user can move focus in the menu using the arrow keys. As focus moves, the currently focused menu item changes its background to a different color, which has a 3:1 contrast ratio with the surrounding items and a 4.5:1 contrast ratio with its own text.</p>
          
       </section>
    </section><section id="tests"><h2>Tests</h2>
       <section class="procedure"><h3>Procedure</h3>
+         <p>For each user interface component on the page that should receive keyboard focus:</p>
          <ol>
-            <li>Place focus on each focusable user interface element on the page using the mouse.</li>
-            <li>Check that there is a highly visible focus indicator.</li>
-            <li>Place focus on each focusable user interface element on the page using the keyboard.</li>
+            <li>Navigate to the component and check that it has a visible focus indicator.</li>
             <li>Check that the focus indicator area is at least the size of a 1 CSS px border around the component.</li>
-            <li>Check that the change of contrast of the indicator between focused and unfocused states has a ratio of 3:1 for the minimum focus indicator area.</li>
+            <li>If the focus indicator area is not at least equal to the area of a 1 CSS pixel border, check that it has an area of at least 4 CSS pixels along the shortest side of the component.</li>
+            <li>Check that the change of contrast of the indicator between focused and unfocused states has a ratio of 3:1 or more for the minimum focus indicator area.</li>
             <li>If the focus indicator does not have 3:1 contrast ratio with its adjacent colors, check that it is at least 2px thick.</li>
          </ol>
       </section>
       <section class="results"><h3>Expected Results</h3>
          <ul>
-            <li>Checks #2, #4, #5 and  #6 are true.</li>
+            <li>Checks #2, #4, and #5 are true.</li>
          </ul>
       </section>
    </section><section id="related"><h2>Related Techniques</h2><ul>
-      <li><a href="../general/G149">G149</a></li>
-      <li><a href="../general/G165">G165</a></li>
+      <li><a href="G149">G149</a></li>
+      <li><a href="G165">G165</a></li>
       <li><a href="../css/C15">C15</a></li>
       <li><a href="../client-side-script/SCR31">SCR31</a></li>
-   </ul></section></body></html>
\ No newline at end of file
+      <li><a href="../C40">C40</a></li>
+      <li><a href="../C45">C45</a></li>
+   </ul></section></body></html>
diff --git a/techniques/general/G196.html b/techniques/general/G196.html
index b3606ff56e..3ac8132433 100644
--- a/techniques/general/G196.html
+++ b/techniques/general/G196.html
@@ -1,39 +1,61 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using a text alternative on one item within a group of images that describes all items in the group</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Using a text alternative on one item within a group of images that describes all items in the group</h1><section class="meta"><p class="id">ID: G196</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>Using a text alternative on one item within a group of images that describes all items in the group</title>
+		<link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+	</head>
+	<body>
+		<h1>Using a text alternative on one item within a group of images that describes all items in the group</h1>
+		<section class="meta">
+			<p class="id">ID: G196</p>
+			<p class="technology">Technology: general</p>
+			<p class="type">Type: Technique</p>
+		</section>
+		<section id="applicability">
+			<h2>When to Use</h2>
       <p>Any technology where a grouping of non-text content is used to present information or functionality.</p>
-   </section><section id="description"><h2>Description</h2>
+		</section>
+		<section id="description">
+			<h2>Description</h2>
       <p>The objective of this technique is to avoid unnecessary duplication that occurs when a grouping of adjacent non-text content is used to present information or functionality.</p>
       <p>In some cases, pages will present a group of images to convey information. When presented together or in a specific combination these groupings can convey different types of information. For example, two images of a star where one is presented in black and white and the other is colored can be used in combination to represent a user rating. For example, three filled stars followed by two unfilled stars might represent a rating of three out of five stars.</p>
       <p>To use this technique, an author provides a text alternative that serves the equivalent purpose for the entire group and associates it with one item in the group. The other items in the group are then marked in a way that can be ignored by assistive technologies. In this way, the user is able to more efficiently identify the purpose of the group and can avoid duplication or confusion that may result had a text alternative been provided for each item in the group.</p>
-   </section><section id="examples"><h2>Examples</h2>
-      <section class="example">
-         <h3>A rating system in HTML</h3>
-         
-            <p>In the following example, a rating is shown as three filled stars and two empty stars. While a text alternative could have been provided for each of the five images, the author has instead provided the rating in the form "3 out of 5 stars" for the first image and has marked the others using null alt text.</p>
-         
-         <pre xml:space="preserve">
-              &lt;p&gt;Rating: 
-                &lt;img src="star1" alt="3 out of 5 stars"&gt;
-                &lt;img src="star1" alt=""&gt;
-                &lt;img src="star1" alt=""&gt;
-                &lt;img src="star2" alt=""&gt;
-                &lt;img src="star2" alt=""&gt;
-                &lt;/p&gt;
-            </pre>
+   </section>
+	 <section id="examples">
+		<h2>Examples</h2>
+		<section class="example">
+			<h3>A rating system in <abbr title="HyperText Markup Language">HTML</abbr></h3>
+			<p>In the following example, a rating is shown as three filled stars and two empty stars. While a text alternative could have been provided for each of the five images, the author has instead provided the rating in the form "3 out of 5 stars" for the first image and has marked the others using null alt text.</p>
+<pre xml:space="preserve"><code class="language-html">&lt;p&gt;Rating: 
+  &lt;img src="star-filled" alt="3 out of 5 stars"&gt;
+  &lt;img src="star-filled" alt=""&gt;
+  &lt;img src="star-filled" alt=""&gt;
+  &lt;img src="star-empty" alt=""&gt;
+  &lt;img src="star-empty" alt=""&gt;
+&lt;/p&gt;</code></pre>
       </section>
       <section class="example">
-         <h3>A button created from a group of images in XHTML</h3>
-         
-            <p>In this example, each button has a set of images to indicate the level of conformance to WCAG being claimed. This approach makes it possible for assistive technologies to avoid announcing things like, "Image A, Image A, Image A" etc.</p>
-         
-         <pre xml:space="preserve">
-              &lt;p&gt;Conformance Level:&lt;/p&gt;
-                &lt;button name="A"&gt;&lt;img src="a.png" alt="A" /&gt;&lt;/button&gt; &lt;br /&gt;
-                &lt;button name="AA"&gt;&lt;img src="a.png" alt="AA" /&gt;&lt;img src="a.png" alt="" /&gt;&lt;/button&gt; &lt;br /&gt;
-                &lt;button name="AAA"&gt;&lt;img src="a.png" alt="AAA" /&gt;&lt;img src="a.png" alt="" /&gt;&lt;img src="a.png" alt="" /&gt;&lt;/button&gt;
-            </pre>
+				<h3>Buttons created with groups of images in HTML</h3>
+				<p>In this example, each button has a set of images to indicate the level of conformance to WCAG being claimed. This approach makes it possible for assistive technologies to avoid announcing things like, "Image A, Image A, Image A" etc.</p> 
+<pre xml:space="preserve"><code class="language-html">&lt;p&gt;Conformance Level:&lt;/p&gt;
+&lt;button name="A" type="button"&gt;
+  &lt;img src="a.png" alt="A"&gt;
+&lt;/button&gt;
+&lt;button name="AA" type="button"&gt;
+  &lt;img src="a.png" alt="AA"&gt;
+  &lt;img src="a.png" alt=""&gt;
+&lt;/button&gt;
+&lt;button name="AAA" type="button"&gt;
+  &lt;img src="a.png" alt="AAA"&gt;
+  &lt;img src="a.png" alt=""&gt;
+  &lt;img src="a.png" alt=""&gt;
+&lt;/button&gt;</code></pre>
       </section>
-   </section><section id="tests"><h2>Tests</h2>
-      <section class="procedure"><h3>Procedure</h3>
+   </section>
+	 <section id="tests">
+		<h2>Tests</h2>
+		<section class="procedure">
+			<h3>Procedure</h3>
          <ol>
             <li>Check that one item in the group includes a text alternative that serves the equivalent purpose for the entire group.</li>
             <li>Check that the other items in the group are marked in a way that can be ignored by assistive technologies.</li>
@@ -45,8 +67,14 @@ <h3>A button created from a group of images in XHTML</h3>
             <li>All of the above checks are true.</li>
          </ul>
       </section>
-   </section><section id="related"><h2>Related Techniques</h2><ul>
+   </section>
+	 <section id="related">
+		<h2>Related Techniques</h2>
+		<ul>
       <li><a href="../general/G94">G94</a></li>
       <li><a href="../html/H2">H2</a></li>
       <li><a href="../html/H67">H67</a></li>
-   </ul></section></body></html>
\ No newline at end of file
+		</ul>
+	</section>
+</body>
+</html>
\ No newline at end of file
diff --git a/techniques/general/G197.html b/techniques/general/G197.html
index b219f50269..49d094146f 100644
--- a/techniques/general/G197.html
+++ b/techniques/general/G197.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using labels, names, and text alternatives consistently for content that has the same functionality</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Using labels, names, and text alternatives consistently for content that has the same functionality</h1><section class="meta"><p class="id">ID: G197</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using labels, names, and text alternatives consistently for content that has the same functionality</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/></head><body><h1>Using labels, names, and text alternatives consistently for content that has the same functionality</h1><section class="meta"><p class="id">ID: G197</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
       <p>All content.</p>
    </section><section id="description"><h2>Description</h2>
       <p>The purpose of this technique is to help  users with cognitive disabilities, blindness and vision loss to understand what will happen when they interact with a function on a Web page. If there are different labels on user interface components (i.e., elements, links, JavaScript objects, etc.) that have the same function, the user will not know that they have encountered a component with the same function and will not know what to expect. This could lead to many unnecessary errors. It is also recommended that this approach to consistent labelling be applied across the Web site.</p>
diff --git a/techniques/general/G198.html b/techniques/general/G198.html
index e309474521..cb9d974033 100644
--- a/techniques/general/G198.html
+++ b/techniques/general/G198.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing a way for the user to turn the time limit off</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Providing a way for the user to turn the time limit off</h1><section class="meta"><p class="id">ID: G198</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing a way for the user to turn the time limit off</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/></head><body><h1>Providing a way for the user to turn the time limit off</h1><section class="meta"><p class="id">ID: G198</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
       <p>This technique relates to all technologies.</p>
    </section><section id="description"><h2>Description</h2>
       <p>The objective of this technique is to provide a mechanism for people who cannot complete tasks within a specified time limit to turn off the time limit.</p>
diff --git a/techniques/general/G199.html b/techniques/general/G199.html
index d7ec2f6642..5aa48b18dd 100644
--- a/techniques/general/G199.html
+++ b/techniques/general/G199.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing success feedback when data is submitted successfully</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Providing success feedback when data is submitted successfully</h1><section class="meta"><p class="id">ID: G199</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing success feedback when data is submitted successfully</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/></head><body><h1>Providing success feedback when data is submitted successfully</h1><section class="meta"><p class="id">ID: G199</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
       <p>Content that accepts user data input.</p>
    </section><section id="description"><h2>Description</h2>
       <p>The objective of this technique is to reduce the effort required for users to confirm that an action, such as submitting a Web form, was completed successfully. This can be accomplished by providing consistently presented feedback that explicitly indicates success of an action, rather than requiring a user to navigate through content to discover if the action was successful.</p>
diff --git a/techniques/general/G200.html b/techniques/general/G200.html
index 5d31cc2e78..09abe57f3d 100644
--- a/techniques/general/G200.html
+++ b/techniques/general/G200.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Opening new windows and tabs from a link only when necessary</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Opening new windows and tabs from a link only when necessary</h1><section class="meta"><p class="id">ID: G200</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Opening new windows and tabs from a link only when necessary</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/></head><body><h1>Opening new windows and tabs from a link only when necessary</h1><section class="meta"><p class="id">ID: G200</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
       <p>Pages that open new windows</p>
    </section><section id="description"><h2>Description</h2>
       <p>The objective of this technique is to limit the use of links or  buttons that open new windows or tabs within Web content. In general, it is better not to open new windows and tabs since they can be disorienting for people, especially people who have difficulty  perceiving visual content. However there are some situations where it is preferable from an accessibility perspective to open a new window or tab. Here are two such situations:</p>
@@ -31,9 +31,6 @@ <h3>Date Picker</h3>
       <li><a href="../client-side-script/SCR24">SCR24</a></li>
    </ul></section><section id="resources"><h2>Resources</h2>
       
-         <p>
-              <a href="http://www.webcredible.com/blog/beware-opening-links-new-window/">Beware of opening links in a new window</a>
-            </p>
       
       
          <p>
diff --git a/techniques/general/G201.html b/techniques/general/G201.html
index fd0406f37a..beeef742fd 100644
--- a/techniques/general/G201.html
+++ b/techniques/general/G201.html
@@ -1,7 +1,23 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Giving users advanced warning when opening a new window</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Giving users advanced warning when opening a new window</h1><section class="meta"><p class="id">ID: G201</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>Giving users advanced warning when opening a new window</title>
+		<link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+	</head>
+	<body>
+		<h1>Giving users advanced warning when opening a new window</h1>
+		<section class="meta">
+			<p class="id">ID: G201</p>
+			<p class="technology">Technology: general</p>
+			<p class="type">Type: Technique</p>
+		</section>
+		<section id="applicability">
+			<h2>When to Use</h2>
       <p>Pages that open new windows</p>
-   </section><section id="description"><h2>Description</h2>
-      <p>The objective of this technique is to provide a warning before automatically
+		</section>
+		<section id="description">
+			<h2>Description</h2>
+			<p>The objective of this technique is to provide a warning before automatically
             opening a new window or tab. Opening new windows automatically when
             a link is activated can be disorienting for people who have difficulty
             perceiving visual content, and for some people with cognitive disabilities,
@@ -11,17 +27,16 @@
             to go to the new window. It will help them understand that the "back" button
             will not work and that they have to return to the last window they
             had open, in order to find their previous location.</p>
-   </section><section id="examples"><h2>Examples</h2>
-      <section class="example">
-         <h3>Including the warning in the text describing a control</h3>
-         
-            <p>The name or label that describes a control can include the warning
+					</section>
+					<section id="examples">
+						<h2>Examples</h2>
+						<section class="example">
+							<h3>Including the warning in the text describing a control</h3>
+							<p>The name or label that describes a control can include the warning
                 about opening in a new window.</p>
-         
-         <pre xml:space="preserve">
-              &lt;a href="knitting.html" target="_blank"&gt;All about Knitting 
-                (opens in new window)&lt;/a&gt;
-            </pre>
+<pre xml:space="preserve"><code class="language-html">&lt;a href="knitting.html" rel="noopener" target="_blank"&gt;
+  All about Knitting (opens in new window)
+&lt;/a&gt;</code></pre>
       </section>
       <section class="example">
          <h3>Using CSS to provide a warning before opening a new window</h3>
@@ -29,82 +44,75 @@ <h3>Using CSS to provide a warning before opening a new window</h3>
             <p>The code below uses CSS to provide a warning before opening a new
                 window.</p>
          
-         <pre xml:space="preserve">
-              &lt;html&gt;
-                &lt;head&gt;
-                &lt;title&gt;Pop-Up Warning&lt;/title&gt;
-                &lt;style type="text/css"&gt;
-                body {
-                margin-left:2em;
-                margin-right:2em;
-                }
-                :focus { outline: 0; }
-                a.info {
-                position:relative;
-                z-index:24;
-                background-color:#ccc;
-                color:#000;
-                text-decoration:none
-                }
-                a.info:hover, a.info:focus, a.info:active {
-                z-index:25;
-                background-color:#ff0
-                }
-                a.info span {
-                position: absolute;
-                left: -9000px;
-                width: 0;
-                overflow: hidden;
-                }
-                a.info:hover span, a.info:focus span, a.info:active span {
-                display:block;
-                position:absolute;
-                top:1em; left:1em; width:12em;
-                border:1px solid #0cf;
-                background-color:#cff;
-                color:#000;
-                text-align: center
-                }
-                div.example {
-                margin-left: 5em;
-                }
-                &lt;/style&gt;
-                &lt;/head&gt;
-                &lt;body&gt;
-                &lt;h1&gt;Pop-Up Warning&lt;/h1&gt;
-                &lt;p&gt; This is an example of an &lt;a class="info"
-                href="popup_advisory_technique.html" target="_blank"&gt;
-                &lt;strong&gt;External link&lt;/strong&gt;&lt;span&gt;Opens a new
-                window&lt;/span&gt;&lt;/a&gt;
-                &lt;/p&gt;
-                &lt;/body&gt;
-                &lt;/html&gt;
-            </pre>
+<pre xml:space="preserve"><code class="language-html">&lt;!DOCTYPE html&gt;
+&lt;html lang="en"&gt;
+&lt;head&gt;
+  &lt;meta charset="utf-8"&gt;
+  &lt;title&gt;Link opens in new window notification&lt;/title&gt;
+  &lt;style&gt;
+    body {
+      background:#fff;
+      color: #000;
+      font: 1rem/1.5 system-ui, "Segoe UI", Roboto, Helvetica, sans-serif;
+    }
+
+    [hidden] {
+      display:none;
+    }
+
+    .new-window-icon {
+      fill:currentColor;
+      height:0.75rem;
+      margin-inline-start:0.3em;
+      vertical-align:middle;
+      width:0.75rem;
+    }
+  &lt;/style&gt;
+&lt;/head&gt;
+&lt;body&gt;
+  &lt;svg hidden&gt;
+    &lt;symbol id="new-window-icon" viewBox="0 0 12 12"&gt;
+      &lt;title id="new-win-desc"&gt;opens in a new window&lt;/title&gt;			
+      ...
+    &lt;/symbol&gt;
+  &lt;/svg&gt;
+
+  &lt;h1&gt;Link opens in new window notification&lt;/h1&gt;
+  &lt;p&gt;This is an example of an 
+     &lt;a aria-describedby="new-win-desc" href="https://example.com" rel="noopener" 
+     target="_blank"&gt;external link&lt;svg class="new-window-icon" aria-hidden="true"
+     role="img"&gt;&lt;use href="#new-window-icon"&gt;&lt;/use&gt;&lt;/svg&gt;&lt;/a&gt;&lt;/p&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</code></pre>
          
-            <p class="working-example">A
-                <a href="../../working-examples/css-new-window-warn/">working
-                  example of Using CSS to provide a warning before opening a new window</a>
-                is available.</p>
+<p class="working-example">A <a href="../../working-examples/css-new-window-warn/">working example of Using CSS to provide a warning before opening a new window</a> is available.</p>
          
       </section>
-   </section><section id="tests"><h2>Tests</h2>
-      <section class="procedure"><h3>Procedure</h3>
-         <p>For each link that opens automatically in a new window or tab when
-              a change of context is initiated by a user request:</p>
+   </section>
+   <section id="tests">
+      <h2>Tests</h2>
+      <section class="procedure">
+         <h3>Procedure</h3>
+         <p>For each link that opens automatically in a new window or tab when a change of context is initiated by a user request:</p>
          <ol>
-            <li>Check that there is a warning spoken in assistive technology that
-                  this link opens to a new window.</li>
-            <li>Check that there is a visual warning in text that this link opens
-                  to a new window.</li>
+            <li>Check that there is a warning spoken in assistive technology that this link opens to a new window.</li>
+            <li>Check that there is a visual warning in text that this link opens to a new window.</li>
          </ol>
       </section>
-      <section class="results"><h3>Expected Results</h3>
+      <section class="results">
+         <h3>Expected Results</h3>
          <ul>
             <li>Checks #1 and check #2 are true.</li>
          </ul>
       </section>
-   </section><section id="related"><h2>Related Techniques</h2><ul>
-      <li><a href="../html/H83">H83</a></li>
-      <li><a href="../client-side-script/SCR24">SCR24</a></li>
-      <li><a href="../general/G200">G200</a></li>
-   </ul></section></body></html>
\ No newline at end of file
+   </section>
+   <section id="related">
+      <h2>Related Techniques</h2>
+      <ul>
+         <li><a href="../html/H83">H83</a></li>
+         <li><a href="../client-side-script/SCR24">SCR24</a></li>
+         <li><a href="../general/G200">G200</a></li>
+      </ul>
+   </section>
+</body>
+</html>
\ No newline at end of file
diff --git a/techniques/general/G202.html b/techniques/general/G202.html
index 51d0020da8..1fc06a8556 100644
--- a/techniques/general/G202.html
+++ b/techniques/general/G202.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Ensuring keyboard control for all functionality</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Ensuring keyboard control for all functionality</h1><section class="meta"><p class="id">ID: G202</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Ensuring keyboard control for all functionality</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/></head><body><h1>Ensuring keyboard control for all functionality</h1><section class="meta"><p class="id">ID: G202</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
       <p>All technologies that support interactive operation.</p>
    </section><section id="description"><h2>Description</h2>
       <p>The objective of this technique is to provide keyboard operation for all the functionality of the page. When all functionality of content can be operated through a keyboard or keyboard interface, it can be operated by those with no vision as well as by those who must use alternate keyboards or input devices that act as keyboard emulators like speech input software or on-screen keyboards.</p>
diff --git a/techniques/general/G203.html b/techniques/general/G203.html
index f2887b0df2..630e9443b0 100644
--- a/techniques/general/G203.html
+++ b/techniques/general/G203.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using a static text alternative to describe a talking head video</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Using a static text alternative to describe a talking head video</h1><section class="meta"><p class="id">ID: G203</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using a static text alternative to describe a talking head video</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/></head><body><h1>Using a static text alternative to describe a talking head video</h1><section class="meta"><p class="id">ID: G203</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
       <p>Videos of only a speaker</p>
    </section><section id="description"><h2>Description</h2>
       <p>The purpose of this technique is to provide an alternative to audio description for synchronized media that has no important time based information contained in the video portion of the media. This particularly applies to "talking head" videos where a person is talking in front of an unchanging background, such as a press conference, company president talk, or government announcement, etc. In this case there are no "important visual details" which would warrant audio description.
@@ -13,9 +13,9 @@
       <section class="example">
          <h3>A video of a CEO speaking to shareholders</h3>
          
-            <p>A CEO is speaking to shareholders from his office. The video has a title page at the beginning of the video giving the date. When the speaker begins, there is a strip of text at the bottom of the video saying "John Doe, President of XYZ Cooperation". At the end of the video are title credits that say "produced by the Honest TV Productions Ltd."
+            <p>A CEO is speaking to shareholders from their office. The video has a title page at the beginning of the video giving the date. When the speaker begins, there is a strip of text at the bottom of the video saying "Jane Doe, President of XYZ Cooperation". At the end of the video are title credits that say "produced by the Honest TV Productions Ltd."
     					</p>
-            <p>As an alternative, there is a paragraph below the video which is associated with the video file using aria-describedby which says: "July 22, 2011, John Doe, President of XYZ cooperation, speaking from his office. Video produced by the Honest TV Productions Ltd."
+            <p>As an alternative, there is a paragraph below the video which is associated with the video file using aria-describedby which says: "July 22, 2011, Jane Doe, President of XYZ cooperation, speaking from her office. Video produced by the Honest TV Productions Ltd."
     					</p>
          
       </section>
diff --git a/techniques/general/G204.html b/techniques/general/G204.html
index 18670516be..0c38405e2c 100644
--- a/techniques/general/G204.html
+++ b/techniques/general/G204.html
@@ -1,8 +1,8 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Not interfering with the user agent's reflow of text as the viewing window is narrowed</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Not interfering with the user agent's reflow of text as the viewing window is narrowed</h1><section class="meta"><p class="id">ID: G204</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Not interfering with the user agent's reflow of text as the viewing window is narrowed</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/></head><body><h1>Not interfering with the user agent's reflow of text as the viewing window is narrowed</h1><section class="meta"><p class="id">ID: G204</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
       <p>All technologies</p>
    </section><section id="description"><h2>Description</h2>
       <p>This technique helps avoid situations where horizontal scrolling may occur. Many people with cognitive disabilities and low vision users who do not use assistive technology have a great deal of trouble with blocks of text that require horizontal scrolling. It involves not interfering with the reflow of text if the window is narrowed. One of the best ways to do this is to define widths of text block containers in percentages.</p>
-      <p>HTML and XHTML user agents automatically reflow text as the browser window is narrowed as long as the author does not specify widths using absolute measurements such as pixels or points. </p>
+      <p>HTML user agents automatically reflow text as the browser window is narrowed as long as the author does not specify widths using absolute measurements such as pixels or points. </p>
    </section><section id="examples"><h2>Examples</h2>
       <section class="example">
          
@@ -29,8 +29,8 @@
       
          <ul>
             <li>
-									         <a href="https://www.w3.org/TR/CSS2/box.html">CSS Box Model</a>
-								       </li>
+							<a href="https://www.w3.org/TR/css-box-3/">CSS Box Model Module Level 3</a>
+						</li>
          </ul>
       
    </section></body></html>
\ No newline at end of file
diff --git a/techniques/general/G205.html b/techniques/general/G205.html
index 2f4cdf49d1..9416011366 100644
--- a/techniques/general/G205.html
+++ b/techniques/general/G205.html
@@ -1,35 +1,60 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Including a text cue for colored form control labels</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Including a text cue for colored form control labels</h1><section class="meta"><p class="id">ID: G205</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>Including a text cue for colored form control labels</title>
+		<link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+	</head>
+	<body>
+		<h1>Including a text cue for colored form control labels</h1>
+		<section class="meta">
+			<p class="id">ID: G205</p>
+			<p class="technology">Technology: general</p>
+			<p class="type">Type: Technique</p>
+		</section>
+		<section id="applicability">
+			<h2>When to Use</h2>
       <p>All technologies that support color and text.</p>
-   </section><section id="description"><h2>Description</h2>
+		</section>
+		<section id="description">
+			<h2>Description</h2>
       <p>The objective of this technique is to combine color and text or character cues to convey information. Most users can quickly scan the content to locate information conveyed by using color differences. Users who cannot see color can look or listen for text cues; people using Braille displays or other tactile interfaces can detect text cues by touch.</p>
       <p>The text cue must be included as part of the programmatically determinable name for the control.</p>
-   </section><section id="examples"><h2>Examples</h2>
+		</section>
+		<section id="examples">
+			<h2>Examples</h2>
       <section class="example">
-         <h3>Required fields in an HTML form</h3>
-         
-            <p>The instructions for an online form say, "Required fields are shown in red and marked with (required)." The cue "(required)" is included within the label element.</p>
-         
-         <pre xml:space="preserve">&lt;label for="lastname" class="required"&gt;Last name (required): &lt;/label&gt;
-&lt;input id="lastname" type="text" size="25" value=""/&gt;
-&lt;style type="text/css"&gt;
+				<h3>Required fields in an <abbr title="HyperText Markup Language">HTML</abbr> form</h3>
+				<p>The instructions for an online form say, "Required fields are shown in red and marked with (required)." The cue "(required)" is included within the label element.</p>
+<pre xml:space="preserve"><code class="language-html">&lt;style&gt;
   .required {
-    color:red;
+    color:#ec0000;
   }
-&lt;/style&gt;</pre>
+&lt;/style&gt;
+&lt;label for="lastname" class="required"&gt;Last name (required):&lt;/label&gt;
+&lt;input autocomplete="family-name" id="lastname" type="text" value=""&gt;</code></pre>
       </section>
    </section><section id="tests"><h2>Tests</h2>
       <section class="procedure"><h3>Procedure</h3>
-         <p>For any content where color differences are used to convey information:
-    				</p>
+         <p>For any content where color differences are used to convey information:</p>
          <ol>
             <li>Check that the same information is available through text or character cues. </li>
          </ol>
       </section>
-      <section class="results"><h3>Expected Results</h3>
-         <ul>
-            <li>Check #1 is true.</li>
-         </ul>
-      </section>
-   </section><section id="related"><h2>Related Techniques</h2><ul>
-      <li><a href="../general/G14">G14</a></li>
-   </ul></section><section id="resources"><h2>Resources</h2></section></body></html>
\ No newline at end of file
+      <section class="results">
+				<h3>Expected Results</h3>
+				<ul>
+					<li>Check #1 is true.</li>
+				</ul>
+			</section>
+   </section>
+	 <section id="related">
+		<h2>Related Techniques</h2>
+		<ul>
+			<li><a href="../general/G14">G14</a></li>
+   </ul>
+	</section>
+	<section id="resources">
+		<h2>Resources</h2>
+	</section>
+</body>
+</html>
\ No newline at end of file
diff --git a/techniques/general/G206.html b/techniques/general/G206.html
index 2d8347efa8..44dd2f0d16 100644
--- a/techniques/general/G206.html
+++ b/techniques/general/G206.html
@@ -1,11 +1,11 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing options within the content to switch to a layout that does not require the user to scroll horizontally to read a line of text</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Providing options within the content to switch to a layout that does not require the user to scroll horizontally to read a line of text</h1><section class="meta"><p class="id">ID: G206</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing options within the content to switch to a layout that does not require the user to scroll horizontally to read a line of text</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/></head><body><h1>Providing options within the content to switch to a layout that does not require the user to scroll horizontally to read a line of text</h1><section class="meta"><p class="id">ID: G206</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
       <p>All technologies that support style switching</p>
    </section><section id="description"><h2>Description</h2>
       <p>There may be situations where an author needs to use a layout that requires horizontal scrolling. In that case, it is sufficient to provide options within the content that switch to a layout that does not require the user to scroll horizontally to read a line of text. This may be achieved using standard style switching technology. </p>
       <p>It should be noted that it is also sufficient to lay out the content in such a way that horizontal scrolling is required to access content, but that it is not necessary to scroll horizontally in order to read a line of text.</p>
       <p>For instance, a spreadsheet that requires horizontal scrolling is acceptable if no horizontal scrolling is necessary for each column individually (i.e., scrolling is only necessary to see other columns, but not for the left or right edges of each individual column).</p>
       <div class="note">
-         <p>This technique can be used in combination with a style switching technique to present a page that is a <a>conforming alternate version</a> for non-conforming content. Refer to <a href="https://www.w3.org/WAI/WCAG21/Techniques/css/C29">C29: Using a style switcher to provide a conforming alternate version</a> and <a href="https://www.w3.org/WAI/WCAG21/Understanding/conformance#conforming-alt-versions">Understanding Conforming Alternate Versions</a> for more information. </p>
+         <p>This technique can be used in combination with a style switching technique to present a page that is a <a>conforming alternate version</a> for non-conforming content. Refer to <a href="../css/C29">C29: Using a style switcher to provide a conforming alternate version</a> and <a href="../../Understanding/conformance#conforming-alt-versions">Understanding Conforming Alternate Versions</a> for more information. </p>
       </div>
    </section><section id="examples"><h2>Examples</h2>
       <section class="example">
diff --git a/techniques/general/G207.html b/techniques/general/G207.html
index 399be5a865..79a02ec380 100644
--- a/techniques/general/G207.html
+++ b/techniques/general/G207.html
@@ -18,33 +18,33 @@ <h2>When to Use</h2>
 		</section>
 		<section id="description">
 			<h2>Description</h2>
-            <p>The objective of this technique is to ensure graphical icons provide enough contrast for people with vision impairments. Not all graphics are within the scope of <a href="../../understanding/non-text-contrast.html">SC 1.4.11 Non-text contrast</a> but if the icons are required to understand the content, then the icons need to have a contrast ratio of at least 3:1.</p>
-            <p>The success criteria for non-text contrast uses the term <a href="../../understanding/non-text-contrast.html#graphical-objects">&quot;graphical object&quot;</a> to cover small simple graphics, and parts of larger complex graphics. This technique focuses on solid color icons used on solid or gradient backgrounds.</p>
+            <p>The objective of this technique is to ensure graphical icons provide enough contrast for people with vision impairments. Not all graphics are within the scope of <a href="../../Understanding/non-text-contrast.html">SC 1.4.11 Non-text contrast</a> but if the icons are required to understand the content, then the icons need to have a contrast ratio of at least 3:1.</p>
+            <p>The success criteria for non-text contrast uses the term <a href="../../Understanding/non-text-contrast.html#graphical-objects">&quot;graphical object&quot;</a> to cover small simple graphics, and parts of larger complex graphics. This technique focuses on solid color icons used on solid or gradient backgrounds.</p>
             <p>When choosing the colors for graphics, consider the color(s) adjacent to that graphic, and test that the contrast ratio is at least 3:1.</p>
-            <p class="note">A selection of tools and applications for testing contrast ratios can be found in <a href="../../understanding/contrast-minimum.html#resources">Understanding SC 1.4.3 Contrast (minimum)</a>.</p>
+            <p class="note">A selection of tools and applications for testing contrast ratios can be found in <a href="../../Understanding/contrast-minimum.html#resources">Understanding SC 1.4.3 Contrast (minimum)</a>.</p>
 		</section>
 		<section id="examples">
 			<h2>Examples</h2>
 			<section class="example">
 				<h3>Solid icon color against the background</h3>
 				<p>A solid icon such as a telephone symbol uses orange on a white background. The color orange (<code>#E3660E</code>) is tested against the white background (<code>#FFFFFF</code>) and it has a contrast ratio of 3.4:1.</p>
-				<p><img alt="Orange icon on white background" src="img/contrast-phone-icon.png" /></p>
+				<p><img alt="Orange icon on white background" src="img/contrast-phone-icon.png"/></p>
             </section>
             <section class="example">
 				<h3>Solid icon color against a custom background</h3>
 				<p>A solid icon such as a telephone symbol used within an orange background. The orange and white colors are the same as in example 1, in this case the contrast against the white background is not relevant, the white icon within the orange background is what provides the information in the icon and as a result needs to meet the contrast requirement.</p>
-				<p><img alt="Orange icon on white background" src="../../understanding/img/contrast-phone.png" width="100" /></p>
+				<p><img alt="Orange icon on white background" src="../../understanding/img/contrast-phone.png" width="100"/></p>
             </section>
             <section class="example">
 				<h3>Solid icon with a gradient background</h3>
 				<p>A solid icon such as a telephone symbol using a dark blue icon on a white-to-blue gradient background. The first test of the icon should be against the darkest (least contrasting) background that is adjacent to the icon color. If that is at least 3:1, it passes the success criterion.</p>
-				<p><img alt="Dark blue icon on white-to-blue background." src="img/contrast-phone-icon-gradient.png" /></p>
+				<p><img alt="Dark blue icon on white-to-blue background." src="img/contrast-phone-icon-gradient.png"/></p>
             </section>
             <section class="example">
 				<h3>Solid icon with gradient background overlapping in contrast</h3>
                 <p>A solid icon on a gradient background can overlap in contrast if the graphic is still understandable where it does not have contrast against all of the background. If you find the part of the gradient where it does not meet a 3:1 ratio with the graphic and treat that part as if it was removed, does the icon still convey the appropriate meaning?</p>
                 <p>A method of visualizing this is to remove the non-contrasting area and check that you can still understand the icon. If so, it is sufficient. The images below shows an icon on a gradient background, and a second version where it removes the area of the icon  that does not meet the 3:1 contrast ratio. It is still recognizable as a phone icon, so passes the success criterion.</p>
-				<p><img alt="Dark blue icon on white-to-blue background that is dark at the bottom." src="img/contrast-phone-icon-gradient2.png" /> <img alt="Dark blue icon on white-to-blue background." src="img/contrast-phone-icon-gradient3.png" /></p>
+				<p><img alt="Dark blue icon on white-to-blue background that is dark at the bottom." src="img/contrast-phone-icon-gradient2.png"/> <img alt="Dark blue icon on white-to-blue background." src="img/contrast-phone-icon-gradient3.png"/></p>
             </section>
 		</section>
 		<section id="tests">
@@ -77,7 +77,7 @@ <h2>Related Techniques</h2>
 		<section id="resources">
 			<h2>Resources</h2>
 			<ul>
-				<li><a href="../../understanding/contrast-minimum.html#resources">Understanding SC 1.4.3 Contrast (minimum)</a> lists color contrast tools.</li>
+				<li><a href="../../Understanding/contrast-minimum.html#resources">Understanding SC 1.4.3 Contrast (minimum)</a> lists color contrast tools.</li>
 			</ul>
 		</section>
 	</body>
diff --git a/techniques/general/G208.html b/techniques/general/G208.html
index 8bbf01a779..298a5961ba 100644
--- a/techniques/general/G208.html
+++ b/techniques/general/G208.html
@@ -47,7 +47,7 @@ <h3>Generic link text concatenated with heading</h3>
 		<p>A generic link is combined with the heading of the paragraph to give context. It is a variation on the first example, this time using <code>aria-labelledby</code>. The advantage of this implementation is that it uses existing visible text on the page, and so is more likely to be properly translated during any localization transformations.</p>
 
 				<code>
-					&lt;h4 id="poor"&gt;Insufficient Link Names Invade Community&lt;/h4&gt;<br />
+					&lt;h4 id="poor"&gt;Insufficient Link Names Invade Community&lt;/h4&gt;<br/>
 &lt;p&gt;Citizens are reeling from the growing invasion of useless "read more" links appearing in their online resources. &lt;a href="poor.html" aria-labelledby="generic poor"&gt;&lt;span id="generic"&gt;More...&lt;/span&gt;&lt;/a&gt;
 </code>
 		<section>
@@ -96,11 +96,11 @@ <h3>Expected Results</h3>
 			<section id="related">
 			<h2>Related Techniques</h2>
 			<ul>
-				<li><a href="https://www.w3.org/TR/WCAG20-TECHS/aria#ARIA7">ARIA7: Using aria-labelledby for link purpose</a></li>
-				<li><a href="https://www.w3.org/TR/WCAG20-TECHS/aria#ARIA8">ARIA8: Using aria-label for link purpose</a></li>
-				<li><a href="https://www.w3.org/TR/WCAG20-TECHS/aria#ARIA9">ARIA9: Using aria-labelledby to concatenate a label from several text nodes</a></li>
-				<li><a href="https://www.w3.org/TR/WCAG20-TECHS/aria#ARIA16">ARIA16: Using aria-labelledby to provide a name for user interface controls</a></li>
-				<li><a href="https://www.w3.org/TR/WCAG20-TECHS/SCR30.html">SCR30: Using scripts to change the link text</a></li>
+				<li><a href="../aria/ARIA7">ARIA7: Using <code class="language-html">aria-labelledby</code> for link purpose</a></li>
+				<li><a href="../aria/ARIA8">ARIA8: Using <code class="language-html">aria-label</code> for link purpose</a></li>
+				<li><a href="../aria/ARIA9">ARIA9: Using <code class="language-html">aria-labelledby</code> to concatenate a label from several text nodes</a></li>
+				<li><a href="../aria/ARIA16">ARIA16: Using <code class="language-html">aria-labelledby</code> to provide a name for user interface controls</a></li>
+				<li><a href="../client-side-script/SCR30">SCR30: Using scripts to change the link text</a></li>
 			</ul>
 		</section>
 	</body>
diff --git a/techniques/general/G209.html b/techniques/general/G209.html
index 8de80237d0..6484151504 100644
--- a/techniques/general/G209.html
+++ b/techniques/general/G209.html
@@ -27,28 +27,28 @@ <h2>Examples</h2>
 			<section class="example">
 				<h3>Pie chart with alternative light/dark colors</h3>
 				<figure id="figure-pie-adjoining-segments">
-                    <img src="img/pie-chart-contrast-segments.png" alt="Pie chart of favorite candy flavours, including text labels and contrasting segments." />
+                    <img src="img/pie-chart-contrast-segments.png" alt="Pie chart of favorite candy flavours, including text labels and contrasting segments."/>
                     <figcaption>The contrast between adjoining segments of the pie chart range from 5.8 to 9.4.</figcaption>
                 </figure>
             </section>
 			<section class="example">
 				<h3>Pie chart with borders between segments</h3>
 				<figure id="figure-pie-contrasting-segments">
-                    <img src="img/pie-chart-contrast-borders.png" alt="Pie chart of favorite candy flavours, including text labels and contrasting borders between segments." />
+                    <img src="img/pie-chart-contrast-borders.png" alt="Pie chart of favorite candy flavours, including text labels and contrasting borders between segments."/>
                     <figcaption>The contrast between the segments of the pie chart range from 1.1 to 1.8. A border has been added with at least a 3:1 contrast ratio with the colors to distinguish between segments. .</figcaption>
                 </figure>
             </section>
 			<section class="example">
 				<h3>Map with border boundaries</h3>
 				<figure id="figure-map-border-boundaries">
-                    <img src="img/map-with-borders.png" alt="Map showing simple regions with dark background colours and a light border between regions." />
+                    <img src="img/map-with-borders.png" alt="Map showing simple regions with dark background colours and a light border between regions."/>
                     <figcaption>The color contrast of areas within the map range between 1.3 and 1.8. A boundary line is added with a color contrast ratio of at least 3:1 with the area colors.</figcaption>
                 </figure>
             </section>
 			<section class="example">
 				<h3>Pie chart with black and white borders</h3>
 				<figure id="figure-pie-black-white">
-                    <img src="img/pie-chart-contrast-two-color-borders.png" alt="Pie chart of favorite candy flavours, including text labels and black and white borders between segments." />
+                    <img src="img/pie-chart-contrast-two-color-borders.png" alt="Pie chart of favorite candy flavours, including text labels and black and white borders between segments."/>
                     <figcaption>The colored areas in the chart are both dark and light. A black and white boundary line is added to ensure sufficient contrast between both light and dark colors.</figcaption>
                 </figure>
             </section>
@@ -79,13 +79,13 @@ <h3>Expected Results</h3>
 		<section id="related">
 			<h2>Related Techniques</h2>
 			<ul>
-				<li><a href="G207.html">G207</a></li>
+				<li><a href="../general/G207">G207</a></li>
 			</ul>
         </section>
         <section id="resources">
                 <h2>Resources</h2>
                 <ul>
-                    <li><a href="../../understanding/contrast-minimum.html#resources">Understanding SC 1.4.3 Contrast (minimum)</a> lists color contrast tools.</li>
+                    <li><a href="../../Understanding/contrast-minimum.html#resources">Understanding SC 1.4.3 Contrast (minimum)</a> lists color contrast tools.</li>
                 </ul>
             </section>
 	</body>
diff --git a/techniques/general/G21.html b/techniques/general/G21.html
index 0e655567c4..6b23ba5c8a 100644
--- a/techniques/general/G21.html
+++ b/techniques/general/G21.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Ensuring that users are not trapped in content</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Ensuring that users are not trapped in content</h1><section class="meta"><p class="id">ID: G21</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Ensuring that users are not trapped in content</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/></head><body><h1>Ensuring that users are not trapped in content</h1><section class="meta"><p class="id">ID: G21</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
       <p>All technologies which support interactive operation.</p>
    </section><section id="description"><h2>Description</h2>
       <p>The objective of this technique is to ensure that keyboard users do not become trapped in a subset of the content that can only be exited using a mouse or pointing device. A common example is content rendered by plug-ins. Plug-ins are user agents that render content inside the user agent host window and respond to all user actions that takes place while the plug-in has the focus. If the plug-in does not provide a keyboard mechanism to return focus to the parent window, users who must use the keyboard may become trapped in the plug-in content.</p>
diff --git a/techniques/general/G211.html b/techniques/general/G211.html
index cfd2352cf1..cf948ee9d8 100644
--- a/techniques/general/G211.html
+++ b/techniques/general/G211.html
@@ -14,79 +14,80 @@ <h2>Metadata</h2>
 		</section>
 		<section id="applicability">
 			<h2>When to Use</h2>
-			<p class="instructions">This technique applies to all web technologies that include interactive controls (such as links or form inputs).</p>
+			<p>This technique applies to all web technologies that include interactive controls (such as links or form inputs).</p>
 		</section>
 		<section id="description">
 			<h2>Description</h2>
-			<p class="instructions">The objective of this technique is to ensure that speech input users can operate web content reliably while not adversely affecting other users of assistive technology.</p>
+			<p>The objective of this technique is to ensure that speech input users can operate web content reliably while not adversely affecting other users of assistive technology.</p>
 			<p>When speech input users interact with a web page, they usually speak a command followed by the reference to some visible label (such as text beside an input field or inside a button or link). For example, they may say "click search" to activate a button labelled Search. When speech recognition software processes speech input and looks for matches, it uses the <a href="https://www.w3.org/TR/accname/"> accessible name</a> of controls. Where there is a mismatch between the text in the label and the text in the accessible name, it can cause issues for the user. The simplest way to enable speech input users and meet 2.5.3 Label in Name is to ensure that the accessible name matches the visible text label.</p>
 			<h3>Determining the appropriate label</h3>
 			<p>Sometimes more than one text string will be positioned in the vicinity of a control that could be considered a candidate for its label. For example, a set of inputs that each have their own labels may also be preceded by a heading, an instruction or a group label (such as an HTML legend/fieldset or an ARIA group or radiogroup). Note that the term "group label" means something different than "label", both programmatically and in regard to 2.5.3 Label in Name.</p>
-			<p>The <a href="https://www.w3.org/WAI/WCAG21/Understanding/label-in-name">Understanding 2.5.3 Label in Name document</a> recommends that only the text string adjacent to or in close proximity to an input should be treated as the label when assessing a control's label for the purposes of meeting 2.5.3 (see the section "Identifying label text for components"). There are both practical and technical reasons for restricting the designation of an input's label in this way. The technical reasons are discussed in the Understanding document's section called Accessible Name and Description Computation specification.</p>
+			<p>The <a href="../../Understanding/label-in-name">Understanding 2.5.3 Label in Name document</a> recommends that only the text string adjacent to or in close proximity to an input should be treated as the label when assessing a control's label for the purposes of meeting 2.5.3 (see the section "Identifying label text for components"). There are both practical and technical reasons for restricting the designation of an input's label in this way. The technical reasons are discussed in the Understanding document's section called Accessible Name and Description Computation specification.</p>
 			
 		</section>
 		<section id="examples">
 			<h2>Examples</h2>
 			
-<p>Mapping a visible label to the accessible name is achieved in many technologies by meeting <a href="https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships.html"> 1.3.1 Information and Relationships</a> through the proper use of native semantics. Many controls derive accessible names by correct nesting of elements, while other elements have specific attributes which are a valid means of providing or referencing an accessible name.</p>
+<p>Mapping a visible label to the accessible name is achieved in many technologies by meeting <a href="../../Understanding/info-and-relationships.html"> 1.3.1 Information and Relationships</a> through the proper use of native semantics. Many controls derive accessible names by correct nesting of elements, while other elements have specific attributes which are a valid means of providing or referencing an accessible name.</p>
 			<p>The accessible name should be assigned through native elements and semantics where possible. That helps ensure an exact match between the visible label and name.</p>
 			<section class="example">
 			<h3>Anchor text provides both the link's label and its accessible name</h3>
-			<p id="linksample">Using conventional HTML, the text between the <code>anchor</code> element's tags provides both the link's visible text and the accessible name "Code of conduct":</p>		
-			<code>&lt;p&gt;Go to our &lt;a href="url-to-page-about-code.html"&gt;Code of conduct&lt;/a&gt;&lt;/p&gt;</code>
+			<p id="linksample">Using conventional HTML, the text between the <code class="language-html">a</code> element's tags provides both the link's visible text and the accessible name "Code of conduct":</p>		
+			<code class="language-html">&lt;p&gt;Go to our &lt;a href="url-to-page-about-code.html"&gt;Code of conduct&lt;/a&gt;&lt;/p&gt;</code>
 				<section>
 			<h4>Non-working sample of anchor</h4>
 			<p>Go to our <a href="#linksample">Code of conduct</a></p>
 				</section>
 			</section>
 				<section class="example">
-		<h3>Text in <code>label</code> element provides name for input via <code>for</code> attribute</h3>
-		<p>The text between the <code>label</code> tags also serves as the checkbox input's accessible name "Notify me of delays" by using the <code>for</code> attribute which references the <code>id</code> of the <code>input</code>.</p>	
-		<code>
-			&lt;input type="checkbox" id="notification" name="notify" value="delays"&gt;<br />
-    		&lt;label for="notification"&gt;Notify me of delays&lt;/label&gt;
-    	</code>
-					<section>
-    	<h4>Working sample of input</h4>
-    	<input type="checkbox" id="notification" name="notify" value="delays" />
-<label for="notification">Notify me of delays</label>
-					</section>
+
+		<h3>Text in <code class="language-html">label</code> element provides name for input via <code class="language-html">for</code> attribute</h3>
+		<p>The text between the <code class="language-html">label</code> tags also serves as the checkbox input's accessible name "Notify me of delays" by using the <code class="language-html">for</code> attribute which references the <code class="language-html">id</code> of the <code class="language-html">input</code>.</p>	
+<pre><code class="language-html">&lt;input type="checkbox" id="notification" name="notify" value="delays"&gt;
+&lt;label for="notification"&gt;Notify me of delays&lt;/label&gt;
+</code></pre>
+      <section>
+      	<h4>Working sample of input</h4>
+      	<input type="checkbox" id="notification" name="notify" value="delays"/>
+  <label for="notification">Notify me of delays</label>
+      </section>
 	</section>	
 		<section class="example">			
 		<h3>The button text provides the accessible name</h3>
-		<p>The text inside a <code>button</code> element becomes both its visible label and its accessible name:</p>	
-		<code>&lt;button&gt;Send&lt;/button&gt;</code><br />
-			<section>
-		<h4>Non-working sample of button</h4>
-		<button>Send</button>
-			</section>
+
+		<p>The text inside a <code class="language-html">button</code> element becomes both its visible label and its accessible name:</p>	
+		<code class="language-html">&lt;button&gt;Send&lt;/button&gt;</code>
+    <section>
+  		<h4>Non-working sample of button</h4>
+  		<button type="button">Send</button>
+    </section>
 	</section>	
 			
 			<section class="example">
-				<h4>Simple Radio Button Group</h4>
+				<h3>Simple Radio Button Group</h3>
 				<p>Radio buttons typically appear in a group, where each button is labelled and the group of buttons is preceded by information which explains or categorizes the group.</p>
 				<figure id="figure-call-me-radio-button-group">
-					<img src="img/call-me-radio-button-group.png" alt="Call me when balance exceeds $10,000, Yes No" />
+					<img src="img/call-me-radio-button-group.png" alt="Call me when balance exceeds $10,000, Yes No"/>
 					<figcaption>Figure 1 "Call me when balance exceeds $10,000 radio group, with Yes and No choices</figcaption>
 				</figure>
-				<p>The label for each component should be restricted to "Yes" and "No". To meet <a href="https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships"> 1.3.1 Information and Relationships</a> and <a href="https://www.w3.org/WAI/WCAG21/Understanding/labels-or-instructions.html"> 3.3.2 Labels or Instructions</a>, the "Call me…" text can be coded to convey the relationship to ATs, in this example by using a <code>fieldset</code> and <code>legend</code>.</p>
+				<p>The label for each component should be restricted to "Yes" and "No". To meet <a href="../../Understanding/info-and-relationships"> 1.3.1 Information and Relationships</a> and <a href="../../Understanding/labels-or-instructions.html"> 3.3.2 Labels or Instructions</a>, the "Call me…" text can be coded to convey the relationship to ATs, in this example by using a <code>fieldset</code> and <code>legend</code>.</p>
 				<p>If the label is not restricted to the string adjacent to the radio button, multiple interpretations of what constitutes the label can result in less uniform functionality. If "Yes" alone is not the label for the first radio button, is it "Call me when balance exceeds $10,000"? Or is it a combination of text strings, in which case is the order "Call me when balance exceeds $10,000 Yes" or "Yes, Call me when balance exceeds $10,000"? Decisions to combine text strings can have negative effects on screen reader users since the order of concatenation can affect meaning. In this example, "No, call me when balance exceeds $10,000" could be very confusing to a screen reader user.</p>
 				<code>
-					&lt;fieldset&gt;<br />
-					&lt;legend&gt;Call me when balance exceeds $10,000?&lt;/legend&gt;&lt;br /&gt;<br />
-					&lt;input type="radio" id="yes" name="callme" value="yes"&gt;<br />
-					&lt;label for="yes"&gt;Yes&lt;/label&gt;<br />
-					&lt;input type="radio" id="no" name="callme" value="no"&gt;<br />
-					&lt;label for="no"&gt;No&lt;/label&gt;<br />
-				&lt;/fieldset&gt;<br />
+					&lt;fieldset&gt;<br/>
+					&lt;legend&gt;Call me when balance exceeds $10,000?&lt;/legend&gt;&lt;br /&gt;<br/>
+					&lt;input type="radio" id="yes" name="callme" value="yes"&gt;<br/>
+					&lt;label for="yes"&gt;Yes&lt;/label&gt;<br/>
+					&lt;input type="radio" id="no" name="callme" value="no"&gt;<br/>
+					&lt;label for="no"&gt;No&lt;/label&gt;<br/>
+				&lt;/fieldset&gt;<br/>
 			</code>
-				<p class="working-example"><a href="../../working-examples/label-in-name-general/example1.html" target="_blank">Working example of Simple Radio Button Group</a></p>
+				<p class="working-example"><a href="../../working-examples/label-in-name-general/example1.html">Working example of Simple Radio Button Group</a></p>
 			</section>
 			<section class="example">
-				<h4>Checkbox Groupings</h4>
+				<h3>Checkbox Groupings</h3>
 				<p>For checkbox groupings, implementations that attempt to incorporate more than just the immediate checkbox label into the accessible name can also be problematic if not isolated to the adjacent text string.</p>
 				<figure id="figure-value-checkbox">
-					<img src="img/value-checkbox.png" alt="What do you value in our service? (Check all that apply) Courtesy, Promptness, Store Hours, Knowledge" />
+					<img src="img/value-checkbox.png" alt="What do you value in our service? (Check all that apply) Courtesy, Promptness, Store Hours, Knowledge"/>
 					<figcaption>Figure 2 What do you value in our service? checkbox group, with 4 choices.</figcaption>
 				</figure>
 				
@@ -94,62 +95,98 @@ <h4>Checkbox Groupings</h4>
 				<p>Attempting to include the preceding text as part of the accessible name can potentially make it more difficult to isolate a control by spoken commands for speech-input users. Such a construction will also negatively increase verbosity for screen reader users (with the combined text strings read out for each of the inputs before the input's state). The simplest solution is to restrict the accessible name to the text immediately beside the checkboxes, using similar techniques to those for the standard radio button group.</p>
 		</section>
 					<section class="example">
-				<h4>Stacked Labels</h4>
+				<h3>Stacked Labels</h3>
 				<p>Although labels for comboboxes, dropdown lists, text inputs, and other widgets are typically oriented immediately to the left of the component, there is an alternative established convention where labels are stacked above the inputs, aligned with their left edge.
 				</p>
 				<figure id="figure-stacked-label">
-					<img src="img/stacked-label.png" alt="two inputs labelled Email and Password" />
+
+					<img src="img/stacked-label.png" alt="two inputs labelled Email and Password" height="136" width="224" />
+
 					<figcaption>Figure 3 Two inputs with the labels positioned above and to the left.</figcaption>
 				</figure>
 				
 				<p>In Figure 3, the inputs are stacked and left-aligned, with the labels immediately preceding each input, also left-aligned. There is additional white space between the label and the preceding input so that the label is closest to its associated text input. Stacked labels are relatively common in mobile designs, where horizontal space is constrained.</p>
-				<p>Figure 4 shows a variation on stacked labels, where hints and guidance are included between the label and the input. This design does not provide an adjacent label. However, the "New Password" label is still considered to be in close enough proximity, especially given its size and boldness relative to the smaller and lower-contrast guidance text. The associations are reinforced programmatically, where the hint text is given a role of <code>aria-describedby</code> and the label is properly associated with the input.</p>
+				<p>Figure 4 shows a variation on stacked labels, where hints and guidance are included between the label and the input. This design does not provide an adjacent label. However, the "New Password" label is still considered to be in close enough proximity, especially given its size and boldness relative to the smaller and lower-contrast guidance text. The associations are reinforced programmatically, where the hint text is given a role of <code class="language-html">aria-describedby</code> and the label is properly associated with the input.</p>
 								<figure id="figure-new-password">
-					<img src="img/new-password.png" alt="New Password. Passwords must be 10 or more characters, and contain at least one capital, numeric and non-alphanumeric.'" />
+					<img src="img/new-password.png" alt="New Password. Passwords must be 10 or more characters, and contain at least one capital, numeric and non-alphanumeric.'"/>
 					<figcaption>Figure 4 New Password label positioned above input with a smaller-point text string about the password requirements positioned between the large label and the input.</figcaption>
 				</figure>
 				<p>The hint text in such implementations should be kept to a single line where possible, since accessibility issues can arise where a more lengthy hint separates the label from its input. Figure 4 illustrates that the concept of "adjacent text" is a guide for label interpretation, but cannot always serve as a hard rule.</p>
 				<code>
-				&lt;form&gt;<br />
-			&lt;label class="label" for="example-2"&gt;<br />
-				Password<br />
-			&lt;/label&gt;<br />
-			&lt;span id="example-2-hint" class="hint"&gt;<br />
-				Passwords must be 10 or more characters, and contain at least one capital, numeric and non-alphanumeric.<br />
-			&lt;/span&gt;<br />
-			&lt;input class="input" id="example-2" name="example-2" type="text" aria-describedby="example-2-hint"&gt;<br />
-		&lt;/form&gt;<br />
+				&lt;form&gt;<br/>
+			&lt;label class="label" for="example-2"&gt;<br/>
+				Password<br/>
+			&lt;/label&gt;<br/>
+			&lt;span id="example-2-hint" class="hint"&gt;<br/>
+				Passwords must be 10 or more characters, and contain at least one capital, numeric and non-alphanumeric.<br/>
+			&lt;/span&gt;<br/>
+			&lt;input class="input" id="example-2" name="example-2" type="text" aria-describedby="example-2-hint"&gt;<br/>
+		&lt;/form&gt;<br/>
 	</code>
-				<p class="working-example"><a href="../../working-examples/label-in-name-general/example2.html" target="_blank">Working example of stacked labels</a></p>
+				<p class="working-example"><a href="../../working-examples/label-in-name-general/example2.html">Working example of stacked labels</a></p>
+
 		</section>
 
-		
 					<section class="example">
-				<h4>Range of inputs with few labels</h4>
+				<h3>Range of inputs with few labels</h3>
 				<p>A less common disparity between labels and inputs can occur when a group of radio buttons is set up to elicit a choice across a range. The labels may only be located at each end of the range or may be interspersed at various points in the range.</p>
 				<figure id="figure-rate-response">
-					<img src="img/rate-response.png" alt="Rate your response, Hated it, Loved it" />
+					<img src="img/rate-response.png" alt="Rate your response, Hated it, Loved it"/>
 					<figcaption>Figure 6 Line of 5 radio buttons with Hated it and Loved it labels at each end</figcaption>
 				</figure>
 				
-				<p>The two labels, "Hated it" and "Loved it", are adjacent to the first and last radio buttons, and should be their accessible names. Speech-input users can speak either of these labels to select a radio button, and then use arrow navigation (e.g., "Press right arrow") to modify the selection. "Rate your response" is the text describing the whole widget and can be associated as the group label (here using <code>legend</code>). The three middle radio buttons do not have visible labels. In the code example they are given title attributes of "Disliked", "So-so" and "Liked" in order to meet 3.3.2 Labels or Instructions.</p>
+				<p>The two labels, "Hated it" and "Loved it", are adjacent to the first and last radio buttons, and should be their accessible names. Speech-input users can speak either of these labels to select a radio button, and then use arrow navigation (e.g., "Press right arrow") to modify the selection. "Rate your response" is the text describing the whole widget and can be associated as the group label (here using <code class="language-html">legend</code>). The three middle radio buttons do not have visible labels. In the code example they are given title attributes of "Disliked", "So-so" and "Liked" in order to meet 3.3.2 Labels or Instructions.</p>
+				<pre><code class="language-html">&lt;fieldset&gt;
+  &lt;legend&gt;Rate your response&lt;/legend&gt;
+  &lt;label for="hated"&gt;Hated it&lt;/label&gt;
+  &lt;input type="radio" name="meal" id="hated" value="hated"&gt;
+  &lt;input type="radio" name="meal" id="poor" value="poor" title="Disliked"&gt;
+  &lt;input type="radio" name="meal" id="neutral" value="neutral" title="So-so"&gt;
+  &lt;input type="radio" name="meal" id="okay" value="okay" title="Liked"&gt;
+  &lt;input type="radio" name="meal" id="loved" value="loved"&gt;
+  &lt;label for="loved"&gt;Loved it&lt;/label&gt;
+&lt;/fieldset&gt;
+</code></pre>
+				<p class="working-example"><a href="../../working-examples/label-in-name-general/example4.html">Working example of range of inputs</a></p>
+		</section>
+	
+		<section class="example">
+			<h3>Text in parentheses and punctuation</h3>
+			<p>Technique G211 is not intended to complicate existing conventions for the construction of accessible form inputs. As described in the <em>Punctuation and capitalization</em> and <em>Text in parentheses</em> subsections of the Understanding document, information does not always need to be included in the accessible name in an attempt to meet the Label in Name requirement, especially where the text would not normally be spoken when using speech recognition to navigate to controls. Where there are established ways of ensuring information and relationships conveyed visually are present programmatically, it is acceptable to leave text in parentheses and punctuation out of the accessible name.</p>
+			<p>The following snippet demonstrates possible techniques mentioned in the Understanding document. Since the required field is programmatically indicated, and the input restrictions on the date are surfaced through <code class="language-html">aria-describedby</code>, the asterisk and parenthetical information has been left out of the accessible name.</p>
+
+<pre><code class="language-html">
+&lt;label for="name"&gt;Name&lt;/label&gt; *
+&lt;input type="text" name="name" id="name" required&gt;
+&lt;label for="birth"&gt;Birth date&lt;/label&gt; &lt;span id="mask"&gt;(YYYY-MM-DD)&lt;/span&gt;
+&lt;input type="text" name="birth" id="birth" aria-describedby="mask"&gt;</code></pre>
+
+<section>
+	<h4>Working sample of inputs with simplified accessible names</h4>
+
+
+<div><label for="name">Name</label> *</div>
+<input type="text" name="name" id="name" required="required"/>
+<div><label for="birth">Birthdate</label> <span id="mask">(YYYY-MM-DD)</span></div>
+<input type="text" name="birth" id="birth" aria-describedby="mask"/>
+</section>
 
 				<p>
 					<code>
-						&lt;fieldset&gt;<br />&lt;legend&gt;Rate your response&lt;/legend&gt;<br />
-    &lt;label for="hated"&gt;Hated it&lt;/label&gt; <br />
-    &lt;input type="radio" name="meal" id="hated" value="hated"&gt;<br />
-    &lt;input type="radio" name="meal" id="poor" value="poor" title="Disliked"&gt;<br />
-    &lt;input type="radio" name="meal" id="neutral" value="neutral" title="So-so"&gt;<br />
-    &lt;input type="radio" name="meal" id="okay" value="okay" title="Liked"&gt;<br />
-    &lt;input type="radio" name="meal" id="loved" value="loved"&gt;<br />
-    &lt;label for="loved"&gt;Loved it&lt;/label&gt;<br />
-&lt;/fieldset&gt;<br />
+						&lt;fieldset&gt;<br/>&lt;legend&gt;Rate your response&lt;/legend&gt;<br/>
+    &lt;label for="hated"&gt;Hated it&lt;/label&gt; <br/>
+    &lt;input type="radio" name="meal" id="hated" value="hated"&gt;<br/>
+    &lt;input type="radio" name="meal" id="poor" value="poor" title="Disliked"&gt;<br/>
+    &lt;input type="radio" name="meal" id="neutral" value="neutral" title="So-so"&gt;<br/>
+    &lt;input type="radio" name="meal" id="okay" value="okay" title="Liked"&gt;<br/>
+    &lt;input type="radio" name="meal" id="loved" value="loved"&gt;<br/>
+    &lt;label for="loved"&gt;Loved it&lt;/label&gt;<br/>
+&lt;/fieldset&gt;<br/>
 </code>
 </p>
-				<p class="working-example"><a href="../../working-examples/label-in-name-general/example4.html" target="_blank">Working example of range of inputs</a></p>
+				<p class="working-example"><a href="../../working-examples/label-in-name-general/example4.html">Working example of range of inputs</a></p>
+
 		</section>
-							
 	</section>
 		<section id="tests">
 			<h2>Tests</h2>
@@ -157,9 +194,9 @@ <h2>Tests</h2>
 				<h3>Procedure</h3>
 				<ol>
 					<li>For input controls, examine each input that has adjacent text which serves as its label</li>
-					<li>For each input, check that the entire string of text (disregarding letter case and punctuation) matches the accessible name for the input, according to the accessible name computation</li>
+					<li>For each input, check that the label's entire string of text (optionally disregarding letter case, punctuation, and information in parentheses) matches the accessible name for the input, according to the accessible name computation</li>
 			<li>For buttons, links, menus and other non-input controls, examine each control that contains text which serves as its label</li>
-						<li>For each non-input control, check that the entire string of text (disregarding letter case and punctuation) matches the accessible name for the input</li></ol>
+						<li>For each non-input control, check that the label's entire string of text (optionally disregarding letter case, punctuation and information in parentheses) matches the accessible name for the input</li></ol>
 			</section>
 			<section class="test-results">
 				<h3>Expected Results</h3>
@@ -170,21 +207,18 @@ <h3>Expected Results</h3>
 		</section>
 		<section id="related">
 			<h2>Related Techniques</h2>
-			<p class="instructions">Provide links to other techniques that users should consider. This section is optional.</p>
 			<ul>
-				<li><a href="http://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/H44"> H44: Using label elements to associate text labels with form controls</a></li>
-<li><a href="http://www.w3.org/WAI/GL/2016/WD-WCAG20-TECHS-20160105/H71"> H71: Providing a description for groups of form controls using fieldset and legend elements</a></li>
-<li><a href="http://www.w3.org/WAI/GL/2016/WD-WCAG20-TECHS-20160105/H85"> H85: Using OPTGROUP to group OPTION elements inside a SELECT</a></li>
-<li><a href="http://www.w3.org/WAI/GL/2016/WD-WCAG20-TECHS-20160105/ARIA17"> ARIA17: Using grouping roles to identify related form controls</a> 
-</li>
+				<li><a href="../html/H44">H44: Using label elements to associate text labels with form controls</a></li>
+				<li><a href="../html/H71">H71: Providing a description for groups of form controls using fieldset and legend elements</a></li>
+				<li><a href="../html/H85">H85: Using OPTGROUP to group OPTION elements inside a SELECT</a></li>
+				<li><a href="../aria/ARIA17">ARIA17: Using grouping roles to identify related form controls</a></li>
 			</ul>
 		</section>
 		<section id="resources">
 			<h2>Resources</h2>
-			<p class="instructions">Provide links to external resources that are relevant to users of the technique. This section is optional.</p>
 			<ul>
-				<li><a href="https://www.w3.org/TR/accname-aam-1.1/"> Accessible Name and Description Computation</a></li>
-<li><a href="https://www.w3.org/TR/html-aam-1.0/#accessible-name-and-description-computation"> Accessible Name and Description Computation in HTML Accessibility API Mappings 1.0</a></li>
+				<li><a href="https://www.w3.org/TR/accname/">Accessible Name and Description Computation</a></li>
+				<li><a href="https://www.w3.org/TR/html-aam/#accessible-name-and-description-computation">Accessible Name and Description Computation in HTML Accessibility API Mappings 1.0</a></li>
 			</ul>
 		</section>
 	</body>
diff --git a/techniques/general/G212.html b/techniques/general/G212.html
index 89751b935a..a88807fb4e 100644
--- a/techniques/general/G212.html
+++ b/techniques/general/G212.html
@@ -8,7 +8,6 @@
 		<h1>Using native controls to ensure  functionality is triggered on the up-event.</h1>
 		<section id="meta">
 			<h2>Metadata</h2>
-			<p class="instructions">Provide information below to help editors associate the technique properly. Contents of the meta section are not output by the processor.</p>
 			<p id="sc">2.5.2 Pointer Cancellation<!-- SC to which this applies --></p>
 			<p id="type">Sufficient<!-- sufficient, advisory, or failure --></p>
 		</section>
@@ -38,7 +37,7 @@ <h3>Using a native button or link in HTML</h3>
 			<section class="example">
 				<h3>Using a native button in iOS or Android</h3>
 				<p>In native buttons in iOS and Android onclick events are triggered on the up-event by default.</p>
-				<p class="note">The WCAG standard itself applies to <a href="https://www.w3.org/TR/WCAG21/#dfn-web-page-s">web pages at a URL</a>, and therefore this example is provided as helpful supplementary advice for those looking to implement the <a href="https://www.w3.org/WAI/standards-guidelines/wcag/non-web-ict/">WCAG2ICT</a> for native applications.</p>
+				<p class="note">The WCAG standard itself applies to <a>web pages</a>, and therefore this example is provided as helpful supplementary advice for those looking to implement the <a href="https://www.w3.org/WAI/standards-guidelines/wcag/non-web-ict/">WCAG2ICT</a> for native applications.</p>
 			</section>
 		</section>
 
@@ -50,7 +49,7 @@ <h3>Procedure</h3>
 				<ol>
 					<li>Activate the down-event then move the pointer outside the target before triggering the up-event, and then release the pointer to trigger the up-event.</li> 
 					<li>Check that the action was not triggered when the pointer is released outside of the hit area for the target.</li>
-					<li>If the action is triggered, check that the action is reversible.</li>	
+					<li>If the action is triggered, check that the action is reversible.</li>
 				</ol>
 			</section>
 			<section class="test-results">
diff --git a/techniques/general/G214.html b/techniques/general/G214.html
index bf7d046a54..6afdc4a9a0 100644
--- a/techniques/general/G214.html
+++ b/techniques/general/G214.html
@@ -2,7 +2,6 @@
 <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
 	<head>
 		<title>Using a control to allow access to content in different orientations which is otherwise restricted</title>
-		<link rel="stylesheet" type="text/css" href="https://rawgit.com/w3c/wcag21/master/css/sources.css"/>
 	</head>
 	<body>
 		<h1>Using a control to allow access to content in different orientations which is otherwise restricted</h1>
@@ -24,7 +23,7 @@ <h2>Description</h2>
 			<h2>Examples</h2>
 			<section class="example">
 				<h3>An e-Reader application</h3>
-        <p>Users of an e-Reader web application sometimes read when laying down on their side. In this situation, the device is viewed by the user in portrait mode even though the device is in the landscape orientation with regard to gravity. The developer locks the content into the portrait orientation to allow for this reading behavior, but also provides a control to allow users who have devices mounted in a specific orientation to achieve the desired viewing orientation.</p>
+        <p>Users of an e-Reader web application sometimes read when lying down on their side. In this situation, the device is viewed by the user in portrait mode even though the device is in the landscape orientation with regard to gravity. The developer locks the content into the portrait orientation to allow for this reading behavior, but also provides a control to allow users who have devices mounted in a specific orientation to achieve the desired viewing orientation.</p>
 			</section>
 		</section>
 		<section id="tests">
@@ -47,7 +46,7 @@ <h3>Expected Results</h3>
 		<section id="related">
 			<h2>Related Techniques</h2>
 			<ul>
-				<li><a href="F97.html">F97</a></li>
+				<li><a href="../failures/F97">F97</a></li>
 			</ul>
 		</section>
 	</body>
diff --git a/techniques/general/G216.html b/techniques/general/G216.html
index 2d11dedf85..0ef2cb7b02 100644
--- a/techniques/general/G216.html
+++ b/techniques/general/G216.html
@@ -22,7 +22,7 @@ <h2>Description</h2>
 			<p>The objective of this technique is to ensure that users who have difficulties performing path-based gestures can operate a control slider. A control slider is a track with a &quot;thumb&quot; that you move along the track to set a value.</p>
 
 			<figure id="control-slider">
-				<img src="img/input-range.png" alt="A horizontal line with a round button halfway along the line, labelled volume." />
+				<img src="img/input-range.png" alt="A horizontal line with a round button halfway along the line, labelled volume."/>
 				<figcaption>Screenshot of an example control slider showing the thumb in the middle of the track.</figcaption>
 			</figure>
 			
diff --git a/techniques/general/G217.html b/techniques/general/G217.html
index d4a75d5a2f..3302cf710f 100644
--- a/techniques/general/G217.html
+++ b/techniques/general/G217.html
@@ -8,13 +8,12 @@
 		<h1>Providing a mechanism to allow users to remap or turn off character key shortcuts</h1>
 		<section id="meta">
 			<h2>Metadata</h2>
-			<p class="instructions">Provide information below to help editors associate the technique properly. Contents of the meta section are not output by the processor.</p>
 			<p id="sc">2.1.4 Character Key Shortcuts</p>
 			<p id="type">Sufficient</p>
 		</section>
 		<section id="applicability">
 			<h2>Applicability</h2>
-			<p class="instructions">Any technology that supports scripting.</p>
+			<p>Any technology that supports scripting.</p>
 		</section>
 		<section id="description">
 			<h2>Description</h2>
@@ -22,7 +21,7 @@ <h2>Description</h2>
 			<p>To prevent accidental activation, authors must allow users to turn off or reconfigure shortcuts that are made up of only character keys. Reconfiguring the shortcut may involve the ability to add a modifier key such as Ctrl, or authors may elect to allow users to alter the character keys assigned in addition to adding a modifer. Providing a mechanism to turn off or reassign the shortcut ensures more users can successfully interact with the application.</p>
 			<p class="note">If the keyboard shortcut is only active when a particular user interface component has focus, then the author does not need to provide an override mechanism. For example, in a <code>select</code> element, it is expected behaviour that pressing a letter key will reposition to the next item within the select element that begins with that character. This shortcut is only triggered when the select element has focus, and so it does not interfere with a user's ability to interact with the rest of the page.</p>
 			<h3>Locating and testing for character key shortcuts</h3>
-			<p>An initial challenge for testers is identifying if author-created shortcuts exist, and then determining if existing shortcuts are triggered by character keys without modifiers. Where testers have access to the develop team, the existence and nature of shortcut keys can often be determined simply by asking involved designers and developers. Where reliable information from the authors is not available, the presence of shortcuts can possibly be identified by checking code (for example, in javascript, the presence of <code>keydown</code>, <code>keyup</code> and <code>keypress</code> listeners). Another means of identifying shortcuts is to review documentation. Where none of these strategies provide information on the presence of keyboard shortcuts, manual tests will need to be completed to search for the existence of character key shortcuts. Review the test procedure in <a href="https://www.w3.org/WAI/WCAG21/Techniques/failures/F99">failure technique F99</a> for guidance.</p>
+			<p>An initial challenge for testers is identifying if author-created shortcuts exist, and then determining if existing shortcuts are triggered by character keys without modifiers. Where testers have access to the develop team, the existence and nature of shortcut keys can often be determined simply by asking involved designers and developers. Where reliable information from the authors is not available, the presence of shortcuts can possibly be identified by checking code (for example, in javascript, the presence of <code>keydown</code>, <code>keyup</code> and <code>keypress</code> listeners). Another means of identifying shortcuts is to review documentation. Where none of these strategies provide information on the presence of keyboard shortcuts, manual tests will need to be completed to search for the existence of character key shortcuts. Review the test procedure in <a href="../failures/F99">failure technique F99</a> for guidance.</p>
 
 		</section>
 		<section id="examples">
@@ -53,19 +52,5 @@ <h3>Expected Results</h3>
 				</ul>
 			</section>
 		</section>
-		<section id="related">
-			<h2>Related Techniques</h2>
-			<p class="instructions">Provide links to other techniques that users should consider. This section is optional.</p>
-			<ul>
-				<li>ID</li>
-			</ul>
-		</section>
-		<section id="resources">
-			<h2>Resources</h2>
-			<p class="instructions">Provide links to external resources that are relevant to users of the technique. This section is optional.</p>
-			<ul>
-				<li>Link</li>
-			</ul>
-		</section>
 	</body>
 </html>
diff --git a/techniques/general/G218.html b/techniques/general/G218.html
index c60bfd5371..8e08c3b495 100644
--- a/techniques/general/G218.html
+++ b/techniques/general/G218.html
@@ -8,12 +8,12 @@
 		<h1>Email link authentication</h1>
 		<section id="meta">
 			<h2>Metadata</h2>
-			<p id="sc">3.3.7 Accessible Authentication</p>
+			<p id="sc">3.3.8 Accessible Authentication (Minimum)</p>
 			<p id="type">Sufficient</p>
 		</section>
 		<section id="applicability">
 			<h2>Applicability</h2>
-			<p class="instructions">Technologies that support authentication.</p>
+			<p>Technologies that support authentication.</p>
 		</section>
 		<section id="description">
 			<h2>Description</h2>
@@ -38,12 +38,14 @@ <h3>Procedure</h3>
 					<li>Check that the email is received.</li>
 					<li>Check that selecting the link opens the website.</li>
 					<li>Check that the user account is logged in.</li>
+					<li>Check that no object recognition test is used as part of the authentication process.</li>
 				</ol>
 			</section>
 			<section class="test-results">
 				<h3>Expected Results</h3>
 				<ul>
 					<li>#2, #3 and #4 are true.</li>
+					<li>For the AAA Accessible Authentication (Enhanced), #5 is also true.</li>
 				</ul>
 			</section>
 		</section>
diff --git a/techniques/general/G219.html b/techniques/general/G219.html
index daa0a6ad8d..249f4ec9a4 100644
--- a/techniques/general/G219.html
+++ b/techniques/general/G219.html
@@ -1,14 +1,13 @@
 <!DOCTYPE html>
 <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
 	<head>
-		<title>Ensuring that a single pointer operable alternative is available for dragging movements that operate on content</title>
+		<title>Ensuring an alternative to dragging movements</title>
 		<link rel="stylesheet" type="text/css" href="../../css/editors.css"/>
 	</head>
 	<body>
-		<h1>Ensuring that a single pointer operable alternative is available for <a>dragging movement</a>s that operate on content</h1>
+    <h1>Ensuring that an alternative is available for <a>dragging movement</a>s that operate on content</h1>
 		<section id="meta">
 			<h2>Metadata</h2>
-			<p class="instructions">Provide information below to help editors associate the technique properly. Contents of the meta section are not output by the processor.</p>
 			<p id="sc">2.5.X Dragging</p>
 			<p id="type">Sufficient</p>
 		</section>
@@ -18,18 +17,20 @@ <h2>Applicability</h2>
 		</section>
 		<section id="description">
 			<h2>Description</h2>
-			<p>The objective of this Technique is to ensure that people with motor impairments who cannot carry out <a>dragging movements</a> are presented with a single pointer operable alternative. Some direct manipulation interfaces allow users to pick up targets and move them to another position, for example, to change the position of an item in a priority list in a list, or to change the status of a task in a Kanban implementation (a type of visual process management view which shows tasks in vertical lanes representing process steps such as ‘scheduled’, ‘processed’, ‘completed’).</p>
-			<p>The single pointer operable alternative may require the user to carry out a series of single pointer interactions (for example, activating a target to be moved; opening a dropdown menu; and selecting a drop destination from the list of menu items offered).</p>
+			<p>The objective of this Technique is to ensure that people with motor impairments who cannot carry out <a>dragging movements</a> are presented with an alternative <a>single pointer</a> interaction that does not involve dragging.</p> 
+      <p>Some direct manipulation interfaces allow users to pick up targets and use dragging movements to move them to another position, for example, to change the position of an item in a priority list, or to move a task on a Kanban or planning board.</p>
+      <p>Such dragging movements are difficult or impossible to carry out for some users with motor disabilities. The alternative to dragging movements operates the underlying function by one or several <a>single pointer</a> activations that don't require dragging. A single tap or click may reveal controls (arrows) to move a target in a stepwise fashion; open a drop-down menu where the drop position can be selected; or allow moving it to an ajacent postion by a swipe gesture.</p>
+      
 
 		</section>
 		<section id="examples">
 			<h2>Examples</h2>
 			<section class="example">
 				<ul>
-				<li>A list of items can be re-ordered by picking up an item and dragging it upwards or downwards. Other elements move dynamically to open a gap where the picked-up target can be dropped. After a single pointer activation, the list items display up and down arrows which allow a step-wise re-ordering of the the list via a <a>single pointer</a> inputs (taps or clicks at the up or down arrow).</li>
+				<li>A list of items can be re-ordered by picking up an item and dragging it upwards or downwards. Other elements move dynamically to open a gap where the picked-up target can be dropped. After a single pointer activation, the list items display up and down arrows which allow a step-wise re-ordering of the list via <a>single pointer</a> inputs (taps or clicks at the up or down arrow).</li>
 				<li>A vertical priority list indicates the priority of items listed. Each item can be ‘picked up’ with a pointer and dragged up or down to another position. The other list items rearrange dynamically. To the left of each list item, a number in a text field shows the current priority position. For any of the items, users can put in another number. This leads to a dynamic reordering and renumbering of the priority list.</li>
-				<li>In a Kanban implementation for process management, tasks can be dragged horizontally from one ‘swimming lane’ to another in order to change the status of tasks (for example, to change the status of a task from “in process” to “completed”). One or several items in a lande can be selected by a single tap or click. A single pointer activation of a drop-down menu labelled “Move selected items to” offers a selection of drop targets (other lanes). A further single pointer activation over the desired menu item moves targets to the specified lane.</li>
-				<li>In a Kanban implementation for process management, tasks can be dragged horizontally from one ‘swimming lane’ to another in order to change the status of tasks. A directional horizontal swipe over an item moves it to the adjacent lane. This process can be repeated until the item is in the desired lane.</li>
+				<li>In a Kanban implementation for process management, tasks can be dragged horizontally from one ‘swimming lane’ to another in order to change the status of tasks (for example, to change the status of a task from “in process” to “completed”). One or several items in a lane can be selected by a single tap or click. A single pointer activation of a drop-down menu labelled “Move selected items to” offers a selection of drop targets (other lanes). A further single pointer activation over the desired menu item moves targets to the specified lane.</li>
+        <li>In a radial control widget, the visual indicator of the current value of the control can be dragged to a different position. Users can also click or tap on another position of the radial control to change the value.</li>
 				</ul>
 
 			</section>
@@ -41,7 +42,7 @@ <h3>Procedure</h3>
 				<p>For interface elements that support dragging:</p>
 				<ol>
 					<li>Check the interface for the presence of functions triggered by <a>dragging movement</a>s.</li>
-					<li>Check that there is a <a>single pointer</a> input alternative to operate the same function</li>
+					<li>Check that there is a <a>single pointer</a> activation alternative that does not require dragging to operate the same function</li>
 				</ol>
 			</section>
 			<section class="test-results">
@@ -54,14 +55,9 @@ <h3>Expected Results</h3>
 		</section>
 		<section id="related">
 			<h2>Related Techniques</h2>
-			<p class="instructions">Provide links to other techniques that users should consider. This section is optional.</p>
 			<ul>
 				<li><a href="../general/G215">G215: Providing controls to achieve the same result as path based or multipoint</a></li>
 			</ul>
 		</section>
-		<section id="resources">
-			<h2>Resources</h2>
-
-		</section>
 	</body>
 </html>
diff --git a/techniques/general/G220.html b/techniques/general/G220.html
index ebe013b3b4..117c490165 100644
--- a/techniques/general/G220.html
+++ b/techniques/general/G220.html
@@ -1,11 +1,11 @@
 <!DOCTYPE html>
 <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
 	<head>
-		<title>Provide a contact-us link</title>
+		<title>Provide a contact-us link in a consistent location</title>
 		<link rel="stylesheet" type="text/css" href="../../css/editors.css"/>
 	</head>
 	<body>
-		<h1>Provide a contact-us link</h1>
+		<h1>Provide a contact-us link in a consistent location</h1>
 		<section id="meta">
 			<h2>Metadata</h2>
 			<p id="sc">Findable Help</p>
@@ -13,7 +13,7 @@ <h2>Metadata</h2>
 		</section>
 		<section id="applicability">
 			<h2>Applicability</h2>
-			<p class="instructions">Technologies that contain links</p>
+			<p>Technologies that contain links</p>
 		</section>
 		<section id="description">
 			<h2>Description</h2>
@@ -23,12 +23,19 @@ <h2>Description</h2>
 		<section id="examples">
 			<h2>Examples</h2>
 			<section class="example">
-				<h3> A link at the top of the page</h3>
-				<p>An on-line job application asks for many types of information from the user, such as their identification number, but they may have several and not know which one to enter. They may need more information from someone that can answer their question when the contextual help provided does not meet their needs. The (for example) sixth link that the user reaches when tabbing through the page is titled "Contact Us". This link is also visually in the same location on each page. Activating the link brings the user to the contact details page. The contact details page has an email address for a company representative or general information inbox which is then shared with appropriate personnel.</p>
+				<h3>A link at the top of the page</h3>
+				<p>An on-line job application asks for many types of information from the user, such as their identification number, but they may have several and not know which one to enter. They may need more information from someone that can answer their question when the contextual help provided does not meet their needs. One of the first links that the user reaches when tabbing through the page is titled "Contact Us". This link is also visually in the same location on each page. Activating the link brings the user to the contact details page. The contact details page has an email address for a company representative or general information inbox which is then shared with appropriate personnel.</p>
 			</section>
 			<section class="example">
 				<h3>A link in the footer region</h3>
-				<p>A Web page’s footer region contains links repeated on every page in a set of web pages. The visual and programmatic order are consistent when viewed in the same size display. The (example) third link in the footer region is labeled visually and programmatically “Contact Us.” A user activates the link and is brought to the contact details page. The contact details page has an email address for a company representative or general information inbox which is then shared with appropriate personnel.</p>
+				<p>A Web page's footer region contains links repeated on every page in a set of web pages. The visual and programmatic order are consistent when viewed in the same size display. One of the first links in the footer region is labeled visually and programmatically "Contact Us". A user activates the link and is brought to the contact details page. The contact details page has an email address for a company representative or general information inbox which is then shared with appropriate personnel.</p>
+			</section>
+			<section class="example">
+				<h3>A link sometimes in a disclosure widget</h3>
+				<p>On some pages in a set of web pages, there is a link to a help mechanism directly on the page. On one or more other pages in the set, the link is within a disclosure widget which is in the same relative order as the link that is directly on the page.</p>
+        <div class="note">
+          <p>Although this example technically passes the Success Criterion, it creates a less consistent user experience and is less preferable than consistently placing a link directly on the page.</p>
+        </div>
 			</section>
 		</section>
 		<section id="tests">
@@ -36,7 +43,7 @@ <h2>Tests</h2>
 			<section class="test-procedure">
 				<h3>Procedure</h3>
 				<ol>			
-					<li>Determine if this is a single page app or a set of web pages, with blocks of content that are repeated on multiple web pages.</li>
+					<li>Determine if this is a set of web pages with blocks of content that are repeated on multiple pages.</li>
 					<li>Determine if at least one of the following is included or linked in a consistent location:
 						<ul>
 							<li>Human contact details</li>
@@ -45,9 +52,16 @@ <h3>Procedure</h3>
 							<li>A fully automated mechanism</li>
 						</ul>
 					</li>
-					<li>Without changing the viewport size, check that the identified help is present on all other web pages within that set of web pages. </li>
+					<li>Without changing the viewport size, check that the identified help is present on all other web pages within that set of web pages.</li>
 				</ol>		
 			</section>
+			<section class="test-results">
+				<h3>Expected Results</h3>
+				<ul>
+					<li>If #1 is true, #2 and #3 are true.</li>
+					<li>Otherwise, #1 is false.</li>
+				</ul>
+			</section>
 		</section>
 		<section id="related">
 			<h2>Related Techniques</h2>
diff --git a/techniques/general/G223.html b/techniques/general/G223.html
new file mode 100644
index 0000000000..4eb291d87d
--- /dev/null
+++ b/techniques/general/G223.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using an author-supplied, highly visible focus indicator</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/></head><body><h1>Using an author-supplied, highly visible focus indicator</h1><section class="meta"><p class="id">ID: G195</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+    <p>Generally applicable.</p>
+ </section><section id="description"><h2>Description</h2>
+    <p>The objective of this technique is enhance the focus indicator in the browser, by creating a highly visible one in the content. This technique is very similar to <a href="G195">G195</a>, but with a stronger indicator to meet <a href="../../Understanding/focus-appearance">Focus Appearance</a>.</p>
+ </section>
+ <section id="examples">
+    <h2>Examples</h2>
+    <section class="example">
+       <h3>Links</h3>
+          <p>A Web page has a dark background color and light text and links. When focus lands on a link, the link is outlined with a bright yellow line, 3 pixels wide.</p>
+    </section>
+    <section class="example">
+       <h3>Form Elements</h3>
+       
+          <p>A Web page includes a form inside a table. The borders of both the table and the form elements are thin, black lines. When focus lands on a form element, the element is outlined with a 5 pixel red line that is partially transparent. The red is equivalent to a hex color of #CA0000, providing a 6:1 contrast ratio with the white background.</p>
+       
+    </section>
+    <section class="example">
+       <h3>Menus</h3>
+       
+          <p>A Web page includes an interactive menu with sub-menus. A user can move focus in the menu using the arrow keys. As focus moves, the currently focused menu item changes its background to a different color, which has a 15:1 contrast ratio with the surrounding items (whilst maintaining text contrast).</p>
+       
+    </section>
+ </section><section id="tests"><h2>Tests</h2>
+    <section class="procedure"><h3>Procedure</h3>
+       <p>For each user interface component on the page that should receive keyboard focus:</p>
+       <ol>
+          <li>Navigate to the component and check that it has a visible focus indicator that is not obscured by other content.</li>
+          <li>Check that the focus indicator area is at least double the size of a 1 CSS px border around the component.</li>
+          <li>Check that the change of contrast of the indicator between focused and unfocused states has a ratio of 4.5:1 or more for the minimum focus indicator area.</li>
+       </ol>
+    </section>
+    <section class="results"><h3>Expected Results</h3>
+       <ul>
+          <li>All checks are true.</li>
+       </ul>
+    </section>
+ </section><section id="related"><h2>Related Techniques</h2><ul>
+    <li><a href="../general/G149">G149</a></li>
+    <li><a href="../general/G165">G165</a></li>
+    <li><a href="../css/C15">C15</a></li>
+    <li><a href="../client-side-script/SCR31">SCR31</a></li>
+ </ul></section></body></html>
diff --git a/techniques/general/G4.html b/techniques/general/G4.html
index 7671bd56e8..362989a96d 100644
--- a/techniques/general/G4.html
+++ b/techniques/general/G4.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Allowing the content to be paused and restarted from where it was paused</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Allowing the content to be paused and restarted from where it was paused</h1><section class="meta"><p class="id">ID: G4</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Allowing the content to be paused and restarted from where it was paused</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/></head><body><h1>Allowing the content to be paused and restarted from where it was paused</h1><section class="meta"><p class="id">ID: G4</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
       <p>Any technology that includes moving or scrolling content.</p>
    </section><section id="description"><h2>Description</h2>
       <p>The objective of this technique is to provide a way to pause movement or scrolling of content. If the user needs to pause the movement, to reduce distraction or to have time to read it, they can do so, and then restart it as needed. This mechanism can be provided either through interactive controls that conform to WCAG or through keyboard shortcuts. If keyboard shortcuts are used, they are documented.</p>
diff --git a/techniques/general/G5.html b/techniques/general/G5.html
index 7b84de3036..4d466eee08 100644
--- a/techniques/general/G5.html
+++ b/techniques/general/G5.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Allowing users to complete an activity without any time limit</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Allowing users to complete an activity without any time limit</h1><section class="meta"><p class="id">ID: G5</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Allowing users to complete an activity without any time limit</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/></head><body><h1>Allowing users to complete an activity without any time limit</h1><section class="meta"><p class="id">ID: G5</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
       <p>This technique applies to any technologies or methods supporting the implementation of an activity which does not require timed interaction for its functionality.</p>
    </section><section id="description"><h2>Description</h2>
       <p>The objective of this technique is to provide users with all the time they need to complete an activity. This technique involves providing a specified activity which does not require timed interaction. Users are allowed as much time as they need to interact with the activity.</p>
diff --git a/techniques/general/G53.html b/techniques/general/G53.html
index 1bca171a34..c762ddd74b 100644
--- a/techniques/general/G53.html
+++ b/techniques/general/G53.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Identifying the purpose of a link using link text combined with the text of the enclosing sentence</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Identifying the purpose of a link using link text combined with the text of the enclosing sentence</h1><section class="meta"><p class="id">ID: G53</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Identifying the purpose of a link using link text combined with the text of the enclosing sentence</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/></head><body><h1>Identifying the purpose of a link using link text combined with the text of the enclosing sentence</h1><section class="meta"><p class="id">ID: G53</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
       <p>All technologies that contain links.</p>
    </section><section id="description"><h2>Description</h2>
       <p>The objective of this technique is to identify the purpose of a link from the link and its sentence context. The sentence enclosing the link provides context for an otherwise unclear link. The description lets a user distinguish this link from links in the Web page that lead to other destinations and helps the user determine whether to follow the link. Note that simply providing the URI of the destination is generally not sufficiently descriptive.</p>
diff --git a/techniques/general/G54.html b/techniques/general/G54.html
index bb51ed7bf9..a92f5f0c2b 100644
--- a/techniques/general/G54.html
+++ b/techniques/general/G54.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Including a sign language interpreter in the video stream</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Including a sign language interpreter in the video stream</h1><section class="meta"><p class="id">ID: G54</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Including a sign language interpreter in the video stream</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/></head><body><h1>Including a sign language interpreter in the video stream</h1><section class="meta"><p class="id">ID: G54</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
       <p>Applies to all technologies that present synchronized media information</p>
    </section><section id="description"><h2>Description</h2>
       <p>The objective of this technique is to allow users who cannot hear or read text rapidly to be able to access synchronized media material.</p>
diff --git a/techniques/general/G55.html b/techniques/general/G55.html
index 9681e5ea84..4da2e42ed1 100644
--- a/techniques/general/G55.html
+++ b/techniques/general/G55.html
@@ -1,71 +1,83 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Linking to definitions</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Linking to definitions</h1><section class="meta"><p class="id">ID: G55</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
-      <p>All technologies that include links.</p>
-   </section><section id="description"><h2>Description</h2>
-      <p>The objective of this technique is to make the definition of a word, phrase, or abbreviation available by providing the definition, either within the same Web page or in a different Web page, and establishing a link between the item and its definition.</p>
-      <p>Links are a powerful option for providing access to the definition of a word, phrase, or abbreviation. A user can use the link to find the definition quickly and easily, and then return to his place in the content via the user agent's Back button.</p>
-   </section><section id="examples"><h2>Examples</h2>
-      <section class="example">
-         
-            <p>Technical terms and abbreviations in an article about sports injuries are linked to definitions in a medical dictionary.</p>
-         
-      </section>
-      <section class="example">
-         
-            <p>A textbook contains a glossary of new vocabulary words introduced in each chapter. The first occurrence of each of these words is linked to its definition in the glossary.</p>
-         
-      </section>
-      <section class="example">
-         
-            <p>A general glossary of abbreviations is provided. All occurrences of abbreviations are linked directly to the appropriate definition within that glossary.</p>
-         
-      </section>
-      <section class="example">
-         
-            <p>The word
-                <em>
-                  <a>jargon</a>
-                </em>
-                is linked to its definition in the WCAG2 Glossary.</p>
-         
-      </section>
-      <section class="example">
-         
-            <p>The word "modulo" is jargon used in Web content about mathematics. A definition for modulo is included within the Web page. Each occurrence of the word modulo is linked to its definition.</p>
-         
-      </section>
-      <section class="example">
-         
-            <p>A Japanese idiom is linked to its definition. This example uses a link within the page to navigate to the definition of an idiomatic expression.</p>
-         
-         <pre xml:space="preserve">
-              &lt;p&gt;...&lt;a href="#definition"&gt;さじを投げる&lt;/a&gt;...&lt;/p&gt;
-                &lt;h3&gt;脚注：&lt;/h3&gt;
-                &lt;dl&gt;
-                &lt;dt id="definition" name="definition"&gt;さじを投げる&lt;/dt&gt;
-                &lt;dd&gt;どうすることもできなくなり、あきらめること。&lt;/dd&gt;
-                &lt;/dl&gt;
-            </pre>
-      </section>
-   </section><section id="tests"><h2>Tests</h2>
-      <section class="procedure"><h3>Procedure</h3>
-         <p>For each word, phrase, or abbreviation to be defined:</p>
-         <ol>
-            <li>Check that at least the first instance of the item is a link.</li>
-            <li>Check that each link navigates to the definition of the item.</li>
-         </ol>
-      </section>
-      <section class="results"><h3>Expected Results</h3>
-         <ul>
-            <li>Checks #1 and #2 are true.</li>
-         </ul>
-      </section>
-   </section><section id="related"><h2>Related Techniques</h2><ul>
-      <li><a href="../general/G62">G62</a></li>
-      <li><a href="../general/G70">G70</a></li>
-      <li><a href="../general/G101">G101</a></li>
-      <li><a href="../general/G102">G102</a></li>
-      <li><a href="../general/G112">G112</a></li>
-      <li><a href="../html/H40">H40</a></li>
-      <li><a href="../html/H60">H60</a></li>
-      <li><a href="../html/H64">H64</a></li>
-   </ul></section><section id="resources"><h2>Resources</h2></section></body></html>
\ No newline at end of file
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+<head>
+	<title>Linking to definitions</title>
+	<link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+</head>
+<body>
+	<h1>Linking to definitions</h1>
+	<section class="meta">
+		<p class="id">ID: G55</p>
+		<p class="technology">Technology: general</p>
+		<p class="type">Type: Technique</p>
+	</section>
+	<section id="applicability">
+		<h2>When to Use</h2>
+		<p>All technologies that include links.</p>
+	</section>
+	<section id="description">
+		<h2>Description</h2>
+		<p>The objective of this technique is to make the definition of a word, phrase, or abbreviation available by providing the definition, either within the same Web page or in a different Web page, and establishing a link between the item and its definition.</p>
+		<p>Links are a powerful option for providing access to the definition of a word, phrase, or abbreviation. A user can use the link to find the definition quickly and easily, and then return to their place in the content via the user agent's Back button.</p>
+	</section>
+	<section id="examples">
+		<h2>Examples</h2>
+		<section class="example">
+			<p>Technical terms and abbreviations in an article about sports injuries are linked to definitions in a medical dictionary.</p>
+		</section>
+		<section class="example">
+			<p>A textbook contains a glossary of new vocabulary words introduced in each chapter. The first occurrence of each of these words is linked to its definition in the glossary.</p>
+		</section>
+		<section class="example">
+			<p>A general glossary of abbreviations is provided. All occurrences of abbreviations are linked directly to the appropriate definition within that glossary.</p>
+		</section>
+		<section class="example">
+			<p>The word <i><a>jargon</a></i> is linked to its definition in the WCAG2 Glossary.</p>
+		</section>
+		<section class="example">
+			<p>The word "modulo" is jargon used in Web content about mathematics. A definition for modulo is included within the Web page. Each occurrence of the word modulo is linked to its definition.</p>
+		</section>
+		<section class="example">
+			<p>A Japanese idiom is linked to its definition. This example uses a link within the page to navigate to the definition of an idiomatic expression.</p>
+<pre xml:space="preserve"><code class="language-html">&lt;p&gt;...&lt;a href="#definition"&gt;さじを投げる&lt;/a&gt;...&lt;/p&gt;
+&lt;h3&gt;脚注：&lt;/h3&gt;
+&lt;dl&gt;
+  &lt;dt id="definition"&gt;さじを投げる&lt;/dt&gt;
+  &lt;dd&gt;どうすることもできなくなり、あきらめること。&lt;/dd&gt;
+&lt;/dl&gt;</code></pre>
+		</section>
+	</section>
+	<section id="tests">
+		<h2>Tests</h2>
+		<section class="procedure">
+			<h3>Procedure</h3>
+			<p>For each word, phrase, or abbreviation to be defined:</p>
+			<ol>
+				<li>Check that at least the first instance of the item is a link.</li>
+				<li>Check that each link navigates to the definition of the item.</li>
+			</ol>
+		</section>
+		<section class="results">
+			<h3>Expected Results</h3>
+			<ul>
+				<li>Checks #1 and #2 are true.</li>
+			</ul>
+		</section>
+	</section>
+	<section id="related">
+		<h2>Related Techniques</h2>
+		<ul>
+			<li><a href="../general/G62">G62</a></li>
+			<li><a href="../general/G70">G70</a></li>
+			<li><a href="../general/G101">G101</a></li>
+			<li><a href="../general/G102">G102</a></li>
+			<li><a href="../general/G112">G112</a></li>
+			<li><a href="../html/H40">H40</a></li>
+			<li><a href="../html/H64">H64</a></li>
+		</ul>
+	</section>
+	<section id="resources">
+		<h2>Resources</h2>
+	</section>
+</body>
+</html>
\ No newline at end of file
diff --git a/techniques/general/G56.html b/techniques/general/G56.html
index 09592fdd8a..8373f2cece 100644
--- a/techniques/general/G56.html
+++ b/techniques/general/G56.html
@@ -1,14 +1,13 @@
 <!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Mixing audio files so that non-speech sounds are at least 20 decibels
-          lower than the speech audio content</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Mixing audio files so that non-speech sounds are at least 20 decibels
+          lower than the speech audio content</title><link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/></head><body><h1>Mixing audio files so that non-speech sounds are at least 20 decibels
           lower than the speech audio content</h1><section class="meta"><p class="id">ID: G56</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
       <p>Any technology</p>
    </section><section id="description"><h2>Description</h2>
       <p>The objective of this technique is to allow authors to include sound behind
             speech without making it too hard for people with hearing problems to
             understand the speech. Making sure that the foreground speech is 20 db louder than the
-            backgound sound makes the speech 4 times louder than the background audio.
-            For information on Decibels (dB), refer to
-            <a href="http://trace.wisc.edu/docs/2004-About-dB/index.htm">About Decibels</a>.</p>
+            backgound sound makes the speech 4 times louder than the background audio. For information on Decibels (dB), refer to
+            <a href="https://ds.gpii.net/content/about-decibels-db">About Decibels</a>.</p>
    </section><section id="examples"><h2>Examples</h2>
       <section class="example">
          <h3>An announcer speaking over a riot scene</h3>
@@ -22,37 +21,46 @@ <h3>An announcer speaking over a riot scene</h3>
          <h3>Sufficient audio contrast between a narrator and background music</h3>
          
             <p>This example demonstrates a voice with music in the background in which the voice is the appropriate 20 DB above the background. The voice (foreground) is recorded at -17.52 decibels (average RMS) and the music (background) is at -37.52 decibels, which makes the foreground 20 decibels louder than the background.</p>
-            <p class="exsubhead">Audio example</p>
-            <p class="working-example">
-                <a href="../../working-examples/audio-contrast/good-contrast.mp3">Audio Example: Foreground is 20 decibels above the background (mp3)</a>
-              </p>
-            <p>Transcript of audio example (good contrast):</p>
-            <p>"Usually the foreground refers to a voice that is speaking and should be understood. My speaking voice right now is 20 decibels above the background which is the music. This is an example of how it should be done.."</p>
-            <p class="exsubhead">Visual example of the recording above</p>
-            <p>The audio example above is visually represented below in a snapshot of the file in an audio editor. A section is highlighted that contains foreground and  background. It is a much larger wave than the section that contains only background.</p>
-            <figure id="figure-visual-color-contrast">
-            	<img src="img/Audio_3.jpg"/>
-            	<figcaption>Visual representation of sufficient contrast.</figcaption>
-            </figure>
-         
+            <section>
+              <h4>Audio example</h4>
+              <p class="working-example">
+                  <a href="../../working-examples/audio-contrast/good-contrast.mp3">Audio Example: Foreground is 20 decibels above the background (mp3)</a>
+                </p>
+            </section>
+            <section>
+              <h4>Transcript of audio example (good contrast)</h4>
+              <p>"Usually the foreground refers to a voice that is speaking and should be understood. My speaking voice right now is 20 decibels above the background which is the music. This is an example of how it should be done.."</p>
+            </section>
+            <section>
+              <h4>Visual example of the recording above</h4>
+              <p>The audio example above is visually represented below in a snapshot of the file in an audio editor. A section is highlighted that contains foreground and  background. It is a much larger wave than the section that contains only background.</p>
+              <figure id="figure-visual-color-contrast">
+              	<img alt="A display showing a sound wave. The left third of the sound wave is just background noise, registering from -10 to +10 decibels. The remaining right-hand section is foreground and background noise showing a range from -50 to +40 decibels." src="img/Audio_3.jpg"/>
+              	<figcaption>Visual representation of sufficient contrast.</figcaption>
+              </figure>
+          </section>
       </section>
       <section class="example">
          <h3>Insufficient Audio Contrast between a narrator and background music</h3>
-         
-            <p class="exsubhead">Audio example of the failure</p>
+         <section>
+            <h4>Audio example of the failure</h4>
             <p>This example demonstrates a voice with music in the background in which the voice is not 20 DB above the background. The voice (foreground) is at -18 decibels and the music (background) is at about -16 decibels making the foreground only 2 decibels louder than the background.</p>
             <p class="working-example">
                 <a href="../../working-examples/audio-contrast/bad-contrast.mp3">Audio Example: Foreground is less than 20 decibels above the background (mp3)</a>
               </p>
-            <p>Transcript of audio example (bad contrast):</p>
+          </section>
+          <section>
+            <h4>Transcript of audio example (bad contrast)</h4>
             <p>"This is an example of a voice that is not loud enough against the background. The voice which is the foreground is only about 2 decibels above the background. Therefore is difficult to understand for a person who is hard of hearing. It is hard to discern one word from the next. This is an example of what not to do."</p>
-            <p class="exsubhead">Visual example of the failure</p>
+          </section>
+          <section>
+            <h4>Visual example of the failure</h4>
             <p>The highlighted section contains foreground and background. The wave is almost the same size the section that contains only background, which means the background is too loud in comparison to the foreground voice.</p>
             <figure id="figure-visual-representation-poor-contrast">
-            	<img src="img/Audio_4.jpg"/>
+            	<img alt="A display showing a sound wave. A short section on the left is just background noise with a range of -35db to +35db. The main section of the wave has background and foreground noise, with a range of almost -70db to +70db. The final background-only section has a spike of a similar size." src="img/Audio_4.jpg"/>
             	<figcaption>Visual representation of bad contrast.</figcaption>
             </figure>
-         
+          </section>
       </section>
    </section><section id="tests"><h2>Tests</h2>
       <section class="procedure"><h3>Procedure</h3>
@@ -70,16 +78,12 @@ <h3>Insufficient Audio Contrast between a narrator and background music</h3>
             <li>#5 is true</li>
          </ul>
       </section>
-   </section><section id="resources"><h2>Resources</h2>
-      
+    </section><section id="resources"><h2>Resources</h2>
+
          <ul>
             <li>
-                  <a href="http://trace.wisc.edu/docs/2004-About-dB/">About
-                    Decibels</a>
-                  by Gregg Vanderheiden</li>
-            <li>
-                  <a href="http://www.eramp.com/david/audio_contrast_general_techs.htm">Audio creation / contrast tutorial</a>
-                </li>
+               <a href="https://web.archive.org/web/20170716020055/http://www.eramp.com/david/audio_contrast_general_techs.htm">Audio creation / contrast tutorial</a>
+            </li>
          </ul>
-      
+
    </section></body></html>
diff --git a/techniques/general/G57.html b/techniques/general/G57.html
index 71edfb833a..48e7d40b3d 100644
--- a/techniques/general/G57.html
+++ b/techniques/general/G57.html
@@ -1,72 +1,98 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Ordering the content in a meaningful sequence</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Ordering the content in a meaningful sequence</h1><section class="meta"><p class="id">ID: G57</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
-      <p>All technologies.</p>
-   </section><section id="description"><h2>Description</h2>
-      <p>The objective of this technique is to ensure that the order of content presented to assistive technologies allows the user to make sense of the content. Some techniques permit the content to be rendered visually in a meaningful sequence even if this is different from the order in which the content is encoded in the underlying source file.</p>
-      <p>For example, when mixing languages with different directionality in HTML, the bidirectional algorithm may position punctuation in the wrong location in the visual rendering. The visual rendering problem could be corrected by moving the punctuation in the content stream so that the bidirectional algorithm positions it as desired, but this would expose the incorrect content order to assistive technology. The content is both rendered in the correct order visually and exposed to assistive technology in the correct order by using markup to override the bidirectional algorithm.</p>
-      <p>When rendered visually, white space characters such as space or tab may not appear to be part of the content. However, when inserted into the content to control visual formatting, they may interfere with the meaning of the content.</p>
-      <p>At a larger granularity, controlling the placement of blocks of content in an HTML document using layout tables may produce a rendering in which related information is positioned together visually, but separated in the content stream. Since layout tables are read row by row, if the caption of an illustration is placed in the row following the illustration, it may be impossible to associate the caption with the image.</p>
-   </section><section id="examples"><h2>Examples</h2>
-      <section class="example">
-         
-            <p>A Web page from a museum exhibition contains a navigation bar containing a long list of links. The page also contains an image of one of the pictures from the exhibition, a heading for the picture, and a detailed description of the picture. The links in the navigation bar form a meaningful sequence. The heading, image, and text of the description also form a meaningful sequence. CSS is used to position the elements on the page.</p>
-            <p>Markup:</p>
-         
-         <pre xml:space="preserve">
-  &lt;h1&gt;My Museum Page&lt;/h1&gt;
-  &lt;ul id="nav"&gt;
-    &lt;li&gt;&lt;a href="#"&gt;Link 1&lt;/a&gt;&lt;/li&gt;
-    ...
-    &lt;li&gt;&lt;a href="#"&gt;Link 10&lt;/a&gt;&lt;/li&gt;
-  &lt;/ul&gt;
-  &lt;div id="description"&gt;
-    &lt;h2&gt;Mona Lisa&lt;/h2&gt;
-    &lt;p&gt;
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+<head>
+	<title>Ordering the content in a meaningful sequence</title>
+	<link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+</head>
+<body>
+	<h1>Ordering the content in a meaningful sequence</h1>
+	<section class="meta">
+		<p class="id">ID: G57</p>
+		<p class="technology">Technology: general</p>
+		<p class="type">Type: Technique</p>
+	</section>
+	<section id="applicability">
+		<h2>When to Use</h2>
+		<p>All technologies.</p>
+	</section>
+	<section id="description">
+		<h2>Description</h2>
+		<p>The objective of this technique is to ensure that the order of content presented to assistive technologies allows the user to make sense of the content. Some techniques permit the content to be rendered visually in a meaningful sequence even if this is different from the order in which the content is encoded in the underlying source file.</p>
+		<p>For example, when mixing languages with different directionality in <abbr title="HyperText Markup Language">HTML</abbr>, the bidirectional algorithm may position punctuation in the wrong location in the visual rendering. The visual rendering problem could be corrected by moving the punctuation in the content stream so that the bidirectional algorithm positions it as desired, but this would expose the incorrect content order to assistive technology. The content is both rendered in the correct order visually and exposed to assistive technology in the correct order by using markup to override the bidirectional algorithm.</p>
+		<p>When rendered visually, white space characters such as space or tab may not appear to be part of the content. However, when inserted into the content to control visual formatting, they may interfere with the meaning of the content.</p>
+		<p>At a larger granularity, controlling the placement of blocks of content in an HTML document using layout tables may produce a rendering in which related information is positioned together visually, but separated in the content stream. Since layout tables are read row by row, if the caption of an illustration is placed in the row following the illustration, it may be impossible to associate the caption with the image.</p>
+	</section>
+	<section id="examples">
+		<h2>Examples</h2>
+		<section class="example">     
+			<p>A Web page from a museum exhibition contains a navigation bar containing a long list of links. The page also contains an image of one of the pictures from the exhibition, a heading for the picture, and a detailed description of the picture. The links in the navigation bar form a meaningful sequence. The heading, image, and text of the description also form a meaningful sequence. CSS is used to position the elements on the page.</p>
+			<h4>HTML</h4>
+<pre xml:space="preserve"><code class="language-html">&lt;h1&gt;My Museum Page&lt;/h1&gt;
+&lt;ul id="nav"&gt;
+  &lt;li&gt;&lt;a href="#"&gt;Link 1&lt;/a&gt;&lt;/li&gt;
+  ...
+  &lt;li&gt;&lt;a href="#"&gt;Link 10&lt;/a&gt;&lt;/li&gt;
+&lt;/ul&gt;
+&lt;div id="description"&gt;
+  &lt;h2&gt;Mona Lisa&lt;/h2&gt;
+  &lt;div&gt;
     &lt;img src="img.png" alt="Mona Lisa"&gt;
-    &lt;/p&gt;
-    &lt;p&gt;...detailed description of the picture...&lt;/p&gt;
   &lt;/div&gt;
-          </pre>
-          
-            <p>CSS:</p>
-           
-          <pre xml:space="preserve">
-  ul#nav {
-    float: left;
-    width: 9em;
-    list-style-type: none;
-    margin: 0;
-    padding: 0.5em;
-    color: #fff;
-    background-color: #063;
-  }
-  ul#nav a {
-   display: block;
-    width: 100%;
-    text-decoration: none;
-    color: #fff;
-    background-color: #063;
-  }
-  div#description {
-    margin-left: 11em;
-  }
-        </pre>
-      </section>
-   </section><section id="tests"><h2>Tests</h2>
-      <section class="procedure"><h3>Procedure</h3>
-         <ol>
-            <li>Linearize content using a standard approach for the technology (e.g., removing layout styles or running a linearization tool)</li>
-            <li>Check to see if the order of content yields the same meaning as the original</li>
-         </ol>
-      </section>
-      <section class="results"><h3>Expected Results</h3>
-         <ul>
-            <li>Check #2 is true.</li>
-         </ul>
-      </section>
-   </section><section id="related"><h2>Related Techniques</h2><ul>
-      <li><a href="../general/G59">G59</a></li>
-      <li><a href="../css/C6">C6</a></li>
-      <li><a href="../css/C27">C27</a></li>
-      <li><a href="../failures/F1">F1</a></li>
-      <li><a href="../failures/F49">F49</a></li>
-   </ul></section><section id="resources"><h2>Resources</h2></section></body></html>
\ No newline at end of file
+  &lt;p&gt;...detailed description of the picture...&lt;/p&gt;
+&lt;/div&gt;</code></pre>
+			
+			<h4><abbr title="Cascading Style Sheets">CSS</abbr></h4>
+			
+<pre xml:space="preserve"><code class="language-css">ul#nav {
+  float: left;
+  width: 9em;
+  list-style-type: none;
+  margin: 0;
+  padding: 0.5em;
+  color: #fff;
+  background-color: #063;
+}
+
+ul#nav a {
+  display: block;
+  width: 100%;
+  text-decoration: none;
+  color: #fff;
+  background-color: #063;
+}
+div#description {
+  margin-left: 11em;
+}</code></pre>
+		</section>
+	</section>
+	<section id="tests">
+		<h2>Tests</h2>
+		<section class="procedure">
+			<h3>Procedure</h3>
+			<ol>
+				<li>Linearize content using a standard approach for the technology (e.g., removing layout styles or running a linearization tool)</li>
+				<li>Check to see if the order of content yields the same meaning as the original</li>
+			</ol>
+		</section>
+		<section class="results">
+			<h3>Expected Results</h3>
+			<ul>
+				<li>Check #2 is true.</li>
+			</ul>
+		</section>
+	</section>
+	<section id="related">
+		<h2>Related Techniques</h2>
+		<ul>
+			<li><a href="../general/G59">G59</a></li>
+			<li><a href="../css/C6">C6</a></li>
+			<li><a href="../css/C27">C27</a></li>
+			<li><a href="../failures/F1">F1</a></li>
+			<li><a href="../failures/F49">F49</a></li>
+		</ul>
+	</section>
+	<section id="resources">
+		<h2>Resources</h2>
+	</section>
+</body>
+</html>
\ No newline at end of file
diff --git a/techniques/general/G58.html b/techniques/general/G58.html
index cb9fa1486b..9301acd601 100644
--- a/techniques/general/G58.html
+++ b/techniques/general/G58.html
@@ -1,54 +1,81 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Placing a link to the alternative for time-based media immediately next to the non-text content</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Placing a link to the alternative for time-based media immediately next to the non-text content</h1><section class="meta"><p class="id">ID: G58</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
-      <p>This technique is not technology specific and can be used in any technology that supports links.</p>
-   </section><section id="description"><h2>Description</h2>
-      <p>With this technique, a link to the collated document of captions and audio description is provided. The collated document could be at another location on the same Web page or at another URI. A link to the collated document is immediately adjacent to the non-text content. The link can be immediately before or after the synchronized media content. If the collated document is on the same Web page as other content then put "End of document" at the end so that they know when to stop reading and return to their previous place. If a Back button will not take the person back to the point from which they jumped, then a link back to the non-text content location is provided.</p>
-   </section><section id="examples"><h2>Examples</h2>
-      <section class="example">
-         <h3>An .MOV Document in an HTML Document</h3>
-         
-            <p>Code on a page called "Olympic_Sports.htm"</p>
-         
-         <pre xml:space="preserve">
-  &lt;a name="Olympic_Wrestling"&gt;&lt;/a&gt;
-  &lt;p&gt;&lt;a href="http://www.example.com/movies/olympic_wrestling.mov"&gt;Olympic Wrestling movie&lt;/a&gt;, 
-  &lt;a href="http://www.example.com/transcripts/olympic_wrestling_transcript.htm"&gt;Olympic 
-  Wrestling collated Transcript&lt;/a&gt;&lt;/p&gt;
-            </pre>
-      </section>
-      <section class="example">
-         <h3>The link back to the .MOV Document in an HTML Document</h3>
-         
-            <p>Code on the page olympic_wrestling_transcript.htm</p>
-         
-         <pre xml:space="preserve">
-  &lt;p&gt;Sports announcer 1: This is a great battle tonight between England's "Will Johnson" and 
-  "Theodore Derringo" from Argentina&lt;/p&gt;
-  &lt;p&gt;Scenery: There is a mat set out in the middle of the stadium with 500 people in the 
-  stands...&lt;/p&gt;
-  &lt;p&gt; ...more dialogue...&lt;p&gt;
-  &lt;p&gt; ...more scenery...&lt;/p&gt;
-  &lt;p&gt; ...etc...&lt;/p&gt;
-  &lt;p&gt;Sports announcer 2: And that is all for tonight, thank you for joining us tonight where 
-  Will Johnson is the new Gold Medalist. 
-  &lt;a href="../movies/Olympic_Sports.htm#Olympic_Wrestling&gt;Return to Movie page&lt;/a&gt; &lt;/p&gt;
-            </pre>
-      </section>
-   </section><section id="tests"><h2>Tests</h2>
-      <section class="procedure"><h3>Procedure</h3>
-         <ol>
-            <li>Check for the presence of a link immediately before or after the non-text content.</li>
-            <li>Check that it is a valid link that points directly to the collated document of this particular synchronized media.</li>
-            <li>Check for the availability of a link or back function to get the user back to the original location of the synchronized media content.</li>
-         </ol>
-      </section>
-      <section class="results"><h3>Expected Results</h3>
-         <ul>
-            <li>Items #1 through 3 are all true.</li>
-         </ul>
-      </section>
-   </section><section id="related"><h2>Related Techniques</h2><ul>
-      <li><a href="../general/G69">G69</a></li>
-      <li><a href="../general/G159">G159</a></li>
-      <li><a href="../html/H46">H46</a></li>
-      <li><a href="../html/H53">H53</a></li>
-   </ul></section><section id="resources"><h2>Resources</h2></section></body></html>
\ No newline at end of file
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+<head>
+	<title>Placing a link to the alternative for time-based media immediately next to the non-text content</title>
+	<link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+</head>
+<body>
+	<h1>Placing a link to the alternative for time-based media immediately next to the non-text content</h1>
+	<section class="meta">
+		<p class="id">ID: G58</p>
+		<p class="technology">Technology: general</p>
+		<p class="type">Type: Technique</p>
+	</section>
+	<section id="applicability">
+		<h2>When to Use</h2>
+		<p>This technique is not technology specific and can be used in any technology that supports links.</p>
+	</section>
+	<section id="description">
+		<h2>Description</h2>
+		<p>With this technique, a link to the collated document of captions and audio description is provided. The collated document could be at another location on the same Web page or at another URI. A link to the collated document is immediately adjacent to the non-text content. The link can be immediately before or after the synchronized media content. If the collated document is on the same Web page as other content then put "End of document" at the end so that they know when to stop reading and return to their previous place. If a Back button will not take the person back to the point from which they jumped, then a link back to the non-text content location is provided.</p>
+	</section>
+	<section id="examples">
+		<h2>Examples</h2>
+		<section class="example">
+			<h3>A .MOV Document in an HTML Document</h3>
+			
+			<p>Code on a page called "olympic-sports.html"</p>
+			
+<pre xml:space="preserve"><code class="language-html">&lt;p id="olympic-wrestling"&gt;
+  &lt;a href="/movies/olympic-wrestling.mov"&gt;Olympic wrestling movie&lt;/a&gt;, 
+  &lt;a href="/transcripts/olympic-wrestling-transcript.html"&gt;Olympic 
+   wrestling collated transcript&lt;/a&gt;
+&lt;/p&gt;</code></pre>
+		</section>
+		<section class="example">
+			<h3>The link back to the .MOV Document in an HTML Document</h3>
+			
+			<p>Code on the page olympic-wrestling-transcript.html</p>
+			
+<pre xml:space="preserve"><code class="language-html">&lt;p&gt;Sports announcer 1: This is a great battle tonight between England's "Will Johnson"
+   and "Theodore Derringo" from Argentina.&lt;/p&gt;
+&lt;p&gt;Scenery: There is a mat set out in the middle of the stadium with 500 people in the 
+   stands...&lt;/p&gt;
+&lt;p&gt;...more dialogue...&lt;p&gt;
+&lt;p&gt;...more scenery...&lt;/p&gt;
+&lt;p&gt;...etc...&lt;/p&gt;
+&lt;p&gt;Sports announcer 2: And that is all for tonight, thank you for joining us tonight
+   where Will Johnson is the new Gold Medalist. 
+&lt;a href="../movies/olympic-sports.html#olympic-wrestling"&gt;Return to movie page&lt;/a&gt;&lt;/p&gt;</code></pre>
+		</section>
+	</section>
+	<section id="tests">
+		<h2>Tests</h2>
+		<section class="procedure">
+			<h3>Procedure</h3>
+			<ol>
+				<li>Check for the presence of a link immediately before or after the non-text content.</li>
+				<li>Check that it is a valid link that points directly to the collated document of this particular synchronized media.</li>
+				<li>Check for the availability of a link or back function to get the user back to the original location of the synchronized media content.</li>
+			</ol>
+		</section>
+		<section class="results">
+			<h3>Expected Results</h3>
+			<ul>
+				<li>Items #1 through 3 are all true.</li>
+			</ul>
+		</section>
+	</section>
+	<section id="related">
+		<h2>Related Techniques</h2>
+		<ul>
+			<li><a href="../general/G69">G69</a></li>
+			<li><a href="../general/G159">G159</a></li>
+			<li><a href="../html/H53">H53</a></li>
+		</ul>
+	</section>
+	<section id="resources">
+		<h2>Resources</h2>
+	</section>
+</body>
+</html>
\ No newline at end of file
diff --git a/techniques/general/G59.html b/techniques/general/G59.html
index dfd90b2a62..9e7787598d 100644
--- a/techniques/general/G59.html
+++ b/techniques/general/G59.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Placing the interactive elements in an order that follows sequences and relationships within the content</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Placing the interactive elements in an order that follows sequences and relationships within the content</h1><section class="meta"><p class="id">ID: G59</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Placing the interactive elements in an order that follows sequences and relationships within the content</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/></head><body><h1>Placing the interactive elements in an order that follows sequences and relationships within the content</h1><section class="meta"><p class="id">ID: G59</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
       <p>All technologies that contain interactive elements and define a default tab order for interactive elements.</p>
    </section><section id="description"><h2>Description</h2>
       <p>The objective of this technique is to ensure that interactive elements receive focus in an order that follows sequences and relationships in the content. When designing the content, the interactive elements such as links and form controls are placed in the content so that the default tab order follows the sequences and relationships in the content. Each technology defines its default tab order, so the mechanism for placing the controls in the content will depend on the technology used.</p>
@@ -23,9 +23,8 @@
       </section>
    </section><section id="related"><h2>Related Techniques</h2><ul>
       <li><a href="../general/G57">G57</a></li>
-      <li><a href="../html/H4">H4</a></li>
       <li><a href="../css/C27">C27</a></li>
       <li><a href="../client-side-script/SCR26">SCR26</a></li>
       <li><a href="../client-side-script/SCR27">SCR27</a></li>
-      <li><a href="../client-side-script/SCR37">SCR37</a></li>
+      <li><a href="../html/H102.html">H102</a></li>
    </ul></section><section id="resources"><h2>Resources</h2></section></body></html>
\ No newline at end of file
diff --git a/techniques/general/G60.html b/techniques/general/G60.html
index d2f21ab2ae..5d43ffaeb8 100644
--- a/techniques/general/G60.html
+++ b/techniques/general/G60.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Playing a sound that turns off automatically within three seconds</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Playing a sound that turns off automatically within three seconds</h1><section class="meta"><p class="id">ID: G60</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Playing a sound that turns off automatically within three seconds</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/></head><body><h1>Playing a sound that turns off automatically within three seconds</h1><section class="meta"><p class="id">ID: G60</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
       <p>Applies to all technologies except those for voice interaction.</p>
    </section><section id="description"><h2>Description</h2>
       <p>The purpose of this technique is to allow authors to play a sound on their
diff --git a/techniques/general/G61.html b/techniques/general/G61.html
index 6a9905ea14..365b3463ca 100644
--- a/techniques/general/G61.html
+++ b/techniques/general/G61.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Presenting repeated components in the same relative order each time they
-          appear</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Presenting repeated components in the same relative order each time they
+          appear</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/></head><body><h1>Presenting repeated components in the same relative order each time they
           appear</h1><section class="meta"><p class="id">ID: G61</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
       <p>Any technologies.</p>
    </section><section id="description"><h2>Description</h2>
diff --git a/techniques/general/G62.html b/techniques/general/G62.html
index bd924248fd..96688de41d 100644
--- a/techniques/general/G62.html
+++ b/techniques/general/G62.html
@@ -1,9 +1,8 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing a glossary</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Providing a glossary</h1><section class="meta"><p class="id">ID: G62</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing a glossary</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/></head><body><h1>Providing a glossary</h1><section class="meta"><p class="id">ID: G62</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
       <p>Any technology containing text.</p>
    </section><section id="description"><h2>Description</h2>
       <p>The objective of this technique is to make the definition of a word, phrase, or abbreviation available by providing the definition in a glossary. A glossary is an alphabetical list of words, phrases, and abbreviations with their definitions. Glossaries are most appropriate when the words, phrases, and abbreviations used within the content relate to a specific discipline or technology area. A glossary can also provide the pronunciation of a word or phrase.</p>
-      <p>The glossary is included at the end of the Web page or the glossary is located via one of the mechanisms for locating content within a set of Web pages. (See
-            <a href="https://www.w3.org/WAI/WCAG21/Understanding/multiple-ways">Understanding Success Criterion 2.4.5</a>.)</p>
+      <p>The glossary is included at the end of the Web page or the glossary is located via one of the mechanisms for locating content within a set of Web pages. (See <a href="../../Understanding/multiple-ways">Understanding Success Criterion 2.4.5</a>.)</p>
       <p>If the glossary contains several definitions for the same word, phrase, or abbreviation, simply providing the glossary is not sufficient to satisfy this Success Criterion.  A different technique should be used to find the correct definition. This is especially important if the uses of the word, phrase, or abbreviation are not unique within the Web page, that is, if different occurrences of the item have different definitions.</p>
    </section><section id="examples"><h2>Examples</h2>
       <section class="example">
@@ -60,5 +59,4 @@ <h3>A glossary of idiomatic expressions</h3>
       <li><a href="../general/G55">G55</a></li>
       <li><a href="../general/G70">G70</a></li>
       <li><a href="../html/H40">H40</a></li>
-      <li><a href="../html/H60">H60</a></li>
    </ul></section><section id="resources"><h2>Resources</h2></section></body></html>
\ No newline at end of file
diff --git a/techniques/general/G63.html b/techniques/general/G63.html
index fbd48a75d3..b1364c270d 100644
--- a/techniques/general/G63.html
+++ b/techniques/general/G63.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing a site map</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Providing a site map</h1><section class="meta"><p class="id">ID: G63</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing a site map</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/></head><body><h1>Providing a site map</h1><section class="meta"><p class="id">ID: G63</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
       <p>All technologies.</p>
    </section><section id="description"><h2>Description</h2>
       <p>This is one of a series of techniques for locating content that are sufficient for addressing Success Criterion 2.4.5. 
@@ -52,7 +52,7 @@
       
          <ul>
             <li>
-                  <a href="http://www.usabilityfirst.com/glossary/?function=display_term&amp;term_id=193">Usability Glossary: sitemap</a>
+                  <a href="https://www.usabilityfirst.com/glossary/sitemap/">Usability Glossary: sitemap</a>
                 </li>
          </ul>
       
diff --git a/techniques/general/G64.html b/techniques/general/G64.html
index 21829d7523..2a877cfe5d 100644
--- a/techniques/general/G64.html
+++ b/techniques/general/G64.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing a Table of Contents</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Providing a Table of Contents</h1><section class="meta"><p class="id">ID: G64</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing a Table of Contents</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/></head><body><h1>Providing a Table of Contents</h1><section class="meta"><p class="id">ID: G64</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
       <p>All technologies.</p>
    </section><section id="description"><h2>Description</h2>
       <p>This is one of a series of techniques for locating content that are sufficient for addressing Success Criterion 2.4.5. 
@@ -24,8 +24,7 @@
       <section class="example">
          
             <p>The table of contents for
-              	<a href="http://www.adobe.com/content/dam/Adobe/en/accessibility/pdfs/accessing-pdf-sr.pdf">Accessing PDF Documents with Assistive Technology: A Screen Reader User's Guide</a>
-                begins on the second page.</p>
+              	<a href="https://www.adobe.com/content/dam/acom/en/accessibility/pdfs/accessing-pdf-sr.pdf#page=2">Accessing PDF Documents with Assistive Technology: A Screen Reader User's Guide</a> begins on the second page.</p>
          
       </section>
    </section><section id="tests"><h2>Tests</h2>
diff --git a/techniques/general/G65.html b/techniques/general/G65.html
index c8f0425011..15238fd8ad 100644
--- a/techniques/general/G65.html
+++ b/techniques/general/G65.html
@@ -1,108 +1,149 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing a breadcrumb trail</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Providing a breadcrumb trail</h1><section class="meta"><p class="id">ID: G65</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
-      <p>All technologies.</p>
-   </section><section id="description"><h2>Description</h2>
-      <p>A breadcrumb trail helps the user to visualize how content has been structured and how to navigate back to previous Web pages, and may identify the current location within a series of Web pages. A breadcrumb trail either displays locations in the path the user took to reach the Web page, or it displays the location of the current Web page within the organization of the site.</p>
-      <p>Breadcrumb trails are implemented using links to the Web pages that have been accessed in the process of navigating to the current Web page. They are placed in the same location within each Web page in the set.</p>
-      <p>It can be helpful to users to separate the items in the breadcrumb trailing with a visible separator. Examples of separators include "&gt;", "|", "/", "::", and "→".</p>
-   </section><section id="examples"><h2>Examples</h2>
-      <section class="example">
-         
-            <p>A developer searches within the Web site of an authoring tool manufacturer to find out how to create hyperlinks.  The search results bring him to a Web page with specific instructions for creating hyperlinks using the authoring tool.  It contains the following links to create a breadcrumb trail:</p>
-         
-         <pre xml:space="preserve">
-              Home :: Developer Center :: How To Center
-            </pre>
-         
-            <p>In this example the breadcrumb trail does not contain the title of the current Web page, "How to create hyperlinks". That information is available as the title of the Web page.</p>
-         
-      </section>
-      <section class="example">
-         
-            <p>A photographer's portfolio Web site has been organized into different galleries and each gallery has further been divided into categories.   A user who navigates through the site to a Web page containing a photo of a Gentoo penguin would see the following breadcrumb trail at the top of the Web page:</p>
-         
-         <pre xml:space="preserve">
-              Home / Galleries / Antarctica / Penguins / Gentoo Penguin
-            </pre>
-         
-            <p>All of the items except "Gentoo Penguin" are implemented as links.  The current location, Gentoo Penguin, is included in the breadcrumb trail but it is not implemented as a link.</p>
-         
-      </section>
-      <section class="example">
-        
-          <p>The information architecture of an ecommerce Web site is categorized from general to increasingly more specific product subsections.</p>
-          <p>You are here: Acme Company → Electronics → Computers → Laptops</p>
-          <p>The trail begins with "You are here" and ends with the current page. Items in the trail are clickable or tappable links with the exception of "You are here" and "Laptops." This example uses a right arrow symbol (→) as a separator.</p>
-          <p>In this example a <code class="el">h2</code> element, a <code class="el">nav</code> element with an <code class="att">aria-label</code> attribute, and an unordered list are used to provide semantics. The markup would be styled using CSS to display the breadcrumb trail horizontally.</p>
-          <p>HTML for this example</p>
-        
-        <pre xml:space="preserve"> 
-          &lt;nav aria-label="Breadcrumbs"&gt; 
-            &lt;h2&gt;You are here:&lt;/h2&gt; 
-            &lt;ul&gt;
-              &lt;li&gt;&lt;a href="/"&gt;Acme Company&lt;/a&gt; &amp;#8594;&lt;/li&gt; 
-              &lt;li&gt;&lt;a href="/electronics/"&gt;Electronics&lt;/a&gt; &amp;#8594;&lt;/li&gt;
-              &lt;li&gt;&lt;a href="/electronics/computers/"&gt;Computers&lt;/a&gt; &amp;#8594;&lt;/li&gt;
-              &lt;li&gt;Laptops&lt;/li&gt;
-            &lt;/ul&gt; 
-          &lt;/nav&gt;
-      </pre>
-      
-        <p>CSS for this example</p>
-      
-              <pre xml:space="preserve"> 
-      nav, h2, ul, ul li{ display: inline;}
-      nav &gt; h2{ font-size: 1em; } 
-      ul { padding-left: 0em; }
-      </pre>
-            <p class="working-example">Working example: <a href="../../working-examples/breadcrumb-trail/">Breadcrumb example</a></p>
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+<head>
+	<title>Providing a breadcrumb trail</title>
+	<link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+</head>
+<body>
+	<h1>Providing a breadcrumb trail</h1>
+	<section class="meta">
+		<p class="id">ID: G65</p>
+		<p class="technology">Technology: general</p>
+		<p class="type">Type: Technique</p>
+	</section>
+	<section id="applicability">
+		<h2>When to Use</h2>
+		<p>All technologies.</p>
+	</section>
+	<section id="description">
+		<h2>Description</h2>
+		<p>A breadcrumb trail (or 'breadcrumb navigation') helps the user to visualize how content has been structured and how to navigate back to previous web pages. Many even identify the current location in the series of web pages, commmonly as the last element in the trail and with a variation in its visual style. A breadcrumb trail either displays locations in the path the user took to reach the web page, or it displays the location of the current web page within the organization of the site.</p>
+		<p>Breadcrumb trails are implemented using links to the Web pages that have been accessed in the process of navigating to the current web page. They are placed in the same location within each web page in the set.</p>
+		<p>It can be helpful to users to separate the items in the breadcrumb trailing with a visible separator. Examples of separators include "&gt;", "|", "/", and "→". Alternatively, one could use decorative iconography or create separators with CSS.</p>
+	</section>
+	<section id="examples">
+		<h2>Examples</h2>
+		<section class="example">
+			<h3>Photographer's portfolio</h3>
+			<p>A photographer's portfolio website has been organized into different galleries and each gallery has further been divided into categories. A user who navigates through the website to a particular page containing a photo of a Gentoo penguin would see the following breadcrumb trail at the top of the web page:</p>
 
-      </section>
-   </section><section id="tests"><h2>Tests</h2>
-      <section class="procedure"><h3>Procedure</h3>
-         <p>When breadcrumb trails have been implemented in a set of Web pages:</p>
-         <ol>
-            <li>Navigate to a Web page.</li>
-            <li>Check that a breadcrumb trail is displayed.</li>
-            <li>Check that the breadcrumb trail displays the correct navigational sequence to reach the current location or the correct hierarchical path to the current location within the site structure.</li>
-            <li>
-               <p>For a breadcrumb trail that does
-                  <em>not</em>
-                  include the current location:</p>
-               <ol>
-                  <li>Check that all elements in the breadcrumb trail are implemented as links.</li>
-               </ol>
-            </li>
-            <li>
-               <p>For a breadcrumb trail that does include the current location:</p>
-               <ol>
-                  <li>Check that all elements except for the current location are implemented as links.</li>
-                  <li>Check that the current location is not implemented as a link.</li>
-               </ol>
-            </li>
-            <li>Check that all links navigate to the correct Web page as specified by the breadcrumb trail.</li>
-         </ol>
-      </section>
-      <section class="results"><h3>Expected Results</h3>
-         <ul>
-            <li>
-               <p>For all Web pages in the set using breadcrumb trails,</p>
-               <ul>
-                  <li>Checks #2, #3, and #6 are true.</li>
-                  <li>Either check #4 or #5 is true.</li>
-               </ul>
-            </li>
-         </ul>
-      </section>
-   </section><section id="related"><h2>Related Techniques</h2><ul>
-      <li><a href="../general/G63">G63</a></li>
-      <li><a href="../general/G128">G128</a></li>
-   </ul></section><section id="resources"><h2>Resources</h2>
-      
-         <ul>
-            <li>
-									         <a href="https://www.w3.org/TR/html5/common-idioms.html#rel-up">HTML5 Bread crumb navigation</a>
-								       </li>
-         </ul>
+<pre xml:space="preserve">Home / Galleries / Antarctica / Penguins / Gentoo Penguin</pre>
+
+<p>The markup for this example implements all of the text items except "Gentoo Penguin" as links. To provide semantic structure to the breadcrumb trail, the links are contained within a list element, which is nested within a <code class="language-html">nav</code> element with an <code class="language-html">aria-label</code>. The current location, Gentoo Penguin, is included as the last item in the breadcrumb trail but it is not implemented as a link to visually and semantically differentiate it from the previous items in the trail.</p>
+<p>The <code class="language-html">aria-current</code> attribute is specified on the last list item in the trail to programmatically identify it as the item that reprsents the current web page. The markup would be styled using CSS to display the breadcrumb trail horizontally.</p>
       
+<pre xml:space="preserve"><code class="language-html">&lt;nav aria-label="Breadcrumbs"&gt; 
+  &lt;ul&gt;
+    &lt;li&gt;&lt;a href="/"&gt;Home&lt;/a&gt; /&lt;/li&gt;
+    &lt;li&gt;&lt;a href="/galleries"&gt;Galleries&lt;/a&gt; /&lt;/li&gt; 
+    &lt;li&gt;&lt;a href="/galleries/antarctica"&gt;Antarctica&lt;/a&gt; /&lt;/li&gt;
+    &lt;li&gt;&lt;a href="/galleries/antarctica/penguins"&gt;Penguins&lt;/a&gt; /&lt;/li&gt;
+    &lt;li aria-current="page"&gt;Gentoo Penguin&lt;/li&gt;
+  &lt;/ul&gt; 
+&lt;/nav&gt;</code>
+</pre>
+
+      <p class="working-example">Working example: <a href="../../working-examples/breadcrumb-trail/">Breadcrumb example</a></p>
+		</section>
+		<section class="example">
+			<h3>E-commerce site</h3>
+			<p>The information architecture of an e-commerce website is categorized from general to increasingly more specific product subsections.</p>
+			<p>You are here: Acme Company → Electronics → Computers → Laptops</p>
+			<p>The trail begins with "You are here" and ends with the current page. Items in the trail are clickable or tappable links with the exception of "You are here", which is a static heading. This example uses a right arrow symbol (→) as a separator.</p>
+			<p>In this example a <code class="language-html">h2</code> element, a <code class="language-html">nav</code> element with an <code class="language-html">aria-label</code> attribute, and an unordered list are used to provide semantics. The markup would be styled using CSS to display the breadcrumb trail horizontally.</p>
+			<section id="the-html">
+				<h4><abbr title="HyperText Markup Language">HTML</abbr></h4>
+
+<pre xml:space="preserve"><code class="language-html">&lt;nav aria-label="Breadcrumbs"&gt; 
+  &lt;h2&gt;You are here:&lt;/h2&gt; 
+  &lt;ul&gt;
+    &lt;li&gt;&lt;a href="/"&gt;Acme Company&lt;/a&gt; &amp;#8594;&lt;/li&gt; 
+    &lt;li&gt;&lt;a href="/electronics/"&gt;Electronics&lt;/a&gt; &amp;#8594;&lt;/li&gt;
+    &lt;li&gt;&lt;a href="/electronics/computers/"&gt;Computers&lt;/a&gt; &amp;#8594;&lt;/li&gt;
+    &lt;li&gt;&lt;a href="/electronics/computers/laptops/" aria-current="page"&gt;Laptops&lt;/a&gt;&lt;/li&gt;
+  &lt;/ul&gt; 
+&lt;/nav&gt;</code>
+</pre>
+			</section>
+
+			<section id="the-css">
+
+				<h4><abbr title="Cascading Style Sheets">CSS</abbr></h4>
+
+<pre xml:space="preserve"><code class="language-css">h2, ul, ul li{ display: inline;}
+nav &gt; h2{ font-size: 1em; } 
+ul { padding-left: 0em; }</code></pre>
+
+			</section>
+
+			<p class="working-example">Working example: <a href="../../working-examples/breadcrumb-trail/">Breadcrumb example</a></p>
 
-   </section></body></html>
\ No newline at end of file
+		</section>
+	</section>
+	<section id="tests">
+		<h2>Tests</h2>
+		<section class="procedure">
+			<h3>Procedure</h3>
+			<p>When breadcrumb trails have been implemented in a set of web pages:</p>
+			<ol>
+				<li>Navigate to a web page.</li>
+				<li>Check that a breadcrumb trail is displayed.</li>
+				<li>Check that the breadcrumb trail displays the correct navigational sequence to reach the current location or the correct hierarchical path to the current location within the site structure.</li>
+				<li>
+					<p>For a breadcrumb trail that does
+						<em>not</em>
+					include the current location:</p>
+					<ol>
+						<li>Check that all elements in the breadcrumb trail are implemented as links.</li>
+					</ol>
+				</li>
+				<li>
+					<p>For a breadcrumb trail that does include the current location:</p>
+					<ol>
+						<li>Check that all elements except for the current location are implemented as links.</li>
+						<li>Check that the current location is not implemented as a link.</li>
+					</ol>
+				</li>
+        <li>
+          <p>For a breadcrumb trail that does include the current location and it behaves as a link:</p>
+          <ol>
+						<li>Check that all elements are implemented as links.</li>
+						<li>Check that the current location is programmatically identified as such (e.g., using the <code class="language-html">aria-current</code> attribute).</li>
+					</ol>
+        </li>
+				<li>Check that all links navigate to the correct web page as specified by the breadcrumb trail.</li>
+			</ol>
+		</section>
+		<section class="results">
+			<h3>Expected Results</h3>
+			<ul>
+				<li>
+					<p>For all web pages in the set using breadcrumb trails,</p>
+					<ul>
+						<li>Checks #2, #3, and #7 are true.</li>
+						<li>Either check #4, #5 or #6 is true.</li>
+					</ul>
+				</li>
+			</ul>
+		</section>
+	</section>
+	<section id="related">
+		<h2>Related Techniques</h2>
+		<ul>
+			<li><a href="../general/G63">G63</a></li>
+			<li><a href="../general/G128">G128</a></li>
+		</ul>
+	</section>
+	<section id="resources">
+		<h2>Resources</h2>
+		<ul>
+      <li>
+        <a href="https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/examples/breadcrumb/">ARIA Authoring Practices Guide - breadcrumb example</a>
+      </li>
+			<li>
+				<a href="https://html.spec.whatwg.org/multipage/semantics-other.html#rel-up">HTML - breadcrumb navigation</a>
+			</li>
+		</ul>
+	</section>
+</body>
+</html>
diff --git a/techniques/general/G68.html b/techniques/general/G68.html
index 2e58fd04b8..61ef0dd41a 100644
--- a/techniques/general/G68.html
+++ b/techniques/general/G68.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing a short text alternative that describes the purpose of live
-          audio-only and live video-only content</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Providing a short text alternative that describes the purpose of live
+          audio-only and live video-only content</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/></head><body><h1>Providing a short text alternative that describes the purpose of live
           audio-only and live video-only content</h1><section class="meta"><p class="id">ID: G68</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
       <p>Applies to all technologies</p>
    </section><section id="description"><h2>Description</h2>
diff --git a/techniques/general/G69.html b/techniques/general/G69.html
index d01b91c658..5dc6ec3ff4 100644
--- a/techniques/general/G69.html
+++ b/techniques/general/G69.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing an alternative for time based media</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Providing an alternative for time based media</h1><section class="meta"><p class="id">ID: G69</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing an alternative for time based media</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/></head><body><h1>Providing an alternative for time based media</h1><section class="meta"><p class="id">ID: G69</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
       <p>General technique. Applies to all technologies</p>
    </section><section id="description"><h2>Description</h2>
       <p>The purpose of this technique is to provide an accessible alternative way of presenting the information in a synchronized media presentation.</p>
diff --git a/techniques/general/G70.html b/techniques/general/G70.html
index 2bf3f2de5c..11b0b044ab 100644
--- a/techniques/general/G70.html
+++ b/techniques/general/G70.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing a function to search an online dictionary</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Providing a function to search an online dictionary</h1><section class="meta"><p class="id">ID: G70</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing a function to search an online dictionary</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/></head><body><h1>Providing a function to search an online dictionary</h1><section class="meta"><p class="id">ID: G70</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
       <p>All technologies</p>
    </section><section id="description"><h2>Description</h2>
       <p>The objective of this technique is to provide the definition of words, phrases, jargon, or abbreviation expansions by adding a mechanism to access an on-line dictionary to the Web page. This technique uses existing resources on the Web to provide the definition rather than requiring the author to create a glossary or other mechanism within the site. By providing access from within the Web page, a user can easily locate the desired definition. This technique can only be used if the online dictionary returns the correct definition.</p>
diff --git a/techniques/general/G71.html b/techniques/general/G71.html
index 85179a1f0d..fd5ef7bdfa 100644
--- a/techniques/general/G71.html
+++ b/techniques/general/G71.html
@@ -1,34 +1,60 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing a help link on every Web page</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Providing a help link on every Web page</h1><section class="meta"><p class="id">ID: G71</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>Providing a help link on every Web page</title>
+		<link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+	</head>
+	<body>
+		<h1>Providing a help link on every Web page</h1>
+		<section class="meta">
+			<p class="id">ID: G71</p>
+			<p class="technology">Technology: general</p>
+			<p class="type">Type: Technique</p>
+		</section>
+		<section id="applicability">
+			<h2>When to Use</h2>
       <p>All technologies.</p>
-   </section><section id="description"><h2>Description</h2>
+		</section>
+		<section id="description">
+			<h2>Description</h2>
       <p>The objective of this technique is to provide context sensitive help for users as they enter data in forms by providing at least one link to the help information on each Web page. The link targets a help page with information specific to that Web page. Another approach is to provide a help link for every interactive control. Positioning this link immediately before or after the control allows users to easily tab to it if they have problems in the control. Displaying the help information in a new browser window ensures that any data that has already been entered into the form will not be lost. NOTE: A link is not the only means to provide help.</p>
-   </section><section id="examples"><h2>Examples</h2>
-      <section class="example">
+   </section>
+	 <section id="examples">
+		<h2>Examples</h2>
+		<section class="example">
+			<p>The example below shows a label element that includes a help link. Including the help link within the label element allows screen reader users to have access to the help link when interacting with the input form control.</p>
          
-            <p>The example below shows a label element that includes a help link. Including the help link within the label element allows screen reader users to have access to the help link when interacting with the input form control.</p>
-         
-         <pre xml:space="preserve">
-              &lt;form action="test.html"&gt;
-                &lt;label for="test"&gt;Test control
-                &lt;a href="help.html" target="_blank"&gt;Help&lt;/a&gt;&lt;/label&gt;
-                &lt;input type="text" name="test" id="test" /&gt;
-                &lt;/form&gt;
-            </pre>
-      </section>
-   </section><section id="tests"><h2>Tests</h2>
-      <section class="procedure"><h3>Procedure</h3>
-         <ol>
-            <li>Identify a Web page that contains forms.</li>
-            <li>Determine if there is at least one link to help information explaining how to complete the form on this Web page.</li>
-            <li>Determine if there are links either before or after each interactive control to  information specific to that control.</li>
-         </ol>
+<pre xml:space="preserve"><code class="language-html">&lt;form&gt;
+  &lt;label for="serial-number"&gt;&lt;span&gt;Serial Number&lt;/span&gt;
+  &lt;a href="help.html" target="_blank"&gt;Help&lt;/a&gt;&lt;/label&gt;
+  &lt;input type="text" name="serial-number" id="serial-number"&gt;
+&lt;/form&gt;</code>
+</pre>
       </section>
-      <section class="results"><h3>Expected Results</h3>
-         <ul>
-            <li>Either #2 or #3 are true.</li>
-         </ul>
+   </section>
+	 <section id="tests">
+		<h2>Tests</h2>
+		<section class="procedure">
+			<h3>Procedure</h3>
+			<ol>
+				<li>Identify a Web page that contains forms.</li>
+				<li>Determine if there is at least one link to help information explaining how to complete the form on this Web page.</li>
+				<li>Determine if there are links either before or after each interactive control to  information specific to that control.</li>
+			</ol>
+		</section>
+		<section class="results">
+			<h3>Expected Results</h3>
+			<ul>
+				<li>Either #2 or #3 are true.</li>
+			</ul>
       </section>
-   </section><section id="related"><h2>Related Techniques</h2><ul>
-      <li><a href="../general/G184">G184</a></li>
-      <li><a href="../general/G193">G193</a></li>
-   </ul></section></body></html>
\ No newline at end of file
+		</section>
+		<section id="related">
+			<h2>Related Techniques</h2>
+			<ul>
+      	<li><a href="../general/G184">G184</a></li>
+      	<li><a href="../general/G193">G193</a></li>
+			</ul>
+		</section>
+	</body>
+	</html>
\ No newline at end of file
diff --git a/techniques/general/G73.html b/techniques/general/G73.html
index 2904e444d9..225cd1fd8b 100644
--- a/techniques/general/G73.html
+++ b/techniques/general/G73.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing a long description in another location with a link to it that
-          is immediately adjacent to the non-text content</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Providing a long description in another location with a link to it that
+          is immediately adjacent to the non-text content</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/></head><body><h1>Providing a long description in another location with a link to it that
           is immediately adjacent to the non-text content</h1><section class="meta"><p class="id">ID: G73</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
       <p>Applies to all technologies</p>
    </section><section id="description"><h2>Description</h2>
@@ -90,7 +90,6 @@ <h3>Transcript of an audio-only file</h3>
       </section>
    </section><section id="related"><h2>Related Techniques</h2><ul>
       <li><a href="../general/G74">G74</a></li>
-      <li><a href="../html/H45">H45</a></li>
    </ul></section><section id="resources"><h2>Resources</h2>
       
    </section></body></html>
\ No newline at end of file
diff --git a/techniques/general/G74.html b/techniques/general/G74.html
index 640338aceb..39fa023b40 100644
--- a/techniques/general/G74.html
+++ b/techniques/general/G74.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing a long description in text near the non-text content, with a
-          reference to the location of the long description in the short description</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Providing a long description in text near the non-text content, with a
+          reference to the location of the long description in the short description</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/></head><body><h1>Providing a long description in text near the non-text content, with a
           reference to the location of the long description in the short description</h1><section class="meta"><p class="id">ID: G74</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
       <p>Applies to all technologies</p>
    </section><section id="description"><h2>Description</h2>
@@ -42,7 +42,6 @@ <h3>Bar chart</h3>
       </section>
    </section><section id="related"><h2>Related Techniques</h2><ul>
       <li><a href="../general/G73">G73</a></li>
-      <li><a href="../html/H45">H45</a></li>
    </ul></section><section id="resources"><h2>Resources</h2>
       
    </section></body></html>
\ No newline at end of file
diff --git a/techniques/general/G75.html b/techniques/general/G75.html
index 18eb0ca516..e77d5b4f02 100644
--- a/techniques/general/G75.html
+++ b/techniques/general/G75.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing a mechanism to postpone any updating of content</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Providing a mechanism to postpone any updating of content</h1><section class="meta"><p class="id">ID: G75</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing a mechanism to postpone any updating of content</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/></head><body><h1>Providing a mechanism to postpone any updating of content</h1><section class="meta"><p class="id">ID: G75</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
       <p>Content that automatically updates itself.</p>
    </section><section id="description"><h2>Description</h2>
       <p>The objective of this technique is to ensure that users can postpone automatic updates of content, or other non-emergency interruptions. This can be accomplished either through a preference or by alerting users of an imminent update and allowing them to suppress it. If a preference is provided, automatic content update can be disabled by default and users can specify the frequency of automatic content updates if they choose to enable the setting.</p>
diff --git a/techniques/general/G76.html b/techniques/general/G76.html
index 0240ee6df6..e516b9b2a9 100644
--- a/techniques/general/G76.html
+++ b/techniques/general/G76.html
@@ -1,8 +1,22 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing a mechanism to request an update of the content instead of
-          updating automatically</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Providing a mechanism to request an update of the content instead of
-          updating automatically</h1><section class="meta"><p class="id">ID: G76</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>Providing a mechanism to request an update of the content instead of updating automatically</title>
+		<link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+	</head>
+	<body>
+		<h1>Providing a mechanism to request an update of the content instead of updating automatically</h1>
+		<section class="meta">
+			<p class="id">ID: G76</p>
+			<p class="technology">Technology: general</p>
+			<p class="type">Type: Technique</p>
+		</section>
+		<section id="applicability">
+			<h2>When to Use</h2>
       <p>Any technology or combination of technologies that support automatic updates.</p>
-   </section><section id="description"><h2>Description</h2>
+		</section>
+		<section id="description">
+			<h2>Description</h2>
       <p>The objective of this technique is to let the user control if and when
             content is updated, in order to avoid confusion or disorientation caused by
             automatic refreshes that cause a change of context. Users of screen readers
@@ -19,41 +33,42 @@
             control. Instead of triggering updates automatically, authors can provide a
             mechanism that allows the user to request an update of the content as
             needed.</p>
-   </section><section id="examples"><h2>Examples</h2>
-      <section class="example">
-         
-            <p>In HTML, a developer can provide a button or link that
-                allows the user to update the content. For example, on a
-                page with news items located at http://www.example.com/news.jsp</p>
-         
-         <pre xml:space="preserve">
-              &lt;a href="news.jsp"&gt;Update this page&lt;/a&gt;
-            </pre>
-      </section>
-      <section class="example">
-         
-            <p>In a Web interface for e-mail (Webmail), a developer can
-                provide a button or link to fetch new incoming mails instead
-                of updating automatically.</p>
+					</section>
+					<section id="examples">
+						<h2>Examples</h2>
+						<section class="example">
+							<h3>Providing a button to update content</h3>
+            <p>In <abbr title="HyperText Markup Language">HTML</abbr>, a developer can provide a button or link that allows the user to update the content. For example, on a page with news items.</p>
          
+<pre xml:space="preserve"><code class="language-html">&lt;button type="button"&gt;Update this page&lt;/button&gt;</code></pre>
       </section>
-   </section><section id="tests"><h2>Tests</h2>
-      <section class="procedure"><h3>Procedure</h3>
-         <ol>
-            <li>Find mechanisms to update the content (if such a mechanism is
-                  present).</li>
-            <li>For each such mechanism, check if it allows the user to request
-                  an update.</li>
-            <li>For each such mechanism, check if it can cause an automatic
-                  update.</li>
+		</section>
+		<section id="tests">
+			<h2>Tests</h2>
+      <section class="procedure">
+				<h3>Procedure</h3>
+				<ol>
+					<li>Find mechanisms to update the content (if such a mechanism is present).</li>
+					<li>For each such mechanism, check if it allows the user to request an update.</li>
+					<li>For each such mechanism, check if it can cause an automatic update.</li>
          </ol>
       </section>
-      <section class="results"><h3>Expected Results</h3>
+      <section class="results">
+				<h3>Expected Results</h3>
          <ul>
             <li>If #2 is true, then #3 is false.</li>
          </ul>
       </section>
-   </section><section id="related"><h2>Related Techniques</h2><ul>
+   </section>
+	 <section id="related">
+		<h2>Related Techniques</h2>
+		<ul>
       <li><a href="../general/G75">G75</a></li>
       <li><a href="../client-side-script/SCR14">SCR14</a></li>
-   </ul></section><section id="resources"><h2>Resources</h2></section></body></html>
\ No newline at end of file
+		</ul>
+	</section>
+	<section id="resources">
+		<h2>Resources</h2>
+	</section>
+</body>
+</html>
\ No newline at end of file
diff --git a/techniques/general/G78.html b/techniques/general/G78.html
index bbeba4f56a..792f340488 100644
--- a/techniques/general/G78.html
+++ b/techniques/general/G78.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing a second, user-selectable, audio track that includes audio descriptions</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Providing a second, user-selectable, audio track that includes audio descriptions</h1><section class="meta"><p class="id">ID: G78</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing a second, user-selectable, audio track that includes audio descriptions</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/></head><body><h1>Providing a second, user-selectable, audio track that includes audio descriptions</h1><section class="meta"><p class="id">ID: G78</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
       <p>Applies to any technology that has a sound track and visual content.</p>
    </section><section id="description"><h2>Description</h2>
       <p>The objective of this technique is to provide an audio (spoken) version of information that is provided visually so that it is possible for people who cannot see to be able to understand audio-visual material.</p>
@@ -36,20 +36,11 @@
       
          <ul>
             <li>
-                  <a href="https://www.w3.org/TR/REC-smil/">Synchronized Multimedia Integration Language (SMIL) 1.0</a>
-                </li>
-            <li>
-                  <a href="https://www.w3.org/TR/SMIL/">Synchronized Multimedia Integration Language (SMIL 2.0)</a>
+                  <a href="https://www.w3.org/TR/REC-smil/">Synchronized Multimedia Integration Language (SMIL)</a>
                 </li>
             <li>
                   <a href="https://www.w3.org/TR/SMIL-access/">Accessibility Features of SMIL</a>
                 </li>
-            <li>
-                  <a href="http://ncam.wgbh.org/invent_build/web_multimedia/accessible-digital-media-guide/guideline-h-multimedia#techH12">NCAM Rich Media Accessibility, Accessible SMIL Templates</a>
-                </li>
-            <li>
-                  <a href="https://msdn.microsoft.com/en-us/library/ms971327.aspx">SAMI 1.0</a>
-                </li>
          </ul>
       
-   </section></body></html>
\ No newline at end of file
+   </section></body></html>
diff --git a/techniques/general/G79.html b/techniques/general/G79.html
index 7c582dc8b6..b42e389998 100644
--- a/techniques/general/G79.html
+++ b/techniques/general/G79.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing a spoken version of the text</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Providing a spoken version of the text</h1><section class="meta"><p class="id">ID: G79</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing a spoken version of the text</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/></head><body><h1>Providing a spoken version of the text</h1><section class="meta"><p class="id">ID: G79</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
       <p>Technologies that support links, audio formats.</p>
    </section><section id="description"><h2>Description</h2>
       <p>Some users who have difficulty sounding out (decoding) words in written text find it very helpful to hear the text read aloud. This service can now be provided easily using either recorded human speech or synthetic speech. For example, there are a number of products that authors can use to convert text to synthetic speech, then save the spoken version as an audio file. A link to the spoken version can then be provided within the content.  Cost depends in part on the quality of the voice used and whether the text is likely to change frequently.</p>
diff --git a/techniques/general/G8.html b/techniques/general/G8.html
index 6755dc9551..f1e799adf9 100644
--- a/techniques/general/G8.html
+++ b/techniques/general/G8.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing a movie with extended audio descriptions</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Providing a movie with extended audio descriptions</h1><section class="meta"><p class="id">ID: G8</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing a movie with extended audio descriptions</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/></head><body><h1>Providing a movie with extended audio descriptions</h1><section class="meta"><p class="id">ID: G8</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
       <p>Any technology that supports audio and video.</p>
    </section><section id="description"><h2>Description</h2>
       <p>The objective of this technique is to provide a second version of video content that provides extended audio descriptions. One of the difficult things about creating traditional audio descriptions is that the narrator sometimes has to provide a lot of information during very short pauses in dialogue. Extended audio description temporarily pauses the audio and video to allow critical information to be delivered when pauses in dialogue are insufficient for adequate description.</p>
diff --git a/techniques/general/G80.html b/techniques/general/G80.html
index 7f6aca9dec..57ec113ec7 100644
--- a/techniques/general/G80.html
+++ b/techniques/general/G80.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing a submit button to initiate a change of context</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Providing a submit button to initiate a change of context</h1><section class="meta"><p class="id">ID: G80</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing a submit button to initiate a change of context</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/></head><body><h1>Providing a submit button to initiate a change of context</h1><section class="meta"><p class="id">ID: G80</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
       <p>Content that includes forms.</p>
    </section><section id="description"><h2>Description</h2>
       <p>The objective of this technique is to provide a mechanism that allows users
diff --git a/techniques/general/G81.html b/techniques/general/G81.html
index b3ca56f37a..75d58375b4 100644
--- a/techniques/general/G81.html
+++ b/techniques/general/G81.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing a synchronized video of the sign language interpreter that can
-          be displayed in a different viewport or overlaid on the image by the player</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Providing a synchronized video of the sign language interpreter that can
+          be displayed in a different viewport or overlaid on the image by the player</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/></head><body><h1>Providing a synchronized video of the sign language interpreter that can
           be displayed in a different viewport or overlaid on the image by the player</h1><section class="meta"><p class="id">ID: G81</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
       <p>Applies to all synchronized media technologies that allow synchronization of
             multiple video streams</p>
diff --git a/techniques/general/G82.html b/techniques/general/G82.html
index ee871cc508..41c9c222d8 100644
--- a/techniques/general/G82.html
+++ b/techniques/general/G82.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing a text alternative that identifies the purpose of the non-text content</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Providing a text alternative that identifies the purpose of the non-text content</h1><section class="meta"><p class="id">ID: G82</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing a text alternative that identifies the purpose of the non-text content</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/></head><body><h1>Providing a text alternative that identifies the purpose of the non-text content</h1><section class="meta"><p class="id">ID: G82</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
       <p>Applies to all technologies</p>
    </section><section id="description"><h2>Description</h2>
       <p>The purpose of this technique is to provide useful information via the text
@@ -39,7 +39,6 @@
       </section>
    </section><section id="related"><h2>Related Techniques</h2><ul>
       <li><a href="../general/G196">G196</a></li>
-      <li><a href="../html/H35">H35</a></li>
       <li><a href="../html/H36">H36</a></li>
       <li><a href="../html/H37">H37</a></li>
       <li><a href="../html/H53">H53</a></li>
diff --git a/techniques/general/G83.html b/techniques/general/G83.html
index b337db2587..50421d957c 100644
--- a/techniques/general/G83.html
+++ b/techniques/general/G83.html
@@ -1,9 +1,9 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing text descriptions to identify required fields that were not completed</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Providing text descriptions to identify required fields that were not completed</h1><section class="meta"><p class="id">ID: G83</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing text descriptions to identify required fields that were not completed</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/></head><body><h1>Providing text descriptions to identify required fields that were not completed</h1><section class="meta"><p class="id">ID: G83</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
       <p>Content that includes mandatory fields in user input</p>
    </section><section id="description"><h2>Description</h2>
       <p>The objective of this technique is to notify the user when a field that must be completed has not been completed. When users fail to provide input for any mandatory form fields, information is provided in text to enable the users to identify which fields were omitted. One approach is to use client-side validation and provide an alert dialog box identifying the mandatory fields which were omitted. Another approach, using server-side validation, is to re-display the form (including any  previously entered data), with either a text description at the location of the omitted mandatory field, or a text description that identifies the omitted mandatory fields.</p>
       <div class="note">
-         <p>The best practice is to include a message or alert, as some users may not be aware that an error has occurred and could assume that the form is not functioning correctly. It is also best practice to include an error notification in the page title (<code class="el">title</code> element) since a screen reader user is likely to believe the page was submitted correctly and continue to navigate to another page as soon as the new page is returned instead of reading the main content area of the page again.</p>
+         <p>The best practice is to include a message or alert, as some users may not be aware that an error has occurred and could assume that the form is not functioning correctly. It is also best practice to include an error notification in the page title (<code class="language-html">title</code> element) since a screen reader user is likely to believe the page was submitted correctly and continue to navigate to another page as soon as the new page is returned instead of reading the main content area of the page again.</p>
       </div>
    </section><section id="examples"><h2>Examples</h2>
       <ul>
diff --git a/techniques/general/G84.html b/techniques/general/G84.html
index 00a650d8c0..3f7f7a9755 100644
--- a/techniques/general/G84.html
+++ b/techniques/general/G84.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing a text description when the user provides information that is not in the list of allowed values</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Providing a text description when the user provides information that is not in the list of allowed values</h1><section class="meta"><p class="id">ID: G84</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing a text description when the user provides information that is not in the list of allowed values</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/></head><body><h1>Providing a text description when the user provides information that is not in the list of allowed values</h1><section class="meta"><p class="id">ID: G84</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
       <p>Content that collects user input where a limited set of values must be input.</p>
    </section><section id="description"><h2>Description</h2>
       <p>When users enter input that is validated, and errors are detected, the nature of the error needs to be described to the user in manner they can access. One approach is to present an alert dialog that describes fields with errors when the user attempts to submit the form. Another approach, if validation is done by the server, is to return the form (with the user's data still in the fields) and a text description at the top of the page that indicates the fact that there was a validation problem, describes the nature of the problem, and provides ways to locate the field(s) with a problem easily. The "in text" portion of the Success Criterion underscores that it is not sufficient simply to indicate that a field has an error by putting an asterisk on its label or turning the label red. A text description of the problem should be provided.</p>
diff --git a/techniques/general/G85.html b/techniques/general/G85.html
index 3629e63325..36bf2971a0 100644
--- a/techniques/general/G85.html
+++ b/techniques/general/G85.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing a text description when user input falls outside the required format or values</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Providing a text description when user input falls outside the required format or values</h1><section class="meta"><p class="id">ID: G85</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing a text description when user input falls outside the required format or values</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/></head><body><h1>Providing a text description when user input falls outside the required format or values</h1><section class="meta"><p class="id">ID: G85</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
       <p>Content that accepts user data input, with restrictions on the format, value, and/or type of the input.</p>
    </section><section id="description"><h2>Description</h2>
       <p>The objective of this technique is to provide assistance in correcting input errors where the information supplied by the user is not accepted. When users enter data input that is validated, and input errors are detected, information about the nature and location of the input error is provided in text to enable the users to identify the problem. One approach is to use client-side validation and provide an alert dialog box that describes the error immediately when users enter invalid data in field. Another approach, using server-side validation, is to re-display the form (including any previously entered data), and a text description at the top of the page that indicates the fact that there was an error, describes the nature of the problem, and provides ways to easily locate the field(s) with a problem.</p>
diff --git a/techniques/general/G86.html b/techniques/general/G86.html
index 84c01226f8..5fcb208002 100644
--- a/techniques/general/G86.html
+++ b/techniques/general/G86.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing a text summary that can be understood by people with lower secondary education level reading ability</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Providing a text summary that can be understood by people with lower secondary education level reading ability</h1><section class="meta"><p class="id">ID: G86</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing a text summary that can be understood by people with lower secondary education level reading ability</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/></head><body><h1>Providing a text summary that can be understood by people with lower secondary education level reading ability</h1><section class="meta"><p class="id">ID: G86</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
       <p>All technologies.</p>
    </section><section id="description"><h2>Description</h2>
       <p>The objective of this technique is to provide a summary of complex content. The summary is provided in addition to the original content.</p>
diff --git a/techniques/general/G87.html b/techniques/general/G87.html
index 9ba03bf196..2bdeb54dc6 100644
--- a/techniques/general/G87.html
+++ b/techniques/general/G87.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing closed captions</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Providing closed captions</h1><section class="meta"><p class="id">ID: G87</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing closed captions</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/></head><body><h1>Providing closed captions</h1><section class="meta"><p class="id">ID: G87</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
       <p>Any audiovideo technology where there are user agents that support closed
             captions.</p>
    </section><section id="description"><h2>Description</h2>
diff --git a/techniques/general/G88.html b/techniques/general/G88.html
index 04108a26cb..db5617db95 100644
--- a/techniques/general/G88.html
+++ b/techniques/general/G88.html
@@ -1,6 +1,22 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing descriptive titles for Web pages</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Providing descriptive titles for Web pages</h1><section class="meta"><p class="id">ID: G88</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>Providing descriptive titles for Web pages</title>
+		<link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+	</head>
+	<body>
+		<h1>Providing descriptive titles for Web pages</h1>
+		<section class="meta">
+			<p class="id">ID: G88</p>
+			<p class="technology">Technology: general</p>
+			<p class="type">Type: Technique</p>
+		</section>
+		<section id="applicability">
+			<h2>When to Use</h2>
       <p>All technologies.</p>
-   </section><section id="description"><h2>Description</h2>
+		</section>
+		<section id="description">
+			<h2>Description</h2>
       <p>The objective of this technique is to give each Web page a descriptive title. Descriptive titles help users find content, orient themselves within it, and navigate through it. A descriptive title allows a user to easily identify what Web page they are using and to tell when the Web page has changed. The title can be used to identify the Web page without requiring users to read or interpret page content. Users can more quickly identify the content they need when accurate, descriptive titles appear in site maps or lists of search results. When descriptive titles are used within link text, they help users navigate more precisely to the content they are interested in.</p>
       <p>The title of each Web page  should:</p>
       <ul>
@@ -19,42 +35,47 @@ <h3>A title that lists the most important identifying information first</h3>
          
             <p>A Web page is published by a group within a larger organization. The title of the Web page first identifies the topic of the page, then shows the group name followed by the name of the parent organization.</p>
          
-         <pre xml:space="preserve">
-              &lt;title&gt;Working with us: The Small Group: The Big Organization&lt;/title&gt;
-            </pre>
+<pre xml:space="preserve"><code class="language-html">&lt;title&gt;Working with us: The Small Group: The Big Organization&lt;/title&gt;</code></pre>
       </section>
       <section class="example">
          <h3>A synchronized media presentation with a descriptive title</h3>
-         
-            <p>A synchronized media presentation about the 2004 South Asian tsunami is titled “The Tsunami of 2004."</p>
-         
+				 <p>A synchronized media presentation about the 2004 South Asian tsunami is titled "The Tsunami of 2004."</p>
       </section>
       <section class="example">
          <h3>A Web page with a descriptive title in three parts</h3>
-         
-            <p>A Web page provides guidelines and suggestions for creating closed captions. The Web page is part of a “sub-site" within a larger site. The title is separated into three parts by dashes. The first part of the title identifies the organization. The second part identifies the sub-site to which the Web page belongs. The third part identifies the Web page itself. (For a working example, see
-                <a href="http://main.wgbh.org/wgbh/pages/mag/services/captioning/faq/sugg-styles-conv-faq.html">WGBH – Media Access Group – Captioning FAQ</a>.)</p>
-         
+				 <p>A Web page provides guidelines and suggestions for creating closed captions. The Web page is part of a "sub-site" within a larger site. The title is separated into three parts by dashes. The first part of the title identifies the organization. The second part identifies the sub-site to which the Web page belongs. The third part identifies the Web page itself.</p>
+<pre xml:space="preserve"><code class="language-html">&lt;title&gt;Computer Hardware Corporation - Laptop Division - Laptop FAQs&lt;/title&gt;</code></pre>
       </section>
       <section class="example">
-         <h3>A newspaper Web page</h3>
-         
-            <p>A Web site that only permits viewing of the current edition titles its Web page "National News, Front Page". A Web site that permits editions from different dates to be viewed titles its Web page, "National News, Front Page, Oct 17, 2005".</p>
-         
+				<h3>A newspaper Web page</h3>
+				<p>A Web site that only permits viewing of the current edition titles its Web page "National News, Front Page". A Web site that permits editions from different dates to be viewed titles its Web page, "National News, Front Page, Oct 17, 2005".</p>
       </section>
-   </section><section id="tests"><h2>Tests</h2>
-      <section class="procedure"><h3>Procedure</h3>
-         <ol>
-            <li>Check that the Web page has a title</li>
-            <li>Check that the title is relevant to the content of the Web page.</li>
-            <li>Check that the Web page can be identified using the title.</li>
-         </ol>
+   </section>
+	 <section id="tests">
+		<h2>Tests</h2>
+		<section class="procedure">
+			<h3>Procedure</h3>
+			<ol>
+				<li>Check that the Web page has a title</li>
+        <li>Check that the title is relevant to the content of the Web page.</li>
+        <li>Check that the Web page can be identified using the title.</li>
+      </ol>
       </section>
-      <section class="results"><h3>Expected Results</h3>
+      <section class="results">
+				<h3>Expected Results</h3>
          <ul>
             <li>All checks above are true.</li>
          </ul>
       </section>
-   </section><section id="related"><h2>Related Techniques</h2><ul>
+   </section>
+	 <section id="related">
+		<h2>Related Techniques</h2>
+		<ul>
       <li><a href="../html/H25">H25</a></li>
-   </ul></section><section id="resources"><h2>Resources</h2></section></body></html>
\ No newline at end of file
+		</ul>
+	</section>
+	<section id="resources">
+		<h2>Resources</h2>
+	</section>
+	</body>
+	</html>
\ No newline at end of file
diff --git a/techniques/general/G89.html b/techniques/general/G89.html
index bf5fbbea6a..5d364d9dae 100644
--- a/techniques/general/G89.html
+++ b/techniques/general/G89.html
@@ -1,32 +1,59 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing expected data format and example</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Providing expected data format and example</h1><section class="meta"><p class="id">ID: G89</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
-      <p>Pages that collect information from users, and restrict the format the user can use.</p>
-   </section><section id="description"><h2>Description</h2>
-      <p>The objective of this technique is to help the user avoid input errors by informing them about restrictions on the format of data that they must enter. This can be done by describing characteristics of the format or providing a sample of the format the data should have.</p>
-      <div class="note">
-         <p>For data formats with common variations, such as dates and times, it may be useful to provide a preference option so users can use the format that is most comfortable to them.</p>
-      </div>
-   </section><section id="examples"><h2>Examples</h2>
-      <section class="example">
-         
-            <p>The following HTML form control for a date indicates in the label that the date must be in day-month-year format, not month-day-year as many users in the United States may assume.</p>
-         
-         <pre xml:space="preserve">
-              &lt;label for="date"&gt;Date (dd-mm-yyyy)&lt;/label&gt;
-                &lt;input type="text" name="date" id="date" /&gt;
-            </pre>
-      </section>
-   </section><section id="tests"><h2>Tests</h2>
-      <section class="procedure"><h3>Procedure</h3>
-         <ol>
-            <li>Identify form controls that will only accept user input data in a given format.</li>
-            <li>Determine if each of the form controls identified in 1 provides information about the expected format.</li>
-         </ol>
-      </section>
-      <section class="results"><h3>Expected Results</h3>
-         <ul>
-            <li>#2 is true.</li>
-         </ul>
-      </section>
-   </section><section id="related"><h2>Related Techniques</h2><ul>
-      <li><a href="../general/G184">G184</a></li>
-   </ul></section></body></html>
\ No newline at end of file
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+<head>
+	<title>Providing expected data format and example</title>
+	<link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+</head>
+<body>
+	<h1>Providing expected data format and example</h1>
+	<section class="meta">
+		<p class="id">ID: G89</p>
+		<p class="technology">Technology: general</p>
+		<p class="type">Type: Technique</p>
+	</section>
+	<section id="applicability">
+		<h2>When to Use</h2>
+		<p>Pages that collect information from users, and restrict the format the user can use.</p>
+	</section>
+	<section id="description">
+		<h2>Description</h2>
+		<p>The objective of this technique is to help the user avoid input errors by informing them about restrictions on the format of data that they must enter. This can be done by describing characteristics of the format or providing a sample of the format the data should have.</p>
+		<div class="note">
+			<p>For data formats with common variations, such as dates and times, it may be useful to provide a preference option so users can use the format that is most comfortable to them.</p>
+		</div>
+	</section>
+	<section id="examples">
+		<h2>Examples</h2>
+		<section class="example">
+			<h3>Date text input</h3>
+			<p>The following <abbr title="HyperText Markup Language">HTML</abbr> form control for a date indicates in the label that the date must be in day-month-year format, not month-day-year as many users in the United States may assume.</p>
+			
+<pre xml:space="preserve"><code class="language-html">&lt;label for="date"&gt;Date (dd-mm-yyyy)&lt;/label&gt;
+&lt;input type="text" name="date" id="date"&gt;</code>
+</pre>
+		</section>
+	</section>
+	<section id="tests">
+		<h2>Tests</h2>
+		<section class="procedure">
+			<h3>Procedure</h3>
+			<ol>
+				<li>Identify form controls that will only accept user input data in a given format.</li>
+				<li>Determine if each of the form controls identified in 1 provides information about the expected format.</li>
+			</ol>
+		</section>
+		<section class="results">
+			<h3>Expected Results</h3>
+			<ul>
+				<li>#2 is true.</li>
+			</ul>
+		</section>
+	</section>
+	<section id="related">
+		<h2>Related Techniques</h2>
+		<ul>
+			<li><a href="../general/G184">G184</a></li>
+		</ul>
+	</section>
+</body>
+</html>
\ No newline at end of file
diff --git a/techniques/general/G9.html b/techniques/general/G9.html
index b8ec76014b..d50d1a1dc6 100644
--- a/techniques/general/G9.html
+++ b/techniques/general/G9.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Creating captions for live synchronized media</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Creating captions for live synchronized media</h1><section class="meta"><p class="id">ID: G9</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Creating captions for live synchronized media</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/></head><body><h1>Creating captions for live synchronized media</h1><section class="meta"><p class="id">ID: G9</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
       <p>Applies to all technologies that present audio visual information.</p>
    </section><section id="description"><h2>Description</h2>
       <p>The objective of this technique is to allow users who cannot hear to be able
diff --git a/techniques/general/G90.html b/techniques/general/G90.html
index 6d18502e6c..a5a52020ae 100644
--- a/techniques/general/G90.html
+++ b/techniques/general/G90.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing keyboard-triggered event handlers</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Providing keyboard-triggered event handlers</h1><section class="meta"><p class="id">ID: G90</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing keyboard-triggered event handlers</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/></head><body><h1>Providing keyboard-triggered event handlers</h1><section class="meta"><p class="id">ID: G90</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
       <p>Applies to all technologies where content includes functionality.</p>
    </section><section id="description"><h2>Description</h2>
       <p>The objective of this technique is to permit individuals who rely on a keyboard or keyboard interface to access the functionality of the content. To do this, make sure that all event handlers triggered by non-keyboard UI events are also associated with a keyboard-based event, or provide redundant keyboard-based mechanisms to accomplish the functionality provided by other device-specific functions.</p>
diff --git a/techniques/general/G91.html b/techniques/general/G91.html
index 5c99ef3bf6..d439ae3aa6 100644
--- a/techniques/general/G91.html
+++ b/techniques/general/G91.html
@@ -1,32 +1,55 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing link text that describes the purpose of a link</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Providing link text that describes the purpose of a link</h1><section class="meta"><p class="id">ID: G91</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
-      <p>All technologies that contain links.</p>
-   </section><section id="description"><h2>Description</h2>
-      <p>The objective of this technique is to describe the purpose of a link in the text of the link. The description lets a user distinguish this link from links in the Web page that lead to other destinations and helps the user determine whether to follow the link. The URI of the destination is generally not sufficiently descriptive.</p>
-   </section><section id="examples"><h2>Examples</h2>
-      <section class="example">
-         <h3>Describing the purpose of a link in HTML in the text content of the
-              
-                a
-              
-              element</h3>
-         <pre xml:space="preserve">
-              &lt;a href="routes.html"&gt;
-                Current routes at Boulders Climbing Gym
-                &lt;/a&gt;
-            </pre>
-      </section>
-   </section><section id="tests"><h2>Tests</h2>
-      <section class="procedure"><h3>Procedure</h3>
-         <p>For each link in the content that uses this technique:</p>
-         <ol>
-            <li>Check that text of the link describes the purpose of the link</li>
-         </ol>
-      </section>
-      <section class="results"><h3>Expected Results</h3>
-         <ul>
-            <li>The above check is true.</li>
-         </ul>
-      </section>
-   </section><section id="related"><h2>Related Techniques</h2><ul>
-      <li><a href="../html/H30">H30</a></li>
-   </ul></section><section id="resources"><h2>Resources</h2></section></body></html>
\ No newline at end of file
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+<head>
+	<title>Providing link text that describes the purpose of a link</title>
+	<link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+</head>
+<body>
+	<h1>Providing link text that describes the purpose of a link</h1>
+	<section class="meta">
+		<p class="id">ID: G91</p>
+		<p class="technology">Technology: general</p>
+		<p class="type">Type: Technique</p>
+	</section>
+	<section id="applicability">
+		<h2>When to Use</h2>
+		<p>All technologies that contain links.</p>
+	</section>
+	<section id="description">
+		<h2>Description</h2>
+		<p>The objective of this technique is to describe the purpose of a link in the text of the link. The description lets a user distinguish this link from links in the Web page that lead to other destinations and helps the user determine whether to follow the link. The <abbr title="Uniform Resource Identifier">URI</abbr> of the destination is generally not sufficiently descriptive.</p>
+	</section>
+	<section id="examples">
+		<h2>Examples</h2>
+		<section class="example">
+			<h3>Describing the purpose of a link in <abbr title="HyperText Markup Language">HTML</abbr> in the text content of the <code class="language-html">a</code> element</h3>
+<pre xml:space="preserve"><code class="language-">&lt;a href="routes.html"&gt;Current routes at Boulders Climbing Gym&lt;/a&gt;</code></pre>
+		</section>
+	</section>
+	<section id="tests">
+		<h2>Tests</h2>
+		<section class="procedure">
+			<h3>Procedure</h3>
+			<p>For each link in the content that uses this technique:</p>
+			<ol>
+				<li>Check that text of the link describes the purpose of the link</li>
+			</ol>
+		</section>
+		<section class="results">
+			<h3>Expected Results</h3>
+			<ul>
+				<li>Check #1 is true.</li>
+			</ul>
+		</section>
+	</section>
+	<section id="related">
+		<h2>Related Techniques</h2>
+		<ul>
+			<li><a href="../html/H30">H30</a></li>
+		</ul>
+	</section>
+	<section id="resources">
+		<h2>Resources</h2>
+   </section>
+</body>
+</html>
\ No newline at end of file
diff --git a/techniques/general/G92.html b/techniques/general/G92.html
index 75ac1eec55..c13da8ad75 100644
--- a/techniques/general/G92.html
+++ b/techniques/general/G92.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing long description for non-text content that serves the same
-          purpose and presents the same information</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Providing long description for non-text content that serves the same
+          purpose and presents the same information</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/></head><body><h1>Providing long description for non-text content that serves the same
           purpose and presents the same information</h1><section class="meta"><p class="id">ID: G92</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
       <p>Applies to all technologies</p>
    </section><section id="description"><h2>Description</h2>
@@ -57,7 +57,6 @@
       </section>
    </section><section id="related"><h2>Related Techniques</h2><ul>
       <li><a href="../general/G94">G94</a></li>
-      <li><a href="../html/H45">H45</a></li>
    </ul></section><section id="resources"><h2>Resources</h2>
       
    </section></body></html>
\ No newline at end of file
diff --git a/techniques/general/G93.html b/techniques/general/G93.html
index 99b6357bb1..f4d4d338df 100644
--- a/techniques/general/G93.html
+++ b/techniques/general/G93.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing open (always visible) captions</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Providing open (always visible) captions</h1><section class="meta"><p class="id">ID: G93</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing open (always visible) captions</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/></head><body><h1>Providing open (always visible) captions</h1><section class="meta"><p class="id">ID: G93</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
       <p>Any synchronized media technology, even ones that do not support closed captions.</p>
    </section><section id="description"><h2>Description</h2>
       <p>The objective of this technique is to provide a way for people who are deaf or otherwise have trouble hearing the dialogue in audio visual material to be able to view the material.  With this technique all of the dialogue and important sounds are embedded as text in the video track.  As a result they are always visible and no special support for captioning is required by the user agent.</p>
diff --git a/techniques/general/G94.html b/techniques/general/G94.html
index 0abfc34e42..85e0c62b7c 100644
--- a/techniques/general/G94.html
+++ b/techniques/general/G94.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing short text alternative for non-text content that serves the same purpose and presents the same information as the non-text content</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Providing short text alternative for non-text content that serves the same purpose and presents the same information as the non-text content</h1><section class="meta"><p class="id">ID: G94</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing short text alternative for non-text content that serves the same purpose and presents the same information as the non-text content</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/></head><body><h1>Providing short text alternative for non-text content that serves the same purpose and presents the same information as the non-text content</h1><section class="meta"><p class="id">ID: G94</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
       <p>Applies to all technologies.</p>
    </section><section id="description"><h2>Description</h2>
       <p>The objective of this technique is to create a text alternative that serves the same purpose and presents the same information as the original non-text content.  As a result, it is possible to remove the non-text content and replace it with the text alternative and no functionality or information would be lost.   This text alternative should not necessarily describe the non-text content.  It should serve the same purpose and convey the same information.  This may sometimes result in a text alternative that looks like a description of the non-text content.  But this would only be true if that was the best way to serve the same purpose.</p>
@@ -48,7 +48,6 @@
       <li><a href="../html/H2">H2</a></li>
       <li><a href="../html/H24">H24</a></li>
       <li><a href="../html/H36">H36</a></li>
-      <li><a href="../html/H35">H35</a></li>
       <li><a href="../html/H37">H37</a></li>
       <li><a href="../html/H53">H53</a></li>
       <li><a href="../html/H86">H86</a></li>
diff --git a/techniques/general/G95.html b/techniques/general/G95.html
index 1918742cdf..9fd0e48243 100644
--- a/techniques/general/G95.html
+++ b/techniques/general/G95.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing short text alternatives that provide a brief description of
-          the non-text content</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Providing short text alternatives that provide a brief description of
+          the non-text content</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/></head><body><h1>Providing short text alternatives that provide a brief description of
           the non-text content</h1><section class="meta"><p class="id">ID: G95</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
       <p>Applies to all technologies</p>
    </section><section id="description"><h2>Description</h2>
diff --git a/techniques/general/G96.html b/techniques/general/G96.html
index 636b741bac..edc2a1aa10 100644
--- a/techniques/general/G96.html
+++ b/techniques/general/G96.html
@@ -1,72 +1,120 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing textual identification of items that otherwise rely only on sensory information to be understood</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Providing textual identification of items that otherwise rely only on sensory information to be understood</h1><section class="meta"><p class="id">ID: G96</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
-      <p>All technologies that present description of a content rendering to the user.</p>
-   </section><section id="description"><h2>Description</h2>
-      <p>The objective of this technique is to ensure that items within a Web page are referenced in the content not only by shape, size, sound or location, but also in ways that do not depend on that sensory perception. For example, a reference may also describe the function of the item or its label.</p>
-   </section><section id="examples"><h2>Examples</h2>
-      <section class="example">
-         
-            <p>A round button is provided on a form to submit the form and move onto the next step in a progression.  The button is labeled with the text "go."  The instructions state, "to submit the form press the round button labeled
-                <em>go</em>
-                ".  This includes both shape and textual information to locate the button.</p>
-         
-      </section>
-      <section class="example">
-         
-            <p>Instructions for a Web page providing on-line training state, "Use the list of links to the right with the heading, 'Class Listing' to navigate to the desired on-line course."  This description provides location as well as textual clues to help find the correct list of links.</p>
-         
-      </section>
-      <section class="example">
-         
-            <p>The following layout places a button in the lower right corner and indicates it by position. An indication of the text label clarifies which button to use for users who access a linearized version in which the position is not meaningful.</p>
-         
-         <pre xml:space="preserve">
-              &lt;table&gt;
-                &lt;tbody&gt;
-                &lt;tr&gt;
-                &lt;td colspan="2"&gt;Push the lower right [Preview] button.&lt;/td&gt;
-                &lt;td&gt;
-                &lt;span style="background: ButtonFace; color: ButtonText; border: 
-                medium outset ButtonShadow; 
-                width: 5em; display: block; font-weight: bold; text-align: center;"&gt;
-                Print&lt;/span&gt;
-                &lt;/td&gt;
-                &lt;/tr&gt;
-                &lt;tr&gt;
-                &lt;td&gt;
-                &lt;span style="background: ButtonFace; color: ButtonText; border: 
-                medium outset ButtonShadow; 
-                width: 5em; display: block; font-weight: bold; text-align: center;"&gt;
-                Cancel&lt;/span&gt;
-                &lt;/td&gt;
-                &lt;td&gt;
-                &lt;span style="background: ButtonFace; color: ButtonText; border: 
-                medium outset ButtonShadow; 
-                width: 5em; display: block; font-weight: bold; text-align: center;"&gt;
-                OK&lt;/span&gt;
-                &lt;/td&gt;
-                &lt;td&gt;
-                &lt;span style="background: ButtonFace; color: ButtonText; border: 
-                medium outset ButtonShadow; 
-                width: 5em; display: block; font-weight: bold; text-align: center;"&gt;
-                Preview&lt;/span&gt;
-                &lt;/td&gt;
-                &lt;/tr&gt;
-                &lt;/tbody&gt;
-                &lt;/table&gt;
-              
-              
-            </pre>
-      </section>
-   </section><section id="tests"><h2>Tests</h2>
-      <section class="procedure"><h3>Procedure</h3>
-         <p>Find all references in the Web page that mention the shape, size, or position of an object.  For each such item:</p>
-         <ol>
-            <li>Check that the reference contains additional information that allows the item to be located and identified without any knowledge of its shape, size, or relative position.</li>
-         </ol>
-      </section>
-      <section class="results"><h3>Expected Results</h3>
-         <ul>
-            <li>Check #1 is true.</li>
-         </ul>
-      </section>
-   </section><section id="related"><h2>Related Techniques</h2></section><section id="resources"><h2>Resources</h2></section></body></html>
\ No newline at end of file
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+<head>
+	<title>Providing textual identification of items that otherwise rely only on sensory information to be understood</title>
+	<link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+</head>
+<body>
+	<h1>Providing textual identification of items that otherwise rely only on sensory information to be understood</h1>
+	<section class="meta">
+		<p class="id">ID: G96</p>
+		<p class="technology">Technology: general</p>
+		<p class="type">Type: Technique</p>
+	</section>
+	<section id="applicability">
+		<h2>When to Use</h2>
+		<p>All technologies that present description of a content rendering to the user.</p>
+	</section>
+	<section id="description">
+		<h2>Description</h2>
+		<p>The objective of this technique is to ensure that items within a Web page are referenced in the content not only by shape, size, sound or location, but also in ways that do not depend on that sensory perception. For example, a reference may also describe the function of the item or its label.</p>
+	</section>
+	<section id="examples">
+		<h2>Examples</h2>
+		<section class="example">
+         <h3>Button referenced by shape and accessible name</h3>
+			<p>A round button is provided on a form to submit the form and move onto the next step in a progression. The button is labeled with the text "go". The instructions state, "to submit the form press the round button labeled <i>go</i>". This includes both shape and textual information to locate the button.</p>
+		</section>
+		<section class="example">
+         <h3>A section of navigation links referenced by location and heading</h3>
+			<p>Instructions for a Web page providing on-line training state, "Use the list of links to the right with the heading, 'Class Listing' to navigate to the desired on-line course."  This description provides location as well as textual clues to help find the correct list of links.</p>
+		</section>
+		<section class="example">
+         <h3>Button referenced by position and accessible name</h3>
+			<p>The following layout places a button in the lower right corner and indicates it by position. An indication of the text label clarifies which button to use for users for which the position is not meaningful.</p>
+
+			<section id="the-html">
+				<h4>The <abbr title="HyperText Markup Language">HTML</abbr></h4>
+<pre xml:space="preserve"><code class="language-html">&lt;form class="wrapper"&gt;
+  &lt;h1&gt;Sign up to our mailing list&lt;/h1&gt;
+    &lt;div role="note"&gt;
+      Complete the form and then press the lower-right (&lt;i&gt;sign up&lt;/i&gt;) button.
+    &lt;/div&gt;
+  &lt;div class="form-group"&gt;
+    &lt;label for="full-name"&gt;Your name&lt;/label&gt;
+    &lt;input autocomplete="name" id="full-name" type="text"&gt;
+  &lt;/div&gt;
+  &lt;div class="form-group"&gt;
+    &lt;label for="email"&gt;Your email address&lt;/label&gt;
+    &lt;input autocomplete="email" id="email" type="text"&gt;
+  &lt;/div&gt;
+  &lt;button type="reset"&gt;Cancel&lt;/button&gt;
+  &lt;button type="submit"&gt;Sign up&lt;/button&gt;
+&lt;/form&gt;</code></pre>
+
+			</section>
+			<section id="the-css">
+				<h4>The <abbr title="Cascading Style Sheets">CSS</abbr></h4>
+<pre xml:space="preserve"><code class="language-css">.wrapper{
+  border:1px solid #aeaeae;
+  display:grid;
+  gap:1rem;
+  grid-template-columns:1fr 1fr;
+  padding:1rem;
+  width:50vw;
+ }
+ 
+ label{
+  display:block;
+ }
+ 
+ input, button{
+  font:inherit;
+ }
+ 
+ h1, [role=note]{
+  grid-column:1 / -1;
+ }
+ 
+ .form-group{
+  grid-column:1;
+ }
+ 
+ input{
+  width:100%;
+ }
+ 
+ button[type=reset]{
+  grid-column:1;
+ }
+ 
+ button[type=submit]{
+  grid-column:2;
+ }</code></pre>
+				</section>
+</section>
+	</section>
+	<section id="tests">
+		<h2>Tests</h2>
+		<section class="procedure">
+			<h3>Procedure</h3>
+			<p>Find all references in the Web page that mention the shape, size, or position of an object.  For each such item:</p>
+			<ol>
+				<li>Check that the reference contains additional information that allows the item to be located and identified without any knowledge of its shape, size, or relative position.</li>
+			</ol>
+		</section>
+		<section class="results">
+			<h3>Expected Results</h3>
+			<ul>
+				<li>Check #1 is true.</li>
+			</ul>
+		</section>
+	</section>
+	<section id="related">
+		<h2>Related Techniques</h2>
+	</section>
+	<section id="resources">
+		<h2>Resources</h2>
+	</section>
+</body>
+</html>
\ No newline at end of file
diff --git a/techniques/general/G97.html b/techniques/general/G97.html
index 8bc9459929..a1dbeff78c 100644
--- a/techniques/general/G97.html
+++ b/techniques/general/G97.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing the first use of an abbreviation immediately before or after the expanded form</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Providing the first use of an abbreviation immediately before or after the expanded form</h1><section class="meta"><p class="id">ID: G97</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing the first use of an abbreviation immediately before or after the expanded form</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/></head><body><h1>Providing the first use of an abbreviation immediately before or after the expanded form</h1><section class="meta"><p class="id">ID: G97</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
       <p>Any technology containing text.</p>
    </section><section id="description"><h2>Description</h2>
       <p>The objective of this technique is to make the expanded form of an abbreviation available by associating the expanded form with its abbreviation the first time it occurs within a Web page. The expansion of any abbreviation can be found by searching the Web page for the first use.</p>
diff --git a/techniques/general/G98.html b/techniques/general/G98.html
index 5ff7909c4e..69999a0181 100644
--- a/techniques/general/G98.html
+++ b/techniques/general/G98.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing the ability for the user to review and correct answers before submitting</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Providing the ability for the user to review and correct answers before submitting</h1><section class="meta"><p class="id">ID: G98</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing the ability for the user to review and correct answers before submitting</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/></head><body><h1>Providing the ability for the user to review and correct answers before submitting</h1><section class="meta"><p class="id">ID: G98</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
       <p>Sites that collect data from users that is specific to the moment it is submitted, such as test data, and cannot be changed once it is submitted.</p>
    </section><section id="description"><h2>Description</h2>
       <p>The objective of this technique is to provide users with a way to ensure their input is correct before completing an irreversible transaction. Testing, financial, and legal applications permit transactions to occur which cannot be "undone". It is therefore important that there be no errors in the data submission, as the user will not have the opportunity to correct the error once the transaction has been committed.</p>
diff --git a/techniques/general/G99.html b/techniques/general/G99.html
index 4675bebca7..d4006b9e4c 100644
--- a/techniques/general/G99.html
+++ b/techniques/general/G99.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing the ability to recover deleted information</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Providing the ability to recover deleted information</h1><section class="meta"><p class="id">ID: G99</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing the ability to recover deleted information</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/></head><body><h1>Providing the ability to recover deleted information</h1><section class="meta"><p class="id">ID: G99</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
       <p>Content where user actions cause content to be deleted.</p>
    </section><section id="description"><h2>Description</h2>
       <p>When a Web application provides the capability of deleting information, the server can provide a means to recover information that was deleted in error by a user. One approach is to delay deleting the data by merely marking it for deletion or moving it to a holding area (such as a trash can) and waiting some period of time before actually deleting it. During this time period, the user can request that the data be restored or can retrieve it from the holding area. Another approach is to record all delete transactions in such a way that data can be restored if requested by the user, such as in the edit history stored by wikis and source control applications.The retrievable information that is stored should be that which would be needed to correct the transaction.</p>
diff --git a/techniques/general/hidden-control-1.html b/techniques/general/hidden-control-1.html
deleted file mode 100644
index 7c4d84d473..0000000000
--- a/techniques/general/hidden-control-1.html
+++ /dev/null
@@ -1,62 +0,0 @@
-<!DOCTYPE html>
-<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
-	<head>
-		<title>Provide persistently visible controls </title>
-		<link rel="stylesheet" type="text/css" href="../../css/editors.css"/>
-	</head>
-	<body>
-		<h1>Provide persistently visible controls </h1>
-		<section id="meta">
-			<h2>Metadata</h2>
-			<p id="sc">3.2.6 Hidden Controls</p>
-			<p id="type">Sufficient</p>
-		</section>
-		<section id="applicability">
-			<h2>Applicability</h2>
-			<p class="instructions">Any technology</p>
-		</section>
-		<section id="description">
-			<h2>Description</h2>
-			<p>The objective of this technique is to ensure that controls are visible without requiring the user hover with the mouse or another pointer device or move the keyboard focus to the control.  This is important when the user needs the control to progress or complete a process. Ensuring users can see the controls they need prevents users from having to search for controls and remember where they are located. This improves success for individuals with cognitive and learning disabilities and memory impairments.</p>
-			<p>To meet this technique use controls that are visible without onmouseover or onfocus events. </p>
-			<p>Some pages may appear cluttered when the same control is repeated in multiple places on the page. Often in these cases, the control is not needed to progress but is functioning as a shortcut through the process. If the control is provided in a later step when it is needed to progress, then these shortcuts do not need to be displayed.</p>
-		</section>
-		<section id="example-1">
-			<h2>Examples</h2>
-			<section class="example">
-				<h3>Replying to an Email</h3>
-				<p>Replying to an email involves opening an inbox, opening the email, hitting reply, writing an email and hitting send. When the email is open, the Reply button is clearly visible at the top.  When the editable email opens, a send button is visible at the top. The reply button is also displayed when the email is hovered over in the inbox, but since it is available later in the process when it is needed to progress, the hover approach is OK. </p>
-		</section>
-		<section id="example-2">
-				<h3>Login Form</h3>
-				<p>A login form requires the user complete a name and two matching passwords that meet certain criteria. When the information is completed, the Submit button becomes visible. </p>
-			</section>
-		</section>
-		<section id="tests">
-			<h2>Tests</h2>
-			<section class="test-procedure">
-				<h3>Procedure</h3>
-				<p>For controls that progress or complete a process:</p>
-				<ol>
-					<li>Verify that the controls are visible at the time they are needed without requiring pointer hover or keyboard focus.</li>
-				</ol>
-				<p>Note: Where a page has multiple page variations (i.e., in a responsive design) controls should be tested in each variation. </p>
-			</section>
-			<section class="test-results">
-				<h3>Expected Results</h3>
-				<ul>
-					<li>#1 is true.</li>
-				</ul>
-			</section>
-		</section>
-		<section id="related">
-			<h2>Related Techniques</h2>
-			<ul>
-				<li>ID</li>
-			</ul>
-		</section>
-		<section id="resources">
-			<h2>Resources</h2>
-		</section>
-	</body>
-</html>
diff --git a/techniques/general/hidden-control-2.html b/techniques/general/hidden-control-2.html
deleted file mode 100644
index 325282942c..0000000000
--- a/techniques/general/hidden-control-2.html
+++ /dev/null
@@ -1,60 +0,0 @@
-<!DOCTYPE html>
-<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
-	<head>
-		<title>Provide a setting to make controls visibly persist</title>
-		<link rel="stylesheet" type="text/css" href="../../css/editors.css"/>
-	</head>
-	<body>
-		<h1>Provide a setting to make controls visibly persist</h1>
-		<section id="meta">
-			<h2>Metadata</h2>
-			<p id="sc">3.2.6 Hidden Controls</p>
-			<p id="type">Sufficient</p>
-		</section>
-		<section id="applicability">
-			<h2>Applicability</h2>
-			<p class="instructions">Any technology</p>
-		</section>
-		<section id="description">
-			<h2>Description</h2>
-			<p>The objective of this technique is to ensure that controls are visible without requiring the user hover with the mouse or another pointer device or move the keyboard focus to the control.  This is important when the user needs the control to progress or complete a process. Ensuring users can see the controls they need prevents users from having to search for controls and remember where they are located. This improves success for individuals with cognitive and learning disabilities and memory impairments.</p>
-			<p>To meet this technique, provide a setting that makes controls needed to progress or complete a process visible without onmouseover or onfocus events. </p>
-			<p>Some pages may appear cluttered when the same control is repeated in multiple places on the page. In these cases, it may make sense for the controls to only appear on hover by default. Provide a setting that changes the default to display the controls without pointer hover or keyboard focus. If setting information can be retained by the system, maintain this setting across sessions.</p>
-		</section>
-		<section id="example-1">
-			<h2>Examples</h2>
-			<section class="example">
-				<h3>Webpage Editor</h3>
-				<p>A webpage editor allows user to edit many parts of the page. Once the editor is open, a user must hover over a section of the page to discover if it is editable.  If all the edit icons are displayed, it will clutter the page so a setting is provided that will display all the icons for users who need to see them. This setting persists across sessions once selected. </p>
-		     </section>
-		</section>
-		<section id="tests">
-			<h2>Tests</h2>
-			<section class="test-procedure">
-				<h3>Procedure</h3>
-				<p>For controls that progress or complete a process:</p>
-				<ol>
-					<li>Identify controls that only display when pointer hover or mouse focus is over them.</li>
-					<li>Locate a setting that changes these controls so that they visibly persist.</li>
-					<li>Test that all controls needed to progress or complete a process remain visible.</li>
-				</ol>
-			<p>Note: Where a page has multiple page variations (i.e., in a responsive design) controls should be tested in each variation. </p>
-			</section>
-			<section class="test-results">
-				<h3>Expected Results</h3>
-				<ul>
-					<li>#3 is true.</li>
-				</ul>
-			</section>
-		</section>
-		<section id="related">
-			<h2>Related Techniques</h2>
-			<ul>
-				<li>ID</li>
-			</ul>
-		</section>
-		<section id="resources">
-			<h2>Resources</h2>
-		</section>
-	</body>
-</html>
diff --git a/techniques/general/img/stacked-label.png b/techniques/general/img/stacked-label.png
index 3e8aae7aa2..14cd463ebd 100644
Binary files a/techniques/general/img/stacked-label.png and b/techniques/general/img/stacked-label.png differ
diff --git a/techniques/html/H100.html b/techniques/html/H100.html
new file mode 100644
index 0000000000..c350bba316
--- /dev/null
+++ b/techniques/html/H100.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
+  <head>
+    <title>Providing properly marked up email and password inputs</title>
+    <link rel="stylesheet" type="text/css" href="../../css/editors.css"/>
+  </head>
+  <body>
+    <h1>Providing properly marked up email and password inputs</h1>
+    <section id="meta">
+      <h2>Metadata</h2>
+      <p id="sc">3.3.8 Accessible Authentication (Minimum)</p>
+      <p id="type">Sufficient</p>
+    </section>
+    <section id="applicability">
+      <h2>Applicability</h2>
+      <p>Technologies that support authentication.</p>
+    </section>
+    <section id="description">
+      <h2>Description</h2>
+      <p>The objective of this technique is to provide examples of properly marked up email and password inputs. This technique involves providing form mechanism where the user can enter their email address and password to log into the website.</p>
+      <p>Browsers and password managers generally use the accessible name of the input to determine how to fill it in. The user agent (including password managers) should not be blocked from populating the fields, and pasting by the user should also not be blocked.</p>
+    </section>
+    <section id="examples">
+      <h2>Examples</h2>
+      <section class="example">
+        <h3>properly marked up email and password inputs</h3>
+        <p>A secure website has an email and password based login form.</p>
+        <pre xml:space="preserve"><code class="language-html">&lt;form method="post" action="login"&gt;
+  &lt;div&gt;
+    &lt;label for="email"&gt;Email&lt;/label&gt;
+    &lt;input autocomplete="email" id="email" type="email" ...&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;label for="password"&gt;Password&lt;/label&gt;
+    &lt;input autocomplete="current-password" id="password" type="password" ...&gt;
+  &lt;/div&gt;
+    &lt;input type="submit" value="Login"&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</code></pre>
+      </section>
+    </section>
+    <section id="tests">
+      <h2>Tests</h2>
+      <section class="test-procedure">
+        <h3>Procedure</h3>
+        <p>For websites which require users to login with an email and password only:</p>
+        <ol>
+          <li>Check that each input for authentication includes an appropriate accessible-name.</li>
+          <li>Check that each input for authentication allows pasting.</li>
+        </ol>
+      </section>
+      <section class="test-results">
+        <h3>Expected Results</h3>
+        <ul>
+          <li>#1 and #2 are true.</li>
+        </ul>
+      </section>
+    </section>
+    <section id="resources">
+      <h2>Resources</h2>
+      <ul>
+        <li><a href="https://www.boia.org/blog/is-your-sites-authentication-process-accessible">Bureau of Internet Accessibility: How To Make Your Website's Authentication Process Accessible</a></li>
+      </ul>
+    </section>
+  </body>
+</html>
diff --git a/techniques/html/H101.html b/techniques/html/H101.html
new file mode 100644
index 0000000000..1f55dba66a
--- /dev/null
+++ b/techniques/html/H101.html
@@ -0,0 +1,149 @@
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>Using semantic HTML elements to identify regions of a page</title>
+    <link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+  </head>
+  <body>
+    <h1>Using semantic <abbr title="HyperText Markup Language">HTML</abbr> elements to identify regions of a page</h1>
+    <section class="meta">
+      <p class="id">ID: HTML101</p>
+      <p class="technology">Technology: html</p>
+      <p class="type">Type: Technique</p>
+    </section>
+    <section id="applicability">
+      <h2>When to Use</h2>
+      <p>Technologies that support <a href="https://www.w3.org/TR/wai-aria/">ARIA (Accessible Rich Internet Applications)</a>. </p>
+    </section>
+    <section id="description">
+      <h2>Description</h2>
+      <p>The purpose of this technique is to provide programmatic access to sections of a web page. Landmark roles (or "landmarks") programmatically identify sections of a page. Browsers don't expose landmarks directly to users, but they they are made available to them by assistive technology and browser extensions to help navigation to various sections of a page.</p>
+      <p>Landmarks provide an easy way for users of assistive technology understand the programmatic structure of a page and skip over content they're not interested in. For instance, if a site's header, global navigation, main content area, and footer are marked up as landmarks, a screen reader user can easily skip to the landmark they're interested in without having to work their way through all the preceding content. A blind user who may be familiar with a news site's menu, and is only interested in getting to the top story, could easily navigate to the "main" landmark, and bypass dozens of menu links. In another circumstance, a user who is blind may want to quickly find a navigation menu, and can do so by jumping to the navigation landmark.</p>
+      <p>Landmark regions are implicitly created when certain semantic HTML elements are used, which is different from <a href="../aria/ARIA11">using ARIA to explicitly create landmarks</a>. These elements are:</p>
+      <ul>
+        <li><code class="language-html">&lt;header&gt;</code>: When a <code class="language-html">header</code> is a direct child of the <code class="language-html">body</code> element, it creates a <code>banner</code> role, a region that typically contains the site's logo, name, and other persistent site-wide content at the top of a page.</li>
+        <li><code class="language-html">&lt;nav&gt;</code>: A region that contains navigation links to other pages or different parts of the same page.</li>
+        <li><code class="language-html">&lt;main&gt;</code>: A region that contains a page's main content.</li>
+        <li><code class="language-html">&lt;section&gt;</code>: A region that contains a generic section of a document or application. A <code class="language-html">section</code> element isn't exposed as a landmark region unless it has an accessible name.</li>
+        <li><code class="language-html">&lt;form&gt;</code>: A region of the document that represents a collection of form-associated elements, some of which can represent editable values that can be submitted to a server for processing. A <code class="language-html">form</code> element isn't exposed as a landmark region unless it has an accessible name.</li>
+        <li><code class="language-html">&lt;aside&gt;</code>: A region of the document that supports the main content, yet is separate and meaningful on its own.</li>
+        <li><code class="language-html">&lt;footer&gt;</code>: A region that, when its nearest ancestor is the <code class="language-html">body</code> element, contains information about the page such as copyrights and links to privacy statements.</li>
+      </ul>
+      <p>Modern web browsers don't need to have the HTML element's related ARIA role added to them to be exposed as a landmark region. For example, <code class="language-html">&lt;main role="main"&gt;</code> is unnecessary, and should just be <code class="language-html">&lt;main&gt;</code>.</p>
+      <p>There are cases when a particular landmark role can be used more than once on a page, for example, primary and secondary blocks of navigation. In these cases, identical roles should be labeled using a valid technique for labelling regions.</p>
+      <p>It is a best practice to include all content on the page in landmarks, so that screen reader users who rely on landmarks to navigate from section to section do not lose track of content.</p>
+  </section>
+
+  <section id="examples">
+    <h2>Examples</h2>
+    <section class="example" id="simple-identical-landmarks">
+      <h3>Simple landmarks</h3>
+      <p>The following example shows how landmarks might be added to an HTML document:</p>
+<pre xml:space="preserve"><code class="language-html">&lt;header&gt; site logo and name, etc. here &lt;/header&gt;
+&lt;form aria-label="site search"&gt; search functionality here &lt;/form&gt;
+&lt;nav&gt; a list of navigation links here &lt;/nav&gt;
+&lt;main&gt; the page's main content here &lt;/main&gt;
+&lt;section&gt; a sponsor's promotion here &lt;/section&gt;
+&lt;aside&gt; sidebar content here &lt;/aside&gt;
+&lt;footer&gt; site contact details, copyright information, etc. here &lt;/footer&gt;</code></pre>
+  </section>
+  <section class="example" id="multiple-landmarks-aria-labelledby">
+    <h3>Multiple landmarks of the same type and aria-labelledby</h3>
+
+    <p>The following example shows a best practice of how landmarks might be added to an HTML document in situations where there are two or more of the same type of landmark on the same page. For instance, if a <code class="language-html">nav</code> element is used multiple times on a page, each instance may have a unique label specified using <code class="language-html">aria-labelledby</code>:</p>
+<pre xml:space="preserve"><code class="language-html">&lt;nav aria-labelledby="site-nav-heading"&gt;
+  &lt;h2 id="site-nav-heading"&gt;Site&lt;/h2&gt;
+  &lt;ul&gt;
+    &lt;li&gt;&lt;a href="/news"&gt;News&lt;/a&gt;&lt;/li&gt;  
+    &lt;li&gt;&lt;a href="/weather"&gt;Weather&lt;/a&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;a href="/sport"&gt;Sport&lt;/a&gt;&lt;/li&gt;
+  &lt;/ul&gt;
+&lt;/nav&gt;
+&lt;nav aria-labelledby="related-nav-heading"&gt;
+  &lt;h2 id="related-nav-heading"&gt;Related Topics&lt;/h2&gt;
+  &lt;ul&gt;
+    &lt;li&gt;&lt;a href="/local-news"&gt;Local News&lt;/a&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;a href="/local-weather"&gt;Local Weather&lt;/a&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;a href="/local-sport"&gt;Local Sport&lt;/a&gt;&lt;/li&gt;
+  &lt;/ul&gt;
+&lt;/nav&gt;</code></pre>
+  </section>
+  <section class="example" id="multiple-landmarks-aria-label">
+    <h3>Multiple landmarks of the same type and aria-label</h3>
+    <p>The following example shows a best practice of how landmarks might be added to an HTML document in situations where there are two or more of the same type of landmark on the same page, and there is no existing text on the page that can be referenced as the label:</p>
+<pre xml:space="preserve"><code class="language-html">&lt;nav aria-label="Vehicles"&gt;
+  &lt;ul&gt;
+    &lt;li&gt;&lt;a aria-current="page" href="/cars"&gt;Cars&lt;/a&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;a href="/trucks"&gt;Trucks&lt;/a&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;a href="/bikes"&gt;Bikes&lt;/a&gt;&lt;/li&gt;
+  &lt;/ul&gt;
+&lt;/nav&gt;
+&lt;nav aria-label="Tags"&gt;
+  &lt;ul&gt;
+    &lt;li&gt;&lt;a href="/cars-electric"&gt;Electric Cars&lt;/a&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;a href="/cars-gas"&gt;Gas-powered Cars&lt;/a&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;a href="/cars-family"&gt;Family Cars&lt;/a&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;a href="/cars-working"&gt;Rugged Cars For Working&lt;/a&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;a href="/cars-commuting"&gt;Cars For Suburban Commuting&lt;/a&gt;&lt;/li&gt;
+  &lt;/ul&gt;
+&lt;/nav&gt;</code></pre>
+  </section>
+  <section class="example" id="search-form">
+    <h3>Search form</h3>
+    <p>The following example shows a search form. A <code class="language-html">form</code> element must have an accessible name to be exposed as a landmark area:</p>
+<pre xml:space="preserve"><code class="language-html">&lt;form aria-labelledby="search-label"&gt;
+  &lt;label for="product-search" id="search-label"&gt;Search&lt;/label&gt;
+  &lt;input id="product-search" placeholder="title, author, or ISBN" type="text"&gt;
+  &lt;button type="submit"&gt;Find Books&lt;/button&gt;
+&lt;/form&gt;</code></pre>
+  </section>
+</section>
+<section id="tests">
+  <h2>Tests</h2>
+  <section class="procedure" id="test-procedure">
+    <h3>Procedure</h3>
+    <ol>
+      <li>Examine each HTML element that creates a <a href="https://www.w3.org/TR/wai-aria/#landmark_roles">landmark role</a>.</li>
+      <li>Examine whether the correct element has been used to mark up content. For example: a <code class="language-html">nav</code> element has been used to mark up a section with navigation links, or the <code class="language-html">main</code> element is used to contain the page's main content.</li>
+      <li>If a landmark region needs to have an accessible name to be exposed as a landmark, check to see that there is an accessible name.</li>
+    </ol>
+  </section>
+  <section class="results" id="expected-test-results">
+    <h3>Expected Results</h3>
+    <ul>
+      <li>Checks #1, #2, and #3 are true.</li>
+    </ul>
+  </section>
+</section>
+<section id="related">
+  <h2>Related Techniques</h2>
+  <ul>
+    <li><a href="../aria/ARIA11">ARIA11</a></li>
+    <li><a href="../general/G1">G1</a></li>
+    <li><a href="../general/G124">G124</a></li>
+    <li><a href="H69">H69</a></li>
+    <li><a href="../client-side-script/SCR28">SCR28</a></li>
+  </ul>
+</section>
+<section id="resources">
+  <h2>Resources</h2>
+    <ul>
+      <li>
+        <a href="https://www.w3.org/TR/using-aria/">Using ARIA</a>
+      </li>
+      <li>
+        <a href="https://www.w3.org/TR/html-aria/">ARIA in HTML</a>
+      </li>
+      <li>
+        <a href="https://www.w3.org/TR/accname/">Accessible Name and Description Computation</a>
+      </li>
+      <li>
+        <a href="https://www.tpgi.com/improving-access-to-landmark-navigation/">Improving access to landmark navigation</a>
+      </li>
+      <li>
+        <a href="https://matatk.agrip.org.uk/landmarks/">Landmarks browser extension</a>
+      </li>
+    </ul>
+    </section>
+  </body>
+</html>
diff --git a/techniques/html/H102.html b/techniques/html/H102.html
new file mode 100644
index 0000000000..deeac2cdd9
--- /dev/null
+++ b/techniques/html/H102.html
@@ -0,0 +1,213 @@
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>Creating modal dialogs with the HTML dialog element</title>
+		<link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+   </head>
+	 <body>
+		<h1>Creating modal dialogs with the <abbr title="HyperText Markup Language">HTML</abbr> <code class="language-html">dialog</code> element</h1>
+		<section class="meta">
+			<p class="id">ID: </p>
+			<p class="technology">Technology: html</p>
+			<p class="type">Type: Technique</p>
+		</section>
+		<section id="applicability">
+			<h2>When to Use</h2>
+      <p>HTML</p>
+		</section>
+		<section id="description">
+			<h2>Description</h2>
+			<p>Website authors often use modal dialogs to focus a user's attention on information, or a task-related activity beyond the scope of the primary page's content. Modal dialogs can be built in markup using <a href="https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/">ARIA's dialog role and related attributes</a>, or the HTML's <code class="language-html">dialog</code> element. As well as meeting <a href="https://www.w3.org/TR/using-aria/#rule1">the first rule of ARIA</a>, the HTML <code class="language-html">dialog</code> element offers several advantages to its ARIA counterpart, with the browser handling these features:</p>
+      <ul>
+        <li>keyboard focus is moved to the newly-opened modal <code class="language-html">dialog</code>;</li>
+        <li>keyboard focus returns to the invoking element (assuming the element is still on the page) when the modal <code class="language-html">dialog</code> is closed;</li>
+        <li>keyboard focus is limited to the contents of the modal <code class="language-html">dialog</code> and the browser's chrome (e.g., the browser-specific UI, such as the address bar, etc.);</li>
+        <li>the page's content 'outside' of the modal dialog becomes <a href="https://html.spec.whatwg.org/multipage/interaction.html#modal-dialogs-and-inert-subtrees">inert</a>, resulting in the content becoming hidden from assistive technologies, and inoperable to all users, so long as the modal <code class="language-html">dialog</code> remains open;</li>
+        <li>the use of the <kbd>Escape</kbd> key to close the modal <code class="language-html">dialog</code>.</li>
+      </ul>
+      <p>This technique uses the HTML <code class="language-html">dialog</code> element rather than a custom ARIA implementation, reducing the level of effort to create an accessible modal dialog.</p>
+   </section><section id="examples"><h2>Examples</h2>
+      <section class="example">
+         <h3>A dialog to sign up to a mailing list</h3>
+				 <p>This is an example of using a modal <code class="language-html">dialog</code> element to show a mailing-list sign-up form to a user. The main part of the page contains a <code class="language-html">button</code> element that, when activated, invokes the modal <code class="language-html">dialog</code>. The <code class="language-html">button</code> uses the <code class="language-html">type</code> attribute to tell the browser that this isn't a <code class="language-html">submit</code> <code class="language-html">button</code>.</p>
+				 
+				 <p>When the modal <code class="language-html">dialog</code> is opened, the browser will treat all content outside of the modal dialog as inert, rendering it inoperable and hiding the content from assistive technology. For example, a screen reader will not be able to reach or announce any of the inert content. Additionally, because the page content is inert, keyboard focus will only be able to reach focusable elements within the <code class="language-html">dialog</code> element, and the browser's controls. When invoked, the browser automatically sets focus to the first focusable element in the dialog's <abbr title="Document Object Model">DOM</abbr>. In this example the <code class="language-html">h1</code> element will receive focus because it has a <code class="language-html">tabindex="-1"</code> attribute. Note that, although the <code class="language-html">dialog</code>'s close <code class="language-html">button</code> is visibly before the <code class="language-html">h1</code>, it is the last item in the <code class="language-html">dialog</code>'s DOM. If the <code class="language-html">button</code> was first, it would receive focus when dialog was opened.</p>
+         <section id="the-html">
+            <h4>The HTML</h4>
+<pre xml:space="preserve"><code class="language-html">&lt;!doctype html&gt;
+&lt;html lang="en"&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;meta name="viewport" content="width=device-width,
+     initial-scale=1, shrink-to-fit=no"&gt;
+    &lt;title&gt;Turbo Encabulator News&lt;/title&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;main&gt;
+      &lt;h1&gt;All The News About Turbo Encabulators&lt;/h1&gt;
+      &lt;button class=&quot;open-modal&quot; type=&quot;button&quot;&gt;Sign up to our mailing list!&lt;/button&gt;
+    &lt;/main&gt;
+    &lt;dialog aria-labelledby=&quot;dialog-heading&quot; id=&quot;mailing-list-dialog&quot;&gt;
+      &lt;h1 id=&quot;dialog-heading&quot; tabindex=&quot;-1&quot;&gt;Sign up to our mailing list&lt;/h1&gt;
+      &lt;form&gt;
+        &lt;p class=&quot;req-note&quot;&gt;All form fields are required.&lt;/p&gt;
+        &lt;div&gt;
+          &lt;label for=&quot;fname&quot;&gt;First Name&lt;/label&gt;
+          &lt;input aria-required=&quot;true&quot; autocomplete=&quot;given-name&quot; id=&quot;fname&quot; type=&quot;text&quot;&gt;
+        &lt;/div&gt;
+        &lt;div&gt;
+          &lt;label for=&quot;lname&quot;&gt;Last Name&lt;/label&gt;
+          &lt;input aria-required=&quot;true&quot; autocomplete=&quot;family-name&quot; id=&quot;lname&quot; type=&quot;text&quot;&gt;
+        &lt;/div&gt;
+        &lt;div&gt;
+          &lt;label for=&quot;email&quot;&gt;Email address&lt;/label&gt;
+          &lt;input aria-required=&quot;true&quot; autocomplete=&quot;email&quot; id=&quot;email&quot; type=&quot;text&quot;&gt;
+        &lt;/div&gt;
+        &lt;button class=&quot;sign-up&quot; type=&quot;submit&quot;&gt;Sign up&lt;/button&gt;
+      &lt;/form&gt;
+     &lt;form method=&quot;dialog&quot;&gt;
+        &lt;button aria-label=&quot;close&quot; class=&quot;close-modal&quot;&gt;&amp;times;&lt;/button&gt;
+      &lt;/form&gt;
+    &lt;/dialog&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</code></pre>
+         </section>
+         <section id="the-css">
+           <h4>The CSS</h4>
+<pre xml:space="preserve"><code class="language-css">*, *::after, *::before {
+  box-sizing: inherit;
+}
+
+body {
+  background:#fff;
+  color:#000;
+  font:1rem/1.5 system-ui, Helvetica, Roboto, sans-serif;
+}
+
+*:focus-visible {
+  outline:1px solid #0054AE;
+  outline-offset:1px;
+}
+
+dialog {
+  border:1px solid #000;
+  padding:2rem;
+  position:relative;
+}
+ 
+dialog::backdrop {
+  background-color:hsla(0, 0%, 0%, .5);
+}
+ 
+.close-modal {
+  inset-block-start:1.5rem;  
+  inset-inline-end:1.5rem;  
+  line-height:1.3;
+  padding:0.25em 0.5em;
+  position:absolute;
+}
+
+.sign-up {
+  background:#000;
+  color:#fff;
+  padding:0.25em;
+}
+
+dialog h1 {
+  display:inline-block;
+  line-height:1.3333;
+  margin:0;
+  max-inline-size:95%;
+}
+
+form {
+  display:grid;
+  grid-gap:20px;
+  grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
+}
+
+.req-note, .sign-up {
+  grid-column:1 / -1;
+}
+ 
+label {
+  display:block;
+}
+ 
+input {
+  border:1px solid hsl(0, 0%, 50%);
+  font:inherit;
+  inline-size:calc(100% - 4px);
+}
+
+button {
+  background:#fff;
+  border:1px solid hsl(0, 0%, 50%);
+  border-radius:3px;
+  color:inherit;
+  font:inherit;
+  margin:0;
+}</code></pre>
+         </section>
+         <section id="the-javascript">
+		<h4>The JavaScript</h4>
+		<p>The script is necessary to display the <code class="language-html">dialog</code> when invoked. The HTML <code class="language-html">dialog</code> element can be opened using two different commands: <code class="language-javascript">show()</code> (for non-modal <code class="language-html">dialog</code>s), and  <code class="language-javascript">showModal()</code> (for modal <code class="language-html">dialog</code>s) - used in this example.</p>
+		 <p><strong>Note:</strong> instead of writing a function to close the <code class="language-html">dialog</code>, the close button is nested within a separate <code class="language-html">form</code> element with a <code class="language-html">method="dialog"</code> attribute. This method allows the dialog to be closed when activating this button, and the browser will handle returning keyboard focus to the invoking element, </p>
+         
+<pre xml:space="preserve"><code class="language-javascript">document.addEventListener("DOMContentLoaded", function(e){
+  const d = document.querySelector("dialog");
+  const btnOpen = document.querySelector(".open-modal");
+
+  btnOpen.addEventListener("click", function(){
+    d.showModal();
+  }, false);
+
+});</code></pre>
+        </section>
+      </section>
+   </section><section id="tests"><h2>Tests</h2>
+      <section class="procedure"><h3>Procedure</h3>
+         <ol>
+            <li>Find the components on the page that invoke modal <code class="language-html">dialog</code> elements.</li>
+            <li>Check that each <code class="language-html">dialog</code> can be opened using the keyboard to activate the invoking element (for example, activate a <code class="language-html">button</code> by pressing the <kbd>Enter</kbd> key or <kbd>Spacebar</kbd>.</li>
+            <li>When the modal <code class="language-html">dialog</code> is opened, check that focus has moved to it / one of its focusable descendants.</li>
+            <li>While the modal <code class="language-html">dialog</code> is open, check that keyboard focus cannot move to elements of the primary document.</li>
+						<li>When the modal <code class="language-html">dialog</code> is closed, check that focus is placed back onto the invoking element, if the element still exists on the page.</li>
+         </ol>
+      </section>
+      <section class="results"><h3>Expected Results</h3>
+         <ul>
+            <li>Checks #2, #3, #4 and #5 are true. </li>
+         </ul>
+      </section>
+   </section>
+	 <section id="related">
+		<h2>Related Techniques</h2>
+		<ul>
+      <li>
+				<a href="../client-side-script/SCR26">SCR26</a>
+			</li>
+      <li>
+				<a href="../general/G59">G59</a>
+			</li>
+		</ul>
+	</section>
+	<section id="resources">
+		<h2>Resources</h2>
+		<ul>
+			<li>
+				<a href="https://html.spec.whatwg.org/multipage/interactive-elements.html#the-dialog-element">HTML - the <code class="language-html">dialog</code> element</a>.
+			</li>
+			<li>
+				<a href="https://html.spec.whatwg.org/multipage/form-elements.html#the-button-element">HTML - the <code class="language-html">button</code> element</a>.
+			</li>
+			<li>
+				<a href="https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/">ARIA Authoring Practices Guide - dialog (modal) pattern</a>.
+			</li>
+			<li>
+				<a href="https://www.w3.org/TR/using-aria/">Using ARIA</a>.
+			</li>
+		</ul>
+	</section>
+</body>
+</html>
diff --git a/techniques/html/H2.html b/techniques/html/H2.html
index fd3923b0a1..dd5910a0ab 100644
--- a/techniques/html/H2.html
+++ b/techniques/html/H2.html
@@ -1,63 +1,81 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Combining adjacent image and text links for the same resource</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Combining adjacent image and text links for the same resource</h1><section class="meta"><p class="id">ID: H2</p><p class="technology">Technology: html</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
-      <p>HTML4, HTML5, and XHTML documents that contain links.</p>
-   </section><section id="description"><h2>Description</h2>
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+   <head>
+      <title>Combining adjacent image and text links for the same resource</title>
+      <link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+   </head>
+   <body>
+      <h1>Combining adjacent image and text links for the same resource</h1>
+      <section class="meta">
+         <p class="id">ID: H2</p>
+         <p class="technology">Technology: html</p>
+         <p class="type">Type: Technique</p>
+      </section>
+      <section id="applicability">
+         <h2>When to Use</h2>
+      <p><abbr title="HyperText Markup Language">HTML</abbr> documents that contain links.</p>
+   </section>
+   <section id="description">
+      <h2>Description</h2>
       <p>This objective of this technique is to provide both text and iconic representations of links without making the web page more confusing or difficult for keyboard users or assistive technology users. Since different users finding text and icons more usable, providing both can improve the accessibility of the link.</p>
-      <p>Many links have both a text and iconic representation adjacent to each other, but rendered in separate <code class="el">a</code> elements. Visually they appear to be a single link, but many users encounter them as adjacent identical links. For a keyboard user, it is tedious to navigate through redundant links. For users of assistive technologies, it can be confusing to encounter successive identical links. When the text alternative for the icon is a duplicate of the link text, it is repetitive as screen readers read the description twice.</p> 
-<p>If the author omitted alternative text from the link image, it would fail <a href="https://www.w3.org/TR/WCAG21/#text-equiv-all">Success Criterion 1.1.1</a> because the
-            text alternative would not serve the same purpose as the graphical link.</p> 
-      <p>This technique provides such links by putting the text and image together in one <code class="el">a</code> element and providing null alternative text on the image to eliminate duplication of text. In this way, both representations of the link are provided, but keyboard users only encounter one link and assistive technology that provides users with link lists for a web page do not include duplicate links.</p>
-      <p>Sometimes the text and the icon link are rendered in separate, adjacent table cells to
-            facilitate page layout. Although WCAG 2 does not prohibit the use of layout tables,
-            CSS-based layouts are recommended in order to retain the defined semantic meaning of the
-            HTML table elements and to conform to the coding practice of separating presentation
-            from content. If CSS is used, this technique can be applied to combine the links.</p>
-   </section><section id="examples"><h2>Examples</h2>
+      <p>Many links have both a text and iconic representation adjacent to each other, but rendered in separate <code class="language-html">a</code> elements. Visually they appear to be a single link, but many users encounter them as adjacent identical links. For a keyboard user, it is tedious to navigate through redundant links. For users of assistive technologies, it can be confusing to encounter successive identical links. When the text alternative for the icon is a duplicate of the link text, it is repetitive as screen readers read the description twice.</p> 
+      <p>If the author omitted alternative text from the link image, it would fail <a href="../../understanding/20/non-text-content.html">Success Criterion 1.1.1</a> because the text alternative would not serve the same purpose as the graphical link.</p> 
+      <p>This technique provides such links by putting the text and image together in one <code class="language-html">a</code> element and providing null alternative text on the image to eliminate duplication of text. In this way, both representations of the link are provided, but keyboard users only encounter one link and assistive technology that provides users with link lists for a web page do not include duplicate links.</p>
+      <p>Sometimes the text and the icon link are rendered in separate, adjacent table cells to facilitate page layout. Although WCAG 2 does not prohibit the use of layout tables, <abbr title="Cascading Style Sheets">CSS</abbr>-based layouts are recommended in order to retain the defined semantic meaning of the HTML table elements and to conform to the coding practice of separating presentation from content. If CSS is used, this technique can be applied to combine the links.</p>
+   </section>
+   <section id="examples">
+      <h2>Examples</h2>
       <section class="example">
          
-            <p>The icon and text are contained in the same <code class="el">a</code> element. (HTML4 / HTML5)</p>
+         <p>The icon and text are contained in the same <code class="language-html">a</code> element.</p>
          
-         <pre xml:space="preserve"> &lt;a href="products.html"&gt;
-   &lt;img src="icon.gif" alt=""&gt;
-   Products page
- &lt;/a&gt;      </pre>
+<pre xml:space="preserve"><code class="language-html">&lt;a href="products.html"&gt;
+  &lt;img src="icon.gif" alt=""&gt;Products page
+&lt;/a&gt;</code></pre>
       </section>
       <section class="example">
+         <p>A link contains an icon and text, and the site help refers to the icon. The <code class="language-html">img</code> has a text alternative which is the name used for the icon in the site help, which describes clicking the home page icon.</p>
          
-            <p>A link contains an icon and text, and the site help refers to the icon. The
-                  <code class="el">img</code> has a text alternative which is the name used for the icon in the
-                site help, which describes clicking the home page icon. (HTML4 / HTML5)</p>
-         
-         <pre xml:space="preserve">&lt;a href="home.html"&gt;
-  &lt;img src="house.gif" alt="home page icon"&gt;
-  Go to the home page
-&lt;/a&gt;     </pre>
+<pre xml:space="preserve"><code class="language-html">&lt;a href="home.html"&gt;
+  &lt;img src="house.gif" alt="home page icon"&gt;Go to the home page
+&lt;/a&gt;</code></pre>
       </section>
-   </section><section id="tests"><h2>Tests</h2>
-      <section class="procedure"><h3>Procedure</h3>
-         <p>For each <code class="el">a</code> applying this technique:</p>
+   </section>
+   <section id="tests">
+      <h2>Tests</h2>
+      <section class="procedure">
+         <h3>Procedure</h3>
+         <p>For each <code class="language-html">a</code> applying this technique:</p>
          <ol>
-            <li>Check that every <code class="el">img</code> element contained within the <code class="el">a</code> element has a null value set for its <code class="att">alt</code> attribute.</li>
-            <li>Check that the <code class="el">a</code> element contains an <code class="el">img</code> element that has either a null <code class="att">alt</code> attribute value or a value that supplements the link text and describes the image</li>
+            <li>Check that every <code class="language-html">img</code> element contained within the <code class="language-html">a</code> element has a null value set for its <code class="language-html">alt</code> attribute.</li>
+            <li>Check that the <code class="language-html">a</code> element contains an <code class="language-html">img</code> element that has either a null <code class="language-html">alt</code> attribute value or a value that supplements the link text and describes the image</li>
          </ol>
       </section>
-      <section class="results"><h3>Expected Results</h3>
+      <section class="results">
+         <h3>Expected Results</h3>
          <ul>
             <li>All checks above are true.</li>
          </ul>
       </section>
-   </section><section id="related"><h2>Related Techniques</h2><ul>
+   </section>
+   <section id="related">
+      <h2>Related Techniques</h2>
+      <ul>
       <li><a href="../general/G91">G91</a></li>
       <li><a href="../general/G94">G94</a></li>
       <li><a href="../html/H30">H30</a></li>
       <li><a href="../css/C9">C9</a></li>
       <li><a href="../failures/F89">F89</a></li>
-   </ul></section><section id="resources"><h2>Resources</h2>
-      
-         <ul>
-            <li>
-									         <a href="https://www.w3.org/TR/html401/struct/objects.html#h-13.8">HTML 4.01 -
-                    how to specify alt text</a>
-								       </li>
-         </ul>
+   </ul>
+</section>
+<section id="resources">
+   <h2>Resources</h2>
       
-   </section></body></html>
\ No newline at end of file
+   <ul>
+      <li>
+         <a href="https://html.spec.whatwg.org/multipage/images.html#alt">HTML - Requirements for providing text to act as an alternative for images</a>
+      </li>
+   </ul>
+   </section>
+</body>
+</html>
\ No newline at end of file
diff --git a/techniques/html/H24.html b/techniques/html/H24.html
index fda7552a72..aedb7b2765 100644
--- a/techniques/html/H24.html
+++ b/techniques/html/H24.html
@@ -1,57 +1,77 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title> Providing text alternatives for the area elements of image maps </title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1> Providing text alternatives for the <code class="el">area</code> elements of image maps </h1><section class="meta"><p class="id">ID: H24</p><p class="technology">Technology: html</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
-      <p>HTML and XHTML Documents that contain <code class="el">area</code> elements.</p>
-   </section><section id="description"><h2>Description</h2>
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+   <head>
+      <title> Providing text alternatives for the area elements of image maps</title>
+      <link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+   </head>
+   <body>
+      <h1>Providing text alternatives for the <code class="language-html">area</code> elements of image maps</h1>
+      <section class="meta">
+         <p class="id">ID: H24</p>
+         <p class="technology">Technology: html</p>
+         <p class="type">Type: Technique</p>
+      </section>
+      <section id="applicability">
+         <h2>When to Use</h2>
+      <p><abbr title="HyperText Markup Language">HTML</abbr> documents that contain <code class="language-html">area</code> elements.</p>
+   </section>
+   <section id="description">
+      <h2>Description</h2>
       <p>The objective of this technique is to provide text alternatives that serve the same
             purpose as the selectable regions of an image map. An image map is an image divided into
-            selectable regions defined by <code class="el">area</code> elements. Each area is a link to another
-            Web page or another part of the current Web page. The <code class="att">alt</code> attribute of each
-              <code class="el">area</code> element serves the same purpose as the selectable area of the
+            selectable regions defined by <code class="language-html">area</code> elements. Each area is a link to another
+            Web page or another part of the current Web page. The <code class="language-html">alt</code> attribute of each
+              <code class="language-html">area</code> element serves the same purpose as the selectable area of the
           image.</p>
-   </section><section id="examples"><h2>Examples</h2>
+   </section>
+   <section id="examples">
+      <h2>Examples</h2>
       <section class="example">
+         <p>This example uses the <code class="language-html">alt</code> attribute of the <code class="language-html">area</code> element to provide text that describes the purpose of the image map areas.</p>
          
-            <p>This example uses the <code class="att">alt</code> attribute of the <code class="el">area</code> element
-                to provide text that describes the purpose of the image map areas.</p>
-         
-         <pre xml:space="preserve">&lt;img src="welcome.gif" usemap="#map1" 
-    alt="Areas in the library. Select an area for
-more information on that area." /&gt; 
+<pre xml:space="preserve"><code class="language-html">&lt;img src="welcome.gif" usemap="#map1" 
+     alt="Areas in the library. Select an area for more information on that area."&gt; 
 &lt;map id="map1" name="map1"&gt;
-  &lt;area shape="rect" coords="0,0,30,30"
-    href="reference.html" alt="Reference" /&gt;
-  &lt;area shape="rect" coords="34,34,100,100"
-    href="media.html" alt="Audio visual lab" /&gt;
-&lt;/map&gt;   </pre>
+  &lt;area shape="rect" coords="0,0,30,30" href="reference.html" alt="Reference"&gt;
+  &lt;area shape="rect" coords="34,34,100,100" href="media.html" alt="Audio visual lab"&gt;
+&lt;/map&gt;</code></pre>
       </section>
-   </section><section id="tests"><h2>Tests</h2>
-      <section class="procedure"><h3>Procedure</h3>
-         <p>For each <code class="el">area</code> element in an image map: </p>
+   </section>
+   <section id="tests">
+      <h2>Tests</h2>
+      <section class="procedure">
+         <h3>Procedure</h3>
+         <p>For each <code class="language-html">area</code> element in an image map:</p>
          <ol>
-            <li>Check that the <code class="el">area</code> element has an <code class="att">alt</code> attribute.</li>
-            <li>Check that the text alternative specified by the <code class="att">alt</code> attribute serves the same
-                  purpose as the part of image map image referenced by the <code class="el">area</code> element
-                  of the imagemap.</li>
+            <li>Check that the <code class="language-html">area</code> element has an <code class="language-html">alt</code> attribute.</li>
+            <li>Check that the text alternative specified by the <code class="language-html">alt</code> attribute serves the same
+                  purpose as the part of image map image referenced by the <code class="language-html">area</code> element
+                  of the image map.</li>
          </ol>
       </section>
-      <section class="results"><h3>Expected Results</h3>
+      <section class="results">
+         <h3>Expected Results</h3>
          <ul>
             <li>The above checks are true.</li>
          </ul>
       </section>
-   </section><section id="related"><h2>Related Techniques</h2><ul>
-      <li><a href="../general/G91">G91</a></li>
-      <li><a href="../html/H30">H30</a></li>
-   </ul></section><section id="resources"><h2>Resources</h2>
-      
-         <ul>
-            <li>
-									         <a href="https://www.w3.org/TR/html401/struct/objects.html#h-13.6.1">HTML 4.01
-                    client-side image maps</a>
-								       </li>
-            <li>
-									         <a href="https://www.w3.org/TR/html401/struct/objects.html#h-13.8">HTML 4.01 -
-                    how to specify alt text</a>
-								       </li>
-         </ul>
-      
-   </section></body></html>
\ No newline at end of file
+   </section>
+   <section id="related">
+      <h2>Related Techniques</h2>
+      <ul>
+         <li><a href="../general/G91">G91</a></li>
+         <li><a href="../html/H30">H30</a></li>
+      </ul>
+</section>
+<section id="resources">
+   <h2>Resources</h2>   
+   <ul>
+      <li>
+         <a href="https://html.spec.whatwg.org/multipage/image-maps.html#image-maps">HTML - Image maps</a>.
+      </li>
+      <li>
+         <a href="https://html.spec.whatwg.org/multipage/images.html#alt">HTML - Requirements for providing text to act as an alternative for images</a>.
+      </li>
+   </ul> 
+   </section>
+</body></html>
\ No newline at end of file
diff --git a/techniques/html/H25.html b/techniques/html/H25.html
index 628e1f30c6..58b3cc6857 100644
--- a/techniques/html/H25.html
+++ b/techniques/html/H25.html
@@ -1,51 +1,71 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing a title using the title element</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Providing a title using the title element</h1><section class="meta"><p class="id">ID: H25</p><p class="technology">Technology: html</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
-      <p>HTML and XHTML</p>
-   </section><section id="description"><h2>Description</h2>
-      <p>All HTML and XHTML documents, including those in individual frames in
-            a frameset, have a <code class="el">title</code> element in the <code class="el">head</code> section that
-            defines in a simple phrase the purpose of the document. This helps users to orient
-            themselves within the site quickly without having to search for orientation information
-            in the body of the page.</p>
-      <p>Note that the (mandatory) <code class="el">title</code> element, which only appears once in a
-            document, is different from the <code class="att">title</code> attribute, which may be applied to
-            almost every HTML and XHTML element.</p>
-   </section><section id="examples"><h2>Examples</h2>
-      <section class="example">
-         
-            <p>This example defines a document's title.</p>
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+   <head>
+      <title>Providing a title using the title element</title>
+      <link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+   </head>
+   <body>
+      <h1>Providing a title using the title element</h1>
+      <section class="meta">
+         <p class="id">ID: H25</p>
+         <p class="technology">Technology: html</p>
+         <p class="type">Type: Technique</p>
+      </section>
+      <section id="applicability">
+         <h2>When to Use</h2>
+         <p><abbr title="HyperText Markup Language">HTML</abbr></p>
+      </section>
+      <section id="description">
+         <h2>Description</h2>
+         <p>All HTML documents, including those in frames, have a <code class="language-html">title</code> element in the <code class="language-html">head</code> section that defines in a simple phrase the purpose of the document. This helps users to orient themselves within the site quickly without having to search for orientation information in the body of the page.</p>
+         <p>Note that the (mandatory) <code class="language-html">title</code> element, which only appears once in a document, is different from the <code class="language-html">title</code> attribute, which may be applied to almost every HTML element.</p>
+   </section>
+   <section id="examples">
+      <h2>Examples</h2>
+      <section class="example">   
+         <p>This example defines a document's title.</p>
          
-         <pre xml:space="preserve">&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;   
-   &lt;head&gt;     
-      &lt;title&gt;The World Wide Web Consortium&lt;/title&gt;     
-   &lt;/head&gt;   
-   &lt;body&gt;     
+<pre xml:space="preserve"><code class="language-html">&lt;!doctype html&gt;
+&lt;html lang="en"&gt;
+  &lt;head&gt;
+    &lt;title&gt;The World Wide Web Consortium&lt;/title&gt;     
+  &lt;/head&gt;
+  &lt;body&gt;
       ...   
-   &lt;/body&gt; 
-&lt;/html&gt;  </pre>
+  &lt;/body&gt; 
+&lt;/html&gt;</code></pre>
       </section>
-   </section><section id="tests"><h2>Tests</h2>
-      <section class="procedure"><h3>Procedure</h3>
+   </section>
+   <section id="tests">
+      <h2>Tests</h2>
+      <section class="procedure">
+         <h3>Procedure</h3>
          <ol>
-            <li>Examine the source code of the HTML or XHTML document and check that a non-empty
-                    <code class="el">title</code> element appears in the <code class="el">head</code> section.</li>
-            <li>Check that the <code class="el">title</code> element describes the document.</li>
+            <li>Examine the source code of the HTML document and check that a non-empty <code class="language-html">title</code> element appears in the <code class="language-html">head</code> section.</li>
+            <li>Check that the <code class="language-html">title</code> element describes the document.</li>
          </ol>
       </section>
-      <section class="results"><h3>Expected Results</h3>
+      <section class="results">
+         <h3>Expected Results</h3>
          <ul>
-            <li>Checks 1 and 2 are true.</li>
+            <li>Checks #1 and #2 are true.</li>
          </ul>
       </section>
-   </section><section id="related"><h2>Related Techniques</h2><ul>
-      <li><a href="../general/G88">G88</a></li>
-      <li><a href="../general/G127">G127</a></li>
-   </ul></section><section id="resources"><h2>Resources</h2>
-      
-         <ul>
-            <li>
-									         <a href="https://www.w3.org/TR/html401/struct/global.html#h-7.4.2">HTML 4.01
-                    TITLE element</a>
-								       </li>
-         </ul>
-      
-   </section></body></html>
\ No newline at end of file
+   </section>
+   <section id="related">
+      <h2>Related Techniques</h2>
+      <ul>
+         <li><a href="../general/G88">G88</a></li>
+         <li><a href="../general/G127">G127</a></li>
+      </ul>
+</section>
+<section id="resources">
+   <h2>Resources</h2>
+   <ul>
+      <li>
+         <a href="https://html.spec.whatwg.org/multipage/semantics.html#the-title-element">HTML - The <code class="language-html">title</code> element</a>.
+      </li>
+   </ul>
+   </section>
+</body>
+</html>
\ No newline at end of file
diff --git a/techniques/html/H28.html b/techniques/html/H28.html
index 6f4bfbedc9..8fc4bc4cce 100644
--- a/techniques/html/H28.html
+++ b/techniques/html/H28.html
@@ -1,62 +1,88 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing definitions for abbreviations by using the abbr element</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Providing definitions for abbreviations by using the abbr element</h1><section class="meta"><p class="id">ID: H28</p><p class="technology">Technology: html</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
-      <p>HTML and XHTML</p>
-   </section><section id="description"><h2>Description</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+   <head><title>Providing definitions for abbreviations by using the abbr element</title>
+      <link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+</head>
+<body>
+   <h1>Providing definitions for abbreviations by using the abbr element</h1>
+   <section class="meta">
+      <p class="id">ID: H28</p>
+      <p class="technology">Technology: html</p>
+      <p class="type">Type: Technique</p>
+   </section>
+   <section id="applicability">
+      <h2>When to Use</h2>
+      <p><abbr title="HyperText Markup Language">HTML</abbr></p>
+   </section>
+
+   <section id="description">
+      <h2>Description</h2>
       <p>The objective of this technique is to provide expansions or definitions for
-            abbreviations by using the <code class="el">abbr</code> element</p>
-      <p>It is always appropriate to use the <code class="el">abbr</code> element for any abbreviation,
-            including acronyms and initialisms. When using HTML 4 and XHTML,
-            initialisms and acronyms may be marked up using the <code class="el">acronym</code> element. 
-          	In HTML5 and newer versions of HTML the <code class="el">acronym</code> element was marked as obsolete in favor of the more general
-              <code class="el">abbr</code> element.</p>
-   </section><section id="examples"><h2>Examples</h2>
+            abbreviations by using the <code class="language-html">abbr</code> element. It is always appropriate to use the <code class="language-html">abbr</code> element for any abbreviation, including acronyms and initialisms.</p>
+   </section>
+
+   <section id="examples">
+      <h2>Examples</h2>
       <section class="example">
-         <h3> Using <code class="el">abbr</code> element to expand abbreviations. </h3>
-         <pre xml:space="preserve">&lt;p&gt;Sugar is commonly sold in 5 &lt;abbr title="pound"&gt;lb.&lt;/abbr&gt; bags.&lt;/p&gt;
-&lt;p&gt;Welcome to the &lt;abbr title="World Wide Web"&gt;WWW&lt;/abbr&gt;!&lt;/p&gt;              </pre>
+         <h3>Using <code class="language-html">abbr</code> element to expand abbreviations</h3>
+<pre xml:space="preserve"><code class="language-html">&lt;p&gt;Sugar is commonly sold in 5 &lt;abbr title="pound"&gt;lb.&lt;/abbr&gt; bags.&lt;/p&gt;
+&lt;p&gt;Welcome to the &lt;abbr title="World Wide Web"&gt;WWW&lt;/abbr&gt;!&lt;/p&gt;</code></pre>
       </section>
+
       <section class="example">
-         <h3> Using <code class="el">abbr</code> element to define abbreviations. </h3>
-         <pre xml:space="preserve">&lt;p&gt;Tasini &lt;abbr title="and others"&gt;et al.&lt;/abbr&gt; &lt;abbr title="versus"&gt;v.&lt;/abbr&gt;
-The New York Times &lt;abbr title="and others"&gt;et al.&lt;/abbr&gt; is the landmark lawsuit 
-brought by members of the National Writers Union against ......&lt;/p&gt;  </pre>
+         <h3>Using <code class="language-html">dfn</code> and <code class="language-html">abbr</code> element to define abbreviations</h3>
+<pre xml:space="preserve"><code class="language-html">&lt;p&gt;Tasini 
+  &lt;dfn id="etal"&gt;&lt;abbr title="and others"&gt;et al.&lt;/abbr&gt;&lt;/dfn&gt;
+  &lt;abbr title="versus"&gt;v.&lt;/abbr&gt;
+  The New York Times &lt;abbr title="and others"&gt;et al.&lt;/abbr&gt; is the landmark lawsuit 
+  brought by members of the National Writers Union against ...
+&lt;/p&gt;</code></pre>
       </section>
+
       <section class="example">
-         <h3> Using the <code class="el">abbr</code> element to expand an acronym </h3>
-         <pre xml:space="preserve"> &lt;p&gt;The use of &lt;abbr title="Keep It Simple Stupid"&gt;KISS&lt;/abbr&gt; became popular in ...&lt;/p&gt;        
-            </pre>
+         <h3>Using the <code class="language-html">abbr</code> element to expand an acronym</h3>
+         <pre xml:space="preserve"><code class="language-html">&lt;p&gt;Recent updates to the &lt;abbr title="Cascading Style Sheets"&gt;CSS&lt;/abbr&gt; color module ...&lt;/p&gt;</code></pre>
       </section>
+
       <section class="example">
-         <h3> Using the <code class="el">abbr</code> element to expand an initialism </h3>
-         <pre xml:space="preserve"> &lt;p&gt;&lt;abbr title="World Wide Web"&gt;WWW&lt;/abbr&gt;&lt;/p&gt;</pre>
+         <h3> Using the <code class="language-html">abbr</code> element to expand an initialism</h3>
+         <pre xml:space="preserve"><code class="language-html">&lt;p&gt;&lt;abbr title="British Broadcasting Corporation"&gt;BBC&lt;/abbr&gt;&lt;/p&gt;</code></pre>
       </section>
-   </section><section id="tests"><h2>Tests</h2>
-      <section class="procedure"><h3>Procedure</h3>
+
+   </section>
+   <section id="tests">
+      <h2>Tests</h2>
+      <section class="procedure">
+         <h3>Procedure</h3>
          <ol>
-            <li>Check that an expansion or definition is provided for each abbreviation via
-                    <code class="el">abbr</code>. </li>
+            <li>Check that an expansion or definition is provided for each abbreviation via <code class="language-html">abbr</code>.</li>
          </ol>
       </section>
-      <section class="results"><h3>Expected Results</h3>
+      <section class="results">
+         <h3>Expected Results</h3>
          <ul>
             <li>Check #1 is true.</li>
          </ul>
       </section>
-   </section><section id="related"><h2>Related Techniques</h2><ul>
-      <li><a href="../general/G102">G102</a></li>
-   </ul></section><section id="resources"><h2>Resources</h2>
-      
-         <ul>
-            <li>
-									         <a href="https://www.w3.org/TR/html401/struct/text.html#edef-ABBR">HTML 4.01 ABBR
-                    element</a>
-								       </li>
-            <li>
-									         <a href="https://www.w3.org/TR/html5/textlevel-semantics.html#the-abbr-element">HTMl5 abbr
-                    element</a>
-								       </li>
-            <li>
-                  <a href="https://www.paciellogroup.com/blog/2010/11/using-the-html-title-attribute/">HTML title attribute</a>
-               </li>
-         </ul>
-      
-   </section></body></html>
\ No newline at end of file
+   </section>
+   <section id="related">
+      <h2>Related Techniques</h2>
+      <ul>
+         <li><a href="../general/G102">G102</a></li>
+      </ul>
+   </section>
+   <section id="resources">
+      <h2>Resources</h2>
+      <ul>
+         <li>
+            <a href="https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-abbr-element">HTML - the <code class="language-html">abbr</code> element</a>
+         </li>
+         <li>
+            <a href="https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-dfn-element">HTML - the <code class="language-html">dfn</code> element</a>
+         </li>
+         <li>
+            <a href="https://www.tpgi.com/using-the-html-title-attribute/">Using the HTML title attribute</a>
+         </li>
+      </ul>
+   </section>
+</body>
+</html>
\ No newline at end of file
diff --git a/techniques/html/H30.html b/techniques/html/H30.html
index 51c3b29b0e..69515c2e3d 100644
--- a/techniques/html/H30.html
+++ b/techniques/html/H30.html
@@ -1,127 +1,120 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing link text that describes the purpose of a link for anchor elements</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Providing link text that describes the purpose of a link for anchor elements</h1><section class="meta"><p class="id">ID: H30</p><p class="technology">Technology: html</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
-      <p>HTML and XHTML documents that contain links, (&lt;a
-            href&gt; elements)</p>
-   </section><section id="description"><h2>Description</h2>
-      <p>The objective of this technique is to describe the purpose of a link by providing
-            descriptive text as the content of the <code class="el">a</code> element. The description lets a
-            user distinguish this link from other links in the Web page and helps the user determine
-            whether to follow the link. The URI of the destination is generally not sufficiently
-            descriptive. </p>
-      <p>When an image is the only content of a link, the text alternative for the image
-            describes the unique function of the link.</p>
-      <p>When the content of a link contains both text and one or more images, if the text is
-            sufficient to describe the purpose of the link, the images may have an empty text
-            alternative. (See <a href="https://www.w3.org/WAI/WCAG21/Techniques/html/H67">Using null alt text and no title
-              attribute on img elements for images that assistive technology should ignore</a>.)
-            When the images convey information beyond the purpose of the link, they must also have
-            appropriate alt text. </p>
-   </section><section id="examples"><h2>Examples</h2>
-      <section class="example">
-         
-            <p>Describing the purpose of a link in HTML in the text content of the <code class="el">a</code>
-                element.</p>
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>Providing link text that describes the purpose of a link for anchor elements</title>
+		<link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+	</head>
+	<body>
+		<h1>Providing link text that describes the purpose of a link for anchor elements</h1>
+		<section class="meta">
+			<p class="id">ID: H30</p>
+			<p class="technology">Technology: html</p>
+			<p class="type">Type: Technique</p>
+		</section>
+		<section id="applicability">
+			<h2>When to Use</h2>
+      <p><abbr title="HyperText Markup Language">HTML</abbr> documents that contain links, (<code class="language-html">&lt;a href&gt; elements)</code></p>
+   </section>
+	 <section id="description">
+		 <h2>Description</h2>
+		 <p>The objective of this technique is to describe the purpose of a link by providing descriptive text as the content of the <code class="language-html">a</code> element. The description lets a user distinguish this link from other links in the Web page and helps the user determine whether to follow the link. The <abbr title="Uniform Resource Identifier">URI</abbr> of the destination is generally not sufficiently descriptive.</p>
+      <p>When an image is the only content of a link, the text alternative for the image describes the unique function of the link.</p>
+      <p>When the content of a link contains both text and one or more images, if the text is sufficient to describe the purpose of the link, the images may have an empty text alternative. (See <a href="H67">Using null alt text and no title attribute on img elements for images that assistive technology should ignore</a>.) When the images convey information beyond the purpose of the link, they must also have appropriate alt text.</p>
+   </section>
+	 <section id="examples">
+		 <h2>Examples</h2>
+		 <section class="example">
+			 <p>Describing the purpose of a link in HTML in the text content of the <code class="language-html">a</code> element.</p>
          
-         <pre xml:space="preserve">&lt;a href="routes.html"&gt;
+<pre xml:space="preserve"><code class="language-html">&lt;a href="routes.html"&gt;
   Current routes at Boulders Climbing Gym
-&lt;/a&gt;</pre>
-      </section>
-      <section class="example">
+&lt;/a&gt;</code></pre>
+		</section>
+    <section class="example">
+			<p>Using the <code class="language-html">alt</code> attribute for the <code class="language-html">img</code> element to describe the purpose of a graphical link.</p>
          
-            <p>Using the <code class="att">alt</code> attribute for the <code class="el">img</code> element to describe
-                the purpose of a graphical link.</p>
+<pre xml:space="preserve"><code class="language-html">&lt;a href="routes.html"&gt;
+  &lt;img src="topo.gif" alt="Current routes at Boulders Climbing Gym"&gt; 
+&lt;/a&gt;</code> </pre>
+    </section>
+    <section class="example">
+			<p>Using an empty <code class="language-html">alt</code> attribute when the anchor (<code class="language-html">a</code>) element contains text that describes the purpose of the link in addition to the <code class="language-html">img</code> element. Note that the link text will appear on the page next to the image.</p>
          
-         <pre xml:space="preserve">&lt;a href="routes.html"&gt;
-   &lt;img src="topo.gif" alt="Current routes at Boulders Climbing Gym" /&gt; 
-&lt;/a&gt; </pre>
-      </section>
-      <section class="example">
-         
-            <p>Using an empty <code class="att">alt</code> attribute when the anchor (<code class="el">a</code>) element contains text
-                that describes the purpose of the link in addition to the <code class="el">img</code> element.
-                Note that the link text will appear on the page next to the image.</p>
-         
-         <pre xml:space="preserve">&lt;a href="routes.html"&gt;
-  &lt;img src="topo.gif" alt="" /&gt;
+<pre xml:space="preserve"><code class="language-html">&lt;a href="routes.html"&gt;
+  &lt;img src="topo.gif" alt=""&gt;
   Current routes at Boulders Climbing Gym
-&lt;/a&gt;</pre>
-      </section>
-      <section class="example">
+&lt;/a&gt;</code></pre>
+    </section>
+    <section class="example">
+			<p>A site allows users to provide feedback on products by clicking on the "Feedback" link in a product detail page. Other users are able to provide a response to any feedback. When a response to the user's feedback is available, the feedback link displays an icon, with "response received" as its text alternative, after the "Feedback" text. The site's help document describes this icon as a speech bubble containing quotation marks and includes the icon, with its text alternative, as an example. The same text alternative is used in the product detail pages (when a response is available) to help ensure that users following the documentation can identify the image correctly as documented.</p>
          
-            <p>A site allows users to provide feedback on products, when the user is logged in, by clicking on the "Feedback" link in a product detail page. Other users or the product manufacturer are able to provide a response to any feedback. The feedback link displays an icon before the "Feedback" text when a response to the user's feedback is available. The help information describes this icon as a talking bubble containing quotation marks and includes the icon itself as an example. The icon's text alternative in the help text is "Response received icon". The same text alternative is used in the product detail pages (when a response is available) to allow identification of this icon through multiple modalities.</p>
+<pre xml:space="preserve"><code class="language-html">&lt;a href="prod_123_feedback.html"&gt;
+  Feedback 
+  &lt;img src="response.gif" width="15" height="15" alt="response received"&gt;
+&lt;/a&gt;</code></pre>
+		</section>
+    <section class="example">
+			<p>A link contains text and an icon, and the icon provides additional information about the target.</p>
          
-         <pre xml:space="preserve">&lt;a href="prod_123_feedback.htm"&gt;Feedback 
-         &lt;img src="response.gif" width="15" height="15" alt="Response received icon" /&gt;&lt;/a&gt;</pre>
+<pre xml:space="preserve"><code class="language-html">&lt;a href="WMFP.pdf"&gt;
+  Woodend Music Festival Program
+  &lt;img src="pdficon.gif" alt="PDF format"&gt;
+&lt;/a&gt;</code></pre>
       </section>
       <section class="example">
+				<p>The "MyCorp" company's annual report is made available on the corporate website as a <abbr title="Portable Document File">PDF</abbr>, and the annual corporate budget is made available as an Excel file on the web site.</p>
+        <div class="note">
+					<p>Many users prefer to know the file type when opening a file that results in opening a new application to view the file, so it is often regarded as useful to include this additional information. However, this is not required for compliance with this Success Criterion.</p>
+				</div>
          
-            <p>A link contains text and an icon, and the icon provides additional information about the target. </p>
-         
-         <pre xml:space="preserve">&lt;a href="WMFP.pdf"&gt;
-Woodend Music Festival Program
-&lt;img src="pdficon.gif" alt="PDF format"/&gt;
-&lt;/a&gt;</pre>
-      </section>
-      <section class="example">
-         
-            <p>The “MyCorp” company’s annual report is made available on the corporate
-        				website as a PDF file, and the annual corporate budget is made available as an
-        				Excel file on the web site.</p>
-            <div class="note">
-               <p>Many users prefer to know the file type when opening a file that results in opening a new application to view the file, so it is often regarded as useful to include this additional information. However, this is not required for compliance with this success criterion.</p>
-            </div>
-         
-         <pre xml:space="preserve">&lt;p&gt;
-&lt;a href=”2009mycorp_report.pdf”&gt;MyCorp 2009 Annual Report (pdf)&lt;/a&gt;&lt;br /&gt;
-&lt;a href=”2009mycorp_budget.xls”&gt;MyCorp 2009 Annual Budget (Excel)&lt;/a&gt;
-&lt;/p&gt;</pre>
-      </section>
-      <section class="example">
-         
-            <p>Using a link to wrap block level elements in HTML5.</p>
-         
-         <pre xml:space="preserve">&lt;article&gt;
-&lt;a href="news.html"&gt;
-&lt;h3&gt;Budget Debate Continues in Parliament&lt;/h3&gt;
-&lt;p class="subhead"&gt;&lt;img class="alertimg" src="alerticon.png" alt="Breaking News" height="30" width="30"&gt;Members of Parliament continued vigorous debate on three challenging issues surrounding the upcoming year's budget.&lt;/p&gt;
-&lt;p&gt;Read more&lt;/p&gt;
-&lt;/a&gt;
-&lt;/article&gt;</pre>
-            <p class="working-example">This is shown in the <a href="../../working-examples/link-wraps-block/">working example of using a link to wrap block level elements</a>.
-            </p>
-      </section>      
-   </section><section id="tests"><h2>Tests</h2>
-      <section class="procedure"><h3>Procedure</h3>
-         <p>For each link in the content that uses this technique:</p>
-         <ol>
-            <li>Check that text or a text alternative for non-text content is included in the
-                    <code class="el">a</code> element</li>
-            <li>If an <code class="el">img</code> element is the only content of the <code class="el">a</code> element,
-                  check that its text alternative describes the purpose of the link</li>
-            <li>If the <code class="el">a</code> element contains one or more <code class="el">img</code> element(s)
-                  and the text alternative of the <code class="el">img</code> element(s) is empty, check that
-                  the text of the link describes the purpose of the link </li>
-            <li>If the <code class="el">a</code> element only contains text, check that the text describes
-                  the purpose of the link</li>
-         </ol>
-      </section>
-      <section class="results"><h3>Expected Results</h3>
-         <ul>
-            <li>The above checks are true.</li>
-         </ul>
-      </section>
-   </section><section id="related"><h2>Related Techniques</h2><ul>
+<pre xml:space="preserve"><code class="language-html">&lt;ul&gt;
+  &lt;li&gt;
+    &lt;a href="2009mycorp_report.pdf"&gt;MyCorp 2009 Annual Report (PDF)&lt;/a&gt;
+  &lt;/li&gt;
+  &lt;li&gt;			
+    &lt;a href="2009mycorp_budget.xls"&gt;MyCorp 2009 Annual Budget (Excel)&lt;/a&gt;
+  &lt;/li&gt;		
+&lt;/ul&gt;</code></pre>
+		</section>
+  </section>
+<section id="tests">
+	<h2>Tests</h2>
+  <section class="procedure"><h3>Procedure</h3>
+		<p>For each link in the content that uses this technique:</p>
+		<ol>
+			<li>Check that text or a text alternative for non-text content is included in the
+							<code class="language-html">a</code> element.</li>
+			<li>If an <code class="language-html">img</code> element is the only content of the <code class="language-html">a</code> element,
+						check that its text alternative describes the purpose of the link.</li>
+			<li>If the <code class="language-html">a</code> element contains one or more <code class="language-html">img</code> element(s)
+						and the text alternative of the <code class="language-html">img</code> element(s) is empty, check that the text of the link describes the purpose of the link.</li>
+			<li>If the <code class="language-html">a</code> element only contains text, check that the text describes
+						the purpose of the link.</li>
+		</ol>
+    </section>
+    <section class="results">
+			<h3>Expected Results</h3>
+			<ul>
+				<li>The above checks are true.</li>
+			</ul>
+    </section>
+   </section>
+	 <section id="related">
+		 <h2>Related Techniques</h2>
+		 <ul>
       <li><a href="../general/G91">G91</a></li>
-      
       <li><a href="../html/H2">H2</a></li>
       <li><a href="../html/H24">H24</a></li>
       <li><a href="../html/H67">H67</a></li>
-   </ul></section><section id="resources"><h2>Resources</h2>
-      
-         <ul>
-            <li>
-									         <a href="https://www.w3.org/TR/html401/struct/objects.html#h-13.8">HTML 4.01 -
-                    how to specify alt text</a>
-								       </li>
-         </ul>
-      
-   </section></body></html>
\ No newline at end of file
+   </ul>
+	</section>
+	<section id="resources">
+		<h2>Resources</h2>  
+    <ul>
+			<li>
+				<a href="https://html.spec.whatwg.org/multipage/images.html#alt">HTML - Requirements for providing text to act as an alternative for images</a>
+			</li>
+    </ul>  
+   </section>
+	</body>
+	</html>
\ No newline at end of file
diff --git a/techniques/html/H32.html b/techniques/html/H32.html
index f926bbecaf..3f02c4f1ff 100644
--- a/techniques/html/H32.html
+++ b/techniques/html/H32.html
@@ -1,64 +1,71 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing submit buttons</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Providing submit buttons</h1><section class="meta"><p class="id">ID: H32</p><p class="technology">Technology: html</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
-      <p> Content that includes form controls. </p>
-   </section><section id="description"><h2>Description</h2>
-      <p> The objective of this technique is to provide a mechanism that allows users to
-            explicitly request changes of context. The intended use of a submit button is to
-            generate an HTTP request that submits data entered in a form, so it is an appropriate
-            control to use for causing a change of context. </p>
-   </section><section id="examples"><h2>Examples</h2>
-      <section class="example">
-         <h3></h3>
-         
-            <p> This is a basic example of a form with a submit button.</p>
-         
-         <pre xml:space="preserve">
-&lt;form action="http://www.example.com/cgi/subscribe/" method="post"&gt;&lt;br /&gt; 
- &lt;p&gt;Enter your e-mail address to subscribe to our mailing list.&lt;/p&gt;&lt;br /&gt; 
- &lt;label for="address"&gt;Enter email address:&lt;/label&gt;&lt;input type="text" 
- id="address" name="address" /&gt; 
- &lt;input type="submit" value="Subscribe" /&gt;&lt;br /&gt; 
-&lt;/form&gt;</pre>
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+   <head>
+      <title>Providing submit buttons</title>
+      <link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+   </head>
+   <body>
+      <h1>Providing submit buttons</h1>
+      <section class="meta">
+         <p class="id">ID: H32</p>
+         <p class="technology">Technology: html</p>
+         <p class="type">Type: Technique</p>
+      </section>
+      <section id="applicability">
+         <h2>When to Use</h2>
+         <p>Content that includes form controls.</p>
       </section>
+      <section id="description">
+         <h2>Description</h2>
+         <p>The objective of this technique is to provide a mechanism that allows users to explicitly request changes of context. The intended use of a submit button is to generate an <abbr title="Hypertext Transfer Protocol">HTTP</abbr> request that submits data entered in a form, so it is an appropriate control to use for causing a change of context.</p>
+   </section>
+   <section id="examples">
+      <h2>Examples</h2>
       <section class="example">
-         <h3></h3>
+         <h3>A basic example of a form with a submit button</h3>
          
-            <p> The following example uses a server-side script (specified in the
-                <code class="att">action</code> attribute) that redirects the user to the requested page. </p>
-         
-         <pre xml:space="preserve"> &lt;form action="http://www.example.com/cgi/redirect/" method="get"&gt;&lt;br /&gt; 
-    &lt;p&gt;Navigate the site.&lt;/p&gt;&lt;br /&gt; 
-    &lt;select name="dest"&gt;&lt;br /&gt; 
-      &lt;option value="/index.html"&gt;Home&lt;/option/&gt;&lt;br /&gt; 
-      &lt;option value="/blog/index.html"&gt;My blog&lt;/option/&gt;&lt;br /&gt; 
-      &lt;option value="/tutorials/index.html"&gt;Tutorials&lt;/option/&gt;&lt;br /&gt; 
-      &lt;option value="/search.html"&gt;Search&lt;/option/&gt;&lt;br /&gt; 
-    &lt;/select&gt;&lt;br /&gt; 
-  &lt;input type="submit" value="Go to Page" /&gt;&lt;br /&gt; 
-  &lt;/form&gt; </pre>
+<pre xml:space="preserve"><code class="language-html">&lt;form action="/subscribe" method="post"&gt;
+ &lt;p&gt;Enter your email address to subscribe to our mailing list.&lt;/p&gt;
+ &lt;label for="address"&gt;Your email address:&lt;/label&gt;
+ &lt;input autocomplete="email" id="address" name="address" type="text"&gt; 
+ &lt;input type="submit" value="Subscribe"&gt;
+&lt;/form&gt;</code></pre>
       </section>
-   </section><section id="tests"><h2>Tests</h2>
-      <section class="procedure"><h3>Procedure</h3>
+   </section>
+   <section id="tests">
+      <h2>Tests</h2>
+      <section class="procedure">
+         <h3>Procedure</h3>
          <ol>
-            <li> Find all forms in the content </li>
-            <li> For each form, check that it has a submit button (input type="submit", input type="image", or button type="submit") </li>
+            <li>Find all forms in the content.</li>
+            <li>For each form, check that it has a submit button (<code class="language-html">&lt;input type="submit"&gt;</code>, <code class="language-html">&lt;input type="image"&gt;</code>, or <code class="language-html">&lt;button type="submit"&gt;</code>).</li>
          </ol>
       </section>
-      <section class="results"><h3>Expected Results</h3>
+      <section class="results">
+         <h3>Expected Results</h3>
          <ul>
-            <li> #2 is true </li>
+            <li>#2 is true</li>
          </ul>
       </section>
-   </section><section id="related"><h2>Related Techniques</h2><ul>
-      <li><a href="../general/G80">G80</a></li>
-      <li><a href="../html/H36">H36</a></li>
-      <li><a href="../html/H84">H84</a></li>
-   </ul></section><section id="resources"><h2>Resources</h2>
-      
-         <ul>
-            <li>
-									         <a href="http://www.cs.tut.fi/~jkorpela/forms/navmenu.html">Navigational
-                    pulldown menus in HTML</a> by Jukka Korpela discusses a few techniques that
-                  work or do not work. </li>
-         </ul>
-      
-   </section></body></html>
\ No newline at end of file
+   </section>
+   <section id="related">
+      <h2>Related Techniques</h2>
+      <ul>
+         <li><a href="../general/G80">G80</a></li>
+         <li><a href="../html/H36">H36</a></li>
+         <li><a href="../html/H84">H84</a></li>
+      </ul>
+   </section>
+   <section id="resources">
+   <h2>Resources</h2>
+   <ul>
+      <li>
+         <a href="https://html.spec.whatwg.org/multipage/input.html#submit-button-state-(type=submit)">HTML - Submit button state (<code class="language-html">type=submit</code>)</a>.
+      </li>
+      <li>
+         <a href="https://html.spec.whatwg.org/multipage/form-elements.html#the-button-element">HTML - the <code class="language-html">button</code> element</a>.
+      </li>
+   </ul>
+   </section>
+</body>
+</html>
\ No newline at end of file
diff --git a/techniques/html/H33.html b/techniques/html/H33.html
index d929197766..e4674abc91 100644
--- a/techniques/html/H33.html
+++ b/techniques/html/H33.html
@@ -1,45 +1,65 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Supplementing link text with the title attribute</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Supplementing link text with the title attribute</h1><section class="meta"><p class="id">ID: H33</p><p class="technology">Technology: html</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
-      <p>HTML and XHTML</p>
-   </section><section id="description"><h2>Description</h2>
-      <p>The objective of this technique is to demonstrate how to use a <code class="att">title</code>
-            attribute on an anchor element to provide additional text describing a link. The
-              <code class="att">title</code> attribute is used to provide additional information to help clarify
-            or further describe the purpose of a link. If the supplementary information provided
-            through the <code class="att">title</code> attribute is something the user should know before
-            following the link, such as a warning, then it should be provided in the link text
-            rather than in the <code class="att">title</code> attribute. </p>
-      <p>Because of the extensive user agent limitations in supporting access to the title attribute, authors should use caution in applying this technique. For this reason, it is preferred that the author use technique <a href="https://www.w3.org/WAI/WCAG21/Techniques/css/C7">C7: Using CSS to hide a portion of the link text</a> or <a href="https://www.w3.org/WAI/WCAG21/Techniques/techniques/H30">H30: Providing link text that describes the purpose of a link for anchor elements</a>.</p>
-   </section><section id="examples"><h2>Examples</h2>
-      <section class="example">
-         <h3>Clarifying the purpose of a link</h3>
-         <pre xml:space="preserve">&lt;a href="http://example.com/WORLD/africa/kenya.elephants.ap/index.html" 
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>Supplementing link text with the title attribute</title>
+		<link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove" />
+	</head>
+	<body>
+		<h1>Supplementing link text with the title attribute</h1>
+		<section class="meta">
+			<p class="id">ID: H33</p>
+			<p class="technology">Technology: html</p>
+			<p class="type">Type: Technique</p>
+		</section>
+		<section id="applicability">
+			<h2>When to Use</h2>
+      <p>HTML</p>
+    </section>
+	  <section id="description">
+		  <h2>Description</h2>
+      <p>The objective of this technique is to demonstrate how to use a <code class="language-html">title</code> attribute on an anchor element to provide additional text describing a link. The <code class="language-html">title</code> attribute is used to provide additional information to help clarify or further describe the purpose of a link. If the supplementary information provided through the <code class="language-html">title</code> attribute is something the user should know before following the link, such as a warning, then it should be provided in the link text rather than in the <code class="language-html">title</code> attribute.</p>
+      <p>Because of the extensive user agent limitations in supporting access to the title attribute, authors should use caution in applying this technique. For this reason, it is preferred that the author use technique <a href="../css/C7">C7: Using CSS to hide a portion of the link text</a> or <a href="H30">H30: Providing link text that describes the purpose of a link for anchor elements</a>.</p>
+    </section>
+	  <section id="examples">
+		<h2>Examples</h2>
+    <section class="example">
+			<h3>Clarifying the purpose of a link</h3>
+      	<pre xml:space="preserve"><code class="language-html">&lt;a href="https://example.com/world/africa/kenya.elephants.ap/index.html" 
    title="Read more about failed elephant evacuation"&gt;
-   Evacuation Crumbles Under Jumbo load
-&lt;/a&gt;</pre>
+   Evacuation Crumbles Under Jumbo Load
+&lt;/a&gt;</code></pre>
       </section>
-   </section><section id="tests"><h2>Tests</h2>
-      <section class="procedure"><h3>Procedure</h3>
+		</section>
+		<section id="tests">
+			<h2>Tests</h2>
+      <section class="procedure">
+				<h3>Procedure</h3>
          <p>Examine the source code for anchor elements. </p>
          <ol>
-            <li>For each anchor element that has a <code class="att">title</code> attribute, check that the
-                    <code class="att">title</code> attribute together with the link text describes the purpose
-                  of the link.</li>
+						<li>For each anchor element that has a <code class="language-html">title</code> attribute, check that the <code class="language-html">title</code> attribute together with the link text describes the purpose of the link.</li>
          </ol>
       </section>
-      <section class="results"><h3>Expected Results</h3>
+      <section class="results">
+				<h3>Expected Results</h3>
          <ul>
             <li>Check #1 is true.</li>
          </ul>
       </section>
-   </section><section id="related"><h2>Related Techniques</h2><ul>
-      <li><a href="../css/C7">C7</a></li>
-      <li><a href="../html/H30">H30</a></li>
-   </ul></section><section id="resources"><h2>Resources</h2>
-      
-         <ul>
-            <li>
-									         <a href="http://www.brothercake.com/site/resources/scripts/tooltips/">Displaying tooltips when elements receive focus</a>
-								       </li>
-         </ul>
-      
-   </section></body></html>
\ No newline at end of file
+		</section>
+		<section id="related">
+			<h2>Related Techniques</h2>
+			<ul>
+      	<li><a href="../css/C7">C7</a></li>
+      	<li><a href="H30">H30</a></li>
+			</ul>
+		</section>
+		<section id="resources">
+			<h2>Resources</h2>
+			<ul>
+				<li>
+					<a href="https://html.spec.whatwg.org/multipage/dom.html#the-title-attribute">HTML - the <code class="language-html">title</code> attribute</a>
+				</li>
+			</ul>
+   </section>
+	</body>
+	</html>
\ No newline at end of file
diff --git a/techniques/html/H34.html b/techniques/html/H34.html
index 282c23d39c..d464e6afb9 100644
--- a/techniques/html/H34.html
+++ b/techniques/html/H34.html
@@ -1,74 +1,84 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using a Unicode right-to-left mark (RLM) or left-to-right mark (LRM) to mix text
-          direction inline</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Using a Unicode right-to-left mark (RLM) or left-to-right mark (LRM) to mix text
-          direction inline</h1><section class="meta"><p class="id">ID: H34</p><p class="technology">Technology: html</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
-      <p>HTML and XHTML</p>
-   </section><section id="description"><h2>Description</h2>
-      <p>The objective of this technique is to use Unicode right-to-left marks and left-to-right
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+   <head>
+      <title>Using a Unicode right-to-left mark (RLM) or left-to-right mark (LRM) to mix text direction inline</title>
+      <link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+   </head>
+   <body>
+      <h1>Using a Unicode right-to-left mark (RLM) or left-to-right mark (LRM) to mix text direction inline</h1>
+      <section class="meta">
+         <p class="id">ID: H34</p>
+         <p class="technology">Technology: html</p>
+         <p class="type">Type: Technique</p>
+      </section>
+      <section id="applicability">
+         <h2>When to Use</h2>
+         <p><abbr title="HyperText Markup Language">HTML</abbr></p>
+      </section>
+      <section id="description">
+         <h2>Description</h2>
+         <p>The objective of this technique is to use Unicode right-to-left marks and left-to-right
             marks to override the HTML bidirectional algorithm when it produces undesirable results.
             This may be necessary, for instance, when placing neutral characters such as spaces or
             punctuation between different directional text runs. The concepts used in this technique
-            are described in <a href="https://www.w3.org/International/articles/inline-bidi-markup/">What you need to
-              know about the bidi algorithm and inline markup</a>.</p>
-      <p> Unicode right-to-left marks and left-to-right marks can be entered directly or by
-            means of character entities or numeric character references, as shown here.</p>
+            are described in <a href="https://www.w3.org/International/articles/inline-bidi-markup/">Inline markup and bidirectional text in HTML</a>.</p>
+            <p>Unicode right-to-left marks and left-to-right marks can be entered directly or by means of character entities or numeric character references, as shown here.</p>
       <ul>
-         <li>left-to-right mark: &amp;lrm; or &amp;#x200e; (U+200E)</li>
-         <li>right-to-left mark: &amp;rlm; or &amp;#x200f; (U+200F)</li>
+         <li>left-to-right mark: <code class="language-html">&amp;lrm;</code> or <code>&amp;#x200e;</code> (<code>U+200E</code>)</li>
+         <li>right-to-left mark: <code class="language-html">&amp;rlm;</code> or <code>&amp;#x200f;</code> (<code>U+200F</code>)</li>
       </ul>
-      <p>Due to the bidi algorithm, a source code editor
-            may not display character entities or numeric
-              character references as expected.</p>
-   </section><section id="examples"><h2>Examples</h2>
+      <p>Due to the <abbr title="bidirectional">bidi</abbr> algorithm, a source code editor may not display character entities or numeric character references as expected.</p>
+   </section>
+   <section id="examples">
+      <h2>Examples</h2>
       <section class="example">
-         
-            <p>This example shows an Arabic phrase in the middle of an English sentence. The exclamation point is part of the Arabic phrase and should appear on its left. Because it is between an Arabic and Latin character and the overall paragraph direction is LTR, the bidirectional algorithm positions the exclamation mark to the right of the Arabic phrase. </p>
-            <p>The title is "<span lang="ar">مفتاح معايير الويب!</span>" in Arabic.</p>
-            <p>Visually-ordered ASCII version (RTL text in uppercase, LTR in lower):</p>
-            <p>the title is "HCTIWS SDRADNATS BEW!" in arabic.</p>
-            <p>Inserting a Unicode right-to-left mark in the code immediately after the exclamation mark positions it correctly when you view the displayed text (see below). You can use a character escape or the (invisible) control character to insert the right-to-left mark.</p>
-            <p>The title is "<span lang="ar">مفتاح معايير الويب!‏</span>" in Arabic.</p>
-            <p>Visually-ordered ASCII version:</p>
-            <p>the title is "!HCTIWS SDRADNATS BEW" in arabic.</p>
+         <p>This example shows an Arabic phrase in the middle of an English sentence. The exclamation point is part of the Arabic phrase and should appear on its left. Because it is between an Arabic and Latin character and the overall paragraph direction is LTR, the bidirectional algorithm positions the exclamation mark to the right of the Arabic phrase. </p>
+         <p>The title is "<span lang="ar">مفتاح معايير الويب!</span>" in Arabic.</p>
+         <p>Visually-ordered <abbr title="American Standard Code for Information Interchange">ASCII</abbr> version (RTL text in uppercase, LTR in lower):</p>
+         <p>the title is "HCTIWS SDRADNATS BEW!" in arabic.</p>
+         <p>Inserting a Unicode right-to-left mark in the code immediately after the exclamation mark positions it correctly when you view the displayed text (see below). You can use a character escape or the (invisible) control character to insert the right-to-left mark.</p>
+         <p>The title is "<span lang="ar">مفتاح معايير الويب!‏</span>" in Arabic.</p>
+         <p>Visually-ordered ASCII version:</p>
+         <p>the title is "!HCTIWS SDRADNATS BEW" in arabic.</p>
          
       </section>
-   </section><section id="tests"><h2>Tests</h2>
-      <section class="procedure"><h3>Procedure</h3>
+   </section>
+   <section id="tests">
+      <h2>Tests</h2>
+      <section class="procedure">
+         <h3>Procedure</h3>
          <ol>
-            <li>Examine the source for places where text changes direction. </li>
-            <li>When text changes direction, check whether neutral characters such as spaces or
-                  punctuation occur adjacent to text that is rendered in the non-default
-                direction.</li>
-            <li>When #2 is true and the HTML bidirectional algorithm would produce the wrong
-                  placement of the neutral characters, check whether the neutral characters are
-                  followed by Unicode right-to-left or left-to-right marks that cause neutral
-                  characters to be placed as part of the preceding characters. </li>
+            <li>Examine the source for places where text changes direction.</li>
+            <li>When text changes direction, check whether neutral characters such as spaces or punctuation occur adjacent to text that is rendered in the non-default direction.</li>
+            <li>When check #2 is true and the HTML bidirectional algorithm would produce the wrong placement of the neutral characters, check whether the neutral characters are followed by Unicode right-to-left or left-to-right marks that cause neutral characters to be placed as part of the preceding characters.</li>
          </ol>
       </section>
-      <section class="results"><h3>Expected Results</h3>
+      <section class="results">
+         <h3>Expected Results</h3>
          <ul>
             <li>Check #3 is true.</li>
          </ul>
       </section>
-   </section><section id="related"><h2>Related Techniques</h2><ul>
-      <li><a href="../html/H56">H56</a></li>
-   </ul></section><section id="resources"><h2>Resources</h2>
-      
-         <ul>
-            <li>
-									         <a href="https://www.w3.org/TR/i18n-html-tech-bidi/">Authoring Techniques for
-                    XHTML &amp; HTML Internationalization: Handling Bidirectional Text 1.0</a>
-								       </li>
-            <li>
-									         <a href="https://www.w3.org/TR/i18n-html-tech-bidi/#ri20030218.135304584">Mixing
-                    text direction inline</a>
-								       </li>
+   </section>
+   <section id="related">
+      <h2>Related Techniques</h2>
+      <ul>
+         <li><a href="../html/H56">H56</a></li>
+      </ul>
+   </section>
+   <section id="resources">
+      <h2>Resources</h2>
+      <ul>
+         <li>
+            <a href="https://www.w3.org/International/techniques/authoring-html#direction">W3C Internationalization - bidirectional text</a>.
+         </li>
             <li>
-									         <a href="https://www.w3.org/International/articles/inline-bidi-markup/">What you
-                    need to know about the bidi algorithm and inline markup</a>
-								       </li>
+               <a href="https://www.w3.org/International/techniques/authoring-html#inline">W3C Internationalization - Mixing text direction inline</a>.
+            </li>
             <li>
-									         <a href="https://www.w3.org/International/geo/html-tech/tech-bidi.html#bidisource">Problems with bidirectional source text</a>
-								       </li>
+               <a href="https://www.w3.org/International/articles/inline-bidi-markup/">W3C Internationalization - Inline markup and bidirectional text in HTML</a>.
+            </li>
          </ul>
-      
-   </section></body></html>
\ No newline at end of file
+      </section>
+   </body>
+</html>
\ No newline at end of file
diff --git a/techniques/html/H35.html b/techniques/html/H35.html
index e58cc1c956..6af96accd7 100644
--- a/techniques/html/H35.html
+++ b/techniques/html/H35.html
@@ -1,3 +1,10 @@
+---
+obsoleteMessage: |
+  The Java-specific <code>applet</code> element is
+  <a href="https://html.spec.whatwg.org/multipage/obsolete.html#applet">obsolete in the HTML Living Standard</a>.
+  Use <code>embed</code> or <code>object</code> instead.
+obsoleteSince: 20
+---
 <!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title> Providing text alternatives on applet elements </title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1> Providing text alternatives on <code class="el">applet</code> elements </h1><section class="meta"><p class="id">ID: H35</p><p class="technology">Technology: html</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
       <p> HTML and XHTML Documents that load Java applets where <code class="el">applet</code> is not deprecated.
           </p>
@@ -30,4 +37,4 @@ <h3>An applet to play the tic-tac-toe game. </h3>
       </section>
    </section><section id="related"><h2>Related Techniques</h2><ul>
       <li><a href="../general/G94">G94</a></li>
-   </ul></section></body></html>
\ No newline at end of file
+   </ul></section></body></html>
diff --git a/techniques/html/H36.html b/techniques/html/H36.html
index 47287d383e..fd22732071 100644
--- a/techniques/html/H36.html
+++ b/techniques/html/H36.html
@@ -1,41 +1,63 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using alt attributes on images used as submit buttons</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Using <code class="att">alt</code> attributes on images used as submit buttons</h1><section class="meta"><p class="id">ID: H36</p><p class="technology">Technology: html</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
-      <p> Applies to content using image-based submit buttons. </p>
-   </section><section id="description"><h2>Description</h2>
-      <p> For input elements of type 'image', the <code class="att">alt</code> attribute of the
-            <code class="el">input</code> element is used to provide a functional label. This label indicates
-            the button's function, but does not attempt to describe the image. The label is
-            especially important if there are multiple submit buttons on the page that each lead to
-            different results. </p>
-      <p> The <code class="el">input</code> element is used to create many kinds of form controls. Although
-            the HTML and XHTML DTDs permits the <code class="att">alt</code> attribute on all of these, it should be used
-            only on image submit buttons. User agent support for this attribute on other types of
-            form controls is not well defined, and other mechanisms are used to label these
-            controls. </p>
-   </section><section id="examples"><h2>Examples</h2>
-      <section class="example">
-         
-            <p> An <code class="el">input</code> element with an <code class="att">alt</code> attribute</p>
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+   <head>
+      <title>Using alt attributes on images used as submit buttons</title>
+      <link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+   </head>
+   <body>
+      <h1>Using <code class="language-html">alt</code> attributes on images used as submit buttons</h1>
+      <section class="meta">
+         <p class="id">ID: H36</p>
+         <p class="technology">Technology: html</p>
+         <p class="type">Type: Technique</p>
+      </section>
+      <section id="applicability">
+         <h2>When to Use</h2>
+         <p>Applies to content using image-based submit buttons.</p>
+      </section>
+      <section id="description">
+         <h2>Description</h2>
+         <p>For input elements of type <code class="language-html">image</code>, the <code class="language-html">alt</code> attribute of the <code class="language-html">input</code> element is used to provide a functional label. This label indicates the button's function, but does not attempt to describe the image. The label is especially important if there are multiple submit buttons on the page that each lead to different results.</p>
+      </section>
+      <section id="examples">
+         <h2>Examples</h2>
+         <section class="example">
+            <h3>An <code class="language-html">input</code> element with an <code class="language-html">alt</code> attribute</h3>
          
-         <pre xml:space="preserve">&lt;form action="http://example.com/prog/text-read" method="post"&gt;
-  &lt;input type="image" name="submit" src="button.gif" alt="Submit" /&gt;
-&lt;/form&gt;    </pre>
+<pre xml:space="preserve"><code class="language-html">&lt;form action="/find" method="post" role="search"&gt;
+  &lt;label for="look-up"&gt;Find books&lt;label&gt;
+  &lt;input id="look-up" type="text"&gt;
+  &lt;input alt="Search" src="button.gif" type="image"&gt;
+&lt;/form&gt;</code></pre>
       </section>
-   </section><section id="tests"><h2>Tests</h2>
-      <section class="procedure"><h3>Procedure</h3>
+   </section>
+   <section id="tests">
+      <h2>Tests</h2>
+      <section class="procedure">
+         <h3>Procedure</h3>
          <ol>
-            <li> For all <code class="el">input</code> elements that have a type attribute value of "image", check for
-                  the presence of an <code class="att">alt</code> attribute. </li>
-            <li>Check that the <code class="att">alt</code> attribute indicates the 
-                  button's function.</li>
+            <li>For all <code class="language-html">input</code> elements that have a type attribute value of <code class="language-html">image</code>, check for the presence of an <code class="language-html">alt</code> attribute.</li>
+            <li>Check that the value of the <code class="language-html">alt</code> attribute describes the button's function.</li>
          </ol>
       </section>
-      <section class="results"><h3>Expected Results</h3>
+      <section class="results">
+         <h3>Expected Results</h3>
          <ul>
-            <li> #1 and #2 are true </li>
+            <li>#1 and #2 are true</li>
          </ul>
       </section>
-   </section><section id="related"><h2>Related Techniques</h2><ul>
-      <li><a href="../general/G94">G94</a></li>
-   </ul></section><section id="resources"><h2>Resources</h2>
-      
-   </section></body></html>
\ No newline at end of file
+   </section>
+   <section id="related">
+      <h2>Related Techniques</h2>
+      <ul>
+         <li><a href="../general/G94">G94</a></li>
+      </ul>
+   </section>
+   <section id="resources">
+      <h2>Resources</h2>
+      <ul>
+         <li><a href="https://html.spec.whatwg.org/multipage/input.html#image-button-state-(type=image)"><abbr title="HyperText Markup Language">HTML</abbr> - Image Button state (<code class="language-html">type=image</code>)</a>.</li>
+      </ul>
+   </section>
+</body>
+</html>
\ No newline at end of file
diff --git a/techniques/html/H37.html b/techniques/html/H37.html
index fe9d7fd424..dc7ef6b613 100644
--- a/techniques/html/H37.html
+++ b/techniques/html/H37.html
@@ -1,62 +1,79 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using alt attributes on img elements</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Using <code class="att">alt</code> attributes on <code class="el">img</code> elements</h1><section class="meta"><p class="id">ID: H37</p><p class="technology">Technology: html</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
-      <p>Images used within HTML documents.</p>
-   </section><section id="description"><h2>Description</h2>
-      <p>When using the <code class="el">img</code> element, specify a short text alternative with the
-            <code class="att">alt</code> attribute. Note. The value of this attribute is referred to as "alt
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+<head>
+	<title>Using alt attributes on img elements</title>
+	<link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+</head>
+<body>
+	<h1>Using <code class="language-html">alt</code> attributes on <code class="language-html">img</code> elements</h1>
+	<section class="meta">
+		<p class="id">ID: H37</p>
+		<p class="technology">Technology: html</p>
+		<p class="type">Type: Technique</p>
+	</section>
+	<section id="applicability">
+		<h2>When to Use</h2>
+		<p>Images used within <abbr title="HyperText Markup Language">HTML</abbr> documents.</p>
+   </section>
+	 <section id="description">
+		 <h2>Description</h2>
+		 <p>When using the <code class="language-html">img</code> element, specify a short text alternative with the
+            <code class="language-html">alt</code> attribute. Note. The value of this attribute is referred to as "alt
             text".</p>
       <p>When an image contains words that are important to understanding the content, the alt
             text should include those words. This will allow the alt text to play the same function
             on the page as the image. Note that it does not necessarily describe the visual
             characteristics of the image itself but must convey the same meaning as the image. </p>
-   </section><section id="examples"><h2>Examples</h2>
+   </section>
+	 <section id="examples">
+		 <h2>Examples</h2>
       <section class="example">
-         
-            <p>An image on a Website provides a link to a free newsletter. The image contains the
+				<p>An image on a Website provides a link to a free newsletter. The image contains the
                 text "Free newsletter. Get free recipes, news, and more. Learn more." The alt text
-                matches the text in the image. </p>
-         
-         <pre xml:space="preserve">&lt;img src="newsletter.gif" alt="Free newsletter. 
-   Get free recipes, news, and more. Learn more." /&gt;</pre>
+                matches the text in the image.</p>
+
+<pre xml:space="preserve"><code class="language-html">&lt;img src="newsletter.gif" alt="Free newsletter. 
+ Get free recipes, news, and more. Learn more."&gt;</code></pre>
       </section>
       <section class="example">
-         
-            <p>An image on a Web site depicts the floor plan of a building. The image is an
+      	<p>An image on a Web site depicts the floor plan of a building. The image is an
               image map with each room an interactive map area. The alt text is "The
               building's floor plan. Select a room for more information about the purpose or
               content of the room." The instruction to "select a room" indicates that the
-              image is interactive.</p>
-         
+              image is interactive.</p> 
       </section>
-   </section><section id="tests"><h2>Tests</h2>
-      <section class="procedure"><h3>Procedure</h3>
+   </section>
+	 <section id="tests">
+		 <h2>Tests</h2>
+      <section class="procedure">
+		   <h3>Procedure</h3>
          <ol>
-            <li>Examine each <code class="el">img</code> element in the content </li>
-            <li>Check that each <code class="el">img</code> element which conveys meaning contains an
-                  <code class="att">alt</code> attribute. </li>
-            <li>If the image contains words that are important to understanding the content, the
-                  words are included in the text alternative. </li>
+            <li>Examine each <code class="language-html">img</code> element in the content.</li>
+            <li>Check that each <code class="language-html">img</code> element which conveys meaning contains an <code class="language-html">alt</code> attribute.</li>
+            <li>If the image contains words that are important to understanding the content, the words are included in the text alternative.</li>
          </ol>
       </section>
-      <section class="results"><h3>Expected Results</h3>
+      <section class="results">
+         <h3>Expected Results</h3>
          <p>Checks #2 and #3 are true.</p>
       </section>
-   </section><section id="related"><h2>Related Techniques</h2><ul>
-      <li><a href="../general/G82">G82</a></li>
+   </section>
+	 <section id="related">
+		 <h2>Related Techniques</h2>
+		 <ul>
+			<li><a href="../general/G82">G82</a></li>
       <li><a href="../html/H2">H2</a></li>
       <li><a href="../html/H24">H24</a></li>
       <li><a href="../html/H30">H30</a></li>
-      <li><a href="../html/H45">H45</a></li>
-   </ul></section><section id="resources"><h2>Resources</h2>
-      
-         <p>
-							     <a href="https://www.w3.org/TR/html401/struct/objects.html#edef-IMG">HTML 4.01 IMG
-                element</a>
-						   </p>
-      
-      
-         <p>
-							     <a href="https://www.w3.org/TR/html401/struct/objects.html#adef-alt">HTML 4.01 alt
-                attribute</a>
-						   </p>
-      
-   </section></body></html>
\ No newline at end of file
+		</ul>
+	</section>
+	<section id="resources">
+		<h2>Resources</h2>
+    <ul>
+      <li><a href="https://html.spec.whatwg.org/multipage/embedded-content.html#the-img-element">HTML - <code class="language-html">img</code> element</a>.</li>
+		<li><a href="https://html.spec.whatwg.org/multipage/embedded-content.html#attr-img-alt">HTML - <code class="language-html">alt</code> attribute</a>.</li>
+		<li><a href="https://html.spec.whatwg.org/multipage/images.html#alt">HTML - Requirements for providing text to act as an alternative for images</a>.</li>
+	</ul>   
+   </section>
+</body>
+</html>
\ No newline at end of file
diff --git a/techniques/html/H39.html b/techniques/html/H39.html
index e49524017d..1fc656d6df 100644
--- a/techniques/html/H39.html
+++ b/techniques/html/H39.html
@@ -1,52 +1,68 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using caption elements to associate data table captions with data tables</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Using caption elements to associate data table captions with data tables</h1><section class="meta"><p class="id">ID: H39</p><p class="technology">Technology: html</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
-      <p>HTML data tables </p>
-   </section><section id="description"><h2>Description</h2>
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+<head>
+	<title>Using caption elements to associate data table captions with data tables</title>
+	<link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+</head>
+<body>
+	<h1>Using <code class="language-html">caption</code> elements to associate data table captions with data tables</h1>
+	<section class="meta">
+		<p class="id">ID: H39</p>
+		<p class="technology">Technology: html</p>
+		<p class="type">Type: Technique</p>
+	</section>
+	<section id="applicability">
+		<h2>When to Use</h2>
+      <p><abbr title="HyperText Markup Language">HTML</abbr> data tables</p>
+   </section>
+	 <section id="description">
+		 <h2>Description</h2>
       <p>The objective of this technique is to programmatically associate captions for data
-            tables where captions are provided in the presentation. The caption for a table is a
-            table identifier and acts like a title or heading for the table. </p>
-      <p>The <code class="el">caption</code> element is the appropriate markup for such text and it ensures
-            that the table identifier remains associated with the table, including visually (by
-            default). In addition, using the <code class="el">caption</code> element allows screen reading software
-            to navigate directly to the caption for a table if one is present.</p>
+            tables where captions are provided in the presentation. The <code class="language-html">caption</code> for a <code class="language-html">table</code> is a table identifier and acts like a title or heading for the table.</p>
+      <p>The <code class="language-html">caption</code> element is the appropriate markup for such text and it ensures that the table identifier remains associated with the table, including visually (by default). In addition, using the <code class="language-html">caption</code> element allows screen reading software to navigate directly to the caption for a table if one is present.</p>
       <div class="note">
-         <p>Although WCAG 2.0 does not prohibit the use of layout tables, CSS-based layouts are
-               recommended in order to retain the defined semantic meaning of the HTML
-               <code class="el">table</code> elements and to conform to the coding practice of separating
-               presentation from content. If a table is used for layout, the <code class="el">caption</code> element
-               is not used. The purpose of a layout table is simply to control the placement of
-               content; the table itself is “transparent" to the user. A <code class="el">caption</code> would "break"
-               this transparency by calling attention to the table. See <a href="https://www.w3.org/WAI/WCAG21/Techniques/failure/F46">F46</a> for details..</p>
+         <p>Although WCAG 2 does not prohibit the use of layout tables, CSS-based layouts are recommended in order to retain the defined semantic meaning of the HTML <code class="language-html">table</code> elements and to conform to the coding practice of separating presentation from content. If a table is used for layout, the <code class="language-html">caption</code> element is not used. The purpose of a layout table is simply to control the placement of content; the table itself is "transparent" to the user. A <code class="language-html">caption</code> would "break" this transparency by calling attention to the table. See <a href="../failures/F46">F46</a> for details.</p>
       </div>
-   </section><section id="examples"><h2>Examples</h2>
+   </section>
+	 <section id="examples">
+		 <h2>Examples</h2>
       <section class="example">
-         <h3>An appointment calendar with a <code class="el">caption</code>
-						   </h3>
-         <pre xml:space="preserve">&lt;table&gt;
-&lt;caption&gt;Schedule for the week of March 6&lt;/caption&gt;
-...&lt;/table&gt; </pre>
+				<h3>An appointment calendar with a <code class="language-html">caption</code></h3>
+<pre xml:space="preserve"><code class="language-html">&lt;table&gt;
+  &lt;caption&gt;Schedule for the week of March 6&lt;/caption&gt;
+  ...
+&lt;/table&gt;</code></pre>
       </section>
-   </section><section id="tests"><h2>Tests</h2>
-      <section class="procedure"><h3>Procedure</h3>
-         <p>For each data table: </p>
-         <ol>
-           <li>Check that the table has content that is presented as a table caption.</li>
-            <li>Check that the table includes a <code class="el">caption</code> element.</li>
-            <li>Check that the content of the <code class="el">caption</code> element identifies the table.</li>
-         </ol>
+   </section>
+   <section id="tests">
+      <h2>Tests</h2>
+      <section class="procedure">
+				<h3>Procedure</h3>
+        <p>For each data table:</p>
+        <ol>
+          <li>Check that the table includes a <code class="language-html">caption</code> element.</li>
+          <li>Check that the text that titles or describes the table is included in the <code class="language-html">caption</code> element.</li>
+        </ol>
       </section>
-      <section class="results"><h3>Expected Results</h3>
+      <section class="results">
+         <h3>Expected Results</h3>
          <ul>
-            <li>#1-3 are true.</li>
+           <li>#1 and #2 are true.</li>
          </ul>
       </section>
-   </section><section id="related"><h2>Related Techniques</h2><ul>
+   </section>
+	 <section id="related">
+		 <h2>Related Techniques</h2>
+		 <ul>
       <li><a href="../html/H51">H51</a></li>
-      <li><a href="../html/H73">H73</a></li>
-      <li><a href="../failures/F46">F46</a></li>
-   </ul></section><section id="resources"><h2>Resources</h2>
-      
-         <ul>
-            <li>HTML 4.01 <a href="https://www.w3.org/TR/html/tabular-data.html#the-caption-element">HTML 5.0 Tabular Data: The caption element</a></li>
-         </ul>
-      
-   </section></body></html>
+      <li><a href="../failure/F46">F46</a></li>
+		</ul>
+	</section>
+	<section id="resources">
+		<h2>Resources</h2>
+		<ul>
+			<li><a href="https://html.spec.whatwg.org/multipage/tables.html#the-caption-element">HTML - the <code class="language-html">caption</code> element</a>.</li>
+		</ul>
+   </section>
+	</body>
+	</html>
diff --git a/techniques/html/H4.html b/techniques/html/H4.html
index c346df5311..8000f5ec8b 100644
--- a/techniques/html/H4.html
+++ b/techniques/html/H4.html
@@ -1,3 +1,7 @@
+---
+obsoleteMessage: Manipulating focus order is discouraged, as it frequently introduces new accessibility issues.
+obsoleteSince: 20
+---
 <!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Creating a logical tab order through links, form controls, and objects</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Creating a logical tab order through links, form controls, and objects</h1><section class="meta"><p class="id">ID: H4</p><p class="technology">Technology: html</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
       <p>HTML and XHTML</p>
    </section><section id="description"><h2>Description</h2>
@@ -119,4 +123,4 @@
 								       </li>
          </ul>
       
-   </section></body></html>
\ No newline at end of file
+   </section></body></html>
diff --git a/techniques/html/H40.html b/techniques/html/H40.html
index 5aa7cde59a..26ef6c03f7 100644
--- a/techniques/html/H40.html
+++ b/techniques/html/H40.html
@@ -1,71 +1,86 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using description lists</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Using description lists</h1><section class="meta"><p class="id">ID: H40</p><p class="technology">Technology: html</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
-      <p>HTML and XHTML</p>
-   </section><section id="description"><h2>Description</h2>
-      <p>The objective of this technique is to provide the description of names or terms by
-            presenting them in a description list. The list is marked up using the <code class="el">dl</code>
-            element. Within the list, each term is put in a separate <code class="el">dt</code> element, and
-            its description goes in the <code class="el">dd</code> element directly following it. Multiple terms can be associated with a single description, as can a single term with multiple descriptions, provided that semantic sequence is maintained. The
-              <code class="att">title</code> attribute can be used to provide additional information about the
-            description list. Usage of description lists ensures that terms and their descriptions are semantically related even as presentation format changes, as well as ensuring that these terms and descriptions are semantically grouped as a unit.</p>
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+   <head>
+      <title>Using description lists</title>
+      <link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+   </head>
+   <body>
+      <h1>Using description lists</h1>
+      <section class="meta">
+         <p class="id">ID: H40</p>
+         <p class="technology">Technology: html</p>
+         <p class="type">Type: Technique</p>
+      </section>
+      <section id="applicability">
+         <h2>When to Use</h2>
+         <p><abbr title="HyperText Markup Language">HTML</abbr></p>
+   </section>
+   <section id="description">
+      <h2>Description</h2>
+      <p>The objective of this technique is to provide the description of names or terms by presenting them in a description list. The list is marked up using the <code class="language-html">dl</code> element. Within the list, each term is put in a separate <code class="language-html">dt</code> element, and its description goes in the <code class="language-html">dd</code> element directly following it. Multiple terms can be associated with a single description, as can a single term with multiple descriptions, provided that semantic sequence is maintained. The <code class="language-html">title</code> attribute can be used to provide additional information about the description list. Usage of description lists ensures that terms and their descriptions are semantically related even as presentation format changes, as well as ensuring that these terms and descriptions are semantically grouped as a unit.</p>
       <p>Description lists are easiest to use when the descriptions are ordered alphabetically. A common use for description lists is a glossary of terms.</p>
-      <div class="note"><p>In HTML5 the name "Description list" was introduced. In previous versions these lists were referred to as "Definition lists".</p></div>
-   </section><section id="examples"><h2>Examples</h2>
+   </section>
+   <section id="examples">
+      <h2>Examples</h2>
       <section class="example">
-         
-            <p>A list of descriptions of nautical terms used on a Website about sailing.</p>
-         
-         <pre xml:space="preserve">&lt;dl title="Nautical terms"&gt;
+         <p>A list of descriptions of nautical terms used on a Website about sailing.</p>
+<pre xml:space="preserve"><code class="language-html">&lt;dl title="Nautical Terms"&gt;
   &lt;dt&gt;Knot&lt;/dt&gt;
   &lt;dd&gt;
-    &lt;p&gt;A &lt;em&gt;knot&lt;/em&gt; is a unit of speed equaling 1 
-      nautical mile per hour (1.15 miles per hour or 1.852 
-      kilometers per hour).&lt;/p&gt;
+    A &lt;i&gt;knot&lt;/i&gt; is a unit of speed equaling 1 
+    nautical mile per hour (1.15 miles per hour or 1.852 
+    kilometers per hour).
   &lt;/dd&gt;
   &lt;dt&gt;Port&lt;/dt&gt;
   &lt;dd&gt;
-    &lt;p&gt;&lt;em&gt;Port&lt;/em&gt; is the nautical term (used on 
-      boats and ships) that refers to the left side
-      of a ship, as perceived by a person facing towards 
-      the bow (the front of the vessel).&lt;/p&gt;
+    &lt;i&gt;Port&lt;/i&gt; is the nautical term (used on 
+    boats and ships) that refers to the left side
+    of a ship, as perceived by a person facing towards 
+    the bow (the front of the vessel).
   &lt;/dd&gt;
   &lt;dt&gt;Starboard&lt;/dt&gt;
   &lt;dd&gt;
-    &lt;p&gt;&lt;em&gt;Starboard&lt;/em&gt; is the nautical term (used 
-      on boats and ships) that refers to the right 
-      side of a vessel, as perceived by a person 
-      facing towards the bow (the front of the vessel).&lt;/p&gt;
+    &lt;i&gt;Starboard&lt;/i&gt; is the nautical term (used 
+    on boats and ships) that refers to the right 
+    side of a vessel, as perceived by a person 
+    facing towards the bow (the front of the vessel).
   &lt;/dd&gt;
-&lt;/dl&gt;        </pre>
+&lt;/dl&gt;</code></pre>
       </section>
-   </section><section id="tests"><h2>Tests</h2>
-      <section class="procedure"><h3>Procedure</h3>
-         <p>For any set of terms and their associated descriptions: </p>
+   </section>
+   <section id="tests">
+      <h2>Tests</h2>
+      <section class="procedure">
+         <h3>Procedure</h3>
+         <p>For any set of terms and their associated descriptions:</p>
          <ol>
-            <li>Check that the list is contained within a <code class="el">dl</code> element. </li>
-            <li>Check that each term in the list being described is contained within a <code class="el">dt</code>
-                  element. </li>
-            <li>Check that when there is more than one term that shares the same decription that the <code class="el">dt</code> elements immediately follow each other.</li>
-            <li>Check that the description for each term is contained in one or more <code class="el">dd</code> elements.</li>
-            <li>Check that the one or more <code class="el">dd</code> elements immediately follow the one or more <code class="el">dt</code> elements containing the term being described.</li>
+            <li>Check that the list is contained within a <code class="language-html">dl</code> element.</li>
+            <li>Check that each term in the list being described is contained within a <code class="language-html">dt</code> element.</li>
+            <li>Check that when there is more than one term that shares the same description that the <code class="language-html">dt</code> elements immediately follow each other.</li>
+            <li>Check that the description for each term is contained in one or more <code class="language-html">dd</code> elements.</li>
+            <li>Check that the one or more <code class="language-html">dd</code> elements immediately follow the one or more <code class="language-html">dt</code> elements containing the term being described.</li>
          </ol>
       </section>
-      <section class="results"><h3>Expected Results</h3>
+      <section class="results">
+         <h3>Expected Results</h3>
          <ul>
             <li>All checks above are true.</li>
          </ul>
       </section>
-   </section><section id="related"><h2>Related Techniques</h2><ul>
-      <li><a href="../general/G62">G62</a></li>
-   </ul></section><section id="resources"><h2>Resources</h2>
-      
-        <ul>
-            <li>
-									         <a href="https://www.w3.org/TR/html5/grouping-content.html#the-dl-element">HTML5 Description lists</a>
-								       </li>
-            <li>
-									         <a href="https://www.w3.org/TR/REC-html40/struct/lists.html#edef-DL">HTML 4 Definition
-                    lists: the DL, DT, and DD elements</a>
-								       </li>
-         </ul>
-      
-   </section></body></html>
\ No newline at end of file
+   </section>
+   <section id="related">
+      <h2>Related Techniques</h2>
+      <ul>
+         <li><a href="../general/G62">G62</a></li>
+      </ul>
+   </section>
+   <section id="resources">
+      <h2>Resources</h2>
+      <ul>
+         <li>
+            <a href="https://html.spec.whatwg.org/multipage/grouping-content.html#the-dl-element">HTML - <code class="language-html">dl</code> element</a>.
+         </li>
+      </ul>
+   </section>
+</body>
+</html>
\ No newline at end of file
diff --git a/techniques/html/H42.html b/techniques/html/H42.html
index 1036e8e064..9a6eecee0b 100644
--- a/techniques/html/H42.html
+++ b/techniques/html/H42.html
@@ -1,105 +1,127 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using h1-h6 to identify headings</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Using h1-h6 to identify headings</h1><section class="meta"><p class="id">ID: H42</p><p class="technology">Technology: html</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
-      <p>HTML and XHTML</p>
-   </section><section id="description"><h2>Description</h2>
-      <p>The objective of this technique is to use HTML and XHTML heading markup to provide semantic code for headings in the content. Heading markup will allow assistive technologies to present the heading status of text to a user. A screen reader can recognize the code and announce the text as a heading with its level, beep or provide some other auditory indicator. Screen readers are also able to navigate heading markup which can be an effective way for screen reader users to more quickly find the content of interest. Assistive technologies that alter the authored visual display will also be able to provide an appropriate alternate visual display for headings that can be identified by heading markup.</p>
-   </section><section id="examples"><h2>Examples</h2>
-      <section class="example">
-         <h3>Hierarchical Heading Organization</h3>
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+   <head>
+      <title>Using h1-h6 to identify headings</title>
+      <link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+   </head>
+   <body>
+      <h1>Using h1-h6 to identify headings</h1>
+      <section class="meta">
+         <p class="id">ID: H42</p>
+         <p class="technology">Technology: html</p>
+         <p class="type">Type: Technique</p>
+      </section>
+      <section id="applicability">
+         <h2>When to Use</h2>
+         <p><abbr title="HyperText Markup Language">HTML</abbr></p>
+      </section>
+      <section id="description">
+         <h2>Description</h2>
+         <p>The objective of this technique is to use HTML heading markup to provide semantic code for headings in the content. Heading markup will allow assistive technologies to present the heading status of text to a user. A screen reader can recognize the code and announce the text as a heading with its level, beep or provide some other auditory indicator. Screen readers are also able to navigate heading markup which can be an effective way for screen reader users to more quickly find the content of interest. Assistive technologies that alter the authored visual display will also be able to provide an appropriate alternate visual display for headings that can be identified by heading markup.</p>
+      </section>
+      <section id="examples">
+         <h2>Examples</h2>
+         <section class="example">
+            <h3>Hierarchical Heading Organization</h3>
          
-            <p>In the following example, headings are used in a hierarchical layout with <code class="el">h3</code> as a subsection of <code class="el">h2</code>, which is a subsection of <code class="el">h1</code>. </p>
+            <p>In the following example, headings are used in a hierarchical layout with <code class="language-html">h3</code> as a subsection of <code class="language-html">h2</code>, which is a subsection of <code class="language-html">h1</code>.</p>
          
-         <pre xml:space="preserve">&lt;h1&gt;Plant Foods that Humans Eat&lt;/h1&gt;
-&lt;p&gt;There are an abundant number of plants that humans eat...&lt;/p&gt;
+<pre xml:space="preserve"><code class="language-html">&lt;h1&gt;Plant Foods that Humans Eat&lt;/h1&gt;
+&lt;p&gt;There are an abundant number of plants that humans eat ...&lt;/p&gt;
 &lt;h2&gt;Fruit&lt;/h2&gt;
-&lt;p&gt; A fruit is a structure of a plant that contains its
-  seeds...&lt;/p&gt;
+&lt;p&gt;A fruit is a structure of a plant that contains its seeds ...&lt;/p&gt;
 &lt;h3&gt;Apple&lt;/h3&gt;
-&lt;p&gt;The apple is the pomaceous fruit of the apple tree...&lt;/p&gt;
+&lt;p&gt;The apple is the pomaceous fruit of the apple tree ...&lt;/p&gt;
 &lt;h3&gt;Orange&lt;/h3&gt;
-&lt;p&gt;The orange is a hybrid of ancient cultivated origin...&lt;/p&gt;
+&lt;p&gt;The orange is a hybrid of ancient cultivated origin ...&lt;/p&gt;
 &lt;h3&gt;Banana&lt;/h3&gt;
 &lt;p&gt;Banana is the common name for herbaceous plants ...&lt;/p&gt;
 &lt;h2&gt;Vegetables&lt;/h2&gt;
-&lt;p&gt;A vegetable is an edible plant or part of a plant other than a
-  sweet fruit ...&lt;/p&gt;
+&lt;p&gt;A vegetable is an edible plant or part of a plant other than a sweet fruit ...&lt;/p&gt;
 &lt;h3&gt;Broccoli&lt;/h3&gt;
-&lt;p&gt;Broccoli is a plant of the mustard/cabbage family ... &lt;/p&gt;
+&lt;p&gt;Broccoli is a plant of the mustard/cabbage family ...&lt;/p&gt;
 &lt;h3&gt;Brussels sprouts&lt;/h3&gt;
-&lt;p&gt;The Brussels sprout of the Brassicaceae family, is a Cultivar
-  group of wild cabbage ...&lt;/p&gt;
+&lt;p&gt;The Brussels sprout of the Brassicaceae family, is a Cultivar group 
+   of wild cabbage ...&lt;/p&gt;
 &lt;h3&gt;Green beans&lt;/h3&gt;
 &lt;p&gt;Green beans have been bred for the fleshiness, flavor, or
-  sweetness of their pods...&lt;/p&gt;</pre>
+   sweetness of their pods ...&lt;/p&gt;</code></pre>
       </section>
       <section class="example">
-         <h3>Headings in a 3-column layout</h3>
+         <h3>Headings in a three-column layout</h3>
          
-            <p>In this example, the main content of the page is in the middle column of a 3-column
-                page. The title of the main content matches the title of the page, and is marked as
-                  <code class="el">h1</code>, even though it is not the first thing on the page. The content in
-                the first and third columns is less important, and marked with <code class="el">h2</code>.</p>
+            <p>In this example, the main content of the page is in the middle column of a three-column page. The title of the main content matches the title of the page, and is marked as <code class="language-html">h1</code>, even though it is not the first thing on the page. The content in the first and third columns is less important, and marked with <code class="language-html">h2</code>.</p>
             <div class="note">
-               <p>It is important to note that the example code below is  not intended to prescribe what level of heading should be used for a particular section of the web page. In the example, the layout could be presented with the first heading in each column at the same logical level (such as an h1), or as found in the example, where the logical level reflects its importance in relation to the main content.</p>
+               <p>It is important to note that the example code below is not intended to prescribe what level of heading should be used for a particular section of the web page. In the example, the layout could be presented with the first heading in each column at the same logical level (such as an <code class="language-html">h1</code>), or as found in the example, where the logical level reflects its importance in relation to the main content.</p>
             </div>
          
-         <pre xml:space="preserve">&lt;head&gt;
- &lt;title&gt;Stock Market Up Today&lt;/title&gt;
- &lt;/head&gt;
-
- &lt;body&gt;
+<pre xml:space="preserve"><code class="language-html">&lt;!doctype html&gt;
+&lt;html lang="en"&gt;
+&lt;head&gt;
+  &lt;title&gt;Stock Market Up Today&lt;/title&gt;
+&lt;/head&gt;
+&lt;body&gt;
+  &lt;!-- left nav --&gt;
+  &lt;nav class="left-nav"&gt;
+    &lt;h2&gt;Site Navigation&lt;/h2&gt;
+    &lt;!-- content here --&gt;
+  &lt;/nav&gt;
 
- &lt;!-- left nav --&gt;
- &lt;div class="left-nav"&gt;
- &lt;h2&gt;Site Navigation&lt;/h2&gt;
- &lt;!-- content here --&gt;
- &lt;/div&gt;
+  &lt;!-- main contents --&gt;
+  &lt;main class="main"&gt;
+    &lt;h1&gt;Stock Market up today&lt;/h1&gt;
+    &lt;!-- content here --&gt;
+  &lt;/main&gt;
 
- &lt;!-- main contents --&gt;
- &lt;div class="main"&gt;
- &lt;h1&gt;Stock Market up today&lt;/h1&gt;
- &lt;!-- article text here --&gt;
- &lt;/div&gt;
-
- &lt;!-- right panel --&gt;
- &lt;div class="left-nav"&gt;
- &lt;h2&gt;Related links&lt;/h2&gt;
- &lt;!-- content here --&gt;
- &lt;/div&gt;
- &lt;/body&gt;</pre>
+  &lt;!-- right panel --&gt;
+  &lt;aside class="side-bar"&gt;
+    &lt;h2&gt;Related links&lt;/h2&gt;
+    &lt;!-- content here --&gt;
+  &lt;/aside&gt;
+&lt;/body&gt;
+&lt;/html&gt;</code></pre>
       </section>
-   </section><section id="tests"><h2>Tests</h2>
-      <section class="procedure"><h3>Procedure</h3>
+   </section>
+   <section id="tests">
+      <h2>Tests</h2>
+      <section class="procedure">
+         <h3>Procedure</h3>
          <ol>
             <li>Check that heading markup is used when content is a heading and the heading markup indicates the appropriate heading level for the content.</li>
             <li>Check that heading markup is not used when content is not a heading.</li>
          </ol>
       </section>
-      <section class="results"><h3>Expected Results</h3>
+      <section class="results">
+         <h3>Expected Results</h3>
          <ul>
             <li>Checks #1 and #2 are true.</li>
          </ul>
       </section>
-   </section><section id="related"><h2>Related Techniques</h2><ul>
+   </section>
+   <section id="related">
+      <h2>Related Techniques</h2><ul>
       <li><a href="../html/H69">H69</a></li>
       <li><a href="../general/G141">G141</a></li>
       <li><a href="../failures/F2">F2</a></li>
       <li><a href="../failures/F43">F43</a></li>
-   </ul></section><section id="resources"><h2>Resources</h2>
-      
-         <ul>
-            <li>
-									         <a href="https://www.w3.org/TR/html401/struct/global.html#h-7.5.5">HTML 4.01
-                    H1-H6 elements</a>
-								       </li>
+   </ul>
+   </section>
+   <section id="resources">
+      <h2>Resources</h2>
+      <ul>
+         <li>
+            <a href="https://html.spec.whatwg.org/multipage/sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements">HTML - the <code class="language-html">h1</code>, <code class="language-html">h2</code>, <code class="language-html">h3</code>, <code class="language-html">h4</code>, <code class="language-html">h5</code>, and <code class="language-html">h6</code> elements</a>.
+         </li>
+         <li>
+            <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements"><abbr title="Mozilla Developer Network">MDN</abbr> <code class="language-html">&lt;h1&gt;</code> - <code class="language-html">&lt;h6&gt;</code>: The HTML Section Heading elements</a>.
+            </li>
             <li>
-									         <a href="http://meyerweb.com/eric/thoughts/2004/07/21/pick-a-heading/">Pick a
-                    Heading</a> Eric Meyer</li>
+               <a href="https://www.nomensa.com/blog/how-structure-headings-web-accessibility">Nomensa: How to structure headings for web accessibility</a>.
+            </li>
             <li>
-                  <a href="http://webaim.org/techniques/semanticstructure/">WebAIM: Semantic Structure</a>
-               </li>
-            <li>
-                  <a href="http://accessibility.psu.edu/headingshtml/">Heading Tags</a>
-               </li>
-         </ul>
-      
-   </section></body></html>
+               <a href="https://webaim.org/techniques/semanticstructure/">WebAIM: Semantic Structure: Regions, Headings, and Lists</a>.
+            </li>
+      </ul>
+   </section>
+</body>
+</html>
diff --git a/techniques/html/H43.html b/techniques/html/H43.html
index 1fbcfcc516..6ac16c32d6 100644
--- a/techniques/html/H43.html
+++ b/techniques/html/H43.html
@@ -1,40 +1,45 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using id and headers attributes to associate data cells with header cells in
-          data tables</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Using id and headers attributes to associate data cells with header cells in
-          data tables</h1><section class="meta"><p class="id">ID: H43</p><p class="technology">Technology: html</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
-      <p>HTML and XHTML</p>
-   </section><section id="description"><h2>Description</h2>
-      <p>The objective of this technique is to associate each data cell (in a data table) with
-            the appropriate headers. This technique adds a <code class="att">headers</code> attribute to each
-            data cell (<code class="el">td</code> element). It also adds an <code class="att">id</code> attribute to any
-            cell used as a header for other cells. The <code class="att">headers</code> attribute of a cell
-            contains a list of the <code class="att">id</code> attributes of the associated header cells. If
-            there is more than one <code class="att">id</code>, they are separated by spaces.</p>
-      <p>This technique is used when data cells are associated with more than one row and/or one
-            column header. This allows screen readers to speak the headers associated with each data
-            cell when the relationships are too complex to be identified using the <code class="el">th</code>
-            element alone or the <code class="el">th</code> element with the <code class="att">scope</code> attribute.
-            Using this technique also makes these complex relationships perceivable when the
-            presentation format changes.</p>
-      <p>This technique is not recommended for layout tables since its use implies a
-            relationship between cells that is not meaningful when tables are used for layout.</p>
-   </section><section id="examples"><h2>Examples</h2>
-      <section class="example">
-         <h3>A table with multiple rows of headers</h3>
-         <pre xml:space="preserve">&lt;table&gt;
-   &lt;tr&gt;
-     &lt;th rowspan="2" id="h"&gt;Homework&lt;/th&gt;
-     &lt;th colspan="3" id="e"&gt;Exams&lt;/th&gt;
-     &lt;th colspan="3" id="p"&gt;Projects&lt;/th&gt;
-   &lt;/tr&gt;
-   &lt;tr&gt;
-     &lt;th id="e1" headers="e"&gt;1&lt;/th&gt;
-     &lt;th id="e2" headers="e"&gt;2&lt;/th&gt;
-     &lt;th id="ef" headers="e"&gt;Final&lt;/th&gt;
-     &lt;th id="p1" headers="p"&gt;1&lt;/th&gt;
-     &lt;th id="p2" headers="p"&gt;2&lt;/th&gt;
-     &lt;th id="pf" headers="p"&gt;Final&lt;/th&gt;
-   &lt;/tr&gt;
-   &lt;tr&gt;
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+   <head>
+      <title>Using id and headers attributes to associate data cells with header cells in data tables</title>
+      <link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+   </head>
+   <body>
+      <h1>Using <code class="language-html">id</code> and <code class="language-html">headers</code> attributes to associate data cells with header cells in data tables</h1>
+      <section class="meta">
+         <p class="id">ID: H43</p>
+         <p class="technology">Technology: html</p>
+         <p class="type">Type: Technique</p>
+      </section>
+      <section id="applicability">
+         <h2>When to Use</h2>
+         <p><abbr title="HyperText Markup Language">HTML</abbr></p>
+      </section>
+      <section id="description">
+         <h2>Description</h2>
+         <p>The objective of this technique is to associate each data cell (in a data table) with the appropriate headers. This technique adds a <code class="language-html">headers</code> attribute to each data cell (<code class="language-html">td</code> element). It also adds an <code class="language-html">id</code> attribute to any cell used as a header for other cells. The <code class="language-html">headers</code> attribute of a cell contains a list of the <code class="language-html">id</code> attributes of the associated header cells. If there is more than one <code class="language-html">id</code>, they are separated by spaces.</p>
+         <p>This technique is used when data cells are associated with more than one row and/or one column header. This allows screen readers to speak the headers associated with each data cell when the relationships are too complex to be identified using the <code class="language-html">th</code> element alone or the <code class="language-html">th</code> element with the <code class="language-html">scope</code> attribute. Using this technique also makes these complex relationships perceivable when the presentation format changes.</p>
+         <p>This technique is not recommended for layout tables since its use implies a relationship between cells that is not meaningful when tables are used for layout.</p>
+      </section>
+      <section id="examples">
+         <h2>Examples</h2>
+         <section class="example">
+            <h3>A table with multiple rows of headers</h3>
+<pre xml:space="preserve"><code class="language-html">&lt;table&gt;
+  &lt;tr&gt;
+    &lt;th rowspan="2" id="h"&gt;Homework&lt;/th&gt;
+    &lt;th colspan="3" id="e"&gt;Exams&lt;/th&gt;
+    &lt;th colspan="3" id="p"&gt;Projects&lt;/th&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;th id="e1" headers="e"&gt;1&lt;/th&gt;
+    &lt;th id="e2" headers="e"&gt;2&lt;/th&gt;
+    &lt;th id="ef" headers="e"&gt;Final&lt;/th&gt;
+    &lt;th id="p1" headers="p"&gt;1&lt;/th&gt;
+    &lt;th id="p2" headers="p"&gt;2&lt;/th&gt;
+    &lt;th id="pf" headers="p"&gt;Final&lt;/th&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
     &lt;td headers="h"&gt;15%&lt;/td&gt;
     &lt;td headers="e e1"&gt;15%&lt;/td&gt;
     &lt;td headers="e e2"&gt;15%&lt;/td&gt;
@@ -42,53 +47,50 @@ <h3>A table with multiple rows of headers</h3>
     &lt;td headers="p p1"&gt;10%&lt;/td&gt;
     &lt;td headers="p p2"&gt;10%&lt;/td&gt;
     &lt;td headers="p pf"&gt;15%&lt;/td&gt;
-   &lt;/tr&gt;
-  &lt;/table&gt;</pre>
+  &lt;/tr&gt;
+&lt;/table&gt;</code></pre>
       </section>
-   </section><section id="tests"><h2>Tests</h2>
-      <section class="procedure"><h3>Procedure</h3>
+   </section>
+   <section id="tests">
+      <h2>Tests</h2>
+      <section class="procedure">
+         <h3>Procedure</h3>
          <ol>
-            <li>Check for layout tables: determine whether the content has a relationship with
-                  other content in both its column and its row. If “no," the table is a layout
-                  table. If “yes," the table is a data table.</li>
-            <li>For data tables, check that any cell that is associated with more than one row
-                  and/or one column header contains a <code class="att">headers</code> attribute that lists the
-                    <code class="att">id</code> for all headers associated with that cell.</li>
+            <li>Check for layout tables: determine whether the content has a relationship with other content in both its column and its row. If "no", the table is a layout table. If "yes", the table is a data table.</li>
+            <li>For data tables, check that any cell that is associated with more than one row and/or one column header contains a <code class="language-html">headers</code> attribute that lists the <code class="language-html">id</code> for all headers associated with that cell.</li>
             <li>
-               <p>For data tables where any cell contains an <code class="att">id</code> or
-                  <code class="att">headers</code> attribute, </p>
+               <p>For data tables where any cell contains an <code class="language-html">id</code> or <code class="language-html">headers</code> attribute:</p>
                <ol>
-                  <li>Check that each <code class="att">id</code> listed in the <code class="att">headers</code> attribute
-                      of the data cell matches the <code class="att">id</code> attribute of a cell that is used
-                      as a header element</li>
-                  <li>Check that the <code class="att">headers</code> attribute of a data cell contains the
-                        <code class="att">id</code> attribute of all headers associated with the data cell</li>
-                  <li>Check that all ids are unique (that is, no two elements in the page have the
-                      same id)</li>
+                  <li>Check that each <code class="language-html">id</code> listed in the <code class="language-html">headers</code> attribute of the data cell matches the <code class="language-html">id</code> attribute of a cell that is used as a header element.</li>
+                  <li>Check that the <code class="language-html">headers</code> attribute of a data cell contains the <code class="language-html">id</code> attribute of all headers associated with the data cell.</li>
+                  <li>Check that all <code class="language-html">id</code>s are unique (that is, no two elements in the page have the same <code class="language-html">id</code>).</li>
                </ol>
             </li>
          </ol>
       </section>
-      <section class="results"><h3>Expected Results</h3>
+      <section class="results">
+         <h3>Expected Results</h3>
          <ul>
-            <li>If table is a layout table, no cells contain <code class="att">headers</code> or
-                  <code class="att">id</code> attributes</li>
-            <li>If table is a data table and any cell contains an <code class="att">id</code> attribute,
-                  checks #3.a, #3.b, and #3.c are true.</li>
-            <li>If table is a data table and any cell is associated with more than one row and/or
-                  one column header, check #2 is true.</li>
+            <li>If table is a layout table, no cells contain <code class="language-html">headers</code> or <code class="language-html">id</code> attributes.</li>
+            <li>If table is a data table and any cell contains an <code class="language-html">id</code> attribute, checks #3.1, #3.2, and #3.3 are true.</li>
+            <li>If table is a data table and any cell is associated with more than one row and/or one column header, check #2 is true.</li>
          </ul>
       </section>
-   </section><section id="related"><h2>Related Techniques</h2><ul>
-      <li><a href="../html/H39">H39</a></li>
-      <li><a href="../html/H51">H51</a></li>
-      <li><a href="../html/H63">H63</a></li>
-      <li><a href="../html/H73">H73</a></li>
-   </ul></section><section id="resources"><h2>Resources</h2>
-      
-         <ul>
-            <li>HTML 4.01 <a href="https://www.w3.org/TR/html4/struct/tables.html#h-11.4.1">header information with data cells</a>
-								       </li>
-         </ul>
-      
-   </section></body></html>
\ No newline at end of file
+   </section>
+   <section id="related">
+      <h2>Related Techniques</h2>
+      <ul>
+         <li><a href="../html/H39">H39</a></li>
+         <li><a href="../html/H51">H51</a></li>
+         <li><a href="../html/H63">H63</a></li>
+      </ul>
+   </section>
+   <section id="resources">
+      <h2>Resources</h2>
+      <ul>
+         <li><a href="https://html.spec.whatwg.org/multipage/tables.html#attributes-common-to-td-and-th-elements">HTML - attributes common to <code class="language-html">td</code> and <code class="language-html">th</code> elements</a>.
+         </li>
+      </ul>
+   </section>
+</body>
+</html>
\ No newline at end of file
diff --git a/techniques/html/H44.html b/techniques/html/H44.html
index e31d25455e..d6f3cca1ef 100644
--- a/techniques/html/H44.html
+++ b/techniques/html/H44.html
@@ -1,157 +1,155 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using label elements to associate text labels with form controls</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Using label elements to associate text labels with form controls</h1><section class="meta"><p class="id">ID: H44</p><p class="technology">Technology: html</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
-      <p>HTML and XHTML controls that use external labels</p>
-   </section><section id="description"><h2>Description</h2>
-      <p>The objective of this technique is to use the <code class="el">label</code> element to explicitly
-            associate a form control with a label. A <code class="el">label</code> is attached to a specific
-            form control through the use of the <code class="att">for</code> attribute. The value of the
-              <code class="att">for</code> attribute must be the same as the value of the <code class="att">id</code>
-            attribute of the form control. </p>
-      <p>The <code class="att">id</code> attribute may have the same value as the <code class="att">name</code>
-            attribute, but both must be provided, and the <code class="att">id</code> must be unique in the Web
-            page.</p>
-      <p>This technique is sufficient for Success Criteria 1.1.1, 1.3.1 and 4.1.2 whether or not the <code class="el">label</code> element is visible. That is, it may be hidden using CSS. However, for Success Criterion 3.3.2, the <code class="el">label</code> element must be visible since it provides assistance to all users who need help understanding the purpose of the field. </p>
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+   <head>
+      <title>Using label elements to associate text labels with form controls</title>
+      <link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+   </head>
+   <body>
+      <h1>Using label elements to associate text labels with form controls</h1>
+      <section class="meta">
+         <p class="id">ID: H44</p>
+         <p class="technology">Technology: html</p>
+         <p class="type">Type: Technique</p>
+      </section>
+      <section id="applicability">
+         <h2>When to Use</h2>
+         <p><abbr title="HyperText Markup Language">HTML</abbr> controls that use external labels</p>
+      </section>
+      <section id="description">
+         <h2>Description</h2>
+         <p>The objective of this technique is to use the <code class="language-html">label</code> element to explicitly associate a form control with a label. A <code class="language-html">label</code> is attached to a specific form control through the use of the <code class="language-html">for</code> attribute. The value of the <code class="language-html">for</code> attribute must be the same as the value of the <code class="language-html">id</code> attribute of the form control.</p>
+         <p>The <code class="language-html">id</code> attribute may have the same value as the <code class="language-html">name</code> attribute, but both must be provided, and the <code class="language-html">id</code> must be unique in the Web page.</p>
+         <p>This technique is sufficient for Success Criteria <a href="../../Understanding/non-text-content.html">1.1.1 (Non-Text Content)</a>, <a href="../../Understanding/info-and-relationships.html">1.3.1 (Info and Relationships)</a> and <a href="../../Understanding/name-role-value.html">4.1.2 (Name, Role, Value)</a> whether or not the <code class="language-html">label</code> element is visible. That is, it may be hidden using <abbr title="Cascading Style Sheets">CSS</abbr>. However, for Success Criterion <a href="../../Understanding/labels-or-instructions.html">3.3.2 (Labels or Instructions)</a>, the <code class="language-html">label</code> element must be visible since it provides assistance to all users who need help understanding the purpose of the field. </p>
       <p>An additional benefit of this technique is a larger clickable area for the control, since clicking on the label or the control will activate the control. This can be helpful for users with impaired motor control.</p>
-      <p>Note that the <code class="el">label</code> is positioned after <code class="el">input</code> elements of
-              
-							<code class="att">type</code>="checkbox" and 
-							<code class="att">type</code>="radio".</p>
+      <p>Note that the <code class="language-html">label</code> is positioned after <code class="language-html">input</code> elements of <code class="language-html">type="checkbox"</code> and <code class="language-html">type="radio"</code>.</p>
       <div class="note">
-         <p>Elements that use explicitly associated labels are: </p>
+         <p>Elements that use explicitly associated labels are:</p>
          <ul>
+            <li>inputs for text entry:
+               <ul>
+                  <li><code class="language-html">input type="date"</code></li>
+                  <li><code class="language-html">input type="datetime-local"</code></li>
+                  <li><code class="language-html">input type="email"</code></li>
+                  <li><code class="language-html">input type="month"</code></li>
+                  <li><code class="language-html">input type="number"</code></li>
+                  <li><code class="language-html">input type="password"</code></li>
+                  <li><code class="language-html">input type="search"</code></li>
+                  <li><code class="language-html">input type="tel"</code></li>
+                  <li><code class="language-html">input type="text"</code></li>
+                  <li><code class="language-html">input type="time"</code></li>
+                  <li><code class="language-html">input type="url"</code></li>
+                  <li><code class="language-html">input type="week"</code></li>
+               </ul>   
+            </li>
             <li>
-									         
-										<code class="el">input</code>
-										<code class="att">type</code>="text"
-								       </li>
+               <code class="language-html">input type="checkbox"</code>
+            </li>
             <li>
-									         
-										<code class="el">input</code>
-										<code class="att">type</code>="checkbox"
-								       </li>
+               <code class="language-html">input type="color"</code>
+            </li>
             <li>
-									         
-										<code class="el">input</code>
-										<code class="att">type</code>="radio"
-								       </li>
+               <code class="language-html">input type="file"</code>
+            </li>
             <li>
-									         
-										<code class="el">input</code>
-										<code class="att">type</code>="file"
-								       </li>
+               <code class="language-html">input type="radio"</code>
+            </li>
             <li>
-									         
-										<code class="el">input</code>
-										<code class="att">type</code>="password"
-								       </li>
+               <code class="language-html">input type="range"</code>
+            </li>
             <li>
-									         <code class="el">textarea</code>
-								       </li>
+               <code class="language-html">select</code>
+            </li>
             <li>
-									         <code class="el">select</code>
-								       </li>
+               <code class="language-html">textarea</code>
+				</li>
          </ul>
-         <p>The <code class="att">label</code> element is <strong>not</strong> used for the following
-              because labels for these elements are provided via the value attribute (for Submit and
-              Reset buttons), the <code class="att">alt</code> attribute (for image buttons), or element content itself
-              (button). </p>
+         <p>The <code class="language-html">label</code> element is <strong>not</strong> used for the following elements:</p>
          <ul>
-            <li>Submit and Reset buttons (
-										<code class="el">input</code>
-										<code class="att">type</code>="submit" or 
-										<code class="el">input</code>
-										<code class="att">type</code>="reset")</li>
-            <li>Image buttons (
-										<code class="el">input</code>
-										<code class="att">type</code>="image")</li>
-            <li>Hidden input fields (
-										<code class="el">input</code>
-										<code class="att">type</code>="hidden")</li>
-            <li>Script buttons (<code class="el">button</code> elements or &lt;<code class="el">input</code>
-										<code class="att">type</code>="button"&gt;)</li>
+            <li><code class="language-html">button</code> (the label is provided by the content)</li>
+            <li><code class="language-html">input type="button"</code>  (the label is provided by the content)</li>
+            <li><code class="language-html">input type="hidden"</code></li>
+            <li><code class="language-html">input type="image"</code> (the label is provided by the <code class="language-html">alt</code> attribute)</li>
+            <li><code class="language-html">input type="reset"</code> (the label is label provided by the <code class="language-html">value</code> attribute)</li>
+            <li><code class="language-html">input type="submit"</code> (the label is label provided by the <code class="language-html">value</code> attribute)</li>
          </ul>
       </div>
-   </section><section id="examples"><h2>Examples</h2>
+   </section>
+   <section id="examples">
+      <h2>Examples</h2>
       <section class="example">
          <h3>A text input field</h3>
+         <p>The text field in this example has the explicit label of "First name:". The <code class="language-html">label</code> element's <code class="language-html">for</code> attribute matches the <code class="language-html">id</code> attribute of the <code class="language-html">input</code> element.</p>
          
-            <p>The text field in the example below has the explicit label of "First name:". The
-                  <code class="el">label</code> element's <code class="att">for</code> attribute matches the
-                <code class="att">id</code> attribute of the <code class="el">input</code> element. </p>
-         
-         <pre xml:space="preserve">&lt;label for="firstname"&gt;First name:&lt;/label&gt; 
-&lt;input type="text" name="firstname" id="firstname" /&gt;</pre>
+<pre xml:space="preserve"><code class="language-html">&lt;label for="firstname"&gt;First name:&lt;/label&gt; 
+&lt;input id="firstname" name="firstname" type="text"&gt;</code></pre>
       </section>
       <section class="example">
          <h3>A checkbox</h3>
-         <pre xml:space="preserve">&lt;input type="checkbox" id="markuplang" name="computerskills" checked="checked"&gt;
-&lt;label for="markuplang"&gt;HTML&lt;/label&gt;</pre>
+<pre xml:space="preserve"><code class="language-html">&lt;input checked id="markuplang" name="computerskills" type="checkbox"&gt;
+&lt;label for="markuplang"&gt;HTML&lt;/label&gt;</code></pre>
       </section>
       <section class="example">
          <h3>A group of radio buttons</h3>
+         <p>A small, related group of radio buttons with a clear description and labels for each individual element.</p>
          
-            <p>A small, related group of radio buttons with a clear description and labels for
-                each individual element.</p>
-            <div class="note">
-               <p>To provide clear associations and instructions for a large set of related radio
-                  buttons <a href="#H71"></a>, should be considered.</p>
-            </div>
-         
-         <pre xml:space="preserve"> &lt;h1&gt;Donut Selection&lt;/h1&gt;
-
-&lt;p&gt;Choose the type of donut(s) you would like then select 
-   the "purchase donuts" button.&lt;/p&gt;
-
-&lt;form action="http://example.com/donut" method="post"&gt;
-&lt;p&gt;
-  &lt;input type="radio" name="flavor" id="choc" value="chocolate" /&gt;
-    &lt;label for="choc"&gt;Chocolate&lt;/label&gt;&lt;br/&gt;
-  &lt;input type="radio" name="flavor" id="cream" value="cream"/&gt;
-    &lt;label for="cream"&gt;Cream Filled&lt;/label&gt;&lt;br/&gt;
-  &lt;input type="radio" name="flavor" id="honey" value="honey"/&gt;
-    &lt;label for="honey"&gt;Honey Glazed&lt;/label&gt;&lt;br/&gt;
-  &lt;input type="submit" value="Purchase Donuts"/&gt;
-&lt;/p&gt;
-&lt;/form&gt;</pre>
+<pre xml:space="preserve"><code class="language-html">&lt;h1&gt;Doughnut Selection&lt;/h1&gt;
+&lt;form action="/buy-doughnuts" method="post"&gt;
+  &lt;fieldset&gt;
+    &lt;legend&gt;Pick the doughnut you would like&lt;/legend&gt;
+    &lt;input id="dn-choc" name="flavor" type="radio" value="chocolate"&gt;
+    &lt;label for="dn-choc"&gt;Chocolate&lt;/label&gt;
+    &lt;input id="dn-cream" name="flavor" type="radio" value="cream"&gt;
+    &lt;label for="dn-cream"&gt;Cream Filled&lt;/label&gt;
+    &lt;input id="dn-raspberry" name="flavor" type="radio" value="raspberry"&gt;
+    &lt;label for="dn-raspberry"&gt;Raspberry Filled&lt;/label&gt;
+  &lt;/fieldset&gt;
+  &lt;input type="submit" value="Purchase Your Doughnut"&gt;
+&lt;/form&gt;</code></pre>
       </section>
-   </section><section id="tests"><h2>Tests</h2>
-      <section class="procedure"><h3>Procedure</h3>
-         <p>For all <code class="el">input</code> elements of type text, file or
-                password, for all <code class="el">textareas</code> and for all
-              <code class="el">select</code> elements in the Web page: </p>
+   </section>
+   <section id="tests">
+      <h2>Tests</h2>
+      <section class="procedure">
+         <h3>Procedure</h3>
+         <p>For all <code class="language-html">input</code> elements of type <code class="language-html">text</code>, <code class="language-html">file</code> or <code class="language-html">password</code>, for all <code class="language-html">textarea</code> elements, and for all <code class="language-html">select</code> elements in the Web page:</p>
          <ol>
-            <li>Check that there is a <code class="el">label</code> element that identifies the purpose of
-                	the control before the <code class="el">input</code>, <code class="el">textarea</code>, or <code class="el">select</code> element</li>
-            <li>Check that the <code class="att">for</code> attribute of the <code class="el">label</code> element
-                	matches the id of the <code class="el">input</code>, <code class="el">textarea</code>, or <code class="el">select</code> element</li>
-            <li>Check that the <code class="el">label</code> element is visible. </li>
+            <li>Check that there is a <code class="language-html">label</code> element that identifies the purpose of the control before the <code class="language-html">input</code>, <code class="language-html">textarea</code>, or <code class="language-html">select</code> element</li>
+            <li>Check that the <code class="language-html">for</code> attribute of the <code class="language-html">label</code> element matches the <code class="language-html">id</code> of the <code class="language-html">input</code>, <code class="language-html">textarea</code>, or <code class="language-html">select</code> element.</li>
+            <li>Check that the <code class="language-html">label</code> element is visible.</li>
          </ol>
-         <p>For all <code class="el">input</code> elements of type checkbox or radio in the Web page:: </p>
+         <p>For all <code class="language-html">input</code> elements of type checkbox or radio in the Web page:</p>
          <ol>
-            <li>Check that there is a <code class="el">label</code> element that identifies the purpose of
-                  the control after the <code class="el">input</code> element</li>
-            <li>Check that the <code class="att">for</code> attribute of the <code class="el">label</code> element
-                  matches the <code class="att">id</code> of the <code class="el">input</code> element</li>
-            <li>Check that the <code class="el">label</code> element is visible. </li>
+            <li>Check that there is a <code class="language-html">label</code> element that identifies the purpose of the control after the <code class="language-html">input</code> element.</li>
+            <li>Check that the <code class="language-html">for</code> attribute of the <code class="language-html">label</code> element matches the <code class="language-html">id</code> of the <code class="language-html">input</code> element.</li>
+            <li>Check that the <code class="language-html">label</code> element is visible.</li>
          </ol>
       </section>
-      <section class="results"><h3>Expected Results</h3>
+      <section class="results">
+         <h3>Expected Results</h3>
          <ul>
-            <li>Checks #1 and #2 are true. For Success Criterion 3.3.2, Check #3 is also true. </li>
+            <li>Checks #1 and #2 are true.</li>
+            <li>For Success Criterion 3.3.2 (Labels or Instructions), check #3 is also true.</li>
          </ul>
       </section>
-   </section><section id="related"><h2>Related Techniques</h2><ul>
-      <li><a href="../general/G167">G167</a></li>
-      <li><a href="../html/H65">H65</a></li>
-      <li><a href="../html/H71">H71</a></li>
-   </ul></section><section id="resources"><h2>Resources</h2>
-      
-         <ul>
-            <li>
-									         <a href="https://www.w3.org/TR/html401/interact/forms.html#h-17.9">HTML 4.01 form labels</a>
-								       </li>
-            <li>
-									         <a href="http://usability.com.au/2008/09/accessible-forms-using-wcag-2-0/">Accessible Forms using WCAG 2.0</a>
-								       </li>
-         </ul>
-      
-   </section></body></html>
\ No newline at end of file
+   </section>
+   <section id="related">
+      <h2>Related Techniques</h2>
+      <ul>
+         <li><a href="../general/G167">G167</a></li>
+         <li><a href="../html/H65">H65</a></li>
+         <li><a href="../html/H71">H71</a></li>
+      </ul>
+   </section>
+   <section id="resources">
+      <h2>Resources</h2>
+      <ul>
+         <li>
+            <a href="https://html.spec.whatwg.org/multipage/input.html#the-input-element">HTML - the <code class="language-html">input</code> element</a>.
+         </li>
+         <li>
+            <a href="https://html.spec.whatwg.org/multipage/forms.html#the-label-element">HTML - the <code class="language-html">label</code> element</a>.
+         </li>
+      </ul>
+   </section>
+</body>
+</html>
\ No newline at end of file
diff --git a/techniques/html/H45.html b/techniques/html/H45.html
index d612a1b671..5ba88c0615 100644
--- a/techniques/html/H45.html
+++ b/techniques/html/H45.html
@@ -1,5 +1,13 @@
+---
+obsoleteMessage: |
+  The <code>longdesc</code> attribute is
+  <a href="https://html.spec.whatwg.org/multipage/obsolete.html#attr-img-longdesc">obsolete in the HTML Living Standard</a>,
+  and was never widely supported.
+  Use an <code>a</code> element or an image map to link to the description.
+obsoleteSince: 20
+---
 <!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using longdesc</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Using longdesc</h1><section class="meta"><p class="id">ID: H45</p><p class="technology">Technology: html</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
-      <p>HTML and XHTML documents that include images that cannot be
+      <p>HTML documents that include images that cannot be
           described in a short text alternative. </p>
    </section><section id="description"><h2>Description</h2>
       <p> The objective of this technique is to provide information in a file designated by the
@@ -43,11 +51,8 @@ <h3>Using longdesc to refer to a long description within the same page.</h3>
       
          <ul>
             <li>
-                  <a href="https://www.w3.org/TR/html-longdesc/">HTML5 Image Description Extension</a>
-               </li>
-            <li>
-                  <a href="http://www.d.umn.edu/itss/training/online/moodle_downloads/accessibility_104/longdesc_tools.html">University of Minnesota Duluth listing of londesc Tools</a>
+                  <a href="https://www.d.umn.edu/itss/training/online/moodle_downloads/accessibility_104/longdesc_tools.html">University of Minnesota Duluth listing of longdesc Tools</a>
                </li>
          </ul>
       
-   </section></body></html>
\ No newline at end of file
+   </section></body></html>
diff --git a/techniques/html/H46.html b/techniques/html/H46.html
index cd88878625..c1fdc86f0b 100644
--- a/techniques/html/H46.html
+++ b/techniques/html/H46.html
@@ -1,3 +1,10 @@
+---
+obsoleteMessage: |
+  <code>noembed</code> is
+  <a href="https://html.spec.whatwg.org/multipage/obsolete.html#noembed">obsolete in the HTML Living Standard</a>.
+  Use <code>object</code> instead when fallback is necessary.
+obsoleteSince: 20
+---
 <!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using noembed with embed
 				</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Using <code class="el">noembed</code> with <code class="el">embed</code>
 				</h1><section class="meta"><p class="id">ID: H46</p><p class="technology">Technology: html</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
@@ -45,4 +52,4 @@ <h3>
             <li>#1 is true or #2 is true </li>
          </ul>
       </section>
-   </section><section id="related"><h2>Related Techniques</h2></section><section id="resources"><h2>Resources</h2></section></body></html>
\ No newline at end of file
+   </section><section id="related"><h2>Related Techniques</h2></section><section id="resources"><h2>Resources</h2></section></body></html>
diff --git a/techniques/html/H48.html b/techniques/html/H48.html
index 9c4c48534d..399399ceb4 100644
--- a/techniques/html/H48.html
+++ b/techniques/html/H48.html
@@ -1,138 +1,132 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using ol, ul and dl for lists or groups of links</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Using ol, ul and dl for lists or groups of links</h1><section class="meta"><p class="id">ID: H48</p><p class="technology">Technology: html</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
-      <p>HTML, XHTML</p>
-   </section><section id="description"><h2>Description</h2>
-      <p>The objective of this technique is to create lists of related items using list elements
-            appropriate for their purposes. The <code class="el">ol</code> element is used when the list is
-            ordered and the <code class="el">ul</code> element is used when the list is unordered. Definition
-            lists (<code class="el">dl</code>) are used to group terms with their definitions. Although the use
-            of this markup can make lists more readable, not all lists need markup. For instance,
-            sentences that contain comma-separated lists may not need list markup.</p>
-      <p>When markup is used that visually formats items as a list but does not indicate the
-            list relationship, users may have difficulty in navigating the information. An example
-            of such visual formatting is including asterisks in the content at the beginning of each
-            list item and using &lt;<code class="el">br</code>&gt; elements to separate the list items.</p>
-      <p>Some assistive technologies allow users to navigate from list to list or item to item.
-            Style sheets can be used to change the presentation of the lists while preserving their
-            integrity.</p>
-      <p>The list structure (<code class="el">ul</code>/<code class="el">ol</code>) is also useful to group hyperlinks. When this is done, it helps screen reader users to navigate from the first item in a list to the end of the list or jump to the next list. This helps them to bypass groups of links if they choose to.</p>
-   </section><section id="examples"><h2>Examples</h2>
-      <section class="example">
-         <h3>A list showing steps in a sequence </h3>
-         
-            <p>This example uses an ordered list to show the sequence of steps in a process.</p>
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+   <head>
+      <title>Using ol, ul and dl for lists or groups of links</title>
+      <link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+   </head>
+   <body>
+      <h1>Using <code class="language-html">ol</code>, <code class="language-html">ul</code> and <code class="language-html">dl</code> for lists or groups of links</h1>
+      <section class="meta">
+         <p class="id">ID: H48</p>
+         <p class="technology">Technology: html</p>
+         <p class="type">Type: Technique</p>
+      </section>
+      <section id="applicability">
+         <h2>When to Use</h2>
+         <p><abbr title="HyperText Markup Language">HTML</abbr></p>
+      </section>
+      <section id="description">
+         <h2>Description</h2>
+         <p>The objective of this technique is to create lists of related items using list elements appropriate for their purposes. The <code class="language-html">ol</code> element is used when the list is ordered and the <code class="language-html">ul</code> element is used when the list is unordered. Description lists (<code class="language-html">dl</code>) are used to group name-value pairs of information, for example: terms and definitions or questions and answers. Although the use of this markup can make lists more readable, not all lists need markup. For instance, sentences that contain comma-separated lists may not need list markup.</p>
+         <p>When markup is used that visually formats items as a list but does not indicate the list relationship, users may have difficulty in navigating the information. An example of such visual formatting is including asterisks in the content at the beginning of each list item and using <code class="language-html">br</code> elements to separate the list items.</p>
+         <p>Some assistive technologies allow users to navigate from list to list or item to item. Style sheets can be used to change the presentation of the lists while preserving their integrity.</p>
+         <p>The list structure, commonly unordered lists, is also useful to group hyperlinks. When this is done, it helps screen reader users to navigate from the first item in a list to the end of the list or jump to the next list. This helps them to bypass groups of links if they choose to.</p>
+         </section>
+         <section id="examples">
+            <h2>Examples</h2>
+            <section class="example">
+               <h3>A list showing steps in a sequence</h3>
+               <p>This example uses an ordered list to show the sequence of steps in a process.</p>
          
-         <pre xml:space="preserve"> &lt;ol&gt;
-  &lt;li&gt;Mix eggs and milk in a bowl.&lt;/li&gt;
-  &lt;li&gt;Add salt and pepper.&lt;/li&gt;
-&lt;/ol&gt;</pre>
+<pre xml:space="preserve"><code class="language-html">&lt;ol&gt;
+  &lt;li&gt;Mix flour, eggs, milk, and seasoning in a bowl.&lt;/li&gt;
+  &lt;li&gt;Whisk until the batter is smooth.&lt;/li&gt;
+  &lt;li&gt;Rest the batter for at least 30 minutes before cooking.&lt;/li&gt;
+&lt;/ol&gt;</code></pre>
       </section>
       <section class="example">
          <h3>A grocery list </h3>
+         <p>This example shows an unordered list of items to buy at the store.</p>
          
-            <p>This example shows an unordered list of items to buy at the store.</p>
-         
-         <pre xml:space="preserve">&lt;ul&gt;
+<pre xml:space="preserve"><code class="language-html">&lt;ul&gt;
   &lt;li&gt;Milk&lt;/li&gt;
   &lt;li&gt;Eggs&lt;/li&gt;
   &lt;li&gt;Butter&lt;/li&gt;
-&lt;/ul&gt;</pre>
+&lt;/ul&gt;</code></pre>
       </section>
       <section class="example">
-         <h3>A word and its definition </h3>
-         
-            <p>This example uses a definition list to group a definition with the term that is
-                being defined.</p>
-         
-         <pre xml:space="preserve">&lt;dl&gt;
+         <h3>A word and its definition</h3>
+         <p>This example uses a description list to group a definition with the term that is being defined.</p>
+
+<pre xml:space="preserve"><code class="language-html">&lt;dl&gt;
   &lt;dt&gt;blink&lt;/dt&gt;
-  &lt;dd&gt;turn on and off between .5 and 3 times per second
-  &lt;/dd&gt;
-&lt;/dl&gt; </pre>
+  &lt;dd&gt;turn on and off between 0.5 and 3 times per second&lt;/dd&gt;
+&lt;/dl&gt;</code></pre>
       </section>
       <section class="example">
-         <h3>Contact information using a definition list</h3>
-         
-            <p>This example uses a defintion list to mark up pairs of related items. The pairs themselves are a logically related list. Since browsers lack wide support for CSS styling on definition list elements, span elements have been included in the markup for styling purposes only, and are not required: </p>
-            <pre xml:space="preserve">&lt;dl&gt;
-&lt;dt&gt;&lt;span&gt;name:&lt;/span&gt;&lt;/dt&gt;&lt;dd&gt;&lt;span&gt;John Doe&lt;/span&gt;&lt;/dd&gt;
-&lt;dt&gt;&lt;span&gt;tel:&lt;/span&gt;&lt;/dt&gt;&lt;dd&gt;&lt;span&gt;01-2345678&lt;/span&gt;&lt;/dd&gt;
-&lt;dt&gt;&lt;span&gt;fax:&lt;/span&gt;&lt;/dt&gt;&lt;dd&gt;&lt;span&gt;02-3456789&lt;/span&gt;&lt;/dd&gt;
-&lt;dt&gt;&lt;span&gt;email:&lt;/span&gt;&lt;/dt&gt;&lt;dd&gt;&lt;span&gt;johndoe@someemail.com&lt;/span&gt;&lt;/dd&gt;
-&lt;/dl&gt;
-</pre>
-            <p>The following CSS styling can be used to format each paired item in the list on its own line, as well as giving a table-like layout: </p>
-            <pre xml:space="preserve">dt, dd{float: left;margin: 0;padding: 0;}
-dt{clear:both;font-weight: bold}
-dt span{display: inline-block; width: 70px;}
-dd span{display: inline-block; margin-right: 5px;}
-</pre>
-            <p class="working-example">This is shown in the <a href="../../working-examples/definition-list-contact-info/">working example of Contact information using a definition list</a>
-            </p>
-         
+         <h3>Contact information using a description list</h3>
+         <p>This example uses a description list to mark up pairs of related items. The pairs themselves are a logically related list.</p>
+
+<pre xml:space="preserve"><code class="language-html">&lt;dl&gt;
+  &lt;div&gt;
+    &lt;dt&gt;Name:&lt;/dt&gt;
+    &lt;dd&gt;Taisha Silveri&lt;/dd&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;dt&gt;Tel:&lt;/dt&gt;
+    &lt;dd&gt;503-123-4567&lt;/dd&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;dt&gt;Email:&lt;/dt&gt;
+    &lt;dd&gt;taisha-silveri@example.com&lt;/dd&gt;
+  &lt;/div&gt;
+&lt;/dl&gt;</code></pre>
+
+<p class="working-example">This is shown in the <a href="../../working-examples/description-list-contact-info/">working example of contact information using a description list</a>.</p>
       </section>
       <section class="example">
          <h3>Using lists to group links</h3>
+         <p>In this example the links are grouped using the <code class="language-html">ul</code> and <code class="language-html">li</code> elements.</p>
          
-            <p>In this example the links are grouped using the <code class="el">ul</code> and <code class="el">li</code>
-        				elements.</p>
-         
-         <pre xml:space="preserve">&lt;a name="categories" id="categories"&gt;&lt;/a&gt;&lt;h2&gt;Product Categories&lt;/h2&gt;
-&lt;ul class="navigation"&gt;
+<pre xml:space="preserve"><code class="language-html">&lt;h2 id="product-categories"&gt;Product Categories&lt;/h2&gt;
+&lt;nav aria-labelledby="product-categories"&gt;
+  &lt;ul&gt;
     &lt;li&gt;&lt;a href="kitchen.html"&gt;Kitchen&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a href="bedbath.html"&gt;Bed &amp;amp; Bath&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a href="dining.html"&gt;Fine Dining&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a href="lighting.html"&gt;Lighting&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a href="storage.html"&gt;Storage&lt;/a&gt;&lt;li&gt;
-&lt;/ul&gt; </pre>
-         
-            <p>CSS can be used to style the list elements, so this technique can be used with a
-        				variety of visual appearances.</p>
-            <p>Here is a style that removes the list bullets and the left padding that creates the
-        				indent and flows the individual list elements horizontally.</p>
-         
-         <pre xml:space="preserve">ul.navigation {
-  list-style: none; 
-  padding: 0;
-}
-ul.navigation li {
-  display: inline;
-}</pre>
-         
-            <p>This style removes the list bullets and the left padding and displays the items in
-        				a floating block.</p>
-         
-         <pre xml:space="preserve">ul.navigation {
- list-style: none; 
- padding: 0;
-}
-ul.navigation li {
- display: block; 
- float: left;
-}</pre>
+  &lt;/ul&gt;
+&lt;/nav&gt;</code></pre>
       </section>
-   </section><section id="tests"><h2>Tests</h2>
-      <section class="procedure"><h3>Procedure</h3>
+   </section>
+   <section id="tests">
+      <h2>Tests</h2>
+      <section class="procedure">
+         <h3>Procedure</h3>
          <ol>
             <li>Check that content that has the visual appearance of a list (with or without bullets) is marked as an unordered list.</li>
             <li>Check that content that has the visual appearance of a numbered list is marked as an ordered list.</li>
-            <li>Check that content is marked as a definition list when terms and their definitions are presented in the form of a list.</li>
+            <li>Check that content is marked as a description list when groups of name-value pairs, for example: terms and definitions or questions and answers, are presented in the form of a list.</li>
          </ol>
       </section>
-      <section class="results"><h3>Expected Results</h3>
+      <section class="results">
+         <h3>Expected Results</h3>
          <ul>
             <li>All the checks above are true.</li>
          </ul>
       </section>
-   </section><section id="related"><h2>Related Techniques</h2><ul>
-      <li><a href="../html/H40">H40</a></li>
-      
-   </ul></section><section id="resources"><h2>Resources</h2>
-      
+   </section>
+   <section id="related">
+      <h2>Related Techniques</h2>
+      <ul>
+         <li><a href="../html/H40">H40</a></li>
+      </ul>
+   </section>
+   <section id="resources">
+      <h2>Resources</h2>
          <ul>
-            <li>HTML 4.01 <a href="https://www.w3.org/TR/html4/struct/lists.html#h-10.2">Unordered lists (UL), ordered lists (OL), and list items (LI)</a>
-								       </li>
-            <li>HTML 4.01 <a href="https://www.w3.org/TR/html4/struct/lists.html#h-10.3">Definition lists: the DL, DT, and DD elements</a>
-								       </li>
+            <li>
+               <a href="https://html.spec.whatwg.org/multipage/grouping-content.html#the-dl-element">HTML - the <code class="language-html">dl</code> element</a>.
+            </li>
+            <li>
+               <a href="https://html.spec.whatwg.org/multipage/grouping-content.html#the-ol-element">HTML - the <code class="language-html">ol</code> element</a>.
+            </li>
+            <li>
+               <a href="https://html.spec.whatwg.org/multipage/grouping-content.html#the-ul-element">HTML - the <code class="language-html">ul</code> element</a>.
+            </li>
          </ul>
       
-   </section></body></html>
\ No newline at end of file
+   </section>
+</body>
+</html>
\ No newline at end of file
diff --git a/techniques/html/H49.html b/techniques/html/H49.html
index 8a8d0f975c..2395573cc4 100644
--- a/techniques/html/H49.html
+++ b/techniques/html/H49.html
@@ -1,6 +1,22 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using semantic markup to mark emphasized or special text</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Using semantic markup to mark emphasized or special text</h1><section class="meta"><p class="id">ID: H49</p><p class="technology">Technology: html</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
-      <p>HTML and XHTML</p>
-   </section><section id="description"><h2>Description</h2>
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+   <head>
+      <title>Using semantic markup to mark emphasized or special text</title>
+      <link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+   </head>
+   <body>
+      <h1>Using semantic markup to mark emphasized or special text</h1>
+      <section class="meta">
+         <p class="id">ID: H49</p>
+         <p class="technology">Technology: html</p>
+         <p class="type">Type: Technique</p>
+      </section>
+      <section id="applicability">
+         <h2>When to Use</h2>
+      <p><abbr title="HyperText Markup Language">HTML</abbr></p>
+   </section>
+   <section id="description">
+      <h2>Description</h2>
       <p>The objective of this technique is to demonstrate how semantic markup can be used to
             mark emphasized or special text so that it can be programmatically determined. Using
             semantic markup to mark emphasized or special text also provides structure to the
@@ -10,89 +26,89 @@
       <p>Most user agents will visually distinguish text that has been identified using semantic
             markup. Some assistive technologies provide a mechanism for determining the
             characteristics of content that has been created using proper semantic markup.</p>
-   </section><section id="examples"><h2>Examples</h2>
-      <p class="working-example">See <a href="../../working-examples/semantic-text/">rendered examples of semantic
-              text</a>.</p>
+   </section>
+   <section id="examples">
+      <h2>Examples</h2>
+      <p class="working-example">See <a href="../../working-examples/semantic-text/">rendered examples of semantic text</a>.</p>
       <section class="example">
+         <h3>Using the <code class="language-html">em</code> and <code class="language-html">strong</code> elements
+            to emphasize text</h3>
          
-            <p>This example shows how to use the <code class="el">em</code> and <code class="el">strong</code> elements
-                to emphasize text. The <code class="el">em</code> and <code class="el">strong</code> elements were
+            <p>The <code class="language-html">em</code> and <code class="language-html">strong</code> elements are
                 designed to indicate structural emphasis that may be rendered in a variety of ways
                 (font style changes, speech inflection changes, etc.).</p>
          
-         <pre xml:space="preserve"> ...What she &lt;em&gt;really&lt;/em&gt; meant to say was, &amp;quot;This is not ok, 
- it is &lt;strong&gt;excellent&lt;/strong&gt;&amp;quot;!... </pre>
+         <pre xml:space="preserve"><code class="language-html"> ... What she &lt;em&gt;really&lt;/em&gt; meant to say was, &amp;quot;This is not OK, 
+ it is &lt;strong&gt;excellent&lt;/strong&gt;&amp;quot;! ...</code></pre>
       </section>
       <section class="example">
+         <h3>Using the <code class="language-html">blockquote</code> element to mark up long quotations from another source</h3>
          
-            <p>This example shows using the <code class="el">blockquote</code> element to mark up long
-                quotations which may require paragraph breaks. It also demonstrates the use of the
-                  <code class="el">cite</code> element to specify a reference.</p>
+            <p>This example also demonstrates the use of the <code class="language-html">cite</code> element to specify a reference.</p>
          
-         <pre xml:space="preserve">&lt;p&gt;The following is an excerpt from the &lt;cite&gt;The Story of my Life&lt;/cite&gt; by Helen Keller&lt;/p&gt;
- &lt;blockquote&gt;
-   &lt;p&gt;Even in the days before my teacher came, I used to feel along the square stiff boxwood
-   hedges, and, guided by the sense of smell, would find the first violets and lilies.  
-   There, too, after a fit of temper, I went to find comfort and to hide my hot face 
-   in the cool leaves and grass.&lt;/p&gt;
- &lt;/blockquote&gt;</pre>
+         <pre xml:space="preserve"><code class="language-html">&lt;p&gt;The following is an excerpt from the &lt;cite&gt;The Story Of My Life&lt;/cite&gt; 
+   by Helen Keller:&lt;/p&gt;
+&lt;blockquote&gt;
+  &lt;p&gt;Even in the days before my teacher came, I used to feel along the square stiff
+     boxwood hedges, and, guided by the sense of smell, would find the first violets
+     and lilies. There, too, after a fit of temper, I went to find comfort and to hide
+     my hot face in the cool leaves and grass.&lt;/p&gt;
+&lt;/blockquote&gt;</code></pre>
       </section>
       <section class="example">
+         <h3>Using the <code class="language-html">q</code> element to mark up a shorter quotation from another source</h3>
          
-            <p>Here is the use of the <code class="el">q</code> element to mark up a shorter quotation.
-                Quotes are provided around the <code class="el">q</code> element, because many user agents do
-                not support this element yet and therefore do not display it properly (see UA
-                notes). CSS rules to suppress automatic generation of quotes are provided for those
-                user agents that do support the <code class="el">q</code> element, to prevent them from
-                generating quotes automatically in addition to the quotes provided by the author,
-                resulting in double-quoted content. In the future, when the <code class="el">q</code> element
-                is more broadly supported, the need to provide quotes and suppress browser-generated
-                quotes will go away. </p>
+         <p>Quotation marks aren't manually added to the quote because they are added by the user agent.</p>
          
-         <pre xml:space="preserve">q:before { content: ""; } 
-q:after { content: ""; }  </pre>
-         <pre xml:space="preserve"> &lt;p&gt;Helen Keller said, "&lt;q&gt;Self-pity is our worst enemy and if we yield to it, 
-we can never do anything good in the world.&lt;/q&gt;"&lt;/p&gt;</pre>
+<pre xml:space="preserve"><code class="language-html">&lt;p&gt;Helen Keller said, &lt;q&gt;Self-pity is our worst enemy and if we yield to it, 
+   we can never do anything good in the world&lt;/q&gt;.&lt;/p&gt;</code></pre>
       </section>
       <section class="example">
+         <h3>Using the <code class="language-html">sup</code> and <code class="language-html">sub</code> elements to mark up superscripts and subscripts</h3>
          
-            <p>Superscripts and subscripts are created using the <code class="el">sup</code> and
-                <code class="el">sub</code> elements.</p>
+            <p>The <code class="language-html">sup</code> and <code class="language-html">sub</code> elements must be used only to mark up typographical conventions with specific meanings, not for typographical presentation for presentation's sake.</p>
          
-         <pre xml:space="preserve"> &lt;p&gt;Beth received 1&lt;sup&gt;st&lt;/sup&gt; place in the 9&lt;sup&gt;th&lt;/sup&gt; grade science competition.&lt;/p&gt;
-&lt;p&gt;The chemical notation for water is H&lt;sub&gt;2&lt;/sub&gt;O.&lt;/p&gt;</pre>
+<pre xml:space="preserve"><code class="language-html">&lt;p&gt;Henry won 1&lt;sup&gt;st&lt;/sup&gt; place in the 9&lt;sup&gt;th&lt;/sup&gt; grade science competition.&lt;/p&gt;
+&lt;p&gt;The chemical notation for water is H&lt;sub&gt;2&lt;/sub&gt;O.&lt;/p&gt;</code></pre>
       </section>
+   	<section class="example">
+         <h3>Using the <code class="language-html">code</code> element to mark up code</h3>
+   		<p>This example shows use of the <code>code</code> element to provide visual emphasis for a CSS rule:</p>
+   		<pre xml:space="preserve"><code class="language-html">&lt;code&gt;
+.trial {
+  background-image: url(30daytrial.jpg);
+  background-position: left top;
+  background-repeat: no-repeat;
+  padding-top: 68px;
+} 
+&lt;/code&gt;</code></pre>
+   	</section>
    </section><section id="tests"><h2>Tests</h2>
       <section class="procedure"><h3>Procedure</h3>
          <ol>
-            <li>Examine the content for information that is conveyed through variations in
-                  presentation of text.</li>
-            <li>Check that appropriate semantic markup (such as <code class="el">em</code>, <code class="el">strong</code>, <code class="el">cite</code>,
-                    <code class="el">blockquote</code>, <code class="el">sub</code>, and <code class="el">sup</code>) have been used to mark the
-                  text that conveys information through variations in text.</li>
+            <li>Examine the content for information that is conveyed through variations in presentation of text.</li>
+            <li>Check that appropriate semantic markup (such as <code class="language-html">em</code>, <code class="language-html">strong</code>, <code class="language-html">cite</code>, <code class="language-html">blockquote</code>, <code class="language-html">sub</code>, and <code class="language-html">sup</code>) have been used to mark the text that conveys information through variations in text.</li>
          </ol>
       </section>
-      <section class="results"><h3>Expected Results</h3>
+      <section class="results">
+         <h3>Expected Results</h3>
          <ul>
             <li>Check #2 is true.</li>
          </ul>
       </section>
    </section><section id="related"><h2>Related Techniques</h2><ul>
       <li><a href="../general/G115">G115</a></li>
-   </ul></section><section id="resources"><h2>Resources</h2>
-      
-         <ul>
-            <li>HTML 4.01 <a href="https://www.w3.org/TR/html4/struct/text.html#h-9.2.1">Phrase
-                    elements: EM, STRONG, DFN, CODE, SAMP, KBD, VAR, CITE, ABBR, and ACRONYM</a>
-								       </li>
-            <li>HTML 4.01 <a href="https://www.w3.org/TR/html4/struct/text.html#h-9.2.2">Quotations: The BLOCKQUOTE and Q elements</a>
-								       </li>
-            <li>HTML 4.01 <a href="https://www.w3.org/TR/html4/struct/text.html#h-9.2.3">Subscripts and superscripts: the SUB and SUP elements</a>
-								       </li>
-            <li>
-									         <a href="http://juicystudio.com/article/fixing-ie-quotes.php">Fixing Quotes in
-                    Internet Explorer</a>
-								       </li>
-         </ul>
-      
-   </section></body></html>
\ No newline at end of file
+   </ul>
+</section>
+<section id="resources">
+   <h2>Resources</h2>   
+   <ul>
+      <li><a href="https://html.spec.whatwg.org/multipage/dom.html#phrasing-content-2">HTML - Phrasing Content</a>.</li>
+      <li><a href="https://html.spec.whatwg.org/multipage/grouping-content.html#the-blockquote-element">HTML - <code class="language-html">blockquote</code> element</a>.</li>
+      <li><a href="https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-code-element">HTML - <code class="language-html">code</code> element</a>.</li>
+      <li><a href="https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-q-element">HTML - <code class="language-html">q</code> element</a>.</li>
+      <li><a href="https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-sub-and-sup-elements">HTML - <code class="language-html">sub</code> and <code class="language-html">sup</code> elements</a>.</li>
+   </ul>
+</section>
+</body>
+</html>
\ No newline at end of file
diff --git a/techniques/html/H51.html b/techniques/html/H51.html
index 06cbad3391..636569b2ef 100644
--- a/techniques/html/H51.html
+++ b/techniques/html/H51.html
@@ -1,37 +1,47 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using table markup to present tabular information</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Using table markup to present tabular information</h1><section class="meta"><p class="id">ID: H51</p><p class="technology">Technology: html</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
-      <p>HTML and XHTML</p>
-   </section><section id="description"><h2>Description</h2>
-      <p>The objective of this technique is to present tabular information in a way that
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+   <head>
+      <title>Using table markup to present tabular information</title>
+      <link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+   </head>
+   <body>
+      <h1>Using table markup to present tabular information</h1>
+      <section class="meta">
+         <p class="id">ID: H51</p>
+         <p class="technology">Technology: html</p>
+         <p class="type">Type: Technique</p>
+      </section>
+      <section id="applicability">
+         <h2>When to Use</h2>
+         <p><abbr title="HyperText Markup Language">HTML</abbr></p>
+      </section>
+      <section id="description">
+         <h2>Description</h2>
+         <p>The objective of this technique is to present tabular information in a way that
             preserves relationships within the information even when users cannot see the table or
             the presentation format is changed. Information is considered tabular when logical
             relationships among text, numbers, images, or other data exist in two dimensions
             (vertical and horizontal). These relationships are represented in columns and rows, and
             the columns and rows must be recognizable in order for the logical relationships to be
             perceived.</p>
-      <p>Using the <code class="el">table</code> element with the child elements <code class="el">tr</code>,
-              <code class="el">th</code>, and <code class="el">td</code> makes these relationships perceivable. Techniques
-            such as inserting tabs to create columns or using the <code class="el">pre</code> element are
-            purely visual, and visually implied logical relationships are lost if the user cannot
-            see the table or the visual presentation is changed.</p>
-      <p>Simple tables generally have only one level of headers for columns and/or one level of headers on the rows. </p>
-      <p>Usually, for simple tables, row 1 column 1 is either blank or describes the contents of the entire column 1. Row 1 columns are not blank (i.e. they contain "column headings"), describe the contents of the entire column, and allow the reader to distinguish the difference in meaning between that column and other columns. </p>
-      <p>Column 1 rows are usually not blank, they often contain "row headings" which describe the contents of the entire row, and allow the reader to distinguish the difference in meaning between that row and the other rows. Otherwise, the Column 1 would contain simple data.</p>
-   </section><section id="examples"><h2>Examples</h2>
-      <section class="example">
-         <h3>A schedule marked up as a simple data table with column and row headers</h3>
+            <p>Using the <code class="language-html">table</code> element with the child elements <code class="language-html">tr</code>,
+              <code class="language-html">th</code>, and <code class="language-html">td</code> makes these relationships perceivable. Techniques
+            such as inserting tabs to create columns or using the <code class="language-html">pre</code> element are purely visual, and visually implied logical relationships are lost if the user cannot see the table or the visual presentation is changed.</p>
+            <p>Simple tables generally have only one level of headers for columns and/or one level of headers on the rows. </p>
+            <p>Usually, for simple tables, row 1 column 1 is either blank or describes the contents of the entire column 1. Row 1 columns are not blank (i.e., they contain "column headings"), describe the contents of the entire column, and allow the reader to distinguish the difference in meaning between that column and other columns.</p>
+            <p>Column 1 rows are usually not blank, they often contain "row headings" which describe the contents of the entire row, and allow the reader to distinguish the difference in meaning between that row and the other rows. Otherwise, the Column 1 would contain simple data.</p>
+         </section>
+         <section id="examples">
+            <h2>Examples</h2>
+            <section class="example">
+               <h3>A schedule marked up as a simple data table with column and row headers</h3>
          
-            <p>This example uses markup for a simple data table. The first row shows the days of
-                the week. Time intervals are shown in the first column. These cells are marked with
-                the <code class="el">th</code> element. This identifies the days of the week as column headers
-                and the time intervals as row headers.</p>
-            <p>Screen readers speak header information that changes as the user navigates the
-                table. Thus, when screen reader users move to left or right along a row, they will
-                hear the day of the week (the column header) followed by the appointment (if any).
-                They will hear the time interval as they move up or down within the same column.</p>
+            <p>This example uses markup for a simple data table. The first row shows the days of the week. Time intervals are shown in the first column. These cells are marked with the <code class="language-html">th</code> element. This identifies the days of the week as column headers and the time intervals as row headers.</p>
+            <p>Screen readers speak header information that changes as the user navigates the table. Thus, when screen reader users move to left or right along a row, they will hear the day of the week (the column header) followed by the appointment (if any). They will hear the time interval as they move up or down within the same column.</p>
          
-         <pre xml:space="preserve"> &lt;table&gt;
+<pre xml:space="preserve"><code class="language-html">&lt;table&gt;
   &lt;tr&gt;
-    &lt;td&gt; &lt;/td&gt;
+    &lt;th&gt;Time&lt;/th&gt;
     &lt;th&gt;Monday&lt;/th&gt;
     &lt;th&gt;Tuesday&lt;/th&gt;
     &lt;th&gt;Wednesday&lt;/th&gt;
@@ -39,54 +49,69 @@ <h3>A schedule marked up as a simple data table with column and row headers</h3>
     &lt;th&gt;Friday&lt;/th&gt;
   &lt;/tr&gt;
   &lt;tr&gt;
-    &lt;th&gt;8:00-9:00&lt;/th&gt;
+    &lt;th scope="row"&gt;8:00-9:00&lt;/th&gt;
     &lt;td&gt;Meet with Sam&lt;/td&gt;
-    &lt;td&gt; &lt;/td&gt;
-    &lt;td&gt; &lt;/td&gt;
-    &lt;td&gt; &lt;/td&gt;
-    &lt;td&gt; &lt;/td&gt;
+    &lt;td&gt;&lt;/td&gt;
+    &lt;td&gt;&lt;/td&gt;
+    &lt;td&gt;&lt;/td&gt;
+    &lt;td&gt;&lt;/td&gt;
   &lt;/tr&gt;
   &lt;tr&gt;
-    &lt;th&gt;9:00-10:00&lt;/th&gt;
-    &lt;td&gt; &lt;/td&gt;
-    &lt;td&gt; &lt;/td&gt;
+    &lt;th scope="row"&gt;9:00-10:00&lt;/th&gt;
+    &lt;td&gt;&lt;/td&gt;
+    &lt;td&gt;&lt;/td&gt;
     &lt;td&gt;Doctor Williams&lt;/td&gt;
     &lt;td&gt;Sam again&lt;/td&gt;
     &lt;td&gt;Leave for San Antonio&lt;/td&gt;
   &lt;/tr&gt;
-&lt;/table&gt; </pre>
+&lt;/table&gt;</code></pre>
       </section>
-   </section><section id="tests"><h2>Tests</h2>
-      <section class="procedure"><h3>Procedure</h3>
+   </section>
+   <section id="tests">
+      <h2>Tests</h2>
+      <section class="procedure">
+         <h3>Procedure</h3>
          <ol>
             <li>Check for the presence of tabular information.</li>
             <li>
-               <p>For each occurrence of tabular information: </p>
+               <p>For each occurrence of tabular information:</p>
                <ol>
-                  <li>Check that table markup with at least the elements <code class="el">table</code>,
-                        <code class="el">tr</code>, <code class="el">th</code>, and <code class="el">td</code> is used. </li>
+                  <li>Check that table markup with at least the elements <code class="language-html">table</code>, <code class="language-html">tr</code>, <code class="language-html">th</code>, and <code class="language-html">td</code> is used.</li>
                </ol>
             </li>
          </ol>
       </section>
-      <section class="results"><h3>Expected Results</h3>
+      <section class="results">
+         <h3>Expected Results</h3>
          <ul>
             <li>All checks above are true.</li>
          </ul>
       </section>
-   </section><section id="related"><h2>Related Techniques</h2><ul>
-      <li><a href="../html/H39">H39</a></li>
-      <li><a href="../html/H43">H43</a></li>
-      <li><a href="../html/H63">H63</a></li>
-   </ul></section><section id="resources"><h2>Resources</h2>
-      
+   </section>
+   <section id="related">
+      <h2>Related Techniques</h2>
+      <ul>
+         <li><a href="../html/H39">H39</a></li>
+         <li><a href="../html/H43">H43</a></li>
+         <li><a href="../html/H63">H63</a></li>
+      </ul>
+   </section>
+   <section id="resources">
+      <h2>Resources</h2>
          <ul>
-            <li>HTML 4.01 <a href="https://www.w3.org/TR/html4/struct/tables.html#h-11.2.1">Table Element</a>
-								       </li>
-            <li>HTML 4.01 <a href="https://www.w3.org/TR/html4/struct/tables.html#h-11.2.5">Table rows: The TR element</a>
-								       </li>
-            <li>HTML 4.01 <a href="https://www.w3.org/TR/html4/struct/tables.html#h-11.2.6">Table cells: The TH and TD elements</a>
-								       </li>
+            <li>
+               <a href="https://html.spec.whatwg.org/multipage/tables.html#the-table-element">HTML - <code class="language-html">table</code> element</a>.
+				</li>
+            <li>
+               <a href="https://html.spec.whatwg.org/multipage/tables.html#the-tr-element">HTML - the <code class="language-html">tr</code> element</a>.
+				</li>
+            <li>
+               <a href="https://html.spec.whatwg.org/multipage/tables.html#the-th-element">HTML - the <code class="language-html">th</code> element</a>.
+				</li>
+            <li>
+               <a href="https://html.spec.whatwg.org/multipage/tables.html#the-td-element">HTML - the <code class="language-html">td</code> element</a>.
+				</li>
          </ul>
-      
-   </section></body></html>
\ No newline at end of file
+   </section>
+</body>
+</html>
\ No newline at end of file
diff --git a/techniques/html/H53.html b/techniques/html/H53.html
index 2b82cc5133..34abcb3bf6 100644
--- a/techniques/html/H53.html
+++ b/techniques/html/H53.html
@@ -1,71 +1,82 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using the body of the object element</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Using the body of the <code class="el">object</code> element</h1><section class="meta"><p class="id">ID: H53</p><p class="technology">Technology: html</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
-      <p>Documents that load media with the <code class="el">object</code> element.</p>
-   </section><section id="description"><h2>Description</h2>
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+   <head>
+      <title>Using the body of the object element</title>
+      <link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+   </head>
+   <body>
+		<h1>Using the body of the <code class="language-html">object</code> element</h1>
+    <section class="meta">
+			<p class="id">ID: H53</p>
+      <p class="technology">Technology: html</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+      <p>Documents that load media with the <code class="language-html">object</code> element.</p>
+		</section>
+		<section id="description">
+			<h2>Description</h2>
       <p>The objective of this technique is to provide a text alternative for content rendered
-            using the object element. The body of the <code class="el">object</code> element can be used to provide a
-            complete text alternative for the object, or may contain additional non-text content with
-            text alternatives.</p>
-   	<p>Fallback content for the <code class="el">object</code> element is only available to the user when the media loaded by the element is not rendered by the user agent, because the user agent does not support the media technology or the user has instructed the user agent not to render that technology. In these situations, the fallback content will be presented to the user. If the media is rendered without the fallback content, the media needs to be directly accessible. Authors can only rely on this technique to satisfy the success criterion if they are not relying on the direct accessibility of the media's technology in their conformance claim, and reasonably expect users will be able to access the fallback.</p>
-   </section><section id="examples"><h2>Examples</h2>
+            using the object element. The body of the <code class="language-html">object</code> element can be used to provide a complete text alternative for the object, or may contain additional non-text content with text alternatives.</p>
+   	<p>Fallback content for the <code class="language-html">object</code> element is only available to the user when the media loaded by the element is not rendered by the user agent, because the user agent does not support the media technology or the user has instructed the user agent not to render that technology. In these situations, the fallback content will be presented to the user. If the media is rendered without the fallback content, the media needs to be directly accessible. Authors can only rely on this technique to satisfy the success criterion if they are not relying on the direct accessibility of the media's technology in their conformance claim, and reasonably expect users will be able to access the fallback.</p>
+   </section>
+	 <section id="examples">
+		<h2>Examples</h2>
       <section class="example">
-         <h3>An object includes a long description that describes it</h3>
-         <pre xml:space="preserve"> &lt;object classid="http://www.example.com/analogclock.py"&gt;
+				<h3>An object includes a long description that describes it</h3>
+				<pre xml:space="preserve"><code class="language-html">&lt;object classid="https://www.example.com/analogclock.py"&gt;
   &lt;p&gt;Here is some text that describes the object and its operation.&lt;/p&gt;
-&lt;/object&gt;</pre>
+&lt;/object&gt;</code></pre>
       </section>
       <section class="example">
          <h3>An object includes non-text content with a text alternative </h3>
-         <pre xml:space="preserve">&lt;object classid="http://www.example.com/animatedlogo.py"&gt;
-  &lt;img src="staticlogo.gif" alt="Company Name" /&gt;
-&lt;/object&gt;   
-            </pre>
+         <pre xml:space="preserve"><code class="language-html">&lt;object classid="https://www.example.com/animatedlogo.py"&gt;
+  &lt;img src="staticlogo.gif" alt="Company Name"&gt;
+&lt;/object&gt;</code></pre>
       </section>
       <section class="example">
-         <h3>The image object has content that provides a brief description of the function of
-              the image</h3>
-         <pre xml:space="preserve">&lt;object data="companylogo.gif" type="image/gif"&gt;
+         <h3>The image object has content that provides a brief description of the function of the image</h3>
+         <pre xml:space="preserve"><code class="language-html">&lt;object data="companylogo.gif" type="image/gif"&gt;
   &lt;p&gt;Company Name&lt;/p&gt;
-&lt;/object&gt;</pre>
+&lt;/object&gt;</code></pre>
       </section>
       <section class="example">
+				<p>This example takes advantage of the fact the <code class="language-html">object</code> elements may be nested to provide for alternative representations of information.</p>
          
-            <p>This example takes advantage of the fact the <code class="el">object</code> elements may be nested
-                to provide for alternative representations of information.</p>
-         
-         <pre xml:space="preserve">&lt;object classid="java:Press.class" width="500" height="500"&gt;
-  &lt;object data="Pressure.mpeg" type="video/mpeg"&gt;
-    &lt;object data="Pressure.gif" type="image/gif"&gt;
+         <pre xml:space="preserve"><code class="language-html">&lt;object classid="java:Press.class" width="500" height="500"&gt;
+  &lt;object data="pressure.mpeg" type="video/mpeg"&gt;
+    &lt;object data="pressure.gif" type="image/gif"&gt;
       As temperature increases, the molecules in the balloon...
     &lt;/object&gt;
   &lt;/object&gt;
-&lt;/object&gt;  </pre>
+&lt;/object&gt;</code></pre>
       </section>
-   </section><section id="tests"><h2>Tests</h2>
-      <section class="procedure"><h3>Procedure</h3>
-         <ol>
-            <li> Check that the body of each <code class="el">object</code> element contains a text alternative
-                  for the object. </li>
-         </ol>
+   </section>
+	 <section id="tests">
+		<h2>Tests</h2>
+		<section class="procedure">
+			<h3>Procedure</h3>
+			<ol>
+				<li>Check that the body of each <code class="language-html">object</code> element contains a text alternative for the object.</li>
+      </ol>
       </section>
-      <section class="results"><h3>Expected Results</h3>
-         <ul>
-            <li> #1 is true. </li>
-         </ul>
+      <section class="results">
+				<h3>Expected Results</h3>
+        <ul>
+          <li>#1 is true.</li>
+        </ul>
       </section>
-   </section><section id="related"><h2>Related Techniques</h2><ul>
-      <li><a href="../general/G92">G92</a></li>
-      <li><a href="../html/H46">H46</a></li>
-   </ul></section><section id="resources"><h2>Resources</h2>
-      
-         <ul>
-            <li>
-									         <a href="https://www.w3.org/TR/html401/struct/objects.html#edef-OBJECT">HTML 4.01
-                    OBJECT element</a>
-								       </li>
-            <li>
-									         <a href="http://juicystudio.com/article/object-paranoia.php">Object
-                  Paranoia</a>
-								       </li>
-         </ul>
-      
-   </section></body></html>
\ No newline at end of file
+		</section>
+		<section id="related">
+			<h2>Related Techniques</h2>
+			<ul>
+      	<li><a href="../general/G92">G92</a></li>
+			</ul>
+		</section>
+		<section id="resources">
+			<h2>Resources</h2>
+			<ul>
+				<li>
+					<a href="https://html.spec.whatwg.org/multipage/iframe-embed-object.html#the-object-element"><abbr title="HyperText Markup Language">HTML</abbr> - the <code class="language-html">object</code> element</a>.
+				</li>
+			</ul>
+   </section>
+	</body>
+	</html>
\ No newline at end of file
diff --git a/techniques/html/H54.html b/techniques/html/H54.html
index f389c0946b..240e252c9c 100644
--- a/techniques/html/H54.html
+++ b/techniques/html/H54.html
@@ -1,47 +1,68 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using the dfn element to identify the defining instance of a word</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Using the <code class="el">dfn</code> element to identify the defining instance of a word</h1><section class="meta"><p class="id">ID: H54</p><p class="technology">Technology: html</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
-      <p>HTML and XHTML</p>
-   </section><section id="description"><h2>Description</h2>
-      <p>The objective of this technique is to use the <code class="el">dfn</code> to mark the use of a
-            word or phrase where it is defined. The <code class="el">dfn</code> element is used to indicate the
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+   <head>
+      <title>Using the dfn element to identify the defining instance of a word</title>
+      <link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+   </head>
+   <body>
+      <h1>Using the <code class="language-html">dfn</code> element to identify the defining instance of a word</h1>
+      <section class="meta">
+         <p class="id">ID: H54</p>
+         <p class="technology">Technology: html</p>
+         <p class="type">Type: Technique</p>
+      </section>
+      <section id="applicability">
+         <h2>When to Use</h2>
+         <p>HTML</p>
+      </section>
+      <section id="description">
+         <h2>Description</h2>
+         <p>The objective of this technique is to use the <code class="language-html">dfn</code> to mark the use of a
+            word or phrase where it is defined. The <code class="language-html">dfn</code> element is used to indicate the
             defining instance of the enclosed term. In other words, it marks the occurrence of the
             term where the term is defined. Note that it encloses the term, not the definition. This
-            technique would be used in combination with <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G112">Using
+            technique would be used in combination with <a href="../general/G112">Using
               inline definitions</a> to provide the definition.</p>
    </section><section id="examples"><h2>Examples</h2>
       <section class="example">
          
-            <p>The following code snippet demonstrates the use of the <code class="el">dfn</code>
-              element.</p>
-         
-         <pre xml:space="preserve">&lt;p&gt;The Web Content Accessibility Guidelines require that non-text content
+         <pre xml:space="preserve"><code class="language-html">&lt;p&gt;The Web Content Accessibility Guidelines require that non-text content
 has a text alternative. &lt;dfn&gt;Non-text content&lt;/dfn&gt; is content that is not a sequence
 of characters that can be programmatically determined or where the sequence is
 not expressing something in human language; this includes ASCII Art (which is a
 pattern of characters), emoticons, leetspeak (which is character substitution), and
-images representing text .&lt;/p&gt; </pre>
+images representing text.&lt;/p&gt;</code></pre>
       </section>
-   </section><section id="tests"><h2>Tests</h2>
-      <section class="procedure"><h3>Procedure</h3>
+   </section>
+   <section id="tests">
+      <h2>Tests</h2>
+      <section class="procedure">
+         <h3>Procedure</h3>
          <ol>
             <li>Identify all words that are defined inline in the text, that is, where the
-                  definition occurs in a sentence near an occurrence of the word. </li>
-            <li>Check that each word that is defined inline is contained in a <code class="el">dfn</code>
-                  element. </li>
+                  definition occurs in a sentence near an occurrence of the word.</li>
+            <li>Check that each word that is defined inline is contained in a <code class="language-html">dfn</code> element.</li>
          </ol>
       </section>
-      <section class="results"><h3>Expected Results</h3>
+      <section class="results">
+         <h3>Expected Results</h3>
          <ul>
             <li>Check #2 is true.</li>
          </ul>
       </section>
-   </section><section id="related"><h2>Related Techniques</h2><ul>
-      <li><a href="../general/G112">G112</a></li>
-   </ul></section><section id="resources"><h2>Resources</h2>
-      
-         <ul>
-            <li>HTML 4.01 <a href="https://www.w3.org/TR/html4/struct/text.html#edef-DFN">DFN
-                    Element</a>
-								       </li>
-         </ul>
-      
-   </section></body></html>
\ No newline at end of file
+   </section>
+   <section id="related">
+      <h2>Related Techniques</h2>
+      <ul>
+         <li><a href="../general/G112">G112</a></li>
+      </ul>
+   </section>
+   <section id="resources">
+      <h2>Resources</h2>
+      <ul>
+         <li><a href="https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-dfn-element">HTML - the <code class="language-html">dfn</code> element</a>.
+         </li>
+      </ul>
+   </section>
+</body>
+</html>
\ No newline at end of file
diff --git a/techniques/html/H56.html b/techniques/html/H56.html
index af5d3df88f..950e9dfe53 100644
--- a/techniques/html/H56.html
+++ b/techniques/html/H56.html
@@ -1,56 +1,77 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using the dir attribute on an inline element to resolve problems
-          with nested directional runs</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Using the <code class="att">dir</code> attribute on an inline element to resolve problems
-          with nested directional runs</h1><section class="meta"><p class="id">ID: H56</p><p class="technology">Technology: html</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
-      <p>HTML and XHTML</p>
-   </section><section id="description"><h2>Description</h2>
-      <p>The objective of this technique is to identify changes in the text direction of text that includes nested directional runs by providing the <code class="att">dir</code> attribute on
-            inline elements. A nested directional run is a run of text that includes mixed directional text, for example, a paragraph in English containing a quoted Hebrew sentence which in turn includes an English phrase. Use of the <code class="att">dir</code> attribute on an enclosing <code class="el">span</code> or other inline element may be necessary because the <a href="https://www.w3.org/International/articles/inline-bidi-markup/">Unicode bidirectional algorithm</a> can produce undesirable results when mixed
-            directional text contains spaces or punctuation. The concepts used in this technique are described in <a href="https://www.w3.org/International/articles/inline-bidi-markup/">What you need to know about the bidi algorithm and inline markup</a>. </p>
-   </section><section id="examples"><h2>Examples</h2>
-      <section class="example">
-         
-            <p>This example defines the text direction of a nested, mixed-direction phrase, in Hebrew and English, to be right-to-left. Because the whole quote is in Hebrew, and therefore runs right to left, the text "W3C" and the comma should appear to the left of (i.e., after) the Hebrew text, like this:</p>
-            <p>The title is "<span lang="he">פעילות הבינאום, W3C</span>" in Hebrew.</p>
-            <p>Visually-ordered ASCII version (RTL text in uppercase, LTR in lower):</p>
-            <p>the title is "w3c ,YTIVITCA NOITAZILANOITANRETNI" in hebrew.</p>
-            <p>The Unicode bidirection algorithm alone is insufficient to achieve the right result, and leaves the text 'W3C' on the right side of the quote:</p>
-            <p>The title is "<span lang="he">פעילות הבינאום</span>, W3C" in Hebrew.</p>
-            <p>Visually-ordered ASCII version:</p>
-            <p>the title is "YTIVITCA NOITAZILANOITANRETNI, w3c" in hebrew.</p>
-            <p>The following markup will produce the expected result:</p>
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+   <head>
+      <title>Using the dir attribute on an inline element to resolve problems with nested directional runs</title>
+      <link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+   </head>
+   <body>
+      <h1>Using the <code class="language-html">dir</code> attribute on an inline element to resolve problems with nested directional runs</h1>
+      <section class="meta">
+         <p class="id">ID: H56</p>
+         <p class="technology">Technology: html</p>
+         <p class="type">Type: Technique</p>
+      </section>
+      <section id="applicability">
+         <h2>When to Use</h2>
+         <p><abbr title="HyperText Markup Language">HTML</abbr></p>
+      </section>
+      <section id="description">
+         <h2>Description</h2>
+         <p>The objective of this technique is to identify changes in the text direction of text that includes nested directional runs by providing the <code class="language-html">dir</code> attribute on inline elements. A nested directional run is a run of text that includes mixed directional text, for example, a paragraph in English containing a quoted Hebrew sentence which in turn includes an English phrase. Use of the <code class="language-html">dir</code> attribute on an enclosing <code class="language-html">span</code> or other inline element may be necessary because the <a href="https://www.w3.org/International/articles/inline-bidi-markup/">Unicode bidirectional algorithm</a> can produce undesirable results when mixed directional text contains spaces or punctuation. The concepts used in this technique are described in <a href="https://www.w3.org/International/articles/inline-bidi-markup/">What you need to know about the bidi algorithm and inline markup</a>.</p>
+         </section>
+         <section id="examples">
+            <h2>Examples</h2>
+            <section class="example">
+               <h3>Defining the text direction of a nested, mixed-direction phrase, in Hebrew and English, to be right-to-left</h3>
+               <p>Because the whole quote is in Hebrew, and therefore runs right to left, the text "W3C" and the comma should appear to the left of (i.e., after) the Hebrew text, like this:</p>
+               <p>The title is "<span lang="he">פעילות הבינאום, W3C</span>" in Hebrew.</p>
+               <p>Visually-ordered <abbr title="American Standard Code for Information Interchange">ASCII</abbr> version (<abbr title="Right To Left">RTL</abbr> text in uppercase, <abbr title="Left To Right">LTR</abbr> in lower):</p>
+               <p>the title is "w3c ,YTIVITCA NOITAZILANOITANRETNI" in Hebrew.</p>
+               <p>The Unicode bidirection algorithm alone is insufficient to achieve the right result, and leaves the text "W3C" on the right side of the quote:</p>
+               <p>The title is "<span lang="he">פעילות הבינאום</span>, W3C" in Hebrew.</p>
+               <p>Visually-ordered ASCII version:</p>
+               <p>the title is "YTIVITCA NOITAZILANOITANRETNI, w3c" in hebrew.</p>
+               <p>The following markup will produce the expected result:</p>
          
-         <pre xml:space="preserve">
-&lt;p&gt;The title says "&lt;span lang="he" 
-dir="rtl"&gt;פעילות הבינאום, W3C&lt;/span&gt;" in Hebrew.&lt;/p&gt; </pre>
+<pre xml:space="preserve">&lt;p&gt;The title says "&lt;span lang="he" dir="rtl"&gt;פעילות הבינאום, W3C&lt;/span&gt;" in Hebrew.&lt;/p&gt;</pre>
       </section>
-   </section><section id="tests"><h2>Tests</h2>
-      <section class="procedure"><h3>Procedure</h3>
+   </section>
+   <section id="tests">
+      <h2>Tests</h2>
+      <section class="procedure">
+         <h3>Procedure</h3>
          <ol>
             <li>Examine the text direction of text in the document</li>
-            <li>If the text direction is right-to-left, check that for the ancestor element that
-                  has a <code class="att">dir</code> attribute, the attribute has the value "rtl"</li>
-            <li>If the text direction is left-to-right, check that there is no ancestor element
-                  with a <code class="att">dir</code> attribute, or that for the ancestor element that has a
-                    <code class="att">dir</code> attribute, the attribute has the value "ltr"</li>
+            <li>If the text direction is right-to-left, check that for the ancestor element that has a <code class="language-html">dir</code> attribute, the attribute has the value <code class="language-html">"rtl"</code></li>
+            <li>If the text direction is left-to-right, check that there is no ancestor element with a <code class="language-html">dir</code> attribute, or that for the ancestor element that has a <code class="language-html">dir</code> attribute, the attribute has the value <code class="language-html">"ltr"</code></li>
          </ol>
       </section>
-      <section class="results"><h3>Expected Results</h3>
+      <section class="results">
+         <h3>Expected Results</h3>
          <ul>
             <li>Checks #2 and #3 are true for all text.</li>
          </ul>
       </section>
-   </section><section id="related"><h2>Related Techniques</h2><ul>
-      <li><a href="../html/H34">H34</a></li>
-   </ul></section><section id="resources"><h2>Resources</h2>
-      
-         <ul>
-            <li>
-									         <a href="https://www.w3.org/TR/html401/struct/dirlang.html#blocklevel-bidi">Inheritance of text direction information</a>
-								       </li>
-            <li>
-									         <a href="https://www.w3.org/TR/i18n-html-tech-bidi/">Authoring Techniques for
-                    XHTML &amp; HTML Internationalization: Handling Bidirectional Text 1.0</a>
-								       </li>
-         </ul>
-      
-   </section></body></html>
\ No newline at end of file
+   </section>
+   <section id="related">
+      <h2>Related Techniques</h2>
+      <ul>
+         <li><a href="../html/H34">H34</a></li>
+      </ul>
+   </section>
+   <section id="resources">
+      <h2>Resources</h2>
+      <ul>
+         <li>
+            <a href="https://html.spec.whatwg.org/multipage/dom.html#attr-dir">HTML - the <code class="language-html">dir</code> attribute</a>.
+         </li>
+         <li>
+            <a href="https://html.spec.whatwg.org/multipage/rendering.html#bidi-rendering">HTML - bidirectional text</a>.
+         </li>
+         <li>
+            <a href="https://www.w3.org/International/tutorials/bidi-xhtml/">Creating HTML Pages in Arabic, Hebrew and Other Right-to-left Scripts (tutorial)</a>.
+         </li>
+      </ul>
+   </section>
+</body>
+</html>
\ No newline at end of file
diff --git a/techniques/html/H57.html b/techniques/html/H57.html
index 7ac6a269bd..8801c4164f 100644
--- a/techniques/html/H57.html
+++ b/techniques/html/H57.html
@@ -2,10 +2,10 @@
 <html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
 <head>
    <title>Using the language attribute on the HTML element</title>
-   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link>
+   <link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
 </head>
 <body>
-   <h1>Using the language attribute on the <code>HTML</code> element</h1>
+   <h1>Using the language attribute on the <code class="language-html">HTML</code> element</h1>
    <section class="meta">
      <p class="id">ID: H57</p>
      <p id="sc">3.1.1 Language of Page</p>
@@ -14,54 +14,45 @@ <h1>Using the language attribute on the <code>HTML</code> element</h1>
    </section>
    <section id="applicability">
       <h2>When to Use</h2>
-      <p>HTML</p>
+      <p><abbr title="HyperText Markup Language">HTML</abbr></p>
    </section>
    <section id="description">
       <h2>Description</h2>
-      <p> The objective of this technique is to identify the default language of a document by
-            providing the <code class="att">lang</code> attribute on the <code class="el">html</code>
-            element. </p>
-      <p>Identifying the language of the document is important for a number of reasons: </p>
+      <p> The objective of this technique is to identify the default language of a document by providing the <code class="language-html">lang</code> attribute on the <code class="language-html">html</code> element.</p>
+      <p>Identifying the language of the document is important for a number of reasons:</p>
       <ul>
-         <li>It allows braille translation software to substitute control codes for accented
-                characters, and insert control codes necessary to prevent erroneous creation of
-                Grade 2 braille contractions. </li>
-         <li>Speech synthesizers that support multiple languages will be able to orient and
-                adapt to the pronunciation and syntax that are specific to the language of the page,
-                speaking the text in the appropriate accent with proper pronunciation. </li>
-         <li>Marking the language can benefit future developments in technology, for example
-                users who are unable to translate between languages themselves will be able to use
-                machines to translate unfamiliar languages. </li>
-         <li>Marking the language can also assist user agents in providing definitions using a
-                dictionary. </li>
+         <li>It allows braille translation software to substitute control codes for accented characters, and insert control codes necessary to prevent erroneous creation of Grade 2 braille contractions.</li>
+         <li>Speech synthesizers that support multiple languages will be able to orient and adapt to the pronunciation and syntax that are specific to the language of the page, speaking the text in the appropriate accent with proper pronunciation.</li>
+         <li>Marking the language can benefit future developments in technology, for example users who are unable to translate between languages themselves will be able to use machines to translate unfamiliar languages.</li>
+         <li>Marking the language can also assist user agents in providing definitions using a dictionary.</li>
       </ul>
-      <p>HTML uses the <code class="att">lang</code> attribute of the <code class="el">html</code> element.</p>
-   </section><section id="examples">
+   </section>
+   <section id="examples">
       <h2>Examples</h2>
       <section class="example">
-         
-            <p>This example defines the content of an HTML document to be in the French language.</p>
-         <pre>&lt;!DOCTYPE&gt;
+         <h3>Defining the content of an HTML document to be in French</h3>
+<div lang="fr">
+<pre xml:space="preserve"><code class="language-html">&lt;!doctype html&gt;
 &lt;html lang="fr"&gt; 
 &lt;head&gt;
+  &lt;meta charset="utf-8"&gt;
   &lt;title&gt;document écrit en français&lt;/title&gt;
-  &lt;meta http-equiv="content-type" content="text/html; charset=utf-8" /&gt;
 &lt;/head&gt;  
 &lt;body&gt;     
-	...document écrit en français...   
+  ... document écrit en français ...
 &lt;/body&gt;
-&lt;/html&gt;</pre>
+&lt;/html&gt;</code></pre>
+</div>
       </section>
    </section>
    <section id="tests">
       <h2>Tests</h2>
       <section class="procedure">
          <h3>Procedure</h3>
-        <p>Examine the <code class="el">html</code> element of the document.</p> 
-        <ol>
-            <li>Check that the <code class="el">html</code> element has a <code class="att">lang</code> attribute.</li>
-            <li>Check that the value of the <code class="att">lang</code> attribute conforms to <a href="http://www.rfc-editor.org/rfc/bcp/bcp47.txt">BCP 47: Tags for the
-                    Identification of Languages</a> or its successor and reflects the primary language used by the Web page. </li>
+         <p>Examine the <code class="language-html">html</code> element of the document.</p> 
+         <ol>
+            <li>Check that the <code class="language-html">html</code> element has a <code class="language-html">lang</code> attribute.</li>
+            <li>Check that the value of the <code class="language-html">lang</code> attribute conforms to <a href="https://www.rfc-editor.org/info/bcp47">BCP 47: Tags for Identifying Languages; Matching of Language Tags</a> or its successor and reflects the primary language used by the Web page.</li>
          </ol>
       </section>
       <section class="results">
@@ -78,23 +69,21 @@ <h2>Related Techniques</h2>
       </ul>
    </section>
    <section id="resources">
-      <h2>Resources</h2>
-      
+      <h2>Resources</h2> 
       <ul>
          <li>
-            <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang">HTML "lang" attribute on the Mozilla Developer Network</a>
+            <a href="https://html.spec.whatwg.org/multipage/dom.html#the-lang-and-xml:lang-attributes">HTML - The <code class="language-html">lang</code> and <code class="language-html">xml:lang</code> attributes</a>.
          </li>
          <li>
-            <a href="http://www.rfc-editor.org/rfc/bcp/bcp47.txt">BCP 47: Tags for the Identification of Languages</a>
+            <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang">HTML "<code class="language-html">lang</code>" attribute on the Mozilla Developer Network</a>.
          </li>
          <li>
-            <a href="https://www.w3.org/TR/REC-html40/struct/dirlang.html#h-8.1.2">Inheritance of language codes</a>
+            <a href="https://www.rfc-editor.org/info/bcp47">BCP 47: Tags for Identifying Languages; Matching of Language Tags</a>.
          </li>
          <li>
-            <a href="https://www.w3.org/International/articles/language-tags/">Language tags in HTML and XML</a>
+            <a href="https://www.w3.org/International/articles/language-tags/">Language tags in HTML and XML</a>.
          </li>
-      </ul>
-      
+      </ul>  
    </section>
 </body>
 </html>
diff --git a/techniques/html/H58.html b/techniques/html/H58.html
index 988206eb61..a620127d66 100644
--- a/techniques/html/H58.html
+++ b/techniques/html/H58.html
@@ -1,12 +1,11 @@
 <!DOCTYPE html>
 <html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
 <head>
-   <title>Using language attributes to identify changes in the human language </title>
-   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link>
+   <title>Using language attributes to identify changes in the human language</title>
+   <link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
 </head>
-
 <body>
-   <h1>Using language attributes to identify changes in the human language </h1>
+   <h1>Using language attributes to identify changes in the human language</h1>
    <section class="meta">
       <p class="id">ID: H58</p>
       <p id="sc">3.1.2 Language of Parts</p>
@@ -15,46 +14,48 @@ <h1>Using language attributes to identify changes in the human language </h1>
    </section>
    <section id="applicability">
       <h2>When to Use</h2>
-      <p>HTML</p>
+      <p><abbr title="HyperText Markup Language">HTML</abbr></p>
    </section>
 
    <section id="description">
       <h2>Description</h2>
-      <p>The objective of this technique is to clearly identify any changes in language on a page by using the <code class="att">lang</code> attribute.</p>
+      <p>The objective of this technique is to clearly identify any changes in language on a page by using the <code class="language-html">lang</code> attribute.</p>
       
-      <p>Allowed values for the lang attribute are indicated in the resources referenced below. Language tags use a primary code to indicate the language, and optional sub-codes (separated by hyphen characters) to indicate variants of the language. For instance, English is indicated with the primary code "en"; British English and American English can be distinguished by using "en-GB" and "en-US", respectively. Use of the primary code is important for this technique. Use of subcodes is optional but may be helpful in certain circumstances.</p>
+      <p>Allowed values for the <code class="language-html">lang</code> attribute are indicated in the resources referenced below. Language tags use a primary code to indicate the language, and optional sub-codes (separated by hyphen characters) to indicate variants of the language. For instance, English is indicated with the primary code <code class="language-html">"en"</code>; British English and American English can be distinguished by using <code class="language-html">"en-GB"</code> and <code class="language-html">"en-US"</code>, respectively. Use of the primary code is important for this technique. Use of sub-codes is optional but may be helpful in certain circumstances.</p>
    </section>
    <section id="examples">
       <h2>Examples</h2>
-      <section class="example">   
-            <p>This example demonstrates the use of the <code class="att">lang</code> attribute to define a quote written in German.</p>
-         
-         <pre xml:space="preserve">&lt;blockquote lang="de"&gt;
+      <section class="example">
+         <h3>The use of the <code class="language-html">lang</code> attribute to define a quote written in German</h3>
+
+<pre xml:space="preserve"><code class="language-html">&lt;blockquote lang="de"&gt;
   &lt;p&gt;
-    Da dachte der Herr daran, ihn aus dem Futter zu schaffen,
+    <span lang="de">Da dachte der Herr daran, ihn aus dem Futter zu schaffen,
     aber der Esel merkte, daß kein guter Wind wehte, lief fort
     und machte sich auf den Weg nach Bremen: dort, meinte er,
-    könnte er ja Stadtmusikant werden.
+    könnte er ja Stadtmusikant werden.</span>
   &lt;/p&gt;
-&lt;/blockquote&gt;   
-            </pre>
+&lt;/blockquote&gt;</code></pre>
       </section>
    </section>
-   <section id="tests"><h2>Tests</h2>
-      <section class="procedure"><h3>Procedure</h3>
-         <p>For each element in the document: </p>
+   <section id="tests">
+      <h2>Tests</h2>
+      <section class="procedure">
+         <h3>Procedure</h3>
+         <p>For each element in the document:</p>
          <ol>
             <li>Check that the human language of the content of the element is the same as the
-                  inherited language for the element as specified in <a href="https://www.w3.org/TR/REC-html40/struct/dirlang.html#h-8.1.2">HTML 4.01, Inheritance of language codes</a>
-								       </li>
+                  inherited language for the element as specified in <a href="https://html.spec.whatwg.org/multipage/dom.html#the-lang-and-xml:lang-attributes">HTML - The <code class="language-html">lang</code> and <code class="language-html">xml:lang</code> attributes</a>.
+            </li>
          </ol>
-         <p>For each <code class="att">lang</code> attribute in the document: </p>
+         <p>For each <code class="language-html">lang</code> attribute in the document:</p>
          <ol>
-            <li>Check that the value of the <code class="att">lang</code> attribute conforms to <a href="http://www.rfc-editor.org/rfc/bcp/bcp47.txt">BCP 47: Tags for the Identification of Languages</a> or its successor </li>
+            <li>Check that the value of the <code class="language-html">lang</code> attribute conforms to <a href="https://www.rfc-editor.org/info/bcp47">BCP 47: Tags for Identifying Languages; Matching of Language Tags</a> or its successor.</li>
             <li>Check that the language code matches the language of the content it applies to.</li>
          </ol>
       </section>
-      <section class="results"><h3>Expected Results</h3>
+      <section class="results">
+         <h3>Expected Results</h3>
          <ul>
             <li>All checks above are true.</li>
          </ul>
@@ -66,23 +67,22 @@ <h2>Related Techniques</h2>
          <li><a href="../html/H57">H57</a></li>
       </ul>
    </section>
-   <section id="resources"><h2>Resources</h2>
-      
-         <ul>
-            <li>
-               <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang">HTML "lang" attribute on the Mozilla Developer Network</a>
-            </li>
-            <li>
-               <a href="https://www.w3.org/TR/1999/REC-html401-19991224/struct/dirlang.html#h-8.1.2">Inheritance of language codes</a>
-            </li>
-            <li>
-               <a href="https://www.w3.org/TR/REC-html40/struct/dirlang.html#h-8.1.2">BCP 47: Tags for the Identification of Languages</a> 
-            </li>
-            <li>
-					<a href="https://www.w3.org/International/articles/language-tags/">Language tags in HTML and XML</a>
+   <section id="resources">
+      <h2>Resources</h2>
+			<ul>
+				<li>
+					<a href="https://html.spec.whatwg.org/multipage/dom.html#the-lang-and-xml:lang-attributes">HTML - The <code class="language-html">lang</code> and <code class="language-html">xml:lang</code> attributes</a>.
 				</li>
-         </ul>
-      
+				<li>
+						<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang">HTML "<code class="language-html">lang</code>" attribute on the Mozilla Developer Network</a>.
+				</li>
+				<li>
+					<a href="https://www.rfc-editor.org/info/bcp47">BCP 47: Tags for Identifying Languages; Matching of Language Tags</a>.
+				</li>
+				<li>
+					<a href="https://www.w3.org/International/articles/language-tags/">Language tags in HTML and XML</a>.
+				</li>
+			</ul>
    </section>
 </body>
 </html>
diff --git a/techniques/html/H59.html b/techniques/html/H59.html
index 53e9b66126..2cbe03f493 100644
--- a/techniques/html/H59.html
+++ b/techniques/html/H59.html
@@ -1,74 +1,89 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using the link element and navigation tools</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Using the link element and navigation tools</h1><section class="meta"><p class="id">ID: H59</p><p class="technology">Technology: html</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
-      <p>HTML and XHTML</p>
-   </section><section id="description"><h2>Description</h2>
-      <p>The objective of this technique is to describe how the <code class="el">link</code> element can
+---
+obsoleteMessage: <code>prev</code> and <code>next</code> typically have no effect on browser navigation controls.
+obsoleteSince: 20
+---
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+   <head>
+      <title>Using the link element and navigation tools</title>
+      <link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"></link>
+   </head>
+   <body>
+      <h1>Using the <code class="language-html">link</code> element and navigation tools</h1>
+      <section class="meta">
+         <p class="id">ID: H59</p>
+         <p class="technology">Technology: html</p>
+         <p class="type">Type: Technique</p>
+      </section>
+      <section id="applicability">
+         <h2>When to Use</h2>
+         <p>HTML</p>
+      </section>
+      <section id="description">
+         <h2>Description</h2>
+         <p>The objective of this technique is to describe how the <code class="language-html">link</code> element can
             provide metadata about the position of an HTML page within a set of Web pages or can
-            assist in locating content with a set of Web pages. The value of the <code class="att">rel</code>
-            attributes indicates what type of relation is being described, and the <code class="att">href</code>
-            attribute provides a link to the document having that relation. Multiple
-            <code class="el">link</code> elements can provide multiple relationships. Several values of
-              <code class="att">rel</code> are useful: </p>
+            assist in locating content with a set of Web pages. The value of the <code class="language-html">rel</code>
+            attributes indicates what type of relation is being described, and the <code class="language-html">href</code>
+            attribute provides a link to the document having that relation. Different <code class="language-html">link</code> element <code class="language-html">rel</code> values are used to create relationships:</p>
       <ul>
-         <li>Start: Refers to the first document in a collection of documents.</li>
-         <li>Next: Refers to the next document in a linear sequence of documents.</li>
-         <li>Prev: Refers to the previous document in an ordered series of documents.</li>
-         <li>Contents: Refers to a document serving as a table of contents.</li>
-         <li>Index: Refers to a document providing an index for the current document.</li>
+         <li><code class="language-html">next</code>: Refers to the next document in a linear sequence of documents.</li>
+         <li><code class="language-html">prev</code>: Refers to the previous document in an ordered series of documents.</li>
       </ul>
-   </section><section id="examples"><h2>Examples</h2>
+   </section>
+   <section id="examples">
+      <h2>Examples</h2>
       <section class="example">
          
             <p>A Web page for Chapter 2 of an on-line book might contain the following links
-                within the <code class="el">head</code> section.</p>
+                within the <code class="language-html">head</code> section.</p>
          
-         <pre xml:space="preserve">&lt;link rel="Contents" href="Contents.html" title="Table of Contents"  /&gt;
-&lt;link rel="Index" href="Index.html" title="Index" /&gt;
-&lt;link rel="Prev" href="Chapter01.html" title="01. Why Volunteer?" /&gt;
-&lt;link rel="Next" href="Chapter03.html" title="03. Who Volunteers?" /&gt;</pre>
+<pre xml:space="preserve">&lt;link rel="prev" href="Chapter01.html" title="01. Why Volunteer?"&gt;
+&lt;link rel="next" href="Chapter03.html" title="03. Who Volunteers?" /&gt;</pre>
       </section>
-   </section><section id="tests"><h2>Tests</h2>
-      <section class="procedure"><h3>Procedure</h3>
+   </section>
+   <section id="tests">
+      <h2>Tests</h2>
+      <section class="procedure">
+         <h3>Procedure</h3>
          <p>For a Web page that is within a sequence or collection of Web pages: </p>
          <ol>
-            <li>Check that all <code class="el">link</code> elements pertaining to navigation occur in the
-                    <code class="el">head</code> section of the document.</li>
+            <li>Check that all <code class="language-html">link</code> elements pertaining to navigation occur in the <code class="language-html">head</code> section of the document.</li>
             <li>
-               <p>For each <code class="el">link</code> element in the <code class="el">head</code> section of the
-                  document which pertains to navigation, check that it contains at least: </p>
+               <p>For each <code class="language-html">link</code> element in the <code class="language-html">head</code> section of the document which pertains to navigation, check that it contains at least:</p>
                <ol>
-                  <li>a <code class="att">rel</code> attribute identifying the link type</li>
-                  <li>a valid <code class="att">href</code> attribute to locate the appropriate resource</li>
+                  <li>a <code class="language-html">rel</code> attribute identifying the link type</li>
+                  <li>a valid <code class="language-html">href</code> attribute to locate the appropriate resource</li>
                </ol>
             </li>
          </ol>
       </section>
-      <section class="results"><h3>Expected Results</h3>
+      <section class="results">
+         <h3>Expected Results</h3>
          <ul>
             <li>All of the checks above are true.</li>
          </ul>
       </section>
-   </section><section id="related"><h2>Related Techniques</h2><ul>
-      <li><a href="../general/G1">G1</a></li>
-      <li><a href="../general/G63">G63</a></li>
-      <li><a href="../general/G64">G64</a></li>
-      <li><a href="../general/G123">G123</a></li>
-   </ul></section><section id="resources"><h2>Resources</h2>
+   </section>
+   <section id="related">
+      <h2>Related Techniques</h2>
+      <ul>
+         <li><a href="../general/G1">G1</a></li>
+         <li><a href="../general/G63">G63</a></li>
+         <li><a href="../general/G64">G64</a></li>
+         <li><a href="../general/G123">G123</a></li>
+      </ul>
+   </section>
+   <section id="resources">
+      <h2>Resources</h2>
       
          <ul>
             <li>
-									         <a href="https://www.w3.org/TR/html/document-metadata.html#the-link-element">HTML 5.2
-                    LINK element</a>
-								       </li>
-            <li>
-									         <a href="https://www.w3.org/TR/html5/links.html#sec-link-types">HTML 5.2 link
-                    types</a>
-								       </li>
-            <li>
-									         <a href="https://www.w3.org/QA/Tips/use-links">Use &lt;link&gt;s in your
-                    document</a> from W3C's Quality Web Tips </li>
+               <a href="https://html.spec.whatwg.org/multipage/semantics.html#the-link-element">HTML - <code class="language-html">link</code> element</a>
+            </li>
             <li>
-									         <a href="http://www.subotnik.net/html/link">The 'link'-Element in (X)HTML</a>
-								       </li>
+               <a href="https://html.spec.whatwg.org/multipage/links.html#sequential-link-types">HTML - sequential link types</a>
+            </li>
          </ul>
       
    </section></body></html>
diff --git a/techniques/html/H60.html b/techniques/html/H60.html
index c3a7d6ae85..3ec4ca9586 100644
--- a/techniques/html/H60.html
+++ b/techniques/html/H60.html
@@ -1,3 +1,7 @@
+---
+obsoleteMessage: The glossary link type is obsolete.
+obsoleteSince: 20
+---
 <!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using the link element to link to a glossary</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Using the link element to link to a glossary</h1><section class="meta"><p class="id">ID: H60</p><p class="technology">Technology: html</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
       <p>HTML and XHTML</p>
    </section><section id="description"><h2>Description</h2>
@@ -55,4 +59,4 @@ <h3> The WCAG 2.0 Glossary. </h3>
                     Document Relationship</a> from Web Design Group </li>
          </ul>
       
-   </section></body></html>
\ No newline at end of file
+   </section></body></html>
diff --git a/techniques/html/H62.html b/techniques/html/H62.html
index 57c55f72c7..74c3bbca68 100644
--- a/techniques/html/H62.html
+++ b/techniques/html/H62.html
@@ -1,126 +1,103 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using the ruby element</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Using the ruby element</h1><section class="meta"><p class="id">ID: H62</p><p class="technology">Technology: html</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
-      <p>XHTML 1.1 and HTML5</p>
-   </section><section id="description"><h2>Description</h2>
-      <p>The objective of this technique is to use ruby annotation to provide information about
-            the pronunciation and meaning of a run of text where meaning is determined by
-            pronunciation.</p>
-      <p>There are many languages in which a run of text may mean different things depending on
-            how the text is pronounced. This is common in East Asian languages as well as Hebrew,
-            Arabic, and other languages; it also occurs in English and other Western European
-            languages. </p>
-      <p>Ruby Annotation allows the author to annotate a "base text," providing a guide to
-            pronunciation and, in some cases, a definition as well. Ruby is commonly used for text
-            in Japanese and other East Asian languages. Ruby Annotation is defined as a module for
-            XHTML 1.1 or HTML5. </p>
-      <p>There are two types of Ruby markup: simple and complex. Simple Ruby markup applies to a
-            run of text such as a complete word or phrase. This is known as the "base" text
-            (<code class="el">rb</code> element). The Ruby annotation that indicates how to pronounce the term (the
-              <code class="el">rt</code> element, or Ruby text) is shown in a smaller font. (The term "Ruby" is
-            derived from a small font used for this purpose in printed texts.) The Ruby text is
-            usually rendered above or immediately before the base text, that is, immediately above
-            horizontal text or immediately to the right of vertical text. Sometimes Japanese uses
-            Ruby to provide the meaning of text on the other side of the base text (visually) from
-            the phonetic annotation. Simple Ruby markup also provides a "fallback" option for user
-            agents that do not support Ruby markup (that is, user agents that do not support XHTML
-            1.1 or HTML5). </p>
-      <p>Complex Ruby markup makes it possible to divide the base text into smaller units, each
-            of which may be associated with a separate Ruby annotation. Complex Ruby markup does not
-            support the fallback option. </p>
-      <p>Ruby annotation is uncommon in languages such as Hebrew, where Unicode fonts can
-            include diacritical marks that convey pronunciation. It is also uncommon in English and
-            European languages. </p>
-      <p>Note: The primary reason for indicating pronunciation through Ruby or any other means
-            is to make the content accessible to people with disabilities who could read and
-            understand the language of the content if information about pronunciation were provided.
-            It is not necessary to provide information about pronunciation for use by people who are
-            not familiar with the language of the content. </p>
-   </section><section id="examples"><h2>Examples</h2>
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>Using the ruby element</title>
+		<link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+	</head>
+	<body>
+		<h1>Using the <code class="language-html">ruby</code> element</h1>
+		<section class="meta">
+			<p class="id">ID: H62</p>
+			<p class="technology">Technology: html</p>
+			<p class="type">Type: Technique</p>
+		</section>
+		<section id="applicability">
+			<h2>When to Use</h2>
+      <p><abbr title="HyperText Markup Language">HTML</abbr></p>
+   </section>
+	 <section id="description">
+		<h2>Description</h2>
+      <p>The objective of this technique is to use ruby annotation to provide information about the pronunciation and meaning of a run of text where meaning is determined by pronunciation.</p>
+      <p>There are many languages in which a run of text may mean different things depending on how the text is pronounced. This is common in East Asian languages as well as Hebrew, Arabic, and other languages; it also occurs in English and other Western European languages.</p>
+      <p>Ruby Annotation allows the author to annotate a "base text," providing a guide to pronunciation and, in some cases, a definition as well. Ruby is commonly used for text in Japanese and other East Asian languages.</p>
+      <p>There are two types of Ruby markup: simple and complex. Simple Ruby markup applies to a run of text such as a complete word or phrase. This is known as the "base" text (<code class="language-html">rb</code> element). The Ruby annotation that indicates how to pronounce the term (the <code class="language-html">rt</code> element, or Ruby text) is shown in a smaller font. (The term "Ruby" is derived from a small font used for this purpose in printed texts.) The Ruby text is usually rendered above or immediately before the base text, that is, immediately above horizontal text or immediately to the right of vertical text. Sometimes Japanese uses Ruby to provide the meaning of text on the other side of the base text (visually) from the phonetic annotation. Simple Ruby markup also provides a "fallback" option for user agents that do not support Ruby markup (that is, user agents that do not support HTML).</p>
+      <p>Complex Ruby markup makes it possible to divide the base text into smaller units, each of which may be associated with a separate Ruby annotation. Complex Ruby markup does not support the fallback option.</p>
+      <p>Ruby annotation is uncommon in languages such as Hebrew, where Unicode fonts can include diacritical marks that convey pronunciation. It is also uncommon in English and European languages.</p>
+      <p>Note: The primary reason for indicating pronunciation through Ruby or any other means is to make the content accessible to people with disabilities who could read and understand the language of the content if information about pronunciation were provided. It is not necessary to provide information about pronunciation for use by people who are not familiar with the language of the content.</p>
+		</section>
+		<section id="examples">
+			<h2>Examples</h2>
       <section class="example">
-         <h3> Ruby markup providing pronunciation information for an initialism </h3>
-         
-            <p> This example uses Ruby annotation to give the pronunciation of the initialism
-                (acronym) formed by the first letters of the words Web Content Accessibility
-                Guidelines. The letters WCAG are the base (the rb element), and the pronunciation
-                information is shown by the Ruby text (the rt element). The Ruby parenthesis element
-                  <code class="el">rp</code> is used for user agents that do not support Ruby annotations to
-                indicate that the text in the <code class="el">rt</code> element provides the pronunciation
-                information. The pronunciation information is rendered in parentheses immediately
-                following the base text. (User agents that support Ruby do not show the
-                parentheses.) </p>
-         
-         <pre xml:space="preserve">&lt;p&gt;When we talk about these guidelines, we often just call them
+				<h3>Ruby markup providing pronunciation information for an initialism</h3> 
+        <p>This example uses Ruby annotation to give the pronunciation of the initialism (acronym) formed by the first letters of the words Web Content Accessibility Guidelines. The letters WCAG are the base (the rb element), and the pronunciation information is shown by the Ruby text (the <code class="language-html">rt</code> element). The Ruby parenthesis element <code class="language-html">rp</code> is used for user agents that do not support Ruby annotations to indicate that the text in the <code class="language-html">rt</code> element provides the pronunciation information. The pronunciation information is rendered in parentheses immediately following the base text. (User agents that support Ruby do not show the parentheses.) </p> 
+<pre xml:space="preserve"><code class="language-html">&lt;p&gt;When we talk about these guidelines, we often just call them
   &lt;ruby&gt;
     &lt;rb&gt;WCAG&lt;/rb&gt;
     &lt;rp&gt;(&lt;/rp&gt;
       &lt;rt&gt;Wuh-KAG&lt;/rt&gt;
     &lt;rp&gt;)&lt;/rp&gt;
   &lt;/ruby&gt;.
-&lt;/p&gt;</pre>
+&lt;/p&gt;</code></pre>
       </section>
       <section class="example">
-         <h3> Ruby annotation for Japanese </h3>
-         
-            <p> The following is an example in Japanese. For Japanese, the Ruby is used to give
-                the reading of Han characters(Kanji). the Ruby parenthesis element <code class="el">rp</code> is
-                used for user agents that do not support Ruby annotations to indicate that the text
-                in the <code class="el">rt</code> element provides the pronunciation information. The pronunciation
-                information is rendered in parentheses immediately following the base text. (User
-                agents that support Ruby do not show the parentheses.) </p>
-         
-         <pre xml:space="preserve">&lt;p&gt;
+         <h3>Ruby annotation for Japanese</h3>
+         <p>The following is an example in Japanese. For Japanese, the Ruby is used to give the reading of Han characters (Kanji). the Ruby parenthesis element <code class="language-html">rp</code> is used for user agents that do not support Ruby annotations to indicate that the text in the <code class="language-html">rt</code> element provides the pronunciation information. The pronunciation information is rendered in parentheses immediately following the base text. (User agents that support Ruby do not show the parentheses.)</p>
+
+<pre xml:space="preserve"><code class="language-html">&lt;p&gt;
   &lt;ruby&gt;
-    &lt;rb&gt;慶應大学&lt;/rb&gt;
+    &lt;rb&gt;<span lang="ja">慶應大学</span>&lt;/rb&gt;
     &lt;rp&gt;(&lt;/rp&gt;
-    &lt;rt&gt;けいおうだいがく&lt;/rt&gt;
+    &lt;rt&gt;<span lang="ja">けいおうだいがく</span>&lt;/rt&gt;
     &lt;rp&gt;)&lt;/rp&gt;
   &lt;/ruby&gt;
-&lt;/p&gt;    </pre>
+&lt;/p&gt;</code></pre>
       </section>
-   </section><section id="tests"><h2>Tests</h2>
-      <section class="procedure"><h3>Procedure</h3>
-         <p>For each run of text where a Ruby annotation is used to provide pronunciation
-              information: </p>
+   </section>
+	 <section id="tests">
+		<h2>Tests</h2>
+		<section class="procedure">
+			<h3>Procedure</h3>
+         <p>For each run of text where a Ruby annotation is used to provide pronunciation information:</p>
          <ol>
-            <li>Check that a <code class="el">rt</code> element contains pronunciation information for each
-                  run of text defined by the <code class="el">rb</code> element.</li>
-            <li>If simple Ruby markup is used, check that the <code class="el">rp</code> element is present
-                  to indicate to user agents that do not support Ruby annotations that the text in
-                  the rt element provides the pronunciation information. .</li>
+            <li>Check that a <code class="language-html">rt</code> element contains pronunciation information for each run of text defined by the <code class="language-html">rb</code> element.</li>
+            <li>If simple Ruby markup is used, check that the <code class="language-html">rp</code> element is present to indicate to user agents that do not support Ruby annotations that the text in the <code class="language-html">rt</code> element provides the pronunciation information.</li>
          </ol>
       </section>
-      <section class="results"><h3>Expected Results</h3>
-         <ul>
-            <li>Checks #1 and #2 are true.</li>
-         </ul>
+      <section class="results">
+         <h3>Expected Results</h3>
+				<ul>
+					<li>Checks #1 and #2 are true.</li>
+				</ul>
       </section>
-   </section><section id="related"><h2>Related Techniques</h2><ul>
-      <li><a href="../general/G102">G102</a></li>
-   </ul></section><section id="resources"><h2>Resources</h2>
-      
-         <ul>
-            <li>
-									         <a href="https://www.w3.org/TR/ruby/">Ruby Annotation</a>
-								       </li>
-            <li>
-									         <a href="http://www.imsglobal.org/accessibility/accessiblevers/sec11.html">IMS Guidelines for
-                    Topic-Specific Accessibility</a>
-								       </li>
-            <li>
-									         <a href="https://www.w3.org/TR/css3-ruby/">CSS 3 Ruby</a>
-								       </li>
-            <li>
-									         <a href="https://www.w3.org/International/techniques/markup#ruby">W3C I18N
-                    Techniques: Markup and text, "Using Ruby"</a>
-								       </li>
-            <li>
-									         <a href="https://www.w3.org/TR/html5/text-level-semantics.html#the-ruby-element">HTML5 ruby element</a>
-								       </li>
-            <li>
-									         <a href="https://www.w3.org/TR/html/text-level-semantics.html#the-rb-element">HTMl5 rb element</a>
-								       </li>
-            <li>
-									         <a href="https://www.w3.org/TR/html/text-level-semantics.html#the-rt-element">HTML5 rt element</a>
-								       </li>
-         </ul>
-      
-   </section></body></html>
\ No newline at end of file
+		</section>
+		<section id="related">
+			<h2>Related Techniques</h2>
+      <ul>
+         <li><a href="../general/G102">G102</a></li>
+      </ul>
+   </section>
+   <section id="resources">
+		<h2>Resources</h2>
+    <ul>
+			<li>
+				<a href="https://www.w3.org/TR/ruby/"><abbr title="World Wide Web Consortium">W3C</abbr> Ruby Annotation</a>
+			</li>
+			<li>
+				<a href="https://www.w3.org/TR/css-ruby/"><abbr title="Cascading Style Sheets">CSS</abbr> Ruby Annotation Layout Module</a>
+			</li>
+			<li>
+				<a href="https://www.w3.org/International/techniques/markup#ruby">W3C Internationalization Techniques: "Using Ruby Markup"</a>
+			</li>
+			<li>
+				<a href="https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-ruby-element">HTML - <code class="language-html">ruby</code> element</a>
+			</li>
+			<li>
+				<a href="https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-rp-element">HTML - <code class="language-html">rp</code> element</a>
+			</li>
+			<li>
+				<a href="https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-rt-element">HTML - <code class="language-html">rt</code> element</a>
+			</li>
+		</ul>
+	</section>
+</body>
+</html>
\ No newline at end of file
diff --git a/techniques/html/H63.html b/techniques/html/H63.html
index 7b1be18bb8..0194897d07 100644
--- a/techniques/html/H63.html
+++ b/techniques/html/H63.html
@@ -1,100 +1,103 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using the scope attribute to associate header cells and data cells in data
-          tables</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Using the scope attribute to associate header cells and data cells in data
-          tables</h1><section class="meta"><p class="id">ID: H63</p><p class="technology">Technology: html</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
-      <p>HTML and XHTML</p>
-   </section><section id="description"><h2>Description</h2>
-      <p>The objective of this technique is to associate header cells with data cells in complex tables using the
-              <code class="att">scope</code> attribute. The <code class="att">scope</code> attribute may be used to clarify
-            the scope of any cell used as a header. The scope identifies whether the cell is a
-            header for a row, column, or group of rows or columns. The values row,
-              col, rowgroup, and colgroup identify these
-            possible scopes respectively.</p>
-      <p>For simple data tables where the header is not in the first row or column, like the one
-            in Example 1, this technique can be used. Based on screen reader support today, its use
-            is suggested in two situations both relating to simple tables:</p>
-      <ul>
-         <li>data cells marked up with <code class="el">td</code> that also function as row header or column
-                header </li>
-         <li>header cells marked up with <code class="el">td</code> instead of <code class="el">th</code>. Sometimes, authors
-                use this to avoid the display characteristics associated with <code class="el">th</code> and also
-                do not choose to use CSS to control the display for <code class="el">th</code>. </li>
-      </ul>
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+   <head>
+      <title>Using the scope attribute to associate header cells with data cells in data tables</title>
+      <link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+   </head>
+   <body>
+      <h1>Using the <code class="language-html">scope</code> attribute to associate header cells with data cells in data tables</h1>
+      <section class="meta">
+         <p class="id">ID: H63</p>
+         <p class="technology">Technology: html</p>
+         <p class="type">Type: Technique</p>
+      </section>
+      <section id="applicability">
+         <h2>When to Use</h2>
+         <p>HTML</p>
+      </section>
+      <section id="description">
+         <h2>Description</h2>
+      <p>The objective of this technique is to associate header cells with data cells in complex tables using the <code class="language-html">scope</code> attribute. The <code class="language-html">scope</code> attribute may be used to clarify the scope of any cell used as a header. The <code class="language-html">scope</code> identifies whether the cell is a header for a row, column, or group of rows or columns. The values <code class="language-html">row</code>, <code class="language-html">col</code>, <code class="language-html">rowgroup</code>, and <code class="language-html">colgroup</code> identify these possible scopes, respectively.</p>
+      <p>For simple data tables where the header is not in the first row or column, like the one in Example 1, this technique can be used.</p>
       <div class="note">
-         <p>For simple tables that have the headers in the first row or column then it is
-              sufficient to simply use the TH elements without scope. </p>
-         <p>For complex tables use ids and headers as in <a href="#H43"></a>. </p>
+         <p>For simple tables that have the headers in the first row or column, it is sufficient to simply use the <code class="language-html">th</code> elements without <code class="language-html">scope</code>.</p>
+         <p>For complex tables use <code class="language-html">id</code>s and <code class="language-html">headers</code> as in <a href="../html/H43">Using <code class="language-html">id</code> and <code class="language-html">headers</code> attributes to associate data cells with header cells in data tables</a>.</p>
+
          <p>Some users may find it easier to work with several simple tables than one more complex table. Authors may wish to consider whether they can convert complex tables to one or more simple tables.</p>
       </div>
-   </section><section id="examples"><h2>Examples</h2>
-      <section class="example">
-         <h3>A simple schedule</h3>
-         
-            <p>In the following example, column #1 contains serial numbers for rows in the table
-                and the second column contains the key value for the row. The cells in the second
-                column may then use 
-									<code class="att">scope</code>="row". The cells in the first row too are
-                marked up with <code class="el">td</code> and use 
-									<code class="att">scope</code>="col". </p>
-         
-         <pre xml:space="preserve"> &lt;table border="1"&gt;
+   </section>
+	 <section id="examples">
+		<h2>Examples</h2>
+		<section class="example">
+			<h3>A simple schedule</h3>
+			<p>In the following example, the first column contains serial numbers for rows in the table, and the second column contains the key value for the row. The cells in the second column may then use <code class="language-html">scope="row"</code>. The cells in the first row too are marked up with <code class="language-html">td</code> and use <code class="language-html">scope="col"</code>.</p>
+
+<pre xml:space="preserve"><code class="language-html">&lt;table&gt;
   &lt;caption&gt;Contact Information&lt;/caption&gt;
   &lt;tr&gt;
     &lt;td&gt;&lt;/td&gt;
     &lt;th scope="col"&gt;Name&lt;/th&gt;
-    &lt;th scope="col"&gt;Phone#&lt;/th&gt;
-    &lt;th scope="col"&gt;Fax#&lt;/th&gt;
+    &lt;th scope="col"&gt;Phone Number&lt;/th&gt;
     &lt;th scope="col"&gt;City&lt;/th&gt;
-  &lt;/tr&gt;&lt;tr&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
     &lt;td&gt;1.&lt;/td&gt;
-    &lt;th scope="row"&gt;Joel Garner&lt;/th&gt;
+    &lt;th scope="row"&gt;Charlotte Smith&lt;/th&gt;
     &lt;td&gt;412-212-5421&lt;/td&gt;
-    &lt;td&gt;412-212-5400&lt;/td&gt;
     &lt;td&gt;Pittsburgh&lt;/td&gt;
-  &lt;/tr&gt;&lt;tr&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
     &lt;td&gt;2.&lt;/td&gt;
-    &lt;th scope="row"&gt;Clive Lloyd&lt;/th&gt;
-    &lt;td&gt;410-306-1420&lt;/td&gt;
+    &lt;th scope="row"&gt;Joetta Frere&lt;/th&gt;
     &lt;td&gt;410-306-5400&lt;/td&gt;
     &lt;td&gt;Baltimore&lt;/td&gt;
-  &lt;/tr&gt;&lt;tr&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
     &lt;td&gt;3.&lt;/td&gt;
-    &lt;th scope="row"&gt;Gordon Greenidge&lt;/th&gt;
-    &lt;td&gt;281-564-6720&lt;/td&gt;
+    &lt;th scope="row"&gt;David Walls&lt;/th&gt;
     &lt;td&gt;281-511-6600&lt;/td&gt;
-    &lt;td&gt;Houston&lt;/td&gt;
+    &lt;td&gt;New York&lt;/td&gt;
   &lt;/tr&gt;
-&lt;/table&gt; </pre>
-      </section>
-   </section><section id="tests"><h2>Tests</h2>
-      <section class="procedure"><h3>Procedure</h3>
-         <p>For each data table: </p>
-         <ol>
-            <li>Check that all <code class="el">th</code> elements have a <code class="att">scope</code> attribute.</li>
-            <li>Check that all <code class="el">td</code> elements that act as headers for other elements
-                  have a <code class="att">scope</code> attribute.</li>
-            <li>Check that all <code class="att">scope</code> attributes have the value row,
-                    col, rowgroup, or colgroup.</li>
-         </ol>
-      </section>
-      <section class="results"><h3>Expected Results</h3>
-         <ul>
-            <li>All checks above are true.</li>
-         </ul>
+&lt;/table&gt;</code> </pre>
       </section>
-   </section><section id="related"><h2>Related Techniques</h2><ul>
+   </section>
+	 <section id="tests">
+		<h2>Tests</h2>
+		<section class="procedure">
+			<h3>Procedure</h3>
+			<p>For each data table:</p>
+			<ol>
+				<li>Check that all <code class="language-html">th</code> elements have a <code class="language-html">scope</code> attribute.</li>
+				<li>Check that all <code class="language-html">scope</code> attributes have the value <code class="language-html">row</code>, <code class="language-html">col</code>, <code class="language-html">rowgroup</code>, or <code class="language-html">colgroup</code>.</li>
+			</ol>
+		</section>
+		<section class="results">
+			<h3>Expected Results</h3>
+			<ul>
+				<li>All checks above are true.</li>
+			</ul>
+    </section>
+	</section>
+	<section id="related">
+		<h2>Related Techniques</h2>
+		<ul>
       <li><a href="../html/H43">H43</a></li>
       <li><a href="../html/H51">H51</a></li>
-   </ul></section><section id="resources"><h2>Resources</h2>
-      
-         <ul>
-            <li>HTML 4.01 <a href="https://www.w3.org/TR/1999/REC-html401-19991224/struct/tables.html#adef-scope ">Table Cells: scope attribute</a>
-								       </li>
-            <li>HTML 4.01 <a href="https://www.w3.org/TR/html401/struct/tables.html#h-11.2.6">Table cells: The TH and TD elements</a>
-								       </li>
-            <li>
-									         <a href="http://www.eramp.com/david/tablesample2.htm">Assistive technology
-                    reading tables</a>
-								       </li>
-         </ul>
-      
-   </section></body></html>
\ No newline at end of file
+		</ul>
+	</section>
+	<section id="resources">
+		<h2>Resources</h2>  
+		<ul>
+			<li>
+				<a href="https://html.spec.whatwg.org/multipage/tables.html#the-th-element">HTML - <code class="language-html">th</code> element</a>
+			</li>
+			<li>
+				<a href="https://html.spec.whatwg.org/multipage/tables.html#the-td-element">HTML - <code class="language-html">td</code> element</a>
+			</li>
+			<li>
+				<a href="https://html.spec.whatwg.org/multipage/tables.html#attr-th-scope">HTML - <code class="language-html">scope</code> attribute</a>
+			</li>
+		</ul> 
+   </section>
+   </body>
+</html>
\ No newline at end of file
diff --git a/techniques/html/H64.html b/techniques/html/H64.html
index a9de147a7b..e62d4d9355 100644
--- a/techniques/html/H64.html
+++ b/techniques/html/H64.html
@@ -1,90 +1,67 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using the title attribute of the frame and iframe elements</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Using the <code class="att">title</code> attribute of the <code class="el">frame</code> and <code class="el">iframe</code> elements</h1><section class="meta"><p class="id">ID: H64</p><p class="technology">Technology: html</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
-      <p>HTML and XHTML documents that use frames or iframes </p>
-   </section><section id="description"><h2>Description</h2>
-      <p>The objective of this technique is to demonstrate the use of the <code class="att">title</code>
-            attribute of the <code class="el">frame</code> or <code class="el">iframe</code> element to describe the contents
-            of each frame. This provides a label for the frame so users can determine which frame to
-            enter and explore in detail. It does not label the individual page (frame) or inline
-            frame (iframe) in the frameset.</p>
-      <p>Note that the <code class="att">title</code> attribute labels frames, and is different from the
-              <code class="el">title</code> element which labels documents. Both should be provided, since the
-            first facilitates navigation among frames and the second clarifies the user's current
-            location.</p>
-      <p>The <code class="att">title</code> attribute is not interchangeable with the <code class="att">name</code>
-            attribute. The <code class="att">title</code> labels the frame for users; the <code class="att">name</code>
-            labels it for scripting and window targeting. The <code class="att">name</code> is not presented to
-            the user, only the <code class="att">title</code> is.</p>
-      <p>In HTML5 the <code class="el">frame</code> element is marked as obsolete. The <code class="el">iframe</code> element remains part of the HTML5 specification.</p>
-   </section><section id="examples"><h2>Examples</h2>
-      <section class="example">
-         
-            <p>This example shows how to use the <code class="att">title</code> attribute with
-                <code class="el">frame</code> to describe the frames containing the navigation bar and the
-                document.</p>
-         
-         <pre xml:space="preserve">&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
-  &lt;head&gt;
-    &lt;title&gt;A simple frameset document&lt;/title&gt;
-  &lt;/head&gt;
-  &lt;frameset cols="10%, 90%"&gt;
-    &lt;frame src="nav.html" title="Main menu" /&gt;
-    &lt;frame src="doc.html" title="Documents" /&gt;
-    &lt;noframes&gt;
-      &lt;body&gt;
-        &lt;a href="lib.html" title="Library link"&gt;Select to
-        go to the electronic library&lt;/a&gt;
-      &lt;/body&gt;
-    &lt;/noframes&gt;
-  &lt;/frameset&gt;
-&lt;/html&gt; </pre>
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+   <head>
+      <title>Using the title attribute of the iframe element</title>
+      <link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+   </head>
+   <body>
+      <h1>Using the <code class="language-html">title</code> attribute of the <code class="language-html">iframe</code> element</h1>
+      <section class="meta">
+				<p class="id">ID: H64</p>
+				<p class="technology">Technology: html</p>
+				<p class="type">Type: Technique</p>
       </section>
-      <section class="example">
-         
-            <p>This example shows how to use the title attribute with <code class="el">iframe</code> to
-                describe the contents of an inline frame. The example also includes an alternative
-                link to the page included by the iframe element for older browsers, which may not
-                understand the <code class="el">iframe</code>element.</p>
-         
-         <pre xml:space="preserve"> &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
-  &lt;head&gt;
-    &lt;title&gt;A document using iframe&lt;/title&gt;
-  &lt;/head&gt;
+      <section id="applicability">
+        <h2>When to Use</h2>
+        <p><abbr title="HyperText Markup Language">HTML</abbr> documents that use <code class="language-html">iframe</code>s</p>
+      </section>
+      <section id="description">
+        <h2>Description</h2>
+        <p>The objective of this technique is to demonstrate the use of the <code class="language-html">title</code> attribute of the <code class="language-html">iframe</code> element to describe its contents. This provides a label for the frame so users can determine which frame to enter and explore in detail. It does not label the content inside the <code class="language-html">iframe</code>.</p>
+        <div class="note">
+          <p>The <code class="language-html">title</code> attribute labels <code class="language-html">iframe</code>s, and is different from the <code class="language-html">title</code> element which labels documents. Both should be provided, since the first facilitates navigation among <code class="language-html">iframe</code>s and the second clarifies the user's current page.</p>
+        </div>
+        <p>The <code class="language-html">title</code> attribute is not interchangeable with the <code class="language-html">name</code> attribute. The <code class="language-html">title</code> labels the frame for users; the <code class="language-html">name</code> labels it for scripting and window targeting. The <code class="language-html">name</code> is not presented to the user, only the <code class="language-html">title</code> is.</p>
+   </section>
+   <section id="examples">
+		<h2>Examples</h2>
+    <section class="example">
+    	<h3>Using the <code class="language-html">title</code> attribute with an <code class="language-html">iframe</code> to describe the <code class="language-html">iframe</code>'s content</h3>
+
+<pre xml:space="preserve"><code class="language-html">&lt;!doctype html&gt;
+&lt;html lang="en"&gt;
+&lt;head&gt;
+   &lt;title&gt;A document using an iframe&lt;/title&gt;
+&lt;/head&gt;
 ...
-&lt;iframe src="banner-ad.html" id="testiframe" 
-  name="testiframe" title="Advertisement"&gt;
-    &lt;a href="banner-ad.html"&gt;Advertisement&lt;/a&gt;
-&lt;/iframe&gt;
+&lt;iframe src="banner-ad.html" name="ad-iframe" title="Advertisement"&gt;&lt;/iframe&gt;
 ...
-&lt;/html&gt;  </pre>
+&lt;/html&gt;</code></pre>
       </section>
-   </section><section id="tests"><h2>Tests</h2>
-      <section class="procedure"><h3>Procedure</h3>
+   </section>
+   <section id="tests">
+      <h2>Tests</h2>
+      <section class="procedure">
+         <h3>Procedure</h3>
          <ol>
-            <li>Check each frame and iframe element in the HTML or XHTML source code for the presence of a
-                  title attribute.</li>
-            <li>Check that the title attribute contains text that identifies the frame.</li>
+            <li>Check each <code class="language-html">iframe</code> element in the HTML source code for the presence of a <code class="language-html">title</code> attribute.</li>
+            <li>Check that the <code class="language-html">title</code> attribute contains text that describes the <code class="language-html">iframe</code>'s content.</li>
          </ol>
       </section>
-      <section class="results"><h3>Expected Results</h3>
+      <section class="results">
+         <h3>Expected Results</h3>
          <ul>
             <li>Checks #1 and #2 are true.</li>
          </ul>
       </section>
-   </section><section id="resources"><h2>Resources</h2>
-      
-         <ul>
-            <li>
-									         <a href="https://www.w3.org/TR/html4/present/frames.html#h-16.2.2"> HTML 4.01
-                    FRAME element</a>
-								       </li>
-            <li>
-									         <a href="https://www.w3.org/TR/html4/present/frames.html#h-16.5">HTML 4.0.1
-                    Inline frames: the IFRAME element</a>
-								       </li>
-            <li>
-									         <a href="http://www.jimthatcher.com/webcourse4.htm">Accessible Navigation,
-                    "Implementing Frame Titles"</a>
-								       </li>
-         </ul>
-      
-   </section></body></html>
\ No newline at end of file
+   </section>
+   <section id="resources">
+		<h2>Resources</h2>
+		<ul>
+			<li>
+				<a href="https://html.spec.whatwg.org/multipage/iframe-embed-object.html#the-iframe-element">HTML - <code class="language-html">iframe</code> element</a>.
+			</li>
+		</ul>
+   </section>
+</body>
+</html>
\ No newline at end of file
diff --git a/techniques/html/H65.html b/techniques/html/H65.html
index 3473d77177..a97358517a 100644
--- a/techniques/html/H65.html
+++ b/techniques/html/H65.html
@@ -1,91 +1,90 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using the title attribute to identify form controls when the label element
-          cannot be used</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Using the title attribute to identify form controls when the label element
-          cannot be used</h1><section class="meta"><p class="id">ID: H65</p><p class="technology">Technology: html</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
-      <p>HTML form controls that are not identified using <code class="att">value</code>,
-            <code class="att">alt</code>, or element content </p>
-   </section><section id="description"><h2>Description</h2>
-      <p>The objective of this technique is to use the <code class="att">title</code> attribute to provide an accessible name for form controls when the visual design does not include text on the screen that can be associated with the control as a label. User agents, including assistive technology, can speak the
-              <code class="att">title</code> attribute.</p>
-   </section><section id="examples"><h2>Examples</h2>
-      <section class="example">
-         <h3>A pulldown menu that limits the scope of a search</h3>
-         
-            <p>A search form uses a pulldown menu to limit the scope of the search. The pulldown
-                menu is immediately adjacent to the text field used to enter the search term. The
-                relationship between the search field and the pulldown menu is clear to users who
-                can see the visual design, which does not have room for a separate visible label. The
-                  <code class="att">title</code> attribute is used to identify the <code class="el">select</code> menu. The
-                  <code class="att">title</code> attribute can be spoken by screen readers or displayed as a
-                tool tip for people using screen magnifiers. There must be visual information on the page which allows sighted users to understand the purpose of the form controls and user agents.</p>
-         
-         <pre xml:space="preserve">&lt;label for="searchTerm"&gt;Search for:&lt;/label&gt;
-&lt;input id="searchTerm" type="text" size="30" value="" name="searchTerm"&gt;
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>Using the title attribute to identify form controls when the label element cannot be used</title>
+    <link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+	</head>
+	<body>
+		<h1>Using the <code class="language-html">title</code> attribute to identify form controls when the <code class="language-html">label</code> element cannot be used</h1>
+		<section class="meta">
+			<p class="id">ID: H65</p>
+			<p class="technology">Technology: html</p>
+			<p class="type">Type: Technique</p>
+		</section>
+		<section id="applicability"><h2>When to Use</h2>
+			<p><abbr title="HyperText Markup Language">HTML</abbr> form controls that are not identified using <code class="language-html">value</code>, <code class="language-html">alt</code>, or element content</p>
+   </section>
+	 <section id="description">
+		<h2>Description</h2>
+    <p>The objective of this technique is to use the <code class="language-html">title</code> attribute to provide an accessible name for form controls when the visual design does not include text on the screen that can be associated with the control as a label. User agents, including assistive technology, can speak the <code class="language-html">title</code> attribute.</p>
+   </section>
+	 <section id="examples">
+		<h2>Examples</h2>
+		<section class="example">
+			<h3>A pulldown menu that limits the scope of a search</h3>
+      <p>A search form uses a pulldown menu to limit the scope of the search. The pulldown menu is immediately adjacent to the text field used to enter the search term. The relationship between the search field and the pulldown menu is clear to users who can see the visual design, which does not have room for a separate visible label. The <code class="language-html">title</code> attribute is used to identify the <code class="language-html">select</code> menu. The <code class="language-html">title</code> attribute can be spoken by screen readers or displayed as a tool tip for people using screen magnifiers. There must be visual information on the page which allows sighted users to understand the purpose of the form controls and user agents.</p>   
+<pre xml:space="preserve"><code class="language-html">&lt;label for="search-term"&gt;Search for:&lt;/label&gt;
+&lt;input id="search-term" name="search-term" type="text" value=""&gt;
 &lt;select title="Search in" id="scope"&gt;
-…
-&lt;/select&gt; </pre>
+  ...
+&lt;/select&gt;</code> </pre>
       </section>
       <section class="example">
-         <h3>Input fields for a phone number</h3>
-         
-            <p>A Web page contains controls for entering a phone number in the United States, with
-                three fields for area code, exchange, and last four digits.</p>
+				<h3>Input fields for a phone number</h3> 
+				<p>A Web page contains controls for entering a phone number in the United States, with three fields for area code, exchange, and last four digits.</p>
          
-         <pre xml:space="preserve">&lt;fieldset&gt;&lt;legend&gt;Phone number&lt;/legend&gt;
-&lt;input id="areaCode" name="areaCode" title="Area Code" 
-type="text" size="3" value="" &gt;
-&lt;input id="exchange" name="exchange" title="First three digits of phone number" 
-type="text" size="3" value="" &gt;
-&lt;input id="lastDigits" name="lastDigits" title="Last four digits of phone number" 
-type="text" size="4" value="" &gt;
-&lt;/fieldset&gt; </pre>
+<pre xml:space="preserve"><code class="language-html">&lt;fieldset&gt;
+  &lt;legend&gt;Phone number&lt;/legend&gt;
+  &lt;input id="area-code" name="area-code" title="Area Code" 
+   type="text" size="3" value=""&gt;
+  &lt;input id="exchange" name="exchange" title="First three digits of phone number" 
+   type="text" size="3" value=""&gt;
+  &lt;input id="last-digits" name="last-digits" title="Last four digits of phone number" 
+   type="text" size="4" value=""&gt;
+&lt;/fieldset&gt;</code> </pre>
       </section>
       <section class="example">
-         <h3> A Search Function</h3>
-         
-            <p>A Web page contains a text field where the user can enter search terms and a button labeled "Search" for performing the search. The <code class="att">title</code> attribute is used to identify the form control and the button is positioned right after the text field so that it is clear to the user that the text field is where the search term should be entered.</p>
-         
-         <pre xml:space="preserve">
-&lt;input type="text" title="Type search term here"/&gt; &lt;input type="submit" value="Search"/&gt;
-</pre>
+				<h3>A Search Function</h3>
+				<p>A Web page contains a text field where the user can enter search terms and a button labeled "Search" for performing the search. The <code class="language-html">title</code> attribute is used to identify the form control and the button is positioned right after the text field so that it is clear to the user that the text field is where the search term should be entered.</p> 
+<pre xml:space="preserve"><code class="language-html">&lt;input type="text" title="Type search term here"&gt; &lt;input type="submit" value="Search"&gt;
+</code></pre>
       </section>
       <section class="example">
-         <h3>A data table of form controls</h3>
-         
-            <p>A data table of form controls needs to associate each control with the column and row headers for that cell. Without a title (or off-screen label) it is difficult for non-visual users to pause and interrogate for corresponding row or column header values using their assistive technology while tabbing through the form.</p>
-            <p>For example, a survey form has four column headers in first row: Question, Agree, Undecided, Disagree. Each following row contains a question and a radio button in each cell corresponding to answer choice in the three columns. The title attribute for every radio button contains the information necessary to identify the control.</p>
-         
+				<h3>A data table of form controls</h3>
+        <p>A data table of form controls needs to associate each control with the column and row headers for that cell. Without a title (or off-screen label) it is difficult for non-visual users to pause and interrogate for corresponding row or column header values using their assistive technology while tabbing through the form.</p>
+				<p>For example, a survey form has four column headers in first row: Question, Agree, Undecided, Disagree. Each following row contains a question and a radio button in each cell corresponding to answer choice in the three columns. The title attribute for every radio button contains the information necessary to identify the control.</p>
       </section>
-   </section><section id="tests"><h2>Tests</h2>
-      <section class="procedure"><h3>Procedure</h3>
-        <p>For all form controls that are not associated with a <el>label</el> element:</p> 
-        <ol>
-          <li><p>Check that the control has a <att>title</att> attribute</p></li>
-          <li><p>Check that the purpose of the form control is clear to users who can see the control.</p></li>
-            <li>Check that the <code class="att">title</code> attribute identifies the purpose of the
-                control and that it matches the apparent visual purpose.</li>
+   </section>
+	 <section id="tests">
+		<h2>Tests</h2>
+		<section class="procedure">
+			<h3>Procedure</h3>
+      <p>For all form controls that are not associated with a <code class="language-html">label</code> element:</p> 
+			<ol>
+          <li>Check that the control has a <code class="language-html">title</code> attribute</li>
+          <li>Check that the purpose of the form control is clear to users who can see the control.</li>
+          <li>Check that the <code class="language-html">title</code> attribute identifies the purpose of the control and that it matches the apparent visual purpose.</li>
          </ol>
       </section>
-      <section class="results"><h3>Expected Results</h3>
-         <ul>
-            <li>Checks above are true.</li>
-         </ul>
+      <section class="results">
+				<h3>Expected Results</h3>
+				<ul>
+					<li>Checks above are true.</li>
+        </ul>
       </section>
-   </section><section id="related"><h2>Related Techniques</h2><ul>
-      <li><a href="../html/H44">H44</a></li>
-      <li><a href="../html/H71">H71</a></li>
-   </ul></section><section id="resources"><h2>Resources</h2>
-      
-         <ul>
-          <li>HTML5 <a href="http://www.w3.org/TR/html5/dom.html#the-title-attribute">The title attribute</a></li>
-           <li>HTML 4.01 <a href="https://www.w3.org/TR/html4/struct/global.html#h-7.4.3">The
-                    title attribute</a>
-								       </li>
-            <li>
-									         <a href="http://www.jimthatcher.com/webcourse8.htm">Accessible Forms</a>
-								       </li>
-            <li>
-									         <a href="http://usability.com.au/2008/09/accessible-forms-using-wcag-2-0/">Accessible Forms using WCAG 2.0</a>
-								       </li>
-         </ul>
-      
-   </section></body></html>
+		</section>
+		<section id="related">
+			<h2>Related Techniques</h2>
+			<ul>
+      	<li><a href="../html/H44">H44</a></li>
+      	<li><a href="../html/H71">H71</a></li>
+   		</ul>
+		</section>
+		<section id="resources">
+			<h2>Resources</h2>  
+			<ul>
+				<li><a href="https://html.spec.whatwg.org/multipage/dom.html#the-title-attribute">HTML - <code class="language-html">title</code> attribute</a></li>
+			</ul>
+		</section>
+	</body>
+	</html>
diff --git a/techniques/html/H67.html b/techniques/html/H67.html
index 8d45921d7f..371e0fd536 100644
--- a/techniques/html/H67.html
+++ b/techniques/html/H67.html
@@ -1,37 +1,68 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using null alt text and no title attribute on img elements for images that AT
-          should ignore</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Using null alt text and no title attribute on img elements for images that AT
-          should ignore</h1><section class="meta"><p class="id">ID: H67</p><p class="technology">Technology: html</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
-      <p>HTML and XHTML documents that load images. </p>
-   </section><section id="description"><h2>Description</h2>
-      <p> The purpose of this technique is to show how images can be marked so that they can be
-            ignored by Assistive Technology. </p>
-      <p> If no title attribute is used, and the alt text is set to null (i.e.
-            
-							<code class="att">alt</code>="") it indicates to assistive technology that the image can be safely
-            ignored. </p>
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+   <head>
+      <title>Using null alt text and no title attribute on img elements for images that assistive technology should ignore</title>
+      <link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+   </head>
+   <body>
+      <h1>Using null <code class="language-html">alt</code> text and no <code class="language-html">title</code> attribute on <code class="language-html">img</code> elements for images that assistive technology should ignore</h1>
+      <section class="meta">
+         <p class="id">ID: H67</p>
+         <p class="technology">Technology: html</p>
+         <p class="type">Type: Technique</p>
+      </section>
+      <section id="applicability">
+         <h2>When to Use</h2>
+         <p><abbr title="HyperText Markup Language">HTML</abbr> documents that load images.</p>
+      </section>
+      <section id="description">
+         <h2>Description</h2>
+         <p>The purpose of this technique is to show how images can be marked so that they can be ignored by assistive technology.</p>
+         <p>If no <code class="language-html">title</code> attribute is used, and the <code class="language-html">alt</code> text is set to null (i.e., <code class="language-html">alt=""</code>) it indicates to assistive technology that the image can be safely ignored.</p>
       <div class="note">
-         <p>Have a "null" <code class="att">alt</code> attribute is not the same as having no <code class="att">alt</code> attribute. </p>
+         <p>Having a "null" <code class="language-html">alt</code> attribute is not the same as having no <code class="language-html">alt</code> attribute.</p>
       </div>
-   </section><section id="examples"><h2>Examples</h2>
+   </section>
+   <section id="examples">
+      <h2>Examples</h2>
       <section class="example">
-         
-            <p>The following image is used to insert a decorative image on a Web page.</p>
-         
-         <pre xml:space="preserve">
-&lt;img src="squiggle.gif" width="20" height="20" alt="" /&gt;
-</pre>
+				<h3>Inserting a decorative image on a Web page</h3> 
+<pre xml:space="preserve"><code class="language-html">&lt;img alt="" src="squiggle.gif" height="20" width="20"&gt;</code></pre>
       </section>
-   </section><section id="tests"><h2>Tests</h2>
-      <section class="procedure"><h3>Procedure</h3>
-         <p> For each image that should be ignored:</p>
+   </section>
+   <section id="tests">
+      <h2>Tests</h2>
+      <section class="procedure">
+         <h3>Procedure</h3>
+         <p>For each image that should be ignored:</p>
          <ol>
-            <li> Check that <code class="att">title</code> attribute is either absent or empty. </li>
-            <li> Check that <code class="att">alt</code> attribute is present and empty.</li>
+            <li>Check that <code class="language-html">title</code> attribute is either absent or empty.</li>
+            <li>Check that <code class="language-html">alt</code> attribute is present and empty.</li>
          </ol>
       </section>
-      <section class="results"><h3>Expected Results</h3>
+      <section class="results">
+         <h3>Expected Results</h3>
          <ul>
-            <li> #1 and #2 are true </li>
+            <li>#1 and #2 are true</li>
          </ul>
       </section>
-   </section><section id="related"><h2>Related Techniques</h2></section><section id="resources"><h2>Resources</h2></section></body></html>
\ No newline at end of file
+   </section>
+   <section id="related">
+      <h2>Related Techniques</h2>
+   </section>
+   <section id="resources">
+      <h2>Resources</h2>
+      <ul>
+         <li>
+            <a href="https://html.spec.whatwg.org/multipage/images.html#alt">HTML - requirements for providing text to act as an alternative for images</a>.
+         </li>
+         <li>
+            <a href="https://html.spec.whatwg.org/multipage/dom.html#the-title-attribute">HTML - the <code  class="language-html">title</code> attribute</a>.
+         </li>
+         <li>
+            <a href="https://html.spec.whatwg.org/multipage/embedded-content.html#the-img-element">HTML - the <code class="language-html">img</code> element</a>.
+         </li>
+      </ul>
+   </section>
+</body>
+</html>
\ No newline at end of file
diff --git a/techniques/html/H69.html b/techniques/html/H69.html
index 96375b50da..bf7e5b8232 100644
--- a/techniques/html/H69.html
+++ b/techniques/html/H69.html
@@ -1,140 +1,143 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing heading elements at the beginning of each section of content</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Providing heading elements at the beginning of each section of content</h1><section class="meta"><p class="id">ID: H69</p><p class="technology">Technology: html</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
-      <p>HTML and XHTML</p>
-   </section><section id="description"><h2>Description</h2>
-      <p>The objective of this technique is to use section headings to convey the structure of
-        		the content. Heading markup can be used:</p>
-      <ul>
-         <li>to indicate start of main content</li>
-         <li>to mark up section headings within the main content area</li>
-         <li>to demarcate different navigational sections like top or main navigation, left or
-        				secondary navigation and footer navigation</li>
-         <li>to mark up images of text that are used as headings</li>
-		 <li>to allow users the ability to navigate a page by sections or skip repeated blocks of information</li>
-      </ul>
-      <p>Headings are designed to convey logical hierarchy. Skipping
-        		levels in the sequence of headings may create the impression that the structure of the
-        		document has not been properly thought through or that specific headings have been
-        		chosen for their visual rendering rather than their meaning. Authors are encouraged to
-        		nest headings hierarchically. When headings are nested hierarchically, the most important information is given the highest logical level, and subsections are given subsequent logical levels.(i.e., h2 is a subsection of h1). Providing this type of structure will help users understand the overall organization of the content more easily.</p>
-      <p>Since headings indicate the start of important sections of content, it is possible for
-        		users with assistive technology to jump directly to the appropriate heading and begin
-        		reading the content. This significantly speeds interaction for users who would otherwise
-        		access the content slowly. Headings create chunks of information that can be found easily by people with disabilities, such as a blind person using a screen reader, or a person with a cognitive disability who uses assistive technology that delineates groups of information, or someone with a communication disability or illiteracy, who uses a screen reader to assist them in their reading.
-					</p>
-      <div class="note">
-         <p>All of our techniques assume that people needing special user agents (including AT or special plug-ins) will get and be using that type user agent (eg screen reader, or plug-in that allows keyboard navigation of properly marked up content, etc).</p>
-      </div>
-   </section><section id="examples"><h2>Examples</h2>
-      <section class="example">
-         
-            <p>This example organizes the sections of a search page by marking each section
-                heading using <code class="el">h2</code> elements.</p>
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+   <head>
+      <title>Providing heading elements at the beginning of each section of content</title>
+      <link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+   </head>
+   <body>
+      <h1>Providing heading elements at the beginning of each section of content</h1>
+      <section class="meta">
+         <p class="id">ID: H69</p>
+         <p class="technology">Technology: html</p>
+         <p class="type">Type: Technique</p>
+      </section>
+      <section id="applicability">
+         <h2>When to Use</h2>
+         <p><abbr title="HyperText Markup Language">HTML</abbr></p>
+      </section>
+      <section id="description">
+				<h2>Description</h2>
+        <p>The objective of this technique is to use section headings to convey the structure of the content. Heading markup can be used:</p>
+      	<ul>
+					<li>to indicate start of main content;</li>
+         	<li>to mark up section headings within the main content area;</li>
+         	<li>to demarcate different navigational sections like top or main navigation, left or secondary navigation and footer navigation;</li>
+         	<li>to mark up images of text that are used as headings;</li>
+         	<li>to allow users the ability to navigate a page by sections or skip repeated blocks of information.</li>
+      	</ul>
+      	<p>Headings are designed to convey logical hierarchy. Skipping levels in the sequence of headings may create the impression that the structure of the document has not been properly thought through or that specific headings have been chosen for their visual rendering rather than their meaning. Authors are encouraged to nest headings hierarchically. When headings are nested hierarchically, the most important information is given the highest logical level, and subsections are given subsequent logical levels.(i.e., <code class="language-html">h2</code> is a subsection of <code class="language-html">h1</code>). Providing this type of structure will help users understand the overall organization of the content more easily.</p>
+      	<p>Since headings indicate the start of important sections of content, it is possible for users with assistive technology to jump directly to the appropriate heading and begin reading the content. This significantly speeds interaction for users who would otherwise access the content slowly. Headings create chunks of information that can be found easily by people with disabilities, such as a blind person using a screen reader, or a person with a cognitive disability who uses assistive technology that delineates groups of information, or someone with a communication disability or illiteracy, who uses a screen reader to assist them in their reading.</p>
+      	<div class="note">
+        	 <p>All of our techniques assume that people needing special user agents (including assistive technology or special plug-ins) will get and be using that type of user agent (for example: a screen reader, or plug-in that allows keyboard navigation of properly marked up content, etc.).</p>
+      	</div>
+			</section>
+   		<section id="examples">
+      	<h2>Examples</h2>
+      	<section class="example">
+					<h3>Organizing the sections of a search page</h3>
+         	<p>This example marks up each section heading using <code class="language-html">h2</code> elements.</p>
          
-         <pre xml:space="preserve">&lt;h1&gt;Search Technical Periodicals&lt;/h1&gt;
+<pre xml:space="preserve"><code class="language-html">&lt;h1&gt;Search Technical Periodicals&lt;/h1&gt;
  &lt;h2&gt;Search&lt;/h2&gt;
- &lt;form action="search.php"&gt;
-  &lt;p&gt;&lt;label for="searchInput"&gt;Enter search topic: &lt;/label&gt;
-  &lt;input type="text" size="30" id="searchInput"&gt;
-  &lt;input type="submit" value="Go"&gt;&lt;/p&gt;
+ &lt;form action="/search" role="search"&gt;
+  &lt;label for="searchInput"&gt;Enter search topic:&lt;/label&gt;
+  &lt;input id="searchInput" type="text"&gt;
+  &lt;input type="submit" value="Search"&gt;
  &lt;/form&gt;
- &lt;h2&gt;Available Periodicals&lt;/h2&gt;
- &lt;div class="jlinks"&gt;
-  &lt;a href="pcoder.com"&gt;Professional Coder&lt;/a&gt; |
-  &lt;a href="algo.com"&gt;Algorithms&lt;/a&gt; |
-  &lt;a href="jse.com"&gt;Journal of Software Engineering&lt;/a&gt;
- &lt;/div&gt;
- &lt;h2&gt;Search Results&lt;/h2&gt;
- ... search results are returned in this section ...   </pre>
+ &lt;section&gt;
+   &lt;h2&gt;Available Periodicals&lt;/h2&gt;
+   &lt;ul&gt;
+     &lt;li&gt;&lt;a href="https://example.com/pcoder"&gt;Professional Coder&lt;/a&gt;&lt;/li&gt;
+     &lt;li&gt;&lt;a href="https://example.com/algo"&gt;Algorithms&lt;/a&gt;&lt;/li&gt;
+     &lt;li&gt;&lt;a href="https://example.com/jse"&gt;Journal of Software Engineering&lt;/a&gt;&lt;/li&gt;
+   &lt;/ul&gt;
+ &lt;/section&gt;
+ &lt;section&gt;
+   &lt;h2&gt;Search Results&lt;/h2&gt;
+   ... search results are returned in this section ...
+ &lt;/section&gt;</code></pre>
       </section>
       <section class="example">
          <h3>Headings show the overall organization of the content</h3>
+         <p>In this example, heading markup is used to make the navigation and main content sections perceivable.</p>
          
-            <p>In this example, heading markup is used to make the navigation and main content
-                sections perceivable.</p>
-         
-         <pre xml:space="preserve">&lt;!-- Logo, banner graphic, search form, etc.  --&gt;
-  &lt;h2&gt;Navigation&lt;/h2&gt;
-    &lt;ul&gt;
-      &lt;li&gt;&lt;a href="about.htm"&gt;About us&lt;/a&gt;&lt;/li&gt;
-      &lt;li&gt;&lt;a href="contact.htm"&gt;Contact us&lt;/a&gt;&lt;/li&gt;
-       ...
-    &lt;/ul&gt;
-  &lt;h2&gt;All about headings&lt;/h2&gt;
-   &lt;!-- Text, images, other material making up the main content... --&gt; 
-            </pre>
+<pre xml:space="preserve"><code class="language-html">&lt;main&gt;
+  &lt;h1&gt;Why Monday Monkey Lives For The Weekend&lt;/h1&gt;
+  ... text, images, and other material making up the main content ...
+&lt;/main&gt;
+&lt;nav aria-labelledby="nav-heading"&gt;
+  &lt;h2 id="nav-heading"&gt;More About Monday Monkey, Ltd.&lt;/h2&gt;
+  &lt;ul&gt;
+    &lt;li&gt;&lt;a href="/about"&gt;About us&lt;/a&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;a href="/contact"&gt;Contact us&lt;/a&gt;&lt;/li&gt;
+    ...
+  &lt;/ul&gt;
+&lt;/nav&gt;</code></pre>
       </section>
       <section class="example">
          <h3>Headings show the organization of material within the main content</h3>
-         
-            <p>Note that in HTML 4.01 and XHTML 1.x, heading elements only mark the beginning of
-              	sections. Because there is no markup to associate a heading element with the section content explicitly, users will assume that the heading applies to all following content until the next heading element is encountered.</p>
-         
-         <pre xml:space="preserve"> &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
+
+<pre xml:space="preserve"><code class="language-html">&lt;!doctype html&gt;
+&lt;html lang="en"&gt;
   &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
     &lt;title&gt;Cooking techniques&lt;/title&gt;  
   &lt;/head&gt;   
-  &lt;body&gt;     
-    &lt;h1&gt;Cooking techniques&lt;/h1&gt;     
-    &lt;p&gt;       
-      ... some text here ...     
-    &lt;/p&gt;           
-    &lt;h2&gt;Cooking with oil&lt;/h2&gt; 
-    &lt;p&gt; 
-        ... text of the section ...     
-    &lt;/p&gt;           
-    &lt;h2&gt;Cooking with butter&lt;/h2&gt;       
-    &lt;p&gt;
-        ... text of the section ...     
-    &lt;/p&gt;   
+  &lt;body&gt;
+    &lt;main&gt;
+      &lt;h1&gt;Cooking techniques&lt;/h1&gt;     
+      &lt;p&gt;... some text here ...&lt;/p&gt;
+      &lt;h2&gt;Cooking with oil&lt;/h2&gt; 
+      &lt;p&gt;... text of the section ...&lt;/p&gt;
+      &lt;h2&gt;Cooking with butter&lt;/h2&gt;       
+      &lt;p&gt;... text of the section ...&lt;/p&gt;
+    &lt;/main&gt;
   &lt;/body&gt; 
-&lt;/html&gt;    </pre>
+&lt;/html&gt;</code></pre>
       </section>
-   </section><section id="tests"><h2>Tests</h2>
-      <section class="procedure"><h3>Procedure</h3>
-         <ol>
-			<li>Check that the content is divided into separate sections</li>
-            <li>Check that each section on the page starts with a heading.</li>
-         </ol>
+   </section>
+   <section id="tests">
+		<h2>Tests</h2>
+    <section class="procedure">
+			<h3>Procedure</h3>
+      <ol>
+				<li>Check that the content is divided into separate sections.</li>
+        <li>Check that each section on the page starts with a heading.</li>
+      </ol>
       </section>
-      <section class="results"><h3>Expected Results</h3>
+      <section class="results">
+         <h3>Expected Results</h3>
          <ul>
-            <li>For 2.4.1 check #2 is true.</li>
-			<li>For 2.4.10 checks #1 and #2 are true.</li>
+            <li>For <a href="../../Understanding/bypass-blocks.html">Success Criterion 2.4.1 (Bypass Blocks)</a> check #2 is true.</li>
+            <li>For <a href="../../Understanding/section-headings.html">Success Criterion 2.4.10 (Section Headings)</a> check #1 and #2 are true.</li>
          </ul>
       </section>
-   </section><section id="related"><h2>Related Techniques</h2><ul>
-      <li><a href="../html/H42">H42</a></li>
-      <li><a href="../failures/F2">F2</a></li>
-   </ul></section><section id="resources"><h2>Resources</h2>
-      
-         <ul>
-            <li>
-									         <a href="https://www.w3.org/TR/html401/struct/global.html#h-7.5.5">HTML 4.01
-                    H1-H6 elements</a>
-								       </li>
-            <li>
-									         <a href="http://meyerweb.com/eric/thoughts/2004/07/21/pick-a-heading/">Pick a
-                    Heading</a> Eric Meyer</li>
-            <li>
-                  <a href="http://webaim.org/techniques/semanticstructure/">WebAIM: Semantic Structure</a>
-               </li>
-            <li>
-                  <a href="http://accessibility.psu.edu/headingshtml/">Heading Tags</a>
-               </li>
-            <li>
-                  <a href="http://www.456bereastreet.com/archive/201003/heading_navigation_in_web_browsers/">Heading navigation in web browsers</a>
-               </li>
-            <li>
-               <p>For Firefox, the following plugins provide header navigation via the keyboard:</p>
-               <ul>
-                  <li>
-                        <a href="https://addons.mozilla.org/en-US/firefox/addon/accessibility-evaluation-toolb/">Accessibility Evaluation Toolbar</a>
-                     </li>
-                  <li>
-                        <a href="http://juicystudio.com/article/heading-navigation-greasemonkey-user-script.php">Heading Navigation Greasemonkey User Script</a>
-                     </li>
-               </ul>
-            </li>
-         </ul>
-      
-   </section></body></html>
\ No newline at end of file
+   </section>
+   <section id="related">
+		<h2>Related Techniques</h2>
+		<ul>
+			<li><a href="../html/H42">H42</a></li>
+			<li><a href="../html/H97">H97: Grouping related links using the nav element</a></li>          
+			<li><a href="../failures/F2">F2</a></li>
+		</ul>
+   </section>
+   <section id="resources">
+		<h2>Resources</h2> 
+		<ul>
+				<li>
+					<a href="https://html.spec.whatwg.org/multipage/sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements">HTML - the <code class="language-html">h1</code>, <code class="language-html">h2</code>, <code class="language-html">h3</code>, <code class="language-html">h4</code>, <code class="language-html">h5</code>, and <code class="language-html">h6</code> elements</a>.
+				</li>
+				<li>
+					<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements"><abbr title="Mozilla Developer Network">MDN</abbr> <code class="language-html">&lt;h1&gt;</code> - <code class="language-html">&lt;h6&gt;</code>: The HTML Section Heading elements</a>.
+				</li>
+				<li>
+					<a href="https://www.nomensa.com/blog/how-structure-headings-web-accessibility">Nomensa: How to structure headings for web accessibility</a>.
+				</li>
+				<li>
+					<a href="https://webaim.org/techniques/semanticstructure/">WebAIM: Semantic Structure: Regions, Headings, and Lists</a>.
+				</li>
+		</ul>
+      </section>
+   </body>
+</html>
+
diff --git a/techniques/html/H70.html b/techniques/html/H70.html
index e0c29718ab..5646c8ec0d 100644
--- a/techniques/html/H70.html
+++ b/techniques/html/H70.html
@@ -1,3 +1,11 @@
+---
+obsoleteMessage: |
+  The <code>frameset</code> and <code>frame</code> elements are
+  <a href="https://html.spec.whatwg.org/multipage/obsolete.html#non-conforming-features:frameset">obsolete in the HTML Living Standard</a>.
+  Either use <code>iframe</code> and CSS instead,
+  or use server-side includes to generate complete pages with the various invariant parts merged in.
+obsoleteSince: 20
+---
 <!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using frame elements to group blocks of repeated material</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Using frame elements to group blocks of repeated material</h1><section class="meta"><p class="id">ID: H70</p><p class="technology">Technology: html</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
       <p>HTML and XHTML documents that use frames </p>
    </section><section id="description"><h2>Description</h2>
@@ -62,4 +70,4 @@
 								       </li>
          </ul>
       
-   </section></body></html>
\ No newline at end of file
+   </section></body></html>
diff --git a/techniques/html/H71.html b/techniques/html/H71.html
index bd5e7698d3..4615b1dddc 100644
--- a/techniques/html/H71.html
+++ b/techniques/html/H71.html
@@ -1,132 +1,144 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title> Providing a description for groups of form controls using fieldset and legend
-          elements </title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1> Providing a description for groups of form controls using fieldset and legend
-          elements </h1><section class="meta"><p class="id">ID: H71</p><p class="technology">Technology: html</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
-      <p>HTML and XHTML</p>
-   </section><section id="description"><h2>Description</h2>
-      <p>The objective of this technique is to provide a semantic grouping for related form controls. This allows users to understand the relationship of the controls and interact with the form more quickly and effectively.</p>
-      <p>Form controls can be grouped by enclosing them within the <code class="el">fieldset</code> element. All controls within a given <code class="el">fieldset</code> are then related. The first element inside the <code class="el">fieldset</code> must be a <code class="el">legend</code> element, which provides a label or description for the group.  Authors should avoid nesting <code class="el">fieldsets</code> unnecessarily, as this can lead to confusion. </p>
-      <p>Grouping controls is most important for related radio buttons and checkboxes. A set of radio buttons or checkboxes is related when they all submit values for a single named field. They work in the same way as selection lists, allowing the user to choose from a set of options, except selection lists are single controls while radio buttons and checkboxes are multiple controls. The individual label associated with each radio or checkbox control may not fully convey the group's descriptive context. In this situation, it is essential that they be grouped together semantically to facilitate being treated as a single control, as well as to provide an additional group level description. Often, user agents will present the value of the <code class="el">legend</code> before the label of each control to provide this description, as well as to remind users that they are part of the same group.</p>
-      <p>It can also be useful to group other sets of controls less tightly related than radio buttons and checkboxes. For instance, several fields that collect a user's address might be grouped together with a legend of "Address", thus providing a group level description for these controls. As a rule of thumb, it can be said that where a group of controls within a larger form requires an additional heading to provide a description specific to that particular group, the use of fieldset and legend elements is appropriate.</p>
-      <p>However, when a group of related radio buttons or checkboxes (even having values for a single named field) includes clear instructions and distinct selections (i.e. where the individual label associated with each particular control provides a sufficient description), the use of the <code class="el">fieldset</code> and <code class="el">legend</code> elements is not required. 
-						<a href="#H44"></a> is sufficient in this case.</p>
-      <p>Authors sometimes avoid using the <code class="el">fieldset</code> element because of the default display in the browser, which draws a border around the grouped controls. This visual grouping is also useful and authors should seriously consider retaining it (or some form of visual grouping). The visual effect can be modified in CSS by overriding the "border" property of the <code class="el">fieldset</code> and the "position" property of the <code class="el">legend</code>. </p>
-   </section><section id="examples"><h2>Examples</h2>
-      <section class="example">
-         <h3>A multiple choice test </h3>
-         
-            <p>This example shows a test item with one question and five possible answers. Each
-                answer is represented by a radio button (
-									<code class="el">input</code>
-									<code class="att">type</code>="radio"). The radio
-                buttons are contained within a <code class="el">fieldset</code>. The test question is tagged
-                with the <code class="el">legend</code> element.</p>
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+   <head>
+      <title>Providing a description for groups of form controls using fieldset and legend elements</title>
+      <link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+   </head>
+   <body>
+      <h1>Providing a description for groups of form controls using <code class="language-html">fieldset</code> and <code class="language-html">legend</code> elements</h1>
+      <section class="meta">
+         <p class="id">ID: H71</p>
+         <p class="technology">Technology: html</p>
+         <p class="type">Type: Technique</p>
+      </section>
+      <section id="applicability">
+         <h2>When to Use</h2>
+         <p><abbr title="HyperText Markup Language">HTML</abbr></p>
+      </section>
+      <section id="description">
+         <h2>Description</h2>
+         <p>The objective of this technique is to provide a semantic grouping for related form controls. This allows users to understand the relationship of the controls and interact with the form more quickly and effectively.</p>
+         <p>Form controls can be grouped by enclosing them within the <code class="language-html">fieldset</code> element. All controls within a given <code class="language-html">fieldset</code> are then related. The first element inside the <code class="language-html">fieldset</code> must be a <code class="language-html">legend</code> element, which provides a label or description for the group. Authors should avoid nesting <code class="language-html">fieldset</code>s unnecessarily, as this can lead to confusion.</p>
+         <p>Grouping controls is most important for related radio buttons and checkboxes. A set of radio buttons or checkboxes is related when they all submit values for a single named field. They work in the same way as selection lists, allowing the user to choose from a set of options, except selection lists are single controls while radio buttons and checkboxes are multiple controls. The individual label associated with each radio or checkbox control may not fully convey the group's descriptive context. In this situation, it is essential that they be grouped together semantically to facilitate being treated as a single control, as well as to provide an additional group level description. Often, user agents will present the value of the <code class="language-html">legend</code> before the label of each control to provide this description, as well as to remind users that they are part of the same group.</p>
+         <p>It can also be useful to group other sets of controls less tightly related than radio buttons and checkboxes. For instance, several fields that collect a user's address might be grouped together with a <code class="language-html">legend</code> of "Address", thus providing a group level description for these controls. As a rule of thumb, it can be said that where a group of controls within a larger form requires an additional heading to provide a description specific to that particular group, the use of fieldset and legend elements is appropriate.</p>
+         <p>However, when a group of related radio buttons or checkboxes (even having values for a single named field) includes clear instructions and distinct selections (i.e., where the individual label associated with each particular control provides a sufficient description), the use of the <code class="language-html">fieldset</code> and <code class="language-html">legend</code> elements is not required. <a href="../html/H44">H44</a> is sufficient in this case.</p>
+         <p>Authors sometimes avoid using the <code class="language-html">fieldset</code> element because of the default display in the browser, which draws a border around the grouped controls. This visual grouping is also useful and authors should seriously consider retaining it (or some form of visual grouping). The visual effect can be modified in CSS by overriding the <code class="language-css">border</code> property of the <code class="language-html">fieldset</code> and the <code class="language-css">position</code> property of the <code class="language-html">legend</code>.</p>
+      </section>
+      <section id="examples">
+         <h2>Examples</h2>
+         <section class="example">
+            <h3>A multiple choice test</h3>   
+            <p>This example shows a test item with one question and five possible answers. Each answer is represented by a radio button (<code class="language-html">input type="radio"</code>). The radio buttons are contained within a <code class="language-html">fieldset</code>. The test question is tagged with the <code class="language-html">legend</code> element. Each field has the same <code class="language-html">name</code> attribute, indicating these radio buttons are related, and should be grouped as shown. Also note that while the <code class="language-html">name</code> attributes have the same value, the <code class="language-html">id</code> attributes' values must be unique.</p>
          
-         <pre xml:space="preserve">&lt;fieldset&gt;
+<pre xml:space="preserve"><code class="language-html">&lt;fieldset&gt;
   &lt;legend&gt;The play &lt;cite&gt;Hamlet&lt;/cite&gt; was written by:&lt;/legend&gt;
-  &lt;input type="radio" id="shakesp" name="hamlet" checked="checked" value="a"&gt;
-  &lt;label for="shakesp"&gt;William Shakespeare&lt;/label&gt;&lt;br /&gt;
-  &lt;input type="radio" id="kipling" name="hamlet" value="b"&gt;
-  &lt;label for="kipling"&gt;Rudyard Kipling&lt;/label&gt;&lt;br /&gt;
-  &lt;input type="radio" id="gbshaw" name="hamlet" value="c"&gt;
-  &lt;label for="gbshaw"&gt;George Bernard Shaw&lt;/label&gt;&lt;br /&gt;
-  &lt;input type="radio" id="hem" name="hamlet" value="d"&gt;
-  &lt;label for="hem"&gt;Ernest Hemingway&lt;/label&gt;&lt;br /&gt;
-  &lt;input type="radio" id="dickens" name="hamlet" value="e"&gt;
-  &lt;label for="dickens"&gt;Charles Dickens&lt;/label&gt;
-&lt;/fieldset&gt;   </pre>
+  &lt;div&gt;
+    &lt;input checked="checked" id="shakesp" name="hamlet" type="radio" value="a"&gt;
+    &lt;label for="shakesp"&gt;William Shakespeare&lt;/label&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;input id="austen" name="hamlet" type="radio" value="b"&gt;
+    &lt;label for="austen"&gt;Jane Austen&lt;/label&gt;
+  &lt;/div&gt;
+  &lt;div&gt;    
+    &lt;input id="gbshaw" name="hamlet" type="radio" value="c"&gt;
+    &lt;label for="gbshaw"&gt;George Bernard Shaw&lt;/label&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;input id="woolf" name="hamlet" type="radio" value="d"&gt;
+    &lt;label for="woolf"&gt;Virginia Woolf&lt;/label&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;input id="dickens" name="hamlet" type="radio" value="e"&gt;
+    &lt;label for="dickens"&gt;Charles Dickens&lt;/label&gt;
+  &lt;/div&gt;
+&lt;/fieldset&gt;</code></pre>
       </section>
       <section class="example">
-         <h3>A set of checkboxes </h3>
+         <h3>A set of checkboxes</h3>
+         <p>The User Profile page for a Web site allows users to indicate their interests by selecting multiple checkboxes. Each checkbox (<code class="language-html">input type="checkbox"</code>) has a <code class="language-html">label</code>. The checkboxes are contained within a <code class="language-html">fieldset</code>, and the <code class="language-html">legend</code> element contains the prompt for the entire group of checkboxes.</p>
          
-            <p>The User Profile page for a Web site allows users to indicate their interests by
-                selecting multiple checkboxes. Each checkbox (
-									<code class="el">input</code>
-									<code class="att">type</code>="checkbox")
-                has a <code class="el">label</code>. The checkboxes are contained within a
-                <code class="el">fieldset</code>, and the <code class="el">legend</code> element contains the prompt for
-                the entire group of checkboxes.</p>
-         
-         <pre xml:space="preserve">&lt;fieldset&gt;
+<pre xml:space="preserve"><code class="language-html">&lt;fieldset&gt;
   &lt;legend&gt;I am interested in the following (check all that apply):&lt;/legend&gt;
-  &lt;input type="checkbox" id="photo" name="interests" value="ph"&gt;
-  &lt;label for="photo"&gt;Photography&lt;/label&gt;&lt;br /&gt;
-  &lt;input type="checkbox" id="watercol" name="interests" checked="checked" value="wa"&gt;
-  &lt;label for="watercol"&gt;Watercolor&lt;/label&gt;&lt;br /&gt;
-  &lt;input type="checkbox" id="acrylic" name="interests" checked="checked" value="ac"&gt;
-  &lt;label for="acrylic"&gt;Acrylic&lt;/label&gt;
-  …
-&lt;/fieldset&gt;    </pre>
+  &lt;div&gt;
+    &lt;input id="photo" name="interests" type="checkbox" value="ph"&gt;
+    &lt;label for="photo"&gt;Photography&lt;/label&gt;
+  &lt;/div&gt;
+  &lt;div&gt;    
+    &lt;input checked="checked" id="watercol" name="interests" type="checkbox" value="wa"&gt;
+    &lt;label for="watercol"&gt;Watercolor&lt;/label&gt;
+  &lt;/div&gt;
+  &lt;div&gt;  
+    &lt;input checked="checked" id="acrylic" name="interests" type="checkbox" value="ac"&gt;
+    &lt;label for="acrylic"&gt;Acrylic&lt;/label&gt;
+  &lt;/div&gt;
+&lt;/fieldset&gt;</code></pre>
       </section>
+
       <section class="example">
-         <h3> Radio buttons submitting to the same named field</h3>
-         
-            <p>This example requests the user to choose a single philosopher. Note that each field has the same "<code class="att">name</code>" attribute, indicating these radio buttons are related (they all submit the same field), and should be grouped as shown. Also note that while the "<code class="att">name</code>" attributes are the same, the "<code class="att">id</code>" attributes must be unique.</p>
+         <h3>Logically related controls</h3>
+         <p>In this example, form fields for residential and postal addresses are distinguished by the value of the <code class="language-html">legend</code> in each <code class="language-html">fieldset</code> grouping.</p>
          
-         <pre xml:space="preserve">&lt;form action="http://example.com/vote" method="post"&gt;
+<pre xml:space="preserve"><code class="language-html">&lt;form action="/adduser" method="post"&gt;
   &lt;fieldset&gt;
-    &lt;legend&gt;Your preferred philosopher&lt;/legend&gt;
-    &lt;input type="radio" name="philosopher" id="philosopher_socrates" value="socrates"/&gt;
-    &lt;label for="philosopher_socrates"&gt;Socrates&lt;/label&gt;
-    &lt;input type="radio" name="philosopher" id="philosopher_plato" value="plato"/&gt;
-    &lt;label for="philosopher_plato"&gt;Plato&lt;/label&gt;
-    &lt;input type="radio" name="philosopher" id="philosopher_aristotle" value="aristotle"/&gt;
-    &lt;label for="philosopher_aristotle"&gt;Aristotle&lt;/label&gt;
+    &lt;legend&gt;Your Residential Address&lt;/legend&gt;
+    &lt;div&gt;
+      &lt;label for="raddress"&gt;Address:&lt;/label&gt;
+      &lt;input autocomplete="street-address" id="raddress" name="raddress" type="text"&gt;
+    &lt;/div&gt;
+    &lt;div&gt;
+      &lt;label for="rzip"&gt;Postal/Zip Code:&lt;/label&gt;
+      &lt;input autocomplete="postal-code" id="rzip" name="rzip" type="text"&gt;
+    &lt;/div&gt;    
   &lt;/fieldset&gt;
-  &lt;/form&gt; </pre>
-         
-            <div class="note">
-               <p>Groups of related checkboxes work in the same way, except the user is allowed to express more than one preference for the field.</p>
-            </div>
-         
-      </section>
-      <section class="example">
-         <h3> Logically related controls</h3>
-         
-            <p>In this example, form fields for residential and postal addresses are distinguished by the value of the <code class="el">legend</code> in each <code class="el">fieldset</code> grouping.</p>
-         
-         <pre xml:space="preserve">&lt;form action="http://example.com/adduser" method="post"&gt;
-   &lt;fieldset&gt;
-     &lt;legend&gt;Residential Address&lt;/legend&gt;
-     &lt;label for="raddress"&gt;Address: &lt;/label&gt;
-     &lt;input type="text" id="raddress" name="raddress" /&gt;
-     &lt;label for="rzip"&gt;Postal/Zip Code: &lt;/label&gt;
-     &lt;input type="text" id="rzip" name="rzip" /&gt;
-     ...more residential address information...
-   &lt;/fieldset&gt;
-   &lt;fieldset&gt;
-     &lt;legend&gt;Postal Address&lt;/legend&gt;
-     &lt;label for="paddress"&gt;Address: &lt;/label&gt;
-     &lt;input type="text" id="paddress" name="paddress" /&gt;
-     &lt;label for="pzip"&gt;Postal/Zip Code: &lt;/label&gt;
-     &lt;input type="text" id="pzip" name="pzip" /&gt;
-     ...more postal address information...
-   &lt;/fieldset&gt;
-&lt;/form&gt;</pre>
+  &lt;fieldset&gt;
+    &lt;legend&gt;Your Postal Address&lt;/legend&gt;
+    &lt;div&gt;    
+      &lt;label for="paddress"&gt;Address:&lt;/label&gt;
+      &lt;input autocomplete="street-address" id="paddress" name="paddress" type="text"&gt;
+    &lt;/div&gt;
+    &lt;div&gt;      
+      &lt;label for="pzip"&gt;Postal/Zip Code:&lt;/label&gt;
+      &lt;input autocomplete="postal-code" id="pzip" name="pzip" type="text"&gt;
+    &lt;/div&gt;    
+  &lt;/fieldset&gt;
+&lt;/form&gt;</code></pre>
       </section>
-   </section><section id="tests"><h2>Tests</h2>
-      <section class="procedure"><h3>Procedure</h3>
-         <p>For groups of related controls where the individual labels for each control do not provide a sufficient description, and an additional group level description is needed,</p>
+   </section>
+   <section id="tests">
+      <h2>Tests</h2>
+      <section class="procedure">
+         <h3>Procedure</h3>
+         <p>For groups of related controls where the individual labels for each control do not provide a sufficient description, and an additional group level description is needed:</p>
          <ol>
-            <li>Check that the group of logically related <code class="el">input</code> or <code class="el">select</code> elements are contained within <code class="el">fieldset</code> elements.</li>
-            <li>Check that each <code class="el">fieldset</code> has a <code class="el">legend</code> element that includes a description for that group.</li>
+            <li>Check that the group of logically related <code class="language-html">input</code> or <code class="language-html">select</code> elements are contained within <code class="language-html">fieldset</code> elements.</li>
+            <li>Check that each <code class="language-html">fieldset</code> has a <code class="language-html">legend</code> element that is the first child in the <code class="language-html">fieldset</code> and includes a description for that group.</li>
          </ol>
       </section>
-      <section class="results"><h3>Expected Results</h3>
+      <section class="results">
+         <h3>Expected Results</h3>
          <ul>
-            <li>All of the above checks are true.</li>
+            <li>All of the checks are true.</li>
          </ul>
       </section>
-   </section><section id="related"><h2>Related Techniques</h2><ul>
-      <li><a href="../html/H44">H44</a></li>
-      <li><a href="../html/H65">H65</a></li>
-   </ul></section><section id="resources"><h2>Resources</h2>
-      
-         <ul>
-            <li>HTML 4.01 <a href="https://www.w3.org/TR/html4/interact/forms.html#adef-checked">Checkboxes</a>
-								       </li>
-            <li>
-									         <a href="http://usability.com.au/2008/09/accessible-forms-using-wcag-2-0/">Accessible Forms using WCAG 2.0</a>
-								       </li>
-         </ul>
-      
-   </section></body></html>
\ No newline at end of file
+   </section>
+   <section id="related">
+      <h2>Related Techniques</h2>
+      <ul>
+         <li><a href="../html/H44">H44</a></li>
+         <li><a href="../html/H65">H65</a></li>
+      </ul>
+   </section>
+   <section id="resources">
+      <h2>Resources</h2>
+      <ul>
+         <li>
+            <a href="https://html.spec.whatwg.org/multipage/form-elements.html#the-fieldset-element">HTML - the <code class="language-html">fieldset</code> element</a>.
+         </li>
+         <li>
+            <a href="https://html.spec.whatwg.org/multipage/form-elements.html#the-legend-element">HTML - the <code class="language-html">legend</code> element</a>.
+         </li>
+      </ul>
+   </section>
+</body>
+</html>
diff --git a/techniques/html/H73.html b/techniques/html/H73.html
index a0ba360444..7d7d3412ec 100644
--- a/techniques/html/H73.html
+++ b/techniques/html/H73.html
@@ -1,3 +1,10 @@
+---
+obsoleteMessage: |
+  The <code>summary</code> attribute is
+  <a href="https://html.spec.whatwg.org/multipage/obsolete.html#attr-table-summary">obsolete in the HTML Living Standard</a>.
+  Use one of the <a href="https://html.spec.whatwg.org/multipage/tables.html#table-descriptions-techniques">techniques for describing tables</a> instead.
+obsoleteSince: 20
+---
 <!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using the summary attribute of the table element to give an overview of data
           tables</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Using the summary attribute of the table element to give an overview of data
           tables</h1><section class="meta"><p class="id">ID: H73</p><p class="technology">Technology: html</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
@@ -95,4 +102,4 @@ <h3>A data table with both a <code class="att">summary</code> and a <code class=
 								       </li>
          </ul>
       
-   </section></body></html>
\ No newline at end of file
+   </section></body></html>
diff --git a/techniques/html/H74.html b/techniques/html/H74.html
index c598b59a9d..ba7131f17a 100644
--- a/techniques/html/H74.html
+++ b/techniques/html/H74.html
@@ -1,75 +1,73 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Ensuring that opening and closing tags are used according to specification</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Ensuring that opening and closing tags are used according to specification</h1><section class="meta"><p class="id">ID: H74</p><p class="technology">Technology: html</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
-      <p> HTML and XHTML</p>
-   </section><section id="description"><h2>Description</h2>
-      <p> The objective of this technique is to avoid key errors that are known to cause
-            problems for assistive technologies when they are trying to parse content which involve
-            having opening and closing tags that are not used according to specification. These
-            errors can be avoided by using the HTML or XHTML mechanism to specify the technology and
-            technology version, and making sure the Web page does not have these types of errors in
-            it. There are several validators that the developer can use: validation reports
-            generally mention these types of errors. This technique deals only with errors related
-            to incorrectly formed opening and closing tags. The document type declaration is not
-            strictly necessary for this type of evaluation, but specifying the document type
-            declaration makes it easier to use a validator. </p>
-   </section><section id="examples"><h2>Examples</h2>
-      <section class="example">
-         <h3> HTML</h3>
-         
-            <p> HTML pages include a document type declaration (sometimes referred to as
-                  !DOCTYPE statement). The developer can use offline or online
-                validators (see Resources below) to check that all id attribute values are unique
-                and that opening and closing tags are used according to the specification. </p>
-                <div class="note"><p>The specification for which elements require closing tags has changed with the introduction of HTML5.</p></div>
-         
+---
+obsoleteMessage: |
+  This technique relates to 4.1.1: Parsing, which was removed as of WCAG 2.2.
+obsoleteSince: 22
+---
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+   <head>
+      <title>Ensuring that opening and closing tags are used according to specification</title>
+      <link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+   </head>
+   <body>
+      <h1>Ensuring that opening and closing tags are used according to specification</h1>
+      <section class="meta">
+         <p class="id">ID: H74</p>
+         <p class="technology">Technology: html</p>
+         <p class="type">Type: Technique</p>
       </section>
-      <section class="example">
-         <h3>XHTML</h3>
-         
-            <p> Like other XML-based documents, XHTML documents reference a Document Type
-                Definition (DTD) or other type of XML schema. The developer can use online or
-                offline validators (including validation tools built into editors) to check that
-                opening and closing tags are used according to the specification. </p>
-         
+      <section id="applicability">
+         <h2>When to Use</h2>
+         <p><abbr title="HyperText Markup Language">HTML</abbr></p>
       </section>
-      <section class="example">
-         <h3>Using test frameworks</h3>
-         
-            <p> When a Website generates HTML or XHTML dynamically instead of serving only static pages, a
-                developer can use <a href="http://xhtmlunit.sourceforge.net/">XHTMLUnit</a>,
-                  <a href="http://xmltestsuite.sourceforge.net/">XML Test Suite</a> or a similar
-                framework to test the generated XHTML code. </p>
-         
-      </section>
-   </section><section id="tests"><h2>Tests</h2>
-      <section class="procedure"><h3>Procedure</h3>
-         <ol>
-            <li> Check that there are closing tags for all elements with required closing tags.
-                </li>
-            <li> Check that there are no closing tags for all elements where closing tags are
-                  forbidden. </li>
-            <li> Check that opening and closing tags for all elements are correctly nested. </li>
-         </ol>
-      </section>
-      <section class="results"><h3>Expected Results</h3>
-         <p> Steps 1, 2, and 3 are true.</p>
-      </section>
-   </section><section id="related"><h2>Related Techniques</h2></section><section id="resources"><h2>Resources</h2>
-      
-         <ul>
-            <li>
-									         <a href="https://www.w3.org/QA/Tips/Doctype">Do not forget to add a doctype</a>
-                  by the W3C Quality Assurance Initiative explains what doctypes are and why you
-                  should use them. </li>
-            <li>
-									         <a href="https://www.w3.org/QA/2002/04/valid-dtd-list.html">Recommended DTDs to
-                    use in your Web document</a> by the W3C Quality Assurance Initiative is a list
-                  of commonly used declarations. </li>
-            <li>
-									         <a href="http://www.chami.com/html-kit/faq/pages/validate_tools.html">How do I
-                    validate my code or check for possible errors?</a> describes the tools in the
-                  free editor HTML-Kit for checking HTML, CSS and XML. </li>
-         </ul>
-         <p> For other resources, see <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G134">Validating Web
-              pages</a>. </p>
-      
-   </section></body></html>
+      <section id="description">
+         <h2>Description</h2>
+         <p>The objective of this technique is to avoid key errors that are known to cause problems for assistive technologies when they are trying to parse content which involve having opening and closing tags that are not used according to specification. There are several validators that a developer can use: validation reports generally mention these types of errors. This technique deals only with errors related to incorrectly formed opening and closing tags. The document type declaration is not strictly necessary for this type of evaluation, but specifying the document type declaration makes it easier to use a validator.</p>
+         </section>
+         <section id="examples">
+            <h2>Examples</h2>
+            <section class="example">
+               <h3>HTML</h3>
+               <p>HTML pages include a document type declaration (sometimes referred to as <code class="language-html">!DOCTYPE</code> declaration). A developer can use offline or online validators (see the Resources section) to check that all <code class="language-html">id</code> attribute values are unique and that opening and closing tags are used according to the specification.</p>
+            </section>
+         </section>
+         <section id="tests">
+            <h2>Tests</h2>
+            <section class="procedure">
+               <h3>Procedure</h3>
+               <ol>
+                  <li>Check that there are closing tags for all elements with required closing tags.</li>
+                  <li>Check that there are no closing tags for all elements where closing tags are forbidden.</li>
+                  <li>Check that opening and closing tags for all elements are correctly nested.</li>
+               </ol>
+            </section>
+            <section class="results">
+               <h3>Expected Results</h3>
+               <p>Steps #1, #2, and #3 are true.</p>
+            </section>
+         </section>
+         <section id="related">
+            <h2>Related Techniques</h2>
+         </section>
+         <section id="resources">
+            <h2>Resources</h2>
+            <ul>
+               <li>
+                  <a href="https://www.w3.org/QA/Tips/Doctype">Do not forget to add a doctype</a> by the <abbr title="World Wide Web Consortium">W3C</abbr> Quality Assurance Initiative.
+               </li>
+               <li>
+                  <a href="https://www.w3.org/QA/2002/04/valid-dtd-list.html">Recommended DTDs to use in your Web document</a>.
+               </li>
+               <li>
+                  <a href="https://html.spec.whatwg.org/multipage/syntax.html#the-doctype">HTML - The <code class="language-html">doctype</code></a>.
+               </li>
+               <li>
+                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G134">Validating Web pages</a>.
+               </li>
+               <li>
+                  <a href="https://validator.w3.org/nu/">The W3C's Nu HTML Checker</a>.
+               </li>
+            </ul>
+         </section>
+      </body>
+   </html>
diff --git a/techniques/html/H75.html b/techniques/html/H75.html
index d8a40a9006..ee44be3efe 100644
--- a/techniques/html/H75.html
+++ b/techniques/html/H75.html
@@ -1,3 +1,8 @@
+---
+obsoleteMessage: |
+  This technique relates to 4.1.1: Parsing, which was removed as of WCAG 2.2.
+obsoleteSince: 22
+---
 <!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Ensuring that Web pages are well-formed</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Ensuring that Web pages are well-formed</h1><section class="meta"><p class="id">ID: H75</p><p class="technology">Technology: html</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
       <p> Any XML-based markup languages. </p>
    </section><section id="description"><h2>Description</h2>
@@ -73,4 +78,4 @@ <h3></h3>
          <p> For other resources, see <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G134">Validating Web
               pages</a>. </p>
       
-   </section></body></html>
\ No newline at end of file
+   </section></body></html>
diff --git a/techniques/html/H76.html b/techniques/html/H76.html
index dd85f87be8..91e309695d 100644
--- a/techniques/html/H76.html
+++ b/techniques/html/H76.html
@@ -1,50 +1,70 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using meta refresh to create an instant client-side redirect</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Using meta refresh to create an instant client-side redirect</h1><section class="meta"><p class="id">ID: H76</p><p class="technology">Technology: html</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
-      <p> HTML and XHTML</p>
-   </section><section id="description"><h2>Description</h2>
-      <p> The objective of this technique is to enable redirects on the client side without
-            confusing the user. Redirects are preferably implemented on the server side (see <a href="https://www.w3.org/WAI/WCAG21/Techniques/server-side-script/SVR1">Implementing automatic redirects on the server side
-              instead of on the client side</a>), but authors do not always have control over
-            server-side technologies. </p>
-      <p>In HTML and XHTML, one can use the <code class="el">meta</code> element with the value of
-            the <code class="att">http-equiv</code> attribute set to "Refresh" and the value of the
-              <code class="att">content</code> attribute set to "0" (meaning zero seconds), followed by the URI
-            that the browser should request. It is important that the time-out is set to zero, to
-            avoid that content is displayed before the new page is loaded. The page containing the
-            redirect code should only contain information related to the redirect. </p>
-   </section><section id="examples"><h2>Examples</h2>
-      <section class="example">
-         <pre xml:space="preserve"> &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;    
-  &lt;head&gt;      
-    &lt;title&gt;The Tudors&lt;/title&gt;      
-    &lt;meta http-equiv="refresh" content="0;URL='http://thetudors.example.com/'" /&gt;    
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+   <head>
+      <title>Using meta refresh to create an instant client-side redirect</title>
+      <link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+   </head>
+   <body>
+      <h1>Using <code class="language-html">meta</code> <code class="language-html">refresh</code> to create an instant client-side redirect</h1>
+      <section class="meta">
+         <p class="id">ID: H76</p>
+         <p class="technology">Technology: html</p>
+         <p class="type">Type: Technique</p>
+      </section>
+      <section id="applicability">
+         <h2>When to Use</h2>
+         <p><abbr title="HyperText Markup Language">HTML</abbr></p>
+      </section>
+      <section id="description">
+         <h2>Description</h2>
+         <p>The objective of this technique is to enable redirects on the client side without confusing the user. Redirects are preferably implemented on the server side (see <a href="../server-side-script/SVR1">Implementing automatic redirects on the server side instead of on the client side</a>), but authors do not always have control over server-side technologies.</p>
+         <p>In HTML, one can use the <code class="language-html">meta</code> element with the value of the <code class="language-html">http-equiv</code> attribute set to <code class="language-html">refresh</code> and the value of the <code class="language-html">content</code> attribute set to <code class="language-html">0</code> (meaning zero seconds), followed by the <abbr title="Uniform Resource Identifier">URI</abbr> that the browser should request. It is important that the time-out is set to zero, to avoid that content is displayed before the new page is loaded. The page containing the redirect code should only contain information related to the redirect.</p>
+      </section>
+      <section id="examples">
+         <h2>Examples</h2>
+         <section class="example">
+            <h3>Instantly redirecting a page</h3>
+<pre xml:space="preserve"><code class="language-html">&lt;!doctype html&gt;
+&lt;html lang="en"&gt;    
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;Panucci's Pizza&lt;/title&gt;
+    &lt;meta http-equiv="refresh" content="0; URL=https://planet-express.example.com"&gt;
   &lt;/head&gt;    
-  &lt;body&gt; 
-    &lt;p&gt;This page has moved to a &lt;a href="http://thetudors.example.com/"&gt;
-      theTudors.example.com&lt;/a&gt;.&lt;/p&gt; 
+  &lt;body&gt;
+    &lt;p&gt;This page has moved to &lt;a href="https://planet-express.example.com"&gt;
+       Planet Express&lt;/a&gt;.&lt;/p&gt; 
   &lt;/body&gt;  
-&lt;/html&gt;     </pre>
-      </section>
-   </section><section id="tests"><h2>Tests</h2>
-      <section class="procedure"><h3>Procedure</h3>
-         <ol>
-            <li> Find all <code class="el">meta</code> elements in the document. </li>
-            <li> For each meta element, check if it contains the attribute
-                  <code class="att">http-equiv</code> with value "refresh" (case-insensitive) and the
-                    <code class="att">content</code> attribute with a number greater than 0 followed by
-                    ;'URL=anyURL' (where anyURL stands for the URI that should replace
-                  the current page). </li>
-         </ol>
+&lt;/html&gt;</code></pre>
+         </section>
       </section>
-      <section class="results"><h3>Expected Results</h3>
-         <p> Step 2 is false. </p>
+      <section id="tests">
+         <h2>Tests</h2>
+         <section class="procedure">
+            <h3>Procedure</h3>
+            <p>Find all <code class="language-html">meta</code> elements in the document that contain the <code class="language-html">http-equiv</code> attribute with value <code class="language-html">refresh</code>, check that:</p>
+            <ol>
+               <li>the <code class="language-html">content</code> attribute has a number with a value of <code class="language-html">0</code>, and</li>
+               <li>the number is followed by <code class="language-html">;URL=anyURL</code> (where anyURL stands for the URI that should replace the current page).</li>
+            </ol>
+         </section>
+         <section class="results">
+            <h3>Expected Results</h3>
+            <p>Steps #1 and #2 are true.</p>
       </section>
-   </section><section id="related"><h2>Related Techniques</h2><ul>
-      <li><a href="../general/G110">G110</a></li>
-   </ul></section><section id="resources"><h2>Resources</h2>
-      
-         <ul>
-            <li> See also <a href="https://www.w3.org/WAI/WCAG21/Techniques/failures/F41">Failure due to using meta refresh
-                    with a time-out</a>. </li>
-         </ul>
-      
-   </section></body></html>
\ No newline at end of file
+   </section>
+   <section id="related">
+      <h2>Related Techniques</h2>
+      <ul>
+         <li><a href="../general/G110">G110</a></li>
+      </ul>
+   </section>
+   <section id="resources">
+      <h2>Resources</h2>
+      <ul>
+         <li><a href="https://html.spec.whatwg.org/multipage/semantics.html#attr-meta-http-equiv-refresh">HTML - Refresh state (<code class="language-html">http-equiv="refresh"</code>)</a>.</li>
+         <li><a href="../failures/F41">Failure due to using <code class="language-html">meta</code> <code class="language-html">refresh</code> with a time-out</a>.</li>
+      </ul>
+   </section>
+</body>
+</html>
\ No newline at end of file
diff --git a/techniques/html/H77.html b/techniques/html/H77.html
index 69cb07a53e..14f7d53617 100644
--- a/techniques/html/H77.html
+++ b/techniques/html/H77.html
@@ -1,69 +1,76 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Identifying the purpose of a link using link text combined with its enclosing
-          list item</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Identifying the purpose of a link using link text combined with its enclosing
-          list item</h1><section class="meta"><p class="id">ID: H77</p><p class="technology">Technology: html</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>Identifying the purpose of a link using link text combined with its enclosing list item</title>
+		<link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+	</head>
+	<body>
+		<h1>Identifying the purpose of a link using link text combined with its enclosing list item</h1>
+		<section class="meta">
+			<p class="id">ID: H77</p>
+			<p class="technology">Technology: html</p>
+			<p class="type">Type: Technique</p>
+		</section>
+		<section id="applicability">
+			<h2>When to Use</h2>
       <p>All technologies that contain links.</p>
-   </section><section id="description"><h2>Description</h2>
-      <p> The objective of this technique is to identify the purpose of a link from the link and
+		</section>
+		<section id="description">
+			<h2>Description</h2>
+      <p>The objective of this technique is to identify the purpose of a link from the link and
             its list item context. The list item enclosing the link provides context for an
             otherwise unclear link when the list item is the nearest enclosing block-level ancestor
             element. The description lets a user distinguish this link from links in the Web page
             that lead to other destinations and helps the user determine whether to follow the link.
-            Note that simply providing the URI of the destination is generally not sufficiently
-            descriptive. </p>
+            Note that simply providing the <abbr title="Uniform Resource Identifier">URI</abbr> of the destination is generally not sufficiently
+            descriptive.</p>
       <div class="note">
-         <p>These descriptions will be most useful to the user if the additional information
-              needed to understand the link precedes the link. If the additional information follows
-              the link, there can be confusion and difficulty for screen reader users who are
-              reading through the page in order (top to bottom).</p>
+				<p>These descriptions will be most useful to the user if the additional information needed to understand the link precedes the link. If the additional information follows the link, there can be confusion and difficulty for screen reader users who are reading through the page in order (top to bottom).</p>
       </div>
-   </section><section id="examples"><h2>Examples</h2>
+		</section>
+		<section id="examples">
+			<h2>Examples</h2>
       <section class="example">
-         <pre xml:space="preserve">&lt;ul&gt;
+<pre xml:space="preserve"><code class="language-html">&lt;ul&gt;
   &lt;li&gt;
     Check out the video report for last year's 
-    &lt;a href="festival.htm"&gt;National Folk Festival&lt;/a&gt;.
+    &lt;a href="festival.html"&gt;National Folk Festival&lt;/a&gt;.
   &lt;/li&gt;
   &lt;li&gt;
-    &lt;a href="listen.htm"&gt;Listen to the instruments&lt;/a&gt;
+    &lt;a href="listen.html"&gt;Listen to the instruments&lt;/a&gt;
   &lt;/li&gt;
   &lt;li&gt;
     Guitar Man: George Golden talks about 
-    &lt;a href="mkguitars.htm"&gt;making guitars&lt;/a&gt;.
+    &lt;a href="mkguitars.html"&gt;making guitars&lt;/a&gt;.
   &lt;/li&gt;
-&lt;/ul&gt;</pre>
+&lt;/ul&gt;</code></pre>
       </section>
       <section class="example">
          <h3>A list of video games for download</h3>
-         <pre xml:space="preserve">&lt;ul&gt;
+<pre xml:space="preserve"><code class="language-html">&lt;ul&gt;
   &lt;li&gt;
-    &lt;a href="tomb_raider.htm"&gt;Tomb Raider: Legend&lt;/a&gt;
-    &lt;a href="tomb_raider_images.htm"&gt;See Images&lt;/a&gt;
-    &lt;a href="tomb_raider.mpeg"&gt;(Download Demo)&lt;/a&gt;
+    &lt;a href="zelda-tears.html"&gt;Legend Of Zelda: Tears Of The Kingdom&lt;/a&gt;
+    &lt;a href="zelda-tears-images.html"&gt;See Images&lt;/a&gt;
+    &lt;a download href="zelda-tears-demo.mp4"&gt;Download Demo&lt;/a&gt;
   &lt;/li&gt;
   &lt;li&gt;
-    &lt;a href="fear_extraction.htm"&gt;F.E.A.R. Extraction Point&lt;/a&gt;
-    &lt;a href="fear_extraction_images.htm"&gt;See Images&lt;/a&gt;
-    &lt;a href="fear_extraction.mpeg"&gt;(Download Demo)&lt;/a&gt;
+    &lt;a href="metroid-prime.html"&gt;Metroid Prime&lt;/a&gt;
+    &lt;a href="metroid-prime-images.html"&gt;See Images&lt;/a&gt;
+    &lt;a download href="metroid-prime-demo.mp4"&gt;Download Demo&lt;/a&gt;
   &lt;/li&gt;
   &lt;li&gt;
-    &lt;a href="call_of_duty.htm"&gt;Call of Duty 2&lt;/a&gt;
-    &lt;a href="call_of_duty_images.htm"&gt;See Images&lt;/a&gt;
-    &lt;a href="call_of_duty.mpeg"&gt;(Download Demo)&lt;/a&gt;
+    &lt;a href="grand-theft-auto.html"&gt;Grand Theft Auto&lt;/a&gt;
+    &lt;a href="grand-theft-auto-images.html"&gt;See Images&lt;/a&gt;
+    &lt;a download href="grand-theft-auto.mp4"&gt;Download Demo&lt;/a&gt;
   &lt;/li&gt;
-  &lt;li&gt;
-    &lt;a href="Warhammer 40K.htm"&gt;Warhammer 40K&lt;/a&gt;
-    &lt;a href="warhammer_40k_images.htm"&gt;See Images&lt;/a&gt;
-    &lt;a href="Warhammer_40k.mpeg"&gt;(Download Demo)&lt;/a&gt;
-  &lt;/li&gt;
-&lt;/ul&gt;   </pre>
+&lt;/ul&gt;</code></pre>
       </section>
    </section><section id="tests"><h2>Tests</h2>
       <section class="procedure"><h3>Procedure</h3>
          <p>For each link in the content that uses this technique:</p>
          <ol>
             <li> Check that the link is part of a list item. </li>
-            <li> Check that text of the link combined with the text of its enclosing list item
-                  describes the purpose of the link. </li>
+            <li> Check that text of the link combined with the text of its enclosing list item describes the purpose of the link. </li>
          </ol>
       </section>
       <section class="results"><h3>Expected Results</h3>
@@ -71,7 +78,10 @@ <h3>A list of video games for download</h3>
             <li> The above checks are true. </li>
          </ul>
       </section>
-   </section><section id="related"><h2>Related Techniques</h2><ul>
+   </section>
+	 <section id="related">
+		<h2>Related Techniques</h2>
+		<ul>
       <li><a href="../general/G53">G53</a></li>
       <li><a href="../general/G91">G91</a></li>
       <li><a href="../html/H33">H33</a></li>
@@ -80,4 +90,10 @@ <h3>A list of video games for download</h3>
       <li><a href="../html/H80">H80</a></li>
       <li><a href="../html/H81">H81</a></li>
       <li><a href="../css/C7">C7</a></li>
-   </ul></section><section id="resources"><h2>Resources</h2></section></body></html>
\ No newline at end of file
+   </ul>
+	</section>
+	<section id="resources">
+		<h2>Resources</h2>
+	</section>
+	</body>
+	</html>
\ No newline at end of file
diff --git a/techniques/html/H78.html b/techniques/html/H78.html
index ad12ce85e4..7d50b5b713 100644
--- a/techniques/html/H78.html
+++ b/techniques/html/H78.html
@@ -1,60 +1,79 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Identifying the purpose of a link using link text combined with its enclosing
-          paragraph</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Identifying the purpose of a link using link text combined with its enclosing
-          paragraph</h1><section class="meta"><p class="id">ID: H78</p><p class="technology">Technology: html</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
-      <p>All technologies that contain links.</p>
-   </section><section id="description"><h2>Description</h2>
-      <p>The objective of this technique is to identify the purpose of a link from the link in
-            its paragraph context. The paragraph enclosing the link provides context for an
-            otherwise unclear link when the paragraph is the nearest enclosing block-level ancestor
-            element. The description lets a user distinguish this link from links in the Web page
-            that lead to other destinations and helps the user determine whether to follow the link.
-            Note that simply providing the URI of the destination is generally not sufficiently
-            descriptive. </p>
-      <div class="note">
-         <p>These descriptions will be most useful to the user if the additional information
-              needed to understand the link precedes the link. If the additional information follows
-              the link, there can be confusion and difficulty for screen reader users who are
-              reading through the page in order (top to bottom).</p>
-      </div>
-   </section><section id="examples"><h2>Examples</h2>
-      <section class="example">
-         
-            <p> Announcements column on a Folk Festival Web page.</p>
-         
-         <pre xml:space="preserve">&lt;h3&gt;The final 15&lt;/h3&gt;
-&lt;p&gt;Coming soon to a town near you...the final 15 in the 
-National Folk Festival lineup.
-&lt;a href="final15.html"&gt;[Read more...]&lt;/a&gt;
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+   <head>
+      <title>Identifying the purpose of a link using link text combined with its enclosing paragraph</title>
+      <link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+   </head>
+   <body>
+      <h1>Identifying the purpose of a link using link text combined with its enclosing paragraph</h1>
+      <section class="meta">
+         <p class="id">ID: H78</p>
+         <p class="technology">Technology: html</p>
+         <p class="type">Type: Technique</p>
+      </section>
+      <section id="applicability">
+         <h2>When to Use</h2>
+         <p>All technologies that contain links.</p>
+      </section>
+      <section id="description">
+         <h2>Description</h2>
+         <p>The objective of this technique is to identify the purpose of a link from the link in its paragraph context. The paragraph enclosing the link provides context for an otherwise unclear link when the paragraph is the nearest enclosing block-level ancestor element. The description lets a user distinguish this link from links in the Web page that lead to other destinations and helps the user determine whether to follow the link. Note that simply providing the <abbr title="Uniform Resource Indicator">URI</abbr> of the destination is generally not sufficiently descriptive.</p>
+            <div class="note">
+               <p>These descriptions will be most useful to the user if the additional information needed to understand the link precedes the link. If the additional information follows the link, there can be confusion and difficulty for screen reader users who are reading through the page in order (top to bottom).</p>
+            </div>
+         </section>
+         <section id="examples">
+            <h2>Examples</h2>
+            <section class="example">
+               <h3>Announcements content on a folk festival Web page</h3>
+
+<pre xml:space="preserve"><code class="language-html">&lt;h3&gt;The final 15&lt;/h3&gt;
+&lt;p&gt;
+  Coming soon to a town near you: the final 15 in the 
+  National Folk Festival lineup.
+  &lt;a href="final-15.html"&gt;Read more&lt;/a&gt;
 &lt;/p&gt;
 
 &lt;h3&gt;Folk artists get awards&lt;/h3&gt;
-&lt;p&gt;Performers from the upcoming National Folk Festival receive 
- National Heritage Fellowships. 
- &lt;a href="nheritage.html"&gt;[Read more...]&lt;/a&gt;
-&lt;/p&gt;
-…   </pre>
+&lt;p&gt;
+  Performers from the upcoming National Folk Festival receive 
+  National Heritage Fellowships. 
+  &lt;a href="national-heritage.html"&gt;Read more&lt;/a&gt;
+&lt;/p&gt;</code></pre>
+         </section>
       </section>
-   </section><section id="tests"><h2>Tests</h2>
-      <section class="procedure"><h3>Procedure</h3>
-         <p>For each link in the content that uses this technique:</p>
-         <ol>
-            <li> Check that the link is part of a paragraph. </li>
-            <li> Check that text of the link combined with the text of its enclosing paragraph
-                  describes the purpose of the link. </li>
-         </ol>
+      <section id="tests">
+         <h2>Tests</h2>
+         <section class="procedure">
+            <h3>Procedure</h3>
+            <p>For each link in the content that uses this technique:</p>
+            <ol>
+               <li>Check that the link is part of a paragraph.</li>
+               <li>Check that text of the link combined with the text of its enclosing paragraph describes the purpose of the link.</li>
+            </ol>
+         </section>
+         <section class="results">
+            <h3>Expected Results</h3>
+            <ul>
+               <li>Steps #1 and #2 are true.</li>
+            </ul>
+         </section>
       </section>
-      <section class="results"><h3>Expected Results</h3>
+      <section id="related">
+         <h2>Related Techniques</h2>
          <ul>
-            <li> The above checks are true. </li>
-         </ul>
-      </section>
-   </section><section id="related"><h2>Related Techniques</h2><ul>
-      <li><a href="../general/G53">G53</a></li>
-      <li><a href="../general/G91">G91</a></li>
-      <li><a href="../html/H33">H33</a></li>
-      <li><a href="../html/H77">H77</a></li>
-      <li><a href="../html/H79">H79</a></li>
-      <li><a href="../html/H80">H80</a></li>
-      <li><a href="../html/H81">H81</a></li>
-      <li><a href="../css/C7">C7</a></li>
-   </ul></section><section id="resources"><h2>Resources</h2></section></body></html>
\ No newline at end of file
+         <li><a href="../general/G53">G53</a></li>
+         <li><a href="../general/G91">G91</a></li>
+         <li><a href="../html/H33">H33</a></li>
+         <li><a href="../html/H77">H77</a></li>
+         <li><a href="../html/H79">H79</a></li>
+         <li><a href="../html/H80">H80</a></li>
+         <li><a href="../html/H81">H81</a></li>
+         <li><a href="../css/C7">C7</a></li>
+      </ul>
+   </section>
+   <section id="resources">
+      <h2>Resources</h2>
+   </section>
+</body>
+</html>
\ No newline at end of file
diff --git a/techniques/html/H79.html b/techniques/html/H79.html
index 446ca79b7c..f7ae000464 100644
--- a/techniques/html/H79.html
+++ b/techniques/html/H79.html
@@ -1,81 +1,105 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Identifying the purpose of a link in a data table using the link text combined with its enclosing table cell and associated table header cells</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Identifying the purpose of a link in a data table using the link text combined with its enclosing table cell and associated table header cells</h1><section class="meta"><p class="id">ID: H79</p><p class="technology">Technology: html</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
-      <p>All technologies that contain links.</p>
-   </section><section id="description"><h2>Description</h2>
-      <p>The objective of this technique is to identify the purpose of a link from the link in
-            its data table context. This context is the table cell enclosing the link and the cell's
-            associated table header cells. The data table context provides the purpose for an otherwise
-            unclear link when the table cell is the nearest enclosing block-level ancestor element.
-            It lets a user distinguish this link from other links in the Web page that lead to other
-            destinations and helps the user determine whether to follow the link. Note that simply
-            providing the URI of the destination is not sufficiently descriptive for people with
-            disabilities, especially those with cognitive disabilities.</p>
-   </section><section id="examples"><h2>Examples</h2>
-      <section class="example">
-         <h3>A table of rental car choices</h3>
-         <pre xml:space="preserve"> &lt;table&gt;
-&lt;tr&gt;
-  &lt;th&gt;&lt;/th&gt;
-  &lt;th scope="col"&gt;Alamo&lt;/th&gt;
-  &lt;th scope="col"&gt;Budget&lt;/th&gt;
-  &lt;th scope="col"&gt;National&lt;/th&gt;
-  &lt;th scope="col"&gt;Avis&lt;/th&gt;
-  &lt;th scope="col"&gt;Hertz&lt;/th&gt;
-&lt;/tr&gt;
-&lt;tr&gt;
-  &lt;th scope="row"&gt;Economy cars&lt;/th&gt;
-  &lt;td&gt;&lt;a href="econ_ala.htm"&gt;$67/day&lt;/a&gt;&lt;/td&gt;
-  &lt;td&gt;&lt;a href="econ_bud.htm"&gt;$68/day&lt;/a&gt;&lt;/td&gt;
-  &lt;td&gt;&lt;a href="econ_nat.htm"&gt;$72/day&lt;/a&gt;&lt;/td&gt;
-  &lt;td&gt;&lt;a href="econ_av.htm"&gt;$74/day&lt;/a&gt;&lt;/td&gt;
-  &lt;td&gt;&lt;a href="econ_hz.htm"&gt;$74/day&lt;/a&gt;&lt;/td&gt;
-&lt;/tr&gt;
-&lt;tr&gt;
-  &lt;th scope="row"&gt;Compact cars&lt;/th&gt;
-  &lt;td&gt;&lt;a href="comp_ala.htm"&gt;$68/day&lt;/a&gt;&lt;/td&gt;
-  &lt;td&gt;&lt;a href="comp_bud.htm"&gt;$69/day&lt;/a&gt;&lt;/td&gt;
-  &lt;td&gt;&lt;a href="comp_nat.htm"&gt;$74/day&lt;/a&gt;&lt;/td&gt;
-  &lt;td&gt;&lt;a href="comp_av.htm"&gt;$76/day&lt;/a&gt;&lt;/td&gt;
-  &lt;td&gt;&lt;a href="comp_hz.htm"&gt;$76/day&lt;/a&gt;&lt;/td&gt;
-&lt;/tr&gt;
-&lt;tr&gt;
-  &lt;th scope="row"&gt;Mid-sized cars&lt;/th&gt;
-  &lt;td&gt;&lt;a href="mid_ala.htm"&gt;$79/day&lt;/a&gt;&lt;/td&gt;
-  &lt;td&gt;&lt;a href="mid_bud.htm"&gt;$80/day&lt;/a&gt;&lt;/td&gt;
-  &lt;td&gt;&lt;a href="mid_nat.htm"&gt;$83/day&lt;/a&gt;&lt;/td&gt;
-  &lt;td&gt;&lt;a href="mid_av.htm"&gt;$85/day&lt;/a&gt;&lt;/td&gt;
-  &lt;td&gt;&lt;a href="mid_hz.htm"&gt;$85/day&lt;/a&gt;&lt;/td&gt;
-&lt;/tr&gt;
-&lt;tr&gt;
-  &lt;th scope="row"&gt;Full-sized cars&lt;/th&gt;
-  &lt;td&gt;&lt;a href="full_ala.htm"&gt;$82/day&lt;/a&gt;&lt;/td&gt;
-  &lt;td&gt;&lt;a href="full_bud.htm"&gt;$83/day&lt;/a&gt;&lt;/td&gt;
-  &lt;td&gt;&lt;a href="full_nat.htm"&gt;$89/day&lt;/a&gt;&lt;/td&gt;
-  &lt;td&gt;&lt;a href="full_av.htm"&gt;$91/day&lt;/a&gt;&lt;/td&gt;
-  &lt;td&gt;&lt;a href="full_hz.htm"&gt;$91/day&lt;/a&gt;&lt;/td&gt;
-&lt;/tr&gt;
-&lt;/table&gt;  </pre>
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+   <head>
+      <title>Identifying the purpose of a link in a data table using the link text combined with its enclosing table cell and associated table header cells</title>
+      <link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+   </head>
+   <body>
+      <h1>Identifying the purpose of a link in a data table using the link text combined with its enclosing table cell and associated table header cells</h1>
+      <section class="meta">
+         <p class="id">ID: H79</p>
+         <p class="technology">Technology: html</p>
+         <p class="type">Type: Technique</p>
       </section>
-   </section><section id="tests"><h2>Tests</h2>
-      <section class="procedure"><h3>Procedure</h3>
+      <section id="applicability">
+         <h2>When to Use</h2>
+         <p>All technologies that contain links.</p>
+      </section>
+      <section id="description">
+         <h2>Description</h2>
+         <p>The objective of this technique is to identify the purpose of a link from the link in its data table context. This context is the table cell enclosing the link and the cell's associated table header cells. The data table context provides the purpose for an otherwise unclear link when the table cell is the nearest enclosing block-level ancestor element. It lets a user distinguish this link from other links in the Web page that lead to other destinations and helps the user determine whether to follow the link. Note that simply providing the <abbr title="Uniform Resource Indicator">URI</abbr> of the destination is not sufficiently descriptive for people with disabilities, especially those with cognitive disabilities.</p>
+      </section>
+      <section id="examples">
+         <h2>Examples</h2>
+         <section class="example">
+            <h3>A table of rental car choices</h3>
+<pre xml:space="preserve"><code class="language-html">&lt;table&gt;
+  &lt;caption&gt;Available rental cars with cost per day&lt;/caption&gt;
+  &lt;tr&gt;
+    &lt;th&gt;Type of car&lt;/th&gt;
+    &lt;th&gt;Alamo&lt;/th&gt;
+    &lt;th&gt;Budget&lt;/th&gt;
+    &lt;th&gt;National&lt;/th&gt;
+    &lt;th&gt;Avis&lt;/th&gt;
+    &lt;th&gt;Hertz&lt;/th&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;th scope="row"&gt;Economy&lt;/th&gt;
+    &lt;td&gt;&lt;a href="econ-ala.html"&gt;$67&lt;/a&gt;&lt;/td&gt;
+    &lt;td&gt;&lt;a href="econ-bud.html"&gt;$68&lt;/a&gt;&lt;/td&gt;
+    &lt;td&gt;&lt;a href="econ-nat.html"&gt;$72&lt;/a&gt;&lt;/td&gt;
+    &lt;td&gt;&lt;a href="econ-av.html"&gt;$74&lt;/a&gt;&lt;/td&gt;
+    &lt;td&gt;&lt;a href="econ-hz.html"&gt;$74&lt;/a&gt;&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;th scope="row"&gt;Compact&lt;/th&gt;
+    &lt;td&gt;&lt;a href="comp-ala.html"&gt;$68&lt;/a&gt;&lt;/td&gt;
+    &lt;td&gt;&lt;a href="comp-bud.html"&gt;$69&lt;/a&gt;&lt;/td&gt;
+    &lt;td&gt;&lt;a href="comp-nat.html"&gt;$74&lt;/a&gt;&lt;/td&gt;
+    &lt;td&gt;&lt;a href="comp-av.html"&gt;$76&lt;/a&gt;&lt;/td&gt;
+    &lt;td&gt;&lt;a href="comp-hz.html"&gt;$76&lt;/a&gt;&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;th scope="row"&gt;Mid-sized&lt;/th&gt;
+    &lt;td&gt;&lt;a href="mid-ala.html"&gt;$79&lt;/a&gt;&lt;/td&gt;
+    &lt;td&gt;&lt;a href="mid-bud.html"&gt;$80&lt;/a&gt;&lt;/td&gt;
+    &lt;td&gt;&lt;a href="mid-nat.html"&gt;$83&lt;/a&gt;&lt;/td&gt;
+    &lt;td&gt;&lt;a href="mid-av.html"&gt;$85&lt;/a&gt;&lt;/td&gt;
+    &lt;td&gt;&lt;a href="mid-hz.html"&gt;$85&lt;/a&gt;&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;th scope="row"&gt;Full-sized&lt;/th&gt;
+    &lt;td&gt;&lt;a href="full-ala.html"&gt;$82&lt;/a&gt;&lt;/td&gt;
+    &lt;td&gt;&lt;a href="full-bud.html"&gt;$83&lt;/a&gt;&lt;/td&gt;
+    &lt;td&gt;&lt;a href="full-nat.html"&gt;$89&lt;/a&gt;&lt;/td&gt;
+    &lt;td&gt;&lt;a href="full-av.html"&gt;$91&lt;/a&gt;&lt;/td&gt;
+    &lt;td&gt;&lt;a href="full-hz.html"&gt;$91&lt;/a&gt;&lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/table&gt;</code></pre>
+      </section>
+   </section>
+   <section id="tests">
+      <h2>Tests</h2>
+      <section class="procedure">
+         <h3>Procedure</h3>
          <p>For each link in the content that uses this technique:</p>
          <ol>
-            <li> Check that the link is in a table cell. </li>
-            <li> Check that text of the link combined with the text of the associated table
-               	header cells describes the purpose of the link. </li>
+            <li>Check that the link is in a table cell.</li>
+            <li>Check that text of the link combined with the text of the associated table header cells describes the purpose of the link.</li>
          </ol>
       </section>
-      <section class="results"><h3>Expected Results</h3>
+      <section class="results">
+         <h3>Expected Results</h3>
          <ul>
-            <li> The above checks are true. </li>
+            <li>Steps #1 and #2 are true.</li>
          </ul>
       </section>
-   </section><section id="related"><h2>Related Techniques</h2><ul>
-      <li><a href="../general/G53">G53</a></li>
-      <li><a href="../general/G91">G91</a></li>
-      <li><a href="../html/H33">H33</a></li>
-      <li><a href="../html/H77">H77</a></li>
-      <li><a href="../html/H78">H78</a></li>
-      <li><a href="../html/H80">H80</a></li>
-      <li><a href="../html/H81">H81</a></li>
-      <li><a href="../css/C7">C7</a></li>
-   </ul></section><section id="resources"><h2>Resources</h2></section></body></html>
\ No newline at end of file
+   </section>
+   <section id="related">
+      <h2>Related Techniques</h2>
+      <ul>
+         <li><a href="../general/G53">G53</a></li>
+         <li><a href="../general/G91">G91</a></li>
+         <li><a href="../html/H33">H33</a></li>
+         <li><a href="../html/H77">H77</a></li>
+         <li><a href="../html/H78">H78</a></li>
+         <li><a href="../html/H80">H80</a></li>
+         <li><a href="../html/H81">H81</a></li>
+         <li><a href="../css/C7">C7</a></li>
+      </ul>
+   </section>
+   <section id="resources">
+      <h2>Resources</h2>
+   </section>
+</body>
+</html>
\ No newline at end of file
diff --git a/techniques/html/H80.html b/techniques/html/H80.html
index b10227caa7..f441fd3a61 100644
--- a/techniques/html/H80.html
+++ b/techniques/html/H80.html
@@ -1,57 +1,74 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Identifying the purpose of a link using link text combined with the preceding
-          heading element</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Identifying the purpose of a link using link text combined with the preceding
-          heading element</h1><section class="meta"><p class="id">ID: H80</p><p class="technology">Technology: html</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
-      <p>HTML and XHTML</p>
-   </section><section id="description"><h2>Description</h2>
-      <p>The objective of this technique is to describe the purpose of a link from the context
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>Identifying the purpose of a link using link text combined with the preceding heading element</title>
+		<link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+	</head>
+	<body>
+		<h1>Identifying the purpose of a link using link text combined with the preceding heading element</h1>
+		<section class="meta">
+			<p class="id">ID: H80</p>
+			<p class="technology">Technology: html</p>
+			<p class="type">Type: Technique</p>
+		</section>
+		<section id="applicability">
+			<h2>When to Use</h2>
+      <p><abbr title="HyperText Markup Language">HTML</abbr></p>
+		</section>
+		<section id="description">
+			<h2>Description</h2>
+         <p>The objective of this technique is to describe the purpose of a link from the context
             provided by its heading context. The preceding heading provides context for an otherwise
             unclear link. The description lets a user distinguish this link from links in the Web
             page that lead to other destinations and helps the user determine whether to follow the
             link.</p>
       <div class="note">
-         <p>Whenever possible, provide link text that identifies the purpose of the link without
-              needing additional context.</p>
+         <p>Whenever possible, provide link text that identifies the purpose of the link without needing additional context.</p>
       </div>
-   </section><section id="examples"><h2>Examples</h2>
-      <section class="example">
-         <h3>Blocks of information on hotels</h3>
-         
-            <p>The information for each hotel consists of the hotel name, a description and a
-                series of links to a map, photos, directions, guest reviews and a booking form.</p>
-         
-         <pre xml:space="preserve">&lt;h2&gt;&lt;a href="royal_palm_hotel.html"&gt;Royal Palm Hotel&lt;/a&gt;&lt;/h2&gt;
-  &lt;ul class="horizontal"&gt;
-    &lt;li&gt;&lt;a href="royal_palm_hotel_map.html"&gt;Map&lt;/a&gt;&lt;/li&gt;
-    &lt;li&gt;&lt;a href="royal_palm_hotel_photos.html"&gt;Photos&lt;/a&gt;&lt;/li&gt;
-    &lt;li&gt;&lt;a href="hroyal_palm_hotel_directions.html"&gt;Directions&lt;/a&gt;&lt;/li&gt;
-    &lt;li&gt;&lt;a href="royal_palm_hotel_reviews.html"&gt;Guest reviews&lt;/a&gt;&lt;/li&gt;
-    &lt;li&gt;&lt;a href="royal_palm_hotel_book.html"&gt;Book now&lt;/a&gt;&lt;/li&gt;
+   </section>
+	 <section id="examples">
+		<h2>Examples</h2>
+		<section class="example">
+			<h3>Blocks of information on hotels</h3>
+			<p>The information for each hotel consists of the hotel name, a description and a series of links to a map, photos, directions, guest reviews and a booking form.</p>
+
+<pre xml:space="preserve"><code class="language-html">&lt;h2&gt;&lt;a href="royal_palm_hotel.html" id="royal-heading"&gt;Royal Palm Hotel&lt;/a&gt;&lt;/h2&gt;
+&lt;nav aria-labelledby="royal-heading"&gt;
+  &lt;ul&gt;
+    &lt;li&gt;&lt;a href="royal-palm-hotel_map.html"&gt;Map&lt;/a&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;a href="royal-palm-hotel-photos.html"&gt;Photos&lt;/a&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;a href="hroyal-palm-hotel-directions.html"&gt;Directions&lt;/a&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;a href="royal-palm-hotel-reviews.html"&gt;Guest reviews&lt;/a&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;a href="royal-palm-hotel-book.html"&gt;Book now&lt;/a&gt;&lt;/li&gt;
   &lt;/ul&gt;
+&lt;/nav&gt;	
 
-&lt;h2&gt;&lt;a href="hotel_three_rivers.html"&gt;Hotel Three Rivers&lt;/a&gt;&lt;/h2&gt;
-  &lt;ul class="horizontal"&gt;
-    &lt;li&gt;&lt;a href="hotel_three_rivers_map.html"&gt;Map&lt;/a&gt;&lt;/li&gt;
-    &lt;li&gt;&lt;a href="hotel_three_rivers_photos.html"&gt;Photos&lt;/a&gt;&lt;/li&gt;
-    &lt;li&gt;&lt;a href="hotel_three_rivers_directions.html"&gt;Directions&lt;/a&gt;&lt;/li&gt;
-    &lt;li&gt;&lt;a href="hotel_three_rivers_reviews.html"&gt;Guest reviews&lt;/a&gt;&lt;/li&gt;
-    &lt;li&gt;&lt;a href="hotel_three_rivers_book.html"&gt;Book now&lt;/a&gt;&lt;/li&gt;
-  &lt;/ul&gt;     </pre>
+&lt;h2&gt;&lt;a href="hotel-three-rivers.html" id="rivers-heading"&gt;Hotel Three Rivers&lt;/a&gt;&lt;/h2&gt;
+&lt;nav aria-labelledby="rivers-heading"&gt;
+  &lt;ul&gt;
+    &lt;li&gt;&lt;a href="hotel-three-rivers-map.html"&gt;Map&lt;/a&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;a href="hotel-three-rivers-photos.html"&gt;Photos&lt;/a&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;a href="hotel-three-rivers-directions.html"&gt;Directions&lt;/a&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;a href="hotel-three-rivers-reviews.html"&gt;Guest reviews&lt;/a&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;a href="hotel-three-rivers-book.html"&gt;Book now&lt;/a&gt;&lt;/li&gt;
+  &lt;/ul&gt;
+&lt;/nav&gt;</code></pre>
       </section>
       <section class="example">
-         <h3>A document provided in three formats</h3>
-         <pre xml:space="preserve">&lt;h2&gt;Annual Report 2006-2007&lt;/h2&gt;
+				<h3>A document provided in three formats</h3>
+<pre xml:space="preserve"><code class="language-html">&lt;h2&gt;Annual Report 2006-2007&lt;/h2&gt;
 &lt;p&gt; 
-  &lt;a href="annrep0607.html"&gt;(HTML)&lt;/a&gt;&amp;nbsp;
-  &lt;a href="annrep0607.pdf"&gt;(PDF)&lt;/a&gt;&amp;nbsp;
-  &lt;a href="annrep0607.rtf"&gt;(RTF)&lt;/a&gt;
-&lt;/p&gt;       </pre>
+  &lt;a href="annual-report-0607.html"&gt;HTML&lt;/a&gt;
+  &lt;a href="annual-report-0607.pdf"&gt;PDF&lt;/a&gt;
+  &lt;a href="annual-report-0607.rtf"&gt;RTF&lt;/a&gt;
+&lt;/p&gt;</code></pre>
       </section>
       <section class="example">
          <h3>Newspaper Web site</h3>
-         <pre xml:space="preserve">&lt;div class=&quot;card-link&quot;&gt;
-   &lt;h2&gt;&lt;a href="Stockmarket_05052007.htm&gt;Stock market soars as bullishness prevails&lt;/a&gt;&lt;/h2&gt;
-   &lt;p&gt;this week was a stellar week for the stock market as investing in gold rose 2%.&lt;/p&gt;
-&lt;/div&gt;</pre>
+<pre xml:space="preserve"><code class="language-html">&lt;div class=&quot;card-link&quot;&gt;
+   &lt;h2&gt;&lt;a href="market-2023-09-27.html"&gt;Stock market soars as bullishness prevails&lt;/a&gt;&lt;/h2&gt;
+   &lt;p&gt;This week was a stellar week for the stock market as investing in gold rose 2%.&lt;/p&gt;
+&lt;/div&gt;</code></pre>
          <p>A script is used to find each element with a class of <code>card-link</code> and append an additional paragraph with a &quot;Read more&quot; link at the end of the div with the class <code>.card-link</code> that goes to the same location as the link in the heading.</p>
       </section>
    </section><section id="tests"><h2>Tests</h2>
@@ -59,16 +76,19 @@ <h3>Newspaper Web site</h3>
          <p>For each link in the content that uses this technique:</p>
          <ol>
             <li>Find the heading element that precedes the link</li>
-            <li>Check that the text of the link combined with the text of that heading describes
-                  the purpose of the link.</li>
+            <li>Check that the text of the link combined with the text of that heading describes the purpose of the link.</li>
          </ol>
       </section>
-      <section class="results"><h3>Expected Results</h3>
+      <section class="results">
+				<h3>Expected Results</h3>
          <ul>
             <li>#2 is true.</li>
          </ul>
       </section>
-   </section><section id="related"><h2>Related Techniques</h2><ul>
+   </section>
+	 <section id="related">
+		<h2>Related Techniques</h2>
+		<ul>
       <li><a href="../general/G91">G91</a></li>
       <li><a href="../general/G53">G53</a></li>
       <li><a href="../html/H33">H33</a></li>
@@ -77,4 +97,10 @@ <h3>Newspaper Web site</h3>
       <li><a href="../html/H78">H78</a></li>
       <li><a href="../html/H79">H79</a></li>
       <li><a href="../html/H81">H81</a></li>
-   </ul></section><section id="resources"><h2>Resources</h2></section></body></html>
+   </ul>
+	</section>
+	<section id="resources">
+		<h2>Resources</h2>
+	</section>
+	</body>
+	</html>
diff --git a/techniques/html/H81.html b/techniques/html/H81.html
index cb3e2d9033..fa222378f1 100644
--- a/techniques/html/H81.html
+++ b/techniques/html/H81.html
@@ -1,88 +1,131 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Identifying the purpose of a link in a nested list using link text combined with
-          the parent list item under which the list is nested</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Identifying the purpose of a link in a nested list using link text combined with
-          the parent list item under which the list is nested</h1><section class="meta"><p class="id">ID: H81</p><p class="technology">Technology: html</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
-      <p>HTML and XHTML</p>
-   </section><section id="description"><h2>Description</h2>
-      <p>The objective of this technique is to describe the purpose of a link in a nested list
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+   <head>
+      <title>Identifying the purpose of a link in a nested list using link text combined with the parent list item under which the list is nested</title>
+      <link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+   </head>
+   <body>
+      <h1>Identifying the purpose of a link in a nested list using link text combined with
+          the parent list item under which the list is nested</h1>
+      <section class="meta">
+         <p class="id">ID: H81</p>
+         <p class="technology">Technology: html</p>
+         <p class="type">Type: Technique</p>
+      </section>
+      <section id="applicability">
+         <h2>When to Use</h2>
+         <p><abbr title="HyperText Markup Language">HTML</abbr></p>
+      </section>
+      <section id="description">
+         <h2>Description</h2>
+         <p>The objective of this technique is to describe the purpose of a link in a nested list
             from the context provided by the list item under which the list is nested. This list
             item provides context for an otherwise unclear link. The description lets a user
             distinguish this link from links in the Web page that lead to other destinations and
             helps the user determine whether to follow the link.</p>
-      <p>Because current assistive technologies do not include commands to query  contextual information provided by parent list items, use of this technique requires users to navigate the list one item at a time. Therefore, this technique may not be appropriate for very long or deeply nested lists.</p>
-      <div class="note">
-         <p>Whenever possible, provide link text that identifies the purpose of the link without
-              needing additional context.</p>
-      </div>
-   </section><section id="examples"><h2>Examples</h2>
-      <section class="example">
-         <h3>A document provided in three formats</h3>
-         <pre xml:space="preserve">&lt;ul&gt;
-&lt;li&gt;Annual Report 2005-2006
-  &lt;ul&gt; 
-  &lt;li&gt;&lt;a href="annrep0506.html"&gt;(HTML)&lt;/a&gt;&lt;/li&gt;
-  &lt;li&gt;&lt;a href="annrep0506.pdf"&gt;(PDF)&lt;/a&gt;&lt;/li&gt;
-  &lt;li&gt;&lt;a href="annrep0506.rtf"&gt;(RTF)&lt;/a&gt;&lt;/li&gt;
-  &lt;/ul&gt;
-&lt;/li&gt;
-&lt;li&gt;Annual Report 2006-2007
-  &lt;ul&gt; 
-  &lt;li&gt;&lt;a href="annrep0607.html"&gt;(HTML)&lt;/a&gt;&lt;/li&gt;
-  &lt;li&gt;&lt;a href="annrep0607.pdf"&gt;(PDF)&lt;/a&gt;&lt;/li&gt;
-  &lt;li&gt;&lt;a href="annrep0607.rtf"&gt;(RTF)&lt;/a&gt;&lt;/li&gt;
-  &lt;/ul&gt;
-&lt;/li&gt;
-&lt;/ul&gt; </pre>
+            <p>Because current assistive technologies do not include commands to query contextual information provided by parent list items, use of this technique requires users to navigate the list one item at a time. Therefore, this technique may not be appropriate for very long or deeply nested lists.</p>
+            <div class="note">
+               <p>Whenever possible, provide link text that identifies the purpose of the link without needing additional context.</p>
+            </div>
+         </section>
+         <section id="examples">
+            <h2>Examples</h2>
+            <section class="example">
+               <h3>A document provided in three formats</h3>
+<pre xml:space="preserve"><code class="language-html">&lt;ul&gt;
+  &lt;li&gt;Annual Report 2021
+    &lt;ul&gt; 
+      &lt;li&gt;
+        &lt;a href="ar-2021.html"&gt;&lt;abbr title="HyperText Markup Language"&gt;HTML&lt;/abbr&gt;&lt;/a&gt;
+      &lt;/li&gt;
+      &lt;li&gt;
+        &lt;a href="ar-2021.pdf"&gt;&lt;abbr title="Portable Document Format"&gt;PDF&lt;/abbr&gt;&lt;/a&gt;
+      &lt;/li&gt;
+      &lt;li&gt;
+        &lt;a href="ar-2021.rtf"&gt;&lt;abbr title="Rich Text Format"&gt;RTF&lt;/abbr&gt;&lt;/a&gt;
+      &lt;/li&gt;
+    &lt;/ul&gt;
+  &lt;/li&gt;
+  &lt;li&gt;Annual Report 2022
+    &lt;ul&gt; 
+      &lt;li&gt;
+        &lt;a href="ar-2022.html"&gt;HTML&lt;/a&gt;
+      &lt;/li&gt;
+      &lt;li&gt;
+        &lt;a href="ar-2022.pdf"&gt;PDF&lt;/a&gt;
+      &lt;/li&gt;
+      &lt;li&gt;
+        &lt;a href="ar-2022.rtf"&gt;RTF&lt;/a&gt;
+      &lt;/li&gt;
+    &lt;/ul&gt;
+  &lt;/li&gt;
+&lt;/ul&gt;</code></pre>
       </section>
       <section class="example">
-         <h3>Blocks of information on hotels</h3>
-         
-            <p>The information for each hotel consists of the hotel name, a description and a
-                series of links to a map, photos, directions, guest reviews and a booking form.</p>
+         <h3>Blocks of information about hotels</h3>
+         <p>The information for each hotel consists of the hotel name, a description and a series of links to a map, photos, directions, guest reviews and a booking form.</p>
          
-         <pre xml:space="preserve">&lt;ul&gt;
-&lt;li&gt;&lt;a href="royal_palm_hotel.html"&gt;Royal Palm Hotel&lt;/a&gt;
-  &lt;ul class="horizontal"&gt;
-    &lt;li&gt;&lt;a href="royal_palm_hotel_map.html"&gt;Map&lt;/a&gt;&lt;/li&gt;
-    &lt;li&gt;&lt;a href="royal_palm_hotel_photos.html"&gt;Photos&lt;/a&gt;&lt;/li&gt;
-    &lt;li&gt;&lt;a href="hroyal_palm_hotel_directions.html"&gt;Directions&lt;/a&gt;&lt;/li&gt;
-    &lt;li&gt;&lt;a href="royal_palm_hotel_reviews.html"&gt;Guest reviews&lt;/a&gt;&lt;/li&gt;
-    &lt;li&gt;&lt;a href="royal_palm_hotel_book.html"&gt;Book now&lt;/a&gt;&lt;/li&gt;
-  &lt;/ul&gt;
-&lt;/li&gt;
-&lt;li&gt;&lt;a href="hotel_three_rivers.html"&gt;Hotel Three Rivers&lt;/a&gt;
-  &lt;ul class="horizontal"&gt;
-    &lt;li&gt;&lt;a href="hotel_three_rivers_map.html"&gt;Map&lt;/a&gt;&lt;/li&gt;
-    &lt;li&gt;&lt;a href="hotel_three_rivers_photos.html"&gt;Photos&lt;/a&gt;&lt;/li&gt;
-    &lt;li&gt;&lt;a href="hotel_three_rivers_directions.html"&gt;Directions&lt;/a&gt;&lt;/li&gt;
-    &lt;li&gt;&lt;a href="hotel_three_rivers_reviews.html"&gt;Guest reviews&lt;/a&gt;&lt;/li&gt;
-    &lt;li&gt;&lt;a href="hotel_three_rivers_book.html"&gt;Book now&lt;/a&gt;&lt;/li&gt;
+<pre xml:space="preserve"><code class="language-html">&lt;nav&gt;
+  &lt;ul&gt;
+    &lt;li&gt;&lt;a href="royal-palm-hotel.html"&gt;Royal Palm Hotel&lt;/a&gt;
+      &lt;ul&gt;
+        &lt;li&gt;&lt;a href="royal-palm-hotel-map.html"&gt;Map&lt;/a&gt;&lt;/li&gt;
+        &lt;li&gt;&lt;a href="royal-palm-hotel-photos.html"&gt;Photos&lt;/a&gt;&lt;/li&gt;
+        &lt;li&gt;&lt;a href="royal-palm-hotel-directions.html"&gt;Directions&lt;/a&gt;&lt;/li&gt;
+        &lt;li&gt;&lt;a href="royal-palm-hotel-reviews.html"&gt;Guest reviews&lt;/a&gt;&lt;/li&gt;
+        &lt;li&gt;&lt;a href="royal-palm-hotel-book.html"&gt;Book now&lt;/a&gt;&lt;/li&gt;
+      &lt;/ul&gt;
+    &lt;/li&gt;
+    &lt;li&gt;&lt;a href="hotel-three-rivers.html"&gt;Hotel Three Rivers&lt;/a&gt;
+      &lt;ul&gt;
+        &lt;li&gt;&lt;a href="hotel-three-rivers-map.html"&gt;Map&lt;/a&gt;&lt;/li&gt;
+        &lt;li&gt;&lt;a href="hotel-three-rivers-photos.html"&gt;Photos&lt;/a&gt;&lt;/li&gt;
+        &lt;li&gt;&lt;a href="hotel-three-rivers-directions.html"&gt;Directions&lt;/a&gt;&lt;/li&gt;
+        &lt;li&gt;&lt;a href="hotel-three-rivers-reviews.html"&gt;Guest reviews&lt;/a&gt;&lt;/li&gt;
+        &lt;li&gt;&lt;a href="hotel-three-rivers-book.html"&gt;Book now&lt;/a&gt;&lt;/li&gt;
+      &lt;/ul&gt;
+    &lt;/li&gt;
   &lt;/ul&gt;
-&lt;/li&gt;
-&lt;/ul&gt; </pre>
+&lt;/nav&gt;</code></pre>
       </section>
-   </section><section id="tests"><h2>Tests</h2>
-      <section class="procedure"><h3>Procedure</h3>
-         <p>For each link in the content that uses this technique:</p>
+   </section>
+   <section id="tests">
+      <h2>Tests</h2>
+      <section class="procedure">
+         <h3>Procedure</h3>
+         <p>For each nested link in the content that uses this technique:</p>
          <ol>
-            <li>Find the <code class="el">ul</code> or ol element that contains the link</li>
-            <li>Check that this list element (<code class="el">ul</code>, <code class="el">ol</code>) is a descendant of an
-                    <code class="el">li</code> element</li>
-            <li>Check that the text of the link combined with the text of that li element
-                  describes the purpose of the link.</li>
+            <li>Find the link's parent <code class="language-html">ul</code> or <code class="language-html">ol</code> element.</li>
+            <li>Check that this list element (<code class="language-html">ul</code>, <code class="language-html">ol</code>) is a descendant of an <code class="language-html">li</code> element.</li>
+            <li>Check that the text of the link combined with the text of that parent <code class="language-html">li</code> element describes the purpose of the link.</li>
          </ol>
       </section>
-      <section class="results"><h3>Expected Results</h3>
+      <section class="results">
+         <h3>Expected Results</h3>
          <ul>
-            <li>The above checks are true.</li>
+            <li>Checks #2 and #3 are true.</li>
          </ul>
       </section>
-   </section><section id="related"><h2>Related Techniques</h2><ul>
-      <li><a href="../general/G91">G91</a></li>
-      <li><a href="../general/G53">G53</a></li>
-      <li><a href="../html/H33">H33</a></li>
-      <li><a href="../css/C7">C7</a></li>
-      <li><a href="../html/H77">H77</a></li>
-      <li><a href="../html/H78">H78</a></li>
-      <li><a href="../html/H79">H79</a></li>
-      <li><a href="../html/H80">H80</a></li>
-   </ul></section><section id="resources"><h2>Resources</h2></section></body></html>
\ No newline at end of file
+   </section>
+   <section id="related">
+      <h2>Related Techniques</h2>
+      <ul>
+         <li><a href="../general/G91">G91</a></li>
+         <li><a href="../general/G53">G53</a></li>
+         <li><a href="../html/H33">H33</a></li>
+         <li><a href="../css/C7">C7</a></li>
+         <li><a href="../html/H77">H77</a></li>
+         <li><a href="../html/H78">H78</a></li>
+         <li><a href="../html/H79">H79</a></li>
+         <li><a href="../html/H80">H80</a></li>
+      </ul>
+   </section>
+   <section id="resources">
+      <h2>Resources</h2>
+      <ul>
+        <li><a href="https://html.spec.whatwg.org/multipage/grouping-content.html#the-ol-element">HTML - the <code class="language-html">ol</code> element</a>.</li>
+        <li><a href="https://html.spec.whatwg.org/multipage/grouping-content.html#the-ul-element">HTML - the <code class="language-html">ul</code> element</a>.</li>
+      </ul>
+   </section>
+  </body>
+</html>
\ No newline at end of file
diff --git a/techniques/html/H83.html b/techniques/html/H83.html
index 353b68fda9..d70b3e8757 100644
--- a/techniques/html/H83.html
+++ b/techniques/html/H83.html
@@ -1,35 +1,63 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using the target attribute to open a new window on user request and indicating this in link text</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Using the target attribute to open a new window on user request and indicating this in link text</h1><section class="meta"><p class="id">ID: H83</p><p class="technology">Technology: html</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
-      <p>HTML5, HTML 4.01 Transitional, and XHTML 1.0 Transitional</p>
-   </section><section id="description"><h2>Description</h2>
-      <p>The objective of this technique is to avoid confusion that may be caused by the appearance of new windows that were not requested by the user. Suddenly opening new windows can disorient users or be missed completely by some. In HTML5, HTML 4.01 Transitional, and XHTML 1.0 Transitional, the <code class="att">target</code> attribute can be used to open a new window, instead of automatic pop-ups. (The <code class="att">target</code> attribute is deleted from HTML 4.01 Strict and XHTML 1.0 Strict.) Note that not using the <code class="att">target</code> allows the user to decide whether a new window should be opened or not. Use of the <code class="att">target</code> attribute provides an unambiguously machine-readable indication that a new window will open. User agents can inform the user, and can also be configured not to open the new window. For those not using assistive technology, the indication would also be available from the link text.</p>
-   </section><section id="examples"><h2>Examples</h2>
-      <section class="example">
-         
-            <p>The following example illustrates  the use of the <code class="att">target</code> attribute in a link that indicates it will open in a new window.</p>
-         
-         <pre xml:space="preserve">&lt;a href="help.html" target="_blank"&gt;Show Help (opens new window)&lt;/a&gt;</pre>
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+   <head>
+      <title>Using the target attribute to open a new window on user request and indicating this in link text</title>
+      <link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+   </head>
+   <body>
+      <h1>Using the <code class="language-html">target</code> attribute to open a new window on user request and indicating this in link text</h1>
+      <section class="meta">
+         <p class="id">ID: H83</p>
+         <p class="technology">Technology: html</p>
+         <p class="type">Type: Technique</p>
       </section>
-   </section><section id="tests"><h2>Tests</h2>
-      <section class="procedure"><h3>Procedure</h3>
-         <ol>
-            <li>Activate each link in the document to check if it opens a new window.</li>
-            <li>For each link that opens a new window, check that it uses the <code class="att">target</code> attribute.</li>
-            <li>Check that the link text contains information indicating that the link will open in a new window.</li>
-         </ol>
+      <section id="applicability">
+         <h2>When to Use</h2>
+         <p><abbr title="HyperText Markup Language">HTML</abbr></p>
       </section>
-      <section class="results"><h3>Expected Results</h3>
+      <section id="description">
+         <h2>Description</h2>
+         <p>The objective of this technique is to avoid confusion that may be caused by the appearance of new windows that were not requested by the user. Suddenly opening new windows can disorient users or be missed completely by some. In HTML, the <code class="language-html">target</code> attribute can be used to open a new window.</p>
+         <p>Use of the <code class="language-html">target</code> attribute provides an unambiguously machine-readable indication that a new window will open. User agents can inform the user, and can also be configured not to open the new window. For those not using assistive technology, the indication would also be available from the link text.</p>
+         <div class="note">
+            <p>Note that not using the <code class="language-html">target</code> allows the user to decide whether a new window should be opened or not.</p>
+         </div>
+      </section>
+      <section id="examples">
+         <h2>Examples</h2>
+         <section class="example">
+            <h3>Using the <code class="language-html">target</code> attribute in a link to indicate it will open in a new window</h3>
+         <pre xml:space="preserve"><code class="language-html">&lt;a href="help.html" target="_blank"&gt;Show Help (opens new window)&lt;/a&gt;</code></pre>
+         </section>
+      </section>
+      <section id="tests">
+         <h2>Tests</h2>
+         <section class="procedure">
+            <h3>Procedure</h3>
+            <ol>
+               <li>Activate each link in the document to check if it opens a new window.</li>
+               <li>For each link that opens a new window, check that it uses the <code class="language-html">target</code> attribute.</li>
+               <li>Check that the link text contains information indicating that the link will open in a new window.</li>
+            </ol>
+         </section>
+         <section class="results">
+            <h3>Expected Results</h3>
+            <ul>
+               <li>Checks #2 and #3 are true.</li>
+            </ul>
+         </section>
+      </section>
+      <section id="related">
+         <h2>Related Techniques</h2>
          <ul>
-            <li>Checks #2 and #3 are true.</li>
+            <li><a href="../client-side-script/SCR24">SCR24</a></li>
          </ul>
       </section>
-   </section><section id="related"><h2>Related Techniques</h2><ul>
-      <li><a href="../client-side-script/SCR24">SCR24</a></li>
-   </ul></section><section id="resources"><h2>Resources</h2>
-      
+      <section id="resources">
+         <h2>Resources</h2>
          <ul>
-            <li>
-									         <a href="https://www.w3.org/TR/html5/links.html#attr-hyperlink-target">HTML5 target attribute</a>
-								       </li>
+            <li><a href="https://html.spec.whatwg.org/multipage/links.html#attr-hyperlink-target">HTML - <code class="language-html">target</code> attribute</a>.</li>
          </ul>
-      
-   </section></body></html>
\ No newline at end of file
+      </section>
+   </body>
+   </html>
\ No newline at end of file
diff --git a/techniques/html/H84.html b/techniques/html/H84.html
index 3851c40063..62fc87206a 100644
--- a/techniques/html/H84.html
+++ b/techniques/html/H84.html
@@ -1,64 +1,87 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using a button with a select element to perform an action</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Using a button with a select element to perform an action</h1><section class="meta"><p class="id">ID: H84</p><p class="technology">Technology: html</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
-      <p>HTML and XHTML</p>
-   </section><section id="description"><h2>Description</h2>
-      <p>The objective of this technique is to allow the user to control when an action is performed, rather than having the action occur as a side effect of choosing a value for the <code class="el">select</code> element. The user may inspect the different values of the <code class="el">select</code> element, or may accidentally choose the wrong value, without causing the action to occur. When the user is satisfied with their choice, they select the button to perform the action.</p>
-      <p>This is particularly important for users who are choosing the value of the <code class="el">select</code> element via the keyboard, since navigating through the options of the <code class="el">select</code> element changes the value of the control. </p>
-   </section><section id="examples"><h2>Examples</h2>
-      <section class="example">
-         <h3>A Calendar</h3>
-         
-            <p>A Web page lets the user choose any month of any year and display the calendar for that month. After the user has set the month and year, he displays the calendar by pressing the "Show" button. This example relies on client-side scripting to implement the action.</p>
-         
-         <pre xml:space="preserve">
-&lt;label for="month"&gt;Month:&lt;/label&gt;
-&lt;select name="month" id="month"&gt;
-  &lt;option value="1"&gt;January&lt;/option&gt;
-  &lt;option value="2"&gt; February&lt;/option&gt;
-  ...
-  &lt;option value="12"&gt;December&lt;/option&gt;
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+   <head>
+      <title>Using a button with a select element to perform an action</title>
+      <link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+   </head>
+   <body>
+      <h1>Using a button with a select element to perform an action</h1>
+      <section class="meta">
+         <p class="id">ID: H84</p>
+         <p class="technology">Technology: html</p>
+         <p class="type">Type: Technique</p>
+      </section>
+      <section id="applicability">
+         <h2>When to Use</h2>
+         <p><abbr title="HyperText Markup Language">HTML</abbr></p>
+      </section>
+      <section id="description">
+         <h2>Description</h2>
+         <p>The objective of this technique is to allow the user to control when an action is performed, rather than having the action occur as a side effect of choosing a value for the <code class="language-html">select</code> element. The user may inspect the different values of the <code class="language-html">select</code> element, or may accidentally choose the wrong value, without causing the action to occur. When the user is satisfied with their choice, they select the button to perform the action.</p>
+         <p>This is particularly important for users who are choosing the value of the <code class="language-html">select</code> element via the keyboard, since navigating through the options of the <code class="language-html">select</code> element changes the value of the control.</p>
+      </section>
+      <section id="examples">
+         <h2>Examples</h2>
+         <section class="example">
+            <h3>A calendar</h3>
+            <p>A Web page lets the user choose a quarter of any year and display the calendar for those months. After the user has set the quarter and year, they display the calendar by pressing the "Show" button. This example relies on client-side scripting to implement the action.</p>
+<pre xml:space="preserve"><code class="language-html">&lt;label for="quarter"&gt;Quarter:&lt;/label&gt;
+&lt;select id="quarter" name="quarter"&gt;
+  &lt;option value="1"&gt;Quarter 1 (January - March)&lt;/option&gt;
+  &lt;option value="2"&gt;Quarter 2 (April - June)&lt;/option&gt;
+  &lt;option value="3"&gt;Quarter 3 (July - September)&lt;/option&gt;
+  &lt;option value="4"&gt;Quarter 4 (October - December)&lt;/option&gt;
 &lt;/select&gt; 
 &lt;label for="year"&gt;Year:&lt;/label&gt;
-&lt;input type="text" name="year" id="year"&gt;
-&lt;input type="button" value="Show" onclick = "..."&gt;</pre>
+&lt;input name="year" type="text" id="year"&gt;
+&lt;button name="show" type="button"&gt;Show&lt;/button&gt;</code></pre>
       </section>
       <section class="example">
          <h3>Choosing an action</h3>
+         <p>A <code class="language-html">select</code> element contains a list of possible actions. The action is not performed until the user presses the "Update" button.</p>
          
-            <p>A <code class="el">select</code> element contains a list of possible actions. The action is not performed until the user presses the "Do it" button.</p>
-         
-         <pre xml:space="preserve">
-&lt;form action="http://somesite.com/action" method="post"&gt;
+<pre xml:space="preserve"><code class="language-html">&lt;form action="/process-form" method="post"&gt;
   &lt;label for="action"&gt;Options:&lt;/label&gt;
   &lt;select name="action" id="action"&gt;
-    &lt;option value="help"&gt;Help&lt;/option&gt;
-    &lt;option value="reset"&gt;Reset&lt;/option&gt;
-    &lt;option value="submit"&gt;Submit&lt;/option&gt;
+    &lt;option value="add"&gt;Add&lt;/option&gt;
+    &lt;option value="remove"&gt;Remove&lt;/option&gt;
+    &lt;option value="cancel"&gt;Cancel&lt;/option&gt;
+    &lt;option value="order"&gt;Order&lt;/option&gt;
   &lt;/select&gt; 
-  &lt;button type="submit" name="submit" value="submit"&gt;Do It &lt;/button&gt;
-&lt;/form&gt;              </pre>
+  &lt;button name="submit" type="submit"&gt;Update&lt;/button&gt;
+&lt;/form&gt;</code></pre>
       </section>
-   </section><section id="tests"><h2>Tests</h2>
-      <section class="procedure"><h3>Procedure</h3>
-         <p>For each <code class="el">select</code> element/button element combination:</p>
+   </section>
+   <section id="tests">
+      <h2>Tests</h2>
+      <section class="procedure">
+         <h3>Procedure</h3>
+         <p>For each <code class="language-html">select</code> element/button element combination:</p>
          <ol>
-            <li>Check that focus (including keyboard focus) on an option in the <code class="el">select</code> element does not result in any actions</li>
-            <li>Check that selecting the button performs the action associated with the current <code class="el">select</code> value</li>
+            <li>Check that focus (including keyboard focus) on an option in the <code class="language-html">select</code> element does not result in any actions</li>
+            <li>Check that selecting the button performs the action associated with the current <code class="language-html">select</code> value</li>
          </ol>
       </section>
-      <section class="results"><h3>Expected Results</h3>
+      <section class="results">
+         <h3>Expected Results</h3>
          <ul>
             <li>All checks are true.</li>
          </ul>
       </section>
-   </section><section id="related"><h2>Related Techniques</h2><ul>
-      <li><a href="../html/H32">H32</a></li>
-      <li><a href="../general/G80">G80</a></li>
-   </ul></section><section id="resources"><h2>Resources</h2>
-      
-         <ul>
-            <li>
-									         <a href="http://www.cs.tut.fi/~jkorpela/forms/navmenu.html">Jukka Korpela: Navigational pulldown menus in HTML</a>
-								       </li>
-         </ul>
-      
-   </section></body></html>
\ No newline at end of file
+   </section>
+   <section id="related">
+      <h2>Related Techniques</h2>
+      <ul>
+         <li><a href="../html/H32">H32</a></li>
+         <li><a href="../general/G80">G80</a></li>
+      </ul>
+   </section>
+   <section id="resources">
+      <h2>Resources</h2>
+      <ul>
+         <li><a href="https://html.spec.whatwg.org/multipage/form-elements.html#the-button-element">HTML - the <code class="language-html">button</code> element</a>.</li>
+         <li><a href="https://html.spec.whatwg.org/multipage/form-elements.html#the-select-element">HTML - the <code class="language-html">select</code> element</a>.</li>
+      </ul>
+   </section>
+</body>
+</html>
\ No newline at end of file
diff --git a/techniques/html/H85.html b/techniques/html/H85.html
index a8213ec4eb..b6af9b47fb 100644
--- a/techniques/html/H85.html
+++ b/techniques/html/H85.html
@@ -1,109 +1,115 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using OPTGROUP to group OPTION elements inside a SELECT</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Using OPTGROUP to group OPTION elements inside a SELECT</h1><section class="meta"><p class="id">ID: H85</p><p class="technology">Technology: html</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
-      <p>HTML and XHTML pages that collect user input.</p>
-   </section><section id="description"><h2>Description</h2>
-      <p>The objective of this technique is to group items in a selection list. A selection list is a set of allowed values for a form control such as a multi-select list or a combo box. Often, selection lists have groups of related options. Those groups should be semantically identified, rather than simply delimiting the groups with "dummy" list entries. This allows user agents to collapse the options by group to support quicker skimming of the options, and to indicate in what group an option of interest is located. It also helps to visually break up long lists so that users can more easily locate the option(s) they are interested in.</p>
-      <p>In HTML, the <code class="el">select</code> element is used to create both multi-select lists and combo boxes. The various allowed options are each indicated with <code class="el">option</code> elements. To group options together, use the <code class="el">optgroup</code> element, with the related <code class="el">option</code> elements inside that element. Label the group with the "label" attribute so users will know what to expect inside the group.</p>
-      <p>The <code class="el">optgroup</code> element should be directly inside the <code class="el">select</code> element, and the <code class="el">option</code>  elements directly inside the <code class="el">optgroup</code>. It is possible for a <code class="el">select</code> element to contain both single <code class="el">option</code> elements and <code class="el">optgroup</code> groups, though authors should consider if this is in fact the desired intent when using this. It is not possible to nest the <code class="el">optgroup</code> element, so only one level of grouping can be done within a <code class="el">select</code>.</p>
-      <p>If grouping information is essential to understanding the list, authors may define <code class="el">option</code> labels that can be understood even when the screen reader does not present the grouping information provided by <code class="el">optgroup</code>.</p>
-   </section><section id="examples"><h2>Examples</h2>
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>Using optgroup to group option elements inside a select</title>
+    <link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+  </head>
+  <body>
+    <h1>Using <code class="language-html">optgroup</code> to group <code class="language-html">option</code> elements inside a <code class="language-html">select</code></h1>
+    <section class="meta">
+      <p class="id">ID: H85</p>
+      <p class="technology">Technology: html</p>
+      <p class="type">Type: Technique</p>
+    </section>
+    <section id="applicability">
+      <h2>When to Use</h2>
+      <p><abbr title="HyperText Markup Language">HTML</abbr> pages that collect user input.</p>
+   </section>
+   <section id="description">
+    <h2>Description</h2>
+    <p>The objective of this technique is to group items in a selection list. A selection list is a set of allowed values for a form control such as a multi-select list or a combo box. Often, selection lists have groups of related options. Those groups should be semantically identified, rather than being delimited with "dummy" list entries, for example: an <code class="language-html">option</code> element containing only a series of dashes to create a horizontal line. Semantically identifying groups of options helps to visually break up long lists so that users can more easily locate what they are interested in.</p>
+    <p>In HTML, the <code class="language-html">select</code> element is used to create both multi-select lists and combo boxes. The various allowed options are each indicated with <code class="language-html">option</code> elements. To group options together, use the <code class="language-html">optgroup</code> element, with the related <code class="language-html">option</code> elements inside that element. Label the group with the <code class="language-html">label</code> attribute so users will know what to expect inside the group.</p>
+      <p>The <code class="language-html">optgroup</code> element should be directly inside the <code class="language-html">select</code> element, and the <code class="language-html">option</code>  elements directly inside the <code class="language-html">optgroup</code>. It is possible for a <code class="language-html">select</code> element to contain both single <code class="language-html">option</code> elements and <code class="language-html">optgroup</code> groups, though authors should consider if this is in fact the desired intent when using this. It is not possible to nest the <code class="language-html">optgroup</code> element, so only one level of grouping can be done within a <code class="language-html">select</code>.</p>
+      <p>If grouping information is essential to understanding the list, authors may define <code class="language-html">option</code> labels that can be understood even when the screen reader does not present the grouping information provided by <code class="language-html">optgroup</code>.</p>
+   </section>
+   <section id="examples">
+      <h2>Examples</h2>
       <section class="example">
+        <p>The following combo box collects data about favorite foods. Grouping by type allows users to select their preference more quickly.</p>
          
-            <p>The following combo box collects data about favorite foods. Grouping by type allows users to select their preference more quickly.</p>
-         
-         <pre xml:space="preserve">
-&lt;form action="http://example.com/prog/someprog" method="post"&gt;
-    &lt;label for="food"&gt;What is your favorite food?&lt;/label&gt;
-    &lt;select id="food" name="food"&gt;
-      &lt;optgroup label="Fruits"&gt;
-        &lt;option value="1"&gt;Apples&lt;/option&gt;
-        &lt;option value="3"&gt;Bananas&lt;/option&gt;
-        &lt;option value="4"&gt;Peaches&lt;/option&gt;
-        &lt;option value="5"&gt;...&lt;/option&gt;
-      &lt;/optgroup&gt;
-      &lt;optgroup label="Vegetables"&gt;
-        &lt;option value="2"&gt;Carrots&lt;/option&gt;
-        &lt;option value="6"&gt;Cucumbers&lt;/option&gt;
-       &lt;option value="7"&gt;...&lt;/option&gt;
-     &lt;/optgroup&gt;
-     &lt;optgroup label="Baked Goods"&gt;
-       &lt;option value="8"&gt;Apple Pie&lt;/option&gt;
-       &lt;option value="9"&gt;Chocolate Cake&lt;/option&gt;
-       &lt;option value="10"&gt;...&lt;/option&gt;
-     &lt;/optgroup&gt;
+<pre xml:space="preserve"><code class="language-html">&lt;form action="/favorite-food/" method="post"&gt;
+  &lt;label for="food"&gt;What is your favorite food?&lt;/label&gt;
+  &lt;select id="food" name="food"&gt;
+    &lt;optgroup label="Fruits"&gt;
+      &lt;option value="1"&gt;Apples&lt;/option&gt;
+      &lt;option value="2"&gt;Bananas&lt;/option&gt;
+      &lt;option value="3"&gt;Peaches&lt;/option&gt;
+    &lt;/optgroup&gt;
+    &lt;optgroup label="Vegetables"&gt;
+      &lt;option value="4"&gt;Broccoli&lt;/option&gt;
+      &lt;option value="5"&gt;Carrots&lt;/option&gt;
+      &lt;option value="6"&gt;Cucumbers&lt;/option&gt;
+    &lt;/optgroup&gt;
+    &lt;optgroup label="Baked Goods"&gt;
+      &lt;option value="7"&gt;Apple Pie&lt;/option&gt;
+      &lt;option value="8"&gt;Bagels&lt;/option&gt;
+      &lt;option value="9"&gt;Chocolate Cake&lt;/option&gt;
+    &lt;/optgroup&gt;
    &lt;/select&gt;
-&lt;/form&gt;              </pre>
+&lt;/form&gt;</code></pre>
       </section>
       <section class="example">
          
-            <p>The following example shows how a multi-select box can make use of the <code class="el">optrgroup</code> element.</p>
+  <p>The following example shows how a multi-select box can make use of the <code class="language-html">optgroup</code> element.</p>
          
-         <pre xml:space="preserve">
-&lt;form action="http://example.com/prog/someprog" method="post"&gt;
-    &lt;label for="related_techniques"&gt;&lt;strong&gt;Related Techniques:&lt;/strong&gt;&lt;/label&gt;
-    &lt;select name="related_techniques" id="related_techniques" multiple="multiple" size="10"&gt;
-  &lt;optgroup label="General Techniques"&gt;
-    &lt;option value="G1"&gt;G1: Adding a link at the top of each page ... &lt;/option&gt;
-    &lt;option value="G4"&gt;G4: Allowing the content to be paused and restarted ... &lt;/option&gt;
-    &lt;option value="G5"&gt;G5: Allowing users to complete an activity without any time... &lt;/option&gt;
-    &lt;option value="G8"&gt;G8: Creating an extended audio description for the ... &lt;/option&gt;
-    &lt;option value="G9"&gt;G9: Creating captions for live synchronized media... &lt;/option&gt;
-    &lt;option value="G10"&gt;G10: Creating components using a technology that ... &lt;/option&gt;
-  &lt;/optgroup&gt;
-  &lt;optgroup label="HTML Techniques"&gt;
-    &lt;option value="H2"&gt;H2: Combining adjacent image and text links for the same ... &lt;/option&gt;
-    &lt;option value="H4"&gt;H4: Creating a logical tab order through links, form ... &lt;/option&gt;
-    &lt;option value="H24"&gt;H24: Providing text alternatives for the area ... &lt;/option&gt;
-  &lt;/optgroup&gt;
-  &lt;optgroup label="CSS Techniques"&gt;
-    &lt;option value="C6"&gt;C6: Positioning content based on structural markup... &lt;/option&gt;
-    &lt;option value="C7"&gt;C7: Using CSS to hide a portion of the link text... &lt;/option&gt;
-  &lt;/optgroup&gt;
-  &lt;optgroup label="SMIL Techniques"&gt;
-    &lt;option value="SM1"&gt;SM1: Adding extended audio description in SMIL 1.0... &lt;/option&gt;
-    &lt;option value="SM2"&gt;SM2: Adding extended audio description in SMIL 2.0... &lt;/option&gt;
-    &lt;option value="SM6"&gt;SM6: Providing audio description in SMIL 1.0... &lt;/option&gt;
-  &lt;/optgroup&gt;
-  &lt;optgroup label="ARIA Techniques"&gt;
-    &lt;option value="ARIA1"&gt;ARIA1: Using WAI-ARIA describedby... &lt;/option&gt;
-    &lt;option value="ARIA2"&gt;ARIA2: Identifying required fields with the "required"... &lt;/option&gt;
-    &lt;option value="ARIA3"&gt;ARIA3: Identifying valid range information with "valuemin" ... &lt;/option&gt;
-  &lt;/optgroup&gt;
-  &lt;optgroup label="Common Failures"&gt;
-    &lt;option value="F1"&gt;F1: Failure of SC 1.3.2 due to changing the meaning of content by... &lt;/option&gt;
-    &lt;option value="F2"&gt;F2: Failure of SC 1.3.1 due to using changes in text presentation... &lt;/option&gt;
-    &lt;option value="F3"&gt;F3: Failure of SC 1.1.1 due to using CSS to include images  ... &lt;/option&gt;
-    &lt;option value="F4"&gt;F4: Failure of SC 2.2.2 due to using text-decoration:blink ...&lt;/option&gt;
-  &lt;/optgroup&gt;
-&lt;/select&gt;
-&lt;/form&gt;              </pre>
+  <pre xml:space="preserve"><code class="language-html">&lt;form action="/animals/" method="post"&gt;
+  &lt;label for="animals"&gt;Pick your favorite animals:&lt;/label&gt;
+  &lt;select id="animals" multiple name="animals" size="10"&gt;
+    &lt;optgroup label="Dinosaurs"&gt;
+      &lt;option value="brontosaurus"&gt;Brontosaurus&lt;/option&gt;
+      &lt;option value="pterodactyl"&gt;Pterodactyl&lt;/option&gt;
+      &lt;option value="trex"&gt;Tyrannosaurus Rex&lt;/option&gt;
+      &lt;option value="velociraptor"&gt;Velociraptor&lt;/option&gt;
+    &lt;/optgroup&gt;
+    &lt;optgroup label="Ungulates"&gt;
+      &lt;option value="camel"&gt;Camel&lt;/option&gt;
+      &lt;option value="giraffe"&gt;Giraffe&lt;/option&gt;
+      &lt;option value="hippo"&gt;Hippo&lt;/option&gt;
+      &lt;option value="horse"&gt;Horse&lt;/option&gt;
+      &lt;option value="zebra"&gt;Zebra&lt;/option&gt;
+    &lt;/optgroup&gt;
+    &lt;optgroup label="Household Pets"&gt;
+      &lt;option value="cat"&gt;Cat&lt;/option&gt;
+      &lt;option value="dog"&gt;Dog&lt;/option&gt;
+      &lt;option value="fish"&gt;Fish&lt;/option&gt;
+      &lt;option value="rabbit"&gt;Rabbit&lt;/option&gt;
+    &lt;/optgroup&gt;
+  &lt;/select&gt;
+&lt;/form&gt;</code></pre>
       </section>
-   </section><section id="tests"><h2>Tests</h2>
-      <section class="procedure"><h3>Procedure</h3>
-         <ol>
-            <li>Check the set of options within a selection list to see if there are groups of related options.</li>
-            <li>If there are groups of related options, they should be grouped with <code class="el">optgroup</code>. </li>
-         </ol>
+   </section>
+   <section id="tests">
+    <h2>Tests</h2>
+    <section class="procedure">
+      <h3>Procedure</h3>
+      <ol>
+        <li>Check the set of options within a selection list to see if there are groups of related options.</li>
+        <li>If there are groups of related options, they should be grouped with <code class="language-html">optgroup</code>.</li>
+      </ol>
       </section>
-      <section class="results"><h3>Expected Results</h3>
+      <section class="results">
+        <h3>Expected Results</h3>
          <ul>
             <li>Check #2 is true.</li>
          </ul>
       </section>
-   </section><section id="resources"><h2>Resources</h2>
-      
-         <ul>
-            <li>
-									         <a href="https://www.w3.org/TR/html401/interact/forms.html#edef-SELECT">HTML SELECT element</a>
-								       </li>
-            <li>
-									         <a href="https://www.w3.org/TR/html401/interact/forms.html#edef-OPTGROUP">HTML OPTGROUP element</a>
-								       </li>
-            <li>
-									         <a href="http://webaim.org/techniques/forms/">Creating Accessible Forms</a>
-								       </li>
-            <li>
-									         <a href="http://usability.com.au/2008/09/accessible-forms-using-wcag-2-0/">Accessible Forms using WCAG 2.0</a>
-								       </li>
-         </ul>
-      
-   </section></body></html>
\ No newline at end of file
+   </section>
+   <section id="resources">
+    <h2>Resources</h2>      
+    <ul>
+      <li>
+        <a href="https://html.spec.whatwg.org/multipage/form-elements.html#the-select-element">HTML - <code class="language-html">select</code> element</a>.
+      </li>
+      <li>
+        <a href="https://html.spec.whatwg.org/multipage/form-elements.html#the-optgroup-element">HTML - <code class="language-html">optgroup</code> element</a>.
+      </li>
+      <li>
+        <a href="https://html.spec.whatwg.org/multipage/form-elements.html#the-option-element">HTML - <code class="language-html">option</code> element</a>.
+      </li>
+      <li>
+        <a href="https://webaim.org/techniques/forms/">WebAIM - Creating Accessible Forms</a>.
+      </li>
+    </ul>
+   </section>
+  </body>
+  </html>
\ No newline at end of file
diff --git a/techniques/html/H86.html b/techniques/html/H86.html
index 6ec077ce18..f439cd5f1f 100644
--- a/techniques/html/H86.html
+++ b/techniques/html/H86.html
@@ -1,32 +1,72 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing text alternatives for ASCII art, emoticons, and leetspeak</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Providing text alternatives for ASCII art, emoticons, and leetspeak</h1><section class="meta"><p class="id">ID: H86</p><p class="technology">Technology: html</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
-      <p>HTML and XHTML</p>
-   </section><section id="description"><h2>Description</h2>
-      <p>Before graphics became widely used on the internet, ASCII characters were often arranged to form pictures or graphs. Although ASCII art is not used frequently on the Web anymore, it must be remembered that, when it is used, it is very confusing to people who are blind and accessing the internet using screen readers. If it is used it should also have a text explanation of what the picture is. It is also suggested that there be a link to skip over the ASCII art (although this is not required).</p>
-      <p>Emoticons are very popular. They include ASCII characters that form facial expressions and other ways to communicate an emotion. They can be confusing for screen reader users. When possible it is better simply to use a word like "smile" instead of an emoticon. But if emoticons are used they should have a text alternative. In some contexts, blog and forum software for example, plug-ins are available that automatically convert ASCII characters used as emoticons into HTML images with text alternatives.</p>
-      <p>Leetspeak uses various combinations of characters, including numerals and special characters, to replace standard characters. Leet has become a part of Internet culture and slang. Leet is frequently used to beat text and spam filters. It is often incomprehensible to blind people using screen readers, and therefore requires a text alternative in order to conform to Success Criteria 1.1.1.</p>
-      <div class="note">
-         <p>Because support for this technique is limited, it is recommended that authors provide the text alternative in text. </p>
-      </div>
-   </section><section id="examples"><h2>Examples</h2>
-      <section class="example">
-         
-            <p>The following shows three options for providing alternatives for an emoticon representing "fright," which is made out of an equal sign followed by the number eight, a hyphen and the number zero.</p>
-         
-         <pre xml:space="preserve">
-=8-0 (fright)
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+   <head>
+      <title>Providing text alternatives for emojis, emoticons, ASCII art, and leetspeak</title>
+      <link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+   </head>
+   <body>
+      <h1>Providing text alternatives for emojis, emoticons, <abbr title="American Standard Code for Information Interchange">ASCII</abbr> art, and leetspeak</h1>
+      <section class="meta">
+         <p class="id">ID: H86</p>
+         <p class="technology">Technology: html</p>
+         <p class="type">Type: Technique</p>
+      </section>
+      <section id="applicability">
+         <h2>When to Use</h2>
+         <p><abbr title="HyperText Markup Language">HTML</abbr></p>
+      </section>
+      <section id="description">
+         <h2>Description</h2>
+         <p>Emojis are very popular and are frequently used online to help provide more context and expression to text-based communication. Emojis come with their own pre-defined names that might not always match what the author is intending to communicate. For example, the emoji of a black right-facing triangle (►) is described by default as <i>black right-pointing pointer</i>, which would be confusing if a designer had changed its rotation or color, or if it was being used to give the accessible name to a "play" button in a multimedia player.</p>
+         <p>Emoticons pre-date emojis, are still used but are much less popular than they once were. Emoticons use ASCII characters to create facial expressions and other ways to communicate an emotion. Because emoticons are made from many text characters, they can be confusing for screen reader users. When possible it is better simply to use a word like "smile" or a suitable emoji instead of an emoticon. If emoticons are used they should have a text alternative.</p>
+         <p>ASCII art was common on the internet before graphics became widely used. ASCII characters were arranged to form pictures, pictures of text, or graphs. Although ASCII content is not used frequently on the Web anymore, it must be remembered that, when it is used, it can be very confusing to people who are accessing the internet using screen readers. If ASCII art is used, it should also have a text explanation of what the picture is. It is also suggested that, if the ASCII picture isn't marked up as an image using <abbr title="Accessible Rich Internet Applications">ARIA</abbr>, that there is a link to skip over the art (although this is not required).</p>
 
-&lt;abbr title="fright"&gt;=8-0&lt;/abbr&gt;
+         <p>Leet used to be a fairly-common part of Internet culture and slang, but is now hardly used. Leetspeak uses various combinations of characters, including numerals and special characters, to replace standard characters. Leet is often incomprehensible to people using screen readers, and therefore requires a text alternative in order to conform to <a href="../../Understanding/non-text-content.html">Success Criterion 1.1.1 (Non-Text Content)</a>.</p>
 
-&lt;img src="fright.gif" alt="fright"/&gt;
-             </pre>
       </section>
+      <section id="examples">
+         <h2>Examples</h2>
+         <section class="example">
+            <h3>Marking up emojis in a sentence</h3>
+            <p>This shows a technique to mark up emojis with accessible names that differ from their default. Because you can't use an <code class="language-html">alt</code> attribute on a <code class="language-html">span</code> element and the <abbr title="Accessible Rich Internet Applications">ARIA</abbr> recommendation disallows accessible names on generic elements, to give the emojis accessible names they are defined as images with the ARIA <code class="language-html">role="img"</code> property which then allows the creation of an accessible name using the <code class="language-html">aria-label</code> property.</p>
+<pre xml:space="preserve"><code class="language-html">&lt;p&gt;I smiled at my friend and gestured 
+   &lt;span aria-label="you" role="img"&gt;👉🏾&lt;/span&gt;
+   &lt;span aria-label="rock" role="img"&gt;🤘🏾&lt;/span&gt;!
+&lt;/p&gt;</code></pre>
+         </section>
+         <section class="example">
+            <h3>Four options for providing alternatives for an emoticon representing "smile"</h3>
+            <p>The following shows four options for providing alternatives for an emoticon representing "smile", which is consists of a colon followed by a closing parenthesis.</p>
+<pre xml:space="preserve">:) (smile)
+<code class="language-html">&lt;abbr title="smile"&gt;:)&lt;/abbr&gt;
+&lt;span aria-label="smile" role="img"&gt;:)&lt;/span&gt;
+&lt;img alt="smile" src="smile.gif"&gt;</code></pre>
+</section>
+
+         <section class="example">
+            <h3>Using the <code class="language-html">aria-label</code> and <code class="language-html">role="img"</code> properties</h3>
+            <p>Adding the <code class="language-html">role="img"</code> property to the ASCII content's containing element defines it as an image, and the <code class="language-html">aria-label</code> property gives it the required text alternative. <a href="#ascii-butterfly">Skip to the next ASCII example</a>.</p>
+<pre xml:space="preserve"><code class="language-html">
+&lt;div aria-label="WCAG" role="img"&gt;
+oooooo   oooooo     oooo   .oooooo.         .o.         .oooooo.    
+ `888.    `888.     .8'   d8P'  `Y8b       .888.       d8P'  `Y8b   
+   `888.   .8888.   .8'   888              .8"888.     888           
+    `888  .8'`888. .8'    888             .8' `888.    888           
+     `888.8'  `888.8'     888            .88ooo8888.   888     ooooo 
+       `888'    `888'      `88b    ooo   .8'     `888.  `88.    .88'  
+        `8'      `8'        `Y8bood8P'  o88o     o8888o  `Y8bood8P'
+&lt;/div&gt;</code></pre>
+         </section>
       <section class="example">
+         <h3 id="ascii-butterfly">ASCII art with an explanation of the picture preceding it</h3>
+         <p>This example includes a link to skip over the ASCII art. <a href="#leetspeek">Skip to the Leetspeak example</a>.</p>
          
-            <p>Here is ASCII art with an explanation of the picture preceding it. It includes a link to skip over the ASCII art. <a href="#H86-ex3">Skip ASCII example</a>.</p>
-         
-         <pre xml:space="preserve">
- Figure 1: ASCII art picture of a butterfly. 
- &lt;a href="#skipbutterfly"&gt;Skip ASCII image&lt;/a&gt;
+<pre xml:space="preserve"><code class="language-html">&lt;figure&gt;
+  &lt;figcaption&gt;
+    &lt;p&gt;Figure 1: ASCII art picture of a butterfly.
+      &lt;a href="#skipbutterfly"&gt;Skip ASCII butterfly image&lt;/a&gt;
+    &lt;/p&gt;
+  &lt;/figcaption&gt;
                                  
                                                                 LLLLLLLLLLL
                                                             __LLLLLLLLLLLLLL
@@ -73,26 +113,43 @@
                             ~LLLLLLLLLLLLLLLLL~~
                                LLLLLLLLLLLLL
                                  ~~~~~~~~~
-&lt;a name="skipbutterfly"&gt;&lt;/a&gt;            </pre>
+&lt;/figure&gt;
+&lt;p id="skipbutterfly"&gt;New content after the ASCII image.&lt;/p&gt;</code></pre>
       </section>
       <section class="example">
-         
-            <p>The following is Leetspeak for "Austin Rocks". </p>
-         
-         <pre xml:space="preserve">
-&lt;abbr title="Austin Rocks"&gt;Au5t1N r0xx0rz&lt;/abbr&gt;             </pre>
+         <h3 id="leetspeek">Marking up Leetspeak</h3>
+         <p>The following is Leetspeak for "Austin Rocks".</p>
+<pre xml:space="preserve"><code class="language-html">&lt;abbr title="Austin Rocks"&gt;Au5t1N r0xx0rz&lt;/abbr&gt;</code></pre>
       </section>
-   </section><section id="tests"><h2>Tests</h2>
-      <section class="procedure"><h3>Procedure</h3>
+   </section>
+   <section id="tests">
+      <h2>Tests</h2>
+      <section class="procedure">
+         <h3>Procedure</h3>
          <ol>
-            <li>Open the page in a common browser.</li>
-            <li>Check to see that the content contains ASCII art, emoticons and/or leetspeak.</li>
-            <li>Check that there is a text alternative immediately before or after all ASCII art, emoticons and/or Leetspeak.</li>
+            <li>Check to see that the content contains emojis, emoticons, ASCII art, or leetspeak.</li>
+            <li>Check that each emoji has a text alternative that serves an equivalent purpose.</li>
+            <li>Check that each ASCII artwork, emoticon, and / or Leetspeak either:
+               <ol>
+                  <li>is marked up as an image with a text alternative that serves an equivalent purpose; or</li>
+                  <li>has a text alternative immediately before or after.</li>
+               </ol>
+            </li>
          </ol>
       </section>
-      <section class="results"><h3>Expected Results</h3>
+      <section class="results">
+         <h3>Expected Results</h3>
          <ul>
-            <li>Test procedure #3 is true.</li>
+            <li>Checks #2 and #3 are true.</li>
          </ul>
       </section>
-   </section></body></html>
\ No newline at end of file
+   </section>
+   <section id="resources">
+      <h2>Resources</h2>
+      <ul>
+         <li><a href="https://www.w3.org/TR/wai-aria/">ARIA Recommendation</a>.</li>
+         <li><a href="https://www.w3.org/TR/accname/">Accessible Name and Description Computation</a>.</li>
+      </ul>
+   </section>
+</body>
+</html>
\ No newline at end of file
diff --git a/techniques/html/H88.html b/techniques/html/H88.html
index c803b982fd..09c123d88d 100644
--- a/techniques/html/H88.html
+++ b/techniques/html/H88.html
@@ -1,35 +1,57 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using HTML according to spec</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Using HTML according to spec</h1><section class="meta"><p class="id">ID: H88</p><p class="technology">Technology: html</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
-      <p>HTML and XHTML</p>
-   </section><section id="description"><h2>Description</h2>
-      <p>The objective of this technique is to use HTML and XHTML according to their respective specifications. Technology specifications define the meaning and proper handling of features of the technology. Using those features in the manner described by the specification ensures that user agents, including assistive technologies, will be able to present representations of the feature that are accurate to the author's intent and interoperable with each other.</p>
-      <p>At the time this technique was published, the appropriate versions of these technologies is HTML 4.01 and XHTML 1.0. HTML 4.01 is the latest mature version of HTML, which provides specific accessibility features and is widely supported by user agents. XHTML 1.0 provides the same features as HTML 4.01, except that it uses an XML structure, and has a more strict syntax than the HTML structure. Later versions of these technologies are not mature and / or are not widely supported by user agents at this time.</p>
-      <p>There are a few broad aspects to using HTML and XHTML according to their specification.</p>
-      <ol>
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>Using HTML according to spec</title>
+		<link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+	</head>
+	<body>
+		<h1>Using <abbr title="HyperText Markup Language">HTML</abbr> according to spec</h1>
+		<section class="meta">
+			<p class="id">ID: H88</p>
+			<p class="technology">Technology: html</p>
+			<p class="type">Type: Technique</p>
+		</section>
+		<section id="applicability">
+			<h2>When to Use</h2>
+      <p>HTML</p>
+		</section>
+		<section id="description">
+			<h2>Description</h2>
+      <p>The objective of this technique is to use HTML according to its specification. Technology specifications define the meaning and proper handling of features of the technology. Using those features in the manner described by the specification ensures that user agents, including assistive technologies, will be able to present representations of the feature that are accurate to the author's intent and interoperable with each other.</p>
+      <p>There are a few broad aspects to using HTML according to its specification.</p>
+      <ul>
          <li>
-								       <strong>Using only features that are defined in the specification</strong> HTML defines sets of elements, attributes, and attribute values that may be used on Web pages. These features have specific semantic meanings and are intended to be processed by user agents in particular ways. Sometimes, however, additional features come into common authoring practice. These are usually initially supported by only one user agent. When features not in the specification are used, many user agents may not support the feature for a while or ever. Furthermore, lacking standard specifications for the use of these features, different user agents may provide varying support. This impacts accessibility because assistive technologies, developed with fewer resources than mainstream user agents, may take a long time if ever to add useful support. Therefore, authors should avoid features not defined in HTML and XHTML to prevent unexpected accessibility problems.</li>
+					<strong>Using only features that are defined in the specification</strong> HTML defines sets of elements, attributes, and attribute values that may be used on Web pages. These features have specific semantic meanings and are intended to be processed by user agents in particular ways. Sometimes, however, additional features come into common authoring practice. These are usually initially supported by only one user agent. When features not in the specification are used, many user agents may not support the feature for a while or ever. Furthermore, lacking standard specifications for the use of these features, different user agents may provide varying support. This impacts accessibility because assistive technologies, developed with fewer resources than mainstream user agents, may take a long time if ever to add useful support. Therefore, authors should avoid features not defined in HTML to prevent unexpected accessibility problems.</li>
          <li>
-								       <strong>Using features in the manner prescribed by the specification</strong> The HTML specification provides specific guidance about how particular elements, attributes, and attribute values are to be processed and understood semantically. Sometimes, however, authors use features in a manner that is not supported by the specification, for example, using semantic elements to achieve visual effects without intending the underlying semantic message to be conveyed. This leads to confusion for user agents and assistive technologies that rely on correct semantic information to present a coherent representation of the page. It is important to use HTML features only as prescribed by the HTML specification.</li>
+					<strong>Using features in the manner prescribed by the specification</strong> The HTML specification provides specific guidance about how particular elements, attributes, and attribute values are to be processed and understood semantically. Sometimes, however, authors use features in a manner that is not supported by the specification, for example, using semantic elements to achieve visual effects without intending the underlying semantic message to be conveyed. This leads to confusion for user agents and assistive technologies that rely on correct semantic information to present a coherent representation of the page. It is important to use HTML features only as prescribed by the HTML specification.</li>
          <li>
-								       <strong>Making sure the content can be parsed</strong> HTML and XHTML also define how content should be encoded in order to be correctly processed by user agents. Rules about the structure of start and end tags, attributes and values, nesting of elements, etc. ensure that user agents will parse the content in a way to achieve the intended document representation. Following the structural rules in these specifications is an important part of using these technologies according to specification. </li>
-      </ol>
-   </section><section id="tests"><h2>Tests</h2>
-      <section class="procedure"><h3>Procedure</h3>
-         <p>For each HTML or XHTML page:</p>
+					<strong>Making sure the content can be parsed</strong> HTML defines how content should be encoded in order to be correctly processed by user agents. Rules about the structure of start and end tags, attributes and values, nesting of elements, etc. ensure that user agents will parse the content in a way to achieve the intended document representation. Following the structural rules in these specifications is an important part of using these technologies according to specification. </li>
+      </ul>
+		</section>
+		<section id="tests">
+			<h2>Tests</h2>
+      <section class="procedure">
+				<h3>Procedure</h3>
+         <p>For each HTML page:</p>
          <ol>
-            <li>Check that the page uses only elements, attributes, and attribute values that are defined in the relevant specification.</li>
-            <li>Check that elements, attributes, and values are used in the manner prescribed by the relevant specification.</li>
-            <li>Check that the page can be parsed correctly, according to the rules of the relevant specification.</li>
+            <li>Check that the page uses only elements, attributes, and attribute values that are defined in the specification.</li>
+            <li>Check that elements, attributes, and values are used in the manner prescribed by the specification.</li>
+            <li>Check that the page can be parsed correctly, according to the rules of the specification.</li>
          </ol>
          <div class="note">
             <p>Check #1 and #3 are most easily checked with page validation tools. Check #2 can be checked with the assistance of heuristic evaluation tools though manual judgment is usually required.</p>
          </div>
       </section>
-      <section class="results"><h3>Expected Results</h3>
+      <section class="results">
+				<h3>Expected Results</h3>
          <ul>
             <li>Checks #1, #2, and #3 are true.</li>
          </ul>
       </section>
-   </section><section id="related"><h2>Related Techniques</h2><ul>
+   </section>
+	 <section id="related">
+		<h2>Related Techniques</h2>
+		<ul>
       <li><a href="../html/H74">H74</a></li>
       <li><a href="../html/H75">H75</a></li>
    </ul></section><section id="resources"><h2>Resources</h2>
diff --git a/techniques/html/H89.html b/techniques/html/H89.html
index ea9a9fb3a8..0ff17af2ef 100644
--- a/techniques/html/H89.html
+++ b/techniques/html/H89.html
@@ -1,45 +1,68 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using the title attribute to provide context-sensitive help</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Using the title attribute to provide context-sensitive help</h1><section class="meta"><p class="id">ID: H89</p><p class="technology">Technology: html</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
-      <p>HTML and XHTML </p>
-   </section><section id="description"><h2>Description</h2>
-      <p>The objective of this technique is to provide context sensitive help for users as they enter data in forms by providing the help information in a <code class="att">title</code> attribute. The help may include format information or examples of input. </p>
-      <div class="note">
-         <p>Current user agents and assistive technologies do not always provide the information contained in the <code class="att">title</code> attribute to users. Avoid using this technique in isolation until the <code class="att">title</code> attribute has wide-spread support. </p>
-      </div>
-   </section><section id="examples"><h2>Examples</h2>
+
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>Using the title attribute to provide context-sensitive help</title>
+		<link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+   </head>
+	 <body>
+		<h1>Using the <code class="language-html">title</code> attribute to provide context-sensitive help</h1>
+		<section class="meta">
+			<p class="id">ID: H89</p>
+			<p class="technology">Technology: html</p>
+			<p class="type">Type: Technique</p>
+		</section>
+		<section id="applicability">
+			<h2>When to Use</h2>
+      <p><abbr title="HyperText Markup Language">HTML</abbr></p>
+		</section>
+		<section id="description">
+			<h2>Description</h2>
+			<p>The objective of this technique is to provide context sensitive help for users as they enter data in forms by providing the help information in a <code class="language-html">title</code> attribute. The help may include format information or examples of input.</p>
+			<div class="note">
+				<p>Current user agents and assistive technologies do not always provide the information contained in the <code class="language-html">title</code> attribute to users. Avoid using this technique in isolation.</p>
+    	</div>
+		</section>
+		<section id="examples">
+			<h2>Examples</h2>
       <section class="example">
-         
-            <p>A mapping application provides a form consisting of a label "Address:", an input box and a submit button with value "Find map". The input box has a <code class="att">title</code> attribute value with an example of the address format the user should enter. </p>
-         
-         <pre xml:space="preserve">
-&lt;label for="searchAddress"&gt;Address: &lt;/label&gt;
-&lt;input id="searchAddress" type="text" size="30" value="" name="searchAddress" 
- title="Address example: 101 Collins St, Melbourne, Australia" /&gt;
-             </pre>
+				<p>A mapping application provides a form consisting of a label "Address:", an input component and a submit button with value "Find map". The input component has a <code class="language-html">title</code> attribute value with an example of the address format the user should enter.</p>
+<pre xml:space="preserve"><code class="language-html">&lt;label for="search-address"&gt;Address:&lt;/label&gt;
+&lt;input id="search-address" name="search-address" size="30"
+ title="Address example: 101 Collins St, Melbourne, Australia" type="text" value=""&gt;</code></pre>
       </section>
       <section class="example">
-         
-            <p>A form that allows users to pay their bill online requires the user to enter their account number. The input box associated with the "Account number" label has a <code class="att">title</code> attribute providing information on locating the account number. </p>
-         
-         <pre xml:space="preserve">
-&lt;label for="accNum1"&gt;Account number: &lt;/label&gt;
-&lt;input id="accNum1" type="text" size="10" value="" title="Your account number 
- can be found in the top right-hand corner of your bill." /&gt;
-             </pre>
+				<p>A form that allows users to pay their bill online requires the user to enter their account number. The input component associated with the "Account number" label has a <code class="language-html">title</code> attribute providing information on locating the account number.</p>
+
+<pre xml:space="preserve"><code class="language-html">&lt;label for="acc-num1"&gt;Account number:&lt;/label&gt;
+&lt;input id="acc-num1" size="10"
+ title="Your account number can be found in the top right-hand corner of your bill"
+ type="text" value=""&gt;</code></pre>
       </section>
-   </section><section id="tests"><h2>Tests</h2>
-      <section class="procedure"><h3>Procedure</h3>
+		</section>
+		<section id="tests">
+			<h2>Tests</h2>
+      <section class="procedure">
+				<h3>Procedure</h3>
          <ol>
-            <li>Identify form controls that require text input. </li>
-            <li>Check that each form control has an explicitly associated label </li>
-            <li>Check that each form control has context-sensitive help provided in the <code class="att">title</code> attribute. </li>
+					<li>Identify form controls that require text input. </li>
+					<li>Check that each form control has an explicitly associated label </li>
+					<li>Check that each form control has context-sensitive help provided in the <code class="language-html">title</code> attribute.</li>
          </ol>
       </section>
-      <section class="results"><h3>Expected Results</h3>
+      <section class="results">
+				<h3>Expected Results</h3>
          <ul>
             <li>Checks #2 and #3 are true.</li>
          </ul>
       </section>
-   </section><section id="related"><h2>Related Techniques</h2><ul>
-      <li><a href="../html/H65">H65</a></li>
-      <li><a href="../general/G71">G71</a></li>
-   </ul></section></body></html>
\ No newline at end of file
+		</section>
+		<section id="related">
+			<h2>Related Techniques</h2>
+			<ul>
+      	<li><a href="../html/H65">H65</a></li>
+      	<li><a href="../general/G71">G71</a></li>
+			</ul>
+		</section>
+	</body>
+</html>
\ No newline at end of file
diff --git a/techniques/html/H90.html b/techniques/html/H90.html
index 562810d998..c1695dea42 100644
--- a/techniques/html/H90.html
+++ b/techniques/html/H90.html
@@ -1,93 +1,119 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Indicating required form controls using label or legend</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Indicating required form controls using label or legend</h1><section class="meta"><p class="id">ID: H90</p><p class="technology">Technology: html</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
-      <p>HTML and XHTML controls that use external labels.</p>
-   </section><section id="description"><h2>Description</h2>
-      <p>The objective of this technique is to provide a clear indication that a specific form control in a Web application or form is required for successful data submission. A symbol or text indicating that the control is required is programmatically associated with the field by using the <code class="el">label</code> element, or the <code class="el">legend</code> for groups of controls associated via <code class="el">fieldset</code>. If a symbol is used, the user is advised of its meaning before the first use. </p>
-   </section><section id="examples"><h2>Examples</h2>
-      <section class="example">
-         <h3>Using text to indicate required state</h3>
-         
-            <p>The text field in the example below has the explicit label of "First name (required):". The <code class="el">label</code> element's  <code class="att">for</code> attribute matches the <code class="att">id</code> attribute of the <code class="el">input</code> element and the <code class="el">label</code> text indicates that the control is required. </p>
-         
-         <pre xml:space="preserve">
-&lt;label for="firstname"&gt;First name (required):&lt;/label&gt; 
-&lt;input type="text" name="firstname" id="firstname" /&gt;
-</pre>
-         
-            <div class="note">
-               <p>Some authors abbreviate "required" to "req." but there is anecdotal evidence that suggests that this abbreviation is confusing. </p>
-            </div>
-         
-      </section>
-      <section class="example">
-         <h3>Using an asterisk to indicate required state</h3>
-         
-            <p>The text field in the example below has an explicit label that includes an asterisk to indicate the control is required. It is important that the asterisk meaning is defined at the start of the form. In this example, the asterisk is contained within a <code class="el">abbr</code> element to allow for the asterisk character to be styled so that it is larger than the default asterisk character, since the asterisk character can be difficult to see for those with impaired vision. </p>
-         
-         <pre xml:space="preserve">
-CSS:
-.req {font-size: 150%} 
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>Indicating required form controls using label or legend</title>
+		<link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+	</head>
+	<body>
+		<h1>Indicating required form controls using <code class="language-html">label</code> or <code class="language-html">legend</code></h1>
+		<section class="meta">
+			<p class="id">ID: H90</p>
+			<p class="technology">Technology: html</p>
+			<p class="type">Type: Technique</p>
+		</section>
+		<section id="applicability">
+			<h2>When to Use</h2>
+      <p><abbr title="HyperText Markup Language">HTML</abbr> controls that use external labels.</p>
+		</section>
+		<section id="description">
+			<h2>Description</h2>
+      <p>The objective of this technique is to provide a clear indication that a specific form control in a Web application or form is required for successful data submission. A symbol or text indicating that the control is required is programmatically associated with the field by using the <code class="language-html">label</code> element, or the <code class="language-html">legend</code> for groups of controls associated via <code class="language-html">fieldset</code>. If a symbol is used, the user is advised of its meaning before the first use. </p>
+   </section>
+	 <section id="examples">
+		<h2>Examples</h2>
+		<section class="example">
+			<h3>Using text to indicate required state</h3>
+			<p>The text field in the example below has the explicit label of "First name (required):". The <code class="language-html">label</code> element's  <code class="language-html">for</code> attribute matches the <code class="language-html">id</code> attribute of the <code class="language-html">input</code> element and the <code class="language-html">label</code> text indicates that the control is required.</p>
+<pre xml:space="preserve"><code class="language-html">&lt;label for="firstname"&gt;First name (required):&lt;/label&gt; 
+&lt;input id="firstname" name="firstname" type="text"&gt;</code></pre>
+      <div class="note">
+				<p>Some authors abbreviate "required" to "req.". There is anecdotal evidence that suggests this abbreviation is confusing.</p>
+			</div>
+		</section>
+    <section class="example">
+			<h3>Using an asterisk to indicate required state</h3>
+			<p>The text field in the example below has an explicit label that includes an asterisk to indicate the control is required. It is important that the asterisk meaning is defined at the start of the form. In this example, the asterisk is contained within a <code class="language-html">abbr</code> element to allow for the asterisk character to be styled so that it is larger than the default asterisk character, since the asterisk character can be difficult to see for those with impaired vision.</p>
+			<section>
+				<h4>The CSS</h4>
+				<pre xml:space="preserve"><code class="language-css">.req {font-size: 150%}</code></pre>
+			</section>
+		    <section>
+				<h4>The HTML</h4>
+<pre xml:space="preserve"><code class="language-html">&lt;p&gt;Required fields are marked with an asterisk
+   (&lt;abbr class="req" title="required"&gt;*&lt;/abbr&gt;).&lt;/p&gt;
+&lt;form action="https://example.com" method="post"&gt;
+  &lt;label for="firstname"&gt;First name &lt;abbr class="req" title="required"&gt;*&lt;/abbr&gt;:&lt;/label&gt; 
+  &lt;input id="firstname" name="firstname" type="text"&gt;
+  ...
+&lt;/form&gt;</code></pre>
+			</section>
+    </section>
+    <section class="example">
+			<h3>Using an image to indicate required state</h3>
+			<p>The text field in the example below has an explicit label that includes an image to indicate the control is required. It is important that the image meaning is defined at the start of the form.</p>
+<pre xml:space="preserve"><code class="language-html">&lt;p&gt;&lt;img alt="required" src="req_img.gif"&gt; indicates that the information is required&lt;/p&gt;
+&lt;form action="https://www.example.com" method="post"&gt;
+  &lt;label for="firstname"&gt;First name &lt;img alt="required" src="req_img.gif"&gt;:&lt;/label&gt; 
+  &lt;input id="firstname" name="firstname" type="text"&gt;
+  ...
+&lt;/form&gt;</code></pre>
+    </section>
+    <section class="example">
+			<h3>Indicating required state for groups of radio buttons or check box controls</h3>
+			<p>Radio buttons and checkboxes are treated differently than other interactive controls since individual radio buttons and checkboxes are not required but indicates that a response for the group is required. The methods used in examples 1-3 apply to radio buttons and checkboxes, but the indication of the required state should be placed in the <code class="language-html">legend</code> element instead of the <code class="language-html">label</code> element. </p>
 
-HTML:
-
-&lt;p&gt; Required fields are marked with an asterisk (&lt;abbr class="req" title="required"&gt;*&lt;/abbr&gt;).&lt;/p&gt;
-&lt;form action="http://www.test.com" method="post"&gt;
-&lt;label for="firstname"&gt;First name &lt;abbr class="req" title="required"&gt;*&lt;/abbr&gt;:&lt;/label&gt; 
-&lt;input type="text" name="firstname" id="firstname" /&gt;
-</pre>
-      </section>
-      <section class="example">
-         <h3>Using an image to indicate required state</h3>
-         
-            <p>The text field in the example below has an explicit label that includes an image to indicate the control is required. It is important that the image meaning is defined at the start of the form.</p>
-         
-         <pre xml:space="preserve">
-&lt;p&gt;&lt;img src="req_img.gif" alt="Required Control" /&gt; indicates that the form control is required&lt;/p&gt;
-&lt;form action="http://www.test.com" method="post"&gt;
-&lt;label for="firstname"&gt;First name &lt;img src="req_img.gif" alt="Required Control" /&gt;:&lt;/label&gt; 
-&lt;input type="text" name="firstname" id="firstname" /&gt;
-...
-</pre>
-      </section>
-      <section class="example">
-         <h3>Indicating required state for groups of radio buttons or check box controls</h3>
-         
-            <p>Radio buttons and checkboxes are treated differently than other interactive controls since individual radio buttons and checkboxes are not required but indicates that a response for the group is required. The methods used in examples 1-3 apply to radio buttons and checkboxes, but the indication of the required state should be placed in the <code class="el">legend</code> element instead of the <code class="el">label</code> element. </p>
-         
-         <pre xml:space="preserve">
-&lt;fieldset&gt;
-&lt;legend&gt;I am interested in the following (Required):&lt;/legend&gt;
-&lt;input type="checkbox" id="photo" name="interests" value="ph"&gt;
-&lt;label for="photo"&gt;Photography&lt;/label&gt;&lt;/br&gt;
-&lt;input type="checkbox" id="watercol" name="interests" checked="checked" value="wa"&gt;
-&lt;label for="watercol"&gt;Watercolor&lt;/label&gt;&lt;/br&gt;
-&lt;input type="checkbox" id="acrylic" name="interests" checked="checked" value="ac"&gt;
-&lt;label for="acrylic"&gt;Acrylic&lt;/label&gt;
-…
-&lt;/fieldset&gt;
-</pre>
-      </section>
-   </section><section id="tests"><h2>Tests</h2>
-      <section class="procedure"><h3>Procedure</h3>
-         <ol>
-            <li>For each required form control, check that the required status is indicated in the form control's <code class="el">label</code> or <code class="el">legend</code>. </li>
-            <li>For each indicator of required status that is not provided in text, check that the meaning of the indicator is explained before the form control that uses it. </li>
-         </ol>
-      </section>
-      <section class="results"><h3>Expected Results</h3>
-         <ul>
-            <li>All checks above are true.</li>
-         </ul>
-      </section>
-   </section><section id="related"><h2>Related Techniques</h2><ul>
-      <li><a href="../html/H44">H44</a></li>
-      <li><a href="../html/H65">H65</a></li>
-      <li><a href="../html/H71">H71</a></li>
-   </ul></section><section id="resources"><h2>Resources</h2>
-      
-         <ul>
-            <li>
-									         <a href="https://www.w3.org/TR/html401/interact/forms.html#h-17.9">HTML 4.01 form labels</a>
-								       </li>
-         </ul>
-      
-   </section></body></html>
\ No newline at end of file
+<pre xml:space="preserve"><code class="language-html">&lt;fieldset&gt;
+  &lt;legend&gt;I am interested in the following (Required):&lt;/legend&gt;
+  &lt;div&gt;
+    &lt;input id="photo" name="interests" type="checkbox" value="ph"&gt;
+    &lt;label for="photo"&gt;Photography&lt;/label&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;input checked id="watercol" name="interests" type="checkbox" value="wa"&gt;
+    &lt;label for="watercol"&gt;Watercolor&lt;/label&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;input checked id="acrylic" name="interests" type="checkbox" value="ac"&gt;
+    &lt;label for="acrylic"&gt;Acrylic&lt;/label&gt;
+  &lt;/div&gt;
+  ...
+&lt;/fieldset&gt;</code></pre>
+  	</section>
+	</section>
+	<section id="tests">
+		<h2>Tests</h2>
+		<section class="procedure">
+			<h3>Procedure</h3>
+			<ol>
+				<li>For each required form control, check that the required status is indicated in the form control's <code class="language-html">label</code> or <code class="language-html">legend</code>.</li>
+				<li>For each indicator of required status that is not provided in text, check that the meaning of the indicator is explained before the form control that uses it.</li>
+			</ol>
+		</section>
+		<section class="results">
+			<h3>Expected Results</h3>
+			<ul>
+				<li>All checks above are true.</li>
+			</ul>
+		</section>
+	</section>
+	<section id="related">
+		<h2>Related Techniques</h2>
+		<ul>
+			<li><a href="../html/H44">H44</a></li>
+			<li><a href="../html/H65">H65</a></li>
+			<li><a href="../html/H71">H71</a></li>
+		</ul>
+	</section>
+	<section id="resources">
+		<h2>Resources</h2>
+		<ul>
+			<li>
+				<a href="https://html.spec.whatwg.org/multipage/forms.html#the-label-element">HTML - <code class="language-html">label</code> element</a>
+			</li>
+			<li>
+				<a href="https://html.spec.whatwg.org/multipage/form-elements.html#the-legend-element">HTML - <code class="language-html">legend</code> element</a>
+			</li>
+    </ul>
+	</section>
+</body>
+</html>
\ No newline at end of file
diff --git a/techniques/html/H91.html b/techniques/html/H91.html
index 60173e4358..b5cb31d2b2 100644
--- a/techniques/html/H91.html
+++ b/techniques/html/H91.html
@@ -1,287 +1,211 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using HTML form controls and links</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Using HTML form controls and links</h1><section class="meta"><p class="id">ID: H91</p><p class="technology">Technology: html</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
-      <p>HTML form controls and links </p>
-   </section><section id="description"><h2>Description</h2>
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+   <head>
+		<title>Using HTML form controls and links</title>
+		<link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+   </head>
+	 <body>
+		<h1>Using <abbr title="HyperText Markup Language">HTML</abbr> form controls and links</h1>
+		<section class="meta">
+			<p class="id">ID: H91</p>
+			<p class="technology">Technology: html</p>
+			<p class="type">Type: Technique</p>
+		</section>
+		<section id="applicability">
+			<h2>When to Use</h2>
+      <p>HTML form controls and links</p>
+		</section>
+		<section id="description">
+			<h2>Description</h2>
       <p>The objective of this technique is to use standard HTML form controls and link elements to provide keyboard operation and assistive technology interoperability of interactive user interface elements.</p>
-      <p>User agents provide the keyboard operation of HTML form controls and links. In addition, the user agent maps the form controls and links to an accessibility API. Assistive technologies use the accessibility API to extract appropriate accessibility information, such as role, name, state, and value, and present them to users. The role is provided by the HTML element, and the name is provided by the text associated with that element. Elements for which values and states are appropriate also expose the values and states via multiple mechanisms. </p>
-      <p>In some cases, the text is already associated with the control through a required attribute. For example, submit buttons use the button element text or image 'alt' attribute as the name. In the case of form controls, label elements or 'title' attributes are used. The following table describes how the role, name, value, and state are determined for HTML links and form controls. </p>
-      
-   	<table 
-   		summary="Table describing how the role, name, value and state are determined for HTML links and form controls."
-   		id="H91_mappings">
-   		<thead>
-   			<tr>
-   				<th>HTML element </th>
-   				<th>Role</th>
-   				<th>Name </th>
-   				<th>Value </th>
-   				<th>State </th>
-   			</tr>
-   		</thead>
-   		<tbody>
-   			<tr>
-   				<td>&lt;a&gt; </td>
-   				<td> link </td>
-   				<td> 'title' attribute, text within &lt;a&gt; element or 'alt' attribute if image link. Concatenated if both text and image 'alt' attribute are provided </td>
-   				<td> 'href' attribute </td>
-   				<td></td>
-   			</tr>
-   			<tr>
-   				<td>&lt;button&gt; </td>
-   				<td> push button </td>
-   				<td> text inside &lt;button&gt; element or 'title' attribute </td>
-   				<td></td>
-   				<td></td>
-   			</tr>
-   			<tr>
-   				<td>&lt;fieldset&gt; </td>
-   				<td> grouping </td>
-   				<td>text inside &lt;legend&gt; element within fieldset element</td>
-   				<td></td>
-   				<td></td>
-   			</tr>
-   			<tr>
-   				<td>&lt;input type = "button", "submit", or "reset"&gt; </td>
-   				<td> push button </td>
-   				<td> 'value' attribute </td>
-   				<td></td>
-   				<td></td>
-   			</tr>
-   			<tr>
-   				<td>&lt;input type = "image"&gt; </td>
-   				<td> push button </td>
-   				<td> 'alt' attribute or 'title' attribute </td>
-   				<td></td>
-   				<td></td>
-   			</tr>
-   			<tr>
-   				<td>&lt;input type = "text"&gt; </td>
-   				<td> editable text </td>
-   				<td>&lt;label&gt; element associated with it or 'title' attribute </td>
-   				<td> 'value' attribute </td>
-   				<td></td>
-   			</tr>
-   			<tr>
-   				<td>&lt;input type = "password"&gt; </td>
-   				<td> editable text </td>
-   				<td>&lt;label&gt; element associated with it or 'title' attribute </td>
-   				<td>value is purposefully hidden</td>
-   				<td></td>
-   			</tr>
-   			<tr>
-   				<td>&lt;input type="file"&gt; </td>
-   				<td> editable text </td>
-   				<td>&lt;label&gt; element associated with it or 'title' attribute </td>
-   				<td>'value' attribute</td>
-   				<td></td>
-   			</tr>
-   			<tr>
-   				<td>&lt;input type="checkbox"&gt; </td>
-   				<td> checkbox </td>
-   				<td>&lt;label&gt; element associated with it or 'title' attribute </td>
-   				<td></td>
-   				<td> 'checked' attribute
-   				</td>
-   			</tr>
-   			<tr>
-   				<td>&lt;input type="radio"&gt; </td>
-   				<td> radio button </td>
-   				<td>&lt;label&gt; element associated with it or 'title' attribute </td>
-   				<td></td>
-   				<td> 'checked' attribute
-   					
-   				</td>
-   			</tr>
-   			<tr>
-   				<td>&lt;select&gt; </td>
-   				<td> list box </td>
-   				<td>&lt;label&gt; element associated with it or 'title' attribute </td>
-   				<td>&lt;option&gt; element with 'selected' attribute set to "selected" </td>
-   				<td></td>
-   			</tr>
-   			<tr>
-   				<td>&lt;textarea&gt; </td>
-   				<td> editable text </td>
-   				<td>&lt;label&gt; element associated with it or 'title' attribute </td>
-   				<td> text within  &lt;textarea&gt; element </td>
-   				<td></td>
-   			</tr>
-   		</tbody>
-   	</table>
-   	
-   </section><section id="examples"><h2>Examples</h2>
+      <p>User agents provide the keyboard operation of HTML form controls and links. In addition, the user agent maps the form controls and links to an accessibility <abbr title="Application Programming Interface">API</abbr>. Assistive technologies use the accessibility API to extract appropriate accessibility information, such as role, name, state, and value, and present them to users. The role is provided by the HTML element, and the name is provided by the text associated with that element. Elements for which values and states are appropriate also expose the values and states via multiple mechanisms.</p>
+      <p>In some cases, the text is already associated with the control through a required attribute. For example, submit buttons use the <code class="language-html">button</code> element text or image <code class="language-html">alt</code> attribute as the name. In the case of form controls, <code class="language-html">label</code> elements; the <code class="language-html">aria-label</code> or <code class="language-html">aria-labelledby</code> properties; or the <code class="language-html">title</code> attribute are used.</p>
+	</section>
+	<section id="examples">
+		<h2>Examples</h2>
+		<section class="example">
+			<h3>Links</h3>
+      <p>User agents provide mechanisms to navigate to and select links. In each of the following examples, the role is "link" because the  <code class="language-html">a</code> element has an <code class="language-html">href</code> attribute. An <code class="language-html">a</code> element without an <code class="language-html">href</code> isn't a link. The link's value is the <abbr title="Uniform Resource Identifier">URI</abbr> in the <code class="language-html">href</code> attribute.</p>
+			<section>
+				<h4>Link example A</h4>
+				<p>In example A, the name is the text inside the link, in this case "Example Site".</p>
+<pre xml:space="preserve"><code class="language-html">&lt;a href="https://example.com"&gt;Example Site&lt;/a&gt;</code></pre>
+			</section>
+			<section>
+				<h4>Link example B</h4>
+				<p>In example B of an image inside a link, the <code class="language-html">alt</code> attribute for the image provides the name.</p>
+<pre xml:space="preserve"><code class="language-html">&lt;a href="https://example.com"&gt;&lt;img alt="Example" src="example-logo.gif"&gt;&lt;/a&gt;</code></pre>
+			</section>
+			<section>
+				<h4>Link example C</h4>
+				<p>In example C, some assistive technology will not automatically insert a space character when concatenating the image's <code class="language-html">alt</code> text and the text of the link. If the text should not be concatenated without a space, it is safest to insert a space between the image and the adjacent word so that words will not run together.</p>
+<pre xml:space="preserve"><code class="language-html">&lt;a href="https://example.com"&gt;&lt;img alt="Example " src="example_logo.gif"&gt;Text&lt;/a&gt;</code></pre>
+			</section>
+		</section>
+		<section class="example">
+			<h3>Buttons</h3>
+			<p>There are several ways to create a button in HTML.</p>
+			<section>
+				<h4>Buttons example A</h4>
+				<p>In example A, the text contained in the <code class="language-html">button</code> element, in this case "save", gives the button its name. There is no value.</p>
+<pre xml:space="preserve"><code class="language-html">&lt;button type="button"&gt;Save&lt;/button&gt;</code></pre>
+			</section>
+			<section>
+				<h4>Buttons example B</h4>
+				<p>Example B uses the <code class="language-html">value</code> attribute, in this case "Save", "Submit", or "Reset" as the name.</p>
+<pre xml:space="preserve"><code class="language-html">&lt;input type="button" value="Save"&gt; 
+&lt;input type="submit" value="Submit"&gt;
+&lt;input type="reset" value="Reset"&gt;</code></pre>
+			</section>
+			<section>
+				<h4>Buttons example C</h4>
+				<p>Example C uses the <code class="language-html">alt</code> attribute, in this case "save", as the name.</p>
+<pre xml:space="preserve"><code class="language-html">&lt;input alt="save" src="save.gif" type="image"&gt;</code></pre>
+			</section>
+			<section>      
+				<h4>Buttons example D</h4>
+				<p>Example D clarifies how the user agent determines the name if the author specifies both the <code class="language-html">alt</code> and <code class="language-html">title</code> attributes of the input element. In this case, the user agent uses the <code class="language-html">alt</code> attribute ("Save") and ignores the <code class="language-html">title</code> attribute.</p>
+         
+<pre xml:space="preserve"><code class="language-html">&lt;input alt="save" src="save.gif" title="save the file" type="image"&gt;</code></pre>
+			</section>
+		</section>
       <section class="example">
-         <h3>Links</h3>
-         
-            <p>User agents provide mechanisms to navigate to and select links. In each of the following examples, the role is "link" from the &lt;a href&gt;.  Note that &lt;a name&gt; does not provide a role of "link". The value is the URI in the 'href' attribute. </p>
-            <p class="exsubhead">Example 1a</p>
-            <p>In example 1a, the name is the text inside the link, in this case "Example Site". </p>
-         
-         <pre xml:space="preserve">&lt;a href="www.example.com"&gt;Example Site&lt;/a&gt;
-                    </pre>
-         
-            <p class="exsubhead">Example 1b</p>
-            <p>In example 1b of an image inside a link, the 'alt' attribute for the image provides the name. Some tools for viewing APIs, such as Microsoft Inspect Objects, will not surface this, but AT does. </p>
-         
-         <pre xml:space="preserve">&lt;a href="www.example.com"&gt;&lt;img src="example_logo.gif" alt="Example"&gt;&lt;/a&gt;
-                    </pre>
-         
-            <p class="exsubhead">Example 1c</p>
-            <p>In example 1c, some assistive technology will not automatically insert a space character when concatenating the image's alt text and the text of the link. If the text should not be concatenated without a space, it is safest to insert a space between the image and the adjacent word so that words will not run together.</p>
-         
-         <pre xml:space="preserve">&lt;a href="www.example.com"&gt;&lt;img src="example_logo.gif" alt="Example"&gt; Text&lt;/a&gt;
-</pre>
-      </section>
-      <section class="example">
-         <h3>Buttons</h3>
-         
-            <p>There are several ways to create a button in HTML, and they all map to the "push button" role.</p>
-            <p class="exsubhead">Example 2a</p>
-            <p>In example 2a, the text is contained in the <code class="el">button</code> element, in this case "save", as the name. There is no value.</p>
-         
-         <pre xml:space="preserve">&lt;button&gt;Save&lt;/button&gt;
-                    </pre>
-         
-            <p class="exsubhead">Example 2b</p>
-            <p>Example 2b uses the 'value' attribute, in this case "Save", "Submit", or "Reset" as the name.</p>
-         
-         <pre xml:space="preserve">&lt;input type="button" value="Save" /&gt; 
-&lt;input type="submit" value="Submit" /&gt;  
-&lt;input type="reset" value="Reset" /&gt;   
-                    </pre>
-         
-            <p class="exsubhead">Example 2c</p>
-            <p>Example 2c uses the 'alt' attribute, in this case "save", as the name.</p>
-         
-         <pre xml:space="preserve">&lt;input type="image" src="save.gif" alt="save" /&gt; 
-                    </pre>
-         
-            <p class="exsubhead">Example 2d</p>
-            <p>In example 2d, there is no 'alt' attribute so the 'title' attribute, in this case "save", is used as the name.</p>
-         
-         <pre xml:space="preserve">&lt;input type="image" src="save.gif" title="save" /&gt;
-                    </pre>
-         
-            <p class="exsubhead">Example 2e</p>
-            <p>Example 2e clarifies how the user agent determines the name if the author specifies both the 'alt' and 'title' attributes of the input element. In this case, the user agent uses the 'alt' attribute ("Save") and ignores the 'title' attribute.</p>
-         
-         <pre xml:space="preserve">&lt;input type="image" src="save.gif" alt="save" title="save the file" /&gt;
-</pre>
+         <h3>Text Input</h3>  
+			<section>
+				<h4>Text Input example A</h4>
+				<p>In example A, the input field has a role of "editable text". The <code class="language-html">label</code> element is associated to the <code class="language-html">input</code> element via the <code class="language-html">for</code> attribute which references the <code class="language-html">id</code> attribute of the <code class="language-html">input</code> element. The name comes from the <code class="language-html">label</code> element, in this case, "Type of fruit". Its value comes from its value attribute, in this case "bananas".</p>
+         
+<pre xml:space="preserve"><code class="language-html">&lt;label for="text-1"&gt;Type of fruit&lt;/label&gt;
+&lt;input id="text-1" type="text" value="bananas"&gt;</code></pre>
+			</section>
+			<section>
+				<h4>Text Input example B</h4>
+				<p>In example B, the input field has the same role as example A, but the value is the empty string and the field gets its name from the <code class="language-html">aria-label</code> property.</p>
+         
+<pre xml:space="preserve"><code class="language-html">&lt;input aria-label="Type of fruit" id="text-1" type="text"&gt;</code></pre>
+			</section>
+		</section>
+		<section class="example">
+         <h3>Checkbox</h3>
+         <p>This example has a role of <code class="language-html">checkbox</code>, from the <code class="language-html">type</code> attribute of the <code class="language-html">input</code> element. The <code class="language-html">label</code> element is associated with the <code class="language-html">input</code> element via the <code class="language-html">for</code> attribute which refers to the <code class="language-html">id</code> attribute of the <code class="language-html">input</code> element. The name comes from the <code class="language-html">label</code> element, in this case "cheese". Its state can be <code class="language-html">checked</code> or <code class="language-html">unchecked</code> and comes from the <code class="language-html">checked</code> attribute. The state can be changed by the user's interaction with the control.</p>
+         
+<pre xml:space="preserve"><code class="language-html">&lt;label for="cb-1"&gt;Cheese&lt;/label&gt; 
+&lt;input checked id="cb-1" type="checkbox"&gt;</code></pre>
       </section>
       <section class="example">
-         <h3></h3>
+         <h3>Radio Buttons</h3>
+         <p>This example has a role of "radio button" from the <code class="language-html">type</code> attribute on the <code class="language-html">input</code> element. Its name comes from the <code class="language-html">label</code> element. Its state can be <code class="language-html">checked</code> or <code class="language-html">unchecked</code> and comes from the <code class="language-html">checked</code> attribute. The state can be changed by the user's interaction with the control.</p>
          
-            <p class="exsubhead">Example 3a</p>
-            <p>In example 3a, the input field has a role of "editable text". The <code class="el">label</code> element is associated to the <code class="el">input</code> element via the 'for' attribute which references the 'id' attribute of the <code class="el">input</code>&gt; element. The name comes from the <code class="el">label</code> element, in this case, "Type of fruit". Its value comes from its value attribute, in this case "bananas". </p>
-         
-         <pre xml:space="preserve">&lt;label for="text_1"&gt;Type of fruit&lt;/label&gt;
-&lt;input id="text_1" type="text" value="bananas"&gt;
-</pre>
-         
-            <p class="exsubhead">Example 3b</p>
-            <p>In example 3b, the input field has the same role as example 3a, but the value is the empty string and the field gets its name from the 'title' attribute. </p>
-         
-         <pre xml:space="preserve">&lt;input id="text_1" type="text" title="Type of fruit"&gt;
-</pre>
+<pre xml:space="preserve"><code class="language-html">&lt;input checked id="r1" name="color" type="radio"&gt;&lt;label for="r1"&gt;Red&lt;/label&gt;
+&lt;input id="r2" name="color" type="radio"&gt;&lt;label for="r2"&gt;Blue&lt;/label&gt;
+&lt;input id="r3" name="color" type="radio"&gt;&lt;label for="r3"&gt;Green&lt;/label&gt;</code></pre>
       </section>
+			<section class="example">
+				<h3>Radio Fieldset</h3>
+				<p>The radio <code class="language-html">fieldset</code> has a role of "grouping". The name comes from the <code class="language-html">legend</code> element.</p>
+<pre xml:space="preserve"><code class="language-html">&lt;fieldset&gt;
+  &lt;legend&gt;Choose a Color:&lt;/legend&gt;
+  &lt;div&gt;
+    &lt;input id="red" name="color" type="radio" value="red"&gt;
+    &lt;label for="red"&gt;Red&lt;/label&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;input id="blue" name="color" type="radio" value="blue"&gt;
+    &lt;label for="blue"&gt;Blue&lt;/label&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;input id="green" name="color" type="radio" value="green"&gt;
+    &lt;label for="green"&gt;Green&lt;/label&gt; 
+&lt;/fieldset&gt;</code></pre>
+      </section>			
       <section class="example">
-         <h3>Checkbox </h3>
-         
-            <p>Example 4 has a role of "checkbox", from the 'type' attribute of the <code class="el">input</code> element. The <code class="el">label</code> element is associated with the <code class="el">input</code> element via the 'for' attribute which refers to the 'id' attribute of the <code class="el">input</code> element. The name comes from the <code class="el">label</code> element, in this case "cheese". Its state can be "checked" or "unchecked" and comes from the 'checked' attribute. The state can be changed by the user's interaction with the control. </p>
-         
-         <pre xml:space="preserve">&lt;label for="cb_1"&gt;Cheese&lt;/label&gt; 
-&lt;input id="cb_1" type="checkbox" checked="checked"&gt;
-                    </pre>
-      </section>
-      <section class="example">
-         <h3>Radio Buttons </h3>
-         
-            <p>Example 5 has a role of "radio button" from the 'type' attribute on the <code class="el">input</code> element. Its name comes from the <code class="el">label</code> element. The state can be "checked" or "unchecked" and comes from the 'checked' attribute. The state can be changed by the user. </p>
-         
-         <pre xml:space="preserve">&lt;input type="radio" name="color" id="r1" checked="checked"/&gt;&lt;label for="r1"&gt;Red&lt;/label&gt;
-&lt;input type="radio" name="color" id="r2" /&gt;&lt;label for="r2"&gt;Blue&lt;/label&gt;
-&lt;input type="radio" name="color" id="r3" /&gt;&lt;label for="r3"&gt;Green&lt;/label&gt;
-                    </pre>
-      </section>
-      <section class="example">
-         <h3></h3>
-         
-            <p class="exsubhead">Example 6a</p>
-            <p>Example 6a has a role of "list box" from the <code class="el">select</code> element. Its name is "Numbers" from the <code class="el">label</code> element. Forgetting to give a name to the select is a common error. The value is the <code class="el">option</code> element that has the 'selected' attribute present (with a value of "selected" in XHTML). In this case, the default value is "Two". </p>
-         
-         <pre xml:space="preserve">&lt;label for="s1"&gt;Numbers&lt;/label&gt;
-&lt;select id="s1" size="1"&gt;
- &lt;option&gt;One&lt;/option&gt;
- &lt;option selected="selected"&gt;Two&lt;/option&gt;
- &lt;option&gt;Three&lt;/option&gt;
-&lt;/select&gt;
-                    </pre>
-         
-            <p class="exsubhead">Example 6b</p>
-            <p>Example 6b has the same name, role, and value as the above, but sets the name with the 'title' attribute on the <code class="el">select</code> element. This technique can be used when a visible label is not desirable. </p>
-         
-         <pre xml:space="preserve">&lt;select id="s1" title="Numbers" size="1"&gt;
- &lt;option&gt;One&lt;/option&gt;
- &lt;option selected="selected"&gt;Two&lt;/option&gt;
- &lt;option&gt;Three&lt;/option&gt;
-&lt;/select&gt;
-                    </pre>
-      </section>
-      <section class="example">
-         <h3> Textarea</h3>
-         
-            <p class="exsubhead">Example 7a</p>
-            <p>Example 7a has a role of "editable text" from the <code class="el">textarea</code> element. The name is "Type your speech here" from the <code class="el">label</code> element. The value is the content inside the <code class="el">textarea</code> element, in this case "Four score and seven years ago". </p>
-         
-         <pre xml:space="preserve">&lt;label for="ta_1"&gt;Type your speech here&lt;/label&gt;
-&lt;textarea id="ta_1" &gt;Four score and seven years ago&lt;/textarea&gt;
-                    </pre>
-         
-            <p class="exsubhead">Example 7b</p>
-            <p>Example 7b has the same role, the name is set using the 'title' attribute, and the value is the empty string.</p>
-         
-         <pre xml:space="preserve">&lt;textarea id="ta_1" title="Type your speech here" &gt;Four score and seven years ago&lt;/textarea&gt;
-                    </pre>
-      </section>
-      <section class="example">
-         <h3></h3>
-         
-            <p class="exsubhead">Radio Fieldset</p>
-            <p>The radio fieldset in example 8 has a role of "grouping". The name comes from the <code class="el">legend</code> element. </p>
-         
-         <pre xml:space="preserve">&lt;fieldset&gt;
-  &lt;legend&gt;Choose a Color:&lt;/legend&gt; 
-     &lt;input id="red" type="radio" name="color" value="red" /&gt;&lt;label for="red"&gt;Red&lt;/label&gt;&lt;br /&gt; 
-     &lt;input id="blue" type="radio" name="color" value="blue" /&gt;&lt;label for="blue"&gt;Blue&lt;/label&gt;&lt;br /&gt; 
-     &lt;input id="green" type="radio" name="color" value="green" /&gt;&lt;label for="green"&gt;Green&lt;/label&gt; 
-&lt;/fieldset&gt;
-                    </pre>
-      </section>
-   </section><section id="tests"><h2>Tests</h2>
-      <section class="procedure"><h3>Procedure</h3>
-         <ol>
-            <li>Inspect the HTML source code.</li>
-            <li>For each instance of links and form elements, check that the name, value, and state are specified as indicated in the table above. </li>
-         </ol>
-      </section>
-      <section class="results"><h3>Expected Results</h3>
-         <ul>
-            <li>Check #2 is true.</li>
-         </ul>
-      </section>
-   </section><section id="related"><h2>Related Techniques</h2><ul>
-      <li><a href="../html/H44">H44</a></li>
-   </ul></section><section id="resources"><h2>Resources</h2>
-      
-         <ul>
-            <li>
-									         <a href="http://usability.com.au/2008/09/accessible-forms-using-wcag-2-0/">Accessible Forms using WCAG 2.0</a>
-								       </li>
+				<h3>Select Element</h3>
+				<section>
+					<h4>Select element example A</h4>
+					<p>Example A has a role of "list box" from the <code class="language-html">select</code> element. Its name is "Numbers" from the <code class="language-html">label</code> element. Forgetting to give a name to the select is a common error. The value is the <code class="language-html">option</code> element that has the <code class="language-html">selected</code> attribute present. In this case, the default value is "Two".</p>
+         
+<pre xml:space="preserve"><code class="language-html">&lt;label for="s1"&gt;Numbers&lt;/label&gt;
+&lt;select id="s1"&gt;
+  &lt;option&gt;One&lt;/option&gt;
+  &lt;option selected&gt;Two&lt;/option&gt;
+  &lt;option&gt;Three&lt;/option&gt;
+&lt;/select&gt;</code></pre>
+				</section>
+				<section>
+					<h4>Select Element example B</h4>
+					<p>Example B has the same name, role, and value as the above, but sets the name with the <code class="language-html">aria-label</code> property on the <code class="language-html">select</code> element. This technique can be used when a visible label is not possible.</p>
+         
+<pre xml:space="preserve"><code class="language-html">&lt;select aria-label="Numbers" id="s1"&gt;
+  &lt;option&gt;One&lt;/option&gt;
+  &lt;option selected&gt;Two&lt;/option&gt;
+  &lt;option&gt;Three&lt;/option&gt;
+&lt;/select&gt;</code></pre>
+				</section>
+			</section>
+      	</section>
+				<section class="example">
+					<h3>Textarea</h3>
+					<section>
+						<h4>Textarea example A</h4>
+						<p>Example A has a role of "editable text" from the <code class="language-html">textarea</code> element. The name is "Type your speech here" from the <code class="language-html">label</code> element. The value is the content inside the <code class="language-html">textarea</code> element, in this case "Four score and seven years ago".</p>
+         
+<pre xml:space="preserve"><code class="language-html">&lt;label for="ta-1"&gt;Type your speech here&lt;/label&gt;
+&lt;textarea id="ta-1"&gt;Four score and seven years ago&lt;/textarea&gt;</code></pre>
+					</section>
+					<section>
+						<h4>Textarea example B</h4>
+						<p>Example B has the same role, the name is set using the <code class="language-html">title</code> attribute, and the value is the empty string.</p>
+         
+<pre xml:space="preserve"><code class="language-html">&lt;textarea title="Type your speech here"&gt;Four score and seven years ago&lt;/textarea&gt;</code></pre>
+					</section>
+				</section>
+			<section id="tests">
+				<h2>Tests</h2>
+				<section class="procedure">
+					<h3>Procedure</h3>
+					<ol>
+						<li>Inspect the HTML source code.</li>
+            <li>For each instance of links and form elements, check that the name, value, and state are specified as indicated in the table above.</li>
+					</ol>
+				</section>
+				<section class="results">
+					<h3>Expected Results</h3>
+					<ul>
+						<li>Check #2 is true.</li>
+					</ul>
+				</section>
+			</section>
+			<section id="related">
+				<h2>Related Techniques</h2>
+				<ul>
+					<li><a href="../html/H44">H44</a></li>
+				</ul>
+			</section>
+			<section id="resources">
+				<h2>Resources</h2>
+				<ul>
+					<li>
+						<a href="https://html.spec.whatwg.org/multipage/forms.html#forms">HTML - Forms</a>
+					</li>
+					<li>
+						<a href="https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-a-element">HTML - The <code class="language-html">a</code> element</a>
+					</li>
             <li>
-									         <a href="https://msdn.microsoft.com/en-us/library/aa360193(VS.85).aspx">MSDN Accessible DHTML elements</a>
-								       </li>
+							<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input"><abbr title="Mozilla Developer Network">MDN</abbr> - The Input (Form Input) element</a>
+						</li>
             <li>
-									         <a href="https://wiki.mozilla.org/Accessibility/AT-Windows-API#MSAA_Role_Support">Mozilla Accessibility/AT-Windows-API </a>
-								       </li>
-         </ul>
-      
-   </section></body></html>
\ No newline at end of file
+							<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a">MDN - The Anchor element</a>
+						</li>
+						<li>
+							<a href="https://www.w3.org/TR/html-aam/">HTML Accessibility API Mappings</a>
+						</li>
+						<li>
+							<a href="https://www.w3.org/TR/accname/">Accessible Name and Description Computation</a>
+						</li>
+						<li>
+							<a href="https://www.w3.org/TR/core-aam/">Core Accessibility API Mappings</a>
+						</li>	
+					</ul>
+				</section>
+			</body>
+		</html>
\ No newline at end of file
diff --git a/techniques/html/H93.html b/techniques/html/H93.html
index a77d4c0d64..0a5b9d8cb3 100644
--- a/techniques/html/H93.html
+++ b/techniques/html/H93.html
@@ -1,56 +1,73 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Ensuring that id attributes are unique on a Web page</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Ensuring that <code class="att">id</code> attributes are unique on a Web page</h1><section class="meta"><p class="id">ID: H93</p><p class="technology">Technology: html</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
-      <p>All HTML pages</p>
-   </section><section id="description"><h2>Description</h2>
-      <p>The objective of this technique is to avoid key errors that are known
-    				to cause problems for assistive technologies when they are trying to
-    				parse content that has the same <code class="att">id</code> attribute on different elements.
-    				These errors can be avoided by making sure the Web page does not have
-    				duplicate <code class="att">id</code> values. This can be done manually or by using HTML's mechanism
-    				to specify the technology and technology version, and validating the
-    				document for this condition. There are several validators that the
-    				developer can use; validation reports generally mention this type of
-    				error. The document type declaration is not strictly necessary for
-    				this type of evaluation, but specifying the document type declaration
-    				makes it easier to use a validator. </p>
-   </section><section id="examples"><h2>Examples</h2>
-      <section class="example">
-         <h3>HTML Validators</h3>
-         
-            <p>HTML pages include a document type declaration (sometimes referred
-    						to as !DOCTYPE statement). The developer can use offline or online
-    						validators (see Resources below) to check that id attributes values
-    						are only used once on a page. The W3C validador, for example, will
-    						report ID   "X already defined" when it encounters the second
-    						use of an id value. </p>
-         
-      </section>
-   </section><section id="tests"><h2>Tests</h2>
-      <section class="procedure"><h3>Procedure</h3>
-         <ol>
-            <li> Check that all id attribute values are unique on the web page. </li>
-         </ol>
-      </section>
-      <section class="results"><h3>Expected Results</h3>
-         <ul>
-            <li> Check 1 is true. </li>
-         </ul>
-      </section>
-   </section><section id="resources"><h2>Resources</h2>
-      
-         <ul>
-            <li>
-									         <a href="https://www.w3.org/QA/Tips/Doctype">Do
-    					not forget to add a doctype by the W3C Quality Assurance Initiative
-    					explains what doctypes are and why you should use them</a>. </li>
-            <li>
-									         <a href="https://www.w3.org/QA/2002/04/valid-dtd-list.html">Recommended
-    						DTDs to use in your Web document by the W3C Quality Assurance Initiative
-    						is a list of commonly used declarations</a>. </li>
-            <li>
-									         <a href="http://www.chami.com/html-kit/faq/pages/validate_tools.html">How
-    							do I validate my code or check for possible errors? describes the
-    							tools in the free editor HTML-Kit for checking HTML, CSS and XML</a>. </li>
-         </ul>
-         <p>For other resources, see <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G134">G134: Validating Web pages</a>. </p>
-      
-   </section></body></html>
\ No newline at end of file
+---
+obsoleteMessage: |
+  This technique relates to 4.1.1: Parsing, which was removed as of WCAG 2.2.
+obsoleteSince: 22
+---
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>Ensuring that id attributes are unique on a Web page</title>
+		<link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+	</head>
+	<body>
+		<h1>Ensuring that <code class="language-html">id</code> attributes are unique on a Web page</h1>
+		<section class="meta">
+			<p class="id">ID: H93</p>
+			<p class="technology">Technology: html</p>
+			<p class="type">Type: Technique</p>
+		</section>
+		<section id="applicability">
+			<h2>When to Use</h2>
+      <p>All <abbr title="HyperText Markup Language">HTML</abbr> pages</p>
+		</section>
+		<section id="description">
+			<h2>Description</h2>
+      <p>The objective of this technique is to avoid errors that result from the same <code class="language-html">id</code> attribute being used multiple times on the same page. These errors can be avoided by making sure the page doesn't have duplicate <code class="language-html">id</code> values. This can be done manually or by using HTML's mechanism to specify the technology and technology version, and validating the document for this condition. There are several validators that the developer can use; validation reports generally mention this type of error. The document type declaration is not strictly necessary for this type of evaluation, but specifying the document type declaration makes it easier to use a validator. </p>
+    </section>
+	  <section id="examples">
+		<h2>Examples</h2>
+		<section class="example">
+			<h3>Duplicate id attributes in form elements</h3>
+			<p>In this example, the first name and last name inputs both have an <code class="language-html">id</code> attribute with the same value. Due to the way accessible names are computed, this results in the last name input having no accessible name.</p>
+<pre xml:space="preserve"><code class="language-html">&lt;label for="fname"&gt;First Name&lt;/label&gt;
+&lt;input autocomplete="given-name" id="fname" type="text"&gt;
+&lt;label for="lname"&gt;Last Name&lt;/label&gt;
+&lt;input autocomplete="family-name" id="fname" type="text"&gt;</code></pre>
+		</section>
+		<section class="example">
+			<h3>HTML Validators</h3>
+			<p>HTML pages include a document type declaration (sometimes referred to as !DOCTYPE statement). The developer can use offline or online validators (see Resources below) to check that <code class="language-html">id</code> attribute values are only used once on a page. The W3C validator, for example, will report "Duplicate ID" when it encounters the subsequent uses of an <code class="language-html">id</code> value.</p>
+		</section>
+	</section>
+	<section id="tests">
+		<h2>Tests</h2>
+		<section class="procedure">
+			<h3>Procedure</h3>
+			<ol>
+				<li>Check that all <code class="language-html">id</code> attribute values are unique on the page.</li>
+			</ol>
+		</section>
+		<section class="results">
+			<h3>Expected Results</h3>
+			<ul>
+				<li>Check #1 is true.</li>
+			</ul>
+		</section>
+	</section>
+	<section id="resources">
+		<h2>Resources</h2>
+		<ul>
+			<li>
+				<a href="https://html.spec.whatwg.org/multipage/dom.html#the-id-attribute">HTML - <code class="language-html">id</code> attribute</a>
+			</li>
+			<li>
+				<a href="https://validator.w3.org/nu/">Nu HTML Checker</a>
+			</li>
+			<li>
+				<a href="https://www.w3.org/QA/Tips/Doctype">Do not forget to add a doctype by the W3C Quality Assurance Initiative explains what doctypes are and why you should use them</a>
+			</li>
+		</ul>
+		<p>For other resources, see <a href="../general/G134">G134: Validating Web pages</a>.</p>
+	</section>
+</body>
+</html>
diff --git a/techniques/html/H94.html b/techniques/html/H94.html
index de4b7317d7..8395d69ef4 100644
--- a/techniques/html/H94.html
+++ b/techniques/html/H94.html
@@ -1,6 +1,27 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Ensuring that elements do not contain duplicate attributes</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Ensuring that elements do not contain duplicate attributes</h1><section class="meta"><p class="id">ID: H94</p><p class="technology">Technology: html</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
-      <p>All HTML pages</p>
-   </section><section id="description"><h2>Description</h2>
+---
+obsoleteMessage: |
+  This technique relates to 4.1.1: Parsing, which was removed as of WCAG 2.2.
+obsoleteSince: 22
+---
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>Ensuring that elements do not contain duplicate attributes</title>
+		<link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+	</head>
+	<body>
+		<h1>Ensuring that elements do not contain duplicate attributes</h1>
+		<section class="meta">
+			<p class="id">ID: H94</p>
+			<p class="technology">Technology: html</p>
+			<p class="type">Type: Technique</p>
+		</section>
+		<section id="applicability">
+			<h2>When to Use</h2>
+      <p>All <abbr title="HyperText Markup Language">HTML</abbr> pages</p>
+		</section>
+		<section id="description">
+			<h2>Description</h2>
       <p>The objective of this technique is to avoid key errors that are known
     				to cause problems for assistive technologies when they are trying to
     				parse content that has duplicate attributes on the same element. This
@@ -10,47 +31,49 @@
     				validation reports generally mention this type of error. The document
     				type declaration is not strictly necessary for this type of evaluation,
     				but specifying the document type declaration makes it easier to use
-    				a validator. </p>
-   </section><section id="examples"><h2>Examples</h2>
-      <section class="example">
-         <h3>HTML Validators</h3>
-         
-            <p>HTML pages include a document type declaration (sometimes referred
-    						to as !DOCTYPE statement). The developer can use offline or online
-    						validators (see Resources below) to check that attributes are only
-    						used once on an element. The W3C validador, for example, will report   "duplicate
-    						specification of attribute X" when it encounters the second definition
-    						of the same attribute on an element. </p>
-         
+    				a validator.</p>
+   </section>
+	 <section id="examples">
+		<h2>Examples</h2>
+		<section class="example">
+			<h3>HTML Validators</h3>
+      <p>HTML pages include a document type declaration (sometimes referred to as <code class="language-html">!DOCTYPE</code> statement). The developer can use offline or online validators (see Resources below) to check that attributes are only used once on an element. The <abbr title="World Wide Web Consortium">W3C</abbr> validator, for example, will report <samp>Error duplicate attribute [attribute name]</samp> when it encounters the second definition of the same attribute on an element.</p>
+		</section>
+	</section>
+	<section id="tests">
+		<h2>Tests</h2>
+		<section class="procedure">
+			<h3>Procedure</h3>
+			<ol>
+				<li>Check that no attribute occurs more than once on any element</li>
+			</ol>
       </section>
-   </section><section id="tests"><h2>Tests</h2>
-      <section class="procedure"><h3>Procedure</h3>
-         <ol>
-            <li> Check that no attribute occurs more than once on any element </li>
-         </ol>
+      <section class="results">
+				<h3>Expected Results</h3>
+				<ul>
+					<li>Check #1 is true.</li>
+				</ul>
       </section>
       <section class="results"><h3>Expected Results</h3>
          <ul>
-            <li> Check 1 is true. </li>
+            <li>Check #1 is true. </li>
          </ul>
       </section>
-   </section><section id="resources"><h2>Resources</h2>
-      
-         <ul>
-            <li>
-									         <a href="https://www.w3.org/QA/Tips/Doctype">Do
-    					not forget to add a doctype by the W3C Quality Assurance Initiative
-    					explains what doctypes are and why you should use them</a>. </li>
-            <li>
-									         <a href="https://www.w3.org/QA/2002/04/valid-dtd-list.html">Recommended
-    						DTDs to use in your Web document by the W3C Quality Assurance Initiative
-    						is a list of commonly used declarations</a>. </li>
-            <li>
-									         <a href="http://www.chami.com/html-kit/faq/pages/validate_tools.html">How
-    							do I validate my code or check for possible errors? describes the
-    							tools in the free editor HTML-Kit for checking HTML, CSS and XML</a>. </li>
-         </ul>
-         <p>For other resources, see <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G134">G134:
-    					Validating Web pages</a>. </p>
-      
-   </section></body></html>
\ No newline at end of file
+   </section>
+	 <section id="resources">
+		<h2>Resources</h2>
+		<ul>
+			<li>
+				<a href="https://www.w3.org/QA/Tips/Doctype">Do not forget to add a doctype by the W3C Quality Assurance Initiative explains what doctypes are and why you should use them</a>.
+			</li>
+      <li>
+				<a href="https://www.w3.org/QA/2002/04/valid-dtd-list.html">Recommended DTDs to use in your Web document by the W3C Quality Assurance Initiative is a list of commonly used declarations</a>.
+			</li>
+      <li>
+				<a href="http://www.chami.com/html-kit/faq/pages/validate_tools.html">How do I validate my code or check for possible errors? describes the tools in the free editor HTML-Kit for checking HTML, CSS and XML</a>.
+			</li>
+    </ul>
+		<p>For other resources, see <a href="../general/G134">G134: Validating Web pages</a>.</p>
+	</section>
+</body>
+</html>
diff --git a/techniques/html/H95.html b/techniques/html/H95.html
index 34a468b19f..f9218fbac4 100644
--- a/techniques/html/H95.html
+++ b/techniques/html/H95.html
@@ -1,69 +1,90 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using the track element to provide captions</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Using the track element to provide captions</h1><section class="meta"><p class="id">ID: H95</p><p class="technology">Technology: html</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
-      <p>HTML5</p>
-   </section><section id="description"><h2>Description</h2>
-      <p>The objective of this technique is to use the HTML5 <code class="el">track</code> element to specify a captions timed text track for a video element. Caption timed text tracks contain transcription or translation of the dialogue, sound effects, relevant musical cues, and other relevant audio information, suitable for when sound is unavailable or not clearly audible.</p>
-      <p>The <code class="att">src</code> attribute of the <code class="el">track</code> element is a URL that is the address of the text track data.</p>
-      <p>The <code class="att">kind</code> attribute of the <code class="el">track</code> element indicates the kind of information in the timed text. captions text tracks provide a text version of dialogue and other sounds important to understanding the video. Subtitles contain only the dialogue. If other audio information is important to understanding the video, a subtitle track will not be sufficient to meet the success criterion.</p>
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+   <head>
+      <title>Using the track element to provide captions</title>
+      <link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+   </head>
+   <body>
+      <h1>Using the <code class="language-html">track</code> element to provide captions</h1>
+      <section class="meta">
+         <p class="id">ID: H95</p>
+         <p class="technology">Technology: html</p>
+         <p class="type">Type: Technique</p>
+      </section>
+      <section id="applicability">
+         <h2>When to Use</h2>
+         <p><abbr title="HyperText Markup Language">HTML</abbr></p>
+      </section>
+      <section id="description">
+         <h2>Description</h2>
+      <p>The objective of this technique is to use the HTML <code class="language-html">track</code> element to specify a captions timed text track for a video element. Caption timed text tracks contain transcription or translation of the dialogue, sound effects, relevant musical cues, and other relevant audio information, suitable for when sound is unavailable or not clearly audible.</p>
+      <p>The <code class="language-html">src</code> attribute of the <code class="language-html">track</code> element is a <abbr title="Uniform Resource Locator">URL</abbr> that is the address of the text track data.</p>
+      <p>The <code class="language-html">kind</code> attribute of the <code class="language-html">track</code> element indicates the kind of information in the timed text. captions text tracks provide a text version of dialogue and other sounds important to understanding the video. Subtitles contain only the dialogue. If other audio information is important to understanding the video, a subtitle track will not be sufficient to meet the success criterion.</p>
       <div class="note">
-      <p>Some regions use the term "subtitle" for any visible text representation of the audio track. An author may mark up a timed text track in the language of the audio track as kind=subtitles, instead of kind=captions, and may include additional relevant audio information. It is not best practice to use subtitles in this situation, since it may confuse users who are trying to find captions, but such a timed text track would meet the requirements of <a href="https://www.w3.org/WAI/WCAG21/Understanding/captions-prerecorded">Success Criterion 1.2.2</a>.</p>
+      <p>Some regions use the term "subtitle" for any visible text representation of the audio track. An author may mark up a timed text track in the language of the audio track as kind=subtitles, instead of kind=captions, and may include additional relevant audio information. It is not best practice to use subtitles in this situation, since it may confuse users who are trying to find captions, but such a timed text track would meet the requirements of <a href="../../Understanding/captions-prerecorded">Success Criterion 1.2.2</a>.</p>
       </div>
-   </section><section id="examples"><h2>Examples</h2>
+   </section>
+   <section id="examples">
+      <h2>Examples</h2>
       <section class="example">
          <h3>Captions in one language</h3>
-         
-            <p>A <code class="el">video</code> element for a video in the English language with an English caption track. The captions are provided in the WebVTT format.</p>
-         
-         <pre xml:space="preserve">
-			 &lt;video poster="myvideo.png" controls&gt;
-				 &lt;source src="myvideo.mp4" srclang="en" type="video/mp4"&gt;
-				 &lt;track src="myvideo_en.vtt" kind="captions" srclang="en" label="English"&gt;
-			  &lt;/video&gt;
-            </pre>
+         <p>A <code class="language-html">video</code> element for a video in the English language with an English caption track. The captions are provided in the WebVTT format.</p>
+<pre xml:space="preserve"><code class="language-html">&lt;video poster="myvideo.png" controls&gt;
+  &lt;source src="myvideo.mp4" srclang="en" type="video/mp4"&gt;
+  &lt;track kind="captions" label="English" src="myvideo_en.vtt" srclang="en"&gt;
+&lt;/video&gt;</code></pre>
             
       </section>
       <section class="example">
          <h3>Captions in multiple languages</h3>
+         <p>A <code class="language-html">video</code> element for a video in the English language with an English caption track. The captions are provided in the WebVTT format.</p>
          
-            <p>A <code class="el">video</code> element for a video in the English language with an English caption track. The captions are provided in the WebVTT format.</p>
-         
-         <pre xml:space="preserve">
-			  &lt;video poster="myvideo.png" controls&gt;
-				&lt;source src="myvideo.mp4" srclang="en" type="video/mp4"&gt;
-				&lt;source src="myvideo.webm" srclang="fr" type="video/webm"&gt;
-				&lt;track src="myvideo_en.vtt" kind="captions" srclang="en" label="English"&gt;
-				&lt;track src="myvideo_fr.ttml" kind="captions" srclang="fr" label="French"&gt;
-			  &lt;/video&gt;            </pre>
-            
+<pre xml:space="preserve"><code class="language-html">&lt;video poster="myvideo.png" controls&gt;
+  &lt;source src="myvideo.mp4" srclang="en" type="video/mp4"&gt;
+  &lt;source src="myvideo.webm" srclang="fr" type="video/webm"&gt;
+  &lt;track kind="captions" label="English" src="myvideo-en.vtt" srclang="en"&gt;
+  &lt;track kind="captions" label="Français" src="myvideo-fr.ttml" srclang="fr"&gt;
+&lt;/video&gt;</code></pre>
       </section>
-   </section><section id="tests"><h2>Tests</h2>
-      <section class="procedure"><h3>Procedure</h3>
+   </section>
+   <section id="tests">
+      <h2>Tests</h2>
+      <section class="procedure">
+         <h3>Procedure</h3>
          <p>For each video element used to play a video:</p>
          <ol>
-            <li>Check that the video contains a <code class="el">track</code> element of <code class="att">kind</code> captions in the language of the video.</li>
+            <li>Check that the video contains a <code class="language-html">track</code> element of <code class="language-html">kind</code> captions in the language of the video.</li>
          </ol>
       </section>
-      <section class="results"><h3>Expected Results</h3>
+      <section class="results">
+         <h3>Expected Results</h3>
          <ul>
             <li>Check #1 is true.</li>
          </ul>
       </section>
-   </section><section id="related"><h2>Related Techniques</h2><ul>
-      <li><a href="../general/G87">G87</a></li>
-   </ul></section><section id="resources"><h2>Resources</h2>
-      
-         <ul>
-            <li>
-               	<a href="https://www.w3.org/TR/html5/embedded-content-0.html#the-track-element">HTML5, the track element</a>
-               </li>
-            <li>
-                  <a href="https://www.w3.org/TR/ttaf1-dfxp/">Timed Text Markup Language</a>
-               </li>
-            <li>
-                  <a href="https://github.com/w3c/webvtt">WebVTT: The Web Video Text Tracks Format</a>
-               </li>
-            <li>
-                  <a href="http://captionatorjs.com/">Captionator Polyfill</a>
-               </li>
-         </ul>
-      
-   </section></body></html>
\ No newline at end of file
+   </section>
+   <section id="related">
+      <h2>Related Techniques</h2>
+      <ul>
+         <li><a href="../general/G87">G87</a></li>
+      </ul>
+   </section>
+   <section id="resources">
+      <h2>Resources</h2>
+      <ul>
+         <li>
+            <a href="https://html.spec.whatwg.org/multipage/media.html#the-track-element">HTML - the <code class="language-html">track</code> element</a>
+         </li>
+         <li>
+            <a href="https://www.w3.org/TR/ttaf1-dfxp/">Timed Text Markup Language</a>
+         </li>
+         <li>
+            <a href="https://www.w3.org/TR/webvtt/">WebVTT: The Web Video Text Tracks Format</a>
+         </li>
+         <li>
+            <a href="https://captionatorjs.com/">Captionator Polyfill</a>
+         </li>
+      </ul>
+   </section>
+</body>
+</html>
\ No newline at end of file
diff --git a/techniques/html/H96.html b/techniques/html/H96.html
index 1097541bab..7293873bec 100644
--- a/techniques/html/H96.html
+++ b/techniques/html/H96.html
@@ -1,77 +1,86 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using the track element to provide audio descriptions</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Using the track element to provide audio descriptions</h1><section class="meta"><p class="id">ID: H96</p><p class="technology">Technology: html</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
-      <p>HTML5</p>
-   </section><section id="description"><h2>Description</h2>
-      <p>The objective of this technique is to use the HTML5 <code class="el">track</code> element to specify a descriptions timed text track for a <code class="el">video</code> element. Audio description timed text tracks contain textual descriptions of the video component of the media resource, intended for audio synthesis when the visual component is obscured, unavailable, or not usable. The user agent makes the cues available to the user in a non-visual fashion, for instance, by synthesizing them into speech.</p>
-		<p>The <code class="att">src</code> attribute of the <code class="el">track</code> element is an URL providing the text track data.</p>
-		<p>The audio description cues must fit into the gaps available in the audio component of the media resource. If there is not enough time to synthesize the description text in the track cue's time interval, user agents may truncate the speech. This limits the amount of supplementary information that can be added.</p>
-<p>User agents may also support extended audio descriptions by halting the video until the description has been completely synthesized, then restarting the video.</p>
-  
-  <p>As of February 2019 when this Advisory technique was last reviewed by the Working Group, there is no native support in user agents for this technique. However, support is available via JavaScript polyfills.</p>
-  
-   </section><section id="examples"><h2>Examples</h2>
-      <section class="example">
-         <h3>Audio description in one language</h3>
-         
-            <p>A <code class="el">video</code> element for a video in the English language. The audio descriptions are provided in the WebVTT format.</p>
-         
-         <pre xml:space="preserve">
-			 &lt;video poster="myvideo.png" controls&gt;
-				&lt;source src="myvideo.mp4" srclang="en" type="video/mp4"&gt;
-				&lt;track src="myvideo_en.vtt" kind="descriptions" srclang="en" label="English"&gt;
-			  &lt;/video&gt;
-            </pre>
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+   <head>
+      <title>Using the track element to provide audio descriptions</title>
+      <link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+   </head>
+   <body>
+      <h1>Using the <code class="language-html">track</code> element to provide audio descriptions</h1>
+      <section class="meta">
+         <p class="id">ID: H96</p>
+         <p class="technology">Technology: html</p>
+         <p class="type">Type: Technique</p>
       </section>
-      <section class="example">
-         <h3>Audio description in multiple languages</h3>
-         
-            <p>A <code class="el">video</code> element for a video with both an English and French language source element, and with an English and a French audio description track using the WebVTT (vtt) file format.</p>
-         
-         <pre xml:space="preserve">
-			 &lt;video poster="myvideo.png" controls&gt;
-				&lt;source src="myvideo.mp4" srclang="en" type="video/mp4"&gt;
-				&lt;source src="myvideo.webm" srclang="fr" type="video/webm"&gt;
-				&lt;track src="myvideo_en.vtt" kind="descriptions" srclang="en" label="English"&gt;
-				&lt;track src="myvideo_fr.vtt" kind="descriptions" srclang="fr" label="French"&gt;
-			  &lt;/video&gt;            </pre>
+      <section id="applicability">
+         <h2>When to Use</h2>
+         <p><abbr title="HyperText Markup Language">HTML</abbr></p>
+      </section>
+      <section id="description">
+         <h2>Description</h2>
+         <p>The objective of this technique is to use the HTML <code class="language-html">track</code> element to specify a descriptions timed text track for a <code class="language-html">video</code> element. Audio description timed text tracks contain textual descriptions of the video component of the media resource, intended for audio synthesis when the visual component is obscured, unavailable, or not usable. The user agent makes the cues available to the user in a non-visual fashion, for instance, by synthesizing them into speech.</p>
+         <p>The <code class="language-html">src</code> attribute of the <code class="language-html">track</code> element is an <abbr title="Uniform Resource Locator">URL</abbr> providing the text track data.</p>
+         <p>The audio description cues must fit into the gaps available in the audio component of the media resource. If there is not enough time to synthesize the description text in the track cue's time interval, user agents may truncate the speech. This limits the amount of supplementary information that can be added.</p>
+         <p>User agents may also support extended audio descriptions by halting the video until the description has been completely synthesized, then restarting the video.</p>
+         <div class="note">
+            <p>As of September 2023 when this Advisory technique was last reviewed by the Working Group, there is no native support in user agents for this technique. However, support is available via JavaScript polyfills.</p>
+         </div>
+      </section>
+      <section id="examples">
+         <h2>Examples</h2>
+         <section class="example">
+            <h3>Audio description in one language</h3>
+            <p>A <code class="language-html">video</code> element for a video in the English language. The audio descriptions are provided in the WebVTT format.</p>
+<pre xml:space="preserve"><code class="language-html">&lt;video poster="myvideo.png" controls&gt;
+  &lt;source src="myvideo.mp4" srclang="en" type="video/mp4"&gt;
+  &lt;track kind="descriptions" label="English" src="myvideo-en.vtt" srclang="en"&gt;
+&lt;/video&gt;</code></pre>
       </section>
       <section class="example">
-         <h3>Captions in multiple languages</h3>
-         
-            <p>A <code class="el">video</code>, "Google self-driving car". with an audio description track.</p>
-         
-         <pre xml:space="preserve">
-			&lt;video controls tabindex="1"&gt;
-				&lt;source src="cdgQpa1pUUE.webm" type="video/webm"&gt;
-				&lt;source src="cdgQpa1pUUE.mp4" type="video/mp4"&gt;
-				&lt;track id="audesc" src="cdgQpa1pUUE.vtt" kind="descriptions" label="English descriptions" srclang="en-us"&gt;&lt;/track&gt;
-			&lt;/video&gt;            </pre>
-			
+         <h3>Audio description in multiple languages</h3>
+         <p>A <code class="language-html">video</code> element for a video with both an English and French language source element, and with an English and a French audio description track using the WebVTT file format.</p>
+<pre xml:space="preserve"><code class="language-html">&lt;video poster="myvideo.png" controls&gt;
+  &lt;source src="myvideo.mp4" srclang="en" type="video/mp4"&gt;
+  &lt;source src="myvideo.webm" srclang="fr" type="video/webm"&gt;
+  &lt;track kind="descriptions" label="English" src="myvideo-en.vtt" srclang="en"&gt;
+  &lt;track kind="descriptions" label="Français" src="myvideo-fr.vtt" srclang="fr"&gt;
+&lt;/video&gt;</code></pre>
       </section>
-   </section><section id="tests"><h2>Tests</h2>
-      <section class="procedure"><h3>Procedure</h3>
-         <p>For each <code class="el">video</code> element used to play a video:</p>
+   </section>
+   <section id="tests">
+      <h2>Tests</h2>
+      <section class="procedure">
+         <h3>Procedure</h3>
+         <p>For each <code class="language-html">video</code> element used to play a video:</p>
          <ol>
-            <li>Check that the video contains a <code class="el">track</code> element of <code class="att">kind</code> descriptions in the language of the video.</li>
+            <li>Check that the video contains a <code class="language-html">track</code> element of <code class="language-html">kind="descriptions"</code> in the language of the video.</li>
          </ol>
       </section>
-      <section class="results"><h3>Expected Results</h3>
+      <section class="results">
+         <h3>Expected Results</h3>
          <ul>
             <li>Check #1 is true.</li>
          </ul>
       </section>
-   </section><section id="related"><h2>Related Techniques</h2><ul>
-      <li><a href="../general/G173">G173</a></li>
-      <li><a href="../general/G8">G8</a></li>
-   </ul></section><section id="resources"><h2>Resources</h2>
-      
-         <ul>
-           <li><a href="https://videojs.com/">Video.js, a free and open source HTML5 video player</a></li>
-           <li>
-               	<a href="https://www.w3.org/TR/html5/embedded-content-0.html#the-track-element">HTML5, the track element</a>
-               </li>
-            <li>
-                  <a href="https://github.com/w3c/webvtt">WebVTT: The Web Video Text Tracks Format</a>
-               </li>
-         </ul>
-      
-   </section></body></html>
+   </section>
+   <section id="related">
+      <h2>Related Techniques</h2>
+      <ul>
+         <li><a href="../general/G173">G173</a></li>
+         <li><a href="../general/G8">G8</a></li>
+      </ul>
+   </section>
+   <section id="resources">
+      <h2>Resources</h2>
+      <ul>
+         <li>
+            <a href="https://videojs.com/">Video.js, a free and open source HTML5 video player</a></li>
+         <li>
+            <a href="https://html.spec.whatwg.org/multipage/media.html#the-track-element">HTML - the <code class="language-html">track element</code></a>
+         </li>
+         <li>
+            <a href="https://www.w3.org/TR/webvtt/">WebVTT: The Web Video Text Tracks Format</a>
+         </li>
+      </ul>
+   </section>
+</body>
+</html>
diff --git a/techniques/html/H97.html b/techniques/html/H97.html
index a1b23a98df..906bc441b0 100644
--- a/techniques/html/H97.html
+++ b/techniques/html/H97.html
@@ -1,80 +1,108 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Grouping related links using the nav element</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Grouping related links using the nav element</h1><section class="meta"><p class="id">ID: H97</p><p class="technology">Technology: html</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
-      <p>HTML5 documents that contain related links.</p>
-   </section><section id="description"><h2>Description</h2>
-      <p>The objective of this technique is to group navigation links using the HTML5 <code class="el">nav</code> element. The <code class="el">nav</code> element is one of several sectioning elements in HTML5. Use of this markup can make groups of links easier to locate and skip past by users of assistive technology such as screen readers. Using semantic structures allow custom style sheets to be used to change the presentation of groups of links while preserving their relationship. When the <code class="el">nav</code> element is employed more than once on a page, distinguish the navigation groups by using an <code class="att">aria-label</code> or <code class="att">aria-labelledby</code> attribute.</p>
-      <p>Not all groups of links need to use the <code class="el">nav</code> element for markup. For instance, links may be grouped in other structure such as lists or may use ARIA markup if they do not represent a discrete section of the page.</p>
-   </section><section id="examples"><h2>Examples</h2>
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+   <head>
+      <title>Grouping related links using the nav element</title>
+      <link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+   </head>
+   <body>
+      <h1>Grouping related links using the <code class="language-html">nav</code> element</h1>
+      <section class="meta">
+         <p class="id">ID: H97</p>
+         <p class="technology">Technology: html</p>
+         <p class="type">Type: Technique</p>
+      </section>
+      <section id="applicability">
+         <h2>When to Use</h2>
+      <p><abbr title="HyperText Markup Language">HTML</abbr> documents that contain related links.</p>
+   </section>
+   <section id="description">
+      <h2>Description</h2>
+      <p>The objective of this technique is to group navigation links using the HTML <code class="language-html">nav</code> element. The <code class="language-html">nav</code> element is one of several sectioning elements in HTML. Use of this markup can make groups of links easier to locate and skip past by users of assistive technology such as screen readers. Using semantic structures allow custom style sheets to be used to change the presentation of groups of links while preserving their relationship. When the <code class="language-html">nav</code> element is employed more than once on a page, distinguish the navigation groups by using an <code class="language-html">aria-labelledby</code> or <code class="language-html">aria-label</code> attribute.</p>
+      <p>Not all groups of links need to use the <code class="language-html">nav</code> element for markup. For instance, links may be grouped in other structure such as lists or may use ARIA markup if they do not represent a discrete section of the page.</p>
+   </section>
+   <section id="examples">
+      <h2>Examples</h2>
       <section class="example">
          <h3>Navigation links enclosed in a nav element</h3>
-         
-            <p>This example uses a <code class="el">nav</code> element to group navigation links in an accessibility curriculum.</p>
-         
-         <pre xml:space="preserve">
-				 &lt;nav&gt;
-				    &lt;a href="../webaccessibility.html"&gt;Web Accessibility&lt;/a&gt;
-				    &lt;a href="../docaccessibility.html"&gt;Document Accessibility&lt;/a&gt;
-					&lt;a href="../mobileaccessibility.html"&gt;Mobile Accessibility&lt;/a&gt;
-				 &lt;/nav&gt;
-            </pre>
+         <p>This example uses a <code class="language-html">nav</code> element to group navigation links in an accessibility curriculum.</p>
+<pre xml:space="preserve"><code class="language-html">&lt;nav&gt;
+  &lt;ul&gt;
+    &lt;li&gt;&lt;a href="/web-accessibility.html"&gt;Web Accessibility&lt;/a&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;a href="/doc-accessibility.html"&gt;Document Accessibility&lt;/a&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;a href="/mobile-accessibility.html"&gt;Mobile Accessibility&lt;/a&gt;&lt;/li&gt;
+  &lt;/ul&gt;
+&lt;/nav&gt;</code></pre>
       </section>
       <section class="example">
-         <h3>Multiple nav elements</h3>
-         
-            <p>This example uses an nav element with an aria-label attribute to identify the navigation group when there is more than one nav element in a document.</p>
-         
-         <pre xml:space="preserve">
-			&lt;nav aria-label="Site menu"&gt;
-			  &lt;ul&gt;
-				  &lt;li&gt;...a list of links site navigation link here ...&lt;/li&gt;
-			  &lt;/ul&gt;
-			&lt;/nav&gt;
-			...
-			&lt;article&gt;
-			  &lt;nav aria-label="Related links"&gt;
-				...a list of related links here ...
-			  &lt;/nav&gt;
-			&lt;/article&gt;          </pre>
+        <h3>Multiple <code class="language-html">nav</code> elements and <code class="language-html">aria-labelledby</code></h3>
+        <p>The following example shows a best practice of how landmarks might be added to an HTML document in situations where there are two or more of the same type of landmark on the same page. For instance, if a <code class="language-html">nav</code> element is used multiple times on a page, each instance may have a unique label specified using <code class="language-html">aria-labelledby</code>:</p>
+<pre xml:space="preserve"><code class="language-html">&lt;nav aria-labelledby="site-nav-heading"&gt;
+  &lt;h2 id="site-nav-heading"&gt;Site&lt;/h2&gt;
+    &lt;ul&gt;
+      &lt;li&gt;&lt;a href="..."&gt;nav link 1&lt;/a&gt;&lt;/li&gt;  
+      &lt;li&gt;&lt;a href="..."&gt;nav link 2&lt;/a&gt;&lt;/li&gt;
+      &lt;li&gt;&lt;a href="..."&gt;nav link 3&lt;/a&gt;&lt;/li&gt;
+    &lt;/ul&gt;
+&lt;/nav&gt;
+&lt;nav aria-labelledby="related-nav-heading"&gt;
+  &lt;h2 id="related-nav-heading"&gt;Related Topics&lt;/h2&gt;
+    &lt;ul&gt;
+    &lt;li&gt;&lt;a href="..."&gt;topic link 1&lt;/a&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;a href="..."&gt;topic link 2&lt;/a&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;a href="..."&gt;topic link 3&lt;/a&gt;&lt;/li&gt;
+  &lt;/ul&gt;
+&lt;/nav&gt;</code></pre>
       </section>
       <section class="example">
-         <h3>Generic multiple nav elements</h3>
-         
-            <p>The following example shows a best practice of situation where there are more than two navigation menus on the same page, and there is no existing text on the page that can be referenced as the label.</p>
-         
-         <pre xml:space="preserve">
-			&lt;nav aria-label="primary"&gt;
-				&lt;a href="home.html"&gt;Home&lt;/a&gt;
-				&lt;a href="about-us.html"&gt;About Us&lt;/a&gt;
-				&lt;a href="products.html"&gt;Products&lt;/a&gt;
-			&lt;/nav&gt;
-
-			&lt;nav aria-label="secondary"&gt;
-				&lt;a href="adverts.html"&gt;Our Advertisers&lt;/a&gt;
-				&lt;a href="related.html"&gt;Related Links&lt;/a&gt;
-				&lt;a href="subsidiaries.html"&gt;Subsidiaries&lt;/a&gt;
-			&lt;/nav&gt;            </pre>
-      </section>
-   </section><section id="tests"><h2>Tests</h2>
-      <section class="procedure"><h3>Procedure</h3>
+         <h3>Multiple <code class="language-html">nav</code> elements and <code class="language-html">aria-label</code></h3>
+         <p>The following example shows a best practice of how landmarks might be added to an HTML document in situations where there are two or more of the same type of landmark on the same page, and there is no existing text on the page that can be referenced as the label:</p>
+<pre xml:space="preserve"><code class="language-html">&lt;nav aria-label="Site"&gt;
+  &lt;ul&gt;
+    &lt;li&gt;&lt; href="..."&gt;nav link 1&lt;/a&gt;&lt;/li&gt;
+    &lt;li&gt;&lt; href="..."&gt;nav link 2&lt;/a&gt;&lt;/li&gt;
+    &lt;li&gt;&lt; href="..."&gt;nav link 3&lt;/a&gt;&lt;/li&gt;
+  &lt;/ul&gt;
+&lt;/nav&gt;
+&lt;nav aria-label="Tags"&gt;
+  &lt;ul&gt;
+    &lt;li&gt;&lt;a href="..."&gt;tag link 1&lt;/a&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;a href="..."&gt;tag link 2&lt;/a&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;a href="..."&gt;tag link 3&lt;/a&gt;&lt;/li&gt;
+  &lt;/ul&gt;
+&lt;/nav&gt;</code></pre>
+</section>
+   </section>
+   <section id="tests">
+      <h2>Tests</h2>
+      <section class="procedure">
+         <h3>Procedure</h3>
          <ol>
-            <li>Check that links that are visually grouped and represent a section of the page are enclosed in a <code class="el">nav</code> element.</li>
-          </ol>
+            <li>Check that links that are visually grouped and represent a section of the page are enclosed in a <code class="language-html">nav</code> element.</li>
+         </ol>
       </section>
-      <section class="results"><h3>Expected Results</h3>
+      <section class="results">
+         <h3>Expected Results</h3>
          <ul>
             <li>Check #1 is true.</li>
          </ul>
       </section>
-   </section><section id="related"><h2>Related Techniques</h2><ul>
-      <li><a href="../aria/ARIA11">ARIA11</a></li>
-      <li><a href="../general/G141">G141</a></li>
-      <li><a href="../general/G140">G140</a></li>
-      <li><a href="../html/H42">H42</a></li>
-   </ul></section><section id="resources"><h2>Resources</h2>
-      
-         <ul>
-            <li>
-                  <a href="https://www.w3.org/TR/html-markup/nav.html">HTML5 nav element</a>
-               </li>
-         </ul>
-      
-   </section></body></html>
\ No newline at end of file
+   </section>
+   <section id="related">
+      <h2>Related Techniques</h2>
+      <ul>
+         <li><a href="../aria/ARIA11">ARIA11</a></li>
+         <li><a href="../general/G141">G141</a></li>
+         <li><a href="../general/G140">G140</a></li>
+         <li><a href="../html/H42">H42</a></li>
+      </ul>
+   </section>
+   <section id="resources">
+      <h2>Resources</h2>
+      <ul>
+         <li>
+            <a href="https://html.spec.whatwg.org/multipage/sections.html#the-nav-element">HTML - <code class="language-html">nav</code> element</a>.
+         </li>
+      </ul>
+   </section>
+</body>
+</html>
\ No newline at end of file
diff --git a/techniques/html/H98.html b/techniques/html/H98.html
index 70d603459c..d6e33330a2 100644
--- a/techniques/html/H98.html
+++ b/techniques/html/H98.html
@@ -2,99 +2,91 @@
 <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
 	<head>
 		<title>Using HTML 5.2 autocomplete attributes</title>
-		<link rel="stylesheet" type="text/css" href="https://rawgit.com/w3c/wcag21/master/css/sources.css"/>
+		<link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
 	</head>
 	<body>
-		<h1>Using HTML 5.2 autocomplete attributes</h1>
-		<section id="meta">
-			<h2>Metadata</h2>
-			<p id="id"></p>
-			<p id="technology">html. It should also be noted that as of the summer 2018, neither Edge nor IE support the functionality found in Chrome, Firefox  or Safari with regard to auto-filling the form inputs.</p>
-			<p id="type">sufficient</p>
+		<h1>Using HTML 5.2 <code class="language-html">autocomplete</code> attributes</h1>
+		<section class="meta">
+			<p id="id">ID: H98</p>
+			<p id="technology">Technology: html</p>
+			<p id="type">Type: sufficient</p>
 		</section>
 		<section id="applicability">
 			<h2>When to Use</h2>
-			<p>All HTML form fields that map to the <a href="https://www.w3.org/TR/WCAG21/#input-purposes">HTML 5.2 autofill tokens</a>.</p>
+			<p>All <abbr title="Hypertext Markup Language">HTML</abbr> form fields that map to the <a href="/TR/WCAG/#input-purposes">HTML 5.2 <code class="language-html">autofill</code> tokens</a>.</p>
 		</section>
 		<section id="description">
 			<h2>Description</h2>
-
 			<p>The objective of this technique is to programmatically link a pre-defined and published taxonomic term to the input, so that the inputs can also be machine-interpreted. This way the input will always have a common, referable and identifiable value associated to it, no matter what language is used, or what visible on-screen term is used to label the input. Then it can be further customized or otherwise machine-manipulated to help users.</p>
-
-			<p>The technique works by adding the appropriate autocomplete token to each form field on the form to make the identified inputs Programmatically Determinable. This will help people with cognitive disabilities who may not immediately know the purpose of the field because the label used by the author is not familiar to them.  When inputs have been programmatically assigned, third party plugins and software can manipulate these form fields to make them more accessible to people with cognitive disabilities. For instance, a plugin could detect an autocomplete token with the text string "tel" and insert a telephone icon. It will further enable third party software to swap out the existing labels for text labels that the user finds more familiar. For instance, it could change "Given Name" to "First Name".</p>
+			<p>The technique works by adding the appropriate <code class="language-html">autocomplete</code> token to each form field on the form to make the identified inputs Programmatically Determinable. This will help people with cognitive disabilities who may not immediately know the purpose of the field because the label used by the author is not familiar to them. When inputs have been programmatically assigned, third party plugins and software can manipulate these form fields to make them more accessible to people with cognitive disabilities. For instance, a plugin could detect an <code class="language-html">autocomplete</code> token with the text string "<code class="language-html">tel</code>" and insert a telephone icon. It will further enable third party software to swap out the existing labels for text labels that the user finds more familiar. For instance, it could change "Given Name" to "First Name".</p>
+      <p>The <code class="language-html">autocomplete</code> attribute also improves the browser's ability to pre-populate form fields with user-preferred values. When the input has been properly "tagged" with the known token value, the value entered by the user is stored locally on the host machine and associated with the token value for reuse. It helps those with dexterity disabilities who have trouble typing, those who may need more time, and anyone who wishes to reduce effort to fill out a form.</p>
         
-      <p>The <code>autocomplete</code> attribute also improves the browser's ability to pre-populate form fields with user-preferred values. When the input has been properly 'tagged' with the known token value, the value entered by the user is stored locally on the host machine and associated with the token value for reuse.  It helps those with dexterity disabilities who have trouble typing, those who may need more time, and anyone who wishes to reduce effort to fill out a form.</p>
-        
-   		<p>The <code>autocomplete</code> attribute allows the browser to do a pattern match against a list of values locally stored with the browser, and supplies the appropriate corresponding value when the input is programmatically tagged. This is a User setting that can be turned on or off, or modified by the end user. This reduces typing and reliance on memory because it uses stored values to fill in the fields.</p>
+   		<p>The <code class="language-html">autocomplete</code> attribute allows the browser to do a pattern match against a list of values locally stored with the browser, and supplies the appropriate corresponding value when the input is programmatically tagged. This is a user setting that can be turned on or off, or modified by the end user. This reduces typing and reliance on memory because it uses stored values to fill in the fields.</p>
       
-			<p>It's important to note the success criterion <a href="identify-input-purpose">Identify Input Purpose</a> and autocomplete attribute only place requirements on input fields collecting information <em><strong>about the user</strong></em>.</p>
+			<p>It's important to note the Success Criterion <a href="../../Understanding/identify-input-purpose.html">Identify Input Purpose</a> and <code class="language-html">autocomplete</code> attribute only place requirements on input fields collecting information <strong>about the user</strong>.</p>
 
-	  <p>For the success criterion, it is assumed that the <code>autocomplete</code> attribute is not used on form fields that do not correspond to an autocomplete field described in the <a href="https://www.w3.org/TR/html52/sec-forms.html#autofilling-form-controls-the-autocomplete-attribute">HTML 5.2 specification</a>. If the <code>autocomplete</code> field is used to describe a "custom" taxonomy, rather than that described in the specification, this rule may produce incorrect results. </p>
+	  <p>For the Success Criterion, it is assumed that the <code class="language-html">autocomplete</code> attribute is not used on form fields that do not correspond to an autocomplete field described in the <a href="https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofilling-form-controls:-the-autocomplete-attribute">HTML <code class="language-html">autocomplete</code> attribute specification</a>. If the <code class="language-html">autocomplete</code> field is used to describe a "custom" taxonomy, rather than that described in the specification, this rule may produce incorrect results.</p>
 			<section>
 				<h3>Security considerations</h3>
 				<p>Organizations can be concerned about allowing input fields to be automatically filled-in. There is sometimes confusion about how browsers save information and the security implications.</p>
-				<p>For the autocomplete attribute:</p>
+				<p>For the <code class="language-html">autocomplete</code> attribute:</p>
 				<ul>
-					<li>This technique should only be used when asking for data about the <em>user</em> who is filling the form in, not for other people.</li>
-					<li>It only works if you are on the same computer, using the same user-account, and using the same browser. Any multi-login scenario does not save autocomplete data between different accounts. (Users can setup syncing of data across computers, but that is not the default.)</li>
-					<li>Saving information with autocomplete is opt-in by the user, usually at the point of saving data the first time.</li>
+					<li>This technique should only be used when asking for <strong>data about the user</strong> who is filling the form in, not for other people.</li>
+					<li>It only works if you are on the same computer, using the same user-account, and using the same browser. Any multi-login scenario does not save <code class="language-html">autocomplete</code> data between different accounts. (Users can setup syncing of data across computers, but that is not the default.)</li>
+					<li>Saving information with <code class="language-html">autocomplete</code> is opt-in by the user, usually at the point of saving data the first time.</li>
 					<li>The form is not auto-submitted, the user can see the data before it is submitted.</li>
 					<li>It is easy to wipe both history and form data in the browser settings.</li>
 					<li>It is easy to engage a privacy mode, such as private browsing.</li>
-					<li>Even <em>without</em> autocomplete set in the webpage, browsers can save data, and some plugins (such as password managers) will aggressively use heuristics to guess what fields are for and fill them in. Using the autocomplete attribute makes those guesses accurate.</li>
+					<li>Even <em>without</em> <code class="language-html">autocomplete</code> set in the webpage, browsers can save data, and some plugins (such as password managers) will aggressively use heuristics to guess what fields are for and fill them in. Using the <code class="language-html">autocomplete</code> attribute makes those guesses accurate.</li>
 				</ul>
-				<p>The browser history provides far more detail about what people have done, and is just as available as autocomplete data. The solutions/mitigations for browser-history are similar to autocomplete.</p>
+				<p>The browser history provides far more detail about what people have done, and is just as available as <code class="language-html">autocomplete</code> data. The solutions/mitigations for browser-history are similar to <code class="language-html">autocomplete</code>.</p>
 			</section>
 		</section>
 		<section id="examples">
 			<h2>Examples</h2>
-    <section class="example">
-				<h3>Example 1: Currency</h3>
+			<section class="example">
+				<h3>A user's credit card information</h3>
 				<p>This is a simple form that collects contact and credit card information from the user.</p>
-				<pre><code>&lt;form method="post" action="step2"&gt;
- &lt;div&gt;
-   &lt;label for="fname"&gt;First Name&lt;/label&gt;
-  &lt;input id="fname" type="text" <strong>autocomplete="given-name"</strong> ... &gt;
+				<pre xml:space="preserve"><code class="language-html">&lt;form method="post" action="step2"&gt;
+  &lt;div&gt;
+    &lt;label for="fname"&gt;First Name&lt;/label&gt;
+    &lt;input autocomplete="given-name" id="fname" type="text"&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;label for="lname"&gt;Last Name&lt;/label&gt;
+    &lt;input autocomplete="family-name" id="lname" type="text"&gt;
   &lt;/div&gt;
   &lt;div&gt;
-    &lt;label for="lname"&gt;Last Name Name&lt;/label&gt;
-  &lt;input id="lname" type="text" <strong>autocomplete="family-name"</strong> ... &gt;
     &lt;label for="cc-num"&gt;Credit card number:&lt;/label&gt;
-    &lt;input type="text" id="cc-num" <strong>autocomplete="cc-number"</strong>&gt;
+    &lt;input autocomplete="cc-number" id="cc-num" type="text"&gt;
   &lt;/div&gt;
   &lt;div&gt;
     &lt;label for="exp-date"&gt;Expiry Date:&lt;/label&gt;
-    &lt;input type="month" id="exp-date" <strong>autocomplete="cc-exp"</strong>&gt;
+    &lt;input autocomplete="cc-exp" id="exp-date" type="month"&gt;
   &lt;/div&gt;
   &lt;div&gt;
-    &lt;input type="submit" value="Continue..."&gt;
+    &lt;input type="submit" value="Continue"&gt;
   &lt;/div&gt;
 &lt;/form&gt;</code></pre>
 			</section>
 		</section>
-   
+
 		<section id="tests">
 			<h2>Tests</h2>
 			<section class="test-procedure">
 				<h3>Procedure</h3>
-			<p>For each form field that collects information about the user and corresponds to an autocomplete field described in <a href="https://www.w3.org/TR/WCAG21/#input-purposes">WCAG 2.1 7. Section 7: Input Purposes for User Interface Components</a>, check the following:</p>
+			<p>For each form field that collects information about the user and corresponds to an <code class="language-html">autocomplete</code> field described in <a href="/TR/WCAG/#input-purposes">WCAG 2.1 7. Section 7: Input Purposes for User Interface Components</a>, check the following:</p>
         <ol>
-					<li>The form field has a valid and well-formed autocomplete attribute and value pair.</li>
-          <li>The purpose of the form field indicated by the label corresponds with the autocomplete token on the input.</li>
+					<li>The form field has a valid and well-formed <code class="language-html">autocomplete</code> attribute and value pair.</li>
+          <li>The purpose of the form field indicated by the label corresponds with the <code class="language-html">autocomplete</code> token on the input.</li>
 				</ol>
 			</section>
 			<section class="test-results">
 				<h3>Expected Results</h3>
 				<ul>
-					<li>If #1 and #2 are true, then the test passes and the technique has been successfully implemented</li>
+					<li>If #1 and #2 are true, then the test passes and the technique has been successfully implemented.</li>
 				</ul>
 			</section>
 		</section>
-		<section id="related-resources">
-			<h2>Related Resources</h2>
-			<ul>
-				<li>Autocomplete test in the <a href="https://github.com/auto-wcag/auto-wcag/pull/170/files#diff-975065c206dc7448c6810fcbba89923b">automated test suite.</a> [@@ will update to published link when available]</li>
-			</ul>
-		</section>
 	</body>
 </html>
diff --git a/techniques/html/H99.html b/techniques/html/H99.html
index d49b72ce62..6df834c7c6 100644
--- a/techniques/html/H99.html
+++ b/techniques/html/H99.html
@@ -1,11 +1,11 @@
 <!DOCTYPE html>
 <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
 	<head>
-		<title>Providing a Page List</title>
+		<title>Provide a page-selection mechanism</title>
 		<link rel="stylesheet" type="text/css" href="../../css/editors.css"/>
 	</head>
 	<body>
-		<h1>Providing a Page List</h1>
+		<h1>Provide a page-selection mechanism</h1>
 		<section id="Applicability">
 			<h2>Applicability</h2>
 			<p id="id">applicability</p>
@@ -18,87 +18,96 @@ <h2>User Agent and Assistive Technology Support Notes</h2>
 		<section id="description">
 			<h2>Description</h2>
 
-			<p>The objective of this technique is to ensure that a page list navigation aid is provided and that it includes a list of all the available locations in the digital publication.</p>
+			<p>The objective of this technique is to ensure that a page-selection mechanism is provided that makes available programmatically all set page locations in the digital publication.</p>
 
-			<p>The page list provides a way to locate static page break locations (i.e., where each new page begins) within a digital publication. These locations typically come from a print equivalent of the edition and allow synchronization in, for example, mixed print-digital environments such as schools and universities.</p>
+			<p>The page-selection mechanism provides a way to locate static page break locations (i.e., where each new page begins) within a digital publication. These locations typically come from a print equivalent of the edition and allow synchronization in, for example, a mix of print and digital publications in environments such as schools and universities.</p>
         
-			<p>The source of pagination is not limited to print but could match up to any statically paginated alternative, such as a PDF or even a fixed-layout EPUB (i.e., where the content does not reflow to fit the available screen size).</p>
+			<p>The source of pagination is not limited to print but could match up to any statically paginated alternative, such as a <abbr title="Portable Document Format">PDF</abbr> or even a fixed-layout EPUB (i.e., where the content does not reflow to fit the available screen size).</p>
         
 			<p>The order of the page break locations in a digital publication is not sequential in all cases, and not all page breaks may be represented. Publishers often rearrange and remove content from the paginated source content when creating a digital version.</p>
       
-			<p>Page lists are a central feature of many digital publishing formats. EPUB 3 defines the page list in its navigation document,<a href="#footnote1">[1]</a> while EPUB 2 and DAISY 3 use the pageList element in the NCX.<a href="#footnote2">[2]</a> </p>
+			<p>Page lists are a central feature of many digital publishing formats. <a href="https://www.w3.org/publishing/epub3/epub-packages.html#sec-nav-pagelist">EPUB 3 defines the page list</a> in its navigation document while EPUB 2 and DAISY 3 use the <a href="http://www.daisy.org/z3986/2005/Z3986-2005.html#NCXElem">pageList element in the NCX</a>. The <a href="https://www.w3.org/TR/dpub-aria-1.0/#doc-pagelist">DPUB-ARIA module</a> also includes a <code class="language-xml">doc-pagelist</code> role for identifying the navigation element containing the page list.</p>
 
-			<p>The DPUB-ARIA module also includes a doc-pagelist role for identifying the navigation element containing the page list.<a href="#footnote3">[3]</a></p>
+			<p>Other publications provide a means of page navigation through a 'go to' mechanism.</p>
 
 		</section>
 		<section id="examples">
 			<h2>Examples</h2>
     <section class="example">
-				<h3>Example 1 – Page list in HTML publications</h3>
-				<p>To add a page list to a web-based document, the role "doc-pagelist" is added to the element (typically a nav element) that encloses the list and its title.</p>
-				<pre><code>&lt;nav role="doc-pagelist" aria-labelledby="pglist"&gt;
+				<h3>Page list in <abbr title="HyperText Markup Language">HTML</abbr> publications</h3>
+				<p>To add a page list to a web-based document, the role <code class="language-xml">"doc-pagelist"</code> is added to the element (typically a <code class="language-html">nav</code> element) that encloses the list and its title.</p>
+				<pre xml:space="preserve"><code class="language-html">&lt;nav role="doc-pagelist" aria-labelledby="pglist"&gt;
  &lt;h2 id="pglist"&gt;Page List&lt;/h2&gt;
  &lt;ol&gt;
    &lt;li&gt;&lt;a href="intro.xhtml#pg1"&gt;1&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="intro.xhtml#pg2"&gt;2&lt;/a&gt;&lt;/li&gt;
    …
  &lt;/ol&gt;
-&lt;/nav&gt;
-</code></pre>
+&lt;/nav&gt;</code></pre>
 				<p>The destinations of the page list links are usually explicit page break markers like the following:</p>
-				<pre><code>&lt;span id="pg1" role="doc-pagebreak" aria-label="page 1"&gt;</code></pre>
-				<h3>Example 2 – Page list in EPUB 3 publications</h3>
-				<p>EPUB 3 uses the epub:type attribute to identify the page list in the navigation document. The attribute is used on a nav element with the value "page-list" (note the different hyphenation). The ARIA role attribute has no effect unless the navigation document can be directly accessed by users (i.e., the document is in the EPUB spine). Like the previous HTML example, the contents of the nav element is a list of links to the page break locations.</p>
-				<pre><code>&lt;nav epub:type="page-list" role="doc-pagelist" aria-labelledby="pglist"&gt;
-   &lt;h2 id="pglist"&gt;Page List&lt;/h2&gt;
-   &lt;ol&gt;
-      &lt;li&gt;&lt;a href="chapter01.xhtml#page001"&gt;1&lt;/a&gt;&lt;/li&gt;
-      &lt;li&gt;&lt;a href="chapter01.xhtml#page002"&gt;2&lt;/a&gt;&lt;/li&gt;
-      &lt;li&gt;&lt;a href="chapter01.xhtml#page003"&gt;3&lt;/a&gt;&lt;/li&gt;
-      …
-   &lt;/ol&gt;
-   &lt;/nav&gt;</code></pre>
-				<h3>Example 3 – Page list in EPUB 2 and DAISY publications</h3>
-				<p>The EPUB 2 and DAISY 3 formats both use an XML grammar called the NCX for expressing navigation aids. The page list is defined within the ncx element using the pageList tag. Each pageTarget within this element identifies a page break, providing both a label and a destination.</p>
-				<pre><code>&lt;ncx xmlns="http://www.daisy.org/z3986/2005/ncx/"
+				<pre xml:space="preserve"><code class="language-html">&lt;span id="pg1" role="doc-pagebreak" aria-label="page 1"&gt;</code></pre>
+				</section>
+				<section class="example">
+				<h3>Page list in EPUB 3 publications</h3>
+				<p>EPUB 3 uses the <code>epub:type</code> attribute to identify the page list in the navigation document. The attribute is used on a nav element with the value "page-list" (note the different hyphenation). The <abbr title="Accessible Rich Internet Applications">ARIA</abbr> <code class="language-html">role</code> attribute has no effect unless the navigation document can be directly accessed by users (i.e., the document is in the EPUB spine). Like the previous HTML example, the contents of the <code class="language-html">nav</code> element is a list of links to the page break locations.</p>
+				<pre xml:space="preserve"><code class="language-xml">&lt;nav epub:type="page-list" role="doc-pagelist" aria-labelledby="pglist"&gt;
+  &lt;h2 id="pglist"&gt;Page List&lt;/h2&gt;
+  &lt;ol&gt;
+    &lt;li&gt;&lt;a href="chapter01.xhtml#page001"&gt;1&lt;/a&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;a href="chapter01.xhtml#page002"&gt;2&lt;/a&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;a href="chapter01.xhtml#page003"&gt;3&lt;/a&gt;&lt;/li&gt;
+    ...
+  &lt;/ol&gt;
+&lt;/nav&gt;</code></pre>
+   </section>
+   <section class="example">
+				<h3>Page list in EPUB 2 and DAISY publications</h3>
+				<p>The EPUB 2 and DAISY 3 formats both use an <abbr title="Extensible Markup Language">XML</abbr> grammar called the <abbr title="Navigation Control file for XML">NCX</abbr> for expressing navigation aids. The page list is defined within the <code class="language-xml">ncx</code> element using the pageList tag. Each <code class="language-xml">pageTarget</code> within this element identifies a page break, providing both a label and a destination.</p>
+<pre xml:space="preserve"><code class="language-xml">&lt;ncx xmlns="http://www.daisy.org/z3986/2005/ncx/"
      version="2005-1"
      xml:lang="en-US"&gt;
-   …
-   &lt;pageList&gt;
-      &lt;pageTarget id="p1" type="normal" value="1"&gt;
-         &lt;navLabel&gt;&lt;text&gt;1&lt;/text&gt;&lt;/navLabel&gt;
-         &lt;content src="content.html#p001"/&gt;
-      &lt;/pageTarget&gt;
-      &lt;pageTarget id="p2" type="normal" value="2"&gt;
-         &lt;navLabel&gt;&lt;text&gt;2&lt;/text&gt;&lt;/navLabel&gt;
-         &lt;content src="content.html#p002"/&gt;
-      &lt;/pageTarget&gt;
-   &lt;/pageList&gt;
+  ...
+  &lt;pageList&gt;
+    &lt;pageTarget id="p1" type="normal" value="1"&gt;
+      &lt;navLabel&gt;&lt;text&gt;1&lt;/text&gt;&lt;/navLabel&gt;
+      &lt;content src="content.html#p001"/&gt;
+    &lt;/pageTarget&gt;
+    &lt;pageTarget id="p2" type="normal" value="2"&gt;
+      &lt;navLabel&gt;&lt;text&gt;2&lt;/text&gt;&lt;/navLabel&gt;
+      &lt;content src="content.html#p002"/&gt;
+    &lt;/pageTarget&gt;
+  &lt;/pageList&gt;
 &lt;/ncx&gt;</code></pre>
 			</section>
+			<section class="example">
+				<h3>Go to page mechanism</h3>
+				<p>A mechanism provides the ability to enter a page number as an input and reposition the user to the matching target page location.</p>
+			</section>
 		</section>
 		<section id="Resources">
 			<h3>Resources</h3>
-			<p id="footnote1">[1] <a href="https://www.w3.org/publishing/epub3/epub-packages.html#sec-nav-pagelist">https://www.w3.org/publishing/epub3/epub-packages.html#sec-nav-pagelist</a></p>
-			<p id="footnote2">[2] <a href="http://www.daisy.org/z3986/2005/Z3986-2005.html#NCXElem">http://www.daisy.org/z3986/2005/Z3986-2005.html#NCXElem</a></p>
-			<p id="footnote3">[3] <a href="https://www.w3.org/TR/dpub-aria-1.0/#doc-pagelist">https://www.w3.org/TR/dpub-aria-1.0/#doc-pagelist</a></p>
+			<ul>
+				<li><a href="https://www.w3.org/TR/epub/#sec-nav-pagelist">EPUB <code class="language-xml">page-list</code> nav</a></li>
+				<li><a href="https://www.daisy.org/z3986/2005/Z3986-2005.html#NCXElem">Daisy NCX Elements</a></li>
+				<li><a href="https://www.w3.org/TR/dpub-aria/#doc-pagelist">DPUB-ARIA 1.0 doc-pagelist role</a></li>
+			</ul>
 		</section>
 		<section id="tests">
 			<h2>Tests</h2>
 			<section class="procedure">
 			<h3>Procedure</h3>
 				<ol>
-				<li>Check that a page list, or a link to a page list exists in the publication.</li>
-				<li>Check that all the static page break locations in the publication are represented in the page list.</li>
-				<li>Check that the entries in the page list link to the correct location in the publication.</li>
+					<li>Check that a page-selection mechanism exists in the publication.</li>
+					<li>Check that all the static page break locations in the publication are represented in the selection mechanism.</li>
+					<li>Check that the entries in the page-selection mechanism link to the correct location in the publication.</li>
 				</ol>
 			</section>
-		<section class="results">
-			<h3>Expected Results</h3>
-				<ul>
-				<li>#1, #2 and #3 are true.</li>
-				</ul>
-		</section>
-   </section>
+		  <section class="results">
+			  <h3>Expected Results</h3>
+				  <ul>
+				  <li>#1, #2 and #3 are true.</li>
+				  </ul>
+		  </section>
+    </section>
 	</body>
 </html>
diff --git a/techniques/index.html b/techniques/index.html
index dddef5cbdf..2f6f6245dc 100644
--- a/techniques/index.html
+++ b/techniques/index.html
@@ -4,113 +4,94 @@
 		<meta charset="UTF-8"/>
 		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
 		
-		<title>Techniques for WCAG 2.2</title>
-		<link rel="stylesheet" type="text/css" href="https://www.w3.org/StyleSheets/TR/2016/base"/>
-		<link rel="stylesheet" type="text/css" href="techniques.css"/>
+		<title>All WCAG 2.2 Techniques | WAI | W3C</title>
+		<link rel="stylesheet" href="https://w3.org/WAI/assets/css/style.css"/>
+		<link rel="stylesheet" type="text/css" href="base.css"/>
 	</head>
-	<body>
-		<div class="head">
-			<a href="https://www.w3.org/" class="logo">
-				<img alt="W3C" src="https://www.w3.org/StyleSheets/TR/2016/logos/W3C" width="72" height="48"/>
-			</a>
-			<h1 id="title" class="title p-name">Techniques for WCAG 2.2</h1>
-			<h2>Updated <span class="generate-date"/></h2>
-			
-			<ul id="masthead">
-				<li><strong>Authors:</strong> <a href="https://www.w3.org/WAI/GL/">Accessibility Guidelines Working Group</a></li>
-				<li><strong>Editors:</strong> <a href="mailto:group-ag-chairs@w3.org">Alastair Campbell, Michael Cooper, Andrew Kirkpatrick</a></li>
-				<li><strong>Editors' Draft:</strong> <a href="https://w3c.github.io/wcag/understanding/">https://w3c.github.io/wcag/techniques/</a></li>
-				<li><strong>Official Version:</strong> <a href="https://www.w3.org/WAI/WCAG22/Understanding/">https://www.w3.org/WAI/WCAG22/techniques/</a></li>
-				<li><strong>File Issues</strong>: <a href="https://github.com/w3c/wcag/issues/">https://github.com/w3c/wcag/issues/</a></li>
-			</ul>
-			
-			<p class="copyright">
-				<a href="https://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a> ©
-				2017-<span class="generate-year">2018</span>
-				
-				<a href="https://www.w3.org/"><abbr title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup>
-				(<a href="https://www.csail.mit.edu/"><abbr title="Massachusetts Institute of Technology">MIT</abbr></a>,
-				<a href="https://www.ercim.eu/"><abbr title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>,
-				<a href="https://www.keio.ac.jp/">Keio</a>, <a href="http://ev.buaa.edu.cn/">Beihang</a>).
-				
-				<abbr title="World Wide Web Consortium">W3C</abbr> <a href="https://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>,
-				<a href="https://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a> and
-				<a rel="license" href="https://www.w3.org/Consortium/Legal/copyright-documents">document use</a>
-				rules apply.
-			</p>
-			<hr title="Separator for header"/>
-		</div>
-		<section id="abstract">
-			<h2>Abstract</h2>
-			<p>This <em>Techniques for WCAG 2.2</em> document provides guidance for web content authors and evaluators on meeting <a href="https://www.w3.org/TR/WCAG22/">Web Content Accessibility Guidelines (WCAG) 2.2</a> success criteria. It is part of a series of documents published by the W3C Web Accessibility Initiative (WAI) to support WCAG 2.2. For an introduction to WCAG, supporting technical documents, and educational material, see <a href="https://www.w3.org/WAI/intro/wcag">Web Content Accessibility Guidelines (WCAG) Overview</a>.</p>
-			<p>Techniques are informative—that means they are not required. The basis for determining conformance to WCAG 2.2 is the success criteria from the <a href="https://www.w3.org/TR/WCAG22/">WCAG 2.2 standard</a>—not the techniques. <strong>For important information about techniques, please see the <a href="https://www.w3.org/WAI/WCAG22/Understanding/understanding-techniques.html">Understanding Techniques for WCAG Success Criteria</a> section of Understanding WCAG 2.2.</strong></p>
-			<p><em>Techniques for WCAG 2.2</em> is not intended to be used as a stand-alone document. Instead, it is expected that content authors will usually use <a href="https://www.w3.org/WAI/WCAG21/quickref/">How to Meet WCAG 2.0: A customizable quick reference</a> to read the WCAG success criteria, and follow links from there to specific topics in Understanding WCAG 2.0 and to specific techniques.</p>		</section>
-		<section id="sotd">
-			<h2>Status of This Document</h2>
-			<p>This is the official version of "Understanding WCAG 2.2", and is referenced by <a href="https://www.w3.org/TR/WCAG22/">Web Content Accessibility Guidelines 2.2</a>. This resource is maintained as needed to update interpretive guidance and reference techniques to meet the guidelines.</p>
-			<p>To comment, <a href="https://github.com/w3c/wcag/issues/new">file an issue in the <abbr title="World Wide Web Consortium">W3C</abbr> WCAG 2.2 GitHub repository</a>. Although the proposed Success Criteria in this document reference issues tracking discussion, the Working Group requests that public comments be filed as new issues, one issue per discrete comment. It is free to create a GitHub account to file issues. If filing issues in GitHub is not feasible, send email to <a href="mailto:public-agwg-comments@w3.org?subject=WCAG%202.2%20public%20comment">public-agwg-comments@w3.org</a> (<a href="https://lists.w3.org/Archives/Public/public-agwg-comments/">comment archive</a>). </p>
-		</section>
-		<section id="introduction">
-			<h2>Introduction to Techniques for WCAG 2.2</h2>
-			<p>This <em>Techniques for WCAG 2.2</em> document provides guidance for web content authors and evaluators on meeting <a href="https://www.w3.org/TR/WCAG22/">Web Content Accessibility Guidelines (WCAG) 2.2</a>success criteria. It is part of a series of documents published by the W3C Web Accessibility Initiative (WAI) to support WCAG 2.2. For an introduction to WCAG, supporting technical documents, and educational material, see <a href="https://www.w3.org/WAI/intro/wcag">Web Content Accessibility Guidelines (WCAG) Overview</a>.</p>
-			<p>WCAG 2.2 itself is a stable document that does not change. This <em>Techniques for WCAG 2.2</em> document is updated periodically to cover more current best practices and changes in technologies and tools.</p>
-			<p>Techniques are informative—that means they are not required. The basis for determining conformance to WCAG 2.2 is the success criteria from the <a href="https://www.w3.org/TR/WCAG22/">WCAG 2.2 standard</a>—not the techniques.</p>
-			<div class="note">
-				<p>W3C cautions against requiring W3C's sufficient techniques. The only thing that should be required is meeting the WCAG 2.2 success criteria. To learn more, see:</p>
-				<ul>
-					<li>
-						<p><a href="https://www.w3.org/WAI/WCAG20/wcag2faq.html#techsnot">What would be the negative consequences of allowing <em>only</em> W3C's published techniques to be used for conformance to WCAG 2?</a> in the WCAG 2 FAQ</p>
-					</li>
-				</ul>
-			</div>
-			<p><em>Techniques for WCAG 2.2</em> is not intended to be used as a stand-alone document. Instead, it is expected that content authors will usually use <a href="https://www.w3.org/WAI/WCAG21/quickref/">How to Meet WCAG 2.2: A customizable quick reference</a> to read the WCAG success criteria, and follow links from there to specific topics in Understanding WCAG 2.2 and to specific techniques.</p>
-			<p>Publication of techniques for a specific technology does not imply that the technology can be used in all situations to create content that meets WCAG 2.2 success criteria and conformance requirements. Developers need to be aware of the limitations of specific technologies and provide content in a way that is accessible to people with disabilities. </p>
-			<p><strong>For important information about techniques, please see the <a class="understanding" href="../Understanding/understanding-techniques">Understanding Techniques for WCAG Success Criteria</a> section of Understanding WCAG 2.2.</strong></p>
-		</section>
+	<body dir="ltr">
+      		
+      
+      <div class="default-grid with-gap leftcol">
+         <aside class="box nav-hack sidebar standalone-resource__sidebar ">
+           <header class="box-h ">Page Contents</header>
+           <div class="box-i">
+              <nav aria-label="page contents" class="navtoc">
+                  <ul>
+                     <li><a href="#aria">ARIA Techniques</a></li>
+                     <li><a href="#client-side-script">Client-Side Script Techniques</a></li>
+                     <li><a href="#css">CSS Techniques</a></li>
+                     <li><a href="#failures">Common Failures</a></li>
+                     <li><a href="#general">General Techniques</a></li>
+                     <li><a href="#html">HTML Techniques</a></li>
+                     <li><a href="#pdf">PDF Techniques</a></li>
+                     <li><a href="#server-side-script">Server-Side Script Techniques</a></li>
+                     <li><a href="#smil">SMIL Techniques</a></li>
+                     <li><a href="#text">Plain-Text Techniques</a></li>
+                     <li><a href="#changelog">Change Log</a></li>
+                  </ul>
+              </nav>
+           </div>
+         </aside>
 
+			<main id="main" class="main-content standalone-resource__main">
+				<h1 id="title" class="title p-name">Techniques for WCAG 2.2</h1>
+		<aside class="box">
+			<header class="box-h ">Summary</header>
+			<div class="box-i">
+				<p><em>Techniques</em> are examples of ways to meet Web Content Accessibility Guidelines (WCAG). They are not required to meet WCAG. For information, see <a href="about">About WCAG Techniques</a>.</p>
+			</div>
+		</aside>
+		
 		<div data-include="toc.html" data-include-replace="true"></div>
 
 		<section id="changelog">
 			<h2>Change Log</h2>
 			<p>A list of new, removed or significantly updated techniques:</p>
 			<ol>
-        <li><time datetime="2020-07-15">July 15th 2020</time>: Removed Flash techniques.</li>
-        <li><time datetime="2019-09-12">Sept 12th 2019</time>: Added <a href="./techniques/failures/F105">Failure of Success Criterion 2.5.1 due to providing functionality via a path-based gesture without simple pointer alternative</a></li>
-        <li><time datetime="2019-09-12">Sept 12th 2019</time>: Added <a href="./techniques/failures/F106">Failure due to inability to deactivate motion actuation</a></li>
-				<li><time datetime="2019-09-03">Sept 3rd 2019</time>: Added <a href="./techniques/failures/F104">Failure of Success Criterion 1.4.12 due to clipped or overlapped content when text spacing is adjusted</a></li>
-				<li><time datetime="2019-09-03">Sept 3rd 2019</time>: Added <a href="./techniques/failures/F103">Failure of Success Criterion 4.1.3 due to providing status messages that cannot be programmatically determined through role or properties</a></li>
-				<li><time datetime="2019-08-06">Aug 6th 2019</time>: Added <a href="./techniques/failures/F102">Failure of Success Criterion 1.4.10 due to content disappearing and not being available when content has reflowed</a></li>
-				<li><time datetime="2019-07-16">Jul 16th 2019</time>: Added <a href="./techniques/general/G216">Providing single point activation for a control slider</a></li>
-				<li><time datetime="2019-07-16">Jul 16th 2019</time>: Added <a href="./techniques/general/G215">Providing controls to achieve the same result as path based or multipoint gestures</a></li>
-				<li><time datetime="2019-07-16">Jul 16th 2019</time>: Added <a href="./techniques/failures/F100">Failure of Success Criterion 1.3.4 due to showing a message asking to reorient device</a></li>
-				<li><time datetime="2019-07-16">Jul 16th 2019</time>: Added <a href="./techniques/general/G214">Using a control to allow access to content in different orientations which is otherwise restricted</a></li>
-				<li><time datetime="2019-07-10">Jul 10th 2019</time>: Added <a href="./techniques/css/C40">Creating a two-color focus indicator to ensure sufficient contrast</a></li>
-				<li><time datetime="2019-07-10">Jul 10th 2019</time>: Added <a href="./techniques/failures/F99">Failure of Success Criterion 2.1.4 due to implementing character key shortcuts that cannot be turned off or remapped</a></li>
-				<li><time datetime="2019-07-10">Jul 10th 2019</time>: Added <a href="./client-side-script/SCR39">Making content on focus or hover hoverable, dismissible, and persistent</a></li>
-				<li><time datetime="2019-06-18">Jun 18th 2019</time>: Added <a href="./general/G212">Using native controls to ensure functionality is triggered on the up-event</a></li>
-				<li><time datetime="2019-06-11">Jun 11 2019</time>: Added <a href="./failures/F98">Failure of Success Criterion 2.5.6 due to interactions being limited to touch-only on touchscreen devices</a></li>
-				<li><time datetime="2019-06-18">Jun 18th 2019</time>: Added <a href="./general/G213">Provide conventional controls and an application setting for motion activated input</a></li>
-				<li><time datetime="2019-05-25">May 25th 2019</time>: Added <a href="./aria/ARIA24">Semantically identifying a font icon with role="img"</a></li>
-				<li><time datetime="2019-04-20">Apr 26th 2019</time>: Added <a href="./failures/F97">Failure due to locking the orientation to landscape or portrait view</a></li>
-				<li><time datetime="2019-02-26">Feb 26th 2019</time>: Removed <a href="./failures/F52">F52</a> from SC 3.2.1 (still attached to SC 3.2.5)</li>
-				<li><time datetime="2019-02-26">Feb 26th 2019</time>: Added <a href="./general/G209">Provide sufficient contrast at the boundaries between adjoining colors</a></li>
-				<li><time datetime="2019-01-10">Jan 10th 2019</time>: Added <a href="./css/C39">Using the CSS reduce-motion query to prevent motion</a></li>
-				<li><time datetime="2018-12-14">Dec 14th 2018</time>: Added <a href="./general/G207">Ensuring that a contrast ratio of 3:1 is provided for icons</a></li>
-				<li><time datetime="2018-11-13">Nov 30th 2018</time>: Added <a href="./css/C38">Using CSS width, max-width and flexbox to fit labels and inputs</a></li>
-				<li><time datetime="2018-11-30">Nov 30th 2018</time>: Added <a href="./failures/F95">F95 of 1.4.13 due to content shown on hover not being hoverable</a></li>
-				<li><time datetime="2018-11-13">Nov 13th 2018</time>: Added <a href="./css/C34">C34 Using media queries to un-fixing sticky headers / footers</a></li>
-				<li><time datetime="2018-11-13">Nov 13th 2018</time>: Added <a href="./css/C36">C36 Allowing for text spacing override</a></li>
-				<li><time datetime="2018-11-13">Nov 13th 2018</time>: Added <a href="./css/C37">C37 Using CSS max-width and height to fit images</a></li>
-				<li><time datetime="2018-11-30">Nov 30th 2018</time>: Added <a href="./general/G207">G207 Ensuring that drag-and-drop actions can be cancelled</a></li>
-				<li><time datetime="2018-11-30">Nov 30th 2018</time>: Added <a href="./failures/F95">F95 Failure of Success Criterion 1.4.13 due to content shown on hover not being hoverable</a></li>
-				<li><time datetime="2018-11-30">Nov 30th 2018</time>: Added <a href="./failures/F96">F96 Failure of Success Criterion 2.5.3 due to &quot;accessible name&quot; not containing the visible label text</a></li>
-				<li><time datetime="2018-11-30">Nov 30th 2018</time>: Added <a href="./css/C38">C38 Using CSS width, max-width and flexbox to fit labels and inputs</a></li>
-				<li><time datetime="2018-12-14">Dec 14th 2018</time>: Added <a href="./general/G207">G207 Ensuring that a contrast ratio of 3:1 is provided for icons</a></li>
+				<li><time datetime="2024-05-04">4 May 2024</time>: Removed F87 Failure of Success Criterion 1.3.1 due to inserting non-decorative content by using :before and :after pseudo-elements and the 'content' property in CSS</li>
+        <li><time datetime="2020-07-15">15 July 2020</time>: Removed Flash techniques.</li>
+        <li><time datetime="2019-09-12">12 Sept 2019</time>: Added <a href="failures/F105">Failure of Success Criterion 2.5.1 due to providing functionality via a path-based gesture without simple pointer alternative</a></li>
+        <li><time datetime="2019-09-12">12 Sept 2019</time>: Added <a href="failures/F106">Failure due to inability to deactivate motion actuation</a></li>
+				<li><time datetime="2019-09-03">3 Sept 2019</time>: Added <a href="failures/F104">Failure of Success Criterion 1.4.12 due to clipped or overlapped content when text spacing is adjusted</a></li>
+				<li><time datetime="2019-09-03">3 Sept 2019</time>: Added <a href="failures/F103">Failure of Success Criterion 4.1.3 due to providing status messages that cannot be programmatically determined through role or properties</a></li>
+				<li><time datetime="2019-08-06">6 Aug 2019</time>: Added <a href="failures/F102">Failure of Success Criterion 1.4.10 due to content disappearing and not being available when content has reflowed</a></li>
+				<li><time datetime="2019-07-16">16 Jul 2019</time>: Added <a href="general/G216">Providing single point activation for a control slider</a></li>
+				<li><time datetime="2019-07-16">16 Jul 2019</time>: Added <a href="general/G215">Providing controls to achieve the same result as path based or multipoint gestures</a></li>
+				<li><time datetime="2019-07-16">16 Jul 2019</time>: Added <a href="failures/F100">Failure of Success Criterion 1.3.4 due to showing a message asking to reorient device</a></li>
+				<li><time datetime="2019-07-16">16 Jul 2019</time>: Added <a href="general/G214">Using a control to allow access to content in different orientations which is otherwise restricted</a></li>
+				<li><time datetime="2019-07-10">10 Jul 2019</time>: Added <a href="css/C40">Creating a two-color focus indicator to ensure sufficient contrast</a></li>
+				<li><time datetime="2019-07-10">10 Jul 2019</time>: Added <a href="failures/F99">Failure of Success Criterion 2.1.4 due to implementing character key shortcuts that cannot be turned off or remapped</a></li>
+				<li><time datetime="2019-07-10">10 Jul 2019</time>: Added <a href="client-side-script/SCR39">Making content on focus or hover hoverable, dismissible, and persistent</a></li>
+				<li><time datetime="2019-06-18">18 Jun 2019</time>: Added <a href="general/G212">Using native controls to ensure functionality is triggered on the up-event</a></li>
+				<li><time datetime="2019-06-11">Jun 11 2019</time>: Added <a href="failures/F98">Failure of Success Criterion 2.5.6 due to interactions being limited to touch-only on touchscreen devices</a></li>
+				<li><time datetime="2019-06-18">18 Jun 2019</time>: Added <a href="general/G213">Provide conventional controls and an application setting for motion activated input</a></li>
+				<li><time datetime="2019-05-25">25 May 2019</time>: Added <a href="aria/ARIA24">Semantically identifying a font icon with role="img"</a></li>
+				<li><time datetime="2019-04-20">26 Apr 2019</time>: Added <a href="failures/F97">Failure due to locking the orientation to landscape or portrait view</a></li>
+				<li><time datetime="2019-02-26">26 Feb 2019</time>: Removed <a href="failures/F52">F52</a> from SC 3.2.1 (still attached to SC 3.2.5)</li>
+				<li><time datetime="2019-02-26">26 Feb 2019</time>: Added <a href="general/G209">Provide sufficient contrast at the boundaries between adjoining colors</a></li>
+				<li><time datetime="2019-01-10">10 Jan 2019</time>: Added <a href="css/C39">Using the CSS reduce-motion query to prevent motion</a></li>
+				<li><time datetime="2018-12-14">14 Dec 2018</time>: Added <a href="general/G207">Ensuring that a contrast ratio of 3:1 is provided for icons</a></li>
+				<li><time datetime="2018-11-13">30 Nov 2018</time>: Added <a href="css/C38">Using CSS width, max-width and flexbox to fit labels and inputs</a></li>
+				<li><time datetime="2018-11-30">30 Nov 2018</time>: Added <a href="failures/F95">F95 of 1.4.13 due to content shown on hover not being hoverable</a></li>
+				<li><time datetime="2018-11-13">13 Nov 2018</time>: Added <a href="css/C34">C34 Using media queries to un-fixing sticky headers / footers</a></li>
+				<li><time datetime="2018-11-13">13 Nov 2018</time>: Added <a href="css/C36">C36 Allowing for text spacing override</a></li>
+				<li><time datetime="2018-11-13">13 Nov 2018</time>: Added <a href="css/C37">C37 Using CSS max-width and height to fit images</a></li>
+				<li><time datetime="2018-11-30">30 Nov 2018</time>: Added <a href="general/G207">G207 Ensuring that drag-and-drop actions can be cancelled</a></li>
+				<li><time datetime="2018-11-30">30 Nov 2018</time>: Added <a href="failures/F95">F95 Failure of Success Criterion 1.4.13 due to content shown on hover not being hoverable</a></li>
+				<li><time datetime="2018-11-30">30 Nov 2018</time>: Added <a href="failures/F96">F96 Failure of Success Criterion 2.5.3 due to &quot;accessible name&quot; not containing the visible label text</a></li>
+				<li><time datetime="2018-11-30">30 Nov 2018</time>: Added <a href="css/C38">C38 Using CSS width, max-width and flexbox to fit labels and inputs</a></li>
+				<li><time datetime="2018-12-14">14 Dec 2018</time>: Added <a href="general/G207">G207 Ensuring that a contrast ratio of 3:1 is provided for icons</a></li>
 			</ol>
 			<p>For a more detailed view of recent changes to the informative documents see the <a href="https://github.com/w3c/wcag/commits/master">github updates</a>.</p>
 		</section>
-		<div data-include="../acknowledgements.html" data-include-replace="true">
-			<p>Acknowledgements</p>
+				<a class="button button-backtotop" href="#top"><span><svg focusable="false" aria-hidden="true" class="icon-arrow-up " viewBox="0 0 26 28">
+					<path d="M25.172 15.172c0 0.531-0.219 1.031-0.578 1.406l-1.172 1.172c-0.375 0.375-0.891 0.594-1.422 0.594s-1.047-0.219-1.406-0.594l-4.594-4.578v11c0 1.125-0.938 1.828-2 1.828h-2c-1.062 0-2-0.703-2-1.828v-11l-4.594 4.578c-0.359 0.375-0.875 0.594-1.406 0.594s-1.047-0.219-1.406-0.594l-1.172-1.172c-0.375-0.375-0.594-0.875-0.594-1.406s0.219-1.047 0.594-1.422l10.172-10.172c0.359-0.375 0.875-0.578 1.406-0.578s1.047 0.203 1.422 0.578l10.172 10.172c0.359 0.375 0.578 0.891 0.578 1.422z"></path></svg> Back to Top
+				</span></a>
+			</main>
 		</div>
+		<script>
+				var translationStrings = {}; /* fix WAI JS */
+			</script>
+		<script src="https://www.w3.org/WAI/assets/scripts/main.js"></script>
 	</body>
 </html>
diff --git a/techniques/pdf/PDF1.html b/techniques/pdf/PDF1.html
index eb816b6654..0171f98d41 100644
--- a/techniques/pdf/PDF1.html
+++ b/techniques/pdf/PDF1.html
@@ -1,214 +1,139 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Applying text alternatives to images with the Alt entry in PDF documents</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Applying text alternatives to images with the Alt entry in PDF documents</h1><section class="meta"><p class="id">ID: PDF1</p><p class="technology">Technology: pdf</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
-      <p>Tagged PDF documents with images</p>
-   </section><section id="description"><h2>Description</h2>
-      <p>The objective of this technique is to provide text alternatives for
-    				images via an /Alt entry in the property list for a Tag. This is normally
-    				accomplished using a tool for authoring PDF. </p>
-      <p>PDF documents may be enhanced by providing alternative descriptions
-    				for images, formulas, and other items that do not translate naturally
-    				into text. In fact, such text alternatives are required for accessibility:
-    				alternate descriptions are human-readable text that can be vocalized
-    				by text-to-speech technology for the benefit of users with vision disabilities. </p>
-      <p>When an image contains words that are important to understanding the
-    				content, the text alternative should include those words. This will
-    				allow the alternative to accurately represent the image. Note that
-    				it does not necessarily describe the visual characteristics of the
-    				image itself but must convey the same meaning as the image. </p>
-   </section><section id="examples"><h2>Examples</h2>
-      <section class="example">
-         <h3>Adding an /Alt entry to an image using Adobe Acrobat
-    				9 Pro's TouchUp Object Tool</h3>
-         
-            <p>This example is shown with Adobe Acrobat Pro. There are other software tools that perform similar functions. See the list of other software tools in <a href="#pdf_notes_acc-sup_files_applications"></a>.</p>
-            <ol>
-               <li>
-                  <p> Choose Tools &gt; Advanced Editing &gt; TouchUp Object Tool </p>
-                  <figure id="figure-touchup-object-tool">
-                     <img src="img/textalt1.gif" />
-                        
-                        <figcaption>The TouchUp Object Tool in the Advanced Editing menu.</figcaption>
-                      
-                  </figure>
-               </li>
-               <li>Access the context menu for the image and choose Properties. </li>
-               <li>On the TouchUp Properties dialog, select the Tag tab. </li>
-               <li>
-                  <p>On the Tag panel, type the text alternative in the Alternate Text
-    						text box. </p>
-                  <figure id="figure-tag-tab">
-                     <img src="img/textalt2.gif" />
-                        
-                        <figcaption>The Tag Tab in the TouchUp Properties dialog.</figcaption>
-                      
-                  </figure>
-               </li>
-            </ol>
-      	<p class="working-example">This example is shown in operation in the <a href="../../working-examples/pdf-alt-entry-to-an-image/alt-entry-to-an-image.pdf">working example of Adding an /Alt entry to an image</a>.</p>
-         
-      </section>
-      <section class="example">
-         <h3>Adding an /Alt entry to an image using Adobe Acrobat
-    					9 Pro's TouchUp Reading Order Tool</h3>
-         
-            <p>This example is shown with Adobe Acrobat Pro. There are other software tools that perform similar functions. See the list of other software tools in <a href="#pdf_notes_acc-sup_files_applications"></a>.</p>
-            <ol>
-               <li>
-                  <p> Choose Tools &gt; Advanced Editing &gt; TouchUp Reading Order
-    					Tool </p>
-                  <figure id="figure-turo-tool">
-                     <img src="img/textalt3.gif" />
-                        
-                        <figcaption>The TouchUp Reading Order Tool in the Advanced Editing menu.</figcaption>
-                      
-                  </figure>
-               </li>
-               <li>The TouchUp Reading Order dialog will be displayed. </li>
-               <li>Right-click on the image and choose Edit Alternate Text. </li>
-               <li>The Alternate Text dialog will be displayed. </li>
-               <li>
-                  <p>Type the text alternative in the Alternate Text text box. </p>
-                  <figure id="figure-alt-text-box">
-                     <img src="img/textalt4.gif" />
-                        
-                        <figcaption>The Alternate Text box.</figcaption>
-                      
-                  </figure>
-               </li>
-            </ol>
-         
-      </section>
-      <section class="example">
-         <h3>Adding an /Alt entry to an image in PDF documents generated
-    				using Microsoft Word</h3>
-         
-            <p>This example is shown with Microsoft Word. There are other software tools that perform similar functions. See the list of other software 
-tools in <a href="#pdf_notes_acc-sup_files_applications"></a>.</p>
-      	<section id="PDF1_word_2003">
-               <h4> Word 2000-2003 </h4>
-               <ol>
-                  <li> Right-click on the image and choose Format Picture </li>
-                  <li> Select the Web tab </li>
-                  <li> Type the alternative text into the text box provided and then
-    						click OK. </li>
-               </ol>
-               <figure id="figure-web-tab">
-                  <img src="img/word2003alt.gif" />
-                     
-                     <figcaption>The Web tab in the Format Picture dialog.</figcaption>
-                   
-               </figure>
-      	</section>
-      	<section id="PDF1_word_2007">
-               <h4> Word 2007 </h4>
-               <ol>
-                  <li> Right-click on the image and choose Size </li>
-                  <li> Select the Alt Text tab </li>
-                  <li> Type the alternative text into the text box provided and then
-    						click OK. </li>
-               </ol>
-               <figure id="figure-alt-text-tab">
-                  <img src="img/word2007alt.gif" />
-                     
-                     <figcaption>The Alt Text tab in the Size dialog.</figcaption>
-                   
-               </figure>
-      	</section>
-         
-      </section>
-      <section class="example">
-         <h3>Adding an /Alt entry to an image in PDF documents generated
-    				using OpenOffice.org Writer 2.2</h3>
-         
-            <p>This example is shown with Open Office.org Writer. There are other software tools that perform similar functions. See the list of other software 
-tools in <a href="#pdf_notes_acc-sup_files_applications"></a>.</p>
-            <ol>
-               <li> Access the context menu for the image and choose Picture... </li>
-               <li> Select the Options tab </li>
-               <li> Type the alternative text into Alternate (Text Only) text box
-    						and click OK. </li>
-            </ol>
-            <figure id="figure-options-tab">
-               <img src="img/ooalt.jpg" />
-                  
-                  <figcaption>The Options tab in the Picture... dialog.</figcaption>
-                
-            </figure>
-         
-      </section>
-      <section class="example">
-         <h3>Adding a text alternative to an image in a PDF document
-    				using an /Alt entry</h3>
-         
-            <p>The /Alt property used on an image of mountains with a moon and trees
-    						typically would be used like this (typically accomplished by an authoring
-    						tool): </p>
-            <pre xml:space="preserve">/Figure &lt;&lt;/Alt (Sketch of Mountains with moon rising over trees) &gt;&gt;</pre>
-            <p>The image might also be represented by a tag with a different name.
-    						A different name might be used because the tag name is written in
-    						a language other than English or because a specific tool uses a different
-    						name for some other reason. In this situation, it is also necessary
-    						that the RoleMap contained within the StructTreeRoot for the PDF
-    						document contain an entry which explicitly maps the name of the tag
-    						used for the image with the standard structure type used in PDF documents
-    						(in this case, Figure). If the RoleMap contains only an entry mapping
-    						Shape tags to Figure tags, the rolemap information would appear as
-    						follows: </p>
-            <pre xml:space="preserve">/RoleMap &lt;&lt; /Shape /Figure &gt;&gt;</pre>
-            <p>In this case, the usage of the /Alt entry as follows would also
-    					be correct: </p>
-            <pre xml:space="preserve">/Shape &lt;&lt;/Alt (Crater Lake in the summer, with the blue sky, clouds and crater walls perfectly reflected in the lake) &gt;&gt;
-    					</pre>
-            <p>Note that the /Alt entry in property lists can be combined with
-    						other entries. </p>
-         
-      </section>
-   </section><section id="tests"><h2>Tests</h2>
-      <section class="procedure"><h3>Procedure</h3>
-         <p>For all images which need equivalents:</p>
-        <ol>
-            <li>       
-              <p>Verify the images have /Alt entries on
-    					an enclosing tag by one of the following:</p>
-               <ul>
-                  <li> Read the PDF document with a screen reader, listening to hear
-	    						that the equivalent text is read when tabbing to the non-text
-	    						object (if it is tabbable) or hearing the alternative text read
-	    						when reading the content line-by-line. </li>
-                  <li> Using a PDF editor, check that a text alternative is displayed for each
-	    							image. </li>
-                  <li> Use a tool which is capable of showing the /Alt entry value,
-	    								such as aDesigner, to open the PDF document and view the GUI
-	    								summary to read the text alternatives for images. </li>
-                  <li> Use a tool that exposes the document through the accessibility
-	    						API and verify that images have required text equivalents. </li>
-               </ul>
-            </li>
-         </ol>
-      </section>
-      <section class="results"><h3>Expected Results</h3>
-         <ul>
-            <li> Check 1 is true.</li>
-         </ul>
-      </section>
-   </section><section id="related"><h2>Related Techniques</h2><ul>
-      <li><a href="../general/G94">G94</a></li>
-   </ul></section><section id="resources"><h2>Resources</h2>
-      
-         <ul>
-            <li> Section 14.9.4 (Replacement Text) in <a href="http://www.adobe.com/content/dam/Adobe/en/devnet/pdf/pdfs/PDF32000_2008.pdf">PDF
-    				1.7 (ISO 32000-1)</a> 
-               </li>
-            <li>
-                  <a href="http://webaim.org/techniques/acrobat/acrobat">Acrobat
-    					and Accessibility</a> 
-               </li>
-            <li>
-                  <a href="http://partners.adobe.com/public/developer/en/pdf/PDFReference16.pdf#page=892">PDF
-    					Reference 1.6, 10.8.2 Alternate Descriptions</a> 
-               </li>
-            <li>
-                  <a href="http://www.adobe.com/accessibility/products/acrobat.html">PDF and Accessibility</a>
-               </li>
-         </ul>
-      
-   </section></body></html>
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>Applying text alternatives to images with the Alt entry in PDF documents</title>
+		<link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+	</head>
+	<body>
+		<h1>Applying text alternatives to images with the Alt entry in <abbr title="Portable Document Format">PDF</abbr> documents</h1>
+		<section class="meta">
+			<p class="id">ID: PDF1</p>
+			<p class="technology">Technology: pdf</p>
+			<p class="type">Type: Technique</p>
+		</section>
+		<section id="applicability">
+			<h2>When to Use</h2>
+			<p>Tagged PDF documents with images</p>
+		</section>
+		<section id="description">
+			<h2>Description</h2>
+			<p>The objective of this technique is to provide text alternatives for
+		images via an <code>/Alt</code> entry in the property list for a Tag. This is normally
+		accomplished using a tool for authoring PDF.</p>
+		<p>PDF documents may be enhanced by providing alternative descriptions
+			for images, formulas, and other items that do not translate naturally
+			into text. In fact, such text alternatives are required for accessibility:
+			alternate descriptions are human-readable text that can be vocalized
+			by text-to-speech technology for the benefit of users with vision disabilities. </p>
+			<p>When an image contains words that are important to understanding the
+				content, the text alternative should include those words. This will
+				allow the alternative to accurately represent the image. Note that
+				it does not necessarily describe the visual characteristics of the
+				image itself but must convey the same meaning as the image.</p>
+			</section>
+			<section id="examples">
+				<h2>Examples</h2>
+				<section class="example">
+					<h3>Adding alt text to an image in Adobe Acrobat DC Pro</h3>
+					<p>This example is shown with Adobe Acrobat Pro. There are other software tools that perform similar functions.</p>
+					<ol>
+						<li>Open the Accessibility panel via the Tools &#8594; Accessibility options.</li>
+						<li>Select the image in the document and select the "Set Alternative Text" option in the Accessibility tools panel.</li>
+						<li>
+							<p>In the Set Alternative Text dialog that appears, type in your alternative text, then press the Save &amp; Close button.</p>
+							<div>
+								<img alt="Acrobat's Set Alternate Text dialog, containing some alt text, next to an image in a PDF." height="284" src="img/acrobat-set-alternate-text.png"/>
+								<img alt="Acrobat's Set Alternate Text dialog, containing some alt text, next to an image in a PDF." height="350" src="img/acrobat-set-alternate-text.png" />
+							</div>
+						</li>
+					</ol>
+					<p class="working-example">This example is shown in operation in the <a href="../../working-examples/pdf-alt-entry-to-an-image/alt-entry-to-an-image.pdf">working example of Adding an <code>/Alt</code> entry to an image</a>.</p>	
+				</section>
+				<section class="example">
+					<h3>Adding alt text to an image in Microsoft Word</h3>
+					<ol>
+						<li>Right-click on the image and choose View Alt Text</li>
+						<li>Type the alternative text into the text box provided.</li>
+					</ol>
+					<div>
+						<img alt="Word's Alt Text interface being used to add alt text to a photograph of a dog." height="438" src="img/word-set-alternate-text.png" width="770"/>
+						<img alt="Word's Alt Text interface being used to add alt text to a photograph of a dog." height="430" src="img/word-set-alternate-text.png" width="770" />
+					</div>
+				</section>
+				<section class="example">
+					<h3>Adding alt text to an image in OpenOffice with the Writer add-on</h3>
+					<p>This example is shown with Open Office Writer. There are other software tools that perform similar functions.</p>
+					<ol>
+						<li>Select "Insert" then "picture", select the image to be inserted</li>
+						<li>Right click on the  mouse</li>
+						<li>Select "Description"
+							<div>
+								<img src="img/oomenu.jpg" alt="the menu for editing images" />
+							</div>
+						</li>
+						<li>Enter a text title and a good text description
+							<div>
+								<img src="img/ooalt.jpg" alt="the menu for adding alt text to an image" />
+							</div>
+						</li>
+						<li>Click OK.</li>
+					</ol>
+				</section>
+				<section class="example">
+					<h3>Adding a text alternative to an image in a PDF document using an <code>/Alt</code> entry</h3>
+					<p>The <code>/Alt</code> property used on an image of mountains with a moon and trees typically would be used like this (typically accomplished by an authoring tool):</p>
+<pre xml:space="preserve"><code>/Figure &lt;&lt;/Alt (Sketch of Mountains with moon rising over trees)&gt;&gt;</code></pre>
+					<p>The image might also be represented by a tag with a different name. A different name might be used because the tag name is written in a language other than English or because a specific tool uses a different name for some other reason. In this situation, it is also necessary that the <code>RoleMap</code> contained within the <code>StructTreeRoot</code> for the PDF document contain an entry which explicitly maps the name of the tag used for the image with the standard structure type used in PDF documents (in this case, Figure). If the RoleMap contains only an entry mapping Shape tags to Figure tags, the <code>rolemap</code> information would appear as follows:</p>
+<pre xml:space="preserve"><code>/RoleMap &lt;&lt; /Shape /Figure &gt;&gt;</code></pre>
+					<p>In this case, the usage of the <code>/Alt</code> entry as follows would also be correct:</p>
+<pre xml:space="preserve"><code>/Shape &lt;&lt;/Alt (Crater Lake in the summer, with the blue sky, clouds and
+ crater walls perfectly reflected in the lake) &gt;&gt;</code></pre>
+					<p>Note that the <code>/Alt</code> entry in property lists can be combined with other entries.</p>
+				</section>
+			</section>
+			<section id="tests">
+				<h2>Tests</h2>
+				<section class="procedure">
+					<h3>Procedure</h3>
+					<p>For all images which need equivalents:</p>
+					<ol>
+						<li>
+							<p>Verify the images have <code>/Alt</code> entries on an enclosing tag by one of the following:</p>
+							<ul>
+								<li>Read the PDF document with a screen reader, listening to hear that the equivalent text is read when tabbing to the non-text object (if it is tabbable) or hearing the alternative text read when reading the content line-by-line.</li>
+								<li>Using a PDF editor, check that a text alternative is displayed for each image.</li>
+								<li>Use a tool which is capable of showing the <code>/Alt</code> entry value, such as aDesigner, to open the PDF document and view the <abbr title="Graphical User Interface">GUI</abbr> summary to read the text alternatives for images.</li>
+								<li>Use a tool that exposes the document through the accessibility <abbr title="Application Programming Interface">API</abbr> and verify that images have required text equivalents.</li>
+							</ul>
+						</li>
+					</ol>
+				</section>
+				<section class="results">
+					<h3>Expected Results</h3>
+					<ul>
+						<li>Check #1 is true.</li>
+					</ul>
+				</section>
+			</section>
+			<section id="related">
+				<h2>Related Techniques</h2>
+				<ul>
+					<li><a href="../general/G94">G94</a></li>
+				</ul>
+			</section>
+			<section id="resources">
+				<h2>Resources</h2>
+				<ul>
+					<li>Section 14.9.4 (Replacement Text) in <a href="https://opensource.adobe.com/dc-acrobat-sdk-docs/pdfstandards/PDF32000_2008.pdf">PDF 1.7 (ISO 32000-1) (PDF)</a>
+					</li>
+					<li>
+						<a href="https://webaim.org/techniques/acrobat/acrobat">Acrobat and Accessibility</a>
+					</li>
+					<li>
+						<a href="https://helpx.adobe.com/acrobat/using/create-verify-pdf-accessibility.html">Create and verify PDF accessibility (Acrobat Pro)</a>
+					</li>
+				</ul>
+			</section>
+		</body>
+		</html>
+																										
\ No newline at end of file
diff --git a/techniques/pdf/PDF10.html b/techniques/pdf/PDF10.html
index 0e8c8a5554..086af80c70 100644
--- a/techniques/pdf/PDF10.html
+++ b/techniques/pdf/PDF10.html
@@ -1,9 +1,24 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing labels for interactive form controls in PDF documents</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Providing labels for interactive form controls in PDF documents</h1><section class="meta"><p class="id">ID: PDF10</p><p class="technology">Technology: pdf</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
-      <ul>
-         <li> Tagged PDF documents with forms. </li>
-         <li> PDF forms created using Adobe LiveCycle Designer. </li>
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>Providing labels for interactive form controls in PDF documents</title>
+		<link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+	</head>
+	<body>
+		<h1>Providing labels for interactive form controls in <abbr title="Portable Document Format">PDF</abbr> documents</h1>
+		<section class="meta">
+			<p class="id">ID: PDF10</p>
+			<p class="technology">Technology: pdf</p>
+			<p class="type">Type: Technique</p>
+		</section>
+		<section id="applicability">
+			<h2>When to Use</h2>
+			<ul>
+				<li>Tagged PDF documents with forms.</li>
       </ul>
-   </section><section id="description"><h2>Description</h2>
+		</section>
+		<section id="description">
+			<h2>Description</h2>
       <p>The objective of this technique is to ensure that users of assistive
     				technology are able to perceive form control labels and understand
     				how form controls are used. </p>
@@ -27,233 +42,34 @@
     				text label if a programmatically associated label cannot be found.
     				The TU entry (which is the tooltip) of the
     				field dictionary is the programmatically
-    				associated label (see Example
-    				3 below and Table 220 in <a href="http://www.adobe.com/content/dam/Adobe/en/devnet/pdf/pdfs/PDF32000_2008.pdf">PDF
-    				1.7 (ISO 32000-1)</a>). Therefore, add a tooltip to each field to provide
+    				associated label. Therefore, add a tooltip to each field to provide
     				a label that assistive technology can interpret.</p>
-   	<section id="PDF10_placement-rules">
-         <h4>Placement rules</h4>
-         <p>The table below lists the placement rules governing where Adobe LiveCycle
-    					positions labels by default. Note that these rules assume left-to-right
-    					text directionality. If your form requires different positioning (e.g.,
-    					to accommodate PDF documents in languages that use right-to-left text
-    					directionality), see <em>Repositioning form labels</em> in Example
-    					2 below. In general, authors should review label positioning to make
-    					sure it meets the requirements of their particular form. </p>
-         
-   	<table id="PDF10_placement-rules_table">
-   		<tbody>
-   			<tr>
-   				<th scope="col"> Control Type </th>
-   				<th scope="col"> LiveCycle Placement Rules </th>
-   			</tr>
-   			<tr>
-   				<th scope="row">
-   					Text input (including date/time and password fields) 
-   				</th>
-   				<td> Default placement for the label is to the left of the control.
-    					If this is not possible, LiveCycle will attempt to place it
-   					immediately above the control. </td>
-   			</tr>
-   			<tr>
-   				<th scope="row">
-   					Checkbox 
-   				</th>
-   				<td> Default placement for the label is to the right of the check
-   					box. </td>
-   			</tr>
-   			<tr>
-   				<th scope="row">
-   					Radio button group 
-   				</th>
-   				<td> Default placement for the label for each individual radio
-    							button is to the right of the button.
-    							Create a visible caption for the radio button group by creating
-    								static text and placing it to the left of or above the group.
-   					(See <em>Labeling radio buttons</em> below.) </td>
-   			</tr>
-   			<tr>
-   				<th scope="row">
-   					Combo box 
-   				</th>
-   				<td> Default placement for the label is to the left of the drop-down
-    									list. If this is not possible, LiveCycle will attempt to place
-   					it immediately above the control.. </td>
-   			</tr>
-   			<tr>
-   				<th scope="row">
-   					List box 
-   				</th>
-   				<td>Default placement for the label is above the list box. </td>
-   			</tr>
-   			<tr>
-   				<th scope="row">
-   					Button 
-   				</th>
-   				<td> LiveCycle automatically places the label on the button;
-    										it does not have to be positioned manually. Ensure that the
-   					button's purpose is properly described in the label text. </td>
-   			</tr>
-   		</tbody>
-   	</table>
-   	</section>
-         
-      
-   </section><section id="examples"><h2>Examples</h2>
-      <section class="example">
-         <h3>Providing labels using the Forms tool in Adobe Acrobat
-    					9 Pro</h3>
-         
-            <p>This example is shown with Adobe Acrobat Pro. There are other software tools that perform similar functions. See the list of other software tools in <a href="#pdf_notes_acc-sup_files_applications"></a>.</p>
+					</section>
+					<section id="examples">
+						<h2>Examples</h2>
+						<section class="example">
+							<h3>Providing labels using the Forms tool in Adobe Acrobat Pro</h3>
+							<p>This example is shown with Adobe Acrobat Pro. There are other software tools that perform similar functions.</p>
             <p>As noted in the Description, text labels added in an authoring tool
     						and then converted to PDF might be visually associated with the fields
     						but are not programmatically associated, and you should provide a tooltip. </p>
             <ol>
-               <li> In the Forms menu, select Add or Edit Fields... </li>
-               <li> For the field you want to edit, access the context menu and select
-    						the Properties dialog. </li>
-               <li> In the General tab of the Properties dialog, type a description
-    							for the form field in the Tooltip field. </li>
-               <li> Repeat for all form fields. </li>
+               <li>Select the Prepare Form tool.</li>
+               <li>For the field you want to edit, access the context menu and select the Properties dialog.</li>
+               <li>In the General tab of the Properties dialog, type a description for the form field in the Tooltip field.</li>
+               <li>Repeat for all form fields.</li>
             </ol>
-            <p>The following image shows the Properties dialog with a description
-    						in the Tooltip field. </p>
-            <figure id="figure-props-dialog-tooltip">
-               <img src="img/form5.jpg" />
-               
-                  <figcaption>The Properties dialog for a form field. A short description, including the format required for the field, is added and will appear as a tooltip.</figcaption>
-                  
-            </figure>
-            <p class="working-example">This example is shown in operation in the <a href="../../working-examples/pdf-form-labels/form.pdf">working example of providing labels using the forms tool</a>.</p>
-                 
-      </section>
-      <section class="example">
-         <h3>Providing labels to form controls in Adobe LiveCycle Designer
-    				ES 8.2.1</h3>
-         
-            <p>This example is shown with Adobe LiveCycle Designer. There are other software tools that perform similar functions. See the list of other software tools in <a href="#pdf_notes_acc-sup_files_applications"></a>.</p>
-            <p>LiveCycle Designer provides several options for associating descriptive
-    					text and labels with form elements. </p>
-            <p>For sighted or low-vision users, it is important to properly position
-    						the label adjacent to the control. For screen reader users, you should
-    						also ensure that the label is programmatically associated with the
-    						form control and that sufficient information is provided so that screen
-    						reader users can readily complete and submit the form. </p>
-      	<p class="working-example">This example is shown in operation in the <a href="../../working-examples/pdf-form-labels/form-lc.pdf">working example of providing labels in LiveCycle Designer</a>.</p>
-            <section>
-               <h4>Specifying accessible label text using the accessibility palette</h4>
-               <p>In LiveCycle Designer, create or import a form. Then: </p>
-               <ol>
-                  <li> Enable the palette by selecting Window &gt; Accessibility or by
-    							pressing shift + F6. </li>
-                  <li> The palette appears in LiveCycle Designer's right-hand panel. </li>
-                  <li> Select an object in your form. The palette shows the object's
-    								accessibility properties. </li>
-               </ol>
-               <figure id="figure-LCD-accessibility-palette">
-                  <img src="img/access-palette-dropdown.jpg" />
-                  
-                     <figcaption>Image of Adobe LiveCycle Accessibility Palette showing the Precedence drop down list. Text is announced in the order shown in the list: custom text, tool tip, caption, and name.</figcaption>
-                     
-               </figure>
-               <p>The label that a screen reader uses does not necessarily have to be
-    							the same as the visual caption. In some cases, you may want to provide
-    							more information about a form element's purpose. </p>
-               <p>To specify what text should be announced by the screen reader for
-    							a particular object, you can use the Accessibility Palette's Screen
-    							Reader Precedence drop down list. Text is announced in the order shown
-    							in the list: custom text, tool tip, caption, and name. </p>
-               <p>Depending on the complexity and difficulty of your form, you must
-    							decide which option best suits the requirements for your form. </p>
-               <p>By default, a screen reader searches for an object's text in order
-    							shown in the image. Once descriptive text has been found for a control,
-    							the search stops. </p>
-               <p>The image below shows an example of a text field with a visual caption
-    							that might be unclear for screen reader users. One of the fields has
-    							a caption of "Date" but screen reader users may want to know
-    							the preferred date format (shown as screen text). So this text is provided
-    							in the tooltip. Because a tooltip has a higher precedence than the
-    							visual caption, the screen reader uses the tooltip. </p>
-               <figure id="figure-LCD-date-field">
-                  <img src="img/livecycledatefield.jpg" />
-                  
-                     <figcaption>Image of a date form field in LiveCycle Designer showing tooltip text for a date format.</figcaption>
-                     
-               </figure>
-            </section>
-            <section>
-               <h4>Labeling radio buttons</h4>
-               <p>When a screen reader user tabs into a radio button, the screen reader
-    							needs to announce two items: </p>
-               <ul>
-                  <li> A general description of the purpose of the <em>group</em> of
-    							buttons </li>
-                  <li> A meaningful description for the purpose of <em>each</em> radio
-    								button </li>
-               </ul>
-               <p>To make radio buttons accessible: </p>
-               <ol>
-                  <li> In the Hierarchy palette, select the radio button group. </li>
-                  <li> Select the Accessibility palette and in the Custom Screen Reader
-    							Text box, type the speak text for the group. For example, type   "Select
-    							a method of payment." </li>
-                  <li> In the Hierarchy palette, select the first radio button in the
-    								group. </li>
-                  <li> In the Object palette, select the Field tab. In the Item area,
-    									select the item and type a meaningful value for the selected radio
-    									button. For example, type "Cash." </li>
-                  <li> Repeat steps 3 and 4 for each radio button in the group. </li>
-               </ol>
-               <figure id="figure-csrt-radio">
-                  <img src="img/radiobuttongroup.jpg" />
-                  
-                     <figcaption>Image of Custom Screen Reader Text for radio buttons in LiveCycle Designer.</figcaption>
-                     
-               </figure>
-            </section>
-            <section>
-               <h4>Repositioning form labels</h4>
-               <p>The placement of a caption, or label, is important because users expect
-    							them to be found at a particular location adjacent to the control.
-    							For screen magnification users this is even more important, as they
-    							might not be able to view both the control and the label at the same
-    							time. </p>
-               <p>When you create an object, Adobe LiveCycle Designer automatically
-    							positions the label as specified by the control type (see the table
-    							in the Description above). For example, for a text field, the label
-    							is positioned to the left of the control. </p>
-               <p>If you need to change the position of the label text (for example,
-    							to accommodate right-to-left text directionality): </p>
-               <ol>
-                  <li> Select the object by moving the focus to it. </li>
-                  <li> In the Layout palette, under Caption at the bottom of the palette,
-    							select the position of your object from the Position drop-down list. </li>
-               </ol>
-               <figure id="figure-layout-caption-position">
-                  <img src="img/captionposition.jpg" />
-                  
-                     <figcaption>The Layout palette and the new Caption position.</figcaption>
-                     
-               </figure>
-               <p>The resulting repositioned label is shown below. The label for the
-    							Date text field has been moved from the left of the field to the line
-    							above the field. </p>
-               <figure id="figure-form-label-repositioned">
-                  <img src="img/formlabeltop.jpg" />
-                  
-                     <figcaption>A form label repositioned above the field; also shown are default label positions to the left of text fields.</figcaption>
-                     
-               </figure>
-            </section>
-                   
-      </section>
-      <section class="example">
-         <h3>Adding a tooltip to interactive form controls</h3>
-         
+            <div>
+							<img alt="The Text Field Properties dialog for a form field. A short description, including the format required for the field, is added and will appear as a tooltip." src="img/adding-label-to-form-field.png" width="770"/>
+						</div>
+            <p class="working-example">This example is shown in operation in the <a href="../../working-examples/pdf-form-labels/form.pdf">working example of providing labels using the forms tool (PDF)</a>.</p>
+					</section>
+					<section class="example">
+						<h3>Adding a tooltip to interactive form controls</h3>
             <p>The following code fragment illustrates the use of the TU entry to
     						provide a tooltip (or programmatically associated text label) for a
     						form field. This is typically accomplished by an authoring tool. </p>
-            <pre xml:space="preserve">&lt;&lt; /AP -dict-                                                   
+            <pre xml:space="preserve"><code>&lt;&lt; /AP -dict-                                                   
    /DA /Helv  0 Tf 0 g
    /DR -dict-
    /F 0x4
@@ -263,7 +79,7 @@ <h3>Adding a tooltip to interactive form controls</h3>
    /StructParent 0x1
    /Subtype Widget
    /T Date you are available   % Partial field name Date
-   /TU Date you are available: use MM/DD/YYYY format % TU tool tip value serves as short description
+   /TU Date you are available: use MM/DD/YYYY format % TU tool tip serves as description
    /Type Annot
    /V Pat Jones
 &gt;&gt;
@@ -291,54 +107,49 @@ <h3>Adding a tooltip to interactive form controls</h3>
   ( )Tj
   EMC
  ET
-&lt;End Stream&gt;
-</pre>
+&lt;End Stream&gt;</code></pre>
          
       </section>
-   </section><section id="tests"><h2>Tests</h2>
-      <section class="procedure"><h3>Procedure</h3>
+		</section>
+		<section id="tests">
+			<h2>Tests</h2>
+      <section class="procedure">
+				<h3>Procedure</h3>
          <ol>
-            <li> For each form control, verify visually that the label is positioned
-    					correctly in relation to the control. </li>
-            <li>
-               <p> For each form control, verify that the name is programmatically
-    						associated with the control by one of the following:</p>
-               <ul>
-                  <li> Open the PDF document with a tool that is capable of showing
-    							the name associated with the control and verify that the name
-    							is associated correctly with the control. </li>
-                  <li> Use a tool that exposes the document through the accessibility
-    								API, and verify that the name is associated correctly with the
-    								control. </li>
+            <li>For each form control, verify visually that the label is positioned correctly in relation to the control.</li>
+            <li>For each form control, verify that the name is programmatically associated with the control by one of the following:
+							<ul>
+								<li>Open the PDF document with a tool that is capable of showing the name associated with the control and verify that the name is associated correctly with the control.</li>
+								<li>Use a tool that exposes the document through the accessibility <abbr title="Application Programming Interface">API</abbr>, and verify that the name is associated correctly with the control.</li>
                </ul>
             </li>
          </ol>
       </section>
-      <section class="results"><h3>Expected Results</h3>
-         <ul>
-            <li>#1 and #2 are true. </li>
-         </ul>
-      </section>
-   </section><section id="related"><h2>Related Techniques</h2><ul>
-      <li><a href="../general/G131">G131</a></li>
-      <li><a href="../general/G162">G162</a></li>
-      <li><a href="../pdf/PDF23">PDF23</a></li>
-      <li><a href="../pdf/PDF5">PDF5</a></li>
-      <li><a href="../pdf/PDF22">PDF22</a></li>
-   </ul></section><section id="resources"><h2>Resources</h2>
-      
-         <ul>
-            <li> 
-                  <a href="http://www.adobe.com/content/dam/Adobe/en/devnet/pdf/pdfs/PDF32000_2008.pdf">PDF
-    					1.7 (ISO 32000-1)</a> 
-               </li>
-            <li> 
-                  <a href="http://partners.adobe.com/public/developer/xml/index_arch.html">Adobe
-    						XML Forms Architecture (XFA)</a> 
-               </li>
-            <li>
-                  <a href="http://www.adobe.com/accessibility/products/acrobat.html">PDF and Accessibility</a>
-               </li>
-         </ul>
-      
-   </section></body></html>
+      <section class="results">
+				<h3>Expected Results</h3>
+				<ul>
+					<li>#1 and #2 are true.</li>
+				</ul>
+			</section>
+		</section>
+		<section id="related">
+			<h2>Related Techniques</h2>
+			<ul>
+      	<li><a href="../general/G131">G131</a></li>
+      	<li><a href="../general/G162">G162</a></li>
+      	<li><a href="../pdf/PDF23">PDF23</a></li>
+      	<li><a href="../pdf/PDF5">PDF5</a></li>
+      	<li><a href="../pdf/PDF22">PDF22</a></li>
+			</ul>
+		</section>
+		<section id="resources">
+			<h2>Resources</h2>
+			<ul>
+				<li><a href="https://opensource.adobe.com/dc-acrobat-sdk-docs/pdfstandards/PDF32000_2008.pdf">PDF 1.7 (ISO 32000-1) (PDF)</a>
+				</li>				
+				<li>
+					<a href="https://helpx.adobe.com/acrobat/using/create-verify-pdf-accessibility.html">Create and verify PDF accessibility (Acrobat Pro)</a>
+				</li>
+			</ul>
+   </section>
+</body></html>
diff --git a/techniques/pdf/PDF11.html b/techniques/pdf/PDF11.html
index 43b7c97167..2c592a0d6f 100644
--- a/techniques/pdf/PDF11.html
+++ b/techniques/pdf/PDF11.html
@@ -1,134 +1,129 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing links and link text using the Link annotation and the /Link structure element in PDF documents</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Providing links and link text using the Link annotation and the /Link structure element in PDF documents</h1><section class="meta"><p class="id">ID: PDF11</p><p class="technology">Technology: pdf</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>Providing links and link text using the Link annotation and the /Link structure element in PDF documents</title>
+		<link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+	</head>
+	<body>
+		<h1>Providing links and link text using the Link annotation and the <code>/Link</code> structure element in <abbr title="Portable Document Format">PDF</abbr> documents</h1>
+		<section class="meta">
+			<p class="id">ID: PDF11</p>
+			<p class="technology">Technology: pdf</p>
+			<p class="type">Type: Technique</p>
+		</section>
+		<section id="applicability">
+			<h2>When to Use</h2>
       <p>PDF documents that contain links</p>
-   </section><section id="description"><h2>Description</h2>
+		</section>
+		<section id="description">
+			<h2>Description</h2>
       <p>The purpose of this technique is to show how link text in PDF documents
     				can be marked up to be recognizable by keyboard and assistive technology
     				users. That is, the link information is programmatically available
     				to user agents so that links are recognizable when presented in a different
     				format. This is typically accomplished by using a tool for authoring
-    				PDF. </p>
+    				PDF.</p>
       <p>Links in PDF documents are represented by a Link tag and objects in
     				its sub-tree, consisting of a link object reference (or Link annotation)
     				and one or more text objects. The text object or objects inside the
     				Link tag are used by assistive technologies to provide a name for the
-    				link. </p>
+    				link.</p>
       <p>The simplest way to provide links that comply with the WCAG success
     				criteria is to create them when authoring the document, before conversion
-    				to PDF. </p>
+    				to PDF.</p>
       <p>However, in some cases, it may not be possible to create the links
     				using the original authoring tool. In these cases, Adobe Acrobat Pro
     				can be used to create the link. But, because the tooltip created using
     				the Link dialog in Adobe Acrobat Pro is not accessible to screen readers,
     				be sure that the link text or the link context makes the purpose clear. </p>
       <p>In all cases, link purpose should be made clear as described in the
-    				general techniques: </p>
+    				general techniques:</p>
       <ul>
-         <li> 
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G53">G53:
+				<li>
+					<a href="../general/G53">G53:
     				Identifying the purpose of a link using link text combined with
     				the text of the enclosing sentence</a> 
-            </li>
-         <li> 
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G91">G91:
-    				Providing link text that describes the purpose of a link</a> 
-            </li>
+					</li>
+         <li>
+					<a href="../general/G91">G91:
+    				Providing link text that describes the purpose of a link</a>
+					</li>
       </ul>
-   </section><section id="examples"><h2>Examples</h2>
-      <section class="example">
-         <h3>Creating a hyperlink in Microsoft Word 2007 before conversion
-    					to PDF</h3>
-         
-            <p>This example is shown with Microsoft Word. There are other software tools that perform similar functions. See the list of other software tools in <a href="#pdf_notes_acc-sup_files_applications"></a>.</p>
-            <p>To create a hyperlink in Microsoft Word, first locate the item (e.g.,
-    						web page) to link to. Then: </p>
-            <ol>
-               <li>
-                  <p> Either</p>
-                  <ul>
-                     <li>Select Insert on the ribbon and select Hyperlink in the Links
-    							tools </li>
-                     <li>Or, use the CTRL+K keyboard shortcut </li>
-                  </ul>
-               </li>
-               <li> On the Insert Hyperlink dialog, add the link destination and link
-    						text. </li>
-               <li> Save the file as tagged PDF. (See the <a href="#pdf_notes"></a>.) </li>
-            </ol>
-         
-      </section>
-      <section class="example">
-         <h3>Creating a hyperlink in OpenOffice.org Writer 2.2 before
-    				conversion to PDF</h3>
-         
-            <p>This example is shown with OpenOffice.org Writer. There are other software tools that perform similar functions. See the list of other software tools in <a href="#pdf_notes_acc-sup_files_applications"></a>.</p>
-            <ol>
-               <li> On the Insert menu, select Hyperlink. </li>
-               <li> In the Hyperlink dialog, insert the target URI in the Target field
-    						under Hyperlink Type. </li>
-               <li> Insert the link text in the Text field under Further Settings.
-    							(You can also select the link text from the document text before
-    							bringing up the dialog. The Text field will be filled in with the
-    							selected text.) </li>
-               <li> Save the file as tagged PDF. (See the <a href="#pdf_notes"></a>.) </li>
-            </ol>
-         
+   </section>
+	 <section id="examples">
+		<h2>Examples</h2>
+		<section class="example">
+			<h3>Creating a hyperlink in Microsoft Word before conversion to PDF</h3>
+			<p>This example is shown with Microsoft Word. There are other software tools that perform similar functions.</p>
+			<p>To create a hyperlink in Microsoft Word:</p>
+			<ol>
+				<li>In the document, highlight the text that you want to use for the link;</li>
+				<li>Open the Insert Hyperlink dialog by either:
+					<ul>
+						<li>selecting the Insert menu option, followed by the Hyperlink option; or</li>
+						<li>using the CTRL+K keyboard shortcut.</li>
+					</ul>
+				</li>
+				<li>On the Insert Hyperlink dialog, enter the link destination.</li>
+			</ol>   
+    </section>
+		<section class="example">
+			<h3>Creating a hyperlink in OpenOffice Writer before conversion to PDF</h3>
+			<p>This example is shown with OpenOffice Writer. There are other software tools that perform similar functions.</p>
+      <ol>
+				<li>Select the text that will have the hyperlink added.</li>
+        <li>On the Insert menu, select Hyperlink.
+			    <div>
+						<img alt="the menu showing the location of the hyperlink" src="img/ooinsert.jpg"/>
+			    </div>
+				</li>
+        <li>In the Hyperlink dialog, insert the target <abbr title="Uniform Resource Identifier">URI</abbr> in the Target field under Hyperlink Type.</li>
+				<li>The text that will have the hyperlink added to can also be changed or added to in the hyperlink dialog.
+					<div>
+						<img alt="the hyperlink dialog" src="img/oohyperlink.jpg"/>
+			  	</div>
+				</li>
+        <li>To save the file as tagged PDF, select Save As from the File menu and select the Tagged PDF checkbox.</li>
+      </ol>
+    </section>
+    <section class="example">
+			<h3>Creating a hyperlink using the Create Link dialog in Adobe Acrobat Pro</h3>
+			<p>This example is shown with Adobe Acrobat Pro. There are other software tools that perform similar functions.</p>
+				<ol>
+					<li>Select the text that will become the link text.</li>
+					<li>Access the context menu and select Create Link.
+						<div>
+							<img alt="A PDF with text selected to create a hyperlink. The context menu shows Create Link selected." src="img/link-create-1.png" width="652"/>
+						</div>
+					</li>
+					<li>Follow the instructions in the Create Link dialog to specify the link appearance.</li>
+					<li>Then select Next and specify the <abbr title="Uniform Resource Locator">URL</abbr>. The following image shows the resulting hyperlink and tooltip.
+						<div>
+							<img alt="A PDF with a hyperlink created using the Create Link dialog, including the resulting tooltip on mouseover." src="img/link-create-2.png" width="640"/>
+            </div>
+					</li>
+				</ol>
+        <p class="working-example">This example is shown in operation in the <a href="../../working-examples/pdf-links/links.pdf">working example of creating a hyperlink in a PDF</a>.</p>
       </section>
       <section class="example">
-         <h3>Creating a hyperlink using the Create Link dialog in Adobe
-    				Acrobat 9 Pro</h3>
-         
-            <p>This example is shown with Adobe Acrobat Pro. There are other software tools that perform similar functions. See the list of other software tools in <a href="#pdf_notes_acc-sup_files_applications"></a>.</p>
-            <ol>
-               <li> Select the text that will become the link text. </li>
-               <li> Access the context menu and select Create Link. </li>
-            </ol>
-            <figure id="figure-pdf-text-hyperlink">
-               <img src="img/capelink1.jpg" />
-                  
-                  <figcaption>Image of a PDF document with text selected to create a hyperlink. The context menu shows Create Link selected.</figcaption>
-                
-            </figure>
-            <p>3. Follow the instructions in the Create Link dialog to specify the
-    						link appearance, as shown below. </p>
-            <figure id="figure-acrobat-create-link">
-               <img src="img/capelink2.jpg" />
-                  
-                  <figcaption>Image of a PDF document with the Create Link dialog open and link appearance options selected.</figcaption>
-                
-            </figure>
-            <p>Then select Next and specify the URI. The image below shows the resulting
-    						hyperlink and tooltip. </p>
-            <figure id="figure-hyperlink-create-link-dialog">
-               <img src="img/capelink3.jpg" />
-                  
-                  <figcaption>Image of a PDF document with a hyperlink created using the Create Link dialog, including the resulting tooltip on mouseover.</figcaption>
-               
-            </figure>
-            <p class="working-example">This example is shown in operation in the <a href="../../working-examples/pdf-links/links.pdf">working example of creating a hyperlink in PDF</a>.</p>
-         
-      </section>
-      <section class="example">
-         <h3>Marking up link text using a /Link structure element</h3>
-         
-            <p>Link annotations in PDF documents are associated with a geometric
+				<h3>Marking up link text using a <code>/Link</code> structure element</h3>
+				<p>Link annotations in PDF documents are associated with a geometric
     						region of a page rather than a particular object in a content stream.
     						For this reason, link annotations alone are not useful for users with
     						visual impairments, or to applications that must determine which content
-    						can be activated to invoke a hypertext link. </p>
-            <p>Tagged PDF /Link elements use PDF's logical structure to establish
+    						can be activated to invoke a hypertext link.</p>
+        <p>Tagged PDF <code>/Link</code> elements use PDF's logical structure to establish
     						the association between content items and link annotations, providing
-    						functionality comparable to HTML hypertext links. </p>
-            <p>In HTML, the following example produces text containing a hypertext
-    						link: </p>
-            <pre xml:space="preserve">Here is some text &lt;a href="https://www.w3.org/WAI/"&gt; with a link &lt;/a&gt; inside.
-</pre>
+    						functionality comparable to <abbr title="HyperText Markup Language">HTML</abbr> hypertext links.</p>
+        <p>In HTML, the following example produces text containing a hypertext link: </p>
+            <pre xml:space="preserve"><code class="language-html">&lt;p&gt;Here is some text &lt;a href="https://www.w3.org/WAI/"&gt;with a link&lt;/a&gt; inside.&lt;/p&gt;</code></pre>
             <p>In PDF the page must be painted first and then a link annotation
     						placed over the area where the object action will occur. </p>
             <p>The following code fragment shows PDF equivalent to the HTML above;
     						it uses link text displayed in blue and underlined. A second code fragment
     						follows, indicating the associated logical structure hierarchy. This
     						is typically accomplished by an authoring tool. </p>
-            <pre xml:space="preserve"> /P &lt;&lt;/MCID 0&gt;&gt;                                                %Marked Content Sequence 0 (paragraph)
+            <pre xml:space="preserve"><code>/P &lt;&lt;/MCID 0&gt;&gt;                                                %Marked Content Sequence 0 (paragraph)
   BDC                                                          %Begin marked content sequence
    BT                                                          %Begin text object
     /F1 11.04 Tf                                               %set text font and size
@@ -169,11 +164,11 @@ <h3>Marking up link text using a /Link structure element</h3>
     [( )] TJ                                                   %empty text string showing white space
    ET                                                          %end text object
   EMC                                                          %end marked content sequence 
-  </pre>
+  </code></pre>
             <p> The following code fragment is an excerpt from the logical structure
     						that establishes the association between the content items and the
     						link annotation: </p>
-            <pre xml:space="preserve"> 11 0 obj                                              %Object ID 11, generation   0, obj keyword
+            <pre xml:space="preserve"><code> 11 0 obj                                              %Object ID 11, generation   0, obj keyword
   &lt;&lt;/K[1                                               %immediate child of the structure tree root
    &lt;&lt;
     /Obj 26 0 R                                        %reference to Object 26
@@ -204,48 +199,51 @@ <h3>Marking up link text using a /Link structure element</h3>
   &lt;&lt;/S/URI                                             %Object type is URI action
     /URI(https://www.w3.org/WAI)                        %The Uniform resource identifier to resolve
   &gt;&gt;   
- endobj
-</pre>
+ endobj</code></pre>
          
       </section>
    </section><section id="tests"><h2>Tests</h2>
       <section class="procedure"><h3>Procedure</h3>
-         <p>For each hyperlink, verify that the link is correctly tagged and the
-    					link text is properly exposed: </p>
+         <p>For each hyperlink, verify that the link is correctly tagged and the link text is properly exposed:</p>
          <ol>
-            <li> Read the PDF document with a screen reader, listening to hear
+					<li>Read the PDF document with a screen reader, listening to hear
     					that the link is read correctly and that it describes the purpose
-    					of the link (i.e., its destination). </li>
-            <li> Visually scan the tag tree to verify that the link is tagged correctly
+    					of the link (i.e., its destination).</li>
+					<li>Visually scan the tag tree to verify that the link is tagged correctly
     						and the link text is exposed (for screen magnifier users and sighted
-    						users with cognitive disabilities). </li>
-            <li> Use a tool that is capable of showing the /Link entry value to
-    							open the PDF document and view the hyperlink and link text. </li>
-            <li> Use a tool that exposes the document through the accessibility
-    								API and verify that the link has the correct link text. </li>
-            <li> Tab to each link and check that it can be followed to its target
-    									by pressing Enter. </li>
+    						users with cognitive disabilities).</li>
+					<li>Use a tool that is capable of showing the /Link entry value to
+    							open the PDF document and view the hyperlink and link text.</li>
+					<li> Use a tool that exposes the document through the accessibility
+						<abbr title="Application Programming Interface">API</abbr> and verify that the link has the correct link text.</li>
+          <li>Tab to each link and check that it can be followed to its target by pressing Enter.</li>
          </ol>
       </section>
-      <section class="results"><h3>Expected Results</h3>
-         <ul>
-            <li>#1 or #2 or #3 or #4 is true.</li>
-            <li>#5 is true.</li>
-         </ul>
+      <section class="results">
+				<h3>Expected Results</h3>
+				<ul>
+					<li>#1 or #2 or #3 or #4 is true.</li>
+					<li>#5 is true.</li>
+				</ul>
       </section>
-   </section><section id="related"><h2>Related Techniques</h2><ul>
+   </section>
+	 <section id="related">
+		<h2>Related Techniques</h2>
+		<ul>
       <li><a href="../general/G53">G53</a></li>
       <li><a href="../general/G91">G91</a></li>
       <li><a href="../pdf/PDF13">PDF13</a></li>
-   </ul></section><section id="resources"><h2>Resources</h2>
-      
-         <ul>
-            <li> Section 14.8.4.4.2 (Link Elements) in <a href="http://www.adobe.com/content/dam/Adobe/en/devnet/pdf/pdfs/PDF32000_2008.pdf">PDF
-    					1.7 (ISO 32000-1)</a> 
-               </li>
-            <li>
-                  <a href="http://www.adobe.com/accessibility/products/acrobat.html">PDF and Accessibility</a>
-               </li>
-         </ul>
-      
-   </section></body></html>
+		</ul>
+	</section>
+	<section id="resources">
+		<h2>Resources</h2>
+		<ul>
+			<li>Section 14.8.4.4.2 (Linked Elements) in <a href="https://opensource.adobe.com/dc-acrobat-sdk-docs/pdfstandards/PDF32000_2008.pdf">PDF 1.7 (ISO 32000-1) (PDF)</a>
+			</li>			
+			<li>
+				<a href="https://helpx.adobe.com/acrobat/using/create-verify-pdf-accessibility.html">Create and verify PDF accessibility (Acrobat Pro)</a>
+			</li>
+		</ul>  
+   </section>
+</body>
+</html>
diff --git a/techniques/pdf/PDF12.html b/techniques/pdf/PDF12.html
index a185e160e2..ff3df739be 100644
--- a/techniques/pdf/PDF12.html
+++ b/techniques/pdf/PDF12.html
@@ -1,21 +1,32 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing name, role, value information for form fields in PDF documents</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Providing name, role, value information for form fields in PDF documents</h1><section class="meta"><p class="id">ID: PDF12</p><p class="technology">Technology: pdf</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
-      <p>Tagged PDF documents with interactive form fields. </p>
-   </section><section id="description"><h2>Description</h2>
-      <p>The objective of this technique is to ensure that assistive technologies
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>Providing name, role, value information for form fields in PDF documents</title>
+		<link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+	</head>
+	<body>
+		<h1>Providing name, role, value information for form fields in <abbr title="Portable Document Format">PDF</abbr> documents</h1>
+		<section class="meta">
+			<p class="id">ID: PDF12</p>
+			<p class="technology">Technology: pdf</p>
+			<p class="type">Type: Technique</p>
+		</section>
+		<section id="applicability">
+			<h2>When to Use</h2>
+      <p>Tagged PDF documents with interactive form fields.</p>
+   </section>
+	 <section id="description">
+		<h2>Description</h2>
+		<p>The objective of this technique is to ensure that assistive technologies
     				can gather information about and interact with form controls in PDF
-    				content. </p>
+    				content.</p>
       <p>The types of PDF form controls are: text input field, check box, radio
-    				button, combo box, list box, and button. </p>
+    				button, combo box, list box, and button.</p>
       <p>Providing name, role, state, and value information for all form components
     				enables compatibility with assistive technology, such as screen readers,
     				screen magnifiers, and speech recognition software used by people with
-    				disabilities. </p>
-      <p>The PDF specification defines how name, role, and value are set for
-    				form controls in Section 12.7.4 (Field Types) of <a href="http://www.adobe.com/content/dam/Adobe/en/devnet/pdf/pdfs/PDF32000_2008.pdf">PDF
-    					1.7 (ISO 32000-1)</a>, as shown in the following table. The Comments column explains how Adobe Acrobat Pro displays the corresponding information. </p>
-      
-         
-   	<table id="PDF12_spec">
+    				disabilities.</p>  
+   	<table>
    		<tbody>
    			<tr>
    				<th scope="col">Interactive Form Dictionary Entries</th>
@@ -60,13 +71,12 @@
    		</tbody>
    	</table>
    	
-      
-      <p>The following table describes how the role, name, value, and state
+    <p>The following table describes how the role, name, value, and state
     				are defined for PDF form controls created using Adobe Acrobat Pro.
     				Adobe LiveCycle Designer provides the same controls as well as several
     				additional ones: see Example 2 below. </p>
       
-   	<table id="PDF12_acrobat">
+   	<table>
    		<tbody>
    			<tr>
    				<th>PDF form element </th>
@@ -141,147 +151,81 @@
    			</tr>
    		</tbody>
    	</table>
-   	
       
-   </section><section id="examples"><h2>Examples</h2>
-      <section class="example">
-         <h3>Specifying name, role, value and/or state for a form field
-    					using Adobe Acrobat 9 Pro</h3>
-         
-            <p>This example is shown with Adobe Acrobat Pro. There are other software tools that perform similar functions. See the list of other software tools in <a href="#pdf_notes_acc-sup_files_applications"></a>.</p>
-            <p>This example uses a check box for illustration; the procedure is the
-    						same for other form controls. In Form Editing mode: </p>
-            <ol>
-               <li> Access the context menu for the form field you are creating or
-    						modifying. </li>
-               <li> Select the Properties... dialog for the form field. </li>
-               <li> Specify the name by adding a value to the tool tip field. This
-    							will used by the accessibility API as the Name for the control and
-    							should usually be set to match the text used as a visual label for
-    							the control. </li>
-               <li> Select the Options tab. </li>
-               <li> Specify the default value and the default state, if appropriate. </li>
-            </ol>
-            <p>The image below shows the Check Box Properties dialog, open in the
-    						General tab. (The Name field in the dialog is not needed for accessibility.) </p>
-            <figure id="figure-general-tab">
-               <img src="img/nrv1.jpg" />
-               
-                  <figcaption>General tab on the Check Box Properties dialog, showing name and tool tip fields for a check box</figcaption>
-                  
-            </figure>
-            <p>The image below shows the Check Box Properties dialog, open in the
-    						Options tab. </p>
-            <figure id="figure-check-box-props">
-               <img src="img/nrv2.jpg" />
-               
-                  <figcaption>Options tab on the Check Box Properties dialog, showing value and state fields for a check box.</figcaption>
-                  
-            </figure>
-            <p class="working-example">This example is shown in operation in the <a href="../../working-examples/pdf-form-labels/form.pdf">working example of specifying name, role, value using Acrobat Pro</a>.</p>
-                
-      </section>
-      <section class="example">
-         <h3>Specifying name, value, and state for a form field using
-    				Adobe LiveCycle Designer ES 8.2.1</h3>
-         
-            <p>This example is shown with Adobe LiveCycle Designer. There are other software tools that perform similar functions. See the list of other software tools in <a href="#pdf_notes_acc-sup_files_applications"></a>.</p>
-            <p>In Adobe LiveCycle Designer, you use the Object Library to create
-    						form objects and the Object Palette to specify name, role, state or
-    						value for the object. </p>
-            <p>The following image shows the Object Palette. </p>
-            <figure id="figure-object-palette">
-               <img src="img/lc-objlib.jpg" />
-               
-                  <figcaption>LiveCycle Designer Object Library showing the form objects available for form creation.</figcaption>
-                  
-            </figure>
-            <p>The following three images show the tabs in the Object palette. In
-    						the first the Field tab is open for specifying the type (or role) of
-    						the field. </p>
-            <figure id="figure-LCD-object-palette">
-               <img src="img/lc-objpal-t.jpg" />
-               
-                  <figcaption>LiveCycle Designer Object palette, Field tab.</figcaption>
-                  
-            </figure>
-            <p>The next image shows the Value tab, with options that can be applied
-    						to the field. </p>
-            <figure id="figure-LCD-value-tab">
-               <img src="img/lc-objpal-v.jpg" />
-               
-                  <figcaption>LiveCycle Designer Object palette, Value tab options.</figcaption>
-                  
-            </figure>
-            <p>The third images shows the Binding tab, specifying the name of the
-    						field. </p>
-            <figure id="figure-binding-tab">
-               <img src="img/lc-objpal-b.jpg" />
-               
-                  <figcaption>LiveCycle Designer Object palette, Binding tab.</figcaption>
-                  
-            </figure>
-      	<p class="working-example">This example is shown in operation in the <a href="../../working-examples/pdf-form-labels/form-lc.pdf">working example of specifying name, role, value using LiveCycle Designer</a>.</p>
-                
-      </section>
-      <section class="example">
-         <h3>Adding a checkbox in a PDF document using the /Btn field
-    				type</h3>
-         
-            <p>The following code fragment illustrates code that is typical for a
-    						simple check box field such as shown in Examples 1 and 2. This is typically
-    						accomplished by an authoring tool. </p>
-            <pre xml:space="preserve">1 0 obj
+   </section>
+	 <section id="examples">
+		<h2>Examples</h2>
+    <section class="example">
+			<h3>Specifying name, role, value and/or state for a form field using Adobe Acrobat Pro</h3>
+			
+			<p>This example is shown with Adobe Acrobat Pro. There are other software tools that perform similar functions.</p>
+			<p>This example uses a check box for illustration; the procedure is the same for other form controls.</p>
+			<ol>
+				<li>Open the Prepare Form tool.</li>
+				<li>Select the form field you are creating or modifying and access the context menu for it.</li>
+				<li>Select the Properties... option.</li>
+				<li>Specify the name by adding a value to the Tooltip field. This
+							will used by the accessibility <abbr title="Application Programming Interface">API</abbr> as the Name for the control. To conform to the Label In Name Criterion, the Tooltip value must contain the text that presented visually.</li>
+				<li>If you need to specify the default value and state, select the Options tab for these options.</li>
+			</ol>
+			<p>The image below shows the Check Box Properties dialog, open in the General tab. (The Name field in the dialog is not needed for accessibility.)</p>
+			<div>
+				<img alt="General tab on the Check Box Properties dialog, showing name and tool tip fields for a check box" src="img/name-role-value.png" width="577"/>
+			</div>
+			<p class="working-example">This example is shown in operation in the <a href="../../working-examples/pdf-name-role-value-form-fields/form.pdf">working example of specifying name, role, value using Acrobat Pro</a>.</p>
+    </section>
+    <section class="example">
+      <h3>Adding a checkbox in a PDF document using the <code>/Btn</code> field type</h3>   
+      <p>The following code fragment illustrates code that is typical for a simple check box field such as shown in Examples 1 and 2. This is typically accomplished by an authoring tool.</p>
+            <pre xml:space="preserve"><code>1 0 obj
   &lt;&lt; /FT /Btn     % Role
      /TU Retiree  % Name
      /V /Yes      % Value
      /AS /Yes
      /AP &lt;&lt; /N &lt;&lt; /Yes 2 0 R /Off 3 0 R&gt;&gt;
   &gt;&gt;
-endobj
-</pre>
-         
+endobj</code></pre>   
       </section>
-   </section><section id="tests"><h2>Tests</h2>
-      <section class="procedure"><h3>Procedure</h3>
-         <ol>
-            <li>
-               <p> For the form control, verify that name, role, and value/state
-    					are specified by one of the following:</p>
-               <ul>
-                  <li> Use a screen reader to navigate to the form control and check
-    						that it can be activated or that its value can be changed. Verify
-    						that the name (tooltip) and role are announced. </li>
-                  <li> Use a tool capable of showing the form field information to open the PDF document and verify that the form control has the correct name, role, value, and state (if appropriate) information.</li>
-                  <li> Use a tool that exposes the document through the accessibility
-    								API, and verify that the form control has the correct name, role,
-    								value, and state (if appropriate) information. </li>
-               </ul>
-            </li>
-         </ol>
-      </section>
-      <section class="results"><h3>Expected Results</h3>
-         <ul>
-            <li>#1 is true. </li>
-         </ul>
-      </section>
-   </section><section id="related"><h2>Related Techniques</h2><ul>
+   </section>
+	 <section id="tests">
+		<h2>Tests</h2>
+		<section class="procedure">
+			<h3>Procedure</h3>
+			<ol>
+				<li>
+					<p>For the form control, verify that name, role, and value/state are specified by one of the following:</p>
+					<ul>
+					<li>Use a screen reader to navigate to the form control and check that it can be activated or that its value can be changed. Verify that the name (tooltip) and role are announced.</li>
+					<li>Use a tool capable of showing the form field information to open the PDF document and verify that the form control has the correct name, role, value, and state (if appropriate) information.</li>
+					<li>Use a tool that exposes the document through the accessibility <abbr title="Application Programming Interface">API</abbr>, and verify that the form control has the correct name, role, value, and state (if appropriate) information.</li>
+					</ul>
+        </li>
+      </ol>
+		</section>
+		<section class="results">
+			<h3>Expected Results</h3>
+			<ul>
+				<li>#1 is true.</li>
+			</ul>
+		</section>
+	</section>
+	<section id="related">
+		<h2>Related Techniques</h2>
+		<ul>
       <li><a href="../pdf/PDF23">PDF23</a></li>
       <li><a href="../pdf/PDF5">PDF5</a></li>
       <li><a href="../pdf/PDF22">PDF22</a></li>
-   </ul></section><section id="resources"><h2>Resources</h2>
-      
-         <ul>
-            <li> Section 12.7.4 (Field Types) of <a href="http://www.adobe.com/content/dam/Adobe/en/devnet/pdf/pdfs/PDF32000_2008.pdf">PDF
-    					1.7 (ISO 32000-1)</a> 
-               </li>
-            <li> 
-                  <a href="http://partners.adobe.com/public/developer/xml/index_arch.html">Adobe
-    						XML Forms Architecture (XFA)</a> 
-               </li>
-            <li>
-                  <a href="http://www.adobe.com/accessibility/products/acrobat.html">PDF and Accessibility</a>
-               </li>
-         </ul>
-      
-   </section></body></html>
+   </ul>
+	</section>
+	<section id="resources">
+		<h2>Resources</h2>
+		<ul>
+			<li>Section 12.7.4 (Field Types) in <a href="https://opensource.adobe.com/dc-acrobat-sdk-docs/pdfstandards/PDF32000_2008.pdf">PDF 1.7 (ISO 32000-1) (PDF)</a>
+			</li>
+			<li>
+				<a href="https://helpx.adobe.com/acrobat/using/create-verify-pdf-accessibility.html">Create and verify PDF accessibility (Acrobat Pro)</a>
+			</li>
+		</ul>
+   </section>
+	</body>
+	</html>
diff --git a/techniques/pdf/PDF13.html b/techniques/pdf/PDF13.html
index 742afb930d..7a28ed3924 100644
--- a/techniques/pdf/PDF13.html
+++ b/techniques/pdf/PDF13.html
@@ -1,88 +1,78 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing replacement text using the /Alt entry for links in PDF
-    			documents</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Providing replacement text using the /Alt entry for links in PDF
-    			documents</h1><section class="meta"><p class="id">ID: PDF13</p><p class="technology">Technology: pdf</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
-      <p>Tagged PDF documents that contain links. </p>
-   </section><section id="description"><h2>Description</h2>
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>Providing replacement text using the /Alt entry for links in PDF documents</title>
+		<link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+	</head>
+	<body>
+		<h1>Providing replacement text using the <code>/Alt</code> entry for links in <abbr title="Portable Document Format">PDF</abbr> documents</h1>
+		<section class="meta">
+			<p class="id">ID: PDF13</p>
+			<p class="technology">Technology: pdf</p>
+			<p class="type">Type: Technique</p>
+		</section>
+		<section id="applicability">
+			<h2>When to Use</h2>
+      <p>Tagged PDF documents that contain links.</p>
+   </section>
+	 <section id="description">
+		<h2>Description</h2>
       <p>The objective of this technique is to provide replacement link text
-    				via the /Alt entry in the property list for a tag. This is usually
+    				via the <code>/Alt</code> entry in the property list for a tag. This is usually
     				not necessary, but in some situations, additional information beyond
     				the visible link text is needed, particularly for screen reader users.
     				Screen readers can read visible link text, but replacing the screen
     				text with meaningful alternate text for links in a PDF document can
-    				make links more accessible. </p>
-      <p>Links in PDF documents are represented by a Link tag and objects in
+    				make links more accessible.</p>
+      <p>Links in PDF documents are represented by a <code>Link</code> tag and objects in
     				its sub-tree, consisting of a link object reference (or Link annotation)
     				and one or more text objects. The text object or objects inside the
     				Link tag are used by assistive technologies to provide a name for the
-    				link. </p>
-      <p>Authors can replace the default link text by providing an /Alt entry
-    				for the Link tag. When the Link tag has an /Alt entry, screen readers
-    				ignore the value of any visible text objects in the Link tag and use
-    				the /Alt entry value for the link text. </p>
+    				link.</p>
+      <p>Authors can replace the default link text by providing an <code>/Alt</code> entry
+    				for the <code>Link</code> tag. When the <code>Link</code> tag has an <code>/Alt</code> entry, screen readers ignore the value of any visible text objects in the <code>Link</code> tag and use the <code>/Alt</code> entry value for the link text.</p>
       <p>The simplest way to provide context-independent link text that complies
     				with the WCAG 2.0 success criteria is to create them when authoring
     				the document, before conversion to PDF. In some cases, it may not be
     				possible to create the links using the original authoring tool. When editing PDF documents with Adobe Acrobat Pro, the best way to create accessible links is to use the Create Link command.</p>
-      <p>Authors should make sure that the alternate text makes sense in context
-    				of the screen text before and after the link. </p>
-   </section><section id="examples"><h2>Examples</h2>
-      <section class="example">
-         <h3>Adding alternate link text using Adobe Acrobat 9 Pro</h3>
-         
-            <p>This example is shown with Adobe Acrobat Pro. There are other software tools that perform similar functions. See the list of other software tools in <a href="#pdf_notes_acc-sup_files_applications"></a>.</p>
-            <p>The image below shows a document converted to PDF from Oracle Open
-    						Office. Note that the visible link text is the URL for the link target.
-    						A screen reader will read the entire URI as the link text. </p>
-            <figure id="figure-link-uri-link-text">
-               <img src="img/link-alt1.jpg" />
-                  
-                  <figcaption>A document with the link URI as the link text.</figcaption>
-                
-            </figure>
-            <p>To create more accessible link text for assistive technology: </p>
-            <ol>
-               <li> In the View menu, open the Tag panel by selecting Navigation Panels &gt; Tags. </li>
-               <li> Locate the Link tag in the tag tree, access the context menu for
-    						the link, and select Properties. </li>
-               <li> In the TouchUp Properties dialog, in the Tags tab, enter replacement
-    							text in the Alternate Text field. Screen readers will read this text
-    							instead of the entire URI. </li>
-            </ol>
-            <p>The next image shows the Link tag structure in the Tag panel. </p>
-            <figure id="figure-link-tag-structure">
-               <img src="img/link-alt2.jpg" />
-                  
-                  <figcaption>The Link tag structure in the tag panel.</figcaption>
-                
-            </figure>
-            <p>The last image shows the Alternate Text specified in the Link tag's
-    						TouchUp Properties dialog. A screen reader will read the Alternate
-    						Text as the link text. </p>
-            <figure id="figure-new-alt-text">
-               <img src="img/link-alt3.jpg" />
-                  
-                  <figcaption>The new Alternate Text: 'Boston Globe technology page'</figcaption>
-                
-            </figure>
-      	<p class="working-example">This example is shown in operation in the <a href="../../working-examples/pdf-link-alt-text/link-text.odt">working example of adding alternate link text (OpenOffice file)</a> and <a href="../../working-examples/pdf-link-alt-text/link-text-oo.pdf">working example of adding alternate link text (PDF file)</a>.</p>
-         
-      </section>
-      <section class="example">
-         <h3>Adding alternate link text in a PDF document using the
-    				/Alt entry</h3>
-         
-            <p>The following code fragment illustrates code that is typical for alternative
-    					text for a link. This is typically accomplished by an authoring tool. </p>
-            <pre xml:space="preserve">32 0 obj
+      <p>Authors should make sure that the alternate text makes sense in context of the screen text before and after the link.</p>
+   </section>
+	 <section id="examples">
+		<h2>Examples</h2>
+		<section class="example">
+			<h3>Adding alternate link text using Adobe Acrobat 9 Pro</h3>
+			<p>This example is shown with Adobe Acrobat Pro. There are other software tools that perform similar functions.</p>
+			<p>The image below shows a document converted to PDF from Oracle Open Office. Note that the visible link text is the <abbr title="Uniform Resource Locator">URL</abbr> for the link target. A screen reader will read the entire <abbr title="Uniform Resource Identifier">URI</abbr> as the link text.</p>
+			<div>
+				<img alt="A document with the link URI as the link text." src="img/link-alt1.jpg"/>
+			</div>
+			<p>To create more accessible link text for assistive technology:</p>
+			<ol>
+				<li>In the View menu, open the Tag panel by selecting Navigation Panels &#8594; Tags.</li>
+				<li>Locate the Link tag in the tag tree, access the context menu for the link, and select Properties.</li>
+				<li>In the TouchUp Properties dialog, in the Tags tab, enter replacement text in the Alternate Text field. Screen readers will read this text instead of the entire URI.</li>
+			</ol>
+			<p>The next image shows the Link tag structure in the Tag panel.</p>
+			<div>
+				<img alt="The Link tag structure in the tag panel." src="img/link-alt2.jpg"/>
+			</div>
+			<p>The last image shows the Alternate Text specified in the Link tag's TouchUp Properties dialog. A screen reader will read the Alternate Text as the link text.</p>
+			<div>
+				<img alt="The new Alternate Text: 'Boston Globe technology page'" src="img/link-alt3.jpg"/>
+			</div>
+			<p class="working-example">This example is shown in operation in the <a href="../../working-examples/pdf-link-alt-text/link-text.odt">working example of adding alternate link text (OpenOffice file)</a> and <a href="../../working-examples/pdf-link-alt-text/link-text-oo.pdf">working example of adding alternate link text (PDF file)</a>.</p>
+		</section>
+		<section class="example">
+			<h3>Adding alternate link text in a PDF document using the <code>/Alt</code> entry</h3>
+			<p>The following code fragment illustrates code that is typical for alternative text for a link. This is typically accomplished by an authoring tool.</p>
+            <pre xml:space="preserve"><code>32 0 obj
 &lt;&lt;
   /S/URI                                       %Action type (required), must be URI for a URI action
   /URI(http://www.boston.com/business/technology/)  %Uniform resource identifier(required), the URI to be resolved
 &gt;&gt;
-endobj
-</pre>
-            <p>The following illustrates how to specify alternate text for the
-    					URL in the above link: </p>
-            <pre xml:space="preserve">11 0 obj
+endobj</code></pre>
+      <p>The following illustrates how to specify alternate text for the URL in the above link:</p>
+            <pre xml:space="preserve"><code>11 0 obj
 &lt;&lt;
   /Alt(Boston Globe technology page)    %Alternate text entry
   /K [ 1                                                      
@@ -96,47 +86,50 @@ <h3>Adding alternate link text in a PDF document using the
   /S
   /Link
 &gt;&gt;
-endobj
-</pre>
+endobj</code></pre>
          
       </section>
-   </section><section id="tests"><h2>Tests</h2>
-      <section class="procedure"><h3>Procedure</h3>
-         <ol>
-            <li>
-               <p> For the hyperlink, verify that the alternate link text is properly
-    					coded by one of the following:</p>
-               <ul>
-                  <li> Read the PDF document with a screen reader, listening to hear
-    						that the alternate link text is read correctly. </li>
-                  <li> Use a tool that is capable of showing the /Alt entry to open
-    							the PDF document and view the hyperlink and alternate link text. </li>
-                  <li> Use a tool that exposes the document through the accessibility
-    								API and verify that the alternate link text is the text for the
-    								link. </li>
+		</section>
+		<section id="tests">
+			<h2>Tests</h2>
+      <section class="procedure">
+				<h3>Procedure</h3>
+				<ol>
+					<li>
+						<p>For the hyperlink, verify that the alternate link text is properly coded by one of the following:</p>
+						<ul>
+							<li>Read the PDF document with a screen reader, listening to hear that the alternate link text is read correctly.</li>
+							<li>Use a tool that is capable of showing the <code>/Alt</code> entry to open the PDF document and view the hyperlink and alternate link text.</li>
+							<li>Use a tool that exposes the document through the accessibility <abbr title="Application Programming Interface">API</abbr> and verify that the alternate link text is the text for the link.</li>
                </ul>
             </li>
          </ol>
       </section>
-      <section class="results"><h3>Expected Results</h3>
-         <ul>
-            <li>#1 is true. </li>
-         </ul>
-      </section>
-   </section><section id="related"><h2>Related Techniques</h2><ul>
-      <li><a href="../general/G53">G53</a></li>
-      <li><a href="../general/G91">G91</a></li>
-      <li><a href="../general/G149">G149</a></li>
-      <li><a href="../pdf/PDF11">PDF11</a></li>
-   </ul></section><section id="resources"><h2>Resources</h2>
-      
+      <section class="results">
+				<h3>Expected Results</h3>
          <ul>
-            <li> Section 14.9.4 (Replacement Text) in <a href="http://www.adobe.com/content/dam/Adobe/en/devnet/pdf/pdfs/PDF32000_2008.pdf">PDF
-    					1.7 (ISO 32000-1)</a> 
-               </li>
-            <li>
-                  <a href="http://www.adobe.com/accessibility/products/acrobat.html">PDF and Accessibility</a>
-               </li>
+            <li>#1 is true.</li>
          </ul>
-      
-   </section></body></html>
+				</section>
+			</section>
+			<section id="related">
+				<h2>Related Techniques</h2>
+				<ul>
+					<li><a href="../general/G53">G53</a></li>
+					<li><a href="../general/G91">G91</a></li>
+					<li><a href="../general/G149">G149</a></li>
+					<li><a href="../pdf/PDF11">PDF11</a></li>
+				</ul>
+			</section>
+			<section id="resources">
+				<h2>Resources</h2>
+				<ul>
+					<li>Section 14.9.4 (Replacement Text) in <a href="https://opensource.adobe.com/dc-acrobat-sdk-docs/pdfstandards/PDF32000_2008.pdf">PDF 1.7 (ISO 32000-1) (PDF)</a>
+					</li>
+					<li>
+						<a href="https://helpx.adobe.com/acrobat/using/create-verify-pdf-accessibility.html">Create and verify PDF accessibility (Acrobat Pro)</a>
+					</li>
+				</ul>
+			</section>
+		</body>
+	</html>
diff --git a/techniques/pdf/PDF14.html b/techniques/pdf/PDF14.html
index e4b01de46e..28d7163518 100644
--- a/techniques/pdf/PDF14.html
+++ b/techniques/pdf/PDF14.html
@@ -1,10 +1,24 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing running headers and footers in PDF documents</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Providing running headers and footers in PDF documents</h1><section class="meta"><p class="id">ID: PDF14</p><p class="technology">Technology: pdf</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>Providing running headers and footers in PDF documents</title>
+		<link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+	</head>
+	<body>
+		<h1>Providing running headers and footers in <abbr title="Portable Document Format">PDF</abbr> documents</h1>
+		<section class="meta">
+			<p class="id">ID: PDF14</p>
+			<p class="technology">Technology: pdf</p>
+			<p class="type">Type: Technique</p>
+		</section>
+		<section id="applicability">
+			<h2>When to Use</h2>
       <p id="pdf.applicability.general">Tagged PDF documents</p>
-   </section><section id="description"><h2>Description</h2>
+		</section>
+		<section id="description">
+			<h2>Description</h2>
       <p>The objective of this technique is to help users locate themselves
-    				in a document by providing running headers and footers via pagination
-    				artifacts. This is normally accomplished using a tool for authoring
-    				PDF. </p>
+    				in a document by providing running headers and footers via pagination artifacts. This is normally accomplished using a tool for authoring PDF.</p>
       <p>Running headers and footers help make content easier to use and understandable
     				by providing repeated information in a consistent and predictable way.
     				The content of headers and footers will vary widely depending on the
@@ -12,17 +26,17 @@
     				examples of location information that may be used in headers and footers
     				are listed below. Whether the information appears in a header or a
     				footer is often a design decision; page numbers often appear in footers
-    				but they may alternatively appear in headers. </p>
+    				but they may alternatively appear in headers.</p>
       <ul>
-         <li> Document title </li>
-         <li> Current chapter and/or section in the document</li>
-         <li> Page numbers with location information such as, "Page 3-4" or "Page
-    				9 of 15." </li>
-         <li> Author and/or date information. </li>
+         <li>Document title</li>
+         <li>Current chapter and/or section in the document</li>
+         <li>Page numbers with location information such as, "Page 3-4" or "Page
+    				9 of 15."</li>
+         <li>Author and/or date information.</li>
       </ul>
       <p>Consistency helps users with cognitive limitations, screen-reader
     				users and low-vision magnifier users, and users with intellectual disabilities
-    				understand content more readily. </p>
+    				understand content more readily.</p>
       <p>The easiest way to provide page headers and footers is in the authoring
     				tool for the document. Authoring tools typically provide features for
     				creating header and footer text and information (such as page numbers).
@@ -30,163 +44,80 @@
     				or modify page headers and footers, authoring or repair tools like Adobe Acrobat Pro's Header &amp; Footer
     				tools can be used. In all cases, the tools generate page headers and
     				footers in consistent and predictable layout, format, and text. </p>
-   </section><section id="examples"><h2>Examples</h2>
+   	</section>
+		<section id="examples">
+			<h2>Examples</h2>
       <section class="example">
-         <h3>Adding running headers and footers using Microsoft Word
-    					2007</h3>
-         
-            <p>This example is shown with Microsoft Word. There are other software tools that perform similar functions. See the list of other software tools in <a href="#pdf_notes_acc-sup_files_applications"></a>.</p>
-            <p>In Microsoft Word, use the Insert ribbon, which allows you to specify
-    						header, footer, and page number information and layout, as shown in
-    						the following images. </p>
-            <figure id="figure-word-footertools">
-               <img src="img/word-headerfootertools.jpg" />
-                  
-                  <figcaption>Header and Footer tools on the Word Insert ribbon</figcaption>
-                
-            </figure>
-            <p>You can use these tools to specify headers and footers as shown in
-    						the following images: </p>
-            <figure id="figure-header-word">
-               <img src="img/header-word.jpg" />
-                  
-                  <figcaption>Page headers in a Word document</figcaption>
-                 
-            </figure>
-            <figure id="figure-footer-word">
-               <img src="img/footer-word.jpg" />
-                  
-                  <figcaption>Page footers in a Word document.</figcaption>
-                 
-            </figure>
-            <p>When converted to PDF, the page headers and footers appear in the
-    						document. </p>
-            <figure id="figure-page-header">
-               <img src="img/pdf-page-header.jpg" />
-                  
-                  <figcaption>Page headers converted from Word.</figcaption>
-                 
-            </figure>
-            <figure id="figure-pdf-page-footer">
-               <img src="img/pdf-page-footer.jpg" />
-                  
-                  <figcaption>Page footers converted from Word.</figcaption>
-                 
-            </figure>
-      	<p class="working-example">This example is shown in operation in the <a href="../../working-examples/pdf-headers-footers/headers-footers.docx">working example of adding running headers using Word (Word file)</a> and <a href="../../working-examples/pdf-headers-footers/headers-footers-word.pdf">working example of adding running headers using Word (PDF file)</a>.</p>
-         
+				<h3>Adding running headers and footers using Microsoft Word</h3>
+        <p>This example is shown with Microsoft Word. There are other software tools that perform similar functions.</p>
+        <p>In Microsoft Word, use the Header and Footer tools in the Insert ribbon. When the Word document is converted into a PDF, the headers and footers will be tagged as pagination artifacts.</p>
+    		<p class="working-example">This example is shown in operation in the <a href="../../working-examples/pdf-headers-footers/headers-footers-word.docx">working example of adding running headers using Word (Word file)</a> and <a href="../../working-examples/pdf-headers-footers/headers-footers-word.pdf">working example of adding running headers using Word (PDF file)</a>.</p>
       </section>
       <section class="example">
-         <h3>Adding running headers and footers using OpenOffice.org
-    				Writer 2.2</h3>
-         
-            <p>This example is shown with OpenOffice.org Writer. There are other software tools that perform similar functions. See the list of other software tools in <a href="#pdf_notes_acc-sup_files_applications"></a>.</p>
-            <p>In OpenOffice.org Writer, use the Insert &gt; Header and Insert &gt;   Footer
-    						tools, which allow you to specify header and footer information and
-    						layout, as shown in the following images. </p>
-            <figure id="figure-ooheaderfooter">
-               <img src="img/ooheaderfootertools.jpg" />
-                  
-                  <figcaption>Header and Footer tools in OpenOffice.org Writer.</figcaption>
-                
-            </figure>
-            <figure id="figure-header-oo">
-               <img src="img/header-oo.jpg" />
-                  
-                  <figcaption>Page headers in an OpenOffice.org Writer document.</figcaption>
-                 
-            </figure>
-            <figure id="figure-footer-oo">
-               <img src="img/footer-oo.jpg" />
-                  
-                  <figcaption>Page footers in an OpenOffice.org Writer document.</figcaption>
-                 
-            </figure>
-            <p>When converted to PDF, the page headers and footers appear in the
-    					document as they do in the converted Word document in Example 1. </p>
+				<h3>Adding running headers and footers using OpenOffice Writer</h3>
+				<p>This example is shown with OpenOffice Writer. There are other software tools that perform similar functions.</p>
+				<p>In OpenOffice Writer, use the Insert &#8594; Header and Insert &#8594; Footer tools, which allow you to specify header and footer information and layout, as shown in the following images.</p>
+				<div>
+					<img alt="Header and Footer tools in OpenOffice Writer." src="img/ooheaderfootertools.jpg"/>
+				</div>
+				<div>
+					<img alt="Page headers in an OpenOffice Writer document." src="img/header-oo.jpg"/>
+				</div>
+				<div>
+					<img alt="Page footers in an OpenOffice Writer document." src="img/footer-oo.jpg"/> 
+				</div>
+				<p>When converted to PDF, the page headers and footers appear in the document as they do in the converted Word document in Example 1.</p>
       	<p class="working-example">This example is shown in operation in the <a href="../../working-examples/pdf-headers-footers/headers-footers.odt">working example of adding running headers using OpenOffice Writer (OpenOffice file)</a> and <a href="../../working-examples/pdf-headers-footers/headers-footers-oo.pdf">working example of adding running headers using OpenOffice Writer (PDF file)</a>.</p>
-         
       </section>
       <section class="example">
-         <h3>Adding running headers and footers to PDF documents using
-    				Adobe Acrobat 9 Pro</h3>
-         
-            <p>This example is shown with Adobe Acrobat Pro. There are other software tools that perform similar functions. See the list of other software tools in <a href="#pdf_notes_acc-sup_files_applications"></a>.</p>
-            <p>In Adobe Acrobat Pro, you can add or modify headers and footers: </p>
-            <ol>
-               <li> Select Document &gt; Header &amp; Footer &gt; Add... </li>
-               <li> In the Add Header and Footer tool, specify text and formats for
-    						headers and footers in your document. </li>
-               <li> Use the Previews to make sure the text, fonts, and layout are
-    							as you want them for your document. </li>
-            </ol>
-            <p>The image below shows Acrobat Pro's Add Header and Footer tool. </p>
-            <figure id="figure-pro-header-footer">
-               <img src="img/pro-header-footer-tool.jpg" />
-                  
-                  <figcaption>Add Header and Footer tool in Adobe Acrobat Pro</figcaption>
-                 
-            </figure>
-         
+         <h3>Adding running headers and footers to PDF documents using Adobe Acrobat Pro</h3>
+				 <p>This example is shown with Adobe Acrobat Pro. There are other software tools that perform similar functions.</p>
+				 <p>In Adobe Acrobat Pro, you can add or modify headers and footers:</p>
+				 <ol>
+					<li>Select the Edit PDF tool.</li>
+					<li>In the newly-opened Edit PDF toolbar, select Header &amp; Footer &#8594; Add.</li>
+					<li>In the Add Header and Footer tool, specify text and formats for headers and footers in your document.</li>
+					<li>Use the Previews to make sure the text, fonts, and layout are as you want them for your document.</li>
+				</ol>
+				<p>The image below shows Acrobat Pro's Add Header and Footer tool.</p>
+				<div>
+					<img alt="The Add Header and Footer tool in Adobe Acrobat Pro" src="img/acrobat-header-footer-tool.png" width="770"/>
+				</div>
       </section>
-      <section class="example">
-         <h3>Marking a running header or footer as a pagination artifact
-    				in a PDF document using an /Artifact tag or property list</h3>
-         
-            <p>The PDF specification allows running headers and footers to be marked
-    						as "pagination artifacts" as defined in section 14.8.2.2 "Real
-    						Content and Artifacts," of <a href="http://www.adobe.com/content/dam/Adobe/en/devnet/pdf/pdfs/PDF32000_2008.pdf">PDF
-    							1.7 (ISO 32000-1)</a>. </p>
-            <p>An artifact is explicitly distinguished from real content by enclosing
-    					it in a marked-content sequence with the /Artifact tag. </p>
-            <pre xml:space="preserve">/Artifact
-BMC
-...
-EMC
-</pre>
-            <p>or</p>
-            <pre xml:space="preserve">/Artifact propertyList
-BDC
-...
-EMC
-</pre>
-            <p>The first is used to identify a generic artifact; the second is
-    						used for artifacts that have an associated property list. Note: to
-    						aid in text reflow, artifacts should be defined with property lists
-    						whenever possible. Artifacts lacking a specified bounding box are
-    						likely to be discarded during reflow. </p>
-            <p>Property list entries for artifacts include Type, BBox, Attached,
-    						and Subtype. </p>
-         
-      </section>
-   </section><section id="tests"><h2>Tests</h2>
-      <section class="procedure"><h3>Procedure</h3>
-         <ol>
-            <li> Check that running headers and/or footers are provided and contain
-    					information to help users locate themselves within the document (such
-    					as page numbers or chapter numbers). </li>
-            <li> If section headers are used in the running header or footer, check
-    						that the section header and the running header or footer are consistent. </li>
-         </ol>
-      </section>
-      <section class="results"><h3>Expected Results</h3>
-         <ul>
-            <li>#1 and #2 are true. </li>
-         </ul>
-      </section>
-   </section><section id="related"><h2>Related Techniques</h2><ul>
+   </section>
+	 <section id="tests">
+		<h2>Tests</h2>
+		<section class="procedure">
+			<h3>Procedure</h3>
+			<ol>
+				<li>Check that running headers and/or footers are provided and contain information to help users locate themselves within the document (such as page numbers or chapter numbers).</li>
+				<li>If section headers are used in the running header or footer, check that the section header and the running header or footer are consistent.</li>
+			</ol>
+		</section>
+		<section class="results">
+			<h3>Expected Results</h3>
+			<ul>
+				<li>#1 and #2 are true.</li>
+			</ul>
+		</section>
+	</section>
+	<section id="related">
+		<h2>Related Techniques</h2>
+		<ul>
       <li><a href="../general/G61">G61</a></li>
       <li><a href="../pdf/PDF9">PDF9</a></li>
       <li><a href="../pdf/PDF2">PDF2</a></li>
-   </ul></section><section id="resources"><h2>Resources</h2>
-      
-         <ul>
-            <li> Section 14.8.2.2 (Real Content and Artifacts) in <a href="http://www.adobe.com/content/dam/Adobe/en/devnet/pdf/pdfs/PDF32000_2008.pdf">PDF
-    			1.7 (ISO 32000-1)</a> 
-               </li>
-            <li>
-                  <a href="http://www.adobe.com/accessibility/products/acrobat.html">PDF and Accessibility</a>
-               </li>
-         </ul>
-      
-   </section></body></html>
+		</ul>
+	</section>
+	<section id="resources">
+		<h2>Resources</h2>  
+		<ul>
+			<li>Section 14.8.2.2 (Real Content and Artifacts) in <a href="https://opensource.adobe.com/dc-acrobat-sdk-docs/pdfstandards/PDF32000_2008.pdf">PDF 1.7 (ISO 32000-1) (PDF)</a>
+			</li>
+			<li>
+				<a href="https://helpx.adobe.com/acrobat/using/create-verify-pdf-accessibility.html">Create and verify PDF accessibility (Acrobat Pro)</a>
+			</li>
+		</ul>  
+   </section>
+	</body>
+</html>
diff --git a/techniques/pdf/PDF15.html b/techniques/pdf/PDF15.html
index f4516e50de..640973b217 100644
--- a/techniques/pdf/PDF15.html
+++ b/techniques/pdf/PDF15.html
@@ -1,168 +1,96 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing submit buttons with the submit-form action in PDF forms</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Providing submit buttons with the submit-form action in PDF forms</h1><section class="meta"><p class="id">ID: PDF15</p><p class="technology">Technology: pdf</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
-      <p>Tagged PDF documents with forms. </p>
-   </section><section id="description"><h2>Description</h2>
-      <p>The objective of this technique is to provide a mechanism that allows
-    				users to explicitly request a change of context using the submit-form
-    				action in a PDF form. The intended use of a submit button is to generate
-    				an HTTP request that submits data entered in a form, so it is an appropriate
-    				control to use for causing a change of context. In PDF documents, submit buttons are normally implemented using a tool for authoring PDF. </p>
-      <p>Examples 1 and 2 demonstrate how to add a submit button using specific
-authoring tools. There are other PDF tools that perform similar
-functions. Check the functionality provided by <a href="#pdf_notes_acc-sup_files_applications"></a>.</p>
-   </section><section id="examples"><h2>Examples</h2>
-      <section class="example">
-         <h3>Adding a submit button using Adobe Acrobat 9 Pro</h3>
-         
-            <p>This example is shown with Adobe Acrobat Pro. There are other software tools that perform similar functions. See the list of other software tools in <a href="#pdf_notes_acc-sup_files_applications"></a>.</p>
-            <ol>
-               <li> From the toolbar, select Forms &gt; Form Tools &gt; Button and
-    						create a button on the form. </li>
-               <li> Access the context menu for the button and select Properties...
-    							to open the Button Properties dialog. </li>
-               <li> In the General tab, provide a tooltip for the button. </li>
-               <li> In the Options tab, choose an option in the Layout menu for the
-    								button label, icon image, or both. Then, type text in the Label box
-    								to identify the button as a submit button and/or click Choose Icon
-    								and locate the image file you want to use. </li>
-               <li>
-                  <p> In the Actions tab:</p>
-                  <ul>
-                     <li> For Select Trigger, choose Mouse Up. (The Mouse Up event is
-    										keyboard accessible and, in addition, ensures that the button
-    										will not change context unexpectedly, as it might with, e.g.,
-    										a Mouse Enter event.) </li>
-                     <li> For Select Action, choose Submit A Form. </li>
-                     <li> Click Add. </li>
-                  </ul>
-               </li>
-               <li> In the Add dialog, enter a URL to collect data on a server or
-    									collect form data as e-mail attachments. </li>
-            </ol>
-            <p>The following image shows the Options tab on the Button Properties
-    						dialog. </p>
-            <figure id="figure-options-tab">
-               <img src="img/submit-button2.jpg" />
-                  
-                  <figcaption>The Options tab in the Button Properties dialog, showing the layout and label button properties.</figcaption>
-                
-            </figure>
-            <p>The following image shows the Actions tab on the Button Properties
-    						dialog. </p>
-            <figure id="figure-action-tab">
-               <img src="img/submit-button.jpg" />
-                  
-                  <figcaption>The Action tab in the Button Properties dialog with the Select Action option specified.</figcaption>
-                
-            </figure>
-         
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>Providing submit buttons with the submit-form action in PDF forms</title>
+		<link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+	</head>
+	<body>
+		<h1>Providing submit buttons with the submit-form action in <abbr title="Portable Document Format">PDF</abbr> forms</h1>
+		<section class="meta">
+			<p class="id">ID: PDF15</p>
+			<p class="technology">Technology: pdf</p>
+			<p class="type">Type: Technique</p>
+		</section>
+		<section id="applicability">
+			<h2>When to Use</h2>
+      <p>Tagged PDF documents with forms.</p>
+		</section>
+		<section id="description">
+			<h2>Description</h2>
+      <p>The objective of this technique is to provide a mechanism that allows users to explicitly request a change of context using the submit-form action in a PDF form. The intended use of a submit button is to generate an <abbr title="HyperText Transfer Protocol">HTTP</abbr> request that submits data entered in a form, so it is an appropriate control to use for causing a change of context. In PDF documents, submit buttons are normally implemented using a tool for authoring PDF.</p>
+		</section>
+		<section id="examples">
+			<h2>Examples</h2>
+			<section class="example">
+				<h3>Adding a submit button using Adobe Acrobat Pro</h3>
+				<p>This example is shown with Adobe Acrobat Pro. There are other software tools that perform similar functions.</p>
+				<ol>
+					<li>Select the Prepare Form tool.</li> 
+					<li>Using the Prepare Form toolbar, add a button to the form.</li>
+					<li>Select the button and access the context menu and select the Properties... menu item.</li>
+					<li>In the General tab, provide a Name. This will be used by any JavaScript scripting, so should be a value that can be assigned to a variable.</li>
+					<li>In the General tab, provide a tooltip for the button.</li>
+					<li>In the Options tab, choose an option in the Layout menu for the button label, icon image, or both. Then, type text in the Label box to identify the button as a submit button and/or click Choose Icon and locate the image file you want to use. </li>
+          <li>In the Actions tab:
+						<ul>
+							<li>For Select Trigger, choose Mouse Up. (The Mouse Up event is keyboard accessible and, in addition, ensures that the button will not change context unexpectedly, as it might with with a Mouse Enter event.) </li>
+              <li>For Select Action, choose Submit A Form.</li>
+              <li>Click Add.</li>
+          	</ul>
+          </li>
+          <li>In the Add dialog, enter a <abbr title="Uniform Resource Locator">URL</abbr> to collect data on a server or collect form data as e-mail attachments.</li>
+        </ol>
+			</section>
+			<section class="example">
+				<h3>Adding a script action to a submit button in a PDF document using JavaScript</h3>
+				 <p>The following JavaScript code illustrates the use of a script to specify the submit-form action. To add this script to the form field:</p>
+				 <ol>
+					<li>Open the Button Properties dialog, as shown in Example 1, and select the Actions tab</li>
+					<li>Select Run a JavaScript from the drop-down list, and select the Add button</li>
+					<li>Enter JavaScript code in the JavaScript Editor dialog.</li>
+				</ol>
+				<p class="working-example">This example is shown in operation in the <a href="../../working-examples/pdf-submit-button/submit-button-js.pdf">working example of adding a script action to a submit button</a>.</p> 
       </section>
-      <section class="example">
-         <h3>Adding a submit button using Adobe LiveCycle Designer
-    				ES 8.2.1</h3>
-         
-            <p>This example is shown with Adobe LiveCycle Designer. There are other software tools that perform similar functions. See the list of other software tools in <a href="#pdf_notes_acc-sup_files_applications"></a>.</p>
-            <ol>
-               <li> On the Insert &gt; Standard menu, select the HTTP Submit Button
-    						item. </li>
-               <li> On the Object panel for the HTTP Submit Button, insert the URL
-    							for form-submission processing. </li>
-            </ol>
-            <p>The following image shows the Standard menu with the list of form
-    						controls. </p>
-            <figure id="figure-standard-menu">
-               <img src="img/http.gif" />
-                  
-                  <figcaption>The Standard menu showing the list of form controls, including the selection of the HTTP Submit Button.</figcaption>
-                
-            </figure>
-            <p>The following image shows the Object panel with the URL and other
-    						fields for button appearance. </p>
-            <figure id="figure-object-panel">
-               <img src="img/submit-panel.gif" />
-                  
-                  <figcaption>The Object panel showing the URL and other fields for specifying the submit button's appearance and action.</figcaption>
-                
-            </figure>
-         
-      </section>
-      <section class="example">
-         <h3>Adding a script action to a submit button in a PDF document
-    				using JavaScript</h3>
-         
-            <p>The following JavaScript code illustrates the use of a script to specify
-    						the submit-form action. To add this script to the form field: </p>
-            <ol>
-               <li> Open the Button Properties dialog, as shown in Example 1, and
-    						select the Actions tab </li>
-               <li> Select Run a JavaScript from the drop-down list, and select the
-    							Add button </li>
-               <li> Enter JavaScript code in the JavaScript Editor dialog, for example: </li>
-            </ol>
-            <pre xml:space="preserve">var aSubmitFields = new Array( "name", "id", "juser" );
-this.submitForm({
-  cURL: "http://www.example.com/cgi-bin/myscript.cgi#FDF",
-  aFields: aSubmitFields,
-  cSubmitAs: "FDF" // the default, not needed here
-});
-</pre>
-            <p>The following images illustrate this process: </p>
-            <figure id="figure-button-props-dialog">
-               <img src="img/submit-button1.jpg" />
-                  
-                  <figcaption>The Button Properties dialog for a submit button.</figcaption>
-                
-            </figure>
-            <figure id="figure-javascript-action-tab">
-               <img src="img/submit-button3.jpg" />
-                  
-                  <figcaption>The JavaScript added to the Action tab of the Button Properties dialog.</figcaption>
-                
-            </figure>
-            <p class="working-example">This example is shown in operation in the <a href="../../working-examples/pdf-submit-button/submit-button-js.pdf">working example of adding a script action to a submit button</a>.</p>
-         
-      </section>
-   </section><section id="tests"><h2>Tests</h2>
-      <section class="procedure"><h3>Procedure</h3>
-         <ol>
-            <li>
-               <p> For each page that submits a form, visually verify that the form
+		</section>
+		<section id="tests">
+			<h2>Tests</h2>
+			<section class="procedure">
+				<h3>Procedure</h3>
+				<ol>
+					<li>
+						<p>For each page that submits a form, visually verify that the form
     					contains a submit button and check one of the following:</p>
-               <ul>
-                  <li> Tab to the button and check that it submits the form in response
-    						to user action to select the button. </li>
-                  <li> Open the PDF document with a tool that is capable of showing
-    								the submit-form action and check that the button action is to
-    								submit the form. </li>
+							<ul>
+								<li>Tab to the button and check that it submits the form in response to user action to select the button.</li>
+								<li>Open the PDF document with a tool that is capable of showing the submit-form action and check that the button action is to submit the form.</li>
                </ul>
             </li>
          </ol>
       </section>
-      <section class="results"><h3>Expected Results</h3>
-         <ul>
-            <li>#1 is true for each page that contains a form. </li>
+      <section class="results">
+				<h3>Expected Results</h3>
+				<ul>
+					<li>#1 is true for each page that contains a form.</li>
          </ul>
       </section>
-   </section><section id="related"><h2>Related Techniques</h2><ul>
-      <li><a href="../general/G80">G80</a></li>
-      <li><a href="../pdf/PDF23">PDF23</a></li>
-      <li><a href="../pdf/PDF12">PDF12</a></li>
-   </ul></section><section id="resources"><h2>Resources</h2>
-      
-         <ul>
-            <li> Section 12.7.5.2 (Submit-Form Action) in <a href="http://www.adobe.com/content/dam/Adobe/en/devnet/pdf/pdfs/PDF32000_2008.pdf">PDF
-    					1.7 (ISO 32000-1)</a> 
-               </li>
-            <li> 
-                  <a href="http://kb2.adobe.com/cps/332/332289.html">Create
-    						submission forms in LiveCycle Designer</a> 
-               </li>
-            <li> 
-                  <a href="http://partners.adobe.com/public/developer/en/xml/xfa_spec_2_5.pdf">XML
-    							Forms Architecture (XFA) Specification Version 2.5</a> 
-               </li>
-            <li>
-                  <a href="http://www.adobe.com/accessibility/products/acrobat.html">PDF and Accessibility</a>
-               </li>
-         </ul>
-      
-   </section></body></html>
+		</section>
+		<section id="related">
+			<h2>Related Techniques</h2>
+			<ul>
+				<li><a href="../general/G80">G80</a></li>
+				<li><a href="../pdf/PDF23">PDF23</a></li>
+				<li><a href="../pdf/PDF12">PDF12</a></li>
+			</ul>
+		</section>
+		<section id="resources">
+			<h2>Resources</h2>
+			<ul>
+				<li>Section 12.7.5.2 (Submit-Form Action) in <a href="https://opensource.adobe.com/dc-acrobat-sdk-docs/pdfstandards/PDF32000_2008.pdf">PDF 1.7 (ISO 32000-1) (PDF)</a>
+				</li>
+				<li>
+					<a href="https://helpx.adobe.com/acrobat/using/create-verify-pdf-accessibility.html">Create and verify PDF accessibility (Acrobat Pro)</a>
+				</li>
+			</ul>
+   </section>
+	</body>
+	</html>
diff --git a/techniques/pdf/PDF16.html b/techniques/pdf/PDF16.html
index 15b3f7ef03..7d94474199 100644
--- a/techniques/pdf/PDF16.html
+++ b/techniques/pdf/PDF16.html
@@ -1,134 +1,98 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Setting the default language using the /Lang entry in the document
-    			catalog of a PDF document</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Setting the default language using the /Lang entry in the document
-    			catalog of a PDF document</h1><section class="meta"><p class="id">ID: PDF16</p><p class="technology">Technology: pdf</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>Setting the default language using the /Lang entry in the document catalog of a PDF document</title>
+		<link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+	</head>
+	<body>
+		<h1>Setting the default language using the <code>/Lang</code> entry in the document catalog of a <abbr title="Portable Document Format">PDF</abbr> document</h1>
+		<section class="meta">
+			<p class="id">ID: PDF16</p>
+			<p class="technology">Technology: pdf</p>
+			<p class="type">Type: Technique</p>
+		</section>
+		<section id="applicability">
+			<h2>When to Use</h2>
       <p id="pdf.applicability.general">Tagged PDF documents</p>
-   </section><section id="description"><h2>Description</h2>
-      <p>The objective of this technique is to specify a document's default
-    				language by setting the /Lang entry in the document catalog. This is
-    				normally accomplished using a tool for authoring PDF. </p>
+		</section>
+		<section id="description">
+			<h2>Description</h2>
+      <p>The objective of this technique is to specify a document's default language by setting the <code>/Lang</code> entry in the document catalog. This is normally accomplished using a tool for authoring PDF.</p>
       <p>Both assistive technologies and conventional user agents can render
     				text more accurately when the language of the document is identified.
     				Screen readers can load the correct pronunciation rules. Visual browsers
     				can display characters and scripts correctly. Media players can show
     				captions correctly. As a result, users with disabilities are better
-    				able to understand the content. </p>
-   </section><section id="examples"><h2>Examples</h2>
+    				able to understand the content.</p>
+		</section>
+		<section id="examples">
+			<h2>Examples</h2>
       <section class="example">
-         <h3>Adding a /Lang entry to specify the default document language
-    					using Adobe Acrobat 9 Pro</h3>
-         
-            <p>This example is shown with Adobe Acrobat Pro. There are other software tools that perform similar functions. See the list of other software tools in <a href="#pdf_notes_acc-sup_files_applications"></a>.</p>
-            <ol>
-               <li> Open the document in Adobe Acrobat Pro </li>
-               <li> From the File menu, select "Properties..." </li>
-               <li> In the "Properties" dialog, select the "Advanced" tab </li>
-               <li> In the "Reading Options" field, select the default language
-    						from the "Language" combo box </li>
-            </ol>
-            <figure id="figure-acrobat-define-lang">
-               <img src="img/docprop.gif" />
-                  
-                  <figcaption>Specifying the default language in Adobe Acrobat's Properties dialog.</figcaption>
-                
-            </figure>
-            <div class="note">
-               <p>Acrobat includes 16 preset language selections.
-    						If you need to specify a language that is not on the list, such as
-    						Russian, you must type the ISO 639 code for the language, not its name. </p>
-            </div>
-            <p class="working-example">This example is shown in operation in the <a href="../../working-examples/pdf-lang/language-en.pdf">working example of adding a /Lang entry using Acrobat Pro</a>.</p>
-         
+				<h3>Adding a <code>/Lang</code> entry to specify the default document language using Adobe Acrobat Pro</h3>
+				<p>This example is shown with Adobe Acrobat Pro. There are other software tools that perform similar functions.</p>
+				<ol>
+					<li>Open the document in Adobe Acrobat Pro</li>
+					<li>From the File menu, select "Properties..."</li>
+					<li>In the "Properties" dialog, select the "Advanced" tab</li>
+					<li>In the "Reading Options" field, select the default language from the "Language" combo box</li>
+				</ol>
+				<div class="note">
+					<p>Acrobat includes numerous preset language selections.
+						If you need to specify a language that is not on the list, such as
+						Russian, you must type the <abbr title="International Organization for Standardization">ISO</abbr> 639-2 code for the language, not its name.</p>
+				</div>
       </section>
       <section class="example">
-         <h3>Specifying the default document language in a PDF document
-    				using Microsoft Word 2007</h3>
-         
-            <p>This example is shown with Microsoft Word. There are other software tools that perform similar functions. See the list of other software tools in <a href="#pdf_notes_acc-sup_files_applications"></a>.</p>
-            <p>Documents authored in Microsoft Word: "In some instances, even
-    						if the document language has been specified in the source file, the
-    						information about document language is not conveyed to the PDFMaker.
-    						Setting the language for an entire document in the Document Properties
-    						dialog box [see Example 1] corrects all errors related to this option."(<a href="http://www.adobe.com/content/dam/Adobe/en/accessibility/products/acrobat/pdfs/A9-accessible-pdf-from-word.pdf">Adobe®
-    							Acrobat® 9 Pro Accessibility Guide: Creating Accessible PDF from Microsoft®
-    							Word</a>) </p>
-         
-      </section>
-      <section class="example">
-         <h3>Specifying the default document language in a PDF document
-    				using a /Lang entry</h3>
-         
-            <p>The natural language used for text in a document is determined in
-    						a hierarchical fashion, based on whether an optional /Lang entry is
-    						present in any of several possible locations. At the highest level,
-    						the document's default language may be specified by a /Lang entry in
-    						the document catalog. </p>
-            <p>The following code fragment illustrates code that is typical for using
-    						the /Lang entry in the document catalog for a document's default language
-    						(in this case, US English). (This is typically accomplished by an authoring
-    						tool.) </p>
-            <pre xml:space="preserve"> 1 0 obj
+				<h3>Specifying the default document language in a PDF document using a <code>/Lang</code> entry</h3>
+        <p>The natural language used for text in a document is determined in a hierarchical fashion, based on whether an optional <code>/Lang</code> entry is present in any of several possible locations. At the highest level, the document's default language may be specified by a <code>/Lang</code> entry in the document catalog.</p>
+            <p>The following code fragment illustrates code that is typical for using the <code>/Lang</code> entry in the document catalog for a document's default language (in this case English). (This is typically accomplished by an authoring tool.)</p>
+            <pre xml:space="preserve"><code>1 0 obj
    &lt;&lt; /Type /Catalog
       ...
-      /Lang (en-US)
+      /Lang (en)
       ...
    &gt;&gt; 
- endobj
-</pre>
-         
+ endobj</code></pre>  
       </section>
-   </section><section id="tests"><h2>Tests</h2>
-      <section class="procedure"><h3>Procedure</h3>
-         <ol>
-            <li>
-               <p>Verify that the default language for the document is correctly
-    					specified by applying one of the following:</p>
-               <ul>
-                  <li> Read the PDF document with a screen reader, listening to hear
-    						that the text is read in the correct natural language. </li>
-                  <li> Using a PDF editor, check that the language is
-    							set to the default document language. </li>
-                  <li> Use a tool which is capable of showing the /Lang entry value
-    								in the document catalog to open the PDF document and view the
-    								language settings. </li>
-                  <li> Use a tool that exposes the document through the accessibility
-    									API and verify that the language is set to the default language. </li>
-               </ul>
-            </li>
-         </ol>
+		</section>
+		<section id="tests">
+			<h2>Tests</h2>
+      <section class="procedure">
+				<h3>Procedure</h3>
+				<ol>
+					<li>
+						<p>Verify that the default language for the document is correctly specified by applying one of the following:</p>
+						<ul>
+							<li>Read the PDF document with a screen reader, listening to hear that the text is read in the correct natural language.</li>
+							<li>Using a PDF editor, check that the language is set to the default document language.</li>
+							<li>Use a tool which is capable of showing the <code>/Lang</code> entry value in the document catalog to open the PDF document and view the language settings.</li>
+							<li>Use a tool that exposes the document through the accessibility <abbr title="Application Programming Interface">API</abbr> and verify that the language is set to the default language.</li>
+						</ul>
+					</li>
+				</ol>
       </section>
-      <section class="results"><h3>Expected Results</h3>
+      <section class="results">
+				<h3>Expected Results</h3>
          <ul>
-            <li>#1 is true. </li>
+            <li>#1 is true.</li>
          </ul>
       </section>
    </section><section id="related"><h2>Related Techniques</h2><ul>
       <li><a href="../pdf/PDF19">PDF19</a></li>
-   </ul></section><section id="resources"><h2>Resources</h2>
-      
-         <ul>
-            <li> Section 14.9.2 (Natural Language Specification) in <a href="http://www.adobe.com/content/dam/Adobe/en/devnet/pdf/pdfs/PDF32000_2008.pdf">PDF
-    					1.7 (ISO 32000-1)</a> 
-               </li>
-            <li> 
-                  <a href="http://www.loc.gov/standards/iso639-2/php/code_list.php">ISO
-    						639-2 Codes</a> 
-               </li>
-            <li> 
-                  <a href="http://partners.adobe.com/public/developer/en/pdf/PDFReference16.pdf#page=886">PDF
-    							Reference 1.6, 10.8.1 Natural Language Specification (PDF 8.7 Mb)</a> 
-               </li>
-            <li> 
-                  <a href="http://pdf.editme.com/pdfua-naturalLanguageSpecification">PDF
-    								Standards: Natural Language Specification</a> 
-               </li>
-            <li> 
-                  <a href="http://www.adobe.com/content/dam/Adobe/en/accessibility/products/acrobat/pdfs/A9-accessible-pdf-from-word.pdf">Adobe®
-    									Acrobat® 9 Pro Accessibility Guide: Creating Accessible PDF from
-    									Microsoft® Word</a> 
-               </li>
-            <li>
-                  <a href="http://www.adobe.com/accessibility/products/acrobat.html">PDF and Accessibility</a>
-               </li>
-         </ul>
-      
-   </section></body></html>
+   </ul>
+	</section>
+	<section id="resources">
+		<h2>Resources</h2>  
+		<ul>
+			<li>Section 14.9.2 (Natural Language Specification) in <a href="https://opensource.adobe.com/dc-acrobat-sdk-docs/pdfstandards/PDF32000_2008.pdf">PDF 1.7 (ISO 32000-1) (PDF)</a>
+			</li>
+			<li>
+				<a href="https://www.loc.gov/standards/iso639-2/php/code_list.php">ISO 639-2 Codes</a>
+			</li>
+			<li>
+				<a href="https://helpx.adobe.com/acrobat/using/create-verify-pdf-accessibility.html">Create and verify PDF accessibility (Acrobat Pro)</a>
+			</li>
+		</ul>
+   </section>
+	</body>
+	</html>
diff --git a/techniques/pdf/PDF17.html b/techniques/pdf/PDF17.html
index 867ffda6cf..7347e04415 100644
--- a/techniques/pdf/PDF17.html
+++ b/techniques/pdf/PDF17.html
@@ -1,91 +1,83 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Specifying consistent page numbering for PDF documents</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Specifying consistent page numbering for PDF documents</h1><section class="meta"><p class="id">ID: PDF17</p><p class="technology">Technology: pdf</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>Specifying consistent page numbering for PDF documents</title>
+		<link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+	</head>
+	<body>
+		<h1>Specifying consistent page numbering for <abbr title="Portable Document Format">PDF</abbr> documents</h1>
+		<section class="meta">
+			<p class="id">ID: PDF17</p>
+			<p class="technology">Technology: pdf</p>
+			<p class="type">Type: Technique</p>
+		</section>
+		<section id="applicability">
+			<h2>When to Use</h2>
       <p id="pdf.applicability.general">Tagged PDF documents</p>
-   </section><section id="description"><h2>Description</h2>
-      <p>The objective of this technique is to help users locate themselves in a document by ensuring that the page numbering displayed in the PDF viewer page controls has the same page numbering as the document. For example, Adobe Acrobat Pro and Reader display page numbers in the Page Navigation toolbar. The page number format is specified by the /PageLabels entry in the Document Catalog.</p>
+		</section>
+		<section id="description">
+			<h2>Description</h2>
+      <p>The objective of this technique is to help users locate themselves in a document by ensuring that the page numbering displayed in the PDF viewer page controls has the same page numbering as the document. For example, Adobe Acrobat Pro and Reader display page numbers in the Page Navigation toolbar. The page number format is specified by the <code>/PageLabels</code> entry in the Document Catalog.</p>
       <p>Many documents use specific page number formats within a document. Commonly, front matter is numbered with lowercase Roman numerals. The main content, starting on the page numbered 1, may actually be the fifth or sixth page in the document. Similarly, appendices may begin with page number 1 plus a prefix of the appendix letter (e.g., "A-1").</p>
       <p>Authors should make sure that the page numbering of their converted documents is reflected in any page number displays in their user agent. Consistency in presenting the document's page numbers will help make navigating the document more predictable and understandable.</p>
-      <p>As an example, if /PageLabels has not been provided to describe the page number formatting, the page numbering scheme will not be reflected in the Page Navigation toolbar in Adobe Acrobat Pro or Reader. This toolbar displays the page number in a text box, which users can change to move to another page. In addition, users can select the arrows to move one page up or down in the document. The toolbar also displays the relative page number location. In the image below, the default display indicates the user is on page 1 of 4 pages.</p>
-      <figure id="figure-page-nav-toolbar">
-         <img src="img/page_nos-nav.jpg" />
-            
-            <figcaption>Page Navigation toolbar in Adobe Acrobat Pro, displaying the page number in a text box, which users can change to move to another page. In addition, users can select the arrows to move one page up or down in the document. The toolbar also displays the relative page number location, e.g., page 1 of 4 pages.</figcaption>
-          
-      </figure>
-      <p>A more direct way of going to a page is to use the shortcut for the View &gt; Page Navigation &gt; Page menu item. On Windows, this shortcut is "Ctrl + Shift + N"; on Mac OS, it is "Cmd + Shift + N". This brings up a dialog box to go to a specific page number.</p>
-   </section><section id="examples"><h2>Examples</h2>
+      <p>As an example, if <code>/PageLabels</code> has not been provided to describe the page number formatting, the page numbering scheme will not be reflected in the Page Navigation toolbar in Adobe Acrobat Pro or Reader. This toolbar displays the page number in a text box, which users can change to move to another page. In addition, users can select the arrows to move one page up or down in the document. The toolbar also displays the relative page number location. In the image below, the default display indicates the user is on page 12 of 116 pages.</p>
+      <div>
+         <img alt="Page Navigation toolbar in Adobe Acrobat Pro, displaying the page number in a text box, which users can change to move to another page. In addition, users can select the arrows to move one page up or down in the document. The toolbar also displays the relative page number location, e.g., page 12 of 116 pages." src="img/acrobat-page-numbers-nav.png" width="102"/>
+			</div>
+      <p>A more direct way of going to a page is to use the shortcut for the View &gt; Page Navigation &#8594; Go To Page menu item. On Windows, this shortcut is "<kbd><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>N</kbd></kbd>"; on Mac OS, it is "<kbd><kbd>Cmd</kbd> + <kbd>Shift + N</kbd></kbd>". This brings up a dialog box to go to a specific page number.</p>
+		</section>
+		<section id="examples">
+			<h2>Examples</h2>
       <section class="example">
-         <h3>Editing PDF page number formatting specifications using Adobe Acrobat 9 Pro</h3>
-         
-            <p>This example is shown with Adobe Acrobat Pro. There are other software tools that perform similar functions. See the list of other software tools in <a href="#pdf_notes_acc-sup_files_applications"></a>.</p>
-            <p>The example document converted from Microsoft Word 2007 has 4 pages, numbered
-    						i, ii, iii, 1. The image below shows the Word document with lowercase
-    						Roman numeral page numbering specified In Word using: </p>
-            <ul>
-               <li> Insert ribbon &gt; Page number &gt; Page Number Format </li>
-            </ul>
-            <p>In this document, a new section has been created with page numbering
-    						beginning with Arabic numeral 1 on the fourth page of the document. The document
-    						was then converted to PDF from Word. </p>
-            <figure id="figure-page-number-dialog">
-               <img src="img/pages_nos_word.jpg" />
-                  
-                  <figcaption>The Page Number Format dialog in Word, specifying lowercase Roman page numbering.</figcaption>
-                 
-            </figure>
-            <p>In Adobe Acrobat Pro, Select View &gt; Navigation Panels &gt; Pages.
-    						The following image shows the page thumbnails in the Pages panel
-    						and the Page Navigation toolbar. Both the thumbnails and the toolbar
-    						use Arabic page numbers. </p>
-            <figure id="figure-page-thumbnails-1">
-               <img src="img/page_nos1.jpg" />
-                  
-                  <figcaption>Page thumbnails in the Pages panel and the Page Navigation toolbar, both using Arabic page numbers.</figcaption>
-                 
-            </figure>
-            <p>To correct the page numbers: </p>
-            <ol>
-               <li> Select the pages to be renumbered </li>
-               <li> Access the context menu for the selected pages and select Number
-    						Pages </li>
-               <li> In the Page Numbering dialog, select the lowercase Roman numeral
-    							style and the starting page (1 by default, which is correct in this
-    							case) </li>
-               <li> Select OK </li>
-            </ol>
-            <p>The following image shows the Page Numbering dialog and selections. </p>
-            <figure id="figure-page-thumbnails-2">
-               <img src="img/page_nos2.jpg" />
-                  
-                  <figcaption>Three pages selected on the Pages panel and the Page Numbering dialog specifying the new page styles. The starting page is specified as 1 (default), which is correct.</figcaption>
-                 
-            </figure>
-            <p>Follow the same process to change the fourth page number to Arabic
-    						numeral 1. </p>
-            <p>The following image shows the correct page numbers for the 4 pages.
-    						Note that page iii is selected in the Pages panel and the Page Navigation
-    						toolbar shows iii in the text area. In addition, the relative location
-    						in the document is shown at the right of the toolbar: "(3 of 4)." </p>
-            <figure id="figure-page-thumbnails-3">
-               <img src="img/page_nos3.jpg" />
-                  
-                  <figcaption>The Pages panel in Adobe Acrobat Pro showing pages numbered i, ii, iii, 1. The Page Navigation toolbar shows iii for the third page. The relative page location is also displayed as '(3 of 4).'</figcaption>
-                 
-            </figure>
+				<h3>Editing PDF page number formatting specifications using Adobe Acrobat Pro</h3> 
+				<p>This example is shown with Adobe Acrobat Pro. There are other software tools that perform similar functions.</p>
+				<p>The example document converted from Microsoft Word has 4 pages, numbered i, ii, iii, iv, and 1. This is specified In Word using the Format Page Numbers in the Page Number option in Word's Insert ribbon.</p>
+				<p>In this document, a new section has been created with page numbering beginning with Arabic numeral 1 on the fourth page of the document. The document was then converted to PDF from Word.</p>
+				<div>
+					<img alt="The Page Number Format dialog in Word, specifying lowercase Roman page numbering." src="img/word-page-numbers.png" width="497"/>
+				</div>
+				<p>In Adobe Acrobat Pro:</p>
+				<ol>
+					<li>Select the Organize Pages tool;</li>
+					<li>Select the the pages that need their numbering updated;</li>
+					<li>Open the context menu and select the Page Labels... option;</li>
+					<li>Select the Page Numbering option;</li>
+					<li>Use the Begin New Section settings to update the page numbering style.</li>
+				</ol>
+        <div>
+					<img alt="Page thumbnails in the Pages panel and the Page Navigation toolbar, both using Arabic page numbers." src="img/acrobat-update-page-numbers-1.png" width="770"/>
+				</div>
+				<p>To correct the page numbers:</p>
+				<ol>
+					<li>Select the pages to be renumbered</li>
+					<li>Access the context menu for the selected pages and select Number Pages</li>
+					<li>In the Page Numbering dialog, select the lowercase Roman numeral style and the starting page (1 by default, which is correct in this case)</li>
+					<li>Select OK</li>
+				</ol>
+				<p>The following image shows the Page Numbering dialog and selections.</p>
+				<div>
+					<img alt="Three pages selected on the Pages panel and the Page Numbering dialog specifying the new page styles. The starting page is specified as 1 (default), which is correct." src="img/acrobat-update-page-numbers-2.png" width="770"/>
+				</div>
+				<p>Follow the same process to change the fifth page number to Arabic numeral 1.</p>
+        <p>The following image shows the correct page numbers for the 5 pages.</p>
+				<div>
+					<img alt="The Pages panel in Adobe Acrobat Pro showing pages numbered i, ii, iii, iv, 1." src="img/acrobat-update-page-numbers-3.png" width="770"/>
+				</div>
       	<p class="working-example">This example is shown in operation in the <a href="../../working-examples/pdf-page-numbers/page-numbers.docx">working example of specifying page numbers in a document converted from Word (Word file)</a> and <a href="../../working-examples/pdf-page-numbers/page-numbers.pdf">working example of specifying page numbers in a document converted from Word (PDF file)</a>.</p>
-         
-      </section>
+			</section>
+			<section class="example">
+			<h3>Adding Page Numbers in OpenOffice Writer</h3>
+			<p>To add page numbering in OpenOffice with Writer, the user needs to add a footer from the Insert dropdown.</p>
+			<img src="img/oo-page-numbers.jpg" alt="OpenOffice's Insert Footer menu option."/>
+			<p>After inserting the footer, click in the footer then select Insert &#8592; Fields &#8592; Page Number.</p>
+			<img src="img/oo-insert-page-numbers.jpg" alt="OpenOffice's Insert Page Number menu option."/>
+			</section>
       <section class="example">
-         <h3>Specifying page numbers using the /PageLabels entry</h3>
-         
-            <p>The following code fragment illustrates code that is typical for specifying
-    						multiple page numbering schemes in a document. </p>
-            <p>The example below is for a document with pages labeled: </p>
-            <aside class="example">
-               <p>i, ii, iii, iv, 1, 2, 3, A-8, A-9, …  </p>
-            </aside>
-            <p>This numbering scheme requires 3 page-label dictionaries (for lowercase
-    						Roman, Arabic, and prefixed numbers) </p>
-            <pre xml:space="preserve">1 0 obj
+				<h3>Specifying page numbers using the <code>/PageLabels</code> entry</h3>
+				<p>The following code fragment illustrates code that is typical for specifying multiple page numbering schemes in a document.</p>
+				<p>The example below is for a document with pages labeled: i, ii, iii, iv, 1, 2, 3, A-8, A-9, ...</p>
+				<p>This numbering scheme requires 3 page-label dictionaries (for lowercase Roman, Arabic, and prefixed numbers) </p>
+            <pre xml:space="preserve"><code>1 0 obj
     &lt;&lt; /Type /Catalog
        /PageLabels &lt;&lt; /Nums [ 0 &lt;&lt; /S /r &gt;&gt;  % lowercase Roman numerals
                               4 &lt;&lt; /S /D &gt;&gt;  % Arabic numerals
@@ -95,74 +87,72 @@ <h3>Specifying page numbers using the /PageLabels entry</h3>
                                 &gt;&gt;
                             ]
                     &gt;&gt;
-       …
+       ...
    &gt;&gt;
   endobj
-</pre>
-            <p>Page labels are specified as follows: </p>
-            <ul>
-               <li>
-                  <p>
-                     /S specifies the numbering style for page numbers:</p>
-                  <ul>
-                     <li>
-                           /D - Arabic numerals (1,2,3...) </li>
-                     <li>
-                           /r - lowercase Roman numerals (i, ii, iii,...) </li>
-                     <li>
-                           /R - uppercase Roman numerals (I, II, III,...) </li>
-                     <li>
-                           /A - uppercase letters (A-Z) </li>
-                     <li>
-                           /a - lowercase letters (a-z) </li>
-                  </ul>
-               </li>
-               <li>
-                     /P (optional) - page number prefix </li>
-               <li>
-                     /St (optional) - the value of the first page number in the range
-    						(default: 1) </li>
-            </ul>
-         
-      </section>
-   </section><section id="tests"><h2>Tests</h2>
-      <section class="procedure"><h3>Procedure</h3>
-         <ol>
-            <li>
-               <p> For every section in the document that uses a different pagination
+</code></pre>
+				<p>Page labels are specified as follows:</p>
+				<ul>
+					<li>
+						<p><code>/S</code> specifies the numbering style for page numbers:</p>
+						<ul>
+							<li>
+								<code>/D</code> - Arabic numerals (1,2,3...)</li>
+								<li><code>/r</code> - lowercase Roman numerals (i, ii, iii,...)</li>
+								<li><code>/R</code> - uppercase Roman numerals (I, II, III,...)</li>
+								<li><code>/A</code> - uppercase letters (A-Z)</li>
+								<li><code>/a</code> - lowercase letters (a-z)</li>
+							</ul>
+						</li>
+						<li><code>/P</code> (optional) - page number prefix</li>
+						<li><code>/St</code> (optional) - the value of the first page number in the range (default: 1)</li>
+					</ul>
+				</section>
+			</section>
+			<section id="tests">
+				<h2>Tests</h2>
+				<section class="procedure">
+					<h3>Procedure</h3>
+					<ol>
+						<li>
+							<p>For every section in the document that uses a different pagination
     					format, check that the page navigation feature uses the same format
     					used on the document pages:</p>
-               <ul>
-                  <li> Select the pages that begin a new pagination
+							<ul>
+								<li>Select the pages that begin a new pagination
     						format and visually verify that the same format and page number
-    						is shown in the page navigation feature. </li>
-                  <li> Using a screen reader, check that the page number announced
+    						is shown in the page navigation feature.</li>
+								<li>Using a screen reader, check that the page number announced
     							in the page navigation feature is the same as the page number
-    							announced on the document page. </li>
-                  <li> Using a tool that is capable of showing the /PageLabels entries,
-    								open the PDF document and view the entries. </li>
-                  <li> Use a tool that exposes the document through the accessibility
-    									API, and verify that the /PageLabels entries are specified correctly. </li>
+    							announced on the document page.</li>
+								<li>Using a tool that is capable of showing the <code>/PageLabels</code> entries, open the PDF document and view the entries.</li>
+                <li>Use a tool that exposes the document through the accessibility <abbr title="Application Programming Interface">API</abbr>, and verify that the <code>/PageLabels</code> entries are specified correctly.</li>
                </ul>
             </li>
          </ol>
       </section>
-      <section class="results"><h3>Expected Results</h3>
-         <ul>
-            <li>#1 is true. </li>
-         </ul>
+      <section class="results">
+				<h3>Expected Results</h3>
+        <ul>
+					<li>#1 is true.</li>
+				</ul>
       </section>
-   </section><section id="related"><h2>Related Techniques</h2><ul>
-      <li><a href="../pdf/PDF14">PDF14</a></li>
-   </ul></section><section id="resources"><h2>Resources</h2>
-      
-         <ul>
-            <li> Section 12.4.2 (Page Labels) <a href="http://www.adobe.com/content/dam/Adobe/en/devnet/pdf/pdfs/PDF32000_2008.pdf">PDF
-    					1.7 (ISO 32000-1)</a> 
-               </li>
-            <li>
-                  <a href="http://www.adobe.com/accessibility/products/acrobat.html">PDF and Accessibility</a>
-               </li>
-         </ul>
-      
-   </section></body></html>
+		</section>
+		<section id="related">
+			<h2>Related Techniques</h2>
+			<ul>
+      	<li><a href="../pdf/PDF14">PDF14</a></li>
+			</ul>
+		</section>
+		<section id="resources">
+			<h2>Resources</h2>
+			<ul>
+				<li>Section 12.4.2 (Page Labels) in <a href="https://opensource.adobe.com/dc-acrobat-sdk-docs/pdfstandards/PDF32000_2008.pdf">PDF 1.7 (ISO 32000-1) (PDF)</a>
+				</li>
+				<li>
+					<a href="https://helpx.adobe.com/acrobat/using/create-verify-pdf-accessibility.html">Create and verify PDF accessibility (Acrobat Pro)</a>
+				</li>
+			</ul>
+		</section>
+	</body>
+	</html>
diff --git a/techniques/pdf/PDF18.html b/techniques/pdf/PDF18.html
index fee3f25b18..81d7bbddac 100644
--- a/techniques/pdf/PDF18.html
+++ b/techniques/pdf/PDF18.html
@@ -1,119 +1,109 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Specifying the document title using the Title entry in the document
-    			information dictionary of a PDF document</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Specifying the document title using the Title entry in the document
-    			information dictionary of a PDF document</h1><section class="meta"><p class="id">ID: PDF18</p><p class="technology">Technology: pdf</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>Specifying the document title using the Title entry in the document information dictionary of a PDF document</title>
+		<link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+	</head>
+	<body>
+		<h1>Specifying the document title using the <code>Title</code> entry in the document information dictionary of a <abbr title="Portable Document Format">PDF</abbr> document</h1>
+		<section class="meta">
+			<p class="id">ID: PDF18</p>
+			<p class="technology">Technology: pdf</p>
+			<p class="type">Type: Technique</p>
+		</section>
+		<section id="applicability">
+			<h2>When to Use</h2>
       <p id="pdf.applicability.general">Tagged PDF documents</p>
-   </section><section id="description"><h2>Description</h2>
+		</section>
+		<section id="description">
+			<h2>Description</h2>
       <p>The intent of this technique is to show how a descriptive title for
     				a PDF document can be specified for assistive technology by using the
-    				/Title entry in the document information dictionary and by setting
+    				<code>/Title</code> entry in the document information dictionary and by setting
     				the DisplayDocTitle flag to True in a viewer preferences dictionary.
-    				This is typically accomplished by using a tool for authoring PDF. </p>
+    				This is typically accomplished by using a tool for authoring PDF.</p>
       <p>Document titles identify the current location without requiring users
     				to read or interpret page content. User agents make the title of the
     				page easily available to the user for identifying the page. For instance,
     				a user agent may display the page title in the window title bar or
-    				as the name of the tab containing the page. </p>
-   </section><section id="examples"><h2>Examples</h2>
-      <section class="example">
-         <h3>Setting the document title in the metadata and specifying
-    					that the title be displayed in the title bar using Adobe Acrobat 9 Pro</h3>
-         
-            <p>This example is shown with Adobe Acrobat Pro. There are other software tools that perform similar functions. See the list of other software tools in <a href="#pdf_notes_acc-sup_files_applications"></a>.</p>
-            <p>Open the PDF document in Adobe Acrobat Pro: </p>
-            <ol>
-               <li> Select File &gt; Properties </li>
-               <li> Select the Description tab to view the metadata in the document,
-    						including the document information dictionary </li>
-               <li> Modify the Title field to add or change the document's Title entry </li>
-            </ol>
-            <figure id="figure-title-field">
-               <img src="img/title-entry.jpg" />
-                  
-                  <figcaption>Viewing the Title field in the Description tab of the Properties dialog. The document title is entered in the field.</figcaption>
-                
-            </figure>
-            <p>Note that, with Adobe Acrobat installed, you can also enter and read
+    				as the name of the tab containing the page.</p>
+   </section>
+	 <section id="examples">
+		<h2>Examples</h2>
+		<section class="example">
+         <h3>Setting the document title in the metadata and specifying that the title be displayed in the title bar using Adobe Acrobat Pro</h3>
+				 <p>This example is shown with Adobe Acrobat Pro. There are other software tools that perform similar functions.</p>
+				 <p>Open the PDF document in Adobe Acrobat Pro:</p>
+				 <ol>
+					<li>Select File &#8594; Properties</li>
+					<li>Select the Description tab to view the metadata in the document, including the document information dictionary</li>
+					<li>Modify the Title field to add or change the document's Title entry</li>
+				</ol>
+				<div>
+					<img alt="Viewing the Title field in the Description tab of the Properties dialog. The document title is entered in the field." src="img/acrobat-set-document-initial-view.png" width="664"/>
+				</div>
+				<p>Note that, with Adobe Acrobat installed, you can also enter and read
     						the data properties information from the desktop. Access the file's
     						context menu, choose Properties, and select the PDF tab. Any information
     						you type or edit in this dialog box also appears in the Document Properties
-    						Description when you open the file. </p>
-            <p>To display the document title in the title bar of a user agent: </p>
+    						Description when you open the file.</p>
+            <p>To display the document title in the title bar of a user agent:</p>
             <ol>
-               <li> Select File &gt; Properties </li>
-               <li> Select the Initial View tab </li>
-               <li> In the Window Options section, select Document Title in the Show
-    						pull-down list. </li>
+							<li>Select File &#8594; Properties</li>
+							<li>Select the Initial View tab</li>
+							<li>In the Window Options section, select Document Title in the Show pull-down list.</li>
             </ol>
-            <figure id="figure-document-title-bar">
-               <img src="img/doc-title.jpg" />
-                  
-                  <figcaption>Specifying that the document title be displayed in the title bar. In the Window Options, Show Document Title is selected.</figcaption>
-                
-            </figure>
-            <p>The title is displayed in the title bar, as shown in the image below. </p>
-            <figure id="figure-acrobat-title-bar">
-               <img src="img/title-bar.jpg" />
-                  
-                  <figcaption>Image of the Adobe Acrobat Pro title bar with the title of the document displayed.</figcaption>
-                
-            </figure>
-            <p class="working-example">This example is shown in operation in the <a href="../../working-examples/pdf-document-title/title-bar.pdf">working example of displaying document title in the title bar</a>.</p>
-         
+            <p>The title is now displayed in the title bar.</p>
       </section>
       <section class="example">
-         <h3>A /Title entry in the document information dictionary
-    				of a PDF document</h3>
-         
-            <p>The following code fragment illustrates code that is typical for providing
-    						a /Title entry in a document information dictionary that contains a
-    						document title. </p>
-            <pre xml:space="preserve">1 0 obj   
-   &lt;&lt; /Title (Applying Guerrilla Tactics to Usability Testing by People with Disabilities)    
-      /Author (Mary Smith) 
-      /CreationDate (D:19970915110347-08'00')    
-   &gt;&gt;   
-endobj
-</pre>
-         
+				<h3>A <code>/Title</code> entry in the document information dictionary of a PDF document</h3>
+				<p>The following code fragment illustrates code that is typical for providing a <code>/Title</code> entry in a document information dictionary that contains a document title.</p>
+				<pre xml:space="preserve"><code>1 0 obj   
+  &lt;&lt; /Title (Applying Guerrilla Tactics to Usability Testing by People with Disabilities)    
+    /Author (Mary Smith) 
+    /CreationDate (D:19970915110347-08'00')    
+  &gt;&gt;   
+endobj</code></pre>   
       </section>
-   </section><section id="tests"><h2>Tests</h2>
-      <section class="procedure"><h3>Procedure</h3>
-         <ol>
-            <li>
-               <p>Verify that the title for the document is correctly specified and
+		</section>
+		<section id="tests">
+			<h2>Tests</h2>
+      <section class="procedure">
+				<h3>Procedure</h3>
+				<ol>
+					<li>
+						<p>Verify that the title for the document is correctly specified and
     					displayed in the user agent title bar by applying one of the following:</p>
-               <ul>
-                  <li> Open the PDF document with a screen reader, listening to hear
-    						that the document title is read correctly. </li>
-                  <li> Using a PDF editor, check that the document title is specified.
-    							Select the Initial View tab to check that the title will be displayed. </li>
-                  <li> Use a tool which is capable of showing the /Title entry value
-    								in the document catalog to open the PDF document and view the
-    								/Title entry and /DisplayDocTitle flag settings. </li>
-               </ul>
-            </li>
-         </ol>
-      </section>
-      <section class="results"><h3>Expected Results</h3>
-         <ul>
-            <li>#1 is true. </li>
-         </ul>
-      </section>
-   </section><section id="related"><h2>Related Techniques</h2><ul>
-      <li><a href="../general/G88">G88</a></li>
-   </ul></section><section id="resources"><h2>Resources</h2>
-      
-         <ul>
-            <li>
-                  <a href="http://www.adobe.com/accessibility/products/acrobat.html">PDF and Accessibility</a>
-               </li>
-            <li> Section 14.3.3 (Document Information Dictionary) in <a href="http://www.adobe.com/content/dam/Adobe/en/devnet/pdf/pdfs/PDF32000_2008.pdf">PDF
-    					1.7 (ISO 32000-1)</a> 
-               </li>
-            <li> 
-                  <a href="http://partners.adobe.com/public/developer/en/pdf/PDFReference16.pdf#page=794">PDF
-    					Reference 1.6, TITLE entry of the document information dictionary</a> 
-               </li>
+							<ul>
+								<li>Open the PDF document with a screen reader, listening to hear that the document title is read correctly.</li>
+								<li>Using a PDF editor, check that the document title is specified. Select the Initial View tab to check that the title will be displayed.</li>
+								<li>Use a tool which is capable of showing the <code>/Title</code> entry value in the document catalog to open the PDF document and view the <code>/Title</code> entry and <code>/DisplayDocTitle</code> flag settings.</li>
+							</ul>
+						</li>
+					</ol>
+				</section>
+				<section class="results">
+					<h3>Expected Results</h3>
+					<ul>
+						<li>#1 is true.</li>
          </ul>
-      
-   </section></body></html>
+				</section>
+			</section>
+			<section id="related">
+				<h2>Related Techniques</h2>
+				<ul>
+					<li><a href="../general/G88">G88</a></li>
+				</ul>
+			</section>
+			<section id="resources">
+				<h2>Resources</h2>
+				<ul>
+					<li>Section 14.3.3 (Document Information Dictionary) in <a href="https://opensource.adobe.com/dc-acrobat-sdk-docs/pdfstandards/PDF32000_2008.pdf">PDF 1.7 (ISO 32000-1) (PDF)</a>
+					</li>
+					<li>
+						<a href="https://helpx.adobe.com/acrobat/using/create-verify-pdf-accessibility.html">Create and verify PDF accessibility (Acrobat Pro)</a>
+					</li>
+				</ul>
+			</section>
+		</body>
+	</html>
diff --git a/techniques/pdf/PDF19.html b/techniques/pdf/PDF19.html
index 5026712720..fc6acec9ca 100644
--- a/techniques/pdf/PDF19.html
+++ b/techniques/pdf/PDF19.html
@@ -1,112 +1,90 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Specifying the language for a passage or phrase with the Lang entry
-    			in PDF documents</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Specifying the language for a passage or phrase with the Lang entry
-    			in PDF documents</h1><section class="meta"><p class="id">ID: PDF19</p><p class="technology">Technology: pdf</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
-      <p id="pdf.applicability.general">Tagged PDF documents</p>
-   </section><section id="description"><h2>Description</h2>
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>Specifying the language for a passage or phrase with the Lang entry in PDF documents</title>
+		<link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+	</head>
+	<body>
+		<h1>Specifying the language for a passage or phrase with the Lang entry in <abbr title="Portable Document Format">PDF</abbr> documents</h1>
+		<section class="meta">
+			<p class="id">ID: PDF19</p>
+			<p class="technology">Technology: pdf</p>
+			<p class="type">Type: Technique</p>
+		</section>
+		<section id="applicability">
+			<h2>When to Use</h2>
+			<p id="pdf.applicability.general">Tagged PDF documents</p>
+   </section>
+	 <section id="description">
+		<h2>Description</h2>
       <p>The objective of this technique is to specify the language of a passage,
-    				phrase, or word using the /Lang entry to provide information in the
+    				phrase, or word using the <code>/Lang</code> entry to provide information in the
     				PDF document that user agents need to present text and other linguistic
     				content correctly. This is normally accomplished using a tool for authoring
-    				PDF. </p>
+    				PDF.</p>
       <p>Both assistive technologies and conventional user agents can render
     				text more accurately when the language is identified. Screen readers
-    				can load the correct pronunciation rules.     				As a result, users with disabilities are better able to understand
-    				the content. </p>
+    				can load the correct pronunciation rules. As a result, users with disabilities are better able to understand the content.</p>
       <div class="note">
-         <p>This technique can be used to set the default
-    				language for the entire document if the entire document is contained
-    				in the container or tag. In this case, this technique would apply to
-    				Success Criterion 3.1.1. </p>
+				<p>This technique can be used to set the default language for the entire document if the entire document is contained in the container or tag. In this case, this technique would apply to Success Criterion 3.1.1.</p>
       </div>
-   </section><section id="examples"><h2>Examples</h2>
+		</section>
+		<section id="examples">
+			<h2>Examples</h2>
       <section class="example">
-         <h3>Adding a /Lang entry to specify the language for a paragraph
-    					using Adobe Acrobat 9 Pro</h3>
-         
-            <p>This example is shown with Adobe Acrobat Pro. There are other software tools that perform similar functions. See the list of other software tools in <a href="#pdf_notes_acc-sup_files_applications"></a>.</p>
-            <ol>
-               <li> In the Tools menu, select Advanced Editing. </li>
-               <li> Select the TouchUp Reading Order Tool. </li>
-               <li> Click the Show Order Panel button in the TouchUp Reading Order
-    						Tool </li>
-               <li> Select the Tags tab in the Show Order Panel and select the paragraph
-    							that is in the different language. You can also use the Options menu
-    							in the Tags tab: select Find Tag from Selection. </li>
-               <li> Right-click the selection and select Properties in the context
-    								menu. </li>
-               <li> In the Tags tab in the Properties dialog, select the language
-    									from the drop-down list. </li>
-            </ol>
-            <div class="note">
-               <p>Acrobat includes 16 preset language selections.
-    						If you need to specify a language that is not on the list, such as
-    						Russian, you must type the ISO 639 code for the language, not its name. </p>
-            </div>
-         
-      </section>
+				<h3>Adding a <code>/Lang</code> entry to specify the language for a paragraph using Adobe Acrobat Pro</h3>
+				<p>This example is shown with Adobe Acrobat Pro. There are other software tools that perform similar functions.</p>
+				<ol>
+					<li>In the Navigation Panes, select the Accessibility Tags option.</li>
+					<li>Find the tag that contains the content that is in a different language.</li>
+					<li>Right-click the tag and select Properties in the context menu.</li>
+					<li>In the Tags tab in the Object Properties dialog, select the correct language from the drop-down list.</li>
+				</ol>
+				<div class="note">
+					<p>Acrobat includes numerous preset language selections. If you need to specify a language that is not on the list, such as Russian, you must type the ISO 639-2 code for the language, rather than its name.</p>
+				</div>
+			</section>
       <section class="example">
-         <h3>Adding a /Lang entry to specify the language for a specific
-    				word or phrase using Adobe Acrobat 9 Pro</h3>
-         
-            <p>This example is shown with Adobe Acrobat Pro. There are other software tools that perform similar functions. See the list of other software tools in <a href="#pdf_notes_acc-sup_files_applications"></a>.</p>
+				<h3>Adding a <code>/Lang</code> entry to specify the language for a specific word or phrase using Adobe Acrobat Pro</h3>
+            <p>This example is shown with Adobe Acrobat Pro. There are other software tools that perform similar functions.</p>
             <ol>
-               <li> Select the word or phrase that is in a different language and
-    						create a tag for it in the Reading Order Panel (e.g., Text). </li>
-               <li> Open the Tags tab in the Show Order Panel and select the tagged
-    							word or phrase that is in the different language. You can also use
-    							the Options menu in the Tags tab: select Create Tag from Selection. </li>
-               <li> Right-click the selection and select Properties in the context
-    								menu. </li>
-               <li> In the Tags tab in the Properties dialog, select the language
-    									from the drop-down list. </li>
-            </ol>
+							<li>Select the word or phrase that is in a different language.</li>
+							<li>Open the Accessibility Tags panel and select the Create Tag From Selection option.</li>
+              <li>Find the newly-created tag and right-click on it.</li>
+              <li>In the Tag tab in the Properties dialog, select the language from the drop-down list.</li>
+						</ol>
             <p>When you tag a word or phrase, Acrobat splits the original content
     						into three document content tags: one for the text that precedes your
     						selection, one for the selection, and one for the text that follows
     						the selection. As needed, drag the document content tag for the selected
     						text into position between the other two tags, so that the text reads
     						in the proper order. All three tags must also be at the same level
-    						beneath their parent tag. Drag them into place if they are not. </p>
-            <figure id="figure-specify-lang-word-order-panel">
-               <img src="img/language.jpg" />
-                  
-                  <figcaption>Specifying the language for a word in text using the Show Order Panel of the TouchUp Reading Order tool.</figcaption>
-                
-            </figure>
-            <p class="working-example">This example is shown in operation in the <a href="../../working-examples/pdf-lang-phrase/lang-of-phrase.pdf">working example of marking a specific word or phrase in Acrobat Pro</a>.</p>
-         
+    						beneath their parent tag. Drag them into place if they are not.</p>
+            
+						<div>
+               <img alt="Specifying the language for a word in text using the Accessibility Tags panel.A French word is wrapped in a span element with its language set to French." src="img/acrobat-inline-change-of-language.png" width="770"/>
+            </div>
+            <p class="working-example">This example is shown in operation in the <a href="../../working-examples/pdf-lang-phrase/lang-of-phrase.pdf">working example of marking a specific word or phrase in Acrobat Pro (PDF)</a>.</p>
       </section>
       <section class="example">
-         <h3>Specifying the language for a word or phrase in a PDF
-    				document using a /Lang entry</h3>
-         
-            <p>Below the level of the default document language, the language for
-    						a passage may be specified for the following items: </p>
-            <ul>
-               <li>Marked-content sequences that are not in the structure hierarchy,
-    						through a /Lang entry in a property list attached to the marked-content
-    						sequence with a Span tag. </li>
-               <li>Structure elements of any type, through a /Lang entry in the structure
-    							element dictionary. </li>
-            </ul>
-            <p>The following code fragment illustrates code that is typical for using
-    						the /Lang entry to override the default document language by specifying
-    						a marked-content sequence within a page's content stream: </p>
-            <pre xml:space="preserve">   /P % Start of marked-content sequence
+				<h3>Specifying the language for a word or phrase in a PDF document using a <code>/Lang</code> entry</h3>
+        <p>Below the level of the default document language, the language for a passage may be specified for the following items:</p>
+				<ul>
+					<li>Marked-content sequences that are not in the structure hierarchy, through a /Lang entry in a property list attached to the marked-content sequence with a <code>Span</code> tag.</li>
+          <li>Structure elements of any type, through a <code>/Lang</code> entry in the structure element dictionary.</li>
+				</ul>
+        <p>The following code fragment illustrates code that is typical for using the <code>/Lang</code> entry to override the default document language by specifying a marked-content sequence within a page's content stream:</p>
+            <pre xml:space="preserve"><code>/P % Start of marked-content sequence
    BDC
       (See you later, or in Spanish you would say, ) Tj
       /Span &lt;&lt; /Lang (es-MX) &gt;&gt;% Start of nested marked-content sequence
      BDC
       (Hasta la vista.) Tj
      EMC% End of nested marked-content sequence
-   EMC% End of marked-content sequence
-</pre>
-            <p>The following code fragment illustrates code that is typical for
-    						using the /Lang entry in the structure element dictionary. In this
-    						case, the /Lang entry applies to the marked-content sequence having
-    						an MCID (marked-content identifier) value of 0 within the indicated
-    						page's content stream. </p>
-            <pre xml:space="preserve">1 0 obj% Structure element
+   EMC% End of marked-content sequence</code></pre>
+      
+	 <p>The following code fragment illustrates code that is typical for using the <code>/Lang</code> entry in the structure element dictionary. In this case, the <code>/Lang</code> entry applies to the marked-content sequence having an MCID (marked-content identifier) value of 0 within the indicated page's content stream.</p>
+            <pre xml:space="preserve"><code>1 0 obj% Structure element
   &lt;&lt; /Type /StructElem
     /S /Span% Structure type
     /P /P% Parent in structure hierarchy
@@ -137,66 +115,55 @@ <h3>Specifying the language for a word or phrase in a PDF
   EMC% End of marked-content sequence
  ET
  endstream
- endobj
-</pre>
-         
+ endobj</code></pre>  
       </section>
-   </section><section id="tests"><h2>Tests</h2>
-      <section class="procedure"><h3>Procedure</h3>
-         <ol>
-            <li>
-               <p>Verify that the language of a passage, phrase, or word that differs
+		</section>
+		<section id="tests">
+			<h2>Tests</h2>
+      <section class="procedure">
+				<h3>Procedure</h3>
+        <ol>
+					<li>
+						<p>Verify that the language of a passage, phrase, or word that differs
     					from the language of the surrounding text is correctly specified
-    					by a /Lang entry on an enclosing tag or container:</p>
-               <ul>
-                  <li> Read the PDF document with a screen reader that supports the language of the phrase and the language of the surrounding text, listening to hear
-    						that the text is read in the correct natural language. </li>
-                  <li>Using a PDF editor, select the word or phrase that is in the different language and check that the language is set correctly. </li>
-                  <li> Use a tool which is capable of showing the /Lang entry value
-    								to open the PDF document and view the language settings. </li>
-                  <li> Use a tool that exposes the document through the accessibility
-    									API and verify that the language for the passage or phrase is
-    									set correctly. </li>
-               </ul>
-            </li>
-            <li> Verify that if the container or tag contains the entire document,
-    					the language setting is the language intended as the default for
-    					the document. </li>
-         </ol>
+    					by a <code>/Lang</code> entry on an enclosing tag or container:</p>
+						<ul>
+							<li> Read the PDF document with a screen reader that supports the language of the phrase and the language of the surrounding text, listening to hear
+    						that the text is read in the correct natural language.</li>
+							<li>Using a PDF editor, select the word or phrase that is in the different language and check that the language is set correctly.</li>
+              <li>Use a tool which is capable of showing the <code>/Lang</code> entry value to open the PDF document and view the language settings.</li>
+              <li>Use a tool that exposes the document through the accessibility <abbr title="Application Programming Interface">API</abbr> and verify that the language for the passage or phrase is set correctly.</li>
+            </ul>
+          </li>
+          <li>Verify that if the container or tag contains the entire document, the language setting is the language intended as the default for the document.</li>
+				</ol>
       </section>
-      <section class="results"><h3>Expected Results</h3>
-         <ul>
-            <li>#1 and #2 are true. </li>
-         </ul>
+			<section class="results">
+				<h3>Expected Results</h3>
+				<ul>
+					<li>#1 and #2 are true.</li>
+				</ul>
       </section>
-   </section><section id="related"><h2>Related Techniques</h2><ul>
-      <li><a href="../pdf/PDF16">PDF16</a></li>
-   </ul></section><section id="resources"><h2>Resources</h2>
-      
-         <ul>
-            <li> Section 14.9.2 (Natural Language Specification) in <a href="http://www.adobe.com/content/dam/Adobe/en/devnet/pdf/pdfs/PDF32000_2008.pdf">PDF
-    					1.7 (ISO 32000-1)</a> 
-               </li>
-            <li> 
-                  <a href="http://www.loc.gov/standards/iso639-2/php/code_list.php">ISO
-    						639-2 Codes</a> 
-               </li>
-            <li> 
-                  <a href="http://partners.adobe.com/public/developer/en/pdf/PDFReference16.pdf#page=886">PDF
-    							Reference 1.6, 10.8.1 Natural Language Specification (PDF 8.7 Mb)</a> 
-               </li>
-            <li> 
-                  <a href="http://pdf.editme.com/pdfua-naturalLanguageSpecification">PDF
-    								Standards: Natural Language Specification</a> 
-               </li>
-            <li> 
-                  <a href="http://www.adobe.com/content/dam/Adobe/en/accessibility/products/acrobat/pdfs/A9-accessible-pdf-from-word.pdf">Adobe®
-    									Acrobat® 9 Pro Accessibility Guide: Creating Accessible PDF from
-    									Microsoft® Word</a> 
-               </li>
-            <li>
-                  <a href="http://www.adobe.com/accessibility/products/acrobat.html">PDF and Accessibility</a>
-               </li>
-         </ul>
-      
-   </section></body></html>
+		</section>
+		<section id="related">
+			<h2>Related Techniques</h2>
+			<ul>
+      	<li><a href="../pdf/PDF16">PDF16</a></li>
+			</ul>
+		</section>
+		<section id="resources">
+			<h2>Resources</h2>
+			<ul>
+				<li>Section 14.9.2 (Natural Language Specification) in <a href="https://opensource.adobe.com/dc-acrobat-sdk-docs/pdfstandards/PDF32000_2008.pdf">PDF 1.7 (ISO 32000-1) (PDF)</a>
+				</li>
+				<li>
+					<a href="https://www.loc.gov/standards/iso639-2/php/code_list.php">ISO 639-2 Codes</a> 
+				</li>
+				<li>
+					<a href="https://helpx.adobe.com/acrobat/using/create-verify-pdf-accessibility.html">Create and verify PDF accessibility (Acrobat Pro)</a>
+				</li>
+			</ul>
+   </section>
+	</body>
+	</html>
+	
\ No newline at end of file
diff --git a/techniques/pdf/PDF2.html b/techniques/pdf/PDF2.html
index ac2d0c13f7..c1340c7fb6 100644
--- a/techniques/pdf/PDF2.html
+++ b/techniques/pdf/PDF2.html
@@ -1,187 +1,138 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Creating bookmarks in PDF documents</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Creating bookmarks in PDF documents</h1><section class="meta"><p class="id">ID: PDF2</p><p class="technology">Technology: pdf</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>Creating bookmarks in PDF documents</title>
+		<link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+	</head>
+	<body>
+		<h1>Creating bookmarks in <abbr title="Portable Document Format">PDF</abbr> documents</h1>
+		<section class="meta">
+			<p class="id">ID: PDF2</p>
+			<p class="technology">Technology: pdf</p>
+			<p class="type">Type: Technique</p>
+		</section>
+		<section id="applicability">
+			<h2>When to Use</h2>
       <p id="pdf.applicability.general">Tagged PDF documents</p>
-   </section><section id="description"><h2>Description</h2>
-      <p>The intent of this technique is to make it possible for users to locate
-    				content using bookmarks (<em>outline entries</em> in an Outline dictionary)
-    				in long documents. </p>
-      <p>A person with cognitive disabilities may prefer a hierarchical outline
-    				that provides an overview of the document rather than reading and traversing
-    				through many pages. This is also a conventional means of navigating
-    				a document that benefits all users. </p>
-   </section><section id="examples"><h2>Examples</h2>
+		</section>
+		<section id="description">
+			<h2>Description</h2>
+      <p>The intent of this technique is to make it possible for users to locate content using bookmarks (<i>outline entries</i> in an Outline dictionary) in long documents.</p>
+      <p>A person with cognitive disabilities may prefer a hierarchical outline that provides an overview of the document rather than reading and traversing through many pages. This is also a conventional means of navigating a document that benefits all users.</p>
+		</section>
+		<section id="examples">
+			<h2>Examples</h2>
       <section class="example">
-         <h3>Converting a table of contents created with Microsoft
-    					Word 2007 and creating bookmarks for Adobe Reader 9 and Acrobat 9 Pro</h3>
-         
-            <p>This example is shown with Microsoft Word and Adobe Acrobat Pro. There are other software tools that perform similar functions. See the list of other software 
-tools in <a href="#pdf_notes_acc-sup_files_applications"></a>.</p>
-            <ol>
-               <li>
-                  <p> Create a table of contents at the beginning of the Word document. </p>
-                  <figure id="figure-reference-tab">
-                     <img src="img/word-toc.jpg" />
-                        
-                        <figcaption>Reference tab on Word ribbon, showing Table of Contents tool.</figcaption>
-                      
-                  </figure>
-               </li>
-               <li>
-                  <p> Use Save as... &gt; Adobe PDF to convert the Word document to
-    						PDF, specifying both of the following:</p>
-                  <ul>
-                     <li> Enable Accessibility and Reflow with Tagged Adobe PDF </li>
-                     <li> Convert Word Headings into Bookmarks </li>
-                  </ul>
-               </li>
-            </ol>
-            <p>The table-of-contents entries in the converted document will be linked
-    						to the headings in the document. </p>
-            <p>In addition, the headings will appear as PDF Bookmarks in the left-hand
-    						Navigation pane. </p>
-            <figure id="figure-toc-bookmarks">
-               <img src="img/bookmarks.jpg" />
-                  
-                  <figcaption>PDF document showing the Table of Contents and Bookmarks created from the headings in a Word document.</figcaption>
-                 
-            </figure>
-            <p>If the document provides a glossary and/or index, these sections
-    						should have headings that appear in the table of contents (and thus
-    						as bookmarks in the Navigation pane). The table of contents also
-    						should be marked up with a heading so it is bookmarked as well. </p>
-            <p>If this markup has not been done in the authoring tool, Adobe Acrobat
-    						Pro can be used to provide the tags. See <a href="#PDF9"></a> if
-    							you need to modify converted headings or add new ones. </p>
-            <p class="working-example">This example is shown in operation in the <a href="../../working-examples/pdf-bookmarks/bookmarks.docx">working example of creating bookmarks with Word 2007</a>.</p>
-         
+				<h3>Converting a table of contents created with Microsoft Word to bookmarks in a PDF</h3>
+				<p>This example is shown with Microsoft Word and Adobe Acrobat Pro. There are other software tools that perform similar functions.</p>
+				<ol>
+					<li>Create a table of contents at the beginning of the Word document.</li>
+					<li>Use Save as... &#8594; PDF to convert the Word document to PDF.</li>
+				</ol>
+				<p>The table-of-contents entries in the converted document will be linked to the headings in the document. In addition, the headings will appear as PDF Bookmarks in the Acrobat navigation pane.</p>
+				<div>
+					<img alt="PDF document showing the Table of Contents and Bookmarks created from the headings in a Word document." height="192" src="img/bookmarks.png" width="770"/>
+				</div>
+				<p>If the document provides a glossary and/or index, these sections should have headings that appear in the table of contents (and thus as bookmarks in the Navigation pane). The table of contents also should be marked up with a heading so it is bookmarked as well.</p>
+				<p>If this markup has not been done in the authoring tool, Adobe Acrobat Pro can be used to provide the tags. See <a href="../pdf/PDF9">PDF9</a> if you need to modify converted headings or add new ones.</p>
+				<p class="working-example">This example is shown in operation in the <a href="../../working-examples/pdf-bookmarks/bookmarks.docx">working example of creating bookmarks with Word</a>.</p> 
       </section>
       <section class="example">
-         <h3>Converting a table of contents created with OpenOffice.org
-    					Writer 2.2 and creating bookmarks for Adobe Reader 9 and Acrobat 9
-    					Pro</h3>
-         
-            <p>This example is shown with OpenOffice.org Writer and Adobe Acrobat Pro and Reader. There are other software tools that perform similar functions. See the list of other software 
-tools in <a href="#pdf_notes_acc-sup_files_applications"></a>.</p>
-            <ol>
-               <li>
-                  <p> Create a table of contents at the beginning of the OpenOffice.org
-    						Writer document:</p>
-                  <ul>
-                     <li> Insert &gt; Indexes and Tables... &gt; Indexes and Tables &gt; Insert
-    							Index/Table </li>
-                  </ul>
-               </li>
-               <li> Use File &gt; Export as PDF... to convert the document to PDF,
-    						specifying Tagged PDF in the Options dialog. </li>
-            </ol>
-            <figure id="figure-insert-index">
-               <img src="img/oo-toc.jpg" />
-                  
-                  <figcaption>Image of the Insert Index/Table dialog in OpenOffice.org Writer.</figcaption>
-                
-            </figure>
-            <p>The table-of-contents entries in the converted document will be linked
-    						to the headings in the document, and will appear as PDF Bookmarks in
-    						the left-hand Navigation pane. The OpenOffice.org Table of Contents
-    						and Bookmarks look the same as they appeared in Example 1. </p>
+				<h3>Converting a table of contents created with OpenOffice and Writer to bookmarks in a PDF</h3>
+				<p>This example is shown with OpenOffice Writer and Adobe Acrobat Pro and Reader. There are other software tools that perform similar functions.</p>
+				<ol>
+					<li>
+						<p>Using the Styles and Formatting dialog found in the Format option, or by press F11, select the text to appear in the table of contents and then select a Heading.</p>
+						<div>
+							<img alt="A screen grab of the Styles and Formatting dialog" src="img/oostyles.jpg"/>
+						</div>
+						<p>To create a table of contents at the beginning of the OpenOffice.org Writer document:</p>
+						<ul>
+							<li>Move your cursor to the appropriate place in the document to insert the table of contents.</li>
+							<li>Insert &#8594; Indexes and Tables... &#8594; Indexes and Tables &#8594; Insert Index/Table</li>
+							<li>Use File &#8594; Export as PDF... to convert the document to PDF, specifying Tagged PDF in the Options dialog.</li>
+						</ul>
+					</li>
+				</ol>
+				<div>
+					<img alt="A screen grab of the Insert Index/Table dialog in OpenOffice.org Writer." src="img/oo-toc.jpg"/>
+				</div>
+				<p>The table-of-contents entries in the converted document will be linked to the headings in the document, and will appear as PDF Bookmarks in the left-hand Navigation pane. The OpenOffice.org Table of Contents and Bookmarks look the same as they appeared in Example 1. </p>
       	<p class="working-example">This example is shown in operation in the <a href="../../working-examples/pdf-bookmarks/bookmarks.odt">working example of creating bookmarks with OpenOffice Writer</a>.</p>
-         
-      </section>
+			</section>
       <section class="example">
-         <h3>Adding bookmarks using Adobe Acrobat 9 Pro after conversion</h3>
-         
-            <p>This example is shown with Adobe Acrobat Pro. There are other software tools that perform similar functions. See the list of other software 
-tools in <a href="#pdf_notes_acc-sup_files_applications"></a>.</p>
-            <p>After conversion to tagged PDF, you may decide to add bookmarks that
-    						were not automatically generated. Like the converted bookmarks, tagged
-    						bookmarks use the underlying structural information in the document. </p>
-            <ol>
-               <li> In the Bookmarks panel, choose the options menu, then choose New
-    						Bookmarks From Structure... </li>
-               <li> From the Structure Elements dialog, select the elements you want
-    							specified as tagged bookmarks. </li>
-            </ol>
-            <p>The image below shows the Bookmarks options menu. </p>
-            <figure id="figure-bookmarks-options">
-               <img src="img/bookmark1.jpg" />
-                  
-                  <figcaption>The Bookmarks options menu.</figcaption>
-                
-            </figure>
-            <p>The next image shows the selection of links in the document for bookmarking. </p>
-            <figure id="figure-bookmarks-links">
-               <img src="img/bookmark2.jpg" />
-                  
-                  <figcaption>The tagged elements that can be used for bookmarking, with 'links' selected.</figcaption>
-                
-            </figure>
-            <p>The tagged bookmarks are nested under a new, untitled bookmark. Access
-    						the context menu for the new bookmark and select the Rename option
-    						to rename the new bookmark, as shown in the following image. </p>
-            <figure id="figure-bookmarks-hyperlinks">
-               <img src="img/link-bookmark.jpg" />
-                  
-                  <figcaption>The bookmarks for the hyperlink in the document.</figcaption>
-                
-            </figure>
+				<h3>Adding bookmarks using Adobe Acrobat Pro after conversion</h3>
+				<p>This example is shown with Adobe Acrobat Pro. There are other software tools that perform similar functions.</p>
+				<p>After conversion to tagged PDF, you may decide to add bookmarks that were not automatically generated. Like the converted bookmarks, tagged bookmarks use the underlying structural information in the document.</p>
+				<ol>
+					<li>In the Bookmarks panel, choose the options menu, then choose New Bookmarks From Structure...</li>
+					<li>From the Structure Elements dialog, select the elements you want specified as tagged bookmarks.
+						<img alt="The Bookmarks options menu." height="656" src="img/new-bookmarks-from-structure.png" width="375"/>
+					</li>
+					<li>The tagged bookmarks are nested under a new, untitled bookmark. Access the context menu for the new bookmark and select the Rename option to rename the new bookmark.</li>
+				</ol>
       	<p class="working-example">This example is shown in operation in the <a href="../../working-examples/pdf-bookmarks/bookmarks.pdf">working example of creating bookmarks with Acrobat Pro</a>.</p>
-         
-      </section>
-      <section class="example">
-         <h3>Creating bookmarks with the outline hierarchy</h3>
-         
-            <p>The following code fragment illustrates part of an outline hierarchy
-    						used to create bookmarks This is typically accomplished by an authoring
-    						tool. </p>
-            <pre xml:space="preserve">121 0 obj
- &lt;&lt; /Type /Outlines
+			</section>
+			<section class="example">
+				<h3>Creating bookmarks with the outline hierarchy</h3> 
+				<p>The following code fragment illustrates part of an outline hierarchy used to create bookmarks This is typically accomplished by an authoring tool.</p>
+<pre xml:space="preserve"><code>121 0 obj
+  &lt;&lt; /Type /Outlines
     /First 22 0 R
     /Last 29 0 R
     /Count 6
- &gt;&gt;
+  &gt;&gt;
 endobj
 22 0 obj
- &lt;&lt; /Title (Applying Guerrilla Tactics to Usability Testing by People with Disabilities)
+  &lt;&lt; /Title (Applying Guerrilla Tactics to Usability Testing by People with Disabilities)
     /Parent 21 0 R
     /Next 29 0 R
     /First 25 0 R
     /Last 28 0 R
     /Count 4
     /Dest [3 0 R /XYZ 0 792 0]
- &gt;&gt;
+  &gt;&gt;
 endobj
 25 0 obj
- &lt;&lt; /Title (Getting started)
+  &lt;&lt; /Title (Getting started)
     /Parent 22 0 R
     /Next 26 0 R
     /Dest [3 0 R /XYZ null 701 null]
- &gt;&gt;
-endobj
-</pre>
-         
-      </section>
-   </section><section id="tests"><h2>Tests</h2>
-      <section class="procedure"><h3>Procedure</h3>
-         <ol>
-            <li> Check that the Bookmarks panel displays bookmarks. </li>
-            <li> Check that the bookmarks link to the correct sections in the document. </li>
-         </ol>
-      </section>
-      <section class="results"><h3>Expected Results</h3>
-         <ul>
-            <li>Check #1 and Check #2 are true. </li>
-         </ul>
-      </section>
-   </section><section id="related"><h2>Related Techniques</h2><ul>
-      <li><a href="../general/G64">G64</a></li>
-   </ul></section><section id="resources"><h2>Resources</h2>
-      
+  &gt;&gt;
+endobj</code></pre>
+         </section>
+				</section>
+				<section id="tests">
+					<h2>Tests</h2>
+					<section class="procedure">
+						<h3>Procedure</h3>
+						<ol>
+							<li>Check that the Bookmarks panel displays bookmarks.</li>
+							<li>Check that the bookmarks link to the correct sections in the document.</li>
+						</ol>
+					</section>
+					<section class="results">
+						<h3>Expected Results</h3>
+						<ul>
+							<li>Check #1 and Check #2 are true.</li>
+						</ul>
+					</section>
+				</section>
+				<section id="related">
+					<h2>Related Techniques</h2>
+					<ul>
+						<li><a href="../general/G64">G64</a></li>
+					</ul>
+				</section>
+				<section id="resources">
+					<h2>Resources</h2>
          <ul>
-            <li> Section 12.3.3 (Document Outline) in <a href="http://www.adobe.com/content/dam/Adobe/en/devnet/pdf/pdfs/PDF32000_2008.pdf">PDF
-    					1.7 (ISO 32000-1)</a> 
-               </li>
-            <li>
-                  <a href="http://www.adobe.com/accessibility/products/acrobat.html">PDF and Accessibility</a>
-               </li>
-         </ul>
-      
-   </section></body></html>
+					<li>Section 12.3.3 (Document Outline) in <a href="https://opensource.adobe.com/dc-acrobat-sdk-docs/pdfstandards/PDF32000_2008.pdf">PDF 1.7 (ISO 32000-1) (PDF)</a>
+					</li>
+					<li>
+						<a href="https://webaim.org/techniques/acrobat/acrobat">Acrobat and Accessibility</a>
+					</li>
+				</ul>
+			</section>
+		</body>
+</html>
diff --git a/techniques/pdf/PDF20.html b/techniques/pdf/PDF20.html
index 043e7f0d11..94e8b70701 100644
--- a/techniques/pdf/PDF20.html
+++ b/techniques/pdf/PDF20.html
@@ -1,6 +1,22 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using Adobe Acrobat Pro's Table Editor to repair mistagged tables</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Using Adobe Acrobat Pro's Table Editor to repair mistagged tables</h1><section class="meta"><p class="id">ID: PDF20</p><p class="technology">Technology: pdf</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
-      <p>Tagged PDF documents with tables.</p>
-   </section><section id="description"><h2>Description</h2>
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>Using Adobe Acrobat Pro's Table Editor to repair mistagged tables</title>
+		<link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+	</head>
+	<body>
+		<h1>Using Adobe Acrobat Pro's Table Editor to repair mistagged tables</h1>
+		<section class="meta">
+			<p class="id">ID: PDF20</p>
+			<p class="technology">Technology: pdf</p>
+			<p class="type">Type: Technique</p>
+		</section>
+		<section id="applicability">
+			<h2>When to Use</h2>
+      <p>Tagged <abbr title="Portable Document Format">PDF</abbr> documents with tables.</p>
+		</section>
+		<section id="description">
+			<h2>Description</h2>
       <p>The purpose of this technique is to show how table cells in PDF documents
     				can be marked up so that the logical relationships among rows and columns
     				are preserved and recognized by assistive technology. This is typically
@@ -8,108 +24,60 @@
       <p>However, tables converted to PDF may have incorrectly merged or split
     				table cells, even if they were marked up correctly in the authoring
     				tool. Authors can ensure that table cells are structured properly by
-    				using the Table Editor in Adobe Acrobat Pro's TouchUp Reading Order
-    				tool. </p>
-   </section><section id="examples"><h2>Examples</h2>
+    				using the Table Editor in Adobe Acrobat Pro's Reading Order
+    				tool.</p>
+		</section>
+		<section id="examples">
+			<h2>Examples</h2>
       <section class="example">
-         <h3>Repairing table cells using the Table Editor in the TouchUp
-    					Reading Order tool in Adobe Acrobat 9 Pro</h3>
-         
-            <p>This example is shown with Adobe Acrobat Pro. There are other software tools that perform similar functions. See the list of other software tools in <a href="#pdf_notes_acc-sup_files_applications"></a>.</p>
-            <p>This example uses a table that was marked up correctly when it was
-    						created in Microsoft Word. Some table headers span two rows in the
-    						header row; one table header spans two columns. </p>
-            <figure id="figure-good-table">
-               <img src="img/table-word.jpg" />
-                  
-                  <figcaption>A correctly marked up table in Word, with complex headers, before conversion to PDF.</figcaption>
-                 
-            </figure>
-            <p>To check the table in the PDF document: </p>
-            <ol>
-               <li> Advanced &gt; Accessibility &gt; TouchUp Reading Order... </li>
-               <li> Select the table by clicking the number in the top left hand corner 
-    						of the table (3 in the reading order in the image below). </li>
-               <li> Select the Table Editor button on the TouchUp Reading Order panel.
-    						The table cells will be outlined in red and labeled with their tags.
-    						The red outlines may not exactly match up to the table cells but
-    						you should be able to determine if the cells are tagged correctly. </li>
-            </ol>
-            <p>The following image shows the example table in the TouchUp Reading
-    						Order tool. Note that the Results header appears to span two sub-headers
-    						and the other headers to the left span the two rows in the Results
-    						header. </p>
-            <figure id="figure-turo-table">
-               <img src="img/table-1.jpg" />
-                  
-                  <figcaption>Table in the TouchUp Reading Order tool. As in Word, the table Results header appears to span two sub-headers and the other headers to the left span the two rows in the Results header.</figcaption>
-                 
-            </figure>
-            <p>The following images shows the example table in the Table Editor.
-    						The cells are outlined in red, and the tab for each cell is displayed.
-    						Upon conversion, the Results header was incorrectly split and does
-    						not span its two sub-headers. The headers to the right were incorrectly
-    						split into 2 cells each and do not span the Results headers. In addition,
-    						the incorrectly split cells were merged into one cell. </p>
-            <figure id="figure-example-table">
-               <img src="img/table-2.jpg" />
-                  
-                  <figcaption>Example table in the Table Editor, showing table cells and the tag for each cell. The Table Editor shows the Results header was incorrectly split and does not span its two sub-headers; and other headers were also incorrectly split and merged.</figcaption>
-                 
-            </figure>
-            <p>To repair the Results header: </p>
-            <ol>
-               <li> Select the header in the table (it will be outlined in blue when
-    						selected) </li>
-               <li> Access the context menu </li>
-               <li> Select Table Cell Properties... </li>
-               <li> In the Table Cell Properties dialog, change the Column Span from
-    							1 to 2 </li>
-               <li> Press OK. You'll get a warning that the change might result in
-    								a malformed table structure. In this case, the change is correct.
-    								The cell you changed should change color to show the new span, as
-    								shown in the following image. </li>
-            </ol>
-            <figure id="figure-table-cells-props">
-               <img src="img/table-2a.jpg" />
-                  
-                  <figcaption>The Table Cells Properties dialog showing the Column Span changed to 2 to repair a mistagged header in this example.</figcaption>
-                 
-            </figure>
-            <p>Similarly, to repair the incorrectly split header cells to the left
-    						of Results header: </p>
-            <ol>
-               <li> Select the top cell in the column (it will be outlined in blue
-    						when selected) </li>
-               <li> Access the context menu </li>
-               <li> Select Table Cell Properties... </li>
-               <li> In the Table Cell Properties dialog, change the Row Span from
-    							1 to 2 </li>
-               <li> Press OK. The following image shows the correction being made
-    								to the last header cell, with the corrected header cells to its left. </li>
-            </ol>
-            <figure id="figure-row-span-props">
-               <img src="img/table-2b.jpg" />
-                  
-                  <figcaption>The Table Cells Properties dialog showing the Row Span changed to 2 to repair a mistagged header in this example.</figcaption>
-                 
-            </figure>
-            <p>The following image shows the repaired example table. </p>
-            <figure id="figure-repaired-table">
-               <img src="img/table-3a.jpg" />
-                  
-                  <figcaption>The repaired example table in the Table Editor. It now has the same table structure as the original Word table.</figcaption>
-                 
-            </figure>
-      	<p class="working-example">This example is shown in operation in the <a href="../../working-examples/pdf-table/table.docx">working example of repairing table structure (Word file)</a> and <a href="../../working-examples/pdf-table/table.pdf">working example of repairing table structure (PDF file)</a>.</p>
-         
+				<h3>Repairing table cells using the table editor in the Reading Order tool in Adobe Acrobat Pro</h3>
+        <p>This example is shown with Adobe Acrobat Pro. There are other software tools that perform similar functions.</p>
+        <p>This example uses a table that was marked up correctly when it was created in Microsoft Word. Some table headers span two rows in the header row; one table header spans two columns.</p>
+				<div>
+					<img alt="A correctly marked up table in Word, with complex headers, before conversion to PDF." src="img/word-complex-table.png" width="641"/>
+				</div>
+				<p>To check the table in the PDF document:</p>
+				<ol>
+					<li>Advanced &#8594; Accessibility &#8594; Reading Order...</li>
+					<li>Select the table by clicking the number in the top left hand corner of the table (3 in the reading order in the image below).</li>
+					<li>Select the Table Editor button on the Reading Order panel. The table cells will be outlined in red and labeled with their tags. The red outlines may not exactly match up to the table cells but you should be able to determine if the cells are tagged correctly.</li>
+        </ol>
+				<p>The following image shows the example table in the Reading Order tool.</p>
+        <div>
+					<img alt="Table in the Reading Order tool." src="img/word-complex-table-acrobat-1.png" width="770"/>
+				</div>
+        <p>The following images shows the example table in the Table Editor. The cells are outlined in red, and the tab for each cell is displayed. Upon conversion, the Results headers were correctly split, but most of the table headers were incorrectly tagged as table data cells.</p>
+      	<div>
+					<img alt="Example table in the Table Editor, showing table cells and the tag for each cell. Only the first column's headers were correctly tagged as th cells" src="img/word-complex-table-acrobat-2.png" width="770"/>
+				</div>
+        <p>To repair the header cells:</p>
+        <ol>
+					<li>Select the cell in the table (it will be outlined in blue when selected)</li>
+          <li>Right click the cell and select Table Cell Properties...</li>
+          <li>In the Table Cell Properties dialog, change Data Cell to Header Cell.</li>
+        </ol>
+        <div>
+					<img alt="The Table Cells Properties dialog showing the data cell changed to a header cell." src="img/word-complex-table-acrobat-3.png" width="770"/>
+				</div>
+
+				<p>Similarly, to repair the incorrectly split header cells to the left of Results header:</p>
+
+				<ol>
+					<li>Select the top cell in the column (it will be outlined in blue when selected)</li>
+					<li>Right click the cell and select Table Cell Properties...</li>
+					<li>In the Table Cell Properties dialog, change the Row Span from 1 to 2</li>
+				</ol>
+
+        <p>The following image shows the repaired example table.</p>
+            <div>
+               <img alt="The repaired example table in the Table Editor. It now has the same table structure as the original Word table." src="img/word-complex-table-acrobat-4.png" width="770"/>
+						</div>
+      	<p class="working-example">This example is shown in operation in the <a href="../../working-examples/pdf-complex-table/complex-table.docx">working example of repairing table structure (Word file)</a> and <a href="../../working-examples/pdf-complex-table/complex-table.pdf">working example of repairing table structure (PDF file)</a>.</p>
       </section>
       <section class="example">
          <h3>Marking up a table using table structure elements</h3>
-         
-            <p>The following code fragment illustrates code that is typical for a
-    					simple table (header row and data row) such as shown in Examples 1-3: </p>
-            <pre xml:space="preserve">95 0 obj                %Structure element for a table
+				 <p>The following code fragment illustrates code that is typical for a simple table (header row and data row) such as shown in Examples 1-3:</p>
+            <pre xml:space="preserve"><code>95 0 obj                %Structure element for a table
  &lt;&lt; 
   /A 39 0 R
   /K[96 0 R 101 0 R 106 0 R 111 0 R]
@@ -140,53 +108,48 @@ <h3>Marking up a table using table structure elements</h3>
   /S/TD                  %standard structure type is table data
   /Pg 8 0 R
  &gt;&gt; 
-endobj
-</pre>
-         
-      </section>
-   </section><section id="tests"><h2>Tests</h2>
-      <section class="procedure"><h3>Procedure</h3>
-         <ol>
-            <li>
-               <p>For a table that has been repaired with the Table Editor, confirm
-    					one of the following:</p>
-               <ul>
-                  <li> Read the PDF document with a screen reader, listening to hear
-    						that the tabular information is presented in a way that preserves
-    						logical relationships among the table header and data cells.
-    						(Configure the screen reader to not use heuristics to read table
-    						header cells.) </li>
-                  <li> Using a PDF editor, verify that the appropriate <em>TR</em>, <em>TH</em>,
-    							and <em>TD</em> tags are in the proper reading order and hierarchy
-    							in the table tree. </li>
-                  <li> Use a tool which is capable of showing the table elements
-    								to open the PDF document, view the table structure, and verify
-    								that it contains the appropriate TR, TH, and TD structures. </li>
-                  <li> Use a tool that exposes the document through the accessibility
-    									API, and verify that the table structure contains the appropriate
-    									TR, TH, and TD structures, and that they are in the proper reading
-    									order and hierarchy. </li>
-               </ul>
-            </li>
-         </ol>
+endobj</code></pre>   
       </section>
-      <section class="results"><h3>Expected Results</h3>
-         <ul>
-            <li>#1 is true. </li>
-         </ul>
+		</section>
+		<section id="tests">
+			<h2>Tests</h2>
+      <section class="procedure">
+				<h3>Procedure</h3>
+        <ol>
+					<li>
+						<p>For a table that has been repaired with the Table Editor, confirm one of the following:</p>
+						<ul>
+							<li>Read the PDF document with a screen reader, listening to hear that the tabular information is presented in a way that preserves logical relationships among the table header and data cells. (Configure the screen reader to not use heuristics to read table header cells.)</li>
+							<li>Using a PDF editor, verify that the appropriate <code>TR</code>, <code>TH</code>, and <code>TD</code> tags are in the proper reading order and hierarchy in the table tree.</li>
+							<li>Use a tool which is capable of showing the table elements to open the PDF document, view the table structure, and verify that it contains the appropriate <code>TR</code>, <code>TH</code>, and <code>TD</code> structures.</li>
+							<li>Use a tool that exposes the document through the accessibility <abbr title="Application Programming Interface">API</abbr>, and verify that the table structure contains the appropriate <code>TR</code>, <code>TH</code>, and <code>TD</code> structures, and that they are in the proper reading order and hierarchy.</li>
+						</ul>
+					</li>
+				</ol>
+			</section>
+      <section class="results">
+				<h3>Expected Results</h3>
+				<ul>
+					<li>#1 is true.</li>
+				</ul>
       </section>
-   </section><section id="related"><h2>Related Techniques</h2><ul>
-      <li><a href="../html/H51">H51</a></li>
-      <li><a href="../pdf/PDF6">PDF6</a></li>
-   </ul></section><section id="resources"><h2>Resources</h2>
-      
-         <ul>
-            <li>
-                  <a href="http://www.adobe.com/accessibility/products/acrobat.html">PDF and Accessibility</a>
-               </li>
-            <li> 14.8.4.3.4 (Table Elements) in <a href="http://www.adobe.com/content/dam/Adobe/en/devnet/pdf/pdfs/PDF32000_2008.pdf">PDF
-    					1.7 (ISO 32000-1)</a> 
-               </li>
-         </ul>
-      
-   </section></body></html>
+		</section>
+		<section id="related">
+			<h2>Related Techniques</h2>
+			<ul>
+      	<li><a href="../html/H51">H51</a></li>
+      	<li><a href="../pdf/PDF6">PDF6</a></li>
+			</ul>
+		</section>
+		<section id="resources">
+			<h2>Resources</h2>
+			<ul>
+				<li>Section 14.8.4.3.4 (Table Elements) in <a href="https://opensource.adobe.com/dc-acrobat-sdk-docs/pdfstandards/PDF32000_2008.pdf">PDF 1.7 (ISO 32000-1) (PDF)</a>
+				</li>
+				<li>
+					<a href="https://helpx.adobe.com/acrobat/using/create-verify-pdf-accessibility.html">Create and verify PDF accessibility (Acrobat Pro)</a>
+				</li>
+			</ul>
+   </section>
+	</body>
+	</html>
diff --git a/techniques/pdf/PDF21.html b/techniques/pdf/PDF21.html
index d1403e701b..86a1532a07 100644
--- a/techniques/pdf/PDF21.html
+++ b/techniques/pdf/PDF21.html
@@ -1,243 +1,104 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using List tags for lists in PDF documents</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Using List tags for lists in PDF documents</h1><section class="meta"><p class="id">ID: PDF21</p><p class="technology">Technology: pdf</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>Using List tags for lists in PDF documents</title>
+		<link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+	</head>
+	<body>
+		<h1>Using List tags for lists in <abbr title="Portable Document Format">PDF</abbr> documents</h1>
+		<section class="meta">
+			<p class="id">ID: PDF21</p>
+			<p class="technology">Technology: pdf</p>
+			<p class="type">Type: Technique</p>
+		</section>
+		<section id="applicability">
+			<h2>When to Use</h2>
       <p>Tagged PDF documents with lists.</p>
-   </section><section id="description"><h2>Description</h2>
-      <p>The intent of this technique is to create lists of related items using
-    				list elements appropriate for their purposes. PDF files containing
-    				lists are normally created or repaired using a tool for authoring PDF. </p>
-      <p>When markup is used that visually formats items as a list but does
-    				not indicate the list relationship, users may have difficulty navigating
-    				the information. An example of such visual formatting is simply using
-    				line-breaks to separate list items. </p>
-      <p>Some assistive technologies allow users to navigate from list to list
-    				or item to item. If the lists are not correctly formatted with list
-    				tags, these users will have difficulty understanding the list content. </p>
-      <p>The easiest way to create lists in PDF content is to format them properly
-    				using list markup in the authoring tool, for example, Microsoft Word
-    				or OpenOffice.org Writer. However, if you do not have access to the
-    				source file and authoring tool, you can use Acrobat Pro's TouchUp Reading
-    				Order tool and the Tags panel. </p>
-      <p>The <a href="http://www.adobe.com/content/dam/Adobe/en/devnet/pdf/pdfs/PDF32000_2008.pdf">PDF
-    				specification</a> defines list structure in section 14.8.4.3.3 (List
-    				Elements). The structure types for lists in PDF documents are: </p>
+		</section>
+		<section id="description">
+			<h2>Description</h2>
+      <p>The intent of this technique is to create lists of related items using list elements appropriate for their purposes. PDF files containing lists are normally created or repaired using a tool for authoring PDF.</p>
+      <p>When markup is used that visually formats items as a list but does not indicate the list relationship, users may have difficulty navigating the information. An example of such visual formatting is simply using line-breaks to separate list items.</p>
+      <p>Some assistive technologies allow users to navigate from list to list or item to item. If the lists are not correctly formatted with list tags, these users will have difficulty understanding the list content.</p>
+      <p>The easiest way to create lists in PDF content is to format them properly using list markup in the authoring tool, for example, Microsoft Word or OpenOffice Writer. However, if you do not have access to the source file and authoring tool, you can use Acrobat Pro's Reading Order tool and the Tags panel.</p>
+      <p>The structure types for lists in PDF documents are:</p>
       <ul>
-         <li> L - the List tag, which contains one or more LI tags. </li>
-         <li> LI - the List Item tag. List item tags can contain Lbl and LBody
-    				tags. </li>
-         <li> Lbl - the list item label. Contains distinguishing information
-    					such as a item number or bullet character. </li>
-         <li> LBody - the list item body. Contains list item content, or in
-    						the case of a nested list, it may contain additional List tag trees. </li>
+				<li><code>L</code> - the List tag, which contains one or more <code>LI</code> tags. </li>
+         <li><code>LI</code> - the List Item tag. List item tags can contain <code>Lbl</code> and <code>LBody</code> tags.</li>
+         <li><code>Lbl</code> - the list item label. Contains distinguishing information such as a item number or bullet character.</li>
+         <li><code>LBody</code> - the list item body. Contains list item content, or in the case of a nested list, it may contain additional List tag trees.</li>
       </ul>
-   </section><section id="examples"><h2>Examples</h2>
+		</section>
+		<section id="examples">
+			<h2>Examples</h2>
       <section class="example">
-         <h3>Adding lists to Microsoft Word 2007 documents</h3>
-         
-            <p>This example is shown with Microsoft Word. There are other software tools that perform similar functions. See the list of other software tools in <a href="#pdf_notes_acc-sup_files_applications"></a>.</p>
-            <p>On the Home ribbon, use the lists tools to create or repair lists
-    						in Word documents. This is the easiest way to ensure that lists are
-    						formatted correctly when they are converted to PDF. </p>
-            <p>In the image below, the numbered and bullet lists were created using
-    						the list tools. The third list did not use the list tool (see the ribbon)
-    						and the list will not be tagged as list elements when converted to
-    						PDF. </p>
-            <figure id="figure-pdf-lists">
-               <img src="img/lists-word.jpg" />
-                  
-                  <figcaption>Screenshot showing correctly formatted ordered and unordered lists, and a third section of text formatted to appear as a list, but not using the list formatting tool in Microsoft Word.</figcaption>
-                
-            </figure>
-         
+				<h3>Adding lists to Microsoft Word documents</h3> 
+				<p>This example is shown with Microsoft Word. There are other software tools that perform similar functions.</p>
+				<p>On the Home ribbon, use the lists tools to create or repair lists in Word documents. This is the easiest way to ensure that lists are formatted correctly when they are converted to PDF.</p>
+			</section>
+			<section class="example">
+				<h3>Adding lists to OpenOffice Writer documents</h3>
+				<p>This example is shown with OpenOffice Writer. There are other software tools that perform similar functions.</p>
+				<p>Use the Bullets and Numbering tool to create or repair lists in OpenOffice Writer documents. This is the easiest way to ensure that lists are formatted correctly when they are converted to PDF.</p>
       </section>
       <section class="example">
-         <h3>Adding lists to OpenOffice.org Writer 2.2 documents</h3>
-         
-            <p>This example is shown with OpenOffice.org Writer. There are other software tools that perform similar functions. See the list of other software tools in <a href="#pdf_notes_acc-sup_files_applications"></a>.</p>
-            <p>Use the Bullets and Numbering tool to create or repair lists in OpenOffice.org
-    						Writer documents. This is the easiest way to ensure that lists are
-    						formatted correctly when they are converted to PDF. </p>
-            <p>In the image below, the numbered and bullet lists were created using
-    						the list tools. The third list did not use the list tool (see the toolbar)
-    						and the list will not be tagged as list elements when converted to
-    						PDF. </p>
-            <figure id="figure-openoffice-lists">
-               <img src="img/lists-oo.jpg" />
-                  
-                  <figcaption>Screenshot showing correctly formatted ordered and unordered lists, and a third section of text formatted to appear as a list, but not using the list formatting tool in OpenOffice.org Writer.</figcaption>
-                
-            </figure>
-            <p class="working-example">This example is shown in operation in the <a href="../../working-examples/pdf-lists/lists.odt">working example of adding lists to OpenOffice Writer documents</a>.</p>
-         
+         <h3>Ensuring that lists are correctly formatted using Adobe Acrobat Pro</h3>
+				 <p>This example is shown with Adobe Acrobat Pro. There are other software tools that perform similar functions.</p>
+				 <ol>
+					<li>View &#8594; Navigation Panels... &#8594; Accessibility Tags</li>
+					<li>Inspect the lists in the document to determine which, if any, are not formatted properly.</li>
+				</ol>
+				<p>In the following image, the third list is formatted as text. The list items are separated only by line-breaks. Assistive technology may not be able to render the list intelligibly for users.</p>
+				<div>
+					<img alt="Tags panel showing two list items as p tags underneath a L tag." src="img/acrobat-incorrectly-formatted-list.png" width="748"/>
+				</div>
+				<p>To repair the list, use the Tags panel to create list tags in the content.</p>
+            <p>The following image shows the resulting first list item correctly formatted.</p>
+            <div>
+               <img alt="Tags panel showing first list item correctly nested under list tags." src="img/acrobat-correctly-formatted-list.png" width="419"/>
+						</div>
+      	<p class="working-example">This example, with two list items not nested inside the list element, is shown in the <a href="../../working-examples/pdf-lists/lists.pdf">working example of ensuring lists are properly formatted</a>.</p>
       </section>
-      <section class="example">
-         <h3>Ensuring that lists are correctly formatted using Adobe
-    				Acrobat 9 Pro</h3>
-         
-            <p>This example is shown with Adobe Acrobat Pro. There are other software tools that perform similar functions. See the list of other software tools in <a href="#pdf_notes_acc-sup_files_applications"></a>.</p>
-            <ol>
-               <li> View &gt; Navigation Panels... &gt; Tags </li>
-               <li> Inspect the lists in the document to determine which, if any,
-    						are not formatted properly. </li>
-            </ol>
-            <p>In the following image, the third list is formatted as text. The list
-    						items are separated only by line-breaks. Assistive technology may not
-    						be able to render the list intelligibly for users. </p>
-            <figure id="figure-tags-panel-lists">
-               <img src="img/unformattedlist.jpg" />
-                  
-                  <figcaption>Tags panel showing incorrectly formatted list as text beneath a Text body tag rather than nested under list tags.</figcaption>
-                
-            </figure>
-            <p>To repair the list, use the Tags panel to create list tags in the
-    						content. </p>
-            <p>The following image shows the resulting first list item correctly
-    						formatted. </p>
-            <figure id="figure-tags-panel-nesting">
-               <img src="img/listrepair.jpg" />
-                  
-                  <figcaption>Tags panel showing first list item correctly nested under list tags.</figcaption>
-                
-            </figure>
-      	<p class="working-example">This example is shown in operation in the <a href="../../working-examples/pdf-lists/lists.pdf">working example of ensuring lists are properly formatted in Acrobat Pro</a>.</p>
-         
-      </section>
-      <section class="example">
-         <h3>Marking up lists using List structure elements</h3>
-         
-            <p>The following code fragment illustrates code that is typical marking
-    						up a list hierarchy in PDF documents. It uses the simple numbered list
-    						in the previous examples. This is typically accomplished by an authoring
-    						tool. </p>
-            <pre xml:space="preserve">4 0 obj
-  &lt;&lt;/Type /Page
-    /Contents 5 0 R
-  &gt;&gt;
-
-endobj
-5 0 obj
-  &lt;&lt; /Length 3 0 R &gt;&gt;
-  stream
-   /P &lt;&lt;/MCID 1&gt;&gt; BDC
-      BT T* (The most popular sports are:) Tj ET EMC
-   /Lbl &lt;&lt;/MCID 11&gt;&gt; BDC
-      BT T* (1. ) Tj ET EMC
-   /LBody &lt;&lt;/MCID 12&gt;&gt; /BDC
-      BT (Snow-shoeing ) Tj ET EMC
-   /Lbl &lt;&lt;/MCID 21&gt;&gt; BDC
-      BT T* (2. ) Tj ET EMC
-   /LBody &lt;&lt;/MCID 22&gt;&gt; /BDC
-      BT (Ice-skating ) Tj ET EMC
-   /Lbl &lt;&lt;/MCID 31&gt;&gt; BDC
-      BT T* (3. ) Tj ET EMC
-   /LBody &lt;&lt;/MCID 32&gt;&gt; /BDC
-      BT (Skiing ) Tj ET EMC
-endstream
-endobj
-
-101 0 obj                 % Structure element for intro paragraph to list ("The most popular sports are:")
-  &lt;&lt; /Type /StructElem
-     /S /P
-     /P 201 0 R
-     /Pg 4 0 R
-     /K 1
-  &gt;&gt;
-endobj
-
-111 0 obj                  % Structure element for first item, list label (Lbl): "1."
-  &lt;&lt; /Type /StructElem
-     /S /Lbl
-     /P 211 0 R
-     /Pg 4 0 R
-     /K 11
-  &gt;&gt;
-endobj
-
-112 0 obj
-  &lt;&lt; /Type /StructElem     % Structure element for first item, list text (LBody): ("Snow-shoeing")
-     /S /LBody
-     /P 211 0 R
-     /Pg 4 0 R
-     /K 12
-  &gt;&gt;
-endobj
-
-... [ objects 121-122 and 131-132, referencing MCIDs 21-22 and 31-32 are omitted in the interest of space. ]
-
-201 0 obj
-  &lt;&lt; /Type /StructElem
-     /S /Caption            % Intro paragraph
-     /P 400 0 R
-     /K [101 0 R]
-  &gt;&gt;
-endobj
-
-211 0 obj
-  &lt;&lt; /Type /StructElem
-     /S /LI                 % List item for "1. Snow-shoeing"
-     /P 400 0 R
-     /K [111 0 R 112 0 R]
-  &gt;&gt;
-endobj
-
-212 0 obj
-  &lt;&lt; /Type /StructElem
-     /S /LI                 % List item for "2. Ice-skating"
-     /P 301 0 R
-     /K [121 0 R 122 0 R]
-  &gt;&gt;
-endobj
-
-213 0 obj
-  &lt;&lt; /Type /StructElem
-     /S /LI                 % List item for "3. Skiing"
-     /P 301 0 R
-     /K [131 0 R 132 0 R]
-  &gt;&gt;
-endobj
-
-400 0 obj
-  &lt;&lt; /Type /StructElem
-     /S /L                   % Top-level structure element in the list hierarchy                
-     /K [201 0 R 211 0 R 212 0 R 213 0 R]
-  &gt;&gt;
-endobj
-</pre>
-         
-      </section>
-   </section><section id="tests"><h2>Tests</h2>
-      <section class="procedure"><h3>Procedure</h3>
-         <ol>
-            <li>
-               <p> For a list in a PDF document, verify in one of the following
+		</section>
+		<section id="tests">
+			<h2>Tests</h2>
+      <section class="procedure">
+				<h3>Procedure</h3>
+				<ol>
+					<li>
+						<p>For a list in a PDF document, verify in one of the following
     					ways:</p>
-               <ul>
-                  <li> Read the PDF document with a screen reader, listening to hear
-    						that list is read correctly when reading the content line-by-line. </li>
-                  <li> Use a tool that is capable of showing lists to open the PDF
-    							document and view the list to check that it is correctly structured. </li>
-                  <li> Inspect the tag tree to verify that the list is structured
-    								according to the PDF specification. </li>
-                  <li> Use a tool that exposes the document through the accessibility
-    									API and verify that the list is correctly structured. </li>
-               </ul>
-            </li>
-         </ol>
-      </section>
-      <section class="results"><h3>Expected Results</h3>
-         <ul>
-            <li>#1 is true </li>
-         </ul>
-      </section>
-   </section><section id="related"><h2>Related Techniques</h2><ul>
-      <li><a href="../general/G115">G115</a></li>
-   </ul></section><section id="resources"><h2>Resources</h2>
-      
-         <ul>
-            <li> Section 14.8.4.3.3 (List Elements) in <a href="http://www.adobe.com/content/dam/Adobe/en/devnet/pdf/pdfs/PDF32000_2008.pdf">PDF
-    					1.7 (ISO 32000-1)</a> 
-               </li>
-            <li>
-                  <a href="http://www.adobe.com/accessibility/products/acrobat.html">PDF and Accessibility</a>
-               </li>
-         </ul>
-      
-   </section></body></html>
+							<ul>
+								<li>Read the PDF document with a screen reader, listening to hear that list is read correctly when reading the content line-by-line.</li>
+                  <li>Use a tool that is capable of showing lists to open the PDF document and view the list to check that it is correctly structured.</li>
+                  <li> Inspect the tag tree to verify that the list is structured according to the PDF specification.</li>
+                  <li>Use a tool that exposes the document through the accessibility <abbr title="Application Programming Interface">API</abbr> and verify that the list is correctly structured.</li>
+								</ul>
+							</li>
+						</ol>
+					</section>
+					<section class="results">
+						<h3>Expected Results</h3>
+						<ul>
+							<li>#1 is true </li>
+						</ul>
+					</section>
+				</section>
+				<section id="related">
+					<h2>Related Techniques</h2>
+					<ul>
+						<li><a href="../general/G115">G115</a></li>
+					</ul>
+				</section>
+				<section id="resources">
+					<h2>Resources</h2>
+					<ul>
+						<li>Section 14.8.4.3.3 (List Elements) in <a href="https://opensource.adobe.com/dc-acrobat-sdk-docs/pdfstandards/PDF32000_2008.pdf">PDF 1.7 (ISO 32000-1) (PDF)</a>
+						</li>
+						<li>
+							<a href="https://helpx.adobe.com/acrobat/using/create-verify-pdf-accessibility.html">Create and verify PDF accessibility (Acrobat Pro)</a>
+						</li>
+					</ul>
+				</section>
+			</body>
+			</html>
diff --git a/techniques/pdf/PDF22.html b/techniques/pdf/PDF22.html
index 32ad89b95f..82ef699ac8 100644
--- a/techniques/pdf/PDF22.html
+++ b/techniques/pdf/PDF22.html
@@ -1,168 +1,107 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Indicating when user input falls outside the required format or
-    			values in PDF forms</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Indicating when user input falls outside the required format or
-    			values in PDF forms</h1><section class="meta"><p class="id">ID: PDF22</p><p class="technology">Technology: pdf</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>Indicating when user input falls outside the required format or values in PDF forms</title>
+		<link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+	</head>
+	<body>
+		<h1>Indicating when user input falls outside the required format or values in <abbr title="Portable Document Format">PDF</abbr> forms</h1>
+		<section class="meta">
+			<p class="id">ID: PDF22</p>
+			<p class="technology">Technology: pdf</p>
+			<p class="type">Type: Technique</p>
+		</section>
+		<section id="applicability">
+			<h2>When to Use</h2>
       <p id="pdf.applicability.general">Tagged PDF documents</p>
-   </section><section id="description"><h2>Description</h2>
+		</section>
+		<section id="description">
+			<h2>Description</h2>
       <p>The objective of this technique is to notify the user when user
     				input to a field that requires a specific, required format (e.g.,
     				date fields) is not submitted in that format. </p>
       <p>If the required format is not used, an alert dialog describes the
     				nature of the error in text. This may be accomplished through scripting
-    				created by the author (see, for example, <a href="https://www.w3.org/WAI/WCAG21/Techniques/client-side-script/SCR18">SCR18:
-    					Providing client-side validation and alert</a>). User agents, such
-    				as Adobe LiveCycle can provide automatic alerts (as described in
-    				the examples below). </p>
+    				created by the author (see, for example, <a href="../client-side-script/SCR18">SCR18: Providing client-side validation and alert</a>). User agents can provide automatic alerts (as described in the examples below).</p>
       <div class="note">
-         <p>Once the user dismisses the alert dialog,
-    				it may be helpful if the script positions the keyboard focus on
-    				the field where the error occurred, although some users may expect
-    				the focus to remain on the last control focused prior to the alert
-    				appearing. Authors should exercise care to ensure that any movement
-    				of the focus will be expected. For example, if the alert announces
-    				an error in a phone number format, positioning the focus on the
-    				phone number field when the alert is dismissed can be regarded as
-    				helpful and expected. In some cases, however, this may not be possible.
-    				If multiple input errors occur on the page, an alternative approach
-    				to error notification should be implemented. </p>
+         <p>Once the user dismisses the alert dialog, it may be helpful if the script positions the keyboard focus on the field where the error occurred, although some users may expect the focus to remain on the last control focused prior to the alert appearing. Authors should exercise care to ensure that any movement of the focus will be expected. For example, if the alert announces an error in a phone number format, positioning the focus on the phone number field when the alert is dismissed can be regarded as helpful and expected. In some cases, however, this may not be possible. If multiple input errors occur on the page, an alternative approach to error notification should be implemented.</p>
       </div>
-      <p>Ensuring that users are aware an error has occurred, can determine
-    				what is wrong, and can correct it are key to software usability
-    				and accessibility. Meeting this objective helps ensure that all
-    				users can complete for-based transactions with ease and confidence. </p>
+      <p>Ensuring that users are aware an error has occurred, can determine what is wrong, and can correct it are key to software usability and accessibility. Meeting this objective helps ensure that all users can complete for-based transactions with ease and confidence.</p>
       <section>
-         <h4>Labels for required formats in form controls</h4>
-         <p>It is also important that users are aware that an error <em>may</em> occur.
-    					You can incorporate this information in labels; for example, "Date
-    					(MM/DD/YYYY)." See <a href="#PDF10"></a>. </p>
+				<h3>Labels for required formats in form controls</h3>
+         <p>It is also important that users are aware that an error <em>may</em> occur. You can incorporate this information in labels; for example, "Date (MM/DD/YYYY)." See <a href="../pdf/PDF10">PDF10</a>.</p>
       </section>
-   </section><section id="examples"><h2>Examples</h2>
-      <section class="example">
-         <h3>Providing validation for an input field format using
-    					Adobe Acrobat 9 Pro</h3>
-         
-            <p>This example is shown with Adobe Acrobat Pro. There are other software
-    						tools that perform similar functions. See the list of other software
-    						tools in <a href="#pdf_notes_acc-sup_files_applications"></a>. </p>
-            <p>Many fields -- telephone number, postal code, date -- must have
-    						data entered in a specific format or pattern. </p>
-            <ol>
-               <li> Access the context menu for the form control that requires
-    						a specific format. </li>
-               <li> Select Properties... </li>
-               <li> In the Format tab, select the Format Category (in this case,
-    							Date). The Date Options appear. </li>
-               <li> Select the format for this form control (in this case, mm/dd/yyyy). </li>
-               <li> In the General tab, specify "Date (mm/dd/yyyy)" for
-    								the Name and Tooltip for the control. </li>
-            </ol>
-            <figure id="figure-date-format">
-               <img src="img/dateformat.jpg" />
-                  
-                  <figcaption>Specifying a required format for an input field format using Adobe Acrobat 9 Pro</figcaption> 
-                
-            </figure>
-            <p>When a user types a recognized date format, it is converted automatically
-    						to the specified format. If the date format or value is not recognized,
-    						an error alert appears and provides further information, as shown
-    						in the image below. </p>
-            <figure id="figure-date-error">
-               <img src="img/dateerror.jpg" />
-                  
-                  <figcaption>Error alert for date with unrecognized format or value.</figcaption>
-                
-            </figure>
-            <p class="working-example">This example is shown in operation in the <a href="../../working-examples/pdf-required-fields/required-fields.pdf">working example of Required Fields in Acrobat</a>.</p>
-         
-      </section>
-      <section class="example">
-         <h3>Providing validation for an input field format using
-    					Adobe LiveCycle Designer ES 8.2.1</h3>
-         
-            <p>This example is shown with Adobe LiveCycle Designer. There are
-    						other software tools that perform similar functions. See the list
-    						of other software tools in <a href="#pdf_notes_acc-sup_files_applications"></a>. </p>
-            <ol>
-               <li> Select the form control that has a required format. </li>
-               <li> In the Object palette, click the Validation Pattern... button. </li>
-               <li>
-                  <p> Because this is a date field the Patterns-Date Field dialog
-    						appears. Select the pattern or format you want users to enter.
-    						Then click OK.</p>
-                  <figure id="figure-form-validation">
-                     <img src="img/form-validation.jpg" />
-                        
-                        <figcaption>Using LiveCycle to specify form fields that require pattern validation</figcaption>
-                      
-                  </figure>
-               </li>
-               <li> In the Object palette, use the Validation Pattern Message box
-    							to type a warning message. Be sure to include the required pattern.
-    							This message appears when a user tries to submit the form using
-    							an invalid date format. </li>
-            </ol>
-      	<p class="working-example">This example is shown in operation in the <a href="../../working-examples/pdf-required-fields/required-fields-lc.pdf">working example of Required Fields in LiveCycle Designer</a>.</p>
-         
-      </section>
-      <section class="example">
-         <h3>Validating a required date format in a PDF form using
-    				JavaScript using Adobe Acrobat Pro 9</h3>
-         
-            <p>This example is shown with Adobe Acrobat Pro. There are other software
-    						tools that perform similar functions. See the list of other software
-    						tools in <a href="#pdf_notes_acc-sup_files_applications"></a>. </p>
-            <p>The following JavaScript code illustrates the use of a script to
-    						validate form fields, in this case, a date field. To add this script
-    						to the form field, open the Text Field Properties dialog, as shown
-    						in Example 1, and select Edit in the Validate tab: </p>
-            <figure id="figure-text-field-props">
-               <img src="img/jscript.jpg" />
-                  
-                   <figcaption>Text Field Properties dialog, with the Validate tab open to specify JavaScript validation code.</figcaption>
-                
-            </figure>
-            <pre xml:space="preserve">// JavaScript code for date mask format MM/DD/YYYY
+   </section>
+	 <section id="examples">
+		<h2>Examples</h2>
+		<section class="example">
+			<h3>Providing validation for an input field format using Adobe Acrobat Pro</h3>
+			<p>This example is shown with Adobe Acrobat Pro. There are other software tools that perform similar functions.</p>
+			<p>Many fields, for example: telephone number, postal code, and dates, must have data entered in a specific format or pattern.</p>
+			<ol>
+				<li>Access the context menu for the form control that requires a specific format.</li>
+				<li>Select Properties...</li>
+				<li>In the Format tab, select the Format Category (in this case, Date). The Date Options appear.</li>
+				<li>Select the format for this form control (in this case, mm/dd/yyyy).</li>
+				<li>In the General tab, specify "Date (mm/dd/yyyy)" for the Name and Tooltip for the control.</li>
+			</ol>
+			<div>
+				<img alt="Specifying a required format for an input field format using Adobe Acrobat 9 Pro" src="img/acrobat-date-format.png" width="622"/>
+			</div>
+			<p>When a user types a recognized date format, it is converted automatically to the specified format. If the date format or value is not recognized, an error alert appears and provides further information</p>
+      <p class="working-example">This example is shown in operation in the <a href="../../working-examples/pdf-required-fields/required-fields.pdf">working example of Required Fields in Acrobat (PDF)</a>.</p>
+		</section>
+    <section class="example">
+			<h3>Validating a required date format in a PDF form using JavaScript using Adobe Acrobat Pro</h3>
+			<p>This example is shown with Adobe Acrobat Pro. There are other software tools that perform similar functions.</p>
+			<p>The following JavaScript illustrates the use of a script to validate form fields, in this case, a date field. To add this script to the form field, open the Text Field Properties dialog and select Edit in the Validate tab.</p>
+            <pre xml:space="preserve"><code class="language-javascript">// JavaScript code for date mask format MM/DD/YYYY
 var re = /^[mdy0-9]{2}\/[mdy0-9]{2}\/[mdy0-9]{4}$/
 //Allow blank space in field
 if (event.value !="") {
   if (re.test(event.value) == false) {
     app.alert ({
        cTitle: "Incorrect Format",
-       cMsg: "Please enter date using mm/dd/yyyy format"
+       cMsg: "Please enter date using\nmm/dd/yyyy format"
     });
   }
-}
-</pre>
-         
+}</code></pre>
       </section>
-   </section><section id="tests"><h2>Tests</h2>
-      <section class="procedure"><h3>Procedure</h3>
-         <p>For each form field that requires specific input, verify that validation
-    					information and instructions are provided by applying the following: </p>
+		</section>
+		<section id="tests">
+			<h2>Tests</h2>
+      <section class="procedure">
+				<h3>Procedure</h3>
+         <p>For each form field that requires specific input, verify that validation information and instructions are provided by applying the following:</p>
          <ol>
-            <li> Check that the format or value that is required is indicated
-    					in the form control's label. </li>
-            <li> Use an erroneous format or value and move off the field: make
-    						sure that an alert describing the error is provided. </li>
+					<li>Check that the format or value that is required is indicated in the form control's label.</li>
+          <li>Use an erroneous format or value and move off the field: make sure that an alert describing the error is provided.</li>
          </ol>
-      </section>
-      <section class="results"><h3>Expected Results</h3>
-         <ul>
-            <li>#1 and #2 are true. </li>
+				</section>
+				<section class="results">
+					<h3>Expected Results</h3>
+					<ul>
+						<li>#1 and #2 are true.</li>
          </ul>
-      </section>
-   </section><section id="related"><h2>Related Techniques</h2><ul>
-      <li><a href="../general/G89">G89</a></li>
-      <li><a href="../client-side-script/SCR18">SCR18</a></li>
-      <li><a href="../pdf/PDF23">PDF23</a></li>
-      <li><a href="../pdf/PDF10">PDF10</a></li>
-      <li><a href="../pdf/PDF5">PDF5</a></li>
-   </ul></section><section id="resources"><h2>Resources</h2>
-      
+				</section>
+			</section>
+			<section id="related">
+				<h2>Related Techniques</h2>
+				<ul>
+      		<li><a href="../general/G89">G89</a></li>
+      		<li><a href="../client-side-script/SCR18">SCR18</a></li>
+      		<li><a href="../pdf/PDF23">PDF23</a></li>
+      		<li><a href="../pdf/PDF10">PDF10</a></li>
+      		<li><a href="../pdf/PDF5">PDF5</a></li>
+				</ul>
+			</section>
+			<section id="resources">
+				<h2>Resources</h2>
          <ul>
-            <li> 
-                  <a href="http://www.adobe.com/devnet/acrobat/javascript.html">JavaScript
-    					for Acrobat</a> 
-               </li>
-         </ul>
-      
-   </section></body></html>
+            <li>
+							<a href="https://opensource.adobe.com/dc-acrobat-sdk-docs/acrobatsdk/">Acrobat <abbr title="Software Development Kit">SDK</abbr> 2021</a>
+						</li>
+					</ul>
+				</section>
+			</body>
+		</html>
diff --git a/techniques/pdf/PDF23.html b/techniques/pdf/PDF23.html
index 1ac10cde1a..2937fbabad 100644
--- a/techniques/pdf/PDF23.html
+++ b/techniques/pdf/PDF23.html
@@ -1,197 +1,72 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing interactive form controls in PDF documents</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Providing interactive form controls in PDF documents</h1><section class="meta"><p class="id">ID: PDF23</p><p class="technology">Technology: pdf</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
-      <ul>
-         <li> Tagged PDF documents with forms. </li>
-         <li> PDF forms created using Adobe LiveCycle Designer. </li>
-      </ul>
-   </section><section id="description"><h2>Description</h2>
-      <p>The objective of this technique is to ensure that interactive form
-    				controls in PDF documents allow keyboard operation. Interactive
-    				PDF forms are generally created using a tool for authoring PDF.
-    				Form controls are implemented in PDF documents either as described
-    				in Section 12.7 (Interactive Forms) of <a href="http://www.adobe.com/content/dam/Adobe/en/devnet/pdf/pdfs/PDF32000_2008.pdf">PDF
-    					1.7 (ISO 32000-1)</a> or as described in the <a href="http://partners.adobe.com/public/developer/xml/index_arch.html">Adobe
-    						XML Forms Architecture (XFA)</a>. </p>
-      <p>The types of PDF form controls are: text input field, check box,
-    				radio button, combo box, list box, and button. </p>
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>Providing interactive form controls in PDF documents</title>
+		<link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+	</head>
+	<body>
+		<h1>Providing interactive form controls in <abbr title="Portable Document Format">PDF</abbr> documents</h1>
+		<section class="meta">
+			<p class="id">ID: PDF23</p>
+			<p class="technology">Technology: pdf</p>
+			<p class="type">Type: Technique</p>
+		</section>
+		<section id="applicability">
+			<h2>When to Use</h2>
+      <p>Tagged PDF documents with forms.</p>
+		</section>
+		<section id="description">
+			<h2>Description</h2>
+      <p>The objective of this technique is to ensure that interactive form controls in PDF documents allow keyboard operation. Interactive PDF forms are generally created using a tool for authoring PDF.</p>
+      <p>The types of PDF form controls are: text input field, check box, radio button, combo box, list box, and button.</p>
       <p>Form controls allow users to interact with a PDF document by filling
     				in information or indicating choices, which can then be submitted
     				for processing. Users who rely on keyboard access must be able to
     				recognize and understand the form fields, make selections, and provide
     				input to complete the forms, and submit the form, just as sighted
-    				users can. </p>
+    				users can.</p>
       <p>Interactive form controls can be provided for forms created by
     				converting a scanned paper form to tagged PDF or by creating a form
     				in an authoring application such as Microsoft Word or Open Office
-    				and converting it to tagged PDF. </p>
+    				and converting it to tagged PDF.</p>
       <p>However, documents created by authoring applications that provide
     				form design features might not fully retain their fillable form
     				fields on conversion to PDF. Complex forms in particular may not
-    				have properly converted form fields and labels when tagged in conversion. </p>
+    				have properly converted form fields and labels when tagged in conversion.</p>
       <p>Using Adobe Acrobat Pro with forms in converted documents, you
-    				can ensure that form fields are keyboard accessible and usable by: </p>
+    				can ensure that form fields are keyboard accessible and usable by:</p>
       <ul>
-         <li> Opening tagged PDF documents with form fields and creating
-    				interactive PDF form elements with the Run Form Fields Recognition
-    				tool. </li>
-         <li> Modifying fillable form fields, or adding form fields, using
-    					Adobe Acrobat Pro or Adobe LiveCycle Designer. </li>
+				<li>Opening tagged PDF documents with form fields and creating interactive PDF form elements with the Identify Form Fields tool.</li>
+         <li>Modifying fillable form fields, or adding form fields, using Adobe Acrobat Pro</li>
       </ul>
-      <p>Using Adobe LiveCycle Designer, you can create forms from scratch. </p>
-   </section><section id="examples"><h2>Examples</h2>
-      <section class="example">
-         <h3>Adding interactive controls to existing forms in PDF
-    				documents using Adobe Acrobat 9 Pro</h3>
-         
-            <p>This example is shown with Adobe Acrobat Pro. There are other software
-    						tools that perform similar functions. See the list of other software
-    						tools in <a href="#pdf_notes_acc-sup_files_applications"></a>. </p>
-            <p>If you have a form in a tagged PDF document (created by scanning
-    						a paper form or using an authoring tool to generate tagged PDF),
-    						you can use Adobe Acrobat Pro to make the form elements keyboard
-    						accessible in the same page locations as the static form. </p>
-            <ol>
-               <li> Use Advanced &gt; Accessibility &gt; Run Form Field Recognition
-    						to automatically detect form fields and make them fillable. </li>
-            </ol>
-            <p>The following image shows the Run Form Field Recognition tool is
-    						selected to detect form fields in a document converted to tagged
-    						PDF. </p>
-            <figure id="figure-pdf-form-fields">
-               <img src="img/form1.jpg" />
-                  
-                  <figcaption>Form fields in a PDF document in Adobe Acrobat Pro. The Advanced &gt; Accessibility menu is selected, showing the Run Form Field Recognition tool.</figcaption>
-                 
-            </figure>
-            <p>The following image shows the resulting form fields after the
-    						Run Form Recognition tool is run. </p>
-            <figure id="figure-field-recognition">
-               <img src="img/form1a.jpg" />
-                  
-                  <figcaption>Form fields in a PDF document in Adobe Acrobat Pro after running the Form Field Recognition tool.</figcaption>
-                 
-            </figure>
-            <p class="working-example">This example is shown in operation in the <a href="../../working-examples/pdf-interactive-form-fields/form-fields-keybd.pdf">working example of Interactive Controls in Acrobat</a>.</p>
-         
-      </section>
-      <section class="example">
-         <h3>Adding form controls in PDF documents using Adobe Acrobat
-    					9 Pro</h3>
-         
-            <p>This example is shown with Adobe Acrobat Pro. There are other software
-    						tools that perform similar functions. See the list of other software
-    						tools in <a href="#pdf_notes_acc-sup_files_applications"></a>. </p>
-            <p>You can add keyboard accessible form controls to your form as follows: </p>
-            <ol>
-               <li> Forms &gt; Add or Edit Fields... This puts the form in Form
-    						Editing mode. </li>
-               <li> Open the Add New Field menu on the upper left, and select a
-    							form field to add. The image below shows the menu of fields. </li>
-            </ol>
-            <figure id="figure-add-new-field-menu">
-               <img src="img/form1c.jpg" />
-                  
-                  <figcaption>The Add New Field menu with the list of available form fields.</figcaption>
-                
-            </figure>
-            <p>The following image shows a checkbox added to the form in Example
-    						1. </p>
-            <figure id="figure-add-checkbox">
-               <img src="img/form1b.jpg" />
-                  
-                  <figcaption>A checkbox added to the form using Add or Edit Fields...</figcaption>
-                 
-            </figure>
-      	<p class="working-example">This example is shown in operation in the <a href="../../working-examples/pdf-interactive-form-fields/form-fields-keybd-lc.pdf">working example of Interactive Controls in LiveCycle Designer</a>.</p>
-         
+   </section>
+	 <section id="examples">
+		<h2>Examples</h2>
+		<section class="example">
+			<h3>Adding interactive controls to existing forms in PDF documents using Adobe Acrobat Pro</h3>
+			<p>This example is shown with Adobe Acrobat Pro. There are other software tools that perform similar functions.</p>
+			<p>If you have a form in a tagged PDF document (created by scanning a paper form or using an authoring tool to generate tagged PDF), you can use Adobe Acrobat Pro to make the form elements keyboard accessible in the same page locations as the static form.</p>
+			<ol>
+				<li>Use the Accessibility tool and then Identify Form Fields option to automatically detect form fields and make them fillable.</li>
+      </ol>
+      <p class="working-example">This example is shown in operation in the <a href="../../working-examples/pdf-interactive-form-fields/form-fields-keybd.pdf">working example of Interactive Controls in Acrobat</a> (PDF).</p>
       </section>
       <section class="example">
-         <h3>Editing form controls in PDF documents using Adobe
-    				Acrobat 9 Pro</h3>
-         
-            <p>This example is shown with Adobe Acrobat Pro. There are other software
-    						tools that perform similar functions. See the list of other software
-    						tools in <a href="#pdf_notes_acc-sup_files_applications"></a>. </p>
-            <p>To edit fields, select the context menu for the field and select
-    						Properties... The properties menu for that form field lets you modify
-    						it, as shown in the following image. </p>
-            <figure id="figure-text-field-props">
-               <img src="img/form5.jpg" />
-                  
-                  <figcaption>The Text Field Properties dialog to modify a form field.</figcaption>
-                 
-            </figure>
-            <div class="note">
-               <p>The tooltip is not keyboard accessible but will be screen-reader
-    						accessible: see <a href="#PDF12"></a>. </p>
-            </div>
-         
+				<h3>Adding form controls in PDF documents using Adobe Acrobat Pro</h3>
+        <p>This example is shown with Adobe Acrobat Pro. There are other software tools that perform similar functions.</p>
+        <p>You can add keyboard accessible form controls to your form as follows:</p>
+        <ol>
+					<li>Select the Prepare Form tool</li>
+					<li>From the newly-opened Prepare Form toolbar, select the type of form control you want to add.</li>
+        </ol>
+        <div>
+					<img alt="The Prepare Form toolbar showing a list of different form controls to select." src="img/acrobat-prepare-form-menu.png" width="770"/>
+				</div>
       </section>
-      <section class="example">
-         <h3>Creating new interactive forms with Adobe LiveCycle
-    				Designer ES 8.2.1</h3>
-         
-            <p>This example is shown with Adobe LiveCycle Designer. There are
-    						other software tools that perform similar functions. See the list
-    						of other software tools in <a href="#pdf_notes_acc-sup_files_applications"></a>. </p>
-            <p>You can use Adobe LiveCycle Designer to create new forms. In addition
-    						to invoking this standalone tool from the Windows Start menu, you
-    						can invoke it in Adobe Acrobat Pro: </p>
-            <ol>
-               <li> Forms &gt; Start Form Wizard... </li>
-               <li> Select the No Existing Form radio button, as shown in the following
-    						image. </li>
-            </ol>
-            <figure id="figure-form-wizard">
-               <img src="img/form2.jpg" />
-                  
-                  <figcaption>The first dialog in the Form Wizard showing the No Existing Form Button selected.</figcaption>
-                
-            </figure>
-            <p>Clicking Next invokes LiveCycle Designer and the first page of
-    						the New Form Assistant. as shown in the following image. </p>
-            <figure id="figure-form-wizard-2">
-               <img src="img/form2a.jpg" />
-                  
-                  <figcaption>LiveCycle Designer and the first page of the New Form Assistant.</figcaption>
-                
-            </figure>
-            <p>When you invoke LiveCycle Designer from the Windows Start menu,
-    						the Form Wizard is available from File &gt; New... </p>
-            <p>The New Form Assistant creates a blank form. Use the Object Library
-    						in the right pane to select form controls. </p>
-            <figure id="figure-designer-blank-form">
-               <img src="img/lc-blank.jpg" />
-                  
-                  <figcaption>A newly created blank form in LiveCycle Designer with the Object Library.</figcaption>
-                
-            </figure>
-            <p>You can also use LiveCycle Designer to create forms based on commonly
-    						used forms templates. </p>
-            <ol>
-               <li>Invoke the Template Assistant wizard from the New pulldown: 
-                        
-                        	<img src="img/lc-new.jpg" alt="LiveCycle Designer: New icon to select form templates."/>. </li>
-               <li>Select Forms and then select an appropriate type of form. Then,
-    						you can personalize the form by swapping out placeholder text,
-    						graphics, form fields, and properties with custom objects that
-    						you provide or define. </li>
-            </ol>
-            <figure id="figure-form-templates">
-               <img src="img/lc-templates.jpg" />
-                  
-                  <figcaption>LiveCycle Designer: list of form templates.</figcaption>
-                
-            </figure>
-         
-      </section>
-      <section class="example">
-         <h3>Adding a text field in a PDF document using the /Tx
-    				field type</h3>
-         
-            <p>The following code fragment illustrates code that is typical for
-    						a simple text field such as shown in Examples 1 and 2. This is typically
-    						accomplished by an authoring tool. </p>
-            <pre xml:space="preserve">&lt;&lt; /AP -dict-                                                   
+			<section class="example">
+        <h3>Adding a text field in a PDF document using the <code>/Tx</code> field type</h3>
+        <p>The following code fragment illustrates code that is typical for a simple text field such as shown in Examples 1 and 2. This is typically accomplished by an authoring tool. </p>
+            <pre xml:space="preserve"><code>&lt;&lt; /AP -dict-                                                   
    /DA /Helv  0 Tf 0 g
    /DR -dict-
    /F 0x4
@@ -229,38 +104,37 @@ <h3>Adding a text field in a PDF document using the /Tx
   ( )Tj
   EMC
  ET
-&lt;End Stream&gt;
-</pre>
-         
+&lt;End Stream&gt;</code></pre>
       </section>
-   </section><section id="tests"><h2>Tests</h2>
+		</section>
+		<section id="tests">
+			<h2>Tests</h2>
       <section class="procedure"><h3>Procedure</h3>
-         <ol>
-            <li> For each form control, verify that it is properly implemented
-    					by tabbing to each form control and checking that it can be activated
-    					or that its value can be changed from the keyboard. </li>
+				<ol>
+					<li>For each form control, verify that it is properly implemented by tabbing to each form control and checking that it can be activated or that its value can be changed from the keyboard.</li>
          </ol>
+				</section>
+				<section class="results">
+					<h3>Expected Results</h3>
+         	<ul>
+						<li>#1 is true.</li>
+					</ul>
       </section>
-      <section class="results"><h3>Expected Results</h3>
-         <ul>
-            <li>#1 is true. </li>
-         </ul>
-      </section>
-   </section><section id="related"><h2>Related Techniques</h2><ul>
-      <li><a href="../general/G202">G202</a></li>
-      <li><a href="../pdf/PDF3">PDF3</a></li>
-      <li><a href="../pdf/PDF12">PDF12</a></li>
-      <li><a href="../pdf/PDF15">PDF15</a></li>
-   </ul></section><section id="resources"><h2>Resources</h2>
-      
-         <ul>
-            <li> Section 12.7 (Interactive Forms) in <a href="http://www.adobe.com/content/dam/Adobe/en/devnet/pdf/pdfs/PDF32000_2008.pdf">PDF
-    					1.7 (ISO 32000-1)</a> 
-               </li>
-            <li> 
-                  <a href="http://partners.adobe.com/public/developer/xml/index_arch.html">Adobe
-    						XML Forms Architecture (XFA)</a> 
-               </li>
-         </ul>
-      
-   </section></body></html>
+		</section>
+		<section id="related">
+			<h2>Related Techniques</h2>
+			<ul>
+      	<li><a href="../general/G202">G202</a></li>
+      	<li><a href="../pdf/PDF3">PDF3</a></li>
+      	<li><a href="../pdf/PDF12">PDF12</a></li>
+      	<li><a href="../pdf/PDF15">PDF15</a></li>
+			</ul>
+		</section>
+		<section id="resources">
+			<h2>Resources</h2>
+			<ul>
+				<li>Section 12.7 (Interactive Forms) in <a href="https://opensource.adobe.com/dc-acrobat-sdk-docs/pdfstandards/PDF32000_2008.pdf">PDF 1.7 (ISO 32000-1) (PDF)</a>
+				</li>
+			</ul>
+   	</section>
+</body></html>
diff --git a/techniques/pdf/PDF3.html b/techniques/pdf/PDF3.html
index 533b5833be..04466ee5db 100644
--- a/techniques/pdf/PDF3.html
+++ b/techniques/pdf/PDF3.html
@@ -1,228 +1,176 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Ensuring correct tab and reading order in PDF documents</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Ensuring correct tab and reading order in PDF documents</h1><section class="meta"><p class="id">ID: PDF3</p><p class="technology">Technology: pdf</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>Ensuring correct tab and reading order in PDF documents</title>
+		<link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+	</head>
+	<body>
+		<h1>Ensuring correct tab and reading order in <abbr title="Portable Document Format">PDF</abbr> documents</h1>
+		<section class="meta">
+			<p class="id">ID: PDF3</p>
+			<p class="technology">Technology: pdf</p>
+			<p class="type">Type: Technique</p>
+		</section>
+		<section id="applicability">
+			<h2>When to Use</h2>
       <p id="pdf.applicability.general">Tagged PDF documents</p>
-   </section><section id="description"><h2>Description</h2>
+		</section>
+		<section id="description">
+			<h2>Description</h2>
       <p>The intent of this technique is to ensure that users can navigate
     				through content in a logical order that is consistent with the meaning
     				of the content. Correct tab and reading order is typically accomplished
-    				using a tool for authoring PDF. </p>
+    				using a tool for authoring PDF.</p>
       <p>For sighted users, the logical order of PDF content is also the visual
     				order on the screen. For keyboard and assistive technology users, the
     				tab order through content, including interactive elements (form fields
     				and links), determines the order in which these users can navigate
     				the content. The tab order must reflect the logical order of the document. </p>
       <p>Logical structure is created when a document is saved as tagged PDF.
-    				The reading order of a PDF document is determined primarily by the tag order of document elements, including interactive elements, but the order of content within individual tags is determined by the PDF document’s content tree structure.</p>
+    				The reading order of a PDF document is determined primarily by the tag order of document elements, including interactive elements, but the order of content within individual tags is determined by the PDF document's content tree structure.</p>
       <p>If the reading order is not correct, keyboard and assistive technology
     				users may not be able to understand the content. For example, some
     				documents use multiple columns, and the reading order is clear visually
     				to sighted users as flowing from the top to the bottom of the first
     				column, then to the top of the next column. But if the document is
     				not properly tagged, a screen reader may read the document from top
-    				to bottom, across both columns, interpreting them as one column. </p>
+    				to bottom, across both columns, interpreting them as one column.</p>
       <p>The simplest way to ensure correct reading order is to structure the
     				document correctly in the authoring tool used to create the document,
     				before conversion to tagged PDF. Note, however, that pages with complex
     				layouts with graphics, tables, footnotes, side-bars, form fields, and
     				other elements may not convert to tagged PDF in the correct reading
     				order. These inconsistencies must then be corrected with repair tools
-    				such as Acrobat Pro. </p>
+    				such as Acrobat Pro.</p>
       <p>When a PDF document containing form fields has a correct reading order,
     				all form fields are contained in the tab order in the appropriate order,
     				and in the correct order relative to other content in the PDF. Common
-    				tab-order errors include: </p>
+    				tab-order errors include:</p>
       <ul>
-         <li> Form fields missing from the tagged content. </li>
-         <li> Form fields in the wrong location in the PDF content; e.g., at
-    				the end of non-interactive content. </li>
+         <li>Form fields missing from the tagged content.</li>
+         <li>Form fields in the wrong location in the PDF content; e.g., at
+    				the end of non-interactive content.</li>
       </ul>
-   </section><section id="examples"><h2>Examples</h2>
-      <section class="example">
-         <h3>Creating a 2-column document using Microsoft Word 2007</h3>
-         
-            <p>This example is shown with Microsoft Word. There are other software tools that perform similar functions. See the list of other software 
-tools in <a href="#pdf_notes_acc-sup_files_applications"></a>.</p>
-            <p>Multi-column documents created using Word's Page Layout &gt;   Columns...
-    						tool typically are in the correct reading order when converted to tagged
-    						PDF. The image below shows Word's Columns tool. </p>
-            <figure id="figure-vcolumns-tool-word">
-               <img src="img/word-col-tool.jpg" />
-               
-                  <figcaption>The Columns tool in Word. Two is selected to lay out the page in 2 columns.</figcaption>
-                  
-            </figure>
-      	<p class="working-example">This example is shown in operation in the <a href="../../working-examples/pdf-reading-order/reading-order-2cols-word.docx">working example of 2-column document using Word 2007 (Word file)</a> and <a href="../../working-examples/pdf-reading-order/reading-order-2cols-word.pdf">working example of 2-column document using Word 2007 (PDF file)</a>.</p>
-                
+   </section>
+	 <section id="examples">
+		<h2>Examples</h2>
+		<section class="example">
+			<h3>Creating a 2-column document using Microsoft Word</h3>
+			<p>This example is shown with Microsoft Word. There are other software tools that perform similar functions.</p>
+			<p>Multi-column documents created using Word's Layout &#8594; Columns tool typically are in the correct reading order when converted to tagged PDF. The following image shows Word's Columns tool.</p>
+			<div>
+				<img alt="The Columns tool in Word. Two is selected to lay out the page in 2 columns." height="455" src="img/word-col-tool.png" width="770"/>
+			</div>
+			<p class="working-example">This example is shown in operation in the <a href="../../working-examples/pdf-reading-order/reading-order-2cols-word.docx">working example of 2-column document (Word file)</a> and <a href="../../working-examples/pdf-reading-order/reading-order-2cols-word.pdf">working example of 2-column document using Word (PDF file)</a>.</p>
       </section>
-      <section class="example">
-         <h3>Creating a 2-column document using OpenOffice.org Writer
-    				2.2</h3>
-         
-            <p>This example is shown with OpenOffice.org Writer. There are other software tools that perform similar functions. See the list of other software 
-tools in <a href="#pdf_notes_acc-sup_files_applications"></a>.</p>
-            <p>Multi-column documents created using OpenOffice.org Writer's Format   &gt; Columns...
-    						tool typically are in the correct reading order when converted to tagged
-    						PDF. The image below shows Writer's Columns tool. </p>
-            <figure id="figure-columns-tool-openoffice">
-               <img src="img/oo-2col-tool.jpg" />
-               
-                  <figcaption>The Columns tool in OpenOffice.org Writer. Two is selected to lay out the page in 2 columns.</figcaption>
-                  
-            </figure>
+			<section class="example">
+				<h3>Creating a 2-column document using OpenOffice Writer</h3>
+				<p>This example is shown with OpenOffice Writer. There are other software tools that perform similar functions.</p>
+				<p>Multi-column documents created using OpenOffice Writer's Columns tool typically are in the correct reading order when converted to tagged PDF. The image below shows Writer's Columns tool.
+				The Columns tool can be found under Format.
+				</p>
+				<div><img alt="Where the column tool can be found" src="img/oocolumntool.jpg"/>
+				</div>
+				<div>
+					<img alt="The Columns tool in OpenOffice.org Writer. Two is selected to lay out the page in 2 columns." src="img/oo-2col-tool.jpg"/>
+				</div>
       	<p class="working-example">This example is shown in operation in the <a href="../../working-examples/pdf-reading-order/reading-order-2cols-oo.odt">working example of 2-column document using OpenOffice Writer (OpenOffice file)</a> and <a href="../../working-examples/pdf-reading-order/reading-order-2cols-oo.pdf">working example of 2-column document using OpenOffice Writer (PDF file)</a>.</p>
-                
-      </section>
+			</section>
       <section class="example">
-         <h3>Setting the tab order for one or more pages using Adobe
-    				Acrobat 9 Pro</h3>
-         
-            <p>This example is shown with Adobe Acrobat Pro. There are other software tools that perform similar functions. See the list of other software tools in <a href="#pdf_notes_acc-sup_files_applications"></a>.</p>
-            <p>In a tagged PDF document: </p>
-            <ol>
-               <li>
-                  <p> Open the Pages panel by either:</p>
-                  <ul>
-                     <li> Clicking the Pages icon 
-                              
-                              <img src="img/pages-icon.jpg" alt="Pages icon in the upper left of the Adobe Acrobat Pro navigation pane"/>
-                            
-                        </li>
-                     <li> Or selecting View &gt; Navigation Panels &gt; Pages </li>
-                  </ul>
-               </li>
-               <li> Select one or more page thumbnails. </li>
-               <li> Access the context menu for the selected thumbnail(s) and select
-    						Page Properties... </li>
-               <li> Select the Tab Order tab in the Page Properties dialog. </li>
-               <li> If needed, select a tab order option: </li>
-            </ol>
-            
-      	<table id="PDF3_options">
-      		<tbody>
-      			<tr>
-      				<th> Option </th>
-      				<th> Description </th>
+				<h3>Setting the tab order for one or more pages using Adobe Acrobat Pro</h3>
+				<p>In a tagged PDF document:</p>
+				<ol>
+					<li>Open Organize Pages tool.</li>
+					<li>Select one or more page thumbnails.</li>
+					<li>Right-click to access the context menu for the selected thumbnail(s) and select Page Properties.</li>
+					<li>Select the Tab Order tab in the Page Properties dialog.</li>
+					<li>If needed, select a tab order option:</li>
+				</ol>    
+      	<table>
+					<tbody>
+						<tr>
+							<th>Option</th>
+      				<th>Description</th>
       			</tr>
       			<tr>
-      				<td>
-      					<strong>Use Row Order</strong> 
-      				</td>
-      				<td> Tabs from the upper left field, moving first left to right
-      					and then down, one table row at a time. </td>
+      				<td>Use Row Order</td>
+      				<td>Tabs from the upper left field, moving first left to right and then down, one table row at a time.</td>
       			</tr>
       			<tr>
-      				<td>
-      					<strong>Use Column Order</strong> 
-      				</td>
-      				<td> Tabs from the upper left field, moving first from top to
-    							bottom and then across from left to right, one table column
-      					at a time. </td>
+      				<td>Use Column Order</td>
+      				<td>Tabs from the upper left field, moving first from top to bottom and then across from left to right, one table column at a time.</td>
       			</tr>
       			<tr>
-      				<td>
-      					<strong>Use Document Structure</strong> 
-      				</td>
-      				<td> For tagged documents, moves in the tag order specified by
-    								the authoring application.
-      					<p class="note">This is usually the correct reading
-    									order and will be selected by default for tagged documents. </p>
+      				<td>Use Document Structure</td>
+      				<td>For tagged documents, moves in the tag order specified by the authoring application. This is usually the correct reading order and will be selected by default for tagged documents.
       				</td>
       			</tr>
       			<tr>
-      				<td>
-      					<strong>Unspecified</strong> 
-      				</td>
-      				<td> If the document was created using an earlier version of
-    									Acrobat Pro, the tab order is Unspecified by default. With
-    									this setting, form fields are tabbed through first, followed
-    									by links and then comments ordered by row. This may not be
-      					correct reading order. </td>
+      				<td>Unspecified</td>
+      				<td>If the document was created using an earlier version of Acrobat Pro, the tab order is Unspecified by default. With this setting, form fields are tabbed through first, followed by links and then comments ordered by row. This may not be correct reading order.</td>
       			</tr>
       		</tbody>
       	</table>
-      	
-            
-            <figure id="figure-acrobat-page-properties">
-               <img src="img/page-props.jpg" />
-                  
-                  <figcaption>Page properties in Adobe Acrobat Professional. The choices are Use Row Order, Use Column Order, Use Document Structure, Unspecified. Use Document Structure is selected. This is also the default.</figcaption>
-               
-            </figure>
-      	<p class="working-example">This example is shown in operation in the <a href="../../working-examples/pdf-reading-order/reading-order.docx">working example of setting the tab order (Word file)</a> and <a href="../../working-examples/pdf-reading-order/reading-order.pdf">working example of setting the tab order (PDF file)</a>.</p>
-                  
+      	<p class="working-example">This example is shown in operation in the <a href="../../working-examples/pdf-reading-order/reading-order.docx">working example of setting the tab order (Word file)</a> and <a href="../../working-examples/pdf-reading-order/reading-order.pdf">working example of setting the tab order (PDF file)</a>.</p>    
       </section>
       <section class="example">
-         <h3>Repairing the reading order using the Tags panel in Adobe
-    				Acrobat 9 Pro</h3>
-         
-            <p>This example is shown with Adobe Acrobat Pro. There are other software
-    					tools that perform similar functions. See the list of other software
-    					tools in PDF Authoring Tools that Provide Accessibility Support
-    					(http://trace.wisc.edu/wcag_wiki/index.php?title=PDF_Technology_Notes).</p>
-            <p>To correct the reading order in Example 5, use the Tags panel, and either</p>
-            <ul>
-               <li>Drag-and-drop the <code class="el">H1</code> tag to precede the required-field text
-    						(tagged <code class="el">H2</code>), or</li>
-               <li>Cut-and-paste the <code class="el">H2</code> tag to follow the <code class="el">H1</code> tag.</li>
-            </ul>
-            <p>In the following image, the reading order is correct for the text and
-    								header. That is, the content elements <code class="el">H1</code> and <code class="el">H2</code> have been switched
-    								into the correct reading order.</p>
-            <figure id="figure-acrobat-reading-order">
-               <img src="img/tab-order.jpg" />
-               
-                  <figcaption>Image showing the corrected reading order In
-    						Adobe Acrobat Pro. The tags <code class="el">H1</code> and <code class="el">H2</code> have been switched and are
-    							now in the correct order.</figcaption>
-               
-            </figure>
-         
-      </section>
-   </section><section id="tests"><h2>Tests</h2>
-      <section class="procedure"><h3>Procedure</h3>
-         <ol>
-            <li>
-               <p> Verify that the content is in the correct reading order by one
-    					of the following:</p>
-               <ul>
-                  <li> Read the PDF document with a screen reader or a tool that reads aloud, listening to hear that each element is read in
-    						the correct order. </li>
-                  <li> Use a tool that exposes the document through the accessibility
-    							API, and verify that the reading order is correct. </li>
-               </ul>
-            </li>
-            <li>
-               <p> Verify that the tab order is correct for focusable content by
-    					one of the following:</p>
-               <ul>
-                  <li> Use the tab key to traverse the focus order in the document. </li>
-                  <li> Use a tool that is capable of showing the page object entry
-    						that specifies the tab order setting to open the PDF document
-    						and view the setting. </li>
-               </ul>
-            </li>
-         </ol>
+				<h3>Repairing the reading order using the Tags panel in Adobe Acrobat Pro</h3>
+				<p>This example is shown with Adobe Acrobat Pro. There are other software tools that perform similar functions.</p>
+				<p>Use the Tags panel to correct the reading order. Either:</p>
+				<ul>
+					<li>Drag and drop a tag to its required position, or</li>
+					<li>Cut a tag and paste it to its required position.</li>
+				</ul>
       </section>
-      <section class="results"><h3>Expected Results</h3>
-         <ul>
-            <li>#1 and Check #2 are true. </li>
-         </ul>
+		</section>
+		<section id="tests">
+			<h2>Tests</h2>
+			<section class="procedure">
+				<h3>Procedure</h3>
+				<ol>
+					<li>
+						<p>Verify that the content is in the correct reading order by one of the following:</p>
+						<ul>
+							<li>Read the PDF document with a screen reader or a tool that reads aloud, listening to hear that each element is read in the correct order.</li>
+							<li>Use a tool that exposes the document through the accessibility <abbr title="Application Programming Interface">API</abbr>, and verify that the reading order is correct.</li>
+						</ul>
+					</li>
+					<li>
+						<p>Verify that the tab order is correct for focusable content by one of the following:</p>
+						<ul>
+							<li>Use the tab key to traverse the focus order in the document.</li>
+							<li> Use a tool that is capable of showing the page object entry that specifies the tab order setting to open the PDF document and view the setting.</li>
+						</ul>
+					</li>
+				</ol>
+			</section>
+      <section class="results">
+				<h3>Expected Results</h3>
+				<ul>
+					<li>#1 and Check #2 are true.</li>
+				</ul>
       </section>
-   </section><section id="related"><h2>Related Techniques</h2><ul>
-      <li><a href="../general/G57">G57</a></li>
-      <li><a href="../general/G59">G59</a></li>
-      <li><a href="../general/G202">G202</a></li>
-   </ul></section><section id="resources"><h2>Resources</h2>
-      
-         <ul>
-            <li> Section 14.8 (Tagged PDF) in <a href="http://www.adobe.com/content/dam/Adobe/en/devnet/pdf/pdfs/PDF32000_2008.pdf">PDF
-    					1.7 (ISO 32000-1)</a> 
-               </li>
-            <li>
-                  <a href="http://www.adobe.com/accessibility/products/acrobat.html">PDF and Accessibility</a>
-               </li>
-            <li>
-                  <a href="http://www.pdf-accessible.com/wp-content/uploads/2015/01/making-PDF-accessible-Acrobat.pdf">Making PDF documents accessible with Adobe Acrobat Pro</a>
-               </li>
-         </ul>
-      
-   </section></body></html>
+		</section>
+		<section id="related">
+			<h2>Related Techniques</h2>
+			<ul>
+				<li><a href="../general/G57">G57</a></li>
+				<li><a href="../general/G59">G59</a></li>
+				<li><a href="../general/G202">G202</a></li>
+			</ul>
+		</section>
+		<section id="resources">
+			<h2>Resources</h2>
+			<ul>
+				<li>Section 14.8 (Tagged PDF) in <a href="https://opensource.adobe.com/dc-acrobat-sdk-docs/pdfstandards/PDF32000_2008.pdf">PDF 1.7 (ISO 32000-1) (PDF)</a>
+				</li>
+				<li>
+					<a href="https://webaim.org/techniques/acrobat/acrobat">Acrobat and Accessibility</a>
+				</li>
+				<li>
+					<a href="https://helpx.adobe.com/acrobat/using/create-verify-pdf-accessibility.html">Create and verify PDF accessibility (Acrobat Pro)</a>
+				</li>
+			</ul>
+		</section>
+	</body>
+	</html>
diff --git a/techniques/pdf/PDF4.html b/techniques/pdf/PDF4.html
index 90d4bafd18..79b55a0f14 100644
--- a/techniques/pdf/PDF4.html
+++ b/techniques/pdf/PDF4.html
@@ -1,99 +1,86 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Hiding decorative images with the Artifact tag in PDF documents</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Hiding decorative images with the Artifact tag in PDF documents</h1><section class="meta"><p class="id">ID: PDF4</p><p class="technology">Technology: pdf</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
-      <p id="pdf.applicability.general">Tagged PDF documents</p>
-   </section><section id="description"><h2>Description</h2>
-      <p>The purpose of this technique is to show how purely decorative images
-    				in PDF documents can be marked so that they can be ignored by Assistive
-    				Technology by using the /Artifact tag. This is typically accomplished
-    				by using a tool for authoring PDF. </p>
-      <p>In PDF, artifacts are generally graphics objects or other markings
-    				that are not part of the authored content. Examples of artifacts include
-    				page header or footer information, lines or other graphics separating
-    				sections of the page, or decorative images. </p>
-   </section><section id="examples"><h2>Examples</h2>
-      <section class="example">
-         <h3>Marking a background image as an artifact using Adobe
-    					Acrobat 9 Pro's TouchUp Reading Order Tool</h3>
-         
-            <p>This example is shown with Adobe Acrobat Pro. There are other software tools that perform similar functions. See the list of other software tools in <a href="#pdf_notes_acc-sup_files_applications"></a>.</p>
-            <p>The TouchUp Reading Order Tool can be used to mark an image as "Background," which
-    						removes it from the document tag structure. </p>
-            <ol>
-               <li> Open the TouchUp Reading Order Tool in Acrobat Pro: Advanced &gt; Accessibility &gt; TouchUp
-    						Reading Order </li>
-               <li> Select the decorative image in the document </li>
-               <li> In the TouchUp Reading Order Tool, click the Background button
-    							to remove the selected image from the tag structure </li>
-            </ol>
-            <p>The screenshot below illustrates this example. </p>
-            <figure id="figure-turo-remove-image">
-               <img src="img/turo_background.gif" />
-                  
-                  <figcaption>screen shot showing use of the TouchUp Reading Order panel to remove an image from the tag tree</figcaption>
-                
-            </figure>
-      	<p class="working-example">This example is shown in operation in the <a href="../../working-examples/pdf-decorative-image/decorative-image.docx">working example of creating a decorative image (Word file)</a> and <a href="../../working-examples/pdf-decorative-image/decorative-image.pdf">working example of marking a background image as an artifact (PDF file)</a>.</p>
-         
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>Hiding decorative images with the Artifact tag in PDF documents</title>
+		<link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+	</head>
+	<body>
+		<h1>Hiding decorative images with the Artifact tag in <abbr title="Portable Document Format">PDF</abbr> documents</h1>
+		<section class="meta">
+			<p class="id">ID: PDF4</p>
+			<p class="technology">Technology: pdf</p>
+			<p class="type">Type: Technique</p>
+		</section>
+		<section id="applicability">
+			<h2>When to Use</h2>
+      <p id="pdf-applicability-general">Tagged PDF documents</p>
+   </section>
+	 <section id="description">
+		<h2>Description</h2>
+		<p>The purpose of this technique is to show how purely decorative images in PDF documents can be marked so that they can be ignored by Assistive Technology by using the <code>/Artifact</code> tag. This is typically accomplished by using a tool for authoring PDF.</p>
+		<p>In PDF, artifacts are generally graphics objects or other markings that are not part of the authored content. Examples of artifacts include page header or footer information, lines or other graphics separating sections of the page, or decorative images.</p>
+   </section>
+	 <section id="examples">
+		<h2>Examples</h2>
+		<section class="example">
+			<h3>Marking an image as an artifact using Acrobat Pro's TouchUp Reading Order Tool</h3>
+			<p>This example is shown with Adobe Acrobat Pro. There are other software tools that perform similar functions.</p>
+			<p>The TouchUp Reading Order Tool can be used to mark an image as "Background / Artifact", which removes it from the document tag structure.</p>
+			<ol>
+				<li>Open the TouchUp Reading Order Tool in Acrobat Pro: Accessibility &#8594; TouchUp Reading Order</li>
+				<li>Select the decorative image in the document</li>
+				<li>In the TouchUp Reading Order Tool, click the Background/Artifact button to remove the selected image from the tag structure</li>
+			</ol>
+			<p class="working-example">This example is shown in operation in the <a href="../../working-examples/pdf-decorative-image/decorative-image.docx">working example of creating a decorative image (Word file)</a> and <a href="../../working-examples/pdf-decorative-image/decorative-image.pdf">working example of marking a background image as an artifact (PDF file)</a>.</p>   
       </section>
-      <section class="example">
-         <h3>Marking an image as an artifact in a PDF document using
-    				an /Artifact tag or property list</h3>
-         
-            <p>The PDF specification allows images to be marked as "artifacts" as
-    						defined in Section 14.8.2.2 (Real Content and Artifacts) in <a href="http://www.adobe.com/content/dam/Adobe/en/devnet/pdf/pdfs/PDF32000_2008.pdf">PDF
-    							1.7 (ISO 32000-1)</a>. An artifact is explicitly distinguished from
-    						real content by enclosing it in a marked-content sequence with the
-    						/Artifact tag. </p>
-            <p>/Artifact </p>
-            <pre xml:space="preserve">BMC  ...  EMC    </pre>
-            <p>or </p>
-            <p>/Artifact propertyList </p>
-            <pre xml:space="preserve">BDC  ...  EMC  </pre>
-            <p>The first is used to identify a generic artifact; the second is
-    						used for artifacts that have an associated property list. Note, to
-    						aid in text reflow, artifacts should be defined with property lists
-    						whenever possible. Artifacts lacking a specified bounding box are
-    						likely to be discarded during reflow. </p>
-            <p>Property list entries for artifacts include Type, BBox, Attached,
-    						and Subtype. </p>
-         
-      </section>
-   </section><section id="tests"><h2>Tests</h2>
-      <section class="procedure"><h3>Procedure</h3>
-         <ol>
-            <li>
-               <p>For an image that is purely decorative, use one of the following
-    					to verify that it is marked as an artifact:</p>
+			<section class="example">
+				<h3>Marking an image as an artifact in a PDF document using an /Artifact tag or property list</h3>
+				<p>The PDF specification allows images to be marked as "artifacts". An artifact is explicitly distinguished from real content by enclosing it in a marked-content sequence with the <code>/Artifact</code> tag.</p>
+				
+				<section id="artifact">
+					<h4>/Artifact</h4>
+            <pre xml:space="preserve"><code>BMC  ...  EMC</code></pre>
+            <p>or</p>
+            <h4>/Artifact propertyList</h4>
+            <pre xml:space="preserve"><code>BDC  ...  EMC</code></pre>
+            <p>The first is used to identify a generic artifact; the second is used for artifacts that have an associated property list. Note, to aid in text reflow, artifacts should be defined with property lists whenever possible. Artifacts lacking a specified bounding box are likely to be discarded during reflow.</p>
+            <p>Property list entries for artifacts include <code>Type</code>, <code>BBox</code>, <code>Attached</code>, and <code>Subtype</code>.</p>
+					</section>
+				</section>
+			</section>
+				<section id="tests">
+					<h2>Tests</h2>
+					<section class="procedure">
+						<h3>Procedure</h3>
+						<ol>
+							<li>
+               <p>For an image that is purely decorative, use one of the following to verify that it is marked as an artifact:</p>
                <ul>
-                  <li> Read the PDF document with a screen reader, listening to hear
-    						that the decorative image is not announced when 
-reading the content line-by-line. </li>
-                  <li> Using a PDF editor, make sure the decorative image is marked as an artifact. </li>
-                  <li> Reflow the document and make sure the
-    								decorative image does not appear on the page. </li>
-                  <li> Use a tool that is capable of showing the /Artifact entry
-    									or property list, such as aDesigner, to open the PDF document
-    									and verify that decorative images are marked as artifacts. </li>
-                  <li> Use a tool
-that exposes the document through the accessibility API and verify that the
-decorative image is not exposed through the API. </li>
-               </ul>
-            </li>
-         </ol>
-      </section>
-      <section class="results"><h3>Expected Results</h3>
-         <ul>
-            <li>#1 is true. </li>
-         </ul>
-      </section>
-   </section><section id="resources"><h2>Resources</h2>
-      
-         <ul>
-            <li> Section 14.8.2.2 (Real Content and Artifacts) in <a href="http://www.adobe.com/content/dam/Adobe/en/devnet/pdf/pdfs/PDF32000_2008.pdf">PDF
-    					1.7 (ISO 32000-1)</a> 
-               </li>
+                  <li>Read the PDF document with a screen reader, listening to hear that the decorative image is not announced when reading the content line-by-line.</li>
+                  <li>Using a PDF editor, make sure the decorative image is marked as an artifact.</li>
+                  <li>Reflow the document and make sure the decorative image does not appear on the page.</li>
+                  <li>Use a tool that is capable of showing the /Artifact entry or property list, such as aDesigner, to open the PDF document and verify that decorative images are marked as artifacts.</li>
+                  <li>Use a tool that exposes the document through the accessibility API and verify that the decorative image is not exposed through the <abbr title="Application Programming Interface">API</abbr>.</li>
+								</ul>
+							</li>
+						</ol>
+					</section>
+					<section class="results">
+						<h3>Expected Results</h3>
+						<ul>
+							<li>#1 is true.</li>
+						</ul>
+					</section>
+				</section>
+				<section id="resources">
+					<h2>Resources</h2>
+					<ul>
+						<li>Section 14.8.2.2 (Real Content and Artifacts) in <a href="https://opensource.adobe.com/dc-acrobat-sdk-docs/pdfstandards/PDF32000_2008.pdf">PDF 1.7 (ISO 32000-1) (PDF)</a>
+						</li>
             <li>
-                  <a href="http://www.adobe.com/accessibility/products/acrobat.html">PDF and Accessibility</a>
-               </li>
+							<a href="https://helpx.adobe.com/acrobat/using/create-verify-pdf-accessibility.html">Create and verify PDF accessibility (Acrobat Pro)</a>
+						</li>
          </ul>
-      
-   </section></body></html>
+   </section>
+	</body>
+	</html>
diff --git a/techniques/pdf/PDF5.html b/techniques/pdf/PDF5.html
index cbf93742e9..4299b2c055 100644
--- a/techniques/pdf/PDF5.html
+++ b/techniques/pdf/PDF5.html
@@ -1,103 +1,48 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Indicating required form controls in PDF forms</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Indicating required form controls in PDF forms</h1><section class="meta"><p class="id">ID: PDF5</p><p class="technology">Technology: pdf</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
-      <p>Tagged PDF documents with forms</p>
-   </section><section id="description"><h2>Description</h2>
-      <p>The objective of this technique is to notify the user when a field
-    				that must be completed has not been completed in a PDF form. Required
-    				fields are implemented using the /Ff entry in the form field's dictionary
-    				(see Table 220 in Section 12.7 (Interactive Forms) of <a href="http://www.adobe.com/content/dam/Adobe/en/devnet/pdf/pdfs/PDF32000_2008.pdf">PDF
-    					1.7 (ISO 32000-1)</a>. This is normally accomplished using a tool for
-    				authoring PDF. </p>
-      <p>If errors are found, an alert dialog describes the nature of the error
-    				in text. This may be accomplished through scripting created by the
-    				author (see, for example, <a href="https://www.w3.org/WAI/WCAG21/Techniques/client-side-script/SCR18">SCR18:
-    					Providing client-side validation and alert</a>). User agents, such
-    				as Adobe Acrobat Pro and LiveCycle, can provide automatic alerts (as
-    				described in the examples below). </p>
-      <p>
-         <em>Note</em>: once the user dismisses the alert dialog, it
-    				may be helpful if the script positions the keyboard focus on the field
-    				where the error occurred, although some users may expect the focus
-    				to remain on the last control focused prior to the alert appearing.
-    				Authors should exercise care to ensure that any movement of the focus
-    				will be expected. For example, if the alert announces a missing required
-    				phone number, positioning the focus on the phone number field when
-    				the alert is dismissed can be regarded as helpful and expected. In
-    				some cases, however, this may not be possible. If multiple input errors
-    				occur on the page, another approach must be taken to error reporting. 
-(See, for example, the <a href="http://www.adobe.com/devnet/acrobat/javascript.html">Adobe scripting resources.</a>) </p>
-      <p>Ensuring that users are aware an error has occurred, can determine
-    				what is wrong, and can correct it are keys to software usability and
-    				accessibility. Meeting this objective helps ensure that all users can
-    				complete transactions with ease and confidence. </p>
-   	<section id="PDF5_labels">
-         <h4> Labels for required form controls </h4>
-         <p>It is also important that users are aware that an error <em>may</em> occur.
-    				You can incorporate this information in labels; for example,   "Date
-    				(required)" or the use of a red asterisk to indicate required
-    				fields. (Make sure that a legend appears on each form with required
-    				fields, e.g., "* = required field".) See <a href="#PDF10"></a>. </p>
-   	</section>
-   </section><section id="examples"><h2>Examples</h2>
-      <section class="example">
-         <h3>Creating a required field in a PDF form using Adobe Acrobat
-    					9 Pro</h3>
-         
-            <p>This example is shown with Adobe Acrobat Pro. There are other software tools that perform similar functions. See the list of other software tools in <a href="#pdf_notes_acc-sup_files_applications"></a>.</p>
-            <ol>
-               <li> Access the context menu of the field and select the Properties
-    						dialog. </li>
-               <li> If the field is required, check the Required box. This checkbox
-    							forces the user to fill in the selected form field. If the user attempts
-    							to submit the form while a required field is blank, an error message
-    							appears and the empty required form field is highlighted. </li>
-            </ol>
-            <figure id="figure-form-field-properties-dialog">
-               <img src="img/form4.jpg" />
-                  
-                  <figcaption>The Properties dialog for a form field. The Required box is checked.</figcaption>
-                
-            </figure>
-            <p class="working-example">This example is shown in operation in the <a href="../../working-examples/pdf-required-fields/required-fields.pdf">working example of creating a required field in Acrobat</a>.</p>
-         
-      </section>
-      <section class="example">
-         <h3>Creating a required field in a PDF form using Adobe LiveCycle
-    				Designer ES 8.2.1</h3>
-         
-            <p>This example is shown with Adobe LiveCycle Designer. There are other software tools that perform similar functions. See the list of other software tools in <a href="#pdf_notes_acc-sup_files_applications"></a>.</p>
-            <ol>
-               <li> Access the context menu of the form control, select Palettes,
-    						and select Object. </li>
-               <li> Select "User entered - Required" from the Type pulldown. </li>
-               <li> Enter an error message in the "Empty Message" field.
-    							This message appears when a user tries to submit the form without
-    							entering a value in the required field. </li>
-            </ol>
-            <p>If the user attempts to submit the form with a required field left
-    						blank, the Empty Message text appears and the empty required field
-    						is highlighted. </p>
-            <p>The image below shows the Adobe LiveCycle Object palette with the
-    						required selection. </p>
-            <figure id="figure-livecycle-object-palette-required">
-               <img src="img/lc-required2.gif" />
-                  
-                  <figcaption>Image of Adobe LiveCycle Object palette showing the 'User entered - Required' selection.</figcaption>
-                
-            </figure>
-            <p>You can also add explicit text to the form label to indicate required
-    					fields (e.g., "(Required)"). </p>
-      	<p class="working-example">This example is shown in operation in the <a href="../../working-examples/pdf-required-fields/required-fields-lc.pdf">working example of creating a required field in LiveCycle Designer</a>.</p>
-         
-      </section>
-      <section class="example">
-         <h3>Adding a required text field in a PDF form using the /Tx
-    				field type and Ff flag</h3>
-         
-            <p>The following code fragment illustrates code that is typical for the
-    						object definitions for a typical text field. Note that the text field
-    						is required, using the Ff flag. This is typically accomplished by an
-    						authoring tool. </p>
-            <pre xml:space="preserve">&lt;&lt; /AP -dict-                                                   
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head>
+	<title>Indicating required form controls in PDF forms</title>
+	<link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+</head>
+<body>
+	<h1>Indicating required form controls in <abbr title="Portable Document Format">PDF</abbr> forms</h1>
+	<section class="meta">
+		<p class="id">ID: PDF5</p>
+		<p class="technology">Technology: pdf</p>
+		<p class="type">Type: Technique</p>
+	</section>
+	<section id="applicability">
+		<h2>When to Use</h2>
+		<p>Tagged PDF documents with forms</p>
+	</section>
+	<section id="description">
+		<h2>Description</h2>
+		<p>The objective of this technique is to notify the user when a field that must be completed has not been completed in a PDF form. Required fields are implemented using the <code>/Ff</code> entry in the form field's dictionary. This is normally accomplished using a tool for authoring PDFs.</p>
+		<p>If errors are found, an alert dialog describes the nature of the error in text. This may be accomplished through scripting created by the author (see, for example, <a href="../client-side-script/SCR18">SCR18: Providing client-side validation and alert</a>). User agents, such as Adobe Acrobat Pro and LiveCycle, can provide automatic alerts (as described in the examples below).</p>
+		<div class="note">
+			<p>Once the user dismisses the alert dialog, it may be helpful if the script positions the keyboard focus on the field where the error occurred, although some users may expect the focus to remain on the last control focused prior to the alert appearing. Authors should exercise care to ensure that any movement of the focus will be expected. For example, if the alert announces a missing required phone number, positioning the focus on the phone number field when the alert is dismissed can be regarded as helpful and expected. In some cases, however, this may not be possible. If multiple input errors occur on the page, another approach must be taken to error reporting. (See, for example, the <a href="https://opensource.adobe.com/dc-acrobat-sdk-docs/acrobatsdk/">Adobe <abbr title="Software Development Kit">SDK</abbr>.</a>) </p>
+		</div>
+      <p>Ensuring that users are aware an error has occurred, can determine what is wrong, and can correct it are keys to software usability and accessibility. Meeting this objective helps ensure that all users can complete transactions with ease and confidence.</p>
+			<section id="PDF5_labels">
+				<h3> Labels for required form controls</h3>
+         <p>It is also important that users are aware that an error <em>may</em> occur. You can incorporate this information in labels; for example, "Date (required)" or the use of a red asterisk to indicate required fields. (Make sure that a legend appears on each form with required fields, e.g., "* = required field".) See <a href="../pdf/PDF10">PDF10</a>.</p>
+				</section>
+			</section>
+			<section id="examples">
+				<h2>Examples</h2>
+				<section class="example">
+					<h3>Creating a required field in a PDF form using Acrobat Pro</h3>
+					<ol>
+						<li>Open the Prepare Form tool, access the form field's context menu, and then select the Properties option.</li>
+            <li>If the form field is required, check the Required box. This checkbox forces the user to fill in the selected form field. If the user attempts to submit the form while a required field is blank, an error message appears and the empty required form field is highlighted.</li>
+          </ol>
+					<div>
+						<img alt="The Properties dialog for a form field. The Required box is checked on the First Name field." height="358" src="img/adding-required-field.png" width="770"/>
+					</div>
+          <p class="working-example">This example is shown in operation in the <a href="../../working-examples/pdf-required-fields/required-fields.pdf">working example of creating a required field in Acrobat</a>.</p>
+				</section>
+				<section class="example">
+					<h3>Adding a required text field in a PDF form using the /Tx field type and Ff flag</h3>
+          <p>The following code fragment illustrates code that is typical for the object definitions for a typical text field. Note that the text field is required, using the Ff flag. This is typically accomplished by an authoring tool.</p>
+<pre xml:space="preserve"><code>&lt;&lt; /AP -dict-                                                   
    /DA /Helv  0 Tf 0 g
    /DR -dict-
    /F 0x4
@@ -118,66 +63,66 @@ <h3>Adding a required text field in a PDF form using the /Tx
   /P &lt;&lt;/MCID 0 &gt;&gt;BDC
   /CS0 cs 0  scn 
   /TT0 1 Tf
-    -0.001 Tc 0.003 Tw 11.04 0 0 11.04 72 709.56 Tm
-    [(P)-6(le)-3(as)10(e)-3( )11(P)-6(rin)2(t)-3( Y)8(o)-7(u)2(r N)4(a)11(m)-6(e)]TJ
+   -0.001 Tc 0.003 Tw 11.04 0 0 11.04 72 709.56 Tm
+   [(P)-6(le)-3(as)10(e)-3( )11(P)-6(rin)2(t)-3( Y)8(o)-7(u)2(r N)4(a)11(m)-6(e)]TJ
   0 Tc 0 Tw 9.533 0 Td
   ( )Tj
   -0.004 Tc 0.004 Tw 0.217 0 Td
   [(\()-5(R)-4(e)5(q)-1(u)-1(i)-3(r)-3(e)-6(d)-1(\))]TJ
- EMC
-  /P &lt;&lt;/MCID 1 &gt;&gt;BDC
-  0 Tc 0 Tw 4.283 0 Td
-  [( )-2( )]TJ
    EMC
-   /ArtifactSpan &lt;&lt;/MCID 2 &gt;&gt;BDC
-   0.002 Tc -0.002 Tw 0.456 0 Td
-  [(__)11(___)11(___)11(___)11(___)11(_)11(____)11(___)11(___)11(__)]TJ
-  0 Tc 0 Tw 13.391 0 Td
-  ( )Tj
+   /P &lt;&lt;/MCID 1 &gt;&gt;BDC
+   0 Tc 0 Tw 4.283 0 Td
+   [( )-2( )]TJ
+    EMC
+    /ArtifactSpan &lt;&lt;/MCID 2 &gt;&gt;BDC
+    0.002 Tc -0.002 Tw 0.456 0 Td
+    [(__)11(___)11(___)11(___)11(___)11(_)11(____)11(___)11(___)11(__)]TJ
+    0 Tc 0 Tw 13.391 0 Td
+    ( )Tj
   EMC
- ET
-&lt;End Stream&gt;
-</pre>
-         
+ET
+&lt;End Stream&gt;	
+</code></pre>
       </section>
-   </section><section id="tests"><h2>Tests</h2>
-      <section class="procedure"><h3>Procedure</h3>
-         <p>For each form field that is required, verify that validation information
-    					and instructions are provided by applying the following: </p>
+		</section>
+		<section id="tests">
+			<h2>Tests</h2>
+			<section class="procedure">
+				<h3>Procedure</h3>
+				<p>For each form field that is required, verify that validation information and instructions are provided by applying the following:</p>
          <ol>
-            <li> Check that the required status is indicated in the form control's
-    					label. </li>
-            <li> Leave the field blank and submit the form. Check that an alert
-    						describing the error is provided. </li>
-            <li> Use a tool that exposes the document through the accessibility
-    							API, and verify that the required property is indicated. </li>
+            <li>Check that the required status is indicated in the form control's label.</li>
+            <li>Leave the field blank and submit the form. Check that an alert describing the error is provided.</li>
+            <li>Use a tool that exposes the document through the accessibility <abbr title="Application Programming Interface">API</abbr>, and verify that the required property is indicated.</li>
          </ol>
-      </section>
-      <section class="results"><h3>Expected Results</h3>
-         <ul>
-            <li>#1, #2, and #3 are true. </li>
-         </ul>
-      </section>
-   </section><section id="related"><h2>Related Techniques</h2><ul>
-      <li><a href="../general/G83">G83</a></li>
-      <li><a href="../html/H90">H90</a></li>
-      <li><a href="../client-side-script/SCR18">SCR18</a></li>
-      <li><a href="../pdf/PDF23">PDF23</a></li>
-      <li><a href="../pdf/PDF10">PDF10</a></li>
-      <li><a href="../pdf/PDF22">PDF22</a></li>
-   </ul></section><section id="resources"><h2>Resources</h2>
-      
+				</section>
+				<section class="results">
+					<h3>Expected Results</h3>
+					<ul>
+						<li>#1, #2, and #3 are true.</li>
+					</ul>
+				</section>
+			</section>
+			<section id="related">
+				<h2>Related Techniques</h2>
+				<ul>
+      		<li><a href="../general/G83">G83</a></li>
+					<li><a href="../html/H90">H90</a></li>
+					<li><a href="../client-side-script/SCR18">SCR18</a></li>
+					<li><a href="../pdf/PDF23">PDF23</a></li>
+					<li><a href="../pdf/PDF10">PDF10</a></li>
+					<li><a href="../pdf/PDF22">PDF22</a></li>
+				</ul>
+			</section>
+			<section id="resources">
+				<h2>Resources</h2>
          <ul>
-            <li> Section 12.7 (Interactive Forms) in <a href="http://www.adobe.com/content/dam/Adobe/en/devnet/pdf/pdfs/PDF32000_2008.pdf">PDF
-    				1.7 (ISO 32000-1)</a> 
-               </li>
-            <li> 
-                  <a href="http://partners.adobe.com/public/developer/xml/index_arch.html">Adobe
-    					XML Forms Architecture (XFA)</a> 
-               </li>
-            <li>
-                  <a href="http://www.adobe.com/accessibility/products/acrobat.html">PDF and Accessibility</a>
-               </li>
+					<li>Section 12.7 (Interactive Forms) in <a href="https://opensource.adobe.com/dc-acrobat-sdk-docs/pdfstandards/PDF32000_2008.pdf">PDF 1.7 (ISO 32000-1) (PDF)</a>
+					</li>
+					<li>
+						<a href="https://helpx.adobe.com/acrobat/using/create-verify-pdf-accessibility.html">Create and verify PDF accessibility (Acrobat Pro)</a>
+					</li>
          </ul>
-      
-   </section></body></html>
+				</section>
+			</body>
+		</html>
diff --git a/techniques/pdf/PDF6.html b/techniques/pdf/PDF6.html
index d9b88cca06..4bea9844a5 100644
--- a/techniques/pdf/PDF6.html
+++ b/techniques/pdf/PDF6.html
@@ -1,196 +1,167 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using table elements for table markup in PDF Documents</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Using table elements for table markup in PDF Documents</h1><section class="meta"><p class="id">ID: PDF6</p><p class="technology">Technology: pdf</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>Using table elements for table markup in PDF Documents</title>
+		<link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+	</head>
+	<body><h1>Using table elements for table markup in <abbr title="Portable Document Format">PDF</abbr> Documents</h1>
+		<section class="meta">
+			<p class="id">ID: PDF6</p>
+			<p class="technology">Technology: pdf</p>
+			<p class="type">Type: Technique</p>
+		</section>
+		<section id="applicability">
+			<h2>When to Use</h2>
       <p>Tagged PDF documents with tables</p>
-   </section><section id="description"><h2>Description</h2>
-      <p>The purpose of this technique is to show how tables in PDF documents
-    				can be marked up so that they are recognized by assistive technology.
-    				This is typically accomplished by using a tool for authoring PDF. </p>
-      <p>Tabular information must be presented in a way that preserves relationships
-    				within the information even when users cannot see the table or the
-    				presentation format is changed. Information is considered tabular when
-    				logical relationships among text, numbers, images, or other data exist
-    				in two dimensions (vertical and horizontal). These relationships are
-    				represented in columns and rows, and the columns and rows must be recognizable
-    				in order for the logical relationships to be perceived. </p>
-      <p>Tagged tables can be created using the Add Tags to Document feature
-    				in Adobe Acrobat, using the Object Library in Adobe LiveCycle, or converting
-    				tables to PDF from a third-party application, such as Microsoft Word.
-    				However, the resulting tables may not be tagged correctly and you should
-    				ensure that table tagging issues are resolved. </p>
-      <p>Within PDF documents, a table uses the following structure types for
-    				table elements: </p>
+		</section>
+		<section id="description">
+			<h2>Description</h2>
+      <p>The purpose of this technique is to show how tables in PDF documents can be marked up so that they are recognized by assistive technology. This is typically accomplished by using a tool for authoring PDF.</p>
+      <p>Tabular information must be presented in a way that preserves relationships within the information even when users cannot see the table or the presentation format is changed. Information is considered tabular when logical relationships among text, numbers, images, or other data exist in two dimensions (vertical and horizontal). These relationships are represented in columns and rows, and the columns and rows must be recognizable in order for the logical relationships to be perceived.</p>
+      <p>Tagged tables can be created using the Add Tags to Document feature in Adobe Acrobat, using the Object Library in Adobe LiveCycle, or converting tables to PDF from a third-party application, such as Microsoft Word. However, the resulting tables may not be tagged correctly and you should ensure that table tagging issues are resolved.</p>
+      <p>Within PDF documents, a table uses the following structure types for table elements:</p>
       <ul>
-         <li> A table element (<em>Table</em>). </li>
-         <li> One or more table row elements(<em>TR</em>) which define each
-    				row of table cells as immediate children of the <em>Table</em> element. </li>
-         <li> One or more table header elements (<em>TH</em>) or table data
-    					elements (<em>TD</em>) as the immediate children of each table row
-    					element. </li>
-         <li> Cells that span two or more rows or columns should use the <em>RowSpan</em> or <em>ColSpan</em> attribute. </li>
-         <li> For tables that contain blank cells, you may need to add empty <em>TD</em> cells
-    						so that each row or column has the same number of cells. </li>
+         <li>A table element (<code>Table</code>).</li>
+         <li>One or more table row elements (<code>TR</code>) which define each row of table cells as immediate children of the <code>Table</code> element.</li>
+         <li>One or more table header elements (<code>TH</code>) or table data elements (<code>TD</code>) as the immediate children of each table row element.</li>
+         <li>Cells that span two or more rows or columns should use the <code>RowSpan</code> or <code>ColSpan</code> attribute.</li>
+         <li>For tables that contain blank cells, you may need to add empty <code>TD</code> cells so that each row or column has the same number of cells.</li>
       </ul>
-   </section><section id="examples"><h2>Examples</h2>
-      <section class="example">
-         <h3>Creating tables in Microsoft Word 2007 that have correctly
-    					tagged headings when converted to PDF</h3>
-         
-            <p>This example is shown with Microsoft Word. There are other software tools that perform similar functions. See the list of other software tools in <a href="#pdf_notes_acc-sup_files_applications"></a>.</p>
-            <ol>
-               <li> Access the table header row's context menu and select Table Properties... </li>
-               <li> Select the Row tab. </li>
-               <li> Check "Repeat as header at the top of each page" as
-    						shown in the following image. </li>
-            </ol>
-            <figure id="figure-word-table-props">
-               <img src="img/word-table.jpg" />
-                  
-                  <figcaption>Image of Table properties dialog for the first table row in Word, with the Row tab selected. 'Repeat as header at the top of each page' is checked to ensure that the first row is marked as header cells.</figcaption>
-                
-            </figure>
-            <p class="working-example">This example is shown in operation in the <a href="../../working-examples/pdf-tables/table-example-noheaderrow.docx">working example of tagged table headings in Word 2007</a>.</p>
-            <div class="note">
-               <p>Microsoft Word can only mark up cells as column headings, not as row headings.  Only the first row can be marked as heading for all table columns.  When the table has row headings or a more complex heading structure, this mark-up must be added in a PDF editor such as Acrobat Pro.</p>
-            </div>
-         
+		</section>
+		<section id="examples">
+			<h2>Examples</h2>
+			<section class="example">
+				<h3>Creating tables in Microsoft Word that have correctly tagged headings when converted to PDF</h3>
+				<p>This example is shown with Word. There are other software tools that perform similar functions.</p>
+				<ol>
+					<li>Select the table</li>
+					<li>In the Ribbon, select Table Design.</li>
+					<li>Check the Header Row checkbox</li>
+				</ol>
+				<div>
+					<img alt="The Table Design section in Word, with the Header Row checkbox checked to ensure that the first row is marked as header cells." src="img/word-table.png" width="770"/>
+				</div>
+				<p class="working-example">This example is shown in operation in the <a href="../../working-examples/pdf-table-headers/table-example-header-row.docx">working example of tagged table headings in Word</a>.</p>
+				<div class="note">
+					<p>When the table has a more complex heading structure, this mark-up must be added in a PDF editor such as Acrobat Pro.</p>
+				</div> 
       </section>
       <section class="example">
-         <h3>Creating tables in OpenOffice.org Writer 2.2 that have
-    				correctly tagged headings when converted to PDF</h3>
-         
-            <p>This example is shown with OpenOffice.org Writer. There are other software tools that perform similar functions. See the list of other software tools in <a href="#pdf_notes_acc-sup_files_applications"></a>.</p>
-            <ol>
-               <li> Access the table's context menu and select Table... </li>
-               <li> Select the Table Format tab. </li>
-               <li> Check Repeat Heading and select "1" in the First Rows
-    						listbox as shown in the following image. </li>
-            </ol>
-            <figure id="figure-openoffice-table-dialog">
-               <img src="img/openofficetableheads.jpg" />
-                  
-                  <figcaption>Image of Table dialog in OpenOffice.org Writer with Table Format tab selected. Repeat Heading is checked and 1 is selected in the First Rows listbox to ensure that the first row is marked as header cells.</figcaption>
-                
-            </figure>
-      	<p class="working-example">This example is shown in operation in the <a href="../../working-examples/pdf-tables/table-example-noheaderrow.odt">working example of tagged table headings in OpenOffice Writer</a>.</p>
-            <div class="note">
-               <p>OpenOffice.org Writer can only mark up cells as column headings, not as row headings.  Only the first row can be marked as heading for all table columns.  When the table has row headings or a more complex heading structure, this mark-up must be added in a PDF editor such as Acrobat Pro.</p>
-            </div>
-         
+         <h3>Creating tables in OpenOffice.org Writer 2.2 that have correctly tagged headings when converted to PDF</h3>
+				 <p>This example is shown with OpenOffice.org Writer. There are other software tools that perform similar functions.</p>
+				 <ol>
+					<li>Access the table's context menu and select Table...</li>
+					<li>Select the Table Format tab.</li>
+					<li>Check Repeat Heading and select "1" in the First Rows listbox as shown in the following image.</li>
+				</ol>
+				<div>
+					<img alt="Image of Table dialog in OpenOffice.org Writer with Table Format tab selected. Repeat Heading is checked and 1 is selected in the First Rows listbox to ensure that the first row is marked as header cells." src="img/openofficetableheads.jpg"/>
+				</div>
+      	<p class="working-example">This example is shown in operation in the <a href="../../working-examples/pdf-table-headers/table-example-header-row.odt">working example of tagged table headings in OpenOffice Writer</a>.</p>
+				<div class="note">
+					<p>OpenOffice.org Writer can only mark up cells as column headings, not as row headings.  Only the first row can be marked as heading for all table columns. When the table has row headings or a more complex heading structure, this mark-up must be added in a PDF editor such as Acrobat Pro.</p>
+				</div>
       </section>
       <section class="example">
-         <h3>Modifying table tags using the Tags tab in Adobe Acrobat
-    				9 Pro</h3>
-         
-            <p>This example is shown with Adobe Acrobat Pro. There are other software tools that perform similar functions. See the list of other software tools in <a href="#pdf_notes_acc-sup_files_applications"></a>.</p>
-            <p>To check that a converted document with tables has correct table tagging: </p>
-            <ul>
-               <li> In the View menu, select Navigation Panel, then select Tags. </li>
-            </ul>
-            <figure id="figure-acrobat-tables-tags">
-               <img src="img/table-example.jpg" />
-                  
-                  <figcaption>Table in Adobe Acrobat Pro showing the Tags tab opened to display the table tags. All table cells are marked TD.</figcaption>
-                
-            </figure>
-            <p>Note that in this case, the table headers were not formatted as illustrated
-    						in Examples 1 and 2, and are marked as data cells (<em>TD</em>). To
-    						change these to <em>TH</em> tags: </p>
-            <ol>
-               <li> On the Tags tab, open the table row that contains the header cells,
-    						as shown on the image above. </li>
-               <li> Select on the first data cell and select Properties... </li>
-               <li> On the Tags tab in the Properties dialog, use the Type dropdown
-    							to change Table Data Cell to Table Header Cell. </li>
-               <li> Repeat for all the table header cells in the first table row. </li>
-            </ol>
-            <figure id="figure-acrobat-table-tag-props">
-               <img src="img/table-example2.jpg" />
-                  
-                  <figcaption>Table in Adobe Acrobat Pro showing the use of the Tag Properties dialog to change data cells to header cells</figcaption>
-                
-            </figure>
-      	<p class="working-example">This example is shown in operation in the <a href="../../working-examples/pdf-tables/table-example-repaired.pdf">working example of tagged table headings in Acrobat</a>.</p>
-         
-      </section>
+				<h3>Modifying table tags using the Tags tab in Adobe Acrobat Pro</h3>
+				<p>This example is shown with Adobe Acrobat Pro. There are other software tools that perform similar functions.</p>
+				<p>To check that a converted document with tables has correct table tagging:</p>
+				<ol>
+					<li>Open the View menu &#8594; Show/Hide &#8594; Navigation Panes &#8594; Accessibility Tags.</li>
+					<li>Manually inspect each table's tags to make sure that header and data cells have been converted correctly.</li>
+				</ol>
+				<div>
+					<img alt="Table in Adobe Acrobat Pro showing the Tags tab opened to display the table tags. All table cells that should be headers are marked as TD cells." src="img/table-header-cells-incorrect-acrobat.png" width="770"/>
+				</div>
+				<p>Note that in this case, the table headers were incorrectly formatted, and are marked as data cells (<code>TD</code>). To change these to <code>TH</code> tags:</p>
+				<ol>
+					<li>On the Accessibility Tags tab, expand the table row that contains the header cells, as shown on the image above.</li>
+					<li>Select all of the incorrectly-formatted cells, open the context menu, and select Properties...</li>
+					<li>On the Tags tab in the Properties dialog, use the Type dropdown to change Table Data Cell to Table Header Cell.</li>
+				</ol>
+				<div>
+					<img alt="Table in Adobe Acrobat Pro showing the use of the Tag Properties dialog to change data cells to header cells" src="img/table-header-cells-corrected-acrobat.png" width="770"/>
+				</div>
+      	<p class="working-example">This example is shown in operation in the <a href="../../working-examples/pdf-table-headers/table-example-repaired.pdf">working example of tagged table headings in Acrobat</a>.</p>
+			</section>
       <section class="example">
-         <h3>Marking up a table using table structure elements</h3>
-         
-            <p>The following code fragment illustrates code that is typical for a
-    					simple table (header row and data row) such as shown in Examples 1-3: </p>
-            <pre xml:space="preserve">95 0 obj                %Structure element for a table
- &lt;&lt; 
-  /A 39 0 R
-  /K[96 0 R 101 0 R 106 0 R 111 0 R]
-  /P 93 0 R
-  /S/Table              %standard structure type is table
- &gt;&gt; 
- endobj
+				<h3>Marking up a table using table structure elements</h3> 
+				<p>The following code fragment illustrates code that is typical for a simple table (header row and data row):</p>
+<pre xml:space="preserve"><code>95 0 obj                %Structure element for a table
+  &lt;&lt; 
+    /A 39 0 R
+    /K[96 0 R 101 0 R 106 0 R 111 0 R]
+    /P 93 0 R
+    /S/Table              %standard structure type is table
+  &gt;&gt; 
+  endobj
 96 0 obj                %Structure element for a table row
- &lt;&lt; 
-  /K[97 0 R 98 0 R 99 0 R 100 0 R]
-  /P 95 0 R
-  /S/TR                 %standard structure type is table row
- &gt;&gt; 
- endobj
-97 0 obj                %Structure element for a table header
- &lt;&lt;/A[23 0 R 120 0 R]
-   /K 1
-   /P 96 0 R
-   /S/TH                 %standard structure type is table head
-   /Pg 8 0 R
- &gt;&gt; 
-endobj
-104 0 obj                %Structure element for table data (cell contents)
- &lt;&lt; 
-  /A 29 0 R
-  /K 7
-  /P 101 0 R
-  /S/TD                  %standard structure type is table data
-  /Pg 8 0 R
- &gt;&gt; 
-endobj
-</pre>
-         
-      </section>
-   </section><section id="tests"><h2>Tests</h2>
-      <section class="procedure"><h3>Procedure</h3>
-         <ol>
-            <li>
-               <p>For each table, confirm one of the following:</p>
-               <ul>
-                  <li> Read the PDF document with a screen reader, listening to hear
-    						that the tabular information is presented in a way that preserves
-    						logical relationships among the table header and data cells. </li>
-                  <li> Using a PDF editor, verify that the appropriate <em>TR</em>, <em>TH</em>,
-    							and <em>TD</em> tags are in the proper reading order and hierarchy
-    							in the table tree. </li>
-                  <li> Use a tool which is capable of showing the table elements
-    								to open the PDF document, view the table structure, and verify
-    								that it contains the appropriate TR, TH, and TD structures. </li>
-                  <li> Use a tool that exposes the document through the accessibility
-    									API, and verify that the table structure contains the appropriate
-    									TR, TH, and TD structures, and that they are in the proper reading
-    									order and hierarchy. </li>
-               </ul>
-            </li>
-         </ol>
-      </section>
-      <section class="results"><h3>Expected Results</h3>
-         <ul>
-            <li>#1 is true. </li>
-         </ul>
+  &lt;&lt; 
+    /K[97 0 R 98 0 R 99 0 R 100 0 R]
+    /P 95 0 R
+    /S/TR                 %standard structure type is table row
+  &gt;&gt; 
+  endobj
+  97 0 obj                %Structure element for a table header
+  &lt;&lt;
+    /A[23 0 R 120 0 R]
+    /K 1
+    /P 96 0 R
+    /S/TH                 %standard structure type is table head
+    /Pg 8 0 R
+  &gt;&gt; 
+  endobj
+  104 0 obj                %Structure element for table data (cell contents)
+  &lt;&lt; 
+    /A 29 0 R
+    /K 7
+    /P 101 0 R
+    /S/TD                  %standard structure type is table data
+    /Pg 8 0 R
+  &gt;&gt; 
+endobj</code></pre>
       </section>
-   </section><section id="related"><h2>Related Techniques</h2><ul>
-      <li><a href="../html/H51">H51</a></li>
-      <li><a href="../pdf/PDF20">PDF20</a></li>
-   </ul></section><section id="resources"><h2>Resources</h2>
-      
-         <ul>
-            <li> Section 14.8.4.3.4 (Table Elements) in <a href="http://www.adobe.com/content/dam/Adobe/en/devnet/pdf/pdfs/PDF32000_2008.pdf">PDF
-    					1.7 (ISO 32000-1)</a> 
-               </li>
-            <li>
-                  <a href="http://www.adobe.com/accessibility/products/acrobat.html">PDF and Accessibility</a>
-               </li>
+		</section>
+		<section id="tests">
+			<h2>Tests</h2>
+			<section class="procedure">
+				<h3>Procedure</h3>
+				<ol>
+					<li>
+						<p>For each table, confirm one of the following:</p>
+						<ul>
+							<li>Read the PDF document with a screen reader, listening to hear that the tabular information is presented in a way that preserves logical relationships among the table header and data cells.</li>
+							<li>Using a PDF editor, verify that the appropriate <code>TR</code>, <code>TH</code>,
+    							and <code>TD</code> tags are in the proper reading order and hierarchy in the table tree.</li>
+                  <li>Use a tool which is capable of showing the table elements to open the PDF document, view the table structure, and verify that it contains the appropriate TR, TH, and TD structures.</li>
+                  <li>Use a tool that exposes the document through the accessibility <abbr title="Application Programming Interface">API</abbr>, and verify that the table structure contains the appropriate <code>TR</code>, <code>TH</code>, and <code>TD</code> structures, and that they are in the proper reading order and hierarchy.</li>
+								</ul>
+							</li>
+						</ol>
+					</section>
+					<section class="results">
+						<h3>Expected Results</h3>
+						<ul>
+							<li>#1 is true.</li>
+						</ul>
+					</section>
+				</section>
+				<section id="related">
+					<h2>Related Techniques</h2>
+					<ul>
+						<li><a href="../html/H51">H51</a></li>
+						<li><a href="../pdf/PDF20">PDF20</a></li>
+					</ul>
+				</section>
+				<section id="resources">
+					<h2>Resources</h2>
+					<ul>
+						<li>Section 14.8.4.3.4 (Table Elements) in <a href="https://opensource.adobe.com/dc-acrobat-sdk-docs/pdfstandards/PDF32000_2008.pdf">PDF 1.7 (ISO 32000-1) (PDF)</a>
+						</li>						
+						<li>
+							<a href="https://helpx.adobe.com/acrobat/using/create-verify-pdf-accessibility.html">Create and verify PDF accessibility (Acrobat Pro)</a>
+						</li>
          </ul>
-      
-   </section></body></html>
+				</section>
+			</body>
+		</html>
diff --git a/techniques/pdf/PDF7.html b/techniques/pdf/PDF7.html
index cdd2731ceb..3dcc8387a7 100644
--- a/techniques/pdf/PDF7.html
+++ b/techniques/pdf/PDF7.html
@@ -1,116 +1,100 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Performing OCR on a scanned PDF document to provide actual text</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Performing OCR on a scanned PDF document to provide actual text</h1><section class="meta"><p class="id">ID: PDF7</p><p class="technology">Technology: pdf</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
-      <p>Scanned PDF documents</p>
-   </section><section id="description"><h2>Description</h2>
-      <p>The intent of this technique is to ensure that visually rendered text
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+   <head>
+      <title>Performing OCR on a scanned PDF document to provide actual text</title>
+      <link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+   </head>
+   <body>
+      <h1>Performing <abbr title="Optical Character Recognition">OCR</abbr> on a scanned <abbr title="Portable Document Format">PDF</abbr> document to provide actual text</h1>
+      <section class="meta">
+         <p class="id">ID: PDF7</p>
+         <p class="technology">Technology: pdf</p>
+         <p class="type">Type: Technique</p>
+      </section>
+			<section id="applicability">
+				<h2>When to Use</h2>
+				<p>Scanned PDF documents</p>
+			</section>
+			<section id="description">
+				<h2>Description</h2>
+				<p>The intent of this technique is to ensure that visually rendered text
     				is presented in such a manner that it can be perceived without its
     				visual presentation interfering with its readability. </p>
-      <p>A document that consists of scanned images of text is inherently inaccessible
+						<p>A document that consists of scanned images of text is inherently inaccessible
     				because the content of the document is images, not searchable text.
     				Assistive technologies cannot read or extract the words; users cannot
     				select, edit, resize, or reflow text nor can they change text and background
     				colors; and authors cannot manipulate the PDF for accessibility. </p>
-      <p>For these reasons, authors should use actual text rather than images
+						<p>For these reasons, authors should use actual text rather than images
     				of text, using an authoring tool such as Microsoft Word or Oracle Open
     				Office to author and convert content to PDF. </p>
-      <p>If authors do not have access to the source file and authoring tool,
+						<p>If authors do not have access to the source file and authoring tool,
     				scanned images of text can be converted to PDF using optical character
     				recognition (OCR). Adobe Acrobat Pro can then be used to create accessible
     				text. </p>
-   </section><section id="examples"><h2>Examples</h2>
-      <section class="example">
-         <h3>Generating actual text rather than images of text using
-    					Adobe Acrobat 9 Pro</h3>
-         
-            <p>This example is shown with Adobe Acrobat Pro. There are other software tools that perform similar functions. See the list of other software tools in <a href="#pdf_notes_acc-sup_files_applications"></a>.</p>
-            <p>This example uses a simple one-page scanned image of text. To ensure
-    						that actual text is stored in the document, perform the following steps: </p>
-            <ol>
-               <li> Scan the document using as high a resolution as possible to improve
-    						the OCR performance. </li>
-               <li> Load the scanned document in Acrobat Pro. Select Document &gt; OCR
-    						Text Recognition &gt; Recognize Text Using OCR... </li>
-               <li> In the next dialog, select the All Pages radio button under Pages
-    								(or Current Page if you are converting only one page), and then select
-    								OK. </li>
-               <li> Under the Settings list, select Edit. In the next dialog, select
-    									Formatted Text and Graphics in the PDF Output Style drop-down list.
-    									This is important for ensuring accessibility. </li>
-               <li> Depending on the resolution and how clear the text was, OCR converts
-    										images of words and characters to actual text. Text that Acrobat
-    										Pro does not recognize is listed as an "OCR suspect," or
-    										text element that Acrobat suspects was not recognized correctly. </li>
-               <li> To fix the suspects, choose Document &gt; OCR Text Recognition   &gt; Find
-    											First OCR Suspect. Acrobat Pro presents each suspect one at a time,
-    											which can be corrected using Acrobat Pro touchup tools. </li>
-               <li> Run Advanced &gt; Accessibility &gt; Add Tags to Document </li>
-               <li> Test for accessibility: Advanced &gt; Accessibility &gt; Full
-    						Check... </li>
-            </ol>
-            <div class="note">
-               <p>Alternatively, you can use Document &gt; OCR
-    						Text Recognition &gt; Find All OCR Suspects to display all OCR suspects
-    						at the same time for faster editing. </p>
-            </div>
-            <p>The following image shows a scanned one-page document in Adobe Acrobat
-    						Pro. </p>
-            <figure id="figure-acrobat-scanned-image">
-               <img src="img/ocr1.jpg" />
-                  
-                  <figcaption>A scanned page in Acrobat Pro showing soup recipes.</figcaption> 
-                
-            </figure>
-            <p>The next image shows the converted content after adding tags to the
-    						document. It will probably be necessary to use the TouchUp Reading
-    						Order tool and the Tags panel to tag the content properly for the intended
-    						final document. For this example, the image of the spiral book binding
-    						was tagged in the conversion. The TouchUp Reading Order tool was used
-    						to hide the image as a background (decorative) image (see <a href="#PDF4"></a>). The recipe
-    						titles were tagged as first level headers. </p>
-            <figure id="figure-acrobat-converted-scanned">
-               <img src="img/ocr3.jpg" />
-                  
-                  <figcaption>A tagged converted page in Acrobat Pro showing soup recipes. The name of each soup is a first level header. The image of the spiral book binding was hidden as a decorative image.</figcaption>
-                
-            </figure>
-            <p>Note: Acrobat Pro may automatically add tags when the file is run
-    					through OCR. </p>
-      	<p class="working-example">This example is shown in operation in the <a href="../../working-examples/pdf-ocr/ocr-example.pdf">working example of generating actual text</a> and the <a href="../../working-examples/pdf-ocr/ocr-example-tagged.pdf">result of performing OCR</a>.</p>
-         
-      </section>
-   </section><section id="tests"><h2>Tests</h2>
-      <section class="procedure"><h3>Procedure</h3>
-         <ol>
-            <li>
-               <p> For each page converted to text using OCR, ensure that the resulting
-    					PDF has been converted correctly, using one of the following ways:</p>
-               <ul>
-                  <li> Read the PDF document with a screen reader or a tool that reads aloud, listening to hear that all text is read correctly
-    						and in the correct reading order. </li>
-                  <li> Save the document as text and check that the converted text
-    							is complete and in the correct reading order. </li>
-                  <li> Use a tool that is capable of showing the converted content
-    								to open the PDF document and verify that all text was converted
-    								and is in the correct reading order. </li>
-                  <li> Use a tool that exposes the document through the accessibility
-    									API and verify that all text was converted and is in the correct
-    									reading order. </li>
-               </ul>
-            </li>
-         </ol>
-      </section>
-      <section class="results"><h3>Expected Results</h3>
-         <ul>
-            <li>#1 is true. </li>
-         </ul>
-      </section>
-   </section><section id="related"><h2>Related Techniques</h2><ul>
-      <li><a href="../general/G140">G140</a></li>
-   </ul></section><section id="resources"><h2>Resources</h2>
-      
-         <ul>
-            <li>
-                  <a href="http://www.adobe.com/accessibility/products/acrobat.html">PDF and Accessibility</a>
-               </li>
-         </ul>
-      
-   </section></body></html>
+					</section>
+					<section id="examples">
+						<h2>Examples</h2>
+						<section class="example">
+							<h3>Generating actual text rather than images of text using Adobe Acrobat Pro</h3>
+							<p>This example is shown with Adobe Acrobat Pro. There are other software tools that perform similar functions.</p>
+							<p>This example uses a simple one-page scanned image of text. To ensure that actual text is stored in the document, perform the following steps:</p>
+							<ol>
+								<li>Select Tools &#8594; Scan &amp; OCR.</li>
+								<li>In the Scan &amp; OCR toolbar, select Insert and then either From File or From Scanner.</li>
+								<li>Depending on the resolution and how clear the text was, OCR converts images of words and characters to actual text. Text that Acrobat Pro does not recognize is listed as an "OCR suspect", or text element that Acrobat suspects was not recognized correctly.</li>
+								<li>To fix the suspects, in the Scan &amp; OCR toolbar, choose Recognize Text &#8594; Correct Recognized Text. Acrobat Pro presents each suspect one at a time, which can then be corrected.</li>
+								<li>Using the Accessibility Tags panel, add tags to the document.</li>
+								<li>Test for accessibility: Accessibility Tool &#8594; Accessibility Check.</li>
+							</ol>
+							<p>The following image shows a scanned one-page document in Adobe Acrobat Pro.</p>
+							<div>
+								<img alt="A scanned page in Acrobat Pro showing a cheese recipe." src="img/ocr1.jpg"/>
+							</div>
+							<p>The next image shows the converted content after adding tags to the document. It will be necessary to use the Reading Order tool and the Tags panel to tag the content properly. The Reading Order tool was used in this example to hide the image of the hand as decorative image / artifact (see <a href="../pdf/PDF4">PDF4</a>). The recipe title was tagged as a first level header.</p>
+							<div>
+								<img alt="A tagged converted page in Acrobat Pro showing a cheese recipe. The name of the recipe is a first level header, and the ingredients are a list." src="img/ocr3.jpg"/>
+							</div>
+							<p>Note: Acrobat Pro may automatically add tags when the file is run through OCR.</p>
+							<p class="working-example">This example is shown in operation in the <a href="../../working-examples/pdf-ocr/ocr-example.pdf">working example of generating actual text</a> and the <a href="../../working-examples/pdf-ocr/ocr-example-tagged.pdf">result of tagging text created with OCR</a>.</p>
+						</section>
+					</section>
+					<section id="tests">
+						<h2>Tests</h2>
+						<section class="procedure">
+							<h3>Procedure</h3>
+							<ol>
+								<li>
+									<p>For each page converted to text using OCR, ensure that the resulting PDF has been converted correctly, using one of the following ways:</p>
+									<ol>
+										<li>Read the PDF document with a screen reader or a tool that reads aloud, listening to hear that all text is read correctly and in the correct reading order.</li>
+										<li>Save the document as text and check that the converted text is complete and in the correct reading order.</li>
+										<li>Use a tool that is capable of showing the converted content to open the PDF document and verify that all text was converted and is in the correct reading order.</li>
+										<li>Use a tool that exposes the document through the accessibility <abbr title="Application Programming Interface">API</abbr> and verify that all text was converted and is in the correct reading order.</li>
+									</ol>
+								</li>
+							</ol>
+						</section>
+						<section class="results">
+							<h3>Expected Results</h3>
+							<ul>
+								<li>#1 is true.</li>
+							</ul>
+						</section>
+					</section>
+					<section id="related">
+						<h2>Related Techniques</h2>
+						<ul>
+							<li><a href="../general/G140">G140</a></li>
+						</ul>
+					</section>
+					<section id="resources">
+						<h2>Resources</h2>
+						<ul>
+							<li>
+								<a href="https://helpx.adobe.com/acrobat/using/create-verify-pdf-accessibility.html">Create and verify PDF accessibility (Acrobat Pro)</a>
+							</li>
+						</ul>
+					</section>
+				</body>
+			</html>
diff --git a/techniques/pdf/PDF8.html b/techniques/pdf/PDF8.html
index 79dcae2922..d5eaa5cf0c 100644
--- a/techniques/pdf/PDF8.html
+++ b/techniques/pdf/PDF8.html
@@ -1,155 +1,129 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing definitions for abbreviations via an E entry for a structure
-    			element</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Providing definitions for abbreviations via an E entry for a structure
-    			element</h1><section class="meta"><p class="id">ID: PDF8</p><p class="technology">Technology: pdf</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
-      <p>Tagged PDF documents containing abbreviations or acronyms</p>
-   </section><section id="description"><h2>Description</h2>
-      <p>The objective of this technique is to provide an expansion or definition
-    				of an abbreviation for the first occurrence of the abbreviation. For
-    				example, a reference to an abbreviation, such as   "WCAG," should
-    				be available as   "Web Content Accessibility Guidelines (WCAG)" on
-    				its first occurrence in a document. </p>
-      <p>This is done by setting expansion text using an /E entry for a structure
-    				element, and is normally accomplished using a tool for authoring PDF.
-    				A Span structure element is typically used to tag the abbreviation,
-    				but the /E entry is valid with any structure element. </p>
-      <p>This technique is applicable for any abbreviation, including acronyms
-    				and initialisms. Note that on the first occurrence of the abbreviation,
-    				both the abbreviation and the expansion text must be provided. This
-    				will aid recognition of later use of the abbreviation. </p>
-      <p>PDF documents may be enhanced by providing expansions for abbreviations.
-    				In fact, such expansions are required for accessibility to ensure understanding
-    				by people who have difficulty decoding words; rely on screen magnification
-    				(which may obscure context); have limited memory; or who have difficulty
-    				using context to aid understanding. </p>
-   </section><section id="examples"><h2>Examples</h2>
-      <section class="example">
-         <h3>Adding an /E entry to an abbreviation using Adobe Acrobat
-    					9 Pro's Tags panel</h3>
-         
-            <p>This example is shown with Adobe Acrobat Pro. There are other software tools that perform similar functions. See the list of other software tools in <a href="#pdf_notes_acc-sup_files_applications"></a>.</p>
-            <p>In a tagged PDF document: </p>
-            <ol>
-               <li> Select the Tags panel, using Views &gt; Navigation Panes &gt; Tags </li>
-               <li>Select the first instance of the abbreviated text that needs to be expanded. If the selected text is part of a larger tag, access the Tags panel options menu, select Create Tag from Selection, and create a new Span tag. In this example, the text "WCAG2" (within the LBody tag) has been enclosed in a Span tag.</li>
-               <li> In the Tags panel, access the context menu for the spanned text
-    							and select Properties... to open the TouchUp Properties dialog for
-    							the Span tag. </li>
-               <li> On the Content tab of the TouchUp Properties dialog, enter the
-    								expansion text, followed by the originally selected text. </li>
-            </ol>
-            <p>The following image illustrates this technique: </p>
-            <figure id="figure-expansion-text">
-               <img src="img/abbr.jpg" />
-                  
-                  <figcaption>The addition of expansion text to an abbreviation using the Tags panel. The text 'WCAG2.0' has been selected and a Span tag created for it. The expansion text 'Web Content Accessibility Guidelines (WCAG) 2.0' is entered as the expansion of 'WCAG2.0' using the TouchUp Properties dialog</figcaption> 
-                
-            </figure>
-      	<p class="working-example">This example is shown in operation in the <a href="../../working-examples/pdf-abbreviation-definitions/headers-definitions.docx">working example of Providing definitions for Abbreviations (Word document)</a>, <a href="../../working-examples/headers-definitions.odt">working example of Providing definitions for Abbreviations (OpenOffice document)</a>, and <a href="../../working-examples/pdf-abbreviation-definitions/headers-definitions.pdf">working example of Providing definitions for Abbreviations (PDF document)</a>.</p>
-         
-      </section>
-      <section class="example">
-         <h3>Using a /Span structure element with an /E entry to define
-    				an abbreviation</h3>
-         
-            <p>The following code fragment illustrates code that is typical for using
-    						the /Span structure element to define an abbreviation. </p>
-            <p>This example uses the sentence "Sugar is commonly sold in 5 lb
-    						bags." The abbreviation "lb" is tagged as a /Span structure
-    						element with an /E entry (typically accomplished by an authoring tool). </p>
-            <pre xml:space="preserve"> 1 0 obj                                  % structure element
-   &lt;&lt; /Type /StructElemen
-            /S /Span                      % element type
-            /P ...                        % Parent in structure hierarchy
-            /K &lt;&lt; /Type /MCR
-                        /Page 2 0 R       % Page containing marked-content sequence
-                        /MCID 0           % Marked content identifier for "lb"
-               &gt;&gt;
-            /E  (pound, lb)
-    &gt;&gt;
- endobj
-</pre>
-         
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>Providing definitions for abbreviations via an E entry for a structure element</title>
+		<link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+	</head>
+	<body>
+		<h1>Providing definitions for abbreviations via an E entry for a structure element</h1>
+		<section class="meta">
+			<p class="id">ID: PDF8</p>
+			<p class="technology">Technology: pdf</p>
+			<p class="type">Type: Technique</p>
+		</section>
+		<section id="applicability">
+			<h2>When to Use</h2>
+			<p>Tagged <abbr title="Portable Document Format">PDF</abbr> documents containing abbreviations or acronyms</p>
+		</section>
+		<section id="description">
+			<h2>Description</h2>
+      <p>The objective of this technique is to provide an expansion or definition of an abbreviation for the first occurrence of the abbreviation. For example, a reference to an abbreviation, such as "<abbr title="Web Content Accessibility Guidelines">WCAG</abbr>", should be available as "Web Content Accessibility Guidelines (WCAG)" on its first occurrence in a document.</p>
+      <p>This is done by setting expansion text using an <code>/E</code> entry for a structure element, and is normally accomplished using a tool for authoring PDF. A <code>Span</code> structure element is typically used to tag the abbreviation, but the <code>/E</code> entry is valid with any structure element.</p>
+      <p>This technique is applicable for any abbreviation, including acronyms and initialisms. Note that on the first occurrence of the abbreviation, both the abbreviation and the expansion text must be provided. This will aid recognition of later use of the abbreviation.</p>
+      <p>PDF documents may be enhanced by providing expansions for abbreviations. In fact, such expansions are required for accessibility to ensure understanding by people who have difficulty decoding words; rely on screen magnification (which may obscure context); have limited memory; or who have difficulty using context to aid understanding.</p>
+		</section>
+		<section id="examples">
+			<h2>Examples</h2>
+			<section class="example">
+				<h3>Adding an <code>/E</code> entry to an abbreviation using Adobe Acrobat Pro's Tags panel</h3>
+				<p>This example is shown with Adobe Acrobat Pro. There are other software tools that perform similar functions.</p>
+				<p>In a tagged PDF document:</p>
+				<ol>
+					<li>Select View &#8594; Show/Hide &#8594; Navigation Panes &#8594; Accessibility Tags.</li>
+					<li>Select the first instance of the abbreviated text that needs to be expanded. If the selected text is part of a larger tag, use the Accessibility Tags panel's "Create Tag from Selection", and create a new <code>Span</code> tag. In this example, the text "WCAG2.2" (within the <code>LBody</code> tag) has been enclosed in a <code>Span</code> tag.</li>
+					<li>In the Tags panel, access the context menu for the spanned text and select Properties...</li>
+					<li>In the Content tab of the Properties dialog, enter the expansion text, followed by the originally selected text.</li>
+				</ol>
+				<p>The following image illustrates this technique:</p>
+				<div>
+					<img alt="The addition of expansion text to an abbreviation using the Accessibility Tags panel. The text 'WCAG2.2' has been selected and a Span tag created for it. The expansion text 'Web Content Accessibility Guidelines (WCAG) 2.2' is entered as the expansion of 'WCAG2.2'." src="img/abbreviation-expansion.png" width="770"/>
+				</div>
+      	<p class="working-example">This example is shown in operation in:</p>
+				<ul>
+					<li><a href="../../working-examples/pdf-abbreviation-definitions/pdf-abbreviation-definitions.docx">Working example of Providing definitions for Abbreviations (Word document)</a>;</li>
+					<li><a href="../../working-examples/pdf-abbreviation-definitions/pdf-abbreviation-definitions.odt">Working example of Providing definitions for Abbreviations (OpenOffice document)</a>;</li>
+					<li><a href="../../working-examples/pdf-abbreviation-definitions/pdf-abbreviation-definitions.pdf">Working example of Providing definitions for Abbreviations (PDF document)</a>.</li>
+				</ul>
       </section>
       <section class="example">
-         <h3>Using a /TH structure element with an /E entry to define
-    				an abbreviation</h3>
-         
-            <p>As noted in the Description, the /E entry is valid with any structure
-    						element. </p>
-            <p>The following code fragment illustrates code that is typical for using
-    						an /E entry to define an abbreviation. </p>
-            <p>A table that contains columns for each month uses abbreviations as
-    						the values of column headers. The expansion for each abbreviation is
-    						provided as the /E entry of the /TH structure element (typically accomplished
-    						by an authoring tool). </p>
-            <pre xml:space="preserve"> 1 0 obj                                  % structure element
-   &lt;&lt; /Type /StructElemen
-            /S /TH                        % element type
-            /P ...                        % Parent in structure hierarchy
-            /K &lt;&lt; /Type /MCR
-                        /Page 2 0 R       % Page containing marked-content sequence
-                        /MCID 0           % Marked content identifier for "Dec"
-               &gt;&gt;
-            /E  (December, Dec)
-    &gt;&gt;
- endobj
-</pre>
-         
+				<h3>Using a <code>/Span</code> structure element with an <span>/E</span> entry to define an abbreviation</h3>
+				<p>The following code fragment illustrates code that is typical for using the <code>/Span</code> structure element to define an abbreviation.</p>
+				<p>This example uses the sentence "Sugar is commonly sold in 5 lb bags." The abbreviation "lb" is tagged as a <code>/Span</code> structure element with an <code>/E</code> entry (typically accomplished by an authoring tool).</p>
+<pre xml:space="preserve"><code>1 0 obj                                  % structure element
+  &lt;&lt; /Type /StructElemen
+           /S /Span                      % element type
+           /P ...                        % Parent in structure hierarchy
+           /K &lt;&lt; /Type /MCR
+                      /Page 2 0 R        % Page containing marked-content sequence
+                     /MCID 0             % Marked content identifier for "lb"
+              &gt;&gt;
+           /E  (pound, lb)
+  &gt;&gt;
+endobj</code></pre>
+			</section>
+			<section class="example">
+				<h3>Using a <code>/TH</code> structure element with an <code>/E</code> entry to define an abbreviation</h3>
+				<p>As noted in the Description, the <code>/E</code> entry is valid with any structure element.</p>
+				<p>The following code fragment illustrates code that is typical for using an <code>/E</code> entry to define an abbreviation.</p>
+				<p>A table that contains columns for each month uses abbreviations as the values of column headers. The expansion for each abbreviation is provided as the <code>/E</code> entry of the <code>/TH</code> structure element (typically accomplished by an authoring tool).</p>
+<pre xml:space="preserve"><code>1 0 obj                                  % structure element
+  &lt;&lt; /Type /StructElemen
+          /S /TH                        % element type
+          /P ...                        % Parent in structure hierarchy
+          /K &lt;&lt; /Type /MCR
+                      /Page 2 0 R       % Page containing marked-content sequence
+                      /MCID 0           % Marked content identifier for "Dec"
+             &gt;&gt;
+          /E  (December, Dec)
+  &gt;&gt;
+endobj</code></pre>
       </section>
-   </section><section id="tests"><h2>Tests</h2>
-      <section class="procedure"><h3>Procedure</h3>
-         <ol>
-            <li>
-               <p> Verify that the first occurrence of abbreviations that require
+		</section>
+		<section id="tests">
+			<h2>Tests</h2>
+      <section class="procedure">
+				<h3>Procedure</h3>
+				<ol>
+					<li>
+						<p>Verify that the first occurrence of abbreviations that require
     					expansion text have /E entries on an enclosing tag by one of the
     					following and that both the abbreviation and the expansion text are
     					provided:</p>
-               <ul>
-                  <li> In Windows, use Microsoft's Inspect.exe tool, or some other
-    						tool that allows inspection of the MSAA interface, to locate
-    						the text of the abbreviation in the document tree and ensure
-    						that the value of the abbreviation is in the expansion text. </li>
-                  <li> In a PDF editor, locate the tag
-    							for the text that is the abbreviation, and check that an expansion
-    							or definition is provided for each abbreviation in the Expansion
-    							Text field in the corresponding tag's properties. </li>
-                  <li> Read the PDF document with a screen reader, listening to hear
-    								that on the first occurrence, the abbreviation and expansion
-    								are read when the screen reader reads the content line-by-line. </li>
-                  <li> Use a tool that is capable of showing the /E entry value,
-    									such as aDesigner to open the PDF document and view the GUI summary
-    									to read the text expansions for abbreviations. </li>
-                  <li> Use a tool that exposes the document through the accessibility
-    										API and verify that the text expansion of the abbreviation is
-    										properly implemented. </li>
-               </ul>
-            </li>
+            <ul>
+							<li>In a PDF editor, locate the tag for the text that is the abbreviation, and check that an expansion or definition is provided for each abbreviation in the Expansion Text field in the corresponding tag's properties.</li>
+              <li>Read the PDF document with a screen reader, listening to hear that on the first occurrence, the abbreviation and expansion are read when the screen reader reads the content line-by-line.</li>
+              <li>Use a tool that is capable of showing the <code>/E</code> entry value, such as aDesigner to open the PDF document and view the <abbr title="Graphical User Interface">GUI</abbr> summary to read the text expansions for abbreviations.</li>
+              <li>Use a tool that exposes the document through the accessibility <abbr title="Application Programming Interface">API</abbr> and verify that the text expansion of the abbreviation is properly implemented.</li>
+           </ul>
+          </li>
          </ol>
-      </section>
-      <section class="results"><h3>Expected Results</h3>
-         <ul>
-            <li>Check #1 is true. </li>
-         </ul>
-      </section>
-   </section><section id="related"><h2>Related Techniques</h2><ul>
-      <li><a href="../general/G102">G102</a></li>
-      <li><a href="../general/G55">G55</a></li>
-      <li><a href="../general/G62">G62</a></li>
-      <li><a href="../general/G70">G70</a></li>
-      <li><a href="../general/G97">G97</a></li>
-   </ul></section><section id="resources"><h2>Resources</h2>
-      
-         <ul>
-            <li> Section 14.9.5 (Expansion of Abbreviations and Acronyms) in <a href="http://www.adobe.com/content/dam/Adobe/en/devnet/pdf/pdfs/PDF32000_2008.pdf">PDF
-    					1.7 (ISO 32000-1)</a> 
-               </li>
-            <li> 
-                  <a href="https://msdn.microsoft.com/en-us/library/dd318521%28VS.85%29.aspx">Microsoft
-    							Inspect.exe tool</a> 
-               </li>
-            <li>
-                  <a href="http://www.adobe.com/accessibility/products/acrobat.html">PDF and Accessibility</a>
-               </li>
-         </ul>
-      
-   </section></body></html>
+				</section>
+				<section class="results">
+					<h3>Expected Results</h3>
+					<ul>
+						<li>Check #1 is true.</li>
+					</ul>
+				</section>
+			</section>
+		<section id="related">
+			<h2>Related Techniques</h2>
+			<ul>
+      	<li><a href="../general/G102">G102</a></li>
+      	<li><a href="../general/G55">G55</a></li>
+      	<li><a href="../general/G62">G62</a></li>
+      	<li><a href="../general/G70">G70</a></li>
+      	<li><a href="../general/G97">G97</a></li>
+			</ul>
+		</section>
+		<section id="resources">
+			<h2>Resources</h2>
+			<ul>
+				<li>Section 14.9.5 (Expansion of Abbreviations and Acronyms) in <a href="https://opensource.adobe.com/dc-acrobat-sdk-docs/pdfstandards/PDF32000_2008.pdf">PDF 1.7 (ISO 32000-1) (PDF)</a>
+				</li>
+				<li>
+					<a href="https://helpx.adobe.com/acrobat/using/create-verify-pdf-accessibility.html">Create and verify PDF accessibility (Acrobat Pro)</a>
+				</li>
+			</ul>
+   </section>
+</body>
+</html>
diff --git a/techniques/pdf/PDF9.html b/techniques/pdf/PDF9.html
index 531562712d..4f8f45a41a 100644
--- a/techniques/pdf/PDF9.html
+++ b/techniques/pdf/PDF9.html
@@ -1,178 +1,78 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing headings by marking content with heading tags in PDF documents</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Providing headings by marking content with heading tags in PDF documents</h1><section class="meta"><p class="id">ID: PDF9</p><p class="technology">Technology: pdf</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>Providing headings by marking content with heading tags in PDF documents</title>
+		<link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+	</head>
+	<body>
+		<h1>Providing headings by marking content with heading tags in <abbr title="Portable Document Format">PDF</abbr> documents</h1>
+		<section class="meta">
+			<p class="id">ID: PDF9</p>
+			<p class="technology">Technology: pdf</p>
+			<p class="type">Type: Technique</p>
+		</section>
+		<section id="applicability">
+			<h2>When to Use</h2>
       <p>Tagged PDF documents with headings</p>
-   </section><section id="description"><h2>Description</h2>
-      <p>The purpose of this technique is to show how headings in PDF documents
-    				can be marked so that they are recognized by assistive technologies. Headings are marked up using the heading elements (H, H1, H2, ... H6) in the structure tree.
-    				This is typically accomplished by using a tool for authoring PDF. </p>
-      <p>Heading markup can be used: </p>
+		</section>
+		<section id="description">
+			<h2>Description</h2>
+      <p>The purpose of this technique is to show how headings in PDF documents can be marked so that they are recognized by assistive technologies. Headings are marked up using the heading elements (<code>H</code>, <code>H1</code>, <code>H2</code>, ... <code>H6</code>) in the structure tree. This is typically accomplished by using a tool for authoring PDF. </p>
+      <p>Heading markup can be used:</p>
       <ul>
-         <li> to indicate start of main content </li>
-         <li> to mark up section headings within the main content area </li>
-         <li> to demarcate different navigational sections, such as top or main
-    				navigation, left or secondary navigation, and footer navigation </li>
-         <li> to mark up images (containing text) which have the appearance
-    					of headings visually. </li>
+         <li>to indicate start of main content;</li>
+         <li>to mark up section headings within the main content area;</li>
+         <li>to demarcate different navigational sections, such as top or main navigation, left or secondary navigation, and footer navigation;</li>
+         <li>to mark up images (containing text) which have the appearance of headings visually.</li>
       </ul>
-      <p>Because headings indicate the start of important sections of content,
-    				it is possible for assistive technology users to access the list of
-    				headings and to jump directly to the appropriate heading and begin
-    				reading the content. This ability to "skim" the content through
-    				the headings and go directly to content of interest significantly speeds
-    				interaction for users who would otherwise access the content slowly. </p>
-   </section><section id="examples"><h2>Examples</h2>
+      <p>Because headings indicate the start of important sections of content, it is possible for assistive technology users to access the list of headings and to jump directly to the appropriate heading and begin reading the content. This ability to "skim" the content through the headings and go directly to content of interest significantly speeds interaction for users who would otherwise access the content slowly.</p>
+		</section>
+		<section id="examples">
+			<h2>Examples</h2>
       <section class="example">
-         <h3>Adding or modifying tagged headings in PDF documents
-    					with Adobe Acrobat 9 Pro</h3>
-         
-            <p>This example is shown with Adobe Acrobat Pro. There are other software tools that perform similar functions. See the list of other software tools in <a href="#pdf_notes_acc-sup_files_applications"></a>.</p>
-            <section>
-               <h4> Using the Touchup Reading Order tool</h4>
-               <p>One method of adding headings to PDF documents uses the Touchup Reading
-    							Order tool: </p>
-               <ol>
-                  <li> Open the PDF document in Adobe Acrobat Pro </li>
-                  <li> Select Advanced &gt; Accessibility &gt; TouchUp Reading Order... </li>
-                  <li> Click the Show Order Panel button on the TouchUp Reading Order
-    							panel </li>
-                  <li> View the tags in the Show Order panel. </li>
-               </ol>
-               <p>The following image shows a PDF document opened in Adobe Acrobat Pro.
-    							The Tags panel is open, showing heading text "Cooking techniques"   tagged
-    							as H1 and "Cooking with oil" tagged as H2. The text "Cooking
-    							with butter" should be tagged as H2 but is not. </p>
-               <figure id="figure-tags-headings">
-                  <img src="img/cooking-headings1.gif" />
-                     
-                      <figcaption>PDF document opened in Adobe Acrobat. The Tags panel shows the headings in the tag tree. Text that should be tagged as H2 is incorrectly tagged as a paragraph.</figcaption>
-                   
-               </figure>
-               <p>To correct the H2 heading, use the TouchUp Reading Order panel as
-    							follows: </p>
-               <ol>
-                  <li> Left click and drag a selection box over the content you want to
-    							tag. </li>
-                  <li> Select the Heading 2 tag from the TouchUp Reading Order panel. </li>
-               </ol>
-               <p>The following image shows the PDF document opened in Adobe Acrobat
-    							Pro. The TouchUp Reading Order panel is visible. A selection box appears
-    							around the text "Cooking with butter," and Heading 2 on the
-    							panel is selected. </p>
-               <figure id="figure-turo-headings">
-                  <img src="img/cooking-headings2.gif" />
-                     
-                      <figcaption>PDF document opened in Adobe Acrobat. The TouchUp Reading Order panel is visible; the heading text is selected and Heading 2 on the panel is selected.</figcaption>
-                   
-               </figure>
-               <p> Finally, click the Show Order Panel button on the TouchUp Reading Order
-    							panel. </p>
-               <p>The following image shows the PDF document opened in Adobe Acrobat
-    							Pro. The Tags panel is visible, showing that the text   "Cooking
-    							with butter" is now tagged as H2. </p>
-               <figure id="figure-turo-correct-headings">
-                  <img src="img/cooking-headings3.gif" />
-                     
-                      <figcaption>PDF document opened in Adobe Acrobat. The TouchUp Reading Order panel shows the correctly tagged headings.</figcaption>
-                   
-               </figure>
-            </section>
-            <section>
-               <h4> Using the Order and Tags panels </h4>
-               <p>You can also add or change headings as follows: </p>
-               <ol>
-                  <li> Bring up the Order panel. </li>
-                  <li> Access the context menu for the text to be changed or added as
-    							a heading. </li>
-                  <li> Select the correct heading tag for the text. </li>
-               </ol>
-               <p>The following screenshot shows Order panel and the context menu for
-    							the text "Cooking with butter." "Tag as heading 2" is
-    							selected in the context menu. </p>
-               <figure id="figure-order-panel">
-                  <img src="img/cooking-headings4.gif" />
-                     
-                      <figcaption>PDF document opened in Adobe Acrobat. The Order panel and context menu show the text to be changed to Heading 2.</figcaption>
-                   
-               </figure>
-               <p>You can then check that the correct heading is applied by opening
-    							the Tags panel, as shown in the following screenshot. </p>
-               <figure id="figure-acrobat-tags-panel">
-                  <img src="img/cooking-headings5.gif" />
-                     
-                      <figcaption>PDF document opened in Adobe Acrobat. The Tags panel confirms the correct heading tags.</figcaption>
-                   
-               </figure>
-            	<p class="working-example">This example is shown in operation in the <a href="../../working-examples/pdf-headings/cooking.docx">working example of adding tagged headings (Word file)</a> and <a href="../../working-examples/pdf-headings/cooking.pdf">working example of adding tagged headings (PDF file)</a>.</p>
-            </section>
-         
-      </section>
-      <section class="example">
-         <h3>Creating documents in Microsoft Word that have correctly
-    				tagged headings when converted to PDF</h3>
-         
-            <p>This example is shown with Microsoft Word. There are other software tools that perform similar functions. See the list of other software tools in <a href="#pdf_notes_acc-sup_files_applications"></a>.</p>
-            <p>Use Styles to create heading formats: Heading 1, Heading 2, Heading
-    						3, etc. Make styles progress in a logical manner; e.g., a Heading 2
-    						should come after a Heading 1. </p>
-            <section>
-               <h4>In Microsoft Word 2003 </h4>
-               <ul>
-                  <li> Select the "Format &gt; Styles and Formatting" menu
-    							item to reveal the styles and formatting task pane. </li>
-                  <li> Use the Heading 1 to Heading 6 styles provided in the "Styles
-    								and Formatting" panel. </li>
-               </ul>
-               <figure id="figure-word-heading-styles">
-                  <img src="img/word2003.gif" />
-                     
-                     <figcaption>Selecting heading styles in Word 2003.</figcaption>
-                   
-               </figure>
-            </section>
-            <section>
-               <h4>In Microsoft Word 2007/2010 </h4>
-               <p>Select the Home Ribbon in Word 2007/2010 and select the appropriate
-    							heading (Heading 1 to Heading 6) from the Styles group. </p>
-               <figure id="figure-word2007-heading-styles">
-                  <img src="img/word2007.gif" />
-                     
-                     <figcaption>Selecting heading styles in Word 2007/2010.</figcaption>
-                   
-               </figure>
-            </section>
-         
-      </section>
-      <section class="example">
-         <h3>Creating documents in OpenOffice.org Writer 2.2 that have
-    				correctly tagged headings when converted to PDF</h3>
-         
-            <p>This example is shown with OpenOffice.org Writer. There are other software tools that perform similar functions. See the list of other software tools in <a href="#pdf_notes_acc-sup_files_applications"></a>.</p>
-            <p>Use Styles to create heading formats: Heading 1, Heading 2, Heading
-    						3, etc. Make styles progress in a logical manner; e.g., a Heading 2
-    						should come after a Heading 1. </p>
-            <p>Export to PDF as follows: </p>
+				<h3>Adding or modifying tagged headings in PDF documents with Adobe Acrobat Pro</h3>
+				<p>This example is shown with Adobe Acrobat Pro. There are other software tools that perform similar functions.</p>
+					<ol>
+						<li>Open the PDF document in Adobe Acrobat Pro.</li>
+						<li>Select Accessibility &#8594; Reading Order...</li>
+						<li>Open the Tags panel to view the Accessibility Tags</li>
+					</ol>
+					<div>
+						<img alt="A PDF document opened in Adobe Acrobat. The Tags panel shows the headings in the tag tree. The Cooking With Oil heading is marked up as an H3 instead of an H2." src="img/cooking-headings1.png" width="770"/>
+					</div>
+					<p>To correct the <code>H3</code>:</p>
+					<ol>
+						<li>Click on <code>H3</code>'s text.</li>
+						<li>Click on the Heading 2 tag in the TouchUp Reading Order panel.</li>
+					</ol>
+				</section>
+				<section class="example">
+					<h3>Creating documents in Microsoft Word that have correctly tagged headings when converted to PDF</h3>
+          <p>This example is shown with Microsoft Word. There are other software tools that perform similar functions.</p>
+          <p>Use Styles to create heading formats: Heading 1, Heading 2, Heading 3, etc. Make styles progress in a logical manner; e.g., a Heading 2 should come after a Heading 1.</p>
+						<div>
+							<img alt="The document title is a Heading 1, which can be seen by the selected state of Word's Heading 1 button." src="img/heading1-in-word.png" width="770"/>
+						</div>
+					</section>
+					</section>
+					<section class="example">
+						<h3>Creating documents in OpenOffice Writer that have correctly tagged headings when converted to PDF</h3>
+            <p>This example is shown with OpenOffice Writer. There are other software tools that perform similar functions.</p>
+            <p>Seelct the text to become a heading, then use Format  &#8594; Styles to create heading formats: Heading 1, Heading 2, Heading 3, etc. </p>
+			<p><img alt="the styles tool" src="img/oostyles.jpg"/></p>
+			<p>Be sure to make header styles progress in a logical manner; e.g.,  Heading 2 should come after a Heading 1. </p>
+            <p>Export to PDF as follows:</p>
             <ol>
-               <li> From the File menu, select Export as PDF... </li>
-               <li> The first time you export as PDF, an Options Dialog appears. </li>
-               <li> Select Tagged PDF, then select Export. </li>
+               <li>From the File menu, select Export as PDF...</li>
+               <li>The first time you export as PDF, an Options Dialog appears.</li>
+               <li>Select Tagged PDF, then select Export.</li>
             </ol>
-            <p>
-               
-                  
-                  Selecting heading styles and exporting to PDF in OpenOffice.org Writer.
-                
-            </p>
-         
-      </section>
-      <section class="example">
-         <h3>Marking up headings using /H<em>n</em> elements</h3>
-         
-            <p>Headings within PDF documents can be marked up using /H<em>n</em> elements
-    						in the structure tree, where <em>n</em> is numeral 1 through 6 (for
-    						example /H1, /H2, etc.). </p>
-            <p>The following code fragment illustrates code that is typical for using
-    						the /H<em>n</em> elements to mark content. Note that /H1 has been role-mapped to /Head1 in this example. This is typically accomplished
-    						by an authoring tool. </p>
-            <pre xml:space="preserve">0 obj% Document catalog
+					</section>
+					<section class="example">
+						<h3>Marking up headings using /H<em>n</em> elements</h3>
+            <p>Headings within PDF documents can be marked up using /H<em>n</em> elements in the structure tree, where <em>n</em> is numeral 1 through 6 (for example /H1, /H2, etc.). </p>
+            <p>The following code fragment illustrates code that is typical for using the /H<em>n</em> elements to mark content. Note that /H1 has been role-mapped to /Head1 in this example. This is typically accomplished by an authoring tool.</p>
+            <pre xml:space="preserve"><code>0 obj% Document catalog
   &lt;&lt; /Type /Catalog
      /Pages 100 0 R                  % Page tree
      /StructTreeRoot 300 0 R         % Structure tree root
@@ -220,12 +120,9 @@ <h3>Marking up headings using /H<em>n</em> elements</h3>
     /K 0                             % Marked-content sequence 0
   &gt;&gt;
 endobj
-...
-</pre>
-            <p>Within marked content containers, headings can be marked up using
-    						/Head<em>n</em> elements as follows for a first-level heading in
-    						a PDF document: </p>
-            <pre xml:space="preserve">BT		 		% Start of text object
+...</code></pre>
+            <p>Within marked content containers, headings can be marked up using /Head<em>n</em> elements as follows for a first-level heading in a PDF document:</p>
+<pre xml:space="preserve"><code>BT		 		% Start of text object
   /Head1 &lt;&lt;/MCID 0 &gt;&gt;   	% Start of marked-content sequence
      BDC
         ...
@@ -233,50 +130,52 @@ <h3>Marking up headings using /H<em>n</em> elements</h3>
         ...
      EMC			% End of marked-content sequence
      ...
-ET				% End of text object
-</pre>
+ET				% End of text object</code></pre>
          
       </section>
-   </section><section id="tests"><h2>Tests</h2>
-      <section class="procedure"><h3>Procedure</h3>
-         <ol>
-            <li>
-               <p>For all PDF content that is divided into separate sections, use
-    					one of the following to verify that headings are tagged correctly:</p>
-               <ul>
-                  <li> Read the PDF document with a screen reader, listening to hear
-    						that the list of headings is announced correctly. </li>
-                  <li> Using a PDF editor, 
-    							make sure the headings are tagged correctly. </li>
-                  <li> Use a tool that is capable of showing the /Head<em>n</em> entries
-    								to open the PDF document and verify that headings are tagged
-    								correctly. </li>
-                  <li> Use a tool that exposes the document through the accessibility
-    									API and verify that the headings are tagged correctly. </li>
+
+		<section id="tests">
+			<h2>Tests</h2>
+			<section class="procedure">
+				<h3>Procedure</h3>
+				<ol>
+					<li>For all PDF content that is divided into separate sections, use
+    					one of the following to verify that headings are tagged correctly:
+							<ul>
+								<li>Read the PDF document with a screen reader, listening to hear that the list of headings is announced correctly.</li>
+								<li>Using a PDF editor, make sure the headings are tagged correctly.</li>
+								<li>Use a tool that is capable of showing the /Head<em>n</em> entries to open the PDF document and verify that headings are tagged correctly.</li>
+								<li>Use a tool that exposes the document through the accessibility API and verify that the headings are tagged correctly.</li>
                </ul>
             </li>
          </ol>
       </section>
-      <section class="results"><h3>Expected Results</h3>
-         <ul>
-            <li>#1 is true. </li>
-         </ul>
-      </section>
-   </section><section id="related"><h2>Related Techniques</h2><ul>
-      <li><a href="../general/G141">G141</a></li>
-   </ul></section><section id="resources"><h2>Resources</h2>
-      
-         <ul>
-            <li> Section 14.8.4.3.2 (Paragraphlike Elements) in <a href="http://www.adobe.com/content/dam/Adobe/en/devnet/pdf/pdfs/PDF32000_2008.pdf">PDF
-    					1.7 (ISO 32000-1)</a> 
-               </li>
-            <li> 
-                  <a href="https://accessdp.wordpress.com/fixing-pdfs-for-accessibility/headings/">PDF
-    							Accessibility Documentation:headings</a> 
-               </li>
-            <li>
-                  <a href="http://www.adobe.com/accessibility/products/acrobat.html">PDF and Accessibility</a>
-               </li>
-         </ul>
+			<section class="results">
+				<h3>Expected Results</h3>
+				<ul>
+					<li>#1 is true.</li>
+				</ul>
+			</section>
+		</section>
+		<section id="related">
+			<h2>Related Techniques</h2>
+			<ul>
+				<li><a href="../general/G141">G141</a></li>
+			</ul>
+		</section>
+		<section id="resources">
+			<h2>Resources</h2>
+			<ul>
+				<li>Section 14.8.4.3.2 (Paragraphlike Elements) in <a href="https://opensource.adobe.com/dc-acrobat-sdk-docs/pdfstandards/PDF32000_2008.pdf">PDF 1.7 (ISO 32000-1) (PDF)</a>
+				</li>				
+				<li> 
+					<a href="https://accessdp.wordpress.com/fixing-pdfs-for-accessibility/headings/">PDF Accessibility Documentation:headings</a>
+				</li>
+				<li>
+					<a href="https://helpx.adobe.com/acrobat/using/create-verify-pdf-accessibility.html">Create and verify PDF accessibility (Acrobat Pro)</a>
+				</li>
+			</ul>
       
-   </section></body></html>
+   </section>
+	</body>
+	</html>
diff --git a/techniques/pdf/img/abbr.jpg b/techniques/pdf/img/abbr.jpg
deleted file mode 100644
index 96005ca204..0000000000
Binary files a/techniques/pdf/img/abbr.jpg and /dev/null differ
diff --git a/techniques/pdf/img/abbreviation-expansion.png b/techniques/pdf/img/abbreviation-expansion.png
new file mode 100644
index 0000000000..4d5512fbf7
Binary files /dev/null and b/techniques/pdf/img/abbreviation-expansion.png differ
diff --git a/techniques/pdf/img/acrobat-correctly-formatted-list.png b/techniques/pdf/img/acrobat-correctly-formatted-list.png
new file mode 100644
index 0000000000..f66076684a
Binary files /dev/null and b/techniques/pdf/img/acrobat-correctly-formatted-list.png differ
diff --git a/techniques/pdf/img/acrobat-date-format.png b/techniques/pdf/img/acrobat-date-format.png
new file mode 100644
index 0000000000..5bd6b6d567
Binary files /dev/null and b/techniques/pdf/img/acrobat-date-format.png differ
diff --git a/techniques/pdf/img/acrobat-header-footer-tool.png b/techniques/pdf/img/acrobat-header-footer-tool.png
new file mode 100644
index 0000000000..cdedd4eb06
Binary files /dev/null and b/techniques/pdf/img/acrobat-header-footer-tool.png differ
diff --git a/techniques/pdf/img/acrobat-incorrectly-formatted-list.png b/techniques/pdf/img/acrobat-incorrectly-formatted-list.png
new file mode 100644
index 0000000000..0a762bb9d9
Binary files /dev/null and b/techniques/pdf/img/acrobat-incorrectly-formatted-list.png differ
diff --git a/techniques/pdf/img/acrobat-inline-change-of-language.png b/techniques/pdf/img/acrobat-inline-change-of-language.png
new file mode 100644
index 0000000000..532a434d9c
Binary files /dev/null and b/techniques/pdf/img/acrobat-inline-change-of-language.png differ
diff --git a/techniques/pdf/img/acrobat-page-numbers-nav.png b/techniques/pdf/img/acrobat-page-numbers-nav.png
new file mode 100644
index 0000000000..ef738242c8
Binary files /dev/null and b/techniques/pdf/img/acrobat-page-numbers-nav.png differ
diff --git a/techniques/pdf/img/acrobat-prepare-form-menu.png b/techniques/pdf/img/acrobat-prepare-form-menu.png
new file mode 100644
index 0000000000..a707b3e27c
Binary files /dev/null and b/techniques/pdf/img/acrobat-prepare-form-menu.png differ
diff --git a/techniques/pdf/img/acrobat-set-alternate-text.png b/techniques/pdf/img/acrobat-set-alternate-text.png
new file mode 100644
index 0000000000..6ad651f929
Binary files /dev/null and b/techniques/pdf/img/acrobat-set-alternate-text.png differ
diff --git a/techniques/pdf/img/acrobat-set-document-initial-view.png b/techniques/pdf/img/acrobat-set-document-initial-view.png
new file mode 100644
index 0000000000..2a7efc9d02
Binary files /dev/null and b/techniques/pdf/img/acrobat-set-document-initial-view.png differ
diff --git a/techniques/pdf/img/acrobat-update-page-numbers-1.png b/techniques/pdf/img/acrobat-update-page-numbers-1.png
new file mode 100644
index 0000000000..e33113f3ce
Binary files /dev/null and b/techniques/pdf/img/acrobat-update-page-numbers-1.png differ
diff --git a/techniques/pdf/img/acrobat-update-page-numbers-2.png b/techniques/pdf/img/acrobat-update-page-numbers-2.png
new file mode 100644
index 0000000000..72fcda6ea8
Binary files /dev/null and b/techniques/pdf/img/acrobat-update-page-numbers-2.png differ
diff --git a/techniques/pdf/img/acrobat-update-page-numbers-3.png b/techniques/pdf/img/acrobat-update-page-numbers-3.png
new file mode 100644
index 0000000000..18a242fbb0
Binary files /dev/null and b/techniques/pdf/img/acrobat-update-page-numbers-3.png differ
diff --git a/techniques/pdf/img/adding-label-to-form-field.png b/techniques/pdf/img/adding-label-to-form-field.png
new file mode 100644
index 0000000000..f9547a23f9
Binary files /dev/null and b/techniques/pdf/img/adding-label-to-form-field.png differ
diff --git a/techniques/pdf/img/adding-required-field.png b/techniques/pdf/img/adding-required-field.png
new file mode 100644
index 0000000000..308a49a67b
Binary files /dev/null and b/techniques/pdf/img/adding-required-field.png differ
diff --git a/techniques/pdf/img/bookmark1.jpg b/techniques/pdf/img/bookmark1.jpg
deleted file mode 100644
index cb0c96993c..0000000000
Binary files a/techniques/pdf/img/bookmark1.jpg and /dev/null differ
diff --git a/techniques/pdf/img/bookmark2.jpg b/techniques/pdf/img/bookmark2.jpg
deleted file mode 100644
index f306e2d9a0..0000000000
Binary files a/techniques/pdf/img/bookmark2.jpg and /dev/null differ
diff --git a/techniques/pdf/img/bookmarks.jpg b/techniques/pdf/img/bookmarks.jpg
deleted file mode 100644
index 76b5f0d54b..0000000000
Binary files a/techniques/pdf/img/bookmarks.jpg and /dev/null differ
diff --git a/techniques/pdf/img/bookmarks.png b/techniques/pdf/img/bookmarks.png
new file mode 100644
index 0000000000..0a943c3e6a
Binary files /dev/null and b/techniques/pdf/img/bookmarks.png differ
diff --git a/techniques/pdf/img/capelink1.jpg b/techniques/pdf/img/capelink1.jpg
deleted file mode 100644
index b17f830c50..0000000000
Binary files a/techniques/pdf/img/capelink1.jpg and /dev/null differ
diff --git a/techniques/pdf/img/capelink2.jpg b/techniques/pdf/img/capelink2.jpg
deleted file mode 100644
index 23892f9e70..0000000000
Binary files a/techniques/pdf/img/capelink2.jpg and /dev/null differ
diff --git a/techniques/pdf/img/capelink3.jpg b/techniques/pdf/img/capelink3.jpg
deleted file mode 100644
index 6bb2afdd3f..0000000000
Binary files a/techniques/pdf/img/capelink3.jpg and /dev/null differ
diff --git a/techniques/pdf/img/cooking-headings1.gif b/techniques/pdf/img/cooking-headings1.gif
deleted file mode 100644
index 987e67af5c..0000000000
Binary files a/techniques/pdf/img/cooking-headings1.gif and /dev/null differ
diff --git a/techniques/pdf/img/cooking-headings1.png b/techniques/pdf/img/cooking-headings1.png
new file mode 100644
index 0000000000..bf18275edd
Binary files /dev/null and b/techniques/pdf/img/cooking-headings1.png differ
diff --git a/techniques/pdf/img/cooking-headings2.gif b/techniques/pdf/img/cooking-headings2.gif
deleted file mode 100644
index 0b0a706b68..0000000000
Binary files a/techniques/pdf/img/cooking-headings2.gif and /dev/null differ
diff --git a/techniques/pdf/img/cooking-headings3.gif b/techniques/pdf/img/cooking-headings3.gif
deleted file mode 100644
index 3de3c6497b..0000000000
Binary files a/techniques/pdf/img/cooking-headings3.gif and /dev/null differ
diff --git a/techniques/pdf/img/cooking-headings4.gif b/techniques/pdf/img/cooking-headings4.gif
deleted file mode 100644
index 759be62949..0000000000
Binary files a/techniques/pdf/img/cooking-headings4.gif and /dev/null differ
diff --git a/techniques/pdf/img/cooking-headings5.gif b/techniques/pdf/img/cooking-headings5.gif
deleted file mode 100644
index 781a9b644e..0000000000
Binary files a/techniques/pdf/img/cooking-headings5.gif and /dev/null differ
diff --git a/techniques/pdf/img/dateerror.jpg b/techniques/pdf/img/dateerror.jpg
deleted file mode 100644
index 50203acc2d..0000000000
Binary files a/techniques/pdf/img/dateerror.jpg and /dev/null differ
diff --git a/techniques/pdf/img/dateformat.jpg b/techniques/pdf/img/dateformat.jpg
deleted file mode 100644
index de3ec68cff..0000000000
Binary files a/techniques/pdf/img/dateformat.jpg and /dev/null differ
diff --git a/techniques/pdf/img/doc-title.jpg b/techniques/pdf/img/doc-title.jpg
deleted file mode 100644
index d57730592e..0000000000
Binary files a/techniques/pdf/img/doc-title.jpg and /dev/null differ
diff --git a/techniques/pdf/img/docprop.gif b/techniques/pdf/img/docprop.gif
deleted file mode 100644
index 9e17418ee8..0000000000
Binary files a/techniques/pdf/img/docprop.gif and /dev/null differ
diff --git a/techniques/pdf/img/footer-word.jpg b/techniques/pdf/img/footer-word.jpg
deleted file mode 100644
index 2190027cf2..0000000000
Binary files a/techniques/pdf/img/footer-word.jpg and /dev/null differ
diff --git a/techniques/pdf/img/form-validation.jpg b/techniques/pdf/img/form-validation.jpg
deleted file mode 100644
index dbd6e16dab..0000000000
Binary files a/techniques/pdf/img/form-validation.jpg and /dev/null differ
diff --git a/techniques/pdf/img/form1.jpg b/techniques/pdf/img/form1.jpg
deleted file mode 100644
index 995434c0b9..0000000000
Binary files a/techniques/pdf/img/form1.jpg and /dev/null differ
diff --git a/techniques/pdf/img/form1a.jpg b/techniques/pdf/img/form1a.jpg
deleted file mode 100644
index 5b45e97793..0000000000
Binary files a/techniques/pdf/img/form1a.jpg and /dev/null differ
diff --git a/techniques/pdf/img/form1b.jpg b/techniques/pdf/img/form1b.jpg
deleted file mode 100644
index 2ce4c5186b..0000000000
Binary files a/techniques/pdf/img/form1b.jpg and /dev/null differ
diff --git a/techniques/pdf/img/form1c.jpg b/techniques/pdf/img/form1c.jpg
deleted file mode 100644
index 3ac2a7dfc4..0000000000
Binary files a/techniques/pdf/img/form1c.jpg and /dev/null differ
diff --git a/techniques/pdf/img/form2.jpg b/techniques/pdf/img/form2.jpg
deleted file mode 100644
index 427e0f428b..0000000000
Binary files a/techniques/pdf/img/form2.jpg and /dev/null differ
diff --git a/techniques/pdf/img/form2a.jpg b/techniques/pdf/img/form2a.jpg
deleted file mode 100644
index 87d1dff6e0..0000000000
Binary files a/techniques/pdf/img/form2a.jpg and /dev/null differ
diff --git a/techniques/pdf/img/form4.jpg b/techniques/pdf/img/form4.jpg
deleted file mode 100644
index 087c39b716..0000000000
Binary files a/techniques/pdf/img/form4.jpg and /dev/null differ
diff --git a/techniques/pdf/img/form5.jpg b/techniques/pdf/img/form5.jpg
deleted file mode 100644
index c04d818c50..0000000000
Binary files a/techniques/pdf/img/form5.jpg and /dev/null differ
diff --git a/techniques/pdf/img/header-word.jpg b/techniques/pdf/img/header-word.jpg
deleted file mode 100644
index 68427bab4d..0000000000
Binary files a/techniques/pdf/img/header-word.jpg and /dev/null differ
diff --git a/techniques/pdf/img/heading1-in-word.png b/techniques/pdf/img/heading1-in-word.png
new file mode 100644
index 0000000000..c2fbb55a78
Binary files /dev/null and b/techniques/pdf/img/heading1-in-word.png differ
diff --git a/techniques/pdf/img/http.gif b/techniques/pdf/img/http.gif
deleted file mode 100644
index e39fc24028..0000000000
Binary files a/techniques/pdf/img/http.gif and /dev/null differ
diff --git a/techniques/pdf/img/jscript.jpg b/techniques/pdf/img/jscript.jpg
deleted file mode 100644
index d8322469a7..0000000000
Binary files a/techniques/pdf/img/jscript.jpg and /dev/null differ
diff --git a/techniques/pdf/img/language.jpg b/techniques/pdf/img/language.jpg
deleted file mode 100644
index cb7f6a71f3..0000000000
Binary files a/techniques/pdf/img/language.jpg and /dev/null differ
diff --git a/techniques/pdf/img/lc-blank.jpg b/techniques/pdf/img/lc-blank.jpg
deleted file mode 100644
index 7ff017db0e..0000000000
Binary files a/techniques/pdf/img/lc-blank.jpg and /dev/null differ
diff --git a/techniques/pdf/img/lc-new.jpg b/techniques/pdf/img/lc-new.jpg
deleted file mode 100644
index 37dd33bd44..0000000000
Binary files a/techniques/pdf/img/lc-new.jpg and /dev/null differ
diff --git a/techniques/pdf/img/lc-objlib.jpg b/techniques/pdf/img/lc-objlib.jpg
deleted file mode 100644
index a2dcb578a7..0000000000
Binary files a/techniques/pdf/img/lc-objlib.jpg and /dev/null differ
diff --git a/techniques/pdf/img/lc-objpal-b.jpg b/techniques/pdf/img/lc-objpal-b.jpg
deleted file mode 100644
index b30f15f51e..0000000000
Binary files a/techniques/pdf/img/lc-objpal-b.jpg and /dev/null differ
diff --git a/techniques/pdf/img/lc-objpal-t.jpg b/techniques/pdf/img/lc-objpal-t.jpg
deleted file mode 100644
index 0c588d539b..0000000000
Binary files a/techniques/pdf/img/lc-objpal-t.jpg and /dev/null differ
diff --git a/techniques/pdf/img/lc-objpal-v.jpg b/techniques/pdf/img/lc-objpal-v.jpg
deleted file mode 100644
index 5f701af2eb..0000000000
Binary files a/techniques/pdf/img/lc-objpal-v.jpg and /dev/null differ
diff --git a/techniques/pdf/img/lc-required2.gif b/techniques/pdf/img/lc-required2.gif
deleted file mode 100644
index 213844df3e..0000000000
Binary files a/techniques/pdf/img/lc-required2.gif and /dev/null differ
diff --git a/techniques/pdf/img/lc-templates.jpg b/techniques/pdf/img/lc-templates.jpg
deleted file mode 100644
index 68d59247e1..0000000000
Binary files a/techniques/pdf/img/lc-templates.jpg and /dev/null differ
diff --git a/techniques/pdf/img/link-bookmark.jpg b/techniques/pdf/img/link-bookmark.jpg
deleted file mode 100644
index b59cbd6771..0000000000
Binary files a/techniques/pdf/img/link-bookmark.jpg and /dev/null differ
diff --git a/techniques/pdf/img/link-create-1.png b/techniques/pdf/img/link-create-1.png
new file mode 100644
index 0000000000..5475e78607
Binary files /dev/null and b/techniques/pdf/img/link-create-1.png differ
diff --git a/techniques/pdf/img/link-create-2.png b/techniques/pdf/img/link-create-2.png
new file mode 100644
index 0000000000..f6fc7ee055
Binary files /dev/null and b/techniques/pdf/img/link-create-2.png differ
diff --git a/techniques/pdf/img/listrepair.jpg b/techniques/pdf/img/listrepair.jpg
deleted file mode 100644
index 1edfebf075..0000000000
Binary files a/techniques/pdf/img/listrepair.jpg and /dev/null differ
diff --git a/techniques/pdf/img/lists-oo.jpg b/techniques/pdf/img/lists-oo.jpg
deleted file mode 100644
index 52539e90fc..0000000000
Binary files a/techniques/pdf/img/lists-oo.jpg and /dev/null differ
diff --git a/techniques/pdf/img/lists-word.jpg b/techniques/pdf/img/lists-word.jpg
deleted file mode 100644
index f5a2caa350..0000000000
Binary files a/techniques/pdf/img/lists-word.jpg and /dev/null differ
diff --git a/techniques/pdf/img/name-role-value.png b/techniques/pdf/img/name-role-value.png
new file mode 100644
index 0000000000..1c1ff2dfee
Binary files /dev/null and b/techniques/pdf/img/name-role-value.png differ
diff --git a/techniques/pdf/img/new-bookmarks-from-structure.png b/techniques/pdf/img/new-bookmarks-from-structure.png
new file mode 100644
index 0000000000..ce5388ceb1
Binary files /dev/null and b/techniques/pdf/img/new-bookmarks-from-structure.png differ
diff --git a/techniques/pdf/img/nrv1.jpg b/techniques/pdf/img/nrv1.jpg
deleted file mode 100644
index 6e84fd35e4..0000000000
Binary files a/techniques/pdf/img/nrv1.jpg and /dev/null differ
diff --git a/techniques/pdf/img/nrv2.jpg b/techniques/pdf/img/nrv2.jpg
deleted file mode 100644
index c2346feca7..0000000000
Binary files a/techniques/pdf/img/nrv2.jpg and /dev/null differ
diff --git a/techniques/pdf/img/ocr1.jpg b/techniques/pdf/img/ocr1.jpg
index 0ddd611d00..0d60bb475d 100644
Binary files a/techniques/pdf/img/ocr1.jpg and b/techniques/pdf/img/ocr1.jpg differ
diff --git a/techniques/pdf/img/ocr3.jpg b/techniques/pdf/img/ocr3.jpg
index f9659f6c69..f48f65786a 100644
Binary files a/techniques/pdf/img/ocr3.jpg and b/techniques/pdf/img/ocr3.jpg differ
diff --git a/techniques/pdf/img/oo-insert-page-numbers.jpg b/techniques/pdf/img/oo-insert-page-numbers.jpg
new file mode 100644
index 0000000000..f87a4e830a
Binary files /dev/null and b/techniques/pdf/img/oo-insert-page-numbers.jpg differ
diff --git a/techniques/pdf/img/oo-page-numbers.jpg b/techniques/pdf/img/oo-page-numbers.jpg
new file mode 100644
index 0000000000..72dd0ee8d2
Binary files /dev/null and b/techniques/pdf/img/oo-page-numbers.jpg differ
diff --git a/techniques/pdf/img/oocolumntool.jpg b/techniques/pdf/img/oocolumntool.jpg
new file mode 100644
index 0000000000..d02e37a826
Binary files /dev/null and b/techniques/pdf/img/oocolumntool.jpg differ
diff --git a/techniques/pdf/img/oohyperlink.jpg b/techniques/pdf/img/oohyperlink.jpg
new file mode 100644
index 0000000000..109903678f
Binary files /dev/null and b/techniques/pdf/img/oohyperlink.jpg differ
diff --git a/techniques/pdf/img/ooinsert.jpg b/techniques/pdf/img/ooinsert.jpg
new file mode 100644
index 0000000000..c45b4d5452
Binary files /dev/null and b/techniques/pdf/img/ooinsert.jpg differ
diff --git a/techniques/pdf/img/oomenu.jpg b/techniques/pdf/img/oomenu.jpg
new file mode 100644
index 0000000000..57d9f05145
Binary files /dev/null and b/techniques/pdf/img/oomenu.jpg differ
diff --git a/techniques/pdf/img/oostyles.jpg b/techniques/pdf/img/oostyles.jpg
new file mode 100644
index 0000000000..0d6c0ba9be
Binary files /dev/null and b/techniques/pdf/img/oostyles.jpg differ
diff --git a/techniques/pdf/img/page-props.jpg b/techniques/pdf/img/page-props.jpg
deleted file mode 100644
index d73078c701..0000000000
Binary files a/techniques/pdf/img/page-props.jpg and /dev/null differ
diff --git a/techniques/pdf/img/page_nos-nav.jpg b/techniques/pdf/img/page_nos-nav.jpg
deleted file mode 100644
index 7da6a5df59..0000000000
Binary files a/techniques/pdf/img/page_nos-nav.jpg and /dev/null differ
diff --git a/techniques/pdf/img/page_nos1.jpg b/techniques/pdf/img/page_nos1.jpg
deleted file mode 100644
index 0ac6fe3d4d..0000000000
Binary files a/techniques/pdf/img/page_nos1.jpg and /dev/null differ
diff --git a/techniques/pdf/img/page_nos2.jpg b/techniques/pdf/img/page_nos2.jpg
deleted file mode 100644
index 7707dc7bcf..0000000000
Binary files a/techniques/pdf/img/page_nos2.jpg and /dev/null differ
diff --git a/techniques/pdf/img/page_nos3.jpg b/techniques/pdf/img/page_nos3.jpg
deleted file mode 100644
index 7fc346e36c..0000000000
Binary files a/techniques/pdf/img/page_nos3.jpg and /dev/null differ
diff --git a/techniques/pdf/img/pages-icon.jpg b/techniques/pdf/img/pages-icon.jpg
deleted file mode 100644
index 742f4d10c0..0000000000
Binary files a/techniques/pdf/img/pages-icon.jpg and /dev/null differ
diff --git a/techniques/pdf/img/pages_nos_word.jpg b/techniques/pdf/img/pages_nos_word.jpg
deleted file mode 100644
index aea955c051..0000000000
Binary files a/techniques/pdf/img/pages_nos_word.jpg and /dev/null differ
diff --git a/techniques/pdf/img/pdf-page-footer.jpg b/techniques/pdf/img/pdf-page-footer.jpg
deleted file mode 100644
index ecb525bacd..0000000000
Binary files a/techniques/pdf/img/pdf-page-footer.jpg and /dev/null differ
diff --git a/techniques/pdf/img/pdf-page-header.jpg b/techniques/pdf/img/pdf-page-header.jpg
deleted file mode 100644
index 225823e7f6..0000000000
Binary files a/techniques/pdf/img/pdf-page-header.jpg and /dev/null differ
diff --git a/techniques/pdf/img/pro-header-footer-tool.jpg b/techniques/pdf/img/pro-header-footer-tool.jpg
deleted file mode 100644
index 50e8494490..0000000000
Binary files a/techniques/pdf/img/pro-header-footer-tool.jpg and /dev/null differ
diff --git a/techniques/pdf/img/submit-button.jpg b/techniques/pdf/img/submit-button.jpg
deleted file mode 100644
index 396e659f25..0000000000
Binary files a/techniques/pdf/img/submit-button.jpg and /dev/null differ
diff --git a/techniques/pdf/img/submit-button1.jpg b/techniques/pdf/img/submit-button1.jpg
deleted file mode 100644
index 9bacc01f21..0000000000
Binary files a/techniques/pdf/img/submit-button1.jpg and /dev/null differ
diff --git a/techniques/pdf/img/submit-button2.jpg b/techniques/pdf/img/submit-button2.jpg
deleted file mode 100644
index 3250c0a371..0000000000
Binary files a/techniques/pdf/img/submit-button2.jpg and /dev/null differ
diff --git a/techniques/pdf/img/submit-button3.jpg b/techniques/pdf/img/submit-button3.jpg
deleted file mode 100644
index c909d081a2..0000000000
Binary files a/techniques/pdf/img/submit-button3.jpg and /dev/null differ
diff --git a/techniques/pdf/img/submit-panel.gif b/techniques/pdf/img/submit-panel.gif
deleted file mode 100644
index b6c2e41302..0000000000
Binary files a/techniques/pdf/img/submit-panel.gif and /dev/null differ
diff --git a/techniques/pdf/img/tab-order.jpg b/techniques/pdf/img/tab-order.jpg
deleted file mode 100644
index 2d523dc1dc..0000000000
Binary files a/techniques/pdf/img/tab-order.jpg and /dev/null differ
diff --git a/techniques/pdf/img/table-1.jpg b/techniques/pdf/img/table-1.jpg
deleted file mode 100644
index 6c031ef242..0000000000
Binary files a/techniques/pdf/img/table-1.jpg and /dev/null differ
diff --git a/techniques/pdf/img/table-2.jpg b/techniques/pdf/img/table-2.jpg
deleted file mode 100644
index eb3f24343e..0000000000
Binary files a/techniques/pdf/img/table-2.jpg and /dev/null differ
diff --git a/techniques/pdf/img/table-2a.jpg b/techniques/pdf/img/table-2a.jpg
deleted file mode 100644
index fb6af1ce45..0000000000
Binary files a/techniques/pdf/img/table-2a.jpg and /dev/null differ
diff --git a/techniques/pdf/img/table-2b.jpg b/techniques/pdf/img/table-2b.jpg
deleted file mode 100644
index 347be1debe..0000000000
Binary files a/techniques/pdf/img/table-2b.jpg and /dev/null differ
diff --git a/techniques/pdf/img/table-example.jpg b/techniques/pdf/img/table-example.jpg
deleted file mode 100644
index cad66f6c16..0000000000
Binary files a/techniques/pdf/img/table-example.jpg and /dev/null differ
diff --git a/techniques/pdf/img/table-example2.jpg b/techniques/pdf/img/table-example2.jpg
deleted file mode 100644
index f0b83d225d..0000000000
Binary files a/techniques/pdf/img/table-example2.jpg and /dev/null differ
diff --git a/techniques/pdf/img/table-header-cells-corrected-acrobat.png b/techniques/pdf/img/table-header-cells-corrected-acrobat.png
new file mode 100644
index 0000000000..20ff46257a
Binary files /dev/null and b/techniques/pdf/img/table-header-cells-corrected-acrobat.png differ
diff --git a/techniques/pdf/img/table-header-cells-incorrect-acrobat.png b/techniques/pdf/img/table-header-cells-incorrect-acrobat.png
new file mode 100644
index 0000000000..c911e0e913
Binary files /dev/null and b/techniques/pdf/img/table-header-cells-incorrect-acrobat.png differ
diff --git a/techniques/pdf/img/table-word.jpg b/techniques/pdf/img/table-word.jpg
deleted file mode 100644
index 086bfa47bf..0000000000
Binary files a/techniques/pdf/img/table-word.jpg and /dev/null differ
diff --git a/techniques/pdf/img/textalt1.gif b/techniques/pdf/img/textalt1.gif
deleted file mode 100644
index 6979877f55..0000000000
Binary files a/techniques/pdf/img/textalt1.gif and /dev/null differ
diff --git a/techniques/pdf/img/textalt2.gif b/techniques/pdf/img/textalt2.gif
deleted file mode 100644
index 5bffe948c8..0000000000
Binary files a/techniques/pdf/img/textalt2.gif and /dev/null differ
diff --git a/techniques/pdf/img/textalt3.gif b/techniques/pdf/img/textalt3.gif
deleted file mode 100644
index 5b35d1ea39..0000000000
Binary files a/techniques/pdf/img/textalt3.gif and /dev/null differ
diff --git a/techniques/pdf/img/title-bar.jpg b/techniques/pdf/img/title-bar.jpg
deleted file mode 100644
index fb41f3ae40..0000000000
Binary files a/techniques/pdf/img/title-bar.jpg and /dev/null differ
diff --git a/techniques/pdf/img/title-entry.jpg b/techniques/pdf/img/title-entry.jpg
deleted file mode 100644
index 690deca158..0000000000
Binary files a/techniques/pdf/img/title-entry.jpg and /dev/null differ
diff --git a/techniques/pdf/img/turo_background.gif b/techniques/pdf/img/turo_background.gif
deleted file mode 100644
index 41786aedbe..0000000000
Binary files a/techniques/pdf/img/turo_background.gif and /dev/null differ
diff --git a/techniques/pdf/img/unformattedlist.jpg b/techniques/pdf/img/unformattedlist.jpg
deleted file mode 100644
index 76546628e1..0000000000
Binary files a/techniques/pdf/img/unformattedlist.jpg and /dev/null differ
diff --git a/techniques/pdf/img/word-col-tool.jpg b/techniques/pdf/img/word-col-tool.jpg
deleted file mode 100644
index 7db12d6b90..0000000000
Binary files a/techniques/pdf/img/word-col-tool.jpg and /dev/null differ
diff --git a/techniques/pdf/img/word-col-tool.png b/techniques/pdf/img/word-col-tool.png
new file mode 100644
index 0000000000..2807de4fe2
Binary files /dev/null and b/techniques/pdf/img/word-col-tool.png differ
diff --git a/techniques/pdf/img/word-complex-table-acrobat-1.png b/techniques/pdf/img/word-complex-table-acrobat-1.png
new file mode 100644
index 0000000000..40e58ad18f
Binary files /dev/null and b/techniques/pdf/img/word-complex-table-acrobat-1.png differ
diff --git a/techniques/pdf/img/word-complex-table-acrobat-2.png b/techniques/pdf/img/word-complex-table-acrobat-2.png
new file mode 100644
index 0000000000..ee6fa7cf04
Binary files /dev/null and b/techniques/pdf/img/word-complex-table-acrobat-2.png differ
diff --git a/techniques/pdf/img/word-complex-table-acrobat-3.png b/techniques/pdf/img/word-complex-table-acrobat-3.png
new file mode 100644
index 0000000000..1207895612
Binary files /dev/null and b/techniques/pdf/img/word-complex-table-acrobat-3.png differ
diff --git a/techniques/pdf/img/word-complex-table-acrobat-4.png b/techniques/pdf/img/word-complex-table-acrobat-4.png
new file mode 100644
index 0000000000..4d6ab6b0fe
Binary files /dev/null and b/techniques/pdf/img/word-complex-table-acrobat-4.png differ
diff --git a/techniques/pdf/img/word-complex-table.png b/techniques/pdf/img/word-complex-table.png
new file mode 100644
index 0000000000..eb90ca1fbd
Binary files /dev/null and b/techniques/pdf/img/word-complex-table.png differ
diff --git a/techniques/pdf/img/word-headerfootertools.jpg b/techniques/pdf/img/word-headerfootertools.jpg
deleted file mode 100644
index 87f9405bd6..0000000000
Binary files a/techniques/pdf/img/word-headerfootertools.jpg and /dev/null differ
diff --git a/techniques/pdf/img/word-page-numbers.png b/techniques/pdf/img/word-page-numbers.png
new file mode 100644
index 0000000000..d66ff72fa2
Binary files /dev/null and b/techniques/pdf/img/word-page-numbers.png differ
diff --git a/techniques/pdf/img/word-set-alternate-text.png b/techniques/pdf/img/word-set-alternate-text.png
new file mode 100644
index 0000000000..8b3f59e0ac
Binary files /dev/null and b/techniques/pdf/img/word-set-alternate-text.png differ
diff --git a/techniques/pdf/img/word-table.jpg b/techniques/pdf/img/word-table.jpg
deleted file mode 100644
index 8f873ae419..0000000000
Binary files a/techniques/pdf/img/word-table.jpg and /dev/null differ
diff --git a/techniques/pdf/img/word-table.png b/techniques/pdf/img/word-table.png
new file mode 100644
index 0000000000..8d11a7193b
Binary files /dev/null and b/techniques/pdf/img/word-table.png differ
diff --git a/techniques/pdf/img/word-toc.jpg b/techniques/pdf/img/word-toc.jpg
deleted file mode 100644
index 896cddd7e1..0000000000
Binary files a/techniques/pdf/img/word-toc.jpg and /dev/null differ
diff --git a/techniques/pdf/img/word2003.gif b/techniques/pdf/img/word2003.gif
deleted file mode 100644
index e828f78d56..0000000000
Binary files a/techniques/pdf/img/word2003.gif and /dev/null differ
diff --git a/techniques/pdf/img/word2003alt.gif b/techniques/pdf/img/word2003alt.gif
deleted file mode 100644
index 6658dcf123..0000000000
Binary files a/techniques/pdf/img/word2003alt.gif and /dev/null differ
diff --git a/techniques/pdf/img/word2007.gif b/techniques/pdf/img/word2007.gif
deleted file mode 100644
index df62df1fa5..0000000000
Binary files a/techniques/pdf/img/word2007.gif and /dev/null differ
diff --git a/techniques/server-side-script/SVR1.html b/techniques/server-side-script/SVR1.html
index dc461a5bad..0193eccd9f 100644
--- a/techniques/server-side-script/SVR1.html
+++ b/techniques/server-side-script/SVR1.html
@@ -1,156 +1,133 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Implementing automatic redirects on the server side instead of on the
-                    client side</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Implementing automatic redirects on the server side instead of on the
-                    client side</h1><section class="meta"><p class="id">ID: SVR1</p><p class="technology">Technology: server-side-script</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
-      <p> Server-side technologies, including server-side scripting languages and
-                        server configuration files with URLs or URL patterns for redirects. </p>
-   </section><section id="description"><h2>Description</h2>
-      <p> The objective of this technique is to avoid confusion that may be caused
-                        when two new pages are loaded in quick succession because one page (the one
-                        requested by the user) redirects to another. Some user agents support the
-                        use of the HTML meta element to redirect the user to another page
-                        after a specified number of seconds. This makes a page inaccessible to some
-                        users, especially users with screen readers. Server-side technologies
-                        provide methods to implement redirects in a way that does not confuse users.
-                        A server-side script or configuration file can cause the server to send an
-                        appropriate HTTP response with a status code in the 3xx range and a Location
-                        header with another URL. When the browser receives this response, the location
-                        bar changes and the browser makes a request with the new URL. </p>
-   </section><section id="examples"><h2>Examples</h2>
-      <section class="example">
-         <h3>JSP/Servlets</h3>
-         
-            <p> In Java Servlets or JavaServer Pages (JSP), developers can use
-                                    HttpServletResponse.sendRedirect(String url). </p>
-         
-         <pre xml:space="preserve">
-…
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>Implementing automatic redirects on the server side instead of on the
+	client side</title>
+	<link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+</head>
+<body>
+	<h1>Implementing automatic redirects on the server side instead of on the
+	client side</h1>
+	<section class="meta"><p class="id">ID: SVR1</p>
+		<p class="technology">Technology: server-side-script</p>
+		<p class="type">Type: Technique</p>
+	</section>
+	<section id="applicability">
+		<h2>When to Use</h2>
+		<p>Server-side technologies, including server-side scripting languages and
+		server configuration files with URLs or URL patterns for redirects.</p>
+	</section>
+	<section id="description">
+		<h2>Description</h2>
+		<p>The objective of this technique is to avoid confusion that may be caused when two new pages are loaded in quick succession because one page (the one requested by the user) redirects to another. Some user agents support the use of the <abbr title="HyperText Markup Language">HTML</abbr> meta element to redirect the user to another page after a specified number of seconds. This makes a page inaccessible to some users, especially users with screen readers. Server-side technologies provide methods to implement redirects in a way that does not confuse users. A server-side script or configuration file can cause the server to send an appropriate <abbr title="HyperText Transfer Proto">HTTP</abbr> response with a status code in the 3xx range and a Location header with another <abbr title="Uniform Resource Locator">URL</abbr>. When the browser receives this response, the location bar changes and the browser makes a request with the new URL.</p>
+	</section>
+	<section id="examples">
+		<h2>Examples</h2>
+		<section class="example">
+			<h3>JSP/Servlets</h3>
+			<p>In Java Servlets or JavaServer Pages (JSP), developers can use
+				<code class="language-java">HttpServletResponse.sendRedirect(String url)</code>. </p>
+<pre xml:space="preserve"><code class="language-java">...
 public void doGet(HttpServletRequest request, HttpServletResponse response)
-    throws ServletException, IOException {
-…
+throws ServletException, IOException {
+  ...
   response.sendRedirect("/newUserLogin.do");
-}</pre>
-         
-            <p> This sends a response with a 302 status code ("Found") and a
-                                Location header with the new URL to the user agent. It is also
-                                possible to set another status code with
-                                    response.sendError(int code, String message) with
-                                one of the constants defined in the interface
-                                javax.servlet.http.HttpServletResponse as status code. </p>
-         
-         <pre xml:space="preserve">
-…
+}</code></pre>
+			
+			<p>This sends a response with a <code>302</code> status code ("Found") and a <code>Location</code> header with the new URL to the user agent. It is also possible to set another status code with <code class="language-java">response.sendError(int code, String message)</code> with one of the constants defined in the interface <code class="language-java">javax.servlet.http.HttpServletResponse</code> as status code.</p>
+			
+<pre xml:space="preserve"><code class="language-java">...
 public void doGet(HttpServletRequest request, HttpServletResponse response)
-    throws ServletException, IOException {
-…
+throws ServletException, IOException {
+  ...
   response.sendError(response.SC_MOVED_PERMANENTLY, "/newUserLogin.do");
-}</pre>
-         
-            <p> If an application uses HttpServletResponse.encodeURL(String
-                                    url) for URL rewriting because the application depends on
-                                sessions, the method
-                                    HttpServletResponse.encodeRedirectURL(String url)
-                                should be used instead of
-                                    HttpServletResponse.sendRedirect(String url). It is
-                                also possible to rewrite a URL with
-                                    HttpServletResponse.encodeURL(String url) and then
-                                pass this URL to HttpServletResponse.sendRedirect(String
-                                url). </p>
-         
-      </section>
-      <section class="example">
-         <h3>ASP</h3>
-         
-            <p> In Active Server Page (ASP) with VBScript, developers can use
-                                    Response.Redirect. </p>
-         
-         <pre xml:space="preserve">
-  Response.Redirect "newUserLogin.asp"</pre>
-         
-            <p> or </p>
-         
-         <pre xml:space="preserve">
-Response.Redirect("newUserLogin.asp")</pre>
-         
-            <p> The code below is a more complete example with a specific HTTP
-                                status code. </p>
-         
-         <pre xml:space="preserve">
-Response.Clear
+}</code></pre>
+				
+				<p> If an application uses <code class="language-java">HttpServletResponse.encodeURL(String
+					url)</code> for URL rewriting because the application depends on
+					sessions, the method <code class="language-java">HttpServletResponse.encodeRedirectURL(String url)</code> should be used instead of
+					<code class="language-java">HttpServletResponse.sendRedirect(String url)</code>. It is
+					also possible to rewrite a URL with <code class="language-java">HttpServletResponse.encodeURL(String url)</code> and then pass this URL to <code class="language-java">HttpServletResponse.sendRedirect(String url)</code>. </p>
+			</section>
+			<section class="example">
+			 <h3><abbr title="Active Server Pages">ASP</abbr></h3>
+			 
+			 <p>In Active Server Page (ASP) with VBScript, developers can use <code class="language-vbnet">Response.Redirect</code>.</p>
+			 
+<pre xml:space="preserve"><code class="language-vbnet">Response.Redirect "newUserLogin.asp"</code></pre>
+			 
+			 <p>or</p>
+<pre xml:space="preserve"><code class="language-vbnet">Response.Redirect("newUserLogin.asp")</code></pre>
+			 
+			 <p>The code below is a more complete example with a specific HTTP status code.</p>
+			 
+<pre xml:space="preserve"><code class="language-vbnet">Response.Clear
 Response.Status = 301
 Response.AddHeader "Location", "newUserLogin.asp"
 Response.Flush
-Response.End</pre>
-      </section>
-      <section class="example">
-         <h3>PHP</h3>
-         
-            <p> In PHP, developers can send a raw HTTP header with the
-                                header method. The code below sends a 301 status code
-                                and a new location. If the status is not explicitly set, the
-                                redirect response sends an HTTP status code 302. </p>
-         
-         <pre xml:space="preserve">
- &lt;?php
-header("HTTP/1.1 301 Moved Permanently);
-header("Location: http://www.example.com/newUserLogin.php");
-?&gt;</pre>
-      </section>
-      <section class="example">
-         <h3>Apache</h3>
-         
-            <p> Developers can configure the Apache Web server to handle redirects,
-                                as in the following example. </p>
-         
-         <pre xml:space="preserve">
-redirect 301 /oldUserLogin.jsp http://www.example.com/newUserLogin.do</pre>
-      </section>
-   </section><section id="tests"><h2>Tests</h2>
-      <section class="procedure"><h3>Procedure</h3>
-         <ol>
-            <li> Find each link or programmatic reference to another page or
-                                    Web page. </li>
-            <li> For each link or programmatic reference to a URI in the set of
-                                    Web pages being evaluated, check if the referenced
-                                    Web page contains code (e.g., meta element or script) that
-                                    causes a client-side redirect. </li>
-            <li> For each link or programmatic reference to a URI in the set of
-                                    Web pages being evaluated, check if the referenced URI
-                                    does not cause a redirect OR causes a server-side redirect
-                                    without a time-out. </li>
-         </ol>
-      </section>
-      <section class="results"><h3>Expected Results</h3>
-         <ul>
-            <li> Step 2 is false AND step 3 is true. </li>
-         </ul>
-      </section>
-   </section><section id="related"><h2>Related Techniques</h2></section><section id="resources"><h2>Resources</h2>
-      
-         <ul>
-            <li> 
-                  <a href="https://www.w3.org/QA/Tips/reback">Use standard
-                                        redirects: do not break the back button!</a> (W3C QA Tip).
-                                </li>
-            <li> 
-                  <a href="https://tools.ietf.org/html/rfc7231#section-6.4">HTTP/1.1 Status Code Definitions: Redirection 3xx</a>.
-                                </li>
-            <li> 
-                  <a href="http://www.somacon.com/p145.php">HTTP 301 Permanent
-                                        Redirection Techniques</a> by Shailesh N. Humbad. </li>
-            <li> 
-                  <a href="http://docs.oracle.com/cd/E17802_01/products/products/servlet/2.3/javadoc/javax/servlet/http/HttpServletResponse.html">Interface javax.servlet.http.HttpServletResponse</a> in
-                                    the Java Servlets 2.3 API documentation. </li>
-            <li> 
-                  <a href="http://php.net/manual/en/function.header.php">header</a> in the PHP
-                                    Manual. </li>
-            <li> 
-                  <a href="http://httpd.apache.org/docs/2.2/mod/mod_alias.html">Apache Module mod_alias</a> in the <a href="http://httpd.apache.org/docs/2.2/">Apache HTTP Server
-                                        Version 2.2 Documentation</a> describes how redirects can
-                                    be specified in Apache 2.2. </li>
-            <li> 
-                  <a href="http://httpd.apache.org/docs/1.3/mod/mod_alias.html">Module mod_alias</a> in the <a href="http://httpd.apache.org/docs/1.3/">Apache HTTP Server
-                                        Version 1.3 Documentation</a> describes how redirects can
-                                    be specified in Apache 1.3. </li>
-         </ul>
-      
-   </section></body></html>
\ No newline at end of file
+Response.End</code></pre>
+		</section>
+		<section class="example">
+		 <h3><abbr title="PHP: Hypertext Preprocessor">PHP</abbr></h3>
+		 
+		 <p>In PHP, developers can send a raw HTTP header with the header method. The code below sends a 301 status code and a new location. If the status is not explicitly set, the redirect response sends an HTTP status code <code>302</code>.</p>
+		
+<pre xml:space="preserve"><code class="language-php">&lt;?php
+header("HTTP/1.1 301 Moved Permanently");
+header("Location: https://www.example.com/newUserLogin.php");
+?&gt;</code></pre>
+	</section>
+	<section class="example">
+	 <h3>Apache</h3>
+	 
+	 <p>Developers can configure the Apache Web server to handle redirects, as in the following example.</p>
+	 
+<pre xml:space="preserve"><code class="language-apache">redirect 301 /oldUserLogin.jsp http://www.example.com/newUserLogin.do</code></pre>
+	</section>
+	</section>
+	<section id="tests">
+		<h2>Tests</h2>
+		<section class="procedure">
+			<h3>Procedure</h3>
+			<ol>
+				<li>Find each link or programmatic reference to another page or Web page.</li>
+				<li>For each link or programmatic reference to a URI in the set of Web pages being evaluated, check if the referenced Web page contains code (e.g., meta element or script) that causes a client-side redirect.</li>
+				<li>For each link or programmatic reference to a URI in the set of Web pages being evaluated, check if the referenced <code class="Uniform Resource Identifier">URI</code> does not cause a redirect OR causes a server-side redirect without a time-out.</li>
+			</ol>
+		</section>
+		<section class="results">
+			<h3>Expected Results</h3>
+			<ul>
+				<li>Check #2 is false <em>and</em> check #3 is true.</li>
+			</ul>
+		</section>
+	</section>
+	<section id="related">
+		<h2>Related Techniques</h2>
+	</section>
+	<section id="resources">
+		<h2>Resources</h2>
+		<ul>
+			<li> 
+				<a href="https://www.w3.org/QA/Tips/reback">Use standard redirects: do not break the back button!</a> (W3C QA Tip).
+			</li>
+		<li> 
+			<a href="https://www.rfc-editor.org/rfc/rfc9110#name-redirection-3xx">RFC 9110: HTTP Semantics 15.4. Redirection 3xx</a>.
+		</li>
+		<li> 
+			<a href="http://docs.oracle.com/cd/E17802_01/products/products/servlet/2.3/javadoc/javax/servlet/http/HttpServletResponse.html">Interface javax.servlet.http.HttpServletResponse</a> in
+			the Java Servlets 2.3 API documentation.</li>
+			<li> 
+				<a href="http://php.net/manual/en/function.header.php">PHP header</a>.</li>
+			<li> 
+				<a href="http://httpd.apache.org/docs/2.2/mod/mod_alias.html">Apache Module mod_alias</a> in the <a href="http://httpd.apache.org/docs/2.2/">Apache HTTP Server
+				Version 2.2 Documentation</a> describes how redirects can
+			be specified in Apache 2.2. </li>
+			<li> 
+				<a href="http://httpd.apache.org/docs/1.3/mod/mod_alias.html">Module mod_alias</a> in the <a href="http://httpd.apache.org/docs/1.3/">Apache HTTP Server
+				Version 1.3 Documentation</a> describes how redirects can
+			be specified in Apache 1.3. </li>
+		</ul>
+	</section>
+	</body>
+	</html>
\ No newline at end of file
diff --git a/techniques/server-side-script/SVR2.html b/techniques/server-side-script/SVR2.html
index d46104d542..2ebab3a8c0 100644
--- a/techniques/server-side-script/SVR2.html
+++ b/techniques/server-side-script/SVR2.html
@@ -1,93 +1,111 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using .htaccess to ensure that the only way to access non-conforming content is from conforming content</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Using .htaccess to ensure that the only way to access non-conforming content is from conforming content</h1><section class="meta"><p class="id">ID: SVR2</p><p class="technology">Technology: server-side-script</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
-      <p>Content residing on a Web server that supports .htaccess (typically Apache) where a conforming version of content is provided as an alternative to a non-conforming version.</p>
-   </section><section id="description"><h2>Description</h2>
-      <p>The objective of this technique is to ensure that users can always access an accessible version of the content when non-conforming versions are also available. Whenever content is provided in a format that does not conform to WCAG, the site as a whole can still conform if alternate versions of the inaccessible content are provided. Conformance Requirement 4 requires that alternate versions can be derived from the nonconforming content or from its URI. 
-</p>
-      <p>Since it is not always possible to provide an accessible link from within non-conforming content, this technique describes how authors can use Apache's Module "mod_access" to ensure that non-conforming content can only be accessed from URIs that serve as alternate versions to the non-conforming content or from pages that include links to both the non-conforming version and the alternative version.</p>
-   </section><section id="examples"><h2>Examples</h2>
-      <section class="example">
-         
-            <p>The following .htaccess file uses Apache's mod_redirect module to redirect requests for "inaccessible.html" to "accessible.html" unless the request comes from "accessible.html".</p>
-         
-         <pre xml:space="preserve">
-# If the request for inaccessible content comes from a file 
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>Using .htaccess to ensure that the only way to access non-conforming content is from conforming content</title>
+		<link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+	</head>
+	<body>
+		<h1>Using .htaccess to ensure that the only way to access non-conforming content is from conforming content</h1>
+		<section class="meta">
+			<p class="id">ID: SVR2</p>
+			<p class="technology">Technology: server-side-script</p>
+			<p class="type">Type: Technique</p>
+		</section>
+		<section id="applicability">
+			<h2>When to Use</h2>
+			<p>Content residing on a Web server that supports .htaccess (typically Apache) where a conforming version of content is provided as an alternative to a non-conforming version.</p>
+		</section>
+		<section id="description">
+			<h2>Description</h2>
+			<p>The objective of this technique is to ensure that users can always access an accessible version of the content when non-conforming versions are also available. Whenever content is provided in a format that does not conform to WCAG, the site as a whole can still conform if alternate versions of the inaccessible content are provided. Conformance Requirement 4 requires that alternate versions can be derived from the nonconforming content or from its <code class="Uniform Resource Identifier">URI</code>.</p>
+			<p>Since it is not always possible to provide an accessible link from within non-conforming content, this technique describes how authors can use Apache's Module "mod_access" to ensure that non-conforming content can only be accessed from URIs that serve as alternate versions to the non-conforming content or from pages that include links to both the non-conforming version and the alternative version.</p>
+		</section>
+		<section id="examples">
+			<h2>Examples</h2>
+			<section class="example">
+				<h3>Using Apache's <code class="language-apache">mod_redirect</code> module to redirect requests</h3>
+				<p>The following .htaccess file uses Apache's <code class="language-apache">mod_redirect</code> module to redirect requests for "inaccessible.html" to "accessible.html" unless the request comes from "accessible.html".</p>
+     
+<pre xml:space="preserve"><code class="language-apache"># If the request for inaccessible content comes from a file 
 # called accessible.html, then set an environment variable that 
 # allows the inaccessible version to be displayed.
 SetEnvIf Referer .*(accessible.html)$ let_me_in
 &lt;FilesMatch ^(inaccessible.html)$&gt;
-    Order Deny,Allow
-    Deny from all
-    Allow from env=let_me_in
+  Order Deny,Allow
+  Deny from all
+  Allow from env=let_me_in
 &lt;/FilesMatch&gt;
 
 # If the request comes from anyplace but accessible.html, then 
 # redirect the error condition to a location where the accessible 
 # version resides
-ErrorDocument 403 /example_directory/accessible.html
-</pre>
-         
-         
-      </section>
-      <section class="example">
-         
-            <p>This example assumes a directory structure where documents are available in multiple formats. One of the formats does not meet WCAG at the level claimed and uses the file extension "jna" (Just Not Accessible). All of these files are stored in a folder called "jna" with an .htaccess file which ensures that any direct request for a file with the .jna extension from pages where inaccessible versions are not already available is redirected to an index page that lists all of the available formats.</p>
-         
-         <pre xml:space="preserve">
-# If the request for inaccessible content comes from a file at 
-# http://example.com/documents/index.html, then set an environment 
+ErrorDocument 403 /example_directory/accessible.html</code></pre>
+     </section>
+		 <section class="example">
+			<h3>Redirecting direct requests for files</h3>
+     <p>This example assumes a directory structure where documents are available in multiple formats. One of the formats does not meet WCAG at the level claimed and uses the file extension "jna" (Just Not Accessible). All of these files are stored in a folder called "jna" with an .htaccess file which ensures that any direct request for a file with the .jna extension from pages where inaccessible versions are not already available is redirected to an index page that lists all of the available formats.</p>
+     
+<pre xml:space="preserve"><code class="language-apache"># If the request for inaccessible content comes from a file at 
+# https://example.com/documents/index.html, then set an environment 
 # variable that allows the inaccessible version to be displayed.
-SetEnvIf Referer ^http://example.com/documents/index.html$ let_me_in
+SetEnvIf Referer ^https://example.com/documents/index.html$ let_me_in
 &lt;FilesMatch ^(.*\.jna)$&gt;
-    Order Deny,Allow
-    Deny from all
-    Allow from env=let_me_in
+  Order Deny,Allow
+  Deny from all
+  Allow from env=let_me_in
 &lt;/FilesMatch&gt;
 
-# If the request comes from anyplace but http://example.com/documents/index.html, then 
+# If the request comes from anyplace but https://example.com/documents/index.html, then 
 # redirect the error condition to a location where a link the accessible 
 # version resides
-ErrorDocument 403 http://example.com/documents/index.html
-</pre>
-      </section>
-   </section><section id="tests"><h2>Tests</h2>
-      <section class="procedure"><h3>Procedure</h3>
-         <ol>
-            <li>Identify pages that do not conform to WCAG at the conformance Level claimed where accessible alternatives are served based on the use of .htaccess files.
-    </li>
-            <li>Visit the URI of the non-conforming content.
-    </li>
-            <li>
-               <p>Verify that the resulting page is one of the following:</p>
-               <ol>
-                  <li>a <a>conforming alternate version</a> for the non-conforming content</li>
-                  <li>a page that includes a link to both the conforming alternate version and the non-conforming content</li>
-               </ol>
-            </li>
-         </ol>
-      </section>
-      <section class="results"><h3>Expected Results</h3>
-         <ul>
-            <li>Check #3.1 or #3.2 is true.</li>
-         </ul>
-      </section>
-   </section><section id="related"><h2>Related Techniques</h2><ul>
-      <li><a href="../general/G136">G136</a></li>
-      <li><a href="../general/G190">G190</a></li>
-      <li><a href="../server-side-script/SVR3">SVR3</a></li>
-      <li><a href="../server-side-script/SVR4">SVR4</a></li>
-      <li><a href="../css/C29">C29</a></li>
-   </ul></section><section id="resources"><h2>Resources</h2>
-      
-         <ul>
-            <li> 
-                  <a href="http://httpd.apache.org/docs/2.4/mod/mod_env.html">Apache Module mod_env</a> 
-               </li>
-            <li> 
-                  <a href="http://httpd.apache.org/docs/2.4/howto/auth.html">Authentication, Authorization and Access Control</a> 
-               </li>
-            <li> 
-                  <a href="http://httpd.apache.org/docs/2.4/howto/htaccess.html">Apache Tutorial: .htaccess files</a> 
-               </li>
-         </ul>
-      
-   </section></body></html>
\ No newline at end of file
+ErrorDocument 403 https://example.com/documents/index.html</code></pre>
+   </section>
+ </section><section id="tests"><h2>Tests</h2>
+   <section class="procedure"><h3>Procedure</h3>
+    <ol>
+     <li>Identify pages that do not conform to WCAG at the conformance Level claimed where accessible alternatives are served based on the use of .htaccess files.
+     </li>
+     <li>Visit the URI of the non-conforming content.
+     </li>
+     <li>
+      <p>Verify that the resulting page is one of the following:</p>
+      <ol>
+       <li>a <a>conforming alternate version</a> for the non-conforming content</li>
+       <li>a page that includes a link to both the conforming alternate version and the non-conforming content</li>
+     </ol>
+   </li>
+ </ol>
+ </section>
+ <section class="results">
+	<h3>Expected Results</h3>
+	<ul>
+		<li>Check #3.1 or #3.2 is true.</li>
+	</ul>
+ </section>
+ </section>
+ <section id="related">
+	<h2>Related Techniques</h2>
+	<ul>
+   <li><a href="../general/G136">G136</a></li>
+   <li><a href="../general/G190">G190</a></li>
+   <li><a href="../server-side-script/SVR3">SVR3</a></li>
+   <li><a href="../server-side-script/SVR4">SVR4</a></li>
+   <li><a href="../css/C29">C29</a></li>
+ </ul>
+</section>
+<section id="resources">
+	<h2>Resources</h2> 
+  <ul>
+   <li> 
+     <a href="https://httpd.apache.org/docs/2.4/mod/mod_env.html">Apache Module mod_env</a> 
+   </li>
+   <li> 
+     <a href="https://httpd.apache.org/docs/2.4/howto/auth.html">Authentication, Authorization and Access Control</a> 
+   </li>
+   <li> 
+     <a href="https://httpd.apache.org/docs/2.4/howto/htaccess.html">Apache Tutorial: .htaccess files</a> 
+   </li>
+ </ul>
+ </section>
+ </body>
+ </html>
\ No newline at end of file
diff --git a/techniques/server-side-script/SVR3.html b/techniques/server-side-script/SVR3.html
index dddab341f2..eb93d8bb19 100644
--- a/techniques/server-side-script/SVR3.html
+++ b/techniques/server-side-script/SVR3.html
@@ -1,71 +1,84 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using HTTP referer to ensure that the only way to access non-conforming content is from conforming content</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Using HTTP referer to ensure that the only way to access non-conforming content is from conforming content</h1><section class="meta"><p class="id">ID: SVR3</p><p class="technology">Technology: server-side-script</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>Using HTTP referer to ensure that the only way to access non-conforming content is from conforming content</title><link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+	</head>
+	<body>
+		<h1>Using <abbr title="HyperText Transfer Protocol">HTTP</abbr> referer to ensure that the only way to access non-conforming content is from conforming content</h1>
+		<section class="meta">
+			<p class="id">ID: SVR3</p>
+			<p class="technology">Technology: server-side-script</p>
+			<p class="type">Type: Technique</p>
+		</section>
+		<section id="applicability">
+			<h2>When to Use</h2>
       <p>Content created using server-side scripting where a conforming version of content is provided as an alternative to a non-conforming version based on HTTP Referer.</p>
-   </section><section id="description"><h2>Description</h2>
-      <p>The objective of this technique is to ensure that users can obtain an accessible version of content where both non-conforming and conforming versions are provided.</p>
-      <p>
-         <a href="https://www.w3.org/WAI/WCAG21/Understanding/conformance#conf-req1">Conformance Requirement 1</a> allows non-conforming pages to be included within the scope of conformance as long as they have a "<a href="https://www.w3.org/TR/WCAG21/#dfn-conforming-alternate-version">conforming alternate version</a>". It is not always possible for authors to include accessibility supported links to conforming content from within non-conforming content. Therefore, authors may need to rely on the use of Server Side Scripting technologies (ex. PHP, ASP, JSP) to ensure that the non-conforming version can only be reached from a conforming page.</p>
-      <p>This technique describes how to use information provided by the HTTP referer to ensure that non-conforming content can only be reached from a conforming page. The HTTP referer header is set by the user agent and contains the URI of the page (if any) which referred the user agent to the non-conforming page.</p>
-      <p>To implement this technique, an author identifies the URI for the conforming version of the content, for each non-conforming page. When a request for the non-conforming version of a page is received, the server compares the value of the HTTP referer header against the URI of the conforming version to determine whether the link to the non-conforming version came from the conforming version. The non-conforming version is only served if the HTTP referer matches the URI of the non-conforming version. Otherwise, the user is redirected to the conforming version of the content. Note that when comparing the URI in the HTTP referer header, non-relevant variations in the URI, such as in the query and target, should be taken into account.</p>
-   </section><section id="examples"><h2>Examples</h2>
+   </section>
+	 <section id="description">
+		<h2>Description</h2>
+		<p>The objective of this technique is to ensure that users can obtain an accessible version of content where both non-conforming and conforming versions are provided.</p>
+		<p><a href="../../Understanding/conformance#conf-req1">Conformance Requirement 1</a> allows non-conforming pages to be included within the scope of conformance as long as they have a <a>conforming alternate version</a>. It is not always possible for authors to include accessibility supported links to conforming content from within non-conforming content. Therefore, authors may need to rely on the use of Server Side Scripting technologies (ex. <abbr title="PHP: Hypertext Preprocessor">PHP</abbr>, <abbr title="Active Server Pages">ASP</abbr>, <abbr title="Java Server Pages">JSP</abbr>) to ensure that the non-conforming version can only be reached from a conforming page.</p>
+		<p>This technique describes how to use information provided by the HTTP referer to ensure that non-conforming content can only be reached from a conforming page. The HTTP referer header is set by the user agent and contains the <abbr title="Uniform Resource Identifier">URI</abbr> of the page (if any) which referred the user agent to the non-conforming page.</p>
+		<p>To implement this technique, an author identifies the URI for the conforming version of the content, for each non-conforming page. When a request for the non-conforming version of a page is received, the server compares the value of the HTTP referer header against the URI of the conforming version to determine whether the link to the non-conforming version came from the conforming version. The non-conforming version is only served if the HTTP referer matches the URI of the non-conforming version. Otherwise, the user is redirected to the conforming version of the content. Note that when comparing the URI in the HTTP referer header, non-relevant variations in the URI, such as in the query and target, should be taken into account.</p>
+   </section>
+   <section id="examples">
+      <h2>Examples</h2>
       <section class="example">
          <h3>Interactive demonstrations of physical processes</h3>
-         
-            <p>An online physics course uses a proprietary modeling language to provide interactive demonstrations of physical processes. The user agent for the modeling language is not compatible with assistive technology. The site includes a script that uses the HTTP referer to ensure that unless users attempt to access the interactive demonstration from a page that contains a conforming description of the process and models, the server redirects the request to a conforming page which contains a link to the non-conforming version. Students may choose to access the non-conforming, interactive version, but those who do not are still able to learn about the process.</p>
-         
+         <p>An online physics course uses a proprietary modeling language to provide interactive demonstrations of physical processes. The user agent for the modeling language is not compatible with assistive technology. The site includes a script that uses the HTTP referer to ensure that unless users attempt to access the interactive demonstration from a page that contains a conforming description of the process and models, the server redirects the request to a conforming page which contains a link to the non-conforming version. Students may choose to access the non-conforming, interactive version, but those who do not are still able to learn about the process.</p>  
       </section>
       <section class="example">
-         <h3>Using Http referer in PHP</h3>
-         
-            <p>The following example illustrates how this technique can be used in PHP. It includes two files, conforming.php and non-conforming.php which work together to ensure that the only way to access non-conforming content is from conforming content.</p>
-            <p>conforming.php:</p>
-         
-         <pre xml:space="preserve">
-&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
-	"https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
-&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
-	&lt;head&gt;
-    		&lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /&gt;
-    		&lt;title&gt;Conforming Content&lt;/title&gt;
-    	&lt;/head&gt;
-	&lt;body&gt;
-		&lt;h1&gt;This is a conforming page&lt;/h1&gt;
-		&lt;p&gt;From here, you can visit the &lt;a href="non-conforming.php"&gt;non-conforming 
-		page&lt;/a&gt;. &lt;/p&gt;
-	&lt;/body&gt;
-&lt;/html&gt;
-    				</pre>
+         <h3>Using HTTP referer in PHP</h3>
+				 <p>The following example illustrates how this technique can be used in PHP. It includes two files, conforming.php and non-conforming.php which work together to ensure that the only way to access non-conforming content is from conforming content.</p>
+            
+             <section id="conforming-php">
+               <h4>Conforming PHP</h4>
+<pre xml:space="preserve"><code class="language-html">&lt;!DOCTYPE html&gt;
+&lt;html lang="en"&gt;
+&lt;head&gt;
+  &lt;meta charset="utf-8"&gt;
+  &lt;title&gt;Conforming Content&lt;/title&gt;
+&lt;/head&gt;
+&lt;body&gt;
+  &lt;h1&gt;This is a conforming page&lt;/h1&gt;
+  &lt;p&gt;From here, you can visit the &lt;a href="non-conforming.php"&gt;non-conforming 
+    page&lt;/a&gt;.&lt;/p&gt;
+&lt;/body&gt;
+&lt;/html&gt;</code></pre>
+            </section>
+
+            <section id="non-conforming-php">
          
-            <p>non-conforming.php:</p>
+               <h4>Non-conforming PHP</h4>
          
-         <pre xml:space="preserve">
-&lt;?php 
-// if the request comes from a file that contains the string "conforming.php" then render the page
-	if(stristr($_SERVER['HTTP_REFERER'], "conforming.php")) {
-?&gt;
-
-&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
-	"https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
-&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
-	&lt;head&gt;
-		&lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /&gt;
-		&lt;title&gt;Non-Conforming Content&lt;/title&gt;
-	&lt;/head&gt;
-	&lt;body&gt;
-		&lt;h1&gt;This is a non-conforming page&lt;/h1&gt;
-		&lt;p&gt;Because you came from &lt;?php echo $_SERVER['HTTP_REFERER']; ?&gt;, you are 
-			able to view the content on this page. &lt;/p&gt;
-	&lt;/body&gt;
+<pre xml:space="preserve"><code class="language-php">&lt;?php 
+// if the request comes from a file that contains the string "conforming.php" 
+// then render the page
+  if(stristr($_SERVER['HTTP_REFERER'], "conforming.php")) {
+?&gt;	
+&lt;!DOCTYPE html&gt;
+&lt;html lang="en"&gt;
+&lt;head&gt;
+  &lt;meta charset="utf-8"&gt;
+  &lt;title&gt;Non-Conforming Content&lt;/title&gt;
+&lt;/head&gt;
+&lt;body&gt;
+  &lt;h1&gt;This is a non-conforming page&lt;/h1&gt;
+  &lt;p&gt;Because you came from &lt;?php echo $_SERVER['HTTP_REFERER']; ?&gt;, 
+   you are able to view the content on this page.&lt;/p&gt;
+&lt;/body&gt;
 &lt;/html&gt;
 &lt;?php
-}
-// if the referring page is not conforming.php, then redirect the user to the conforming version
+ }
+// if the referring page is not conforming.php, then redirect the user to 
+// the conforming version
 else  {
 header("Location: conforming.php");
 }
-?&gt;					
-    				</pre>
+?&gt;</code></pre>
+            </section>
          
-            <p class="working-example">A working example, <a href="../../working-examples/server-referrer-access-nonconforming/non-conforming.php">Conforming content</a>, is available.</p>
+<p class="working-example">A working example, <a href="../../working-examples/server-referrer-access-nonconforming/non-conforming.php">Conforming content</a>, is available.</p>
          
       </section>
    </section><section id="tests"><h2>Tests</h2>
@@ -83,15 +96,22 @@ <h3>Using Http referer in PHP</h3>
             </li>
          </ol>
       </section>
-      <section class="results"><h3>Expected Results</h3>
+      <section class="results">
+				<h3>Expected Results</h3>
          <ul>
             <li>Check #3.1 or #3.2 is true.</li>
          </ul>
       </section>
-   </section><section id="related"><h2>Related Techniques</h2><ul>
-      <li><a href="../general/G136">G136</a></li>
-      <li><a href="../general/G190">G190</a></li>
-      <li><a href="../server-side-script/SVR2">SVR2</a></li>
-      <li><a href="../server-side-script/SVR4">SVR4</a></li>
-      <li><a href="../css/C29">C29</a></li>
-   </ul></section></body></html>
\ No newline at end of file
+		</section>
+		<section id="related">
+			<h2>Related Techniques</h2>
+			<ul>
+	      <li><a href="../general/G136">G136</a></li>
+	      <li><a href="../general/G190">G190</a></li>
+ 	     <li><a href="../server-side-script/SVR2">SVR2</a></li>
+ 	     <li><a href="../server-side-script/SVR4">SVR4</a></li>
+ 	     <li><a href="../css/C29">C29</a></li>
+			</ul>
+		</section>
+	</body>
+	</html>
diff --git a/techniques/server-side-script/SVR4.html b/techniques/server-side-script/SVR4.html
index c409c8a663..8b67a75e75 100644
--- a/techniques/server-side-script/SVR4.html
+++ b/techniques/server-side-script/SVR4.html
@@ -1,93 +1,122 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Allowing users to provide preferences for the display of conforming alternate versions</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Allowing users to provide preferences for the display of conforming alternate versions</h1><section class="meta"><p class="id">ID: SVR4</p><p class="technology">Technology: server-side-script</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
-      <p>Content created using server-side scripting to store preferences.</p>
-   </section><section id="description"><h2>Description</h2>
-      <p>The objective of this technique is to provide a mechanism for users to select a preference for an alternate conforming version of a Web page.</p>
-      <p>Providing preferences to allow users to view conforming alternate versions can be accomplished in several ways. One common method is to provide a link which triggers a server-side process that sets a session or persistent cookie that the Web server uses to modify the page or redirect the user to the alternate version. Other methods include providing user-specific choices that are stored as part of the user's login information for a system where users sign in to access a Web page or service. </p>
-      <p>Users requiring an alternate version will need the mechanism provided in the non-conforming page to be accessible in order to find and use it. The mechanism itself should conform to the accessibility level being claimed. </p>
-   </section><section id="examples"><h2>Examples</h2>
-      <section class="example">
-         <h3>Setting a session or persistent cookie to store a user preference </h3>
-         
-            <p>A Web site offers a link to a "preferences" page on pages within the site. On this page, there is an option to view an alternate version of the site. There may be various aspects of the page that are affected, or the user may be opting to view an entirely alternate version of the site. The preference may be to display a version of the site where video included on the site displays captioning, or it may be offered because the primary site contains accessibility conformance issues that are addressed only via the alternative. </p>
-            <p>A Web page author may choose to handle this preference via a cookie, which may be handled via a server-side scripting language such as PHP.</p>
-            <p>The preferences page may be offered as follows: </p>
-         
-         <pre xml:space="preserve"> &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
-  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
-      &lt;head&gt;
-      &lt;title&gt;Site Preferences&lt;/title&gt;
-  &lt;/head&gt;
-  &lt;body&gt;
-      &lt;h1&gt;Site Preferences&lt;/h1&gt;
-      &lt;form id="form1" name="site_prefs" method="post" action="pref.php"&gt;
-          &lt;fieldset&gt;
-              &lt;legend&gt;Which version of the site do you want to view?&lt;/legend&gt;
-              &lt;input type="radio" name="site_pref" id="site_pref_reg" value="reg" /&gt;
-              &lt;label for="site_pref_reg"&gt;Main version of site&lt;/label&gt;
-              &lt;input type="radio" name="site_pref" id="site_pref_axx" value="axx" /&gt;
-              &lt;label for="site_pref_axx"&gt;Accessibility-conforming version&lt;/label&gt;
-          &lt;/fieldset&gt; 
-      &lt;/form&gt;
-  &lt;/body&gt;
-  &lt;/html&gt;</pre>
-         
-            <p>The form is submitted to the pref.php file for processing. A cookie is set, and in this simple example the user's browser is directed to the site home page.</p>
-            <p>pref.php: </p>
-         
-         <pre xml:space="preserve">&lt;?php
-    if(isset($site_pref)) {
-        setcookie("site_pref",$site_pref, time() + (86400 * 30)); //set for 30 days
-        header("location: http://www.example.com"); //redirects to home page
-    }
-?&gt;
-</pre>
-         
-            <p>The home page starts with code that implements the user's preference. </p>
-            <p>index.php: </p>
-         
-         <pre xml:space="preserve">&lt;?
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>Allowing users to provide preferences for the display of conforming alternate versions</title>
+		<link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+	</head>
+	<body>
+		<h1>Allowing users to provide preferences for the display of conforming alternate versions</h1>
+		<section class="meta">
+			<p class="id">ID: SVR4</p>
+			<p class="technology">Technology: server-side-script</p>
+			<p class="type">Type: Technique</p>
+		</section>
+		<section id="applicability">
+			<h2>When to Use</h2>
+			<p>Content created using server-side scripting to store preferences.</p>
+		</section>
+		<section id="description">
+			<h2>Description</h2>
+			<p>The objective of this technique is to provide a mechanism for users to select a preference for an alternate conforming version of a Web page.</p>
+			<p>Providing preferences to allow users to view conforming alternate versions can be accomplished in several ways. One common method is to provide a link which triggers a server-side process that sets a session or persistent cookie that the Web server uses to modify the page or redirect the user to the alternate version. Other methods include providing user-specific choices that are stored as part of the user's login information for a system where users sign in to access a Web page or service.</p>
+			<p>Users requiring an alternate version will need the mechanism provided in the non-conforming page to be accessible in order to find and use it. The mechanism itself should conform to the accessibility level being claimed.</p>
+		</section>
+		<section id="examples">
+			<h2>Examples</h2>
+			<section class="example">
+				<h3>Setting a session or persistent cookie to store a user preference</h3>
+				<p>A Web site offers a link to a "preferences" page on pages within the site. On this page, there is an option to view an alternate version of the site. There may be various aspects of the page that are affected, or the user may be opting to view an entirely alternate version of the site. The preference may be to display a version of the site where video included on the site displays captioning, or it may be offered because the primary site contains accessibility conformance issues that are addressed only via the alternative.</p>
+				<p>A Web page author may choose to handle this preference via a cookie, which may be handled via a server-side scripting language such as <abbr title="PHP: Hypertext Preprocessor">PHP</abbr>.</p>
+				<p>The preferences page may be offered as follows:</p>
+    
+<pre xml:space="preserve"><code class="language-html">&lt;!DOCTYPE html&gt;
+&lt;html lang="en"&gt;
+&lt;head&gt;
+  &lt;title&gt;Site Preferences&lt;/title&gt;
+&lt;/head&gt;
+&lt;body&gt;
+  &lt;h1&gt;Site Preferences&lt;/h1&gt;
+  &lt;form id="form1" name="site_prefs" method="post" action="pref.php"&gt;
+    &lt;fieldset&gt;
+      &lt;legend&gt;Which version of the site do you want to view?&lt;/legend&gt;
+      &lt;input type="radio" name="site_pref" id="site_pref_reg" value="reg"&gt;
+      &lt;label for="site_pref_reg"&gt;Main version of site&lt;/label&gt;
+      &lt;input type="radio" name="site_pref" id="site_pref_axx" value="axx"&gt;
+      &lt;label for="site_pref_axx"&gt;Accessibility-conforming version&lt;/label&gt;
+    &lt;/fieldset&gt; 
+  &lt;/form&gt;
+&lt;/body&gt;
+&lt;/html&gt;</code></pre>
+   
+   <p>The form is submitted to the pref.php file for processing. A cookie is set, and in this simple example the user's browser is directed to the site home page.</p>
+   <section id="pref">
+		<h4>pref.php</h4>
+   
+<pre xml:space="preserve"><code class="language-php">&lt;?php
 if(isset($site_pref)) {
-	if($site_pref="axx") {
-	header("location: ./accessible/index.php");
+setcookie("site_pref",$site_pref, time() + (86400 * 30)); //set for 30 days
+header("location: http://www.example.com"); //redirects to home page
 }
+?&gt;</code></pre>
+	</section>
+
+<p>The home page starts with code that implements the user's preference. </p>
+
+	<section id="index">
+		<h4>index.php</h4>
+
+<pre xml:space="preserve"><code class="language-php">&lt;?
+if(isset($site_pref)) {
+  if($site_pref="axx") {
+    header("location: ./accessible/index.php");
+  }
 ?&gt;
-&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
-&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
+&lt;!DOCTYPE html&gt;
+&lt;html lang="en"&gt;
 &lt;head&gt;
-...
-</pre>
-         
-            <p>For a login-based system, the preference is stored in the user's database record and referred to by the server-side script generating the pages for the user to view. </p>
-         
-      </section>
-   </section><section id="tests"><h2>Tests</h2>
-      <section class="procedure"><h3>Procedure</h3>
-         <ol>
-            <li>Change a preference for how pages on the site are displayed. </li>
-            <li>Check that the preference itself or a link to that page where it can be set can be reached from each non-conforming page. </li>
-            <li>Check that Web pages are displayed according to the selected preference. </li>
-            <li>Check that when the preference(s) are set, the Web page conforms as claimed. </li>
-            <li>Verify that the resulting page is a conforming alternate version for the original page. </li>
-         </ol>
-      </section>
-      <section class="results"><h3>Expected Results</h3>
-         <ul>
-            <li>Checks #2 and #3 are true. </li>
-         </ul>
-      </section>
-   </section><section id="related"><h2>Related Techniques</h2><ul>
-      <li><a href="../general/G136">G136</a></li>
-      <li><a href="../general/G190">G190</a></li>
-      <li><a href="../client-side-script/SCR38">SCR38</a></li>
-      <li><a href="../server-side-script/SVR2">SVR2</a></li>
-      <li><a href="../server-side-script/SVR3">SVR3</a></li>
-      <li><a href="../css/C29">C29</a></li>
-   </ul></section><section id="resources"><h2>Resources</h2>
-      
-         <ul>
-            <li>
-                  <a href="http://php.net/setcookie">Setting and using cookies in PHP</a>
-               </li>
-         </ul>
-      
-   </section></body></html>
\ No newline at end of file
+  ...</code></pre>
+	</section>
+     <p>For a login-based system, the preference is stored in the user's database record and referred to by the server-side script generating the pages for the user to view. </p>
+     
+   </section>
+ </section>
+ <section id="tests">
+	<h2>Tests</h2>
+   <section class="procedure">
+		<h3>Procedure</h3>
+    <ol>
+     <li>Change a preference for how pages on the site are displayed.</li>
+     <li>Check that the preference itself or a link to that page where it can be set can be reached from each non-conforming page.</li>
+     <li>Check that Web pages are displayed according to the selected preference.</li>
+     <li>Check that when the preference(s) are set, the Web page conforms as claimed.</li>
+     <li>Verify that the resulting page is a conforming alternate version for the original page.</li>
+   </ol>
+ </section>
+ <section class="results">
+	<h3>Expected Results</h3>
+	<ul>
+		<li>Checks #2 and #3 are true.</li>
+	</ul>
+ </section>
+ </section>
+ <section id="related">
+	<h2>Related Techniques</h2>
+	<ul>
+		<li><a href="../general/G136">G136</a></li>
+   	<li><a href="../general/G190">G190</a></li>
+   	<li><a href="../client-side-script/SCR38">SCR38</a></li>
+   	<li><a href="../server-side-script/SVR2">SVR2</a></li>
+   	<li><a href="../server-side-script/SVR3">SVR3</a></li>
+   	<li><a href="../css/C29">C29</a></li>
+	</ul>
+</section>
+<section id="resources">
+	<h2>Resources</h2> 
+  <ul>
+   <li>
+     <a href="https://php.net/setcookie">Setting and using cookies in PHP</a>
+   </li>
+	</ul>
+ </section>
+ </body>
+ </html>
\ No newline at end of file
diff --git a/techniques/server-side-script/SVR5.html b/techniques/server-side-script/SVR5.html
index a156bd39e6..9204752695 100644
--- a/techniques/server-side-script/SVR5.html
+++ b/techniques/server-side-script/SVR5.html
@@ -1,62 +1,76 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Specifying the default language in the HTTP header</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Specifying the default language in the HTTP header</h1><section class="meta"><p class="id">ID: SVR5</p><p class="technology">Technology: server-side-script</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
-      <p>Server-side technologies, including server-side scripting languages and server configuration files for setting HTTP headers. </p>
-   </section><section id="description"><h2>Description</h2>
-      <p>The objective of this technique is to provide information on the  primary language or languages in a Web Page, in order to identify the  audience of the content. The Content-Language HTTP header can contain a  list of one or more language codes, which can be used for language  negotiation between a user agent and a server. If the language  preferences in a user agent are set correctly, language negotiation can  help the user to find a language version of the content that suits  his/her preferences. </p>
-      <p>Note that the Content-Language HTTP header does not serve to  identify the language used for processing the content. The content  processing language can be identified by means of other techniques,  such as the attributes lang and xml:lang in markup languages. </p>
-      <p>This technique ensures that the primary language of the  document, as specified for example in the lang or xml:lang attribute,  is listed in the Content-Language HTTP header. </p>
-   </section><section id="examples"><h2>Examples</h2>
-      <section class="example">
-         <h3>Setting content language in Java Servlet and JSP</h3>
-         
-            <p>In Java Servlet or JavaServer Pages (JSP), developers can use response.setHeader("Content-Language", lang), in which "lang" stands for a language tag (for example, "en" for English): </p>
-         
-         <pre xml:space="preserve">…
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>Specifying the default language in the HTTP header</title>
+		<link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+	</head>
+	<body>
+		<h1>Specifying the default language in the <abbr title="HyperText Transfer Protocol">HTTP</abbr> header</h1>
+		<section class="meta">
+			<p class="id">ID: SVR5</p>
+			<p class="technology">Technology: server-side-script</p>
+			<p class="type">Type: Technique</p>
+		</section>
+		<section id="applicability">
+			<h2>When to Use</h2>
+			<p>Server-side technologies, including server-side scripting languages and server configuration files for setting HTTP headers.</p>
+		</section>
+		<section id="description">
+			<h2>Description</h2>
+			<p>The objective of this technique is to provide information on the  primary language or languages in a Web page, in order to identify the  audience of the content. The <code>Content-Language</code> HTTP header can contain a  list of one or more language codes, which can be used for language  negotiation between a user agent and a server. If the language  preferences in a user agent are set correctly, language negotiation can  help the user to find a language version of the content that suits their preferences.</p>
+			<p>Note that the Content-Language HTTP header does not serve to  identify the language used for processing the content. The content  processing language can be identified by means of other techniques, such as the attributes <code class="language-html">lang</code> and <code class="language-xml">xml:lang</code> in markup languages.</p>
+			<p>This technique ensures that the primary language of the  document, as specified for example in the <code class="language-html">lang</code> or <code class="language-xml">xml:lang</code> attribute, is listed in the <code>Content-Language</code> HTTP header.</p>
+		</section>
+		<section id="examples">
+			<h2>Examples</h2>
+			<section class="example">
+				<h3>Setting content language in Java Servlet and <abbr title="Java Server Pages">JSP</abbr></h3>
+				<p>In Java Servlet or JavaServer Pages (JSP), developers can use <code class="language-java">response.setHeader("Content-Language", lang)</code>, in which "lang" stands for a language tag (for example, <code>"en"</code> for English): </p>
+
+<pre xml:space="preserve"><code class="language-java">...
 public void doGet(HttpServletRequest request, HttpServletResponse response)
-    throws ServletException, IOException 
-{
-…
-  response.setHeader("Content-Language", "en");
-  PrintWriter out = response.getWriter();
-…
-}</pre>
-      </section>
-      <section class="example">
-         <h3>Setting content language in PHP</h3>
-         
-            <p>In PHP, developers can send a raw HTTP header with the header method. The following example sets the language to French: </p>
-         
-         <pre xml:space="preserve">&lt;?php  header('Content-language: fr');  …  ?&gt;  </pre>
-      </section>
-   </section><section id="tests"><h2>Tests</h2>
-      <section class="procedure"><h3>Procedure</h3>
-         <ol>
-            <li> Use a Live HTTP Header viewer to find the value of the "Content-Language" header. </li>
-            <li> Check that this value matches the default language of the Web page. </li>
-         </ol>
-      </section>
-      <section class="results"><h3>Expected Results</h3>
-         <ul>
-            <li> Step #2 is true. </li>
-         </ul>
-      </section>
-   </section><section id="related"><h2>Related Techniques</h2><ul>
-      <li><a href="../html/H57">H57</a></li>
-   </ul></section><section id="resources"><h2>Resources</h2>
-      
-         <p> 
-            <a href="https://www.w3.org/International/questions/qa-http-and-lang">W3C Internationalization FAQ: HTTP and meta for language information</a>
-						   </p>
-      
-      
-         <p> 
-            <a href="https://www.w3.org/TR/2014/NOTE-i18n-html-tech-lang-20140603/#metadata">Declaring metadata about the language(s) of the intended audience</a> in Authoring HTML: Language declarations - W3C Working Group Note 3 June 2014. </p>
-      
-      
-         <p> 
-            <a href="https://tools.ietf.org/html/rfc7231#section-3.1.3.2">RFC 7321 3.1.3.2.  Content-Language</a></p>
-      
-      
-         <p> 
-            <a href="http://php.net/manual/en/function.header.php">header</a> in the PHP Manual. </p>
-      
-   </section></body></html>
\ No newline at end of file
+  throws ServletException, IOException {
+   ...
+   response.setHeader("Content-Language", "en");
+   PrintWriter out = response.getWriter();
+   ...
+}</code></pre>
+   </section>
+   <section class="example">
+    <h3>Setting content language in <abbr title="PHP: Hypertext Preprocessor">PHP</abbr></h3>
+    
+    <p>In PHP, developers can send a raw <abbr title="HyperText Transfer Protocol">HTTP</abbr> header with the header method. The following example sets the language to French: </p>
+    
+<pre xml:space="preserve"><code class="language-php">&lt;?php header('Content-language: fr'); ... ?&gt;</code></pre>
+  </section>
+ </section><section id="tests"><h2>Tests</h2>
+   <section class="procedure"><h3>Procedure</h3>
+    <ol>
+     <li>Use a Live HTTP Header viewer to find the value of the <code>Content-Language</code> header. </li>
+     <li>Check that this value matches the default language of the Web page.</li>
+   </ol>
+ </section>
+ <section class="results">
+	<h3>Expected Results</h3>
+  <ul>
+		<li> Step #2 is true.</li>
+ </ul>
+ </section>
+ </section>
+ <section id="related">
+	<h2>Related Techniques</h2>
+	<ul>
+		<li><a href="../html/H57">H57</a></li>
+	</ul>
+</section>
+<section id="resources">
+	<h2>Resources</h2>
+	<ul>
+		<li><a href="https://www.w3.org/International/questions/qa-http-and-lang">W3C Internationalization FAQ: HTTP and meta for language information</a></li>
+		<li><a href="https://www.w3.org/TR/2014/NOTE-i18n-html-tech-lang-20140603/#metadata">Declaring metadata about the language(s) of the intended audience</a> in Authoring HTML: Language declarations - W3C Working Group Note 3 June 2014.</li>
+		<li><a href="https://www.rfc-editor.org/rfc/rfc9110#field.content-language">RFC 9110, 8.5. Content-Language</a></li>
+		<li><a href="https://php.net/manual/en/function.header.php">PHP header</a>.</li>
+	</ul>
+</section>
+</body>
+</html>
\ No newline at end of file
diff --git a/techniques/silverlight/SL19.html b/techniques/silverlight/SL19.html
index 0c57c9628c..74fa115251 100644
--- a/techniques/silverlight/SL19.html
+++ b/techniques/silverlight/SL19.html
@@ -54,9 +54,9 @@ <h3>Applying a long text alternative for an Image with XAML</h3>
    Height="400" Width="600"
    Source="/office.png"
    AutomationProperties.Name="Diagram of standard office layout"
-   AutomationProperties.HelpText=”The standard office layout
+   AutomationProperties.HelpText="The standard office layout
 includes one corner desk unit in the corner farthest from the
-door, and one file cabinet against the same wall as the door.”/&gt;
+door, and one file cabinet against the same wall as the door."/&gt;
 </pre>
          
       </section>
diff --git a/techniques/silverlight/silverlight.11tydata.json b/techniques/silverlight/silverlight.11tydata.json
new file mode 100644
index 0000000000..0b02bf5531
--- /dev/null
+++ b/techniques/silverlight/silverlight.11tydata.json
@@ -0,0 +1,5 @@
+{
+  "obsoleteSince": "20",
+  "obsoleteMessage":
+    "<a href=\"https://learn.microsoft.com/en-us/lifecycle/announcements/silverlight-end-of-support\">Microsoft ended support for Silverlight</a> in 2021, and authors are encouraged to use HTML for accessible web content."
+}
diff --git a/techniques/smil/SM1.html b/techniques/smil/SM1.html
index 2168872f00..735a978ce8 100644
--- a/techniques/smil/SM1.html
+++ b/techniques/smil/SM1.html
@@ -1,98 +1,119 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Adding extended audio description in SMIL 1.0</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Adding extended audio description in SMIL 1.0</h1><section class="meta"><p class="id">ID: SM1</p><p class="technology">Technology: smil</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
-      <p> Applies whenever SMIL 1.0 player is available </p>
-   </section><section id="description"><h2>Description</h2>
-      <p> The purpose of this technique is to allow there to be more audio description than will fit into the gaps in the dialogue of the audio-visual material.</p>
-      <p>With SMIL 1.0 there is no easy way to do this but it can be done by breaking the audio and video files up into a series of files that are played sequentially. Additional audio description is then played while the audio-visual program is frozen. The last frame of the video file is frozen so that it remains on screen while the audio file plays out.</p>
-      <p>The effect is that the video appears to play through from end to end but freezes in places while a longer audio description is provided. It then continues automatically when the audio description is complete.</p>
-      <p>To turn the extended audio description on and off one could use script to switch back and forth between two SMIL scripts, one with and one without the extended audio description lines. Or script could be used to add or remove the extended audio description lines from the SMIL file so that the film clips would just play sequentially.</p>
-      <p>If scripting is not available then two versions of the video could be provided, one with and one without extended audio descriptions.</p>
-   </section><section id="examples"><h2>Examples</h2>
-      <section class="example">
-         <h3>SMIL 1.0 Video with audio descriptions that pause the main media in 4 locations to allow extended audio description</h3>
-         <pre xml:space="preserve">   
-&lt;?xml version="1.0" encoding="UTF-8"?&gt;
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>Adding extended audio description in SMIL 1.0</title>
+		<link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+	</head>
+	<body>
+		<h1>Adding extended audio description in <abbr title="Synchronized Multimedia Integration Language">SMIL</abbr> 1.0</h1>
+		<section class="meta">
+			<p class="id">ID: SM1</p>
+			<p class="technology">Technology: SMIL</p>
+			<p class="type">Type: Technique</p>
+		</section>
+		<section id="applicability">
+			<h2>When to Use</h2>
+      <p>Applies whenever SMIL 1.0 player is available</p>
+   </section>
+	 <section id="description">
+		<h2>Description</h2>
+		<p> The purpose of this technique is to allow there to be more audio description than will fit into the gaps in the dialogue of the audio-visual material.</p>
+		<p>With SMIL 1.0 there is no easy way to do this but it can be done by breaking the audio and video files up into a series of files that are played sequentially. Additional audio description is then played while the audio-visual program is frozen. The last frame of the video file is frozen so that it remains on screen while the audio file plays out.</p>
+		<p>The effect is that the video appears to play through from end to end but freezes in places while a longer audio description is provided. It then continues automatically when the audio description is complete.</p>
+		<p>To turn the extended audio description on and off one could use script to switch back and forth between two SMIL scripts, one with and one without the extended audio description lines. Or script could be used to add or remove the extended audio description lines from the SMIL file so that the film clips would just play sequentially.</p>
+		<p>If scripting is not available then two versions of the video could be provided, one with and one without extended audio descriptions.</p>
+   </section>
+	 <section id="examples">
+		<h2>Examples</h2>
+		<section class="example">
+			<h3>SMIL 1.0 Video with audio descriptions that pause the main media in 4 locations to allow extended audio description</h3>
+<pre xml:space="preserve"><code class="language-xml">&lt;?xml version="1.0" encoding="UTF-8"?&gt;
 &lt;smil xmlns:qt="http://www.apple.com/quicktime/resources/smilextensions" 
-xmlns="https://www.w3.org/TR/REC-smil" qt:time-slider="true"&gt;
+ xmlns="https://www.w3.org/TR/REC-smil" qt:time-slider="true"&gt;
   &lt;head&gt;
     &lt;layout&gt;
       &lt;root-layout background-color="black" height="266" width="320"/&gt;
       &lt;region id="videoregion" background-color="black" top="26" left="0" 
-      height="144" width="320"/&gt;
+       height="144" width="320"/&gt;
     &lt;/layout&gt;
   &lt;/head&gt;
   &lt;body&gt;
-  &lt;par&gt;
-   &lt;seq&gt;
-     &lt;par&gt;
-       &lt;video src="video.rm" region="videoregion" clip-begin="0s" clip-end="5.4" 
-       dur="8.7" fill="freeze" alt="videoalt"/&gt;   
-       &lt;audio src="no1.wav" begin="5.4" alt="audio alt"/&gt;
-     &lt;/par&gt;
-     &lt;par&gt;
-       &lt;video src="video.rm" region="videoregion" clip-begin="5.4" clip-end="24.1" 
-       dur="20.3" fill="freeze" alt="videoalt"/&gt;
-       &lt;audio src="no2.wav" begin="18.7" alt="audio alt"/&gt;
-     &lt;/par&gt;
-     &lt;par&gt;
-       &lt;video src="video.rm" region="videoregion" clip-begin="24.1" clip-end="29.6" 
-       dur="7.7" fill="freeze" alt="videoalt"/&gt;
-       &lt;audio src="no3.wav" begin="5.5" alt="audio alt"/&gt;
-     &lt;/par&gt;
-     &lt;par&gt;
-       &lt;video src="video.rm" region="videoregion" clip-begin="29.6" clip-end="34.5" 
-       dur="5.7" fill="freeze" alt="videoalt"/&gt;
-       &lt;audio src="no4.wav" begin="4.9" alt="audio alt"/&gt;
-     &lt;/par&gt;
-     &lt;par&gt;
-       &lt;video src="video.rm" region="videoregion" clip-begin="77.4" alt="video alt"/&gt;
-     &lt;/par&gt;
-   &lt;/seq&gt;
-  &lt;/par&gt;
-&lt;/body&gt;
-&lt;/smil&gt;
-</pre>
-         
-            <p>The markup above is broken into five &lt;par&gt; segments. In each, there is a &lt;video&gt; and an &lt;audio&gt; tag (the last &lt;par&gt; has no &lt;audio&gt; tag intentionally). The convention with extended audio descriptions is that the main media pauses during the description. The way to make this happen in SMIL 1.0 is to set a "clip-begin" and "clip-end" which dictate the start and end of the video clip, and to set a duration for the clip that is longer than what is defined by the "clip-begin" and "clip-end". The fill="freeze" holds the last frame of the video during the extended description. The &lt;audio&gt; tag has a "<code class="att">begin</code>" attribute with a value that is equal to the "clip-end" value of the preceding &lt;video&gt; tag.</p>
-            <p>To determine the values for "clip-begin," "clip-end", and "dur", find the start and end time of the portion of the video being described, and find out the total length of the extended audio description. The "clip-begin" and "clip-end" define their own values, but the "<code class="att">dur</code>" value is the sum of the length of the extended description and the clip defined by the "clip-begin" and "clip-end". In the first &lt;par&gt;, the video clip starts at 0 seconds, ends at 5.4 seconds, and the description length is 3.3 seconds, so the "<code class="att">dur</code>" value is 5.4s + 3.3s = 8.7s.</p>
+    &lt;par&gt;
+      &lt;seq&gt;
+        &lt;par&gt;
+          &lt;video src="video.rm" region="videoregion" clip-begin="0s" clip-end="5.4" 
+           dur="8.7" fill="freeze" alt="videoalt"/&gt;   
+           &lt;audio src="no1.wav" begin="5.4" alt="audio alt"/&gt;
+        &lt;/par&gt;
+        &lt;par&gt;
+          &lt;video src="video.rm" region="videoregion" clip-begin="5.4" clip-end="24.1" 
+           dur="20.3" fill="freeze" alt="videoalt"/&gt;
+          &lt;audio src="no2.wav" begin="18.7" alt="audio alt"/&gt;
+        &lt;/par&gt;
+        &lt;par&gt;
+          &lt;video src="video.rm" region="videoregion" clip-begin="24.1" clip-end="29.6" 
+           dur="7.7" fill="freeze" alt="videoalt"/&gt;
+          &lt;audio src="no3.wav" begin="5.5" alt="audio alt"/&gt;
+        &lt;/par&gt;
+        &lt;par&gt;
+          &lt;video src="video.rm" region="videoregion" clip-begin="29.6" clip-end="34.5" 
+           dur="5.7" fill="freeze" alt="videoalt"/&gt;
+          &lt;audio src="no4.wav" begin="4.9" alt="audio alt"/&gt;
+        &lt;/par&gt;
+        &lt;par&gt;
+          &lt;video src="video.rm" region="videoregion" clip-begin="77.4" alt="video alt"/&gt;
+        &lt;/par&gt;
+      &lt;/seq&gt;
+    &lt;/par&gt;
+  &lt;/body&gt;
+&lt;/smil&gt;</code></pre>
          
+            <p>The markup above is broken into five <code class="language-xml">par</code> segments. In each, there is a <code class="language-xml">video</code> and an <code class="language-xml">audio</code> tag (the last <code class="language-xml">par</code> has no &lt;audio&gt; tag intentionally). The convention with extended audio descriptions is that the main media pauses during the description. The way to make this happen in SMIL 1.0 is to set a <code class="language-xml">clip-begin</code> and <code class="language-xml">clip-end</code> which dictate the start and end of the video clip, and to set a duration for the clip that is longer than what is defined by the <code class="language-xml">clip-begin</code> and <code class="language-xml">clip-end</code>. The <code class="language-xml">fill="freeze"</code> holds the last frame of the video during the extended description. The <code class="language-xml">audio</code> tag has a <code class="language-xml">begin</code> attribute with a value that is equal to the <code class="language-xml">clip-end</code> value of the preceding <code class="language-xml">video</code> tag.</p>
+            <p>To determine the values for <code class="language-xml">clip-begin</code>, <code class="language-xml">clip-end</code>, and <code class="language-xml">dur</code>, find the start and end time of the portion of the video being described, and find out the total length of the extended audio description. The <code class="language-xml">clip-begin</code> and <code class="language-xml">clip-end</code> define their own values, but the <code class="language-xml">dur</code> value is the sum of the length of the extended description and the clip defined by the <code class="language-xml">clip-begin</code> and <code class="language-xml">clip-end</code>. In the first <code class="language-xml">par</code>, the video clip starts at 0 seconds, ends at 5.4 seconds, and the description length is 3.3 seconds, so the <code class="language-xml">dur</code> value is 5.4s + 3.3s = 8.7s.</p>   
       </section>
-   </section><section id="tests"><h2>Tests</h2>
-      <section class="procedure"><h3>Procedure</h3>
-         <ol>
-            <li> Play file with extended audio descriptions</li>
-            <li> Play file with audio description </li>
-            <li>Check whether video freezes in places and plays extended audio description</li>
+		</section>
+		<section id="tests">
+			<h2>Tests</h2>
+			<section class="procedure">
+				<h3>Procedure</h3>
+				<ol>
+					<li>Play file with extended audio descriptions</li>
+					<li>Play file with audio description </li>
+					<li>Check whether video freezes in places and plays extended audio description</li>
          </ol>
       </section>
-      <section class="results"><h3>Expected Results</h3>
-         <ul>
-            <li> #3 is true </li>
-         </ul>
+      <section class="results">
+				<h3>Expected Results</h3>
+				<ul>
+					<li>#3 is true</li>
+				</ul>
       </section>
-   </section><section id="related"><h2>Related Techniques</h2><ul>
+   </section>
+	 <section id="related">
+		<h2>Related Techniques</h2>
+		<ul>
       <li><a href="../smil/SM2">SM2</a></li>
       <li><a href="../smil/SM6">SM6</a></li>
       <li><a href="../general/G81">G81</a></li>
       <li><a href="../smil/SM11">SM11</a></li>
-   </ul></section><section id="resources"><h2>Resources</h2>
-      
-         <ul>
-            <li> 
-                  <a href="https://www.w3.org/TR/REC-smil/">Synchronized
-                                        Multimedia Integration Language (SMIL) 1.0</a>
-								       </li>
-            <li> 
-                  <a href="https://www.w3.org/TR/SMIL/">Synchronized Multimedia
-                                        Integration Language (SMIL 2.0)</a>
-								       </li>
-            <li> 
-                  <a href="https://www.w3.org/TR/SMIL-access/">Accessibility
-                                        Features of SMIL</a>
-								       </li>
-            <li> 
-                  <a href="http://ncam.wgbh.org/invent_build/web_multimedia/accessible-digital-media-guide/guideline-h-multimedia#techH12">NCAM Rich Media Accessibility, Accessible SMIL
-                                    Templates</a>
-								       </li>
-         </ul>
-      
-   </section></body></html>
\ No newline at end of file
+		</ul>
+	</section>
+	<section id="resources">
+		<h2>Resources</h2>
+		<ul>
+			<li>
+				<a href="https://www.w3.org/TR/REC-smil/">Synchronized Multimedia Integration Language (SMIL) 1.0</a>
+			</li>
+			<li>
+				<a href="https://www.w3.org/TR/SMIL/">Synchronized Multimedia Integration Language (SMIL 2.0)</a>
+			</li>
+			<li>
+				<a href="https://www.w3.org/TR/SMIL3/">Synchronized Multimedia Integration Language (SMIL 3.0)</a>
+			</li>
+			<li>
+				<a href="https://www.w3.org/TR/SMIL-access/">Accessibility Features of SMIL</a>
+			</li>
+		</ul>
+   </section>
+	</body>
+	</html>
\ No newline at end of file
diff --git a/techniques/smil/SM11.html b/techniques/smil/SM11.html
index ef72975cc7..ead547149c 100644
--- a/techniques/smil/SM11.html
+++ b/techniques/smil/SM11.html
@@ -1,147 +1,118 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing captions through synchronized text streams in SMIL 1.0</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Providing captions through synchronized text streams in SMIL 1.0</h1><section class="meta"><p class="id">ID: SM11</p><p class="technology">Technology: smil</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
-      <p> Applies to SMIL 1.0 </p>
-   </section><section id="description"><h2>Description</h2>
-      <p> The objective of this technique is to provide a way for people who are deaf
-                        or otherwise have trouble hearing the dialogue in audio visual material to be
-                        able to view the material. With this technique all of the dialogue and
-                        important sounds are available in a text stream that is displayed in a
-                        caption area. </p>
-      <p> With SMIL 1.0, separate regions can be defined for the video and the
-                        captions. The captions and video playback are synchronized, with the caption
-                        text displayed in one region of the screen, while the corresponding video is
-                        displayed in another region. </p>
-   </section><section id="examples"><h2>Examples</h2>
-      <section class="example">
-         <h3>SMIL 1.0 caption sample for Quickime player</h3>
-         <pre xml:space="preserve"> 
-&lt;?xml version="1.0" encoding="UTF-8"?&gt;
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>Providing captions through synchronized text streams in SMIL 1.0</title>
+		<link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+	</head>
+	<body>
+		<h1>Providing captions through synchronized text streams in <abbr title="Synchronized Multimedia Integration Language">SMIL</abbr> 1.0</h1>
+		<section class="meta">
+			<p class="id">ID: SM11</p>
+			<p class="technology">Technology: smil</p>
+			<p class="type">Type: Technique</p>
+		</section>
+		<section id="applicability">
+			<h2>When to Use</h2>
+      <p>Applies to SMIL 1.0</p>
+		</section>
+		<section id="description">
+			<h2>Description</h2>
+      <p>The objective of this technique is to provide a way for people who are deaf or otherwise have trouble hearing the dialogue in audio visual material to be able to view the material. With this technique all of the dialogue and important sounds are available in a text stream that is displayed in a caption area.</p>
+      <p> With SMIL 1.0, separate regions can be defined for the video and the captions. The captions and video playback are synchronized, with the caption text displayed in one region of the screen, while the corresponding video is displayed in another region.</p>
+   </section>
+	 <section id="examples">
+		<h2>Examples</h2>
+		<section class="example">
+			<h3>SMIL 1.0 caption sample for QuickTime player</h3>
+<pre xml:space="preserve"><code class="language-xml">&lt;?xml version="1.0" encoding="UTF-8"?&gt;
 &lt;smil xmlns:qt="http://www.apple.com/quicktime/resources/smilextensions" 
-  xmlns="https://www.w3.org/TR/REC-smil" qt:time-slider="true"&gt;
-  &lt;head&gt;
-    &lt;layout&gt;
-      &lt;root-layout width="320" height="300" background-color="black"/&gt;
-      &lt;region top="0" width="320" height="240" left="0" background-color="black" 
-      id="videoregion"/&gt;
-      &lt;region top="240" width="320" height="60" left="0" background-color="black" 
-      id="textregion"/&gt;
-    &lt;/layout&gt;
-  &lt;/head&gt;
-  &lt;body&gt;
-    &lt;par&gt;
-      &lt;video dur="0:01:20.00" region="videoregion" src="salesdemo.mov" 
-      alt="Sales Demo"/&gt;
-      &lt;textstream dur="0:01:20.00" region="textregion" src="salesdemo_cc.txt" 
-      alt="Sales Demo Captions"/&gt;
-    &lt;/par&gt;
-  &lt;/body&gt;
-&lt;/smil&gt; </pre>
+     xmlns="https://www.w3.org/TR/REC-smil" qt:time-slider="true"&gt;
+&lt;head&gt;
+  &lt;layout&gt;
+    &lt;root-layout width="320" height="300" background-color="black"/&gt;
+    &lt;region top="0" width="320" height="240" left="0" background-color="black" 
+     id="videoregion"/&gt;
+    &lt;region top="240" width="320" height="60" left="0" background-color="black" 
+     id="textregion"/&gt;
+  &lt;/layout&gt;
+&lt;/head&gt;
+&lt;body&gt;
+  &lt;par&gt;
+    &lt;video dur="0:01:20.00" region="videoregion" src="salesdemo.mov" 
+     alt="Sales Demo"/&gt;
+    &lt;textstream dur="0:01:20.00" region="textregion" src="salesdemo_cc.txt" 
+     alt="Sales Demo Captions"/&gt;
+  &lt;/par&gt;
+&lt;/body&gt;
+&lt;/smil&gt;</code></pre>
       </section>
-      <section class="example">
-         <h3>SMIL 1.0 caption sample for RealMedia player</h3>
-         <pre xml:space="preserve"> 
-&lt;?xml version="1.0" encoding="UTF-8"?&gt;
+			<section class="example">
+				<h3>SMIL 1.0 caption sample with internal text streams </h3>
+<pre xml:space="preserve"><code class="language-xml">&lt;?xml version="1.0" encoding="UTF-8"?&gt;
 &lt;smil xmlns="https://www.w3.org/TR/REC-smil"&gt;
-  &lt;head&gt;
-    &lt;layout&gt;
-      &lt;root-layout background-color="black" height="310" width="330"/&gt;
-      &lt;region id="video" background-color="black" top="5" left="5" 
-      height="240" width="320"/&gt;
-      &lt;region id="captions" background-color="black" top="250" 
-      height="60" left="5" width="320"/&gt;
-    &lt;/layout&gt;
-  &lt;/head&gt;
-  &lt;body&gt;
-    &lt;par&gt;
-      &lt;video src="salesdemo.mpg" region="video" title="Sales Demo" 
-      alt="Sales Demo"/&gt;
-      &lt;textstream src="salesdemo_cc.rt" region="captions" 
-      system-captions="on" title="captions" 
-      alt="Sales Demo Captions"/&gt;
-    &lt;/par&gt;
-  &lt;/body&gt;
-&lt;/smil&gt;</pre>
-         
-            <p> The example shows a &lt;par&gt; segment
-                                containing a &lt;video&gt; and a
-        &lt;code&gt;&lt;![CDATA[&lt;textstream&gt; tag. The system-captions attribute indicates that the
-                                textstream should be displayed when the user's player setting for
-                                captions indicates the preference for captions to be displayed. The
-                                    &lt;layout&gt; section defines the regions
-                                used for the video and the captions. </p>
-         
+&lt;head&gt;
+  &lt;layout&gt;
+    &lt;root-layout background-color="black" height="310" width="330"/&gt;
+    &lt;region id="video" background-color="black" top="5" left="5" 
+     height="240" width="320"/&gt;
+    &lt;region id="captions" background-color="black" top="250" 
+     height="60" left="5" width="320"/&gt;
+  &lt;/layout&gt;
+&lt;/head&gt;
+&lt;body&gt;
+  &lt;par&gt;
+    &lt;video src="salesdemo.mpg" region="video" title="Sales Demo" 
+     alt="Sales Demo"/&gt;
+    &lt;text src="data:,This%20is%20inline%20text." region="captions" begin="0s" 
+     dur="3" alt="Sales Demo Captions"&gt;
+      &lt;param name="charset" value="iso-8859-1"/&gt;
+      &lt;param name="fontFace" value="System"/&gt;
+      &lt;param name="fontColor" value="yellow"/&gt;
+      &lt;param name="backgroundColor" value="blue"/&gt;
+    &lt;/text&gt;
+  &lt;/par&gt;
+&lt;/body&gt;
+&lt;/smil&gt;</code></pre>
+    
+		<p> This example shows a <code class="language-xml">text</code> element that includes synchronized text streams within the SMIL file.</p>
       </section>
-      <section class="example">
-         <h3>SMIL 1.0 caption sample with internal text streams </h3>
-         <pre xml:space="preserve">
-&lt;?xml version="1.0" encoding="UTF-8"?&gt;
-&lt;smil xmlns="https://www.w3.org/TR/REC-smil"&gt;
-  &lt;head&gt;
-    &lt;layout&gt;
-      &lt;root-layout background-color="black" height="310" width="330"/&gt;
-      &lt;region id="video" background-color="black" top="5" left="5" 
-      height="240" width="320"/&gt;
-      &lt;region id="captions" background-color="black" top="250" 
-      height="60" left="5" width="320"/&gt;
-    &lt;/layout&gt;
-  &lt;/head&gt;
-  &lt;body&gt;
-    &lt;par&gt;
-      &lt;video src="salesdemo.mpg" region="video" title="Sales Demo" 
-      alt="Sales Demo"/&gt;
-      &lt;text src="data:,This%20is%20inline%20text." region="captions" begin="0s" 
-      dur="3" alt="Sales Demo Captions"&gt;
-        &lt;param name="charset" value="iso-8859-1"/&gt;
-        &lt;param name="fontFace" value="System"/&gt;
-        &lt;param name="fontColor" value="yellow"/&gt;
-        &lt;param name="backgroundColor" value="blue"/&gt;
-      &lt;/text&gt;
-    &lt;/par&gt;
-  &lt;/body&gt;
-&lt;/smil&gt;
-</pre>
-         
-            <p> This example shows a &lt;text&gt; element that
-                                includes synchronized text streams within the SMIL file. </p>
-         
-      </section>
-   </section><section id="tests"><h2>Tests</h2>
-      <section class="procedure"><h3>Procedure</h3>
-         <ol>
-            <li> Enabled caption preference in player, if present </li>
-            <li> Play file with captions </li>
-            <li> Check whether captions are displayed </li>
+		</section>
+		<section id="tests">
+			<h2>Tests</h2>
+      <section class="procedure">
+				<h3>Procedure</h3>
+				<ol>
+					<li>Enabled caption preference in player, if present</li>
+					<li>Play file with captions</li>
+					<li>Check whether captions are displayed</li>
          </ol>
       </section>
-      <section class="results"><h3>Expected Results</h3>
-         <ul>
-            <li> #3 is true </li>
-         </ul>
-      </section>
-   </section><section id="related"><h2>Related Techniques</h2><ul>
-      <li><a href="../smil/SM12">SM12</a></li>
-   </ul></section><section id="resources"><h2>Resources</h2>
-      
-         <ul>
-            <li> 
-                  <a href="https://www.w3.org/TR/REC-smil/">Synchronized
-                                        Multimedia Integration Language (SMIL) 1.0</a>
-								       </li>
-            <li> 
-                  <a href="https://www.w3.org/TR/SMIL/">Synchronized Multimedia
-                                        Integration Language (SMIL 2.0)</a>
-								       </li>
-            <li> 
-                  <a href="https://www.w3.org/TR/SMIL-access/">Accessibility
-                                        Features of SMIL</a>
-								       </li>
-            <li> 
-                  <a href="http://ncam.wgbh.org/invent_build/web_multimedia/accessible-digital-media-guide/guideline-h-multimedia#techH12">NCAM Rich Media Accessibility, Accessible SMIL
-                                    Templates</a>
-								       </li>
-            
-            <li> 
-                  <a href="https://msdn.microsoft.com/en-us/library/ms971327.aspx">SAMI 1.0</a> 
-               </li>
-         </ul>
-      
-   </section></body></html>
\ No newline at end of file
+      <section class="results">
+				<h3>Expected Results</h3>
+				<ul>
+					<li>#3 is true</li>
+				</ul>
+			</section>
+		</section>
+		<section id="related">
+			<h2>Related Techniques</h2>
+			<ul>
+      	<li><a href="../smil/SM12">SM12</a></li>
+			</ul>
+		</section>
+		<section id="resources">
+			<h2>Resources</h2>
+			<ul>
+				<li>
+					<a href="https://www.w3.org/TR/REC-smil/">Synchronized Multimedia Integration Language (SMIL) 1.0</a>
+				</li>
+				<li>
+					<a href="https://www.w3.org/TR/SMIL/">Synchronized Multimedia Integration Language (SMIL 2.0)</a>
+				</li>
+				<li>
+					<a href="https://www.w3.org/TR/SMIL-access/">Accessibility Features of SMIL</a>
+				</li>
+			</ul>
+		</section>
+	</body>
+	</html>
\ No newline at end of file
diff --git a/techniques/smil/SM12.html b/techniques/smil/SM12.html
index a770d0d1c8..80c3d38702 100644
--- a/techniques/smil/SM12.html
+++ b/techniques/smil/SM12.html
@@ -1,127 +1,101 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing captions through synchronized text streams in SMIL 2.0</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Providing captions through synchronized text streams in SMIL 2.0</h1><section class="meta"><p class="id">ID: SM12</p><p class="technology">Technology: smil</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
-      <p> Applies to SMIL 2.0 </p>
-   </section><section id="description"><h2>Description</h2>
-      <p>The objective of this technique is to provide a way for people who are deaf
-                        or otherwise have trouble hearing the dialogue in audio visual material to be
-                        able to view the material. With this technique all of the dialogue and
-                        important sounds are available in a text stream that is displayed in a
-                        caption area.</p>
-      <p> With SMIL 2.0, separate regions can be defined for the video and the
-                        captions. The captions and video playback are synchronized, with the caption
-                        text displayed in one region of the screen, and the corresponding video
-                        displayed in another region. </p>
-   </section><section id="examples"><h2>Examples</h2>
-      <section class="example">
-         <h3>SMIL 2.0 caption sample for RealMedia player</h3>
-         <pre xml:space="preserve">
-&lt;?xml version="1.0" encoding="UTF-8"?&gt;
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+		<title>Providing captions through synchronized text streams in SMIL 2.0</title>
+		<link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+	</head>
+	<body>
+		<h1>Providing captions through synchronized text streams in <abbr title="Synchronized Multimedia Integration Language">SMIL</abbr> 2.0</h1>
+		<section class="meta">
+			<p class="id">ID: SM12</p>
+			<p class="technology">Technology: smil</p>
+			<p class="type">Type: Technique</p>
+		</section>
+		<section id="applicability">
+			<h2>When to Use</h2>
+      <p>Applies to SMIL 2.0</p>
+		</section>
+		<section id="description">
+			<h2>Description</h2>
+      <p>The objective of this technique is to provide a way for people who are deaf or otherwise have trouble hearing the dialogue in audio visual material to be able to view the material. With this technique all of the dialogue and important sounds are available in a text stream that is displayed in a caption area.</p>
+      <p>With SMIL 2.0, separate regions can be defined for the video and the captions. The captions and video playback are synchronized, with the caption text displayed in one region of the screen, and the corresponding video displayed in another region.</p>
+   </section>
+	 <section id="examples">
+		<h2>Examples</h2>
+		<section class="example">
+			<h3>SMIL 2.0 caption sample with internal text streams for RealMedia player</h3>
+<pre xml:space="preserve"><code class="language-xml">&lt;?xml version="1.0" encoding="UTF-8"?&gt;
 &lt;smil xmlns="https://www.w3.org/2001/SMIL20/Language"&gt;
-  &lt;head&gt;
-    &lt;layout&gt;
-      &lt;root-layout backgroundColor="black" height="310" width="330"/&gt;
-      &lt;region id="video" backgroundColor="black" top="5" left="5" 
-      height="240" width="320"/&gt;
-      &lt;region id="captions" backgroundColor="black" top="250" 
-      height="60" left="5" width="320"/&gt;
-    &lt;/layout&gt;
-  &lt;/head&gt;
-  &lt;body&gt;
-    &lt;par&gt;
-      &lt;video src="salesdemo.mpg" region="video" title="Sales Demo"
-      alt="Sales Demo"/&gt;
-      &lt;textstream src="salesdemo_cc.rt" region="captions" systemCaptions="on" 
-      title="captions" alt="Sales Demo Captions"/&gt;
-    &lt;/par&gt;
-  &lt;/body&gt;
-&lt;/smil&gt;
-</pre>
-         
-            <p> The example shows a &lt;par&gt; segment
-                                containing a &lt;video&gt; and a
-                                    &lt;textstream&gt; tag. The systemCaptions
-                                attribute indicates that the textstream should be displayed when the
-                                user's player setting for captions indicates the preference for
-                                captions to be displayed. The &lt;layout&gt;
-                                section defines the regions used for the video and the captions.
-                            </p>
-         
-      </section>
-      <section class="example">
-         <h3>SMIL 2.0 caption sample with internal text streams for
-                            RealMedia player</h3>
-         <pre xml:space="preserve"> 
-&lt;?xml version="1.0" encoding="UTF-8"?&gt;
-&lt;smil xmlns="https://www.w3.org/2001/SMIL20/Language"&gt;
-  &lt;head&gt;
-    &lt;layout&gt;
-      &lt;root-layout backgroundColor="black" height="310" width="330"/&gt;
-      &lt;region id="video" backgroundColor="black" top="5" left="5" 
-      height="240" width="320"/&gt;
-      &lt;region id="captions" backgroundColor="black" top="250" 
-      height="60" left="5" width="320"/&gt;
-    &lt;/layout&gt;
-  &lt;/head&gt;
-  &lt;body&gt;
-    &lt;par&gt;
-      &lt;video src="salesdemo.mpg" region="video" title="Sales Demo" 
-      alt="Sales Demo"/&gt;
-      &lt;text src="data:,This%20is%20inline%20text." region="captions" 
-      begin="0s" dur="3"&gt;
-        &lt;param name="charset" value="iso-8859-1"/&gt;
-        &lt;param name="fontFace" value="System"/&gt;
-        &lt;param name="fontColor" value="yellow"/&gt;
-        &lt;param name="backgroundColor" value="blue"/&gt;
-      &lt;/text&gt;
-      &lt;text src="data:,This%20is%20a%20second%20text." 
-      region="captions" begin="3s" dur="3"&gt;
-        &lt;param name="charset" value="iso-8859-1"/&gt;
-        &lt;param name="fontFace" value="System"/&gt;
-        &lt;param name="fontColor" value="yellow"/&gt;
-        &lt;param name="backgroundColor" value="blue"/&gt;
-      &lt;/text&gt;
-    &lt;/par&gt;
-  &lt;/body&gt;
-&lt;/smil&gt;
-</pre>
-         
-            <p>This example shows a &lt;text&gt; element that
-                                includes synchronized text streams within the SMIL file.</p>
+&lt;head&gt;
+  &lt;layout&gt;
+    &lt;root-layout backgroundColor="black" height="310" width="330"/&gt;
+    &lt;region id="video" backgroundColor="black" top="5" left="5" 
+     height="240" width="320"/&gt;
+    &lt;region id="captions" backgroundColor="black" top="250" 
+     height="60" left="5" width="320"/&gt;
+  &lt;/layout&gt;
+&lt;/head&gt;
+&lt;body&gt;
+  &lt;par&gt;
+    &lt;video src="salesdemo.mpg" region="video" title="Sales Demo" 
+     alt="Sales Demo"/&gt;
+    &lt;text src="data:,This%20is%20inline%20text." region="captions" 
+     begin="0s" dur="3"&gt;
+      &lt;param name="charset" value="iso-8859-1"/&gt;
+      &lt;param name="fontFace" value="System"/&gt;
+      &lt;param name="fontColor" value="yellow"/&gt;
+      &lt;param name="backgroundColor" value="blue"/&gt;
+    &lt;/text&gt;
+    &lt;text src="data:,This%20is%20a%20second%20text." 
+     region="captions" begin="3s" dur="3"&gt;
+      &lt;param name="charset" value="iso-8859-1"/&gt;
+      &lt;param name="fontFace" value="System"/&gt;
+      &lt;param name="fontColor" value="yellow"/&gt;
+      &lt;param name="backgroundColor" value="blue"/&gt;
+    &lt;/text&gt;
+  &lt;/par&gt;
+&lt;/body&gt;
+&lt;/smil&gt;</code></pre>
          
+			<p>This example shows a <code class="language-xml">text</code> element that includes synchronized text streams within the SMIL file.</p>
       </section>
-   </section><section id="tests"><h2>Tests</h2>
-      <section class="procedure"><h3>Procedure</h3>
+		</section>
+		<section id="tests">
+			<h2>Tests</h2>
+      <section class="procedure">
+				<h3>Procedure</h3>
          <ol>
-            <li> Enabled caption preference in player, if present </li>
-            <li> Play file with captions </li>
-            <li> Check whether captions are displayed </li>
+            <li>Enabled caption preference in player, if present</li>
+            <li>Play file with captions</li>
+            <li>Check whether captions are displayed</li>
          </ol>
       </section>
-      <section class="results"><h3>Expected Results</h3>
-         <ul>
-            <li> #3 is true </li>
-         </ul>
-      </section>
-   </section><section id="related"><h2>Related Techniques</h2><ul>
-      <li><a href="../smil/SM11">SM11</a></li>
-   </ul></section><section id="resources"><h2>Resources</h2>
-      
-         <ul>
-            <li> 
-                  <a href="https://www.w3.org/TR/SMIL/">Synchronized Multimedia
-                                        Integration Language (SMIL 2.0)</a>
-								       </li>
-            <li> 
-                  <a href="https://www.w3.org/TR/SMIL-access/">Accessibility
-                                        Features of SMIL</a>
-								       </li>
-            <li> 
-                  <a href="http://ncam.wgbh.org/invent_build/web_multimedia/accessible-digital-media-guide/guideline-h-multimedia#techH12">NCAM Rich Media Accessibility, Accessible SMIL
-                                    Templates</a>
-								       </li>
-            
-            <li> 
-                  <a href="https://msdn.microsoft.com/en-us/library/ms971327.aspx">SAMI 1.0</a> 
-               </li>
-         </ul>
-      
-   </section></body></html>
\ No newline at end of file
+      <section class="results">
+				<h3>Expected Results</h3>
+				<ul>
+					<li>#3 is true</li>
+				</ul>
+			</section>
+		</section>
+		<section id="related">
+			<h2>Related Techniques</h2>
+			<ul>
+      	<li><a href="../smil/SM11">SM11</a></li>
+			</ul>
+		</section>
+		<section id="resources">
+			<h2>Resources</h2>
+			<ul>
+				<li>
+					<a href="https://www.w3.org/TR/SMIL/">Synchronized Multimedia Integration Language (SMIL 2.0)</a>
+				</li>
+				<li>
+					<a href="https://www.w3.org/TR/SMIL3/">Synchronized Multimedia Integration Language (SMIL 3.0)</a>
+				</li>				
+        <li>
+					<a href="https://www.w3.org/TR/SMIL-access/">Accessibility Features of SMIL</a>
+				</li>
+			</ul>
+		</section>
+	</body>
+	</html>
\ No newline at end of file
diff --git a/techniques/smil/SM13.html b/techniques/smil/SM13.html
index 11b9e6b740..f94bc7c130 100644
--- a/techniques/smil/SM13.html
+++ b/techniques/smil/SM13.html
@@ -1,109 +1,95 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing sign language interpretation through synchronized video
-                    streams in SMIL 1.0</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Providing sign language interpretation through synchronized video
-                    streams in SMIL 1.0</h1><section class="meta"><p class="id">ID: SM13</p><p class="technology">Technology: smil</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
-      <p> Applies whenever SMIL 1.0 player is available </p>
-   </section><section id="description"><h2>Description</h2>
-      <p>The objective of this technique is to provide a way for people who are deaf
-                        or otherwise have trouble hearing the dialogue in audio visual material to be
-                        able to view the material. With this technique all of the dialogue and
-                        important sounds are available in a sign-language interpretation video that
-                        is displayed in a caption area. </p>
-      <p> With SMIL 1.0, separate regions can be defined for the two videos. The two
-                        video playbacks are synchronized, with the content video displayed in one
-                        region of the screen, while the corresponding sign-language interpretation
-                        video is displayed in another region. </p>
-   </section><section id="examples"><h2>Examples</h2>
-      <section class="example">
-         <h3>SMIL 1.0 sign-language interpretation sample for QuickTime
-                            player </h3>
-         <pre xml:space="preserve"> 
-&lt;?xml version="1.0" encoding="UTF-8"?&gt;
-&lt;smil xmlns:qt="http://www.apple.com/quicktime/resources/smilextensions" 
-  xmlns="https://www.w3.org/TR/REC-smil" qt:time-slider="true"&gt;
-  &lt;head&gt;
-    &lt;layout&gt;
-      &lt;root-layout width="320" height="300" background-color="black"/&gt;
-      &lt;region top="0" width="320" height="240" left="0" background-color="black" 
-      id="videoregion"/&gt;
-      &lt;region top="240" width="320" height="60" left="0" background-color="black" 
-      id="signingregion"/&gt;
-    &lt;/layout&gt;
-  &lt;/head&gt;
-  &lt;body&gt;
-    &lt;par&gt;
-      &lt;video dur="0:01:20.00" region="videoregion" src="salesdemo.mov" 
-      alt="Sales Demo"/&gt;
-      &lt;video dur="0:01:20.00" region="signingregion" system-captions="on" 
-      src="salesdemo_si.mov" alt="Sales Demo Sign Language Interpretation"/&gt;
-    &lt;/par&gt;
-  &lt;/body&gt;
-&lt;/smil&gt;</pre>
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+   <head>
+      <title>Providing sign language interpretation through synchronized video streams in SMIL 1.0</title>
+      <link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+   </head>
+   <body>
+      <h1>Providing sign language interpretation through synchronized video streams in <abbr title="Synchronized Multimedia Integration Language">SMIL</abbr> 1.0</h1>
+      <section class="meta">
+         <p class="id">ID: SM13</p>
+         <p class="technology">Technology: smil</p>
+         <p class="type">Type: Technique</p>
       </section>
-      <section class="example">
-         <h3>SMIL 1.0 sign-language sample for RealMedia player:</h3>
-         <pre xml:space="preserve"> 
-&lt;?xml version="1.0" encoding="UTF-8"?&gt;
-&lt;smil xmlns="https://www.w3.org/TR/REC-smil"&gt;
-  &lt;head&gt;
-    &lt;layout&gt;
-      &lt;root-layout background-color="black" height="310" width="330"/&gt;
-      &lt;region top="0" width="320" height="240" left="0" background-color="black"
-       id="videoregion"/&gt;
-      &lt;region top="240" width="320" height="60" left="0" background-color="black" 
-      id="signingregion"/&gt;
-    &lt;/layout&gt;
-  &lt;/head&gt;
-  &lt;body&gt;
-    &lt;par&gt;
-      &lt;video dur="0:01:20.00" region="videoregion" src="salesdemo.mov" 
-      alt="Sales Demo"/&gt;
-      &lt;video dur="0:01:20.00" region="signingregion" system-captions="on" 
-      src="salesdemo_si.mov" alt="Sales Demo Sign Language Interpretation"/&gt;
-    &lt;/par&gt;
-  &lt;/body&gt;
-&lt;/smil&gt;</pre>
-         
-            <p> The example shows a &lt;par&gt; segment
-                                containing two &lt;video&gt; tags. The
-                                system-captions attribute indicates that the sign language video
-                                should be displayed when the user's player setting for captions
-                                indicates the preference for captions to be displayed. The
-                                    &lt;layout&gt; section defines the regions
-                                used for the main video and the sign language interpretation video.
-                            </p>
-         
+      <section id="applicability">
+         <h2>When to Use</h2>
+         <p>Applies whenever SMIL 1.0 player is available</p>
       </section>
+      <section id="description">
+         <h2>Description</h2>
+         <p>The objective of this technique is to provide a way for people who are deaf
+       or otherwise have trouble hearing the dialogue in audio visual material to be
+       able to view the material. With this technique all of the dialogue and
+       important sounds are available in a sign-language interpretation video that
+     is displayed in a caption area. </p>
+     <p>With SMIL 1.0, separate regions can be defined for the two videos. The two
+       video playbacks are synchronized, with the content video displayed in one
+       region of the screen, while the corresponding sign-language interpretation
+     video is displayed in another region. </p>
+   </section><section id="examples"><h2>Examples</h2>
+     <section class="example">
+      <h3>SMIL 1.0 sign-language interpretation sample for QuickTime
+      player </h3>
+<pre xml:space="preserve"><code class="language-xml">&lt;?xml version="1.0" encoding="UTF-8"?&gt;
+&lt;smil xmlns:qt="http://www.apple.com/quicktime/resources/smilextensions" 
+   xmlns="https://www.w3.org/TR/REC-smil" qt:time-slider="true"&gt;
+&lt;head&gt;
+  &lt;layout&gt;
+    &lt;root-layout width="320" height="300" background-color="black"/&gt;
+    &lt;region top="0" width="320" height="240" left="0" background-color="black" 
+     id="videoregion"/&gt;
+    &lt;region top="240" width="320" height="60" left="0" background-color="black" 
+     id="signingregion"/&gt;
+  &lt;/layout&gt;
+&lt;/head&gt;
+&lt;body&gt;
+  &lt;par&gt;
+    &lt;video dur="0:01:20.00" region="videoregion" src="salesdemo.mov" 
+     alt="Sales Demo"/&gt;
+    &lt;video dur="0:01:20.00" region="signingregion" system-captions="on" 
+     src="salesdemo_si.mov" alt="Sales Demo Sign Language Interpretation"/&gt;
+  &lt;/par&gt;
+&lt;/body&gt;
+&lt;/smil&gt;</code></pre>
+   </section>
    </section><section id="tests"><h2>Tests</h2>
-      <section class="procedure"><h3>Procedure</h3>
-         <ol>
-            <li> Enable control in content or player to turn on sign language
-                                    interpretation (unless it is always shown) </li>
-            <li> Play file with sign-language interpretation </li>
-            <li> Check whether sign language interpretation is displayed </li>
-         </ol>
-      </section>
-      <section class="results"><h3>Expected Results</h3>
-         <ul>
-            <li> #3 is true </li>
-         </ul>
-      </section>
-   </section><section id="related"><h2>Related Techniques</h2><ul>
-      <li><a href="../smil/SM14">SM14</a></li>
-   </ul></section><section id="resources"><h2>Resources</h2>
-      
-         <ul>
-            <li> 
-                  <a href="https://www.w3.org/TR/REC-smil/">Synchronized Multimedia Integration Language (SMIL) 1.0</a>
-								       </li>
-            <li> 
-                  <a href="https://www.w3.org/TR/SMIL/">Synchronized Multimedia Integration Language (SMIL 2.0)</a>
-								       </li>
-            <li> 
-                  <a href="https://www.w3.org/TR/SMIL-access/">Accessibility Features of SMIL</a> 
-               </li>
-            <li> 
-                  <a href="http://ncam.wgbh.org/invent_build/web_multimedia/accessible-digital-media-guide/guideline-h-multimedia#techH12">NCAM Rich Media Accessibility, Accessible SMIL Templates</a>
-								       </li>
-         </ul>
-      
-   </section></body></html>
\ No newline at end of file
+     <section class="procedure"><h3>Procedure</h3>
+      <ol>
+       <li> Enable control in content or player to turn on sign language
+       interpretation (unless it is always shown) </li>
+       <li> Play file with sign-language interpretation </li>
+       <li> Check whether sign language interpretation is displayed </li>
+     </ol>
+   </section>
+   <section class="results">
+		<h3>Expected Results</h3>
+		<ul>
+			<li>#3 is true</li>
+   </ul>
+   </section>
+   </section>
+	 <section id="related">
+		<h2>Related Techniques</h2>
+		<ul>
+			<li><a href="../smil/SM14">SM14</a></li>
+		</ul>
+	</section>
+	<section id="resources">
+		<h2>Resources</h2> 
+    <ul>
+     <li> 
+       <a href="https://www.w3.org/TR/REC-smil/">Synchronized Multimedia Integration Language (SMIL) 1.0</a>
+     </li>
+     <li> 
+       <a href="https://www.w3.org/TR/SMIL/">Synchronized Multimedia Integration Language (SMIL 2.0)</a>
+     </li>
+		 <li>
+			<a href="https://www.w3.org/TR/SMIL3/">Synchronized Multimedia Integration Language (SMIL 3.0)</a>
+		</li>		 
+     <li> 
+       <a href="https://www.w3.org/TR/SMIL-access/">Accessibility Features of SMIL</a> 
+     </li>
+   </ul>
+	</section>
+</body>
+</html>
\ No newline at end of file
diff --git a/techniques/smil/SM14.html b/techniques/smil/SM14.html
index 61a3b227fd..0092a12cca 100644
--- a/techniques/smil/SM14.html
+++ b/techniques/smil/SM14.html
@@ -1,84 +1,96 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing sign language interpretation through synchronized video
-                    streams in SMIL 2.0</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Providing sign language interpretation through synchronized video
-                    streams in SMIL 2.0</h1><section class="meta"><p class="id">ID: SM14</p><p class="technology">Technology: smil</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
-      <p>SMIL 2.0</p>
-   </section><section id="description"><h2>Description</h2>
-      <p>The objective of this technique is to provide a way for people who are deaf
-                        or otherwise have trouble hearing the dialogue in audio visual material to be
-                        able to view the material. With this technique all of the dialogue and
-                        important sounds are available in a sign-language interpretation video that
-                        is displayed in a caption area. </p>
-      <p> With SMIL 2.0, separate regions can be defined for the two videos. The two
-                        video playbacks are synchronized, with the content video displayed in one
-                        region of the screen, while the corresponding sign-language interpretation
-                        video is displayed in another region. </p>
-   </section><section id="examples"><h2>Examples</h2>
-      <section class="example">
-         <h3>SMIL 2.0 sign-language video sample for RealMedia player</h3>
-         <pre xml:space="preserve">
-&lt;smil xmlns="https://www.w3.org/2001/SMIL20/Language"&gt;
-  &lt;head&gt;
-    &lt;layout&gt;
-      &lt;root-layout backgroundColor="black" height="310" width="330"/&gt;
-      &lt;region id="video" backgroundColor="black" top="5" left="5" 
-      height="240" width="320"/&gt;
-      &lt;region id="signing" backgroundColor="black" top="250" 
-      height="60" left="5" width="320"/&gt;
-    &lt;/layout&gt;
-  &lt;/head&gt;
-  &lt;body&gt;
-    &lt;par&gt;
-      &lt;video src="salesdemo.mpg" region="video" title="Sales Demo" 
-      alt="Sales Demo"/&gt;
-      &lt;video src="salesdemo_signing.mpg" 
-      region="signing" systemCaptions="on" 
-      title="sign language interpretation" 
-      alt="Sales Demo Sign Language Interpretation"/&gt;
-    &lt;/par&gt;
-  &lt;/body&gt;
-&lt;/smil&gt;
-</pre>
-         
-            <p>The example shows a &lt;par&gt; segment containing
-                                two &lt;video&gt; tags. The systemCaptions
-                                attribute indicates that the sign language video should be displayed
-                                when the user's player setting for captions indicates the preference
-                                for captions to be displayed. The &lt;layout&gt;
-                                section defines the regions used for the main video and the sign
-                                language interpretation video. </p>
-         
-      </section>
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head>
+	<title>Providing sign language interpretation through synchronized video
+   streams in SMIL 2.0</title>
+	 <link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+	</head>
+	<body>
+		<h1>Providing sign language interpretation through synchronized video
+   streams in <abbr title="Synchronized Multimedia Integration Language">SMIL</abbr> 2.0</h1>
+	 <section class="meta">
+		<p class="id">ID: SM14</p>
+		<p class="technology">Technology: smil</p>
+		<p class="type">Type: Technique</p>
+	</section>
+	<section id="applicability">
+		<h2>When to Use</h2>
+		<p>SMIL 2.0</p>
+	</section>
+	<section id="description">
+		<h2>Description</h2>
+		<p>The objective of this technique is to provide a way for people who are deaf
+       or otherwise have trouble hearing the dialogue in audio visual material to be
+       able to view the material. With this technique all of the dialogue and
+       important sounds are available in a sign-language interpretation video that
+     is displayed in a caption area.</p>
+     <p>With SMIL 2.0, separate regions can be defined for the two videos. The two
+       video playbacks are synchronized, with the content video displayed in one
+       region of the screen, while the corresponding sign-language interpretation
+     video is displayed in another region.</p>
+   </section>
+	 <section id="examples">
+		<h2>Examples</h2>
+     <section class="example">
+      <h3>SMIL 2.0 sign-language video sample for RealMedia player</h3>
+<pre xml:space="preserve"><code class="language-xml">&lt;smil xmlns="https://www.w3.org/2001/SMIL20/Language"&gt;
+&lt;head&gt;
+  &lt;layout&gt;
+    &lt;root-layout backgroundColor="black" height="310" width="330"/&gt;
+    &lt;region id="video" backgroundColor="black" top="5" left="5" 
+     height="240" width="320"/&gt;
+    &lt;region id="signing" backgroundColor="black" top="250" 
+     height="60" left="5" width="320"/&gt;
+  &lt;/layout&gt;
+&lt;/head&gt;
+&lt;body&gt;
+  &lt;par&gt;
+    &lt;video src="salesdemo.mpg" region="video" title="Sales Demo" 
+     alt="Sales Demo"/&gt;
+    &lt;video src="salesdemo_signing.mpg" 
+     region="signing" systemCaptions="on" 
+     title="sign language interpretation" 
+     alt="Sales Demo Sign Language Interpretation"/&gt;
+  &lt;/par&gt;
+&lt;/body&gt;
+&lt;/smil&gt;</code></pre>
+     
+     <p>The example shows a <code class="language-xml">par</code> segment containing
+       two <code class="language-xml">video</code> tags. The <code class="language-xml">systemCaptions</code> attribute indicates that the sign language video should be displayed when the user's player setting for captions indicates the preference for captions to be displayed. The <code class="language-xml">layout</code> section defines the regions used for the main video and the sign language interpretation video.</p>
+   </section>
    </section><section id="tests"><h2>Tests</h2>
-      <section class="procedure"><h3>Procedure</h3>
-         <ol>
-            <li> Enable control in content or player to turn on sign language
-                                    interpretation (unless it is always shown) </li>
-            <li> Play file with sign-language interpretation </li>
-            <li> Check whether sign language interpretation is displayed </li>
-         </ol>
-      </section>
-      <section class="results"><h3>Expected Results</h3>
-         <ul>
-            <li> #3 is true </li>
-         </ul>
-      </section>
-   </section><section id="related"><h2>Related Techniques</h2><ul>
-      <li><a href="../smil/SM13">SM13</a></li>
-   </ul></section><section id="resources"><h2>Resources</h2>
-      
-         <ul>
-            <li> 
-                  <a href="https://www.w3.org/TR/SMIL/">Synchronized Multimedia
-                                        Integration Language (SMIL 2.0)</a>
-								       </li>
-            <li> 
-                  <a href="https://www.w3.org/TR/SMIL-access/">Accessibility
-                                        Features of SMIL</a>
-								       </li>
-            <li> 
-                  <a href="http://ncam.wgbh.org/invent_build/web_multimedia/accessible-digital-media-guide/guideline-h-multimedia#techH12">NCAM Rich Media Accessibility, Accessible SMIL
-                                    Templates</a>
-								       </li>
-         </ul>
-      
-   </section></body></html>
\ No newline at end of file
+     <section class="procedure"><h3>Procedure</h3>
+      <ol>
+       <li>Enable control in content or player to turn on sign language interpretation (unless it is always shown)</li>
+       <li>Play file with sign-language interpretation</li>
+       <li>Check whether sign language interpretation is displayed</li>
+     </ol>
+   </section>
+   <section class="results">
+		<h3>Expected Results</h3>
+		<ul>
+			<li>#3 is true</li>
+   </ul>
+   </section>
+   </section>
+	 <section id="related">
+		<h2>Related Techniques</h2>
+		<ul>
+			<li><a href="../smil/SM13">SM13</a></li>
+		</ul>
+	</section>
+	<section id="resources">
+		<h2>Resources</h2> 
+    <ul>
+     <li> 
+       <a href="https://www.w3.org/TR/SMIL/">Synchronized Multimedia Integration Language (SMIL 2.0)</a>
+     </li>
+		 <li>
+			<a href="https://www.w3.org/TR/SMIL3/">Synchronized Multimedia Integration Language (SMIL 3.0)</a>
+		</li>
+     <li> 
+       <a href="https://www.w3.org/TR/SMIL-access/">Accessibility Features of SMIL</a>
+     </li>
+   </ul>
+   </section>
+   </body>
+	 </html>
\ No newline at end of file
diff --git a/techniques/smil/SM2.html b/techniques/smil/SM2.html
index 2ae95c3fdb..1e781dd722 100644
--- a/techniques/smil/SM2.html
+++ b/techniques/smil/SM2.html
@@ -1,78 +1,90 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Adding extended audio description in SMIL 2.0</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Adding extended audio description in SMIL 2.0</h1><section class="meta"><p class="id">ID: SM2</p><p class="technology">Technology: smil</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
-      <p> Applies whenever SMIL 2.0 player is available </p>
-   </section><section id="description"><h2>Description</h2>
-      <p> The purpose of this technique is to allow there to be more audio description
-                        than will fit into the gaps in the dialogue of the audio-visual material. </p>
-      <p> With SMIL 2.0 it is possible to specify that particular audio files be
-                        played at particular times, and that the program be frozen (paused) while
-                        the audio file is being played. </p>
-      <p> The effect is that the video appears to play through from end to end but
-                        freezes in places while a longer audio description is provided. It then
-                        continues automatically when the audio description is complete. </p>
-      <p> To turn the extended audio description on and off one could use script to
-                        switch back and forth between two SMIL scripts, one with and one without the
-                        extended audio description lines. Or script could be used to add or remove
-                        the extended audio description lines from the SMIL file so that the film
-                        clips would just play uninterrupted. </p>
-      <p> If scripting is not available then two versions of the SMIL file could be
-                        provided, one with and one without extended audio description. </p>
-   </section><section id="examples"><h2>Examples</h2>
-      <section class="example">
-         <h3>Video with extended audio description.</h3>
-         <pre xml:space="preserve">
-&lt;smil xmlns="https://www.w3.org/2001/SMIL20/Language"&gt; 
-&lt;head&gt; 
-&lt;layout&gt; 
-&lt;root-layout backgroundColor="black" height="266" width="320"/&gt; 
-&lt;region id="video" backgroundColor="black" top="26" left="0" 
-height="144" width="320"/&gt; 
-&lt;/layout&gt; 
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+	<head><title>Adding extended audio description in SMIL 2.0</title>
+		<link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+	</head>
+	<body>
+		<h1>Adding extended audio description in <abbr title="Synchronized Multimedia Integration Language">SMIL</abbr> 2.0</h1>
+		<section class="meta">
+			<p class="id">ID: SM2</p>
+			<p class="technology">Technology: smil</p>
+			<p class="type">Type: Technique</p>
+		</section>
+		<section id="applicability">
+			<h2>When to Use</h2>
+      <p>Applies whenever SMIL 2.0 player is available</p>
+   </section>
+	 <section id="description">
+		<h2>Description</h2>
+		<p> The purpose of this technique is to allow there to be more audio description than will fit into the gaps in the dialogue of the audio-visual material.</p>
+      <p> With SMIL 2.0 it is possible to specify that particular audio files be played at particular times, and that the program be frozen (paused) while the audio file is being played.</p>
+      <p> The effect is that the video appears to play through from end to end but freezes in places while a longer audio description is provided. It then continues automatically when the audio description is complete.</p>
+      <p> To turn the extended audio description on and off one could use script to switch back and forth between two SMIL scripts, one with and one without the extended audio description lines. Or script could be used to add or remove the extended audio description lines from the SMIL file so that the film clips would just play uninterrupted.</p>
+      <p> If scripting is not available then two versions of the SMIL file could be provided, one with and one without extended audio description.</p>
+   </section>
+	 <section id="examples">
+		<h2>Examples</h2>
+		<section class="example">
+			<h3>Video with extended audio description</h3>
+<pre xml:space="preserve"><code class="language-xml">&lt;smil xmlns="https://www.w3.org/2001/SMIL20/Language"&gt; 
+&lt;head&gt;
+  &lt;layout&gt; 
+    &lt;root-layout backgroundColor="black" height="266" width="320"/&gt; 
+    &lt;region id="video" backgroundColor="black" top="26" left="0" 
+     height="144" width="320"/&gt; 
+  &lt;/layout&gt; 
 &lt;/head&gt; 
 &lt;body&gt;	 
-&lt;excl&gt; 
-&lt;priorityClass peers="pause"&gt; 
-&lt;video src="movie.rm" region="video" title="video" alt="video" /&gt; 
-&lt;audio src="desc1.rm" begin="12.85s" alt="Description 1" /&gt; 
-&lt;audio src="desc2.rm" begin="33.71s" alt="Description 2" /&gt; 
-&lt;audio src="desc3.rm" begin="42.65s" alt="Description 3" /&gt; 
-&lt;audio src="desc4.rm" begin="59.80s" alt="Description 4" /&gt; 
-&lt;/priorityClass&gt; 
-&lt;/excl&gt; 
+  &lt;excl&gt; 
+    &lt;priorityClass peers="pause"&gt; 
+      &lt;video src="movie.rm" region="video" title="video" alt="video" /&gt; 
+      &lt;audio src="desc1.rm" begin="12.85s" alt="Description 1" /&gt; 
+      &lt;audio src="desc2.rm" begin="33.71s" alt="Description 2" /&gt; 
+      &lt;audio src="desc3.rm" begin="42.65s" alt="Description 3" /&gt; 
+      &lt;audio src="desc4.rm" begin="59.80s" alt="Description 4" /&gt; 
+    &lt;/priorityClass&gt; 
+  &lt;/excl&gt; 
 &lt;/body&gt; 
-     &lt;/smil&gt; </pre>
+&lt;/smil&gt;</code></pre>
       </section>
-   </section><section id="tests"><h2>Tests</h2>
-      <section class="procedure"><h3>Procedure</h3>
-         <ol>
-            <li> Play file with extended audio description </li>
-            <li> Check whether video freezes in places and plays extended audio
-                                    description </li>
-         </ol>
-      </section>
-      <section class="results"><h3>Expected Results</h3>
-         <ul>
-            <li> #2 is true </li>
-         </ul>
-      </section>
-   </section><section id="related"><h2>Related Techniques</h2><ul>
+   </section>
+	 <section id="tests">
+		<h2>Tests</h2>
+		<section class="procedure">
+			<h3>Procedure</h3>
+			<ol>
+				<li>Play file with extended audio description</li>
+				<li>Check whether video freezes in places and plays extended audio description</li>
+			</ol>
+		</section>
+		<section class="results">
+			<h3>Expected Results</h3>
+			<ul>
+				<li>#2 is true</li>
+			</ul>
+		</section>
+	</section>
+	<section id="related">
+		<h2>Related Techniques</h2>
+		<ul>
       <li><a href="../general/G81">G81</a></li>
       <li><a href="../smil/SM7">SM7</a></li>
       <li><a href="../smil/SM11">SM11</a></li>
-   </ul></section><section id="resources"><h2>Resources</h2>
-      
-         <ul>
-            <li> 
-                  <a href="https://www.w3.org/TR/SMIL/">Synchronized Multimedia
-                                        Integration Language (SMIL 2.0)</a>
-								       </li>
-            <li> 
-                  <a href="https://www.w3.org/TR/SMIL-access/">Accessibility
-                                        Features of SMIL</a>
-								       </li>
-            <li> 
-                  <a href="http://ncam.wgbh.org/invent_build/web_multimedia/accessible-digital-media-guide/guideline-h-multimedia#techH12">NCAM Rich Media Accessibility, Accessible SMIL
-                                    Templates</a>
-								       </li>
-         </ul>
-      
-   </section></body></html>
\ No newline at end of file
+		</ul>
+	</section>
+	<section id="resources">
+		<h2>Resources</h2>
+		<ul>
+			<li>
+				<a href="https://www.w3.org/TR/SMIL/">Synchronized Multimedia Integration Language (SMIL 2.0)</a>
+			</li>
+			<li>
+				<a href="https://www.w3.org/TR/SMIL3/">Synchronized Multimedia Integration Language (SMIL 3.0)</a>
+			</li>			
+			<li>
+				<a href="https://www.w3.org/TR/SMIL-access/">Accessibility Features of SMIL</a>
+			</li>
+		</ul>
+   </section>
+	</body>
+	</html>
\ No newline at end of file
diff --git a/techniques/smil/SM6.html b/techniques/smil/SM6.html
index f71e48781c..51c9d0ecc0 100644
--- a/techniques/smil/SM6.html
+++ b/techniques/smil/SM6.html
@@ -1,101 +1,90 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing audio description in SMIL 1.0</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Providing audio description in SMIL 1.0</h1><section class="meta"><p class="id">ID: SM6</p><p class="technology">Technology: smil</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
-      <p> Applies whenever SMIL 1.0 player is available </p>
-   </section><section id="description"><h2>Description</h2>
-      <p> The objective of this technique is to provide a way for people who are blind
-                        or otherwise have trouble seeing the video in audio-visual material to be
-                        able to access the material. With this technique a description of the video
-                        is provided via audio description that will fit into the gaps in the dialogue
-                        in the audio-visual material. </p>
-   </section><section id="examples"><h2>Examples</h2>
-      <section class="example">
-         <h3> SMIL 1.0 audio description sample for QuickTime player</h3>
-         <pre xml:space="preserve">   
-&lt;?xml version="1.0" encoding="UTF-8"?&gt;
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>Providing audio description in SMIL 1.0</title>
+		<link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+	</head>
+	<body>
+		<h1>Providing audio description in <abbr title="Synchronized Multimedia Integration Language">SMIL</abbr> 1.0</h1>
+		<section class="meta">
+			<p class="id">ID: SM6</p>
+			<p class="technology">Technology: smil</p>
+			<p class="type">Type: Technique</p>
+		</section>
+		<section id="applicability">
+			<h2>When to Use</h2>
+      <p>Applies whenever SMIL 1.0 player is available</p>
+		</section>
+		<section id="description">
+			<h2>Description</h2>
+      <p>The objective of this technique is to provide a way for people who are blind
+				or otherwise have trouble seeing the video in audio-visual material to be
+				able to access the material. With this technique a description of the video
+				is provided via audio description that will fit into the gaps in the dialogue
+				in the audio-visual material.</p>
+			</section>
+			<section id="examples">
+				<h2>Examples</h2>
+				<section class="example">
+					<h3>SMIL 1.0 audio description sample for QuickTime player</h3>
+<pre xml:space="preserve"><code class="language-xml">&lt;?xml version="1.0" encoding="UTF-8"?&gt;
 &lt;smil xmlns:qt="http://www.apple.com/quicktime/resources/smilextensions" 
-  xmlns="https://www.w3.org/TR/REC-smil" qt:time-slider="true"&gt;
-  &lt;head&gt;
-    &lt;layout&gt;
-      &lt;root-layout background-color="black" height="266" width="320"/&gt;
-      &lt;region id="videoregion" background-color="black" top="26" left="0" 
+      xmlns="https://www.w3.org/TR/REC-smil" qt:time-slider="true"&gt;
+&lt;head&gt;
+  &lt;layout&gt;
+    &lt;root-layout background-color="black" height="266" width="320"/&gt;
+    &lt;region id="videoregion" background-color="black" top="26" left="0" 
       height="144" width="320"/&gt;
-    &lt;/layout&gt;
-  &lt;/head&gt;
-  &lt;body&gt;
-    &lt;par&gt;
-      &lt;video dur="0:01:20.00" region="videoregion" src="salesdemo.mov" 
-      alt="Sales Demo"/&gt;
-      &lt;audio dur="0:01:20.00" src="salesdemo_ad.mp3" 
-      alt="Sales Demo Audio Description"/&gt;
-    &lt;/par&gt;
-  &lt;/body&gt;
-&lt;/smil&gt; </pre>
+  &lt;/layout&gt;
+&lt;/head&gt;
+&lt;body&gt;
+  &lt;par&gt;
+    &lt;video dur="0:01:20.00" region="videoregion" src="salesdemo.mov" 
+     alt="Sales Demo"/&gt;
+    &lt;audio dur="0:01:20.00" src="salesdemo_ad.mp3" 
+     alt="Sales Demo Audio Description"/&gt;
+  &lt;/par&gt;
+&lt;/body&gt;
+&lt;/smil&gt;</code></pre>
       </section>
-      <section class="example">
-         <h3> SMIL 1.0 audio description sample for RealTime player</h3>
-         <pre xml:space="preserve"> 
-&lt;?xml version="1.0" encoding="UTF-8"?&gt;
-&lt;smil xmlns="https://www.w3.org/TR/REC-smil"&gt;
-  &lt;head&gt;
-    &lt;layout&gt;
-      &lt;root-layout background-color="black" height="266" width="320"/&gt;
-      &lt;region id="videoregion" background-color="black" top="26" left="0" 
-      height="144" width="320"/&gt;
-    &lt;/layout&gt;
-  &lt;/head&gt;
-  &lt;body&gt;
-    &lt;par&gt;
-      &lt;video src="salesdemo.mov" region="videoregion" title="Sales Demo" 
-      alt="Sales Demo"/&gt;
-      &lt;audio src="salesdemo_ad.mp3" title="audio description" 
-      alt="Sales Demo Audio Description"/&gt;
-    &lt;/par&gt;
-  &lt;/body&gt;
-&lt;/smil&gt;</pre>
-      </section>
-   </section><section id="tests"><h2>Tests</h2>
-      <section class="procedure"><h3>Procedure</h3>
-         <ol>
-            <li> Find method for turning on audio description from
-                                    content/player (unless it is always played by default) </li>
-            <li> Play file with audio description </li>
-            <li> Check whether audio description is played </li>
-         </ol>
-      </section>
-      <section class="results"><h3>Expected Results</h3>
-         <ul>
-            <li> #3 is true </li>
-         </ul>
+    </section>
+	 <section id="tests">
+		<h2>Tests</h2>
+		<section class="procedure">
+			<h3>Procedure</h3>
+			<ol>
+				<li>Find method for turning on audio description from content/player (unless it is always played by default)</li>
+				<li>Play file with audio description</li>
+				<li>Check whether audio description is played</li>
+			</ol>
+		</section>
+		<section class="results">
+			<h3>Expected Results</h3>
+			<ul>
+				<li>#3 is true</li>
+			</ul>
       </section>
-   </section><section id="related"><h2>Related Techniques</h2><ul>
-      <li><a href="../smil/SM2">SM2</a></li>
-      <li><a href="../smil/SM7">SM7</a></li>
-   </ul></section><section id="resources"><h2>Resources</h2>
-      
-         <ul>
-            <li> 
-                  <a href="https://www.w3.org/TR/REC-smil/">Synchronized
-                                        Multimedia Integration Language (SMIL) 1.0</a>
-								       </li>
-            <li> 
-                  <a href="https://www.w3.org/TR/SMIL/">Synchronized Multimedia
-                                        Integration Language (SMIL 2.0)</a>
-								       </li>
-            <li> 
-                  <a href="https://www.w3.org/TR/SMIL-access/">Accessibility
-                                        Features of SMIL</a>
-								       </li>
-            <li> 
-                  <a href="http://ncam.wgbh.org/invent_build/web_multimedia/accessible-digital-media-guide/guideline-h-multimedia#techH12">NCAM Rich Media Accessibility, Accessible SMIL
-                                    Templates</a>
-								       </li>
-            
-            <li> 
-                  <a href="https://msdn.microsoft.com/en-us/library/ms971327.aspx">SAMI 1.0</a> 
-               </li>
-            <li> 
-                  <a href="https://www.w3.org/TR/SMIL-access/">Accessibility
-                                        Features of SMIL</a>
-								       </li>
-         </ul>
-      
-   </section></body></html>
\ No newline at end of file
+		</section>
+		<section id="related">
+			<h2>Related Techniques</h2>
+			<ul>
+      	<li><a href="../smil/SM2">SM2</a></li>
+      	<li><a href="../smil/SM7">SM7</a></li>
+			</ul>
+		</section>
+		<section id="resources">
+			<h2>Resources</h2>
+			<ul>
+				<li>
+					<a href="https://www.w3.org/TR/SMIL/">Synchronized Multimedia Integration Language (SMIL 2.0)</a>
+				</li>
+				<li>
+					<a href="https://www.w3.org/TR/SMIL3/">Synchronized Multimedia Integration Language (SMIL 3.0)</a>
+				</li>	
+				<li>
+					<a href="https://www.w3.org/TR/SMIL-access/">Accessibility Features of SMIL</a>
+				</li>
+			</ul>
+		</section>
+	</body>
+	</html>
\ No newline at end of file
diff --git a/techniques/smil/SM7.html b/techniques/smil/SM7.html
index 2a04c9bf98..b386219a93 100644
--- a/techniques/smil/SM7.html
+++ b/techniques/smil/SM7.html
@@ -1,22 +1,37 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Providing audio description in SMIL 2.0</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Providing audio description in SMIL 2.0</h1><section class="meta"><p class="id">ID: SM7</p><p class="technology">Technology: smil</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>Providing audio description in SMIL 2.0</title>
+		<link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+	</head>
+	<body>
+		<h1>Providing audio description in <abbr title="Synchronized Multimedia Integration Language">SMIL</abbr> 2.0</h1>
+		<section class="meta">
+			<p class="id">ID: SM7</p>
+			<p class="technology">Technology: smil</p>
+			<p class="type">Type: Technique</p>
+		</section>
+		<section id="applicability">
+			<h2>When to Use</h2>
+      <p>Applies whenever SMIL 2.0 player is available</p>
+		</section>
+		<section id="description">
+			<h2>Description</h2>
       <p>
-                        Applies whenever SMIL 2.0 player is available
-                    </p>
-   </section><section id="description"><h2>Description</h2>
-      <p>
-                    The objective of this technique is to provide a way for people who are blind or otherwise have trouble seeing the video in audio-visual material to be able to access the material. With this technique a description of the video is provided via audio description that will fit into the gaps in the dialogue in the audio-visual material.
-                    </p>
-   </section><section id="examples"><h2>Examples</h2>
+				The objective of this technique is to provide a way for people who are blind or otherwise have trouble seeing the video in audio-visual material to be able to access the material. With this technique a description of the video is provided via audio description that will fit into the gaps in the dialogue in the audio-visual material.				
+			</p>
+		</section>
+		<section id="examples">
+			<h2>Examples</h2>
       <section class="example">
-         <h3>SMIL 2.0 audio description sample for RealMedia player</h3>
-         <pre xml:space="preserve">
-&lt;smil xmlns="https://www.w3.org/2001/SMIL20/Language"&gt;
-  &lt;head&gt;
-    &lt;layout&gt;
-      &lt;root-layout backgroundColor="black" height="266" width="320"/&gt;
-      &lt;region id="video" backgroundColor="black" top="26" left="0" 
-      height="144" width="320"/&gt;
-    &lt;/layout&gt;
+				<h3>SMIL 2.0 audio description sample for RealMedia player</h3>
+<pre xml:space="preserve"><code class="language-xml">&lt;smil xmlns="https://www.w3.org/2001/SMIL20/Language"&gt;
+&lt;head&gt;
+  &lt;layout&gt;
+    &lt;root-layout backgroundColor="black" height="266" width="320"/&gt;
+    &lt;region id="video" backgroundColor="black" top="26" left="0" 
+     height="144" width="320"/&gt;
+  &lt;/layout&gt;
   &lt;/head&gt;
   &lt;body&gt;
     &lt;par&gt;
@@ -26,50 +41,48 @@ <h3>SMIL 2.0 audio description sample for RealMedia player</h3>
       alt="Sales Demo Audio Description"/&gt;
     &lt;/par&gt;
   &lt;/body&gt;
-&lt;/smil&gt;
-</pre>
-         
-            <p>
-        The example shows a &lt;par&gt; segment containing an &lt;audio&gt; and a &lt;video&gt; tag. The audio stream is not started immediately.
-    </p>
+&lt;/smil&gt;</code></pre>
          
+<p>The example shows a <code class="language-xml">par</code> segment containing an <code class="language-xml">audio</code> and a <code class="language-xml">video</code> tag. The audio stream is not started immediately.</p>
       </section>
-   </section><section id="tests"><h2>Tests</h2>
-      <section class="procedure"><h3>Procedure</h3>
+		</section>
+		<section id="tests">
+			<h2>Tests</h2>
+      <section class="procedure">
+				<h3>Procedure</h3>
          <ol>
-            <li>
-                        Find method for turning on audio description from content/player (unless it is always played by default)
-                    </li>
-            <li>
-                        Play file with audio description
-                    </li>
-            <li>
-                        Check whether audio description is played
-                    </li>
-         </ol>
-      </section>
-      <section class="results"><h3>Expected Results</h3>
-         <ul>
-            <li>
-                        #3 is true
-                    </li>
-         </ul>
-      </section>
-   </section><section id="related"><h2>Related Techniques</h2><ul>
-      <li><a href="../smil/SM2">SM2</a></li>
-      <li><a href="../smil/SM6">SM6</a></li>
-   </ul></section><section id="resources"><h2>Resources</h2>
-      
+					<li>Find method for turning on audio description from content/player (unless it is always played by default)</li>
+            <li>Play file with audio description</li>
+            <li>Check whether audio description is played</li>
+					</ol>
+				</section>
+				<section class="results">
+					<h3>Expected Results</h3>
+					<ul>
+						<li>#3 is true</li>
+					</ul>
+				</section>
+			</section>
+			<section id="related">
+				<h2>Related Techniques</h2>
+				<ul>
+					<li><a href="../smil/SM2">SM2</a></li>
+					<li><a href="../smil/SM6">SM6</a></li>
+				</ul>
+			</section>
+			<section id="resources">
+				<h2>Resources</h2>
          <ul>
-            <li> 
-                  <a href="https://www.w3.org/TR/SMIL/">Synchronized Multimedia Integration Language (SMIL 2.0)</a>
-								       </li>
-            <li> 
-                  <a href="https://www.w3.org/TR/SMIL-access/">Accessibility Features of SMIL</a> 
-               </li>
-            <li> 
-                  <a href="http://ncam.wgbh.org/invent_build/web_multimedia/accessible-digital-media-guide/guideline-h-multimedia#techH12">NCAM Rich Media Accessibility, Accessible SMIL Templates</a>
-								       </li>
-         </ul>
-      
-   </section></body></html>
\ No newline at end of file
+					<li>
+						<a href="https://www.w3.org/TR/SMIL/">Synchronized Multimedia Integration Language (SMIL 2.0)</a>
+					</li>
+					<li>
+						<a href="https://www.w3.org/TR/SMIL3/">Synchronized Multimedia Integration Language (SMIL 3.0)</a>
+					</li>						
+					<li>
+						<a href="https://www.w3.org/TR/SMIL-access/">Accessibility Features of SMIL</a> 
+					</li>
+				</ul>
+			</section>
+		</body>
+		</html>
\ No newline at end of file
diff --git a/techniques/techniques.11tydata.js b/techniques/techniques.11tydata.js
new file mode 100644
index 0000000000..cbcafab4ec
--- /dev/null
+++ b/techniques/techniques.11tydata.js
@@ -0,0 +1,7 @@
+export default function (data) {
+  return {
+    headerLabel: "Techniques",
+    headerUrl: data.techniquesUrl,
+    isTechniques: true,
+  };
+}
diff --git a/techniques/text/T1.html b/techniques/text/T1.html
index 6572add381..9bb63b82c3 100644
--- a/techniques/text/T1.html
+++ b/techniques/text/T1.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using standard text formatting conventions for paragraphs</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Using standard text formatting conventions for paragraphs</h1><section class="meta"><p class="id">ID: T1</p><p class="technology">Technology: text</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using standard text formatting conventions for paragraphs</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/></head><body><h1>Using standard text formatting conventions for paragraphs</h1><section class="meta"><p class="id">ID: T1</p><p class="technology">Technology: text</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
       <p>Plain text documents. Not applicable to technologies that contain markup.</p>
    </section><section id="description"><h2>Description</h2>
       <p>The objective of this technique is to recognize a paragraph in a plain text document. A paragraph is a coherent block of text, such as a group of related sentences that develop a single topic or a coherent part of a larger topic. </p>
diff --git a/techniques/text/T2.html b/techniques/text/T2.html
index ceb4829422..ec8b6b6ba0 100644
--- a/techniques/text/T2.html
+++ b/techniques/text/T2.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using standard text formatting conventions for lists</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Using standard text formatting conventions for lists</h1><section class="meta"><p class="id">ID: T2</p><p class="technology">Technology: text</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using standard text formatting conventions for lists</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/></head><body><h1>Using standard text formatting conventions for lists</h1><section class="meta"><p class="id">ID: T2</p><p class="technology">Technology: text</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
       <p>Plain text documents. Not applicable to technologies that contain markup.</p>
    </section><section id="description"><h2>Description</h2>
       <p>The objective of this technique is to use text formatting conventions to create simple lists of related items. Hierarchical lists or nested lists cannot be represented using this technique and should be represented using a different technology. </p>
diff --git a/techniques/text/T3.html b/techniques/text/T3.html
index cefd0d2c2e..6ecf4285d9 100644
--- a/techniques/text/T3.html
+++ b/techniques/text/T3.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using standard text formatting conventions for headings</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Using standard text formatting conventions for headings</h1><section class="meta"><p class="id">ID: T3</p><p class="technology">Technology: text</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
+<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using standard text formatting conventions for headings</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/></head><body><h1>Using standard text formatting conventions for headings</h1><section class="meta"><p class="id">ID: T3</p><p class="technology">Technology: text</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
       <p>Plain text documents. Not applicable to technologies that contain markup.</p>
    </section><section id="description"><h2>Description</h2>
       <p>The objective of this technique is to use text formatting conventions to convey the structure of the content. Headings are used to locate and label sections of a text document, showing the organization of the document.</p>
diff --git a/techniques/toc.html b/techniques/toc.html
deleted file mode 100644
index 5bfee9fd7f..0000000000
--- a/techniques/toc.html
+++ /dev/null
@@ -1,670 +0,0 @@
-<nav xmlns="http://www.w3.org/1999/xhtml" id="toc">
-   <h2 class="introductory" id="techniques-pages">
-      					Techniques
-      					
-      				
-   </h2>
-   <h3 id="aria">ARIA Techniques<span class="permalink"><a href="#aria" aria-label="Permalink for ARIA Techniques" title="Permalink for ARIA Techniques"><span>§</span></a></span></h3>
-   <ul>
-      <li><a href="aria/ARIA1">ARIA1: Using the aria-describedby property to provide a descriptive label for user interface
-            controls</a></li>
-      <li><a href="aria/ARIA2">ARIA2: Identifying a required field with the aria-required property</a></li>
-      <li><a href="aria/ARIA4">ARIA4: Using a WAI-ARIA role to expose the role of a user interface component</a></li>
-      <li><a href="aria/ARIA5">ARIA5: Using WAI-ARIA state and property attributes to expose the state of a user interface
-            component</a></li>
-      <li><a href="aria/ARIA6">ARIA6: Using aria-label to provide labels for objects</a></li>
-      <li><a href="aria/ARIA7">ARIA7: Using aria-labelledby for link purpose</a></li>
-      <li><a href="aria/ARIA8">ARIA8: Using aria-label for link purpose</a></li>
-      <li><a href="aria/ARIA9">ARIA9: Using aria-labelledby to concatenate a label from several text nodes</a></li>
-      <li><a href="aria/ARIA10">ARIA10: Using aria-labelledby to provide a text alternative for non-text content</a></li>
-      <li><a href="aria/ARIA11">ARIA11: Using ARIA landmarks to identify regions of a page</a></li>
-      <li><a href="aria/ARIA12">ARIA12: Using role=heading to identify headings</a></li>
-      <li><a href="aria/ARIA13">ARIA13: Using aria-labelledby to name regions and landmarks</a></li>
-      <li><a href="aria/ARIA14">ARIA14: Using aria-label to provide an invisible label where a visible label cannot be used</a></li>
-      <li><a href="aria/ARIA15">ARIA15: Using aria-describedby to provide descriptions of images</a></li>
-      <li><a href="aria/ARIA16">ARIA16: Using aria-labelledby to provide a name for user interface controls</a></li>
-      <li><a href="aria/ARIA17">ARIA17: Using grouping roles to identify related form controls</a></li>
-      <li><a href="aria/ARIA18">ARIA18: Using aria-alertdialog to Identify Errors</a></li>
-      <li><a href="aria/ARIA19">ARIA19: Using ARIA role=alert or Live Regions to Identify Errors</a></li>
-      <li><a href="aria/ARIA20">ARIA20: Using the region role to identify a region of the page</a></li>
-      <li><a href="aria/ARIA21">ARIA21: Using Aria-Invalid to Indicate An Error Field</a></li>
-      <li><a href="aria/ARIA22">ARIA22: Using role=status to present status messages</a></li>
-      <li><a href="aria/ARIA23">ARIA23: Using role=log to identify sequential information updates</a></li>
-      <li><a href="aria/ARIA24">ARIA24: Semantically identifying a font icon with role="img"</a></li>
-   </ul>
-   <h3 id="client-side-script">Client-Side Script Techniques<span class="permalink"><a href="#client-side-script" aria-label="Permalink for Client-Side Script Techniques" title="Permalink for Client-Side Script Techniques"><span>§</span></a></span></h3>
-   <ul>
-      <li><a href="client-side-script/SCR1">SCR1: Allowing the user to extend the default time limit </a></li>
-      <li><a href="client-side-script/SCR2">SCR2: Using redundant keyboard and mouse event handlers</a></li>
-      <li><a href="client-side-script/SCR14">SCR14: Using scripts to make nonessential alerts optional</a></li>
-      <li><a href="client-side-script/SCR16">SCR16: Providing a script that warns the user a time limit is about to expire</a></li>
-      <li><a href="client-side-script/SCR18">SCR18: Providing client-side validation and alert</a></li>
-      <li><a href="client-side-script/SCR19">SCR19: Using an onchange event on a select element without causing a change of context</a></li>
-      <li><a href="client-side-script/SCR20">SCR20: Using both keyboard and other device-specific functions</a></li>
-      <li><a href="client-side-script/SCR21">SCR21: Using functions of the Document Object Model (DOM) to add content to a page</a></li>
-      <li><a href="client-side-script/SCR22">SCR22: Using scripts to control blinking and stop it in five seconds or less</a></li>
-      <li><a href="client-side-script/SCR24">SCR24: Using progressive enhancement to open new windows on user request</a></li>
-      <li><a href="client-side-script/SCR26">SCR26: Inserting dynamic content into the Document Object Model immediately following its
-            trigger element</a></li>
-      <li><a href="client-side-script/SCR27">SCR27: Reordering page sections using the Document Object Model</a></li>
-      <li><a href="client-side-script/SCR28">SCR28: Using an expandable and collapsible menu to bypass block of content</a></li>
-      <li><a href="client-side-script/SCR29">SCR29: Adding keyboard-accessible actions to static HTML elements</a></li>
-      <li><a href="client-side-script/SCR30">SCR30: Using scripts to change the link text</a></li>
-      <li><a href="client-side-script/SCR31">SCR31: Using script to change the background color or border of the element with focus</a></li>
-      <li><a href="client-side-script/SCR32">SCR32: Providing client-side validation and adding error text via the DOM</a></li>
-      <li><a href="client-side-script/SCR33">SCR33: Using script to scroll content, and providing a mechanism to pause it</a></li>
-      <li><a href="client-side-script/SCR34">SCR34: Calculating size and position in a way that scales with text size</a></li>
-      <li><a href="client-side-script/SCR35">SCR35: Making actions keyboard accessible by using the onclick event of anchors and buttons</a></li>
-      <li><a href="client-side-script/SCR36">SCR36: Providing a mechanism to allow users to display moving, scrolling, or auto-updating
-            text in a static window or area</a></li>
-      <li><a href="client-side-script/SCR37">SCR37: Creating Custom Dialogs in a Device Independent Way</a></li>
-      <li><a href="client-side-script/SCR38">SCR38: Creating a conforming alternate version for a web page designed with progressive enhancement</a></li>
-      <li><a href="client-side-script/SCR39">SCR39: Making content on focus or hover hoverable, dismissible, and persistent</a></li>
-   </ul>
-   <h3 id="css">CSS Techniques<span class="permalink"><a href="#css" aria-label="Permalink for CSS Techniques" title="Permalink for CSS Techniques"><span>§</span></a></span></h3>
-   <ul>
-      <li><a href="css/C6">C6: Positioning content based on structural markup</a></li>
-      <li><a href="css/C7">C7: Using CSS to hide a portion of the link text</a></li>
-      <li><a href="css/C8">C8: Using CSS letter-spacing to control spacing within a word</a></li>
-      <li><a href="css/C9">C9: Using CSS to include decorative images</a></li>
-      <li><a href="css/C12">C12: Using percent for font sizes</a></li>
-      <li><a href="css/C13">C13: Using named font sizes</a></li>
-      <li><a href="css/C14">C14: Using em units for font sizes</a></li>
-      <li><a href="css/C15">C15: Using CSS to change the presentation of a user interface component when it receives
-            focus</a></li>
-      <li><a href="css/C17">C17: Scaling form elements which contain text</a></li>
-      <li><a href="css/C18">C18: Using CSS margin and padding rules instead of spacer images for layout design</a></li>
-      <li><a href="css/C19">C19: Specifying alignment either to the left OR right in CSS</a></li>
-      <li><a href="css/C20">C20: Using relative measurements to set column widths so that lines can average 80 characters
-            or less when the browser is resized</a></li>
-      <li><a href="css/C21">C21: Specifying line spacing in CSS</a></li>
-      <li><a href="css/C22">C22: Using CSS to control visual presentation of text</a></li>
-      <li><a href="css/C23">C23: Specifying text and background colors of secondary content such as banners, features
-            and navigation in CSS while not specifying text and background colors of the main
-            content</a></li>
-      <li><a href="css/C24">C24: Using percentage values in CSS for container sizes</a></li>
-      <li><a href="css/C25">C25: Specifying borders and layout in CSS to delineate areas of a Web page while not specifying
-            text and text-background colors</a></li>
-      <li><a href="css/C27">C27: Making the DOM order match the visual order</a></li>
-      <li><a href="css/C28">C28: Specifying the size of text containers using em units</a></li>
-      <li><a href="css/C29">C29: Using a style switcher to provide a conforming alternate version</a></li>
-      <li><a href="css/C30">C30: Using CSS to replace text with images of text and providing user interface controls
-            to switch</a></li>
-      <li><a href="css/C31">C31: Using CSS Flexbox to reflow content</a></li>
-      <li><a href="css/C32">C32: Using media queries and grid CSS to reflow columns</a></li>
-      <li><a href="css/C33">C33: Allowing for Reflow with Long URLs and Strings of Text</a></li>
-      <li><a href="css/C34">C34: Using media queries to un-fixing sticky headers / footers</a></li>
-      <li><a href="css/C35">C35: Allowing for text spacing without wrapping</a></li>
-      <li><a href="css/C36">C36: Allowing for text spacing override</a></li>
-      <li><a href="css/C37">C37: Using CSS max-width and height to fit images</a></li>
-      <li><a href="css/C38">C38: Using CSS width, max-width and flexbox to fit labels and inputs</a></li>
-      <li><a href="css/C39">C39: Using the CSS reduce-motion query to prevent motion</a></li>
-      <li><a href="css/C40">C40: Creating a two-color focus indicator to ensure sufficient contrast with all components</a></li>
-      <li><a href="css/C41">C41: Creating a focus indicator within the component</a></li>
-   </ul>
-   <h3 id="failures">Common Failures<span class="permalink"><a href="#failures" aria-label="Permalink for Common Failures" title="Permalink for Common Failures"><span>§</span></a></span></h3>
-   <ul>
-      <li><a href="failures/F-dragging">F-dragging: Failure of Success Criterion 2.5.X Dragging due to not providing a single pointer
-            method for the user to operate a function that does not require a dragging movement</a></li>
-      <li><a href="failures/F1">F1: Failure of Success Criterion 1.3.2 due to changing the meaning of content by positioning
-            information with CSS</a></li>
-      <li><a href="failures/F2">F2: Failure of Success Criterion 1.3.1 due to using changes in text presentation to convey
-            information without using the appropriate markup or text</a></li>
-      <li><a href="failures/F3">F3: Failure of Success Criterion 1.1.1 due to using CSS to include images that convey
-            important information</a></li>
-      <li><a href="failures/F4">F4: Failure of Success Criterion 2.2.2 due to using text-decoration:blink without a mechanism
-            to stop it in less than five seconds</a></li>
-      <li><a href="failures/F7">F7: Failure of Success Criterion 2.2.2 due to an object or applet for more than five seconds</a></li>
-      <li><a href="failures/F8">F8: Failure of Success Criterion 1.2.2 due to captions omitting some dialogue or important
-            sound effects</a></li>
-      <li><a href="failures/F9">F9: Failure of Success Criterion 3.2.5 due to changing the context when the user removes
-            focus from a form element</a></li>
-      <li><a href="failures/F10">F10: Failure of Success Criterion 2.1.2 and Conformance Requirement 5 due to combining
-            multiple content formats in a way that traps users inside one format type</a></li>
-      <li><a href="failures/F12">F12: Failure of Success Criterion 2.2.5 due to having a session time limit without a mechanism
-            re-authentication</a></li>
-      <li><a href="failures/F13">F13: Failure of Success Criterion 1.1.1 and 1.4.1 due to having a text alternative that
-            does not include information that is conveyed by color differences in the image</a></li>
-      <li><a href="failures/F14">F14: Failure of Success Criterion 1.3.3 due to identifying content only by its shape or
-            location</a></li>
-      <li><a href="failures/F15">F15: Failure of Success Criterion 4.1.2 due to implementing custom controls that do not
-            use an accessibility API for the technology, or do so incompletely</a></li>
-      <li><a href="failures/F16">F16: Failure of Success Criterion 2.2.2 due to including scrolling content where movement
-            is not essential to the activity without also including a mechanism to pause and restart
-            the content</a></li>
-      <li><a href="failures/F19">F19: Failure of Conformance Requirement 1 due to not providing a method for the user to
-            find the alternative conforming version of a non-conforming Web page</a></li>
-      <li><a href="failures/F20">F20: Failure of Success Criterion 1.1.1 and 4.1.2 due to not updating text alternatives
-            when changes to non-text content occur</a></li>
-      <li><a href="failures/F22">F22: Failure of Success Criterion 3.2.5 due to opening windows that are not requested by
-            the user</a></li>
-      <li><a href="failures/F23">F23: Failure of 1.4.2 due to playing a sound longer than 3 seconds where              
-            there is no mechanism to turn it off</a></li>
-      <li><a href="failures/F24">F24: Failure of Success Criterion 1.4.3, 1.4.6 and 1.4.8 due to specifying foreground colors
-            without specifying background colors or vice versa</a></li>
-      <li><a href="failures/F25">F25: Failure of Success Criterion 2.4.2 due to the title of a Web page not identifying
-            the contents</a></li>
-      <li><a href="failures/F26">F26:  Failure of Success Criterion 1.3.3 due to using a graphical symbol alone to convey
-            information</a></li>
-      <li><a href="failures/F30">F30: Failure of Success Criterion 1.1.1 and 1.2.1 due to using text alternatives that are
-            not alternatives (e.g., filenames or placeholder text)</a></li>
-      <li><a href="failures/F31">F31: Failure of Success Criterion 3.2.4 due to using two different labels for the same
-            function on different Web pages within a set of Web pages </a></li>
-      <li><a href="failures/F32">F32: Failure of Success Criterion 1.3.2 due to using white space characters to control
-            spacing within a word</a></li>
-      <li><a href="failures/F33">F33: Failure of Success Criterion 1.3.1 and 1.3.2 due to using white space characters to
-            create multiple columns in plain text content</a></li>
-      <li><a href="failures/F34">F34: Failure of Success Criterion 1.3.1 and 1.3.2 due to using white space characters to
-            format tables in plain text content</a></li>
-      <li><a href="failures/F36">F36: Failure of Success Criterion 3.2.2 due to automatically submitting a form and given
-            a value</a></li>
-      <li><a href="failures/F37">F37: Failure of Success Criterion 3.2.2 due to launching a new window without prior warning
-            when the selection of a radio button, check box or select list is changed</a></li>
-      <li><a href="failures/F38">F38: Failure of Success Criterion 1.1.1 due to not marking up decorative images in HTML
-            in a way that allows assistive technology to ignore them</a></li>
-      <li><a href="failures/F39">F39: Failure of Success Criterion 1.1.1 due to providing a text alternative that is not
-            null (e.g., alt="spacer" or alt="image") for images that should be ignored by assistive
-            technology</a></li>
-      <li><a href="failures/F40">F40: Failure due to using meta redirect with a time limit </a></li>
-      <li><a href="failures/F41">F41: Failure of Success Criterion 2.2.1, 2.2.4, and 3.2.5 due to using meta refresh to
-            reload the page</a></li>
-      <li><a href="failures/F42">F42: Failure of Success Criteria 1.3.1, 2.1.1, 2.1.3, or 4.1.2 when emulating links</a></li>
-      <li><a href="failures/F43">F43: Failure of Success Criterion 1.3.1 due to using structural markup in a way that does
-            not represent relationships in the content</a></li>
-      <li><a href="failures/F44">F44: Failure of Success Criterion 2.4.3 due to using tabindex to create a tab order that
-            does not preserve meaning and operability</a></li>
-      <li><a href="failures/F46">F46: Failure of Success Criterion 1.3.1 due to using th elements, layout tables</a></li>
-      <li><a href="failures/F47">F47: Failure of Success Criterion 2.2.2 due to using the blink element</a></li>
-      <li><a href="failures/F48">F48: Failure of Success Criterion 1.3.1 due to using the pre element to markup tabular
-            information</a></li>
-      <li><a href="failures/F49">F49:  Failure of Success Criterion 1.3.2 due to using an HTML layout table that does not
-            make sense when linearized  </a></li>
-      <li><a href="failures/F50">F50: Failure of Success Criterion 2.2.2 due to a script that causes a blink effect without
-            a mechanism to stop the blinking at 5 seconds or less</a></li>
-      <li><a href="failures/F52">F52: Failure of Success Criterion 3.2.1 and 3.2.5 due to opening a new window as soon as
-            a new page is loaded</a></li>
-      <li><a href="failures/F54">F54: Failure of Success Criterion 2.1.1 due to using only pointing-device-specific event
-            handlers (including gesture) for a function</a></li>
-      <li><a href="failures/F55">F55:  Failure of Success Criteria 2.1.1, 2.4.7, and 3.2.1 due to using script to remove
-            focus when focus is received</a></li>
-      <li><a href="failures/F58">F58: Failure of Success Criterion 2.2.1 due to using server-side techniques to automatically
-            redirect pages after a time-out</a></li>
-      <li><a href="failures/F59">F59: Failure of Success Criterion 4.1.2 due to using script to make div or span a user
-            interface control in HTML without providing a role for the control</a></li>
-      <li><a href="failures/F60">F60: Failure of Success Criterion 3.2.5 due to launching a new window when a user enters
-            text into an input field</a></li>
-      <li><a href="failures/F61">F61: Failure of Success Criterion 3.2.5 due to complete change of main content through
-            an automatic update that the user cannot disable from within the content</a></li>
-      <li><a href="failures/F63">F63: Failure of Success Criterion 2.4.4 due to providing link context only in content that
-            is not related to the link</a></li>
-      <li><a href="failures/F65">F65: Failure of Success Criterion 1.1.1 due to omitting the alt attribute or text alternative
-            on img elements, area elements, and input elements of type "image"</a></li>
-      <li><a href="failures/F66">F66: Failure of Success Criterion 3.2.3 due to presenting navigation links in a different
-            relative order on different pages</a></li>
-      <li><a href="failures/F67">F67: Failure of Success Criterion 1.1.1 and 1.2.1 due to providing long descriptions for
-            non-text content that does not serve the same purpose or does not present the same
-            information</a></li>
-      <li><a href="failures/F68">F68: Failure of Success Criterion 4.1.2 due to a user interface control not having a programmatically
-            determined name </a></li>
-      <li><a href="failures/F69">F69: Failure of Success Criterion 1.4.4 when resizing visually rendered text up to 200
-            percent causes the text, image or controls to be clipped, truncated or obscured</a></li>
-      <li><a href="failures/F70">F70: Failure of Success Criterion 4.1.1 due to incorrect use of start and end tags or attribute
-            markup</a></li>
-      <li><a href="failures/F71">F71: Failure of Success Criterion 1.1.1 due to using text look-alikes to represent text
-            without providing a text alternative</a></li>
-      <li><a href="failures/F72">F72: Failure of Success Criterion 1.1.1 due to using ASCII art without providing a text
-            alternative</a></li>
-      <li><a href="failures/F73">F73: Failure of Success Criterion 1.4.1 due to creating links that are not visually evident
-            without color vision</a></li>
-      <li><a href="failures/F74">F74: Failure of Success Criterion 1.2.2 and 1.2.8 due to not labeling a synchronized media
-            alternative to text as an alternative</a></li>
-      <li><a href="failures/F75">F75: Failure of Success Criterion 1.2.2 by providing synchronized media without captions
-            when the synchronized media presents more information than is presented on the page</a></li>
-      <li><a href="failures/F77">F77: Failure of Success Criterion 4.1.1 due to duplicate values of type ID</a></li>
-      <li><a href="failures/F78">F78: Failure of Success Criterion 2.4.7 due to styling element outlines and borders in
-            a way that removes or renders non-visible the visual focus indicator</a></li>
-      <li><a href="failures/F79">F79: Failure of Success Criterion 4.1.2 due to the focus state of a user interface component
-            not being programmatically determinable or no notification of change of focus state
-            available</a></li>
-      <li><a href="failures/F80">F80: Failure of Success Criterion 1.4.4 when text-based form controls do not resize when
-            visually rendered text is resized up to 200%</a></li>
-      <li><a href="failures/F81">F81: Failure of Success Criterion 1.4.1 due to identifying required or error fields using
-            color differences only</a></li>
-      <li><a href="failures/F82">F82: Failure of Success Criterion 3.3.2 by visually formatting a set of phone number fields
-            but not including a text label</a></li>
-      <li><a href="failures/F83">F83: Failure of Success Criterion 1.4.3 and 1.4.6 due to using background images that do
-            not provide sufficient contrast with foreground text (or images of text)</a></li>
-      <li><a href="failures/F84">F84: Failure of Success Criterion 2.4.9 due to using a non-specific link such as "click
-            here" or "more" without a mechanism to change the link text to specific text.</a></li>
-      <li><a href="failures/F85">F85: Failure of Success Criterion 2.4.3 due to using dialogs or menus that are not adjacent
-            to their trigger control in the sequential navigation order</a></li>
-      <li><a href="failures/F86">F86: Failure of Success Criterion 4.1.2 due to not providing names for each part of a multi-part
-            form field, such as a US telephone number</a></li>
-      <li><a href="failures/F87">F87: Failure of Success Criterion 1.3.1 due to inserting non-decorative content by using
-            :before and :after pseudo-elements and the 'content' property in CSS</a></li>
-      <li><a href="failures/F88">F88: Failure of Success Criterion 1.4.8 due to using text that is justified (aligned to
-            both the left and the right margins)</a></li>
-      <li><a href="failures/F89">F89: Failure of Success Criteria 2.4.4, 2.4.9 and 4.1.2 due to not providing an accessible
-            name for an image which is the only content in a link</a></li>
-      <li><a href="failures/F90">F90: Failure of Success Criterion 1.3.1 for incorrectly associating table headers and content
-            via the headers and id attributes</a></li>
-      <li><a href="failures/F91">F91: Failure of Success Criterion 1.3.1 for not correctly marking up table headers</a></li>
-      <li><a href="failures/F92">F92: Failure of Success Criterion 1.3.1 due to the use of role presentation on content
-            which conveys semantic information</a></li>
-      <li><a href="failures/F93">F93: Failure of Success Criterion 1.4.2 for absence of a way to pause or stop an HTML5
-            media element that autoplays</a></li>
-      <li><a href="failures/F94">F94: Failure of Success Criterion 1.4.4 due to incorrect use of viewport units to resize
-            text</a></li>
-      <li><a href="failures/F95">F95: Failure of Success Criterion 1.4.13 due to content shown on hover not being hoverable</a></li>
-      <li><a href="failures/F96">F96: Failure due to the accessible name not containing the visible label text</a></li>
-      <li><a href="failures/F97">F97: Failure due to locking the orientation to landscape or portrait view</a></li>
-      <li><a href="failures/F98">F98: Failure due to interactions being limited to touch-only on touchscreen devices</a></li>
-      <li><a href="failures/F99">F99: Failure of Success Criterion 2.1.4 due to implementing character key shortcuts that
-            cannot be turned off or remapped</a></li>
-      <li><a href="failures/F100">F100: Failure of Success Criterion 1.3.4 due to showing a message asking to reorient device</a></li>
-      <li><a href="failures/F101">F101: Failure of Success Criterion 2.5.2 due to activating a control on the down-event</a></li>
-      <li><a href="failures/F102">F102: Failure of Success Criterion 1.4.10 due to content disappearing and not being available
-            when content has reflowed</a></li>
-      <li><a href="failures/F103">F103: Failure of Success Criterion 4.1.3 due to providing status messages that cannot be
-            programmatically determined through role or properties</a></li>
-      <li><a href="failures/F104">F104: Failure of Success Criterion 1.4.12 due to clipped or overlapped content when text
-            spacing is adjusted</a></li>
-      <li><a href="failures/F105">F105: Failure of Success Criterion 2.5.1 due to providing functionality via a path-based
-            gesture without simple pointer alternative</a></li>
-      <li><a href="failures/F106">F106: Failure due to inability to deactivate motion actuation</a></li>
-      <li><a href="failures/F107">F107: Failure of Success Criterion 1.3.5 due to incorrect autocomplete attribute values</a></li>
-   </ul>
-   <h3 id="general">General Techniques<span class="permalink"><a href="#general" aria-label="Permalink for General Techniques" title="Permalink for General Techniques"><span>§</span></a></span></h3>
-   <ul>
-      <li><a href="general/G-Dragging">G-Dragging: Ensuring that a single pointer operable alternative is available for dragging movements
-            that operate on content</a></li>
-      <li><a href="general/G1">G1: Adding a link at the top of each page that goes directly to the main content area</a></li>
-      <li><a href="general/G4">G4: Allowing the content to be paused and restarted from where it was paused</a></li>
-      <li><a href="general/G5">G5: Allowing users to complete an activity without any time limit</a></li>
-      <li><a href="general/G8">G8: Providing a movie with extended audio descriptions</a></li>
-      <li><a href="general/G9">G9: Creating captions for live synchronized media</a></li>
-      <li><a href="general/G10">G10: Creating components using a technology that supports the accessibility notification
-            of changes</a></li>
-      <li><a href="general/G11">G11: Creating content that blinks for less than 5 seconds</a></li>
-      <li><a href="general/G13">G13: Describing what will happen before a change to a form control that causes a change
-            of context to occur is made</a></li>
-      <li><a href="general/G14">G14: Ensuring that information conveyed by color differences is also available in text</a></li>
-      <li><a href="general/G15">G15: Using a tool to ensure that content does not violate the general flash threshold or
-            red flash threshold</a></li>
-      <li><a href="general/G17">G17: Ensuring that a contrast ratio of at least 7:1 exists between text (and images of
-            text) and background behind the text</a></li>
-      <li><a href="general/G18">G18: Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of
-            text) and background behind the text</a></li>
-      <li><a href="general/G19">G19: Ensuring that no component of the content flashes more than three times in any 1-second
-            period</a></li>
-      <li><a href="general/G21">G21: Ensuring that users are not trapped in content</a></li>
-      <li><a href="general/G53">G53: Identifying the purpose of a link using link text combined with the text of the enclosing
-            sentence</a></li>
-      <li><a href="general/G54">G54: Including a sign language interpreter in the video stream</a></li>
-      <li><a href="general/G55">G55: Linking to definitions</a></li>
-      <li><a href="general/G56">G56: Mixing audio files so that non-speech sounds are at least 20 decibels lower than the
-            speech audio content</a></li>
-      <li><a href="general/G57">G57: Ordering the content in a meaningful sequence</a></li>
-      <li><a href="general/G58">G58: Placing a link to the alternative for time-based media immediately next to the non-text
-            content</a></li>
-      <li><a href="general/G59">G59: Placing the interactive elements in an order that follows sequences and relationships
-            within the content</a></li>
-      <li><a href="general/G60">G60: Playing a sound that turns off automatically within three seconds</a></li>
-      <li><a href="general/G61">G61: Presenting repeated components in the same relative order each time they appear</a></li>
-      <li><a href="general/G62">G62: Providing a glossary</a></li>
-      <li><a href="general/G63">G63: Providing a site map</a></li>
-      <li><a href="general/G64">G64: Providing a Table of Contents</a></li>
-      <li><a href="general/G65">G65: Providing a breadcrumb trail</a></li>
-      <li><a href="general/G68">G68: Providing a short text alternative that describes the purpose of live audio-only and
-            live video-only content</a></li>
-      <li><a href="general/G69">G69: Providing an alternative for time based media</a></li>
-      <li><a href="general/G70">G70: Providing a function to search an online dictionary</a></li>
-      <li><a href="general/G71">G71: Providing a help link on every Web page</a></li>
-      <li><a href="general/G73">G73: Providing a long description in another location with a link to it that is immediately
-            adjacent to the non-text content</a></li>
-      <li><a href="general/G74">G74: Providing a long description in text near the non-text content, with a reference to
-            the location of the long description in the short description</a></li>
-      <li><a href="general/G75">G75: Providing a mechanism to postpone any updating of content</a></li>
-      <li><a href="general/G76">G76: Providing a mechanism to request an update of the content instead of updating automatically</a></li>
-      <li><a href="general/G78">G78: Providing a second, user-selectable, audio track that includes audio descriptions</a></li>
-      <li><a href="general/G79">G79: Providing a spoken version of the text</a></li>
-      <li><a href="general/G80">G80: Providing a submit button to initiate a change of context</a></li>
-      <li><a href="general/G81">G81: Providing a synchronized video of the sign language interpreter that can be displayed
-            in a different viewport or overlaid on the image by the player</a></li>
-      <li><a href="general/G82">G82: Providing a text alternative that identifies the purpose of the non-text content</a></li>
-      <li><a href="general/G83">G83: Providing text descriptions to identify required fields that were not completed</a></li>
-      <li><a href="general/G84">G84: Providing a text description when the user provides information that is not in the
-            list of allowed values</a></li>
-      <li><a href="general/G85">G85: Providing a text description when user input falls outside the required format or
-            values</a></li>
-      <li><a href="general/G86">G86: Providing a text summary that can be understood by people with lower secondary education
-            level reading ability</a></li>
-      <li><a href="general/G87">G87: Providing closed captions</a></li>
-      <li><a href="general/G88">G88: Providing descriptive titles for Web pages</a></li>
-      <li><a href="general/G89">G89: Providing expected data format and example</a></li>
-      <li><a href="general/G90">G90: Providing keyboard-triggered event handlers</a></li>
-      <li><a href="general/G91">G91: Providing link text that describes the purpose of a link</a></li>
-      <li><a href="general/G92">G92: Providing long description for non-text content that serves the same purpose and presents
-            the same information</a></li>
-      <li><a href="general/G93">G93: Providing open (always visible) captions</a></li>
-      <li><a href="general/G94">G94: Providing short text alternative for non-text content that serves the same purpose
-            and presents the same information as the non-text content</a></li>
-      <li><a href="general/G95">G95: Providing short text alternatives that provide a brief description of the non-text
-            content</a></li>
-      <li><a href="general/G96">G96: Providing textual identification of items that otherwise rely only on sensory information
-            to be understood</a></li>
-      <li><a href="general/G97">G97: Providing the first use of an abbreviation immediately before or after the expanded
-            form</a></li>
-      <li><a href="general/G98">G98: Providing the ability for the user to review and correct answers before submitting</a></li>
-      <li><a href="general/G99">G99: Providing the ability to recover deleted information</a></li>
-      <li><a href="general/G100">G100: Providing a short text alternative which is the accepted name or a descriptive name
-            of the non-text content</a></li>
-      <li><a href="general/G101">G101: Providing the definition of a word or phrase used in an unusual or restricted way</a></li>
-      <li><a href="general/G102">G102: Providing the expansion or explanation of an abbreviation</a></li>
-      <li><a href="general/G103">G103: Providing visual illustrations, pictures, and symbols to help explain ideas, events,
-            and processes</a></li>
-      <li><a href="general/G105">G105: Saving data so that it can be used after a user re-authenticates</a></li>
-      <li><a href="general/G107">G107: Using "activate" rather than "focus" as a trigger for changes of context</a></li>
-      <li><a href="general/G108">G108: Using markup features to expose the name and role, allow user-settable properties
-            to be directly set, and provide notification of changes</a></li>
-      <li><a href="general/G110">G110: Using an instant client-side redirect</a></li>
-      <li><a href="general/G111">G111: Using color and pattern</a></li>
-      <li><a href="general/G112">G112: Using inline definitions</a></li>
-      <li><a href="general/G115">G115: Using semantic elements to mark up structure</a></li>
-      <li><a href="general/G117">G117: Using text to convey information that is conveyed by variations in presentation of
-            text</a></li>
-      <li><a href="general/G120">G120: Providing the pronunciation immediately following the word</a></li>
-      <li><a href="general/G121">G121: Linking to pronunciations</a></li>
-      <li><a href="general/G123">G123: Adding a link at the beginning of a block of repeated content to go to the end of
-            the block</a></li>
-      <li><a href="general/G124">G124: Adding links at the top of the page to each area of the content</a></li>
-      <li><a href="general/G125">G125: Providing links to navigate to related Web pages</a></li>
-      <li><a href="general/G126">G126: Providing a list of links to all other Web pages</a></li>
-      <li><a href="general/G127">G127: Identifying a Web page's relationship to a larger collection of Web pages</a></li>
-      <li><a href="general/G128">G128: Indicating current location within navigation bars</a></li>
-      <li><a href="general/G130">G130: Providing descriptive headings</a></li>
-      <li><a href="general/G131">G131: Providing descriptive labels</a></li>
-      <li><a href="general/G133">G133: Providing a checkbox on the first page of a multipart form that allows users to ask
-            for longer session time limit or no session time limit</a></li>
-      <li><a href="general/G134">G134: Validating Web pages</a></li>
-      <li><a href="general/G135">G135: Using the accessibility API features of a technology to expose names and notification
-            of changes</a></li>
-      <li><a href="general/G136">G136: Providing a link at the beginning of a nonconforming Web page that points to a conforming
-            alternate version</a></li>
-      <li><a href="general/G138">G138: Using semantic markup whenever color cues are used</a></li>
-      <li><a href="general/G139">G139: Creating a mechanism that allows users to jump to errors</a></li>
-      <li><a href="general/G140">G140: Separating information and structure from presentation to enable different presentations</a></li>
-      <li><a href="general/G141">G141: Organizing a page using headings</a></li>
-      <li><a href="general/G142">G142: Using a technology that has commonly-available user agents that support zoom</a></li>
-      <li><a href="general/G143">G143: Providing a text alternative that describes the purpose of the CAPTCHA</a></li>
-      <li><a href="general/G144">G144: Ensuring that the Web Page contains another CAPTCHA serving the same purpose using
-            a different modality</a></li>
-      <li><a href="general/G145">G145: Ensuring that a contrast ratio of at least 3:1 exists between text (and images of
-            text) and background behind the text</a></li>
-      <li><a href="general/G146">G146: Using liquid layout</a></li>
-      <li><a href="general/G148">G148: Not specifying background color, not specifying text color, and not using technology
-            features that change those defaults</a></li>
-      <li><a href="general/G149">G149: Using user interface components that are highlighted by the user agent when they receive
-            focus</a></li>
-      <li><a href="general/G150">G150: Providing text based alternatives for live audio-only content</a></li>
-      <li><a href="general/G151">G151: Providing a link to a text transcript of a prepared statement or script if the script
-            is followed</a></li>
-      <li><a href="general/G152">G152: Setting animated gif images to stop blinking after n cycles (within 5 seconds)</a></li>
-      <li><a href="general/G153">G153: Making the text easier to read</a></li>
-      <li><a href="general/G155">G155: Providing a checkbox in addition to a submit button</a></li>
-      <li><a href="general/G156">G156: Using a technology that has commonly-available user agents that can change the foreground
-            and background of blocks of text</a></li>
-      <li><a href="general/G157">G157: Incorporating a live audio captioning service into a Web page</a></li>
-      <li><a href="general/G158">G158: Providing an alternative for time-based media for audio-only content</a></li>
-      <li><a href="general/G159">G159: Providing an alternative for time-based media for video-only content</a></li>
-      <li><a href="general/G160">G160: Providing sign language versions of information, ideas, and processes that must be
-            understood in order to use the content</a></li>
-      <li><a href="general/G161">G161: Providing a search function to help users find content</a></li>
-      <li><a href="general/G162">G162: Positioning labels to maximize predictability of relationships</a></li>
-      <li><a href="general/G163">G163: Using standard diacritical marks that can be turned off</a></li>
-      <li><a href="general/G164">G164: Providing a stated time within which an online request (or transaction) may be amended
-            or canceled by the user after making the request</a></li>
-      <li><a href="general/G165">G165: Using the default focus indicator for the platform so that high visibility default
-            focus indicators will carry over</a></li>
-      <li><a href="general/G166">G166: Providing audio that describes the important video content and describing it as such</a></li>
-      <li><a href="general/G167">G167: Using an adjacent button to label the purpose of a field</a></li>
-      <li><a href="general/G168">G168: Requesting confirmation to continue with selected action</a></li>
-      <li><a href="general/G169">G169: Aligning text on only one side</a></li>
-      <li><a href="general/G170">G170: Providing a control near the beginning of the Web page that turns off sounds that
-            play automatically</a></li>
-      <li><a href="general/G171">G171: Playing sounds only on user request</a></li>
-      <li><a href="general/G172">G172: Providing a mechanism to remove full justification of text</a></li>
-      <li><a href="general/G173">G173: Providing a version of a movie with audio descriptions</a></li>
-      <li><a href="general/G174">G174: Providing a control with a sufficient contrast ratio that allows users to switch to
-            a presentation that uses sufficient contrast</a></li>
-      <li><a href="general/G175">G175: Providing a multi color selection tool on the page for foreground and background colors</a></li>
-      <li><a href="general/G176">G176: Keeping the flashing area small enough</a></li>
-      <li><a href="general/G177">G177: Providing suggested correction text</a></li>
-      <li><a href="general/G178">G178: Providing controls on the Web page that allow users to incrementally change the size
-            of all text on the page up to 200 percent</a></li>
-      <li><a href="general/G179">G179: Ensuring that there is no loss of content or functionality when the text resizes and
-            text containers do not change their width</a></li>
-      <li><a href="general/G180">G180: Providing the user with a means to set the time limit to 10 times the default time
-            limit</a></li>
-      <li><a href="general/G181">G181: Encoding user data as hidden or encrypted data in a re-authorization page</a></li>
-      <li><a href="general/G182">G182: Ensuring that additional visual cues are available when text color differences are
-            used to convey information</a></li>
-      <li><a href="general/G183">G183: Using a contrast ratio of 3:1 with surrounding text and providing additional visual
-            cues on focus for links or controls where color alone is used to identify them</a></li>
-      <li><a href="general/G184">G184: Providing text instructions at the beginning of a form or set of fields that describes
-            the necessary input</a></li>
-      <li><a href="general/G185">G185: Linking to all of the pages on the site from the home page</a></li>
-      <li><a href="general/G186">G186: Using a control in the Web page that stops moving, blinking, or auto-updating content</a></li>
-      <li><a href="general/G187">G187: Using a technology to include blinking content that can be turned off via the user
-            agent</a></li>
-      <li><a href="general/G188">G188: Providing a button on the page to increase line spaces and paragraph spaces</a></li>
-      <li><a href="general/G189">G189: Providing a control near the beginning of the Web page that changes the link text</a></li>
-      <li><a href="general/G190">G190: Providing a link adjacent to or associated with a non-conforming object that links
-            to a conforming alternate version</a></li>
-      <li><a href="general/G191">G191: Providing a link, button, or other mechanism that reloads the page without any blinking
-            content</a></li>
-      <li><a href="general/G192">G192: Fully conforming to specifications</a></li>
-      <li><a href="general/G193">G193: Providing help by an assistant in the Web page</a></li>
-      <li><a href="general/G194">G194: Providing spell checking and suggestions for text input</a></li>
-      <li><a href="general/G195">G195: Using an author-supplied, highly visible focus indicator</a></li>
-      <li><a href="general/G196">G196: Using a text alternative on one item within a group of images that describes all items
-            in the group</a></li>
-      <li><a href="general/G197">G197: Using labels, names, and text alternatives consistently for content that has the same
-            functionality</a></li>
-      <li><a href="general/G198">G198: Providing a way for the user to turn the time limit off</a></li>
-      <li><a href="general/G199">G199: Providing success feedback when data is submitted successfully</a></li>
-      <li><a href="general/G200">G200: Opening new windows and tabs from a link only when necessary</a></li>
-      <li><a href="general/G201">G201: Giving users advanced warning when opening a new window</a></li>
-      <li><a href="general/G202">G202: Ensuring keyboard control for all functionality</a></li>
-      <li><a href="general/G203">G203: Using a static text alternative to describe a talking head video</a></li>
-      <li><a href="general/G204">G204: Not interfering with the user agent's reflow of text as the viewing window is narrowed</a></li>
-      <li><a href="general/G205">G205: Including a text cue for colored form control labels</a></li>
-      <li><a href="general/G206">G206: Providing options within the content to switch to a layout that does not require the
-            user to scroll horizontally to read a line of text</a></li>
-      <li><a href="general/G207">G207: Ensuring that a contrast ratio of 3:1 is provided for icons</a></li>
-      <li><a href="general/G208">G208: Including the text of the visible label as part of the accessible name</a></li>
-      <li><a href="general/G209">G209: Provide sufficient contrast at the boundaries between adjoining colors</a></li>
-      <li><a href="general/G210">G210: Ensuring that drag-and-drop actions can be cancelled</a></li>
-      <li><a href="general/G211">G211: Matching the accessible name to the visible label</a></li>
-      <li><a href="general/G212">G212: Using native controls to ensure functionality is triggered on the up-event.</a></li>
-      <li><a href="general/G213">G213: Provide conventional controls and an application setting for motion activated input</a></li>
-      <li><a href="general/G214">G214: Using a control to allow access to content in different orientations which is otherwise
-            restricted</a></li>
-      <li><a href="general/G215">G215: Providing controls to achieve the same result as path based or multipoint gestures</a></li>
-      <li><a href="general/G216">G216: Providing single point activation for a control slider</a></li>
-      <li><a href="general/G217">G217: Providing a mechanism to allow users to remap or turn off character key shortcuts</a></li>
-      <li><a href="general/G218">G218: Email link authentication</a></li>
-   </ul>
-   <h3 id="html">HTML Techniques<span class="permalink"><a href="#html" aria-label="Permalink for HTML Techniques" title="Permalink for HTML Techniques"><span>§</span></a></span></h3>
-   <ul>
-      <li><a href="html/H2">H2: Combining adjacent image and text links for the same resource</a></li>
-      <li><a href="html/H4">H4: Creating a logical tab order through links, form controls, and objects</a></li>
-      <li><a href="html/H24">H24:  Providing text alternatives for the area elements of image maps </a></li>
-      <li><a href="html/H25">H25: Providing a title using the title element</a></li>
-      <li><a href="html/H28">H28: Providing definitions for abbreviations by using the abbr element</a></li>
-      <li><a href="html/H30">H30: Providing link text that describes the purpose of a link for anchor elements</a></li>
-      <li><a href="html/H32">H32: Providing submit buttons</a></li>
-      <li><a href="html/H33">H33: Supplementing link text with the title attribute</a></li>
-      <li><a href="html/H34">H34: Using a Unicode right-to-left mark (RLM) or left-to-right mark (LRM) to mix text direction
-            inline</a></li>
-      <li><a href="html/H35">H35:  Providing text alternatives on applet elements </a></li>
-      <li><a href="html/H36">H36: Using alt attributes on images used as submit buttons</a></li>
-      <li><a href="html/H37">H37: Using alt attributes on img elements</a></li>
-      <li><a href="html/H39">H39: Using caption elements to associate data table captions with data tables</a></li>
-      <li><a href="html/H40">H40: Using description lists</a></li>
-      <li><a href="html/H42">H42: Using h1-h6 to identify headings</a></li>
-      <li><a href="html/H43">H43: Using id and headers attributes to associate data cells with header cells in data
-            tables</a></li>
-      <li><a href="html/H44">H44: Using label elements to associate text labels with form controls</a></li>
-      <li><a href="html/H45">H45: Using longdesc</a></li>
-      <li><a href="html/H46">H46: Using noembed with embed </a></li>
-      <li><a href="html/H48">H48: Using ol, ul and dl for lists or groups of links</a></li>
-      <li><a href="html/H49">H49: Using semantic markup to mark emphasized or special text</a></li>
-      <li><a href="html/H51">H51: Using table markup to present tabular information</a></li>
-      <li><a href="html/H53">H53: Using the body of the object element</a></li>
-      <li><a href="html/H54">H54: Using the dfn element to identify the defining instance of a word</a></li>
-      <li><a href="html/H56">H56: Using the dir attribute on an inline element to resolve problems with nested directional
-            runs</a></li>
-      <li><a href="html/H57">H57: Using the language attribute on the HTML element</a></li>
-      <li><a href="html/H58">H58: Using language attributes to identify changes in the human language </a></li>
-      <li><a href="html/H59">H59: Using the link element and navigation tools</a></li>
-      <li><a href="html/H60">H60: Using the link element to link to a glossary</a></li>
-      <li><a href="html/H62">H62: Using the ruby element</a></li>
-      <li><a href="html/H63">H63: Using the scope attribute to associate header cells and data cells in data tables</a></li>
-      <li><a href="html/H64">H64: Using the title attribute of the frame and iframe elements</a></li>
-      <li><a href="html/H65">H65: Using the title attribute to identify form controls when the label element cannot
-            be used</a></li>
-      <li><a href="html/H67">H67: Using null alt text and no title attribute on img elements for images that AT should
-            ignore</a></li>
-      <li><a href="html/H69">H69: Providing heading elements at the beginning of each section of content</a></li>
-      <li><a href="html/H70">H70: Using frame elements to group blocks of repeated material</a></li>
-      <li><a href="html/H71">H71:  Providing a description for groups of form controls using fieldset and legend elements
-            </a></li>
-      <li><a href="html/H73">H73: Using the summary attribute of the table element to give an overview of data tables</a></li>
-      <li><a href="html/H74">H74: Ensuring that opening and closing tags are used according to specification</a></li>
-      <li><a href="html/H75">H75: Ensuring that Web pages are well-formed</a></li>
-      <li><a href="html/H76">H76: Using meta refresh to create an instant client-side redirect</a></li>
-      <li><a href="html/H77">H77: Identifying the purpose of a link using link text combined with its enclosing list
-            item</a></li>
-      <li><a href="html/H78">H78: Identifying the purpose of a link using link text combined with its enclosing paragraph</a></li>
-      <li><a href="html/H79">H79: Identifying the purpose of a link in a data table using the link text combined with
-            its enclosing table cell and associated table header cells</a></li>
-      <li><a href="html/H80">H80: Identifying the purpose of a link using link text combined with the preceding heading
-            element</a></li>
-      <li><a href="html/H81">H81: Identifying the purpose of a link in a nested list using link text combined with the
-            parent list item under which the list is nested</a></li>
-      <li><a href="html/H83">H83: Using the target attribute to open a new window on user request and indicating this
-            in link text</a></li>
-      <li><a href="html/H84">H84: Using a button with a select element to perform an action</a></li>
-      <li><a href="html/H85">H85: Using OPTGROUP to group OPTION elements inside a SELECT</a></li>
-      <li><a href="html/H86">H86: Providing text alternatives for ASCII art, emoticons, and leetspeak</a></li>
-      <li><a href="html/H88">H88: Using HTML according to spec</a></li>
-      <li><a href="html/H89">H89: Using the title attribute to provide context-sensitive help</a></li>
-      <li><a href="html/H90">H90: Indicating required form controls using label or legend</a></li>
-      <li><a href="html/H91">H91: Using HTML form controls and links</a></li>
-      <li><a href="html/H93">H93: Ensuring that id attributes are unique on a Web page</a></li>
-      <li><a href="html/H94">H94: Ensuring that elements do not contain duplicate attributes</a></li>
-      <li><a href="html/H95">H95: Using the track element to provide captions</a></li>
-      <li><a href="html/H96">H96: Using the track element to provide audio descriptions</a></li>
-      <li><a href="html/H97">H97: Grouping related links using the nav element</a></li>
-      <li><a href="html/H98">H98: Using HTML 5.2 autocomplete attributes</a></li>
-   </ul>
-   <h3 id="pdf">PDF Techniques<span class="permalink"><a href="#pdf" aria-label="Permalink for PDF Techniques" title="Permalink for PDF Techniques"><span>§</span></a></span></h3>
-   <ul>
-      <li><a href="pdf/PDF1">PDF1: Applying text alternatives to images with the Alt entry in PDF documents</a></li>
-      <li><a href="pdf/PDF2">PDF2: Creating bookmarks in PDF documents</a></li>
-      <li><a href="pdf/PDF3">PDF3: Ensuring correct tab and reading order in PDF documents</a></li>
-      <li><a href="pdf/PDF4">PDF4: Hiding decorative images with the Artifact tag in PDF documents</a></li>
-      <li><a href="pdf/PDF5">PDF5: Indicating required form controls in PDF forms</a></li>
-      <li><a href="pdf/PDF6">PDF6: Using table elements for table markup in PDF Documents</a></li>
-      <li><a href="pdf/PDF7">PDF7: Performing OCR on a scanned PDF document to provide actual text</a></li>
-      <li><a href="pdf/PDF8">PDF8: Providing definitions for abbreviations via an E entry for a structure element</a></li>
-      <li><a href="pdf/PDF9">PDF9: Providing headings by marking content with heading tags in PDF documents</a></li>
-      <li><a href="pdf/PDF10">PDF10: Providing labels for interactive form controls in PDF documents</a></li>
-      <li><a href="pdf/PDF11">PDF11: Providing links and link text using the Link annotation and the /Link structure element
-            in PDF documents</a></li>
-      <li><a href="pdf/PDF12">PDF12: Providing name, role, value information for form fields in PDF documents</a></li>
-      <li><a href="pdf/PDF13">PDF13: Providing replacement text using the /Alt entry for links in PDF documents</a></li>
-      <li><a href="pdf/PDF14">PDF14: Providing running headers and footers in PDF documents</a></li>
-      <li><a href="pdf/PDF15">PDF15: Providing submit buttons with the submit-form action in PDF forms</a></li>
-      <li><a href="pdf/PDF16">PDF16: Setting the default language using the /Lang entry in the document catalog of a PDF
-            document</a></li>
-      <li><a href="pdf/PDF17">PDF17: Specifying consistent page numbering for PDF documents</a></li>
-      <li><a href="pdf/PDF18">PDF18: Specifying the document title using the Title entry in the document information dictionary
-            of a PDF document</a></li>
-      <li><a href="pdf/PDF19">PDF19: Specifying the language for a passage or phrase with the Lang entry in PDF documents</a></li>
-      <li><a href="pdf/PDF20">PDF20: Using Adobe Acrobat Pro's Table Editor to repair mistagged tables</a></li>
-      <li><a href="pdf/PDF21">PDF21: Using List tags for lists in PDF documents</a></li>
-      <li><a href="pdf/PDF22">PDF22: Indicating when user input falls outside the required format or values in PDF forms</a></li>
-      <li><a href="pdf/PDF23">PDF23: Providing interactive form controls in PDF documents</a></li>
-   </ul>
-   <h3 id="server-side-script">Server-Side Script Techniques<span class="permalink"><a href="#server-side-script" aria-label="Permalink for Server-Side Script Techniques" title="Permalink for Server-Side Script Techniques"><span>§</span></a></span></h3>
-   <ul>
-      <li><a href="server-side-script/SVR1">SVR1: Implementing automatic redirects on the server side instead of on the client side</a></li>
-      <li><a href="server-side-script/SVR2">SVR2: Using .htaccess to ensure that the only way to access non-conforming content is from
-            conforming content</a></li>
-      <li><a href="server-side-script/SVR3">SVR3: Using HTTP referer to ensure that the only way to access non-conforming content is
-            from conforming content</a></li>
-      <li><a href="server-side-script/SVR4">SVR4: Allowing users to provide preferences for the display of conforming alternate versions</a></li>
-      <li><a href="server-side-script/SVR5">SVR5: Specifying the default language in the HTTP header</a></li>
-   </ul>
-   <h3 id="silverlight">Silverlight Techniques<span class="permalink"><a href="#silverlight" aria-label="Permalink for Silverlight Techniques" title="Permalink for Silverlight Techniques"><span>§</span></a></span></h3>
-   <ul>
-      <li><a href="silverlight/SL1">SL1: Accessing Alternate Audio Tracks in Silverlight Media</a></li>
-      <li><a href="silverlight/SL2">SL2: Changing The Visual Focus Indicator in Silverlight</a></li>
-      <li><a href="silverlight/SL3">SL3: Controlling Silverlight MediaElement Audio Volume</a></li>
-      <li><a href="silverlight/SL4">SL4: Declaring Discrete Silverlight Objects to Specify Language Parts in the HTML DOM</a></li>
-      <li><a href="silverlight/SL5">SL5: Defining a Focusable Image Class for Silverlight</a></li>
-      <li><a href="silverlight/SL6">SL6: Defining a UI Automation Peer for a Custom Silverlight Control</a></li>
-      <li><a href="silverlight/SL7">SL7: Designing a Focused Visual State for Custom Silverlight Controls</a></li>
-      <li><a href="silverlight/SL8">SL8: Displaying HelpText in Silverlight User Interfaces</a></li>
-      <li><a href="silverlight/SL9">SL9: Handling Key Events to Enable Keyboard Functionality in Silverlight</a></li>
-      <li><a href="silverlight/SL10">SL10: Implementing a Submit-Form Pattern in Silverlight</a></li>
-      <li><a href="silverlight/SL11">SL11: Pausing or Stopping A Decorative Silverlight Animation</a></li>
-      <li><a href="silverlight/SL12">SL12: Pausing, Stopping, or Playing Media in Silverlight MediaElements</a></li>
-      <li><a href="silverlight/SL13">SL13: Providing A Style Switcher To Switch To High Contrast</a></li>
-      <li><a href="silverlight/SL14">SL14: Providing Custom Control Key Handling for Keyboard Functionality in Silverlight</a></li>
-      <li><a href="silverlight/SL15">SL15: Providing Keyboard Shortcuts that Work Across the Entire Silverlight Application</a></li>
-      <li><a href="silverlight/SL16">SL16: Providing Script-Embedded Text Captions for MediaElement Content</a></li>
-      <li><a href="silverlight/SL17">SL17: Providing Static Alternative Content for Silverlight Media Playing in a MediaElement</a></li>
-      <li><a href="silverlight/SL18">SL18: Providing Text Equivalent for Nontext Silverlight Controls With AutomationProperties.Name</a></li>
-      <li><a href="silverlight/SL19">SL19: Providing User Instructions With AutomationProperties.HelpText in Silverlight</a></li>
-      <li><a href="silverlight/SL20">SL20: Relying on Silverlight AutomationPeer Behavior to Set AutomationProperties.Name</a></li>
-      <li><a href="silverlight/SL21">SL21: Replacing A Silverlight Timed Animation With a Nonanimated Element</a></li>
-      <li><a href="silverlight/SL22">SL22: Supporting Browser Zoom in Silverlight</a></li>
-      <li><a href="silverlight/SL23">SL23: Using A Style Switcher to Increase Font Size of Silverlight Text Elements</a></li>
-      <li><a href="silverlight/SL24">SL24: Using AutoPlay to Keep Silverlight Media from Playing Automatically</a></li>
-      <li><a href="silverlight/SL25">SL25: Using Controls and Programmatic Focus to Bypass Blocks of Content in Silverlight</a></li>
-      <li><a href="silverlight/SL26">SL26: Using LabeledBy to Associate Labels and Targets in Silverlight</a></li>
-      <li><a href="silverlight/SL27">SL27: Using Language/Culture Properties as Exposed by Silverlight Applications and Assistive
-            Technologies</a></li>
-      <li><a href="silverlight/SL28">SL28: Using Separate Text-Format Text Captions for MediaElement Content</a></li>
-      <li><a href="silverlight/SL29">SL29: Using Silverlight "List" Controls to Define Blocks that can be Bypassed</a></li>
-      <li><a href="silverlight/SL30">SL30: Using Silverlight Control Compositing and AutomationProperties.Name</a></li>
-      <li><a href="silverlight/SL31">SL31: Using Silverlight Font Properties to Control Text Presentation</a></li>
-      <li><a href="silverlight/SL32">SL32: Using Silverlight Text Elements for Appropriate Accessibility Role</a></li>
-      <li><a href="silverlight/SL33">SL33: Using Well-Formed XAML to Define a Silverlight User Interface</a></li>
-      <li><a href="silverlight/SL34">SL34: Using the Silverlight Default Tab Sequence and Altering Tab Sequences With Properties</a></li>
-      <li><a href="silverlight/SL35">SL35: Using the Validation and ValidationSummary APIs to Implement Client Side Forms Validation
-            in Silverlight</a></li>
-   </ul>
-   <h3 id="smil">SMIL Techniques<span class="permalink"><a href="#smil" aria-label="Permalink for SMIL Techniques" title="Permalink for SMIL Techniques"><span>§</span></a></span></h3>
-   <ul>
-      <li><a href="smil/SM1">SM1: Adding extended audio description in SMIL 1.0</a></li>
-      <li><a href="smil/SM2">SM2: Adding extended audio description in SMIL 2.0</a></li>
-      <li><a href="smil/SM6">SM6: Providing audio description in SMIL 1.0</a></li>
-      <li><a href="smil/SM7">SM7: Providing audio description in SMIL 2.0</a></li>
-      <li><a href="smil/SM11">SM11: Providing captions through synchronized text streams in SMIL 1.0</a></li>
-      <li><a href="smil/SM12">SM12: Providing captions through synchronized text streams in SMIL 2.0</a></li>
-      <li><a href="smil/SM13">SM13: Providing sign language interpretation through synchronized video streams in SMIL
-            1.0</a></li>
-      <li><a href="smil/SM14">SM14: Providing sign language interpretation through synchronized video streams in SMIL
-            2.0</a></li>
-   </ul>
-   <h3 id="text">Plain-Text Techniques<span class="permalink"><a href="#text" aria-label="Permalink for Plain-Text Techniques" title="Permalink for Plain-Text Techniques"><span>§</span></a></span></h3>
-   <ul>
-      <li><a href="text/T1">T1: Using standard text formatting conventions for paragraphs</a></li>
-      <li><a href="text/T2">T2: Using standard text formatting conventions for lists</a></li>
-      <li><a href="text/T3">T3: Using standard text formatting conventions for headings</a></li>
-   </ul>
-</nav>
\ No newline at end of file
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000000..ada8090aeb
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "allowSyntheticDefaultImports": true,
+    "baseUrl": ".",
+    "module": "ES2022",
+    "moduleResolution": "Node",
+    "noEmit": true,
+    "strict": true,
+    "target": "ES2022",
+    "verbatimModuleSyntax": true
+  }
+}
diff --git a/understanding/20/abbreviations.html b/understanding/20/abbreviations.html
index 11135dccaa..f352d193b3 100644
--- a/understanding/20/abbreviations.html
+++ b/understanding/20/abbreviations.html
@@ -3,11 +3,20 @@
 <head>
    <meta charset="UTF-8"></meta>
    <title>Understanding Abbreviations</title>
-   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link>
+   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/>
 </head>
 <body>
    <h1>Understanding Abbreviations</h1>
    
+   <section id="brief">
+      <h2>In brief</h2>
+      <dl>
+         <dt>Goal</dt><dd>Users can identify and learn what abbreviations mean.</dd>
+         <dt>What to do</dt><dd>Provide the expanded form of abbreviations to users.</dd>
+         <dt>Why it's important</dt><dd>Some people, including those with cognitive disabilities, may not understand the shortened form of words.</dd> 
+      </dl>
+
+   </section>
    
    <section id="intent">
       <h2>Intent of Abbreviations</h2>
@@ -82,50 +91,17 @@ <h2>Benefits of Abbreviations</h2>
    <section id="examples">
       <h2>Examples of Abbreviations</h2>
       
-      
-      <ul>
-         
-         <li>
-            
-            <p>
-               								       
-               <strong>An abbreviation whose expansion is provided the first time the abbreviation appears
-                  in the content.
-               </strong>
-               							     
-            </p>
-            
-            <p>The name, "World Wide Web Consortium," appears as the first heading on the organization's
-               home page. The abbreviation, "W3C," is enclosed in parentheses in the same heading.
-               
-            </p>
-            
-         </li>
-         
-         <li>
-            
-            <p>
-               								       
-               <strong>A dictionary search form.</strong>
-               							     
-            </p>
-            
-            <p>A Web site includes a search form provided by an on-line acronym service. Users enter
+      <dl>
+         <dt>An abbreviation whose expansion is provided the first time the abbreviation appears
+            in the content</dt>
+         <dd>The name, "World Wide Web Consortium," appears as the first heading on the organization's
+               home page. The abbreviation, "W3C," is enclosed in parentheses in the same heading.</dd>
+         <dt>A dictionary search form</dt>
+         <dd>A Web site includes a search form provided by an on-line acronym service. Users enter
                an acronym and the form returns a list of possible expansions from the sources that
-               it searched. 
-            </p>
-            
-         </li>
-         
-         <li>
-            
-            <p>
-               								       
-               <strong>A medical Web site.</strong>
-               							     
-            </p>
-            
-            <p>A medical Web site provides information for both doctors and patients. The site includes
+               it searched.</dd>
+         <dt>A medical Web site</dt>
+         <dd>A medical Web site provides information for both doctors and patients. The site includes
                a set of cascading dictionaries;  a very specialized medical dictionary is first,
                followed by a second medical dictionary for the general public. The cascade also includes
                a list of acronyms and abbreviations that are unique to the site, and finally there
@@ -133,34 +109,13 @@ <h2>Examples of Abbreviations</h2>
                definitions for most words in the text. The specialized medical dictionary yields
                definitions of unusual medical terms. Definitions for words that appear in more than
                one dictionary are listed in the order of the cascade. The meaning of acronyms and
-               abbreviations is provided by the list of acronyms and abbreviations. 
-            </p>
-            
-         </li>
-         
-         <li>
-            
-            <p>
-               								       
-               <strong>
-                  Expanded forms of Abbreviations.
-                  
-               </strong>
-               							     
-            </p>
-            
-            <p>
-               The expanded form of each abbreviation is available in a programmatically determinable
+               abbreviations is provided by the list of acronyms and abbreviations.</dd>
+         <dt>Expanded forms of Abbreviations</dt>
+         <dd>The expanded form of each abbreviation is available in a programmatically determinable
                manner. User agents that speak the text can use the expanded form to announce the
                abbreviation. Other user agents might make the expanded form available as a tooltip
-               or as contextual help for the abbreviation. 
-               
-               
-            </p>
-            
-         </li>
-         
-      </ul>
+               or as contextual help for the abbreviation.</dd>
+      </dl>
       
    </section>
    
@@ -200,13 +155,13 @@ <h4>Situation A: If the abbreviation has only one meaning within the Web page:
                
             </h4>
             
-            <ol>
+            <ul>
                
                <li>
                   
                   <p> 
                      
-                     <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G102" class="general">Providing the expansion or explanation of an abbreviation</a> for the first occurrence of the abbreviation in a Web page using one of the following
+                     <a href="../Techniques/general/G102" class="general">Providing the expansion or explanation of an abbreviation</a> for the first occurrence of the abbreviation in a Web page using one of the following
                      techniques:
                      
                   </p>
@@ -214,26 +169,22 @@ <h4>Situation A: If the abbreviation has only one meaning within the Web page:
                   <ul>
                      
                      <li>
-                        												               
-                        <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G97" class="general">Providing the abbreviation immediately following the expanded form</a>
-                        											             
+                        <a href="../Techniques/general/G97" class="general">Providing the abbreviation immediately following the expanded form</a>
                      </li>
                      
                      <li>
-                        												               
-                        <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G55" class="general">Linking to definitions</a>
-                        											             
+                        <a href="../Techniques/general/G55" class="general">Linking to definitions</a>
                      </li>
                      
                      <li>
                         												               
-                        <a href="https://www.w3.org/WAI/WCAG21/Techniques/html/H28" class="html">Providing definitions for abbreviations by using the abbr and acronym elements</a>
+                        <a href="../Techniques/html/H28" class="html">Providing definitions for abbreviations by using the abbr and acronym elements</a>
                         											             
                      </li>
                      
                      <li>
                         
-                        <a href="https://www.w3.org/WAI/WCAG21/Techniques/pdf/PDF8" class="pdf"></a>
+                        <a href="../Techniques/pdf/PDF8" class="pdf"></a>
                         
                      </li>
                      
@@ -246,7 +197,7 @@ <h4>Situation A: If the abbreviation has only one meaning within the Web page:
                   
                   <p> 
                      
-                     <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G102" class="general">Providing the expansion or explanation of an abbreviation</a> for all occurrences of the abbreviation in a Web page using one of the following
+                     <a href="../Techniques/general/G102" class="general">Providing the expansion or explanation of an abbreviation</a> for all occurrences of the abbreviation in a Web page using one of the following
                      techniques:
                      
                   </p>
@@ -255,25 +206,20 @@ <h4>Situation A: If the abbreviation has only one meaning within the Web page:
                      
                      <li>
                         												               
-                        <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G55" class="general">Linking to definitions</a>
+                        <a href="../Techniques/general/G55" class="general">Linking to definitions</a>
                         											             
                      </li>
                      
                      <li>
                         												               
-                        <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G62" class="general">Providing a Glossary</a>
+                        <a href="../Techniques/general/G62" class="general">Providing a Glossary</a>
                         											             
                      </li>
                      
-                     <li>
-                        												               
-                        <a href="https://www.w3.org/WAI/WCAG21/Techniques/html/H60" class="html">Using the link element to link to a glossary</a>
-                        											             
-                     </li>
                      
                      <li>
                         												               
-                        <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G70" class="general">
+                        <a href="../Techniques/general/G70" class="general">
                            Providing a function to search an on-line dictionary
                         </a>
                         											             
@@ -281,13 +227,13 @@ <h4>Situation A: If the abbreviation has only one meaning within the Web page:
                      
                      <li>
                         												               
-                        <a href="https://www.w3.org/WAI/WCAG21/Techniques/html/H28" class="html">Providing definitions for abbreviations by using the abbr and acronym elements</a>
+                        <a href="../Techniques/html/H28" class="html">Providing definitions for abbreviations by using the abbr and acronym elements</a>
                         											             
                      </li>
                      
                      <li>
                         
-                        <a href="https://www.w3.org/WAI/WCAG21/Techniques/pdf/PDF8" class="pdf"></a>
+                        <a href="../Techniques/pdf/PDF8" class="pdf"></a>
                         
                      </li>
                      
@@ -296,7 +242,7 @@ <h4>Situation A: If the abbreviation has only one meaning within the Web page:
                   
                </li>
                
-            </ol>
+            </ul>
             
          </section>
          
@@ -306,13 +252,13 @@ <h4>Situation B: If the abbreviation means different things within the same Web
                
             </h4>
             
-            <ol>
+            <ul>
                
                <li>
                   
                   <p> 
                      
-                     <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G102" class="general">Providing the expansion or explanation of an abbreviation</a> for all occurrences of abbreviations in a Web page using one of the following techniques:
+                     <a href="../Techniques/general/G102" class="general">Providing the expansion or explanation of an abbreviation</a> for all occurrences of abbreviations in a Web page using one of the following techniques:
                      
                   </p>
                   
@@ -320,19 +266,19 @@ <h4>Situation B: If the abbreviation means different things within the same Web
                      
                      <li>
                         												               
-                        <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G55" class="general">Linking to definitions</a>
+                        <a href="../Techniques/general/G55" class="general">Linking to definitions</a>
                         											             
                      </li>
                      
                      <li>
                         												               
-                        <a href="https://www.w3.org/WAI/WCAG21/Techniques/html/H28" class="html">Providing definitions for abbreviations by using the abbr and acronym elements</a>
+                        <a href="../Techniques/html/H28" class="html">Providing definitions for abbreviations by using the abbr and acronym elements</a>
                         											             
                      </li>
                      
                      <li>
                         
-                        <a href="https://www.w3.org/WAI/WCAG21/Techniques/pdf/PDF8" class="pdf"></a>
+                        <a href="../Techniques/pdf/PDF8" class="pdf"></a>
                         
                      </li>
                      
@@ -341,7 +287,7 @@ <h4>Situation B: If the abbreviation means different things within the same Web
                   
                </li>
                
-            </ol>
+            </ul>
             
          </section>
          
diff --git a/understanding/20/accessibility-support-documenting.html b/understanding/20/accessibility-support-documenting.html
index 4add356d08..8c5289509d 100644
--- a/understanding/20/accessibility-support-documenting.html
+++ b/understanding/20/accessibility-support-documenting.html
@@ -1,8 +1,8 @@
 <!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
 <head xmlns:wcag="https://www.w3.org/WAI/GL/">
-   <meta charset="UTF-8" />
+   <meta charset="UTF-8"/>
    <title>Documenting Accessibility Support for Uses of a Web Technology</title>
-   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link>
+   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/>
 </head>
 <body xmlns:wcag="https://www.w3.org/WAI/GL/">
    <h1>Documenting Accessibility Support for Uses of a Web Technology</h1>
diff --git a/understanding/20/adaptable.html b/understanding/20/adaptable.html
index 65f742794b..e2baa4ce28 100644
--- a/understanding/20/adaptable.html
+++ b/understanding/20/adaptable.html
@@ -3,7 +3,7 @@
 <head>
    <meta charset="UTF-8"></meta>
    <title>Understanding Adaptable</title>
-   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link>
+   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/>
 </head>
 <body>
    <h1>Understanding Adaptable</h1>
diff --git a/understanding/20/audio-control.html b/understanding/20/audio-control.html
index e750e4a0dc..5ebd2fc3b4 100644
--- a/understanding/20/audio-control.html
+++ b/understanding/20/audio-control.html
@@ -3,11 +3,20 @@
 <head>
    <meta charset="UTF-8"></meta>
    <title>Understanding Audio Control</title>
-   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link>
+   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/>
 </head>
 <body>
    <h1>Understanding Audio Control</h1>
    
+   <section id="brief">
+		<h2>In brief</h2>
+		<dl>
+         <dt>Goal</dt><dd>A page that plays music or sounds doesn't disrupt people.</dd>
+         <dt>What to do</dt><dd>If you play audio content automatically, let people turn it down or off.</dd>
+         <dt>Why it's important</dt><dd>Sound distracts some people, and also interferes with screen readers.</dd> 
+      </dl>
+
+   </section>
    
    <section id="intent">
       <h2>Intent of Audio Control</h2>
@@ -17,8 +26,10 @@ <h2>Intent of Audio Control</h2>
          if there is other audio playing at the same time. This difficulty is exacerbated when
          the screen reader's speech output is software based (as most are today) and is controlled
          via the same volume control as the sound. Therefore, it is important that the user
-         be able to turn off the background sound. Note: Having control of the volume includes
-         being able to reduce its volume to zero.
+         be able to turn off the background sound. 
+      </p>
+      <p>Having control of the volume includes
+         being able to reduce its volume to zero. Muting the system volume is not "pausing or stopping" the autoplay audio. Both the "pause or stop" and control of audio volume need to be independent of the overall system volume. 
       </p>
       
       <div class="note">
@@ -36,7 +47,7 @@ <h2>Intent of Audio Control</h2>
       </div>
       
       <p>See also 
-         <a href="low-or-no-background-audio">1.4.2: Low or No Background Audio</a>.
+         <a href="low-or-no-background-audio">1.4.7: Low or No Background Audio</a>.
       </p>
       
       
@@ -64,13 +75,10 @@ <h2>Benefits of Audio Control</h2>
    <section id="examples">
       <h2>Examples of Audio Control</h2>
       
-      
       <ul>
-         
          <li>An audio file begins playing automatically when a page is opened. However, the audio
             can be stopped by the user by selecting a "silent" link at the top of the page.
          </li>
-         
       </ul>
       
    </section>
@@ -89,39 +97,27 @@ <h2>Techniques for Audio Control</h2>
          <h3>Sufficient Techniques for Audio Control</h3>
          
          
-         <ol>
+         <ul>
             
             <li>
                									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G60" class="general">Playing a sound that turns off automatically within three seconds</a>
+               <a href="../Techniques/general/G60" class="general">Playing a sound that turns off automatically within three seconds</a>
                								       
             </li>
             
             <li>
                									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G170" class="general">Providing a control near the top of the Web page that turns off sounds that play automatically</a>
+               <a href="../Techniques/general/G170" class="general">Providing a control near the top of the Web page that turns off sounds that play automatically</a>
                								       
             </li>
             
             <li>
                									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G171" class="general">Playing sounds only on user request</a>
+               <a href="../Techniques/general/G171" class="general">Playing sounds only on user request</a>
                								       
             </li>
             
-            <li>
-               
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/silverlight/SL24" class="silverlight"></a>
-               
-            </li>
-            
-            <li>
-               
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/silverlight/SL3" class="silverlight"></a>
-               
-            </li>
-            
-         </ol>
+         </ul>
          
       </section>
       
@@ -139,7 +135,7 @@ <h3>Failures for Audio Control</h3>
             
             <li>
                									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/failures/F23" class="failure">Failure due to playing a sound longer than 3 seconds where there is no mechanism to
+               <a href="../Techniques/failures/F23" class="failure">Failure due to playing a sound longer than 3 seconds where there is no mechanism to
                   turn it off
                </a>
                								       
@@ -147,7 +143,7 @@ <h3>Failures for Audio Control</h3>
             
             <li>
                				    
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/failures/F93" class="failure"></a>
+               <a href="../Techniques/failures/F93" class="failure"></a>
                
             </li>
             
diff --git a/understanding/20/audio-description-or-media-alternative-prerecorded.html b/understanding/20/audio-description-or-media-alternative-prerecorded.html
index aaa04b05ab..2fcc045379 100644
--- a/understanding/20/audio-description-or-media-alternative-prerecorded.html
+++ b/understanding/20/audio-description-or-media-alternative-prerecorded.html
@@ -3,11 +3,20 @@
 <head>
    <meta charset="UTF-8"></meta>
    <title>Understanding Audio Description or Media Alternative (Prerecorded)</title>
-   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link>
+   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/>
 </head>
 <body>
    <h1>Understanding Audio Description or Media Alternative (Prerecorded)</h1>
    
+   <section id="brief">
+		<h2>In brief</h2>
+		<dl>
+         <dt>Goal</dt><dd>Prerecorded videos can be understood by more people.</dd>
+         <dt>What to do</dt><dd>Provide a description of the visual content in videos.</dd>
+         <dt>Why it's important</dt><dd>People who are blind or who cannot understand the visual content can have it described.</dd> 
+      </dl>
+
+   </section>
    
    <section id="intent">
       <h2>Intent of Audio Description or Media Alternative (Prerecorded)</h2>
@@ -70,10 +79,10 @@ <h2>Intent of Audio Description or Media Alternative (Prerecorded)</h2>
          
       </div>
       
-      <p>See also 
-         <a href="audio-description-prerecorded">1.2.2: Audio Description (Prerecorded)</a>, 
-         <a href="extended-audio-description-prerecorded">1.2.2: Extended Audio Description (Prerecorded)</a> and 
-         <a href="media-alternative-prerecorded">1.2.3: Media Alternative (Prerecorded)</a>.
+      <p>See also
+         <a href="audio-description-prerecorded">1.2.5 Audio Description (Prerecorded)</a>,
+         <a href="extended-audio-description-prerecorded">1.2.7 Extended Audio Description (Prerecorded)</a> and
+         <a href="media-alternative-prerecorded">1.2.8 Media Alternative (Prerecorded)</a>.
       </p>
       
       
@@ -95,69 +104,41 @@ <h2>Benefits of Audio Description or Media Alternative (Prerecorded)</h2>
    
    <section id="examples">
       <h2>Examples of Audio Description or Media Alternative (Prerecorded)</h2>
-      
-      
-      <ul>
-         
-         <li>
-            
+
+      <dl>
+         <dt>A movie with audio description</dt>
+         <dd>
             <p>
-               								       
-               <strong>A movie with audio description.</strong>
-               							     
-            </p>
-            
-            <p> 
-               
                <strong>Describer: </strong>A title, "Teaching Evolution Case Studies. Bonnie Chen." A teacher shows photographs
                of birds with long, thin beaks.
             </p>
             
             <p> 
-               
                <strong>Bonnie Chen: </strong>"These photos were all taken at the Everglades."
             </p>
             
             <p> 
-               
                <strong>Describer: </strong>The teacher hands each student two flat, thin wooden sticks.
             </p>
             
             <p> 
-               
                <strong>Bonnie Chen: </strong>"Today you will pretend to be a species of wading bird that has a beak like this."
             </p>
             
             <p> 
-               
                <strong>Describer: </strong>The teacher holds two of the sticks to her mouth making the shape of a beak.
             </p>
             
-            <p>Transcript of audio based on the first few minutes of "
-               <a href="http://www.pbs.org/wgbh/evolution/educators/teachstuds/tvideos.html">Teaching Evolution Case Studies, Bonnie Chen</a>" (copyright WGBH and Clear Blue Sky Productions, Inc.)
-            </p>
-            
-         </li>
-         
-         <li>
-            
-            <p>
-               								       
-               <strong>An alternative for time-based media for a training video</strong>
-               							     
-            </p>
-            
-            <p>A company purchases a Training video for use by its employees and puts it on the companies
+            <p>Transcript of audio based on the first few minutes of "<a href="https://www.pbs.org/wgbh/evolution/educators/teachstuds/tvideos.html">Teaching Evolution Case Studies, Bonnie Chen</a>" (copyright WGBH and Clear Blue Sky Productions, Inc.)</p>
+            </dd>
+         <dt>An alternative for time-based media for a training video</dt>
+         <dd>A company purchases a Training video for use by its employees and puts it on the companies
                intranet. The video involves explaining use of a new technology and has a person talking
                and showing things at the same time. Since there is no place to insert audio description
                of the visual demonstrations during gaps in dialogue, the company provides an alternative
                for time-based media that all employees, including those who cannot see the demonstrations,
-               can use to better understand what is being presented. 
-            </p>
-            
-         </li>
-         
-      </ul>
+               can use to better understand what is being presented.</dd>
+</dl>
       
    </section>
    
@@ -209,29 +190,23 @@ <h2>Techniques for Audio Description or Media Alternative (Prerecorded)</h2>
          <h3>Sufficient Techniques for Audio Description or Media Alternative (Prerecorded)</h3>
          
          
-         <ol>
+         <ul>
             
             <li>
                
                <p> 
                   
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G69" class="general">Providing an alternative for time-based media including any interaction</a> using one of the following techniques
+                  <a href="../Techniques/general/G69" class="general">Providing an alternative for time-based media including any interaction</a> using one of the following techniques
                </p>
                
                <ul>
                   
                   <li>
                      											             
-                     <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G58" class="general">Placing a link to the transcript immediately next to the non-text content</a>
+                     <a href="../Techniques/general/G58" class="general">Placing a link to the transcript immediately next to the non-text content</a>
                      										           
                   </li>
                   
-                  <li>
-                     
-                     <a href="https://www.w3.org/WAI/WCAG21/Techniques/silverlight/SL17" class="silverlight"></a>
-                     
-                  </li>
-                  
                </ul>
                
             </li>
@@ -246,7 +221,7 @@ <h3>Sufficient Techniques for Audio Description or Media Alternative (Prerecorde
                   
                   <li>
                      											             
-                     <a href="https://www.w3.org/WAI/WCAG21/Techniques/html/H53" class="html">Using the body of the object element</a>
+                     <a href="../Techniques/html/H53" class="html">Using the body of the object element</a>
                      										           
                   </li>
                   
@@ -256,47 +231,31 @@ <h3>Sufficient Techniques for Audio Description or Media Alternative (Prerecorde
             
             <li>
                									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G78" class="general">G78: Providing a second, user-selectable, audio track that includes audio descriptions</a>
+               <a href="../Techniques/general/G78" class="general">G78: Providing a second, user-selectable, audio track that includes audio descriptions</a>
                								       
             </li>
             
-            <li>
-               
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G78" class="general"></a> 
-               
-               <strong>AND</strong> 
-               
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/silverlight/SL1" class="silverlight"></a>
-               
-            </li>
-            
             <li>
                
                <p> 
                   
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G173" class="general">Providing a version of a movie with audio descriptions</a> using one of the following:
+                  <a href="../Techniques/general/G173" class="general">Providing a version of a movie with audio descriptions</a> using one of the following:
                </p>
                
                <ul>
                   
                   <li>
                      											             
-                     <a href="https://www.w3.org/WAI/WCAG21/Techniques/smil/SM6" class="smil">Providing audio description in SMIL 1.0</a>
+                     <a href="../Techniques/smil/SM6" class="smil">Providing audio description in SMIL 1.0</a>
                      										           
                   </li>
                   
                   <li>
                      											             
-                     <a href="https://www.w3.org/WAI/WCAG21/Techniques/smil/SM7" class="smil">Providing audio description in SMIL 2.0</a>
+                     <a href="../Techniques/smil/SM7" class="smil">Providing audio description in SMIL 2.0</a>
                      										           
                   </li>
                   
-                  <li>
-                     
-                     <a href="https://www.w3.org/WAI/WCAG21/Techniques/silverlight/SL1" class="silverlight"></a>
-                     
-                  </li>
-                  
                   <li>Using any player that supports audio and video</li>
                   
                </ul>
@@ -307,29 +266,23 @@ <h3>Sufficient Techniques for Audio Description or Media Alternative (Prerecorde
                
                <p> 
                   
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G8" class="general">Providing a movie with extended audio descriptions</a> using one of the following:    
+                  <a href="../Techniques/general/G8" class="general">Providing a movie with extended audio descriptions</a> using one of the following:    
                </p>
                
                <ul>
                   
                   <li>
                      											             
-                     <a href="https://www.w3.org/WAI/WCAG21/Techniques/smil/SM1" class="smil">Adding extended audio description in SMIL 1.0</a>
+                     <a href="../Techniques/smil/SM1" class="smil">Adding extended audio description in SMIL 1.0</a>
                      										           
                   </li>
                   
                   <li>
                      											             
-                     <a href="https://www.w3.org/WAI/WCAG21/Techniques/smil/SM2" class="smil">Adding extended audio description in SMIL 2.0</a>
+                     <a href="../Techniques/smil/SM2" class="smil">Adding extended audio description in SMIL 2.0</a>
                      										           
                   </li>
                   
-                  <li>
-                     
-                     <a href="https://www.w3.org/WAI/WCAG21/Techniques/silverlight/SL1" class="silverlight"></a>
-                     
-                  </li>
-                  
                   <li>Using any player that supports audio and video</li>
                   
                </ul>
@@ -338,11 +291,11 @@ <h3>Sufficient Techniques for Audio Description or Media Alternative (Prerecorde
             
             <li>
                
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G203" class="general"></a>
+               <a href="../Techniques/general/G203" class="general"></a>
                
             </li>
             
-         </ol>
+         </ul>
          
       </section>
       
@@ -354,7 +307,7 @@ <h3>Additional Techniques (Advisory) for Audio Description or Media Alternative
             
             <li>
                			             
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/html/H96" class="html"></a>
+               <a href="../Techniques/html/H96" class="html"></a>
                		             
             </li>
             
diff --git a/understanding/20/audio-description-prerecorded.html b/understanding/20/audio-description-prerecorded.html
index 1b2547e9f3..8a0c46bc84 100644
--- a/understanding/20/audio-description-prerecorded.html
+++ b/understanding/20/audio-description-prerecorded.html
@@ -3,11 +3,20 @@
 <head>
    <meta charset="UTF-8"></meta>
    <title>Understanding Audio Description (Prerecorded)</title>
-   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link>
+   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/>
 </head>
 <body>
    <h1>Understanding Audio Description (Prerecorded)</h1>
    
+   <section id="brief">
+		<h2>In brief</h2>
+		<dl>
+         <dt>Goal</dt><dd>Videos can be played with audio descriptions.</dd>
+         <dt>What to do</dt><dd>Provide a synchronized spoken description of the visual content in videos.</dd>
+         <dt>Why it's important</dt><dd>People who cannot see or understand the visual content can hear about it while playing videos.</dd> 
+      </dl>
+
+   </section>
    
    <section id="intent">
       <h2>Intent of Audio Description (Prerecorded)</h2>
@@ -67,19 +76,10 @@ <h2>Benefits of Audio Description (Prerecorded)</h2>
    <section id="examples">
       <h2>Examples of Audio Description (Prerecorded)</h2>
       
-      
-      <ul>
-         
-         <li>
-            
+      <dl>
+         <dt>A movie with audio description</dt>
+         <dd> 
             <p>
-               								       
-               <strong>A movie with audio description.</strong>
-               							     
-            </p>
-            
-            <p> 
-               
                <strong>Describer: </strong>A title, "Teaching Evolution Case Studies. Bonnie Chen." A teacher shows photographs
                of birds with long, thin beaks.
             </p>
@@ -104,13 +104,9 @@ <h2>Examples of Audio Description (Prerecorded)</h2>
                <strong>Describer: </strong>The teacher holds two of the sticks to her mouth making the shape of a beak.
             </p>
             
-            <p>Transcript of audio based on the first few minutes of "
-               <a href="http://www.pbs.org/wgbh/evolution/educators/teachstuds/tvideos.html">Teaching Evolution Case Studies, Bonnie Chen</a>" (copyright WGBH and Clear Blue Sky Productions, Inc.)
-            </p>
-            
-         </li>
-         
-      </ul>
+            <p>Transcript of audio based on the first few minutes of "<a href="http://www.pbs.org/wgbh/evolution/educators/teachstuds/tvideos.html">Teaching Evolution Case Studies, Bonnie Chen</a>" (copyright WGBH and Clear Blue Sky Productions, Inc.)</p>
+         </dd>
+      </dl>
       
    </section>
    
@@ -162,42 +158,32 @@ <h2>Techniques for Audio Description (Prerecorded)</h2>
          <h3>Sufficient Techniques for Audio Description (Prerecorded)</h3>
          
          
-         <ol>
+         <ul>
             
             <li>
                									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G78" class="general">G78: Providing a second, user-selectable, audio track that includes audio descriptions</a>
+               <a href="../Techniques/general/G78" class="general">G78: Providing a second, user-selectable, audio track that includes audio descriptions</a>
                								       
             </li>
             
-            <li>
-               
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G78" class="general"></a> 
-               
-               <strong>AND</strong> 
-               
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/silverlight/SL1" class="silverlight"></a>
-               
-            </li>
-            
             <li>
                
                <p> 
                   
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G173" class="general">Providing a version of a movie with audio descriptions</a> using one of the following:
+                  <a href="../Techniques/general/G173" class="general">Providing a version of a movie with audio descriptions</a> using one of the following:
                </p>
                
                <ul>
                   
                   <li>
                      											             
-                     <a href="https://www.w3.org/WAI/WCAG21/Techniques/smil/SM6" class="smil">Providing audio description in SMIL 1.0</a>
+                     <a href="../Techniques/smil/SM6" class="smil">Providing audio description in SMIL 1.0</a>
                      										           
                   </li>
                   
                   <li>
                      											             
-                     <a href="https://www.w3.org/WAI/WCAG21/Techniques/smil/SM7" class="smil">Providing audio description in SMIL 2.0</a>
+                     <a href="../Techniques/smil/SM7" class="smil">Providing audio description in SMIL 2.0</a>
                      										           
                   </li>
                   
@@ -211,20 +197,20 @@ <h3>Sufficient Techniques for Audio Description (Prerecorded)</h3>
                
                <p> 
                   
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G8" class="general">Providing a movie with extended audio descriptions</a> using one of the following:    
+                  <a href="../Techniques/general/G8" class="general">Providing a movie with extended audio descriptions</a> using one of the following:    
                </p>
                
                <ul>
                   
                   <li>
                      											             
-                     <a href="https://www.w3.org/WAI/WCAG21/Techniques/smil/SM1" class="smil">Adding extended audio description in SMIL 1.0</a>
+                     <a href="../Techniques/smil/SM1" class="smil">Adding extended audio description in SMIL 1.0</a>
                      										           
                   </li>
                   
                   <li>
                      											             
-                     <a href="https://www.w3.org/WAI/WCAG21/Techniques/smil/SM2" class="smil">Adding extended audio description in SMIL 2.0</a>
+                     <a href="../Techniques/smil/SM2" class="smil">Adding extended audio description in SMIL 2.0</a>
                      										           
                   </li>
                   
@@ -236,11 +222,11 @@ <h3>Sufficient Techniques for Audio Description (Prerecorded)</h3>
             
             <li>
                
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G203" class="general"></a>
+               <a href="../Techniques/general/G203" class="general"></a>
                
             </li>
             
-         </ol>
+         </ul>
          
       </section>
       
@@ -252,7 +238,7 @@ <h3>Additional Techniques (Advisory) for Audio Description (Prerecorded)</h3>
             
             <li>
                			             
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/html/H96" class="html"></a>
+               <a href="../Techniques/html/H96" class="html"></a>
                		             
             </li>
             
diff --git a/understanding/20/audio-only-and-video-only-prerecorded.html b/understanding/20/audio-only-and-video-only-prerecorded.html
index f038ac78fc..caf848fe77 100644
--- a/understanding/20/audio-only-and-video-only-prerecorded.html
+++ b/understanding/20/audio-only-and-video-only-prerecorded.html
@@ -3,12 +3,21 @@
 <head>
    <meta charset="UTF-8"></meta>
    <title>Understanding Audio-only and Video-only (Prerecorded)</title>
-   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link>
+   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/>
 </head>
 <body>
    <h1>Understanding Audio-only and Video-only (Prerecorded)</h1>
    
-   
+   <section id="brief">
+		<h2>In brief</h2>
+		<dl>
+         <dt>Goal</dt><dd>Audio and video-only content can be understood by more people.</dd>
+         <dt>What to do</dt><dd>Provide an alternative when content is perceivable with only one sense.</dd>
+         <dt>Why it's important</dt><dd>People who can’t fully see or hear content can understand it.</dd> 
+      </dl>
+
+   </section>
+
    <section id="intent">
       <h2>Intent of Audio-only and Video-only (Prerecorded)</h2>
       
@@ -34,14 +43,14 @@ <h2>Intent of Audio-only and Video-only (Prerecorded)</h2>
       <div class="note">
          
          <p>A text equivalent is not required for audio that is provided as an equivalent for
-            video with no audio information.  For example, it is not required to caption video
+            video with no audio information.  For example, it is not required to caption audio
             description that is provided as an alternative to a silent movie.
          </p>
          
       </div>
       
       <p>See also 
-         <a href="audio-only-live">1.2.4: Audio-only (Live)</a>
+         <a href="audio-only-live">1.2.9: Audio-only (Live)</a>
          
       </p>
       
@@ -80,72 +89,25 @@ <h2>Benefits of Audio-only and Video-only (Prerecorded)</h2>
    <section id="examples">
       <h2>Examples of Audio-only and Video-only (Prerecorded)</h2>
       
-      
-      <ul>
-         
-         <li>
-            
-            <p>
-               								       
-               <strong>An audio recording of a speech</strong>
-               							     
-            </p>
-            
-            <p>The link to an audio clip says, "Chairman's speech to the assembly." A link to a text
-               transcript is provided immediately after the link to the audio clip.
-            </p>
-            
-         </li>
-         
-         <li>
-            
-            <p>
-               								       
-               <strong>An audio recording of a press conference</strong>
-               							     
-            </p>
-            
-            <p>A Web page includes a link to an audio recording of a press conference that identifies
+      <dl>
+         <dt>An audio recording of a speech</dt>
+         <dd>The link to an audio clip says, "Chairman's speech to the assembly." A link to a text
+               transcript is provided immediately after the link to the audio clip.</dd>
+         <dt>An audio recording of a press conference</dt>
+         <dd>A Web page includes a link to an audio recording of a press conference that identifies
                the audio recording. The page also links to a text transcript of the press conference.
                The transcript includes a verbatim record of everything the speakers say. It identifies
                who is speaking as well as noting other significant sounds that are part of the recording,
-               such as applause, laughter, questions from the audience, and so on.
-            </p>
-            
-         </li>
-         
-         <li>
-            
-            <p>
-               								       
-               <strong>An animation that illustrates how a car engine works</strong>
-               							     
-            </p>
-            
-            <p>An animation shows how a car engine works. There is no audio and the animation is
+               such as applause, laughter, questions from the audience, and so on.</dd>
+         <dt>An animation that illustrates how a car engine works</dt>
+         <dd>An animation shows how a car engine works. There is no audio and the animation is
                part of a tutorial that describes how an engine works. Since the text of the tutorial
                already provides a full explanation, the media is an alternative for text and the
                text alternative includes only a brief description of the animation and refers to
-               the tutorial text for more information.
-            </p>
-            
-         </li>
-         
-         <li>
-            
-            <p>
-               								       
-               <strong>A video-only file with an audio track</strong>
-               							     
-            </p>
-            
-            <p>A silent movie includes an audio track which includes a description of the action
-               in the video.
-            </p>
-            
-         </li>
-         
-      </ul>
+               the tutorial text for more information.</dd>
+         <dt>A video-only file with an audio track</dt>
+         <dd>A silent movie includes an audio track which includes a description of the action in the video.</dd>
+      </dl>
       
    </section>
    
@@ -189,21 +151,15 @@ <h3>Sufficient Techniques for Audio-only and Video-only (Prerecorded)</h3>
             
             <h4>Situation A: If the content is prerecorded audio-only:</h4>
             
-            <ol>
+            <ul>
                
                <li>
                   										           
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G158" class="general">Providing a full text transcript for the audio</a>
+                  <a href="../Techniques/general/G158" class="general">Providing a full text transcript for the audio</a>
                   									         
                </li>
                
-               <li>
-                  
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/silverlight/SL17" class="silverlight"></a>
-                  
-               </li>
-               
-            </ol>
+            </ul>
             
          </section>
          
@@ -211,27 +167,21 @@ <h4>Situation A: If the content is prerecorded audio-only:</h4>
             
             <h4>Situation B: If the content is prerecorded video-only:</h4>
             
-            <ol>
+            <ul>
                
                <li>
                   										           
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G159" class="general">Providing a full text transcript of the video content </a>
+                  <a href="../Techniques/general/G159" class="general">Providing a full text transcript of the video content </a>
                   									         
                </li>
                
                <li>
                   										           
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G166" class="general">Providing audio that describes the important video content and describing it as such</a>
+                  <a href="../Techniques/general/G166" class="general">Providing audio that describes the important video content and describing it as such</a>
                   									         
                </li>
                
-               <li>
-                  
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/silverlight/SL17" class="silverlight"></a>
-                  
-               </li>
-               
-            </ol>
+            </ul>
             
          </section>
          
@@ -245,7 +195,7 @@ <h3>Additional Techniques (Advisory) for Audio-only and Video-only (Prerecorded)
             
             <li>
                			             
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/html/H96" class="html"></a>
+               <a href="../Techniques/html/H96" class="html"></a>
                		             
             </li>
             
@@ -261,13 +211,13 @@ <h3>Failures for Audio-only and Video-only (Prerecorded)</h3>
             
             <li>
                									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/failures/F30" class="failure">F30</a>
+               <a href="../Techniques/failures/F30" class="failure">F30</a>
                								       
             </li>
             
             <li>
                									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/failures/F67" class="failure">F67</a>
+               <a href="../Techniques/failures/F67" class="failure">F67</a>
                								       
             </li>
             
diff --git a/understanding/20/audio-only-live.html b/understanding/20/audio-only-live.html
index 6ebcb2e307..069be69b5e 100644
--- a/understanding/20/audio-only-live.html
+++ b/understanding/20/audio-only-live.html
@@ -3,18 +3,27 @@
 <head>
    <meta charset="UTF-8"></meta>
    <title>Understanding Audio-only (Live)</title>
-   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link>
+   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/>
 </head>
 <body>
    <h1>Understanding Audio-only (Live)</h1>
    
+   <section id="brief">
+      <h2>In brief</h2>
+      <dl>
+         <dt>Goal</dt><dd>Live audio can be understood by more people.</dd>
+         <dt>What to do</dt><dd>Provide a text equivalent for live audio-only content.</dd>
+         <dt>Why it's important</dt><dd>People who cannot hear or understand real-time audio can read an equivalent.</dd> 
+      </dl>
+
+   </section>
    
    <section id="intent">
       <h2>Intent of Audio-only (Live)</h2>
       
       
       <p>The intent of this Success Criterion is to make information conveyed by live audio,
-         such as video conferencing, live speeches and radio Webcasts, accessible through the
+         such as web-based audio conferencing, live speeches and radio Webcasts, accessible through the
          use of a text alternative. A live text caption service will enable live audio to be
          accessible to people who are deaf or hard of hearing, or who cannot otherwise hear
          the audio. Such services use a trained human operator who listens in to what is being
@@ -42,7 +51,6 @@ <h2>Intent of Audio-only (Live)</h2>
    <section id="examples">
       <h2>Examples of Audio-only (Live)</h2>
       
-      
       <ul>
          
          <li>A public relations firm uses Web based caption services to cover live events; the
@@ -56,7 +64,7 @@ <h2>Examples of Audio-only (Live)</h2>
          </li>
          
          <li>A streaming audio server uses a technology which can also accommodate text and graphics,
-            such as HTML5 or Silverlight. A stenographer is used to create live captions at an
+            such as HTML. A stenographer is used to create live captions at an
             event, and these are mixed on the fly to produce live captions in the media stream
             which can be viewed by the media player. 
          </li>
@@ -80,13 +88,7 @@ <h2>Resources for Audio-only (Live)</h2>
          
          <li>
             								       
-            <a href="http://www.captioningandsubtitling.com.au/work/internet/">Captioning and Subtitling International</a>
-            							     
-         </li>
-         
-         <li>
-            								       
-            <a href="http://webaim.org/techniques/captions/realtime">WebAIM Real time captioning resource</a>
+            <a href="https://webaim.org/techniques/captions/realtime">WebAIM Real time captioning resource</a>
             							     
          </li>
          
@@ -114,11 +116,11 @@ <h2>Techniques for Audio-only (Live)</h2>
          <h3>Sufficient Techniques for Audio-only (Live)</h3>
          
          
-         <ol>
+         <ul>
             
             <li>
                									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G151" class="general">Providing a link to a text transcript of a prepared statement or script if the script
+               <a href="../Techniques/general/G151" class="general">Providing a link to a text transcript of a prepared statement or script if the script
                   is followed
                </a>
                								       
@@ -126,17 +128,17 @@ <h3>Sufficient Techniques for Audio-only (Live)</h3>
             
             <li>
                									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G150" class="general">Providing text alternatives for live audio-only content</a>
+               <a href="../Techniques/general/G150" class="general">Providing text alternatives for live audio-only content</a>
                								       
             </li>
             
             <li>
                									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G157" class="general">Incorporating a live audio captioning service into a Web page</a>
+               <a href="../Techniques/general/G157" class="general">Incorporating a live audio captioning service into a Web page</a>
                								       
             </li>
             
-         </ol>
+         </ul>
          
       </section>
       
diff --git a/understanding/20/bypass-blocks.html b/understanding/20/bypass-blocks.html
index a66a484a78..7d55559ff7 100644
--- a/understanding/20/bypass-blocks.html
+++ b/understanding/20/bypass-blocks.html
@@ -3,11 +3,20 @@
 <head>
    <meta charset="UTF-8"></meta>
    <title>Understanding Bypass Blocks</title>
-   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link>
+   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/>
 </head>
 <body>
    <h1>Understanding Bypass Blocks</h1>
    
+   <section id="brief">
+		<h2>In brief</h2>
+		<dl>
+         <dt>Goal</dt><dd>Users can more easily navigate by keyboard.</dd>
+         <dt>What to do</dt><dd>Provide a means of skipping repeating content.</dd>
+         <dt>Why it's important</dt><dd>Users reliant on the keyboard interface can move around pages efficiently.</dd> 
+      </dl>
+
+   </section>
    
    <section id="intent">
       <h2>Intent of Bypass Blocks</h2>
@@ -16,17 +25,16 @@ <h2>Intent of Bypass Blocks</h2>
       <p>The intent of this Success Criterion is to allow people who navigate sequentially
          through content more direct access to the primary content of the Web page. Web pages
          and applications often have content that appears on other pages or screens. Examples
-         of repeated blocks of content include but are not limited to navigation links, heading
-         graphics, and advertising frames. Small repeated sections such as individual words,
+         of repeated blocks of content include but are not limited to navigation links, header
+         content, and advertising frames. Small repeated sections such as individual words,
          phrases or single links are not considered blocks for the purposes of this provision.
-         
-         
       </p>
       
-      <p>This is in contrast to a sighted user's ability to ignore the repeated material either
-         by focusing on the center of the screen (where main content usually appears) or a
-         mouse user's ability to select a link with a single mouse click rather than encountering
-         every link or form control that comes before the item they want.
+      <p>Users who navigate sequentially through content will generally have to navigate through
+         repeated content on each page. This is in contrast to a sighted user's ability to ignore
+         the repeated material either by focusing on the center of the screen (where main content
+         usually appears) or a mouse user's ability to select a link with a single mouse click
+         rather than encountering every link or form control that comes before the item they want.
       </p>
       
       <p>It is not the intent of this Success Criterion to require authors to provide methods
@@ -49,7 +57,7 @@ <h2>Intent of Bypass Blocks</h2>
       <p>Although the success criterion does not specifically use the term “within a set of
          web pages”, the concept of the pages belonging to a set is implied.  An author would
          not be expected to avoid any possible duplication of content in any two pages that
-         are not in some way related to each other;  that are not "Web pages that share a common
+         are not in some way related to each other, and are not "Web pages that share a common
          purpose and that are created by the same author, group or organization” (the definition
          of set of web pages).
       </p>
@@ -74,7 +82,7 @@ <h2>Benefits of Bypass Blocks</h2>
 
          
          <li>Screen reader users who visit several pages on the same site can avoid having to hear
-            all heading graphics and dozens of navigation links on every page before the main
+            all header content and dozens of navigation links on every page before the main
             content is spoken.
          </li>
          
@@ -85,8 +93,8 @@ <h2>Benefits of Bypass Blocks</h2>
             
          </li>
          
-         <li>People who use screen magnifiers do not have to search through the same headings or
-            other blocks of information to find where the content begins each time they enter
+         <li>People who use screen magnifiers do not have to search through the same header content or
+            other blocks of information to find where the main content begins each time they enter
             a new page.
          </li>
          
@@ -101,7 +109,6 @@ <h2>Benefits of Bypass Blocks</h2>
    <section id="examples">
       <h2>Examples of Bypass Blocks</h2>
       
-      
       <ul>
          
          <li>A news organization's home page contains a main story in the middle of the page, surrounded
@@ -148,7 +155,7 @@ <h2>Techniques for Bypass Blocks</h2>
          <h3>Sufficient Techniques for Bypass Blocks</h3>
          
          
-         <ol>
+         <ul>
             
             <li>
                
@@ -158,13 +165,13 @@ <h3>Sufficient Techniques for Bypass Blocks</h3>
                   
                   <li>
                      											             
-                     <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G1" class="general">Adding a link at the top of each page that goes directly to the main content area</a>
+                     <a href="../Techniques/general/G1" class="general">Adding a link at the top of each page that goes directly to the main content area</a>
                      										           
                   </li>
                   
                   <li>
                      											             
-                     <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G123" class="general">Adding a link at the beginning of a block of repeated content to go to the end of
+                     <a href="../Techniques/general/G123" class="general">Adding a link at the beginning of a block of repeated content to go to the end of
                         the block
                      </a>
                      										           
@@ -172,16 +179,10 @@ <h3>Sufficient Techniques for Bypass Blocks</h3>
                   
                   <li>
                      											             
-                     <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G124" class="general">Adding links at the top of the page to each area of the content</a>
+                     <a href="../Techniques/general/G124" class="general">Adding links at the top of the page to each area of the content</a>
                      										           
                   </li>
                   
-                  <li>
-                     
-                     <a href="https://www.w3.org/WAI/WCAG21/Techniques/silverlight/SL25" class="silverlight"></a>
-                     
-                  </li>
-                  
                </ul>
                
             </li>
@@ -196,49 +197,39 @@ <h3>Sufficient Techniques for Bypass Blocks</h3>
                   
                   <li>
                      
-                     <a href="https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA11" class="aria"></a>
+                     <a href="../Techniques/aria/ARIA11" class="aria"></a>
                      
                   </li>
                   
                   <li>
                      											             
-                     <a href="https://www.w3.org/WAI/WCAG21/Techniques/html/H69" class="html">Providing Heading elements at the beginning of each section of content</a>
+                     <a href="../Techniques/html/H69" class="html">Providing Heading elements at the beginning of each section of content</a>
                      										           
                   </li>
                   
                   <li>
                      
-                     <a href="https://www.w3.org/WAI/WCAG21/Techniques/pdf/PDF9" class="pdf"></a>
+                     <a href="../Techniques/pdf/PDF9" class="pdf"></a>
                      
                   </li>
                   
                   <li>
                      											             
-                     <a href="https://www.w3.org/WAI/WCAG21/Techniques/html/H70" class="html">Using frame elements to group blocks of repeated material</a>
-                     											             
-                     <strong>AND</strong>
-                     											             
-                     <a href="https://www.w3.org/WAI/WCAG21/Techniques/html/H64" class="html">Using the title attribute of the frame and iframe elements</a>
+                     <a href="../Techniques/html/H64" class="html">Using the <code class="language-html">title</code> attribute of the <code class="language-html">iframe</code> element</a>
                      										           
                   </li>
                   
                   <li>
                      											             
-                     <a href="https://www.w3.org/WAI/WCAG21/Techniques/client-side-script/SCR28" class="script">Using an expandable and collapsible menu</a>
+                     <a href="../Techniques/client-side-script/SCR28" class="script">Using an expandable and collapsible menu</a>
                      										           
                   </li>
                   
-                  <li>
-                     
-                     <a href="https://www.w3.org/WAI/WCAG21/Techniques/silverlight/SL29" class="silverlight"></a>
-                     
-                  </li>
-                  
                </ul>
                
             </li>
             
-         </ol>
+         </ul>
          
       </section>
       
@@ -250,9 +241,11 @@ <h3>Additional Techniques (Advisory) for Bypass Blocks</h3>
             
             <li>
                									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/css/C6" class="css">Positioning content based on structural markup</a>
+               <a href="../Techniques/css/C6" class="css">Positioning content based on structural markup</a>
                								       
             </li>
+         	
+         	<li><a href="../Techniques/html/H97">H97</a></li>
             
          </ul>
          
diff --git a/understanding/20/captions-live.html b/understanding/20/captions-live.html
index e0a97c8936..0206b1cb03 100644
--- a/understanding/20/captions-live.html
+++ b/understanding/20/captions-live.html
@@ -3,11 +3,20 @@
 <head>
    <meta charset="UTF-8"></meta>
    <title>Understanding Captions (Live)</title>
-   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link>
+   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/>
 </head>
 <body>
    <h1>Understanding Captions (Live)</h1>
    
+   <section id="brief">
+		<h2>In brief</h2>
+		<dl>
+         <dt>Goal</dt><dd>Live videos have captions.</dd>
+         <dt>What to do</dt><dd>Provide synchronized text for audio content in real-time videos.</dd>
+         <dt>Why it's important</dt><dd>People who are deaf or hard of hearing can understand audio in real-time video content.</dd> 
+      </dl>
+
+   </section>
    
    <section id="intent">
       <h2>Intent of Captions (Live)</h2>
@@ -46,38 +55,15 @@ <h2>Benefits of Captions (Live)</h2>
    <section id="examples">
       <h2>Examples of Captions (Live)</h2>
       
-      
-      <ul>
-         
-         <li>
-            
-            <p>
-               								       
-               <strong>A Web cast</strong>
-               							     
-            </p>
-            
-            <p>A news organization provides a live, captioned Web cast. </p>
-            
-         </li>
-         
-         <li>
-            
-            <p>
-               								       
-               <strong>A music Web cast</strong>
-               							     
-            </p>
-            
-            <p>An orchestra provides Communication Access Realtime Translation (CART) captioning
+      <dl>
+         <dt>A Web cast</dt>
+         <dd>A news organization provides a live, captioned Web cast. </dd>
+         <dt>A music Web cast</dt>
+         <dd>An orchestra provides Communication Access Realtime Translation (CART) captioning
                of each real-time Web performance. The CART service captures lyrics and dialog as
                well as identifies non-vocal music by title, movement, composer, and any information
-               that will help the user comprehend the nature of the audio.
-            </p>
-            
-         </li>
-         
-      </ul>
+               that will help the user comprehend the nature of the audio.</dd>
+      </dl>
       
    </section>
    
@@ -103,25 +89,25 @@ <h2>Techniques for Captions (Live)</h2>
          <h3>Sufficient Techniques for Captions (Live)</h3>
          
          
-         <ol>
+         <ul>
             
             <li>
                									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G9" class="general">Creating captions for live synchronized media</a>
+               <a href="../Techniques/general/G9" class="general">Creating captions for live synchronized media</a>
                									         
                <strong>AND</strong>
                									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G93" class="general">Providing open captions that are embedded directly in the video stream</a>
+               <a href="../Techniques/general/G93" class="general">Providing open captions that are embedded directly in the video stream</a>
                								       
             </li>
             
             <li> 
                
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G9" class="general">Creating captions for live synchronized media</a> 
+               <a href="../Techniques/general/G9" class="general">Creating captions for live synchronized media</a> 
                
                <strong>AND</strong> 
                
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G87" class="general">Providing closed captions</a> using any readily available media format that has a video player that  supports closed
+               <a href="../Techniques/general/G87" class="general">Providing closed captions</a> using any readily available media format that has a video player that  supports closed
                captioning 
                
             </li>
@@ -130,24 +116,24 @@ <h3>Sufficient Techniques for Captions (Live)</h3>
                
                <p> 
                   
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G9" class="general">Creating captions for live synchronized media</a> 
+                  <a href="../Techniques/general/G9" class="general">Creating captions for live synchronized media</a> 
                   
                   <strong>AND</strong> 
                   
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G87" class="general">Providing closed captions</a> using one of the following techniques:
+                  <a href="../Techniques/general/G87" class="general">Providing closed captions</a> using one of the following techniques:
                </p>
                
                <ul>
                   
                   <li>
                      											             
-                     <a href="https://www.w3.org/WAI/WCAG21/Techniques/smil/SM11" class="smil">Providing captions through synchronized text streams in SMIL 1.0</a>
+                     <a href="../Techniques/smil/SM11" class="smil">Providing captions through synchronized text streams in SMIL 1.0</a>
                      										           
                   </li>
                   
                   <li>
                      											             
-                     <a href="https://www.w3.org/WAI/WCAG21/Techniques/smil/SM12" class="smil">Providing captions through synchronized text streams in SMIL 2.0</a>
+                     <a href="../Techniques/smil/SM12" class="smil">Providing captions through synchronized text streams in SMIL 2.0</a>
                      										           
                   </li>
                   
@@ -155,7 +141,7 @@ <h3>Sufficient Techniques for Captions (Live)</h3>
                
             </li>
             
-         </ol>
+         </ul>
          
          <div class="note">
             
diff --git a/understanding/20/captions-prerecorded.html b/understanding/20/captions-prerecorded.html
index 1845c77bef..e17177f64a 100644
--- a/understanding/20/captions-prerecorded.html
+++ b/understanding/20/captions-prerecorded.html
@@ -3,11 +3,20 @@
 <head>
    <meta charset="UTF-8"></meta>
    <title>Understanding Captions (Prerecorded)</title>
-   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link>
+   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/>
 </head>
 <body>
    <h1>Understanding Captions (Prerecorded)</h1>
    
+   <section id="brief">
+		<h2>In brief</h2>
+		<dl>
+         <dt>Goal</dt><dd>Videos can be played with captions.</dd>
+         <dt>What to do</dt><dd>Provide synchronized text for audio content in existing videos.</dd>
+         <dt>Why it's important</dt><dd>People who are deaf or hard of hearing can understand audio in videos.</dd> 
+      </dl>
+
+   </section>
    
    <section id="intent">
       <h2>Intent of Captions (Prerecorded)</h2>
@@ -40,7 +49,7 @@ <h2>Intent of Captions (Prerecorded)</h2>
       </p>
       
       <p>See also 
-         <a href="captions-live">1.2.1: Captions (Live)</a>.
+         <a href="captions-live">1.2.4: Captions (Live)</a>.
       </p>
       
       
@@ -62,62 +71,33 @@ <h2>Benefits of Captions (Prerecorded)</h2>
    <section id="examples">
       <h2>Examples of Captions (Prerecorded)</h2>
       
-      
       <ul>
-         
          <li>
-            
-            <p>
-               								       
-               <strong>A captioned tutorial</strong>
-               							     
-            </p>
-            
-            <p> A video clip shows how to tie a knot. The captions read, </p>
-            
+            <p><strong>A captioned tutorial</strong></p>
+            <p>A video clip shows how to tie a knot. The captions read, </p>
             <p>"(music) </p>
-            
             <p>Using rope to tie knots was an important skill</p>
-            
             <p>for the likes of sailors, soldiers and woodsmen.." </p>
-            
             <p>From Sample Transcript Formatting by Whit Anderson.</p>
-            
          </li>
-         
          <li>A complex legal document contains synchronized media clips for different paragraphs
             that show a person speaking the contents of the paragraph. Each clip is associated
-            with its corresponding paragraph. No captions are provided for the synchronized media.
-            
-            
-         </li>
-         
+            with its corresponding paragraph. No captions are provided for the synchronized media.</li>
          <li>An instruction manual containing a description of a part and its necessary orientation
             is accompanied by a synchronized media clip showing the part in its correct orientation.
-            No captions are provided for the synchronized media clip.  
-            
-         </li>
-         
+            No captions are provided for the synchronized media clip.</li>
          <li>
-            
             <p>An orchestra provides captions for videos of performances. In addition to capturing
                dialog and lyrics verbatim, captions identify non-vocal music by title, movement,
                composer, and any information that will help the user comprehend the nature of the
-               audio. For instance captions read,
-            </p>
-            
+               audio. For instance captions read,</p>
             <p>"[Orchestral Suite No. 3.2 in D major, BWV 1068, Air]</p>
-            
             <p>[Johann Sebastian Bach, Composer] </p>
-            
             <p>♪ Calm melody with a slow tempo ♪"</p>
-            
             <div class="note">
                <p>Style guides for captions may differ among different languages.</p>
             </div>
-            
          </li>
-         
       </ul>
       
    </section>
@@ -133,15 +113,15 @@ <h3>Guides to Captioning</h3>
          <ul>
             
             <li>
-               									         
-               <a href="http://www.captioningkey.org/">Captioning Key: Guidelines and Preferred Techniques</a>
-               								       
+               <a href="https://www.bbc.co.uk/accessibility/forproducts/guides/subtitles/">BBC: Subtitle Guidelines</a>
+            </li>
+
+            <li>
+               <a href="https://dcmp.org/learn/captioningkey">Captioning Key: Guidelines and Preferred Techniques</a>
             </li>
             
             <li>
-               									         
-               <a href="http://joeclark.org/access/captioning/bpoc/">Best Practices in Online Captioning</a>
-               								       
+               <a href="https://joeclark.org/access/captioning/bpoc/">Best Practices in Online Captioning</a>
             </li>
             
          </ul>
@@ -155,27 +135,11 @@ <h3>SMIL Resources</h3>
          <ul>
             
             <li>
-               									         
-               <a href="https://www.w3.org/TR/REC-smil/">Synchronized Multimedia Integration Language (SMIL) 1.0</a>
-               								       
+               <a href="https://www.w3.org/TR/SMIL/">Synchronized Multimedia Integration Language (SMIL) 3.0</a>
             </li>
             
             <li>
-               									         
-               <a href="https://www.w3.org/TR/SMIL/">Synchronized Multimedia Integration Language (SMIL 2.0)</a>
-               								       
-            </li>
-            
-            <li>
-               									         
                <a href="https://www.w3.org/TR/SMIL-access/">Accessibility Features of SMIL</a>
-               								       
-            </li>
-            
-            <li>
-               									         
-               <a href="http://ncam.wgbh.org/invent_build/web_multimedia/accessible-digital-media-guide/guideline-h-multimedia#techH12">NCAM Rich Media Accessibility, Accessible SMIL Templates</a>
-               								       
             </li>
             
          </ul>
@@ -189,31 +153,11 @@ <h3>Other Captioning Resources</h3>
          <ul>
             
             <li>
-               									         
-               <a href="http://ncam.wgbh.org/">National Center for Accessible Media</a>
-               								       
+               <a href="https://www.wgbh.org/foundation/what-we-do/ncam">National Center for Accessible Media</a>
             </li>
             
             <li>
-               									         
-               <a href="http://webaim.org/techniques/captions/">WebAIM: Captioning Resource List</a>
-               								       
-            </li>
-            
-         </ul>
-         
-      </section>
-      
-      <section>
-         
-         <h3>Captioning Tools</h3>
-         
-         <ul>
-            
-            <li>
-               									         
-               <a href="http://ncam.wgbh.org/invent_build/web_multimedia/tools-guidelines">Media Access Generator (MAGpie) </a>
-               								       
+               <a href="https://webaim.org/techniques/captions/">WebAIM: Captioning Resource List</a>
             </li>
             
          </ul>
@@ -229,18 +173,15 @@ <h2>Techniques for Captions (Prerecorded)</h2>
       <section id="sufficient">
          <h3>Sufficient Techniques for Captions (Prerecorded)</h3>
          
-         
-         <ol>
+         <ul>
             
             <li>
-               									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G93" class="general">Providing open (always visible) captions</a>
-               								       
+               <a href="../Techniques/general/G93" class="general">Providing open (always visible) captions</a>
             </li>
             
             <li> 
                
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G87" class="general">Providing closed captions</a> using any readily available media format that has a video player that  supports closed
+               <a href="../Techniques/general/G87" class="general">Providing closed captions</a> using any readily available media format that has a video player that  supports closed
                captioning 
                
             </li>
@@ -249,47 +190,29 @@ <h3>Sufficient Techniques for Captions (Prerecorded)</h3>
                
                <p> 
                   
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G87" class="general">Providing closed captions</a> using any of the technology-specific techniques below 
+                  <a href="../Techniques/general/G87" class="general">Providing closed captions</a> using any of the technology-specific techniques below 
                   
                </p>
                
                <ul>
                   
                   <li>
-                     											             
-                     <a href="https://www.w3.org/WAI/WCAG21/Techniques/smil/SM11" class="smil">Providing captions through synchronized text streams in SMIL 1.0</a>
-                     										           
+                     <a href="../Techniques/smil/SM11" class="smil">Providing captions through synchronized text streams in SMIL 1.0</a>
                   </li>
                   
                   <li>
-                     											             
-                     <a href="https://www.w3.org/WAI/WCAG21/Techniques/smil/SM12" class="smil">Providing captions through synchronized text streams in SMIL 2.0</a>
-                     										           
+                     <a href="../Techniques/smil/SM12" class="smil">Providing captions through synchronized text streams in SMIL 2.0</a>
                   </li>
                   
                   <li>
-                     			             
-                     <a href="https://www.w3.org/WAI/WCAG21/Techniques/html/H95" class="html"></a>
-                     		             
-                  </li>
-                  
-                  <li>
-                     
-                     <a href="https://www.w3.org/WAI/WCAG21/Techniques/silverlight/SL16" class="silverlight"></a>
-                     
-                  </li>
-                  
-                  <li>
-                     
-                     <a href="https://www.w3.org/WAI/WCAG21/Techniques/silverlight/SL28" class="silverlight"></a>
-                     
+                     <a href="../Techniques/html/H95" class="html">Using the track element to provide captions</a>
                   </li>
                   
                </ul>
                
             </li>
             
-         </ol>
+         </ul>
          
       </section>
       
@@ -306,26 +229,15 @@ <h3>Failures for Captions (Prerecorded)</h3>
          <ul>
             
             <li>
-               									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/failures/F8" class="failure">Failure due to captions omitting some dialogue or important sound effects</a>
-               								       
+               <a href="../Techniques/failures/F8" class="failure">Failure of Success Criterion 1.2.2 due to captions omitting some dialogue or important sound effects</a>
             </li>
             
             <li>
-               									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/failures/F75" class="failure">Failure of Success Criterion 1.2.1 by providing synchronized media without captions
-                  when the synchronized media presents more information than is presented in its associated
-                  text.
-               </a>
-               								       
+               <a href="../Techniques/failures/F75" class="failure">Failure of Success Criterion 1.2.2 by providing synchronized media without captions when the synchronized media presents more information than is presented on the page text.</a>
             </li>
             
             <li>
-               									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/failures/F74" class="failure">Failure of 1.2.1 due to not labeling a synchronized media alternative to text as an
-                  alternative
-               </a>
-               								       
+               <a href="../Techniques/failures/F74" class="failure">Failure of Success Criterion 1.2.2 and 1.2.8 due to not labeling a synchronized media alternative to text as an alternative</a>
             </li>
             
          </ul>
diff --git a/understanding/20/change-on-request.html b/understanding/20/change-on-request.html
index 2e3e18616e..d01acbbe3d 100644
--- a/understanding/20/change-on-request.html
+++ b/understanding/20/change-on-request.html
@@ -3,11 +3,20 @@
 <head>
    <meta charset="UTF-8"></meta>
    <title>Understanding Change on Request</title>
-   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link>
+   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/>
 </head>
 <body>
    <h1>Understanding Change on Request</h1>
-   
+      
+		<section id="brief">
+			<h2>In brief</h2>
+         <dl>
+		         <dt>Goal</dt><dd>Users have full control of major content changes.</dd>
+		         <dt>What to do</dt><dd>Provide ways for users to trigger or turn off changes of context.</dd>
+			      <dt>Why it's important</dt><dd>Content that behaves predictably is especially important to people with disabilities.</dd> 
+         </dl>
+
+      </section>
    
    <section id="intent">
       <h2>Intent of Change on Request</h2>
@@ -56,8 +65,7 @@ <h2>Benefits of Change on Request</h2>
          
          <li>
             
-            <p>Individuals who are unable to detect changes of context or may not realize that the
-               context has changed are less likely to become disoriented while navigating a site.
+           <p>Individuals who are unable to detect changes of context or who may not realize that the context has changed are less likely to become disoriented if they initiate the change themselves.
                For example:
             </p>
             
@@ -91,40 +99,14 @@ <h2>Benefits of Change on Request</h2>
    <section id="examples">
       <h2>Examples of Change on Request</h2>
       
-      
-      <ul>
-         
-         <li>
-            
-            <p>
-               								       
-               <strong>an "update now" button</strong>
-               							     
-            </p>
-            
-            <p> Instead of automatically updating the content, the author provides an "Update now"
-               button that requests a refresh of the content.
-               
-            </p>
-            
-         </li>
-         
-         <li>
-            
-            <p>
-               								       
-               <strong>An automatic redirection</strong>
-               							     
-            </p>
-            
-            <p>A user is automatically redirected from an old page to a new page in such a way that
-               he or she never realizes the redirect has occurred.
-               
-            </p>
-            
-         </li>
-         
-      </ul>
+      <dl>
+         <dt>an "update now" button</dt>
+         <dd> Instead of automatically updating the content, the author provides an "Update now"
+               button that requests a refresh of the content.</dd>
+         <dt>An automatic redirection</dt>
+         <dd>Users are automatically redirected from an old page to a new page in such a way that
+               they never realize the redirect has occurred.</dd>
+      </dl>
       
    </section>
    
@@ -163,15 +145,15 @@ <h3>Sufficient Techniques for Change on Request</h3>
             
             <h4>Situation A: If the Web page allows automatic updates:</h4>
             
-            <ol>
+            <ul>
                
                <li>
                   										           
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G76" class="general">Providing a mechanism to request an update of the content instead of updating automatically</a>
+                  <a href="../Techniques/general/G76" class="general">Providing a mechanism to request an update of the content instead of updating automatically</a>
                   									         
                </li>
                
-            </ol>
+            </ul>
             
          </section>
          
@@ -179,11 +161,11 @@ <h4>Situation A: If the Web page allows automatic updates:</h4>
             
             <h4>Situation B: If automatic redirects are possible:</h4>
             
-            <ol>
+            <ul>
                
                <li>
                   										           
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/server-side-script/SVR1" class="server">Implementing automatic redirects on the server side instead of on the client side</a>
+                  <a href="../Techniques/server-side-script/SVR1" class="server">Implementing automatic redirects on the server side instead of on the client side</a>
                   									         
                </li>
                
@@ -191,14 +173,14 @@ <h4>Situation B: If automatic redirects are possible:</h4>
                   
                   <p> 
                      
-                     <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G110" class="general">Using an instant client-side redirect</a> using one of the following techniques:    
+                     <a href="../Techniques/general/G110" class="general">Using an instant client-side redirect</a> using one of the following techniques:    
                   </p>
                   
                   <ul>
                      
                      <li>
                         												               
-                        <a href="https://www.w3.org/WAI/WCAG21/Techniques/html/H76" class="html">Using meta refresh to create an instant client-side redirect</a>
+                        <a href="../Techniques/html/H76" class="html">Using meta refresh to create an instant client-side redirect</a>
                         											             
                      </li>
                      
@@ -206,7 +188,7 @@ <h4>Situation B: If automatic redirects are possible:</h4>
                   
                </li>
                
-            </ol>
+            </ul>
             
          </section>
          
@@ -214,7 +196,7 @@ <h4>Situation B: If automatic redirects are possible:</h4>
             
             <h4>Situation C: If the Web page uses pop-up windows:</h4>
             
-            <ol>
+            <ul>
                
                <li>
                   
@@ -224,13 +206,13 @@ <h4>Situation C: If the Web page uses pop-up windows:</h4>
                      
                      <li>
                         												               
-                        <a href="https://www.w3.org/WAI/WCAG21/Techniques/html/H83" class="html">Using the target attribute to open a new window </a>
+                        <a href="../Techniques/html/H83" class="html">Using the target attribute to open a new window </a>
                         											             
                      </li>
                      
                      <li>
                         												               
-                        <a href="https://www.w3.org/WAI/WCAG21/Techniques/client-side-script/SCR24" class="script">Using script to open a new window</a>
+                        <a href="../Techniques/client-side-script/SCR24" class="script">Using script to open a new window</a>
                         											             
                      </li>
                      
@@ -238,7 +220,7 @@ <h4>Situation C: If the Web page uses pop-up windows:</h4>
                   
                </li>
                
-            </ol>
+            </ul>
             
          </section>
          
@@ -246,15 +228,15 @@ <h4>Situation C: If the Web page uses pop-up windows:</h4>
             
             <h4>Situation D: If using an onchange event on a select element:</h4>
             
-            <ol>
+            <ul>
                
                <li>
                   										           
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/client-side-script/SCR19" class="script">Using an onchange event on a select element without causing a change of context</a>
+                  <a href="../Techniques/client-side-script/SCR19" class="script">Using an onchange event on a select element without causing a change of context</a>
                   									         
                </li>
                
-            </ol>
+            </ul>
             
          </section>
          
@@ -268,7 +250,7 @@ <h3>Additional Techniques (Advisory) for Change on Request</h3>
             
             <li>
                									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G200" class="general">Opening new windows and tabs from a link only when necessary</a>
+               <a href="../Techniques/general/G200" class="general">Opening new windows and tabs from a link only when necessary</a>
                								       
             </li>
             
@@ -284,13 +266,13 @@ <h3>Failures for Change on Request</h3>
             
             <li>
                									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/failures/F60" class="failure">Failure due to launching a new window when a user enters text into an input field</a>
+               <a href="../Techniques/failures/F60" class="failure">Failure due to launching a new window when a user enters text into an input field</a>
                								       
             </li>
             
             <li>
                									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/failures/F61" class="failure">Failure due to complete change of main content through an automatic update that the
+               <a href="../Techniques/failures/F61" class="failure">Failure due to complete change of main content through an automatic update that the
                   user cannot disable from within the content
                </a>
                								       
@@ -298,19 +280,19 @@ <h3>Failures for Change on Request</h3>
             
             <li>
                									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/failures/F9" class="failure">Failure due to changing the context when the user removes focus from a form element</a>
+               <a href="../Techniques/failures/F9" class="failure">Failure due to changing the context when the user removes focus from a form element</a>
                								       
             </li>
             
             <li>
                									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/failures/F22" class="failure">Failure due to opening windows that are not requested by the user</a>
+               <a href="../Techniques/failures/F22" class="failure">Failure due to opening windows that are not requested by the user</a>
                								       
             </li>
             
             <li>
                									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/failures/F52" class="failure">Failure of Success Criterion 3.2.1 and 3.2.5 due to opening a new window as soon as
+               <a href="../Techniques/failures/F52" class="failure">Failure of Success Criterion 3.2.1 and 3.2.5 due to opening a new window as soon as
                   a new page is loaded
                </a>
                								       
@@ -318,13 +300,13 @@ <h3>Failures for Change on Request</h3>
             
             <li>
                									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/failures/F40" class="failure">Failure due to using meta redirect with a time limit                  
+               <a href="../Techniques/failures/F40" class="failure">Failure due to using meta redirect with a time limit                  
                </a>
                								       
             </li>
             <li>
                									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/failures/F41" class="failure">Failure due to using meta refresh with a time limit
+               <a href="../Techniques/failures/F41" class="failure">Failure due to using meta refresh with a time limit
                   
                </a>
                								       
diff --git a/understanding/20/compatible.html b/understanding/20/compatible.html
index ec7525698a..00e494be14 100644
--- a/understanding/20/compatible.html
+++ b/understanding/20/compatible.html
@@ -3,7 +3,7 @@
 <head>
    <meta charset="UTF-8"></meta>
    <title>Understanding Compatible</title>
-   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link>
+   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/>
 </head>
 <body>
    <h1>Understanding Compatible</h1>
diff --git a/understanding/20/consistent-identification.html b/understanding/20/consistent-identification.html
index 5ebe5fdfb9..2276ad2103 100644
--- a/understanding/20/consistent-identification.html
+++ b/understanding/20/consistent-identification.html
@@ -3,11 +3,20 @@
 <head>
    <meta charset="UTF-8"></meta>
    <title>Understanding Consistent Identification</title>
-   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link>
+   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/>
 </head>
 <body>
    <h1>Understanding Consistent Identification</h1>
    
+   <section id="brief">
+		<h2>In brief</h2>
+		<dl>
+         <dt>Goal</dt><dd>Actions are more predictable across pages.</dd>
+         <dt>What to do</dt><dd>Identify repeating functions consistently.</dd>
+         <dt>Why it's important</dt><dd>Consistently identified actions are especially important to people with disabilities.</dd> 
+      </dl>
+
+   </section>
    
    <section id="intent">
       <h2>Intent of Consistent Identification</h2>
@@ -17,7 +26,7 @@ <h2>Intent of Consistent Identification</h2>
          components that appear repeatedly within a set of Web pages. A strategy that people
          who use screen readers use when operating a Web site is to rely heavily on their familiarity
          with functions that may appear on different Web pages. If identical functions have
-         different labels (or, more generally, a different <a href="https://www.w3.org/TR/accname-aam-1.1/">accessible name</a>)
+         different labels (or, more generally, a different <a href="https://www.w3.org/TR/accname/#dfn-accessible-name">accessible name</a>)
          on different Web pages, the site will be considerably more difficult
          to use. It may also be confusing and increase the cognitive load for people with cognitive
          limitations. Therefore, consistent labeling will help. 
@@ -66,143 +75,49 @@ <h2>Benefits of Consistent Identification</h2>
    <section id="examples">
       <h2>Examples of Consistent Identification</h2>
       
-      
-      <ul>
-         
-         <li>
-            
-            <p>
-               								       
-               <strong>Example 1: Document Icon</strong>
-               							     
-            </p>
-            
-            <p>A document icon is used to indicate document download throughout a site. The text
+      <dl>
+         <dt>Example 1: Document Icon</dt>
+         <dd>A document icon is used to indicate document download throughout a site. The text
                alternative for the icon always begins with the word “Download," followed by a shortened
                form of the document title. Using different text alternatives to identify document
-               names for different documents is a consistent use of text alternatives.
-            </p>
-            
-         </li>
-         
-         <li>
-            
-            <p>
-               								       
-               <strong>Example 2: Check Mark</strong>
-               							     
-            </p>
-            
-            <p>A check mark icon functions as "approved", on one page but as "included" on another.
-               Since they serve different functions, they have different text alternatives.
-               
-            </p>
-            
-         </li>
-         
-         <li>
-            
-            <p>
-               								       
-               <strong>Example 3: Consistent references to other pages</strong>
-               							     
-            </p>
-            
-            <p> A Web site publishes articles on-line. Each article spans multiple Web pages and
+               names for different documents is a consistent use of text alternatives.</dd>
+         <dt>Example 2: Check Mark</dt>
+         <dd>A check mark icon functions as "approved", on one page but as "included" on another.
+               Since they serve different functions, they have different text alternatives.</dd>
+         <dt>Example 3: Consistent references to other pages</dt>
+         <dd> A Web site publishes articles on-line. Each article spans multiple Web pages and
                each page contains a link to the first page, the next page and the previous page of
                the article. If the references to the next page read "page 2", "page 3", "page 4"
                etcetera, the labels are not the same but they are consistent. Therefore, these references
-               are not failures of this Success Criterion. 
-            </p>
-            
-         </li>
-         
-         <li>
-            
-            <p>
-               								       
-               <strong>Example 4: Icons with similar functions</strong>
-               							     
-            </p>
-            
-            <p>An e-commerce application uses a printer icon that allows the user to print receipts
+               are not failures of this Success Criterion.</dd>
+         <dt>Example 4: Icons with similar functions</dt>
+         <dd>An e-commerce application uses a printer icon that allows the user to print receipts
                and invoices. In one part of the application, the printer icon is labeled "Print receipt"
                and is used to print receipts, while in another part it is labeled "Print invoice"
                and is used to print invoices. The labeling is consistent ("Print x"), but the labels
                are different to reflect the different functions of the icons. Therefore, this example
-               does not fail the Success Criterion.
-               
-            </p>
-            
-         </li>
-         
-         <li>
-            
-            <p>
-               								       
-               <strong>Example 5: Save icon</strong>
-               							     
-            </p>
-            
-            <p>A common "save" icon is used through out the site where page save function is provided
-               on multiple Web pages.
-            </p>
-            
-         </li>
-         
-         <li>
-            
-            <p>
-               								       
-               <strong>Example 6: Icon and adjacent link to same destination</strong>
-               							     
-            </p>
-            
-            <p>An icon with alt text and a link are next to each other and go to the same location.
+               does not fail the Success Criterion.</dd>
+         <dt>Example 5: Save icon</dt>
+         <dd>A common "save" icon is used through out the site where page save function is provided
+               on multiple Web pages.</dd>
+         <dt>Example 6: Icon and adjacent link to same destination</dt>
+         <dd>An icon with alt text and a link are next to each other and go to the same location.
                The best practice would be to group them into one link as per 
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/html/H2" class="html"></a>. However if they are visually positioned one above the other but separated in the
+               <a href="../Techniques/html/H2" class="html"></a>. However if they are visually positioned one above the other but separated in the
                source, this may not be possible. To meet the Success Criterion, the link text for
                these two links need only be consistent, not identical. But best practice is to have
                identical text so that when users encounter the second one, it is clear that it goes
-               to the same place as the first.
-            </p>
-            
-         </li>
-         
-         <li>
-            
-            <p>
-               								       
-               <strong>Example 7: Example of a Failure</strong>
-               							     
-            </p>
-            
-            <p>A submit "search" button on one Web page and a "find" button on another Web page both
+               to the same place as the first.</dd>
+         <dt>Example 7: Example of a Failure</dt>
+         <dd>A submit "search" button on one Web page and a "find" button on another Web page both
                have a field to enter a term and list topics in the Web site related to the term submitted.
-               In this case, the buttons have the same functionality but are not labeled consistently.
-               
-               
-            </p>
-            
-         </li>
+               In this case, the buttons have the same functionality but are not labeled consistently.</dd>
 
-         <li>
-            
-               <p>
-                                                 
-                  <strong>Example 8: Failure primarily impacting assistive technology users</strong>
-                                            
-               </p>
-               
-               <p>Two buttons with the same functionality visually have the same text, but have been given
+         <dt>Example 8: Failure primarily impacting assistive technology users</dt>
+         <dd>Two buttons with the same functionality visually have the same text, but have been given
                   different <code>aria-label="..."</code> accessible names. For users of assistive technologies,
-                  these two buttons will be announced differently and inconsistently.
-                  
-               </p>
-               
-            </li>
-         
-      </ul>
+                  these two buttons will be announced differently and inconsistently.</dd>
+      </dl>
       
    </section>
    
@@ -220,11 +135,11 @@ <h2>Techniques for Consistent Identification</h2>
          <h3>Sufficient Techniques for Consistent Identification</h3>
          
          
-         <ol>
+         <ul>
             
             <li>
                
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G197" class="general">Using consistent labels, names, and text alternatives for content that has the same
+               <a href="../Techniques/general/G197" class="general">Using consistent labels, names, and text alternatives for content that has the same
                   functionality.
                </a>
                									         
@@ -233,7 +148,7 @@ <h3>Sufficient Techniques for Consistent Identification</h3>
                <a href="name-role-value#techniques" class="understanding">sufficient techniques for Success Criterion 4.1.2</a> for providing labels, names, and text alternatives.
             </li>
             
-         </ol>
+         </ul>
          
          <div class="note">
             
@@ -272,7 +187,7 @@ <h3>Failures for Consistent Identification</h3>
             
             <li>
                									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/failures/F31" class="failure">Failure due to using two different labels for the same function on different pages</a>
+               <a href="../Techniques/failures/F31" class="failure">Failure due to using two different labels for the same function on different pages</a>
                								       
             </li>
             
diff --git a/understanding/20/consistent-navigation.html b/understanding/20/consistent-navigation.html
index 7ac2e7539e..c800c1fdc3 100644
--- a/understanding/20/consistent-navigation.html
+++ b/understanding/20/consistent-navigation.html
@@ -3,11 +3,20 @@
 <head>
    <meta charset="UTF-8"></meta>
    <title>Understanding Consistent Navigation</title>
-   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link>
+   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/>
 </head>
 <body>
    <h1>Understanding Consistent Navigation</h1>
    
+   <section id="brief">
+		<h2>In brief</h2>
+		<dl>
+         <dt>Goal</dt><dd>Content can be navigated more predictably.</dd>
+         <dt>What to do</dt><dd>Consistently order navigation that repeats across multiple pages.</dd>
+         <dt>Why it's important</dt><dd>Content that behaves predictably is especially important to people with disabilities.</dd> 
+      </dl>
+
+   </section>
    
    <section id="intent">
       <h2>Intent of Consistent Navigation</h2>
@@ -66,73 +75,22 @@ <h2>Benefits of Consistent Navigation</h2>
    <section id="examples">
       <h2>Examples of Consistent Navigation</h2>
       
-      
-      <ul>
-         
-         <li>
-            
-            <p>
-               								       
-               <strong>A consistently located control</strong>
-               							     
-            </p>
-            
-            <p>A search field is the last item on every Web page in a site. Users can quickly locate
-               the search function. 
-               
-            </p>
-            
-         </li>
-         
-         <li>
-            
-            <p>
-               								       
-               <strong>An expanding navigation menu</strong>
-               							     
-            </p>
-            
-            <p>A navigation menu includes a list of seven items with links to the main sections of
-               a site.
-               When a user selects one of these items, a list of subnavigation items is inserted
-               into the top-level navigation menu.
-               
-            </p>
-            
-         </li>
-         
-         <li>
-            
-            <p>
-               								       
-               <strong>Consistently positioned skip navigation controls</strong>
-               							     
-            </p>
-            
-            <p>A "skip navigation" (or "skip to main content") link is included as the first link
+      <dl>
+         <dt>A consistently located control</dt>
+         <dd>A search field is the last item on every Web page in a site. Users can quickly locate the search function.</dd>
+         <dt>An expanding navigation menu</dt>
+         <dd>A navigation menu includes a list of seven items with links to the main sections of a site.
+               When a user selects one of these items, a list of sub-navigation items is inserted
+               into the top-level navigation menu.</dd>
+         <dt>Consistently positioned skip navigation controls</dt>
+         <dd>A "skip navigation" (or "skip to main content") link is included as the first link
                on every page in a Web site. The link allows users to quickly bypass heading information
-               and navigational content and begin interacting with the main content of a page.
-               
-            </p>
-            
-         </li>
-         
-         <li>
-            
-            <p>
-               								       
-               <strong>Skip to navigation link</strong>
-               							     
-            </p>
-            
-            <p>Navigational content is consistently located at the end of each page in a set of Web
+               and navigational content and begin interacting with the main content of a page.</dd>
+         <dt>Skip to navigation link</dt>
+         <dd>Navigational content is consistently located at the end of each page in a set of Web
                pages. A "skip to navigation" link is consistently located at the beginning of each
-               page so that keyboard users can easily locate it when needed. 
-            </p>
-            
-         </li>
-         
-      </ul>
+               page so that keyboard users can easily locate it when needed.</dd>
+      </dl>
       
    </section>
    
@@ -148,7 +106,7 @@ <h2>Resources for Consistent Navigation</h2>
          
          <li> 
             
-            <a href="http://www-03.ibm.com/able/access_ibm/disability.html">Understanding disability issues when designing Web sites</a>.
+            <a href="https://www.ibm.com/able/toolkit/design/ux/navigation/">IBM: User experience design - Navigation</a>.
          </li>
          
       </ul>
@@ -163,15 +121,15 @@ <h2>Techniques for Consistent Navigation</h2>
          <h3>Sufficient Techniques for Consistent Navigation</h3>
          
          
-         <ol>
+         <ul>
             
             <li>
                									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G61" class="general">Presenting repeated components in the same relative order each time they appear</a>
+               <a href="../Techniques/general/G61" class="general">Presenting repeated components in the same relative order each time they appear</a>
                								       
             </li>
             
-         </ol>
+         </ul>
          
       </section>
       
@@ -183,13 +141,13 @@ <h3>Additional Techniques (Advisory) for Consistent Navigation</h3>
             
             <li>
                
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/pdf/PDF14" class="pdf"></a>
+               <a href="../Techniques/pdf/PDF14" class="pdf"></a>
                
             </li>
             
             <li>
                
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/pdf/PDF17" class="pdf"></a>
+               <a href="../Techniques/pdf/PDF17" class="pdf"></a>
                
             </li>
             
@@ -205,7 +163,7 @@ <h3>Failures for Consistent Navigation</h3>
             
             <li>
                									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/failures/F66" class="failure">Failure of 3.2.3 due to presenting navigation links in a different relative order
+               <a href="../Techniques/failures/F66" class="failure">Failure of 3.2.3 due to presenting navigation links in a different relative order
                   on different pages
                </a>
                								       
diff --git a/understanding/20/contrast-enhanced.html b/understanding/20/contrast-enhanced.html
index 605bcd36a4..cd3cdf93cf 100644
--- a/understanding/20/contrast-enhanced.html
+++ b/understanding/20/contrast-enhanced.html
@@ -3,16 +3,24 @@
 <head>
    <meta charset="UTF-8"></meta>
    <title>Understanding Contrast (Enhanced)</title>
-   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link>
+   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/>
 </head>
 <body>
    <h1>Understanding Contrast (Enhanced)</h1>
    
+   <section id="brief">
+      <h2>In brief</h2>
+      <dl>
+         <dt>Goal</dt><dd>Text can be seen by people who need strong contrast.</dd>
+         <dt>What to do</dt><dd>Strongly contrast text against its background.</dd>
+         <dt>Why it's important</dt><dd>Some people cannot read text with minimum contrast.</dd> 
+      </dl>
+
+   </section>
    
    <section id="intent">
       <h2>Intent of Contrast (Enhanced)</h2>
       
-      
       <p>The intent of this Success Criterion is to provide enough contrast between text and
          its background so that it can be read by people with moderately low vision (who do
          not use contrast-enhancing assistive technology). For people without color deficiencies,
@@ -27,7 +35,6 @@ <h2>Intent of Contrast (Enhanced)</h2>
          words are used to create a background and the words could be rearranged or substituted
          without changing meaning, then it would be decorative and would not need to meet this
          criterion. 
-         
       </p>
       
       <p>Text that is larger and has wider character strokes is easier to read at lower contrast.
@@ -37,50 +44,56 @@ <h2>Intent of Contrast (Enhanced)</h2>
          enough to require a lower contrast ratio. (See The American Printing House for the
          Blind Guidelines for Large Printing and The Library of Congress Guidelines for Large
          Print under 
-         <a href="#visual-audio-contrast7-resources-head">Resources</a>). "18 point" and "bold" can both have different meanings in different fonts but,
-         except for very thin or unusual fonts, they should be sufficient. Since there are
-         so many different fonts, the general measures are used and a note regarding fancy
-         or thin fonts is included.
+         <a href="#resources">Resources</a>). "18 point" and "bold" can both have different meanings in
+         different fonts but, except for very thin or unusual fonts, they should be sufficient. Since there
+         are so many different fonts, the general measures are used and a note regarding thin or unusual
+         fonts is included in the definition for <a>large-scale</a> text.
       </p>
       
       <div class="note">
-         
-         <p>The point size should be obtained from the user agent, or calculated based on font
-            metrics as the user agent does when evaluating this success criterion. Point sizes
-            are based on the CSS pt size as defined in 
-            <a href="https://www.w3.org/TR/css-values-3/#reference-pixel">CSS3 Values</a>. The ratio between sizes in points and CSS pixels is 1pt = 1.333px, therefore 14pt
-            and 18pt are equivalent to approximately 18.5px and 24px.
+         <p>When evaluating this Success Criterion, the font size in points should be obtained
+            from the user agent or calculated on font metrics in the way that user agents do.
+            Point sizes are based on the CSS <code>pt</code> size as defined in 
+            <a href="https://www.w3.org/TR/css-values-3/#reference-pixel">CSS3 Values</a>. The ratio between
+            sizes in points and CSS pixels is <code>1pt = 1.333px</code>, therefore <code>14pt</code>
+            and <code>18pt</code> are equivalent to approximately <code>18.5px</code> and <code>24px</code>.
          </p>
-         
-         <p>When fonts have anti-aliasing applied to make them look smoother, they can lose darkness
-            or lightness.  Thus, the actual contrast can be reduced. Thicker stem widths will
-            reduce this effect (thin fonts could have the full stem lightened rather than just
-            the ends). Using larger fonts and testing for legibility in user agents with font
-            smoothing turned on is recommended.
-            
-         </p>
-         
          <p>Because different image editing applications default to different pixel densities
-            (ex. 72 PPI or 96 PPI), specifying point sizes for fonts from within an image editing
-            application can be unreliable when it comes to presenting text at a specific size.
+            (e.g., <code>72ppi</code> or <code>96ppi</code>), specifying point sizes for fonts from within an
+            image editing application can be unreliable when it comes to presenting text at a specific size.
             When creating images of large-scale text, authors should ensure that the text in the
             resulting image is roughly equivalent to 1.2 and 1.5 em or to 120% or 150% of the
-            default size for body text as rendered by the browser.
+            default size for body text. For example, for a <code>72ppi</code> image, an author would need
+            to use approximately 19pt and 24pt font sizes in order to successfully present images
+            of large-scale text to a user. 
+         </p>
+         <p>The 7:1 and 4.5:1 contrast ratios referenced in this Success Criterion are intended to be
+            treated as threshold values. When comparing the computed contrast ratio to the Success Criterion
+            ratio, the computed values should not be rounded (e.g., 4.499:1 would not meet the 4.5:1 threshold).</p>
+      </div>
+
+      <div class="note">
+         <p>Because authors do not have control over user settings for font smoothing/anti-aliasing, when evaluating this
+            Success Criterion, refer to the foreground and background colors obtained from the user agent, or the underlying
+            markup and stylesheets, rather than the text as presented on screen.</p>
+         <p>Due to anti-aliasing, particularly thin or unusual fonts may be rendered by user agents with a much fainter
+            color than the actual text color defined in the underlying CSS. This can lead to situations where text has
+            a contrast ratio that nominally passes the Success Criterion, but has a much lower contrast in practice.
+            In these cases, best practice would be for authors to choose a font with stronger/thicker lines,
+            or to aim for a foreground/background color combination that exceeds the normative requirements
+            of this Success Criterion.
          </p>
-         
       </div>
       
-      <p>The previously-mentioned contrast requirements for text also apply to
-         images of text (text that has been rendered into pixels and then stored in an image
-         format) as stated in Success Criterion 1.4.5
-         
-         
+      <p>The contrast requirements for text also apply to images of text
+         (text that has been rendered into pixels and then stored in an image format) - see
+         <a href="images-of-text">Success Criterion 1.4.5: Images of Text</a>.
       </p>
       
       <p>This requirement applies to situations in which images of text were intended to be
          understood as text. Incidental text, such as in photographs that happen to include
          a street sign, are not included. Nor is text that for some reason is designed to be
-         invisible to all users. Stylized text, such as in corporate logos, should be treated
+         invisible to all viewers. Stylized text, such as in corporate logos, should be treated
          in terms of its function on the page, which may or may not warrant including the content
          in the text alternative. Corporate visual guidelines beyond logo and logotype are
          not included in the exception.
@@ -93,28 +106,45 @@ <h2>Intent of Contrast (Enhanced)</h2>
          in order to get a particular look. 
       </p>
       
-      <p>Although this Success Criterion only applies to text, similar issues occur for content presented in charts, graphs, diagrams, and other non-text-based information.
-         Content presented in this manner should also have good contrast to ensure that more
-         users can access the information.
+      <div class="note">
+         
+         <p>Images of text do not scale as well as text because they tend to pixelate. It is also
+            harder to change foreground and background contrast and color combinations for images
+            of text, which is necessary for some users. See <a href="images-of-text">1.4.5: Images of Text</a>.
+            
+         </p>
+         
+      </div>
+      
+      <p>This Success Criterion applies to text in the page, including
+         placeholder text and text that is shown when a pointer is hovering over an object
+         or when an object has keyboard focus. If any of these are used in a page, the text
+         needs to provide sufficient contrast.
+      </p>
+      
+      <p>Although this Success Criterion only applies to text, similar issues occur for content presented
+         in charts, graphs, diagrams, and other non-text-based information, which is covered by
+         <a href="non-text-contrast">Success Criterion 1.4.11 Non-Text Contrast</a>.         
       </p>
       
       <section>
          
          <h3>Rationale for the Ratios Chosen</h3>
          
-         
-         <p>A contrast ratio of 3:1 is the minimum level recommended by [[ISO-9241-3]] and [[ANSI-HFES-100-1988]] for standard text and vision. The 4.5:1 ratio is used in Success Criterion 1.4.3
-            to account for the loss in contrast that results from moderately low visual acuity,
-            congenital or acquired color deficiencies, or the loss of contrast sensitivity that
-            typically accompanies aging.
+         <p>A contrast ratio of 3:1 is the minimum level recommended by [[ISO-9241-3]] and [[ANSI-HFES-100-1988]]
+            for standard text and vision. The 4.5:1 ratio is used in Success Criterion 1.4.3 to account
+            for the loss in contrast that results from moderately low visual acuity, congenital
+            or acquired color deficiencies, or the loss of contrast sensitivity that typically
+            accompanies aging.
          </p>
          
          <p>The rationale is based on a) adoption of the 3:1 contrast ratio for minimum acceptable
             contrast for normal observers, in the ANSI standard, and b) the empirical finding
             that in the population, visual acuity of 20/40 is associated with a contrast sensitivity
-            loss of roughly 1.5 [[ARDITI-FAYE]]. A user with 20/40 would thus require a contrast ratio of 3 * 1.5 = 4.5 to 1.  Following
-            analogous empirical findings and the same logic, the user with 20/80 visual acuity
-            would require contrast of about 7:1.
+            loss of roughly 1.5 [[ARDITI-FAYE]]. A user with 20/40 would thus require a contrast ratio of
+            <code>3 * 1.5 = 4.5 to 1</code>. Following analogous empirical findings and the same logic,
+            the user with 20/80 visual acuity would require contrast of about 7:1. This ratio is used in
+            this Success Criterion.
          </p>
          
          <p>Hues are perceived differently by users with color vision deficiencies (both congenital
@@ -134,11 +164,22 @@ <h3>Rationale for the Ratios Chosen</h3>
             [[ARDITI]].
          </p>
          
+         <div class="note">
+            
+            <p>Some people with cognitive disabilities require color combinations or hues that have
+               low contrast, and therefore we allow and encourage authors to provide mechanisms to
+               adjust the foreground and background colors of the content. Some of the combinations
+               that could be chosen may have contrast levels that will be lower than those
+               specified here. This is not a violation of this Success Criterion, provided
+               there is a mechanism that will return to the required values set out here.
+            </p>          
+            
+         </div>
+         
          <p>The contrast ratio of 4.5:1 was chosen for level AA because it compensated for the
             loss in contrast sensitivity usually experienced by users with vision loss equivalent
             to approximately 20/40 vision. (20/40 calculates to approximately 4.5:1.) 20/40 is
             commonly reported as typical visual acuity of elders at roughly age 80. [[GITTINGS-FOZARD]] 
-            
          </p>
          
          <p>The contrast ratio of 7:1 was chosen for level AAA because it compensated for the
@@ -152,9 +193,8 @@ <h3>Rationale for the Ratios Chosen</h3>
          </p>
          
          <div class="note">
-            
-            <p>Calculations in [[ISO-9241-3]] and [[ANSI-HFES-100-1988]] are for body text. A relaxed contrast ratio is provided for text that is much larger.</p>
-            
+            <p>Calculations in [[ISO-9241-3]] and [[ANSI-HFES-100-1988]] are for body text. A relaxed contrast
+               ratio is provided for text that is much larger.</p>
          </div>
          
       </section>
@@ -163,13 +203,13 @@ <h3>Rationale for the Ratios Chosen</h3>
          
          <h3>Notes on formula</h3>
          
-         <p>Conversion from nonlinear to linear RGB values is based on IEC/4WD 61966-2-1 [[IEC-4WD]] and on "A Standard Default Color Space for the Internet - sRGB" [[sRGB]].</p>
+         <p>Conversion from nonlinear to linear RGB values is based on IEC/4WD 61966-2-1 [[IEC-4WD]].</p>
          
-         <p>The formula (L1/L2) for contrast is based on [[ISO-9241-3]] and [[ANSI-HFES-100-1988]] standards.</p>
+         <p>The formula (<code>L1/L2</code>) for contrast is based on [[ISO-9241-3]] and [[ANSI-HFES-100-1988]] standards.</p>
          
          <p>The ANSI/HFS 100-1988 standard calls for the contribution from ambient light to be
-            included in the calculation of L1 and L2. The .05 value used is based on Typical Viewing
-            Flare from [[IEC-4WD]] and the [[sRGB]] paper by M. Stokes et al.
+            included in the calculation of L1 and L2. The <code>.05</code> value used is based on Typical Viewing
+            Flare from [[IEC-4WD]].
          </p>
          
          <p>This Success Criterion and its definitions use the terms "contrast ratio" and "relative
@@ -179,22 +219,27 @@ <h3>Notes on formula</h3>
          </p>
          
          <div class="note">
-            
             <p>
-               	Refer to 
-               <a href="#visual-audio-contrast7-resources-head">related resources</a> for a list of tools that utilize the contrast ratio to analyze the contrast of Web
-               content. 
-               
+               Refer to 
+               <a href="#resources">related resources</a> for a list of tools that utilize the contrast ratio
+               to analyze the contrast of Web content.
             </p>
-            
             <p>See also 
-               <a href="focus-visible">2.4.3: Focus Visible</a> for techniques for indicating keyboard focus.
+               <a href="focus-visible">2.4.7: Focus Visible</a> for techniques for indicating keyboard focus.
             </p>
-            
          </div>
          
       </section>
       
+      <section id="inactive-controls">
+         <h3>Inactive User Interface Components</h3>
+
+         <p>User Interface Components that are not available for user interaction (e.g., a disabled control in HTML) are not required to meet contrast requirements. An inactive user interface component is visible but not currently operable. An example would be a submit button at the bottom of a form that is visible but cannot be activated until all the required fields in the form are completed.</p>
+         <figure id="figure-grey-button-and-text">
+            <img src="img/inactive-button.png" alt="Grey button with non-contrasting grey text." width="120"/>
+            <figcaption> An inactive button using default browser styles</figcaption>
+         </figure>
+      </section>
       
    </section>
    <section id="benefits">
@@ -228,75 +273,39 @@ <h2>Resources for Contrast (Enhanced)</h2>
       <ul>
          
          <li>
-            								       
-            <a href="https://www.paciellogroup.com/resources/contrastanalyser/">Contrast Analyser – Application</a>
-            							     
+            <a href="https://www.tpgi.com/color-contrast-checker/">Colour Contrast Analyser application</a>
          </li>
          
          <li>
-            								       
-            <a href="http://juicystudio.com/services/luminositycontrastratio.php">Contrast Ratio Analyser - online service</a>
-            							     
+            <a href="https://juicystudio.com/services/luminositycontrastratio.php">Luminosity Colour Contrast Ratio Analyser</a>
          </li>
          
          <li>
-            								       
-            <a href="http://juicystudio.com/article/colour-contrast-analyser-firefox-extension.php">Colour Contrast Analyser - Firefox Extension</a>
-            							     
+            <a href="https://snook.ca/technical/colour_contrast/colour.html">Colour Contrast Check</a>
          </li>
          
          <li>
-            								       
-            <a href="http://snook.ca/technical/colour_contrast/colour.html">Colour Contrast Check</a>
-            							     
+            <a href="https://www.msfw.com/Services/ContrastRatioCalculator">Contrast Ratio Calculator</a>
          </li>
          
          <li>
-            								       
-            <a href="http://www.msfw.com/accessibility/tools/contrastratiocalculator.aspx">Contrast Ratio Calculator</a>
-            							     
+            <a href="https://color.adobe.com/create/color-contrast-analyzer">Adobe Color - Color Contrast Analyzer Tool</a>
          </li>
          
          <li>
-            								       
-            <a href="http://trace.wisc.edu/contrast-ratio-examples/">Color Contrast Samples</a>
-            							     
-         </li>
-         
-         <li>
-            								       
             <a href="https://www.w3.org/Graphics/atypical-color-response">Atypical colour response</a>
-            							     
          </li>
          
          <li>
-            								       
             <a href="http://www.colorsontheweb.com/colorcontrast.asp">Colors On the Web Color Contrast Analyzer</a>
-            							     
-         </li>
-         
-         <li>
-            
-            <a href="http://uxmovement.com/content/6-surprising-bad-practices-that-hurt-dyslexic-users/">6 Surprising Bad Practices That Hurt Dyslexic Users</a>
-            
          </li>
          
          <li>
-            
-            <a href="http://accessites.org/site/2006/11/designing-for-dyslexics-part-3-of-3">Design for Dyslexics</a>
-            
+            <a href="https://www.iansyst.co.uk/fonts/">Reading with Dyslexia - Fonts that can help alleviate visual stress.</a>
          </li>
          
          <li>
-            
-            <a href="http://www.iansyst.co.uk/articles/article/articles/2012/10/18/fonts-for-dyslexia">Typefaces for Dyslexia</a>
-            
-         </li>
-         
-         <li>
-            
-            <a href="http://www.dyslexia.com/library/webdesign.htm">Web Design for Dyslexia</a>
-            
+            <a href="https://blog.dyslexia.com/good-fonts-for-dyslexia-an-experimental-study/">Good Fonts for Dyslexia - An Experimental Study</a>
          </li>
          
       </ul>
@@ -315,39 +324,27 @@ <h3>Sufficient Techniques for Contrast (Enhanced)</h3>
             
             <h4>Situation A: text is less than 18 point if not bold and less than 14 point if bold</h4>
             
-            <ol>
+            <ul>
                
                <li>
-                  										           
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G17" class="general">Ensuring that  contrast of at least 10:1 exists between text and background behind
+                  <a href="../Techniques/general/G17" class="general">Ensuring that  contrast of at least 10:1 exists between text and background behind
                      the text
                   </a>
-                  									         
                </li>
                
                <li>
-                  										           
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G148" class="general">Not specifying background color, not specifying text color, and not using technology
+                  <a href="../Techniques/general/G148" class="general">Not specifying background color, not specifying text color, and not using technology
                      features that change those defaults
                   </a>
-                  									         
                </li>
                
                <li>
-                  										           
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G174" class="general">Providing a control with a sufficient contrast ratio that allows users to switch to
+                  <a href="../Techniques/general/G174" class="general">Providing a control with a sufficient contrast ratio that allows users to switch to
                      a presentation that uses sufficient contrast
                   </a>
-                  									         
-               </li>
-               
-               <li>
-                  
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/silverlight/SL13" class="silverlight"></a>
-                  
                </li>
                
-            </ol>
+            </ul>
             
          </section>
          
@@ -355,39 +352,27 @@ <h4>Situation A: text is less than 18 point if not bold and less than 14 point i
             
             <h4>Situation B: text is as least 18 point if not bold and at least 14 point if bold</h4>
             
-            <ol>
+            <ul>
                
                <li>
-                  										           
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G18" class="general">Ensuring that a contrast ratio of at least 4.5:1 exists between text and background
+                  <a href="../Techniques/general/G18" class="general">Ensuring that a contrast ratio of at least 4.5:1 exists between text and background
                      behind the text
                   </a>
-                  									         
                </li>
                
                <li>
-                  										           
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G148" class="general">Not specifying background color, not specifying text color, and not using technology
+                  <a href="../Techniques/general/G148" class="general">Not specifying background color, not specifying text color, and not using technology
                      features that change those defaults
                   </a>
-                  									         
                </li>
                
                <li>
-                  										           
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G174" class="general">Providing a control with a sufficient contrast ratio that allows users to switch to
+                  <a href="../Techniques/general/G174" class="general">Providing a control with a sufficient contrast ratio that allows users to switch to
                      a presentation that uses sufficient contrast
                   </a>
-                  									         
-               </li>
-               
-               <li>
-                  
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/silverlight/SL13" class="silverlight"></a>
-                  
                </li>
                
-            </ol>
+            </ul>
             
          </section>
          
@@ -400,9 +385,7 @@ <h3>Additional Techniques (Advisory) for Contrast (Enhanced)</h3>
          <ul>
             
             <li>
-               									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G156" class="general">G156</a>
-               								       
+               <a href="../Techniques/general/G156" class="general">G156</a>
             </li>
             
          </ul>
@@ -416,19 +399,15 @@ <h3>Failures for Contrast (Enhanced)</h3>
          <ul>
             
             <li>
-               									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/failures/F24" class="failure">Failure of Success Criterion 1.4.3 due to specifying foreground colors without specifying
+               <a href="../Techniques/failures/F24" class="failure">Failure of Success Criterion 1.4.3 due to specifying foreground colors without specifying
                   background colors or vice versa
                </a>
-               								       
             </li>
             
             <li>
-               									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/failures/F83" class="failure">Failure of 1.4.3 and 1.4.6 due to using background images that do not provide sufficient
+               <a href="../Techniques/failures/F83" class="failure">Failure of 1.4.3 and 1.4.6 due to using background images that do not provide sufficient
                   contrast with foreground text (or images of text)
                </a>
-               								       
             </li>
             
          </ul>
diff --git a/understanding/20/contrast-minimum.html b/understanding/20/contrast-minimum.html
index d26e69a9f2..deec2beeee 100644
--- a/understanding/20/contrast-minimum.html
+++ b/understanding/20/contrast-minimum.html
@@ -3,31 +3,37 @@
 <head>
    <meta charset="UTF-8"></meta>
    <title>Understanding Contrast (Minimum)</title>
-   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link>
+   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/>
 </head>
 <body>
    <h1>Understanding Contrast (Minimum)</h1>
    
-   
+   <section id="brief">
+		<h2>In brief</h2>
+		<dl>
+         <dt>Goal</dt><dd>Text can be seen by more people.</dd>
+         <dt>What to do</dt><dd>Provide sufficient contrast between text and its background.</dd>
+         <dt>Why it's important</dt><dd>Some people cannot read faint text. </dd> 
+      </dl>
+
+   </section>
+
    <section id="intent">
       <h2>Intent of Contrast (Minimum)</h2>
       
-      
-      <p>The intent of this Success Criterion is to provide enough contrast between text and
-         its background so that it can be read by people with moderately low vision (who do
-         not use contrast-enhancing assistive technology). For people without color deficiencies,
-         hue and saturation have minimal or no effect on legibility as assessed by reading
-         performance (Knoblauch et al., 1991). Color deficiencies can affect luminance contrast
-         somewhat. Therefore, in the recommendation, the contrast is calculated in such a way
-         that color is not a key factor so that people who have a color vision deficit will
-         also have adequate contrast between the text and the background.
+      <p>The intent of this Success Criterion is to provide enough contrast between text and its background, so that it can be read by people with moderately low vision or impaired contrast perception, without the use of contrast-enhancing assistive technology.
+      </p>
+      <p>For all consumers of visual content, adequate light-dark contrast is needed between the relative luminance of text and its background for good readability.
+         Many different visual impairments can substantially impact contrast sensitivity, requiring more light-dark contrast, regardless of color (hue).
+         For people who are not able to distinguish certain shades of color (often referred to as <q>color blindness</q>) hue and saturation have minimal or no effect on legibility as assessed by reading performance.
+         Further, the inability to distinguish certain shades of color does not negatively affect light-dark contrast perception.
+         Therefore, in the recommendation, contrast is calculated in such a way that color (hue) is not a key factor.
       </p>
       
       <p>Text that is decorative and conveys no information is excluded. For example, if random
          words are used to create a background and the words could be rearranged or substituted
          without changing meaning, then it would be decorative and would not need to meet this
          criterion. 
-         
       </p>
       
       <p>Text that is larger and has wider character strokes is easier to read at lower contrast.
@@ -37,37 +43,50 @@ <h2>Intent of Contrast (Minimum)</h2>
          enough to require a lower contrast ratio. (See The American Printing House for the
          Blind Guidelines for Large Printing and The Library of Congress Guidelines for Large
          Print under 
-         <a href="#resources">Resources</a>). "18 point" and "bold" can both have different meanings in different fonts but,
-         except for very thin or unusual fonts, they should be sufficient. Since there are
-         so many different fonts, the general measures are used and a note regarding fancy
-         or thin fonts is included.
+         <a href="#resources">Resources</a>). "18 point" and "bold" can both have different meanings in
+         different fonts but, except for very thin or unusual fonts, they should be sufficient. Since there
+         are so many different fonts, the general measures are used and a note regarding thin or unusual
+         fonts is included in the definition for <a>large-scale</a> text.
       </p>
       
       <div class="note">
-         
-         <p>When evaluating this success criterion, the font size in points should be obtained
+         <p>When evaluating this Success Criterion, the font size in points should be obtained
             from the user agent or calculated on font metrics in the way that user agents do.
-            Point sizes are based on the CSS pt size as defined in 
-            <a href="https://www.w3.org/TR/css-values-3/#reference-pixel">CSS3 Values</a>. The ratio between sizes in points and CSS pixels is 1pt = 1.333px, therefore 14pt
-            and 18pt are equivalent to approximately 18.5px and 24px.
+            Point sizes are based on the CSS <code>pt</code> size as defined in 
+            <a href="https://www.w3.org/TR/css-values-3/#reference-pixel">CSS3 Values</a>. The ratio between
+            sizes in points and CSS pixels is <code>1pt = 1.333px</code>, therefore <code>14pt</code>
+            and <code>18pt</code> are equivalent to approximately <code>18.5px</code> and <code>24px</code>.
          </p>
-         
          <p>Because different image editing applications default to different pixel densities
-            (e.g. 72 PPI or 96 PPI), specifying point sizes for fonts from within an image editing
-            application can be unreliable when it comes to presenting text at a specific size.
+            (e.g., <code>72ppi</code> or <code>96ppi</code>), specifying point sizes for fonts from within an
+            image editing application can be unreliable when it comes to presenting text at a specific size.
             When creating images of large-scale text, authors should ensure that the text in the
             resulting image is roughly equivalent to 1.2 and 1.5 em or to 120% or 150% of the
-            default size for body text. For example, for a 72 PPI image, an author would need
-            to use approximately 19 pt and 24 pt font sizes in order to successfully present images
+            default size for body text. For example, for a <code>72ppi</code> image, an author would need
+            to use approximately 19pt and 24pt font sizes in order to successfully present images
             of large-scale text to a user. 
          </p>
-         
+         <p>The 3:1 and 4.5:1 contrast ratios referenced in this Success Criterion are intended to be
+            treated as threshold values. When comparing the computed contrast ratio to the Success Criterion
+            ratio, the computed values should not be rounded (e.g., 4.499:1 would not meet the 4.5:1 threshold).</p>
       </div>
       
-      <p>The previously-mentioned contrast requirements for text also apply to images of text
-         (text that has been rendered into pixels and then stored in an image format) as stated
-         in Success Criterion 1.4.3.
-         
+      <div class="note">
+         <p>Because authors do not have control over user settings for font smoothing/anti-aliasing, when evaluating this
+            Success Criterion, refer to the foreground and background colors obtained from the user agent, or the underlying
+            markup and stylesheets, rather than the text as presented on screen.</p>
+         <p>Due to anti-aliasing, particularly thin or unusual fonts may be rendered by user agents with a much fainter
+            color than the actual text color defined in the underlying CSS. This can lead to situations where text has
+            a contrast ratio that nominally passes the Success Criterion, but has a much lower contrast in practice.
+            In these cases, best practice would be for authors to choose a font with stronger/thicker lines,
+            or to aim for a foreground/background color combination that exceeds the normative requirements
+            of this Success Criterion.
+         </p>
+      </div>
+
+      <p>The contrast requirements for text also apply to images of text
+         (text that has been rendered into pixels and then stored in an image format) - see
+         <a href="images-of-text">Success Criterion 1.4.5: Images of Text</a>.
       </p>
       
       <p>This requirement applies to situations in which images of text were intended to be
@@ -97,16 +116,15 @@ <h2>Intent of Contrast (Minimum)</h2>
          
       </div>
       
-      <p>The minimum contrast success criterion (1.4.3) applies to text in the page, including
+      <p>This Success Criterion applies to text in the page, including
          placeholder text and text that is shown when a pointer is hovering over an object
          or when an object has keyboard focus. If any of these are used in a page, the text
          needs to provide sufficient contrast.
       </p>
       
-      <p>Although this Success Criterion only applies to text, similar issues occur for content presented in charts, graphs, diagrams, and other non-text-based information.
-         Content presented in this manner should also have good contrast to ensure that more
-         users can access the information.
-         
+      <p>Although this Success Criterion only applies to text, similar issues occur for content presented
+         in charts, graphs, diagrams, and other non-text-based information, which is covered by
+         <a href="non-text-contrast">Success Criterion 1.4.11 Non-Text Contrast</a>.         
       </p>
       
       <p>See also 
@@ -117,38 +135,22 @@ <h2>Intent of Contrast (Minimum)</h2>
          
          <h3>Rationale for the Ratios Chosen</h3>
          
-         <p>Text that is larger and has wider character strokes is easier to read at lower contrast.
-            The contrast requirement for larger text is therefore lower. This allows authors to
-            use a wider range of color choices for large text, which is helpful for design of
-            pages, particularly titles. 18 point text or 14 point bold text is judged to be large
-            enough to require a lower contrast ratio. (See The American Printing House for the
-            Blind Guidelines for Large Printing and The Library of Congress Guidelines for Large
-            Print under 
-            <a href="#resources">Resources</a>). "18 point" and "bold" can both have different meanings in different fonts but,
-            except for very thin or unusual fonts, they should be sufficient. Since there are
-            so many different fonts, the general measures are used and a note regarding fancy
-            or thin fonts is included.
+         <p>A contrast ratio of 3:1 is the minimum level recommended by [[ISO-9241-3]] and [[ANSI-HFES-100-1988]]
+            for standard text and vision. The 4.5:1 ratio is used in this Success Criterion to account
+            for the loss in contrast that results from moderately low visual acuity, congenital
+            or acquired color deficiencies, or the loss of contrast sensitivity that typically
+            accompanies aging.
          </p>
          
-         <div class="note">
-            
-            <p>When evaluating this success criterion, the font size in points should be obtained
-               from the user agent or calculated on font metrics in the way that user agents do.
-               Point sizes are based on the CSS pt size as defined in 
-               <a href="">CSS3 Values</a>. The ratio between sizes in points and CSS pixels is 1pt = 1.333px, therefore 14pt
-               and 18pt are equivalent to approximately 18.5px and 24px.
-            </p>
-            
-            <p>Because different image editing applications default to different pixel densities
-               (e.g. 72 PPI or 96 PPI), specifying point sizes for fonts from within an image editing
-               application can be unreliable when it comes to presenting text at a specific size.
-               When creating images of large-scale text, authors should ensure that the text in the
-               resulting image is roughly equivalent to 1.2 and 1.5 em or to 120% or 150% of the
-               default size for body text as rendered by the browser.
-            </p>
-            
-         </div>
-         
+         <p>The rationale is based on a) adoption of the 3:1 contrast ratio for minimum acceptable
+            contrast for normal observers, in the ANSI standard, and b) the empirical finding
+            that in the population, visual acuity of 20/40 is associated with a contrast sensitivity
+            loss of roughly 1.5 [[ARDITI-FAYE]]. A user with 20/40 would thus require a contrast ratio of
+            <code>3 * 1.5 = 4.5 to 1</code>. Following analogous empirical findings and the same logic,
+            the user with 20/80 visual acuity would require contrast of about 7:1. This ratio is used in
+            Success Criterion 1.4.6.
+         </p>
+
          <p>Hues are perceived differently by users with color vision deficiencies (both congenital
             and acquired) resulting in different colors and relative luminance contrasts than
             for normally sighted users. Because of this, effective contrast and readability are
@@ -171,34 +173,17 @@ <h3>Rationale for the Ratios Chosen</h3>
             <p>Some people with cognitive disabilities require color combinations or hues that have
                low contrast, and therefore we allow and encourage authors to provide mechanisms to
                adjust the foreground and background colors of the content. Some of the combinations
-               that could be chosen may have contrast levels that will be lower than those found
-               in the Success Criteria. This is not a violation of this Success Criterion provided
-               there is a mechanism that will return to the default values set out in the Success
-               Criteria.
-               
+               that could be chosen may have contrast levels that will be lower than those those
+               specified here. This is not a violation of this Success Criterion, provided
+               there is a mechanism that will return to the required values set out here.
             </p>          
             
          </div>
          
-         <p>A contrast ratio of 3:1 is the minimum level recommended by [[ISO-9241-3]] and [[ANSI-HFES-100-1988]] for standard text and vision. The 4.5:1 ratio is used in this provision to account
-            for the loss in contrast that results from moderately low visual acuity, congenital
-            or acquired color deficiencies, or the loss of contrast sensitivity that typically
-            accompanies aging.
-         </p>
-         
-         <p>The rationale is based on a) adoption of the 3:1 contrast ratio for minimum acceptable
-            contrast for normal observers, in the ANSI standard, and b) the empirical finding
-            that in the population, visual acuity of 20/40 is associated with a contrast sensitivity
-            loss of roughly 1.5 [[ARDITI-FAYE]]. A user with 20/40 would thus require a contrast ratio of 3 * 1.5 = 4.5 to 1.  Following
-            analogous empirical findings and the same logic, the user with 20/80 visual acuity
-            would require contrast of about 7:1.
-         </p>
-         
          <p>The contrast ratio of 4.5:1 was chosen for level AA because it compensated for the
             loss in contrast sensitivity usually experienced by users with vision loss equivalent
             to approximately 20/40 vision. (20/40 calculates to approximately 4.5:1.) 20/40 is
             commonly reported as typical visual acuity of elders at roughly age 80. [[GITTINGS-FOZARD]] 
-            
          </p>
          
          <p>The contrast ratio of 7:1 was chosen for level AAA because it compensated for the
@@ -212,9 +197,8 @@ <h3>Rationale for the Ratios Chosen</h3>
          </p>
          
          <div class="note">
-            
-            <p>Calculations in [[ISO-9241-3]] and [[ANSI-HFES-100-1988]] are for body text. A relaxed contrast ratio is provided for text that is much larger.</p>
-            
+            <p>Calculations in [[ISO-9241-3]] and [[ANSI-HFES-100-1988]] are for body text. A relaxed contrast
+               ratio is provided for text that is much larger.</p>
          </div>
          
       </section>
@@ -223,13 +207,13 @@ <h3>Rationale for the Ratios Chosen</h3>
          
          <h3>Notes on formula</h3>
          
-         <p>Conversion from nonlinear to linear RGB values is based on IEC/4WD 61966-2-1 [[IEC-4WD]] and on "A Standard Default Color Space for the Internet - sRGB" [[sRGB]].</p>
+         <p>Conversion from nonlinear to linear RGB values is based on IEC/4WD 61966-2-1 [[IEC-4WD]].</p>
          
-         <p>The formula (L1/L2) for contrast is based on [[ISO-9241-3]] and [[ANSI-HFES-100-1988]] standards.</p>
+         <p>The formula (<code>L1/L2</code>) for contrast is based on [[ISO-9241-3]] and [[ANSI-HFES-100-1988]] standards.</p>
          
          <p>The ANSI/HFS 100-1988 standard calls for the contribution from ambient light to be
-            included in the calculation of L1 and L2. The .05 value used is based on Typical Viewing
-            Flare from [[IEC-4WD]] and the [[sRGB]] paper by M. Stokes et al.
+            included in the calculation of L1 and L2. The <code>.05</code> value used is based on Typical Viewing
+            Flare from [[IEC-4WD]].
          </p>
          
          <p>This Success Criterion and its definitions use the terms "contrast ratio" and "relative
@@ -239,34 +223,32 @@ <h3>Notes on formula</h3>
          </p>
          
          <div class="note">
-            
             <p>
                Refer to 
-               <a href="#resources">related resources</a> for a list of tools that utilize the contrast ratio to analyze the contrast of Web
-               content. 
-               
+               <a href="#resources">related resources</a> for a list of tools that utilize the contrast ratio
+               to analyze the contrast of Web content.
             </p>
-            
             <p>See also 
-               <a href="focus-visible">2.4.3: Focus Visible</a> for techniques for indicating keyboard focus.
+               <a href="focus-visible">2.4.7: Focus Visible</a> for techniques for indicating keyboard focus.
             </p>
-            
-            <p>It is sometimes helpful for authors to not specify colors for certain sections of
-               a page in order to help users who need to view content with specific color combinations
-               to view the content in their preferred color scheme. Refer to 
-               <a href="images-of-text">1.4.3: Images of Text</a> for more information.
-            </p>
-            
          </div>
          
       </section>
       
+      <section id="inactive-controls">
+         <h3>Inactive User Interface Components</h3>
+
+         <p>User Interface Components that are not available for user interaction (e.g., a disabled control in HTML) are not required to meet contrast requirements. An inactive user interface component is visible but not currently operable. An example would be a submit button at the bottom of a form that is visible but cannot be activated until all the required fields in the form are completed.</p>
+         <figure id="figure-grey-button-and-text">
+            <img src="img/inactive-button.png" alt="Grey button with non-contrasting grey text." width="120"/>
+            <figcaption> An inactive button using default browser styles</figcaption>
+         </figure>
+      </section>
       
    </section>
    <section id="benefits">
       <h2>Benefits of Contrast (Minimum)</h2>
       
-      
       <ul>
          
          <li>People with low vision often have difficulty reading text that does not contrast with
@@ -294,77 +276,60 @@ <h2>Resources for Contrast (Minimum)</h2>
       <ul>
          
          <li>
-            								       
-            <a href="https://www.paciellogroup.com/resources/contrastanalyser/">Contrast Analyser – Application</a>
-            							     
+            <a href="https://www.tpgi.com/color-contrast-checker/">Colour Contrast Analyser application</a>
          </li>
          
          <li>
-            								       
-            <a href="http://juicystudio.com/services/luminositycontrastratio.php">Contrast Ratio Analyser - online service</a>
-            							     
+            <a href="https://juicystudio.com/services/luminositycontrastratio.php">Luminosity Colour Contrast Ratio Analyser</a>
          </li>
          
          <li>
-            								       
-            <a href="http://juicystudio.com/article/colour-contrast-analyser-firefox-extension.php">Colour Contrast Analyser - Firefox Extension</a>
-            							     
+            <a href="https://snook.ca/technical/colour_contrast/colour.html">Colour Contrast Check</a>
          </li>
          
          <li>
-            								       
-            <a href="http://snook.ca/technical/colour_contrast/colour.html">Colour Contrast Check</a>
-            							     
+            <a href="https://www.msfw.com/Services/ContrastRatioCalculator">Contrast Ratio Calculator</a>
          </li>
          
          <li>
-            								       
-            <a href="http://www.msfw.com/accessibility/tools/contrastratiocalculator.aspx">Contrast Ratio Calculator</a>
-            							     
+            <a href="https://color.adobe.com/create/color-contrast-analyzer">Adobe Color - Color Contrast Analyzer Tool</a>
          </li>
          
          <li>
-            								       
-            <a href="http://trace.wisc.edu/contrast-ratio-examples/">Color Contrast Samples</a>
-            							     
-         </li>
-         
-         <li>
-            								       
             <a href="https://www.w3.org/Graphics/atypical-color-response">Atypical colour response</a>
-            							     
          </li>
          
          <li>
-            								       
             <a href="http://www.colorsontheweb.com/colorcontrast.asp">Colors On the Web Color Contrast Analyzer</a>
-            							     
          </li>
          
          <li>
-            								       
-            <a href="http://www.vischeck.com/daltonize/runDaltonize.php">Tool to convert images based on color loss so that contrast is restored as luminance
-               contrast when there was only color contrast (that was lost due to color deficiency)
-            </a>
-            							     
+            <a href="https://www.vischeck.com/daltonize/runDaltonize.php">Tool to convert images based on color loss</a> so that contrast is restored as luminance contrast when there was only color contrast (that was lost due to color deficiency)
          </li>
          
          <li>
-            								       
-            <a href="http://www.456bereastreet.com/archive/200709/10_colour_contrast_checking_tools_to_improve_the_accessibility_of_your_design/">List of color contrast tools</a>
-            							     
+            <a href="https://www.456bereastreet.com/archive/200709/10_colour_contrast_checking_tools_to_improve_the_accessibility_of_your_design/">List of color contrast tools</a>
          </li>
 
          <li>
-         	
-         	<a href="https://www.aph.org/research/design-guidelines/">The American Printing House for the Blind Guidelines for Large Printing</a>
+            <a href="https://www.aph.org/resources/large-print-guidelines/">The American Printing House for the Blind Guidelines for Large Printing</a>
          </li>
 
          <li>
-         	
-         	<a href="https://www.loc.gov/nlsold/reference/guides/largeprint.html">National Library Service for the Blind and Physically Handicapped (NLS), The Library of Congress Guidelines for Large Print</a>
+            <a href="https://www.loc.gov/nls/resources/general-resources-on-disabilities/large-print-materials/">National Library Service for the Blind and Physically Handicapped (NLS), The Library of Congress reference guide on large print materials</a>
+         </li>
+         <li>         	
+         	<a href="https://www.nei.nih.gov/learn-about-eye-health/eye-conditions-and-diseases/color-blindness/types-color-blindness">Types of Color Blindness, National Eye Institute (NEI), National Institutes of Health (NIH), U.S. Department of Health and Human Services (HHS)</a>
+         </li>
+         <li>
+            <a href="https://doi.org/10.1364/JOSAA.8.000428">Effects of chromatic and luminance contrast on reading, Knoblauch et al., 1991</a>
+         </li>
+         <li>
+            <a href="https://pubmed.ncbi.nlm.nih.gov/24103453/">Achromatic luminance contrast sensitivity in X-linked color-deficient observers: an addition to the debate, Márta Janáky et al., 2013</a>
+         </li>
+         <li>
+            <a href="https://link.springer.com/article/10.1007/s10792-018-0881-7">Contrast sensitivity of patients with congenital color vision deficiency, Cagri Ilhan et al., 2018</a>
          </li>
-         
       </ul>
       
    </section>
@@ -381,39 +346,27 @@ <h3>Sufficient Techniques for Contrast (Minimum)</h3>
             
             <h4>Situation A: text is less than 18 point if not bold and less than 14 point if bold</h4>
             
-            <ol>
+            <ul>
                
                <li>
-                  										           
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G18" class="general">Ensuring that  contrast of at least 4.5:1 exists between text (and images of text)
+                  <a href="../Techniques/general/G18" class="general">Ensuring that  contrast of at least 4.5:1 exists between text (and images of text)
                      and background behind the text
                   </a>
-                  									         
                </li>
                
                <li>
-                  										           
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G148" class="general">Not specifying background color, not specifying text color, and not using technology
+                  <a href="../Techniques/general/G148" class="general">Not specifying background color, not specifying text color, and not using technology
                      features that change those defaults
                   </a>
-                  									         
                </li>
                
                <li>
-                  										           
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G174" class="general">Providing a control with a sufficient contrast ratio that allows users to switch to
+                  <a href="../Techniques/general/G174" class="general">Providing a control with a sufficient contrast ratio that allows users to switch to
                      a presentation that uses sufficient contrast
                   </a>
-                  									         
                </li>
                
-               <li>
-                  
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/silverlight/SL13" class="silverlight">Providing A Style Switcher To Switch To High Contrast</a>
-                  
-               </li>
-               
-            </ol>
+            </ul>
             
          </section>
          
@@ -421,39 +374,27 @@ <h4>Situation A: text is less than 18 point if not bold and less than 14 point i
             
             <h4>Situation B: text is at least 18 point if not bold and at least 14 point if bold</h4>
             
-            <ol>
+            <ul>
                
                <li>
-                  										           
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G145" class="general">Ensuring that a contrast ratio of at least 3:1 exists between text (and images of
+                  <a href="../Techniques/general/G145" class="general">Ensuring that a contrast ratio of at least 3:1 exists between text (and images of
                      text) and background behind the text
                   </a>
-                  									         
                </li>
                
                <li>
-                  										           
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G148" class="general">Not specifying background color, not specifying text color, and not using technology
+                  <a href="../Techniques/general/G148" class="general">Not specifying background color, not specifying text color, and not using technology
                      features that change those defaults
                   </a>
-                  									         
                </li>
                
                <li>
-                  										           
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G174" class="general">Providing a control with a sufficient contrast ratio that allows users to switch to
+                  <a href="../Techniques/general/G174" class="general">Providing a control with a sufficient contrast ratio that allows users to switch to
                      a presentation that uses sufficient contrast
                   </a>
-                  									         
-               </li>
-               
-               <li>
-                  
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/silverlight/SL13" class="silverlight">Providing A Style Switcher To Switch To High Contrast</a>
-                  
                </li>
                
-            </ol>
+            </ul>
             
          </section>
          
@@ -466,9 +407,7 @@ <h3>Additional Techniques (Advisory) for Contrast (Minimum)</h3>
          <ul>
             
             <li>
-               									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G156" class="general">G156</a>
-               								       
+               <a href="../Techniques/general/G156" class="general">G156</a>
             </li>
             
          </ul>
@@ -482,19 +421,15 @@ <h3>Failures for Contrast (Minimum)</h3>
          <ul>
             
             <li>
-               									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/failures/F24" class="failure">Failure due to specifying foreground colors without specifying background colors or
+               <a href="../Techniques/failures/F24" class="failure">Failure due to specifying foreground colors without specifying background colors or
                   vice versa
                </a>
-               								       
             </li>
             
             <li>
-               									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/failures/F83" class="failure">Failure of 1.4.3 and 1.4.6 due to using background images that do not provide sufficient
+               <a href="../Techniques/failures/F83" class="failure">Failure of 1.4.3 and 1.4.6 due to using background images that do not provide sufficient
                   contrast with foreground text (or images of text)
                </a>
-               								       
             </li>
             
          </ul>
diff --git a/understanding/20/distinguishable.html b/understanding/20/distinguishable.html
index 8fd90be4e8..44587bd76d 100644
--- a/understanding/20/distinguishable.html
+++ b/understanding/20/distinguishable.html
@@ -3,7 +3,7 @@
 <head>
    <meta charset="UTF-8"></meta>
    <title>Understanding Distinguishable</title>
-   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link>
+   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/>
 </head>
 <body>
    <h1>Understanding Distinguishable</h1>
diff --git a/understanding/20/enough-time.html b/understanding/20/enough-time.html
index 8aa9ebf28f..46b3f45576 100644
--- a/understanding/20/enough-time.html
+++ b/understanding/20/enough-time.html
@@ -3,7 +3,7 @@
 <head>
    <meta charset="UTF-8"></meta>
    <title>Understanding Enough Time</title>
-   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link>
+   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/>
 </head>
 <body>
    <h1>Understanding Enough Time</h1>
diff --git a/understanding/20/error-identification.html b/understanding/20/error-identification.html
index 1882ea8ce0..3ec00312f6 100644
--- a/understanding/20/error-identification.html
+++ b/understanding/20/error-identification.html
@@ -1,326 +1,183 @@
 <!DOCTYPE html>
 <html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
 <head>
-   <meta charset="UTF-8"></meta>
+   <meta charset="UTF-8"/>
    <title>Understanding Error Identification</title>
-   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link>
+   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/>
 </head>
 <body>
    <h1>Understanding Error Identification</h1>
-   
-   
+
+   <section id="brief">
+		<h2>In brief</h2>
+		<dl>
+         <dt>Goal</dt><dd>Users know an error exists and what is wrong.</dd>
+         <dt>What to do</dt><dd>Provide descriptive notification of errors.</dd>
+         <dt>Why it's important</dt><dd>Flagging errors helps people with reduced sight and cognitive disabilities resolve them.</dd>
+      </dl>
+
+   </section>
+
    <section id="intent">
       <h2>Intent of Error Identification</h2>
-      
-      
-      <p>The intent of this Success Criterion is to ensure that users are aware that an error
-         has occurred and can determine what is wrong. The error message should be as specific
-         as possible. 
-         						In the case of an unsuccessful form submission, re-displaying the form and indicating
-         the fields in error is insufficient for some users to perceive that an error has occurred.
-         Screen reader users, for example, will not know there was an error until they encounter
-         one of the indicators. They may abandon the form altogether before encountering the
-         error indicator, thinking that the page simply is not functional. Per the definition in WCAG 2.0, an "input error" is information provided by the user
-         that is not accepted. This includes: 
+
+      <p>The intent of this success criterion is to ensure that users are aware that an error
+         has occurred and can determine what is wrong. In the case of an unsuccessful form submission,
+         it is not sufficient to only re-display the form without providing any hint that the submission
+         failed.
+         The error must be indicated in <a>text</a>.
+         Whether or not an error message provides users with sufficient information about the nature of
+         the error, and what they should do to correct it, is covered more specifically by
+         <a href="error-suggestion">3.3.3 Error Suggestion</a>.
       </p>
-      
+      <p>An "input error" is information provided by the user that is not accepted. This includes:</p>
+
       <ul>
-         
          <li>information that is required by the web page but omitted by the user, or</li>
-         
-         <li>information that is provided by the user but that falls outside the required data
-            format or allowed values.
-         </li>
-         
+         <li>information that is provided by the user but that falls outside the required data format or allowed values.</li>
       </ul>
-      
+
       <p>For example:</p>
-      
+
       <ul>
-         
-         <li>the user fails to enter the proper abbreviation in to state, province, region, etc.
-            field; 
-         </li>
-         
+         <li>the user fails to enter the proper abbreviation in a state, province, or region field;</li>
          <li>the user enters a state abbreviation that is not a valid state; </li>
-         
          <li>the user enters a non existent zip or postal code;</li>
-         
          <li>the user enters a birth date 2 years in the future;</li>
-         
-         <li>the user enters alphabetic characters or parentheses into their phone number field
-            that only accepts numbers;
-         </li>
-         
+         <li>the user enters alphabetic characters or parentheses into their phone number field that only accepts numbers;</li>
          <li>the user enters a bid that is below the previous bid or the minimum bid increment.</li>
-         
       </ul>
-      
+
       <div class="note">
-         
          <p>If a user enters a value that is too high or too low, and the coding on the page automatically
             changes that value to fall within the allowed range, the user's error would still
             need to be described to them as required by the success criterion. Such an error description
             telling the person of the changed value would meet both this success criterion (Error
-            Identification) and 
-            <a href="error-suggestion" class="understanding">Success Criterion 3.3.3 (Error Suggestion)</a>. 
+            Identification) and <a href="error-suggestion">3.3.3 Error Suggestion</a>.
          </p>
-         
       </div>
-      
+
       <p>The identification and description of an error can be combined with programmatic information
          that user agents or assistive technologies can use to identify an error and provide
          error information to the user. For example, certain technologies can specify that
          the user's input must not fall outside a specific range, or that a form field is required.
-         Currently, few technologies support this kind of programmatic information, but the
-         Success Criterion does not require, nor prevent it.
-         
-      </p>
-      
-      <p>It is perfectly acceptable to indicate the error in other ways such as image, color
-         etc, in addition to the text description. 
-         
-      </p>
-      
-      <p>See also 
-         <a href="error-suggestion">3.3.1: Error Suggestion</a>.
-      </p>
-      
-      
+         Currently, few technologies support this kind of programmatic information, but this
+         success criterion does not require, nor prevent it.</p>
+
+      <p>It is perfectly acceptable to indicate the error in other ways such as through the use of an image,
+         color, or other visual indicator, in addition to the text description.</p>
+
+      <div class="note">
+         <p>This criterion does not mandate any particular way in which errors should be displayed. Depending
+            on the situation, it may be more suitable for all errors to be listed at the start or before a form.
+            In other cases, it may be more appropriate to show errors inline, with error messages next to the specific
+            fields that are in error. Errors could also be listed in an alert, or dialog. This criterion does not
+            cover which of these methods should be used - the only requirement is for errors  to be presented to users in text or a text alternative.
+         </p>
+      </div>
+
+      <p>See also <a href="error-suggestion">3.3.3: Error Suggestion</a>.</p>
+
    </section>
    <section id="benefits">
       <h2>Benefits of Error Identification</h2>
-      
-      
+
       <ul>
-         
-         <li> Providing information about input errors in text allows users who are blind or colorblind
-            to perceive the fact that an error occurred.  
+         <li>
+            Providing information about input errors in text allows users who are blind or color deficient (color blind) to perceive the fact that an error occurred.
          </li>
-         
          <li>
-            This Success Criterion may help people with cognitive, language, and learning disabilities
-            who have difficulty understanding the meaning represented by icons and other visual
-            cues. 
-            
-            
+            This success criterion may help people with cognitive, language, and learning disabilities
+            who have difficulty understanding the specific reason why a form submission failed (in cases
+            where this is not already made obvious by the nature of the form).
          </li>
-         
       </ul>
-      
+
    </section>
-   
+
    <section id="examples">
       <h2>Examples of Error Identification</h2>
-      
-      
-      <ul>
-         
-         <li>
-            
-            <p>
-               								       
-               <strong>Identifying errors in a form submission</strong>
-               							     
-            </p>
-            
-            <p>
-               An airline Web site offers a special promotion on discounted flights. The user is
+
+      <dl>
+         <dt>Identifying errors in a form submission</dt>
+         <dd>
+            <p>An airline Web site offers a special promotion on discounted flights. The user is
                asked to complete a simple form that asks for personal information such as name, address,
                phone number, seating preference and e-mail address. If any of the fields of the form
                are either not completed or completed incorrectly, an alert is displayed notifying
-               the user which field or fields were missing or incorrect. 
-               
-               
-            </p>
-            
+               the user which field or fields were missing or incorrect.</p>
+
             <div class="note">
-               
-               <p>This Success Criterion does not mean that color or text styles cannot be used to indicate
-                  errors. It simply requires that errors also be identified using text. In this example,
-                  two asterisks are used in addition to color.
+               <p>This success criterion does not mean that color or text styles cannot be used to indicate
+                  errors. It simply requires that errors also be identified using text.
                </p>
-               
             </div>
-            
-         </li>
-         
-         <li>
-            
-            <p>
-               								       
-               <strong>Providing multiple cues</strong>
-               							     
-            </p>
-            
-            <p>The user fails to fill in two fields on the form.  In addition to describing the error
+         </dd>
+         <dt>Providing multiple cues</dt>
+         <dd>The user fails to fill in two fields on the form.  In addition to describing the error
                and providing a unique character to make it easy to search for the fields, the fields
-               are highlighted in yellow to make it easier to visually search for them as well.
-               
-            </p>
-            
-         </li>
-         
-      </ul>
-      
+               are highlighted in yellow to make it easier to visually search for them as well.</dd>
+      </dl>
+
    </section>
-   
+
    <section id="resources">
       <h2>Resources for Error Identification</h2>
-      
-      
-      
+
    </section>
-   
+
    <section id="techniques">
       <h2>Techniques for Error Identification</h2>
-      
-      
+
       <section id="sufficient">
          <h3>Sufficient Techniques for Error Identification</h3>
-         
-         
+
          <section class="situation" id="error-identification-situation-0">
-            
+
             <h4>Situation A: If a form contains fields for which information from the user is mandatory.</h4>
-            
-            <ol>
-               
-               <li>
-                  										           
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G83" class="general">Providing a text description that identifies the field as mandatory</a>
-                  									         
-               </li>
-               
-               <li>
-                  
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA21" class="aria"></a>
-                  
-               </li>
-               
-               <li>
-                  										           
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/client-side-script/SCR18" class="script">Providing client-side validation and alert </a>
-                  									         
-               </li>
-               
-               <li>
-                  
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/pdf/PDF5" class="pdf"></a>
-                  
-               </li>
-               
-               <li>
-                  
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/silverlight/SL35" class="silverlight"></a>
-                  
-               </li>
-               
-            </ol>
-            
+
+            <ul>
+               <li><a href="../Techniques/general/G83" class="general">Providing a text description that identifies the field as mandatory</a></li>
+               <li><a href="../Techniques/aria/ARIA2" class="aria">ARIA2: Identifying required fields with the "required" property</a></li>
+               <li><a href="../Techniques/aria/ARIA21" class="aria"></a></li>
+               <li><a href="../Techniques/client-side-script/SCR18" class="script">Providing client-side validation and alert </a></li>
+               <li><a href="../Techniques/pdf/PDF5" class="pdf"></a></li>
+            </ul>
          </section>
-         
+
          <section class="situation" id="error-identification-situation-1">
-            
+
             <h4>Situation B: If information provided by the user is required to be in a specific data
                format or of certain values.
             </h4>
-            
-            <ol>
-               
-               <li>
-                  
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA18" class="aria"></a>
-                  
-               </li>
-               
-               <li>
-                  
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA19" class="aria"></a>
-                  
-               </li>
-               
-               <li>
-                  
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA21" class="aria"></a>
-                  
-               </li>
-               
-               <li>
-                  										           
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G84" class="general">G84: Providing a text description when the user provides information that is not in
-                     the list of allowed values
-                  </a>
-                  									         
-               </li>
-               
-               <li>
-                  										           
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G85" class="general">Providing a text description when user input falls outside the required format or
-                     values
-                  </a>
-                  									         
-               </li>
-               
-               <li>
-                  										           
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/client-side-script/SCR18" class="script">Providing client-side validation and alert</a>
-                  									         
-               </li>
-               
-               <li>
-                  										           
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/client-side-script/SCR32" class="script">Providing client-side validation and adding error text via the DOM</a>
-                  									         
-               </li>
-               
-               <li>
-                  
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/pdf/PDF22" class="pdf"></a>
-                  
-               </li>
-               
-               <li>
-                  
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/silverlight/SL35" class="silverlight"></a>
-                  
-               </li>
-               
-            </ol>
-            
+
+            <ul>
+               <li><a href="../Techniques/aria/ARIA18" class="aria"></a></li>
+               <li><a href="../Techniques/aria/ARIA19" class="aria"></a></li>
+               <li><a href="../Techniques/aria/ARIA21" class="aria"></a></li>
+               <li><a href="../Techniques/general/G84" class="general">G84: Providing a text description when the user provides information that is not in the list of allowed values</a></li>
+               <li><a href="../Techniques/general/G85" class="general">Providing a text description when user input falls outside the required format or values</a></li>
+               <li><a href="../Techniques/client-side-script/SCR18" class="script">Providing client-side validation and alert</a></li>
+               <li><a href="../Techniques/client-side-script/SCR32" class="script">Providing client-side validation and adding error text via the DOM</a></li>
+               <li><a href="../Techniques/pdf/PDF22" class="pdf"></a></li>
+            </ul>
          </section>
-         
       </section>
-      
+
       <section id="advisory">
          <h3>Additional Techniques (Advisory) for Error Identification</h3>
-         
-         
+
          <ul>
-            
-            <li>
-               									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G139" class="general">G139: Creating a mechanism that allows users to jump to errors</a>
-               								       
-            </li>
-            
-            <li>
-               									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G199" class="general">Providing success feedback when data is submitted successfully</a>
-               								       
-            </li>
-            
+            <li><a href="../Techniques/general/G139" class="general">G139: Creating a mechanism that allows users to jump to errors</a></li>
+            <li><a href="../Techniques/general/G199" class="general">Providing success feedback when data is submitted successfully</a></li>
          </ul>
-         
       </section>
-      
+
       <section id="failure">
          <h3>Failures for Error Identification</h3>
-         
-         
+
       </section>
-      
+
    </section>
-   
 </body>
 </html>
diff --git a/understanding/20/error-prevention-all.html b/understanding/20/error-prevention-all.html
index ee4537a2bb..0f1647d60d 100644
--- a/understanding/20/error-prevention-all.html
+++ b/understanding/20/error-prevention-all.html
@@ -3,11 +3,20 @@
 <head>
    <meta charset="UTF-8"></meta>
    <title>Understanding Error Prevention (All)</title>
-   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link>
+   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/>
 </head>
 <body>
    <h1>Understanding Error Prevention (All)</h1>
    
+		<section id="brief">
+			<h2>In brief</h2>
+			<dl>
+		         <dt>Goal</dt><dd>Users can avoid submitting incorrect information.</dd>
+		         <dt>What to do</dt><dd>Provide ways for users to confirm, correct, or reverse any submissions.</dd>
+			      <dt>Why it's important</dt><dd>People with disabilities may be more likely to make mistakes, or not notice them.</dd> 
+           </dl>
+
+      </section>
    
    <section id="intent">
       <h2>Intent of Error Prevention (All)</h2>
@@ -65,14 +74,14 @@ <h2>Techniques for Error Prevention (All)</h2>
          <h3>Sufficient Techniques for Error Prevention (All)</h3>
          
          
-         <ol>
+         <ul>
             
             <li>
                	Following the 
                <a href="error-prevention-legal-financial-data#techniques" class="understanding">sufficient techniques for Success Criterion 3.3.4</a> for all forms that require the user to submit information.
             </li>
             
-         </ol>
+         </ul>
          
       </section>
       
diff --git a/understanding/20/error-prevention-legal-financial-data.html b/understanding/20/error-prevention-legal-financial-data.html
index 5231a1ba90..cc1b924063 100644
--- a/understanding/20/error-prevention-legal-financial-data.html
+++ b/understanding/20/error-prevention-legal-financial-data.html
@@ -3,11 +3,20 @@
 <head>
    <meta charset="UTF-8"></meta>
    <title>Understanding Error Prevention (Legal, Financial, Data)</title>
-   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link>
+   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/>
 </head>
 <body>
    <h1>Understanding Error Prevention (Legal, Financial, Data)</h1>
    
+   <section id="brief">
+		<h2>In brief</h2>
+		<dl>
+         <dt>Goal</dt><dd>Users can avoid submitting incorrect important information.</dd>
+         <dt>What to do</dt><dd>Provide ways for users to confirm, correct, or reverse important submissions.</dd>
+         <dt>Why it's important</dt><dd>People with disabilities may be more likely to make mistakes, or not notice them.</dd> 
+      </dl>
+
+   </section>
    
    <section id="intent">
       <h2>Intent of Error Prevention (Legal, Financial, Data)</h2>
@@ -17,9 +26,9 @@ <h2>Intent of Error Prevention (Legal, Financial, Data)</h2>
          consequences as the result of a mistake when performing an action that cannot be reversed.
          For example, purchasing non-refundable airline tickets or submitting an order to purchase
          stock in a brokerage account are financial transactions with serious consequences.
-         If a user has made a mistake on the date of air travel, he or she could end up with
-         a ticket for the wrong day that cannot be exchanged. If the user made a mistake on
-         the number of stock shares to be purchased, he or she could end up purchasing more
+         If users have made a mistake on the date of air travel, they could end up with
+         a ticket for the wrong day that cannot be exchanged. If users made a mistake on
+         the number of stock shares to be purchased, they could end up purchasing more
          stock than intended. Both of these types of mistakes involve transactions that take
          place immediately and cannot be altered afterwards, and can be very costly. Likewise,
          it may be an unrecoverable error if users unintentionally modify or delete data stored
@@ -65,43 +74,19 @@ <h2>Benefits of Error Prevention (Legal, Financial, Data)</h2>
    <section id="examples">
       <h2>Examples of Error Prevention (Legal, Financial, Data)</h2>
       
-      
-      <ul>
-         
-         <li>
-            
-            <p>
-               								       
-               <em>Order confirmation.</em>
-               							     
-            </p>
-            
-            <p>A Web retailer offers on-line shopping for customers. When an order is submitted,
+      <dl>
+         <dt>Order confirmation</dt>
+         <dd>A Web retailer offers on-line shopping for customers. When an order is submitted,
                the order information—including items ordered, quantity of each ordered item, shipping
                address, and payment method—are displayed so that the user can inspect the order for
-               correctness. The user can either confirm the order or make changes.
-            </p>
-            
-         </li>
-         
-         <li>
-            
-            <p>
-               								       
-               <em>Stock sale:</em>
-               							     
-            </p>
-            
-            <p>A financial services Web site lets users buy and sell stock online. When a user submits
+               correctness. The user can either confirm the order or make changes.</dd>
+         <dt>Stock sale</dt>
+         <dd>A financial services Web site lets users buy and sell stock online. When a user submits
                an order to buy or sell stock, the system checks to see whether or not the market
                is open. If it is after hours, the user is alerted that the transaction will be an
                after-hours transaction, is told about the risks of trading outside of regular market
-               hours, and given the opportunity to cancel or confirm the order.
-            </p>
-            
-         </li>
-         
-      </ul>
+               hours, and given the opportunity to cancel or confirm the order.</dd>
+      </dl>
       
    </section>
    
@@ -125,11 +110,11 @@ <h4>Situation A: If an application causes a legal transaction to occur, such as
                a purchase or submitting an income tax return:
             </h4>
             
-            <ol>
+            <ul>
                
                <li>
                   										           
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G164" class="general">Providing a stated period of time after submission of the form when the order can
+                  <a href="../Techniques/general/G164" class="general">Providing a stated period of time after submission of the form when the order can
                      be updated or canceled by the user
                   </a>
                   									         
@@ -137,17 +122,17 @@ <h4>Situation A: If an application causes a legal transaction to occur, such as
                
                <li>
                   										           
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G98" class="general">Providing the ability for the user to review and correct answers before submitting</a>
+                  <a href="../Techniques/general/G98" class="general">Providing the ability for the user to review and correct answers before submitting</a>
                   									         
                </li>
                
                <li>
                   										           
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G155" class="general">Providing a checkbox in addition to a submit button</a>
+                  <a href="../Techniques/general/G155" class="general">Providing a checkbox in addition to a submit button</a>
                   									         
                </li>
                
-            </ol>
+            </ul>
             
          </section>
          
@@ -155,27 +140,27 @@ <h4>Situation A: If an application causes a legal transaction to occur, such as
             
             <h4>Situation B: If an action causes information to be deleted:</h4>
             
-            <ol>
+            <ul>
                
                <li>
                   										           
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G99" class="general">Providing the ability to recover deleted information</a>
+                  <a href="../Techniques/general/G99" class="general">Providing the ability to recover deleted information</a>
                   									         
                </li>
                
                <li>
                   										           
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G168" class="general">G168: Requesting confirmation to continue with selected action</a>
+                  <a href="../Techniques/general/G168" class="general">G168: Requesting confirmation to continue with selected action</a>
                   									         
                </li>
                
                <li>
                   										           
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G155" class="general">Providing a checkbox in addition to a submit button</a>
+                  <a href="../Techniques/general/G155" class="general">Providing a checkbox in addition to a submit button</a>
                   									         
                </li>
                
-            </ol>
+            </ul>
             
          </section>
          
@@ -183,21 +168,21 @@ <h4>Situation B: If an action causes information to be deleted:</h4>
             
             <h4>Situation C: If the Web page includes a testing application:</h4>
             
-            <ol>
+            <ul>
                
                <li>
                   										           
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G98" class="general">Providing the ability for the user to review and correct answers before submitting</a>
+                  <a href="../Techniques/general/G98" class="general">Providing the ability for the user to review and correct answers before submitting</a>
                   									         
                </li>
                
                <li>
                   										           
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G168" class="general">G168: Requesting confirmation to continue with selected action</a>
+                  <a href="../Techniques/general/G168" class="general">G168: Requesting confirmation to continue with selected action</a>
                   									         
                </li>
                
-            </ol>
+            </ul>
             
          </section>
          
@@ -211,19 +196,13 @@ <h3>Additional Techniques (Advisory) for Error Prevention (Legal, Financial, Dat
             
             <li>
                									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/client-side-script/SCR18" class="script">Providing client-side validation and alert</a>
+               <a href="../Techniques/client-side-script/SCR18" class="script">Providing client-side validation and alert</a>
                								       
             </li>
             
-            <li>
-               
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/silverlight/SL35" class="silverlight"></a>
-               
-            </li>
-            
             <li>
                									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G199" class="general">Providing success feedback when data is submitted successfully</a>
+               <a href="../Techniques/general/G199" class="general">Providing success feedback when data is submitted successfully</a>
                								       
             </li>
             
diff --git a/understanding/20/error-suggestion.html b/understanding/20/error-suggestion.html
index 37cd2c9f93..96a233eb00 100644
--- a/understanding/20/error-suggestion.html
+++ b/understanding/20/error-suggestion.html
@@ -3,19 +3,28 @@
 <head>
    <meta charset="UTF-8"></meta>
    <title>Understanding Error Suggestion</title>
-   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link>
+   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/>
 </head>
 <body>
    <h1>Understanding Error Suggestion</h1>
    
+   <section id="brief">
+		<h2>In brief</h2>
+		<dl>
+         <dt>Goal</dt><dd>Users get suggestions on how to resolve errors.</dd>
+         <dt>What to do</dt><dd>Where errors are detected, suggest known ways to correct them.</dd>
+         <dt>Why it's important</dt><dd>People can address errors faster and with reduced effort.</dd> 
+      </dl>
+
+   </section>
    
    <section id="intent">
       <h2>Intent of Error Suggestion</h2>
       
       
       <p>The intent of this Success Criterion is to ensure that users receive appropriate suggestions
-         for correction of an input error if it is possible. The WCAG 2.0 definition of "input
-         error" says that it is "information provided by the user that is not accepted" by
+         for correction of an input error if it is possible. The definition of "input error"
+         says that it is "information provided by the user that is not accepted" by
          the system. Some examples of information that is not accepted include information
          that is required but omitted by the user and information that is provided by the user
          but that falls outside the required data format or allowed values.
@@ -42,14 +51,12 @@ <h2>Benefits of Error Suggestion</h2>
       
       
       <ul>
-         
          <li>Providing information about how to correct input errors allows users who have learning
-            disabilities to fill in a form successfully. Users who are blind or have impaired
-            vision understand more easily the nature of the input error and how to correct it.
-            People with motion impairment can reduce the number of times they need to change an
-            input value.
-         </li>
-         
+            disabilities to fill in a form successfully.</li>
+         <li>Users who are blind or have impaired vision understand more easily the nature of the
+            input error and how to correct it.</li>
+         <li>People with motion impairment can reduce the number of times they need to change an
+            input value.</li>
       </ul>
       
    </section>
@@ -57,55 +64,26 @@ <h2>Benefits of Error Suggestion</h2>
    <section id="examples">
       <h2>Examples of Error Suggestion</h2>
       
-      
-      <ul>
-         
-         <li>
-            
-            <p>
-               								       
-               <strong>Additional Help for Correcting An Input Error</strong>
-               							     
-            </p>
-            
-            <p>The result of a form that was not successfully submitted describes an
+      <dl>
+         <dt>Additional Help for Correcting An Input Error</dt>
+         <dd>The result of a form that was not successfully submitted describes an
                input error in place in the page along with the correct input and offers additional
-               help for the form field that caused the input error. 
-               
-            </p>
-            
-         </li>
-         
-         <li>
-            
-            <p>
-               								       
-               <strong>Suggestions from a Limited Set of Values</strong>
-               							     
-            </p>
-            
-            <p> An input field requires that a month name be entered. If the user enters "12," suggestions
-               for correction may include 
-               
-            </p>
+               help for the form field that caused the input error.</dd>
+         <dt>Suggestions from a Limited Set of Values</dt>
+         <dd>
+            <p>An input field requires that a month name be entered. If the user enters "12," suggestions
+               for correction may include:</p>
             
             <ul>
-               
                <li>A list of the acceptable values, e.g., "Choose one of: January, February, March, April,
                   May, June, July, August, September, October, November, December."
                </li>
-               
-               <li>A description of the set of values, e.g., "Please provide the name of the month."</li>
-               
                <li>The conversion of the input data interpreted as a different month format, e.g., "Do
                   you mean 'December'?"
                </li>
-               
             </ul>
-            
-         </li>
-         
-      </ul>
+         </dd>
+      </dl>
       
    </section>
    
@@ -132,138 +110,78 @@ <h2>Techniques for Error Suggestion</h2>
       
       <section id="sufficient">
          <h3>Sufficient Techniques for Error Suggestion</h3>
-         
-         
-         <section class="situation" id="error-suggestion-situation-0">
-            
-            <h4>Situation A: If a mandatory field contains no information:</h4>
-            
-            <ol>
-               
-               <li>
-                  										           
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G83" class="general">Providing a text description that identifies the field as mandatory</a>
-                  									         
-               </li>
-               
-               <li>
-                  										           
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA2" class="aria">ARIA2: Identifying required fields with the "required" property</a>
-                  									         
-               </li>
-               
-               <li>
-                  
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/pdf/PDF5" class="pdf"></a>
-                  
-               </li>
-               
-               <li>
-                  
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/silverlight/SL35" class="silverlight"></a>
-                  
-               </li>
-               
-            </ol>
-            
-            
-         </section>
-         
+       
          <section class="situation" id="error-suggestion-situation-1">
             
-            <h4>Situation B: If information for a field is required to be in a specific data format:</h4>
+            <h4>Situation A: If information for a field is required to be in a specific data format:</h4>
             
-            <ol>
+            <ul>
                
                <li>
                   
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA18" class="aria"></a>
+                  <a href="../Techniques/aria/ARIA18" class="aria"></a>
                   
                </li>
                
                <li>
-                  										           
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G85" class="general">Providing a text description when user input falls outside the required format or
+
+                  <a href="../Techniques/general/G85" class="general">Providing a text description when user input falls outside the required format or
                      values
                   </a>
-                  									         
-               </li>
-               
-               <li>
-                  										           
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G177" class="general">Providing suggested correction text</a>
-                  									         
-               </li>
-               
-               <li>
-                  										           
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/client-side-script/SCR18" class="script">SCR18: Providing client-side validation and alert</a>
-                  									         
+
                </li>
                
                <li>
-                  										           
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/client-side-script/SCR32" class="script">Providing client-side validation and adding error text via the DOM</a>
-                  									         
+
+                  <a href="../Techniques/general/G177" class="general">Providing suggested correction text</a>
+
                </li>
-                              
+
                <li>
                   
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/pdf/PDF22" class="pdf"></a>
+                  <a href="../Techniques/pdf/PDF22" class="pdf"></a>
                   
                </li>
                
-            </ol>
+            </ul>
             
          </section>
          
          <section class="situation" id="error-suggestion-situation-2">
             
-            <h4>Situation C: Information provided by the user is required to be one of a limited set
+            <h4>Situation B: Information provided by the user is required to be one of a limited set
                of values:
             </h4>
             
-            <ol>
+            <ul>
                
                <li>
                   
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA18" class="aria"></a>
+                  <a href="../Techniques/aria/ARIA18" class="aria"></a>
                   
                </li>
                
                <li>
-                  										           
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G84" class="general">Providing a text description when the user provides information that is not in list
+
+                  <a href="../Techniques/general/G84" class="general">Providing a text description when the user provides information that is not in list
                      of allowed values
                   </a>
-                  									         
-               </li>
-               
-               <li>
-                  										           
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G177" class="general">Providing suggested correction text</a>
-                  									         
-               </li>
-               
-               <li>
-                  										           
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/client-side-script/SCR18" class="script">SCR18: Providing client-side validation and alert</a>
-                  									         
+
                </li>
                
                <li>
-                  										           
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/client-side-script/SCR32" class="script">Providing client-side validation and adding error text via the DOM</a>
-                  									         
+
+                  <a href="../Techniques/general/G177" class="general">Providing suggested correction text</a>
+
                </li>
                
                <li>
                   
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/pdf/PDF22" class="pdf"></a>
+                  <a href="../Techniques/pdf/PDF22" class="pdf"></a>
                   
                </li>
                
-            </ol>
+            </ul>
             
          </section>
          
@@ -276,15 +194,15 @@ <h3>Additional Techniques (Advisory) for Error Suggestion</h3>
          <ul>
             
             <li>
-               									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G139" class="general">G139: Creating a mechanism that allows users to jump to errors</a>
-               								       
+
+               <a href="../Techniques/general/G139" class="general">G139: Creating a mechanism that allows users to jump to errors</a>
+
             </li>
             
             <li>
-               									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G199" class="general">Providing success feedback when data is submitted successfully</a>
-               								       
+
+               <a href="../Techniques/general/G199" class="general">Providing success feedback when data is submitted successfully</a>
+
             </li>
             
          </ul>
@@ -296,11 +214,17 @@ <h4>Client-Side Scripting Techniques (Advisory)</h4>
             <ul>
                
                <li>
-                  										           
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/client-side-script/SCR18" class="script">Providing client-side validation and alert</a>
-                  									         
+
+                  <a href="../Techniques/client-side-script/SCR18" class="script">Providing client-side validation and alert</a>
+
                </li>
                
+               <li>
+
+                  <a href="../Techniques/client-side-script/SCR32" class="script">Providing client-side validation and adding error text via the DOM</a>
+
+               </li>
+
             </ul>
             
          </section>
diff --git a/understanding/20/extended-audio-description-prerecorded.html b/understanding/20/extended-audio-description-prerecorded.html
index e797dbf0ca..3e81ac6ed6 100644
--- a/understanding/20/extended-audio-description-prerecorded.html
+++ b/understanding/20/extended-audio-description-prerecorded.html
@@ -3,12 +3,22 @@
 <head>
    <meta charset="UTF-8"></meta>
    <title>Understanding Extended Audio Description (Prerecorded)</title>
-   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link>
+   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/>
 </head>
 <body>
    <h1>Understanding Extended Audio Description (Prerecorded)</h1>
    
    
+   <section id="brief">
+      <h2>In brief</h2>
+      <dl>
+         <dt>Goal</dt><dd>Videos can be played with more detailed audio descriptions.</dd>
+         <dt>What to do</dt><dd>Provide extended spoken descriptions of the visual content in videos.</dd>
+         <dt>Why it's important</dt><dd>People who are blind or who cannot understand the visual content can have it described to them while playing videos.</dd> 
+      </dl>
+
+   </section>
+   
    <section id="intent">
       <h2>Intent of Extended Audio Description (Prerecorded)</h2>
       
@@ -47,15 +57,13 @@ <h2>Benefits of Extended Audio Description (Prerecorded)</h2>
    <section id="examples">
       <h2>Examples of Extended Audio Description (Prerecorded)</h2>
       
-      
       <ul>
          
          <li>
-            								       
-            <em>Example 1. Video of a lecture.</em> A physics professor is giving a lecture. He makes freehand sketches on the whiteboard,
-            speaking rapidly as he draws. As soon as he has finished discussing one problem, he
-            erases the drawing and makes another sketch while continuing to speak and gesture
-            with his other hand.  The video is paused between problems, and extended audio description
+            <em>Example 1. Video of a lecture.</em> A physics professor is giving a lecture. The professor makes freehand sketches on the whiteboard,
+            speaking rapidly while drawing. As soon as discussion on one problem is finished, the professor
+            erases the drawing and makes another sketch while continuing to speak and gesture.
+             The video is paused between problems, and extended audio description
             of the professor's drawings and gestures is provided; the video is then resumed.
          </li>
          
@@ -111,26 +119,26 @@ <h2>Techniques for Extended Audio Description (Prerecorded)</h2>
          <h3>Sufficient Techniques for Extended Audio Description (Prerecorded)</h3>
          
          
-         <ol>
+         <ul>
             
             <li>
                
                <p> 
                   
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G8" class="general">Providing a movie with extended audio descriptions</a> using one of the following:    
+                  <a href="../Techniques/general/G8" class="general">Providing a movie with extended audio descriptions</a> using one of the following:    
                </p>
                
                <ul>
                   
                   <li>
                      											             
-                     <a href="https://www.w3.org/WAI/WCAG21/Techniques/smil/SM1" class="smil">Adding extended audio description in SMIL 1.0</a>
+                     <a href="../Techniques/smil/SM1" class="smil">Adding extended audio description in SMIL 1.0</a>
                      										           
                   </li>
                   
                   <li>
                      											             
-                     <a href="https://www.w3.org/WAI/WCAG21/Techniques/smil/SM2" class="smil">Adding extended audio description in SMIL 2.0</a>
+                     <a href="../Techniques/smil/SM2" class="smil">Adding extended audio description in SMIL 2.0</a>
                      										           
                   </li>
                   
@@ -140,7 +148,7 @@ <h3>Sufficient Techniques for Extended Audio Description (Prerecorded)</h3>
                
             </li>
             
-         </ol>
+         </ul>
          
       </section>
       
@@ -152,7 +160,7 @@ <h3>Additional Techniques (Advisory) for Extended Audio Description (Prerecorded
             
             <li>
                			             
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/html/H96" class="html"></a>
+               <a href="../Techniques/html/H96" class="html"></a>
                		             
             </li>
             
diff --git a/understanding/20/focus-order.html b/understanding/20/focus-order.html
index 4cda4a2a21..1203960b79 100644
--- a/understanding/20/focus-order.html
+++ b/understanding/20/focus-order.html
@@ -3,16 +3,24 @@
 <head>
    <meta charset="UTF-8"></meta>
    <title>Understanding Focus Order</title>
-   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link>
+   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/>
 </head>
 <body>
    <h1>Understanding Focus Order</h1>
    
+   <section id="brief">
+		<h2>In brief</h2>
+		<dl>
+         <dt>Goal</dt><dd>Keyboard users navigate content in a correct order.</dd>
+         <dt>What to do</dt><dd>Elements receive focus in an order that preserves meaning.</dd>
+         <dt>Why it's important</dt><dd>Navigating a site or application with only the keyboard will make sense.</dd> 
+      </dl>
+
+   </section>
    
    <section id="intent">
       <h2>Intent of Focus Order</h2>
       
-      
       <p>The intent of this Success Criterion is to ensure that when users navigate sequentially
          through content, they encounter information in an order that is consistent with the
          meaning of the content and can be operated from the keyboard. This reduces confusion
@@ -25,10 +33,9 @@ <h2>Intent of Focus Order</h2>
       <p>The way that sequential navigation order is determined in Web content is defined by
          the technology of the content. For example, simple HTML defines sequential navigation
          via the notion of tabbing order. Dynamic HTML may modify the navigation sequence using
-         scripting along with the addition of a tabindex attribute to allow focus to additional
-         elements. If no scripting or tabindex attributes are used, the navigation order is
-         the order that components appear in the content stream. (See HTML 4.01 Specification,
-         section 17.11, "Giving focus to an element").
+         scripting along with the addition of a <code class="language-html">tabindex</code> attribute to allow focus to additional
+         elements. If no scripting or <code class="language-html">tabindex</code> attributes are used, the navigation order is
+         the order that components appear in the content stream. (See <a href="https://html.spec.whatwg.org/multipage/interaction.html#focus"><cite>Focus</cite> in the HTML Living Standard</a>).
       </p>
       
       <p>An example of keyboard navigation that is not the sequential navigation addressed
@@ -41,7 +48,7 @@ <h2>Intent of Focus Order</h2>
       </p>
       
       <p>The focus order may not be identical to the programmatically determined reading order
-         (see Success Criterion 1.3.2) as long as the user can still understand and operate
+         (see <a href="meaningful-sequence.html">Success Criterion 1.3.2</a>) as long as the user can still understand and operate
          the Web page. Since there may be several possible logical reading orders for the content,
          the focus order may match any of them. However, when the order of a particular presentation
          differs from the programmatically determined reading order, users of one of these
@@ -57,7 +64,7 @@ <h2>Intent of Focus Order</h2>
       
       <p>For clarity:</p>
       
-      <ol>
+      <ul>
          
          <li>Focusable components need to receive focus in an order that preserves meaning and
             operability only when navigation sequences affect meaning and operability.
@@ -71,7 +78,7 @@ <h2>Intent of Focus Order</h2>
             them needs to be provided.
          </li>
          
-      </ol>
+      </ul>
       
       
    </section>
@@ -110,8 +117,7 @@ <h2>Benefits of Focus Order</h2>
    <section id="examples">
       <h2>Examples of Focus Order</h2>
       
-      
-      <ol>
+      <ul>
          
          <li>On a web page that contains a tree of interactive controls, the user can use the up
             and down arrow keys to move from tree node to tree node. Pressing the right arrow
@@ -127,7 +133,7 @@ <h2>Examples of Focus Order</h2>
          </li>
          
          <li>A Web page implements modal dialogs via scripting. When the trigger button is activated,
-            a dialog opens and focus is set to the first interactive element in the dialog. As
+            a dialog opens and focus is set within the dialog. As
             long as the dialog is open, focus is limited to the elements of the dialog. When the
             dialog is dismissed, focus returns to the button or the element following the button.
          </li>
@@ -137,7 +143,7 @@ <h2>Examples of Focus Order</h2>
             <p>An HTML Web page is created with the left hand navigation occurring in the HTML after
                the main body content, and styled with CSS to appear on the left hand side of the
                page. This is done to allow focus to move to the main body content first without requiring
-               tabIndex attributes or JavaScript.
+               <code class="language-html">tabindex</code> attributes or JavaScript.
             </p>
             
             <div class="note">
@@ -153,9 +159,7 @@ <h2>Examples of Focus Order</h2>
          
          <li>
             
-            <p>The following example 
-               <strong>fails to meet the Success Criterion</strong>:
-            </p>
+            <p>The following example <strong>fails to meet the Success Criterion</strong>:</p>
             
             <p>A company's Web site includes a form that collects marketing data and allows users
                to subscribe to several newsletters published by the company. The section of the form
@@ -164,12 +168,10 @@ <h2>Examples of Focus Order</h2>
                so that users can indicate newsletters they want to receive. However, the tab order
                for the form skips between fields in different sections of the form, so that focus
                moves from the name field to a checkbox, then to the street address, then to another
-               checkbox.
-            </p>
-            
+               checkbox.</p>
          </li>
          
-      </ol>
+      </ul>
       
    </section>
    
@@ -182,116 +184,62 @@ <h2>Resources for Focus Order</h2>
    <section id="techniques">
       <h2>Techniques for Focus Order</h2>
       
-      
       <section id="sufficient">
          <h3>Sufficient Techniques for Focus Order</h3>
          
-         
-         <ol>
-            
-            <li>
-               									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G59" class="general">Placing the interactive elements in an order that follows sequences and relationships
-                  within the content
-               </a>
-               								       
+         <ul>
+            <li>  									         
+               <a href="../Techniques/general/G59">Placing the interactive elements in an order that follows sequences and relationships within the content</a>
             </li>
-            
             <li>
-               
-               <p>Giving focus to elements in an order that follows sequences and relationships within
-                  the content using one of the following techniques:
+               <p>Giving focus to elements in an order that follows sequences and relationships within the content using one of the following techniques:
                </p>
-               
                <ul>
-                  
-                  <li>
-                     											             
-                     <a href="https://www.w3.org/WAI/WCAG21/Techniques/css/C27" class="css">Making the DOM order match the visual order</a>
-                     										           
+                  <li>  											             
+                     <a href="../Techniques/css/C27">Making the DOM order match the visual order</a>										           
                   </li>
-                  
                   <li>
-                     
-                     <a href="https://www.w3.org/WAI/WCAG21/Techniques/pdf/PDF3" class="pdf"></a>
-                     
+                     <a href="../Techniques/pdf/PDF3"></a>
                   </li>
-                  
-                  <li>
-                     
-                     <a href="https://www.w3.org/WAI/WCAG21/Techniques/silverlight/SL34" class="silverlight"></a>
-                     
-                  </li>
-                  
                </ul>
-               
             </li>
-            
             <li>
-               
                <p>Changing a Web page dynamically using one of the following techniques:</p>
-               
                <ul>
-                  
-                  <li>
-                     											             
-                     <a href="https://www.w3.org/WAI/WCAG21/Techniques/client-side-script/SCR26" class="script">Inserting dynamic content into the Document Object Model immediately following its
-                        trigger element
+                  <li>  											             
+                     <a href="../Techniques/client-side-script/SCR26">Inserting dynamic content into the Document Object Model immediately following its trigger element
                      </a>
-                     										           
                   </li>
-                  
-                  <li>
-                     											             
-                     <a href="https://www.w3.org/WAI/WCAG21/Techniques/client-side-script/SCR37" class="script">Creating custom dialogs in a device independent way</a>
-                     										           
+                  <li>										             
+                     <a href="../Techniques/HTML/H102" class="script">Creating modal dialogs with the HTML dialog element</a>										           
                   </li>
-                  
-                  <li>
-                     											             
-                     <a href="https://www.w3.org/WAI/WCAG21/Techniques/client-side-script/SCR27" class="script">Reordering page sections using the Document Object Model</a>
-                     										           
+                  <li>										             
+                     <a href="../Techniques/client-side-script/SCR27" class="script">Reordering page sections using the Document Object Model</a>										           
                   </li>
-                  
                </ul>
-               
             </li>
-            
-         </ol>
-         
+         </ul>     
       </section>
       
       <section id="advisory">
          <h3>Additional Techniques (Advisory) for Focus Order</h3>
-         
       </section>
       
       <section id="failure">
          <h3>Failures for Focus Order</h3>
          
-         
          <ul>
-            
-            <li>
-               									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/failures/F44" class="failure">Failure of 2.4.3 due to using tabindex to create a tab order that does not preserve
-                  meaning and operability
+            <li>								         
+               <a href="../Techniques/failures/F44" class="failure">Failure of 2.4.3 due to using <code class="language-html">tabindex</code> to create a tab order that does not preserve meaning and operability
                </a>
-               								       
             </li>
-            
-            <li>
-               									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/failures/F85" class="failure">Failure of Success Criterion 2.4.3 due to using dialogs or menus that are not adjacent
-                  to their trigger control in the sequential navigation order
-               </a>
-               								       
+            <li>								         
+               <a href="../Techniques/failures/F85" class="failure">Failure of Success Criterion 2.4.3 due to using dialogs or menus that are not adjacent to their trigger control in the sequential navigation order
+               </a>				       
             </li>
-            
          </ul>
          
       </section>
-      
    </section>
    
 </body>
diff --git a/understanding/20/focus-visible.html b/understanding/20/focus-visible.html
index b027ed01bc..c2456d9f40 100644
--- a/understanding/20/focus-visible.html
+++ b/understanding/20/focus-visible.html
@@ -3,11 +3,20 @@
 <head>
    <meta charset="UTF-8"></meta>
    <title>Understanding Focus Visible</title>
-   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link>
+   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/>
 </head>
 <body>
    <h1>Understanding Focus Visible</h1>
    
+   <section id="brief">
+		<h2>In brief</h2>
+		<dl>
+         <dt>Goal</dt><dd>Users know which element has keyboard focus.</dd>
+         <dt>What to do</dt><dd>Ensure each item receiving focus has a visible indicator.</dd>
+         <dt>Why it's important</dt><dd>Without a focus indicator, sighted keyboard users cannot operate the page.</dd> 
+      </dl>
+
+   </section>
    
    <section id="intent">
       <h2>Intent of Focus Visible</h2>
@@ -17,12 +26,13 @@ <h2>Intent of Focus Visible</h2>
          keyboard focus.
       </p>
       
-      <p>It must be possible for a person to know which element among multiple elements has the keyboard focus. If there is only one keyboard actionable control on the screen, the success criterion would be met because the visual design presents only one keyboard actionable item.</p>
+      <p>“Mode of operation” accounts for user agents which may not always show a focus indicator, or only show the focus indicator when the keyboard is used. User agents may optimise when the focus indicator is shown, such as only showing it when a keyboard is used. Authors are responsible for providing at least one mode of operation where the focus is visible. In most cases there is only one mode of operation so this success criterion applies. The focus indicator must not be time limited, when the keyboard focus is shown it must remain.</p>
 
-      <p>“Mode of operation” accounts for user-agents which may not always show a focus indicator, or only show the focus indicator when the keyboard is used. User agents may optimise when the focus indicator is shown, such as only showing it when a keyboard is used. Authors are responsible for providing at least one mode of operation where the focus is visible. In most cases there is only one mode of operation so this success criterion applies. The focus indicator must not be time limited, when the keyboard focus is shown it must remain.</p>
-      
-   	<p>Note that a keyboard focus indicator can take different forms.<span class="wcag22"> This criterion does not specify what the form is, but <a href="focus-appearance-minimum">Focus Appearance (Minimum)</a> does define how visible the indicator should be. Passing <a href="focus-appearance-minimum">Focus Appearance (Minimum)</a> would pass this success criterion.</span></p>
+      <div class="note">
+         <p>There may be situations where mouse/pointer users could also benefit from having a visible focus indicator, even though they did not set focus to an element using the keyboard. As a best practice, consider still providing an explicit focus indicator for these cases.</p>
+      </div>
       
+   	<p>Note that a keyboard focus indicator can take different forms. <span class="wcag22">While Focus Visible does not specify what that form is, <a href="focus-appearance">2.4.13 Focus Appearance (Level AAA)</a> provides guidance on creating a consistent, visible indicator.</span></p>     
       
    </section>
    <section id="benefits">
@@ -77,64 +87,46 @@ <h2>Techniques for Focus Visible</h2>
       
       <section id="sufficient">
          <h3>Sufficient Techniques for Focus Visible</h3>
-         
-         
-         <ol>
-            
+         <ul>
             <li>
+
                									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G149" class="general">Using user interface components that are highlighted by the user agent when they receive
+               <a href="../Techniques/general/G149" class="general">Using user interface components that are highlighted by the user agent when they receive
                   focus
                </a>
-               								       
             </li>
-            
             <li>
+
                									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/css/C15" class="css">Using CSS to change the presentation of a user interface component when it receives
+               <a href="../Techniques/css/C15" class="css">Using CSS to change the presentation of a user interface component when it receives
                   focus
                </a>
-               								       
             </li>
-            
             <li>
+
                									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G165" class="general">G165: Using the default focus indicator for the platform so that high visibility default
+               <a href="../Techniques/general/G165" class="general">G165: Using the default focus indicator for the platform so that high visibility default
                   focus indicators will carry over
                </a>
-               								       
             </li>
-            
             <li>
+
                									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G195" class="general">Using an author-supplied, highly visible focus indicator</a>
+               <a href="../Techniques/general/G195" class="general">Using an author-supplied, highly visible focus indicator</a>
                								       
-            </li>
 
-            <li>
-               <a href="../../techniques/css/C40">Creating a two-color focus indicator to ensure sufficient contrast</a>
             </li>
-            
             <li>
-               									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/client-side-script/SCR31" class="script">Using script to change the background color or border of the element with focus</a>
-               								       
+               <a href="../../techniques/css/C40">Creating a two-color focus indicator to ensure sufficient contrast</a>
             </li>
-            
             <li>
-               
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/silverlight/SL2" class="silverlight"></a>
-               
+               <a href="../../techniques/css/C45">Using CSS :focus-visible to provide keyboard focus indication</a>
             </li>
-            
             <li>
-               
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/silverlight/SL7" class="silverlight"></a>
-               
+               <a href="../Techniques/client-side-script/SCR31" class="script">Using script to change the background color or border of the element with focus</a>
+
             </li>
-            
-         </ol>
-         
+         </ul>
       </section>
       
       <section id="advisory">
@@ -144,28 +136,21 @@ <h3>Additional Techniques (Advisory) for Focus Visible</h3>
       
       <section id="failure">
          <h3>Failures for Focus Visible</h3>
-         
-         
          <ul>
-            
             <li>
+
                									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/failures/F55" class="failure">Failure of Success Criterion 2.1.1, 2.4.7, and 3.2.1 due to using script to remove
+               <a href="../Techniques/failures/F55" class="failure">Failure of Success Criterion 2.1.1, 2.4.7, and 3.2.1 due to using script to remove
                   focus when focus is received
                </a>
-               								       
             </li>
-            
             <li>
                									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/failures/F78" class="failure">Failure due to styling element outlines and borders in a way that overrides or renders
+               <a href="../Techniques/failures/F78" class="failure">Failure due to styling element outlines and borders in a way that overrides or renders
                   non-visible the default visual focus indicator
                </a>
-               								       
             </li>
-            
          </ul>
-         
       </section>
       
    </section>
diff --git a/understanding/20/headings-and-labels.html b/understanding/20/headings-and-labels.html
index 6b1578fd7c..018e2eb24a 100644
--- a/understanding/20/headings-and-labels.html
+++ b/understanding/20/headings-and-labels.html
@@ -3,14 +3,22 @@
 <head>
    <meta charset="UTF-8"></meta>
    <title>Understanding Headings and Labels</title>
-   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link>
+   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/>
 </head>
 <body>
    <h1>Understanding Headings and Labels</h1>
    
-   
-   <section id="intent">
-      <h2>Intent of Headings and Labels</h2>
+   <section id="brief">
+      <h2>In brief</h2>
+      <dl>
+         <dt>Goal</dt><dd>A page's content is described in headings and labels</dd>
+         <dt>What to do</dt><dd>Provide descriptive headings and labels</dd>
+         <dt>Why it's important</dt><dd>People can orient themselves, especially those with cognitive or visual disabilities.</dd>
+      </dl>
+   </section>
+
+  <section id="intent">
+     <h2>Intent of Headings and Labels</h2>
       
       <p>The intent of this Success Criterion is to help users understand what information
          is contained in Web pages and how that information is organized. When headings are
@@ -26,7 +34,7 @@ <h2>Intent of Headings and Labels</h2>
       <p>This Success Criterion does not require headings or labels. This Success Criterion
          requires that if headings or labels are provided, they be descriptive. This Success Criterion also
          does not require that content acting as a heading or label be correctly marked up or
-         identified - this aspect is covered separately by
+         identified – this aspect is covered separately by
          <a href="info-and-relationships">1.3.1: Info and Relationships</a>. It is possible for content
          to pass this Success Criterion (providing descriptive content that acts as headings or labels) while failing
          Success Criterion 1.3.1 (if the headings or labels aren't correctly marked up/identified). Conversely,
@@ -36,8 +44,8 @@ <h2>Intent of Headings and Labels</h2>
       </p>
       <p>Further, in the case of labels, this Success Criterion does not take into consideration whether or not
          alternative methods of providing an accessible name for form controls and inputs has been
-         used - this aspect is covered separately by <a href="name-role-value">4.1.2: Name, Role and Value</a>. It is possible
-         for controls and inputs to have an appropriate accessible name (e.g. using <code>aria-label="..."</code>)
+         used – this aspect is covered separately by <a href="name-role-value">4.1.2: Name, Role and Value</a>. It is possible
+         for controls and inputs to have an appropriate accessible name (e.g. using <code>aria-label="…"</code>)
          and therefore pass Success Criterion 4.1.2, but to still fail this Success Criterion (if the label is not
          sufficiently clear or descriptive).
       </p>
@@ -49,21 +57,16 @@ <h2>Intent of Headings and Labels</h2>
       <h2>Benefits of Headings and Labels</h2>
       
       <ul>
-         
          <li>Descriptive headings are especially helpful for users who have disabilities that make
             reading slow and for people with limited short-term memory. These people benefit when
-            section titles make it possible to predict what each section contains.
-         </li>
-
+            section titles make it possible to predict what each section contains.</li>
          <li>Form input controls with labels that clearly describe the content that is expected to be
             entered helps users know how to successfully complete the form.</li>
-
          <li>When headings and labels are also correctly marked up and identified in accordance with
             <a href="info-and-relationships">1.3.1: Info and Relationships</a>, this Success Criterion
-            helps people who use screen readers by ensuring that labels and headings are meaningful when
-            read out of context, for example, in an automatically generated list of headings/table of contents,
-            or when jumping from heading to heading within a page.</li>
-        
+            helps people who use screen readers by ensuring that labels and headings are clearer when
+            presented in a different format – for example, in an automatically generated list of
+            headings, a table of contents, or when jumping from heading to heading within a page.</li>
       </ul>
       
    </section>
@@ -71,95 +74,39 @@ <h2>Benefits of Headings and Labels</h2>
    <section id="examples">
       <h2>Examples of Headings and Labels</h2>
       
-      
-      <ul>
-         
-         <li>
-            
-            <p>
-               								       
-               <strong>A news site.</strong>
-               							     
-            </p>
-            
-            <p>The home page of a news site lists the headlines for the top stories of the hour.
+      <dl>
+         <dt>A news site</dt>
+         <dd>The home page of a news site lists the headlines for the top stories of the hour.
                Under each heading are the first 35 words of the story and a link to the full article.
-               Each headline gives a clear idea of the article's subject.
-            </p>
-            
-         </li>
-         
-         <li>
-            
-            <p>
-               								       
-               <strong>A guide on how to write well</strong>
-               							     
-            </p>
-            
-            <p>A guide on writing contains the following section titles: How To Write Well,  Cut
-               Out Useless Words,   Identify Unnecessary Words, etc.  The section headings are clear
-               and concise and the structure of the information is reflected in the structure of
-               the headings.
-               
-            </p>
-            
-         </li>
-         
-         <li>
-            
-            <p>
-               								       
-               <strong>Consistent headings in different articles</strong>
-               							     
-            </p>
-            
-            <p>A Web site contains papers from a conference. Submissions to the conference are required
-               to have the following organization: Summary, Introduction, [other sections unique
-               to this article], Conclusion, Author Biography, Glossary, and Bibliography. The title
-               of each Web page clearly identifies the article it contains, creating a useful balance
-               between the uniqueness of the articles and the consistency of the section headings.
-               
-            </p>
-            
-         </li>
-         
-         <li>
-            
-            <p>
-               								       
-               <strong>A form asking the name of the user</strong>
-               							     
-            </p>
-            
-            <p>A form asks the name of the user. It consists of two input fields to ask for the first
-               and last name. The first field is labeled "First name", the second is labeled "Last
-               name"."
-            </p>
-            
-         </li>
-         
-      </ul>
+               Each headline gives a clear idea of the article's subject.</dd>
+         <dt>A guide on how to write well</dt>
+         <dd>A guide on writing contains the following section titles: <q>How To Write Well</q>,
+               <q>Cut Out Useless Words</q>, <q>Identify Unnecessary Words</q>, and so on.
+               The section headings are clear and concise and the structure of the information is
+               reflected in the structure of the headings.</dd>
+         <dt>Consistent headings in different articles</dt>
+         <dd>A Web site contains papers from a conference. Submissions to the conference are required
+               to have the following organization: <q>Summary</q>, <q>Introduction</q>, [other sections unique
+               to this article], <q>Conclusion</q>, <q>Author Biography</q>, <q>Glossary</q>, and <q>Bibliography</q>.
+               The title of each Web page clearly identifies the article it contains, creating a useful balance
+               between the uniqueness of the articles and the consistency of the section headings.</dd>
+         <dt>A form asking for the name of the user</dt>
+         <dd>A form asks for the name of the user. It consists of two input fields to ask for the first
+               and last name. The first field is labeled <q>First name</q>, the second is labeled <q>Last name</q>.</dd>
+      </dl>
       
    </section>
    
    <section id="resources">
       <h2>Resources for Headings and Labels</h2>
-      
-      
+
       <ul>
-         
          <li> 
-            
             <a href="https://www.nngroup.com/articles/how-users-read-on-the-web/">How Users Read on the Web</a> A study showing that most users scan Web pages rather than reading them word by word.
          </li>
-         
          <li> 
-            
             <a href="https://www.nngroup.com/articles/applying-writing-guidelines-web-pages/">Applying Writing Guidelines to Web Pages</a> A report on the effects of making Web sites concise, easy to scan, and objective.
-            
          </li>
-         
       </ul>
       
    </section>
@@ -167,34 +114,24 @@ <h2>Resources for Headings and Labels</h2>
    <section id="techniques">
       <h2>Techniques for Headings and Labels</h2>
       
-      
       <section id="sufficient">
          <h3>Sufficient Techniques for Headings and Labels</h3>
          
-         
-         <ol>
-            
+         <ul>
             <li>
-               									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G130" class="general">Providing descriptive headings</a>
-               								       
+               <a href="../Techniques/general/G130" class="general">Providing descriptive headings</a>
             </li>
-            
             <li>
-               									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G131" class="general">Providing descriptive labels</a>
-               								       
+               <a href="../Techniques/general/G131" class="general">Providing descriptive labels</a>
             </li>
-            
-         </ol>
+         </ul>
+
          
          <div class="note">
             
             <p>
                Headings and labels must be programmatically determined, per 
-               <a href="info-and-relationships" class="guideline">Success Criterion 1.3.1
-                  
-               </a>.
+               <a href="info-and-relationships" class="guideline">Success Criterion 1.3.1</a>.
             </p>
             
          </div>
@@ -209,7 +146,6 @@ <h3>Additional Techniques (Advisory) for Headings and Labels</h3>
       <section id="failure">
          <h3>Failures for Headings and Labels</h3>
          
-         
       </section>
       
    </section>
diff --git a/understanding/20/help.html b/understanding/20/help.html
index 73d01cb620..16c97ea88c 100644
--- a/understanding/20/help.html
+++ b/understanding/20/help.html
@@ -3,11 +3,20 @@
 <head>
    <meta charset="UTF-8"></meta>
    <title>Understanding Help</title>
-   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link>
+   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/>
 </head>
 <body>
    <h1>Understanding Help</h1>
    
+   <section id="brief">
+      <h2>In brief</h2>
+      <dl>
+         <dt>Goal</dt><dd>Users can avoid making mistakes.</dd>
+         <dt>What to do</dt><dd>Provide help to users on the function currently being performed.</dd>
+         <dt>Why it's important</dt><dd>People with cognitive or other disabilities can complete their tasks more easily.</dd> 
+      </dl>
+
+   </section>
    
    <section id="intent">
       <h2>Intent of Help</h2>
@@ -55,24 +64,11 @@ <h2>Benefits of Help</h2>
    <section id="examples">
       <h2>Examples of Help</h2>
       
-      
-      <ul>
-         
-         <li>
-            
-            <p>
-               								       
-               <strong>on-line job application</strong>
-               							     
-            </p>
-            
-            <p> Some of the questions may be hard for new job seekers to understand. A help link
-               next to each question provides instructions and explanations for each question.
-            </p>
-            
-         </li>
-         
-      </ul>
+      <dl>
+         <dt>on-line job application</dt>
+         <dd>Some of the questions may be hard for new job seekers to understand. A help link
+               next to each question provides instructions and explanations for each question.</dd>
+      </dl>
       
    </section>
    
@@ -94,24 +90,24 @@ <h3>Sufficient Techniques for Help</h3>
             
             <h4>Situation A: If a form requires text input:</h4>
             
-            <ol>
+            <ul>
                
                <li>
                   										           
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G71" class="general">Providing a help link on every Web page</a>
+                  <a href="../Techniques/general/G71" class="general">Providing a help link on every Web page</a>
                   									         
                </li>
                
                
                <li>
                   										           
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G193" class="general">Providing help by an assistant in the Web page</a>
+                  <a href="../Techniques/general/G193" class="general">Providing help by an assistant in the Web page</a>
                   									         
                </li>
                
                <li>
                   										           
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G194" class="general">Providing spell checking and suggestions for text input if applicable to the language
+                  <a href="../Techniques/general/G194" class="general">Providing spell checking and suggestions for text input if applicable to the language
                      
                   </a>
                   									         
@@ -119,13 +115,13 @@ <h4>Situation A: If a form requires text input:</h4>
                
                <li>
                   										           
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G184" class="general">Providing text instructions at the beginning of a form or set of fields that describes
+                  <a href="../Techniques/general/G184" class="general">Providing text instructions at the beginning of a form or set of fields that describes
                      the necessary input
                   </a>
                   									         
                </li>
                
-            </ol>
+            </ul>
             
          </section>
          
@@ -133,23 +129,23 @@ <h4>Situation A: If a form requires text input:</h4>
             
             <h4>Situation B: If a form requires text input in an expected data format:</h4>
             
-            <ol>
+            <ul>
                
                <li>
                   										           
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G89" class="general">Providing expected data format and example</a>
+                  <a href="../Techniques/general/G89" class="general">Providing expected data format and example</a>
                   									         
                </li>
                
                <li>
                   										           
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G184" class="general">Providing text instructions at the beginning of a form or set of fields that describes
+                  <a href="../Techniques/general/G184" class="general">Providing text instructions at the beginning of a form or set of fields that describes
                      the necessary input 
                   </a>
                   									         
                </li>
                
-            </ol>
+            </ul>
             
          </section>
          
@@ -163,7 +159,7 @@ <h3>Additional Techniques (Advisory) for Help</h3>
             
             <li>
                									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/html/H89" class="html">Using the title attribute to provide context-sensitive help</a>
+               <a href="../Techniques/html/H89" class="html">Using the title attribute to provide context-sensitive help</a>
                								       
             </li>
             
diff --git a/understanding/20/images-of-text-no-exception.html b/understanding/20/images-of-text-no-exception.html
index 4a19dc7572..f472a05ef7 100644
--- a/understanding/20/images-of-text-no-exception.html
+++ b/understanding/20/images-of-text-no-exception.html
@@ -3,12 +3,22 @@
 <head>
    <meta charset="UTF-8"></meta>
    <title>Understanding Images of Text (No Exception)</title>
-   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link>
+   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/>
 </head>
 <body>
    <h1>Understanding Images of Text (No Exception)</h1>
    
    
+   <section id="brief">
+      <h2>In brief</h2>
+      <dl>
+         <dt>Goal</dt><dd>Users can always adjust how text is presented.</dd>
+         <dt>What to do</dt><dd>Do not use pictures of text unless there is no other way to present information.</dd>
+         <dt>Why it's important</dt><dd>People cannot alter how text looks in images.</dd> 
+      </dl>
+
+   </section>
+   
    <section id="intent">
       <h2>Intent of Images of Text (No Exception)</h2>
       
@@ -67,109 +77,41 @@ <h2>Benefits of Images of Text (No Exception)</h2>
    <section id="examples">
       <h2>Examples of Images of Text (No Exception)</h2>
       
-      
-      <ul>
-         
-         <li>
-            
-            <p>
-               								       
-               <strong>A quote</strong>
-               							     
-            </p>
-            
-            <p>A Web page contains a quote. The quote itself is presented as italicized text, indented
+      <dl>
+         <dt>A quote</dt>
+         <dd>A Web page contains a quote. The quote itself is presented as italicized text, indented
                from the left margin. The name of the person to whom the quote is attributed is below
                the quote with 1.5x the line space and further indented from the left margin. CSS
                is used to position the text; set the spacing between lines; as well as display the
-               text's font family, size, color and decoration.
-            </p>
-            
-         </li>
-         
-         <li>
-            
-            <p>
-               								       
-               <strong>Navigation items</strong>
-               							     
-            </p>
-            
-            <p>A Web page contains a menu of navigation links that have both an icon and text to
+               text's font family, size, color and decoration.</dd>
+         <dt>Navigation items</dt>
+         <dd>A Web page contains a menu of navigation links that have both an icon and text to
                describe their target. CSS is used to display the text's font family, size and foreground
-               and background colors; as well as the spacing between the navigation links.
-            </p>
-            
-         </li>
-         
-         <li>
-            
-            <p>
-               								       
-               <strong>A logo containing text</strong>
-               							     
-            </p>
-            
-            <p>A Web site contains the organization's logo in the top left corner of each Web page.
+               and background colors; as well as the spacing between the navigation links.</dd>
+         <dt>A logo containing text</dt>
+         <dd>A Web site contains the organization's logo in the top left corner of each Web page.
                The logo contains logotype (text as part, or all, of the logo). The visual presentation
                of the text is essential to the identity of the logo and is included as a gif image
                which does not allow the text characteristics to be changed. The image has a text
-               alternative.
-            </p>
-            
-         </li>
-         
-         <li>
-            
-            <p>
-               								       
-               <strong>Representation of a font family</strong>
-               							     
-            </p>
-            
-            <p>A Web page contains information about a particular font family. Substituting the font
+               alternative.</dd>
+         <dt>Representation of a font family</dt>
+         <dd>A Web page contains information about a particular font family. Substituting the font
                family with another font would defeat the purpose of the representation. The representation
                is included as a jpeg image which does not allow the text characteristics to be changed.
-               The image has a text alternative.
-            </p>
-            
-         </li>
-         
-         <li>
-            
-            <p>
-               								       
-               <strong>A representation of a letter</strong>
-               							     
-            </p>
-            
-            <p>A Web page contains a representation of an original letter. The depiction of the letter
+               The image has a text alternative.</dd>
+         <dt>A representation of a letter</dt>
+         <dd>A Web page contains a representation of an original letter. The depiction of the letter
                in its original format is essential to information being conveyed about the time period
                in which it was written. The letter is included as a gif image which does not allow
-               the text characteristics to be changed. The image has a text alternative.
-            </p>
-            
-         </li>
-         
-         <li>
-            
-            <p>
-               								       
-               <strong>Symbolic text characters</strong>
-               							     
-            </p>
-            
-            <p>A form allows users to enter blocks of text. The form provides a number of buttons,
+               the text characteristics to be changed. The image has a text alternative.</dd>
+         <dt>Symbolic text characters</dt>
+         <dd>A form allows users to enter blocks of text. The form provides a number of buttons,
                including functions to style the text and check spelling. Some of the buttons use
                text characters that do not form a sequence that expresses something in human language.
                For example "B" to increase font weight, "I" to italicize the text and "ABC" to check
                the spelling. The symbolic text characters are included as gif images which do not
-               allow the text characteristics to be changed. The buttons have text alternatives.
-            </p>
-            
-         </li>
-         
-      </ul>
+               allow the text characteristics to be changed. The buttons have text alternatives.</dd>
+      </dl>
       
    </section>
    
@@ -215,23 +157,17 @@ <h2>Techniques for Images of Text (No Exception)</h2>
          <h3>Sufficient Techniques for Images of Text (No Exception)</h3>
          
          
-         <ol>
+         <ul>
             
             <li>
                									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/css/C22" class="css">Using CSS to control visual presentation of text</a>
+               <a href="../Techniques/css/C22" class="css">Using CSS to control visual presentation of text</a>
                								       
             </li>
             
-            <li>
-               
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/silverlight/SL31" class="silverlight"></a>
-               
-            </li>
-            
             <li>
                									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/css/C30" class="css">Using CSS to replace text with images of text and providing user interface controls
+               <a href="../Techniques/css/C30" class="css">Using CSS to replace text with images of text and providing user interface controls
                   to switch
                </a>
                								       
@@ -239,7 +175,7 @@ <h3>Sufficient Techniques for Images of Text (No Exception)</h3>
             
             <li>
                									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G140" class="general">Separating information and structure from presentation so that Web pages can be presented
+               <a href="../Techniques/general/G140" class="general">Separating information and structure from presentation so that Web pages can be presented
                   different ways without losing information
                </a>
                								       
@@ -247,11 +183,11 @@ <h3>Sufficient Techniques for Images of Text (No Exception)</h3>
             
             <li>
                
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/pdf/PDF7" class="pdf"></a>
+               <a href="../Techniques/pdf/PDF7" class="pdf"></a>
                
             </li>
             
-         </ol>
+         </ul>
          
       </section>
       
@@ -265,31 +201,31 @@ <h4>CSS Techniques</h4>
                
                <li>
                   										           
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/css/C12" class="css">Using percent for font sizes</a>
+                  <a href="../Techniques/css/C12" class="css">Using percent for font sizes</a>
                   									         
                </li>
                
                <li>
                   										           
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/css/C13" class="css">Using named font sizes</a>
+                  <a href="../Techniques/css/C13" class="css">Using named font sizes</a>
                   									         
                </li>
                
                <li>
                   										           
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/css/C14" class="css">Using em units for font sizes </a>
+                  <a href="../Techniques/css/C14" class="css">Using em units for font sizes </a>
                   									         
                </li>
                
                <li>
                   										           
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/css/C8" class="css">Using CSS letter-spacing to control spacing within a word</a>
+                  <a href="../Techniques/css/C8" class="css">Using CSS letter-spacing to control spacing within a word</a>
                   									         
                </li>
                
                <li>
                   										           
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/css/C6" class="css">Positioning content based on structural markup</a>
+                  <a href="../Techniques/css/C6" class="css">Positioning content based on structural markup</a>
                   									         
                </li>
                
diff --git a/understanding/20/images-of-text.html b/understanding/20/images-of-text.html
index c2d36f145d..9096c2bba3 100644
--- a/understanding/20/images-of-text.html
+++ b/understanding/20/images-of-text.html
@@ -1,26 +1,34 @@
 <!DOCTYPE html>
 <html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
 <head>
-   <meta charset="UTF-8"></meta>
+   <meta charset="UTF-8"/>
    <title>Understanding Images of Text</title>
-   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link>
+   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/>
 </head>
 <body>
    <h1>Understanding Images of Text</h1>
-   
-   
+
+   <section id="brief">
+		<h2>In brief</h2>
+		<dl>
+         <dt>Goal</dt><dd>Users can adjust how text is presented.</dd>
+         <dt>What to do</dt><dd>Use text instead of pictures of text.</dd>
+         <dt>Why it's important</dt><dd>People cannot alter how text looks in images.</dd>
+      </dl>
+
+   </section>
+
    <section id="intent">
       <h2>Intent of Images of Text</h2>
-      
-      
+
       <p>The intent of this Success Criterion is to encourage authors, who are using technologies
          which are capable of achieving their desired default visual presentation, to enable
          people who require a particular visual presentation of text to be able to adjust the
          text presentation as needed. This includes people who require the text in a particular
          font size, foreground and background color, font family, line spacing or alignment.
       </p>
-      
-      <p>If an author can use text to achieve the same visual effect, he or she should present
+
+      <p>If authors can use text to achieve the same visual effect, they should present
          the information as text rather than using an image. If for any reason, the author
          cannot format the text to get the same effect, the effect won't be reliably presented
          on the commonly available user agents, or using a technology to meet this criterion
@@ -31,338 +39,135 @@ <h2>Intent of Images of Text</h2>
          widely deployed or which the author doesn't have the right to redistribute, or to
          ensure that the text would be anti-aliased on all user agents.
       </p>
-      
+
       <p>Images of text can also be used where it is possible for users to customize the image
          of text to match their requirements.
       </p>
-      
-      <p>The definition of image of text contains the note: Note: This does not include text that is part of a picture that contains significant
+
+      <p>The definition of <a>images of text</a> contains the note: This does not include text that is part of a picture that contains significant
          other visual content. Examples of such pictures include graphs, screenshots, and diagrams which visually
          convey important information through more than just text.
       </p>
-      
+
+      <p class="note">The Success Criterion is intended to address situations where <a>images of text</a> are used <em>rather than</em> text. Where images of text are used <em>in addition to</em> text to convey the same information, and where both are presented to the user, this Success Criterion is met. This allows authors to convey content using any styling they desire, while also presenting the information in text, which can then be manipulated by users to make it more distinguishable. This is in contrast to <a href="images-of-text-no-exception">1.4.9 Images of Text (No Exception)</a>, which applies to all images of text, regardless of whether or not they are used <em>in addition to</em> text.</p>
+
       <p>Techniques for satisfying this Success Criterion are the same as those for Success
          Criterion 1.4.9, except that they only need to apply if the visual presentation can
          be achieved with the technologies that the author is using. For Success Criterion
          1.4.9, the sufficient techniques would be applied only when the user can customize
-         the output. 
-      </p>
-      
-      <p>See also 
-         <a href="images-of-text-no-exception">1.4.4: Images of Text (No Exception)</a>.
+         the output.
       </p>
-      
-      
+
+      <p>See also <a href="images-of-text-no-exception">1.4.9 Images of Text (No Exception)</a>.</p>
+
    </section>
    <section id="benefits">
       <h2>Benefits of Images of Text</h2>
-      
-      
       <ul>
-         
          <li>People with low vision (who may have trouble reading the text with the authored font
             family, size and/or color).
          </li>
-         
          <li>People with visual tracking problems (who may have trouble reading the text with the
             authored line spacing and/or alignment).
          </li>
-         
          <li>People with cognitive disabilities that affect reading.</li>
-         
       </ul>
-      
    </section>
-   
+
    <section id="examples">
       <h2>Examples of Images of Text</h2>
-      
-      
-      <ul>
-         
-         <li>
-            
-            <p>
-               								       
-               <strong>Styled Headings </strong>
-               							     
-            </p>
-            
-            <p>Rather than using bitmap images to present headings in a specific font and size, an
-               author uses CSS to achieve the same result.
-            </p>
-            
-         </li>
-         
-         <li>
-            
-            <p>
-               								       
-               <strong>Dynamically Generated Images </strong>
-               							     
-            </p>
-            
-            <p>A Web page uses server-side scripting to present text as an an image. The page includes
+      <dl>
+         <dt>Styled Headings</dt>
+         <dd>Rather than using bitmap images to present headings in a specific font and size, an
+               author uses CSS to achieve the same result.</dd>
+         <dt>Dynamically Generated Images</dt>
+         <dd>A Web page uses server-side scripting to present text as an an image. The page includes
                controls that allow the user to adjust the font size and foreground and background
-               colors of the generated image.
-            </p>
-            
-         </li>
-         
-         
-         <li>
-            
-            <p>
-               								       
-               <strong>A quote</strong>
-               							     
-            </p>
-            
-            <p>A Web page contains a quote. The quote itself is presented as italicized text, indented
+               colors of the generated image.</dd>
+         <dt>A quote</dt>
+         <dd>A Web page contains a quote. The quote itself is presented as italicized text, indented
                from the left margin. The name of the person to whom the quote is attributed is below
                the quote with 1.5x the line space and further indented from the left margin. CSS
                is used to position the text; set the spacing between lines; as well as display the
-               text's font family, size, color and decoration.
-            </p>
-            
-         </li>
-         
-         <li>
-            
-            <p>
-               								       
-               <strong>Navigation items</strong>
-               							     
-            </p>
-            
-            <p>A Web page contains a menu of navigation links that have both an icon and text to
+               text's font family, size, color and decoration.</dd>
+         <dt>Navigation items</dt>
+         <dd>A Web page contains a menu of navigation links that have both an icon and text to
                describe their target. CSS is used to display the text's font family, size and foreground
-               and background colors; as well as the spacing between the navigation links.
-            </p>
-            
-         </li>
-         
-         <li>
-            
-            <p>
-               								       
-               <strong>A logo containing text</strong>
-               							     
-            </p>
-            
-            <p>A Web site contains the organization's logo in the top left corner of each Web page.
+               and background colors; as well as the spacing between the navigation links.</dd>
+         <dt>A logo containing text</dt>
+         <dd>A Web site contains the organization's logo in the top left corner of each Web page.
                The logo contains logotype (text as part, or all, of the logo). The visual presentation
                of the text is essential to the identity of the logo and is included as a gif image
                which does not allow the text characteristics to be changed. The image has a text
-               alternative.
-            </p>
-            
-         </li>
-         
-         <li>
-            
-            <p>
-               								       
-               <strong>Representation of a font family</strong>
-               							     
-            </p>
-            
-            <p>A Web page contains information about a particular font family. Substituting the font
+               alternative.</dd>
+         <dt>Representation of a font family</dt>
+         <dd>A Web page contains information about a particular font family. Substituting the font
                family with another font would defeat the purpose of the representation. The representation
                is included as a jpeg image which does not allow the text characteristics to be changed.
-               The image has a text alternative.
-            </p>
-            
-         </li>
-         
-         <li>
-            
-            <p>
-               								       
-               <strong>A representation of a letter</strong>
-               							     
-            </p>
-            
-            <p>A Web page contains a representation of an original letter. The depiction of the letter
+               The image has a text alternative.</dd>
+         <dt>A representation of a letter</dt>
+         <dd>A Web page contains a representation of an original letter. The depiction of the letter
                in its original format is essential to information being conveyed about the time period
                in which it was written. The letter is included as a gif image which does not allow
-               the text characteristics to be changed. The image has a text alternative.
-            </p>
-            
-         </li>
-         
-         <li>
-            
-            <p>
-               								       
-               <strong>Symbolic text characters</strong>
-               							     
-            </p>
-            
-            <p>A form allows users to enter blocks of text. The form provides a number of buttons,
+               the text characteristics to be changed. The image has a text alternative.</dd>
+         <dt>Symbolic text characters</dt>
+         <dd>A form allows users to enter blocks of text. The form provides a number of buttons,
                including functions to style the text and check spelling. Some of the buttons use
                text characters that do not form a sequence that expresses something in human language.
                For example "B" to increase font weight, "I" to italicize the text and "ABC" to check
                the spelling. The symbolic text characters are included as gif images which do not
-               allow the text characteristics to be changed. The buttons have text alternatives.
-            </p>
-            
-         </li>
-         
-         <li>
-            
-            <p>
-               								       
-               <strong>Customizable font settings in images of text</strong>
-               							     
-            </p>
-            
-            <p>A Web site allows users to specify font settings and all images of text on the site
-               are then provided based on those settings. 
-               
-            </p>
-            
-         </li>
-         
-      </ul>
-      
+               allow the text characteristics to be changed. The buttons have text alternatives.</dd>
+         <dt>Customizable font settings in images of text</dt>
+         <dd>A Web site allows users to specify font settings and all images of text on the site
+               are then provided based on those settings.</dd>
+         <dt>The text in an image is also provided as text.</dt>
+         <dd>A user has to upload an event poster image, which includes text, to their website's events
+            calendar. The site's CMS (content management system) is limited, and won't allow them to create
+            a custom HTML/CSS/SVG recreation of the poster. However, in addition to the image, they can add
+            regular text to the calendar entry, so they post both the poster and the text contained in the image.
+            This text is shown next to the poster image on the site's calendar page.</dd>
+      </dl>
    </section>
-   
+
    <section id="resources">
       <h2>Resources for Images of Text</h2>
-      
-      
       <ul>
-         
-         <li>
-            								       
-            <a href="http://alistapart.com/article/cssatten">CSS Web fonts</a>
-            							     
-         </li>
-         
-         <li>
-            								       
-            <a href="http://clagnut.com/blog/2042/">Weblog comments: WebKit now supports CSS @font-face rules</a>
-            							     
-         </li>
-         
-         <li>
-            								       
-            <a href="http://www.workingwith.me.uk/articles/css/cross-browser-drop-shadows">Creating Cross Browser Compatible CSS Text Shadows</a>
-            							     
-         </li>
-         
-         <li>
-            								       
-            <a href="http://www.yourhtmlsource.com/stylesheets/csstext.html">CSS and text</a>
-            							     
-         </li>
-         
+         <li><a href="http://alistapart.com/article/cssatten">CSS Web fonts</a></li>
+         <li><a href="http://clagnut.com/blog/2042/">Weblog comments: WebKit now supports CSS @font-face rules</a></li>
+         <li><a href="http://www.workingwith.me.uk/articles/css/cross-browser-drop-shadows">Creating Cross Browser Compatible CSS Text Shadows</a></li>
+         <li><a href="http://www.yourhtmlsource.com/stylesheets/csstext.html">CSS and text</a></li>
       </ul>
-      
    </section>
-   
+
    <section id="techniques">
       <h2>Techniques for Images of Text</h2>
-      
-      
       <section id="sufficient">
          <h3>Sufficient Techniques for Images of Text</h3>
-         
-         
-         <ol>
-            
-            <li>
-               									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/css/C22" class="css">Using CSS to control visual presentation of text</a>
-               								       
-            </li>
-            
-            <li>
-               
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/silverlight/SL31" class="silverlight"></a>
-               
-            </li>
-            
-            <li>
-               									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/css/C30" class="css">Using CSS to replace text with images of text and providing user interface controls
-                  to switch
-               </a>
-               								       
-            </li>
-            
-            <li>
-               									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G140" class="general">Separating information and structure from presentation so that Web pages can be presented
-                  different ways without losing information
-               </a>
-               								       
-            </li>
-            
-            <li>
-               
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/pdf/PDF7" class="pdf"></a>
-               
-            </li>
-            
-         </ol>
-         
+         <ul>
+            <li><a href="../Techniques/css/C22" class="css">Using CSS to control visual presentation of text</a></li>
+            <li><a href="../Techniques/css/C30" class="css">Using CSS to replace text with images of text and providing user interface controls to switch</a></li>
+            <li><a href="../Techniques/general/G140" class="general">Separating information and structure from presentation so that Web pages can be presented different ways without losing information</a></li>
+            <li><a href="../Techniques/pdf/PDF7" class="pdf"></a></li>
+         </ul>
       </section>
-      
+
       <section id="advisory">
          <h3>Additional Techniques (Advisory) for Images of Text</h3>
-         
-         
          <section>
-            
             <h4>CSS Techniques</h4>
-            
-            <ol>
-               
-               <li>
-                  										           
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/css/C12" class="css">Using percent for font sizes</a>
-                  									         
-               </li>
-               
-               <li>
-                  										           
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/css/C13" class="css">Using named font sizes</a>
-                  									         
-               </li>
-               
-               <li>
-                  										           
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/css/C14" class="css">Using em units for font sizes</a>
-                  									         
-               </li>
-               
-               <li>
-                  										           
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/css/C8" class="css">Using CSS letter-spacing to control spacing within a word</a>
-                  									         
-               </li>
-               
-               <li>
-                  										           
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/css/C6" class="css">Positioning content based on structural markup</a>
-                  									         
-               </li>
-               
-            </ol>
-            
+            <ul>
+               <li><a href="../Techniques/css/C12" class="css">Using percent for font sizes</a></li>
+               <li><a href="../Techniques/css/C13" class="css">Using named font sizes</a></li>
+               <li><a href="../Techniques/css/C14" class="css">Using em units for font sizes</a></li>
+               <li><a href="../Techniques/css/C8" class="css">Using CSS letter-spacing to control spacing within a word</a></li>
+               <li><a href="../Techniques/css/C6" class="css">Positioning content based on structural markup</a></li>
+            </ul>
          </section>
-         
       </section>
-      
+
       <section id="failure">
          <h3>Failures for Images of Text</h3>
-         
-         
       </section>
-      
    </section>
-   
 </body>
 </html>
diff --git a/understanding/20/img/double-space.gif b/understanding/20/img/double-space.gif
new file mode 100644
index 0000000000..454ad0168f
Binary files /dev/null and b/understanding/20/img/double-space.gif differ
diff --git a/understanding/20/img/single-space.gif b/understanding/20/img/single-space.gif
new file mode 100644
index 0000000000..27755d211f
Binary files /dev/null and b/understanding/20/img/single-space.gif differ
diff --git a/understanding/20/img/space-and-a-half.gif b/understanding/20/img/space-and-a-half.gif
new file mode 100644
index 0000000000..cff522c90e
Binary files /dev/null and b/understanding/20/img/space-and-a-half.gif differ
diff --git a/understanding/20/info-and-relationships.html b/understanding/20/info-and-relationships.html
index 2b00626027..04aaeacb66 100644
--- a/understanding/20/info-and-relationships.html
+++ b/understanding/20/info-and-relationships.html
@@ -3,11 +3,22 @@
 <head>
    <meta charset="UTF-8"></meta>
    <title>Understanding Info and Relationships</title>
-   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link>
+   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/>
 </head>
 <body>
    <h1>Understanding Info and Relationships</h1>
-   
+
+   <section id="brief">
+		<h2>In brief</h2>
+		<dl>
+
+         <dt>Goal</dt><dd>Information about content structure is available to more people.</dd>
+         <dt>What to do</dt><dd>Use code to reinforce relationships and information conveyed through presentation.</dd>
+         <dt>Why it's important</dt><dd>People can adapt the presentation to suit their needs while preserving the original meaning.</dd>
+
+		</dl>
+		
+		</section>
    
    <section id="intent">
       <h2>Intent of Info and Relationships</h2>
@@ -114,100 +125,33 @@ <h2>Benefits of Info and Relationships</h2>
    <section id="examples">
       <h2>Examples of Info and Relationships</h2>
       
-      
-      <ul>
-         
-         <li>
-            
-            <p>
-               								       
-               <strong>
-                  A form with required fields
-                  
-               </strong>
-               							     
-            </p>
-            
-            <p>
-               A form contains several required fields. The labels for the required fields are displayed
+      <dl>
+         <dt>A form with required fields</dt>
+         <dd>A form contains several required fields. The labels for the required fields are displayed
                in red. In addition, at the end of each label is an asterisk character, *. The instructions
                for completing the form indicate that "all required fields are displayed in red and
-               marked with an asterisk *", followed by an example.
-               
-               
-            </p>
-            
-         </li>
-         
-         <li>
-            
-            <p>
-               								       
-               <strong>A form that uses color and text to indicate required fields</strong>
-               							     
-            </p>
-            
-            <p>A form contains both required and optional fields. Instructions at the top of the
+               marked with an asterisk *", followed by an example.</dd>
+         <dt>A form that uses color and text to indicate required fields</dt>
+         <dd>A form contains both required and optional fields. Instructions at the top of the
                form explain that required fields are labeled with red text and also with an icon
                whose text alternative says, "Required." Both the red text and the icon are programmatically
                associated with the appropriate form fields so that assistive technology users can
-               determine the required fields. 
-               
-            </p>
-            
-         </li>
-         
-         <li>
-            
-            <p>
-               								       
-               <strong>A bus schedule table where the headers for each cell can be programmatically determined</strong>
-               							     
-            </p>
-            
-            <p>A bus schedule consists of a table with the bus stops listed vertically in the first
+               determine the required fields.</dd>
+         <dt>A bus schedule table where the headers for each cell can be programmatically determined</dt>
+         <dd>A bus schedule consists of a table with the bus stops listed vertically in the first
                column and the different buses listed horizontally across the first row. Each cell
                contains the time when the bus will be at that bus stop. The bus stop and bus cells
                are identified as headers for their corresponding row or column so that assistive
                technology can programmatically determine which bus and which bus stop are associated
-               with the time in each cell.
-               
-            </p>
-            
-         </li>
-         
-         <li>
-            
-            <p>
-               								       
-               <strong>A form where the labels for the checkboxes can be programmatically determined</strong>
-               							     
-            </p>
-            
-            <p>In a form, the labels for each checkbox can be programmatically determined by assistive
-               technology.
-               
-            </p>
-            
-         </li>
-         
-         <li>
-            
-            <p>
-               								       
-               <strong>A text document</strong>
-               							     
-            </p>
-            
-            <p>A simple text document is formatted with double blank lines before titles, asterisks
+               with the time in each cell.</dd>
+         <dt>A form where the labels for the checkboxes can be programmatically determined</dt>
+         <dd>In a form, the labels for each checkbox can be programmatically determined by assistive
+               technology.</dd>
+         <dt>A text document</dt>
+         <dd>A simple text document is formatted with double blank lines before titles, asterisks
                to indicate list items and other standard formatting conventions so that its structure
-               can be programmatically determined.
-               
-            </p>
-            
-         </li>
-         
-      </ul>
+               can be programmatically determined.</dd>
+      </dl>
       
    </section>
    
@@ -247,57 +191,63 @@ <h4>Situation A: The technology provides semantic structure to make information
                conveyed through presentation programmatically determinable:
             </h4>
             
-            <ol>
+            <ul>
                
                <li>
                   
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA11" class="aria"></a>
+                  <a href="../../techniques/aria/ARIA11" class="aria"></a>
+                  
+               </li>
+
+               <li>
+                  
+                  <a href="../../techniques/html/H101" class="aria"></a>
                   
                </li>
                
                <li>
                   
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA12" class="aria"></a>
+                  <a href="../../techniques/aria/ARIA12" class="aria"></a>
                   
                </li>
                
                <li>
                   
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA13" class="aria"></a>
+                  <a href="../../techniques/aria/ARIA13" class="aria"></a>
                   
                </li>
                
                <li>
                   
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA16" class="aria"></a>
+                  <a href="../../techniques/aria/ARIA16" class="aria"></a>
                   
                </li>
                
                <li>
                   
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA17" class="aria"></a>
+                  <a href="../../techniques/aria/ARIA17" class="aria"></a>
                   
                </li>
                
                <li>
                   
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA20" class="aria"></a>
+                  <a href="../../techniques/aria/ARIA20" class="aria"></a>
                   
                </li>
                
                <li>
                   										           
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G115" class="general">Using semantic elements to mark up structure</a>
+                  <a href="../../techniques/general/G115" class="general">Using semantic elements to mark up structure</a>
                   										           
                   <strong>AND</strong>
                   										           
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/html/H49" class="html">H49 Using semantic markup to mark emphasized or special text</a>
+                  <a href="../../techniques/html/H49" class="html">H49 Using semantic markup to mark emphasized or special text</a>
                   									         
                </li>
                
                <li>
                   										           
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G117" class="general">Using text to convey information that is conveyed by variations in presentation of
+                  <a href="../../techniques/general/G117" class="general">Using text to convey information that is conveyed by variations in presentation of
                      text
                   </a>
                   									         
@@ -305,12 +255,12 @@ <h4>Situation A: The technology provides semantic structure to make information
                
                <li>
                   										           
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G140" class="general">Separating information and structure from presentation to enable different presentations</a>
+                  <a href="../../techniques/general/G140" class="general">Separating information and structure from presentation to enable different presentations</a>
                   									         
                </li>
                <li>
                   										           
-                     <a href="https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA24" class="aria">Semantically identifying a font icon with role="img"</a>
+                     <a href="../../techniques/aria/ARIA24" class="aria">Semantically identifying a font icon with role="img"</a>
                                                          
                </li>
                
@@ -324,49 +274,43 @@ <h4>Situation A: The technology provides semantic structure to make information
                      
                      <li>
                         												               
-                        <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G138" class="general">Using semantic markup whenever color cues are used</a>
+                        <a href="../../techniques/general/G138" class="general">Using semantic markup whenever color cues are used</a>
                         											             
                      </li>
                      
                      <li>
                         												               
-                        <a href="https://www.w3.org/WAI/WCAG21/Techniques/html/H51" class="html">Using table markup to present tabular information</a>
+                        <a href="../../techniques/html/H51" class="html">Using table markup to present tabular information</a>
                         											             
                      </li>
                      
                      <li>
                         
-                        <a href="https://www.w3.org/WAI/WCAG21/Techniques/pdf/PDF6" class="pdf"></a>
+                        <a href="../../techniques/pdf/PDF6" class="pdf"></a>
                         
                      </li>
                      
                      <li>
                         
-                        <a href="https://www.w3.org/WAI/WCAG21/Techniques/pdf/PDF20" class="pdf"></a>
+                        <a href="../../techniques/pdf/PDF20" class="pdf"></a>
                         
                      </li>
                      
                      <li>
                         												               
-                        <a href="https://www.w3.org/WAI/WCAG21/Techniques/html/H39" class="html">Using caption elements to associate data table captions with data tables</a>
-                        											             
-                     </li>
-                     
-                     <li>
-                        												               
-                        <a href="https://www.w3.org/WAI/WCAG21/Techniques/html/H73" class="html">Using the summary attribute of the table element to give an overview of data tables</a>
+                        <a href="../../techniques/html/H39" class="html">Using caption elements to associate data table captions with data tables</a>
                         											             
                      </li>
                      
                      <li>
                         												               
-                        <a href="https://www.w3.org/WAI/WCAG21/Techniques/html/H63" class="html">Using the scope attribute to associate header cells and data cells in data tables</a>
+                        <a href="../../techniques/html/H63" class="html">Using the scope attribute to associate header cells and data cells in data tables</a>
                         											             
                      </li>
                      
                      <li>
                         												               
-                        <a href="https://www.w3.org/WAI/WCAG21/Techniques/html/H43" class="html">Using id and headers attributes to associate data cells with header cells in data
+                        <a href="../../techniques/html/H43" class="html">Using id and headers attributes to associate data cells with header cells in data
                            tables
                         </a>
                         											             
@@ -374,13 +318,13 @@ <h4>Situation A: The technology provides semantic structure to make information
                      
                      <li>
                         												               
-                        <a href="https://www.w3.org/WAI/WCAG21/Techniques/html/H44" class="html">Using label elements to associate text labels with form controls</a>
+                        <a href="../../techniques/html/H44" class="html">Using label elements to associate text labels with form controls</a>
                         											             
                      </li>
                      
                      <li>
                         												               
-                        <a href="https://www.w3.org/WAI/WCAG21/Techniques/html/H65" class="html">Using the title attribute to identify form controls when the label element cannot
+                        <a href="../../techniques/html/H65" class="html">Using the title attribute to identify form controls when the label element cannot
                            be used
                         </a>
                         											             
@@ -388,87 +332,69 @@ <h4>Situation A: The technology provides semantic structure to make information
                      
                      <li>
                         
-                        <a href="https://www.w3.org/WAI/WCAG21/Techniques/pdf/PDF10" class="pdf"></a>
+                        <a href="../../techniques/pdf/PDF10" class="pdf"></a>
                         
                      </li>
                      
                      <li>
                         
-                        <a href="https://www.w3.org/WAI/WCAG21/Techniques/pdf/PDF12" class="pdf"></a>
+                        <a href="../../techniques/pdf/PDF12" class="pdf"></a>
                         
                      </li>
                      
                      <li>
                         												               
-                        <a href="https://www.w3.org/WAI/WCAG21/Techniques/html/H71" class="html">Providing a label for groups of radio buttons or checkboxes using the fieldset and
+                        <a href="../../techniques/html/H71" class="html">Providing a label for groups of radio buttons or checkboxes using the fieldset and
                            legend elements
                         </a>
                         											             
                      </li>
                      
-                     <li>
-                        
-                        <a href="https://www.w3.org/WAI/WCAG21/Techniques/silverlight/SL20" class="silverlight"></a>
-                        
-                     </li>
-                     
-                     <li>
-                        
-                        <a href="https://www.w3.org/WAI/WCAG21/Techniques/silverlight/SL26" class="silverlight"></a>
-                        
-                     </li>
-                     
                      <li>
                         												               
-                        <a href="https://www.w3.org/WAI/WCAG21/Techniques/html/H85" class="html">Using OPTGROUP to group OPTION elements inside a SELECT</a>
+                        <a href="../../techniques/html/H85" class="html">Using OPTGROUP to group OPTION elements inside a SELECT</a>
                         											             
                      </li>
                      
                      <li>
                         												               
-                        <a href="https://www.w3.org/WAI/WCAG21/Techniques/html/H48" class="html">Using ol, ul and dl for lists</a>
+                        <a href="../../techniques/html/H48" class="html">Using ol, ul and dl for lists</a>
                         											             
                      </li>
                      
                      <li>
                         												               
-                        <a href="https://www.w3.org/WAI/WCAG21/Techniques/html/H42" class="html">Using h1-h6 to identify headings</a>
+                        <a href="../../techniques/html/H42" class="html">Using h1-h6 to identify headings</a>
                         											             
                      </li>
                      
                      <li>
                         
-                        <a href="https://www.w3.org/WAI/WCAG21/Techniques/pdf/PDF9" class="pdf"></a>
+                        <a href="../../techniques/pdf/PDF9" class="pdf"></a>
                         
                      </li>
                      
-                     <li>
-                        												               
-                        <a href="https://www.w3.org/WAI/WCAG21/Techniques/client-side-script/SCR21" class="script">Using functions of the Document Object Model (DOM) to add content to a page</a>
-                        											             
-                     </li>
-                     
                      <li>
                         
-                        <a href="https://www.w3.org/WAI/WCAG21/Techniques/pdf/PDF11" class="pdf"></a>
+                        <a href="../../techniques/pdf/PDF11" class="pdf"></a>
                         
                      </li>
                      
                      <li>
                         
-                        <a href="https://www.w3.org/WAI/WCAG21/Techniques/pdf/PDF17" class="pdf"></a>
+                        <a href="../../techniques/pdf/PDF17" class="pdf"></a>
                         
                      </li>
                      
                      <li>
                         
-                        <a href="https://www.w3.org/WAI/WCAG21/Techniques/pdf/PDF21" class="pdf"></a>
+                        <a href="../../techniques/pdf/PDF21" class="pdf"></a>
                         
                      </li>
                      
                      <li>
                         
-                        <a href="https://www.w3.org/WAI/WCAG21/Techniques/html/H97" class="html"></a>
+                        <a href="../../techniques/html/H97" class="html"></a>
                         
                      </li>
                      
@@ -476,7 +402,7 @@ <h4>Situation A: The technology provides semantic structure to make information
                   
                </li>
                
-            </ol>
+            </ul>
             
          </section>
          
@@ -486,11 +412,11 @@ <h4> Situation B: The technology in use does NOT provide the semantic structure
                the information and relationships conveyed through presentation programmatically determinable:
             </h4>
             
-            <ol>
+            <ul>
                
                <li>
                   										           
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G117" class="general">Using text to convey information that is conveyed by variations in presentation of
+                  <a href="../../techniques/general/G117" class="general">Using text to convey information that is conveyed by variations in presentation of
                      text
                   </a>
                   									         
@@ -506,19 +432,19 @@ <h4> Situation B: The technology in use does NOT provide the semantic structure
                      
                      <li>
                         												               
-                        <a href="https://www.w3.org/WAI/WCAG21/Techniques/text/T1" class="text">Using standard text formatting conventions for paragraphs</a>
+                        <a href="../../techniques/text/T1" class="text">Using standard text formatting conventions for paragraphs</a>
                         											             
                      </li>
                      
                      <li>
                         												               
-                        <a href="https://www.w3.org/WAI/WCAG21/Techniques/text/T2" class="text">Using standard text formatting conventions for lists</a>
+                        <a href="../../techniques/text/T2" class="text">Using standard text formatting conventions for lists</a>
                         											             
                      </li>
                      
                      <li>
                         												               
-                        <a href="https://www.w3.org/WAI/WCAG21/Techniques/text/T3" class="text">Using standard text formatting conventions for headings</a>
+                        <a href="../../techniques/text/T3" class="text">Using standard text formatting conventions for headings</a>
                         											             
                      </li>
                      
@@ -526,7 +452,7 @@ <h4> Situation B: The technology in use does NOT provide the semantic structure
                   
                </li>
                
-            </ol>
+            </ul>
             
          </section>
          
@@ -540,19 +466,19 @@ <h3>Additional Techniques (Advisory) for Info and Relationships</h3>
             
             <li>
                									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/css/C22" class="css">Using CSS to control visual presentation of text</a>
+               <a href="../../techniques/css/C22" class="css">Using CSS to control visual presentation of text</a>
                								       
             </li>
             
             <li>
                									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G162" class="general">Positioning labels to maximize predictability of relationships</a>
+               <a href="../../techniques/general/G162" class="general">Positioning labels to maximize predictability of relationships</a>
                								       
             </li>
             
             <li>
                									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA1" class="aria">ARIA1: Using Accessible Rich Internet Application describedby property to provide
+               <a href="../../techniques/aria/ARIA1" class="aria">ARIA1: Using Accessible Rich Internet Application describedby property to provide
                   a descriptive, programmatically determined label
                </a>
                								       
@@ -560,7 +486,7 @@ <h3>Additional Techniques (Advisory) for Info and Relationships</h3>
             
             <li>
                									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA2" class="aria">Using Dynamic Web Content Accessibility to programmatically identify form fields as
+               <a href="../../techniques/aria/ARIA2" class="aria">Using Dynamic Web Content Accessibility to programmatically identify form fields as
                   required
                </a>
                								       
@@ -568,7 +494,7 @@ <h3>Additional Techniques (Advisory) for Info and Relationships</h3>
             
             <li>
                									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G141" class="general">G141</a>
+               <a href="../../techniques/general/G141" class="general">G141</a>
                								       
             </li>
             
@@ -584,7 +510,7 @@ <h3>Failures for Info and Relationships</h3>
             
             <li>
                									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/failures/F2" class="failure">Failure due to using CSS to create variations in presentation of text that conveys
+               <a href="../../techniques/failures/F2" class="failure">Failure due to using CSS to create variations in presentation of text that conveys
                   information without also using the appropriate markup or text
                </a>
                								       
@@ -592,7 +518,7 @@ <h3>Failures for Info and Relationships</h3>
             
             <li>
                									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/failures/F33" class="failure">Failure due to using white space characters to create multiple columns in plain text
+               <a href="../../techniques/failures/F33" class="failure">Failure due to using white space characters to create multiple columns in plain text
                   content
                </a>
                								       
@@ -600,19 +526,19 @@ <h3>Failures for Info and Relationships</h3>
             
             <li>
                									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/failures/F34" class="failure">Failure due to using white space characters to format tables in plain text content</a>
+               <a href="../../techniques/failures/F34" class="failure">Failure due to using white space characters to format tables in plain text content</a>
                								       
             </li>
             
             <li>
                									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/failures/F42" class="failure">Failure due to using scripting events to emulate links</a>
+               <a href="../../techniques/failures/F42" class="failure">Failure due to using scripting events to emulate links</a>
                								       
             </li>
             
             <li>
                									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/failures/F43" class="failure">Failure due to using structural markup in a way that does not represent relationships
+               <a href="../../techniques/failures/F43" class="failure">Failure due to using structural markup in a way that does not represent relationships
                   in the content
                </a>
                								       
@@ -620,7 +546,7 @@ <h3>Failures for Info and Relationships</h3>
             
             <li>
                									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/failures/F46" class="failure">Failure due to using th elements, caption elements, or non-empty summary attributes
+               <a href="../../techniques/failures/F46" class="failure">Failure due to using th elements, caption elements, or non-empty summary attributes
                   in layout tables
                </a>
                								       
@@ -628,34 +554,30 @@ <h3>Failures for Info and Relationships</h3>
             
             <li>
                									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/failures/F48" class="failure">Failure due to using the pre element to markup tabular information</a>
-               								       
-            </li>
-            
-            <li>
-               									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/failures/F87" class="failure"></a>
+               <a href="../../techniques/failures/F48" class="failure">Failure due to using the pre element to markup tabular information</a>
                								       
             </li>
             
             <li>
                
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/failures/F90" class="failure"></a>
+               <a href="../../techniques/failures/F90" class="failure"></a>
                
             </li>
             
             <li>
                
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/failures/F91" class="failure"></a>
+               <a href="../../techniques/failures/F91" class="failure"></a>
                
             </li>
             
             <li>
                
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/failures/F92" class="failure"></a>
+               <a href="../../techniques/failures/F92" class="failure"></a>
                
             </li>
-            
+            <li>
+               <a href="../../Techniques/failures/F111" class="failure"></a>
+            </li>
          </ul>
          
       </section>
diff --git a/understanding/20/input-assistance.html b/understanding/20/input-assistance.html
index a83187e58b..766a265838 100644
--- a/understanding/20/input-assistance.html
+++ b/understanding/20/input-assistance.html
@@ -3,7 +3,7 @@
 <head>
    <meta charset="UTF-8"></meta>
    <title>Understanding Input Assistance</title>
-   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link>
+   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/>
 </head>
 <body>
    <h1>Understanding Input Assistance</h1>
diff --git a/understanding/20/interruptions.html b/understanding/20/interruptions.html
index 87b0aa76e4..24b9eefe81 100644
--- a/understanding/20/interruptions.html
+++ b/understanding/20/interruptions.html
@@ -3,12 +3,21 @@
 <head>
    <meta charset="UTF-8"></meta>
    <title>Understanding Interruptions</title>
-   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link>
+   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/>
 </head>
 <body>
    <h1>Understanding Interruptions</h1>
    
-   
+   <section id="brief">
+      <h2>In brief</h2>
+      <dl>
+         <dt>Goal</dt><dd>Users are not interrupted.</dd>
+         <dt>What to do</dt><dd>Let people delay or turn off updates, except in emergencies.</dd>
+         <dt>Why it's important</dt><dd>Updates distract and disrupt assistive technology users and people with attention deficits.</dd> 
+      </dl>
+
+   </section>
+     
    <section id="intent">
       <h2>Intent of Interruptions</h2>
       
@@ -46,25 +55,11 @@ <h2>Benefits of Interruptions</h2>
    <section id="examples">
       <h2>Examples of Interruptions</h2>
       
-      
-      <ul>
-         
-         <li>
-            
-            <p>
-               								       
-               <strong>Example 1. Setting user preferences</strong>
-               							     
-            </p>
-            
-            <p>The preferences page of a Web portal includes an option to postpone all updates and
-               alerts until the end of the current session, except for alerts concerning emergencies.
-               
-            </p>
-            
-         </li>
-         
-      </ul>
+      <dl>
+         <dt>Example 1. Setting user preferences</dt>
+         <dd>The preferences page of a Web portal includes an option to postpone all updates and
+               alerts until the end of the current session, except for alerts concerning emergencies.</dd>
+      </dl>
       
    </section>
    
@@ -82,17 +77,17 @@ <h2>Techniques for Interruptions</h2>
          <h3>Sufficient Techniques for Interruptions</h3>
          
          
-         <ol>
+         <ul>
             
             <li>
                									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G75" class="general">Providing a mechanism to postpone any updating of content</a>
+               <a href="../Techniques/general/G75" class="general">Providing a mechanism to postpone any updating of content</a>
                								       
             </li>
             
             <li>
                									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G76" class="general">G76: Providing a mechanism to request an update of the content instead of updating
+               <a href="../Techniques/general/G76" class="general">G76: Providing a mechanism to request an update of the content instead of updating
                   automatically
                </a>
                								       
@@ -100,11 +95,11 @@ <h3>Sufficient Techniques for Interruptions</h3>
             
             <li>
                									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/client-side-script/SCR14" class="script">Using scripts to make non-essential alerts optional</a>
+               <a href="../Techniques/client-side-script/SCR14" class="script">Using scripts to make non-essential alerts optional</a>
                								       
             </li>
             
-         </ol>
+         </ul>
          
       </section>
       
@@ -122,7 +117,7 @@ <h3>Failures for Interruptions</h3>
             
             <li>
                									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/failures/F40" class="failure">Failure due to using meta redirect with a time limit
+               <a href="../Techniques/failures/F40" class="failure">Failure due to using meta redirect with a time limit
                   
                </a>
                								       
@@ -130,7 +125,7 @@ <h3>Failures for Interruptions</h3>
             
             <li>
                									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/failures/F41" class="failure">Failure due to using meta refresh with a time limit
+               <a href="../Techniques/failures/F41" class="failure">Failure due to using meta refresh with a time limit
                   
                </a>
                								       
diff --git a/understanding/20/keyboard-accessible.html b/understanding/20/keyboard-accessible.html
index 26652e5f46..3a882c24a3 100644
--- a/understanding/20/keyboard-accessible.html
+++ b/understanding/20/keyboard-accessible.html
@@ -3,7 +3,7 @@
 <head>
    <meta charset="UTF-8"></meta>
    <title>Understanding Keyboard Accessible</title>
-   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link>
+   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/>
 </head>
 <body>
    <h1>Understanding Keyboard Accessible</h1>
diff --git a/understanding/20/keyboard-no-exception.html b/understanding/20/keyboard-no-exception.html
index e48e209dea..695fd9ece8 100644
--- a/understanding/20/keyboard-no-exception.html
+++ b/understanding/20/keyboard-no-exception.html
@@ -3,24 +3,60 @@
 <head>
    <meta charset="UTF-8"></meta>
    <title>Understanding Keyboard (No Exception)</title>
-   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link>
+   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/>
 </head>
 <body>
    <h1>Understanding Keyboard (No Exception)</h1>
    
+   <section id="brief">
+      <h2>In brief</h2>
+      <dl>
+         <dt>Goal</dt><dd>Everything can be done with a keyboard.</dd>
+         <dt>What to do</dt><dd>Ensure all pointer actions have a keyboard equivalent.</dd>
+         <dt>Why it's important</dt><dd>People who can only use the keyboard interface need to be able to accomplish everything.</dd> 
+      </dl>
+
+   </section>
    
    <section id="intent">
       <h2>Intent of Keyboard (No Exception)</h2>
       
       
-      <p>The intent of this Success Criterion is to ensure that 
+      <p>The intent of this Success Criterion is to ensure that
          <strong>all</strong> content is operable from the keyboard. This is the same as Success Criterion 2.1.1,
          except that no exceptions are allowed. This does not mean that content where the underlying
          function requires input that depends on the path of the user's movement and not just
          the endpoints (excluded from the requirements of 2.1.1) must be made keyboard accessible.
          Rather, it means that content that uses path-dependent input cannot conform to this
-         Success Criterion and therefore cannot meet Guideline 2.1 at Level AAA. 
+         Success Criterion and therefore cannot meet Guideline 2.1 at Level AAA.
       </p>
+
+      <div class="note">
+         <p>Platforms and user agents usually have conventions for how web content or
+            applications are controlled with a keyboard interface. If content does not follow
+            the platform/user agent conventions it may be difficult to use, as users will need
+            to learn different interaction methods. As a <em>best practice</em>, content
+            should follow the platform/user agent conventions. However, deviating from these
+            conventions does <em>not</em> fail the normative requirement of this Success Criterion.</p>
+         <p>
+            For instance, buttons that have focus can generally be activated using both the
+            <kbd>Enter</kbd> key and the <kbd>Space</kbd> bar. If a custom button control
+            in a web application instead only reacts to <kbd>Enter</kbd>
+            (or even a completely custom key or key combination), this still
+            <strong>satisfies</strong> the requirements of this Success Criterion.
+         </p>
+      </div>
+
+      <div class="note">
+         <p>This Success Criterion does not require that every visible control that can be activated
+            using a pointer (such as a mouse or touch screen input) must also be focusable and actionable using the keyboard.
+            The normative requirement is only that there must be a way for keyboard interface users to perform
+            the same, or comparable, actions and to operate the content. Generally, the easiest way
+            to achieve this is to provide controls that can be operated with all possible input devices;
+            however, if a web application implements a separate mode of operation for keyboard interface users,
+            it will <strong>not</strong> fail the Success Criterion.
+         </p>
+      </div>
       
    </section>
    
diff --git a/understanding/20/keyboard.html b/understanding/20/keyboard.html
index 0d6c1ada71..c779848171 100644
--- a/understanding/20/keyboard.html
+++ b/understanding/20/keyboard.html
@@ -3,11 +3,20 @@
 <head>
    <meta charset="UTF-8"></meta>
    <title>Understanding Keyboard</title>
-   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link>
+   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/>
 </head>
 <body>
    <h1>Understanding Keyboard</h1>
    
+   <section id="brief">
+		<h2>In brief</h2>
+		<dl>
+         <dt>Goal</dt><dd>Everything can be done with a keyboard except freehand movements.</dd>
+         <dt>What to do</dt><dd>Ensure pointer actions have a keyboard equivalent.</dd>
+         <dt>Why it's important</dt><dd>Many people rely on the keyboard interface, including blind and some mobility impaired people.</dd> 
+      </dl>
+
+   </section>
    
    <section id="intent">
       <h2>Intent of Keyboard</h2>
@@ -41,8 +50,7 @@ <h2>Intent of Keyboard</h2>
          example, clicking, selecting, moving, sizing). However, there is a small class of
          input that is done with a pointing device that cannot be done from the keyboard in
          any known fashion without requiring an inordinate number of keystrokes. Free hand
-         drawing, watercolor painting, and flying a helicopter through an obstacle course are
-         all examples of functions that require path dependent input. Drawing straight lines,
+         drawing, or watercolor painting require path dependent input. Drawing straight lines,
          regular geometric shapes, re-sizing windows and dragging objects to a location (when
          the path to that location is not relevant) do not require path dependent input.
          
@@ -60,6 +68,32 @@ <h2>Intent of Keyboard</h2>
          
       </p>
       
+      <div class="note">
+         <p>Platforms and user agents usually have conventions for how web content or
+            applications are controlled with a keyboard interface. If content does not follow
+            the platform/user agent conventions it may be difficult to use, as users will need
+            to learn different interaction methods. As a <em>best practice</em>, content
+            should follow the platform/user agent conventions. However, deviating from these
+            conventions does <em>not</em> fail the normative requirement of this Success Criterion.</p>
+         <p>
+            For instance, buttons that have focus can generally be activated using both the
+            <kbd>Enter</kbd> key and the <kbd>Space</kbd> bar. If a custom button control
+            in a web application instead only reacts to <kbd>Enter</kbd>
+            (or even a completely custom key or key combination), this still
+            <strong>satisfies</strong> the requirements of this Success Criterion.
+         </p>
+      </div>
+
+      <div class="note">
+         <p>This Success Criterion does not require that every visible control that can be activated
+            using a mouse or touch screen must also be focusable and actionable using the keyboard.
+            The normative requirement is only that there must be a way for keyboard interface users to perform
+            the same, or comparable, actions and to operate the content. Generally, the easiest way
+            to achieve this is to provide controls that can be operated with all possible input devices;
+            however, if a web application implements a separate mode of operation for keyboard interface users,
+            it will <strong>not</strong> fail the Success Criterion.
+         </p>
+      </div>
       
    </section>
    <section id="benefits">
@@ -88,96 +122,30 @@ <h2>Benefits of Keyboard</h2>
    <section id="examples">
       <h2>Examples of Keyboard</h2>
       
-      
-      <ul>
-         
-         <li>
-            
-            <p>
-               								       
-               <strong>Example 1: A drawing Program.</strong>
-               							     
-            </p>
-            
-            <p>A drawing program allows users to create, size, position and rotate objects from the
-               keyboard.
-            </p>
-            
-         </li>
-         
-         <li>
-            
-            <p>
-               								       
-               <strong>Example 2: A drag and Drop Feature.</strong>
-               							     
-            </p>
-            
-            <p>An application that uses drag and drop also supports "cut" and "paste" or form controls
-               to move objects.
-            </p>
-            
-         </li>
-         
-         <li>
-            
-            <p>
-               								       
-               <strong>Example 3: Moving between and connecting discrete points.</strong>
-               							     
-            </p>
-            
-            <p>A connect-the-dots program allows the user to move between dots on a screen and use
-               the spacebar to connect the current dot to the previous one.
-            </p>
-            
-         </li>
-         
-         <li>
-            
-            <p>
-               								       
-               <strong>Example 4: Exception - Painting Program.</strong>
-               							     
-            </p>
-            
-            <p>A watercolor painting program passes as an exception because the brush strokes vary
-               depending on the speed and duration of the movements.
-            </p>
-            
-         </li>
-         
-         <li>
-            
-            <p>
-               								       
-               <strong>Example 5: Exception - Model helicopter flight training simulator.</strong>
-               							     
-            </p>
-            
-            <p>A model helicopter flight training simulator passes as an exception because the nature
-               of the simulator is to teach real-time behavior of a model helicopter.
-            </p>
-            
-         </li>
-         
-         <li>
-            
-            <p>
-               								       
-               <strong>Example 6: A PDA with an optional keyboard</strong>
-               							     
-            </p>
-            
-            <p>A PDA device that is usually operated via a stylus has an optional keyboard that can
+      <dl>
+         <dt>Example 1: A drawing Program</dt>
+         <dd>A drawing program allows users to create, size, position and rotate objects from the keyboard.</dd>
+         <dt>Example 2: A drag and Drop Feature</dt>
+         <dd>An application that uses drag and drop also supports "cut" and "paste" or form controls to move objects.</dd>
+         <dt>Example 3: Moving between and connecting discrete points</dt>
+         <dd>A connect-the-dots program allows the user to move between dots on a screen and use
+               the spacebar to connect the current dot to the previous one.</dd>
+         <dt>Example 4: Exception - Painting Program</dt>
+         <dd>A watercolor painting program passes as an exception because the brush strokes vary
+               depending on the speed and duration of the movements.</dd>
+         <dt>Example 5: Exception - Model helicopter flight training simulator</dt>
+         <dd>A model helicopter flight training simulator passes as an exception because the nature
+               of the simulator is to teach real-time behavior of a model helicopter.</dd>
+         <dt>Example 6: A PDA with an optional keyboard</dt>
+         <dd>A PDA device that is usually operated via a stylus has an optional keyboard that can
                be attached.  The keyboard allows full Web browsing in standard fashion.  The Web
-               content is operable because it was designed to work with keyboard-only access.
-            </p>
-            
-         </li>
-         
-      </ul>
-      
+               content is operable because it was designed to work with keyboard-only access.</dd>
+        <dt>Example 7: Simple search form with pointer-operable submit button</dt>
+        <dd>A search form includes a text input field followed by a submit button. The submit button itself
+               has been coded so that it does <em>not</em> receive focus, and can only be activated using a pointer input.
+               However, since keyboard users can submit the search by pressing <kbd>Enter</kbd> in the text input
+               after typing their search terms, the form passes this Success Criterion.</dd>
+      </dl>
    </section>
    
    <section id="resources">
@@ -194,11 +162,11 @@ <h2>Techniques for Keyboard</h2>
          <h3>Sufficient Techniques for Keyboard</h3>
          
          
-         <ol>
+         <ul>
             
             <li>
                									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G202" class="general">Ensuring keyboard control for all functionality</a>
+               <a href="../Techniques/general/G202" class="general">Ensuring keyboard control for all functionality</a>
                								       
             </li>
             
@@ -210,31 +178,25 @@ <h3>Sufficient Techniques for Keyboard</h3>
                   
                   <li>
                      											             
-                     <a href="https://www.w3.org/WAI/WCAG21/Techniques/html/H91" class="html">Using HTML form controls and links</a>
+                     <a href="../Techniques/html/H91" class="html">Using HTML form controls and links</a>
                      										           
                   </li>
                   
                   <li>
                      
-                     <a href="https://www.w3.org/WAI/WCAG21/Techniques/pdf/PDF3" class="pdf"></a>
+                     <a href="../Techniques/pdf/PDF3" class="pdf"></a>
                      
                   </li>
                   
                   <li>
                      
-                     <a href="https://www.w3.org/WAI/WCAG21/Techniques/pdf/PDF11" class="pdf"></a>
+                     <a href="../Techniques/pdf/PDF11" class="pdf"></a>
                      
                   </li>
                   
                   <li>
                      
-                     <a href="https://www.w3.org/WAI/WCAG21/Techniques/pdf/PDF23" class="pdf"></a>
-                     
-                  </li>
-                  
-                  <li>
-                     
-                     <a href="https://www.w3.org/WAI/WCAG21/Techniques/silverlight/SL15" class="silverlight"></a>
+                     <a href="../Techniques/pdf/PDF23" class="pdf"></a>
                      
                   </li>
                   
@@ -246,46 +208,34 @@ <h3>Sufficient Techniques for Keyboard</h3>
                
                <p> 
                   
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G90" class="general">Providing keyboard-controllable event handlers</a> using one of the following techniques:     
+                  <a href="../Techniques/general/G90" class="general">Providing keyboard-controllable event handlers</a> using one of the following techniques:     
                </p>
                
                <ul>
                   
                   <li>
                      											             
-                     <a href="https://www.w3.org/WAI/WCAG21/Techniques/client-side-script/SCR20" class="script">Using both keyboard and other device-specific functions</a>
+                     <a href="../Techniques/client-side-script/SCR20" class="script">Using both keyboard and other device-specific functions</a>
                      										           
                   </li>
                   
                   <li>
                      											             
-                     <a href="https://www.w3.org/WAI/WCAG21/Techniques/client-side-script/SCR35" class="script">Making JavaScript actions keyboard accessible</a>
+                     <a href="../Techniques/client-side-script/SCR35" class="script">Making JavaScript actions keyboard accessible</a>
                      										           
                   </li>
                   
                   <li>
                      											             
-                     <a href="https://www.w3.org/WAI/WCAG21/Techniques/client-side-script/SCR2" class="script">Using redundant keyboard and mouse event handlers</a>
+                     <a href="../Techniques/client-side-script/SCR2" class="script">Using redundant keyboard and mouse event handlers</a>
                      										           
                   </li>
                   
-                  <li>
-                     
-                     <a href="https://www.w3.org/WAI/WCAG21/Techniques/silverlight/SL9" class="silverlight"></a>
-                     
-                  </li>
-                  
-                  <li>
-                     
-                     <a href="https://www.w3.org/WAI/WCAG21/Techniques/silverlight/SL14" class="silverlight"></a>
-                     
-                  </li>
-                  
                </ul>
                
             </li>
             
-         </ol>
+         </ul>
          
       </section>
       
@@ -295,9 +245,9 @@ <h3>Additional Techniques (Advisory) for Keyboard</h3>
          
          <ul>
             
-            <li>Using XHTML role, state, and value attributes if repurposing static elements as interactive
+            <li>Using WAi-ARIA role, state, and value attributes if repurposing static elements as interactive
                user interface components (future link) AND 
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/client-side-script/SCR29" class="script">Adding keyboard-accessible actions to static HTML elements</a>
+               <a href="../Techniques/client-side-script/SCR29" class="script">Adding keyboard-accessible actions to static HTML elements</a>
                
             </li>
             
@@ -313,7 +263,7 @@ <h3>Failures for Keyboard</h3>
             
             <li>
                									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/failures/F54" class="failure">Failure due to using only pointing-device-specific event handlers (including gesture)
+               <a href="../Techniques/failures/F54" class="failure">Failure due to using only pointing-device-specific event handlers (including gesture)
                   for a function
                </a>
                								       
@@ -321,13 +271,13 @@ <h3>Failures for Keyboard</h3>
             
             <li>
                									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/failures/F55" class="failure">Failure due to using script to remove focus when focus is received</a>
+               <a href="../Techniques/failures/F55" class="failure">Failure due to using script to remove focus when focus is received</a>
                								       
             </li>
             
             <li>
                									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/failures/F42" class="failure">Failure of Success Criterion 1.3.1 and 2.1.1 due to using scripting events to emulate
+               <a href="../Techniques/failures/F42" class="failure">Failure of Success Criterion 1.3.1 and 2.1.1 due to using scripting events to emulate
                   links
                </a>
                								       
diff --git a/understanding/20/labels-or-instructions.html b/understanding/20/labels-or-instructions.html
index 95fa704ae3..8da1eca98a 100644
--- a/understanding/20/labels-or-instructions.html
+++ b/understanding/20/labels-or-instructions.html
@@ -3,18 +3,30 @@
 <head>
    <meta charset="UTF-8"></meta>
    <title>Understanding Labels or Instructions</title>
-   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link>
+   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/>
 </head>
 <body>
    <h1>Understanding Labels or Instructions</h1>
    
+   <section id="brief">
+		<h2>In brief</h2>
+		<dl>
+         <dt>Goal</dt><dd>Users know what information to enter.</dd>
+         <dt>What to do</dt><dd>Provide labels or instructions for inputs.</dd>
+         <dt>Why it's important</dt><dd>Everyone, especially those with cognitive disabilities, will know how to respond.</dd> 
+      </dl>
+
+   </section>
    
    <section id="intent">
       <h2>Intent of Labels or Instructions</h2>
       
       <p>The intent of this Success Criterion is to have content authors present instructions
          or labels that identify the controls in a form so that users know what input data
-         is expected. Instructions or labels may also specify data formats for fields especially
+         is expected. In the case of radio buttons, checkboxes, comboboxes, or similar controls
+         that provide users with options, each option must have an appropriate label so that
+         users know what they are actually selecting. 
+         Instructions or labels may also specify data formats for data entry fields, especially
          if they are out of the customary formats or if there are specific rules for correct
          input. Content authors may also choose to make such instructions available to users
          only when the individual control has focus especially when instructions are long and
@@ -41,8 +53,11 @@ <h2>Intent of Labels or Instructions</h2>
          and therefore pass Success Criterion 4.1.2, but to still fail this Success Criterion (if the labels or instructions
          aren't presented to all users, not just those using assistive technologies).
       </p>
-      <p>While this Success Criterion requires that controls and inputs have labels, whether or not
-         these labels are sufficiently clear or descriptive is covered separately by
+      <p>This Success Criterion does not apply to links or other controls (such as an expand/collapse widget, or similar
+         interactive components) that are not associated with data entry.
+      </p>
+      <p>While this Success Criterion requires that controls and inputs have labels or instructions, whether or
+         not labels (if used) are sufficiently clear or descriptive is covered separately by
          <a href="headings-and-labels">2.4.6: Headings and Labels</a>.
       </p> 
 
@@ -53,12 +68,12 @@ <h2>Benefits of Labels or Instructions</h2>
       
       <ul>
          
-         <li>Providing clear and unambiguous labels and instructions (including examples of expected
+         <li>Providing labels and instructions (including examples of expected
             data formats) helps all users - but particularly those with cognitive, language, and learning
             disabilities - to enter information correctly.
          </li>
          
-         <li>Providing clear and unambiguous labels and instructions (including clear identification of required
+         <li>Providing labels and instructions (including identification of required
             fields) can prevent users from making incomplete or incorrect form submissions, which prevents
             users from having to navigate once more through a page/form in order to fix submission errors.
          </li>
@@ -70,7 +85,6 @@ <h2>Benefits of Labels or Instructions</h2>
    <section id="examples">
       <h2>Examples of Labels or Instructions</h2>
       
-      
       <ul>
          
          <li>A field which requires the user to enter the two character abbreviation for a US state
@@ -78,12 +92,13 @@ <h2>Examples of Labels or Instructions</h2>
             correct abbreviation.
          </li>
          
-         <li>A field for entering a date contains initial text which indicates the correct format
+         <li>A field for entering a date has text instructions to indicate the correct format
             for the date.
          </li>
          
-         <li>A field for entering a given name is clearly labeled with "Given Name" and the field
-            for family name is labeled "Family Name" to avoid confusion over which name is requested.
+         <li>To enter their name, users are provided with two separate text fields. Rather than
+            having a single label "Name" (which would appear to leave the second text field unlabelled),
+            each field is given an explicit label - "Given Name" and "Family Name".
          </li>
          
          <li>A U.S. phone number separates the area code, exchange, and number into three fields.
@@ -97,10 +112,6 @@ <h2>Examples of Labels or Instructions</h2>
             of the three fields. The value of this attribute for the three fields are, respectively,
             "Area Code", "Exchange", and "Number". 
          </li>
-
-         <li>In a form which contains both required and optional fields, the required fields and/or the
-            optional fields are clearly labeled as such.
-         </li>
          
       </ul>
       
@@ -120,13 +131,13 @@ <h2>Techniques for Labels or Instructions</h2>
          <h3>Sufficient Techniques for Labels or Instructions</h3>
          
          
-         <ol>
+         <ul>
             
             <li>
                
                <p> 
                   
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G131" class="general">Providing descriptive labels</a> 
+                  <a href="../Techniques/general/G131" class="general">Providing descriptive labels</a> 
                   
                   <strong>AND</strong> one of the following:
                </p>
@@ -135,7 +146,7 @@ <h3>Sufficient Techniques for Labels or Instructions</h3>
                   
                   <li>
                      									               
-                     <a href="https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA1" class="aria">ARIA1: Using Accessible Rich Internet Application describedby property to provide
+                     <a href="../Techniques/aria/ARIA1" class="aria">ARIA1: Using Accessible Rich Internet Application describedby property to provide
                         a descriptive, programmatically determined label
                      </a>
                      								             
@@ -143,25 +154,25 @@ <h3>Sufficient Techniques for Labels or Instructions</h3>
                   
                   <li>
                      
-                     <a href="https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA9" class="aria"></a>
+                     <a href="../Techniques/aria/ARIA9" class="aria"></a>
                      
                   </li>
                   
                   <li>
                      
-                     <a href="https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA17" class="aria"></a>
+                     <a href="../Techniques/aria/ARIA17" class="aria"></a>
                      
                   </li>
                   
                   <li>
                      											             
-                     <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G89" class="general">G89: Providing expected data format and example</a>
+                     <a href="../Techniques/general/G89" class="general">G89: Providing expected data format and example</a>
                      										           
                   </li>
                   
                   <li>
                      											             
-                     <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G184" class="general">Providing text instructions at the beginning of a form or set of fields that describes
+                     <a href="../Techniques/general/G184" class="general">Providing text instructions at the beginning of a form or set of fields that describes
                         the necessary input 
                      </a>
                      										           
@@ -169,26 +180,26 @@ <h3>Sufficient Techniques for Labels or Instructions</h3>
                   
                   <li>
                      											             
-                     <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G162" class="general">Positioning labels to maximize predictability of relationships</a>
+                     <a href="../Techniques/general/G162" class="general">Positioning labels to maximize predictability of relationships</a>
                      										           
                   </li>
                   
                   <li>
                      											             
-                     <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G83" class="general">G83: Providing text descriptions to identify required fields </a>
+                     <a href="../Techniques/general/G83" class="general">G83: Providing text descriptions to identify required fields </a>
                      										           
                   </li>
                   
                   <li>
                      											             
-                     <a href="https://www.w3.org/WAI/WCAG21/Techniques/html/H90" class="html">Indicating required form controls</a>
+                     <a href="../Techniques/html/H90" class="html">Indicating required form controls</a>
                      										           
                   </li>
                   
                   
                   <li>
                      
-                     <a href="https://www.w3.org/WAI/WCAG21/Techniques/pdf/PDF5" class="pdf"></a>
+                     <a href="../Techniques/pdf/PDF5" class="pdf"></a>
                      
                   </li>
                   
@@ -198,43 +209,31 @@ <h3>Sufficient Techniques for Labels or Instructions</h3>
             
             <li>
                									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/html/H44" class="html">H44: Using label elements to associate text labels with form controls</a>
+               <a href="../Techniques/html/H44" class="html">H44: Using label elements to associate text labels with form controls</a>
                								       
             </li>
             
             <li>
                
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/pdf/PDF10" class="pdf"></a>
-               
-            </li>
-            
-            <li>
-               
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/silverlight/SL26" class="silverlight"></a>
+               <a href="../Techniques/pdf/PDF10" class="pdf"></a>
                
             </li>
             
             <li>
                									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/html/H71" class="html">H71: Providing a description for groups of form controls using fieldset and legend
+               <a href="../Techniques/html/H71" class="html">H71: Providing a description for groups of form controls using fieldset and legend
                   elements
                </a>
                								       
             </li>
             
-            <li>
-               
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/silverlight/SL8" class="silverlight"></a>
-               
-            </li>
-            
             <li>
                									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G167" class="general">Using adjacent button to label the purpose of a field</a>
+               <a href="../Techniques/general/G167" class="general">Using adjacent button to label the purpose of a field</a>
                								       
             </li>
             
-         </ol>
+         </ul>
          
          <div class="note">
             
@@ -256,16 +255,10 @@ <h3>Additional Techniques (Advisory) for Labels or Instructions</h3>
             
             <li>
                									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G13" class="general">G13: Describing what will happen before a change to a form control is made</a>
+               <a href="../Techniques/general/G13" class="general">G13: Describing what will happen before a change to a form control is made</a>
                								       
             </li>
             
-            <li>
-               
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/silverlight/SL19" class="silverlight"></a>
-               
-            </li>
-            
          </ul>
          
       </section>
@@ -278,7 +271,7 @@ <h3>Failures for Labels or Instructions</h3>
             
             <li>
                									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/failures/F82" class="failure">Failure of Success Criterion 3.3.2 by visually formating a set of phone number fields
+               <a href="../Techniques/failures/F82" class="failure">Failure of Success Criterion 3.3.2 by visually formatting a set of phone number fields
                   but not including a text label
                </a>
                								       
diff --git a/understanding/20/language-of-page.html b/understanding/20/language-of-page.html
index ded6459457..05ecb7bcc0 100644
--- a/understanding/20/language-of-page.html
+++ b/understanding/20/language-of-page.html
@@ -3,11 +3,20 @@
 <head>
    <meta charset="UTF-8"></meta>
    <title>Understanding Language of Page</title>
-   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link>
+   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/>
 </head>
 <body>
    <h1>Understanding Language of Page</h1>
    
+   <section id="brief">
+		<h2>In brief</h2>
+		<dl>
+         <dt>Goal</dt><dd>Assistive technology can determine the language of a page.</dd>
+         <dt>What to do</dt><dd>Indicate the predominant language on a page.</dd>
+         <dt>Why it's important</dt><dd>People using assistive technology get information in the correct language.</dd> 
+      </dl>
+
+   </section>
    
    <section id="intent">
       <h2>Intent of Language of Page</h2>
@@ -26,7 +35,7 @@ <h2>Intent of Language of Page</h2>
       
       <p>The default human language of the Web page is the default text-processing language
          as discussed in 
-         <a href="https://www.w3.org/TR/i18n-html-tech-lang/">Internationalization Best Practices: Specifying Language in XHTML &amp; HTML Content</a>. When a Web page uses several languages, the default text-processing language is
+         <a href="https://www.w3.org/International/techniques/authoring-html#gslang">Internationalization Best Practices: Specifying Language in XHTML &amp; HTML Content</a>. When a Web page uses several languages, the default text-processing language is
          the language which is used most. (If several languages are used equally, the first
          language used should be chosen as the default human language.) 
          
@@ -76,26 +85,12 @@ <h2>Benefits of Language of Page</h2>
    <section id="examples">
       <h2>Examples of Language of Page</h2>
       
-      
-      <ul>
-         
-         <li>
-            
-            <p>
-               								       
-               <strong>Example 1. A Web page with content in two languages</strong>
-               							     
-            </p>
-            
-            <p>A Web page produced in Germany and written in HTML includes content in both German
+      <dl>
+         <dt>Example 1. A Web page with content in two languages</dt>
+         <dd>A Web page produced in Germany and written in HTML includes content in both German
                and English, but most of the content is in German. The default human language is identified
-               as German (de) by the lang attribute on the html element.
-               
-            </p>
-            
-         </li>
-         
-      </ul>
+               as German (de) by the lang attribute on the html element.</dd>
+      </dl>
       
    </section>
    
@@ -107,7 +102,7 @@ <h2>Resources for Language of Page</h2>
          
          <li>
             								       
-            <a href="https://www.w3.org/TR/i18n-html-tech-lang/">Internationalization Best Practices: Specifying Language in XHTML &amp; HTML Content</a>
+            <a href="https://www.w3.org/International/techniques/authoring-html#gslang">Internationalization Best Practices: Specifying Language in XHTML &amp; HTML Content</a>
             							     
          </li>
          
@@ -124,27 +119,27 @@ <h2>Techniques for Language of Page</h2>
          <h3>Sufficient Techniques for Language of Page</h3>
          
          
-         <ol>
+         <ul>
             
             <li>
                									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/html/H57" class="html">Using the lang attribute of the html element</a>
+               <a href="../Techniques/html/H57" class="html">Using the lang attribute of the html element</a>
                								       
             </li>
             
             <li>
                
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/pdf/PDF16" class="pdf"></a>
+               <a href="../Techniques/pdf/PDF16" class="pdf"></a>
                
             </li>
             
             <li>
                
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/pdf/PDF19" class="pdf"></a>
+               <a href="../Techniques/pdf/PDF19" class="pdf"></a>
                
             </li>
             
-         </ol>
+         </ul>
          
       </section>
       
@@ -156,7 +151,7 @@ <h3>Additional Techniques (Advisory) for Language of Page</h3>
             
             <li>
                									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/server-side-script/SVR5" class="server">Specifying the default language in the HTTP header</a>
+               <a href="../Techniques/server-side-script/SVR5" class="server">Specifying the default language in the HTTP header</a>
                								       
             </li>
             
diff --git a/understanding/20/language-of-parts.html b/understanding/20/language-of-parts.html
index 663f71e548..d0afe39b65 100644
--- a/understanding/20/language-of-parts.html
+++ b/understanding/20/language-of-parts.html
@@ -3,18 +3,27 @@
 <head>
    <meta charset="UTF-8"></meta>
    <title>Understanding Language of Parts</title>
-   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link>
+   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/>
 </head>
 <body>
    <h1>Understanding Language of Parts</h1>
-   
-   
+
+   <section id="brief">
+		<h2>In brief</h2>
+		<dl>
+         <dt>Goal</dt><dd>Assistive technology can identify the languages used within a page.</dd>
+         <dt>What to do</dt><dd>Indicate when words are in a different language.</dd>
+         <dt>Why it's important</dt><dd>People using assistive technology get information in the correct language.</dd> 
+      </dl>
+
+   </section>
+
    <section id="intent">
       <h2>Intent of Language of Parts</h2>
       
       
       <p>The intent of this Success Criterion is to ensure that user agents can correctly present
-         content written in multiple languages. This makes it possible for user agents and
+          phrases, passages, and in some cases words written in multiple languages. This makes it possible for user agents and
          assistive technologies to present content according to the  presentation and pronunciation
          rules for that language. This applies to graphical browsers as well as screen readers,
          braille displays, and other voice browsers.
@@ -31,9 +40,9 @@ <h2>Intent of Language of Parts</h2>
       </p>
       
       <p>When no other language has been specified for a phrase or passage of text, its human
-         language is the default human language of the Web page (see Success Criterion 3.1.1).
+         language is the default human language of the Web page (see <a href="language-of-page">Success Criterion 3.1.1</a>).
          So the human language of all content in single language documents can be programmatically
-         determined. 
+         determined.
       </p>
       
       <p>Individual words or phrases in one language can become part of another language. For
@@ -48,7 +57,6 @@ <h2>Intent of Language of Parts</h2>
          whether a change in language is intended, consider whether the word would be pronounced
          the same (except for accent or intonation) in the language of the immediately surrounding
          text.
-         
       </p>
       
       <p>Most professions require frequent use of technical terms which may originate from
@@ -60,9 +68,7 @@ <h2>Intent of Language of Parts</h2>
          and habeas corpus.
       </p>
       
-      <p>Identifying changes in language is important for a number of reasons:
-         	
-      </p>
+      <p>Identifying changes in language is important for a number of reasons:</p>
       
       <ul>
          
@@ -74,8 +80,8 @@ <h2>Intent of Language of Parts</h2>
          <li>Speech synthesizers that support multiple languages will be able to speak the text
             in the appropriate accent with proper pronunciation. If changes are not marked, the
             synthesizer will try its best to speak the words in the  default language it works
-            in. Thus, the French word for car, "voiture" would be pronounced "voyture" by a speech
-            synthesizer that uses English as its  default language. 
+            in. Thus, the French word for car, "<span lang="fr">voiture</span>" would be pronounced "voyture" by a speech
+            synthesizer that uses English as its default language. 
          </li>
          
          <li>Marking changes in language can benefit future developments in technology, for example
@@ -94,11 +100,9 @@ <h2>Intent of Language of Parts</h2>
    <section id="benefits">
       <h2>Benefits of Language of Parts</h2>
       
-      
       <p>This Success Criterion helps:</p>
       
       <ul>
-         
          <li>people who use screen readers or other technologies that convert text into synthetic
             speech;
          </li>
@@ -124,80 +128,57 @@ <h2>Benefits of Language of Parts</h2>
    <section id="examples">
       <h2>Examples of Language of Parts</h2>
       
-      
-      <ol>
-         
-         <li>
-            
-            <p>
-               								       
-               <strong>A German phrase in an English sentence. </strong>
-               							     
+      <ul>   
+         <li>  
+            <p>  								       
+               <strong>A German phrase in an English sentence.</strong>							     
             </p>
-            
             <p>In the sentence, "He maintained that the DDR (German Democratic Republic) was just
-               a 'Treppenwitz der Weltgeschichte'," the German phrase 'Treppenwitz der Weltgeschichte' is marked as German. Depending on the markup language, English may either be marked
+               a '<span lang="de">Treppenwitz der Weltgeschichte</span>'," the German phrase '<span lang="de">Treppenwitz der Weltgeschichte</span>' is marked as German. Depending on the markup language, English may either be marked
                as the language for the entire document except where specified, or marked at the paragraph
                level. When a screen reader encounters the German phrase, it changes pronunciation
                rules from English to German to pronounce the word correctly.
             </p>
-            
          </li>
-         
          <li>
-            
-            <p>
-               								       
-               <strong>Alternative language links</strong>
-               							     
+            <p>  								       
+               <strong>Alternative language links</strong>							     
             </p>
-            
             <p>An HTML Web page includes links to versions of the page in other languages (e.g.,
-               Deutsch, Français, Nederlands, Castellano, etc.). The text of each link is the name
-               of the language, in that language. The language of each link is indicated via a lang attribute.
-               
+               <span lang="de">Deutsch</span>, <span lang="fr">Français</span>, <span lang="nl">Nederlands</span>, <span lang="ca">Catalan</span>, etc.). The text of each link is the name of the language, in that language. The language of each link is indicated via a <code class="att">lang</code> attribute.
             </p>
-            
+<pre xml:space="preserve"><code>&lt;ul&gt;
+  &lt;li&gt;&lt;a href="..." lang="de"&gt;Deutsch&lt;/a&gt;&lt;/li&gt;
+  &lt;li&gt;&lt;a href="..." lang="it"&gt;Italiano&lt;/a&gt;&lt;/li&gt;
+  &lt;li&gt;&lt;a href="..." lang="fr"&gt;Français&lt;/a&gt;&lt;/li&gt;
+  ...
+  &lt;li&gt;&lt;a href="..." lang="zh-hant"&gt;繁體中文&lt;/a&gt;&lt;/li&gt;
+&lt;/ul&gt;</code></pre>
          </li>
-         
          <li>
-            
-            <p>
-               								       
-               <strong>"Podcast" used in a French sentence.</strong>
-               							     
+            <p>  								       
+               <strong>"Podcast" used in a French sentence.</strong>							     
             </p>
-            
             <p>Because "podcast" is part of the vernacular of the immediately surrounding text in
-               the following excerpt, "À l'occasion de l'exposition "Energie éternelle. 1500 ans d'art indien", le Palais
-               des Beaux-Arts de Bruxelles a lancé son premier podcast. Vous pouvez télécharger ce
-               podcast au format M4A et MP3," no indication of language change is required.
+               the following excerpt, "<span lang="fr">À l'occasion de l'exposition "Energie éternelle. 1500 ans d'art indien", le Palais des Beaux-Arts de Bruxelles a lancé son premier podcast. Vous pouvez télécharger ce podcast au format M4A et MP3</span>", no indication of language change is required.
             </p>
-            
          </li>
-         
-      </ol>
-      
+      </ul>
    </section>
    
    <section id="resources">
       <h2>Resources for Language of Parts</h2>
-      
-      
+
       <ul>
-         
-         <li> 
-            
-            <a href="https://www.w3.org/International/articles/language-tags/Overview.en.php">Language tags in HTML and XML</a> - W3C Internationalization Working Group
-         </li>
-         
          <li>
-            								       
-            <a href="https://www.w3.org/TR/i18n-html-tech-lang/">Internationalization Best Practices: Specifying Language in XHTML &amp; HTML Content</a>
-            							     
+            <a href="https://html.spec.whatwg.org/multipage/dom.html#attr-lang">HTML - The <code class="att">lang</code> and <code class="att">xml:lang</code> attributes</a>.
+            </li>
+         <li>
+            <a href="https://www.w3.org/International/articles/language-tags/index.en">Language tags in HTML and XML</a>.
+         </li>
+         <li>							       
+            <a href="https://www.w3.org/TR/i18n-html-tech-lang/">Authoring HTML: Language declarations</a>.							     
          </li>
-         
-         
       </ul>
       
    </section>
@@ -205,55 +186,28 @@ <h2>Resources for Language of Parts</h2>
    <section id="techniques">
       <h2>Techniques for Language of Parts</h2>
       
-      
       <section id="sufficient">
          <h3>Sufficient Techniques for Language of Parts</h3>
-         
-         
-         <ol>
-            
-            <li>
-               									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/html/H58" class="html">Using the lang attribute to identify changes in the human language</a>
-               								       
-            </li>
-            
-            <li>
-               
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/pdf/PDF19" class="pdf"></a>
-               
+      
+         <ul> 
+            <li>  									         
+               <a href="../Techniques/html/H58" class="html">Using the lang attribute to identify changes in the human language</a>.	       
             </li>
-            
             <li>
-               
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/silverlight/SL4" class="silverlight"></a>
-               
+               <a href="../Techniques/pdf/PDF19" class="pdf">Specifying the language for a passage or phrase with the Lang entry in PDF documents</a>.
             </li>
-            
-         </ol>
+         </ul>
          
       </section>
       
       <section id="advisory">
          <h3>Additional Techniques (Advisory) for Language of Parts</h3>
          
-         
-         <ul>
-            
-            <li>
-               
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/silverlight/SL27" class="silverlight"></a>
-               
-            </li>
-            
-         </ul>
-         
       </section>
       
       <section id="failure">
          <h3>Failures for Language of Parts</h3>
-         
-         
+          
       </section>
       
    </section>
diff --git a/understanding/20/link-purpose-in-context.html b/understanding/20/link-purpose-in-context.html
index 881764ec7d..4c7533ba7c 100644
--- a/understanding/20/link-purpose-in-context.html
+++ b/understanding/20/link-purpose-in-context.html
@@ -3,11 +3,20 @@
 <head>
    <meta charset="UTF-8"></meta>
    <title>Understanding Link Purpose (In Context)</title>
-   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link>
+   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/>
 </head>
 <body>
    <h1>Understanding Link Purpose (In Context)</h1>
    
+   <section id="brief">
+		<h2>In brief</h2>
+		<dl>
+         <dt>Goal</dt><dd>Users understand what each link will do.</dd>
+         <dt>What to do</dt><dd>Provide descriptive names or context for all links.</dd>
+         <dt>Why it's important</dt><dd>People with visual and cognitive disabilities can navigate more easily.</dd> 
+      </dl>
+
+   </section>
    
    <section id="intent">
       <h2>Intent of Link Purpose (In Context)</h2>
@@ -118,97 +127,29 @@ <h2>Benefits of Link Purpose (In Context)</h2>
    
    <section id="examples">
       <h2>Examples of Link Purpose (In Context)</h2>
-      
-      
-      <ul>
-         
-         <li>
-            
-            <p>
-               								       
-               <strong>A link contains text that gives a description of the information at that URI</strong>
-               							     
-            </p>
-            
-            <p>
-               A page contains the sentence "There was much bloodshed during the Medieval period
-               of history." Where "Medieval period of history" is a link.
-               
-            </p>
-            
-         </li>
-         
-         <li>
-            
-            <p>
-               								       
-               <strong>A link is preceded by a text description of the information at that URI</strong>
-               							     
-            </p>
-            
-            <p>
-               A page contains the sentence "Learn more about the Government of Ireland's Commission
-               on Electronic Voting at Go Vote!" where "Go Vote!" is a link.
-               
-            </p>
-            
-         </li>
          
-         <li>
-            
-            <p>
-               								       
-               <strong>Both an icon and text are included in the same link</strong>
-               							     
-            </p>
-            
-            <p>
-               An icon of a voting machine and the text "Government of Ireland's Commission of Electronic
+      <dl>
+         <dt>A link contains text that gives a description of the information at that URI</dt>
+         <dd>A page contains the sentence "There was much bloodshed during the Medieval period
+               of history." Where "Medieval period of history" is a link.</dd>
+         <dt>A link is preceded by a text description of the information at that URI</dt>
+         <dd>A page contains the sentence "Learn more about the Government of Ireland's Commission
+               on Electronic Voting at Go Vote!" where "Go Vote!" is a link.</dd>
+         <dt>Both an icon and text are included in the same link</dt>
+         <dd>An icon of a voting machine and the text "Government of Ireland's Commission of Electronic
                Voting" are combined to make a single link. The alt text for the icon is null, since
-               the purpose of the link is already described by the text of the link next to the icon.
-               
-            </p>
-            
-         </li>
-         
-         <li>
-            
-            <p>
-               								       
-               <strong>A list of book titles</strong>
-               							     
-            </p>
-            
-            <p>
-               A list of books is available in three formats: HTML, PDF, and mp3 (a recording of
+               the purpose of the link is already described by the text of the link next to the icon.</dd>
+         <dt>A list of book titles</dt>
+         <dd>A list of books is available in three formats: HTML, PDF, and mp3 (a recording of
                a person reading the book). To avoid hearing the title of each book three times (once
                for each format), the first link for each book is the title of the book, the second
-               link says "PDF" and the third says, "mp3."
-               
-            </p>
-            
-         </li>
-         
-         <li>
-            
-            <p>
-               								       
-               <strong>News article summaries</strong>
-               							     
-            </p>
-            
-            <p>
-               A Web page contains a collection of news articles. The main page lists the first few
+               link says "PDF" and the third says, "mp3."</dd>
+         <dt>News article summaries</dt>
+         <dd>A Web page contains a collection of news articles. The main page lists the first few
                sentences of each article, followed by a "Read more" link. A screen reader command
                to read the current paragraph provides the context to interpret the purpose of the
-               link.
-               
-               
-            </p>
-            
-         </li>
-         
-      </ul>
+               link.</dd>
+      </dl>
       
    </section>
    
@@ -248,23 +189,23 @@ <h2>Techniques for Link Purpose (In Context)</h2>
          <h3>Sufficient Techniques for Link Purpose (In Context)</h3>
          
          
-         <ol>
+         <ul>
             
             <li>
                									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G91" class="general">Providing link text that describes the purpose of a link</a>
+               <a href="../Techniques/general/G91" class="general">Providing link text that describes the purpose of a link</a>
                								       
             </li>
             
             <li>
                									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/html/H30" class="html">Providing link text that describes the purpose of a link for anchor elements</a>
+               <a href="../Techniques/html/H30" class="html">Providing link text that describes the purpose of a link for anchor elements</a>
                								       
             </li>
             
             <li>
                									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/html/H24" class="html">Providing a text alternative for the area element</a>
+               <a href="../Techniques/html/H24" class="html">Providing a text alternative for the area element</a>
                								       
             </li>
 
@@ -277,19 +218,13 @@ <h3>Sufficient Techniques for Link Purpose (In Context)</h3>
                   
                   <li>
                      											             
-                     <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G189" class="general">Providing a control near the beginning of the Web page that changes the link text</a>
+                     <a href="../Techniques/general/G189" class="general">Providing a control near the beginning of the Web page that changes the link text</a>
                      										           
                   </li>
                   
                   <li>
                      											             
-                     <a href="https://www.w3.org/WAI/WCAG21/Techniques/client-side-script/SCR30" class="script">Using scripts to change the link text</a>
-                     										           
-                  </li>
-                  
-                  <li>
-                     											             
-                     <a href="https://www.w3.org/WAI/WCAG21/Techniques/flash/FLASH7" class="flash">Using scripting to change control labels</a>
+                     <a href="../Techniques/client-side-script/SCR30" class="script">Using scripts to change the link text</a>
                      										           
                   </li>
                   
@@ -299,7 +234,7 @@ <h3>Sufficient Techniques for Link Purpose (In Context)</h3>
             
             <li>
                									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G53" class="general">Identifying the purpose of a link using link text combined with the text of the enclosing
+               <a href="../Techniques/general/G53" class="general">Identifying the purpose of a link using link text combined with the text of the enclosing
                   sentence
                </a>
                								       
@@ -315,13 +250,13 @@ <h3>Sufficient Techniques for Link Purpose (In Context)</h3>
                   
                   <li>
                      											             
-                     <a href="https://www.w3.org/WAI/WCAG21/Techniques/html/H33" class="html">Supplementing link text with the title attribute</a>
+                     <a href="../Techniques/html/H33" class="html">Supplementing link text with the title attribute</a>
                      										           
                   </li>
                   
                   <li>
                      											             
-                     <a href="https://www.w3.org/WAI/WCAG21/Techniques/css/C7" class="css">Supplementing link text with hidden text</a>
+                     <a href="../Techniques/css/C7" class="css">Supplementing link text with hidden text</a>
                      										           
                   </li>
                   
@@ -341,37 +276,37 @@ <h3>Sufficient Techniques for Link Purpose (In Context)</h3>
                   
                   <li>
                      
-                     <a href="https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA7" class="aria"></a>
+                     <a href="../Techniques/aria/ARIA7" class="aria"></a>
                      
                   </li>
                   
                   <li>
                      
-                     <a href="https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA8" class="aria"></a>
+                     <a href="../Techniques/aria/ARIA8" class="aria"></a>
                      
                   </li>
                   
                   <li>
                      											             
-                     <a href="https://www.w3.org/WAI/WCAG21/Techniques/html/H77" class="html"></a>
+                     <a href="../Techniques/html/H77" class="html"></a>
                      										           
                   </li>
                   
                   <li>
                      											             
-                     <a href="https://www.w3.org/WAI/WCAG21/Techniques/html/H78" class="html"></a>
+                     <a href="../Techniques/html/H78" class="html"></a>
                      										           
                   </li>
                   
                   <li>
                      											             
-                     <a href="https://www.w3.org/WAI/WCAG21/Techniques/html/H79" class="html"></a>
+                     <a href="../Techniques/html/H79" class="html"></a>
                      										           
                   </li>
                   
                   <li>
                      											             
-                     <a href="https://www.w3.org/WAI/WCAG21/Techniques/html/H81" class="html">Identifying the purpose of a link in a nested list using link text combined with the
+                     <a href="../Techniques/html/H81" class="html">Identifying the purpose of a link in a nested list using link text combined with the
                         list item that the list is nested beneath
                      </a>
                      										           
@@ -385,7 +320,7 @@ <h3>Sufficient Techniques for Link Purpose (In Context)</h3>
                
                <p>
                   
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G91" class="general">Providing link text that describes the purpose of a link</a> 
+                  <a href="../Techniques/general/G91" class="general">Providing link text that describes the purpose of a link</a> 
                   
                   <strong>AND</strong> Semantically indicating links using one of the following techniques:
                </p>
@@ -394,19 +329,13 @@ <h3>Sufficient Techniques for Link Purpose (In Context)</h3>
                   
                   <li>
                      
-                     <a href="https://www.w3.org/WAI/WCAG21/Techniques/pdf/PDF11" class="pdf"></a>
-                     
-                  </li>
-                  
-                  <li>
-                     
-                     <a href="https://www.w3.org/WAI/WCAG21/Techniques/pdf/PDF13" class="pdf"></a>
+                     <a href="../Techniques/pdf/PDF11" class="pdf"></a>
                      
                   </li>
                   
                   <li>
                      
-                     <a href="https://www.w3.org/WAI/WCAG21/Techniques/silverlight/SL18" class="silverlight"></a>
+                     <a href="../Techniques/pdf/PDF13" class="pdf"></a>
                      
                   </li>
                   
@@ -414,7 +343,7 @@ <h3>Sufficient Techniques for Link Purpose (In Context)</h3>
                
             </li>
             
-         </ol>
+         </ul>
          
       </section>
       
@@ -426,19 +355,13 @@ <h3>Additional Techniques (Advisory) for Link Purpose (In Context)</h3>
             
             <li>
                									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/html/H2" class="html">Combining adjacent image and text links for the same resource</a>
-               								       
-            </li>
-            
-            <li>
-               									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/flash/FLASH5" class="flash">Combining adjacent image and text buttons for the same resource</a>
+               <a href="../Techniques/html/H2" class="html">Combining adjacent image and text links for the same resource</a>
                								       
             </li>
             
             <li>
                									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/html/H80" class="html">Identifying the purpose of a link using link text combined with the preceding heading
+               <a href="../Techniques/html/H80" class="html">Identifying the purpose of a link using link text combined with the preceding heading
                   element
                </a>
                								       
@@ -456,7 +379,7 @@ <h3>Failures for Link Purpose (In Context)</h3>
             
             <li>
                									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/failures/F63" class="failure">Failure of 2.4.4 due to providing link context only in content that is not related
+               <a href="../Techniques/failures/F63" class="failure">Failure of 2.4.4 due to providing link context only in content that is not related
                   to the link
                </a>
                								       
@@ -464,7 +387,7 @@ <h3>Failures for Link Purpose (In Context)</h3>
             
             <li>
                									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/failures/F89" class="failure">Failure of 2.4.4 due to using null alt on an image where the image is the only content
+               <a href="../Techniques/failures/F89" class="failure">Failure of 2.4.4 due to using null alt on an image where the image is the only content
                   in a link
                </a>
                								       
diff --git a/understanding/20/link-purpose-link-only.html b/understanding/20/link-purpose-link-only.html
index 7fe368ffaf..e22b02ce94 100644
--- a/understanding/20/link-purpose-link-only.html
+++ b/understanding/20/link-purpose-link-only.html
@@ -3,11 +3,20 @@
 <head>
    <meta charset="UTF-8"></meta>
    <title>Understanding Link Purpose (Link Only)</title>
-   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link>
+   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/>
 </head>
 <body>
    <h1>Understanding Link Purpose (Link Only)</h1>
    
+   <section id="brief">
+      <h2>In brief</h2>
+      <dl>
+         <dt>Goal</dt><dd>Users understand what each link will do.</dd>
+         <dt>What to do</dt><dd>Provide descriptive names for all links.</dd>
+         <dt>Why it's important</dt><dd>Descriptive link text is more understandable for all users, especially when using assistive technology.</dd> 
+      </dl>
+
+   </section>
    
    <section id="intent">
       <h2>Intent of Link Purpose (Link Only)</h2>
@@ -99,41 +108,17 @@ <h2>Benefits of Link Purpose (Link Only)</h2>
    <section id="examples">
       <h2>Examples of Link Purpose (Link Only)</h2>
       
-      
-      <ul>
-         
-         <li>
-            
-            <p>
-               								       
-               <strong>Both an icon and text are included in the same link</strong>
-               							     
-            </p>
-            
-            <p>An icon of a voting machine and the text "Government of Ireland's Commission of Electronic
-               Voting" are combined to make a single link.
-            </p>
-            
-         </li>
-         
-         <li>
-            
-            <p>
-               								       
-               <strong>A list of book titles</strong>
-               							     
-            </p>
-            
-            <p>A list of books is available in three formats: HTML, PDF, and mp3 (a recording of
+      <dl>
+         <dt>Both an icon and text are included in the same link</dt>
+         <dd>An icon of a voting machine and the text "Government of Ireland's Commission of Electronic
+               Voting" are combined to make a single link.</dd>
+         <dt>A list of book titles</dt>
+         <dd>A list of books is available in three formats: HTML, PDF, and mp3 (a recording of
                a person reading the book). The title of the book is followed by links to the different
                formats. The rendered text for each link is just the format type, but the text associated
                with each link includes the title as well as the format; for instance, "Gulliver's
-               Travels, MP3."
-            </p>
-            
-         </li>
-         
-      </ul>
+               Travels, MP3."</dd>
+      </dl>
       
    </section>
    
@@ -173,29 +158,29 @@ <h2>Techniques for Link Purpose (Link Only)</h2>
          <h3>Sufficient Techniques for Link Purpose (Link Only)</h3>
          
          
-         <ol>
+         <ul>
             
             <li>
                
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA8" class="aria"></a>
+               <a href="../Techniques/aria/ARIA8" class="aria"></a>
                
             </li>
             
             <li>
                									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G91" class="general">Providing link text that describes the purpose of a link</a>
+               <a href="../Techniques/general/G91" class="general">Providing link text that describes the purpose of a link</a>
                								       
             </li>
             
             <li>
                									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/html/H30" class="html">Providing link text that describes the purpose of a link for anchor elements</a>
+               <a href="../Techniques/html/H30" class="html">Providing link text that describes the purpose of a link for anchor elements</a>
                								       
             </li>
             
             <li>
                									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/html/H24" class="html">Providing a text alternative for the area element</a>
+               <a href="../Techniques/html/H24" class="html">Providing a text alternative for the area element</a>
                								       
             </li>
 
@@ -208,19 +193,13 @@ <h3>Sufficient Techniques for Link Purpose (Link Only)</h3>
                   
                   <li>
                      											             
-                     <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G189" class="general">Providing a control near the beginning of the Web page that changes the link text</a>
+                     <a href="../Techniques/general/G189" class="general">Providing a control near the beginning of the Web page that changes the link text</a>
                      										           
                   </li>
                   
                   <li>
                      											             
-                     <a href="https://www.w3.org/WAI/WCAG21/Techniques/client-side-script/SCR30" class="script">Using scripts to change the link text</a>
-                     										           
-                  </li>
-                  
-                  <li>
-                     											             
-                     <a href="https://www.w3.org/WAI/WCAG21/Techniques/flash/FLASH7" class="flash">Using scripting to change control labels</a>
+                     <a href="../Techniques/client-side-script/SCR30" class="script">Using scripts to change the link text</a>
                      										           
                   </li>
                   
@@ -238,7 +217,7 @@ <h3>Sufficient Techniques for Link Purpose (Link Only)</h3>
                   
                   <li>
                      											             
-                     <a href="https://www.w3.org/WAI/WCAG21/Techniques/css/C7" class="css">Supplementing link text with hidden text</a>
+                     <a href="../Techniques/css/C7" class="css">Supplementing link text with hidden text</a>
                      										           
                   </li>
                   
@@ -254,19 +233,13 @@ <h3>Sufficient Techniques for Link Purpose (Link Only)</h3>
                   
                   <li>
                      
-                     <a href="https://www.w3.org/WAI/WCAG21/Techniques/pdf/PDF11" class="pdf"></a>
-                     
-                  </li>
-                  
-                  <li>
-                     
-                     <a href="https://www.w3.org/WAI/WCAG21/Techniques/pdf/PDF13" class="pdf"></a>
+                     <a href="../Techniques/pdf/PDF11" class="pdf"></a>
                      
                   </li>
                   
                   <li>
                      
-                     <a href="https://www.w3.org/WAI/WCAG21/Techniques/silverlight/SL18" class="silverlight"></a>
+                     <a href="../Techniques/pdf/PDF13" class="pdf"></a>
                      
                   </li>
                   
@@ -275,7 +248,7 @@ <h3>Sufficient Techniques for Link Purpose (Link Only)</h3>
                
             </li>
             
-         </ol>
+         </ul>
          
       </section>
       
@@ -287,19 +260,13 @@ <h3>Additional Techniques (Advisory) for Link Purpose (Link Only)</h3>
             
             <li>
                									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/html/H2" class="html">Combining adjacent image and text links for the same resource</a>
-               								       
-            </li>
-            
-            <li>
-               									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/flash/FLASH5" class="flash">Combining adjacent image and text buttons for the same resource</a>
+               <a href="../Techniques/html/H2" class="html">Combining adjacent image and text links for the same resource</a>
                								       
             </li>
             
             <li>
                									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/html/H33" class="html">Supplementing link text with the title attribute</a>
+               <a href="../Techniques/html/H33" class="html">Supplementing link text with the title attribute</a>
                								       
             </li>
             
@@ -315,7 +282,7 @@ <h3>Failures for Link Purpose (Link Only)</h3>
             
             <li>
                									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/failures/F84" class="failure">Failure of Success Criterion 2.4.9 due to using a non-specific link such as "click
+               <a href="../Techniques/failures/F84" class="failure">Failure of Success Criterion 2.4.9 due to using a non-specific link such as "click
                   here" or "more" without a mechanism to change the link text to specific text.
                </a>
                								       
@@ -323,7 +290,7 @@ <h3>Failures for Link Purpose (Link Only)</h3>
             
             <li>
                									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/failures/F89" class="failure">Failure of 2.4.4 due to using null alt on an image where the image is the only content
+               <a href="../Techniques/failures/F89" class="failure">Failure of 2.4.4 due to using null alt on an image where the image is the only content
                   in a link
                </a>
                								       
diff --git a/understanding/20/location.html b/understanding/20/location.html
index e45b33918e..58b5cebda5 100644
--- a/understanding/20/location.html
+++ b/understanding/20/location.html
@@ -3,11 +3,21 @@
 <head>
    <meta charset="UTF-8"></meta>
    <title>Understanding Location</title>
-   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link>
+   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/>
 </head>
 <body>
    <h1>Understanding Location</h1>
    
+   <section id="brief">
+      <h2>In brief</h2>
+      <dl>
+         <dt>Goal</dt><dd>Users know where they are in a set of pages.</dd>
+         <dt>What to do</dt><dd>Use breadcrumbs, site maps, or other indicators to give context.</dd>
+         <dt>Why it's important</dt><dd>Location indicators reduce confusion for people with cognitive disabilities.</dd> 
+      </dl>
+
+   </section>
+   
    
    <section id="intent">
       <h2>Intent of Location</h2>
@@ -39,39 +49,15 @@ <h2>Benefits of Location</h2>
    <section id="examples">
       <h2>Examples of Location</h2>
       
-      
-      <ul>
-         
-         <li>
-            
-            <p>
-               								       
-               <strong>Links to help user determine their location in a site</strong>
-               							     
-            </p>
-            
-            <p>A research group is part of an educational department at a university. The group's
-               home page links to the department home page and the university's home page.
-            </p>
-            
-         </li>
-         
-         <li>
-            
-            <p>
-               								       
-               <strong>A breadcrumb trail</strong>
-               							     
-            </p>
-            
-            <p>A portal Web site organizes topics into categories. As the user navigates through
+      <dl>
+         <dt>Links to help user determine their location in a site</dt>
+         <dd>A research group is part of an educational department at a university. The group's
+               home page links to the department home page and the university's home page.</dd>
+         <dt>A breadcrumb trail</dt>
+         <dd>A portal Web site organizes topics into categories. As the user navigates through
                categories and subcategories, a breadcrumb trail shows the current location in the
-               hierarchy of categories. Each page also contains a link to the portal home page.
-            </p>
-            
-         </li>
-         
-      </ul>
+               hierarchy of categories. Each page also contains a link to the portal home page.</dd>
+      </dl>
       
    </section>
    
@@ -99,46 +85,33 @@ <h2>Techniques for Location</h2>
          <h3>Sufficient Techniques for Location</h3>
          
          
-         <ol>
+         <ul>
             
             <li>
                									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G65" class="general">Providing a breadcrumb trail</a>
+               <a href="../Techniques/general/G65" class="general">Providing a breadcrumb trail</a>
                								       
             </li>
             
             <li>
                									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G63" class="general">Providing a Site Map</a>
+               <a href="../Techniques/general/G63" class="general">Providing a Site Map</a>
                								       
             </li>
             
             <li>
                									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G128" class="general">Indicating current location within navigation bars</a>
+               <a href="../Techniques/general/G128" class="general">Indicating current location within navigation bars</a>
                								       
             </li>
             
             <li>
                
-               <p> 
-                  
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G127" class="general">Identifying a Web page's relationship to a larger collection of Web pages</a> using one of the following techniques:
-               </p>
-               
-               <ul>
-                  
-                  <li>
-                     											             
-                     <a href="https://www.w3.org/WAI/WCAG21/Techniques/html/H59" class="html">Using the link element and navigation tools</a>
-                     										           
-                  </li>
-                  
-               </ul>
+               <a href="../Techniques/general/G127" class="general">Identifying a Web page's relationship to a larger collection of Web pages</a>
                
             </li>
             
-         </ol>
+         </ul>
          
       </section>
       
@@ -150,13 +123,13 @@ <h3>Additional Techniques (Advisory) for Location</h3>
             
             <li>
                
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/pdf/PDF14" class="pdf"></a>
+               <a href="../Techniques/pdf/PDF14" class="pdf"></a>
                
             </li>
             
             <li>
                
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/pdf/PDF17" class="pdf"></a>
+               <a href="../Techniques/pdf/PDF17" class="pdf"></a>
                
             </li>
             
diff --git a/understanding/20/low-or-no-background-audio.html b/understanding/20/low-or-no-background-audio.html
index 5d1661119a..66c22fc394 100644
--- a/understanding/20/low-or-no-background-audio.html
+++ b/understanding/20/low-or-no-background-audio.html
@@ -3,11 +3,21 @@
 <head>
    <meta charset="UTF-8"></meta>
    <title>Understanding Low or No Background Audio</title>
-   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link>
+   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/>
 </head>
 <body>
    <h1>Understanding Low or No Background Audio</h1>
    
+   <section id="brief">
+      <h2>In brief</h2>
+      <dl>
+         <dt>Goal</dt><dd>Prerecorded speech is not disrupted by background sound.</dd>
+         <dt>What to do</dt><dd>Avoid or lessen background sound, or let users turn it off.</dd>
+         <dt>Why it's important</dt><dd>People who are hard of hearing may have difficulty distinguishing speech from music and other sounds.</dd> 
+      </dl>
+
+   </section>
+   
    
    <section id="intent">
       <h2>Intent of Low or No Background Audio</h2>
@@ -48,22 +58,22 @@ <h2>Examples of Low or No Background Audio</h2>
       
    </section>
    
-   <section id="resources">
+  <section id="resources">
       <h2>Resources for Low or No Background Audio</h2>
-      
-      
+
+
       <ul>
-         
+
          <li>
-            								       
-            <a href="http://trace.wisc.edu/docs/2004-About-dB/index.htm">About Decibels</a>
-            							     
+
+            <a href="https://ds.gpii.net/content/about-decibels-db">About Decibels</a>
+
          </li>
-         
+
       </ul>
-      
+
    </section>
-   
+  
    <section id="techniques">
       <h2>Techniques for Low or No Background Audio</h2>
       
@@ -72,17 +82,17 @@ <h2>Techniques for Low or No Background Audio</h2>
          <h3>Sufficient Techniques for Low or No Background Audio</h3>
          
          
-         <ol>
+         <ul>
             
             <li>
                									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G56" class="general">Mixing audio files so that non-speech sounds are at least 20 decibels lower than the
+               <a href="../Techniques/general/G56" class="general">Mixing audio files so that non-speech sounds are at least 20 decibels lower than the
                   speech audio content
                </a>
                								       
             </li>
             
-         </ol>
+         </ul>
          
       </section>
       
diff --git a/understanding/20/meaningful-sequence.html b/understanding/20/meaningful-sequence.html
index ffebb681f8..3370f8d3cf 100644
--- a/understanding/20/meaningful-sequence.html
+++ b/understanding/20/meaningful-sequence.html
@@ -3,11 +3,20 @@
 <head>
    <meta charset="UTF-8"></meta>
    <title>Understanding Meaningful Sequence</title>
-   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link>
+   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/>
 </head>
 <body>
    <h1>Understanding Meaningful Sequence</h1>
    
+   <section id="brief">
+		<h2>In brief</h2>
+		<dl>
+         <dt>Goal</dt><dd>The order of content can be understood by more people.</dd>
+         <dt>What to do</dt><dd>Use code to preserve meaningful content order.</dd>
+         <dt>Why it's important</dt><dd>Assistive technology can present content to users in the proper order.</dd> 
+      </dl>
+
+   </section>
    
    <section id="intent">
       <h2>Intent of Meaningful Sequence</h2>
@@ -49,7 +58,7 @@ <h2>Intent of Meaningful Sequence</h2>
       
       <p>For clarity:</p>
       
-      <ol>
+      <ul>
          
          <li>Providing a particular linear order is only required where it affects meaning.</li>
          
@@ -57,7 +66,7 @@ <h2>Intent of Meaningful Sequence</h2>
          
          <li>Only one correct order needs to be provided.</li>
          
-      </ol>
+      </ul>
       
       
    </section>
@@ -114,11 +123,11 @@ <h2>Techniques for Meaningful Sequence</h2>
          <h3>Sufficient Techniques for Meaningful Sequence</h3>
          
          
-         <ol>
+         <ul>
             
             <li> 
                
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G57" class="general">Ordering the content in a meaningful sequence</a> for all the content in the Web page
+               <a href="../Techniques/general/G57" class="general">Ordering the content in a meaningful sequence</a> for all the content in the Web page
                
             </li>
             
@@ -128,14 +137,14 @@ <h3>Sufficient Techniques for Meaningful Sequence</h3>
                   
                   <strong>AND</strong> 
                   
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G57" class="general">Ordering the content in a meaningful sequence</a> for those sequences    
+                  <a href="../Techniques/general/G57" class="general">Ordering the content in a meaningful sequence</a> for those sequences    
                </p>
                
                <ul>
                   
                   <li>
                      											             
-                     <a href="https://www.w3.org/WAI/WCAG21/Techniques/html/H34" class="html">Using a Unicode right-to-left mark (RLM) or left-to-right mark (LRM) to mix text direction
+                     <a href="../Techniques/html/H34" class="html">Using a Unicode right-to-left mark (RLM) or left-to-right mark (LRM) to mix text direction
                         inline
                      </a>
                      										           
@@ -143,7 +152,7 @@ <h3>Sufficient Techniques for Meaningful Sequence</h3>
                   
                   <li>
                      											             
-                     <a href="https://www.w3.org/WAI/WCAG21/Techniques/html/H56" class="html">Using the dir attribute on an inline element to resolve problems with nested directional
+                     <a href="../Techniques/html/H56" class="html">Using the dir attribute on an inline element to resolve problems with nested directional
                         runs
                      </a>
                      										           
@@ -151,13 +160,13 @@ <h3>Sufficient Techniques for Meaningful Sequence</h3>
                   
                   <li>
                      											             
-                     <a href="https://www.w3.org/WAI/WCAG21/Techniques/css/C6" class="css">Positioning content based on structural markup</a>
+                     <a href="../Techniques/css/C6" class="css">Positioning content based on structural markup</a>
                      										           
                   </li>
                   
                   <li>
                      											             
-                     <a href="https://www.w3.org/WAI/WCAG21/Techniques/css/C8" class="css">Using CSS letter-spacing to control spacing within a word</a>
+                     <a href="../Techniques/css/C8" class="css">Using CSS letter-spacing to control spacing within a word</a>
                      										           
                   </li>
                   
@@ -167,23 +176,17 @@ <h3>Sufficient Techniques for Meaningful Sequence</h3>
             
             <li>
                									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/css/C27" class="css">Making the DOM order match the visual order</a>
+               <a href="../Techniques/css/C27" class="css">Making the DOM order match the visual order</a>
                								       
             </li>
             
             <li>
                
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/pdf/PDF3" class="pdf"></a>
-               
-            </li>
-            
-            <li>
-               
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/silverlight/SL34" class="silverlight"></a>
+               <a href="../Techniques/pdf/PDF3" class="pdf"></a>
                
             </li>
             
-         </ol>
+         </ul>
          
       </section>
       
@@ -200,25 +203,25 @@ <h3>Failures for Meaningful Sequence</h3>
             
             <li>
                									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/failures/F34" class="failure">Failure due to using white space characters to format tables in text content</a>
+               <a href="../Techniques/failures/F34" class="failure">Failure due to using white space characters to format tables in text content</a>
                								       
             </li>
             
             <li>
                									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/failures/F33" class="failure">Failure due to using white space characters to create multiple columns in text content</a>
+               <a href="../Techniques/failures/F33" class="failure">Failure due to using white space characters to create multiple columns in text content</a>
                								       
             </li>
             
             <li>
                									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/failures/F32" class="failure">Failure due to using white space characters to control spacing within a word</a>
+               <a href="../Techniques/failures/F32" class="failure">Failure due to using white space characters to control spacing within a word</a>
                								       
             </li>
             
             <li>
                									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/failures/F49" class="failure">Failure due to changing the meaning of content by positioning information with HTML
+               <a href="../Techniques/failures/F49" class="failure">Failure due to changing the meaning of content by positioning information with HTML
                   layout tables
                </a>
                								       
@@ -226,7 +229,7 @@ <h3>Failures for Meaningful Sequence</h3>
             
             <li>
                									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/failures/F1" class="failure">Failure due to changing the meaning of content by positioning information with CSS</a>
+               <a href="../Techniques/failures/F1" class="failure">Failure due to changing the meaning of content by positioning information with CSS</a>
                								       
             </li>
             
diff --git a/understanding/20/media-alternative-prerecorded.html b/understanding/20/media-alternative-prerecorded.html
index 2e774e522f..66e69a7021 100644
--- a/understanding/20/media-alternative-prerecorded.html
+++ b/understanding/20/media-alternative-prerecorded.html
@@ -3,12 +3,22 @@
 <head>
    <meta charset="UTF-8"></meta>
    <title>Understanding Media Alternative (Prerecorded)</title>
-   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link>
+   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/>
 </head>
 <body>
    <h1>Understanding Media Alternative (Prerecorded)</h1>
    
    
+   <section id="brief">
+      <h2>In brief</h2>
+      <dl>
+         <dt>Goal</dt><dd>Precorded videos can be understood by more people.</dd>
+         <dt>What to do</dt><dd>Provide a text equivalent for all content in videos.</dd>
+         <dt>Why it's important</dt><dd>More people, including those who are deaf-blind, can better understand the content at their own pace.</dd> 
+      </dl>
+
+   </section>
+   
    <section id="intent">
       <h2>Intent of Media Alternative (Prerecorded)</h2>
       
@@ -77,7 +87,7 @@ <h2>Benefits of Media Alternative (Prerecorded)</h2>
       
       <ul>
          
-         <li>People who cannot see well or at all and who also cannot hear well or at all can get
+         <li>People who are deaf-blind, who cannot see well or at all, and who also cannot hear well or at all can get
             access to information in audio-visual presentations.
          </li>
          
@@ -88,28 +98,15 @@ <h2>Benefits of Media Alternative (Prerecorded)</h2>
    <section id="examples">
       <h2>Examples of Media Alternative (Prerecorded)</h2>
       
-      
-      <ul>
-         
-         <li>
-            
-            <p>
-               								       
-               <strong>Example 1. alternative for time-based media for a training video</strong>
-               							     
-            </p>
-            
-            <p>A community center purchases a Training video for use by its clients and puts it on
+      <dl>
+         <dt>Example 1. alternative for time-based media for a training video</dt>
+         <dd>A community center purchases a Training video for use by its clients and puts it on
                the center's intranet. The video involves explaining use of a new technology and has
                a person talking and showing things at the same time. The community center provides
                an alternative for time-based media that all clients, including those who can neither
                see the demonstrations nor hear the explanations in the synchronized media, can use
-               to better understand what is being presented. 
-            </p>
-            
-         </li>
-         
-      </ul>
+               to better understand what is being presented.</dd>
+      </dl>
       
    </section>
    
@@ -147,29 +144,23 @@ <h3>Sufficient Techniques for Media Alternative (Prerecorded)</h3>
             
             <h4>Situation A: If the content is prerecorded synchronized media:</h4>
             
-            <ol>
+            <ul>
                
                <li>
                   
                   <p> 
                      
-                     <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G69" class="general">Providing an alternative for time-based media including any interaction</a> using one of the following techniques
+                     <a href="../Techniques/general/G69" class="general">Providing an alternative for time-based media including any interaction</a> using one of the following techniques
                   </p>
                   
                   <ul>
                      
                      <li>
                         												               
-                        <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G58" class="general">Placing a link to the transcript immediately next to the non-text content</a>
+                        <a href="../Techniques/general/G58" class="general">Placing a link to the transcript immediately next to the non-text content</a>
                         											             
                      </li>
                      
-                     <li>
-                        
-                        <a href="https://www.w3.org/WAI/WCAG21/Techniques/silverlight/SL17" class="silverlight"></a>
-                        
-                     </li>
-                     
                   </ul>
                   
                </li>
@@ -184,7 +175,7 @@ <h4>Situation A: If the content is prerecorded synchronized media:</h4>
                      
                      <li>
                         												               
-                        <a href="https://www.w3.org/WAI/WCAG21/Techniques/html/H53" class="html">Using the body of the object element</a>
+                        <a href="../Techniques/html/H53" class="html">Using the body of the object element</a>
                         											             
                      </li>
                      
@@ -192,7 +183,7 @@ <h4>Situation A: If the content is prerecorded synchronized media:</h4>
                   
                </li>
                
-            </ol>
+            </ul>
             
          </section>
          
@@ -200,34 +191,21 @@ <h4>Situation A: If the content is prerecorded synchronized media:</h4>
             
             <h4>Situation B: If the content is prerecorded video-only:</h4>
             
-            <ol>
+            <ul>
                
                <li>
                   										           
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G159" class="general">Providing a full text transcript of the video content</a>
+                  <a href="../Techniques/general/G159" class="general">Providing a full text transcript of the video content</a>
                   									         
                </li>
                
-            </ol>
+            </ul>
             
          </section>
          
       </section>
       
       <section id="advisory">
-         <h3>Additional Techniques (Advisory) for Media Alternative (Prerecorded)</h3>
-         
-         
-         <ul>
-            
-            <li>
-               									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/html/H46" class="html">Using noembed with embed</a>
-               								       
-            </li>
-            
-         </ul>
-         
       </section>
       
       <section id="failure">
@@ -238,7 +216,7 @@ <h3>Failures for Media Alternative (Prerecorded)</h3>
             
             <li>
                									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/failures/F74" class="failure">Failure of 1.2.1 due to not labeling a synchronized media alternative to text as an
+               <a href="../Techniques/failures/F74" class="failure">Failure of 1.2.1 due to not labeling a synchronized media alternative to text as an
                   alternative
                </a>
                								       
diff --git a/understanding/20/multiple-ways.html b/understanding/20/multiple-ways.html
index 9c13913ace..80eac3792f 100644
--- a/understanding/20/multiple-ways.html
+++ b/understanding/20/multiple-ways.html
@@ -3,11 +3,20 @@
 <head>
    <meta charset="UTF-8"></meta>
    <title>Understanding Multiple Ways</title>
-   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link>
+   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/>
 </head>
 <body>
    <h1>Understanding Multiple Ways</h1>
    
+   <section id="brief">
+		<h2>In brief</h2>
+		<dl>
+         <dt>Goal</dt><dd>Users can get to content in multiple ways.</dd>
+         <dt>What to do</dt><dd>Provide at least two options for reaching the same content.</dd>
+         <dt>Why it's important</dt><dd>Not everyone can navigate content in the same way.</dd> 
+      </dl>
+
+   </section>
    
    <section id="intent">
       <h2>Intent of Multiple Ways</h2>
@@ -43,7 +52,7 @@ <h2>Benefits of Multiple Ways</h2>
          </li>
          
          <li>Individuals with cognitive limitations may find it easier to use search features than
-            to use a hierarchical navigation scheme that is difficult to understand.
+            to use a hierarchical navigation scheme that may be difficult to understand.
          </li>
          
       </ul>
@@ -53,72 +62,26 @@ <h2>Benefits of Multiple Ways</h2>
    <section id="examples">
       <h2>Examples of Multiple Ways</h2>
       
-      
-      <ul>
-         
-         <li>
-            
-            <p>
-               								       
-               <strong>A search mechanism.</strong>
-               							     
-            </p>
-            
-            <p>A large food processing company provides a site containing recipes created using its
+      <dl>
+         <dt>A search mechanism</dt>
+         <dd>A large food processing company provides a site containing recipes created using its
                products. The site provides a search mechanism to search for recipes using a particular
                ingredient. In addition, it provides a list box that lists several categories of foods.
                A user may type "soup" in to the search engine or may select "soup" from the list
-               box to go to a page with a list of recipes made from the company's soup products
-            </p>
-            
-         </li>
-         
-         <li>
-            
-            <p>
-               								       
-               <strong>Links between Web pages.</strong>
-               							     
-            </p>
-            
-            <p>A local hair salon has created a Web site to promote its services. The site contains
+               box to go to a page with a list of recipes made from the company's soup products.</dd>
+         <dt>Links between Web pages</dt>
+         <dd>A local hair salon has created a Web site to promote its services. The site contains
                only five Web pages. There are links on each Web page to sequentially move forward
                or backward through the Web pages. In addition, each Web page contains a list of links
-               to reach each of the other Web pages.
-            </p>
-            
-         </li>
-         
-         <li>
-            
-            <p>
-               								       
-               <strong>Where content is a result of a process or task - Funds transfer confirmation.</strong>
-               							     
-            </p>
-            
-            <p>An on-line banking site allows fund transfer between accounts via the Web. There is
+               to reach each of the other Web pages.</dd>
+         <dt>Where content is a result of a process or task - Funds transfer confirmation</dt>
+         <dd>An on-line banking site allows fund transfer between accounts via the Web. There is
                no other way to locate the confirmation of fund transfer until the account owner completes
-               the transfer.
-            </p>
-            
-         </li>
-         
-         <li>
-            
-            <p>
-               								       
-               <strong>Where content is a result of a process or task - Search engine results.</strong>
-               							     
-            </p>
-            
-            <p>A search engine provides the search results based on user input. There is no other
-               way to locate the search results except to perform the search process itself.
-            </p>
-            
-         </li>
-         
-      </ul>
+               the transfer.</dd>
+         <dt>Where content is a result of a process or task - Search engine results</dt>
+         <dd>A search engine provides the search results based on user input. There is no other
+               way to locate the search results except to perform the search process itself.</dd>
+      </dl>
       
    </section>
    
@@ -136,7 +99,7 @@ <h2>Techniques for Multiple Ways</h2>
          <h3>Sufficient Techniques for Multiple Ways</h3>
          
          
-         <ol>
+         <ul>
             
             <li>
                
@@ -146,43 +109,37 @@ <h3>Sufficient Techniques for Multiple Ways</h3>
                   
                   <li>
                      											             
-                     <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G125" class="general">Providing links to navigate to related Web pages</a>
+                     <a href="../Techniques/general/G125" class="general">Providing links to navigate to related Web pages</a>
                      										           
                   </li>
                   
                   <li>
                      											             
-                     <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G64" class="general">Providing a Table of Contents</a>
+                     <a href="../Techniques/general/G64" class="general">Providing a Table of Contents</a>
                      										           
                   </li>
                   
-                  <li>
-                     
-                     <a href="https://www.w3.org/WAI/WCAG21/Techniques/pdf/PDF2" class="pdf"></a>
-                     
-                  </li>
-                  
                   <li>
                      											             
-                     <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G63" class="general">Providing a Site Map</a>
+                     <a href="../Techniques/general/G63" class="general">Providing a Site Map</a>
                      										           
                   </li>
                   
                   <li>
                      											             
-                     <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G161" class="general">Providing a search function to help users find content</a>
+                     <a href="../Techniques/general/G161" class="general">Providing a search function to help users find content</a>
                      										           
                   </li>
                   
                   <li>
                      											             
-                     <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G126" class="general">Providing a list of links to all other Web pages</a>
+                     <a href="../Techniques/general/G126" class="general">Providing a list of links to all other Web pages</a>
                      										           
                   </li>
                   
                   <li>
                      											             
-                     <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G185" class="general">Linking to all of the pages on the site from the home page</a>
+                     <a href="../Techniques/general/G185" class="general">Linking to all of the pages on the site from the home page</a>
                      										           
                   </li>
                   
@@ -190,7 +147,7 @@ <h3>Sufficient Techniques for Multiple Ways</h3>
                
             </li>
             
-         </ol>
+         </ul>
          
       </section>
       
@@ -200,12 +157,12 @@ <h3>Additional Techniques (Advisory) for Multiple Ways</h3>
          
          <ul>
             
-            <li>
-               									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/html/H59" class="html">Using the link element and navigation tools</a>
-               								       
-            </li>
-            
+         	<li>
+         		
+         		<a href="../Techniques/pdf/PDF2" class="pdf"></a>
+         		
+         	</li>
+         	
          </ul>
          
       </section>
diff --git a/understanding/20/name-role-value.html b/understanding/20/name-role-value.html
index 70a9fcc114..94cf35f6fd 100644
--- a/understanding/20/name-role-value.html
+++ b/understanding/20/name-role-value.html
@@ -1,421 +1,217 @@
 <!DOCTYPE html>
 <html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
 <head>
-   <meta charset="UTF-8"></meta>
+   <meta charset="UTF-8"/>
    <title>Understanding Name, Role, Value</title>
-   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link>
+   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/>
 </head>
 <body>
    <h1>Understanding Name, Role, Value</h1>
-   
-   
+   <section id="brief">
+		<h2>In brief</h2>
+		<dl>
+         <dt>Goal</dt><dd>People using assistive technology understand all components.</dd>
+         <dt>What to do</dt><dd>Give components correct names, roles, states, and values.</dd>
+         <dt>Why it's important</dt><dd>Assistive technology only works well when code is done properly.</dd>
+      </dl>
+   </section>
    <section id="intent">
       <h2>Intent of Name, Role, Value</h2>
-      
-      
       <p>The intent of this Success Criterion is to ensure that Assistive Technologies (AT)
-         can gather information about, activate(or set) and keep up to date on the status of
+         can gather appropriate information about, activate (or set) and keep up to date on the status of
          user interface controls in the content.
       </p>
-      
       <p>When standard controls from accessible technologies are used, this process is straightforward.
          If the user interface elements are used according to specification the conditions
-         of this provision will be met. (See examples  of Success Criterion 4.1.2 below)
+         of this provision will be met. (See examples of Success Criterion 4.1.2 below)
       </p>
-      
       <p>If custom controls are created, however, or interface elements are programmed (in
          code or script) to have a different role and/or function than usual, then additional
-         measures need to be taken to ensure that the controls provide important information
+         measures need to be taken to ensure that the controls provide important and appropriate information
          to assistive technologies and allow themselves to be controlled by assistive technologies.
       </p>
-      
+      <p>What roles and states are appropriate to convey to assistive technology will depend
+         on what the control represents. Specifics about such information are defined by other
+         specifications, such as <a href="https://www.w3.org/TR/wai-aria/">WAI-ARIA</a>, or the
+         relevant platform standards. Another factor to consider is whether there is sufficient
+         <a>accessibility support</a> with assistive technologies to convey the information as specified.
+      </p>
       <p>A particularly important state of a user interface control is whether or not it has
          focus. The focus state of a control can be programmatically determined, and notifications
          about change of focus are sent to user agents and assistive technology. Other examples
-         of user interface control state are whether or not a checkbox or radio button has
-         been selected, or whether or not a collapsible tree or list node is expanded or collapsed.
+         of user interface control states are whether or not a checkbox or radio button has
+         been selected, or whether a collapsible tree view or accordion is expanded or collapsed.
       </p>
-      
+
       <div class="note">
-         
          <p>Success Criterion 4.1.2 requires a programmatically determinable name for all user
-            interface components. Names may be visible or invisible. Occasionally, the name must
-            be visible, in which case it is identified as a label. Refer to the definition of
+            interface components. Names may be visible or invisible. Occasionally, the name needs
+            to be visible, in which case it is identified as a label. Refer to the definition of
             name and label in the glossary for more information.
          </p>
-         
       </div>
-      
-      
    </section>
    <section id="benefits">
       <h2>Benefits of Name, Role, Value</h2>
-      
-      
       <ul>
-         
          <li>Providing role, state, and value information on all user interface components enables
             compatibility with assistive technology, such as screen readers, screen magnifiers,
             and speech recognition software, used by people with disabilities.
          </li>
-         
       </ul>
-      
    </section>
-   
    <section id="examples">
       <h2>Examples of Name, Role, Value</h2>
-      
-      
-      <ul>
-         
-         <li>
-            
-            <p>
-               								       
-               <strong>Accessible APIs </strong>
-               							     
-            </p>
-            
-            <p>A Java applet uses the accessibility API defined by the language. </p>
-            
-         </li>
-         
-      </ul>
-      
+      <dl>
+         <dt>Accessible APIs</dt>
+         <dd>A Java applet uses the accessibility API defined by the language.</dd>
+      </dl>
    </section>
-   
    <section id="resources">
       <h2>Resources for Name, Role, Value</h2>
-      
-      
       <ul>
-         
          <li>
-            								       
             <a href="https://www.w3.org/WAI/PF/roadmap/">Dynamic Accessible Web Content Roadmap</a>
-            							     
          </li>
-         
          <li>
-            								       
             <a href="https://www.w3.org/WAI/PF/GUI/">Role Taxonomy for Accessible Adaptable Applications</a>
-            							     
          </li>
-         
          <li>
-            								       
-            <a href="https://www.w3.org/WAI/PF/adaptable/">States and Adaptable Properties Module</a>
-            							     
+            <a href="https://www.w3.org/TR/wai-aria/">Web Accessibility Initiative - Accessible Rich Internet Applications (ARIA)</a>
          </li>
-         
-         <li>
-            								       
-            <a href="https://msdn.microsoft.com/en-us/library/ms697707.aspx">Microsoft Active Accessibility, Version 2.0</a>
-            							     
-         </li>
-         
       </ul>
-      
    </section>
-   
    <section id="techniques">
       <h2>Techniques for Name, Role, Value</h2>
-      
-      
       <section id="sufficient">
          <h3>Sufficient Techniques for Name, Role, Value</h3>
-         
-         
          <section class="situation" id="name-role-value-situation-0">
-            
             <h4>Situation A: If using a standard user interface component in a markup language (e.g.,
                HTML):
             </h4>
-            
-            <ol>
-               
+            <ul>
                <li>
-                  
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA14" class="aria"></a>
-                  
+                  <a href="../Techniques/aria/ARIA14" class="aria"></a>
                </li>
-               
                <li>
-                  
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA16" class="aria"></a>
-                  
+                  <a href="../Techniques/aria/ARIA16" class="aria"></a>
                </li>
-               
                <li>
-                  
-                  <p> 
-                     
-                     <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G108" class="general">Using markup features to expose the name and role, allow user-settable properties
-                        to be directly set, and provide notification of changes
-                     </a> using technology-specific techniques below:
+                  <p>
+                     <a href="../Techniques/general/G108" class="general"></a> using technology-specific techniques below:
                   </p>
-                  
                   <ul>
-                     
                      <li>
-                        												               
-                        <a href="https://www.w3.org/WAI/WCAG21/Techniques/html/H91" class="html">Using HTML form controls and links</a>
-                        											             
+                        <a href="../Techniques/html/H91" class="html"></a>
                      </li>
-                     
                      <li>
-                        												               
-                        <a href="https://www.w3.org/WAI/WCAG21/Techniques/html/H44" class="html">Using label elements to associate text labels with form controls</a>
-                        											             
+                        <a href="../Techniques/html/H44" class="html"></a>
                      </li>
-                     
                      <li>
-                        												               
-                        <a href="https://www.w3.org/WAI/WCAG21/Techniques/html/H64" class="html">Using the title attribute of the frame element</a>
-                        											             
+                        <a href="../Techniques/html/H64" class="html"></a>
                      </li>
-                     
                      <li>
-                        												               
-                        <a href="https://www.w3.org/WAI/WCAG21/Techniques/html/H65" class="html">Using the title attribute to identify form controls when the label element cannot
-                           be used
-                        </a>
-                        											             
+                        <a href="../Techniques/html/H65" class="html"></a>
                      </li>
-                     
                      <li>
-                        												               
-                        <a href="https://www.w3.org/WAI/WCAG21/Techniques/html/H88" class="html">Using (X)HTML according to spec</a>
-                        											             
+                        <a href="../Techniques/html/H88" class="html"></a>
                      </li>
-                     
                   </ul>
-                  
                </li>
-               
-            </ol>
-            
+            </ul>
          </section>
-         
          <section class="situation" id="name-role-value-situation-1">
-            
             <h4>Situation B: If using script or code to re-purpose a standard user interface component
                in a markup language:
             </h4>
-            
-            <ol>
-               
+            <ul>
                <li>
-                  
                   <p>Exposing the names and roles, allowing user-settable properties to be directly set,
                      and providing notification of changes using one of the following techniques:
                   </p>
-                  
                   <ul>
-                     
                      <li>
-                        
-                        <a href="https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA16" class="aria"></a>
-                        
+                        <a href="../Techniques/aria/ARIA16" class="aria"></a>
                      </li>
-                     
                   </ul>
-                  
                </li>
-               
-            </ol>
-            
+            </ul>
          </section>
-         
          <section class="situation" id="name-role-value-situation-2">
-            
             <h4>Situation C: If using a standard user interface component in a programming technology:</h4>
-            
-            <ol>
-               
+            <ul>
                <li>
-                  
                   <p>
-                     										           
-                     <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G135" class="general">Using the accessibility API features of a technology to expose the names and roles,
-                        allow user-settable properties to be directly set, and provide notification of changes
-                     </a> using technology-specific techniques below:
-                     									
+                     <a href="../Techniques/general/G135" class="general"></a> using technology-specific techniques below:
                   </p>
-                  
                   <ul>
-                                        
-                     <li>
-                        
-                        <a href="https://www.w3.org/WAI/WCAG21/Techniques/pdf/PDF10" class="pdf"></a>
-                        
-                     </li>
-                     
-                     <li>
-                        
-                        <a href="https://www.w3.org/WAI/WCAG21/Techniques/pdf/PDF12" class="pdf"></a>
-                        
-                     </li>
-                     
                      <li>
-                        
-                        <a href="https://www.w3.org/WAI/WCAG21/Techniques/silverlight/SL26" class="silverlight"></a>
-                        
+                        <a href="../Techniques/pdf/PDF10" class="pdf"></a>
                      </li>
-                     
                      <li>
-                        
-                        <a href="https://www.w3.org/WAI/WCAG21/Techniques/silverlight/SL32" class="silverlight"></a>
-                        
+                        <a href="../Techniques/pdf/PDF12" class="pdf"></a>
                      </li>
-                     
                   </ul>
-                  
                </li>
-               
-            </ol>
-            
+            </ul>
          </section>
-         
          <section class="situation" id="name-role-value-situation-3">
-            
             <h4>Situation D: If creating your own user interface component in a programming language:</h4>
-            
-            <ol>
-               
+            <ul>
                <li>
-                  
                   <p>
-                     										           
-                     <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G10" class="general">Creating components using a technology that supports the accessibility API features
-                        of the platforms on which the user agents will be run to expose the names and roles,
-                        allow user-settable properties to be directly set, and provide notification of changes
-                     </a> using technology-specific techniques below:
-                     									
+                     <a href="../Techniques/general/G10" class="general"></a> using technology-specific techniques below:
                   </p>
-                  
                   <ul>
-                     
                      <li>
-                        
-                        <a href="https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA4" class="aria"></a>
-                        
+                        <a href="../Techniques/aria/ARIA4" class="aria"></a>
                      </li>
-                     
                      <li>
-                        
-                        <a href="https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA5" class="aria"></a>
-                        
+                        <a href="../Techniques/aria/ARIA5" class="aria"></a>
                      </li>
-                     
                      <li>
-                        
-                        <a href="https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA16" class="aria"></a>
-                        
+                        <a href="../Techniques/aria/ARIA16" class="aria"></a>
                      </li>
-                     
-                     <li>
-                        
-                        <a href="https://www.w3.org/WAI/WCAG21/Techniques/silverlight/SL6" class="silverlight"></a>
-                        
-                     </li>
-                     
-                     <li>
-                        
-                        <a href="https://www.w3.org/WAI/WCAG21/Techniques/silverlight/SL18" class="silverlight"></a>
-                        
-                     </li>
-                     
-                     <li>
-                        
-                        <a href="https://www.w3.org/WAI/WCAG21/Techniques/silverlight/SL20" class="silverlight"></a>
-                        
-                     </li>
-                     
-                     <li>
-                        
-                        <a href="https://www.w3.org/WAI/WCAG21/Techniques/silverlight/SL30" class="silverlight"></a>
-                        
-                     </li>
-                     
                   </ul>
-                  
                </li>
-               
-            </ol>
-            
+            </ul>
          </section>
-         
       </section>
-      
       <section id="advisory">
          <h3>Additional Techniques (Advisory) for Name, Role, Value</h3>
-         
       </section>
-      
       <section id="failure">
          <h3>Failures for Name, Role, Value</h3>
-         
-         
          <ul>
-            
             <li>
-								         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/failures/F59" class="failure">Failure due to using script to make div or span a user interface control in HTML</a>
-               
+               <a href="../Techniques/failures/F59" class="failure"></a>
+            </li>
+            <li>
+               <a href="../Techniques/failures/F15" class="failure"></a>
+            </li>
+            <li>
+               <a href="../Techniques/failures/F20" class="failure"></a>
             </li>
-            
             <li>
-               									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/failures/F15" class="failure">Failure due to implementing custom controls that do not use an accessibility API</a>
-               								       
+               <a href="../Techniques/failures/F42" class="failure"></a>
             </li>
-            
             <li>
-               									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/failures/F20" class="failure">Failure due to not updating text alternatives when changes to non-text content occur</a>
-               								       
+               <a href="../Techniques/failures/F68" class="failure"></a>
             </li>
-            
             <li>
-               									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/failures/F68" class="failure">Failure of 1.3.1 and 4.1.2 due to the association of label and user interface controls
-                  not being programmatically determinable
-               </a>
-               								       
+               <a href="../Techniques/failures/F79" class="failure"></a>
             </li>
-            
             <li>
-               									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/failures/F79" class="failure">Failure of Success Criterion 4.1.2 due to the focus state of a user interface component
-                  not being programmatically determinable or no notification of change of focus state
-                  available
-               </a>
-               								       
+               <a href="../Techniques/failures/F86" class="failure"></a>
             </li>
-            
             <li>
-               									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/failures/F86" class="failure">Failure of Success Criterion 4.1.2 due to not providing names for each part of a multi-part
-                  form field, such as a US telephone number
-               </a>
-               								       
+               <a href="../Techniques/failures/F89" class="failure"></a>
             </li>
-            
             <li>
-               									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/failures/F89" class="failure">Failure of 2.4.4 due to using null alt on an image where the image is the only content
-                  in a link
-               </a>
-               								       
+               <a href="../Techniques/failures/F111" class="failure"></a>
             </li>
-            
          </ul>
-         
       </section>
-      
    </section>
-   
 </body>
 </html>
diff --git a/understanding/20/navigable.html b/understanding/20/navigable.html
index 4f62d10488..d53272a485 100644
--- a/understanding/20/navigable.html
+++ b/understanding/20/navigable.html
@@ -3,7 +3,7 @@
 <head>
    <meta charset="UTF-8"></meta>
    <title>Understanding Navigable</title>
-   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link>
+   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/>
 </head>
 <body>
    <h1>Understanding Navigable</h1>
@@ -28,9 +28,7 @@ <h2>Intent of Navigable</h2>
          
       </p>
       
-      <p>As described in The 
-         <a href="http://www.motive.co.nz/glossary/navigation.php">Motive Web Design Glossary</a>, navigation has two main functions:
-      </p>
+      <p>Navigation has two main functions:</p>
       
       <ul>
          
diff --git a/understanding/20/no-keyboard-trap.html b/understanding/20/no-keyboard-trap.html
index bad290ef95..4094612d02 100644
--- a/understanding/20/no-keyboard-trap.html
+++ b/understanding/20/no-keyboard-trap.html
@@ -3,11 +3,20 @@
 <head>
    <meta charset="UTF-8"></meta>
    <title>Understanding No Keyboard Trap</title>
-   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link>
+   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/>
 </head>
 <body>
    <h1>Understanding No Keyboard Trap</h1>
    
+   <section id="brief">
+		<h2>In brief</h2>
+		<dl>
+         <dt>Goal</dt><dd>Keyboard users don't get stuck.</dd>
+         <dt>What to do</dt><dd>Ensure users always know how to navigate away from components.</dd>
+         <dt>Why it's important</dt><dd>People who rely on the keyboard often have no other means to navigate.</dd> 
+      </dl>
+
+   </section>
    
    <section id="intent">
       <h2>Intent of No Keyboard Trap</h2>
@@ -43,57 +52,22 @@ <h2>Benefits of No Keyboard Trap</h2>
    <section id="examples">
       <h2>Examples of No Keyboard Trap</h2>
       
-      
-      <ul>
-         
-         <li>
-            
-            <p>
-               								       
-               <strong>A calendar widget</strong>
-               							     
-            </p>
-            
-            <p>A calendar widget allows users to add, remove or update items in their calendar using
+      <dl>
+         <dt>A calendar widget</dt>
+         <dd>A calendar widget allows users to add, remove or update items in their calendar using
                the keyboard. The controls in the widget are part of the tab order within the Web
                page, allowing users to tab through the controls in the widget as well as to any links
-               or controls that follow.
-            </p>
-            
-         </li>
-         
-         <li>
-            
-            <p>
-               								       
-               <strong>A puzzle applet</strong>
-               							     
-            </p>
-            
-            <p>Once a user tabs into an applet, further tabs and other keystrokes are handled by
+               or controls that follow.</dd>
+         <dt>A puzzle applet</dt>
+         <dd>Once a user tabs into an applet, further tabs and other keystrokes are handled by
                the applet. Instructions describing the keystroke used to exit the applet are provided
-               prior to the applet as well as within the applet itself.
-            </p>
-            
-         </li>
-         
-         <li>
-            
-            <p>
-               								       
-               <strong>A modal dialog box</strong>
-               							     
-            </p>
-            
-            <p>A Web application brings up a dialog box. At the bottom of the dialog are two buttons,
+               prior to the applet as well as within the applet itself.</dd>
+         <dt>A modal dialog box</dt>
+         <dd>A Web application brings up a dialog box. At the bottom of the dialog are two buttons,
                Cancel and OK. When the dialog has been opened, focus is trapped within the dialog;
                tabbing from the last control in the dialog takes focus to the first control in the
-               dialog. The dialog is dismissed by activating the Cancel button or the OK button.
-            </p>
-            
-         </li>
-         
-      </ul>
+               dialog. The dialog is dismissed by activating the Cancel button or the OK button.</dd>
+      </dl>
       
    </section>
    
@@ -111,15 +85,15 @@ <h2>Techniques for No Keyboard Trap</h2>
          <h3>Sufficient Techniques for No Keyboard Trap</h3>
          
          
-         <ol>
+         <ul>
             
             <li>
                									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G21" class="general">Ensuring that users are not trapped in content</a>
+               <a href="../Techniques/general/G21" class="general">Ensuring that users are not trapped in content</a>
                								       
             </li>
             
-         </ol>
+         </ul>
          
       </section>
       
@@ -137,7 +111,7 @@ <h3>Failures for No Keyboard Trap</h3>
             
             <li>
                									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/failures/F10" class="failure">Failure of Success Criterion 2.1.2 and Conformance Requirement 5 due to combining
+               <a href="../Techniques/failures/F10" class="failure">Failure of Success Criterion 2.1.2 and Conformance Requirement 5 due to combining
                   multiple content formats in a way that traps users inside one format type
                </a>
                								       
diff --git a/understanding/20/no-timing.html b/understanding/20/no-timing.html
index becc2a9d2d..3b39e95663 100644
--- a/understanding/20/no-timing.html
+++ b/understanding/20/no-timing.html
@@ -3,12 +3,22 @@
 <head>
    <meta charset="UTF-8"></meta>
    <title>Understanding No Timing</title>
-   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link>
+   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/>
 </head>
 <body>
    <h1>Understanding No Timing</h1>
    
    
+   <section id="brief">
+      <h2>In brief</h2>
+      <dl>
+         <dt>Goal</dt><dd>Users do not face time limits.</dd>
+         <dt>What to do</dt><dd>Do not use time limits, except for video and live events.</dd>
+         <dt>Why it's important</dt><dd>People with disabilities often need more time to complete actions.</dd> 
+      </dl>
+
+   </section>
+   
    <section id="intent">
       <h2>Intent of No Timing</h2>
       
@@ -56,36 +66,13 @@ <h2>Benefits of No Timing</h2>
    <section id="examples">
       <h2>Examples of No Timing</h2>
       
-      
-      <ul>
-         
-         <li>
-            
-            <p>
-               								       
-               <strong>A test is designed so that time to complete the test does not affect the scoring</strong>
-               							     
-            </p>
-            
-            <p>Rather than calibrating an on-line test using a time limit, the test is calibrated
-               based on scores when users have no time limits.
-            </p>
-            
-         </li>
-         
-         <li>
-            
-            <p>
-               								       
-               <strong>A game is designed so that users take turns rather than competing in real-time</strong>
-               							     
-            </p>
-            
-            <p>One party can pause the game without invalidating the competitive aspect of it.</p>
-            
-         </li>
-         
-      </ul>
+      <dl>
+         <dt>A test is designed so that time to complete the test does not affect the scoring</dt>
+         <dd>Rather than calibrating an on-line test using a time limit, the test is calibrated
+               based on scores when users have no time limits.</dd>
+         <dt>A game is designed so that users take turns rather than competing in real-time</dt>
+         <dd>One party can pause the game without invalidating the competitive aspect of it.</dd>
+      </dl>
       
    </section>
    
@@ -103,15 +90,15 @@ <h2>Techniques for No Timing</h2>
          <h3>Sufficient Techniques for No Timing</h3>
          
          
-         <ol>
+         <ul>
             
             <li>
                									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G5" class="general">Allowing users to complete an activity without any time limit</a>
+               <a href="../Techniques/general/G5" class="general">Allowing users to complete an activity without any time limit</a>
                								       
             </li>
             
-         </ol>
+         </ul>
          
       </section>
       
diff --git a/understanding/20/non-text-content.html b/understanding/20/non-text-content.html
index db88f2edfc..d59a583f0e 100644
--- a/understanding/20/non-text-content.html
+++ b/understanding/20/non-text-content.html
@@ -3,11 +3,22 @@
 <head>
    <meta charset="UTF-8"></meta>
    <title>Understanding Non-text Content</title>
-   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link>
+   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/>
 </head>
 <body>
    <h1>Understanding Non-text Content</h1>
    
+   <section id="brief">
+		<h2>In brief</h2>
+		<dl>
+
+         <dt>Goal</dt><dd>Non-text information is available to more people.</dd>
+         <dt>What to do</dt><dd>Create a text alternative for visual and auditory content.</dd>
+         <dt>Why it's important</dt><dd>People who can’t fully see or hear content can understand it.</dd> 
+      </dl>
+
+   </section>
+
    
    <section id="intent">
       <h2>Intent of Non-text Content</h2>
@@ -18,9 +29,9 @@ <h2>Intent of Non-text Content</h2>
          way for making information accessible because they can be rendered through any sensory
          modality (for example, visual, auditory or tactile) to match the needs of the user.
          Providing text alternatives allows the information to be rendered in a variety of
-         ways by a variety of user agents. For example, a person who cannot see a picture can
-         have the text alternative read aloud using synthesized speech. A person who cannot
-         hear an audio file can have the text alternative displayed so that he or she can read
+         ways by a variety of user agents. For example, people who cannot see a picture can
+         have the text alternative read aloud using synthesized speech. People who cannot
+         hear an audio file can have the text alternative displayed so that they can read
          it. In the future, text alternatives will also allow information to be more easily
          translated into sign language or into a simpler form of the same language.
       </p>
@@ -228,105 +239,34 @@ <h2>Benefits of Non-text Content</h2>
    <section id="examples">
       <h2>Examples of Non-text Content</h2>
       
-      
-      <ol>
-         
-         <li>
-            
-            <p>
-               								       
-               <strong>A data chart</strong>
-               							     
-            </p>
-            
-            <p>A bar chart compares how many widgets were sold in June, July, and August. The short
+      <dl>
+         <dt>A data chart</dt>
+         <dd>A bar chart compares how many widgets were sold in June, July, and August. The short
                label says, "Figure one - Sales in June, July and August." The longer description
                identifies the type of chart, provides a high-level summary of the data, trends and
                implications comparable to those available from the chart. Where possible and practical,
-               the actual data is provided in a table. 
-               
-               
-            </p>
-            
-         </li>
-         
-         <li>
-            
-            <p>
-               								       
-               <strong>An audio recording of a speech</strong>
-               							     
-            </p>
-            
-            <p>The link to an audio clip says, "Chairman's speech to the assembly." A link to a text
-               transcript is provided immediately after the link to the audio clip.
-               
-            </p>
-            
-         </li>
-         
-         <li>
-            
-            <p>
-               								       
-               <strong>An animation that illustrates how a car engine works</strong>
-               							     
-            </p>
-            
-            <p>An animation shows how a car engine works. There is no audio and the animation is
+               the actual data is provided in a table.</dd>
+         <dt>An audio recording of a speech</dt>
+         <dd>The link to an audio clip says, "Chairman's speech to the assembly." A link to a text
+               transcript is provided immediately after the link to the audio clip.</dd>
+         <dt>An animation that illustrates how a car engine works</dt>
+         <dd>An animation shows how a car engine works. There is no audio and the animation is
                part of a tutorial that describes how an engine works. Since the text of the tutorial
                already provides a full explanation, the image is an alternative for text and the
                text alternative includes only a brief description of the animation and refers to
-               the tutorial text for more information. 
-               
-               
-            </p>
-            
-         </li>
-         
-         <li>
-            
-            <p>
-               								       
-               <strong>A traffic Web camera</strong>
-               							     
-            </p>
-            
-            <p>A Web site allows users to select from a variety of Web cameras positioned throughout
+               the tutorial text for more information.</dd>
+         <dt>A traffic Web camera</dt>
+         <dd>A Web site allows users to select from a variety of Web cameras positioned throughout
                a major city. After a camera is selected, the image updates every two minutes. A short
                text alternative identifies the Web camera as "traffic Web camera." The site also
                provides a table of travel times for each of the routes covered by the Web cameras.
-               The table is also updated every two minutes.
-               
-            </p>
-            
-         </li>
-         
-         <li>
-            
-            <p>
-               								       
-               <strong>A photograph of an historic event in a news story</strong>
-               							     
-            </p>
-            
-            <p>A photograph of two world leaders shaking hands accompanies a news story about an
+               The table is also updated every two minutes.</dd>
+         <dt>A photograph of an historic event in a news story</dt>
+         <dd>A photograph of two world leaders shaking hands accompanies a news story about an
                international summit meeting. The text alternative says, "President X of Country X
-               shakes hands with Prime Minister Y of country Y."
-               
-            </p>
-            
-         </li>
-         
-         <li>
-            
-            <p>
-               								       
-               <strong>A photograph of a historic event in content discussing diplomatic relationships</strong>
-               							     
-            </p>
-            
-            <p> The same image is used in a different context intended to explain nuances in diplomatic
+               shakes hands with Prime Minister Y of country Y."</dd>
+         <dt>A photograph of a historic event in content discussing diplomatic relationships</dt>
+         <dd>The same image is used in a different context intended to explain nuances in diplomatic
                encounters. The image of the president shaking hands with the prime minister appears
                on a Web site discussing intricate diplomatic relationships. The first text alternative
                reads, "President X of country X shakes hands with Prime Minister Y of country Y on
@@ -334,112 +274,34 @@ <h2>Examples of Non-text Content</h2>
                are standing as well as the expressions on the leaders' faces, and identifies the
                other people in the room. The additional description might be included on the same
                page as the photograph or in a separate file associated with the image through a link
-               or other standard programmatic mechanism.
-               
-            </p>
-            
-         </li>
-         
-         <li>
-            
-            <p>
-               								       
-               <strong>An audio recording of a press conference </strong>
-               							     
-            </p>
-            
-            <p>A Web page includes a link to an audio recording of a press conference. The link text
+               or other standard programmatic mechanism.</dd>
+         <dt>An audio recording of a press conference </dt>
+         <dd>A Web page includes a link to an audio recording of a press conference. The link text
                identifies the audio recording. The page also links to a text transcript of the press
                conference. The transcript includes a verbatim record of everything the speakers say.
                It identifies who is speaking as well as noting other significant sounds that are
                part of the recording, such as applause, laughter, questions from the audience, and
-               so on.
-               
-            </p>
-            
-         </li>
-         
-         <li>
-            
-            <p>
-               								       
-               <strong>
-                  An e-learning application
-                  
-               </strong>
-               							     
-            </p>
-            
-            <p>
-               An e-learning application uses sound effects to indicate whether or not the answers
+               so on.</dd>
+         <dt>An e-learning application</dt>
+         <dd>An e-learning application uses sound effects to indicate whether or not the answers
                are correct. The chime sound indicates that the answer is correct and the beep sound
                indicates that the answer is incorrect. A text description is also included so that
                people who can't hear or understand the sound understand whether the answer is correct
-               or incorrect. 
-               
-               
-            </p>
-            
-         </li>
-         
-         <li>
-            
-            <p>
-               								       
-               <strong>
-                  A linked thumbnail image
-                  
-               </strong>
-               							     
-            </p>
-            
-            <p>A thumbnail image of the front page of a newspaper links to the home page of the "Smallville
-               Times". The text alternative says "Smallville Times".
-               
-            </p>
-            
-         </li>
-         
-         <li>
-            
-            <p>
-               								       
-               <strong>
-                  The same image used on different sites
-                  
-               </strong>
-               							     
-            </p>
-            
-            <p>Different alternatives for an image of the world: An image of the world that is used
+               or incorrect.</dd>
+         <dt>A linked thumbnail image</dt>
+         <dd>A thumbnail image of the front page of a newspaper links to the home page of the "Smallville
+               Times". The text alternative says "Smallville Times".</dd>
+         <dt>The same image used on different sites</dt>
+         <dd>Different alternatives for an image of the world: An image of the world that is used
                on a travel site as a link to the International Travel section has the text alternative
                "International Travel". The same image is used as a link on a university Web site
-               with the text alternative "International Campuses".
-               
-            </p>
-            
-         </li>
-         
-         <li>
-            
-            <p>
-               								       
-               <strong>
-                  An image map
-                  
-               </strong>
-               							     
-            </p>
-            
-            <p>An image of a building floor plan is interactive, allowing the user to select a
+               with the text alternative "International Campuses".</dd>
+         <dt>An image map</dt>
+         <dd>An image of a building floor plan is interactive, allowing the user to select a
                particular room and navigate to a page containing information about that room.
                The short text alternative describes the image and its interactive purpose:
-               "Building floor plan. Select a room for more information."
-            </p>
-            
-         </li>
-         
-      </ol>
+               "Building floor plan. Select a room for more information."</dd>
+      </dl>
       
    </section>
    
@@ -503,11 +365,11 @@ <h4>Situation A: If a short description can serve the same purpose and present t
                information as the non-text content:
             </h4>
             
-            <ol>
+            <ul>
                
                <li>
                   
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G94" class="general">Providing short text alternative for non-text content that serves the same purpose
+                  <a href="../Techniques/general/G94" class="general">Providing short text alternative for non-text content that serves the same purpose
                      and presents the same information as the non-text content
                   </a> using one of the following 
                   <strong>
@@ -517,7 +379,7 @@ <h4>Situation A: If a short description can serve the same purpose and present t
                   </strong>:
                </li>
                
-            </ol>
+            </ul>
             
             <p id="text-equiv-all-situation-a-shorttext">
                
@@ -528,61 +390,49 @@ <h4>Situation A: If a short description can serve the same purpose and present t
                
                <li>
                   
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA6" class="aria"></a>
+                  <a href="../Techniques/aria/ARIA6" class="aria"></a>
                   
                </li>
                
                <li>
                   
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA10" class="aria"></a>
+                  <a href="../Techniques/aria/ARIA10" class="aria"></a>
                   
                </li>
                
                <li>
                   
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G196" class="general"></a>
+                  <a href="../Techniques/general/G196" class="general"></a>
                   
                </li>
                
                <li>
                   
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/html/H2" class="html"></a>
+                  <a href="../Techniques/html/H2" class="html"></a>
                   
                </li>
                
                <li>
                   
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/html/H35" class="html"></a>
+                  <a href="../Techniques/html/H37" class="html"></a>
                   
                </li>
                
                <li>
                   
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/html/H37" class="html"></a>
+                  <a href="../Techniques/html/H53" class="html"></a>
                   
                </li>
                
                <li>
                   
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/html/H53" class="html"></a>
+                  <a href="../Techniques/html/H86" class="html"></a>
                   
                </li>
                
                <li>
                   
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/html/H86" class="html"></a>
-                  
-               </li>
-               
-               <li>
-                  
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/pdf/PDF1" class="pdf"></a>
-                  
-               </li>
-               
-               <li>
-                  
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/silverlight/SL5" class="silverlight"></a>
+                  <a href="../Techniques/pdf/PDF1" class="pdf"></a>
                   
                </li>
                
@@ -597,11 +447,11 @@ <h4>Situation B: If a short description can
                a chart or diagram):
             </h4>
             
-            <ol>
+            <ul>
                
                <li> 
                   
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G95" class="general">Providing short text alternatives that provide a brief description of the non-text
+                  <a href="../Techniques/general/G95" class="general">Providing short text alternatives that provide a brief description of the non-text
                      content
                   </a> using one of the following 
                   <strong>
@@ -618,7 +468,7 @@ <h4>Situation B: If a short description can
                   </strong>:
                </li>
                
-            </ol>
+            </ul>
             
             <p id="text-equiv-all-situation-b-shorttext">
                
@@ -629,61 +479,50 @@ <h4>Situation B: If a short description can
                
                <li>
                   
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA6" class="aria"></a>
-                  
-               </li>
-               
-               <li>
-                  
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA10" class="aria"></a>
-                  
-               </li>
-               
-               <li>
-                  
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G196" class="general"></a>
+                  <a href="../Techniques/aria/ARIA6" class="aria"></a>
                   
                </li>
                
                <li>
                   
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/html/H2" class="html"></a>
+                  <a href="../Techniques/aria/ARIA10" class="aria"></a>
                   
                </li>
                
                <li>
                   
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/html/H35" class="html"></a>
+                  <a href="../Techniques/general/G196" class="general"></a>
                   
                </li>
                
                <li>
                   
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/html/H37" class="html"></a>
+                  <a href="../Techniques/html/H2" class="html"></a>
                   
                </li>
                
-               <li>
+               <li>                  
                   
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/html/H53" class="html"></a>
+                  <a href="../Techniques/html/H37" class="html"></a>
+
                   
                </li>
                
                <li>
                   
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/html/H86" class="html"></a>
+                  <a href="../Techniques/html/H53" class="html"></a>
                   
                </li>
                
                <li>
                   
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/pdf/PDF1" class="pdf"></a>
+                  <a href="../Techniques/html/H86" class="html"></a>
                   
                </li>
                
                <li>
                   
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/silverlight/SL5" class="silverlight"></a>
+                  <a href="../Techniques/pdf/PDF1" class="pdf"></a>
                   
                </li>
                
@@ -698,43 +537,31 @@ <h4>Situation B: If a short description can
                
                <li>
                   
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA15" class="aria"></a>
-                  
-               </li>
-               
-               <li>
-                  
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G73" class="general"></a>
+                  <a href="../Techniques/aria/ARIA15" class="aria"></a>
                   
                </li>
                
                <li>
                   
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G74" class="general"></a>
+                  <a href="../Techniques/general/G73" class="general"></a>
                   
                </li>
                
                <li>
                   
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G92" class="general"></a>
+                  <a href="../Techniques/general/G74" class="general"></a>
                   
                </li>
                
                <li>
                   
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/html/H45" class="html"></a>
+                  <a href="../Techniques/general/G92" class="general"></a>
                   
                </li>
                
                <li>
                   
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/html/H53" class="html"></a>
-                  
-               </li>
-               
-               <li>
-                  
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/silverlight/SL8" class="silverlight"></a>
+                  <a href="../Techniques/html/H53" class="html"></a>
                   
                </li>
                
@@ -746,11 +573,11 @@ <h4>Situation B: If a short description can
             
             <h4>Situation C: If non-text content is a control or accepts user input:</h4>
             
-            <ol>
+            <ul>
                
                <li> 
                   
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G82" class="general">Providing a text alternative that identifies the purpose of the non-text content</a> using one of the following 
+                  <a href="../Techniques/general/G82" class="general">Providing a text alternative that identifies the purpose of the non-text content</a> using one of the following 
                   <strong>
                      
                      <a href="#text-equiv-all-situation-c-controls">Text alternative techniques for controls and input for Situation C</a>
@@ -758,7 +585,7 @@ <h4>Situation C: If non-text content is a control or accepts user input:</h4>
                   </strong>:
                </li>
                
-            </ol>
+            </ul>
             
             <p id="text-equiv-all-situation-c-controls">
                
@@ -769,61 +596,43 @@ <h4>Situation C: If non-text content is a control or accepts user input:</h4>
                
                <li>
                   
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA6" class="aria"></a>
+                  <a href="../Techniques/aria/ARIA6" class="aria"></a>
                   
                </li>
                
                <li>
                   
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA9" class="aria"></a>
+                  <a href="../Techniques/aria/ARIA9" class="aria"></a>
                   
                </li>
                
                <li>
                   
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/html/H24" class="html"></a>
+                  <a href="../Techniques/html/H24" class="html"></a>
                   
                </li>
                
                <li>
                   
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/html/H30" class="html"></a>
+                  <a href="../Techniques/html/H30" class="html"></a>
                   
                </li>
                
                <li>
                   
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/html/H36" class="html"></a>
+                  <a href="../Techniques/html/H36" class="html"></a>
                   
                </li>
                
                <li>
                   
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/html/H44" class="html"></a>
+                  <a href="../Techniques/html/H44" class="html"></a>
                   
                </li>
                
                <li>
                   
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/html/H65" class="html"></a>
-                  
-               </li>
-               
-               <li>
-                  
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/silverlight/SL18" class="silverlight"></a>
-                  
-               </li>
-               
-               <li>
-                  
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/silverlight/SL26" class="silverlight"></a>
-                  
-               </li>
-               
-               <li>
-                  
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/silverlight/SL30" class="silverlight"></a>
+                  <a href="../Techniques/html/H65" class="html"></a>
                   
                </li>
                
@@ -838,7 +647,7 @@ <h4>Situation D: If non-text content is time-based media (including live video-o
                primarily intended to create a specific sensory experience:
             </h4>
             
-            <ol>
+            <ul>
                
                <li>Providing a descriptive label using one of the following 
                   <strong>
@@ -850,7 +659,7 @@ <h4>Situation D: If non-text content is time-based media (including live video-o
                
                <li> 
                   
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G68" class="general">Providing a descriptive label that describes the purpose of live audio-only and live
+                  <a href="../Techniques/general/G68" class="general">Providing a descriptive label that describes the purpose of live audio-only and live
                      video-only content
                   </a> using one of the following 
                   <strong>
@@ -862,7 +671,7 @@ <h4>Situation D: If non-text content is time-based media (including live video-o
                
                <li> 
                   
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G100" class="general">Providing the accepted name or a descriptive name of the non-text content</a> using one of the following 
+                  <a href="../Techniques/general/G100" class="general">Providing the accepted name or a descriptive name of the non-text content</a> using one of the following 
                   <strong>
                      
                      <a href="#text-equiv-all-situation-d-shorttext">Short text alternative techniques for Situation D</a>
@@ -870,7 +679,7 @@ <h4>Situation D: If non-text content is time-based media (including live video-o
                   </strong>:
                </li>
                
-            </ol>
+            </ul>
             
             <p id="text-equiv-all-situation-d-shorttext">
                
@@ -881,61 +690,49 @@ <h4>Situation D: If non-text content is time-based media (including live video-o
                
                <li>
                   
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA6" class="aria"></a>
+                  <a href="../Techniques/aria/ARIA6" class="aria"></a>
                   
                </li>
                
                <li>
                   
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA10" class="aria"></a>
+                  <a href="../Techniques/aria/ARIA10" class="aria"></a>
                   
                </li>
                
                <li>
                   
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G196" class="general"></a>
+                  <a href="../Techniques/general/G196" class="general"></a>
                   
                </li>
                
                <li>
                   
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/html/H2" class="html"></a>
+                  <a href="../Techniques/html/H2" class="html"></a>
                   
                </li>
                
                <li>
                   
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/html/H35" class="html"></a>
+                  <a href="../Techniques/html/H37" class="html"></a>
                   
                </li>
                
                <li>
                   
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/html/H37" class="html"></a>
+                  <a href="../Techniques/html/H53" class="html"></a>
                   
                </li>
                
                <li>
                   
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/html/H53" class="html"></a>
+                  <a href="../Techniques/html/H86" class="html"></a>
                   
                </li>
                
                <li>
                   
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/html/H86" class="html"></a>
-                  
-               </li>
-               
-               <li>
-                  
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/pdf/PDF1" class="pdf"></a>
-                  
-               </li>
-               
-               <li>
-                  
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/silverlight/SL5" class="silverlight"></a>
+                  <a href="../Techniques/pdf/PDF1" class="pdf"></a>
                   
                </li>
                
@@ -947,21 +744,21 @@ <h4>Situation D: If non-text content is time-based media (including live video-o
             
             <h4>Situation E: If non-text content is a CAPTCHA:</h4>
             
-            <ol>
+            <ul>
                
                <li>
                   										           
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G143" class="general">Providing a text alternative that describes the purpose of the CAPTCHA</a>
+                  <a href="../Techniques/general/G143" class="general">Providing a text alternative that describes the purpose of the CAPTCHA</a>
                   										           
                   <strong>AND</strong>
                   										           
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G144" class="general">Ensuring that the Web Page contains another CAPTCHA serving the same purpose using
+                  <a href="../Techniques/general/G144" class="general">Ensuring that the Web Page contains another CAPTCHA serving the same purpose using
                      a different modality
                   </a>
                   									         
                </li>
                
-            </ol>
+            </ul>
             
          </section>
          
@@ -969,7 +766,7 @@ <h4>Situation E: If non-text content is a CAPTCHA:</h4>
             
             <h4>Situation F: If the non-text content should be ignored by assistive technology:</h4>
             
-            <ol>
+            <ul>
                
                <li>Implementing or marking the non-text content so that it will be ignored by assistive
                   technology using one of the following 
@@ -980,7 +777,7 @@ <h4>Situation F: If the non-text content should be ignored by assistive technolo
                   </strong>:
                </li>
                
-            </ol>
+            </ul>
             
             <p id="text-equiv-all-situation-f-notrequired">
                
@@ -991,13 +788,13 @@ <h4>Situation F: If the non-text content should be ignored by assistive technolo
                
                <li>
                   
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/css/C9" class="css">Using CSS to include decorative images</a>
+                  <a href="../Techniques/css/C9" class="css">Using CSS to include decorative images</a>
                   
                </li>
                
                <li>
                   
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/html/H67" class="html">Using null alt text and no title attribute on img elements for images that AT should
+                  <a href="../Techniques/html/H67" class="html">Using null alt text and no title attribute on img elements for images that AT should
                      ignore
                   </a>
                   
@@ -1005,7 +802,7 @@ <h4>Situation F: If the non-text content should be ignored by assistive technolo
                
                <li>
                   
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/pdf/PDF4" class="pdf"></a>
+                  <a href="../Techniques/pdf/PDF4" class="pdf"></a>
                   
                </li>
                
@@ -1018,22 +815,6 @@ <h4>Situation F: If the non-text content should be ignored by assistive technolo
       <section id="advisory">
          <h3>Additional Techniques (Advisory) for Non-text Content</h3>
          
-         <section>
-            
-            <h4>HTML Techniques (Advisory)</h4>
-            
-            <ul>
-               
-               <li>
-                  										           
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/html/H46" class="html">Using noembed with embed</a>
-                  									         
-               </li>
-               
-            </ul>
-            
-         </section>
-         
          <section>
             
             <h4>CSS Techniques (Advisory)</h4>
@@ -1042,7 +823,7 @@ <h4>CSS Techniques (Advisory)</h4>
                
                <li>
                   										           
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/css/C18" class="css">Using CSS margin and padding rules instead of spacer images</a>
+                  <a href="../Techniques/css/C18" class="css">Using CSS margin and padding rules instead of spacer images</a>
                   									         
                </li>
                
@@ -1050,22 +831,6 @@ <h4>CSS Techniques (Advisory)</h4>
             
          </section>
          
-         <section>
-            
-            <h4>Silverlight Techniques (Advisory)</h4>
-            
-            <ul>
-               
-               <li>
-                  
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/silverlight/SL19" class="silverlight"></a>
-                  
-               </li>
-               
-            </ul>
-            
-         </section>
-         
       </section>
       
       <section id="failure">
@@ -1076,13 +841,13 @@ <h3>Failures for Non-text Content</h3>
             
             <li>
                									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/failures/F3" class="failure">Failure due to using CSS to include images that convey important information</a>
+               <a href="../Techniques/failures/F3" class="failure">Failure due to using CSS to include images that convey important information</a>
                								       
             </li>
             
             <li>
                									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/failures/F13" class="failure">Failure of Success Criterion 1.1.1 and 1.4.1 due to having a text alternative that
+               <a href="../Techniques/failures/F13" class="failure">Failure of Success Criterion 1.1.1 and 1.4.1 due to having a text alternative that
                   does not include information that is conveyed by color differences in the image
                </a>
                								       
@@ -1090,13 +855,13 @@ <h3>Failures for Non-text Content</h3>
             
             <li>
                									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/failures/F20" class="failure">Failure due to not updating text alternatives when changes to non-text content occur</a>
+               <a href="../Techniques/failures/F20" class="failure">Failure due to not updating text alternatives when changes to non-text content occur</a>
                								       
             </li>
             
             <li>
                									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/failures/F30" class="failure">Failure due to using text alternatives that are not alternatives (e.g., filenames
+               <a href="../Techniques/failures/F30" class="failure">Failure due to using text alternatives that are not alternatives (e.g., filenames
                   or placeholder text)
                </a>
                								       
@@ -1104,7 +869,7 @@ <h3>Failures for Non-text Content</h3>
             
             <li>
                									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/failures/F38" class="failure">Failure due to omitting the alt-attribute for non-text content used for decorative
+               <a href="../Techniques/failures/F38" class="failure">Failure due to omitting the alt-attribute for non-text content used for decorative
                   purposes only in HTML
                </a>
                								       
@@ -1112,7 +877,7 @@ <h3>Failures for Non-text Content</h3>
             
             <li>
                									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/failures/F39" class="failure">Failure due to providing a text alternative that is not null. (e.g., alt="spacer"
+               <a href="../Techniques/failures/F39" class="failure">Failure due to providing a text alternative that is not null. (e.g., alt="spacer"
                   or alt="image") for Images that should be ignored by AT
                </a>
                								       
@@ -1120,7 +885,7 @@ <h3>Failures for Non-text Content</h3>
             
             <li>
                									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/failures/F65" class="failure">Failure of 1.1.1 due to omitting the alt attribute on img elements, area elements,
+               <a href="../Techniques/failures/F65" class="failure">Failure of 1.1.1 due to omitting the alt attribute on img elements, area elements,
                   and input elements of type "image"
                </a>
                								       
@@ -1128,7 +893,7 @@ <h3>Failures for Non-text Content</h3>
             
             <li>
                									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/failures/F67" class="failure">Failure of 1.1.1 due to providing long description for non-text content that does
+               <a href="../Techniques/failures/F67" class="failure">Failure of 1.1.1 due to providing long description for non-text content that does
                   not serve the same purpose or does not present the same information
                </a>
                								       
@@ -1136,7 +901,7 @@ <h3>Failures for Non-text Content</h3>
             
             <li>
                									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/failures/F71" class="failure">Failure of Success Criterion 1.1.1 due to using text look-alikes to represent text
+               <a href="../Techniques/failures/F71" class="failure">Failure of Success Criterion 1.1.1 due to using text look-alikes to represent text
                   without providing a text alternative
                </a>
                								       
@@ -1144,7 +909,7 @@ <h3>Failures for Non-text Content</h3>
             
             <li>
                									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/failures/F72" class="failure">Failure of Success Criterion 1.1.1 due to using ASCII art without providing a text
+               <a href="../Techniques/failures/F72" class="failure">Failure of Success Criterion 1.1.1 due to using ASCII art without providing a text
                   alternative
                </a>
                								       
diff --git a/understanding/20/on-focus.html b/understanding/20/on-focus.html
index 700f02843c..91a2712073 100644
--- a/understanding/20/on-focus.html
+++ b/understanding/20/on-focus.html
@@ -3,11 +3,20 @@
 <head>
    <meta charset="UTF-8"></meta>
    <title>Understanding On Focus</title>
-   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link>
+   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/>
 </head>
 <body>
    <h1>Understanding On Focus</h1>
    
+   <section id="brief">
+		<h2>In brief</h2>
+		<dl>
+         <dt>Goal</dt><dd>Content can be navigated more predictably.</dd>
+         <dt>What to do</dt><dd>Do not change a user's context when items get focus.</dd>
+         <dt>Why it's important</dt><dd>Content that behaves predictably is especially important to people with disabilities.</dd> 
+      </dl>
+
+   </section>
    
    <section id="intent">
       <h2>Intent of On Focus</h2>
@@ -39,7 +48,7 @@ <h2>Intent of On Focus</h2>
       <div class="note">
          
          <p>What is meant by "component" here is also sometimes called "user interface element"
-            or "user interface component''.
+            or "user interface component".
          </p>
          
       </div>
@@ -63,48 +72,19 @@ <h2>Benefits of On Focus</h2>
    <section id="examples">
       <h2>Examples of On Focus</h2>
       
-      
-      <ul>
-         
-         <li>
-            
-            <p>
-               								       
-               <strong>Example 1:  A dropdown menu</strong>
-               							     
-            </p>
-            
-            <p>A dropdown menu on a page allows users to choose between jump destinations. If the
+      <dl>
+         <dt>Example 1: A dropdown menu</dt>
+         <dd>A dropdown menu on a page allows users to choose between jump destinations. If the
                person uses the keyboard to move down to a choice and activates it (with a spacebar
                or enter key) it will jump to a new page.  However, if the person moves down to a
                choice and either hits the escape or the tab key to move out of the pulldown menu
-               – it does not jump to a new screen as the focus shifts out of the dropdown menu. 
-            </p>
-            
-         </li>
-         
-         <li>
-            
-            <p>
-               								       
-               <strong>
-                  Example of a Failure:  A help dialog
-                  
-               </strong>
-               							     
-            </p>
-            
-            <p>
-               When a field receives focus, a help dialog window describing the field and providing
+               – it does not jump to a new screen as the focus shifts out of the dropdown menu.</dd>
+         <dt>Example of a Failure: A help dialog</dt>
+         <dd>When a field receives focus, a help dialog window describing the field and providing
                options opens. As a keyboard user tabs through the Web page, the dialog opens, moving
                the keyboard focus away from the control every time the user attempts to tab past
-               the field.
-               
-            </p>
-            
-         </li>
-         
-      </ul>
+               the field.</dd>
+      </dl>
       
    </section>
    
@@ -122,15 +102,15 @@ <h2>Techniques for On Focus</h2>
          <h3>Sufficient Techniques for On Focus</h3>
          
          
-         <ol>
+         <ul>
             
             <li>
                									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G107" class="general">Using "activate" rather than "focus" as a trigger for changes of context</a>
+               <a href="../Techniques/general/G107" class="general">Using "activate" rather than "focus" as a trigger for changes of context</a>
                								       
             </li>
             
-         </ol>
+         </ul>
          
          <div class="note">
             
@@ -151,13 +131,13 @@ <h3>Additional Techniques (Advisory) for On Focus</h3>
             
             <li>
                									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G200" class="general">Opening new windows and tabs from a link only when necessary</a>
+               <a href="../Techniques/general/G200" class="general">Opening new windows and tabs from a link only when necessary</a>
                								       
             </li>
             
             <li>
                									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G201" class="general">Giving users advanced warning when opening a new window</a>
+               <a href="../Techniques/general/G201" class="general">Giving users advanced warning when opening a new window</a>
                								       
             </li>
             
@@ -173,7 +153,7 @@ <h3>Failures for On Focus</h3>
             
             <li>
                									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/failures/F55" class="failure">Failure due to using script to remove focus when focus is received</a>
+               <a href="../Techniques/failures/F55" class="failure">Failure due to using script to remove focus when focus is received</a>
                								       
             </li>
             
diff --git a/understanding/20/on-input.html b/understanding/20/on-input.html
index 9350e2769d..66223c97b6 100644
--- a/understanding/20/on-input.html
+++ b/understanding/20/on-input.html
@@ -3,11 +3,20 @@
 <head>
    <meta charset="UTF-8"></meta>
    <title>Understanding On Input</title>
-   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link>
+   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/>
 </head>
 <body>
    <h1>Understanding On Input</h1>
    
+   <section id="brief">
+		<h2>In brief</h2>
+		<dl>
+         <dt>Goal</dt><dd>Content can be operated more predictably.</dd>
+         <dt>What to do</dt><dd>Forewarn users if their context will change based on their input.</dd>
+         <dt>Why it's important</dt><dd>Content that behaves predictably is especially important to people with disabilities.</dd> 
+      </dl>
+
+   </section>
    
    <section id="intent">
       <h2>Intent of On Input</h2>
@@ -28,7 +37,7 @@ <h2>Intent of On Input</h2>
       <div class="note">
          
          <p>This Success Criterion covers changes in context due to changing the setting of a
-            control. Clicking on links or tabs in a tab control is activating the control, not
+            control. Clicking on links or buttons is activating a control, not
             changing the setting of that control.
          </p>
          
@@ -132,38 +141,32 @@ <h2>Techniques for On Input</h2>
          <h3>Sufficient Techniques for On Input</h3>
          
          
-         <ol>
+         <ul>
             
             <li>
                
                <p> 
                   
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G80" class="general">Providing a submit button to initiate a change of context</a> using a technology-specific technique listed below
+                  <a href="../Techniques/general/G80" class="general">Providing a submit button to initiate a change of context</a> using a technology-specific technique listed below
                </p>
                
                <ul>
                   
                   <li>
                      
-                     <a href="https://www.w3.org/WAI/WCAG21/Techniques/html/H32" class="html">Providing submit buttons</a>
-                     
-                  </li>
-                  
-                  <li>
-                     
-                     <a href="https://www.w3.org/WAI/WCAG21/Techniques/html/H84" class="html">Using a button with a select element to perform an action</a>
+                     <a href="../Techniques/html/H32" class="html">Providing submit buttons</a>
                      
                   </li>
                   
                   <li>
                      
-                     <a href="https://www.w3.org/WAI/WCAG21/Techniques/pdf/PDF15" class="pdf"></a>
+                     <a href="../Techniques/html/H84" class="html">Using a button with a select element to perform an action</a>
                      
                   </li>
                   
                   <li>
                      
-                     <a href="https://www.w3.org/WAI/WCAG21/Techniques/silverlight/SL10" class="silverlight"></a>
+                     <a href="../Techniques/pdf/PDF15" class="pdf"></a>
                      
                   </li>
                   
@@ -173,17 +176,17 @@ <h3>Sufficient Techniques for On Input</h3>
             
             <li>
                
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G13" class="general">Describing what will happen before a change to a form control is made</a>
+               <a href="../Techniques/general/G13" class="general">Describing what will happen before a change to a form control is made</a>
                
             </li>
             
             <li>
                
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/client-side-script/SCR19" class="script"></a>
+               <a href="../Techniques/client-side-script/SCR19" class="script"></a>
                
             </li>
             
-         </ol>
+         </ul>
          
          <div class="note">
             
@@ -204,7 +207,7 @@ <h3>Additional Techniques (Advisory) for On Input</h3>
             
             <li>
                
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G201" class="general">Giving users advanced warning when opening a new window</a>
+               <a href="../Techniques/general/G201" class="general">Giving users advanced warning when opening a new window</a>
                
             </li>
             
@@ -220,7 +223,7 @@ <h3>Failures for On Input</h3>
             
             <li>
                
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/failures/F36" class="failure">Failure due to automatically submitting a form and presenting new content without
+               <a href="../Techniques/failures/F36" class="failure">Failure due to automatically submitting a form and presenting new content without
                   prior warning when the last field in the form is given a value
                </a>
                
@@ -228,7 +231,7 @@ <h3>Failures for On Input</h3>
             
             <li>
                
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/failures/F37" class="failure">Failure due to launching a new window without prior warning when the status of a radio
+               <a href="../Techniques/failures/F37" class="failure">Failure due to launching a new window without prior warning when the status of a radio
                   button, check box or select list is changed
                </a>
                
diff --git a/understanding/20/page-titled.html b/understanding/20/page-titled.html
index 0e06f3ba2f..a6c1f16ed8 100644
--- a/understanding/20/page-titled.html
+++ b/understanding/20/page-titled.html
@@ -3,11 +3,20 @@
 <head>
    <meta charset="UTF-8"></meta>
    <title>Understanding Page Titled</title>
-   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link>
+   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/>
 </head>
 <body>
    <h1>Understanding Page Titled</h1>
    
+   <section id="brief">
+		<h2>In brief</h2>
+		<dl>
+         <dt>Goal</dt><dd>Each web page has a meaningful title.</dd>
+         <dt>What to do</dt><dd>Provide a descriptive page title using appropriate technology.</dd>
+         <dt>Why it's important</dt><dd>Page titles help users identify and distinguish different pages.</dd> 
+      </dl>
+
+   </section>
    
    <section id="intent">
       <h2>Intent of Page Titled</h2>
@@ -27,6 +36,12 @@ <h2>Intent of Page Titled</h2>
          it is not required to use the name of the document or web application; other things
          may also describe the purpose or the topic of the page. 
       </p>
+
+      <p>In cases such as Single Page Applications (SPAs), where various distinct pages/views are
+         all nominally served from the same URI and the content of the page is changed dynamically,
+         the title of the page should also be changed dynamically to reflect the content or topic of
+         the current view.
+      </p>
       
       <p>
          
@@ -77,73 +92,28 @@ <h2>Benefits of Page Titled</h2>
    <section id="examples">
       <h2>Examples of Page Titled</h2>
       
-      
-      <ul>
-         
-         <li>
-            
-            <p>
-               								       
-               <strong>An HTML Web page</strong>
-               							     
-            </p>
-            
-            <p>The descriptive title of an HTML Web page is marked up with the &lt;title&gt; element so
-               that it will be displayed in the title bar of the user agent.
-            </p>
-            
-         </li>
-         
-         <li>
-            
-            <p>
-               								       
-               <strong>A document collection.</strong>
-               							     
-            </p>
-            
-            <p>The title of 
-               <a href="https://www.w3.org/WAI/WCAG21/Understanding/">Understanding WCAG 2.1 </a> is "Understanding WCAG 2.1."
-            </p>
-            
+      <dl>
+         <dt>An HTML Web page</dt>
+         <dd>The descriptive title of an HTML Web page is marked up with the &lt;title&gt; element so
+               that it will be displayed in the title bar of the user agent.</dd>
+         <dt>A document collection</dt>
+         <dd>
+            <p>The title of <a href="./">Understanding WCAG 2.2</a> is "Understanding WCAG 2.2".</p>
             <ul>
-               
-               <li>The introduction page has the title "Introduction to Understanding WCAG 2.0."</li>
-               
-               <li>Major sections of the document are pages titled "Understanding Guideline X" and "Understanding
-                  Success Criterion X." 
-               </li>
-               
+               <li>The <a href="../Understanding/intro">Introduction to Understanding WCAG</a> page has the title "Introduction to Understanding WCAG".</li>
+               <li>Major sections of the document collection are pages titled "Understanding Guideline X" and "Understanding Success Criterion X."</li>
                <li>Appendix A has the title "Glossary."</li>
-               
                <li>Appendix B has the title "Acknowledgements."</li>
-               
                <li>Appendix C has the title "References."</li>
-               
             </ul>
-            
-         </li>
-         
-         <li>
-            
-            <p>
-               								       
-               <strong>A Web application.</strong>
-               							     
-            </p>
-            
-            <p>
-               A banking application lets a user inspect his bank accounts, view past statements,
+         </dd>
+         <dt>A Web application</dt>
+         <dd>A banking application lets users inspect their bank accounts, view past statements,
                and perform transactions. The Web application dynamically generates titles for each
-               Web page, e.g., "Bank XYZ, accounts for John Smith" "Bank XYZ, December 2005 statement
-               for Account 1234-5678". 
-               
-               
-            </p>
-            
-         </li>
-         
-      </ul>
+               Web page, e.g., "Bank XYZ, accounts for Alex Smith" "Bank XYZ, December 2005 statement
+               for Account 1234-5678".</dd>
+      </dl>
+
       
    </section>
    
@@ -155,16 +125,16 @@ <h2>Resources for Page Titled</h2>
          
          <li> 
             
-            <a href="http://www.socialpatterns.com/search-engine-optimization/writing-better-web-page-titles/">Writing Better Web Page Titles</a> How to write titles for Web pages that will enhance search engine effectiveness.
+            <a href="https://socialpatterns.com/writing-better-titles/">Writing Better Web Page Titles</a>. How to write titles for Web pages that will enhance search engine effectiveness.
          </li>
          
          <li> 
             
-            <a href="http://redish.net/images/stories/PDF/interactions.html">Guidelines for Accessible and Usable Web Sites: Observing Users Who Work With Screen
-               Readers
+            <a href="https://redish.net/wp-content/uploads/Theorfanos_Redish_InteractionsPaperAuthorsVer.pdf">Guidelines for Accessible and Usable Web Sites: Observing Users Who Work With Screen
+               Readers (PDF)
             </a>. Theofanos, M.F., and Redish, J. (2003).  Interactions, Volume X, Issue 6, November-December
             2003, pages 38-51, 
-            <a href="http://dl.acm.org/citation.cfm?doid=947226.947227">http://dl.acm.org/citation.cfm?doid=947226.947227</a>
+            <a href="https://dl.acm.org/doi/10.1145/947226.947227">https://dl.acm.org/doi/10.1145/947226.947227</a>
             							     
          </li>
          
@@ -180,13 +150,13 @@ <h2>Techniques for Page Titled</h2>
          <h3>Sufficient Techniques for Page Titled</h3>
          
          
-         <ol>
+         <ul>
             
             <li>
                
                <p> 
                   
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G88" class="general">Providing descriptive titles for Web pages</a> 
+                  <a href="../Techniques/general/G88" class="general">Providing descriptive titles for Web pages</a> 
                   
                   <strong>AND</strong> associating a title with a Web page using one of the following techniques:
                   
@@ -196,13 +166,13 @@ <h3>Sufficient Techniques for Page Titled</h3>
                   	
                   <li>
                      											             
-                     <a href="https://www.w3.org/WAI/WCAG21/Techniques/html/H25" class="html">Providing a title using the title element</a>
+                     <a href="../Techniques/html/H25" class="html">Providing a title using the title element</a>
                      										           
                   </li>
                   
                   <li>
                      
-                     <a href="https://www.w3.org/WAI/WCAG21/Techniques/pdf/PDF18" class="pdf"></a>
+                     <a href="../Techniques/pdf/PDF18" class="pdf"></a>
                      
                   </li>
                   
@@ -210,7 +180,7 @@ <h3>Sufficient Techniques for Page Titled</h3>
                
             </li>
             
-         </ol>
+         </ul>
          
       </section>
       
@@ -222,7 +192,7 @@ <h3>Additional Techniques (Advisory) for Page Titled</h3>
             
             <li>
                									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G127" class="general">Identifying a Web page's relationship to a larger collection of Web pages</a>
+               <a href="../Techniques/general/G127" class="general">Identifying a Web page's relationship to a larger collection of Web pages</a>
                								       
             </li>
             
@@ -238,7 +208,7 @@ <h3>Failures for Page Titled</h3>
             
             <li>
                									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/failures/F25" class="failure">Failure due to the title of a Web page not identifying the contents</a>
+               <a href="../Techniques/failures/F25" class="failure">Failure due to the title of a Web page not identifying the contents</a>
                								       
             </li>
             
diff --git a/understanding/20/parsing.html b/understanding/20/parsing.html
index bab3a2af20..ae72ef4d58 100644
--- a/understanding/20/parsing.html
+++ b/understanding/20/parsing.html
@@ -3,23 +3,48 @@
 <head>
    <meta charset="UTF-8"></meta>
    <title>Understanding Parsing</title>
-   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link>
+   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/>
 </head>
 <body>
    <h1>Understanding Parsing</h1>
    
+   <section id="brief">
+		<h2>In brief</h2>
+		<dl>
+         <dt>Goal</dt><dd>Assistive technology can properly present page content.</dd>
+         <dt>What to do</dt><dd>Create web pages according to specifications.</dd>
+         <dt>Why it's important</dt><dd>People can browse web content more easily with their assistive technology.</dd> 
+      </dl>
+
+   </section>
    
    <section id="intent">
       <h2>Intent of Parsing</h2>
       
-      
-      <p>The intent of this Success Criterion is to ensure that user agents, including assistive
-         technologies, can accurately interpret and parse content. If the content cannot be
-         parsed into a data structure, then different user agents may present it differently
-         or be completely unable to parse it. Some user agents use "repair techniques" to render
-         poorly coded content. 
-         
-         
+      <div class="wcag22">
+         <p>This criterion has been removed from WCAG 2.2.</p>
+
+         <p>The intent of this Success Criterion was to ensure that user-agents, including assistive technologies, can accurately interpret and parse content. Since WCAG 2.0 was published, the specifications (such as HTML) and browsers have improved their handling of parsing errors. It is also the case that assistive technology used to do their own parsing of markup, but now rely on the browser. For that reason this success criterion has been removed. Many issues that would have failed this criterion will fail <a href="info-and-relationships">Info and Relationships</a> or <a href="name-role-value">Name, Role, Value</a>. Other issues are excepted by the "except where the specification allow these features" part of the criterion.</p>
+
+         <p>The following content is left for historical purposes to show the original intent.</p>  
+            
+         <hr/>
+
+         <blockquote class="scquote">
+            <p>Success Criterion <a href="https://www.w3.org/TR/WCAG21/#parsing" style="font-weight: bold;">4.1.1 Parsing</a> (Level A): In content implemented using markup languages, elements have complete start and end
+               tags, elements are nested according to their specifications, elements do not contain
+               duplicate attributes, and any IDs are unique, except where the specifications allow
+               these features.
+               </p>
+            <p class="note">Start and end tags that are missing a critical character in their formation, such
+               as a closing angle bracket or a mismatched attribute value quotation mark are not
+               complete.
+               </p>
+         </blockquote>
+      </div>
+
+      <p>
+         The intent of this Success Criterion is to ensure that user agents, including assistive technologies, can accurately interpret and parse content.  If the content cannot be parsed into a data structure, then different user agents may present it differently or be completely unable to parse it. Some user agents use "repair techniques" to render poorly coded content.
       </p>
       
       <p>Since repair techniques vary among user agents, authors cannot assume that content
@@ -39,16 +64,16 @@ <h2>Intent of Parsing</h2>
          <p>The concept of "well formed" is close to what is required here. However, exact parsing
             requirements vary amongst markup languages, and most non XML-based languages do not
             explicitly define requirements for well formedness. Therefore, it was necessary to
-            be more explicit in the success criterion in order to be generally applicable to markup
+            be more explicit in the Success Criterion in order to be generally applicable to markup
             languages. Because the term "well formed" is only defined in XML, and (because end
             tags are sometimes optional) valid HTML does not require well formed code, the term
-            is not used in this success criterion.
+            is not used in this Success Criterion.
          </p>
          
-         <p>With the exception of one success criterion (
-            <a href="resize-text">1.4.2: Resize text</a>, which specifically mentions that the effect specified by the success criterion must
-            be achieved without relying on an assistive technology) authors can meet the success
-            criteria with content that assumes use of an assistive technology (or access features
+         <p>With the exception of one Success Criterion (
+            <a href="resize-text">1.4.4: Resize Text</a>, which specifically mentions that the effect specified by the Success Criterion must
+            be achieved without relying on an assistive technology) authors can meet the Success
+            Criteria with content that assumes use of an assistive technology (or access features
             in use agents) by the user, where such assistive technologies (or access features
             in user agents) exist and are available to the user.
          </p>
@@ -93,23 +118,23 @@ <h2>Techniques for Parsing</h2>
          <h3>Sufficient Techniques for Parsing</h3>
          
          
-         <ol>
+         <ul>
             
             <li>
                									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G134" class="general">Validating Web pages</a>
+               <a href="../Techniques/general/G134" class="general">Validating Web pages</a>
                								       
             </li>
             
             <li>
                									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G192" class="general">Fully conforming to specifications</a>
+               <a href="../Techniques/general/G192" class="general">Fully conforming to specifications</a>
                								       
             </li>
             
             <li>
                									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/html/H88" class="html">Using (X)HTML according to spec</a>
+               <a href="../Techniques/html/H88" class="html">Using (X)HTML according to spec</a>
                								       
             </li>
             
@@ -121,15 +146,15 @@ <h3>Sufficient Techniques for Parsing</h3>
                   
                   <li>
                      											             
-                     <a href="https://www.w3.org/WAI/WCAG21/Techniques/html/H74" class="html">Ensuring that  opening and closing tags are used according to specification</a>
+                     <a href="../Techniques/html/H74" class="html">Ensuring that  opening and closing tags are used according to specification</a>
                      											             
                      <strong>AND</strong>
                      											             
-                     <a href="https://www.w3.org/WAI/WCAG21/Techniques/html/H93" class="html">Ensuring that id attributes are unique on a Web page</a>
+                     <a href="../Techniques/html/H93" class="html">Ensuring that id attributes are unique on a Web page</a>
                      											             
                      <strong>AND</strong>
                      											             
-                     <a href="https://www.w3.org/WAI/WCAG21/Techniques/html/H94" class="html">Ensuring that elements do not contain duplicate attributes</a>
+                     <a href="../Techniques/html/H94" class="html">Ensuring that elements do not contain duplicate attributes</a>
                      										           
                   </li>
                   
@@ -145,13 +170,7 @@ <h3>Sufficient Techniques for Parsing</h3>
                
             </li>
             
-            <li>
-               
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/silverlight/SL33" class="silverlight"></a>
-               
-            </li>
-            
-         </ol>
+         </ul>
          
       </section>
       
@@ -169,13 +188,13 @@ <h3>Failures for Parsing</h3>
             
             <li>
                									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/failures/F70" class="failure">Failure of 4.1.1 due to incorrect use of start and end tags or attribute markup</a>
+               <a href="../Techniques/failures/F70" class="failure">Failure of 4.1.1 due to incorrect use of start and end tags or attribute markup</a>
                								       
             </li>
             
             <li>
                									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/failures/F77" class="failure">Failure of 4.1.1 due to duplicate values of type ID</a>
+               <a href="../Techniques/failures/F77" class="failure">Failure of 4.1.1 due to duplicate values of type ID</a>
                								       
             </li>
             
diff --git a/understanding/20/pause-stop-hide.html b/understanding/20/pause-stop-hide.html
index d69d93c763..e513facd7c 100644
--- a/understanding/20/pause-stop-hide.html
+++ b/understanding/20/pause-stop-hide.html
@@ -3,11 +3,20 @@
 <head>
    <meta charset="UTF-8"></meta>
    <title>Understanding Pause, Stop, Hide</title>
-   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link>
+   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/>
 </head>
 <body>
    <h1>Understanding Pause, Stop, Hide</h1>
    
+   <section id="brief">
+		<h2>In brief</h2>
+		<dl>
+         <dt>Goal</dt><dd>Fewer users are distracted by content that updates or moves.</dd>
+         <dt>What to do</dt><dd>Let users control content changes that occur in parallel with other content.</dd>
+         <dt>Why it's important</dt><dd>Some people with cognitive disabilities and attention deficits cannot concentrate with continual movement.</dd> 
+      </dl>
+
+   </section>
    
    <section id="intent">
       <h2>Intent of Pause, Stop, Hide</h2>
@@ -54,7 +63,7 @@ <h2>Intent of Pause, Stop, Hide</h2>
          point in the presentation where the user left off.
       </p>
       
-      <ol>
+      <ul>
          
          <li>
             
@@ -91,7 +100,7 @@ <h2>Intent of Pause, Stop, Hide</h2>
             
          </li>
          
-      </ol>
+      </ul>
       
       <p>For a mechanism to be considered "a mechanism for the user to pause," it must provide
          the user with a means to pause that does not tie up the user or the focus so that
@@ -153,131 +162,39 @@ <h2>Benefits of Pause, Stop, Hide</h2>
    <section id="examples">
       <h2>Examples of Pause, Stop, Hide</h2>
       
-      
-      <ul>
-         
-         <li>
-            
-            <p>
-               								       
-               <strong>An essential animation can be paused without affecting the activity</strong>
-               							     
-            </p>
-            
-            <p>A Web site helps users understand 'how things work' through animations that demonstrate
-               processes. Animations have "pause" and "restart" buttons.
-            </p>
-            
-         </li>
-         
-         <li>
-            
-            <p>
-               								       
-               <strong>A stock ticker</strong>
-               							     
-            </p>
-            
-            <p>
-               A stock ticker has "pause" and "restart" buttons. Pausing the ticker causes it to
+      <dl>
+         <dt>An essential animation can be paused without affecting the activity</dt>
+         <dd>A Web site helps users understand 'how things work' through animations that demonstrate
+               processes. Animations have "pause" and "restart" buttons.</dd>
+         <dt>A stock ticker</dt>
+         <dd>A stock ticker has "pause" and "restart" buttons. Pausing the ticker causes it to
                pause on the currently displayed stock. Restarting causes the ticker to resume from
                the stopped point but with a notice that the display is delayed. Since the intent
                of the stock ticker is usually to provide realtime information, there might also be
-               a button that would advance the ticker to the most recently traded stock. 
-               
-               
-            </p>
-            
-         </li>
-         
-         <li>
-            
-            <p>
-               								       
-               <strong>A game is designed so that users take turns rather than competing in real-time</strong>
-               							     
-            </p>
-            
-            <p>One party can pause the game without invalidating the competitive aspect of it.</p>
-            
-         </li>
-         
-         <li>
-            
-            <p>
-               								       
-               <strong>A Web advertisement</strong>
-               							     
-            </p>
-            
-            <p>An advertisement blinks to get viewers attention but stops after 5 seconds</p>
-            
-         </li>
-         
-         <li>
-            
-            <p>
-               								       
-               <strong>A form prompt</strong>
-               							     
-            </p>
-            
-            <p>A form blinks an arrow near the submit button if a user finishes filling out the form
-               but does not activate the submit button. The blinking stops after 5 seconds.
-            </p>
-            
-         </li>
-         
-         <li>
-            
-            <p>
-               								       
-               <strong>An animation</strong>
-               							     
-            </p>
-            
-            <p>An animation runs in the upper portion of the page but has a "freeze animation" button
-               near the bottom of the animation. 
-               
-            </p>
-            
-         </li>
-         
-         <li>
-            
-            <p>
-               								       
-               <strong>A "loading" animation</strong>
-               							     
-            </p>
-            
-            <p>A preloader animation is shown on a page which requires a certain percentage of a
+               a button that would advance the ticker to the most recently traded stock.</dd>
+         <dt>A game is designed so that users take turns rather than competing in real-time</dt>
+         <dd>One party can pause the game without invalidating the competitive aspect of it.</dd>
+         <dt>A Web advertisement</dt>
+         <dd>An advertisement blinks to get viewers attention but stops after 5 seconds</dd>
+         <dt>A form prompt</dt>
+         <dd>A form blinks an arrow near the submit button if a user finishes filling out the form
+               but does not activate the submit button. The blinking stops after 5 seconds.</dd>
+         <dt>An animation</dt>
+         <dd>An animation runs in the upper portion of the page but has a "freeze animation" button
+               near the bottom of the animation.</dd>
+         <dt>A "loading" animation</dt>
+         <dd>A preloader animation is shown on a page which requires a certain percentage of a
                large file to be downloaded before playback can begin. The animation is the only content
                on the page and instructs the user to please wait while the video loads. Because the
                moving content is not presented in parallel with other content, no mechanism to pause,
                stop or hide it needs to be provided, even though the animation may run for more than
-               5 seconds for users with slower connections.
-            </p>
-            
-         </li>
-         
-         <li>
-            
-            <p>
-               								       
-               <strong>A full-page advertisement</strong>
-               							     
-            </p>
-            
-            <p>A site requires that all users view a 15 second advertisement before they can access
+               5 seconds for users with slower connections.</dd>
+         <dt>A full-page advertisement</dt>
+         <dd>A site requires that all users view a 15 second advertisement before they can access
                free content available from their site. Because viewing the advertisement is a requirement
                for all users and because it is not presented in parallel with other content, no mechanism
-               to pause, stop or hide it needs to be provided.
-            </p>
-            
-         </li>
-         
-      </ul>
+               to pause, stop or hide it needs to be provided.</dd>
+      </dl>
       
    </section>
    
@@ -295,79 +212,53 @@ <h2>Techniques for Pause, Stop, Hide</h2>
          <h3>Sufficient Techniques for Pause, Stop, Hide</h3>
          
          
-         <ol>
-            
-            <li>
-               									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G4" class="general">Allowing the content to be paused and restarted from where it was stopped</a>
-               								       
-            </li>
-            
-            <li>
-               
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/silverlight/SL11" class="silverlight"></a>
-               
-            </li>
-            
-            <li>
-               
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/silverlight/SL12" class="silverlight"></a>
-               
-            </li>
+         <ul>
             
             <li>
                									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/client-side-script/SCR33" class="script">Using script to scroll content, and providing a mechanism to pause it</a>
+               <a href="../Techniques/general/G4" class="general">Allowing the content to be paused and restarted from where it was stopped</a>
                								       
             </li>
             
             <li>
                									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G11" class="general">Creating content that blinks for less than 5 seconds</a>
+               <a href="../Techniques/client-side-script/SCR33" class="script">Using script to scroll content, and providing a mechanism to pause it</a>
                								       
             </li>
             
             <li>
                									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G187" class="general">Using a technology to include blinking content that can be turned off via the user
-                  agent
-               </a>
+               <a href="../Techniques/general/G11" class="general">Creating content that blinks for less than 5 seconds</a>
                								       
             </li>
             
             <li>
                									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G152" class="general">Setting animated gif images to stop blinking after n cycles (within 5 seconds) </a>
+               <a href="../Techniques/general/G152" class="general">Setting animated gif images to stop blinking after n cycles (within 5 seconds) </a>
                								       
             </li>
             
             <li>
                									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/client-side-script/SCR22" class="script">Using scripts to control blinking and stop it in five seconds or less</a>
+               <a href="../Techniques/client-side-script/SCR22" class="script">Using scripts to control blinking and stop it in five seconds or less</a>
                								       
             </li>
             
             <li>
                									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G186" class="general">Using a control in the Web page that stops moving, blinking, or auto-updating content</a>
+               <a href="../Techniques/general/G186" class="general">Using a control in the Web page that stops moving, blinking, or auto-updating content</a>
                								       
             </li>
             
             <li>
                									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G191" class="general">Providing a link, button, or other mechanism that reloads the page without the blinking
+               <a href="../Techniques/general/G191" class="general">Providing a link, button, or other mechanism that reloads the page without the blinking
                   content
                </a>
                								       
             </li>
             
-            <li>
-               
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/silverlight/SL24" class="silverlight"></a>
-               
-            </li>
-            
-         </ol>
+         </ul>
          
       </section>
       
@@ -384,7 +275,7 @@ <h3>Failures for Pause, Stop, Hide</h3>
             
             <li>
                									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/failures/F16" class="failure">Failure due to including scrolling content where there is not a mechanism to pause
+               <a href="../Techniques/failures/F16" class="failure">Failure due to including scrolling content where there is not a mechanism to pause
                   and restart the content
                </a>
                								       
@@ -392,13 +283,13 @@ <h3>Failures for Pause, Stop, Hide</h3>
             
             <li>
                									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/failures/F47" class="failure">Failure due to using the blink element</a>
+               <a href="../Techniques/failures/F47" class="failure">Failure due to using the blink element</a>
                								       
             </li>
             
             <li>
                									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/failures/F4" class="failure">Failure due to using text-decoration:blink without a mechanism to stop it in less
+               <a href="../Techniques/failures/F4" class="failure">Failure due to using text-decoration:blink without a mechanism to stop it in less
                   than five seconds
                </a>
                								       
@@ -406,7 +297,7 @@ <h3>Failures for Pause, Stop, Hide</h3>
             
             <li>
                									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/failures/F50" class="failure">Failure due to a script that causes a blink effect without a mechanism to stop the
+               <a href="../Techniques/failures/F50" class="failure">Failure due to a script that causes a blink effect without a mechanism to stop the
                   blinking at 3 seconds or less
                </a>
                								       
@@ -414,7 +305,7 @@ <h3>Failures for Pause, Stop, Hide</h3>
             
             <li>
                									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/failures/F7" class="failure">Failure due to an object or applet that has blinking content
+               <a href="../Techniques/failures/F7" class="failure">Failure due to an object or applet that has blinking content
                   without a mechanism to pause the content that blinks for more than five seconds
                </a>
                								       
diff --git a/understanding/20/predictable.html b/understanding/20/predictable.html
index fe9a7999d5..5f4ca83e02 100644
--- a/understanding/20/predictable.html
+++ b/understanding/20/predictable.html
@@ -3,7 +3,7 @@
 <head>
    <meta charset="UTF-8"></meta>
    <title>Understanding Predictable</title>
-   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link>
+   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/>
 </head>
 <body>
    <h1>Understanding Predictable</h1>
diff --git a/understanding/20/pronunciation.html b/understanding/20/pronunciation.html
index 7835d25af7..7f671e03ac 100644
--- a/understanding/20/pronunciation.html
+++ b/understanding/20/pronunciation.html
@@ -3,11 +3,20 @@
 <head>
    <meta charset="UTF-8"></meta>
    <title>Understanding Pronunciation</title>
-   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link>
+   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/>
 </head>
 <body>
    <h1>Understanding Pronunciation</h1>
    
+   <section id="brief">
+      <h2>In brief</h2>
+      <dl>
+         <dt>Goal</dt><dd>Users can identify the pronunciation of ambiguous words.</dd>
+         <dt>What to do</dt><dd>Indicate how to pronounce a word, where its meaning is otherwise unclear.</dd>
+         <dt>Why it's important</dt><dd>Some people, including those with cognitive disabilities, may not understand the meaning of content.</dd> 
+      </dl>
+
+   </section>
    
    <section id="intent">
       <h2>Intent of Pronunciation</h2>
@@ -63,98 +72,34 @@ <h2>Benefits of Pronunciation</h2>
    <section id="examples">
       <h2>Examples of Pronunciation</h2>
       
-      
-      <ul>
-         
-         <li>
-            
-            <p>
-               								       
-               <strong>Giving the reading of a person's name.</strong>
-               							     
-            </p>
-            
-            <p>Web content in Japanese provides kana (Japanese phonetic syllabary characters) written
+      <dl>
+         <dt>Giving the reading of a person's name</dt>
+         <dd>Web content in Japanese provides kana (Japanese phonetic syllabary characters) written
                next to Han characters (Kanji)  show the pronunciation of a person's name. The kana
                is provided to users in parentheses right after the word. Giving the reading of the
                words written in Han characters (Kanji) allows both sighted users and screen readers
                to read/pronounce the words correctly. Note that screen readers will speak the word
                twice: the Han characters (Kanji) that can be pronounced in a wrong way are read first
-               and then kana is spoken in order to provide the correct reading.
-               
-            </p>
-            
-         </li>
-         
-         <li>
-            
-            <p>
-               								       
-               <strong>Showing the reading of the words by ruby element.</strong>
-               							     
-            </p>
-            
-            <p>Web content using XHTML 1.1 provides kana (phonetic syllabary characters) written
+               and then kana is spoken in order to provide the correct reading.</dd>
+         <dt>Showing the reading of the words by ruby element</dt>
+         <dd>Web content using HTML provides kana (phonetic syllabary characters) written
                above the characters to show the reading (pronunciation) of the words by using the
-               ruby element.
-               
-            </p>
-            
-         </li>
-         
-         <li>
-            
-            <p>
-               								       
-               <strong>Providing sound files of the pronunciation.</strong>
-               							     
-            </p>
-            
-            <p>A document includes some words whose meaning cannot be determined without knowing
+               ruby element.</dd>
+         <dt>Providing sound files of the pronunciation</dt>
+         <dd>A document includes some words whose meaning cannot be determined without knowing
                the correct pronunciation. Each word is linked to a sound file that gives the correct
-               pronunciation. Users can select these links to find out how to pronounce the words.
-               
-            </p>
-            
-         </li>
-         
-         <li>
-            
-            <p>
-               								       
-               <strong>Including pronunciation information in the glossary.</strong>
-               							     
-            </p>
-            
-            <p>
-               A Web page includes a glossary section. Some items in the glossary include pronunciation
+               pronunciation. Users can select these links to find out how to pronounce the words.</dd>
+         <dt>Including pronunciation information in the glossary</dt>
+         <dd>A Web page includes a glossary section. Some items in the glossary include pronunciation
                information as well as definitions. Words in the content whose meaning cannot be determined
-               without knowing their pronunciation are linked to the appropriate entries in the glossary.
-               
-            </p>
-            
-         </li>
-         
-         <li>
-            
-            <p>
-               								       
-               <strong>Text that includes pronunciation information for characters shared by several languages
-                  but pronounced differently in each language
-               </strong>
-               							     
-            </p>
-            
-            <p>A Japanese university Web site includes several short phrases quoted from scholarly
+               without knowing their pronunciation are linked to the appropriate entries in the glossary.</dd>
+         <dt>Text that includes pronunciation information for characters shared by several languages
+                  but pronounced differently in each language</dt>
+         <dd>A Japanese university Web site includes several short phrases quoted from scholarly
                texts in Chinese and Korean. The quotations are written using the same script as the
                Japanese text. Pronunciation information is provided to show the correct reading of
-               the Chinese and Korean characters.
-               
-            </p>
-            
-         </li>
-         
-      </ul>
+               the Chinese and Korean characters.</dd>
+      </dl>
       
       <div class="note">
          
@@ -180,40 +125,40 @@ <h2>Techniques for Pronunciation</h2>
          <h3>Sufficient Techniques for Pronunciation</h3>
          
          
-         <ol>
+         <ul>
             
             <li>
                									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G120" class="general">G120: Providing the pronunciation immediately following the word</a>
+               <a href="../Techniques/general/G120" class="general">G120: Providing the pronunciation immediately following the word</a>
                								       
             </li>
             
             <li>
                									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G121" class="general">G121: Linking to pronunciations</a>
+               <a href="../Techniques/general/G121" class="general">G121: Linking to pronunciations</a>
                								       
             </li>
             
             <li> 
                
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G62" class="general">Providing a Glossary</a> that includes pronunciation information for words that have a unique pronunciation
+               <a href="../Techniques/general/G62" class="general">Providing a Glossary</a> that includes pronunciation information for words that have a unique pronunciation
                in the content and have meaning that depends on pronunciation
                
             </li>
             
             <li>
                									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G163" class="general">Using standard diacritical marks that can be turned off</a>
+               <a href="../Techniques/general/G163" class="general">Using standard diacritical marks that can be turned off</a>
                								       
             </li>
             
             <li> 
                
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/html/H62" class="html">Using the ruby element</a> (XHTML 1.1)
+               <a href="../Techniques/html/H62" class="html">Using the ruby element</a>
                
             </li>
             
-         </ol>
+         </ul>
          
       </section>
       
diff --git a/understanding/20/re-authenticating.html b/understanding/20/re-authenticating.html
index d9dd8e0814..f8ac890d7a 100644
--- a/understanding/20/re-authenticating.html
+++ b/understanding/20/re-authenticating.html
@@ -3,11 +3,20 @@
 <head>
    <meta charset="UTF-8"></meta>
    <title>Understanding Re-authenticating</title>
-   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link>
+   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/>
 </head>
 <body>
    <h1>Understanding Re-authenticating</h1>
    
+   <section id="brief">
+      <h2>In brief</h2>
+      <dl>
+         <dt>Goal</dt><dd>Users do not lose information or context due to reauthentication.</dd>
+         <dt>What to do</dt><dd>Preserve users' prior activity and data through reauthentication.</dd>
+         <dt>Why it's important</dt><dd>Some people may require additional time to complete an activity.</dd> 
+      </dl>
+
+   </section>
    
    <section id="intent">
       <h2>Intent of Re-authenticating</h2>
@@ -59,67 +68,30 @@ <h2>Benefits of Re-authenticating</h2>
    <section id="examples">
       <h2>Examples of Re-authenticating</h2>
       
-      
-      <ul>
-         
-         <li>
-            
-            <p>
-               								       
-               <strong>A shopping site checkout</strong>
-               							     
-            </p>
-            
-            <p>A user with extremely limited use of the hands is logged into a shopping site. It
+      <dl>
+         <dt>A shopping site checkout</dt>
+         <dd>A user with extremely limited use of the hands is logged into a shopping site. It
                takes so long to enter credit card information into the application that a time limit
                occurs while the user is performing the checkout process. When the user returns to
                the checkout process and submits the form, the site returns a login screen to re-authenticate.
                After the user logs in, the check out process is restored with the same information
                and at the same stage. The user did not lose any data because the server had temporarily
                accepted and stored the submission even though the session had timed out and restored
-               the user to the same state after re-authentication was completed.
-            </p>
-            
-         </li>
-         
-         <li>
-            
-            <p>
-               								       
-               <strong>Authentication in an email program</strong>
-               							     
-            </p>
-            
-            <p>An email program has an authentication time-out after 30 minutes. The program prompts
+               the user to the same state after re-authentication was completed.</dd>
+         <dt>Authentication in an email program</dt>
+         <dd>An email program has an authentication time-out after 30 minutes. The program prompts
                the user several minutes before the time-out occurs and provides a link to open a
                new window in order to re-authenticate. The original window with the in-progress email
-               remains intact and, after re-authentication, the user may send that data.
-            </p>
-            
-         </li>
-         
-         <li>
-            
-            <p>
-               								       
-               <strong>A questionnaire with a time limit
-                  
-               </strong>
-               							     
-            </p>
-            
-            <p>A long questionnaire provided within a single Web page has information at the beginning
+               remains intact and, after re-authentication, the user may send that data.</dd>
+         <dt>A questionnaire with a time limit</dt>
+         <dd>A long questionnaire provided within a single Web page has information at the beginning
                that indicates that the session will time out after 15 minutes. The user is also informed
                that the questionnaire can be saved at any point and completed at a later time. Within
                the Web page there are several buttons provided to save the partially completed form.
                In addition, with JavaScript in the list of accessibility-supported content technologies
                that are relied upon, the user can elect to be alerted via a pop-up if the session
-               is close to timing out. 
-            </p>
-            
-         </li>
-         
-      </ul>
+               is close to timing out.</dd>
+      </dl>
       
    </section>
    
@@ -137,7 +109,7 @@ <h2>Techniques for Re-authenticating</h2>
          <h3>Sufficient Techniques for Re-authenticating</h3>
          
          
-         <ol>
+         <ul>
             
             <li>
                
@@ -149,13 +121,13 @@ <h3>Sufficient Techniques for Re-authenticating</h3>
                   
                   <li>
                      											             
-                     <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G105" class="general">Saving data so that it can be used after a user re-authenticates</a>
+                     <a href="../Techniques/general/G105" class="general">Saving data so that it can be used after a user re-authenticates</a>
                      										           
                   </li>
                   
                   <li>
                      											             
-                     <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G181" class="general">Encoding user data as hidden data in re-authorization page</a>
+                     <a href="../Techniques/general/G181" class="general">Encoding user data as hidden data in re-authorization page</a>
                      										           
                   </li>
                   
@@ -163,7 +135,7 @@ <h3>Sufficient Techniques for Re-authenticating</h3>
                
             </li>
             
-         </ol>
+         </ul>
          
          <div class="note">
             
@@ -190,7 +162,7 @@ <h3>Failures for Re-authenticating</h3>
             
             <li>
                									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/failures/F12" class="failure">Failure due to having a session time limit without a mechanism for saving user's input
+               <a href="../Techniques/failures/F12" class="failure">Failure due to having a session time limit without a mechanism for saving user's input
                   and re-establishing that information upon re-authentication
                </a>
                								       
diff --git a/understanding/20/readable.html b/understanding/20/readable.html
index 14638dea8e..9bc2656e11 100644
--- a/understanding/20/readable.html
+++ b/understanding/20/readable.html
@@ -3,7 +3,7 @@
 <head>
    <meta charset="UTF-8"></meta>
    <title>Understanding Readable</title>
-   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link>
+   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/>
 </head>
 <body>
    <h1>Understanding Readable</h1>
diff --git a/understanding/20/reading-level.html b/understanding/20/reading-level.html
index 1855ccdd87..26c90be58c 100644
--- a/understanding/20/reading-level.html
+++ b/understanding/20/reading-level.html
@@ -3,11 +3,20 @@
 <head>
    <meta charset="UTF-8"></meta>
    <title>Understanding Reading Level</title>
-   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link>
+   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/>
 </head>
 <body>
    <h1>Understanding Reading Level</h1>
    
+   <section id="brief">
+      <h2>In brief</h2>
+      <dl>
+         <dt>Goal</dt><dd>Users can get a simplified version of complex information.</dd>
+         <dt>What to do</dt><dd>When text information becomes complex, create a more easily understood version.</dd>
+         <dt>Why it's important</dt><dd>More people, especially those with cognitive disabilities, can understand the meaning of content.</dd> 
+      </dl>
+
+   </section>
    
    <section id="intent">
       <h2>Intent of Reading Level</h2>
@@ -106,31 +115,22 @@ <h2>Intent of Reading Level</h2>
          Readability formulas are available for at least some languages when running the spell
          checkers in popular software if you specify in the options of this engine that you
          want to have the statistics when it has finished checking your documents.
-         
-         
       </p>
       
-      Levels of education
-      
-      
-      Primary education 
-      Lower secondary education 
-      Upper secondary education 
-      Advanced education 
+      <h3>Levels of education</h3>
       
+      <dl>
+         <dt>Primary education</dt>
+         <dd>First 6 years of school</dd>
+         <dt>Lower secondary education</dt>
+         <dd>7-9 years of school</dd>
+         <dt>Upper secondary education</dt>
+         <dd>10-12 years of school</dd>
+         <dt>Advanced education</dt>
+         <dd>More than 12 years of school</dd>
+      </dl>
       
-      First 6 years of school
-      7-9 years of school
-      10-12 years of school
-      More than 12 years of school
-      
-      
-      
-      
-      <p>Adapted from International Standard Classification of Education
-         [[UNESCO]] 
-         
-      </p>
+      <p>Adapted from <a href="https://uis.unesco.org/en/topic/international-standard-classification-education-isced">International Standard Classification of Education (UNESCO)</a>.</p>
       
       <div class="note">
          
@@ -169,110 +169,49 @@ <h2>Benefits of Reading Level</h2>
    <section id="examples">
       <h2>Examples of Reading Level</h2>
       
-      
-      <ol>
-         
-         <li>
-            
-            <p>
-               								       
-               <strong>A scientific journal including readable summaries of complex research articles</strong>
-               							     
-            </p>
-            
-            <p>A scientific journal includes articles written in highly technical language aimed
+      <dl>
+         <dt>A scientific journal including readable summaries of complex research articles</dt>
+         <dd>A scientific journal includes articles written in highly technical language aimed
                at specialists in the field.  The journal's Table of Contents page includes a plain-language
                summary of each article. The summaries are intended for a general audience with eight
                years of school. The metadata for the journal uses the Dublin Core specification to
                identify the education level of the articles' intended audience as "advanced," and
                the education level of the intended audience for the summaries as "lower secondary
-               education."
-            </p>
-            
-         </li>
-         
-         <li>
-            
-            <p>
-               								       
-               <strong>Medical information for members of the public.</strong>
-               							     
-            </p>
-            
-            <p>A medical school operates a Web site that explains recent medical and scientific discoveries.
+               education."</dd>
+         <dt>Medical information for members of the public</dt>
+         <dd>A medical school operates a Web site that explains recent medical and scientific discoveries.
                The articles on the site are written for people without medical training. Each article
                uses the Dublin Core metadata specification to identify the education level of the
                intended audience as "lower secondary education" and includes the Flesch Reading Ease
                score for the article. A link on each page displays the education level and other
                metadata. No supplemental content is required because people who read at the lower
-               secondary education level can read the articles.
-            </p>
-            
-         </li>
-         
-         <li>
-            
-            <p>
-               								       
-               <strong>An e-learning application. </strong>
-               							     
-            </p>
-            
-            <p>An on-line course about Spanish cultural history includes a unit on Moorish architecture.
+               secondary education level can read the articles.</dd>
+         <dt>An e-learning application</dt>
+         <dd>An on-line course about Spanish cultural history includes a unit on Moorish architecture.
                The unit includes text written for students with different reading abilities. Photographs
                and drawings of buildings illustrate architectural concepts and styles. Graphic organizers
                are used to illustrate complex relationships, and an audio version using synthetic
                speech is available. The metadata for each version describes the academic level of
                the content and includes a readability score based on formulas developed for Spanish-language
                text. The learning application uses this metadata and metadata about the students
-               to provide versions of instructional content that match the needs of individual students.
-            </p>
-            
-         </li>
-         
-         <li>
-            
-            <p>
-               								       
-               <strong>Science information that requires a reading ability at the lower secondary education
-                  level.
-               </strong>
-               							     
-            </p>
-            
+               to provide versions of instructional content that match the needs of individual students.</dd>
+         <dt>Science information that requires a reading ability at the lower secondary education level</dt>
+         <dd>
             <p>The text below (116 words total) requires a reading ability of grade 4.2 in the United
                States according to the Flesch-Kincaid formula. In the US, grade 4.2 is at the primary
-               education level.
-            </p>
-            
+               education level.</p>
             <p>Science is about testing — and about looking closely. Some scientists use microscopes
-               to take a close look. We're going to use a simple piece of paper.
-            </p>
-            
+               to take a close look. We're going to use a simple piece of paper.</p>
             <p>Here's what you do: Print this page and cut out the square to make a "window" one
-               inch square. (It's easiest to fold the page in half before you cut.)
-            </p>
-            
+               inch square. (It's easiest to fold the page in half before you cut.)</p>
             <p>Choose something interesting: a tree trunk, a leaf, flower, the soil surface, or a
-               slice of soil from a shovel.
-            </p>
-            
-            <p>Put your window over the thing and look at it closely. Take your time — this is not
-               a race.
-            </p>
-            
+               slice of soil from a shovel.</p>
+            <p>Put your window over the thing and look at it closely. Take your time — this is not a race.</p>
             <p>To help you see more details, draw a picture of what's inside your square.</p>
-            
             <p>Now let's think about what you've found. </p>
-            
-            <p>
-               (Source: Howard Hughes Medical Institute "CoolScience for Kids" Project)
-               
-            </p>
-            
-         </li>
-         
-      </ol>
+            <p>(Source: Howard Hughes Medical Institute "CoolScience for Kids" Project)</p>
+         </dd>
+      </dl>
       
    </section>
    
@@ -282,77 +221,56 @@ <h2>Resources for Reading Level</h2>
       
       <ul>
          
-         <li>The Plain Language Association INternational (PLAIN) Web site provides many useful
-            resources to help writers produce documents that communicate clearly in a variety
-            of cultural and rhetorical contexts. Refer to: 
-            <a href="http://plainlanguagenetwork.org/">http://plainlanguagenetwork.org/</a>.
+         <li>The <a href="https://plainlanguagenetwork.org/">Plain Language Association International</a> (PLAIN) Web site provides many useful resources to help writers produce documents that communicate clearly in a variety of cultural and rhetorical contexts.
             
          </li>
          
          <li> 
             
-            <a href="http://www.plainlanguage.gov ">The US Government's plain language Web site</a> provides general information about plain language as well as information about use
+            <a href="https://www.plainlanguage.gov/">The US Government's plain language Web site</a> provides general information about plain language as well as information about use
             of plain language in US Government documents, including legal requirements
          </li>
          
          <li> 
             
-            <a href="http://www.plainenglish.co.uk/">The Plain English Campaign Web site</a> provides useful information and guidance for authors writing in English. 
+            <a href="https://www.plainenglish.co.uk/">The Plain English Campaign Web site</a> provides useful information and guidance for authors writing in English. 
          </li>
          
          <li> 
             
-            <a href="http://juicystudio.com/services/readability.php">Juicy Studio's Readability Test</a> analyzes the readability of all rendered content. 
+            <a href="https://juicystudio.com/services/readability.php">Juicy Studio's Readability Test</a> analyzes the readability of all rendered content. 
             
             
          </li>
          
          <li>
             								       
-            <a href="http://dublincore.org/documents/usageguide/qualifiers.shtml">Entry for Audience Education Level. Using Dublin Core – Dublin Core Qualifiers</a>
+            <a href="https://www.dublincore.org/specifications/dublin-core/usageguide/qualifiers/">Entry for Audience Education Level. Using Dublin Core – Dublin Core Qualifiers</a>
             							     
          </li>
          
          <li>
             								       
-            <a href="http://www.imsglobal.org/profiles/lipinfo01.html#tab6.3">IMS Learner Information Packaging Model Information Specification, Table 6.3  "accessibility"
+            <a href="https://www.imsglobal.org/profiles/lipinfo01.html#tab6.3">IMS Learner Information Packaging Model Information Specification, Table 6.3  "accessibility"
                learner information data structure detailed description
             </a>
             							     
          </li>
          
-         <li> 
-            
-            <a href="http://www.textquest.de/pages/en/analysis-of-texts/readability-analysis.php">TextQuest.de</a> lists references for readability formulas for different languages, including English,
-            German, Spanish, Dutch, French, and Swedish.
-         </li>
-         
-         <li> 
-            
-            <a href="http://taalunieversum.org/publicaties/geletterd_in_de_lage_landen/richtlijnen.php">
-               Richtlijnen Keurmerk Makkelijk Lezen
-               
-            </a> are the guidelines used by the Stichting Makkelijk Lezen (Easy Reading Foundation). 
-            
-            
-         </li>
-         
          <li>
             
-            <a href="http://www.leesbaarnederlands.nl/">
-               Leesbaar Nederlands
+            <a href="https://www.leesbaarnederlands.nl/">
+               <span lang="nl">Leesbaar Nederlands</span>
                
             </a> ("Readable Dutch") contains guidelines for writing text that is accessible for people
             with a reading disability. These guidelines address language, content and design.
             
-            
-            
          </li>
          
          
          <li>
             								       
-            <a href="http://inclusion-europe.eu/">European Easy-to-Read Guidelines</a>
+            <a href="https://www.inclusion-europe.eu/">European Easy-to-Read Guidelines</a>
             							     
          </li>
          
@@ -374,11 +292,11 @@ <h2>Techniques for Reading Level</h2>
          <h3>Sufficient Techniques for Reading Level</h3>
          
          
-         <ol>
+         <ul>
             
             <li>
                									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G86" class="general">Providing a text summary that requires reading ability less advanced than the upper
+               <a href="../Techniques/general/G86" class="general">Providing a text summary that requires reading ability less advanced than the upper
                   secondary education level
                </a>
                								       
@@ -386,7 +304,7 @@ <h3>Sufficient Techniques for Reading Level</h3>
             
             <li>
                									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G103" class="general">Providing visual illustrations, pictures, and symbols to help explain ideas, events,
+               <a href="../Techniques/general/G103" class="general">Providing visual illustrations, pictures, and symbols to help explain ideas, events,
                   and processes
                </a>
                								       
@@ -394,25 +312,25 @@ <h3>Sufficient Techniques for Reading Level</h3>
             
             <li>
                									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G79" class="general">Providing a spoken version of the text</a>
+               <a href="../Techniques/general/G79" class="general">Providing a spoken version of the text</a>
                								       
             </li>
             
             <li>
                									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G153" class="general">Making the text easier to read</a>
+               <a href="../Techniques/general/G153" class="general">Making the text easier to read</a>
                								       
             </li>
             
             <li>
                									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G160" class="general">Providing sign language versions of information, ideas, and processes that must be
+               <a href="../Techniques/general/G160" class="general">Providing sign language versions of information, ideas, and processes that must be
                   understood in order to use the content
                </a>
                								       
             </li>
             
-         </ol>
+         </ul>
          
          <div class="note">
             
diff --git a/understanding/20/resize-text.html b/understanding/20/resize-text.html
index eb05e91aff..2fc1cadaf2 100644
--- a/understanding/20/resize-text.html
+++ b/understanding/20/resize-text.html
@@ -2,44 +2,53 @@
 <html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
 <head>
    <meta charset="UTF-8"></meta>
-   <title>Understanding Resize text</title>
-   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link>
+   <title>Understanding Resize Text</title>
+   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/>
 </head>
 <body>
-   <h1>Understanding Resize text</h1>
+   <h1>Understanding Resize Text</h1>
    
+   <section id="brief">
+		<h2>In brief</h2>
+		<dl>
+         <dt>Goal</dt><dd>Text can be enlarged.</dd>
+         <dt>What to do</dt><dd>Ensure text can be doubled in size.</dd>
+         <dt>Why it's important</dt><dd>Some people can only read text when it is bigger.</dd> 
+      </dl>
+
+   </section>
    
    <section id="intent">
-      <h2>Intent of Resize text</h2>
-      
-      
+      <h2>Intent of Resize Text</h2>
+
       <p>The intent of this Success Criterion is to ensure that visually rendered text, including
-         text-based controls (text characters that have been displayed so that they can be
-         seen [vs. text characters that are still in data form such as ASCII]) can be scaled
-         successfully so that it can be read directly by people with mild visual disabilities,
-         without requiring the use of assistive technology such as a screen magnifier. Users
-         may benefit from scaling all content on the Web page, but text is most critical. 
+         controls and labels using text, can be made larger so that it can be read more easily by
+         people with milder visual impairments, without requiring the use of assistive technology
+         (such as a screen magnifier). Users may benefit from scaling all content on the Web page,
+         but text is most critical. 
       </p>
       
       <p>The scaling of content is primarily a user agent responsibility. User agents that
          satisfy 
-         <a href="https://www.w3.org/TR/WAI-USERAGENT/guidelines.html#tech-configure-text-scale">UAAG 1.0 Checkpoint 4.1</a> allow users to configure text scale. The author's responsibility is to create Web
-         content that does not prevent the user agent from scaling the content effectively.
+         <a href="https://www.w3.org/TR/WAI-USERAGENT/guidelines.html#tech-configure-text-scale">UAAG 1.0 Checkpoint 4.1</a>
+         allow users to configure text scale through a number of mechanisms - including zoom (of the entire page's content),
+         magnification, text-only resizing, and allowing the user to configure a size for rendered text.
+         The author's responsibility is to create Web content that does not prevent the user agent from scaling the content effectively.
          Authors may satisfy this Success Criterion by verifying that content does not interfere
          with user agent support for resizing text, including text-based controls, or by providing
          direct support for resizing text or changing the layout. An example of direct support
          might be via server-side script that can be used to assign different style sheets.
       </p>
+
+      <p>Content satisfies the Success Criterion if it can be scaled up to 200% using at least one text scaling
+         mechanism supported by user agents.</p>
       
-      <p>The author cannot rely on the user agent to satisfy this Success Criterion for HTML
-         content if users do not have access to a user agent with zoom support. For example,
-         if they work in an environment that requires them to use IE 6.
-      </p>
       
-      <p>If the author is using a technology whose user agents do not provide zoom support,
-         the author is responsible to provide this type of functionality directly or to provide
-         content that works with the type of functionality provided by the user agent. If the
-         user agent doesn't provide zoom functionality but does let the the user change the
+      <p>If the author is using a technology whose user agents do not provide support for specific text scaling mechanisms,
+         the author is responsible for providing this type of functionality directly, or providing
+         content that works with the type of functionality provided by the user agent. For instance, if the
+         user agent doesn't provide full-page zoom functionality, but does let the the user change the
+
          text size, the author is responsible for ensuring that the content remains usable
          when the text is resized. 
       </p>
@@ -58,7 +67,7 @@ <h2>Intent of Resize text</h2>
          can be accessed, is provided to the user in some way besides the fact that it is truncated.
       </p>
       
-      <p>Content satisfies the Success Criterion if it can be scaled up to 200%, that is, up
+      <p>Content satisfies the Success Criterion if it can be scaled up to 200% - that is, up
          to twice the width and height. Authors may support scaling beyond that limit, however,
          as scaling becomes more extreme, adaptive layouts may introduce usability problems.
          For example, words may be too wide to fit into the horizontal space available to them,
@@ -73,7 +82,7 @@ <h2>Intent of Resize text</h2>
          a minimum magnification of 200%. Above 200%, zoom (which resizes text, images, and
          layout regions and creates a larger canvas that may require both horizontal and vertical
          scrolling) may be more effective than text resizing. Assistive technology dedicated
-         to zoom support would usually be used in such a situation and may provide better accessibility
+         to zoom support would usually be used in such a situation, and may provide better accessibility
          than attempts by the author to support the user directly.
       </p>
       
@@ -83,275 +92,162 @@ <h2>Intent of Resize text</h2>
             we suggest using text wherever possible. It is also harder to change foreground and
             background contrast and color combinations for images of text, which are necessary
             for some users.
-            
          </p>
          
       </div>
+
+      <div class="note">
+         <p>As with most other Success Criteria, this criterion applies to each variation of the page that is automatically presented for various screen sizes (e.g. media query variations in a responsive site). In an implementation where text does not consistently increase its size as people zoom in (such as when it is transformed based on a media query to adapt to small-screen usage), it must still be possible to get to 200% enlargement in order to satisfy the criterion.</p>
+         <p>For example, if at the default browser setting of 100% zoom, text is set at 20px when the window is 1280 CSS pixels wide, at 200% zoom it will visually appear at twice the size. After zooming by 400% the page reflows to fit within the 320 CSS pixel viewport, the author may decide to set the page's text size to 10px. The text is now half the original size in CSS pixels, but as it has been enlarged to 400%, it is still displayed at twice the size compared to the default browser setting at 100% zoom. It is not required to achieve 200% text enlargement while remaining inside a specific breakpoint (as zooming may result in the variation for a new breakpoint becoming active), but it should still be possible to get 200% text enlargement in some way compared to the default 100% zoom.</p>
+      </div>
       
       <p>See also 
          <a href="visual-presentation">1.4.3: Visual Presentation</a>.
       </p>
       
-      
    </section>
    <section id="benefits">
-      <h2>Benefits of Resize text</h2>
-      
+      <h2>Benefits of Resize Text</h2>
       
       <ul>
-         
          <li>
             This Success Criterion helps people with low vision by letting them increase text
             size in content so that they can read it.
-            
          </li>
-         
       </ul>
-      
    </section>
    
    <section id="examples">
-      <h2>Examples of Resize text</h2>
-      
-      
+      <h2>Examples of Resize Text</h2>
+
       <ul>
-         
          <li>
             A user with vision impairments increases the text size on a Web page in a browser
             from 1 em to 1.2 ems. While the user could not read the text at the smaller size,
-            she can read the larger text. All the information on the page is still displayed when
+            they can read the larger text. All the information on the page is still displayed when
             the larger font is used for the text.
-            
          </li>
-         
          <li>
             A Web page contains a control for changing the scale of the page. Selecting different
             settings changes the layout of the page to use the best design for that scale.
-            
          </li>
-         
          <li>
-            A user uses a zoom function in his user agent to change the scale of the content.
-            All the content scales uniformly, and the user agent provides scroll bars, if necessary.
-            
+            A user changes the scale of the content with the browser's full-page zoom function.
+            All the content scales uniformly, and the browser provides scroll bars, if necessary.
          </li>
-         
       </ul>
-      
    </section>
    
    <section id="resources">
-      <h2>Resources for Resize text</h2>
-      
-      
+      <h2>Resources for Resize Text</h2>
+
       <ul>
-         
          <li>
-            								       
             <a href="https://www.w3.org/TR/CSS2/box.html">CSS 2 Box Model</a>
-            							     
          </li>
-         
          <li>
-            								       
             <a href="https://www.w3.org/TR/CSS2/visuren.html">CSS 2 Visual formatting Model</a>
-            							     
          </li>
-         
          <li>
-            								       
             <a href="https://www.w3.org/TR/CSS2/visudet.html">CSS 2 Visual formatting Model Details</a>
-            							     
          </li>
-         
          <li>
-            								       
             <a href="http://www.456bereastreet.com/archive/200504/about_fluid_and_fixed_width_layouts/">About fluid and fixed width layouts</a>
-            							     
          </li>
-         
          <li>
-            								       
             <a href="http://cookiecrook.com/AIR/2003/train/accessiblecss.php">Accessible CSS</a>
-            							     
          </li>
-         
       </ul>
-      
    </section>
    
    <section id="techniques">
-      <h2>Techniques for Resize text</h2>
-      
-      
+      <h2>Techniques for Resize Text</h2>
+
       <section id="sufficient">
          <h3>Sufficient Techniques for Resize text</h3>
-         
-         
          <ol>
-            
-            <li>
-               									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G142" class="general">Using a technology that has commonly-available user agents that support zoom</a>
-               								       
-            </li>
-            
             <li>
-               
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/silverlight/SL22" class="silverlight"></a>
-               
+               <a href="../Techniques/general/G142" class="general">Using a technology that has commonly-available user agents that support zoom</a>
             </li>
-            
             <li>
-               
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/silverlight/SL23" class="silverlight"></a>
-               
-            </li>
-            
-            <li>
-               
                <p>
                   Ensuring that text containers resize when the text resizes 
                   <strong>AND</strong> using measurements that are relative to other measurements in the content  by using
                   one or more of the following techniques:
                </p>
-               
                <ul>
-                  
                   <li>
-                     											             
-                     <a href="https://www.w3.org/WAI/WCAG21/Techniques/css/C28" class="css">Specifying the size of text containers using em units</a>
-                     										           
+                     <a href="../Techniques/css/C28" class="css">Specifying the size of text containers using em units</a>
                   </li>
-                  
                   <li>
-                     
                      <p>Techniques for relative measurements</p>
-                     
                      <ul>
-                        
                         <li>
-                           													                 
-                           <a href="https://www.w3.org/WAI/WCAG21/Techniques/css/C12" class="css">Using percent for font sizes</a>
-                           												               
+                           <a href="../Techniques/css/C12" class="css">Using percent for font sizes</a>
                         </li>
-                        
                         <li>
-                           													                 
-                           <a href="https://www.w3.org/WAI/WCAG21/Techniques/css/C13" class="css">Using named font sizes</a>
-                           												               
+                           <a href="../Techniques/css/C13" class="css">Using named font sizes</a>
                         </li>
-                        
                         <li>
-                           													                 
-                           <a href="https://www.w3.org/WAI/WCAG21/Techniques/css/C14" class="css">Using em units for font sizes</a>
-                           												               
+                           <a href="../Techniques/css/C14" class="css">Using em units for font sizes</a>
                         </li>
-                        
                      </ul>
-                     
                   </li>
-                  
                   <li>
-                     
                      <p>Techniques for text container resizing</p>
-                     
                      <ul>
-                        
                         <li>
-                           													                 
-                           <a href="https://www.w3.org/WAI/WCAG21/Techniques/client-side-script/SCR34" class="script">Calculating size and position in a way that scales with text size (Scripting)</a>
-                           												               
+                           <a href="../Techniques/client-side-script/SCR34" class="script">Calculating size and position in a way that scales with text size (Scripting)</a>
                         </li>
-                        
                         <li>
-                           													                 
-                           <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G146" class="general">Using liquid layout</a>
-                           												               
+                           <a href="../Techniques/general/G146" class="general">Using liquid layout</a>
                         </li>
-                        
                      </ul>
-                     
                   </li>
-                  
                </ul>
-               
             </li>
-            
             <li>
-               									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G178" class="general">Providing controls on the Web page that incrementally change the size of the text
-                  
+               <a href="../Techniques/general/G178" class="general">Providing controls on the Web page that incrementally change the size of the text
                </a>
-               								       
             </li>
-            
             <li>
-               									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G179" class="general">Ensuring that there is no loss of content or functionality when the text resizes and
+               <a href="../Techniques/general/G179" class="general">Ensuring that there is no loss of content or functionality when the text resizes and
                   text containers do not resize
                </a>
-               								       
             </li>
-            
-         </ol>
-         
+         </ul>
       </section>
       
       <section id="advisory">
-         <h3>Additional Techniques (Advisory) for Resize text</h3>
-         
-         
+         <h3>Additional Techniques (Advisory) for Resize Text</h3>
          <ul>
-            
             <li>
-               									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/css/C17" class="css">Scaling form elements which contain text</a>
-               								       
+               <a href="../Techniques/css/C17" class="css">Scaling form elements which contain text</a>
             </li>
-            
-            
             <li>
-               									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/css/C20" class="css">C20: Using ems to set column width so that lines can average 80 characters or less</a>
-               								       
+               <a href="../Techniques/css/C20" class="css">C20: Using ems to set column width so that lines can average 80 characters or less</a>
             </li>
-            
             <li>
-               									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/css/C22" class="css">Using CSS to control visual presentation of text</a>
-               								       
+               <a href="../Techniques/css/C22" class="css">Using CSS to control visual presentation of text</a>
             </li>
-            
          </ul>
-         
       </section>
       
       <section id="failure">
-         <h3>Failures for Resize text</h3>
-         
-         
+         <h3>Failures for Resize Text</h3>
          <ul>
-            
             <li>
-               									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/failures/F69" class="failure">Failure of 1.4.3 and 1.4.6 when resizing visually rendered text up to 200 per cent
+               <a href="../Techniques/failures/F69" class="failure">Failure of 1.4.3 and 1.4.6 when resizing visually rendered text up to 200 per cent
                   causes the text to be clipped, truncated or obscured
                </a>
-               								       
             </li>
-            
             <li>
-               									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/failures/F80" class="failure">Failure of Success Criterion 1.4.4 and Success Criterion 1.4.7 when text-based form
+               <a href="../Techniques/failures/F80" class="failure">Failure of Success Criterion 1.4.4 and Success Criterion 1.4.7 when text-based form
                   controls do not resize when visually rendered text is resized up to 200%
                </a>
-               								       
             </li>
-         	<li><a href="../../techniques/failures/F94">F94</a></li>
-            
+            <li><a href="../../techniques/failures/F94">F94</a></li>
          </ul>
-         
       </section>
       
    </section>
diff --git a/understanding/20/section-headings.html b/understanding/20/section-headings.html
index ba92e59ae0..ba8b3d5b0b 100644
--- a/understanding/20/section-headings.html
+++ b/understanding/20/section-headings.html
@@ -3,11 +3,20 @@
 <head>
    <meta charset="UTF-8"></meta>
    <title>Understanding Section Headings</title>
-   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link>
+   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/>
 </head>
 <body>
    <h1>Understanding Section Headings</h1>
    
+   <section id="brief">
+      <h2>In brief</h2>
+      <dl>
+         <dt>Goal</dt><dd>Users understand how content is organized in sections.</dd>
+         <dt>What to do</dt><dd>Where content is organized in sections, provide section headings.</dd>
+         <dt>Why it's important</dt><dd>People can orient themselves, especially those with cognitive or visual disabilities.</dd> 
+      </dl>
+
+   </section>
    
    <section id="intent">
       <h2>Intent of Section Headings</h2>
@@ -15,9 +24,8 @@ <h2>Intent of Section Headings</h2>
       
       <p>The intent of this Success Criterion is to provide headings for sections of a Web
          page, when the page is organized into sections. For instance, long documents are often
-         divided into a variety of chapters, chapters have subtopics and subtopics are divided
-         into various sections, sections into paragraphs, etc. When such sections exist, they
-         need to have headings that introduce them. This clearly indicates the organization
+         divided into a variety of chapters, chapters have subtopics, etc. When such sections exist,
+         they need to have headings that introduce them. This clearly indicates the organization
          of the content, facilitates navigation within the content, and provides mental "handles"
          that aid in comprehension of the content. Other page elements may complement headings
          to improve presentation (e.g., horizontal rules and boxes), but visual presentation
@@ -109,21 +117,21 @@ <h2>Techniques for Section Headings</h2>
          <h3>Sufficient Techniques for Section Headings</h3>
          
          
-         <ol>
+         <ul>
             
             <li>
                									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G141" class="general">Organizing a page using headings</a>
+               <a href="../Techniques/general/G141" class="general">Organizing a page using headings</a>
                								       
             </li>
             	
             <li>
                			
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/html/H69" class="html">Providing heading elements at the beginning of each section of content</a>
+               <a href="../Techniques/html/H69" class="html">Providing heading elements at the beginning of each section of content</a>
                		
             </li>
             
-         </ol>
+         </ul>
          
       </section>
       
diff --git a/understanding/20/seizures.html b/understanding/20/seizures.html
index 047f48bd6d..886fd18bf8 100644
--- a/understanding/20/seizures.html
+++ b/understanding/20/seizures.html
@@ -3,7 +3,7 @@
 <head>
    <meta charset="UTF-8"></meta>
    <title>Understanding Seizures</title>
-   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link>
+   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/>
 </head>
 <body>
    <h1>Understanding Seizures</h1>
diff --git a/understanding/20/sensory-characteristics.html b/understanding/20/sensory-characteristics.html
index c4ca649181..c987e975a4 100644
--- a/understanding/20/sensory-characteristics.html
+++ b/understanding/20/sensory-characteristics.html
@@ -3,16 +3,24 @@
 <head>
    <meta charset="UTF-8"></meta>
    <title>Understanding Sensory Characteristics</title>
-   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link>
+   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/>
 </head>
 <body>
    <h1>Understanding Sensory Characteristics</h1>
    
+   <section id="brief">
+		<h2>In brief</h2>
+		<dl>
+         <dt>Goal</dt><dd>Instructions are understandable by more people.</dd>
+         <dt>What to do</dt><dd> Describe controls by name, not just by appearance or location.</dd>
+         <dt>Why it's important</dt><dd>People who are blind or have low vision need non-visual instructions.</dd> 
+      </dl>
+
+   </section>
    
    <section id="intent">
       <h2>Intent of Sensory Characteristics</h2>
       
-      
       <p>The intent of this Success Criterion is to ensure that all users can access instructions
          for using the content, even when they cannot perceive shape or size or use information
          about spatial location or orientation. 
@@ -22,15 +30,13 @@ <h2>Intent of Sensory Characteristics</h2>
          Some users with disabilities are not able to perceive shape or position due to the
          nature of the assistive technologies they use. 
          This Success Criterion requires that additional information be provided to clarify
-         anything that is dependent on this kind of information.
-         
+         instructions that are dependent on this kind of information.         
       </p>
       
       <p>Providing information using shape and/or location, however, is an effective method
          for many users including those with cognitive limitations.
          This provision should not discourage those types of cues as long as the information
          is also provided in other ways.
-         
       </p>
       
       <p>In some languages, it is commonly understood that "above" refers to the content previous
@@ -38,7 +44,6 @@ <h2>Intent of Sensory Characteristics</h2>
          such languages, if the content being referenced is in the appropriate place in the
          reading order and the references are unambiguous, statements such as "choose one of
          the links below" or "all of the above" would conform to this Success Criterion. 
-         
       </p>
       
       <p>WCAG was designed to apply only to controls that were displayed on a web page. The
@@ -48,8 +53,7 @@ <h2>Intent of Sensory Characteristics</h2>
          (e.g. the arrow shaped key, the round key on the right side). This success criterion
          is not intended to prevent the use of tactile cues in instructions.
       </p>
-      
-      
+           
    </section>
    <section id="benefits">
       <h2>Benefits of Sensory Characteristics</h2>
@@ -58,9 +62,10 @@ <h2>Benefits of Sensory Characteristics</h2>
       <ul>
          
          <li>People who are blind and people who have low vision may not be able to understand
-            information if it is conveyed by shape and/or location. Providing additional information
-            other than shape and/or location will allow them to understand the information conveyed
-            by shape and/or alone.          
+            instructions if they rely only on a description of the shape and/or location of content.
+            Providing additional information in any instructions other than shape and/or location
+            will allow users to understand the instructions even if they cannot perceive shape
+            and/or location.          
          </li>
          
       </ul>
@@ -70,54 +75,24 @@ <h2>Benefits of Sensory Characteristics</h2>
    <section id="examples">
       <h2>Examples of Sensory Characteristics</h2>
       
-      
-      <ul>
-         
-         <li>
-            
-            <p>
-               								       
-               <strong>
-                  Example 1: A schedule of competitive events uses color and shape to distinguish the
-                  time of each event
-                  
-               </strong>
-               							     
-            </p>
-            
-            <p>
-               A table presents a list of times across the top row and a list of events in the first
-               vertical column. The cell corresponding to the time of a particular event has a specific
-               background color and diamond shaped glyph so it can be identified by color and shape.
-               
-               
-            </p>
-            
-         </li>
-         
-         <li>
-            
-            <p>
-               								       
-               <strong>
-                  Example 2: An on-line multi-page survey 
-                  
-               </strong>
-               							     
-            </p>
-            
-            <p>
-               An on-line multi-page survey uses a link implemented as a green arrow icon placed
+      <dl>
+         <dt>Example 1: Instructions for interpreting a schedule of competitive events references
+               colored icons in different shapes to indicate the venue for each event</dt>
+         <dd>A table presents a list of times across the top row and a list of events in the first
+               vertical column and instructions are provided under the table: "Events marked with a
+               blue diamond are played on field A and events marked with a green circle are played
+               on field B." The instructions rely on color and shape only and result in a failure of
+               this criterion.</dd>
+         <dt>Example 2: An online multi-page survey</dt>
+         <dd>An online multi-page survey uses a link implemented as a green arrow icon placed
                in the lower right hand corner of the content to move from one survey page to the
                next. The arrow is clearly labeled with "Next" and the instructions state, "To move
                to the next section of the survey, select the green arrow icon labeled 'Next' in the
-               lower right corner below the last survey question." This example uses both positioning,
-               color and labeling to help identify the icon. 
-            </p>
-            
-         </li>
-         
-      </ul>
+               lower right corner below the last survey question." 
+               The instruction uses positioning and color to help identify the icon; 
+               the instruction does not rely on these sensory characteristics since it also refers to
+               the label, so it passes this criterion.</dd>
+      </dl>
       
    </section>
    
@@ -135,17 +110,17 @@ <h2>Techniques for Sensory Characteristics</h2>
          <h3>Sufficient Techniques for Sensory Characteristics</h3>
          
          
-         <ol>
+         <ul>
             
             <li>
                									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G96" class="general">Providing textual identification of items that otherwise rely only on shape and/or
+               <a href="../Techniques/general/G96" class="general">Providing textual identification of items that otherwise rely only on shape and/or
                   position to be understood
                </a>
                								       
             </li>
             
-         </ol>
+         </ul>
          
       </section>
       
@@ -162,14 +137,14 @@ <h3>Failures for Sensory Characteristics</h3>
             
             <li>
                									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/failures/F14" class="failure">Failure due to identifying content only by its shape or location</a>
+               <a href="../Techniques/failures/F14" class="failure">Failure due to identifying content only by its shape or location</a>
                								       
             </li>
-            
+
             <li>
-               									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/failures/F26" class="failure">Failure due to using a non-text mark alone to convey information</a>
-               								       
+
+               <a href="../Techniques/failures/F26" class="failure">Failure due to using a non-text mark alone to convey information</a>
+               
             </li>
             
          </ul>
diff --git a/understanding/20/sign-language-prerecorded.html b/understanding/20/sign-language-prerecorded.html
index ce2b77cce9..ca1d30b6d3 100644
--- a/understanding/20/sign-language-prerecorded.html
+++ b/understanding/20/sign-language-prerecorded.html
@@ -3,11 +3,20 @@
 <head>
    <meta charset="UTF-8"></meta>
    <title>Understanding Sign Language (Prerecorded)</title>
-   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link>
+   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/>
 </head>
 <body>
    <h1>Understanding Sign Language (Prerecorded)</h1>
    
+   <section id="brief">
+      <h2>In brief</h2>
+      <dl>
+         <dt>Goal</dt><dd>Videos can be accompanied by sign language.</dd>
+         <dt>What to do</dt><dd>Provide sign language interpretation for audio content in existing videos.</dd>
+         <dt>Why it's important</dt><dd>People who are deaf or hard of hearing have more ways to understand multimedia content.</dd> 
+      </dl>
+
+   </section>
    
    <section id="intent">
       <h2>Intent of Sign Language (Prerecorded)</h2>
@@ -51,25 +60,18 @@ <h2>Examples of Sign Language (Prerecorded)</h2>
          
          <li> 
             
-            <strong> Example 1.</strong> A corporation is making an important announcement to all of its employees. The meeting
-            will be held in the main headquarters and streamed to the Web. A sign language interpreter
-            is provided at the meeting location. The live video includes a full view of the sign
-            language interpreter as well as the person presenting.
-         </li>
-         
-         <li> 
-            
-            <strong> Example 2.</strong> The same announcement described in example 1 is also Webcast to remote employees.
-            Since there is only one display available for this, the sign language interpreter
-            is shown in the corner of the display.
+            <strong> Example 1.</strong> A corporation is making an important announcement to all of its employees. The announcement
+            will be held in the main headquarters and later streamed to the Web. A sign language interpreter
+            is provided at the announcement location for the employees that are present in the meeting room. For the Web version of
+            the announcement, the sign language interpreter is shown/superimposed in the corner of the display.
          </li>
          
          <li> 
             
-            <strong> Example 3.</strong> A university is providing an on-line version of a particular lecture by creating
+            <strong> Example 2.</strong> A university is providing an online version of a particular lecture by creating
             a synchronized media presentation of the professor delivering the lecture. The presentation
             includes video of the professor speaking and demonstrating a science experiment. A
-            sign language interpretation of the lecture is created and presented on the Web with
+            sign language interpretation of the lecture is created after the lecture and presented on the Web with
             the synchronized media version.
          </li>
          
@@ -136,11 +138,11 @@ <h2>Techniques for Sign Language (Prerecorded)</h2>
          <h3>Sufficient Techniques for Sign Language (Prerecorded)</h3>
          
          
-         <ol>
+         <ul>
             
             <li>
                									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G54" class="general">Including a sign language interpreter in the corner of the video stream</a>
+               <a href="../Techniques/general/G54" class="general">Including a sign language interpreter in the corner of the video stream</a>
                								       
             </li>
             
@@ -149,7 +151,7 @@ <h3>Sufficient Techniques for Sign Language (Prerecorded)</h3>
                
                <p> 
                   
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G81" class="general">Providing a synchronized video of the sign language interpreter that can be displayed
+                  <a href="../Techniques/general/G81" class="general">Providing a synchronized video of the sign language interpreter that can be displayed
                      in a different viewport or overlaid on the image by the player
                   </a> using one of the following techniques
                   
@@ -159,7 +161,7 @@ <h3>Sufficient Techniques for Sign Language (Prerecorded)</h3>
                   
                   <li>
                      											             
-                     <a href="https://www.w3.org/WAI/WCAG21/Techniques/smil/SM13" class="smil">Providing sign language interpretation through synchronized video streams in SMIL
+                     <a href="../Techniques/smil/SM13" class="smil">Providing sign language interpretation through synchronized video streams in SMIL
                         1.0
                      </a>
                      										           
@@ -167,7 +169,7 @@ <h3>Sufficient Techniques for Sign Language (Prerecorded)</h3>
                   
                   <li>
                      											             
-                     <a href="https://www.w3.org/WAI/WCAG21/Techniques/smil/SM14" class="smil">Providing sign language interpretation through synchronized video streams in SMIL
+                     <a href="../Techniques/smil/SM14" class="smil">Providing sign language interpretation through synchronized video streams in SMIL
                         2.0
                      </a>
                      										           
@@ -177,7 +179,7 @@ <h3>Sufficient Techniques for Sign Language (Prerecorded)</h3>
                
             </li>
             
-         </ol>
+         </ul>
          
       </section>
       
diff --git a/understanding/20/text-alternatives.html b/understanding/20/text-alternatives.html
index 5f94408fbd..3e1390c4dc 100644
--- a/understanding/20/text-alternatives.html
+++ b/understanding/20/text-alternatives.html
@@ -3,7 +3,7 @@
 <head>
    <meta charset="UTF-8"></meta>
    <title>Understanding Text Alternatives</title>
-   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link>
+   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/>
 </head>
 <body>
    <h1>Understanding Text Alternatives</h1>
diff --git a/understanding/20/three-flashes-or-below-threshold.html b/understanding/20/three-flashes-or-below-threshold.html
index 20e30c5642..9fa345e15f 100644
--- a/understanding/20/three-flashes-or-below-threshold.html
+++ b/understanding/20/three-flashes-or-below-threshold.html
@@ -3,11 +3,20 @@
 <head>
    <meta charset="UTF-8"></meta>
    <title>Understanding Three Flashes or Below Threshold</title>
-   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link>
+   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/>
 </head>
 <body>
    <h1>Understanding Three Flashes or Below Threshold</h1>
    
+   <section id="brief">
+		<h2>In brief</h2>
+		<dl>
+         <dt>Goal</dt><dd>Content does not trigger seizures.</dd>
+         <dt>What to do</dt><dd>Avoid content that flashes, or keep it under thresholds.</dd>
+         <dt>Why it's important</dt><dd>Flashing content can cause migraines, dizziness, nausea, and seizures.</dd> 
+      </dl>
+
+   </section>
    
    <section id="intent">
       <h2>Intent of Three Flashes or Below Threshold</h2>
@@ -20,8 +29,8 @@ <h2>Intent of Three Flashes or Below Threshold</h2>
       <p>Individuals who have photosensitive seizure disorders can have a seizure triggered
          by content that flashes at certain frequencies for more than a few flashes. People
          are even more sensitive to red flashing than to other colors, so a special test is
-         provided for saturated red flashing. These guidelines are based on guidelines for
-         the broadcasting industry as adapted for computer screens, where content is viewed
+         provided for saturated red flashing. These guidelines were originally based on guidelines for
+         the broadcasting industry as adapted for desktop monitors, where content is viewed
          from a closer distance (using a larger angle of vision).
       </p>
       
@@ -38,12 +47,21 @@ <h2>Intent of Three Flashes or Below Threshold</h2>
          did not allow any flashing (even of a single pixel) within a broad frequency range
          (3 to 50 Hz). This Success Criterion is based on existing specifications in use in
          the UK and by others for television broadcast and has been adapted for computer display
-         viewing. The 1024 x 768 screen is used as the reference screen resolution for the
+         viewing. In WCAG 2.0, a 1024 x 768 screen was used as the reference screen resolution for the
          evaluation. The 341 x 256 pixel block represents a 10 degree viewport at a typical
          viewing distance. (The 10 degree field is taken from the original specifications and
          represents the central vision portion of the eye, where people are most susceptible
          to photo stimuli.)
       </p>
+      <p>With the proliferation of devices of varying screen sizes (from small hand-helds to large living room displays), as well as the adoption of <a>CSS pixels</a> as a density-independent unit of measurement, the prior assessment criteria may seem outdated. However, an image of a consistent size uses up relatively the same percentage of a user's visual field on any device. On a large screen, the image takes up less size, but the large screen takes up a larger part of the visual field. On a mobile screen, the image may take up most or all of the screen; however, the mobile screen itself takes up a smaller portion of the user's visual field. So the same dimension of the flashing content, represented in CSS pixels can still provide a consistent means of assessment. Substituting CSS pixels for the original pixel block means that the combined area of flashing becomes 341 x 256 CSS pixels, or a flashing area of 87,296 CSS pixels.</p>
+
+      <p>Content should be analyzed at the largest scale at which a user may view the content, and at the standard zoom level of the user agent. For example, with a video that may play in an area of a web page and also at full screen, the video should be analyzed for risks at full screen.</p>
+
+      <p>Where video content is provided in color spaces other than sRGB, the version provided with the highest dynamic range should be tested. In such cases the industry standard definition of a general flash is a change in luminance of 20 cd/m2 or more where the darker image is below 160 cd/m2. (<a href="https://www.itu.int/rec/R-REC-BT.1702/">ITU-R BT.1702</a>.) This is applicable for standard dynamic range (SDR) and high dynamic range (HDR) content. For HDR content when the darker state is 160 cd/m2 or more, a general flash is one where the Michelson contrast is 1/17 or greater — where the Michelson contrast is calculated as (LHigh - LLow) / (LHigh + LLow), and where LHigh and LLow are the luminance of the high and low luminance states, respectively.</p>
+
+      <p>For short clips that might be looped (such as GIF animations), the content should be analyzed while looping. </p>
+
+      <p class="note">The specification cannot account for the actual viewing distance that a person chooses. Users that are closer to their screens than the idealized viewing distance will be affected by flashing areas that normatively pass. The same problem applies to users who rely on zoom or screen magnification. Conversely, users who are further away from the screen than the idealized distance should be able to tolerate flashing areas that are larger than the threshold.</p>
       
       <p>The combined area of flashes occurring concurrently and contiguously means the total
          area that is actually flashing at the same time. It is calculated by adding up the
@@ -73,6 +91,26 @@ <h2>Intent of Three Flashes or Below Threshold</h2>
          </ul>
          
       </div>
+
+      <div class="note">
+         <p>The new (in WCAG 2.2) working definition in the field for <strong>"pair of opposing transitions involving a saturated red"</strong> is a pair of opposing transitions where, one transition is either to or from a state with a value R/(R + G + B) that is greater than or equal to 0.8, and the difference between states is more than 0.2 (unitless) in the CIE 1976 UCS chromaticity diagram. [ISO 9241-391] </p>
+         <p>The chromaticity difference is calculated as:</p>
+         <ul>
+            <li><code>SQRT( (u'1 - u'2)^2 + (v'1 - v'2)^2 )</code></li>
+         </ul>
+         <p>where u'1 and v'1 are chromaticity coordinates of State 1 and u'2 and v'2 are chromaticity coordinates of State 2. The 1976 UCS chromaticity coordinates of u' and v' are calculated as:</p>
+         <ul>
+            <li><code>u' = 4 * X / (X + 15 * Y + 3 * Z)</code></li>
+            <li><code>v' = 9 * Y / (X + 15 * Y + 3 * Z)</code></li>
+         </ul>
+         <p>where X, Y, and Z are the tristimulus values of a color in the CIE XYZ colorspace, which can be calculated as:</p>
+         <ul>
+            <li><code>X = 0.4124564 * R + 0.3575761 * G + 0.1804375 * B</code></li>
+            <li><code>Y = 0.2126729 * R + 0.7151522 * G + 0.0721750 * B</code></li>
+            <li><code>Z = 0.0193339 * R + 0.1191920 * G + 0.9503041 * B</code></li>
+         </ul>
+         <p>where R, G, &amp; B are values that range from 0-1 as specified in “relative luminance” definition. </p>
+      </div>
       
       
    </section>
@@ -123,19 +161,19 @@ <h2>Resources for Three Flashes or Below Threshold</h2>
          
          <li>
             								       
-            <a href="http://www.hardingfpa.com/">Harding FPA Web Site</a>
+            <a href="https://www.hardingfpa.com/">Harding FPA Web Site</a>
             							     
          </li>
          
          <li>
             								       
-            <a href="http://trace.wisc.edu/peat/">Trace Center Photosensitive Epilepsy Analysis Tool (PEAT)</a>
+            <a href="https://trace.umd.edu/peat/">Trace Center Photosensitive Epilepsy Analysis Tool (PEAT)</a>
             							     
          </li>
          
          <li>
             								       
-            <a href="http://trace.wisc.edu/peat/photosensitive.php">Information about Photosensitive Seizure Disorders</a>
+            <a href="https://trace.umd.edu/information-about-photosensitive-seizure-disorders/">Information about Photosensitive Seizure Disorders</a>
             							     
          </li>
          
@@ -147,16 +185,10 @@ <h2>Resources for Three Flashes or Below Threshold</h2>
          
          <li>
             	
-            <a href="http://www.epilepsy.com/learn/triggers-seizures/photosensitivity-and-seizures">Epilepsy Foundation</a>
+            <a href="http://www.epilepsy.com/learn/triggers-seizures/photosensitivity-and-seizures">Epilepsy Foundation - Photosensitivity and Seizures</a>
             							     
          </li>
-         
-         <li>
-            								       
-            <a href="http://www.ofcom.org.uk/static/archive/itc/itc_publications/codes_guidance/flashing_images/index.asp.html">ITC Guidance Note for Licensees on Flashing Images and Regular Patterns in Television</a>
-            							     
-         </li>
-         
+      
       </ul>
       
    </section>
@@ -169,11 +201,11 @@ <h2>Techniques for Three Flashes or Below Threshold</h2>
          <h3>Sufficient Techniques for Three Flashes or Below Threshold</h3>
          
          
-         <ol>
+         <ul>
             
             <li>
                									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G19" class="general">Ensuring that no component of the content flashes more than three times in any one
+               <a href="../Techniques/general/G19" class="general">Ensuring that no component of the content flashes more than three times in any one
                   second period
                </a>
                								       
@@ -181,19 +213,19 @@ <h3>Sufficient Techniques for Three Flashes or Below Threshold</h3>
             
             <li>
                									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G176" class="general">Keeping the flashing area small enough</a>
+               <a href="../Techniques/general/G176" class="general">Keeping the flashing area small enough</a>
                								       
             </li>
             
             <li>
                									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G15" class="general">Using a tool to ensure that content does not violate the general flash threshold or
+               <a href="../Techniques/general/G15" class="general">Using a tool to ensure that content does not violate the general flash threshold or
                   red flash threshold
                </a>
                								       
             </li>
             
-         </ol>
+         </ul>
          
       </section>
       
diff --git a/understanding/20/three-flashes.html b/understanding/20/three-flashes.html
index 7fb27e3c51..b81365fe93 100644
--- a/understanding/20/three-flashes.html
+++ b/understanding/20/three-flashes.html
@@ -3,12 +3,22 @@
 <head>
    <meta charset="UTF-8"></meta>
    <title>Understanding Three Flashes</title>
-   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link>
+   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/>
 </head>
 <body>
    <h1>Understanding Three Flashes</h1>
    
    
+   <section id="brief">
+      <h2>In brief</h2>
+      <dl>
+         <dt>Goal</dt><dd>Content does not trigger seizures.</dd>
+         <dt>What to do</dt><dd>Do not flash content more than 3 times a second.</dd>
+         <dt>Why it's important</dt><dd>Flashing content can cause migraines, dizziness, nausea, and seizures.</dd> 
+      </dl>
+
+   </section>
+   
    <section id="intent">
       <h2>Intent of Three Flashes</h2>
       
@@ -89,19 +99,19 @@ <h2>Resources for Three Flashes</h2>
          
          <li>
             								       
-            <a href="http://www.hardingfpa.com/">Harding FPA Web Site</a>
+            <a href="https://www.hardingfpa.com/">Harding FPA Web Site</a>
             							     
          </li>
          
          <li>
             								       
-            <a href="http://trace.wisc.edu/peat/">Trace Center Photosensitive Epilepsy Analysis Tool (PEAT)</a>
+            <a href="https://trace.umd.edu/peat/">Trace Center Photosensitive Epilepsy Analysis Tool (PEAT)</a>
             							     
          </li>
          
          <li>
             								       
-            <a href="http://trace.wisc.edu/peat/photosensitive.php">Information about Photosensitive Seizure Disorders</a>
+            <a href="https://trace.umd.edu/information-about-photosensitive-seizure-disorders/">Information about Photosensitive Seizure Disorders</a>
             							     
          </li>
          
@@ -113,13 +123,7 @@ <h2>Resources for Three Flashes</h2>
          
          <li>
             	
-            <a href="http://www.epilepsy.com/learn/triggers-seizures/photosensitivity-and-seizures">Epilepsy Foundation</a>
-            							     
-         </li>
-         
-         <li>
-            								       
-            <a href="http://www.ofcom.org.uk/static/archive/itc/itc_publications/codes_guidance/flashing_images/index.asp.html">ITC Guidance Note for Licensees on Flashing Images and Regular Patterns in Television</a>
+            <a href="http://www.epilepsy.com/learn/triggers-seizures/photosensitivity-and-seizures">Epilepsy Foundation - Photosensitivity and Seizures</a>
             							     
          </li>
          
@@ -135,17 +139,17 @@ <h2>Techniques for Three Flashes</h2>
          <h3>Sufficient Techniques for Three Flashes</h3>
          
          
-         <ol>
+         <ul>
             
             <li>
                									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G19" class="general">Ensuring that no component of the content flashes more than three times in any one
+               <a href="../Techniques/general/G19" class="general">Ensuring that no component of the content flashes more than three times in any one
                   second period
                </a>
                								       
             </li>
             
-         </ol>
+         </ul>
          
       </section>
       
diff --git a/understanding/20/time-based-media.html b/understanding/20/time-based-media.html
index a63e06debc..eb6642d50c 100644
--- a/understanding/20/time-based-media.html
+++ b/understanding/20/time-based-media.html
@@ -3,7 +3,7 @@
 <head>
    <meta charset="UTF-8"></meta>
    <title>Understanding Time-Based Media</title>
-   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link>
+   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/>
 </head>
 <body>
    <h1>Understanding Time-Based Media</h1>
diff --git a/understanding/20/timing-adjustable.html b/understanding/20/timing-adjustable.html
index 6ac91a0a16..088983cb0a 100644
--- a/understanding/20/timing-adjustable.html
+++ b/understanding/20/timing-adjustable.html
@@ -3,11 +3,20 @@
 <head>
    <meta charset="UTF-8"></meta>
    <title>Understanding Timing Adjustable</title>
-   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link>
+   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/>
 </head>
 <body>
    <h1>Understanding Timing Adjustable</h1>
    
+   <section id="brief">
+		<h2>In brief</h2>
+		<dl>
+         <dt>Goal</dt><dd>Users have adequate time to complete tasks.</dd>
+         <dt>What to do</dt><dd>Let users turn off, adjust, or extend time limits.</dd>
+         <dt>Why it's important</dt><dd>People with disabilities may need more time to complete activities.</dd> 
+      </dl>
+
+   </section>
    
    <section id="intent">
       <h2>Intent of Timing Adjustable</h2>
@@ -34,16 +43,14 @@ <h2>Intent of Timing Adjustable</h2>
          a user to react to a request for input. 
       </p>
       
-      <p>	It also includes content that is advancing or updating at a rate beyond the user's
-         ability to read and/or understand it. In other words, animated, moving or scrolling
-         content introduces a time limit on a user's ability to read content.
-      </p>
-      
-      <p>In some cases, however, it is not possible to change the time limit (for example,
-         for an auction or other real-time event) and exceptions are therefore provided for
-         those cases.
-      </p>
+      <p>It also includes content that is advancing or updating at a rate beyond the user's ability to read and/or understand it. In other words, animated, moving or scrolling content introduces a time limit on a users ability to read content.</p>
+
+      <p>This success criterion is generally not applicable when the content repeats or is synchronized with other content, so long as the information and data is adjustable or otherwise under the control of the end user.  Examples of time limits for which this success criterion is not applicable include scrolling text that repeats, captioning, and <a href="https://www.w3.org/WAI/tutorials/carousels/">carousels</a>.  These are situations which do include time limits, but the content is still available to the user because it has controls for accessing it, as specified in <a href="../../guidelines/sc/20/pause-stop-hide.html">2.2.2 Pause, Stop, Hide</a>.</p>
+
+      <p>In some cases, however, it is not possible to change the time limit (for example, for an auction or other real-time event) and exceptions are therefore provided for those cases.</p>
       
+      <p>Content that operates on a timer does not need to be time adjustable if there is an alternative that does not rely on a timer. For example, a web application such as an email client provides notification of new email arriving with a temporary message (such as a 'toast' message) in the lower right-hand side of the interface, and the message disappears after 5 seconds. Users are able to identify the arrival of email through other means, such as viewing the Inbox, so the disappearance of the message does not set a time limit on the their ability to determine if new mail has arrived. If the user has no other means of discovering the same information (or performing the same function), then each message would need to meet this Success Criterion in order to provide users with sufficient time to access the information.</p>
+
       <p>
          						   
          <strong>Notes regarding server time limits</strong>
@@ -213,11 +220,11 @@ <h3>Sufficient Techniques for Timing Adjustable</h3>
             
             <h4>Situation A: If there are session time limits:</h4>
             
-            <ol>
+            <ul>
                
                <li>
                   										           
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G133" class="general">Providing a checkbox on the first page of a multipart form that allows users to ask
+                  <a href="../Techniques/general/G133" class="general">Providing a checkbox on the first page of a multipart form that allows users to ask
                      for longer session time limit or no session time limit
                      
                   </a>
@@ -226,11 +233,11 @@ <h4>Situation A: If there are session time limits:</h4>
                
                <li>
                   										           
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G198" class="general">Providing a way for the user to turn the time limit off</a>
+                  <a href="../Techniques/general/G198" class="general">Providing a way for the user to turn the time limit off</a>
                   									         
                </li>
                
-            </ol>
+            </ul>
             
          </section>
          
@@ -238,17 +245,17 @@ <h4>Situation A: If there are session time limits:</h4>
             
             <h4>Situation B: If a time limit is controlled by a script on the page:</h4>
             
-            <ol>
+            <ul>
                
                <li>
                   										           
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G198" class="general">Providing a way for the user to turn the time limit off</a>
+                  <a href="../Techniques/general/G198" class="general">Providing a way for the user to turn the time limit off</a>
                   									         
                </li>
                
                <li>
                   										           
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G180" class="general">Providing the user with a means to set the time limit to 10 times the default time
+                  <a href="../Techniques/general/G180" class="general">Providing the user with a means to set the time limit to 10 times the default time
                      limit
                   </a>
                   									         
@@ -256,23 +263,17 @@ <h4>Situation B: If a time limit is controlled by a script on the page:</h4>
                
                <li>
                   										           
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/client-side-script/SCR16" class="script">Providing a script that warns the user a time limit is about to expire</a>
+                  <a href="../Techniques/client-side-script/SCR16" class="script">Providing a script that warns the user a time limit is about to expire</a>
                   										           
                   <strong>AND</strong>
                   										           
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/client-side-script/SCR1" class="script">Allowing the user to extend the default time limit
+                  <a href="../Techniques/client-side-script/SCR1" class="script">Allowing the user to extend the default time limit
                      
                   </a>
                   									         
                </li>
                
-               <li>
-                  
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/silverlight/SL21" class="silverlight"></a>
-                  
-               </li>
-               
-            </ol>
+            </ul>
             
          </section>
          
@@ -280,35 +281,35 @@ <h4>Situation B: If a time limit is controlled by a script on the page:</h4>
             
             <h4>Situation C: If there are time limits on reading:</h4>
             
-            <ol>
+            <ul>
                
                <li>
                   										           
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G4" class="general">G4: Allowing the content to be paused and restarted from where it was paused</a>
+                  <a href="../Techniques/general/G4" class="general">G4: Allowing the content to be paused and restarted from where it was paused</a>
                   									         
                </li>
                
                <li>
                   										           
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G198" class="general">Providing a way for the user to turn the time limit off</a>
+                  <a href="../Techniques/general/G198" class="general">Providing a way for the user to turn the time limit off</a>
                   									         
                </li>
                
                <li>
                   										           
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/client-side-script/SCR33" class="script">Using script to scroll content, and providing a mechanism to pause it</a>
+                  <a href="../Techniques/client-side-script/SCR33" class="script">Using script to scroll content, and providing a mechanism to pause it</a>
                   									         
                </li>
                
                <li>
                   										           
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/client-side-script/SCR36" class="script">Providing a mechanism to allow user to display moving, scrolling, or repeating text
+                  <a href="../Techniques/client-side-script/SCR36" class="script">Providing a mechanism to allow user to display moving, scrolling, or repeating text
                      in a static window
                   </a>
                   									         
                </li>
                
-            </ol>
+            </ul>
             
          </section>
          
@@ -327,7 +328,7 @@ <h3>Failures for Timing Adjustable</h3>
             
             <li>
                									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/failures/F40" class="failure">Failure due to using meta redirect with a time limit
+               <a href="../Techniques/failures/F40" class="failure">Failure due to using meta redirect with a time limit
                   
                </a>
                								       
@@ -335,7 +336,7 @@ <h3>Failures for Timing Adjustable</h3>
             
             <li>
                									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/failures/F41" class="failure">Failure due to using meta refresh with a time limit
+               <a href="../Techniques/failures/F41" class="failure">Failure due to using meta refresh with a time limit
                   
                </a>
                								       
@@ -343,7 +344,7 @@ <h3>Failures for Timing Adjustable</h3>
             
             <li>
                									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/failures/F58" class="failure">Failure due to using server-side techniques to automatically redirect pages after
+               <a href="../Techniques/failures/F58" class="failure">Failure due to using server-side techniques to automatically redirect pages after
                   a time limit
                   
                </a>
diff --git a/understanding/20/understanding-metadata.html b/understanding/20/understanding-metadata.html
index f3dbda0ca3..78ba9cea84 100644
--- a/understanding/20/understanding-metadata.html
+++ b/understanding/20/understanding-metadata.html
@@ -1,8 +1,8 @@
 <!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
 <head xmlns:wcag="https://www.w3.org/WAI/GL/">
-   <meta charset="UTF-8" />
+   <meta charset="UTF-8"/>
    <title>Understanding Metadata</title>
-   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link>
+   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/>
 </head>
 <body xmlns:wcag="https://www.w3.org/WAI/GL/">
    <h1>Understanding Metadata</h1>
@@ -24,7 +24,7 @@ <h1>Understanding Metadata</h1>
    			
    <p>In conjunction with WCAG, metadata can play a number of roles including: </p>
    			
-   <ol>
+   <ul>
       				
       <li> Metadata can be used to associate conforming alternate  versions of Web pages with
          Web pages which do not conform, in order to  allow users to find the conforming alternate
@@ -45,7 +45,7 @@ <h1>Understanding Metadata</h1>
          which one would best meet the user's needs. 
       </li>
       			
-   </ol>
+   </ul>
    			
    <section>
       				
diff --git a/understanding/20/unusual-words.html b/understanding/20/unusual-words.html
index 99adb35c13..e2cb48fe00 100644
--- a/understanding/20/unusual-words.html
+++ b/understanding/20/unusual-words.html
@@ -3,11 +3,20 @@
 <head>
    <meta charset="UTF-8"></meta>
    <title>Understanding Unusual Words</title>
-   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link>
+   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/>
 </head>
 <body>
    <h1>Understanding Unusual Words</h1>
    
+   <section id="brief">
+      <h2>In brief</h2>
+      <dl>
+         <dt>Goal</dt><dd>Users can identify and learn what unusual words mean.</dd>
+         <dt>What to do</dt><dd>Provide definitions for technical jargon and unusual terms.</dd>
+         <dt>Why it's important</dt><dd>More people, especially those with cognitive disabilities, can understand the meaning of content.</dd> 
+      </dl>
+
+   </section>
    
    <section id="intent">
       <h2>Intent of Unusual Words</h2>
@@ -56,56 +65,20 @@ <h2>Benefits of Unusual Words</h2>
       <h2>Examples of Unusual Words</h2>
       
       
-      <ul>
-         
-         <li>
-            
-            <p>
-               								       
-               <strong>Text that includes a definition for a word used in an unusual way.</strong>
-               							     
-            </p>
-            
-            <p>Organize the list or "cascade" of dictionaries and other resources so that the definition
+      <dl>
+         <dt>Text that includes a definition for a word used in an unusual way</dt>
+         <dd>Organize the list or "cascade" of dictionaries and other resources so that the definition
                search will find the intended definitions instead of displaying definitions from other
                sources in the "cascade." (The "cascade" lists the dictionaries and other reference
                materials in the order most likely to bring up the right definition. This controls
-               the order to follow when searching for definitions.)
-            </p>
-            
-         </li>
-         
-         <li>
-            
-            <p>
-               								       
-               <strong>Including definitions in the glossary.</strong>
-               							     
-            </p>
-            
-            <p>WCAG 2.0 uses the word "text" in a specific way. Thus, when the word "text" is used
+               the order to follow when searching for definitions.)</dd>
+         <dt>Including definitions in the glossary</dt>
+         <dd>WCAG 2.0 uses the word "text" in a specific way. Thus, when the word "text" is used
                within WCAG 2.0 it is linked to the definition of "text" provided in a glossary within
-               the same Web page.
-            </p>
-            
-         </li>
-         
-         <li>
-            
-            <p>
-               								       
-               <strong>The specific definition of a word is provided at the bottom of the page.</strong>
-               							     
-            </p>
-            
-            <p>The internal link from the word to the corresponding definition is also provided within
-               the page.
-               
-            </p>
-            
-         </li>
-         
-      </ul>
+               the same Web page.</dd>
+         <dt>The specific definition of a word is provided at the bottom of the page</dt>
+         <dd>The internal link from the word to the corresponding definition is also provided within the page.</dd>
+      </dl>
       
    </section>
    
@@ -157,13 +130,13 @@ <h3>Sufficient Techniques for Unusual Words</h3>
             
             <h4>Situation A: If the word or phrase has a unique meaning within the Web page:</h4>
             
-            <ol>
+            <ul>
                
                <li>
                   
                   <p> 
                      
-                     <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G101" class="general">Providing the definition of a word or phrase used in an unusual or restricted way</a> for the first occurrence of the word or phrase in a Web page using one of the following
+                     <a href="../Techniques/general/G101" class="general">Providing the definition of a word or phrase used in an unusual or restricted way</a> for the first occurrence of the word or phrase in a Web page using one of the following
                      techniques:
                      
                   </p>
@@ -174,7 +147,7 @@ <h4>Situation A: If the word or phrase has a unique meaning within the Web page:
                         
                         <p>
                            												               
-                           <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G55" class="general">Linking to definitions</a>
+                           <a href="../Techniques/general/G55" class="general">Linking to definitions</a>
                            											             
                         </p>
                         
@@ -182,13 +155,7 @@ <h4>Situation A: If the word or phrase has a unique meaning within the Web page:
                            
                            <li>
                               														                   
-                              <a href="https://www.w3.org/WAI/WCAG21/Techniques/html/H40" class="html">Using definition lists</a>
-                              													                 
-                           </li>
-                           
-                           <li>
-                              														                   
-                              <a href="https://www.w3.org/WAI/WCAG21/Techniques/html/H60" class="html">Using the link element to link to a glossary</a>
+                              <a href="../Techniques/html/H40" class="html">Using definition lists</a>
                               													                 
                            </li>
                            
@@ -200,7 +167,7 @@ <h4>Situation A: If the word or phrase has a unique meaning within the Web page:
                         
                         <p>
                            												               
-                           <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G112" class="general">Using inline definitions</a>
+                           <a href="../Techniques/general/G112" class="general">Using inline definitions</a>
                            											             
                         </p>
                         
@@ -208,7 +175,7 @@ <h4>Situation A: If the word or phrase has a unique meaning within the Web page:
                            
                            <li>
                               														                   
-                              <a href="https://www.w3.org/WAI/WCAG21/Techniques/html/H54" class="html">Using the dfn element to identify the defining instance of a word</a>
+                              <a href="../Techniques/html/H54" class="html">Using the dfn element to identify the defining instance of a word</a>
                               													                 
                            </li>
                            
@@ -224,7 +191,7 @@ <h4>Situation A: If the word or phrase has a unique meaning within the Web page:
                   
                   <p> 
                      
-                     <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G101" class="general">Providing the definition of a word or phrase used in an unusual or restricted way</a> for each occurrence of the word or phrase in a Web page using one of the following
+                     <a href="../Techniques/general/G101" class="general">Providing the definition of a word or phrase used in an unusual or restricted way</a> for each occurrence of the word or phrase in a Web page using one of the following
                      techniques:
                      
                   </p>
@@ -235,7 +202,7 @@ <h4>Situation A: If the word or phrase has a unique meaning within the Web page:
                         
                         <p>
                            												               
-                           <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G55" class="general">Linking to definitions</a>
+                           <a href="../Techniques/general/G55" class="general">Linking to definitions</a>
                            											             
                         </p>
                         
@@ -243,13 +210,7 @@ <h4>Situation A: If the word or phrase has a unique meaning within the Web page:
                            
                            <li>
                               														                   
-                              <a href="https://www.w3.org/WAI/WCAG21/Techniques/html/H40" class="html">Using definition lists</a>
-                              													                 
-                           </li>
-                           
-                           <li>
-                              														                   
-                              <a href="https://www.w3.org/WAI/WCAG21/Techniques/html/H60" class="html">Using the link element to link to a glossary</a>
+                              <a href="../Techniques/html/H40" class="html">Using definition lists</a>
                               													                 
                            </li>
                            
@@ -259,13 +220,13 @@ <h4>Situation A: If the word or phrase has a unique meaning within the Web page:
                      
                      <li>
                         												               
-                        <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G62" class="general">Providing a Glossary</a>
+                        <a href="../Techniques/general/G62" class="general">Providing a Glossary</a>
                         											             
                      </li>
                      
                      <li>
                         												               
-                        <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G70" class="general">
+                        <a href="../Techniques/general/G70" class="general">
                            Providing a function to search an on-line dictionary
                         </a>
                         											             
@@ -275,7 +236,7 @@ <h4>Situation A: If the word or phrase has a unique meaning within the Web page:
                   
                </li>
                
-            </ol>
+            </ul>
             
          </section>
          
@@ -283,13 +244,13 @@ <h4>Situation A: If the word or phrase has a unique meaning within the Web page:
             
             <h4>Situation B: If the word or phrase means different things within the same Web page:</h4>
             
-            <ol>
+            <ul>
                
                <li>
                   
                   <p> 
                      
-                     <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G101" class="general">Providing the definition of a word or phrase used in an unusual or restricted way</a> for each occurrence of the word or phrase in a Web page using one of the following
+                     <a href="../Techniques/general/G101" class="general">Providing the definition of a word or phrase used in an unusual or restricted way</a> for each occurrence of the word or phrase in a Web page using one of the following
                      techniques:
                      
                   </p>
@@ -300,7 +261,7 @@ <h4>Situation B: If the word or phrase means different things within the same We
                         
                         <p>
                            												               
-                           <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G55" class="general">Linking to definitions</a>
+                           <a href="../Techniques/general/G55" class="general">Linking to definitions</a>
                            											             
                         </p>
                         
@@ -308,13 +269,7 @@ <h4>Situation B: If the word or phrase means different things within the same We
                            
                            <li>
                               														                   
-                              <a href="https://www.w3.org/WAI/WCAG21/Techniques/html/H40" class="html">Using definition lists</a>
-                              													                 
-                           </li>
-                           
-                           <li>
-                              														                   
-                              <a href="https://www.w3.org/WAI/WCAG21/Techniques/html/H60" class="html">Using the link element to link to a glossary</a>
+                              <a href="../Techniques/html/H40" class="html">Using definition lists</a>
                               													                 
                            </li>
                            
@@ -326,7 +281,7 @@ <h4>Situation B: If the word or phrase means different things within the same We
                         
                         <p>
                            												               
-                           <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G112" class="general">Using inline definitions</a>
+                           <a href="../Techniques/general/G112" class="general">Using inline definitions</a>
                            											             
                         </p>
                         
@@ -334,7 +289,7 @@ <h4>Situation B: If the word or phrase means different things within the same We
                            
                            <li>
                               														                   
-                              <a href="https://www.w3.org/WAI/WCAG21/Techniques/html/H54" class="html">Using the dfn element to identify the defining instance of a word</a>
+                              <a href="../Techniques/html/H54" class="html">Using the dfn element to identify the defining instance of a word</a>
                               													                 
                            </li>
                            
@@ -346,7 +301,7 @@ <h4>Situation B: If the word or phrase means different things within the same We
                   
                </li>
                
-            </ol>
+            </ul>
             
          </section>
          
diff --git a/understanding/20/use-of-color.html b/understanding/20/use-of-color.html
index b3888cd814..2f913938dd 100644
--- a/understanding/20/use-of-color.html
+++ b/understanding/20/use-of-color.html
@@ -1,19 +1,28 @@
 <!DOCTYPE html>
 <html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
 <head>
-   <meta charset="UTF-8"></meta>
+   <meta charset="UTF-8"/>
    <title>Understanding Use of Color</title>
-   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link>
+   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/>
 </head>
 <body>
    <h1>Understanding Use of Color</h1>
    
+   <section id="brief">
+		<h2>In brief</h2>
+		<dl>
+         <dt>Goal</dt><dd>Color is not the only way of distinguishing information.</dd>
+         <dt>What to do</dt><dd>Use information in addition to color, such as shape or text, to convey meaning.</dd>
+         <dt>Why it's important</dt><dd>Not everyone sees colors or sees them the same way.</dd> 
+      </dl>
+
+   </section>
    
    <section id="intent">
       <h2>Intent of Use of Color</h2>
       
       
-      <p>The intent of this Success Criterion is to ensure that all users can access information
+      <p>The intent of this Success Criterion is to ensure that all sighted users can access information
          that is conveyed by color differences, that is, by the use of color where each color
          has a meaning assigned to it. If the information is conveyed through color differences
          in an image (or other non-text format), the color may not be seen by users with color
@@ -21,10 +30,10 @@ <h2>Intent of Use of Color</h2>
          another visual means ensures users who cannot see color can still perceive the information.
       </p>
       
-      <p>Color is an important asset in design of Web content, enhancing its aesthetic appeal,
+      <p>Color is an important asset in the design of Web content, enhancing its aesthetic appeal,
          its usability, and its accessibility. However, some users have difficulty perceiving
          color. People with partial sight often experience limited color vision, and many older
-         users do not see color well. In addition, people using text-only, limited-color or
+         users do not see color well. In addition, people using limited-color or
          monochrome displays and browsers will be unable to access information that is presented
          only in color.
       </p>
@@ -36,15 +45,84 @@ <h2>Intent of Use of Color</h2>
          of prompting a response would be: using highlighting on form fields to indicate that
          a required field had been left blank.
       </p>
-      
+
       <div class="note">
          
-         <p>This should not in any way discourage the use of color on a page, or even color coding
-            if it is redundant with other visual indication.
+         <p>This should not in any way discourage the use of color on a page, or even color coding if it is complemented by other visual indication.
          </p>
          
       </div>
-      
+
+
+      <div class="note">
+
+         <p>If content is conveyed through the use of colors that differ not only in their hue,
+            but that also have a significant difference in lightness, then this counts as an additional
+            visual distinction, as long as the difference in relative luminance between the colors leads
+            to a contrast ratio of 3:1 or greater.
+            For example, a light green and a dark red differ <strong>both</strong> by color (hue)
+            <strong>and</strong> by lightness, so they would pass if the contrast ratio is at least 3:1.
+            Similarly, if content is distinguished by inverting an element's foreground and background colors,
+            this would pass (again, assuming that the foreground and background colors have a sufficient contrast).
+         </p>
+         <p>However, if content relies on the user's ability to accurately perceive or differentiate a particular color
+            an additional visual indicator will be required regardless of the contrast ratio between those colors. For example, 
+           knowing whether an outline is green for valid or red for invalid.
+         </p>
+
+      </div>
+
+     <div class="note">
+       
+       <p>This criterion does not apply to situations where color has <em>not</em> been used to convey information, indicate an action,
+         prompt a response or distinguish a visual element. For instance, a hyperlink which has been styled to appear no different than neighboring 
+         static text would not fail this success criterion, as there would be no color differentiation between the actionable hyperlink text 
+         and the adjacent static text. Such lack of styling differentiation could result in poor usability for anyone looking at the interface, regardless of disability.
+       </p>
+       
+     </div>
+
+      <div class="note">
+
+         <p>This criterion does not directly address the needs of users with assistive technologies.
+            It aims to ensure that sighted users who cannot distinguish between some colors can still
+            understand content.
+            How information is conveyed to assistive technology users is covered separately in other
+            criteria, including (but not limited to)
+            <a href="non-text-content">1.1.1 Non-text Content</a>,
+            <a href="info-and-relationships">1.3.1 Info and Relationships</a>, and
+            <a href="name-role-value">4.1.2 Name, Role, Value</a>.
+         </p>
+         <p>Conversely, even if information that is conveyed by color differences is appropriately conveyed
+            to assistive technologies, it does not necessarily pass this criterion, as sighted users who cannot
+            distinguish between certain color may not necessarily be using any assistive technologies. This
+            criterion requires a visible alternative to color.
+         </p>
+
+      </div>
+
+      <div class="note">
+        
+        <p>Most user agents provide users with a color-only cue that a link has been previously activated by them ("visited"). However, several technical constraints result in authors having very limited control over these color-only indications of visited links.  The technical constraints are as follows:</p>
+        
+        <ul>
+           <li> 
+              User agents constrain the exposure of a link's visited state due to <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Privacy_and_the_:visited_selector">privacy concerns</a>. Author queries to user agents will indicate all links have not been visited.
+           </li>
+           <li>
+              Any available information on the visited state of a link would be inaccurate since it is both user and browser-dependent. Even if an author could accurately get information on previously activated links by a certain user, the author would be constrained to the current browser's preserved history, and would be unable to determine if the user had visited the page using a different browser (or if the history was not preserved, either from cache clearing or use of private sessions).
+           </li>
+           <li>
+              Authors can <em>only</em> use color to modify the <code>:visited</code> CSS pseudoclass style. The technology constrains any non-color styling. Due to palette limitations, an author cannot use color alone to achieve 3:1 contrast between link and non-link text as well as between visited and unvisited links while also achieving 4.5:1 contrast for all link and non-link text.
+           </li>
+           <li>
+              Authors also cannot set the visited state of links. The anchor element does not include a "visited" attribute; therefore the author has no ability to alter the state through an attribute setting. As such, authors cannot achieve <a href="info-and-relationships">1.3.1 Info and Relationships</a> or
+              <a href="name-role-value">4.1.2 Name, Role, Value</a> in regard to visited links.
+           </li>
+        </ul>
+
+         <p>For these reasons, setting or conveying a link's visited status is not an author responsibility. Where color alone distinguishes between visited and unvisited links, it does not result in a failure of this Success Criterion, even where the contrast between the two link colors is below 3:1. Note that authors must continue to ensure that all text links meet contrast minimums against the page background (SC 1.4.3).</p>
+      </div>
       
    </section>
    <section id="benefits">
@@ -61,7 +139,7 @@ <h2>Benefits of Use of Color</h2>
             in other visual ways.
          </li>
          
-         <li>People using text-only, limited color, or monochrome displays may be unable to access
+         <li>People using limited color monochrome displays may be unable to access
             color-dependent information.
          </li>
          
@@ -69,10 +147,6 @@ <h2>Benefits of Use of Color</h2>
             cues.
          </li>
          
-         <li>People using Braille displays or other tactile interfaces can detect text cues by
-            touch.
-         </li>
-         
       </ul>
       
    </section>
@@ -80,67 +154,20 @@ <h2>Benefits of Use of Color</h2>
    <section id="examples">
       <h2>Examples of Use of Color</h2>
       
-      
-      <ul>
-         
-         <li>
-            
-            <p>
-               								       
-               <strong>A form that uses color and text to indicate required fields</strong>
-               							     
-            </p>
-            
-            <p>A form contains both required and optional fields. Instructions at the top of the
-               form explain that required fields are labeled with red text and also with an icon
-               whose text alternative says, "Required." Both the red text and the icon are programmatically
-               associated with the appropriate form fields so that assistive technology users can
-               determine the required fields. 
-               
-            </p>
-            
-         </li>
-         
-         <li>
-            
-            <p>
-               								       
-               <strong> An examination.</strong>
-               							     
-            </p>
-            
-            <p>Students view an SVG image of a chemical compound and identify the chemical elements
-               present based on the colors and numbers used in the diagram. The text alternatives
-               associated with each element name the color of the element and indicate the element's
-               position in the diagram. Students who cannot perceive color have the same information
-               about the compound as their classmates. (This technique also satisfies 
-               <a href="non-text-content" class="guideline">Guideline 1.1</a> Level A.)
-            </p>
-            
-         </li>
-         
-         <li>
-            
-            <p>
-               								       
-               <strong> Disabled Form elements.</strong>
-               							     
-            </p>
-            
-            <p>
-               Form elements which are disabled via markup or scripting, are greyed out and made
-               inactive by the user agent. When in the disabled state these elements do not receive
-               focus. Assistive technologies can programmatically determine the state of disabled
-               elements and will provide this information to the user as the elements are encountered
-               on the page. The change in color and loss of focus provides redundant, visual information
-               about the state of the control.
-               
-               
-            </p>
-            
-         </li>
-         
-      </ul>
+      <dl>
+         <dt>A form that uses color and text to indicate required fields</dt>
+         <dd>A form contains both required and optional fields. Instructions at the top of the
+               form explain that required fields are labeled with red text and also with an icon.
+               Users who cannot perceive the difference between the optional field labels and the
+               red labels for the required fields will still be able to see the icon next to the
+               red labels.</dd>
+         <dt>An examination</dt>
+         <dd>Students view an SVG image of a chemical compound and identify the chemical elements
+               present based <strong>both</strong> on the colors used, as well as numbers next to each
+               element. A legend shows the color and number for each type of element. Sighted users who
+               cannot perceive all the color differences can still understand the image by relying on
+               the numbers.</dd>
+      </dl>
       
    </section>
    
@@ -152,7 +179,7 @@ <h2>Resources for Use of Color</h2>
          
          <li>
             								       
-            <a href="http://www.vischeck.com/">Vischeck</a>
+            <a href="https://www.vischeck.com/">Vischeck</a>
             							     
          </li>
          
@@ -170,7 +197,7 @@ <h2>Resources for Use of Color</h2>
          
          <li>
             								       
-            <a href="https://msdn.microsoft.com/en-us/library/bb263953.aspx">Microsoft: Can Color-Blind Users See Your Site?</a>
+            <a href="https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/accessibility/test-color-blindness">Microsoft: Verify that a page is usable by people with color blindness</a>
             							     
          </li>
          
@@ -182,16 +209,16 @@ <h2>Resources for Use of Color</h2>
          
          <li>
             								       
-            <a href="http://jfly.iam.u-tokyo.ac.jp/color/">How to make figures and presentations that are friendly to Colorblind people</a>
+            <a href="https://jfly.uni-koeln.de/color/">How to make figures and presentations that are friendly to Colorblind people</a>
             							     
          </li>
          
          <li>
             
-            <a href="http://www.tomjewett.com/colors/tutor.html">The Color Tutor application</a>
+            <a href="https://colortutorial.design/tutor.html">The Color Tutor application</a>
             
          </li>
-         
+            
       </ul>
       
    </section>
@@ -210,23 +237,23 @@ <h4>Situation A: If the color of particular words, backgrounds, or other content
                to indicate information:
             </h4>
             
-            <ol>
+            <ul>
                
                <li>
                   										           
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G14" class="general">Ensuring that information conveyed by color differences is also available in text</a>
+                  <a href="../Techniques/general/G14" class="general">Ensuring that information conveyed by color differences is also available in text</a>
                   									         
                </li>
                
                <li>
                   										           
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G205" class="general">Including a text cue whenever color cues are used</a>
+                  <a href="../Techniques/general/G205" class="general">Including a text cue whenever color cues are used</a>
                   									         
                </li>
                
                <li>
                   										           
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G182" class="general">Ensuring that additional visual cues are available when text color differences are
+                  <a href="../Techniques/general/G182" class="general">Ensuring that additional visual cues are available when text color differences are
                      used to convey information
                   </a>
                   									         
@@ -234,13 +261,13 @@ <h4>Situation A: If the color of particular words, backgrounds, or other content
                
                <li>
                   										           
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G183" class="general">Using a contrast ratio of 3:1 with surrounding text and providing additional visual
+                  <a href="../Techniques/general/G183" class="general">Using a contrast ratio of 3:1 with surrounding text and providing additional visual
                      cues on focus for links or controls where color alone is used to identify them
                   </a>
                   									         
                </li>
                
-            </ol>
+            </ul>
             
          </section>
          
@@ -248,21 +275,21 @@ <h4>Situation A: If the color of particular words, backgrounds, or other content
             
             <h4>Situation B: If color is used within an image to convey information:</h4>
             
-            <ol>
+            <ul>
                
                <li>
                   										           
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G111" class="general">Using color and pattern</a>
+                  <a href="../Techniques/general/G111" class="general">Using color and pattern</a>
                   									         
                </li>
                
                <li>
                   										           
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G14" class="general">Ensuring that information conveyed by color differences is also available in text</a>
+                  <a href="../Techniques/general/G14" class="general">Ensuring that information conveyed by color differences is also available in text</a>
                   									         
                </li>
                
-            </ol>
+            </ul>
             
          </section>
          
@@ -276,7 +303,7 @@ <h3>Additional Techniques (Advisory) for Use of Color</h3>
             
             <li>
                									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/css/C15" class="css"></a>
+               <a href="../Techniques/css/C15" class="css">Using CSS to change the presentation of a user interface component when it receives focus</a>
                								       
             </li>
             
@@ -292,7 +319,7 @@ <h3>Failures for Use of Color</h3>
             
             <li>
                									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/failures/F13" class="failure">Failure due to having a text alternative that does not include information that is
+               <a href="../Techniques/failures/F13" class="failure">Failure due to having a text alternative that does not include information that is
                   conveyed by color in the image
                </a>
                								       
@@ -300,7 +327,7 @@ <h3>Failures for Use of Color</h3>
             
             <li>
                									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/failures/F73" class="failure">Failure of Success Criterion 1.4.1 due to creating links that are not visually evident
+               <a href="../Techniques/failures/F73" class="failure">Failure of Success Criterion 1.4.1 due to creating links that are not visually evident
                   without color vision
                </a>
                								       
@@ -308,7 +335,7 @@ <h3>Failures for Use of Color</h3>
             
             <li>
                									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/failures/F81" class="failure">Failure of 1.4.1 due to identifying required or error fields using color differences
+               <a href="../Techniques/failures/F81" class="failure">Failure of 1.4.1 due to identifying required or error fields using color differences
                   only
                </a>
                								       
diff --git a/understanding/20/visual-presentation.html b/understanding/20/visual-presentation.html
index a77a675e52..e3c7cc7f4c 100644
--- a/understanding/20/visual-presentation.html
+++ b/understanding/20/visual-presentation.html
@@ -3,16 +3,24 @@
 <head>
    <meta charset="UTF-8"></meta>
    <title>Understanding Visual Presentation</title>
-   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link>
+   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/>
 </head>
 <body>
    <h1>Understanding Visual Presentation</h1>
    
-   
+   <section id="brief">
+      <h2>In brief</h2>
+      <dl>
+         <dt>Goal</dt><dd>Text appearance can be altered by users to meet preferences.</dd>
+         <dt>What to do</dt><dd>Meet text display requirements or allow users to adjust them.</dd>
+         <dt>Why it's important</dt><dd>Some text formats are more readable for people with cognitive disabilities and low vision.</dd> 
+      </dl>
+
+   </section>
+
    <section id="intent">
       <h2>Intent of Visual Presentation</h2>
       
-      
       <p>The intent of this Success Criterion is to ensure that visually  rendered text is
          presented in such a manner that it can be perceived  without its layout interfering
          with its readability. People with some  cognitive, language and learning disabilities
@@ -59,13 +67,12 @@ <h2>Intent of Visual Presentation</h2>
          together, so that it is difficult for them to locate word  boundaries. 
       </p>
       
-      <p>The resizing provision ensures that visually rendered text (text characters that have
-         been displayed so that they can  be seen [vs. text characters that are still in data
-         form such as  ASCII]) can be scaled successfully without requiring  that the user
-         scroll left and right to see all of the content. When the  content has been authored
-         so that this is possible, the content is said  to reflow. This permits people with
-         low vision and people with  cognitive disabilities to increase the size of the text
-         without  becoming disoriented. 
+      <p>The resizing provision ensures that visually rendered text, including
+         controls and labels using text, can be made larger without requiring the user to then
+         scroll left and right to see all of the content. When the content has been authored
+         so that this is possible, the content is said to reflow. This permits people with
+         low vision and people with cognitive disabilities to increase the size of the text
+         without becoming disoriented. 
       </p>
       
       <p>The scaling of content is primarily a user agent  responsibility. User agents that
@@ -73,7 +80,7 @@ <h2>Intent of Visual Presentation</h2>
          responsibility is to create  Web content that does not prevent the user agent from
          scaling the  content and that allows the reflow of the content within the current
          width of the viewport. See 
-         <a href="resize-text">1.4.2: Resize text</a> for additional discussion of resizing text. 
+         <a href="resize-text">1.4.4: Resize Text</a> for additional discussion of resizing text. 
       </p>
       
       <p>The horizontal scrolling requirement is not intended to apply to small-screen devices
@@ -101,12 +108,11 @@ <h2>Intent of Visual Presentation</h2>
          
       </p>
       
-      
    </section>
+
    <section id="benefits">
       <h2>Benefits of Visual Presentation</h2>
-      
-      
+
       <p>This Success Criterion helps low vision users by letting them see  text without distracting
          presentational features. It lets them  configure text in ways that will be easier
          for them to see by letting  them control the color and size of blocks of text. 
@@ -117,407 +123,243 @@ <h2>Benefits of Visual Presentation</h2>
       </p>
       
       <ul>
-         
          <li>People with some cognitive disabilities can read text better when they select their
             own foreground and background color combinations. 
          </li>
-         
          <li>People with some cognitive disabilities can track their  locations more easily when
             blocks of text are narrow and when they can  configure the amount of space between
             lines and paragraphs. 
          </li>
-         
          <li>People with some cognitive disabilities can read text more easily when the spacing
             between words is regular. 
          </li>
-         
       </ul>
-      
    </section>
    
    <section id="examples">
       <h2>Examples of Visual Presentation</h2>
       
-      
-      <p>The following images show examples of single-spacing, space-and-a-half and double-spaced
-         text in a paragraph. 
-      </p>
-      
-      
-      
-      
+      <figure id="figure-text-cut">
+        <figcaption>The following images show examples of single-spacing, space-and-a-half and double-spaced text in a paragraph.</figcaption>
+        <img src="img/single-space.gif" alt="Example of single-spaced text. (no space between each line of text)"/>
+        <img src="img/space-and-a-half.gif" alt="Example of space-and-a-half text. (a space equal to half the height of a line of text line)"/>
+        <img src="img/double-space.gif" alt="Example of double-spaced text. (a space equal to the height of a line of text between each line)"/>
+      </figure>
+
       <p>Examples of glyphs include  "A", "→" (an arrow symbol), and "さ" (a Japanese character).</p>
-      
    </section>
    
    <section id="resources">
       <h2>Resources for Visual Presentation</h2>
-      
-      
       <ul>
-         
          <li>
-            								       
             <a href="https://www.w3.org/TR/CSS2/box.html">CSS 2 Box Model</a>
-            							     
          </li>
-         
          <li>
-            								       
             <a href="https://www.w3.org/TR/CSS2/visuren.html">CSS 2 Visual formatting Model</a>
-            							     
          </li>
-         
          <li>
-            								       
             <a href="https://www.w3.org/TR/CSS2/visudet.html">CSS 2 Visual formatting Model Details</a>
-            							     
          </li>
-         
          <li>
-            								       
-            <a href="http://www.456bereastreet.com/archive/200504/about_fluid_and_fixed_width_layouts/">About fluid and fixed width layouts</a>
-            							     
+            <a href="https://web.archive.org/web/20050419043926/http://www.456bereastreet.com/archive/200504/about_fluid_and_fixed_width_layouts/">About fluid and fixed width layouts</a>
          </li>
-         
          <li>
-            								       
             <a href="http://cookiecrook.com/AIR/2003/train/accessiblecss.php">Accessible CSS</a>
-            							     
          </li>
-         
          <li>
-            								       
-            <a href="http://maxdesign.com.au/articles/em/">Ideal line length for content</a>
-            							     
+            <a href="https://practicaltypography.com/line-length.html">Practical Typography - Line Length</a>
          </li>
-         
          <li>
-            								       
             <a href="http://juicystudio.com/article/cognitive-impairment.php">Developing sites for users with Cognitive disabilities and learning difficulties</a>
-            							     
          </li>
-         
          <li>
-            								       
             <a href="https://www.w3.org/TR/2007/WD-xhtml-rdfa-primer-20071026/">RDFA Primer</a>
-            							     
          </li>
-         
          <li> 
-            
-            <a href="http://publications.nr.no/Multifunk-NR-rapport.pdf">MULTIFUNK: Bringing computer-supported reading one step further</a>, Date: April 2002, ISBN: 82-539-0491-6, Author: Gjertrud W. Kamstrup, Eva Mjøvik,
+            <a href="https://web.archive.org/web/20030407195127/http://publications.nr.no/Multifunk-NR-rapport.pdf">MULTIFUNK: Bringing computer-supported reading one step further</a>, Date: April 2002, ISBN: 82-539-0491-6, Author: Gjertrud W. Kamstrup, Eva Mjøvik,
             Anne-Lise Rygvold og Bjørn Gunnar Saltnes
-            
          </li>
-         
          <li>
-            								       
             <a href="http://eric.ed.gov/?id=EJ601947">Effective Monitor Display Design</a> on the  ERIC Web portal
-            							
          </li>
-         
          <li> 
-            
             <a href="http://www.sigaccess.org/2005/09/september-2005-newsletter/">Cognitive difficulties and access to information systems - an interaction design perspective</a>", Peter Gregor and Anna Dickinson, Applied Computing, University of Dundee
-            
          </li>
-         
          <li>Legge, G.E., Pelli, D.G., Rubin, G.S., &amp; Schleske, M.M.:Psychophysics of reading.
             I. Normal Vision,Vision Research, 25, 239-252, 1985.
          </li>
-         
          <li>Legge, G.E., Rubin, G.S., Pelli, D.G., &amp; Schleske, M.M.:Psychophysics of reading.
             II. Low Vision,Vision Research, 25, 253-266, 1985.
          </li>
-         
          <li>Osaka,N. and Oda, K. (1991). Effective visual field size necessary for vertical reading
             during Japanese text processing. Bulletin of Psychonomic Society,29(4),345-347.
          </li>
-         
          <li>Beckmann, P.J. &amp; Legge, G.E. (1996). Psychophysics of reading. XIV. The page-navigation
             problem in using magnifiers. Vision Research, 36, 3723-3733.
          </li>
-         
-         <li>
+         <li lang="jp">
             川嶋英嗣・小田浩一(2003).読書におけるスクロール方向とウィンドウ幅の影響　日本心理学会第67回大会, 502.
          </li>
-         
-         <li>
+         <li lang="jp">
             小田浩一・今橋真理子(1995). 文字認知の閾値と読みの閾値.  VISION, 7,
             165-168.
          </li>
-         
          <li>Osaka,N. (1994). Size of saccade and fixation duration of eye movements during reading:
             psychophysics of Japanese text processing. Journal of Optical Society of America A,
             9(1), 5-13.
          </li>
-         
-         <li>
+         <li lang="jp">
             山中今日子・小田浩一 (2007). 漢字の画数と書体のウェイトが視認性に及ぼす
             影響. 視覚学会2007年夏季大会ポスター 1p1 Vision, P.167.
          </li>
-         
          <li>
-            								       
-            <a href="http://paul-m-jones.com/archives/276">Line Length, Volume, and Density</a>
-            							     
+            <a href="http://paul-m-jones.com/post/2008/03/09/line-length-volume-and-density/">Line Length, Volume, and Density</a>
          </li>
-         
          <li>
-            	
             <a href="http://webarchive.nationalarchives.gov.uk/20130812104657/http://odi.dwp.gov.uk/inclusive-communications/channels/publishing.php">Guidance on accessible publishing</a>
-            							     
          </li>
-         
          <li>
-            								       
             <a href="http://usability.com.au/2004/12/an-accessibility-frontier-cognitive-disabilities-and-learning-difficulties-2004/"> An Accessibility Frontier: Cognitive disabilities and learning difficulties</a>
-            							     
          </li>
-         
          <li>
-            								       
             <a href="http://leftbrainrightbrain.co.uk/2005/03/08/cognitiveperceptual-difference-and-good-web-design/">Cognitive/Perceptual Difference And Good Web Design</a>
-            							     
          </li>
-         
          <li>
-            
             <a href="http://uxmovement.com/content/6-surprising-bad-practices-that-hurt-dyslexic-users/">6 Surprising Bad Practices That Hurt Dyslexic Users</a>
-            
          </li>
-         
          <li>
-            
-            <a href="http://accessites.org/site/2006/11/designing-for-dyslexics-part-3-of-3">Design for Dyslexics</a>
-            
+            <a href="https://web.archive.org/web/20070313232158/http://accessites.org/site/2006/11/designing-for-dyslexics-part-3-of-3/">Design for Dyslexics</a>
          </li>
-         
          <li>
-            
             <a href="http://www.dyslexia.com/library/webdesign.htm">Web Design for Dyslexia</a>
-            
          </li>
-         
       </ul>
-      
    </section>
    
    <section id="techniques">
       <h2>Techniques for Visual Presentation</h2>
-      
-      
       <section id="sufficient">
          <h3>Sufficient Techniques for Visual Presentation</h3>
-         
-         
          <p>
-            
             <strong>Instructions: </strong> Since this is a multi-part success criterion, you must satisfy one of the numbered
             items for each of the requirements below. 
          </p>
          
          <section>
-            
-            
-            <ol>
-               
+            <ul>
                <li>
-                  
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/css/C23" class="css">Specifying text and background colors of secondary content such as banners, features
+                  <a href="../Techniques/css/C23" class="css">Specifying text and background colors of secondary content such as banners, features
                      and navigation in CSS while not specifying text and background colors of the main
                      content
                   </a> OR 
                </li>
-               
                <li>
-                  
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/css/C25" class="css">Specifying borders and layout in CSS to delineate areas of a Web page while not specifying
+                  <a href="../Techniques/css/C25" class="css">Specifying borders and layout in CSS to delineate areas of a Web page while not specifying
                      text and text-background colors
                   </a> OR 
                </li>
-               
                <li>
-                  
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G156" class="general">Using a technology that has commonly-available user agents that can change the foreground
+                  <a href="../Techniques/general/G156" class="general">Using a technology that has commonly-available user agents that can change the foreground
                      and background of blocks of text
                   </a> OR 
                </li>
-               
                <li>
-                  
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G148" class="general">G148</a> OR 
+                  <a href="../Techniques/general/G148" class="general">G148</a> OR 
                </li>
-               
                <li>
-                  										           
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G175" class="general">Providing a multi color selection tool on the page for foreground and background colors</a>
-                  									         
+                  <a href="../Techniques/general/G175" class="general">Providing a multi color selection tool on the page for foreground and background colors</a>
                </li>
-               
-            </ol>
-            
+            </ul>
          </section>
-         
          <section>
-            
-            
-            <ol>
-               
+            <ul>
                <li>
-                  
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G204" class="general">Not interfering with the user agent's reflow of text as the viewing window is narrowed</a> OR
+                  <a href="../Techniques/general/G204" class="general">Not interfering with the user agent's reflow of text as the viewing window is narrowed</a> OR
                </li>
-               
                <li>
-                  										           
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/css/C20" class="css">Using ems to set the column width</a>
-                  									         
+                  <a href="../Techniques/css/C20" class="css">Using ems to set the column width</a>
                </li>
-               
-            </ol>
-            
+            </ul>
          </section>
-         
          <section>
-            
-            
-            <ol>
-               
+            <ul>
                <li>
-                  
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/css/C19" class="css">Specifying alignment either to the left OR right in CSS</a> OR
+                  <a href="../Techniques/css/C19" class="css">Specifying alignment either to the left OR right in CSS</a> OR
                </li>
-               
                <li>
-                  
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G172" class="general">Providing a mechanism to remove full justification of text</a> OR 
+                  <a href="../Techniques/general/G172" class="general">Providing a mechanism to remove full justification of text</a> OR 
                </li>
-               
                <li>
-                  										           
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G169" class="general">Aligning text on only one side</a>
-                  									         
+                  <a href="../Techniques/general/G169" class="general">Aligning text on only one side</a>
                </li>
-               
-            </ol>
-            
+            </ul>
          </section>
-         
          <section>
-            
-            
-            <ol>
-               
+            <ul>
                <li>
-                  
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G188" class="general">Providing a button on the page to increase line spaces and paragraph spaces</a> OR
+                  <a href="../Techniques/general/G188" class="general">Providing a button on the page to increase line spaces and paragraph spaces</a> OR
                </li>
-               
                <li>
-                  										           
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/css/C21" class="css">C21: Specifying line spacing in CSS</a>
-                  									         
+                  <a href="../Techniques/css/C21" class="css">C21: Specifying line spacing in CSS</a>
                </li>
-               
-            </ol>
-            
+            </ul>
          </section>
-         
          <section>
-            
-            
-            <ol>
-               
+            <ul>
                <li>
-                  
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G204" class="general">Not interfering with the user agent's reflow of text as the viewing window is narrowed</a> OR
+                  <a href="../Techniques/general/G204" class="general">Not interfering with the user agent's reflow of text as the viewing window is narrowed</a> OR
                </li>
-               
                <li>
-                  
                   <p> 
-                     
-                     <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G146" class="general">G146: Using liquid layout</a>
-                     										           
+                     <a href="../Techniques/general/G146" class="general">G146: Using liquid layout</a>
                      <em>AND</em> using measurements that are relative to other measurements in the content by using
                      one or more of the following techniques:
                   </p>
                   
                   <ul>
-                     
                      <li> 
-                        
-                        <a href="https://www.w3.org/WAI/WCAG21/Techniques/css/C12" class="css">C12: Using percent for font sizes</a> OR 
+                        <a href="../Techniques/css/C12" class="css">C12: Using percent for font sizes</a> OR 
                      </li>
-                     
                      <li> 
-                        
-                        <a href="https://www.w3.org/WAI/WCAG21/Techniques/css/C13" class="css">C13: Using named font sizes</a> OR 
+                        <a href="../Techniques/css/C13" class="css">C13: Using named font sizes</a> OR 
                      </li>
-                     
                      <li> 
-                        
-                        <a href="https://www.w3.org/WAI/WCAG21/Techniques/css/C14" class="css">C14: Using em units for font sizes</a> OR 
+                        <a href="../Techniques/css/C14" class="css">C14: Using em units for font sizes</a> OR 
                      </li>
-                     
                      <li>
-                        
-                        <a href="https://www.w3.org/WAI/WCAG21/Techniques/css/C24" class="css">Using percentage values in CSS for container sizes</a> OR 
+                        <a href="../Techniques/css/C24" class="css">Using percentage values in CSS for container sizes</a> OR 
                      </li>
-                     
                      <li>
-                        
-                        <a href="https://www.w3.org/WAI/WCAG21/Techniques/client-side-script/SCR34" class="script">Calculating size and position in a way that scales with text size</a> OR 
+                        <a href="../Techniques/client-side-script/SCR34" class="script">Calculating size and position in a way that scales with text size</a> OR 
                      </li>
-                     
                   </ul>
-                  
                </li>
-               
                <li>
-                  										           
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G206" class="general">Providing options within the content to switch to a layout that does not require the
+                  <a href="../Techniques/general/G206" class="general">Providing options within the content to switch to a layout that does not require the
                      user to scroll horizontally to read a line of text
                   </a>
-                  									         
                </li>
-               
-            </ol>
-            
+            </ul>
          </section>
-         
       </section>
       
       <section id="advisory">
          <h3>Additional Techniques (Advisory) for Visual Presentation</h3>
-         
-         
       </section>
       
       <section id="failure">
          <h3>Failures for Visual Presentation</h3>
-         
-         
          <ul>
-            
             <li>
-               									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/failures/F24" class="failure">F24</a>
-               								       
+               <a href="../Techniques/failures/F24" class="failure">F24</a>
             </li>
-            
             <li>
-               									         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/failures/F88" class="failure">Failure of SC 1.4.8 due to using text that is justified (aligned to both the left
+               <a href="../Techniques/failures/F88" class="failure">Failure of SC 1.4.8 due to using text that is justified (aligned to both the left
                   and the right margins)
                </a>
-               								       
             </li>
-            
          </ul>
-         
       </section>
       
    </section>
diff --git a/understanding/21/accessible-authentication.html b/understanding/21/accessible-authentication.html
deleted file mode 100644
index 640cfbaff9..0000000000
--- a/understanding/21/accessible-authentication.html
+++ /dev/null
@@ -1,99 +0,0 @@
-<!DOCTYPE html>
-<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
-	<head>
-		<meta charset="UTF-8" />
-		<title>WCAG 2.0 Understanding Page</title>
-		<link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove" />
-	</head>
-	<body>
-		<h1>Understanding Accessible Authentication</h1>
-		<section id="intent">
-			<h2>Intent</h2>
-			<p>The intent of this success criterion is to ensure that, that users do not encounter a barrier that prevents them from accessing content that they could otherwise use.</p>
-			<p>Most user interfaces are designed to help users complete tasks. However, traditionally, web security and privacy technologies intentionally introduce barriers to task completion. They require users to perceive more and to do more to complete tasks.</p>
-			<p>Web security and privacy technologies often block people with cognitive and/or physical disabilities who may not be able to:</p>
-			<ul>
-				<li> discern text they are required to enter and submit; </li>
-				<li> recall text or instructions they have seen or heard; </li>
-				<li> follow multi-step procedures. </li>
-			</ul>
-			<p>The scope of the problem is vast because, for examples, people with disabilities:</p>
-			<ul>
-				<li> are prevented from purchasing goods and registering for services on the millions of websites that employ web security and privacy technologies; </li>
-				<li> may circumvent web security and privacy technologies with insecure techniques/methods; </li>
-				<li> may become so frustrated working through web security and privacy technologies that they relinquish their efforts, and thereby are thwarted from purchasing goods and registering for services; </li>
-				<li> may be unable to become accustomed to a web security and privacy technology because there are multiple versions of it across websites. </li>
-				<li> may be afraid to trust a web site, thus causing them to cancel a transaction. </li>
-			</ul>
-			<p>Many user authentication methods rely upon trying to differentiate between a human, and software (bots) that try to pose as a human. The most common way of trying to make this distinction is by the setting of tasks that rely upon human abilities, and that are almost impossible for software (bots) to perform. These methods can frequently be quite challenging for people who have a high level of cognitive ability. For people who have  a disability or cognitive disability such as dementia, an authentication task often presents an insurmountable barrier.</p>
-		</section>
-		<section id="benefits">
-			<h2>Benefits</h2>
-			<p>The benefit of this success criterion is it allows people with cognitive and learning disabilities to use many  important sites. Long changing passwords and  other difficult authentication procedures prevent many people from using critical services. For example,  people cannot make doctors appointments by themselves and often put off making a doctor appointment as not to be a burden to other people.. This may be partly responsible for the reduced life expectancy of people with learning and cognitive disabilities.</p>
-			<p>With this success criterion, people who are able to use a primary user authentication method will be able to successfully complete a user authentication procedure almost irrespective of the level of their cognitive abilities. Those who have to use an alternative method will be able to successfully complete a user authentication even though they have limited levels of the cognitive abilities specified in the success criterion.</p>
-		</section>
-		<section id="examples">
-			<h2>Examples</h2>
-			<ol>
-				<li> As a user who has memory impairments and often forgets passwords, I need to be able to use a site, without remembering or copying passwords and usernames, so that I can use this service. </li>
-				<li> As a user who has impairments, I need to be able to use a site without being required to copy items in the correct sequence. </li>
-				<li> As a user who has weak executive function, I need the login process to be simple, and not multi-step, so that I can use it. </li>
-				<li> As a symbol user, I need a login process I can use. </li>
-			</ol>
-		</section>
-		<section id="resources">
-			<h2>Resources</h2>
-			<ul>
-				<li>
-					<a href="https://rawgit.com/w3c/coga/master/issue-papers/privacy-security.html">Issue paper: Security and Privacy Technologies</a>
-				</li>
-				<li>
-					<a href="https://rawgit.com/w3c/coga/master/issue-papers/math.html">Issue paper: Numbers and Math</a>
-				</li>
-				<li>
-					<a href="https://rawgit.com/w3c/coga/master/gap-analysis/">Gap analysis section 2.3.2</a>
-				</li>
-				<li>
-					<a href="https://rawgit.com/w3c/coga/master/gap-analysis/table.html#table1">User needs Table 1</a>
-				</li>
-				<li>
-					<a href="https://w3c.github.io/wcag/coga/user-research.html">Background research document (particularly 3.1.3.1 Memory)</a></li>
-				<li><a href="https://www.improvinghealthandlives.org.uk/uploads/doc/vid_7479_IHaL2010-3HealthInequality2010.pdf">@@naked URI! https://www.improvinghealthandlives.org.uk/uploads/doc/vid_7479_IHaL2010-3HealthInequality2010.pdf</a></li>
-				<li><a href="http://www.hscbereavementnetwork.hscni.net/wp-content/uploads/2014/05/Death-by-Indifference-Mencap-March-2007.pdf">@@naked URI! http://www.hscbereavementnetwork.hscni.net/wp-content/uploads/2014/05/Death-by-Indifference-Mencap-March-2007.pdf</a>
-				</li>
-			</ul>
-		</section>
-		<section id="techniques">
-			<h2>Techniques</h2>
-			<section id="sufficient">
-				<h3>Sufficient</h3>
-				<ul>
-					<li> Allowing the user to reset a password by pressing a link sent to them in an SMS or email.sms, which brings the user to a page that displays either the: <ul>
-							<li> current username and/or password; OR </li>
-							<li> suggested new username and/or password; OR </li>
-							<li> opportunity to create a new username and/or password </li>
-						</ul>
-					</li>
-					<li> Compiling to <a href="https://www.w3.org/TR/webauthn/">https://www.w3.org/TR/webauthn/</a> and allowing one component method such as biometrics or tokens (Possibly reword this to be more clear) </li>
-					<li> Automatic user authentication based upon the use of a trusted device (to which the user has already logged in with their own identity); </li>
-					<li> Security tokens, some of which are hardware devices, can be used to make authentication easier. Security tokens are used instead of, or in addition to, other forms of authentication such as passwords. Security-token hardware devices: <ul>
-							<li> include key fobs, rings, or small keypads; </li>
-							<li> can store and/or generate a digital signature, a PIN, or biometric data; </li>
-							<li> can transmit such data via a USB connector, RFID, Bluetooth wireless, or NFC. </li>
-							<li></li>
-						</ul>
-					</li>
-					<li> biometrics; </li>
-					<li> being already logged in to third-party authentication services (e.g., OAuth, Facebook, etc.). </li>
-					<li> Fast IDentity Online (FIDO), password-free standards for typical and two-factor authentication. <ul>
-							<li> FIDO relies upon user authentication based upon a user's device (e.g., phone, tablet, computer). </li>
-							<li> A user's device registers the user, to a server, via a public key. </li>
-							<li> Upon a challenge from the server, the user's device responds with a private key. </li>
-							<li> The device's keys are unlocked by the user biometrically (e.g., fingerprint scanner) or by a button press, not by a password. </li>
-						</ul>
-					</li>
-				</ul>
-			</section>
-		</section>
-	</body>
-</html>
diff --git a/understanding/21/animation-from-interactions.html b/understanding/21/animation-from-interactions.html
index 2d4454a342..d5b51b9378 100644
--- a/understanding/21/animation-from-interactions.html
+++ b/understanding/21/animation-from-interactions.html
@@ -1,12 +1,23 @@
 <!DOCTYPE html>
 <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
 	<head>
-		<meta charset="UTF-8" />
+		<meta charset="UTF-8"/>
 		<title>Understanding Animation from Interactions</title>
-		<link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove" />
+		<link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/>
 	</head>
 	<body>
 		<h1>Understanding Animation from Interactions</h1>
+
+		<section id="brief">
+			<h2>In brief</h2>
+			<dl>
+				<dt>Goal</dt><dd>Users are not harmed or distracted by motion.</dd>
+				<dt>What to do</dt><dd>Support user preferences for motion, and eliminate unnecessary motion effects.</dd>
+				<dt>Why it's important</dt><dd>People can get sick from motion effects.</dd>
+			</dl>
+	
+		</section>		
+		
 		<section id="intent">
 			<h2>Intent</h2>
 
@@ -16,22 +27,21 @@ <h2>Intent</h2>
 
 			<p class="note">The impact of animation on people with vestibular disorders can be quite severe. Triggered reactions include nausea, migraine headaches, and potentially needing bed rest to recover.</p>
 
-      <p><strong>How can a website reduce the chances of triggering a vestibular disorder?</strong> Choose any one of the following solutions. Avoid using unnecessary animation. Provide a control for users to turn off non-essential animations from user interaction. Take advantage of the reduce motion feature in the user-agent or operating system.</p>
+      <p><strong>How can a website reduce the chances of triggering a vestibular disorder?</strong> Choose any one of the following solutions. Avoid using unnecessary animation. Provide a control for users to turn off non-essential animations from user interaction. Take advantage of the reduce motion feature in the user agent or operating system.</p>
       
       <p><strong>What about movement caused by a user scrolling a page?</strong> Moving new content into the viewport is essential for scrolling. The user controls the essential scrolling movement so it is allowed. Only add non-essential animation to the scrolling interaction in a responsible way. Always give users the ability to turn off unnecessary movement.</p>
-			
-			<section id="benefits">
-				<h3>Benefits</h3>
-        <ul>
-          <li><strong>Vestibular Disorder</strong>
-            <ul>
-                <li>People with vestibular disorders need control over movement triggered by interactions. Non-essential movement can trigger vestibular disorder reactions. Vestibular (inner ear) disorder reactions include distraction, dizziness, headaches and nausea.</li>
-                <li>Persona Quote: "Stop that extra movement! You are making me so dizzy I cannot concentrate. Now I have to turn off my computer and go lie down."</li>
-            </ul>
-          </li>
-        </ul>
-			</section>
 		</section>
+    <section id="benefits">
+      <h2>Benefits</h2>
+      <ul>
+        <li><strong>Vestibular Disorder</strong>
+          <ul>
+              <li>People with vestibular disorders need control over movement triggered by interactions. Non-essential movement can trigger vestibular disorder reactions. Vestibular (inner ear) disorder reactions include distraction, dizziness, headaches and nausea.</li>
+              <li>Persona Quote: "Stop that extra movement! You are making me so dizzy I cannot concentrate. Now I have to turn off my computer and go lie down."</li>
+          </ul>
+        </li>
+      </ul>
+    </section>
 		<section id="examples">
 			<h2>Examples</h2>
       <ul>
@@ -74,16 +84,6 @@ <h3>Sufficient</h3>
 						<li>Gx: Allowing users to set a preference that prevents animation.</li>
 					</ul>
 			</section>
-			<!--<section id="advisory">
-				<h2>Advisory</h2>
-				<p class="instructions">Techniques that are not sufficient by themselves to meet the Guideline or Success Criterion.</p>
-				<p class="instructions">Same template as sufficient techniques.</p>
-			</section>
-			<section id="failure">
-				<h2>Failure</h2>
-				<p class="instructions">Techniques that document conditions that would cause the page not to meet the Guideline or Success Criterion, even if sufficient techniques are also used.</p>
-				<p class="instructions">Same template as sufficient techniques.</p>
-			</section>-->
 		</section>
 	</body>
 </html>
diff --git a/understanding/21/character-key-shortcuts.html b/understanding/21/character-key-shortcuts.html
index 69c95fd7b8..d5a2fe6f88 100644
--- a/understanding/21/character-key-shortcuts.html
+++ b/understanding/21/character-key-shortcuts.html
@@ -1,65 +1,75 @@
 <!DOCTYPE html>
 <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
 	<head>
-		<meta charset="UTF-8" />
+		<meta charset="UTF-8"/>
 		<title>WCAG 2.0 Understanding Page</title>
-		<link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove" />
+		<link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/>
 	</head>
 	<body>
 		<h1>Understanding Character Key Shortcuts</h1>
+
+		<section id="brief">
+			<h2>In brief</h2>
+			<dl>
+				<dt>Goal</dt><dd>Reduce accidental activation of keyboard shortcuts.</dd>
+				<dt>What to do</dt><dd>Ensure character-only shortcut keys can be turned off or modified.</dd>
+				<dt>Why it's important</dt><dd>Character-key shortcuts are easy to accidentally trigger, especially with speech input.</dd>
+			</dl>
+		</section>
+
 		<section id="intent">
 			<h2>Intent</h2>
-<p>The intent of this Success Crition is to reduce accidental activation of keyboard shortcuts. Character key shortcuts work well for many keyboard users, but are inappropriate and frustrating for speech input users &#8212; whose means of input is strings of letters &#8212; and for keyboard users who are prone to accidentally hit keys.
-To rectify this issue, authors need to allow users to turn off or reconfigure shortcuts that are made up of only character keys.
-</p>
-<p>Note that this success criterion doesn't affect components such as listboxes and drop-down menus. Although these components contain values (words) that may be selected by one or more character keys, the shortcuts are only active when the components have focus. Other components such as menus may be accessed or opened with a single non-character shortcut (e.g., Alt or Alt+F) before pressing a single character key to select an item. This makes the full path to invoking a menu a two-step shortcut that includes a non-printable key. <a href="https://www.w3.org/TR/html5/single-page.html#the-accesskey-attribute">Accesskeys</a> are also not affected because they include modifier keys.</p>
-<h3>Background on the mechanics of speech input:</h3> 
-  <p>Speech Input users generally work in a single mode where they can use a mix of dictation and speech commands. This works well because the user knows to pause before and after commands, and commands are usually at least two words long. So, for instance, a user might say a bit of dictation, such as "the small boat", then pause, and say a command to delete that dictation, such as "Delete Line". In contrast, if the user were to say the two phrases together without a pause, the whole phrase would come out as dictation (i.e., "the small boat delete line"). Although speech input programs often include modes that listen only for dictation or only for commands, most speech users use the all-encompassing mode all the time because it is a much more efficient workflow. It could decrease command efficiency significantly if users were to change to command mode and back before and after issuing each command.</p>
-<p>Speech users can also speak most keyboard commands (e.g., "press Control Foxtrot") without any problems. If the website or app is keyboard enabled, the speech user can also write a native speech macro that calls the keyboard command, such as "This Print" to carry out Ctrl+P.</p>
-<p>Single-key shortcuts are the exception. While using single letter keys as controls might be appropriate and efficient for many keyboard users, single-key shortcuts are disastrous for speech users. The reason for this is that when only a single key is used to trip a command, a spoken word can become a barrage of single-key commands if the cursor focus happens to be in the wrong place.</p>
-<p>For example, a speech-input user named Kim has her cursor focus in the main window of a web mail application that uses common keyboard shortcuts to navigate ("k"), archive ("y") and mute messages ("m"). A coworker named Mike enters her office and says "Hey Kim" and her microphone picks that up. The Y of "hey" archives the current message. K in "Kim" moves down one conversation and M mutes a message or thread. And, if Kim looks up and says "Hey Mike" without remembering to turn off the microphone, the same three things happen in a different sequence.</p>
-<p>A user interacting with a webpage or web app that doesn't use single-character shortcuts doesn't have this problem. Inadvertent strings of characters from the speech application are not interpreted as shortcuts if a modifier key is required. A speech user filling in a text input form may find that a phrase that is accidentally picked up by the speech microphone results in stray text being entered into the field, but that is easily seen and undone. The Resources section of this page contains links to videos demonstrating these types of issues.</p>
-			<section id="benefits">
-				<h3>Benefits</h3>
-				<ul>
-  <li>Speech users will be able to turn off single-key shortcuts so they can avoid accidentally firing batches of them at once. This will allow speech users to make full use of programs that offer single-key shortcuts to keyboard users.</li>
-  <li>Keyboard-only users who have dexterity challenges can also be prone to accidentally hitting keys. Those users would be able to avoid problematic single character shortcuts by turning them off or modifying them to include at least one non-character key.</li>
-  <li>Allowing <em>all</em> shortcut keys to be remapped can help users with some cognitive disabilities, since the same shortcuts can be assigned to perform the same actions across different applications.</li>
-        </ul>
-			</section>
+      <p>The intent of this Success Criterion is to reduce accidental activation of keyboard shortcuts. Character key shortcuts work well for many keyboard users. However, they can be inappropriate and frustrating for speech input users, whose dictation is interpreted as strings of letters, and for keyboard users who are prone to accidentally hit keys. To rectify this issue, authors need to allow users to turn off or reconfigure shortcuts that are made up of only character keys.</p>
+			<div class="note">
+				<p>Even though this Success Criterion refers to <q>character keys</q>, note that it's not relevant whether a shortcut can be activated using a single physical key on a keyboard, or if it requires a combination of keys to be pressed. For instance, on most full-size US and UK keyboard, the <kbd>?</kbd> (question mark) symbol is accessed using <kbd><kbd>Shift</kbd>+<kbd>/</kbd></kbd> (forward slash key next to the right-hand <kbd>Shift</kbd> key). On a UK keyboard, in Windows, the <kbd>é</kbd> (lowercase "e" with an acute accent) requires the use of <kbd><kbd>AltGr</kbd>+<kbd>e</kbd></kbd>. The specific key combination required for certain characters will also vary depending on the user's keyboard layout. However, shortcuts that use these characters still fall under the requirements of this Success Criterion. What matters is that a shortcut relies on a printable character (letters, punctuation, numbers, symbol characters), and not the number of physical keyboard keys that users need to press to trigger it.</p>
+			</div>
+			<div class="note">
+				<p>The Success Criterion also applies to situations where a shortcut is based on a <em>sequence</em> of character keys – for example, pressing <kbd>G</kbd> and then <kbd>A</kbd> in quick succession to trigger an action. While the individual character key presses don't immediately trigger the action, overall these types of shortcuts still rely on a series of <em>character keys</em>.</p>
+			</div>
+      <p>This success criterion doesn't affect components such as listboxes and drop-down menus. Although these components contain values (words) that may be selected by one or more character keys, the shortcuts are only active when the components have focus. Other components such as menus may be accessed or opened with a single non-character shortcut (e.g., <kbd>Alt</kbd> or <kbd><kbd>Alt</kbd>+<kbd>F</kbd></kbd>) before pressing a single character key to select an item. This makes the full path to invoking a menu a two-step shortcut that includes a non-printable key. <a href="https://www.w3.org/TR/html5/single-page.html#the-accesskey-attribute">Accesskeys</a> are also not affected because they are generally (depending on the user agent) activated using modifier keys.</p>
+      <h3>Background on the mechanics of speech input</h3>
+      <p>Speech input users generally work in a single mode where they can use a mix of dictation and speech commands. This works well because the user knows to pause before and after commands, and commands are usually at least two words long. So, for instance, a user might say a bit of dictation, such as "the small boat", then pause, and say a command to delete that dictation, such as "Delete Line". In contrast, if the user were to say the two phrases together without a pause, the whole phrase would come out as dictation (i.e., "the small boat delete line"). Although speech input programs often include modes that listen only for dictation or only for commands, most speech users use the all-encompassing mode all the time because it is a much more efficient workflow. It could decrease command efficiency significantly if users were to change to command mode and back before and after issuing each command.</p>
+      <p>Speech users can also speak most keyboard commands (e.g., "press Control Foxtrot") without any problems. If the website or app is keyboard enabled, the speech user can also write a native speech macro that calls the keyboard command, such as "This Print" to carry out <kbd><kbd>Ctrl</kbd>+<kbd>P</kbd></kbd>.</p>
+      <p>Single-key shortcuts are the exception. While using single letter keys as controls might be appropriate and efficient for many keyboard users, single-key shortcuts are disastrous for speech users. The reason for this is that when only a single key is used to trip a command, a spoken word can become a barrage of single-key commands if the cursor focus happens to be in the wrong place.</p>
+      <p>For example, a speech-input user named Kim has her cursor focus in the main window of a web mail application that uses common keyboard shortcuts to navigate (<kbd>k</kbd>), archive (<kbd>y</kbd>) and mute messages (<kbd>m</kbd>). A coworker named Mike enters her office and says "Hey Kim" and her microphone picks that up. The Y of "hey" archives the current message. K in "Kim" moves down one conversation and M mutes a message or thread. And, if Kim looks up and says "Hey Mike" without remembering to turn off the microphone, the same three things happen in a different sequence.</p>
+      <p>A user interacting with a webpage or web app that doesn't use single-character shortcuts doesn't have this problem. Inadvertent strings of characters from the speech application are not interpreted as shortcuts if a modifier key is required. A speech user filling in a text input form may find that a phrase that is accidentally picked up by the speech microphone results in stray text being entered into the field, but that is easily seen and undone. The Resources section of this page contains links to videos demonstrating these types of issues.</p>
 		</section>
+    <section id="benefits">
+      <h2>Benefits</h2>
+      <ul>
+        <li>Speech users will be able to turn off single-key shortcuts so they can avoid accidentally firing batches of them at once. This will allow speech users to make full use of programs that offer single-key shortcuts to keyboard users.</li>
+        <li>Keyboard-only users who have dexterity challenges can also be prone to accidentally hitting keys. Those users would be able to avoid problematic single character shortcuts by turning them off or modifying them to include at least one non-character key.</li>
+        <li>Allowing <em>all</em> shortcut keys to be remapped can help users with some cognitive disabilities, since the same shortcuts can be assigned to perform the same actions across different applications.</li>
+      </ul>
+    </section>
 		<section id="examples">
 			<h2>Examples</h2>
 			<section class="example">
-			       
-      <h3>Disable Shortcuts</h3>
-<p>A mechanism is provided to allow users to disable character-key shortcuts. The character key shortcuts are not the only way to carry out these commands. A speech user disables the shortcuts and can prevent words that are picked up by the microphone from triggering single-key shortcuts.</p>
+				<h3>Disable Shortcuts</h3>
+				<p>A mechanism is provided to allow users to disable character-key shortcuts. The character key shortcuts are not the only way to carry out these commands. A speech user disables the shortcuts and can prevent words that are picked up by the microphone from triggering single-key shortcuts.</p>
 			</section>
 			<section class="example">
-
-<h3>Alternate Control</h3>
-
-<p>A keyboard-only user is in a long issues thread. While reading the thread she accidentally hits the S key, which moves focus to the search bar at the top of the document. This causes her to lose her place and her train of thought. However, a mechanism is provided to allow users to change character-key shortcuts. She changes the shortcut to include another key so she can avoid future interruptions.</p>
+        <h3>Alternate Control</h3>
+        <p>Keyboard-only users are in a long issues thread. While reading the thread they accidentally hit the S key, which moves focus to the search bar at the top of the document. This causes them to lose their place and train of thought. However, a mechanism is provided to allow users to change character-key shortcuts. They change the shortcut to include another key so they can avoid future interruptions.</p>
 			</section>
-
-  </section>
+		</section>
 		<section id="resources">
 			<h2>Resources</h2>
 			<p>Web apps that use character-key shortcuts and allow users to disable and/or change these shortcuts:</p>
-<ul>
-  <li>Gmail</li>
-  <li>WordPress</li>
-</ul>
-<p>Videos of speech user trouble with single character key shortcuts:</p>
-<ul>
-      <li><a rel="nofollow" href="https://www.youtube.com/watch?v=xzSyIA4OWYE">Single character key shortcuts affecting speech input – example 1</a></li>
-<li><a rel="nofollow" href="https://www.youtube.com/watch?v=OPjfpDU9S08">Single character key shortcuts affecting speech input – example 2</a></li>
-      </ul>	
-  </section>
+			<ul>
+				<li>Gmail</li>
+				<li>WordPress</li>
+			</ul>
+			<p>Videos of speech user trouble with single character key shortcuts:</p>
+			<ul>
+				<li><a rel="nofollow" href="https://www.youtube.com/watch?v=xzSyIA4OWYE">Single character key shortcuts affecting speech input – example 1</a></li>
+				<li><a rel="nofollow" href="https://www.youtube.com/watch?v=OPjfpDU9S08">Single character key shortcuts affecting speech input – example 2</a></li>
+      </ul>
+		</section>
 		<section id="techniques">
 			<h2>Techniques</h2>
 			<section id="sufficient">
-				<h3>Sufficient</h3>					
+				<h3>Sufficient</h3>
 					<ul>
 						<li><a href="../../techniques/general/G217">G217</a></li>
 					</ul>
diff --git a/understanding/21/concurrent-input-mechanisms.html b/understanding/21/concurrent-input-mechanisms.html
index 00cc05ef02..eae3199d8e 100644
--- a/understanding/21/concurrent-input-mechanisms.html
+++ b/understanding/21/concurrent-input-mechanisms.html
@@ -1,12 +1,23 @@
 <!DOCTYPE html>
 <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
 	<head>
-		<meta charset="UTF-8" />
+		<meta charset="UTF-8"/>
 		<title>WCAG 2.0 Understanding Page</title>
-		<link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove" />
+		<link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/>
 	</head>
 	<body>
 		<h1>Understanding Concurrent Input Mechanisms</h1>
+
+	<section id="brief">
+		<h2>In brief</h2>
+		<dl>
+			<dt>Goal</dt><dd>Users can choose different ways of inputting content.</dd>
+			<dt>What to do</dt><dd>Do not prevent users from switching their mode of input.</dd>
+			<dt>Why it's important</dt><dd>People may not be able to work using just one input method.</dd>
+		</dl>
+  
+	</section>
+    
 		<section id="intent">
 			<h2>Intent</h2>
         <p>The intent of this Success Criterion is to ensure that people can use and switch between different modes of input when interacting with web content. Users may employ a variety of input mechanisms when interacting with web content. These may be a combination of mechanisms such as a keyboard or keyboard-like interfaces and pointer devices like a mouse, stylus or touchscreen.</p>
@@ -15,7 +26,7 @@ <h2>Intent</h2>
         <p>Note: A touch-typing web application, which teaches users how to touch-type on a keyboard and/or measures their proficiency and speed, would be an example of an essential limitation to a particular input mechanism. </p>
 		</section>
 		<section id="benefits">
-        <h3>Benefits</h3>
+        <h2>Benefits</h2>
 				<ul>
 					<li>Users can interact with web content with whichever input mechanism is preferred and available to them.</li>
           <li>Users may switch between input mechanisms when they desire or the circumstances require it.</li>
@@ -25,7 +36,7 @@ <h3>Benefits</h3>
 		<section id="examples">
 			<h2>Examples</h2>
       <ul>
-        <li>A user with mobility impairment pairs a mouse and keyboard to her mobile phone with a touchscreen. The phone can thereafter be operated by those input devices and the content does not accept the touchscreen as the only input mechanism.</li>
+        <li>A user with mobility impairment pairs a mouse and keyboard to a mobile phone with a touchscreen. The phone can thereafter be operated by those input devices and the content does not accept the touchscreen as the only input mechanism.</li>
         <li>On a touch-enabled laptop with coarse precision, people who have difficulty activating a small target because of hand tremors, limited dexterity or other reasons are still able to interact with content using their keyboard and trackpad.</li>
         <li>A user starts interacting with a page using a desktop keyboard, and then attaches a secondary touch-enabled monitor. Content can be operated using this newly added input mechanism and does not assume that the keyboard, the first input mechanism it detected, is the only one in use.</li>
         <li>A speech input user navigates content using voice commands which translate to simulate mouse (and keyboard) commands. When talking with a colleague, however, the user turns speech recognition off and uses the mouse instead.</li>
@@ -47,8 +58,8 @@ <h2>Techniques</h2>
 			<section id="sufficient">
 				<h3>Sufficient</h3>
 				<ul>
-          <li>@@ Only using high-level, input-agnostic event handlers (<code>focus</code>, <code>blur</code>, <code>click</code>) in Javascript (operating systems/UAs fire these events for all input mechanisms).</li>
-          <li>@@ Registering event handlers for keyboard/keyboard-like and pointer inputs simultaneously in Javascript (see <a href="https://w3c.github.io/pointerevents/#examples">Example 1 in Pointer Events Level 2</a>)</li>
+          <li>Only using high-level, input-agnostic event handlers, such as <code>focus</code>, <code>blur</code>, <code>click</code>, in Javascript (Potential future technique).</li>
+          <li> Registering event handlers for keyboard/keyboard-like and pointer inputs simultaneously in Javascript; see <a href="https://w3c.github.io/pointerevents/#examples">Example 1 in Pointer Events Level 2</a> (Potential future technique)</li>
         </ul>
 			</section>
 			<section id="failure">
diff --git a/understanding/21/content-on-hover-or-focus.html b/understanding/21/content-on-hover-or-focus.html
index 7e8cb6e3f5..cdca887970 100644
--- a/understanding/21/content-on-hover-or-focus.html
+++ b/understanding/21/content-on-hover-or-focus.html
@@ -1,20 +1,30 @@
 <!DOCTYPE html>
 <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
 	<head>
-		<meta charset="UTF-8" />
+		<meta charset="UTF-8"/>
 		<title>Understanding Content on Hover or Focus</title>
-		<link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove" />
+		<link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/>
 	</head>
 	<body>
 		<h1>Understanding Content on Hover or Focus</h1>
+
+		<section id="brief">
+			<h2>In brief</h2>
+			<dl>
+				<dt>Goal</dt><dd>More users can perceive and dismiss non-persistent content.</dd>
+				<dt>What to do</dt><dd>If hover or focus causes content changes, ensure interaction is predictable.</dd>
+				<dt>Why it's important</dt><dd>Unpredictable temporary content can be hard for some to consume and may disrupt others.</dd>
+			</dl>
+		</section>
+
 		<section id="intent">
 			<h2>Intent</h2>
 			<p>Additional content that appears and disappears in coordination with keyboard focus or pointer hover often leads to accessibility issues. Reasons for such issues include:</p>
-			<ol>
-			<li>the user may not have intended to trigger the interaction</li>
-			<li>the user may not know new content has appeared</li>
-			<li>the new content may intefere with a user's ability to do a task</li>
-		</ol>
+			<ul>
+				<li>the user may not have intended to trigger the interaction</li>
+				<li>the user may not know new content has appeared</li>
+				<li>the new content may intefere with a user's ability to do a task</li>
+			</ul>
 
 			<p>Examples of such interactions can include custom tooltips, sub-menus and other nonmodal popups which display on hover and focus. The intent of this success criterion is to ensure that authors who cause additional content to appear and disappear in this manner must design the interaction in such a way that users can:</p>
 				<ul>
@@ -29,17 +39,15 @@ <h2>Intent</h2>
 					<li>persistent</li>
 				</ul>
 				<p>Each of these is discussed in a separate section.</p>
-				<p class="note">This SC covers content that appears in addition to the triggering component itself. Therefore, a non-visible component, like a Skip to Main link, that is made visible on keyboard focus (with no <em>additional</em> content beyond the trigger becoming visible) is not covered by the SC.
-			</p>
 
 			<section>
 			<h3>Dismissable</h3>
 			<p>The intent of this condition is to ensure that the additional content does not interfere with viewing or operating the page's original content. When magnified, the portion of the page visible in the viewport can be significantly reduced. Mouse users frequently move the pointer to pan the magnified viewport and display another portion of the screen. However, almost the entire portion of the page visible in this restricted viewport may trigger the additional content, making it difficult for a user to pan without re-triggering the content. A keyboard means of dismissing the additional content provides a workaround.</p>
 			<p>Alternatively, low vision users who can only navigate via the keyboard do not want the small area of their magnified viewport cluttered with hover text. They need a keyboard method of dismissing something that is obscuring the current focal area.</p>
-		<p>Two methods may be used to satisfy this condition and prevent such interference:</p>
+			<p>Two methods may be used to satisfy this condition and prevent such interference:</p>
 			<ol>
-			<li>Position the additional content so that it does not obscure any other content including the trigger, with the exception of white space and purely decorative content, such as a background graphic which provides no information.</li>
-			<li>Provide a mechanism to easily dismiss the additional content, such as by pressing Escape.</li>
+				<li>Position the additional content so that it does not obscure any other content including the trigger, with the exception of white space and purely decorative content, such as a background graphic which provides no information.</li>
+				<li>Provide a mechanism to easily dismiss the additional content, such as by pressing Escape.</li>
 			</ol>
 			<p>For most triggers of relatively small size, it is desirable for both methods to be implemented.  If the trigger is large, noticing the additional content may be of concern if it appears away from the trigger.  In those cases, only the second method may be appropriate.</p>
 			<p>The success criterion allows for input error messages to persist as there are cases that require attention, explicit confirmation or remedial action.</p>
@@ -53,52 +61,52 @@ <h3>Hoverable</h3>
 			<h3>Persistent</h3>
 			<p>The intent of this condition is to ensure users have adequate time to perceive the additional content after it becomes visible.  Users with disabilities may require more time for many reasons, such as to change magnification, move the pointer, or simply to bring the new content into their visual field.  Once it appears, the content should remain visible until:</p>
 			<ul>
-			<li>The user removes hover or focus from the trigger and the additional content, consistent with the typical user experience;</li>
-			<li>The user dismisses the additional content via the mechanism provided to satisfy the Dismissable condition; or</li>
-			<li>The information conveyed by the additional content becomes invalid, such as a 'busy' message that is no longer valid.</li>
+				<li>The user removes hover or focus from the trigger and the additional content, consistent with the typical user experience;</li>
+				<li>The user dismisses the additional content via the mechanism provided to satisfy the Dismissable condition; or</li>
+				<li>The information conveyed by the additional content becomes invalid, such as a 'busy' message that is no longer valid.</li>
 			</ul>
 			</section>
 			<section>
 			<h3>Additional Notes</h3>
 			<ul>
-			<li>This criterion does not attempt to solve such issues when the appearance of the additional content is completely controlled by the user agent. A prominent example is the common behavior of browsers to display the <code>title</code>  attribute in HTML as a small tooltip.</li>
-			<li>Modal dialogs are out of scope for this criterion because they must take keyboard focus  and thus should not appear on hover or focus.  Refer to <a href="https://www.w3.org/TR/WCAG21/#on-focus">Success Criterion 3.2.1, On Focus</a>.</li>
-			<li>Content which can be triggered via pointer hover should also be able to be triggered by keyboard focus.  Refer to <a href="https://www.w3.org/TR/WCAG21/#keyboard">Success Criterion 2.1.1, Keyboard</a>.</li>
+				<li>This criterion does not attempt to solve such issues when the appearance of the additional content is completely controlled by the user agent. A prominent example is the common behavior of browsers to display the <code>title</code>  attribute in HTML as a small tooltip.</li>
+				<li>Modal dialogs are out of scope for this criterion because they must take keyboard focus  and thus should not appear on hover or focus.  Refer to <a href="https://www.w3.org/TR/WCAG21/#on-focus">Success Criterion 3.2.1, On Focus</a>.</li>
+				<li>Content which can be triggered via pointer hover should also be able to be triggered by keyboard focus.  Refer to <a href="https://www.w3.org/TR/WCAG21/#keyboard">Success Criterion 2.1.1, Keyboard</a>.</li>
 			</ul>
 			</section>
 		</section>
-			
-			<section id="benefits">
+
+		<section id="benefits">
 			<h2>Benefits</h2>
 			<ul>
-			<li>Users with low vision who view content under magnification will be better able to view content on hover or focus without reducing their desired magnification.</li>
-			<li>Users who increase the size of mouse cursors via platform settings or assistive technology will be able to employ a technique to view obscured content on hover.</li>
-			<li>Users with low vision or cognitive disabilities will have adequate time to perceive additional content appearing on hover or focus and to view the trigger content with less distraction.</li>
-			<li>users with low pointer accuracy will be able to more easily dismiss unintentionally-triggered additional content</li>
+				<li>Users with low vision who view content under magnification will be better able to view content on hover or focus without reducing their desired magnification.</li>
+				<li>Users who increase the size of mouse cursors via platform settings or assistive technology will be able to employ a technique to view obscured content on hover.</li>
+				<li>Users with low vision or cognitive disabilities will have adequate time to perceive additional content appearing on hover or focus and to view the trigger content with less distraction.</li>
+				<li>users with low pointer accuracy will be able to more easily dismiss unintentionally-triggered additional content</li>
 			</ul>
 		</section>
-		
+
 		<section id="examples">
 			<h2>Examples</h2>
-			
+
 			<section class="example">
 				<h3>Example 1: Dismissable Tooltip</h3>
 				<figure id="figure-mouse-tooltip-below">
-				<img src="img/button-pointer-tooltip.png" alt="Screenshot of a button with a mouse pointer over it, and a tooltip displayed  below the button" />
-				<img src="img/button-pointer.png" alt="Screenshot of a button with a mouse pointer over it, and no tooltip" />
+				<img src="img/button-pointer-tooltip.png" alt="Screenshot of a button with a mouse pointer over it, and a tooltip displayed  below the button"/>
+				<img src="img/button-pointer.png" alt="Screenshot of a button with a mouse pointer over it, and no tooltip"/>
 				<figcaption>A tooltip is displayed below a LVTF button on hover so as not to obscure the button itself. It does however obscure content below the button (the next red button, called ~comment-zoom-content). To meet the Dismissible requirement, a user can press the Escape key to clear the tooltip without moving the mouse, as demonstrated in the second image.</figcaption>
 				</figure>
 				<figure id="figure-focused-button-no-tooltip">
-				<img src="img/button-focus-indicator.png" alt="Screenshot of a button with a focus indicator on it, and no tooltip" />
+				<img src="img/button-focus-indicator.png" alt="Screenshot of a button with a focus indicator on it, and no tooltip"/>
 				<figcaption>The button's tooltip also appears on focus and can be removed with the Escape key. The screen shot shows the same LVTF button with focus, but the tooltip has been dismissed and is no longer visible.</figcaption>
 				</figure>
 			</section>
-			
+
 			<section class="example">
 				<h3>Example 2: Hoverable Tooltip</h3>
 				<figure id="figure-large-pointer-tooltip">
-				<img src="img/button-pointer-on-tooltip.png" alt="Screenshot of a button with a large mouse pointer over it, and a tooltip displayed  below the button which is obscured by the large pointer" />
-				<img src="img/button-pointer-below-tooltip.png" alt="Screenshot of a button with a tooltip below it, and a large mouse pointer at the bottom of the tooltip" />
+				<img src="img/button-pointer-on-tooltip.png" alt="Screenshot of a button with a large mouse pointer over it, and a tooltip displayed  below the button which is obscured by the large pointer"/>
+				<img src="img/button-pointer-below-tooltip.png" alt="Screenshot of a button with a tooltip below it, and a large mouse pointer at the bottom of the tooltip"/>
 				<figcaption>A button's tooltip is displayed directly below it on mouse hover which can easily be obscured by a large pointer.  The tooltip itself is able to be hovered so the mouse pointer can be moved down to its bottom edge in order to view the tooltip text.</figcaption>
 				</figure>
 			</section>
@@ -107,18 +115,18 @@ <h3>Example 2: Hoverable Tooltip</h3>
 		<section id="resources">
 			<h2>Resources</h2>
 			<ul>
-				<li><a href="https://www.w3.org/TR/wai-aria-practices-1.1/#tooltip">Tooltip design described in WAI-ARIA Authoring Practices</a></li>
+				<li><a href="https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/">Tooltip design described in WAI-ARIA Authoring Practices</a></li>
 			</ul>
 		</section>
-		
+
 		<section id="techniques">
 			<h2>Techniques</h2>
 			<section id="sufficient">
 				<h3>Sufficient</h3>
 					<ul>
 						<li><a href="../../techniques/client-side-script/SCR39.html">Making content on focus or hover hoverable, dismissible, and persistent</a></li>
-						<li>@@ ARIA: Using role="tooltip"</li>
-						<li>@@ CSS: Using hover and focus pseudo classes</li>
+						<li>ARIA: Using role="tooltip" (Potential future technique)</li>
+						<li>CSS: Using hover and focus pseudo classes (Potential future technique)</li>
 					</ul>
 			</section>
 			<!--<section id="advisory">
@@ -128,8 +136,8 @@ <h2>Advisory</h2>
 				<h2>Failure</h2>
 				<ul>
 					<li><a href="../../techniques/failures/F95.html">F95</a></li>
-					<li>@@ Failure to make content dismissable without moving pointer hover or keyboard focus</li>
-					<li>@@ Failure to meet by content on hover or focus not remaining visible until dismissed or invalid</li>
+					<li>Failure to make content dismissable without moving pointer hover or keyboard focus (Potential future technique)</li>
+					<li>Failure to meet by content on hover or focus not remaining visible until dismissed or invalid (Potential future technique)</li>
 				</ul>
 			</section>
 		</section>
diff --git a/understanding/21/identify-changes.html b/understanding/21/identify-changes.html
deleted file mode 100644
index b3fbf5f1b4..0000000000
--- a/understanding/21/identify-changes.html
+++ /dev/null
@@ -1,77 +0,0 @@
-<!DOCTYPE html>
-<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
-	<head>
-		<meta charset="UTF-8" />
-		<title>WCAG 2.0 Understanding Page</title>
-		<link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove" />
-	</head>
-	<body>
-		<h1>Understanding {Shortname}</h1>
-		<section id="intent">
-			<h2>Intent</h2>
-			<p class="instructions">This section contains the main explanatory content of the Understanding. It explains why the Guideline or Success Criterion exists and, at a high level, how to meet it.</p>
-			<section id="benefits">
-				<h3>Benefits</h3>
-				<p class="instructions">This explains how following the success criterion benefits particular types of users with disabilities.</p>
-				<ul>
-					<li>Benefit</li>
-				</ul>
-			</section>
-		</section>
-		<section id="examples">
-			<h2>Examples</h2>
-			<p class="instructions">Examples in Understanding pages are normally simple lists of hand-waving examples. Sometimes, examples are instead provided in sub-sections with headings. In either case, examples should stay high-level and not get into code specifics, which is for techniques.</p>
-			<ul>
-				<li>Example</li>
-			</ul>
-			<section class="example">
-				<h3>Example</h3>
-			</section>
-		</section>
-		<section id="resources">
-			<h2>Resources</h2>
-			<p class="instructions"></p>
-			<ul>
-				<li>Resource</li>
-			</ul>
-		</section>
-		<section id="techniques">
-			<h2>Techniques</h2>
-			<div class="instructions">
-				<p>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. </p>
-				<ul>
-					<li>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.</li>
-					<li>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.</li>
-					<li>If more than one technique must be used for full sufficiency, list them in the same bullet separated by "AND".</li>
-					<li>If a general technique requires technology-specific techniques to be implemented, end the bullet with "using" and provide a sub-list of those techniques.</li>
-					<li>Square brackets indicate optional components.</li>
-				</ul>
-				<p>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.</p>
-			</div>
-			<section id="sufficient">
-				<h3>Sufficient</h3>
-				<p class="instructions">Techniques that are sufficient to meet the Guideline or Success Criterion.</p>
-				<section class="situation">
-					<h4>Situation</h4>
-					<ul>
-						<li><a href="idref">ID</a> [AND <a href="idref">ID</a>]* [using]
-							<ul>
-								<li><a href="idref">ID</a></li>
-							</ul>
-						</li>
-					</ul>
-				</section>
-			</section>
-			<section id="advisory">
-				<h2>Advisory</h2>
-				<p class="instructions">Techniques that are not sufficient by themselves to meet the Guideline or Success Criterion.</p>
-				<p class="instructions">Same template as sufficient techniques.</p>
-			</section>
-			<section id="failure">
-				<h2>Failure</h2>
-				<p class="instructions">Techniques that document conditions that would cause the page not to meet the Guideline or Success Criterion, even if sufficient techniques are also used.</p>
-				<p class="instructions">Same template as sufficient techniques.</p>
-			</section>
-		</section>
-	</body>
-</html>
\ No newline at end of file
diff --git a/understanding/21/identify-input-purpose.html b/understanding/21/identify-input-purpose.html
index 1f9ce4f6cc..9e50e33d0c 100644
--- a/understanding/21/identify-input-purpose.html
+++ b/understanding/21/identify-input-purpose.html
@@ -1,24 +1,35 @@
 <!DOCTYPE html>
 <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
 <head>
-		<meta charset="UTF-8" />
+		<meta charset="UTF-8"/>
 		<title>Identify Input Purpose - Understanding WCAG 2.1</title>
-		<link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove" />
+		<link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/>
 </head>
 <body>
 <h1>Understanding Identify Input Purpose</h1>
+
+<section id="brief">
+  <h2>In brief</h2>
+  <dl>
+    <dt>Goal</dt><dd>It is easier to fill out forms.</dd>
+    <dt>What to do</dt><dd>Use code to indicate the purpose of common inputs, where technology allows.</dd>
+    <dt>Why it's important</dt><dd>Some people with cognitive disabilities may not understand the input's purpose from the label alone.</dd>
+  </dl>
+
+</section>
+
 <section id="intent">
 			<h2>Intent of this Success Criterion</h2>
 	  
-			<p>The intent of this Success Criterion is to ensure that the purpose of a form input collecting information about the user can be programmatically determined, so that user agents can extract and present this purpose to users using different modalities. The ability to programmatically declare the specific kind of data expected in a particular field makes filling out forms easier, especially for people with cognitive disabilities.</p>
+			<p>The intent of this Success Criterion is to ensure that the purpose of a form input collecting information about the user can be programmatically determined, so that user agents can extract and present this purpose to users using different modalities. The ability to programmatically declare the specific kind of data expected in a particular field makes filling out forms easier, especially for people with certain cognitive disabilities.</p>
       <p>Appropriate visible labels and instruction can help users understand the purpose of form input fields, but users may benefit from having fields that collect specific types of information be rendered in an unambiguous, consistent, and possibly customized way for different modalities - either through defaults in their user agent, or through the aid of assistive technologies.</p>
-      <p>For some input fields, the type attribute already offers a way to broadly specify the intention of the input field, for example, input type="tel", input type="email", or input type="password". However, these are only very broad categories, describing the type of input, but not necessarily its purpose, especially as it relates to user-specific input fields. As an example, type="email" indicates that the field is for an e-mail address but does not clarify if the purpose is for entering the user's e-mail address or some other person's e-mail.</p>
+      <p>For some input fields, the <code>type</code> attribute already offers a way to broadly specify the intention of the input field, for example, <code>&lt;input type="tel"&gt;</code>, <code>&lt;input type="email"&gt;</code>, or <code>&lt;input type="password"&gt;</code>. However, these are only very broad categories, describing the type of input, but not necessarily its purpose, especially as it relates to user-specific input fields. As an example, <code>type="email"</code> indicates that the field is for an e-mail address but does not clarify if the purpose is for entering the user's e-mail address or some other person's e-mail.</p>
       <p>This success criterion defines the types of user interface component input purposes, found in <a href="https://www.w3.org/TR/WCAG21/#input-purposes">Section 7 of the WCAG 2.1 Recommendation</a>, that must be programmatically identifiable. When these user input purposes are present, and if the technology supports doing so, the field purpose must be programmatically identifiable.</p>
-      <p>The HTML autocomplete attribute only accepts a certain number of specific well-defined fixed values. This allows a more fine-grained definition or identification of purpose than the type attribute, for example, by allowing the author to specify a specific type of name: Name (autocomplete="name”), Given Name (autocomplete="given-name”), Family Name (autocomplete="family-name”), as well as Username (autocomplete="username”), and Nickname (autocomplete="nickname”).</p>           
-      <p>By adopting and repurposing this predefined taxonomy of definitions, user agents and assistive technologies can now present the purpose of the inputs to users in different modalities. For example, assistive technologies may display familiar icons next to input fields to help users who have difficulties reading. An icon of a birthday cake may be shown in front of an input field with autocomplete="bday", or the icon of a telephone in front of an input field with autocomplete="tel".</p>
-      <p>In addition to repurposing this taxonomy, when the autocomplete attribute technique is used to meet this Success Criterion, browsers and other user-agents can suggest and 'autofill' the right content by autocompleting these fields based on past user input stored in the browser. By defining more granular definitions of common input purposes, for example “Birthday” (autocomplete=”bday”), browsers can store personalized values for each of these fields (the user's birthday date). The user is relieved of having to type the information and can instead confirm or, if needed, change the value of the field, a significant benefit for users with memory issues, dyslexia, and other disabilities. Because the autocomplete values are independent of language, users that may not be familiar with the text used to visually identify user input fields (the label) can still have that purpose consistently identified to them due to the fixed taxonomy of terms.</p>
+      <p>The HTML <code>autocomplete</code> attribute only accepts a certain number of specific well-defined fixed values. This allows a more fine-grained definition or identification of purpose than the type attribute, for example, by allowing the author to specify a specific type of name: Name (<code>autocomplete="name"</code>), Given Name (<code>autocomplete="given-name"</code>), Family Name (<code>autocomplete="family-name"</code>), as well as Username (<code>autocomplete="username"</code>), and Nickname (<code>autocomplete="nickname"</code>).</p>           
+      <p>By adopting and repurposing this predefined taxonomy of definitions, user agents and assistive technologies can now present the purpose of the inputs to users in different modalities. For example, assistive technologies may display familiar icons next to input fields to help users who have difficulties reading. An icon of a birthday cake may be shown in front of an input field with <code>autocomplete="bday"</code>, or the icon of a telephone in front of an input field with <code>autocomplete="tel"</code>.</p>
+      <p>In addition to repurposing this taxonomy, when the autocomplete attribute technique is used to meet this Success Criterion, browsers and other user-agents can suggest and 'autofill' the right content by autocompleting these fields based on past user input stored in the browser. By defining more granular definitions of common input purposes, for example “Birthday” (<code>autocomplete="bday"</code>), browsers can store personalized values for each of these fields (the user's birthday date). The user is relieved of having to type the information and can instead confirm or, if needed, change the value of the field, a significant benefit for users with memory issues, dyslexia, and other disabilities. Because the <code>autocomplete</code> values are independent of language, users that may not be familiar with the text used to visually identify user input fields (the label) can still have that purpose consistently identified to them due to the fixed taxonomy of terms.</p>
 <p>If an input field accepts two different types of input purpose (as in combined user name/user email fields) and the technology used does not allow multiple purpose values to be defined, it is valid to provide either one or the other value or leave out the designation of input purpose altogether.</p>
-  <p>When the user agent and assistive technology support for other metadata formats matures, metadata schemes like the <a href="https://w3c.github.io/personalization-semantics/content/">Personalization Semantics Content Module</a> may be used in addition or instead of the HTML autocomplete attribute to identify the purpose of input fields. They can also support automated adaptations that identify and match author-provided input labels to defined vocabularies or symbols that are used instead for labelling inputs.</p>
+  <p>When the user agent and assistive technology support for other metadata formats matures, metadata schemes like the <a href="https://www.w3.org/TR/adapt-symbols/">WAI-Adapt: Symbols Module</a> may be used in addition or instead of the HTML autocomplete attribute to identify the purpose of input fields. They can also support automated adaptations that identify and match author-provided input labels to defined vocabularies or symbols that are used instead for labelling inputs.</p>
 </section>
   
 <section id="benefits">
@@ -32,11 +43,15 @@ <h3>Specific Benefits of Success Criterion 1.3.5:</h3>
   
 <section id="examples">
 <h2>Examples of Success Criterion 1.3.5</h2>
-<ul>
-  <li><strong>A contact form using autofill</strong><br />A contact form auto-fills in the fields for name, street, post code, city, telephone number and email address from autofill values stored in the user's browser. Assistive technology can offer a customized way of identifying particular input fields, for example drawing on a set of symbols / icons that is familiar to the user, to communicate the purpose of the fields visually.</li>
-  <li><strong>An order from with separate billing and shipping address</strong><br />A product order form fills in the address fields for billing address and a separate set of address fields for the shipping address, using the autofill detail tokens 'billing' and 'shipping'</li>
-  <li><strong>A contact form using icons</strong><br />A browser plugin to add icons inserts icons representing the person's name, home address, telephone number and email address to  identify the input purpose visually.</li>
-</ul>
+
+<dl>
+  <dt>A contact form using autofill</dt>
+  <dd>A contact form auto-fills in the fields for name, street, post code, city, telephone number and email address from autofill values stored in the user's browser. Assistive technology can offer a customized way of identifying particular input fields, for example drawing on a set of symbols / icons that is familiar to the user, to communicate the purpose of the fields visually.</dd>
+  <dt>An order form with separate billing and shipping address</dt>
+  <dd>A product order form fills in the address fields for billing address and a separate set of address fields for the shipping address, using the autofill detail tokens 'billing' and 'shipping'</dd>
+  <dt>A contact form using icons</dt>
+  <dd>A browser plugin to add icons inserts icons representing the person's name, home address, telephone number and email address to  identify the input purpose visually.</dd>
+</dl>
 </section>
     
 <section id="resources">
diff --git a/understanding/21/identify-purpose.html b/understanding/21/identify-purpose.html
index c18476c368..faa9c70320 100644
--- a/understanding/21/identify-purpose.html
+++ b/understanding/21/identify-purpose.html
@@ -1,29 +1,31 @@
 <!DOCTYPE html>
 <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
 	<head>
-		<meta charset="UTF-8" />
+		<meta charset="UTF-8"/>
 		<title>Understanding Identify Purpose</title>
-		<link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove" />
+		<link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/>
 	</head>
 	<body>
 		<h1>Understanding Identify Purpose</h1>
+		<section id="brief">
+			<h2>In brief</h2>
+			<dl>
+				<dt>Goal</dt><dd>It is easier to operate and navigate content.</dd>
+				<dt>What to do</dt><dd>Use code to indicate the meaning of all controls and other key information, where available.</dd>
+				<dt>Why it's important</dt><dd>Some people with cognitive disabilities may not understand a control's purpose from the name alone.</dd>
+			</dl>
+		</section>
 		<section id="intent">
 			<h2>Intent</h2>
 			<p>The intent of this Success Criterion is to ensure that the purpose of many elements on a page can be programmatically determined, so that user agents can extract and present that purpose to users using different modalities.</p>
 			<p>Many users with limited vocabularies rely on familiar terms or symbols in order to use the web. However, what is familiar to one user may not be familiar to another. When authors indicate the purpose, users can take advantage of personalization and user preferences to load a set of symbols or vocabulary familiar to them.</p>
-    
-			<p>This Success Criterion requires the author to programmatically associate the purpose of icons, regions and components (such as buttons, links, and fields) so that user agents can determine the purpose of each and adapt indicators or terminology to make them understandable for the user. It is achieved by adding semantics or metadata that provide this context. It is similar to adding role information (as required by 4.2.1) but instead of providing information about what the UI component is (such as an image) it provides information about what the component represents (such as a link to the home page).</p>
-
+			<p>This Success Criterion requires the author to programmatically associate the purpose of icons, regions and components (such as buttons, links, and fields) so that user agents can determine the purpose of each and adapt indicators or terminology to make them understandable for the user. It is achieved by adding semantics or metadata that provide this context. It is similar to adding role information (as required by 4.1.2) but instead of providing information about what the UI component is (such as an image) it provides information about what the component represents (such as a link to the home page).</p>
 			<p>Identifying regions of the page allows people to remove or highlight regions with their user agent.</p>
-			  
 			<p>Products for people who are non-vocal often use symbols to help users communicate. These symbols are in fact people's language. Unfortunately, many of these symbols are both subject to copyright and not interoperable. That means end users can only use one device, and cannot use content, apps, or assistive technologies that have not been made by a single company.</p>
-
 			<p>This Success Criterion enables symbols to be interoperable so that symbol users can understand different content that was not just made by one company.  When users' symbols are mapped to the same nodes, then user agents can load the user-understandable symbol. People can then buy the symbols and use them across different devices or applications. (Note that the symbols would still be proprietary, but they could then be interoperable.)</p>
-
-    	</section>
+		</section>
 		<section id="benefits">
 			<h2>Benefits</h2>
-
 			<p>People who benefit have many different cognitive disabilities including:</p>
 			<ul>
 				<li>Memory</li>
@@ -31,31 +33,28 @@ <h2>Benefits</h2>
 				<li>Language-related</li>
 				<li>Executive function and decision making.</li>
 			</ul>
-
 			<p>Meeting this Success Criterion helps users who need extra support or a familiar interface, including the need for:</p>
 			<ul>
 				<li>Symbols and graphics with which users are familiar</li>
 				<li>Fewer features and less cognitive overload</li>
 				<li>Keyboard shortcuts</li>
 			</ul>
-
 		</section>
 		<section id="examples">
 			<h2>Examples</h2>
 				<ul>
-					<li>A website uses <a href="https://www.w3.org/TR/2017/NOTE-wai-aria-practices-1.1-20171214/examples/landmarks/index.html">ARIA landmarks</a> to identify the regions of the page, and users can hide areas that do not have a role of <code>main</code>.</li>
+					<li>A website uses <a href="https://www.w3.org/WAI/ARIA/apg/practices/landmark-regions/">ARIA landmarks</a> to identify the regions of the page, and users can hide areas that do not have a role of <code>main</code>.</li>
 					<li>The links in the navigation of a website are marked up so that users can add their own icons.</li>
 					<li>Icons on a website are marked up so that users can substitute their own icon sets into the page.</li>
 				</ul>
 		</section>
 		<section id="resources">
 			<h2>Resources</h2>
-
 			<ul>
-				<li><a href="https://rawgit.com/w3c/coga/master/issue-papers/personalization-preferences.html">Issue-papers on personalization and preferences</a></li>
-				<li>An <a href="https://github.com/ayelet-seeman/coga.personalisation/tree/ExampleWebPage/">example of adaptive page</a></li>
-				<li><a href="https://w3c.github.io/wcag/coga/user-research.html">Background research document</a></li>
-				<li><a href="https://w3c.github.io/personalization-semantics/">Semantics for adaptive interfaces</a></li>
+				<li><a href="https://www.w3.org/TR/coga-usable/">Making Content Usable for People with Cognitive and Learning Disabilities</a></li>
+				<li>An <a href="https://www.w3.org/WAI/adapt/">WAI-Adapt Overview, enabling users to adapt content presentation</a></li>
+				<li><a href="https://w3c.github.io/coga/issue-papers/#personalization-and-user-preferences">Personalization and User Preferences</a></li>
+				<li><a href="https://github.com/ayelet-seeman/coga.personalisation/">The coga.personalisation project</a></li>
 			</ul>
 		</section>
 		<section id="techniques">
@@ -64,7 +63,7 @@ <h2>Techniques</h2>
 				<h3>Sufficient</h3>
 				<ul>
 					<li>Programmatically indicating the purpose of icons, regions and user interface components</li>
-					<li><a href="https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA11" class="aria">ARIA11: Using ARIA landmarks to identify regions of a page</a> AND</li>
+					<li><a href="../Techniques/aria/ARIA11" class="aria">ARIA11: Using ARIA landmarks to identify regions of a page</a> AND</li>
 					<li>Using microdata to markup user interface components (future link)</li>
 				</ul>
 			</section>
diff --git a/understanding/21/img/buttons-text-symbols.png b/understanding/21/img/buttons-text-symbols.png
new file mode 100644
index 0000000000..31e64531b6
Binary files /dev/null and b/understanding/21/img/buttons-text-symbols.png differ
diff --git a/understanding/21/img/checkbox-example4.png b/understanding/21/img/checkbox-example4.png
index a190351225..72b952a9d2 100644
Binary files a/understanding/21/img/checkbox-example4.png and b/understanding/21/img/checkbox-example4.png differ
diff --git a/understanding/21/img/checkbox-example5.png b/understanding/21/img/checkbox-example5.png
index 1ec8e433d2..fa6465da5e 100644
Binary files a/understanding/21/img/checkbox-example5.png and b/understanding/21/img/checkbox-example5.png differ
diff --git a/understanding/21/img/link-text-focus.png b/understanding/21/img/link-text-focus.png
deleted file mode 100644
index 2d2dd98b5d..0000000000
Binary files a/understanding/21/img/link-text-focus.png and /dev/null differ
diff --git a/understanding/21/img/ntc-default-link-focus.png b/understanding/21/img/ntc-default-link-focus.png
new file mode 100644
index 0000000000..9127ed4f72
Binary files /dev/null and b/understanding/21/img/ntc-default-link-focus.png differ
diff --git a/understanding/21/img/ntc-focus-background.png b/understanding/21/img/ntc-focus-background.png
new file mode 100644
index 0000000000..32b480ebc2
Binary files /dev/null and b/understanding/21/img/ntc-focus-background.png differ
diff --git a/understanding/21/img/ntc-focus-border.png b/understanding/21/img/ntc-focus-border.png
new file mode 100644
index 0000000000..dc374b654a
Binary files /dev/null and b/understanding/21/img/ntc-focus-border.png differ
diff --git a/understanding/21/img/ntc-focus-inner-border.png b/understanding/21/img/ntc-focus-inner-border.png
new file mode 100644
index 0000000000..5d564ffce7
Binary files /dev/null and b/understanding/21/img/ntc-focus-inner-border.png differ
diff --git a/understanding/21/img/ntc-focus-inner-outer.png b/understanding/21/img/ntc-focus-inner-outer.png
new file mode 100644
index 0000000000..cfc69d0af8
Binary files /dev/null and b/understanding/21/img/ntc-focus-inner-outer.png differ
diff --git a/understanding/21/img/ntc-focus-inner-white.png b/understanding/21/img/ntc-focus-inner-white.png
new file mode 100644
index 0000000000..9ca6d0ed5b
Binary files /dev/null and b/understanding/21/img/ntc-focus-inner-white.png differ
diff --git a/understanding/21/img/ntc-focus-inner.png b/understanding/21/img/ntc-focus-inner.png
new file mode 100644
index 0000000000..8d633ded9d
Binary files /dev/null and b/understanding/21/img/ntc-focus-inner.png differ
diff --git a/understanding/21/img/ntc-focus-outer-green.png b/understanding/21/img/ntc-focus-outer-green.png
new file mode 100644
index 0000000000..e6d64cdfe7
Binary files /dev/null and b/understanding/21/img/ntc-focus-outer-green.png differ
diff --git a/understanding/21/img/ntc-focus-outer-yellow.png b/understanding/21/img/ntc-focus-outer-yellow.png
new file mode 100644
index 0000000000..b8266cac0f
Binary files /dev/null and b/understanding/21/img/ntc-focus-outer-yellow.png differ
diff --git a/understanding/21/img/ntc-link-underline-only.png b/understanding/21/img/ntc-link-underline-only.png
new file mode 100644
index 0000000000..9aa9d0180d
Binary files /dev/null and b/understanding/21/img/ntc-link-underline-only.png differ
diff --git a/understanding/21/img/path-based-gesture-1.png b/understanding/21/img/path-based-gesture-1.png
index e83f8c5663..9f3bdfc4f9 100644
Binary files a/understanding/21/img/path-based-gesture-1.png and b/understanding/21/img/path-based-gesture-1.png differ
diff --git a/understanding/21/img/path-based-gesture-2.png b/understanding/21/img/path-based-gesture-2.png
index 87b2742a85..e83f8c5663 100644
Binary files a/understanding/21/img/path-based-gesture-2.png and b/understanding/21/img/path-based-gesture-2.png differ
diff --git a/understanding/21/img/path-based-gesture-3.png b/understanding/21/img/path-based-gesture-3.png
new file mode 100644
index 0000000000..87b2742a85
Binary files /dev/null and b/understanding/21/img/path-based-gesture-3.png differ
diff --git a/understanding/21/img/spacing_cutoff_fail_horizontal.png b/understanding/21/img/spacing_cutoff_fail_horizontal.png
new file mode 100644
index 0000000000..9eefac3235
Binary files /dev/null and b/understanding/21/img/spacing_cutoff_fail_horizontal.png differ
diff --git a/understanding/21/img/spacing_cutoff_fail_vertical.png b/understanding/21/img/spacing_cutoff_fail_vertical.png
new file mode 100644
index 0000000000..3369a0e598
Binary files /dev/null and b/understanding/21/img/spacing_cutoff_fail_vertical.png differ
diff --git a/understanding/21/img/spacing_overlap_fail.png b/understanding/21/img/spacing_overlap_fail.png
new file mode 100644
index 0000000000..286249188b
Binary files /dev/null and b/understanding/21/img/spacing_overlap_fail.png differ
diff --git a/understanding/21/input-modalities.html b/understanding/21/input-modalities.html
index 1ec9c79016..a9da081b61 100644
--- a/understanding/21/input-modalities.html
+++ b/understanding/21/input-modalities.html
@@ -2,12 +2,12 @@
 <!DOCTYPE html>
 <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
 	<head>
-		<meta charset="UTF-8" />
+		<meta charset="UTF-8"/>
 		<title>Understanding Guideline 2.5 | Understanding WCAG 2.1</title>
-		<link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove" />
+		<link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/>
 	</head>
 	<body>
-		<h1>Pointer Accessible:<br />
+		<h1>Pointer Accessible:<br/>
 Understanding Guideline 2.1
 </h1>
 		<section id="intent">
@@ -16,7 +16,7 @@ <h2>Intent of Guideline 2.5</h2>
       <p>People operating pointer input devices may not be able to carry out timed or complex gestures. Examples are drag-and-drop gestures and on touch screens, swiping gestures, split taps, or long presses. This Guideline does not discourage the provision of complex and timed gestures by authors. However, where they are used, an alternative method of input should be provided to enable users with motor impairments to interact with content via single untimed pointer gestures.</p>
         <p>Often, people use devices that offer several input methods, for example, mouse input, touch input, keyboard input, and speech input. These should be supported concurrently as users may at any time swich preferred input methods due to situational circumstances, for example, the availability of a flat support for mouse operation, or situational impediments through motion or changes of ambient light.</p>
       <p>A common requirement for pointer interaction is the ability of users to position the pointer over the target. With touch input, the pointer (the finger) is larger and less precise than a mouse cursor. For people with motor impairments, a larger target makes it easier to successfully position the pointer and activate the target.</p>
-			<section id="benefits"></section></section>
+    </section>
 				
 		<section id="success-criteria">
 			<h2>Success Criteria for this Guideline</h2>
diff --git a/understanding/21/interruptions-minimum.html b/understanding/21/interruptions-minimum.html
deleted file mode 100644
index 008f35af8f..0000000000
--- a/understanding/21/interruptions-minimum.html
+++ /dev/null
@@ -1,91 +0,0 @@
-<!DOCTYPE html>
-<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
-	<head>
-		<meta charset="UTF-8" />
-		<title>Understanding Interruptions (Minimum)</title>
-		<link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove" />
-	</head>
-	<body>
-		<h1>Understanding Interruptions (Minimum)</h1>
-		<section id="intent">
-			<h2>Intent</h2>
-			<p>The intent of this Success Criterion is to avoid interrupting users during their interaction with a Web page. When users are distracted, especially users with impaired attention or memory, they may forget what they were doing and abandon the task. This can happen even when the original task is extremely important.</p>
-			<p>Where a site may generate interruptions, the user must be able to postpone or suppress them, such that: </p>
-			<ol>
-				<li>Popups and other interruptions can be easily delayed or turned off [Editor: do we need a definition for popup?]</li>
-				<li>Media events can be easily delayed or turned off [Editor: how is this different from Pause, Hide, Stop?]</li>
-				<li>Chat functions can be easily turned off and on again </li>
-				<li>Non-critical messages can easily be turned off and on again </li>
-			</ol>
-			<p>Changes in content that are not initiated by the user must be avoided. Secondary content (such as special offers or complementary material) should be easily identified, controlled and turned off.</p>
-			<p>Other potential distractions are covered by existing WCAG Success Criteria <a href="pause-stop-hide" class="sc">Pause, Stop, Hide</a>, <a href="audio-control" class="sc">Audio Control</a>, <a href="three-flashes-or-below-threshold" class="sc">Three Flashes or Below Threshold</a>, <a href="low-or-no-background-audio" class="sc">Low or No Background Audio</a>, <a href="timing-adjustable" class="sc">Timing Adjustable</a>. These success criteria are aimed at specific considerations which can have repercussions on certain user groups, but also have a broader effect of reducing distractions for all users.</p>
-	
-		</section>
-		<section id="benefits">
-			<h2>Benefits</h2>
-			<ul>
-				<li>Removing distractions allows some people with cognitive disabilities to more easily maintain focus on the current action being performed. This is fully discussed in the <a href="https://rawgit.com/w3c/coga/master/issue-papers/distractions.html">Distraction</a> Issue paper</li>
-				<li>Removing distractions can benefit users with a range of disabilities. Different users may find that distractions like popups disrupt their assistive technology output, or cause them to lose their reading location on the page. </li>
-				<li>Avoiding changes in content that are not initiated by the user can help ensure users complete the primary task intended by the author.</li>
-			</ul>
-		</section>
-		<section id="examples">
-			<h2>Examples</h2>
-			<section class="example">
-				<h3>Popus can be turned off by the user</h3>
-				<p>Overlays, such as those designed to notify the user of new features, can be easily toggled off by the user through a 'show no more messages' checkbox on the overlays. Instructions on how to re-enable the overlays are included if the user chooses this option.</p>
-			</section>
-			<section class="example">
-				<h3>Chat functions can be disabled</h3>
-				<p>A chat function that offers real-time assistance can be closed by users, so that they are not distracted by new content which appears that is not the result of their actions. A prominent mechanism to re-open the chat function is available.</p>
-			</section>
-			<section class="example">
-				<h3>Status updates can be turned off by the user</h3>
-				<p>Status notices which appear in a region of the screen, and which may distract certain users, can be disabled through a checkbox. The same checkbox allows the user to toggle the updates back on.</p>
-			</section>
-		</section>
-
-		<section id="resources">
-			<h2>Resources</h2>
-			<ul>
-				<li><a href="https://rawgit.com/w3c/coga/master/gap-analysis/">Gap analysis section X .... </a></li>
-				<li><a href="https://rawgit.com/w3c/coga/master/gap-analysis/table.html">User needs Table 2: Context and distractions</a></li>
-				<li><a href="https://w3c.github.io/wcag/coga/user-research.html">Background research document</a></li>
-				<li><a href="https://rawgit.com/w3c/coga/master/issue-papers/links-buttons.html">Semantics for adaptive interfaces</a></li>
-				<li><a href="https://www.w3.org/WAI/PF/cognitive-a11y-tf/wiki/Easy_Personalization">Script for personalization</a> and <a href="https://github.com/ayelet-seeman/coga.personalisation">Example for personalization</a></li>
-				<li><a href="https://rawgit.com/w3c/coga/master/issue-papers/personalization-preferences.html">Personalization and Preferences</a></li>
-				<li><a href="https://rawgit.com/w3c/coga/master/techniques/index.htm">COGA Techniques</a></li>
-				<li><a href="https://www.psychologytoday.com/blog/rewired-the-psychology-technology/201204/attention-alert-study-distraction-reveals-some">Attention Alert: A Study on Distraction Reveals Some Surprises</a></li>
-				<li><a href="http://www.ncbi.nlm.nih.gov/pmc/articles/PMC4033004/">Experimentally Induced Distraction Impacts Cognitive but not Emotional Processes in Think-Aloud Cognitive Assessment</a></li>
-				<li>Wiig, E. H., &amp; Austin, P. W. (1972). Visual attention and distraction in aphasic and non-aphasic children. <em>Perceptual and motor skills</em>, <em>35</em>(3), 863-866.</li>
-			</ul>
-		</section>
-		<section id="techniques">
-			<h2>Techniques</h2>
-			<section id="sufficient">
-				<h3>Sufficient</h3>
-				<p class="instructions">Techniques that are sufficient to meet the Guideline or Success Criterion.</p>
-				<section class="situation">
-					<h4>Situation</h4>
-					<ul>
-						<li><a href="idref">ID</a> [AND <a href="idref">ID</a>]* [using]
-							<ul>
-								<li><a href="idref">ID</a></li>
-							</ul>
-						</li>
-					</ul>
-				</section>
-			</section>
-			<section id="advisory">
-				<h2>Advisory</h2>
-				<p class="instructions">Techniques that are not sufficient by themselves to meet the Guideline or Success Criterion.</p>
-				<p class="instructions">Same template as sufficient techniques.</p>
-			</section>
-			<section id="failure">
-				<h2>Failure</h2>
-				<p class="instructions">Techniques that document conditions that would cause the page not to meet the Guideline or Success Criterion, even if sufficient techniques are also used.</p>
-				<p class="instructions">Same template as sufficient techniques.</p>
-			</section>
-		</section>
-	</body>
-</html>
\ No newline at end of file
diff --git a/understanding/21/label-in-name.html b/understanding/21/label-in-name.html
index 274f24dfd0..87e2fbd3c5 100644
--- a/understanding/21/label-in-name.html
+++ b/understanding/21/label-in-name.html
@@ -1,33 +1,47 @@
 <!DOCTYPE html>
 <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
 	<head>
-		<meta charset="UTF-8" />
+		<meta charset="UTF-8"/>
 		<title>Understanding Label in Name</title>
-		<link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove" />
+		<link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/>
 	</head>
 	<body>
 		<h1>Understanding Label in Name</h1>
+
+	<section id="brief">
+		<h2>In brief</h2>
+		<dl>
+			<dt>Goal</dt><dd>The visual label for controls is a trigger for speech activation.</dd>
+			<dt>What to do</dt><dd>Where practical, make the control’s text label and name match.</dd>
+			<dt>Why it's important</dt><dd>People who operate with voice interaction use the visible labels in their commands.</dd>
+		</dl>
+  
+	</section>
+    
 		<section id="intent">
 			<h2>Intent</h2>
 			<p>The intent of this Success Criterion is to ensure that the words which visually label a component are also the words associated with the component programmatically. This helps ensure that people with disabilities can rely on visible labels as a means to interact with the components.</p>
-			<p>Most controls are accompanied by a visible text <strong>label</strong>. Those same controls have a programmatic <strong>name</strong>, also known as the <a href="https://www.w3.org/TR/accname-aam-1.1/">Accessible Name</a>. Users typically have a much better experience if the words and characters in the visible label of a control match or are contained within the accessible name. When these match, speech-input users (i.e., users of speech recognition applications) can navigate by speaking the visible text labels of components, such as menus, links, and buttons, that appear on the screen. Sighted users who use text-to-speech (e.g., screen readers) will also have a better experience if the text they hear matches the text they see on the screen.</p>
+			<p>Most controls are accompanied by a visible text <strong>label</strong>. Those same controls have a programmatic <strong>name</strong>, also known as the <a href="https://www.w3.org/TR/accname/#dfn-accessible-name">accessible name</a>. Users typically have a much better experience if the words and characters in the visible label of a control match or are contained within the accessible name. When these match, speech-input users (i.e., users of speech recognition applications) can navigate by speaking the visible text labels of components, such as menus, links, and buttons, that appear on the screen. Sighted users who use text-to-speech (e.g., screen readers) will also have a better experience if the text they hear matches the text they see on the screen.</p>
 			<p>Note that where a visible text label does not exist for a component, this Success Criterion does not apply to that component.</p>
 			<p>Where text labels exist and are properly linked to the user interface components through established authoring practices, the label and name will normally match. When they don't match, speech-input users who attempt to use the visible text label as a means of navigation or selection (e.g., "move to Password") will be unsuccessful.  The speech-based navigation fails because the visible label spoken by the users does not match (or is not part of) the accessible name that is enabled as a speech-input command. In addition, when the accessible name is different from the visible label, it may function as a hidden command that can be accidentally activated by speech-input users.</p>
 			<p>Mismatches between visible labels and programmatic names for controls are even more of an issue for speech-input and text-to-speech users who also have cognitive challenges. Mismatches create an extra cognitive load for speech-input users, who must remember to say a speech command that is different from the visible label they see on a control. It also creates extra cognitive load for a text-to-speech user to absorb and understand speech output that does not match the visible label.</p>
+			<p>Note that when a <a>user interface component</a> lacks an <a href="https://www.w3.org/TR/accname/#dfn-accessible-name">accessible name</a> — a failure of <a href="name-role-value">4.1.2 Name, Role, Value</a> — and has a visible text label, then it also fails this Success Criterion.</p>
+
 			<h3>Identifying label text for components</h3>
-<p>In order for the label text and accessible name to be matched, it is first necessary to determine which text on the screen should be considered a label for any given control. There are often multiple text strings in a user interface that may be relevant to a control. However, there are reasons why it is best to conservatively interpret the label as being only the text in close proximity.</p>
-<p>Conventionally the label for user interface components is the adjacent text string. The typical positioning for left to right languages is:</p>
-<ul><li>immediately to the left of comboboxes, dropdown lists, text inputs, and other widgets (or in the absence of left-side labels, immediately above and aligned with the left edge of each input)</li>
-<li>immediately to the right of checkboxes and radio buttons</li>
-<li>inside buttons and tabs or immediately below icons serving as buttons</li>
-</ul>
-<p>The rationale for some of these conventions is explained in <a href="https://www.w3.org/WAI/GL/2016/WD-WCAG20-TECHS-20160105/G162">G162: Positioning labels to maximize predictability of relationships</a>.
-</p>
-<p>It is important to bias towards treating only the adjacent text as a label because liberal interpretations of what constitutes a text label can jeopardize the value of this Success Criterion (SC) by lessening predictability. Isolating the label to the single string in close proximity to the component makes it easier for developers, testers, and end users to identify the label targeted for evaluation in this SC. Predictable interpretation of labeling allows users of speech recognition technologies to interact with the element via its conventionally positioned label, and allows users of screen reading technologies to enjoy consistency between the nearby visible label and the announced name of the component.</p>
-<p>Note that placeholder text within an input field is not considered an appropriate means of providing a label. The <a href="https://www.w3.org/TR/html52/sec-forms.html#the-placeholder-attribute">HTML5 specification</a> states <q>The placeholder attribute should not be used as an alternative to a &lt;label&gt;.</q> However, it is worth noting that "label" in that HTML5 statement is in code brackets and links to the <code>label</code> element. For the purposes of this Label in Name Success Criterion, "label" is not used in such a programmatic sense but is simply referring to a text string in close visual proximity to a component. As such, in the absence of any other nearby text string (as described in the preceding list), if an input contains placeholder text, such text may be a candidate for Label in Name. This is supported both through the accessible name calculation (discussed later) and from the practical sense that where a visible label is not otherwise provided, it is likely that a speech-input user may attempt to use the placeholder text value as a means of interacting with the input.</p>
+			<p>In order for the label text and accessible name to be matched, it is first necessary to determine which text on the screen should be considered a label for any given control. There are often multiple text strings in a user interface that may be relevant to a control. However, there are reasons why it is best to conservatively interpret the label as being only the text in close proximity.</p>
+			<p>Conventionally the label for user interface components is the adjacent text string. The typical positioning for left to right languages is:</p>
+			<ul>
+				<li>immediately to the left of comboboxes, dropdown lists, text inputs, and other widgets (or in the absence of left-side labels, immediately above and aligned with the left edge of each input)</li>
+				<li>immediately to the right of checkboxes and radio buttons</li>
+				<li>inside buttons and tabs or immediately below icons serving as buttons</li>
+			</ul>
+			<p>The rationale for some of these conventions is explained in <a href="../../Techniques/general/G162">G162: Positioning labels to maximize predictability of relationships</a>.</p>
+			<p>It is important to bias towards treating only the adjacent text as a label because liberal interpretations of what constitutes a text label can jeopardize the value of this Success Criterion (SC) by lessening predictability. Isolating the label to the single string in close proximity to the component makes it easier for developers, testers, and end users to identify the label targeted for evaluation in this SC. Predictable interpretation of labeling allows users of speech recognition technologies to interact with the element via its conventionally positioned label, and allows users of screen reading technologies to enjoy consistency between the nearby visible label and the announced name of the component.</p>
+			<p>Note that placeholder text within an input field is not considered an appropriate means of providing a label. The <a href="https://www.w3.org/TR/html52/sec-forms.html#the-placeholder-attribute">HTML5 specification</a> states <q>The placeholder attribute should not be used as an alternative to a <code>&lt;label&gt;</code>.</q> However, it is worth noting that "label" in that HTML5 statement is in code brackets and links to the <code>label</code> element. For the purposes of this Label in Name Success Criterion, "label" is not used in such a programmatic sense but is simply referring to a text string in close visual proximity to a component. As such, in the absence of any other nearby text string (as described in the preceding list), if an input contains placeholder text, such text may be a candidate for Label in Name. This is supported both through the accessible name calculation (discussed later) and from the practical sense that where a visible label is not otherwise provided, it is likely that a speech-input user may attempt to use the placeholder text value as a means of interacting with the input.</p>
 			<section>
-<h3>Text labels "express something in human language"</h3>
+				<h3>Text labels "express something in human language"</h3>
 				<section>
+
 <h4>Symbolic text characters</h4>
 <p>For the purposes of this SC, text should not be considered a visible label if it is used in a symbolic manner, rather than directly <q>expressing something in human language</q> as per the definition of <a>text</a> in WCAG. For example, <a href="https://www.w3.org/TR/WCAG21/#images-of-text">1.4.5 Images of Text</a> describes considerations for "symbolic text characters." In the images of text example "B", "I", and "ABC" appear on icons in a text editor, where they are meant to symbolize the functions for Bold, Italics, and Spelling, respectively. In such a case, the accessible name should be the function the button serves (e.g., "Spell check" or "Check spelling"), not the visible symbolic characters. A similar text editor is shown in the figure below.</p>
 <figure id="figure-RTE-github">
@@ -35,23 +49,26 @@ <h4>Symbolic text characters</h4>
 	<figcaption>A detail of the rich text editor in Github, showing a variety of unlabeled icons, including icons resembling text characters.</figcaption>
 </figure>
 <p>Likewise, where an author has used a greater-than symbol (">") to mimic the appearance of the right-facing arrow, the text does not convey something in human language. It is a symbol, in this scenario likely meant to mimic the icons used for a "Play" button or a "Next" arrow.</p>
-<h4>Punctuation and capitalization</h4>
-				</section>
-				<section>
-<p>The use of punctuation and capitalization in labels <em>may</em> also be considered optional for the same reason. For example, the colon conventionally added at the end of input labels does not express something in human language, and capitals on the first letter of each word in a label do not normally alter the words' meaning. This is particularly relevant in the context of this SC, since it is primarily aimed at users of speech recognition; capitals and most punctuation are frequently ignored when a user speaks a label as a means of interacting with a control.</p>
-<p>While it is certainly not an error to include the colon and capitalization in the accessible name, a computed name of "First name" should not be considered a failure of "First Name:".<br />
-<label for="firstname">First Name: </label><input id="firstname" type="text" name="firstname" /><br />
-Likewise, "Next…" visibly shown on a button could have "Next" as the accessible name. When in doubt, where a meaningful visible label exists, match the string exactly for the accessible name.<br />
-<input type="submit" value="Next..." /></p>
-				</section>
+</section>
+				
 				<section>
+          <h4>Punctuation and capitalization</h4>
+          <p>The use of punctuation and capitalization in labels <em>may</em> also be considered optional for the same reason. For example, the colon conventionally added at the end of input labels does not express something in human language, and capitals on the first letter of each word in a label do not normally alter the words' meaning. This is particularly relevant in the context of this SC, since it is primarily aimed at users of speech recognition; capitals and most punctuation are frequently ignored when a user speaks a label as a means of interacting with a control.</p>
 
-<h4>Mathematical expressions and formulae</h4>
-<p>Mathematical expressions are an exception to the previous subsection about symbolic characters. Math symbols can be used as labels; for example "11&#215;3=33" and "A>B" convey meaning. The label should not be overwritten in the accessible name, and substitutions of words where a formula is used should be avoided since there are multiple ways to express the same equation. For example, making the name "eleven multiplied by three is equivalent to thirty-three" might mean a user who said "eleven times three equals thirty-three" may not match. It is best to leave the formulas as used in the label and count on the user's familiarity with their speech software to achieve a match. Further, converting a mathematical formula label into an accessible name that is a spelled-out equivalent may create issues for translation. The name should match the label's formula text. Note that a consideration for authors is to use the proper symbol in the formula. For instance 11x3 (with a lower or upper case letter X), 11*3 (with the asterisk symbol), and 11&#215;3 (with the <code>&amp;</code>times<code>;</code> symbol) are all easy for sighted users to interpret as meaning the same formula, but may not all be matched to "11 times 3" by the speech recognition software. The proper operator symbol (in this case the times symbol) should be used.<br />
+          <p>While it is certainly not an error to include the colon and capitalization in the accessible name, a computed name of "First name" should not be considered a failure of "First Name:".<br />
+          <label for="firstname">First Name: </label><input id="firstname" type="text" name="firstname" /><br />
+          Likewise, "Next…" visibly shown on a button could have "Next" as the accessible name.<br />
+          <input type="submit" value="Next..." />. When in doubt, where a meaningful visible label exists, match the string exactly for the accessible name.</p>
+				</section>
+				
+      <section>
+        <h4>Mathematical expressions and formulae</h4>
+        <p>Mathematical expressions are an exception to the previous subsection about symbolic characters. Math symbols can be used as labels; for example "11&#215;3=33" and "A>B" convey meaning.<br />
 
-    <input type="radio" name="equation" id="answer1" value="A&gt;B" /><label for="answer1">A&gt;B</label>
-    <input type="radio" name="equation" id="answer2" value="A=B" /><label for="answer2">A=B</label>
-    <input type="radio" name="equation" id="answer3" value="A&lt;B" /><label for="answer3">A&lt;B</label></p>
+            <input type="radio" name="equation" id="answer1" value="A&gt;B" /><label for="answer1">A&gt;B</label>
+            <input type="radio" name="equation" id="answer2" value="11&#215;3=33" /><label for="answer2">11&#215;3=33</label>
+            </p>
+        	<p>The label should not be overwritten in the accessible name, and substitutions of words where a formula is used should be avoided since there are multiple ways to express the same equation. For example, making the name "eleven multiplied by three is equivalent to thirty-three" might mean a user who said "eleven times three equals thirty-three" may not match. It is best to leave the formulas as used in the label and count on the user's familiarity with their speech software to achieve a match. Further, converting a mathematical formula label into an accessible name that is a spelled-out equivalent may create issues for translation. The name should match the label's formula text. Note that a consideration for authors is to use the proper symbol in the formula. For instance 11x3 (with a lower or upper case letter X), 11*3 (with the asterisk symbol), and 11&#215;3 (with the <code>&amp;</code>times<code>;</code> symbol) are all easy for sighted users to interpret as meaning the same formula, but may not all be matched to "11 times 3" by the speech recognition software. The proper operator symbol (in this case the times symbol) should be used.</p>
 				</section>
 			</section>
 			<section>
@@ -61,28 +78,33 @@ <h3>Accessible Name and Description Computation specification</h3>
  <p>Other text displayed on the screen that is correctly coded to meet 1.3.1: Info and Relationships is <strong>not</strong> normally factored into the calculation for the accessible name of a UI component without author intervention (via ARIA labeling techniques). The most common of these are:</p>
 	<ul>
 		<li>headings and instructions</li>
-<li>group labels for sets of components (i.e., used with <code>legend</code>/<code>fieldset</code> or with role of <code>group</code> or <code>radiogroup</code>)</li> 
+<li>group labels for sets of components (i.e., used with <code>legend</code>/<code>fieldset</code> or with role of <code>group</code> or <code>radiogroup</code>)</li>
 </ul>
 <p>Such textual information may constitute part of the component's <em>description</em>. So from both a programmatic viewpoint, and from the conservative tactic of only considering a label to be "adjacent text," neither headings, instructions, nor group 'labels' should normally be considered <strong>labels</strong> for the purpose of this Success Criterion.</p>
  <p>It is important to note that the specification allows authors to override the name calculated through native semantics. Both <code>aria-label</code> and <code>aria-labelledby</code> take precedence in the name calculation, overriding the visible text as the accessible name even when the visible text label is programmatically associated with the control. For this reason, when a visible label already exists, <code>aria-label</code> should be avoided or used carefully, and <code>aria-labelledby</code> should be used as a supplement with care.</p>
 <p>Finally, <code>aria-describedby</code> is not included in the Accessible Name computation (instead it is part of the Accessible Description computation). By convention, text associated with a control through <code>aria-describedby</code> is announced immediately after the accessible name by screen readers. Therefore, the context of headings, instructions, and group labels can be provided through the accessible description to assist users of screen readers without affecting the experience of those who navigate using speech recognition software.</p>
-			</section>
+</section>
+<h4>Text in parentheses</h4>
+	<section>
+		<p>Note: The term "parenthetical" in this section is describing text that literally appears within a set of round brackets (). It is not used in the more abstract sense of "information related to".</p>
+	<p>It is important to mention parenthetical text in labels in the context of accessible name versus description. In common usage, text in parentheses is considered secondary but relevant to meaning. Users of speech recognition would not typically announce text in parentheses as part of the input name. For that reason, parenthetical text may be optionally considered a description and left out of the accessible name.</p>
+	<p>However, where parenthetical information provides important context, such as indication of a required field or limitations on what is allowed for input, this information must be provided programmatically in some other way to the user if that information is not included as part of the accessible name. For example, "Name (required)" and "Date (YYYY-MM-DD)" could accept "Name" and "Date" as the accessible names. However, in order to pass 1.3.1 Info &amp; Relationships, authors would need to programmatically surface both the required state and the limit on the allowed data formatting (in this example, eight integers fitting the YYYY-MM-DD pattern). The "required" state could be surfaced through the HTML <code>required</code> attribute or by using <code>aria-required="true"</code>. The allowed data formatting could be surfaced by being referenced using the <code>aria-describedby</code>) attribute.</p>
+		</section>
 		</section>
 
-
-			<section id="benefits">
-				<h2>Benefits</h2>
-				<ul>
-					<li>Speech-input users can directly activate controls on a page with fewer surprising changes of focus.</li>
-					<li>Text-to-speech users will have a better experience because the labels that they hear match the visible text labels that
-					they see on the screen.</li>
-				</ul>
-			</section>
+		<section id="benefits">
+			<h2>Benefits</h2>
+			<ul>
+				<li>Speech-input users can directly activate controls on a page with fewer surprising changes of focus.</li>
+				<li>Text-to-speech users will have a better experience because the labels that they hear match the visible text labels that
+				they see on the screen.</li>
+			</ul>
+		</section>
 		<section id="examples">
 			<h2>Examples</h2>
 			<ul>
-				<li><strong>Accessible name matches visible label:</strong> The accessible name and visible label of a control match.</li>
-				<li><strong>Accessible name starts with visible label:</strong> The acessible name "Search for a value" begins with the text of the visible label, "Search".</li>
+				<li><strong>Accessible name matches visible label:</strong> The accessible name and visible label of a control match.</li>
+				<li><strong>Accessible name starts with visible label:</strong> The accessible name "Search for a value" begins with the text of the visible label, "Search".</li>
 			</ul>
 		</section>
 		<section id="resources">
@@ -97,27 +119,24 @@ <h2>Techniques</h2>
 			<section id="sufficient">
 				<h3>Sufficient Techniques</h3>
 				<ul>
-					<li><a href="../../techniques/general/G208">G208: Including the text of the visible label as part of the accessible name</a></li>
-					<li><a href="../../techniques/general/G211">G211: Matching the accessible name to the visible label</a></li>
+					<li><a href="../../Techniques/general/G208">G208: Including the text of the visible label as part of the accessible name</a></li>
+					<li><a href="../../Techniques/general/G211">G211: Matching the accessible name to the visible label</a></li>
 				</ul>
 			</section>
 			<section id="advisory">
 				<h2>Advisory Techniques</h2>
-				<p>Although not required for conformance, the following additional techniques should
-                  be considered in order to make content more accessible. Not all techniques can be
-                  used or would be effective in all situations.
-               </p>
 				<ul>
-					<li><a href="https://www.w3.org/WAI/GL/2016/WD-WCAG20-TECHS-20160105/G162">G162: Positioning labels to maximize predictability of relationships</a></li>
-					<li>@@ If an icon has no accompanying text, consider using its hover text as its accessible name</li>
+					<li><a href="../../Techniques/general/G162">G162: Positioning labels to maximize predictability of relationships</a></li>
+					<li>If an icon has no accompanying text, consider using its hover text as its accessible name (Potential future technique)</li>
 				</ul>
 			</section>
 			<section id="failure">
 				<h2>Failure Techniques</h2>
 				<ul>
-					<li><a href="../../techniques/failures/F96">F96: Failure due to the accessible name not containing the visible label text</a></li>
-					<li>@@ 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</li>
-					<li>@@ Accessible name contains the visible label text, but one or more other words are interspersed in the label</li>
+					<li><a href="../../Techniques/failures/F96">F96: Failure due to the accessible name not containing the visible label text</a></li>
+					<li><a href="../../Techniques/failures/F111">F111: Failure due to a control with visible label text but no accessible name</a></li>
+					<li>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)</li>
+					<li>Accessible name contains the visible label text, but one or more other words are interspersed in the label (Potential future technique)</li>
 				</ul>
 			</section>
 		</section>
diff --git a/understanding/21/motion-actuation.html b/understanding/21/motion-actuation.html
index aadf8fb2f8..17bc240c0a 100644
--- a/understanding/21/motion-actuation.html
+++ b/understanding/21/motion-actuation.html
@@ -1,15 +1,26 @@
 <!DOCTYPE html>
 <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
 	<head>
-		<meta charset="UTF-8" />
+		<meta charset="UTF-8"/>
 		<title>Understanding Motion Actuation</title>
-		<link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove" />
+		<link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/>
 	</head>
 	<body>
 		<h1><strong>Motion Actuation</strong>
-			<br />
+			<br/>
 			Understanding SC 2.6.1
 		</h1>
+
+	<section id="brief">
+		<h2>In brief</h2>
+		<dl>
+			<dt>Goal</dt><dd>Content is not dependent on a user's ability to move a device.</dd>
+			<dt>What to do</dt><dd>Don't rely solely on device motion to control page content.</dd>
+			<dt>Why it's important</dt><dd>Some people cannot hold or move a device steadily.</dd>
+		</dl>
+  
+	</section>
+    
 		<section id="intent">
 			<h2>Intent of this Success Criterion</h2>
 			<p>The intent of this success criterion is to ensure that functions triggered by moving a device (for example, shaking or tilting) or by gesturing towards the device (so that sensors like a camera can pick up and interpret the gesturing), can also be operated by more conventional user interface components.</p>
@@ -17,16 +28,13 @@ <h2>Intent of this Success Criterion</h2>
 <p>Devices often have sensors that can act as inputs, such as accelerometer and gyroscope sensors on a phone or tablet device. These sensors can allow the user to control something by simply changing the orientation or moving the device in particular ways. In other situations, web content can interpret user gestures via the camera or other sensors to actuate functions. For example, shaking the device might issue an "Undo" command, or a gentle hand wave might be used to move forward or backward in a sequence of pages. Some users with disabilities are not able to operate these device sensors (either not at all, or not precisely enough) because the device is on a fixed mount (perhaps a wheelchair) or due to motor impairments. Therefore, functionality offered through motion must also be available by another mechanism.</p>
 <p>In addition, some users may accidentally activate sensors due to tremors or other motor impairments. The user must have the ability to turn off motion actuation to prevent such accidental triggering of functions. Applications may be able to meet this requirement by supporting operating system settings which allow the user to disable motion detection at the system level.</p>
 <p>There is an exception where motion is essential for the function or not using motions or gestures would invalidate the activity. Some applications are specifically created to use device sensor data. Examples of content that are exempt from this requirement include a pedometer that relies on device motion to count steps.</p>
-        
-      
-      <section id="benefits">
-				<h3>Benefits</h3>
-				
-				<ul>
-					<li>This Success Criterion helps people who may be unable to perform particular motions (such as tilting, shaking, or gesturing) because the device may be mounted or users may be physically unable to perform the necessary movement. This success criterion ensures that users can still operate all functionality by other means such as touch or via assistive technologies.</li>
-  <li>Other users will benefit in situations where they are unable to move their devices.</li>
-				</ul>
-			</section>
+		</section>
+		<section id="benefits">
+			<h2>Benefits</h2>
+			<ul>
+				<li>This Success Criterion helps people who may be unable to perform particular motions (such as tilting, shaking, or gesturing) because the device may be mounted or users may be physically unable to perform the necessary movement. This success criterion ensures that users can still operate all functionality by other means such as touch or via assistive technologies.</li>
+<li>Other users will benefit in situations where they are unable to move their devices.</li>
+			</ul>
 		</section>
 		<section id="examples">
 			<h2>Examples of Success Criterion 2.6.1</h2>
@@ -34,10 +42,9 @@ <h2>Examples of Success Criterion 2.6.1</h2>
 			<ul>
 				<li>A user can choose an application setting which turns off Shake to Undo and other motion-activated features.</li>
 				<li>After text is input in a field, shaking a device shows a dialog offering users to undo the input. A cancel button next to the text field offers the same functionality.</li>
-  <li>A user can tilt a device to advance to the next or a previous page. Buttons are also provided to perform the same function.</li>
-  <li>A user can move or pan a device to change the view in an interactive photo. A control is also available to perform these same functions.</li>
- <li>A user can gesture towards the device to navigate content. Controls are also available to navigate.</li>
-
+				<li>A user can tilt a device to advance to the next or a previous page. Buttons are also provided to perform the same function.</li>
+				<li>A user can move or pan a device to change the view in an interactive photo. A control is also available to perform these same functions.</li>
+				<li>A user can gesture towards the device to navigate content. Controls are also available to navigate.</li>
 			</ul>
 		</section>
 	
diff --git a/understanding/21/non-text-contrast.html b/understanding/21/non-text-contrast.html
index d4d1969e7e..41b2edee6f 100644
--- a/understanding/21/non-text-contrast.html
+++ b/understanding/21/non-text-contrast.html
@@ -1,41 +1,67 @@
 <!DOCTYPE html>
 <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
 	<head>
-		<meta charset="UTF-8" />
+		<meta charset="UTF-8"/>
 		<title>Understanding Non-text Contrast</title>
-		<link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove" />
+		<link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
 	</head>
 	<body>
 		<h1>Understanding Non-text Contrast</h1>
+
+		<section id="brief">
+			<h2>In brief</h2>
+			<dl>
+				<dt>Goal</dt><dd>Important visual information meets the same minimum contrast required for larger text.</dd>
+				<dt>What to do</dt><dd>Ensure meaningful visual cues achieve 3:1 against the background.</dd>
+				<dt>Why it's important</dt><dd>Some people cannot see elements with low contrast.</dd>
+			</dl>
+
+		</section>
 		<section id="intent">
 			<h2>Intent</h2>
 
 
-			<p>The intent of this Success Criterion is to ensure that active user interface components (i.e., controls) and meaningful graphics are distinguishable by people with moderately low vision. The requirements and rationale are similar to those for large text in <a href="contrast-minimum">1.4.3 Contrast (Minimum)</a>.</p>
+			<p>The intent of this Success Criterion is to ensure that user interface components (i.e., controls) and meaningful graphics are distinguishable by people with moderately low vision. The requirements and rationale are similar to those for large text in <a href="contrast-minimum">1.4.3 Contrast (Minimum)</a>. Note that this requirement does not apply to <em>inactive</em> user interface components.</p>
 
 			<p>Low contrast controls are more difficult to perceive, and may be completely missed by people with a visual impairment. Similarly, if a graphic is needed to understand the content or functionality of the webpage then it should be perceivable by people with low vision or other impairments without the need for contrast-enhancing assistive technology.</p>
 
+			<div class="note">
+				<p>The 3:1 contrast ratios referenced in this Success Criterion is intended to be treated as threshold values. When comparing the computed contrast ratio to the Success Criterion ratio, the computed values should not be rounded (e.g. 2.999:1 would not meet the 3:1 threshold).</p>
+			</div>
+
+			<div class="note">
+				<p>Because authors do not have control over user settings for font smoothing and anti-aliasing, when evaluating this
+					 Success Criterion, refer to the colors obtained from the user agent, or the underlying
+					 markup and stylesheets, rather than the non-text elements as presented on screen.</p>
+				<p>Due to anti-aliasing, particularly thin lines and shapes of non-text elements may be rendered by user agents with
+					 a much fainter color than the actual color defined in the underlying CSS. This can lead to situations where
+					 non-text elements have a contrast ratio that nominally passes the Success Criterion, but have a much lower contrast
+					 in practice. In these cases, best practice would be for authors to avoid particularly thin lines and shapes,
+					 or to use a combination of colors that exceeds the normative requirements of this Success Criterion.
+				</p>
+		 </div>
+
 			<section id="user-interface-components">
-				<h3>Active User Interface Components</h3>
+				<h3>User Interface Components</h3>
+
+				<p>Unless the control is <em>inactive</em>, any visual information provided that is necessary for a user to identify that a control is present and how to operate it must have a minimum 3:1 contrast ratio with the adjacent colors. Also, any visual information necessary to indicate state, such as whether a component is selected or focused must also ensure that the information used to identify the control in that state has a minimum 3:1 contrast ratio.</p>
 
-				<p>For active controls any visual information provided that is necessary for a user to identify that a control is present and how to operate it must have a minimum 3:1 contrast ratio with the adjacent colors. Also, any visual information necessary to indicate state, such as whether a component is selected or focused must also ensure that the information used to identify the control in that state has a minimum 3:1 contrast ratio.</p>
-        
 				<p>This Success Criterion does not require that changes in color that differentiate between states of an individual component meet the 3:1 contrast ratio when they do not appear next to each other. For example, there is not a new requirement that visited links contrast with the default color, or that mouse hover indicators contrast with the default state. However, the component must not lose contrast with the adjacent colors, and non-text indicators such as the check in a checkbox, or an arrow graphic indicating a menu is selected or open must have sufficient contrast to the adjacent colors.</p>
 
 				<h4>Boundaries</h4>
-				
+
 				<p>This success criterion does not require that controls have a visual boundary indicating the hit area, but if the visual indicator of the control is the only way to identify the control, then that indicator must have sufficient contrast. If text (or an icon) within a button or placeholder text inside a text input is visible and there is no visual indication of the hit area then the Success Criterion is passed. If a button with text also has a colored border, since the border does not provide the only indication there is no contrast requirement beyond the text contrast (<a href="contrast-minimum">1.4.3 Contrast (Minimum)</a>). Note that for people with cognitive disabilities it is recommended to delineate the boundary of controls to aid in the recognition of controls and therefore the completion of activities.</p>
-				
+
 				<figure id="figure-buttons-no-visual-indicator">
 						<img alt="Two buttons, the first with no visual indicator except text saying 'button'. The second is the same but with an added grey border." src="img/minimal-button.png" /> 
-						<figcaption>A button (active control) without a visual boundary, and the same button with a focus indicator that is a defined visual boundary of grey (#949494) adjacent to white.</figcaption>
+						<figcaption><strong>Pass:</strong> A button without a visual boundary, and the same button with a focus indicator that is a defined visual boundary of grey (<code>#949494</code>) adjacent to white.</figcaption>
 				</figure>
 
 				<h4>Adjacent colors</h4>
 				<p>For user interface components 'adjacent colors' means the colors adjacent to the component. For example, if an input has a white internal background, dark border, and white external background the 'adjacent color' to the component would be the white external background.</p>
 				<figure id="figure-standard-text-adjacent-white">
-					<img src="img/text-input-default.png" alt="Standard text input with a label, white internal and external background with a dark border." />
-					<figcaption>A standard text input with a grey border (#767676) and white adjacent color outside the component</figcaption>
+					<img src="img/text-input-default.png" alt="Standard text input with a label, white internal and external background with a dark border."/>
+					<figcaption><strong>Pass:</strong> A standard text input with a grey border (<code>#767676</code>) and white adjacent color outside the component</figcaption>
 				</figure>
 
 				<p>If components use several colors, any color which does not interfere with identifying the component can be ignored for the purpose of measuring contrast ratio. For example, a 3D drop-shadow on an input, or a dark border line between contrasting backgrounds is considered to be subsumed into the color closest in brightness (perceived luminance).</p>
@@ -43,56 +69,131 @@ <h4>Adjacent colors</h4>
 				<p>The following example shows an input that has a light background on the inside and a dark background around it. The input also has a dark grey border which is considered to be subsumed into the dark background. The border does not interfere with identifying the component, so the contrast ratio is taken between the white background and dark blue background.</p>
 
 				<figure id="figure-text-box-dark-bg-light-border">
-					<img alt="A text box with a dark background and light border, with a white background." src="img/text-input-background-border.png" />
-					<figcaption> The contrast of the input background (white) and color adjacent to the control (dark blue #003366) is sufficient. There is also a border (silver) on the component that is not required to contrast with either.</figcaption>
+					<img alt="A text box with a dark background and light border, with a white background." src="img/text-input-background-border.png"/>
+					<figcaption><strong>Pass:</strong> The contrast of the input background (white) and color adjacent to the control (dark blue <code>#003366</code>) is sufficient. There is also a border (silver) on the component that is not required to contrast with either.</figcaption>
 				</figure>
 
 				<p>For visual information required to identify a state, such as the check in a checkbox or the thumb of a slider, that part might be within the component so the adjacent color might be another part of the component.</p>
 
 				<figure id="figure-purple-box-light-check">
-					<img alt="A purple box with a light grey check." src="img/checkbox-purple.png" />
-					<figcaption> A customized checkbox with light grey check (#E5E5E5), which has a contrast ratio of 5.6:1 with the purple box (#6221EA).</figcaption>
+					<img alt="A purple box with a light grey check." src="img/checkbox-purple.png"/>
+					<figcaption><strong>Pass:</strong> A customized checkbox with light grey check (<code>#E5E5E5</code>), which has a contrast ratio of 5.6:1 with the purple box (<code>#6221EA</code>).</figcaption>
 				</figure>
 
 				<p>It is possible to use a flat design where the status indicator fills the component and does not contrast with the component, but does contrast with the colors adjacent to the component.</p>
 
-
 				<figure id="figure-three-radios">
-					<img alt="Four radio buttons, the first is a plain circle labelled 'Not selected'. The second shows the circle filled with a darker color than the border. The third is filled with the same color as the border. The fourth has an inner filled circle with a gap between it and the outer border." src="img/radio-custom.png" />
-					<figcaption>The first radio button shows the default state with a grey (#949494) circle. The second and third show the radio button selected and filled with a color that contasts with the color adjacent to the component. The last example shows the state indicator contrasting with the component colors.</figcaption>
+					<img alt="Four radio buttons, the first is a plain circle labelled 'Not selected'. The second shows the circle filled with a darker color than the border. The third is filled with the same color as the border. The fourth has an inner filled circle with a gap between it and the outer border." src="img/radio-custom.png"/>
+					<figcaption><strong>Pass:</strong> The first radio button shows the default state with a grey (<code>#949494</code>) circle. The second and third show the radio button selected and filled with a color that contrasts with the color adjacent to the component. The last example shows the state indicator contrasting with the component colors.</figcaption>
 				</figure>
 
-				<h4 id="related-scs">Relationship with Use of Color and Focus Visible</h4>
+				<h4 id="related-color">Relationship with Use of Color</h4>
 
-				<p>The <a href="use-of-color">Use of Color</a> success criterion addresses changing <strong>only the color</strong> (hue) of an object or text without otherwise altering the object's form. The principle is that contrast ratio (the difference in brightness) can be used to distinguish text or graphics. For example, <a href="../../techniques/general/G183.html">G183</a> is a technique to use a contrast ratio of 3:1 with surrounding text to distinguish links and controls. In that case the Working Group regards a link color that meets the 3:1 contrast ratio relative to the non-linked text color as satisfying the Success Criterion <a href="use-of-color">1.4.1 Use of color</a> since it is relying on contrast ratio as well as color (hue) to convey that the text is a link.</p>
+				<p>The <a href="use-of-color">Use of Color</a> success criterion addresses changing <strong>only the color</strong> (hue) of an object or text without otherwise altering the object's form. The principle is that contrast ratio (the difference in brightness) can be used to distinguish text or graphics. For example, <a href="../Techniques/general/G183.html">G183</a> is a technique to use a contrast ratio of 3:1 with surrounding text to distinguish links and controls. In that case the Working Group regards a link color that meets the 3:1 contrast ratio relative to the non-linked text color as satisfying the Success Criterion <a href="use-of-color">1.4.1 Use of color</a> since it is relying on contrast ratio as well as color (hue) to convey that the text is a link.</p>
 
 				<p>Non-text information within controls that uses a change of hue alone to convey the value or state of an input, such as a 1-5 star indicator with a black outline for each star filled with either yellow (full) or white (empty) is likely to fail the Use of color criterion rather than this one.</p>
 
 				<figure id="figure-two-star-ratings">
-					<img src="img/star-examples-pass.png" alt="Two star ratings, one uses a black outline (on white) with a black fill to indicate it is checked. The second has a yellow fill and a thicker dark border." width="300" />
-					<figcaption>
-						Two examples which pass this success criterion, using either a solid fill to indicate a checked-state that has contrast, or a thicker border as well as yellow fill.
+					<img src="img/star-examples-pass.png" alt="Two star ratings, one uses a black outline (on white) with a black fill to indicate it is checked. The second has a yellow fill and a thicker dark border." width="300"/>
+					<figcaption><strong>Pass:</strong> Two examples which pass this success criterion, using either a solid fill to indicate a checked-state that has contrast, or a thicker border as well as yellow fill.
 					</figcaption>
 				</figure>
 				<figure id="figure-two-star-ratings-failing">
-					<img src="img/star-examples-fail.png" alt="Two star ratings, the first uses 5 stars with a black outline and a yellow or white fill, where yellow indicates checked. The second uses only pale yellow stars on white." width="300" />
+					<img src="img/star-examples-fail.png" alt="Two star ratings, the first uses 5 stars with a black outline and a yellow or white fill, where yellow indicates checked. The second uses only pale yellow stars on white." width="300"/>
+					<figcaption><strong>Fail:</strong> The first example fails the Use of color criterion due to relying on yellow and white hues. The second example fails the Non-text contrast criterion due to the yellow (<code>#FFF000</code>) to white contrast ratio of 1.2:1.
+					</figcaption>
+				</figure>
+
+				<p>Using a change of contrast for focus and other states is a technique to differentiate the states. This is the basis for <a href="../Techniques/general/G195.html" class="general">G195: Using an author-supplied, highly visible focus indicator</a>, and more techniques are being added.</p>
+
+
+				<h4 id="related-focus">Relationship with Focus Visible</h4>
+
+				<p>In combination with <a href="focus-visible" class="sc">2.4.7 Focus Visible</a>, the visual focus indicator for a component <em>must</em> have sufficient contrast against the adjacent background when the component is focused, except where the appearance of the component is determined by the user agent and not modified by the author.</p>
+
+				<p>Most focus indicators appear outside the component - in that case it needs to contrast with the background that the component is on. Other cases include focus indicators which are:</p>
+
+				<ul>
+					<li>only inside the component and need to contrast with the adjacent color(s) within the component.</li>
+					<li>the border of the component (inside the component and adjacent to the outside) and need to contrast with both adjacent colours. </li>
+					<li>partly inside and partly outside, where either part of the focus indicator can contrast with the adjacent colors.</li>
+				</ul>
+
+				<figure id="figure-focus-inner">
+					<img src="img/ntc-focus-inner.png" alt="Three blue buttons, the middle has a thick yellow outline well inside the border of the button." width="400"/>
+					<figcaption><strong>Pass:</strong> The internal yellow indicator (<code>#FFFF00</code>) contrasts with the blue button background (<code>#4189B9</code>).
+					</figcaption>
+				</figure>
+
+
+				<figure id="figure-focus-outer-yellow">
+					<img src="img/ntc-focus-outer-yellow.png" alt="Three blue buttons on a white background, the middle has a light yellow outline outside of the button's non-focused boundary." width="400"/>
+					<figcaption><strong>Fail:</strong> The external yellow indicator (<code>#FFFF00</code>) does not contrast with the white background (<code>#FFF</code>) which the component is on.
+					</figcaption>
+				</figure>
+
+				<figure id="figure-focus-outer-green">
+					<img src="img/ntc-focus-outer-green.png" alt="Three blue buttons on a white background, the middle has a dark green outline outside of the button's non-focused boundary." width="400"/>
+					<figcaption>
+						<strong>Pass:</strong> The external green indicator (<code>#008000</code>) does contrast with the white background (<code>#FFF</code>) which the component is on. It does not need to contrast with both the component background and the component, as visually the effect is that the button is noticeably larger, and it's not necessary for a user to be able to discern this extra border in isolation. Although this passes non-text contrast, it is not a good indicator unless it is very thick. <span class="wcag22">There is a AAA criterion in WCAG 2.2 that addresses this aspect, <a href="focus-appearance.html">Focus Appearance</a></span>.
+					</figcaption>
+				</figure>
+
+				<p>If an indicator is partly inside and partly outside the component, either part of the indicator could provide contrast.</p>
+
+				<figure id="figure-focus-outer-inner">
+					<img src="img/ntc-focus-inner-outer.png" alt="Three blue buttons on a white background, the middle has the outline of a yellow rectangle that is partly inside the button's boundary, and partly outside on the white background." width="400"/>
+					<figcaption>
+						<strong>Pass:</strong> The focus indicator is partially inside, partially outside the button. The internal part of the yellow indicator (<code>#FFFF00</code>) contrasts with the blue button background (<code>#4189B9</code>).
+					</figcaption>
+				</figure>
+
+				<p>If the focus indicator changes the border of the component within the visible boundary it must contrast with the component. Typically an outline goes around (outside) the visible boundary of the component, in this case changing the border is just inside the visible edge of the component.</p>
+
+				<figure id="figure-focus-border">
+					<img src="img/ntc-focus-border.png" alt="Three blue buttons on a white background, the center button has a green border exactly on the outer boundary of the button." width="400"/>
+					<figcaption>
+						<strong>Fail:</strong> The border of the control changes from blue (<code>#4189B9</code>) to green (<code>#4B933A</code>). This is within the component and does not contrast with the inside background of the component.
+					</figcaption>
+				</figure>
+
+				<figure id="figure-focus-inner-green">
+					<img src="img/ntc-focus-inner-border.png" alt="Three blue buttons with a black border on a white background, the center button has a green border inside, adjacent to the inner background and black border." width="400"/>
+					<figcaption>
+						<strong>Fail:</strong> An inner border of dark green (<code>#008000</code>) does contrast with the black border, but does not contrast with the blue component background.
+					</figcaption>
+				</figure>
+
+				<figure id="figure-focus-inner-white">
+					<img src="img/ntc-focus-inner-white.png" alt="Three blue buttons with a black border on a white background, the center button has a white border inside, adjacent to the inner background and black border." width="400"/>
 					<figcaption>
-						Two examples which fail a success criterion, the first fails the Use of color criterion due to relying on yellow and white hues. The second example fails the Non-text contrast criterion due to the yellow (#fff000) to white contrast ratio of 1.2:1.
+						<strong>Pass:</strong> An inner border of white contrasts with the black border and the blue component background.
 					</figcaption>
 				</figure>
 
-				<p>Using a change of contrast for focus and other states is a technique to differentiate the states. This is the basis for <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G195" class="general">G195: Using an author-supplied, highly visible focus indicator</a>, and more techniques are being added.</p>
+		        <p>Note that this Success Criterion does not directly compare the focused and unfocused states of a control - if the focus state relies on a change of color (e.g., changing <em>only</em> the background color of a button), this Success Criterion does not define any requirement for the difference in contrast between the two states.</p>
 
-				<p>In combination with <a href="https://www.w3.org/TR/WCAG21/#focus-visible">2.4.7 Focus Visible</a>, the visual focus indicator for a component <em>must</em> have sufficient contrast against the adjacent background when the component is focused, except where the appearance of the component is determined by the user agent and not modified by the author.</p>
-        <p>Note that this Success Criterion does not directly compare the focused and unfocused states of a control - if the focus state relies on a change of color (e.g., changing <em>only</em> the background color of a button), this Success Criterion does not define any requirement for the difference in contrast between the two states.</p>
+				<figure id="figure-focus-background">
+					<img src="img/ntc-focus-background.png" alt="Three blue buttons, the center button is a lighter blue than the others." width="400"/>
+					<figcaption>
+						<strong>Not in scope:</strong> The change of background within the component is not in scope of non-text contrast. However, this would not pass <a href="use-of-color.html">Use of color</a>.
+					</figcaption>
+				</figure>
+
+				<section id="hover-states">
+					<h3>Hover states</h3>
+					<p>The language of Non-text Contrast specifically calls out "visual information required to identify...states." When users talk about a hover state, they are normally referring to a visual effect that takes place when the pointer is positioned over a control. However, there are a number of HTML components (such as buttons, checkboxes, radio buttons, and selects) which do not by default display any additional visual effects when the user moves a pointer control over them. The pointer itself, via its location, is the indicator of whether the user is hovering on a component. Therefore, additional author-supplied visual treatments for hover are not "required to identify" the hover state. Those treatments can be considered supplemental and do not themselves need to contrast 3:1 against the background.</p>
+					
+					<p>This is not to say that other hover effects are discouraged. For instance, some native components alter the shape of the pointer when it is hovering over a control; the pointer becomes an I-beam when it hovers over text inputs and text areas. There will be cases where some users may benefit from additional visual hover effects, such as bolding text or use of drop shadows. However, other users may find strong hover effects distracting. The key consideration for any hover effect is that it does not cause a component itself to lose sufficient contrast against adjacent colors, or cause the visual indicators for other states, such as focus or selection, to lose sufficient contrast.</p>
+				</section>
 
 				<section>
-					<h4>Active User Interface Component Examples</h4>
+					<h3>User Interface Component Examples</h3>
 					<p>For designing focus indicators, selection indicators and user interface components that need to be perceived clearly, the following are examples that have sufficient contrast.</p>
 
 					<table class="left-headers">
 						<caption>
-							Active User Interface Component Examples
+							Passing User Interface Component Examples
 						</caption>
 						<tr>
 						<th>Type</th>
@@ -100,88 +201,106 @@ <h4>Active User Interface Component Examples</h4>
 						<th>Examples</th>
 						</tr>
 						<tr>
-							<th>Link Text</th>
-							<td>Default link text is in the scope of <a href="contrast-minimum">1.4.3 Contrast (Minimum)</a>, and the underline is sufficient to indicate the link.</td>
-							<td><img src="img/link-text-default.png" alt="A browser-default styled link, blue with an underline." /></td>
+							<th>Link text</th>
+							<td>The browser's default link text color is covered by <a href="contrast-minimum">1.4.3 Contrast (Minimum)</a>. Since the underline is the same color as the text, which must meet at least 3:1 to pass, the default underline will always pass the requirements of Non-text Contrast.</td>
+							<td><img src="img/link-text-default.png" alt="A browser-default styled link, blue with an underline."/></td>
 						</tr>
 						<tr>
 							<th>Default focus style</th>
-							<td>Links are required to have a focus indicator by <a href="focus-visible.html">2.4.7 Focus Visible</a>. Where the focus style of the user-agent is not adjusted on interactive controls (such as links, form fields or buttons), the default focus style is sufficient.</td>
-							<td><img src="img/link-text-focus.png" alt="A browser-default styled link, with a black dotted outline around the link." /></td>
+							<td>Links are required to have a visible focus indicator by <a href="focus-visible.html">2.4.7 Focus Visible</a>. Where the focus style of the user-agent is not adjusted on interactive controls (such as links, form fields or buttons) by the website (author), the default focus style is exempt from contrast requirements (but must still be visible).</td>
+							<td><img src="img/ntc-default-link-focus.png" alt="A browser-default styled link, with a solid mid-blue outline around the link." width="116"/></td>
 						</tr>
 						<tr>
 							<th>Buttons</th>
 							<td>A button which has a distinguishing indicator such as position, text style, or context does not need a <em>contrasting</em> visual indicator to show that it is a button, although some users are likely to identify a button with an outline that meets contrast requirements more easily.</td>
-							<td><img src="img/button-background.png" alt="Button with a faint blue background." width="100" /></td>
+							<td><img src="img/button-background.png" alt="Button with a faint blue background." width="100"/></td>
 						</tr>
 						<tr>
 							<th>Text input (minimal)</th>
-							<td>Where a text-input has a visual indicator to show it is an input, such as a bottom border (#767676), that indicator must meet 3:1 contrast ratio.</td>
+							<td>Where a text-input has a visual indicator to show it is an input, such as a bottom border (<code>#767676</code>), that indicator must meet 3:1 contrast ratio.</td>
 							<td>
-								<img src="img/text-input-minimal.png" alt="A label with a text input shown by a bottom border and faint grey background." />
+								<img src="img/text-input-minimal.png" alt="A label with a text input shown by a bottom border and faint grey background."/>
 							</td>
 						</tr>
 						<tr>
 							<th>Text input</th>
-							<td>Where a text-input has an indicator such as a complete border (#76766), that indicator it must meet 3:1 contrast ratio.</td>
+							<td>Where a text-input has an indicator such as a complete border (<code>#767676</code>), that indicator must meet 3:1 contrast ratio.</td>
 							<td>
-								<img src="img/text-input-default.png" alt="A label with a text input shown by a complete border." />
+								<img src="img/text-input-default.png" alt="A label with a text input shown by a complete border."/>
 							</td>
 						</tr>
 						<tr>
 							<th>Text input focus style</th>
-							<td>A focus indicator is required. While in this case the additional gray (#CCC) outline has an insufficient contrast of 1.6:1 against the white (#FFF) background, the cursor/caret which is displayed when the input receives focus <em>does</em> provide a sufficiently strong visual indication.</td>
+							<td>A focus indicator is required. While in this case the additional gray (<code>#CCC</code>) outline has an insufficient contrast of 1.6:1 against the white (<code>#FFF</code>) background, the cursor/caret which is displayed when the input receives focus <em>does</em> provide a sufficiently strong visual indication.</td>
 							<td>
-								<img src="img/text-input-focus.png" alt="A label with a text input with a faint gray outline and a visible cursor/caret." />
+								<img src="img/text-input-focus.png" alt="A label with a text input with a faint gray outline and a visible cursor/caret."/>
 							</td>
 						</tr>
 						<tr> 
 							<th>Text input using background color</th>
-							<td>Text inputs that have no border and are differentiated only by a background color must have a 3:1 contrast ratio to the adjacent background (#043464).</td>
+							<td>Text inputs that have no border and are differentiated only by a background color must have a 3:1 contrast ratio to the adjacent background (<code>#043464</code>).</td>
 							<td>
-								<img src="img/text-input-background.png" alt="A label with a text input shown by a dark blue page background, and white box." />
+								<img src="img/text-input-background.png" alt="A label with a text input shown by a dark blue page background, and white box."/>
 							</td>
 						</tr>
 						<tr>
 							<th>Toggle button</th>
-							<td>The toggle button's internal background (#070CD5) has a good contrast with the external white background. Also, the round toggle within (#7AC2FF) contrasts with the internal background.</td>
-							<td><img src="img/toggle.png" alt="Dark blue oval toggle button with light blue internal indicator." width="150" /></td>
+							<td>The toggle button's internal background (<code>#070CD5</code>) has a good contrast with the external white background. Also, the round toggle within (<code>#7AC2FF</code>) contrasts with the internal background.</td>
+							<td><img src="img/toggle.png" alt="Dark blue oval toggle button with light blue internal indicator." width="150"/></td>
 						</tr>
 						<tr>
 							<th>Dropdown indicator</th>
-							<td>The down-arrow is required to understand that there is drop-down functionality, it has a contrast of 4.7:1 for the white icon on dark gray (#6E747B).</td>
-							<td><img src="img/dropdown.png" alt="Button with the word Menu, and a down-arrow icon next to it." width="150" /></td>
+							<td>The down-arrow is required to understand that there is drop-down functionality, it has a contrast of 4.7:1 for the white icon on dark gray (<code>#6E747B</code>).</td>
+							<td><img src="img/dropdown.png" alt="Button with the word Menu, and a down-arrow icon next to it." width="150"/></td>
 						</tr>
 						<tr>
 							<th>Dropdown indicator</th>
 							<td>The down-arrow is required to understand that there is drop-down functionality, it has a contrast of 21:1 for the black icon on white.</td>
-							<td><img src="img/dropdown2.png" alt="Text with the word Menu, and a down-arrow icon next to it." width="150" /></td>
+							<td><img src="img/dropdown2.png" alt="Text with the word Menu, and a down-arrow icon next to it." width="150"/></td>
 						</tr>
 						<tr>
 							<th>Checkbox - empty</th>
 							<td>A black border on a white background indicates the checkbox.</td>
-							<td><img src="img/checkbox-example1.png" alt="Black square border with a text label." width="150" /></td>
+							<td><img src="img/checkbox-example1.png" alt="Black square border with a text label." width="150"/></td>
 						</tr>
 						<tr>
 							<th>Checkbox - checked</th>
 							<td>A black border on a white background indicates the checkbox, the black tick shape indicates the state of checked.</td>
-							<td><img src="img/checkbox-example2.png" alt="Black square border with a tick inside, and a text label." width="150" /></td>
+							<td><img src="img/checkbox-example2.png" alt="Black square border with a tick inside, and a text label." width="150"/></td>
 						</tr>
 						<tr>
-							<th>Checkbox - Fail</th>
-							<td>The grey border color of the checkbox (#9D9D9D) has a contrast ratio of 2.7:1 with the white background, which is not sufficient for the visual information required to identify the checkbox.</td>
-							<td><img src="img/checkbox-example3.png" alt="Grey box on a white background with a black tick in the middle." width="150" /></td>
+							<th>Checkbox - Subtle hover style</th>
+							<td>A checkbox is visually identified by its black border against a white background, but when the mouse pointer hovers on the checkbox, a subtle grey background is added (<code>#DEDEDE</code>). The black border has a 15:1 contrast ratio with the grey background, so the checkbox continues to have good contrast. Note that the grey hover effect does not itself need to contrast 3:1 with the page background, since the pointer position is the primary indicator of the hover state.</td>
+							<td><img src="img/checkbox-example4.png" alt="Checkbox with a black border and a circular grey background next to a text label." width="150"/></td>
+						</tr>
+					</table>
+
+					<p>The following are examples that have insufficient contrast.</p>
+
+					<table class="left-headers">
+						<caption>
+							Failing User Interface Component Examples
+						</caption>
+						<tr>
+						<th>Type</th>
+						<th>Description</th>
+						<th>Examples</th>
 						</tr>
 						<tr>
-							<th>Checkbox - Subtle hover style</th>
-							<td>A black border on a white background indicates the checkbox, when the mouse pointer activates the subtle hover state adds a grey background (#DEDEDE). The black border has a 15:1 contrast ratio with the grey background.</td>
-							<td><img src="img/checkbox-example4.png" alt="Blackbox on a circular grey background next to a text label." width="150" /></td>
+						<th>Colored underline is the only indicator of a link</th>
+						<td>Link and non-link text are both white on an almost-black (<code>#0D0F13</code>) background. The link's custom underline (<code>#B1262B</code>) is the only way to identify the link. The red underline contrasts less than 3:1 with the background color.</td>
+						<td><img src="img/ntc-link-underline-only.png" alt="White non-link and link text on an almost black background. The link text has a dull-red underline." width="161"/></td>
+					</tr>
+						<tr>
+							<th>Checkbox - border color</th>
+							<td>The grey border color of the checkbox (<code>#9D9D9D</code>) has a contrast ratio of 2.7:1 with the white background, which is not sufficient for the visual information required to identify the checkbox.</td>
+							<td><img src="img/checkbox-example3.png" alt="Grey box on a white background with a black tick in the middle." width="161"/></td>
 						</tr>
 						<tr>
-							<th>Checkbox - Subtle focus style - fail</th>
-							<td>A focus indicator is required. If the focus indicator is styled by the author, it must meet the 3:1 contrast ratio with adjacent colors. In this case, the gray (#AAA) indicator has an insufficient ratio of 2.3:1 with the white (#FFF) adjacent background.</td>
+							<th>Checkbox - subtle focus style</th>
+							<td>A focus indicator is required. If the focus indicator is styled by the author, it must meet the 3:1 contrast ratio with adjacent colors. In this case, the gray (<code>#AAA</code>) indicator has an insufficient ratio of 2.3:1 with the white (<code>#FFF</code>) adjacent background.</td>
 							<td>
-								<img src="img/checkbox-example5.png" alt="Unchecked checkbox with a thick gray additional outline as focus indication." />
+								<img src="img/checkbox-example5.png" alt="Unchecked checkbox with a thick gray additional outline as focus indication." width="150"/>
 							</td>
 						</tr>
 					</table>
@@ -190,12 +309,12 @@ <h4>Active User Interface Component Examples</h4>
 				<section id="inactive-controls">
 					<h4>Inactive User Interface Components</h4>
 
-					<p>User Interface Components that are not available for user interaction (e.g., a disabled control in HTML) are not required to meet contrast requirements in WCAG 2.1. An inactive user interface component is visible but not currently operable. An example would be a submit button at the bottom of a form that is visible but cannot be activated until all the required fields in the form are completed.</p>
+					<p>User Interface Components that are not available for user interaction (e.g., a disabled control in HTML) are not required to meet contrast requirements. An inactive user interface component is visible but not currently operable. An example would be a submit button at the bottom of a form that is visible but cannot be activated until all the required fields in the form are completed.</p>
 					<figure id="figure-grey-button-and-text">
-						<img src="img/inactive-button.png" alt="Grey button with non-contrasting grey text." width="120" />
+						<img src="img/inactive-button.png" alt="Grey button with non-contrasting grey text." width="120"/>
 						<figcaption> An inactive button using default browser styles</figcaption>
 					</figure>
-					<p>Inactive components, such as disabled controls in HTML, are not available for user interaction. The decision to exempt inactive controls from the contrast requirements was based on a number of considerations. Although it would be benefitial to some people to discern inactive controls, a one-size-fits-all solution has been very difficult to establish. A method of varying the presentation of disabled controls, such as adding an icon for disabled controls, based on user preferences is anticipated as an advancement in the future.</p>
+					<p>Inactive components, such as disabled controls in HTML, are not available for user interaction. The decision to exempt inactive controls from the contrast requirements was based on a number of considerations. Although it would be beneficial to some people to discern inactive controls, a one-size-fits-all solution has been very difficult to establish. A method of varying the presentation of disabled controls, such as adding an icon for disabled controls, based on user preferences is anticipated as an advancement in the future.</p>
 				</section>
 			</section><!-- end user-interface-component section -->
 
@@ -217,26 +336,26 @@ <h3>Graphical Objects</h3>
 					</thead>
 					<tbody>
 						<tr>
-							<td><img src="img/contrast-phone.png" alt="An orange circle with a white telephone icon in the middle." width="40" /></td>
-							<td><p>The phone icon is a simple shape within the orange (#E3660E)circle. The meaning can be understood from that icon alone, the background behind the circle is irrelevant. The orange background and the white icon have a contrast ration greater than 3:1, which passes.</p>
+							<td><img src="img/contrast-phone.png" alt="An orange circle with a white telephone icon in the middle." width="40"/></td>
+							<td><p>The phone icon is a simple shape within the orange (<code>#E3660E</code>) circle. The meaning can be understood from that icon alone, the background behind the circle is irrelevant. The orange background and the white icon have a contrast ratio greater than 3:1, which passes.</p>
 							<p>The graphical object is the white phone icon.</p>
 							</td>
 						</tr>
 						<tr>
-							<td><img src="img/contrast-magnet.png" alt="A red magnet with grey tips and a black outline." /></td>
+							<td><img src="img/contrast-magnet.png" alt="A red magnet with grey tips and a black outline."/></td>
 							<td><p>A magnet can be understood by the "U" shape with lighter colored tips. Therefore to understand this graphic you should be able to discern the overall shape (against the background) and the lighter colored tips (against the rest of the U shape and the background).</p>
 							<p>The graphical objects are the "U" shape (by outline or by the solid red color #D0021B), and each tip of the magnet.</p>
 							</td>
 						</tr>
 						<tr>
-							<td><img src="img/contrast-currency-down.png" alt="A yellow arrow pointing down with a pound sign (currency) in the middle." /></td>
-							<td><p>The symbol to show a currency (the £) going down can be understood with recognition of the shape (down arrow) and the currency symbol (pound icon with the shape which is part of the graphic). To understand this graphic you need to discern the arrow shape against the white background, and the pound icon against the yellow background (#F5A623).</p>
+							<td><img src="img/contrast-currency-down.png" alt="A yellow arrow pointing down with a pound sign (currency) in the middle."/></td>
+							<td><p>The symbol to show a currency (the £) going down can be understood with recognition of the shape (down arrow) and the currency symbol (pound icon with the shape which is part of the graphic). To understand this graphic you need to discern the arrow shape against the white background, and the pound icon against the yellow background (<code>#F5A623</code>).</p>
 							<p>The graphical objects are the shape and the currency symbol.</p>
 							</td>
 						</tr>
 						<tr>
 							<td><!-- Sourced from wikipedia under CC sharealike license https://en.wikipedia.org/wiki/File:Simple_line_graph_of_ACE_2012_results_by_candidate_sj01.png -->
-								<a href="img/simple-line-graph.png"><img src="img/simple-line-graph.png" alt="A line chart of votes across a region, with 4 lines of different colors tracking over time." width="200" /></a></td>
+								<a href="img/simple-line-graph.png"><img src="img/simple-line-graph.png" alt="A line chart of votes across a region, with 4 lines of different colors tracking over time." width="200"/></a></td>
 
 							<td><p>In order to understand the graph you need to discern the lines and shapes for each condition. To perceive the values of each line along the chart you need to discern the grey lines marking the graduated 100 value increments.</p>
 							<p>The graphical objects are the lines in the graph, including the background lines for the values, and the colored lines with shapes.</p>
@@ -245,7 +364,7 @@ <h3>Graphical Objects</h3>
 
 						</tr>
 						<tr>
-							<td><a href="img/graphics-contrast_pie-chart_pass.png"><img src="img/graphics-contrast_pie-chart_pass.png" alt="A pie chart with small gaps between each slice showing the white background, and a dark outline around light colored slices." width="200" /></a></td>
+							<td><a href="img/graphics-contrast_pie-chart_pass.png"><img src="img/graphics-contrast_pie-chart_pass.png" alt="A pie chart with small gaps between each slice showing the white background, and a dark outline around light colored slices." width="200"/></a></td>
 							<td><p>To understand the pie chart you have to discern each slice of the pie chart from the others.</p>
 							<p>The graphical objects are the slices of the pie (chart).</p>
 							<p>Note: If the values of the pie chart slices were also presented in a conforming manner (see the Pie Charts example for details), the slices would not be required for understanding.</p>
@@ -256,9 +375,9 @@ <h3>Graphical Objects</h3>
 
 				<p>Taking the magnet image above as an example, the process for establishing the graphical object(s) is to:</p>
 				<ul>
-					<li>Assess what part of each image is needed to understand what it represents.<br />
+					<li>Assess what part of each image is needed to understand what it represents.<br/>
 						The magnet's "U" shape can be conveyed by the outline or by the red background (either is acceptable). The white tips are also important (otherwise it would be a horseshoe), which needs to contrast with the red background.</li>
-					<li>Assume that the user could only see those aspects. Do they contrast with the adjacent colors?<br />
+					<li>Assume that the user could only see those aspects. Do they contrast with the adjacent colors?<br/>
 						The outline of the magnet contrasts with the surrounding text (black/white), and the red and white between the tips also has sufficient contrast.</li>
 				</ul>
 
@@ -271,7 +390,7 @@ <h4>Required for Understanding</h4>
 				<ul>
 					<li>
 						<p>A graphic with text embedded or overlayed conveys the same information, such as labels <em>and</em> values on a chart.</p>
-						<p class="note">Text within a graphic must meet <a href="https://www.w3.org/TR/WCAG21/#contrast-minimum">1.4.3 Contrast (Minimum)</a>.</p>
+						<p class="note">Text within a graphic must meet <a href="contrast-minimum" class="sc">1.4.3 Contrast (Minimum)</a>.</p>
 					</li>
 					<li> The graphic is for aesthetic purposes that does not require the user to see or understand it to understand the content or use the functionality.</li>
 					<li> The information is available in another form, such as in a table that follows the graph, which becomes visible when a "Long Description" button is pressed.</li>
@@ -283,17 +402,17 @@ <h4>Gradients</h4>
 
 				<p>Gradients can reduce the apparent contrast between areas, and make it more difficult to test. The general principles is to identify the graphical object(s) required for understanding, and take the central color of that area. If you remove the adjacent color which does not have sufficient contrast, can you still identify and understand the graphical object?</p>
 				<figure id="figure-blue-circle-i-versions">
-          <img src="img/contrast-gradient.png" alt="Two versions of a blue circle with an 'i' indicating information. The first example has a blue gradient background, the second is missing the upper half of the background which obscures the i." width="300" />
+          <img src="img/contrast-gradient.png" alt="Two versions of a blue circle with an 'i' indicating information. The first example has a blue gradient background, the second is missing the upper half of the background which obscures the i." width="300"/>
 				<figcaption>Removing the background which does not have sufficient contrast highlights that the graphical object (the &quot;i&quot;) is not then understandable.</figcaption></figure>
 				</section>
 				<section>
 				<h4>Dynamic Examples</h4>
 
-				<p>Some graphics may have interactions that either vary the contrast, or display the information as text when you mouseover/tap/focus each graphical object. In order for someone to discern the graphics exist at all, there must be contrasting colors or text in order to find the graphics. Within that area, information available by a conforming method (e.g., focusable elements) can be used to make that information available dynamically as text, or dynamically increase the contrast.</p>
+				<p>Some graphics may have interactions that either vary the contrast, or display the information as text when you mouseover/tap/focus each graphical object. In order for someone to discern the graphics exist at all, the unfocused default version must already have sufficiently contrasting colors or text. For the area that receives focus, information can then be made available dynamically as pop-up text, or be foregrounded dynamically by increasing the contrast.</p>
 
 				<!-- example from http://www.oracle.com/webfolder/technetwork/jet/jetCookbook.html?component=pieChart&demo=default -->
 				<figure id="figure-pie-slice-hover-data">
-					<img alt="A pie chart with one slice highlighted and a box hovering next to it that shows the data and indicates the source in the key." src="img/dynamic-pie-chart.png" width="350" /> 
+					<img alt="A pie chart with one slice highlighted and a box hovering next to it that shows the data and indicates the source in the key." src="img/dynamic-pie-chart.png" width="350"/> 
 					<figcaption>A dynamic chart where the current 'slice' is hovered or focused, which activates the associated text display of the values and highlights the series</figcaption>
 				</figure>
 				</section>
@@ -305,15 +424,25 @@ <h4>Infographics</h4>
 				<p>Infographics often fail to meet several WCAG level AA criteria including:</p>
 
 				<ul>
-					<li><a href="https://www.w3.org/WAI/WCAG21/Understanding/non-text-content.html">1.1.1 Non-text Content</a></li>
-					<li><a href="https://www.w3.org/WAI/WCAG21/Understanding/use-of-color.html">1.4.1 Use of Color</a></li>
-					<li><a href="https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html">1.4.3 (Text) Contrast</a></li>
-					<li><a href="https://www.w3.org/WAI/WCAG21/Understanding/images-of-text.html">1.4.5 Images of Text</a></li>
+					<li><a href="non-text-content" class="sc">1.1.1 Non-text Content</a></li>
+					<li><a href="use-of-color" class="sc">1.4.1 Use of Color</a></li>
+					<li><a href="contrast-minimum" class="sc">1.4.3 Contrast (Minimum)</a></li>
+					<li><a href="images-of-text" class="sc">1.4.5 Images of Text</a></li>
 				</ul>
 
-				<p>An infographic can use text which meets the other criteria to minimise the number of graphical objects required for understanding. For example, using text with sufficient contrast to provide the values in a chart. A long description would also be sufficient because then the infograph is not relied upon for understanding.</p>
+				<p>An infographic can use text which meets the other criteria to minimise the number of graphical objects required for understanding. For example, using text with sufficient contrast to provide the values in a chart. A long description would also be sufficient because then the infographic is not relied upon for understanding.</p>
 
 				</section>
+
+				<section>
+					<h4>Symbolic text characters</h4>
+					<p>When text characters are used as symbols – used for their visual appearance, rather than <q>expressing something in human language</q> – they fall under the definition of <a>non-text content</a>.</p>
+					<figure id="figure-text-symbols">
+						<img alt="A button using an uppercase 'X' and a button with a greater-than character" src="img/buttons-text-symbols.png" />
+						<figcaption>Even though the two buttons use text characters — an uppercase <q>X</q>, often used for "Close" buttons, and a <q>&gt;</q> character, to act as a right-pointing arrow — they count as non-text characters/symbols. Their contrast ratio of just above 3:1 passes this Success Criterion.</figcaption>
+					</figure>
+				</section>
+
 				<section>
 					<h4>Essential Exception</h4>
 
@@ -333,7 +462,7 @@ <h4>Essential Exception</h4>
 
 			<section id="testing-principles">
 					<h3>Testing Principles</h3>
-					<p>A summary of the high-level process for finding and assessing non-text graphics on a web page:</p>
+					<p>A summary of the high-level process for finding and assessing non-text content on a web page:</p>
 					<ul>
 						<li>Identify each user-interface component (link, button, form control) on the page and:
 							<ul>
@@ -341,7 +470,7 @@ <h3>Testing Principles</h3>
 								<li>Test those contrast indicators in each state.</li>
 							</ul>
 						</li>
-						<li>Identify each graphic on the page that includes information required for understanding the content (i.e. excluding graphics which have visible text for the same information, or are decorative) and:
+						<li>Identify each graphic on the page that includes information required for understanding the content (i.e., excluding graphics which have visible text for the same information, or are decorative) and:
 							<ul>
 								<li>Check the contrast of the graphical object against its adjacent colors;</li>
 								<li>If there are multiple colors and/or a gradient, choose the least contrasting area to test;</li>
@@ -362,7 +491,7 @@ <h3>Testing Principles</h3>
 			<h2>Benefits</h2>
 			<p>People with low vision often have difficulty perceiving graphics that have insufficient contrast. This can be exacerbated if the person has a color vision deficiency that lowers the contrast even further. Providing a <a href="https://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef">relative luminance</a> (lightness difference) of 3:1 or greater can make these items more distinguishable when the person does not see a full range of colors.</p>
 		</section>
-		
+
 		<section id="examples">
 			<h2>Graphical Object Examples</h2>
 			<ul>
@@ -374,19 +503,19 @@ <h2>Graphical Object Examples</h2>
 				<h3>Pie Charts</h3>
 				<p>Pie charts make a good case study for the graphical objects part of this success criterion, the following pie charts are intended to convey the proportion of market share each browser has. Please Note: The actual figures are made up, these are not actual market shares. </p>
 				<figure id="figure-failing-pie-chart">
-					<img src="img/graphics-contrast_pie-chart_fail.png" alt="Failing pie chart" />
+					<img src="img/graphics-contrast_pie-chart_fail.png" alt="Failing pie chart"/>
 					<figcaption>
 						<p><strong>Fail:</strong> The pie chart has labels for each slice (so passes 1.4.1 Use of Color), but in order to understand the proportions of the slices you must discern the edges of the slices (the graphical objects conveying essential information), and the contrast between the slices is not  3:1 or greater. </p>
 					</figcaption>
 				</figure>
 				<figure id="figure-not-applicable-pie-chart">
-					<img src="img/graphics-contrast_pie-chart_na.png" alt="Not applicable pie chart" />
+					<img src="img/graphics-contrast_pie-chart_na.png" alt="Not applicable pie chart"/>
 					<figcaption>
 						<p><strong>Not applicable:</strong> The pie chart has visible labels <em>and</em> values that convey equivalent information to the graphical objects (the pie slices). </p>
 					</figcaption>
 				</figure>
 				<figure id="figure-passing-pie-chart">
-					<img src="img/graphics-contrast_pie-chart_pass.png" alt="Passing pie chart" />
+					<img src="img/graphics-contrast_pie-chart_pass.png" alt="Passing pie chart"/>
 					<figcaption>
 						<p><strong>Pass:</strong> The pie chart has visible labels, and sufficient contrast around and between the slices of the pie chart (the graphical objects). A darker border has been added around the yellow slice in order to achieve the contrast level.</p>
 					</figcaption>
@@ -395,14 +524,14 @@ <h3>Pie Charts</h3>
 			<section class="example">
 				<h3>Infographics</h3>
 				<figure id="figure-infographic-light-circles">
-					<img src="img/infographic-fail.png" alt="An infographic showing lightly colored circles of various sizes to indicate the size of five different social networks" />
+					<img src="img/infographic-fail.png" alt="An infographic showing lightly colored circles of various sizes to indicate the size of five different social networks"/>
 					<figcaption>
 						<p><strong>Fail:</strong> Discerning the circles is required to understand the size of network and discerning the icons in each circle is required to identify which network it shows.</p>
 					</figcaption>
 				</figure>
 				<p>The graphical objects are the circles (measured against the background) and the icons in each circle (measured against the circle's background).</p>
 				<figure id="figure-infographic-contrasting-text">
-					<img src="img/infographic-pass.png" alt="The same infographic with contrasting text, dark borders around the circles, and contrasting icons." />
+					<img src="img/infographic-pass.png" alt="The same infographic with contrasting text, dark borders around the circles, and contrasting icons."/>
 					<figcaption>
 						<p><strong>Pass:</strong> The circles have contrasting borders and the icons are a contrasting dark color against the light circle backgrounds.</p>
 					</figcaption>
@@ -425,17 +554,17 @@ <h2>Techniques</h2>
 			<section id="sufficient">
 				<h3>Sufficient</h3>
 				<section class="situation">
-					<section class="situation">
 						<h4>Situation A: Color is used to identify user interface components or used to identify user interface component states</h4>
 						<ul>
-							<li><a href="../../techniques/general/G195" class="general">G195: Using an author-supplied, highly visible focus indicator</a></li>
-							<li><a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G174" class="general">G174: Providing a control with a sufficient contrast ratio that allows users to switch to a presentation that uses sufficient contrast</a></li>
+							<li><a href="../Techniques/general/G195" class="general">G195: Using an author-supplied, highly visible focus indicator</a></li>
+							<li><a href="../Techniques/general/G174" class="general">G174: Providing a control with a sufficient contrast ratio that allows users to switch to a presentation that uses sufficient contrast</a></li>
 						</ul>
-					</section>
+				</section>
+				<section class="situation">
 					<h4>Situation B: Color is required to understand graphical content</h4>
 					<ul>
-						<li><a href="../../techniques/general/G207" class="general">G207: Ensuring that a contrast ratio of 3:1 is provided for icons</a></li>
-						<li><a href="../../techniques/general/G209" class="general">G209: Provide sufficient contrast at the boundaries between adjoining colors</a></li>
+						<li><a href="../Techniques/general/G207" class="general">G207: Ensuring that a contrast ratio of 3:1 is provided for icons</a></li>
+						<li><a href="../Techniques/general/G209" class="general">G209: Provide sufficient contrast at the boundaries between adjoining colors</a></li>
 					</ul>
 				</section>
 
@@ -449,7 +578,7 @@ <h3>Advisory</h3>
 			<section id="failure">
 				<h3>Failures</h3>
 				<ul>
-					<li><a href="https://www.w3.org/WAI/WCAG21/Techniques/failures/F78" class="general">F78: Failure of Success Criterion 2.4.7 due to styling element outlines and borders in a way that removes or renders non-visible the visual focus indicator</a></li>
+					<li><a href="../Techniques/failures/F78" class="general">F78: Failure of Success Criterion 2.4.7 due to styling element outlines and borders in a way that removes or renders non-visible the visual focus indicator</a></li>
 				</ul>
 			</section>
 		</section>
diff --git a/understanding/21/orientation.html b/understanding/21/orientation.html
index 37dbbeb87b..33f6c2b967 100644
--- a/understanding/21/orientation.html
+++ b/understanding/21/orientation.html
@@ -1,18 +1,29 @@
 <!DOCTYPE html>
 <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
 	<head>
-		<meta charset="UTF-8" />
+		<meta charset="UTF-8"/>
 		<title>WCAG 2.1 Understanding Orientation</title>
-		<link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove" />
+		<link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/>
 	</head>
 	<body>
 		<h1>
 			<strong>Orientation</strong>
-			<br />
+			<br/>
 			Understanding
 			<abbr title="Success Criterion">SC</abbr>
 			2.6.2
 		</h1>
+
+		<section id="brief">
+			<h2>In brief</h2>
+			<dl>
+				<dt>Goal</dt><dd>Devices can be used in any orientation.</dd>
+				<dt>What to do</dt><dd>Don't lock content to either portrait or landscape presentation.</dd>
+				<dt>Why it's important</dt><dd>Wheelchair users and others may have devices mounted in a fixed orientation.</dd>
+			</dl>
+	  
+		</section>
+
 		<section id="intent">
 			<h2>Intent of this Success Criterion</h2>
 			<p>The intent of this Success Criterion is to ensure that content displays in the orientation (portrait or landscape) preferred by the user. Some websites and applications automatically set and restrict the screen to a particular display orientation and expect
@@ -31,27 +42,26 @@ <h3>Locking a device to an orientation</h3>
 			<p>This Success Criterion complements device "lock orientation" settings. A web page that does not restrict its display orientation will always support the system-level orientation setting, since the system setting is picked up by the user agent. Alternatively, where a device-level orientation lock is not in place, the user agent should display the page according to the orientation of the device (either its default, or the current orientation determined by any device sensors).</p>
 
 			<p>The exception for things considered essential is aimed at situations where the content would only be understood in a particular orientation, or where the technology restricts the possible orientations. If content is aimed at a specific environment which is only available in one orientation (such as a television) then the content can restrict the orientation. Technologies such as virtual reality use screens within goggles that cannot change orientation relative to the user's eyes.</p>
-      
-      <section id="benefits">
-				<h3>Benefits</h3>
-				<ul>
-					<li>Users with dexterity impairments, who have a mounted device will be able to use the content in their fixed orientation.</li>
-					<li>Users with low-vision will be able to view content in the orientation that works best for them, for example to increase the text size by viewing content in landscape.</li>
-				</ul>
-			</section>
+		</section>
+		<section id="benefits">
+			<h2>Benefits</h2>
+			<ul>
+				<li>Users with dexterity impairments, who have a mounted device will be able to use the content in their fixed orientation.</li>
+				<li>Users with low-vision will be able to view content in the orientation that works best for them, for example to increase the text size by viewing content in landscape.</li>
+			</ul>
 		</section>
 		<section id="examples">
 			<h2>Examples</h2>
 			<ul>
-				<li><strong>Example 1: Online video site</strong><br />
+				<li><strong>Example 1: Online video site</strong><br/>
 				A video is shown in either portrait or in landscape based on the user's chosen orientation.</li>
-				<li><strong>Example 2: Messaging website</strong><br />
+				<li><strong>Example 2: Messaging website</strong><br/>
 				A messaging website can display messages in both portrait and landscape orientations. </li>
-				<li><strong>Example 3: eReader web app</strong><br />
+				<li><strong>Example 3: eReader web app</strong><br/>
 				An eReader web app can display the contents of a book in both portrait and landscape orientation.</li>
-				<li><strong>Example 4: Check deposit in banking app</strong><br />
+				<li><strong>Example 4: Check deposit in banking app</strong><br/>
 				An example where orientation is essential could be a banking app that requires the device be in landscape mode to easily and accurately capture an image of a check for deposit. These paper forms are typically about twice as wide as they are high.</li>
-				<li><strong>Example 5: Piano app</strong><br />
+				<li><strong>Example 5: Piano app</strong><br/>
 				An example where orientation is essential could be a piano app that requires the device to be in landscape mode to allow room for enough of the piano keys to be functionally usable. Since a piano app is emulating a physical piano keyboard that needs to retain relative physical characteristics between keys, either too few keys would be available, or the keys would be much too narrow.</li>
 			</ul>
 		</section>
diff --git a/understanding/21/pointer-cancellation.html b/understanding/21/pointer-cancellation.html
index 0682ea3f5b..78519394d1 100644
--- a/understanding/21/pointer-cancellation.html
+++ b/understanding/21/pointer-cancellation.html
@@ -1,12 +1,22 @@
 <!DOCTYPE html>
 <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
 	<head>
-		<meta charset="UTF-8" />
+		<meta charset="UTF-8"/>
 		<title>Understanding Pointer Cancellation</title>
-		<link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove" />
+		<link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/>
 	</head>
 	<body>
 		<h1>Understanding Pointer Cancellation</h1>
+
+		<section id="brief">
+			<h2>In brief</h2>
+			<dl>
+				<dt>Goal</dt><dd>Reduce accidental activation of controls by mouse or touch.</dd>
+				<dt>What to do</dt><dd>Make pointer cancellation predictable and consistent.</dd>
+				<dt>Why it's important</dt><dd>Make it easier for anyone to recover from something they didn’t mean to do.</dd>
+			</dl>
+	  
+		</section>
 		<section id="intent">
 			<h2>Intent</h2>
 			<p>The intent of this success criterion is to make it easier for users to prevent accidental or erroneous pointer input. People with various disabilities can inadvertently initiate touch or mouse events with unwanted results. Each of the following subsections roughly aligns with the bullets of this Success Criterion, and outlines a means of allowing users to cancel pointer operations.</p>
@@ -28,7 +38,7 @@ <h3>Up-Event Abort or Undo</h3>
   <li>moved to a new location, while still being depressed, and</li>
   <li>released (up-event) to conclude the drop action.</li>
 </ol>
-<p>In such a complex action, the need for an Abort or Undo function increases. Designers may elect to confirm the move through something like a confirmation dialog or an undo button, giving the user the ability to Undo the process just completed. Alternatively, the ability to Abort the action can be acheived if, before completing step 3, the user returns the selected item to its original location and concludes the process there. If other parts of the screen disallow a move, the user can conclude the drag and drop there, effectively nullifying the operation.</p> 
+<p>In such a complex action, the need for an Abort or Undo function increases. Designers may elect to confirm the move through something like a confirmation dialog or an undo button, giving the user the ability to Undo the process just completed. Alternatively, the ability to Abort the action can be achieved if, before completing step 3, the user returns the selected item to its original location and concludes the process there. If other parts of the screen disallow a move, the user can conclude the drag and drop there, effectively nullifying the operation.</p> 
 			</section>
 			<section>
 <h3>Up Reversal</h3>
@@ -46,13 +56,13 @@ <h3>Down-Event</h3>
 			</ul>
 			</section>
 </section>
-					<section id="benefits">
-				<h3>Benefits</h3>
-					<ul>
-					<li>Makes it easier for all users to recover from hitting the wrong target.</li>
-					<li>Helps people with visual disabilities, cognitive limitations, and motor impairments by reducing the chance that a control will be accidentally activated or an action will occur unexpectedly, and also ensures that where complex controls are activated, a means of Undoing or Aborting the action is available.</li>
-					<li>Individuals who are unable to detect changes of context are less likely to become disoriented while navigating a site.</li>
-				</ul>
+		<section id="benefits">
+			<h2>Benefits</h2>
+			<ul>
+				<li>Makes it easier for all users to recover from hitting the wrong target.</li>
+				<li>Helps people with visual disabilities, cognitive limitations, and motor impairments by reducing the chance that a control will be accidentally activated or an action will occur unexpectedly, and also ensures that where complex controls are activated, a means of Undoing or Aborting the action is available.</li>
+				<li>Individuals who are unable to detect changes of context are less likely to become disoriented while navigating a site.</li>
+			</ul>
 		</section>
 		<section id="examples">
 			<h2>Examples</h2>
@@ -62,12 +72,6 @@ <h2>Examples</h2>
         <li>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.</li>
 			</ul>
 		</section>
-		<section id="resources">
-			<h2>Resources</h2>
-			<ul>
-				<li>Resource</li>
-			</ul>
-		</section>
 		<section id="techniques">
 			<h2>Techniques</h2>
 			<section id="sufficient">
@@ -75,7 +79,7 @@ <h3>Sufficient</h3>
 					<ul>
 						<li><a href="../../techniques/general/G210" class="general">G210</a></li>
 						<li><a href="../../techniques/general/G212" class="general">G212</a></li>
-						<li>@@ Touch events are only triggered when touch is removed from a control.</li>		
+						<li>Touch events are only triggered when touch is removed from a control (Potential future technique)</li>		
 					</ul>
 			</section>
 			<!--<section id="advisory">
diff --git a/understanding/21/pointer-gestures.html b/understanding/21/pointer-gestures.html
index a39600c191..1d935f749d 100644
--- a/understanding/21/pointer-gestures.html
+++ b/understanding/21/pointer-gestures.html
@@ -1,40 +1,61 @@
 <!DOCTYPE html>
 <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
 	<head>
-		<meta charset="UTF-8" />
+		<meta charset="UTF-8"/>
 		<title>WCAG 2.0 Understanding Page</title>
-		<link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove" />
+		<link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
 	</head>
 	<body>
-    <h1><strong>Pointer Gestures</strong><br />Understanding SC 2.5.1</h1>
-    
+    <h1><strong>Pointer Gestures</strong><br/>Understanding SC 2.5.1</h1>
+
+	<section id="brief">
+		<h2>In brief</h2>
+		<dl>
+			<dt>Goal</dt><dd>Let users operate touchscreens with one finger and reduced gestures.</dd>
+			<dt>What to do</dt><dd>Provide single-point operation for all functions.</dd>
+			<dt>Why it's important</dt><dd>Not everyone can perform complex and multi-touch gestures.</dd>
+		</dl>
+
+	</section>
+
 		<section id="intent">
 			<h2>Intent of this Success Criterion</h2>
 			<p>The intent of this Success Criterion is to ensure that content can be controlled with a range of pointing devices, abilities, and assistive technologies. Some people  cannot perform gestures in a precise manner, or they may use a specialized or adapted input device such as a head pointer, eye-gaze system, or speech-controlled mouse emulator. Some pointing methods lack the capability or accuracy to perform multipoint or path-based gestures.</p>
 
-			<p>A <strong>path-based gesture</strong> involves an interaction where not just the endpoints matter. If going  through an intermediate point (usually near the start of the gesture) also affects its meaning then it is a path-based gesture. The user engages a pointer (starting point), carries out a movement that goes through at least one intermediate-point before disengaging the pointer (end point). The intermediate point defines the gesture as requiring a specific path, even if the complete path is not defined.</p>
+			<p>A <strong>path-based gesture</strong> involves an interaction where not just the endpoints matter, but how the pointer moves between these points.</p>
+
+			<p>If the gesture is only recognised if the user moves in a (mostly) straight line from the start point to the end point, it is an example of a <strong>path-based gesture</strong>.</p>
 
 			<figure id="figure-path-based-gesture-1">
-				<img src="img/path-based-gesture-1.png" width="400" alt="Hand showing a starting touch, 1. Moving through a second point, 2. Going to one of several points,3." />
-				<figcaption>A path-based gesture involves starting a pointer movement that goes through at least one intermediate point before the end-point. The end-point may be a continuation, or allow for various movements.</figcaption>
+				<img src="img/path-based-gesture-1.png" width="400" alt="Hand showing a starting touch, 1. Moving in a straight line to a second point, 2." />
+				<figcaption>A <strong>path-based gesture</strong> where pointer movement is only allowed in a straight line from the start-point to the end-point. If the user strays from the straight directional path, the gesture is not recognised, has no effect, or is aborted.</figcaption>
+			</figure>
+
+			<p>If going through an intermediate point (usually near the start of the gesture) affects its meaning, then it is a <strong>path-based gesture</strong>. The user engages a pointer (starting point), carries out a movement that goes through at least one intermediate-point before disengaging the pointer (end point). The intermediate point defines the gesture as requiring a specific path, even if the complete path is not defined.</p>
+
+			<figure id="figure-path-based-gesture-2">
+				<img src="img/path-based-gesture-2.png" width="400" alt="Hand showing a starting touch, 1. Moving through a second point, 2. Going to one of several points,3." />
+				<figcaption>A <strong>path-based gesture</strong> involves starting a pointer movement that goes through at least one intermediate point before the end-point. The end-point may be a continuation, or allow for various movements.</figcaption>
 			</figure>
 
 			<p>Examples of path-based gestures include swiping, sliders and carousels dependent on the direction of interaction, and other gestures which trace a prescribed path such as drawing a specific shape. Such paths may be drawn with a finger or stylus on a touchscreen, graphics tablet, or trackpad, or with a mouse, joystick, or similar pointer device.</p>
 
-			<p>Pointer interactions where the movement between the start and end points can go in any direction and are entirely non-prescriptive are not path-based.</p>
+     <h3>The difference between Pointer Gestures and Dragging</h3>
+<p>Dragging is a movement where the user picks up an object with a pointer (such as mouse cursor or a finger) and moves it to some other position. This movement from start point to end point does not require the user to follow any particular path or direction. Dragging is therefore not path-based. In contrast, a path-based pointer gesture requires the traversal of an intermediate point, which is a technical way of expressing that the directionality and possibly speed of the gesture communicates a particular command to the system. Dragging motions are covered in <a href="dragging-movements">Success Criterion 2.5.7: Dragging Movements</a>.</p>
 
-			<figure id="figure-path-based-gesture-2">
-				<img src="img/path-based-gesture-2.png" width="400" alt="Hand showing a starting touch, 1. Going to a second point, 2. It follows a very random path." />
-				<figcaption>A free-form gesture does not require any particular path before the end-point, only the start and (optionally) the end point matter.</figcaption>
+			<figure id="figure-path-based-gesture-3">
+				<img src="img/path-based-gesture-3.png" width="400" alt="Hand showing a starting touch, 1. Going to a second point, 2. It follows a very random path." />
+				<figcaption>A <strong>free-form gesture</strong> does <strong>not</strong> require any particular path before the end-point, only the start and (optionally) the end point matter. This is <strong>not path-based</strong></figcaption>
 			</figure>
 
-			<p class="note">Any movement of a pointer could be difficult or impossible to use for someone who cannot perform precise movements, therefore alternative forms of interaction are always recommended. This success criterion is scoped to <em>path-based gestures</em> as it may be difficult or impossible to provide an alternative for free-form paths.</p>
+      <h3>Challenges for people with disabilities</h3>
+			<p class="note">Any movement of a pointer could be difficult or impossible to use for someone who cannot perform precise movements, therefore alternative forms of interaction are always recommended. This success criterion is scoped to <em>path-based gestures</em> as it may be difficult or impossible to provide an alternative for <em>free-form gestures</em>.</p>
 
 			<p>Examples of <strong>multipoint</strong> gestures include a two-finger pinch zoom, a split tap where one finger rests on the screen and a second finger taps, or a two- or three-finger tap or swipe. Users may find it difficult or impossible to accomplish these if they type and point with a single finger or stick.</p>
 
 			<p>Authors must ensure that their content can be operated without multipoint or path-based gestures. Multipoint or path-based gestures can be used so long as the functionality can also be operated by another method, such as a tap, click, double tap, double click, long press, or click &amp; hold. </p>
 
-			<p>This Success Criterion applies to gestures in the author-provided content, not gestures defined by the operating system, user agent, or assistive technology. Examples of operating system gestures would be swiping down to see system notifications and gestures for built-in assistive technologies (AT). Examples of user-agent-implemented gestures would be horizontal swiping implemented by browsers for navigating within the page history, or vertical swiping to scroll page content.</p>
+			<p>This Success Criterion applies to gestures in the author-provided content, not gestures defined by the operating system, user agent, or assistive technology. Examples of operating system gestures would be swiping down to see system notifications and gestures for built-in assistive technologies (AT). Examples of user agent-implemented gestures would be horizontal swiping implemented by browsers for navigating within the page history, or vertical swiping to scroll page content.</p>
 
 			<p>There are times when a component requires a path-based gesture for touch screen devices but not with a mouse. Taking an example of a generic slider:</p>
 			<ul>
@@ -44,29 +65,32 @@ <h2>Intent of this Success Criterion</h2>
 			<p>As touch screen devices can apply default gestures it is important to test with them if you are unsure whether a particular component does require a path-based gesture.</p>
 
 			<p>Browsers on a touch screen device generally provide some default gestures that impact whether a path-based gesture is needed. For example, a web browser on a touch-screen devices might detect a vertical gesture and scroll the page. If a user places their finger on a slider thumb and moves up (to scroll down) that might not activate the slider (depending on implementation). If the user moves horizontally first then the slider could capture that gesture and ignore vertical movement, resulting in a path-based gesture. If you include touch-screen devices as accessibility supported then these types of interaction need testing with a touch screen as using a mouse in a similar way would not trigger the same browser behavior.</p>
-			
-			<p>This Success Criterion does not require all functionality to be available through pointing devices, but if it is available to pointer devices then it should not require path-based gestures. While content authors generally need to provide keyboard commands or other non-pointer mechanisms that perform actions equivalent to complex gestures (see Success Criterion 2.1.1 Keyboard), this is not sufficient to conform to this Success Criterion. That is because some users rely entirely on pointing devices, or find simple pointer inputs much easier than alternatives. For example, a user relying on a head-pointer would find clicking a control to be much more convenient than activating an on-screen keyboard to emulate a keyboard shortcut, and a person who has difficulty memorizing a series of keys (or gestures) may find it much easier to simply click on a labeled control. Therefore, if one or more pointer-based mechanisms are supported, then their benefits should be afforded to users through simple, single-point actions alone.</p>
+
+			<p>This Success Criterion does not require all functionality to be available through pointing devices, but if it is available to pointer devices then it should not require path-based gestures. While content authors generally need to provide keyboard commands or other non-pointer mechanisms that perform actions equivalent to complex gestures (see Success Criterion 2.1.1 Keyboard), this is not sufficient to conform to this Success Criterion. That is because some users rely entirely on pointing devices, or find simple pointer inputs much easier to perform and understand than alternatives. For example, a user relying on a head-pointer would find clicking a control to be much more convenient than activating an on-screen keyboard to emulate a keyboard shortcut, and a person who has difficulty memorizing a series of keys (or gestures) may find it much easier to simply click on a labeled control. Therefore, if one or more pointer-based mechanisms are supported, then their benefits should be afforded to users through simple, single-point actions alone.</p>
+
+			<p>Single pointer operations include taps and clicks, double-taps and double-clicks, long presses, swiping, dragging, and path-based gestures. Gestures such as "pinch to zoom" or two-finger swipes are <em>multipoint</em> gestures, as they require two or more pointer inputs - in this case, two fingers on a touchscreen.</p>
 
 			<p>An exception is made for functionality that is inherently and necessarily based on complex paths or multipoint gestures. For example, entering your signature may be inherently path-based (although acknowledging something or confirming your identity need not be).</p>
 
-			<p>Gestures that involve dragging in any direction are not in scope for this SC because only the start and end points matter in a dragging operation. However, such gestures do require fine motor control. Authors are encouraged to provide non-dragging methods, for instance, a drag and drop operation could also be achieved by selecting an item (with a tap or keyboard interaction) and then selecting its destination as a second step.</p>
-      
-			<section id="benefits">
-				<h3>Benefits</h3>
-				<ul>
-					<li><p>Users who cannot (accurately) perform complex pointer gestures will have alternative means for operating the content.</p></li>
-          <li><p>The availability of user interface elements provided as a fallback for complex gestures helps users who may often be unaware of the support for complex pointer gestures. This can be especially beneficial for users with cognitive or learning disabilities.</p></li>
-				</ul>
-			</section>
+			<p>This Success Criterion <em>does not apply</em> to gestures that involve dragging in any direction because only the start and end points matter in a dragging operation. However, such gestures do require fine motor control. Authors are encouraged to provide non-dragging methods, for instance, a drag and drop operation could also be achieved by selecting an item (with a tap or keyboard interaction) and then selecting its destination as a second step.</p>
+		</section>
+		<section id="benefits">
+			<h2>Benefits</h2>
+			<ul>
+				<li><p>Users who cannot (accurately) perform path-based pointer gestures - on a touchscreen, or with a mouse - will have alternative means for operating the content.</p></li>
+				<li><p>Users who cannot perform multi-pointer gestures on a touchscreen (for instance, because they are operating the touchscreen with an alternative input such as a head pointer) will have a single-pointer alternative for operating the content.</p></li>
+				<li><p>Users who may not understand the custom gesture interaction intended by the author will be able to rely on simple, frequently used gestures to interact. This can be especially beneficial for users with cognitive or learning disabilities.</p></li>
+			</ul>
 		</section>
 		<section id="examples">
 			<h2>Examples</h2>
-				<ul>
-        <li><p>A web site includes a map view that supports the pinch gesture to zoom into the map content. User interface controls offer the operation using plus and minus buttons to zoom in and out.</p></li>
-        <li><p>A news site has a horizontal content slider with hidden news teasers that can moved into the viewport via horizontal swiping. It also offers forward and backward arrow buttons for single-point activation to navigate to adjacent slider content.</p></li>
+			<ul>
+        		<li><p>A web site includes a map view that supports the pinch gesture to zoom into the map content. User interface controls offer the operation using plus and minus buttons to zoom in and out.</p></li>
+				<li><p>A web site includes a map view that supports the pinch gesture to zoom into the map content. As an single-pointer alternative, the map also allows users to double-tap, hold, and then move the pointer up or down to zoom in or out.</p></li>
+        		<li><p>A news site has a horizontal content slider with hidden news teasers that can moved into the viewport via a fast horizontal swipe/flicking motion. It also offers forward and backward arrow buttons for single-point activation to navigate to adjacent slider content.</p></li>
 				<li><p>A kanban widget with several vertical areas representing states in a defined process allows the user to right- or left-swipe elements to move them to an adjacent silo. The user can also accomplish this by selecting the element with a single tap or click, and then activating an arrow button to move the selected element.</p></li>
 				<li><p>A custom slider requires movement in a strict left/right direction when operated by dragging the thumb control. Buttons on both sides of the slider increment and decrement the selected value and update the thumb position.</p></li>
-      </ul>
+      		</ul>
 		</section>
 		<section id="resources">
 			<h2>Resources</h2>
@@ -80,7 +104,7 @@ <h3>Sufficient</h3>
 					<li><a href="../../techniques/general/G216">G216</a></li>
 				</ul>
 			</section>
-		
+
 			<section id="advisory">
 				<h2>Advisory</h2>
 			</section>
diff --git a/understanding/21/reflow.html b/understanding/21/reflow.html
index dfc22ad5b4..a03d1f481f 100644
--- a/understanding/21/reflow.html
+++ b/understanding/21/reflow.html
@@ -1,85 +1,100 @@
 <!DOCTYPE html>
 <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
 <head>
-		<meta charset="UTF-8" />
+		<meta charset="UTF-8"/>
     <title>Understanding Reflow</title>
-    <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove" />
+    <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/>
 
 </head>
 <body>
     <h1>Understanding Reflow</h1>
+
+    <section id="brief">
+			<h2>In brief</h2>
+			<dl>
+				<dt>Goal</dt><dd>Content can be enlarged without increasing line length.</dd>
+				<dt>What to do</dt><dd>Make lines of text reflow within the viewport.</dd>
+        <dt>Why it's important</dt><dd>People who need bigger text find it difficult if they must scroll to read long lines.</dd>
+			</dl>
+
+		</section>
     <section id="intent">
         <h2>Intent of this Success Criterion</h2>
         <p>The intent of this Success Criterion is to support people with low vision who need to enlarge text and read it in a single column.  When the browser zoom is used to scale content to 400%, it reflows - i.e., it is presented in one column so that scrolling in more than one direction is not necessary.</p>
-      <p>For people with low vision, enlarged text with reflow enables reading. It is critical. Enlargement enables perception of characters. Reflow enables tracking. Tracking is following along lines of text, including getting from the end of one line to the beginning of the next line.</p>
+      <p>For people with low vision, both enlarging and reflowing text are critical to reading. Enlarging text enables the perception of characters. Reflowing text enables users to track from the end of one line to the beginning of the next line.</p>
       <p>Avoiding the need to scroll in the direction of reading in order to reveal lines that are cut off by the viewport is important, because such scrolling significantly increases the effort required to read. It is also important that content is not hidden off-screen. For example, zooming into a vertically scrolling page should not cause content to be hidden to one side.</p>
-    	<section>
+      <section>
       <h3>How reflow works</h3>
-     <p>User agents for technologies such as HTML/CSS, PDF, and ePub have methods for reflowing content to fit the width of the window (viewport). When appropriately authored, page content can reflow (wrap) to stay within the window's boundaries (viewport) when users zoom in to enlarge the size of content. Spatial relationships of content may change when users zoom, but all information and functionality should continue to be available.</p>
+      <p>User agents for technologies such as HTML/CSS, PDF, and ePub have methods for reflowing content to fit the width of the window (viewport). When appropriately authored, page content can reflow (wrap) to stay within the window's boundaries (viewport) when users zoom in to enlarge the size of content. Spatial relationships of content may change when users zoom, but all information and functionality should continue to be available.</p>
       <p>Supporting the reflow of content is also known as 'Responsive Web Design'. It is enabled by CSS media queries which reformat the web content for different viewport widths (at particular break points) in order to provide optimised layouts for mobile devices such as tablets or smartphones. Importantly, these breakpoints are not only triggered by narrower viewports, but also when users employ the browser zoom function to zoom into the page.</p>
       <p>In a desktop browser at 100% (default) scale, typical web pages that support reflow display content in two, three or more columns. Zooming in will at some point trigger a change of layout, so content will now be displayed in fewer columns. At a higher magnification scale of 200% or more, content will usually be rendered in a single column. Parts of content that were in the marginal columns, like a navigation menu or supplementary content, will now typically appear on top of or below the main content.</p>
-    	</section>
-    	<section>
+      </section>
+      <section>
       <h3>Viewing distance and display resolution</h3>
-        <p>The value of 320 CSS pixels was chosen as a reasonable minimum size that authors can achieve. This value lines up with the reported viewport width of small displays of common mobile devices. The width of 320 CSS pixels exactly corresponds to a desktop browser window set to a width of 1280px and zoomed in to 400%. It should be noted that 400% applies to the dimension, not the area. It means four times the default width and four times the default height.</p> 
-      <figure id="figure-CSS-pixel-letter-4x"><img src="img/css-pixel-by-device.png" width="462" height="198" alt="Diagram showing the size of character needed by viewing distance to make the same image on the retina with small screen devices close, large screen devices further away." />
+        <p>The value of 320 CSS pixels was chosen as a reasonable minimum size that authors can achieve. This value lines up with the reported viewport width of small displays of common mobile devices. The width of 320 CSS pixels exactly corresponds to a desktop browser window set to a width of 1280px and zoomed in to 400%. It should be noted that 400% applies to the dimension, not the area. It means four times the default width and four times the default height.</p>
+      <figure id="figure-CSS-pixel-letter-4x"><img src="img/css-pixel-by-device.png" width="462" height="198" alt="Diagram showing the size of character needed by viewing distance to make the same image on the retina with small screen devices close, large screen devices further away."/>
         <figcaption>A letter of the same CSS pixel size on different displays with different resolutions</figcaption>
       </figure>
         <p>When we read, the size of the print is not as important as the image it projects on the retina of our eye. Phones are designed for close viewing while desktops are designed for viewing farther away. As a consequence 16px print on a phone is physically smaller than 16px print on a desktop. This is not a problem because both print sizes cast the same image on our retina if they are viewed at their intended distance.</p>
-    	</section>
-    	<section>
+      </section>
+      <section>
       <h3>Visibility and availability of content</h3> 
       <p>How much of the content is visible may change at different scales. For example, navigation menus that are fully visible in the desktop layout are often collapsed into fewer items, or even into a single menu button (the 'hamburger' icon pattern) so they take up less screen space.</p>
       <p>The Success Criterion is met as long as all content and functionality are still fully available -  either directly, or revealed via accessible controls, or accessible via direct links.</p>
-    	</section>
-    	<section>
+      </section>
+      <section>
 
       <h3>Content exceptions for reflow</h3>
-      <p>Content which requires two-dimensional layout for usage or meaning cannot reflow without losing meaning, and is therefore out of scope of this Success Criterion. For example, graphics and video are by their nature two-dimensional. Cutting up an image and stacking the blocks would render the content unusable so that is out of scope. However, it is possible to have these elements stay within the bounds of viewport at zoom levels to 400% (see advisory techniques).</p>
-      <p>Complex data tables have a two-dimensional relationship between the headings and data cells. This relationship is essential to convey the content. This Success Criterion therefore does not apply to whole data tables. However, cells within data tables should fit within the size requirement unless the cell contains types of content that also requires two-dimensional layout for usage or meaning.</p>
-      <p>Interfaces which provide toolbars to edit content need to show both the content and the toolbar in the viewport. Depending on the number of toolbar buttons, the toolbar may need to scroll in the direction of text (e.g., horizontally in a vertically scrolling page). This Success Criterion therefore does not apply to interfaces which provide toolbars.</p>
-    	</section>
-    	<section>
+      <p>Content which requires two-dimensional layout for usage or meaning cannot reflow without loss of meaning, and is therefore excepted from the need to be presented without two-dimensional scrolling. For example, graphics and video are by their nature two-dimensional. Cutting up an image and stacking the blocks would render the content unusable. However, it <em>is</em> possible to have these elements stay within the bounds of viewport even as other content zooms to 400% (see advisory techniques).</p>
+      <p>Data tables have a two-dimensional relationship between the headings and data cells. This relationship is essential to convey the content. This Success Criterion therefore exempts data tables from needing to display without scrolling in the direction of text (e.g., horizontally in a vertically scrolling page). However, cells within data tables are not excepted unless the cell contains types of content that also requires two-dimensional layout for usage or meaning.</p>
+      <p>Interfaces which provide toolbars to edit content need to show both the content and the toolbar in the viewport. Depending on the number of toolbar buttons, the toolbar may need to scroll in the direction of text.</p>
+      </section>
+      <section>
       <h3>Responsive web design and other ways to meet this Success Criterion</h3>
       <p>Using the responsive web design approach is the most effective method of achieving the goal of allowing people to zoom in to 400%. Each variation (CSS break point) of the page at the same URL should conform (compare <a href="https://www.w3.org/TR/WCAG21/#h-note-27">Conformance for WCAG 2.1</a>).</p>
       <p>For organisations which are using legacy systems or are not able to update their layout methods for some reason, an alternative conforming version could be a mobile site which has a fixed 320px wide layout. The user should be able to find that version from the default website.</p>
-    	</section>
-    	<section>
- <h3>Avoiding scrolling in horizontally and vertically written languages</h3>
-        <p>The success Criterion applies to both horizontally and verticaly written languages. Zooming the page for horizontally written languages where pages scroll vertically by default (e.g. English) should not require horizontal scrolling. Zooming the page for vertically written languages which scroll horizontally by default should not require vertical scrolling.</p>
-    	</section>
+      </section>
       <section>
- <h3>The relation of Reflow to the Success Criterion 1.4.4 Resize Text</h3>
-        <p>The focus of the Reflow Success Criterion is to enable users to zoom in without having to scroll in two directions. <a href="resize-text" class="sc">Success Criterion 1.4.4 Resize Text</a> also applies, so it should be possible to increase the size of all text to at least 200% while simultaneously meeting the reflow requirement. For most implementations, the text is expected to continue to enlarge as the magnification increases, so that users can magnify text up to (and beyond) 400%. In an implementation where text does not consistently increase its size as people zoom in (such as when it is tranformed based on a media query to adapt to small-screen usage), it must still be possible to get to 200% enlargement in order to satisfy the Resize Text criterion.</p>
-        <p>For example, if at the default browser setting of 100% zoom, text is set at 20px when the window is 1280px wide, the same 20px at 200% zoom would mean a text size of 200%. At 400% zoom, the author may decide to set the text size to 10px: the text would now still be enlarged to 200% compared to the default browser setting of 100% zoom. It is not required to achieve 200% text enlargement at every breakpoint, but it should be possible to get 200% text enlargement in some way.</p>
+        <h3>Avoiding scrolling in horizontally and vertically written languages</h3>
+        <p>The success Criterion applies to both horizontally and vertically written languages. Zooming the page for horizontally written languages where pages scroll vertically by default (e.g. English) should not require horizontal scrolling. Zooming the page for vertically written languages which scroll horizontally by default should not require vertical scrolling.</p>
       </section>
-             <section>
+      <section>
+        <h3>The relation of Reflow to the Success Criterion 1.4.4 Resize Text</h3>
+        <p>The focus of the Reflow Success Criterion is to enable users to zoom in without having to scroll in two directions. <a href="resize-text" class="sc">Success Criterion 1.4.4 Resize Text</a> also applies, so it should be possible to increase the size of all text up to 200% while simultaneously meeting the reflow requirement. For most implementations, the text is expected to continue to enlarge as the magnification increases, so that users can magnify text up to (and beyond) 400%. In an implementation where text does not consistently increase its size as people zoom in (such as when it is transformed based on a media query to adapt to small-screen usage), it must still be possible to get to 200% enlargement in order to satisfy the Resize Text criterion.</p>
+        <p>For example, if at the default browser setting of 100% zoom, text is set at 20px when the window is 1280 CSS pixels wide, at 200% zoom it will visually appear at twice the size. After zooming by 400% the page reflows to fit within the 320 CSS pixel viewport, the author may decide to set the page's text size to 10px. The text is now half the original size in CSS pixels, but as it has been enlarged to 400%, it is still displayed at twice the size compared to the default browser setting at 100% zoom. It is not required to achieve 200% text enlargement while remaining inside a specific breakpoint (as zooming may result in the variation for a new breakpoint becoming active), but it should still be possible to get 200% text enlargement in some way compared to the default 100% zoom.</p>
+      </section>
+      <section>
       <h3>Browsers on mobile operating systems</h3>
       <p>Most browsers on mobile operating systems do not combine reflow and zoom in the same way as on desktop browsers. These mobile browsers normally support reflow when changing the orientation of the device -- content will be adjusted to the new viewport width. However, these mobile browsers can only magnify content to achieve 1.4.4. Resize Text in manners which do not constrain reflow to a single dimension, for example by using a pinch gesture to scale up content or a double tap on a particular column to make it fill the viewport width. This means that zoomed content in most mobile browsers involves two-dimensional scrolling regardless of what an author does.</p>
       <p>Mobile user agents <em>can</em> offer reflow when users zoom into content, as evidenced by the Dolphin browser for Android. The lack of magnified reflow support in browsers on mobile operating systems can therefore be regarded as a user agent support issue.</p>
-       </section>
+      </section>
     </section>
-  
+
     <section id="benefits">
-        <h3>Specific Benefits of Success Criterion 1.4.10</h3>
+        <h2>Benefits</h2>
         <ul>
-            <li><strong>One column view in responsive design</strong><br />A site uses responsive design. When a person zooms in to over 300%, the layout is reflowed to one column. The user can read the content easily and does not have to scroll sideways to read.</li>
-              <li><strong>PDF offering reflow</strong><br />In a PDF created to conform to PDF/Universal Accessibility (ISO 14289), the content can be reflowed and zoomed in to make reading possible for someone with low-vision.</li>
+          <li>This Success Criterion helps people with low vision who require text enlargement by enabling them to read the content seamlessly, eliminating the necessity to scroll in multiple directions.</li>
         </ul>
     </section>
- 
+
     <section id="examples">
           <h2>Examples</h2>
-          <section class="example">
-            <h3>Example 1: Responsive Design</h3>
-            <p><video controls="controls"><source src="https://alastairc.uk/w3c/reflow-example-1-BBC.mp4" type="video/mp4" /><source src="https://alastairc.uk/w3c/reflow-example-1-BBC.ogv" type="video/ogg" />Animation of zooming in on a responsive site. The content reflows to fit the screen.</video></p>
-            <p>Note that as the zoom percentage increases, the navigation changes first to hide options behind a &quot;More&quot; dropdown menu. As zooming continues, most navigation options are eventually behind a &quot;hamburger&quot; menu button. All the information and functionality is still available from this web page. There is no horizontal scrolling.</p>
-        </section>
+          <ul>
+            <li>
+              <strong>One column view in responsive design</strong>
+              <p><video controls="controls"><source src="https://alastairc.uk/w3c/reflow-example-1-BBC.mp4" type="video/mp4" /><source src="https://alastairc.uk/w3c/reflow-example-1-BBC.ogv" type="video/ogg" />Animation of zooming in on a responsive site. The content reflows to fit the screen.</video></p>
+              <p>Note that as the zoom percentage increases, the navigation changes first to hide options behind a &quot;More&quot; dropdown menu. As zooming continues, most navigation options are eventually behind a &quot;hamburger&quot; menu button. All the information and functionality is still available from this web page. There is no horizontal scrolling.</p>
+            </li>
+            <li>
+              <strong>PDF offering reflow</strong>
+              <p>In a PDF created to conform to PDF/Universal Accessibility (ISO 14289), the content can be reflowed and zoomed in to make reading possible for someone with low-vision.</p>
+            </li>
+          </ul>
 </section>
 <section id="resources">
     <h2>Resources </h2>
     <ul>
-      <li><a href="http://nosetothepage.org/Fitz/2dScroll.html">Operational Overhead Caused by Horizontal Scrolling Text</a> by Wayne Dick, 2017. The study shows the impact of horizontal scrolling on reading effort</li>
+      <li><a href="http://web.archive.org/web/20220121073555/http://nosetothepage.org/Fitz/2dScroll.html">Operational Overhead Caused by Horizontal Scrolling Text</a> by Wayne Dick, 2017. The study shows the impact of horizontal scrolling on reading effort</li>
         <li><a href="https://www.w3.org/TR/low-vision-needs/">Accessibility Requirements for People with Low Vision</a>. W3C First Public Working Draft 17 March 2016</li>
         <li><a href="https://developer.mozilla.org/en-US/Apps/Progressive/Responsive">Responsive design resources</a> from MDN Web docs</li>
         <li><a href="https://developers.google.com/web/fundamentals/design-and-ux/responsive/">Responsive web design basics</a> tutorial from Google</li>
@@ -96,24 +111,23 @@ <h3>Sufficient Techniques</h3>
             <li><a href="../../techniques/css/C38">C38</a></li>
             <li><a href="../../techniques/client-side-script/SCR34" class="script">SCR34</a></li>
             <li><a href="../../techniques/general/G206" class="general">G206</a></li>
-            <li>@@ New: Using PDF/UA when creating PDFs.</li>
+            <li>Using PDF/UA when creating PDFs (Potential future technique)</li>
         </ul>
     </section>
     <section id="advisory">
         <h2>Advisory Techniques</h2>
-       <ul>
-         <li><a href="../../techniques/css/C34">C34</a></li>
-         <li><a href="../../techniques/CSS/C37">CSS, Fitting images to the viewport;</a></li>
-         <li>@@ CSS, Reflowing simple data tables.</li>
-         <li>@@ CSS, Fitting data cells within the width of the viewport.</li>
-         <li>@@ Mechanism to allow mobile view at any time</li>
-         </ul>
-         
+        <ul>
+          <li><a href="../../techniques/css/C34">C34</a></li>
+          <li><a href="../../techniques/CSS/C37">CSS, Fitting images to the viewport;</a></li>
+          <li>CSS, Reflowing simple data tables (Potential future technique)</li>
+          <li>CSS, Fitting data cells within the width of the viewport (Potential future technique)</li>
+          <li>Mechanism to allow mobile view at any time (Potential future technique)</li>
+        </ul>
     </section>
     <section id="failure">
         <h2>Failures</h2>
         <ul>
-            <li><a href="https://www.w3.org/WAI/WCAG21/Techniques/failures/F102" class="failure">Failure of Success Criterion 1.4.10 due to content disappearing and not being available when content has reflowed</a></li>
+            <li><a href="../Techniques/failures/F102" class="failure">Failure of Success Criterion 1.4.10 due to content disappearing and not being available when content has reflowed</a></li>
         </ul>
     </section>
 </section><!-- end techniques -->
diff --git a/understanding/21/seizures-and-physical-reactions.html b/understanding/21/seizures-and-physical-reactions.html
index 6f51f279d9..431eb6ed2f 100644
--- a/understanding/21/seizures-and-physical-reactions.html
+++ b/understanding/21/seizures-and-physical-reactions.html
@@ -1,8 +1,8 @@
 <!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
 <head xmlns:wcag="https://www.w3.org/WAI/GL/">
-   <meta charset="UTF-8" />
+   <meta charset="UTF-8"/>
    <title>Understanding Seizures</title>
-   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link>
+   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/>
 </head>
 <body xmlns:wcag="https://www.w3.org/WAI/GL/">
    <h1>Understanding Seizures</h1>
diff --git a/understanding/21/status-messages.html b/understanding/21/status-messages.html
index fafd4a879a..f202bbd64e 100644
--- a/understanding/21/status-messages.html
+++ b/understanding/21/status-messages.html
@@ -1,49 +1,60 @@
 <!DOCTYPE html>
 <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
 	<head>
-		<meta charset="UTF-8" />
+		<meta charset="UTF-8"/>
 		<title>WCAG 2.0 Understanding Page</title>
-		<link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove" />
+		<link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/>
 	</head>
 	<body>
-		<h1>Status Messages<br />
+		<h1>Status Messages<br/>
 		Understanding SC 3.2.6</h1>
+
+	<section id="brief">
+		<h2>In brief</h2>
+		<dl>
+			<dt>Goal</dt><dd>Make users aware of important changes in content.</dd>
+			<dt>What to do</dt><dd>Let assistive technology notify users about status changes that don't take focus.</dd>
+			<dt>Why it's important</dt><dd>People who do not see messages need to be informed about them.</dd>
+		</dl>
+  
+	</section>
+    
 		<section id="intent">
 			<h2>Intent of this Success Criterion</h2>
 			<p>The intent of this Success Criterion is to make users aware of important changes in content that are not given focus, and to do so in a way that doesn't unnecessarily interrupt their work.</p>
 			<p>The intended beneficiaries are blind and low vision users of assistive technologies with screen reader capabilities. An additional benefit is that assistive technologies for users with cognitive disabilities may achieve an alternative means of indicating (or even delaying or supressing) status messages, as preferred by the user.</p>
 <p>The scope of this Success Criterion is specific to changes in content that involve status messages. A <a>status message</a> is a defined term in WCAG. There are two main criteria that determine whether something meets the definition of a status message:</p>
-	<ol>
+	<ul>
 		<li> the message <q>provides information to the user on the success or results of an action, on the waiting state of an application, on the progress of a process, or on the existence of errors;</q></li>
 		<li> the message is not delivered via a change in context.</li>
-	</ol>
+	</ul>
 <p>Information can be added to pages which does not meet the definition of a status message. For example, the list of results obtained from a search are not considered a status update and thus are not covered by this Success Criterion. However, brief text messages displayed <em>about</em> the completion or status of the search, such as "Searching...", "18 results returned" or "No results returned" would be status updates if they do not take focus. Examples of status messages are given in the section titled <a href="#status-examples">Status Message Examples</a> below.</p>
 
 <p>This Success Criterion specifically addresses scenarios where new content is added to the page without changing the user's context. <a>Changes of context</a>, by their nature, interrupt the user by taking focus. They are already surfaced by assistive technologies, and so have already met the goal to alert the user to new content. As such, messages that involve changes of context do not need to be considered and are not within the scope of this Success Criterion. Examples of scenarios that add new content by changing the context are given in the section titled <a href="#excepted-examples">Examples of Changes That Are Not Status Messages</a> below.</p>
-			
-  <section id="benefits">
-				<h3>Benefits</h3>
+		</section>
+		<section id="benefits">
+			<h2>Benefits</h2>
 			<ul>
-					<li>When appropriate roles or properties are assigned to status messages, the new content is spoken by screen readers in such a way as to assist blind and low vision users. Most sighted users can observe text peripherally added to the viewport. Such content provides additional information without affecting the user's current point of regard. The ability of an assistive technology to announce such new important text content allows more users to benefit from an awareness of the information in an equivalent manner.</li>
-			<li>Assigning proper roles or properties to status messages provides possible future uses and personalization opportunities, such as the potential to be exploited by assistive technologies created for users with some cognitive disabilities. Where page authors elect to design additions to the screen which do <em>not</em> change the user's context (i.e., take focus), the information is arguably of less importance than something presented using a modal dialog, which must be acknowledged by the user. As such, depending on the user's preferences, an assistive technology may choose to delay, suppress, or transform such messages so a user is not unnecessarily interrupted; or conversely the assistive technology may highlight such messages where the user finds it optimal to do so.</li>
-</ul>
-			</section>
+				<li>When appropriate roles or properties are assigned to status messages, the new content is spoken by screen readers in such a way as to assist blind and low vision users. Most sighted users can observe text peripherally added to the viewport. Such content provides additional information without affecting the user's current point of regard. The ability of an assistive technology to announce such new important text content allows more users to benefit from an awareness of the information in an equivalent manner.</li>
+				<li>Assigning proper roles or properties to status messages provides possible future uses and personalization opportunities, such as the potential to be exploited by assistive technologies created for users with some cognitive disabilities. Where page authors elect to design additions to the screen which do <em>not</em> change the user's context (i.e., take focus), the information is arguably of less importance than something presented using a modal dialog, which must be acknowledged by the user. As such, depending on the user's preferences, an assistive technology may choose to delay, suppress, or transform such messages so a user is not unnecessarily interrupted; or conversely the assistive technology may highlight such messages where the user finds it optimal to do so.</li>
+			</ul>
 		</section>
 		<section id="examples">
 			<h2>Examples of Success Criterion 3.2.6</h2>
 			
 			<section class="example" id="status-examples">
 				<h3>Status Message Examples</h3>
-			<ol>
-				<li>After a user presses a Search button, the page content is updated to include the results of the search, which are displayed in a section below the Search button. The change to content also includes the message "5 results returned" near the top of this new content. This text is given an appropriate role for a status message. A screen reader announces, "Five results returned".</li>
-				<li>After a user presses an Add to Shopping Cart button, a section of content near the Shopping Cart icon adds the text "5 items". A screen reader announces "Five items" or "Shopping cart, five items".</li>
-				<li>After a user enters incorrect text in an input called Postal Code, a message appears above the input reading "Invalid entry".  The screen reader announces, "Invalid entry" or "Postal code, invalid entry".</li>
-				<li>After a user activates a process, an icon symbolizing 'busy'  appears on the screen. The screen reader announces "application busy". </li>
-				<li>An application displays a progressbar to indicate the status of an upgrade. The element is assigned a suitable role. The screen reader provides intermittent announcements of the progress. </li>
-		        <li>After a user submits a form, text is added to the existing form which reads, "Your form was successfully submitted." The screen reader announces the same message.</li> 
-		        <li>After a user unsuccessfully fills in a form because some of the data is in the incorrect format, text is added to the existing form which reads "5 errors on page". The screen reader announces the same message.</li>
-		        <li>After a user puts a photo in an album in an online photo app, a <a href="https://material.io/design/components/snackbars.html#">snackbar </a> displays the message "Saved in 'Wedding' album", which is also read by a screen reader.</li>
-			</ol>
+
+				<ul>
+					<li>After a user presses a Search button, the page content is updated to include the results of the search, which are displayed in a section below the Search button. The change to content also includes the message "5 results returned" near the top of this new content. This text is given an appropriate role for a status message. A screen reader announces, "Five results returned".</li>
+					<li>After a user presses an Add to Shopping Cart button, a section of content near the Shopping Cart icon adds the text "5 items". A screen reader announces "Five items" or "Shopping cart, five items".</li>
+					<li>After a user enters incorrect text in an input called Postal Code, a message appears above the input reading "Invalid entry".  The screen reader announces, "Invalid entry" or "Postal code, invalid entry".</li>
+					<li>After a user activates a process, an icon symbolizing 'busy'  appears on the screen. The screen reader announces "application busy". </li>
+					<li>An application displays a progressbar to indicate the status of an upgrade. The element is assigned a suitable role. The screen reader provides intermittent announcements of the progress. </li>
+					<li>After a user submits a form, text is added to the existing form which reads, "Your form was successfully submitted." The screen reader announces the same message.</li> 
+					<li>After a user unsuccessfully fills in a form because some of the data is in the incorrect format, text is added to the existing form which reads "5 errors on page". The screen reader announces the same message.</li>
+					<li>After a user puts a photo in an album in an online photo app, a <a href="https://material.io/design/components/snackbars.html#">snackbar </a> displays the message "Saved in 'Wedding' album", which is also read by a screen reader.</li>
+				</ul>
 			</section>
 			<section class="example">
 				<h3>Examples of Status Messages that Do Not Add New Text to the Screen</h3>
@@ -114,9 +125,9 @@ <h3>Sufficient</h3>
 
 					<h4>Situation A: If a status message advises on the success or results of an action, or the state of an application:</h4>
 					<ul>
-						<li><a href="https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA22" class="aria">ARIA22: Using <code>role="status"</code> to surface messages</a> in combination with any of the following:
+						<li><a href="../Techniques/aria/ARIA22" class="aria">ARIA22: Using <code>role="status"</code> to surface messages</a> in combination with any of the following:
 							<ul>
-								<li><a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G199" class="general">G199: Providing success feedback when data is submitted successfully</a></li>
+								<li><a href="../Techniques/general/G199" class="general">G199: Providing success feedback when data is submitted successfully</a></li>
 							</ul>
 							
 						</li>
@@ -127,14 +138,14 @@ <h4>Situation A: If a status message advises on the success or results of an act
 
 					<h4>Situation B: If a status message conveys a suggestion, or a warning on the existence of an error:</h4>
 					<ul>
-						<li><a href="https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA19" class="aria">ARIA19: Using ARIA role=alert or Live Regions to Identify Errors</a> in combination with any of the following:
+						<li><a href="../Techniques/aria/ARIA19" class="aria">ARIA19: Using ARIA role=alert or Live Regions to Identify Errors</a> in combination with any of the following:
 							<ul>
 								
-								<li><a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G83" class="general">G83: Providing text descriptions to identify required fields that were not completed</a></li>
-								<li><a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G84" class="general">G84: Providing a text description when the user provides information that is not in the list of allowed values</a></li>
-								<li><a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G85" class="general">G85: Providing a text description when user input falls outside the required format or values</a></li>
-								<li><a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G177" class="general">G177: Providing suggested correction text</a></li>
-								<li><a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G194" class="general">G194: Providing spell checking and suggestions for text input</a></li>
+								<li><a href="../Techniques/general/G83" class="general">G83: Providing text descriptions to identify required fields that were not completed</a></li>
+								<li><a href="../Techniques/general/G84" class="general">G84: Providing a text description when the user provides information that is not in the list of allowed values</a></li>
+								<li><a href="../Techniques/general/G85" class="general">G85: Providing a text description when user input falls outside the required format or values</a></li>
+								<li><a href="../Techniques/general/G177" class="general">G177: Providing suggested correction text</a></li>
+								<li><a href="../Techniques/general/G194" class="general">G194: Providing spell checking and suggestions for text input</a></li>
 								
 							</ul>
 						</li>
@@ -150,7 +161,7 @@ <h4>Situation C: If a status message conveys information on the progress of a pr
 					
 						<li><a href="../../techniques/aria/ARIA23" class="aria">Using <code>role="log"</code> to improve AT support</a></li>
 						<li>Using <code>role="progressbar"</code> (future link)</li>
-						<li><a href="https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA22" class="aria">ARIA22: Using <code>role="status"</code> to surface messages</a> in combination with <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G193" class="general">G193: Providing help by an assistant in the Web page</a></li>
+						<li><a href="../Techniques/aria/ARIA22" class="aria">ARIA22: Using <code>role="status"</code> to surface messages</a> in combination with <a href="../Techniques/general/G193" class="general">G193: Providing help by an assistant in the Web page</a></li>
 					</ul>
 				</section>
 			</section>
@@ -158,18 +169,18 @@ <h4>Situation C: If a status message conveys information on the progress of a pr
 				<h3>Advisory</h3>
 				<ul>
 		<li>Using aria-live regions with chat clients (future link)</li>
-		<li>Using aria-live regions to support <a href="https://www.w3.org/WAI/WCAG21/Understanding/content-on-hover-or-focus.html">1.4.13 Content on Hover or Focus</a> (future link)</li>
+		<li>Using aria-live regions to support <a href="content-on-hover-or-focus">1.4.13 Content on Hover or Focus</a> (future link)</li>
 		<li>Using <code>role="marquee"</code> (future link)</li>
 		<li>Using <code>role="timer"</code> (future link)</li>
-					<li>Where appropriate, moving focus to new content with <a href="https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA18" class="aria">ARIA18: Using <code>aria-alertdialog</code> to Identify Errors</a></li>
-					<li>Supporting personalization with <a href="https://www.w3.org/WAI/WCAG21/Techniques/client-side-script/SCR14" class="script">SCR14: Using scripts to make nonessential alerts optional</a></li>	
+					<li>Where appropriate, moving focus to new content with <a href="../Techniques/aria/ARIA18" class="aria">ARIA18: Using <code>aria-alertdialog</code> to Identify Errors</a></li>
+					<li>Supporting personalization with <a href="../Techniques/client-side-script/SCR14" class="script">SCR14: Using scripts to make nonessential alerts optional</a></li>	
 	</ul>
 
 			</section>
 			<section id="failure">
 				<h3>Failure</h3>
 				<ul>
-						<li><a href="https://www.w3.org/WAI/WCAG21/Techniques/failures/F103" class="failure">F103</a></li>
+						<li><a href="../Techniques/failures/F103" class="failure">F103</a></li>
 				<li>Using <code>role="alert"</code> or <code>aria-live="assertive"</code> on content which is not important and time-sensitive (future link)</li>
 			</ul>
 			</section>
diff --git a/understanding/21/target-size-enhanced.html b/understanding/21/target-size-enhanced.html
index ed21922b21..6690225d7c 100644
--- a/understanding/21/target-size-enhanced.html
+++ b/understanding/21/target-size-enhanced.html
@@ -1,84 +1,110 @@
 <!DOCTYPE html>
 <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
 	<head>
-		<meta charset="UTF-8" />
-		<title>WCAG 2.0 Understanding Page</title>
-		<link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove" />
+		<meta charset="UTF-8"/>
+		<title>Understanding Target Size (Enhanced)</title>
+		<link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
 	</head>
 	<body>
-		<h1>Understanding SC 2.5.4 Target Size (Enhanced)</h1>
-	<section id="intent">
-		<h2>Intent</h2>
-		<p>The intent of this success criterion is to help users who may have trouble activating a small target because of hand tremors, limited dexterity or other reasons. If the target is too small, it may be difficult to aim at the target. Mice and similar pointing devices can be hard to use for these users, and a larger target will help them greatly in having positive outcomes on the web page.</p>
-			<p>Touch is particularly problematic as it is an input mechanism with coarse precision. Users lack the same level of fine control as on inputs such as a mouse or stylus. A finger is larger than a mouse pointer, and generally obstructs the user's view of the precise location on the screen that is being touched/activated.</p>
-			<p>The issue can be further complicated on for responsive/mobile which need to accommodate different types of fine and coarse inputs (e.g. a site that can be accessed both on a traditional desktop/laptop with a mouse, as well as on a tablet or mobile phone with a touch screen).</p>
-			<p>While this criterion defines a minimum target size, it is recommended that larger sizes are used to reduce the possibility of unintentional actions. This is particularly relevant if any of the following are true:</p>
-	  <ul>
-			  <li>the control is used frequently;</li>
-			  <li>the result of the interaction cannot be easily undone;</li>
-			  <li>the control is positioned where it will be difficult to reach, or is near the edge of the screen;</li>
-			  <li>the control is part of a sequential task.</li>
-	  </ul>
-		<section id="benefits">
-			<h3>Benefits</h3>
-			<ul>
-			  <li>Users who use a mobile device where touch screen is the primary mode of interaction</li>
-			  <li>Users with mobility impairments, such as hand tremors</li>
-			  <li>Users who find fine motor movements difficult</li>
-			  <li>Users who access a device using one hand</li>
-			  <li>Users with large fingers, or who are operating the device with only a part of their finger or knuckle</li>
-			  <li>Users who have low vision may better see the target</li>
-		  </ul>
-		</section>
+		<h1>Understanding SC 2.5.5 Target Size (Enhanced)</h1>
+  	<section id="brief">
+  		<h2>In brief</h2>
+  		<dl>
+  			<dt>Goal</dt><dd>Controls can be operated more easily, especially on touch screens.</dd>
+  			<dt>What to do</dt><dd>Make custom targets at least 44 by 44 pixels.</dd>
+  			<dt>Why it's important</dt><dd>Some people cannot tap small objects.</dd>
+  		</dl>
+  	</section>
+  	<section id="intent">
+  		<h2>Intent</h2>
+  		<p>The intent of this success criterion is to help users who may have trouble activating a small target because of hand tremors, limited dexterity or other reasons. If the target is too small, it may be difficult to aim at the target. Mice and similar pointing devices can be hard to use for these users, and a larger target will help them greatly in having positive outcomes on the web page.</p>
+      <p>Touch is particularly problematic as it is an input mechanism with coarse precision. Users lack the same level of fine control as on inputs such as a mouse or stylus. A finger is larger than a mouse pointer, and generally obstructs the user's view of the precise location on the screen that is being touched/activated.</p>
+      <p>The issue can be further complicated for responsive/mobile sites which need to accommodate different types of fine and coarse inputs (e.g. a site that can be accessed both on a traditional desktop/laptop with a mouse, as well as on a tablet or mobile phone with a touch screen).</p>
+      <p>While this criterion defines a minimum target size, it is recommended that larger sizes are used to reduce the possibility of unintentional actions. This is particularly relevant if any of the following are true:</p>
+  	  <ul>
+        <li>the control is used frequently;</li>
+        <li>the result of the interaction cannot be easily undone;</li>
+        <li>the control is positioned where it will be difficult to reach, or is near the edge of the screen;</li>
+        <li>the control is part of a sequential task.</li>
+  	  </ul>
+      <p>The targets on a screen can have different purposes and uses, and this Success Criterion specifies how each is to be handled.</p>
+      <p><strong>Equivalent targets:</strong> If there is more than one target on a screen that performs the same action, only one of the targets need to meet the target size of 44 by 44 CSS pixels.</p>
+      <p><strong>Inline:</strong> Content displayed can often be reflowed based on the screen width available. This is known as responsive design and makes it easier to read since you do not need to scroll both horizontally and vertically. In reflowed content, the targets can appear anywhere on a line and can change position based on the width of the available screen. Since targets can appear anywhere on the line, the size cannot be larger than the available text and spacing between the sentences or paragraphs, otherwise the targets could overlap. It is for this reason targets which are contained within one or more sentences are excluded from the target size requirements.</p>
+      <div class="note">
+        <p>If the target is the full sentence and the sentence is not in a block of text, then the target needs to be at least 44 by 44 CSS pixels.</p>
+      </div>
+      <div class="note">
+        <p>A footnote or an icon within or at the end of a sentence is considered to be part of a sentence and therefore are excluded from the minimum target size.</p>
+      </div>
+      <p><strong>User Agent Control:</strong> If the size of the target is not modified by the author through CSS or other size properties, then the target does not need to meet the target size of 44 by 44 CSS pixels.</p>
+      <p><strong>Essential:</strong> If the target is required to be a particular target size and cannot be provided in another way, while changing it would essentially change the information or functionality of the content, then the target does not need to meet the target size of 44 by 44 CSS pixels.</p>
     </section>
-	<section id="examples">
-	  <h2>Examples</h2>
-			<ul>
-			  <li><strong>Example 1: Buttons</strong><br />
-		      Three buttons are on-screen and the touch target area of each button is 44 by 44 CSS pixels.</li>
+    <section id="benefits">
+      <h2>Benefits</h2>
+      <ul>
+        <li>Users who use a mobile device where touch screen is the primary mode of interaction</li>
+        <li>Users with mobility impairments, such as hand tremors</li>
+        <li>Users who use a mobile device in environments where they are exposed to shaking such as public transportation</li>
+        <li>Users who find fine motor movements difficult</li>
+        <li>Users who access a device using one hand</li>
+        <li>Users with large fingers, or who are operating the device with only a part of their finger or knuckle</li>
+        <li>Users who have low vision may better see the target</li>
       </ul>
-			<section class="example"></section>
-</section>
-		<section id="resources">
-		  <h2>Resources</h2>
-			<p class="instructions"></p>
-			<ul>
-				<li><a href="https://developer.apple.com/ios/human-interface-guidelines/visual-design/layout/">Apple touch target size recommendations</a></li>
-				<li><a href="https://docs.microsoft.com/en-us/windows/uwp/design/input/guidelines-for-targeting">Windows UWP Guidelines for touch targets</a></li>
-				<li><a href="https://material.io/design/layout/spacing-methods.html#touch-targets">Google Material Design Touch targets</a></li>
-				<li><a href="https://web.dev/accessible-tap-targets/">web.dev Accessible tap targets</a></li>
-				<li><a href="http://touchlab.mit.edu/publications/2003_009.pdf">Human Fingertips to Investigate the Mechanics of Tactile Sense (PDF)</a></li>
-				<li><a href="http://www.cs.umd.edu/hcil/trs/2006-11/2006-11.htm">One-Handed Thumb Use on Small Touchscreen Devices</a></li>
-				<li><a href="https://docs.microsoft.com/en-us/archive/blogs/ie/guidelines-for-building-touch-friendly-sites">Microsoft Guidelines for Building Touch Friendly Sites</a></li>
-			</ul>
-</section>
-		<section id="techniques">
-		  <h2>Techniques</h2>
-		  <p>Each numbered item in this section represents a technique or combination of techniques that the <acronym title="Web Content Accessibility Guidelines">WCAG</acronym>Working Group deems sufficient for meeting this Success Criterion. However, it is not necessary to use these particular techniques. For information on using other techniques, see <a href="understanding-techniques" class="understanding">Understanding Techniques for WCAG Success Criteria</a>, particularly the "Other Techniques" section.</p>
-			<section id="sufficient">
-			  <h3>Sufficient</h3>
-				<p class="instructions">Techniques that are sufficient to meet the Guideline or Success Criterion.</p>
-				<section class="situation">
-					<ul>
-					  <li>					    Ensuring that touch targets are at least 44 by 44 CSS pixels.				      </li>
-					  <li>Ensuring inline links provide sufficiently large activation target.</li>
-		          </ul>
-              </section>
-		  </section>
-			<section id="advisory">
-				<h2>Advisory</h2>
-				<p class="instructions">Although not required for conformance, the following additional techniques should be considered in order to make content more accessible. Not all techniques can be used or would be effective in all situations.</p>
-				<ul>
-				  <li>none documented</li>
-			  </ul>
-            </section>
-			<section id="failure">
-				<h2>Failure</h2>
-				<p class="instructions">The following are common mistakes that are considered failures of Success Criterion 2.5.3 by the <acronym title="Web Content Accessibility Guidelines">WCAG</acronym> Working Group.</p>
-				<ul>
-				  <li>Failure of success criterion 2.5.3 and 2.5.4 due to touch target being less than 44 by 44 CSS pixels.</li>
-		      </ul>
-            </section>
-</section>
-</body>
+    </section>
+  	<section id="examples">
+  	  <h2>Examples</h2>
+      <dl>      
+        <dt>Example 1: Buttons</dt>
+        <dd>Three buttons are on-screen and the touch target area of each button is 44 by 44 CSS pixels.</dd>
+        <dt>Example 2: Equivalent target</dt>
+        <dd>Multiple targets are provided on the page that perform the same function. One of the targets is 44 by 44 CSS pixels. The other targets do not have a minimum touch target of 44 by 44 CSS pixels.</dd>
+        <dt>Example 3: Anchor Link</dt>
+        <dd>The target is an in-page link and the target is less than 44 by 44 CSS pixels.</dd>
+        <dt>Example 4: Text Link in a paragraph</dt>
+        <dd>Links within a paragraph of text have varying touch target dimensions. Links within
+           paragraphs of text do no need to meet the 44 by 44 CSS pixels requirements.</dd>
+        <dt>Example 5: Text Link in a sentence</dt>
+        <dd>A text link that is in a sentence is excluded and does not need to meet the 44 by 44 CSS pixel requirement. If the text link is the full sentence, then the text link target touch area does need to meet the 44 by 44 CSS pixels.</dd>
+        <dt>Example 6: Footnote</dt>
+        <dd>A footnote link at the end of a sentence does not need to meet the 44 by 44 CSS pixels requirements. The footnote at the end of the sentence is considered to be part of the sentence.</dd>
+        <dt>Example 7: Help icon</dt>
+        <dd>A help icon within or at the end of a sentence does not need to meet the 44 by 44 CSS pixels requirements. The icon at the end of the sentence is considered to be part of the sentence.</dd>
+      </dl>
+    </section> 
+    <section id="resources">
+      <h2>Resources</h2>
+      <ul>
+        <li><a href="https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/adaptivity-and-layout/">Apple touch target size recommendations</a></li>
+        <li><a href="https://docs.microsoft.com/en-us/windows/apps/design/input/guidelines-for-targeting">Windows UWP Guidelines for touch targets</a></li>
+        <li><a href="https://material.io/design/layout/spacing-methods.html#touch-targets">Google Material Design Touch targets</a></li>
+        <li><a href="https://web.dev/accessible-tap-targets/">web.dev Accessible tap targets</a></li>
+        <li><a href="http://touchlab.mit.edu/publications/2003_009.pdf">Human Fingertips to Investigate the Mechanics of Tactile Sense (PDF)</a></li>
+        <li><a href="https://www.cs.umd.edu/hcil/trs/2006-11/2006-11.htm">One-Handed Thumb Use on Small Touchscreen Devices</a></li>
+      </ul>
+    </section>    
+    <section id="techniques">
+      <h2>Techniques</h2>
+      <p>Each numbered item in this section represents a technique or combination of techniques that the <abbr title="Web Content Accessibility Guidelines">WCAG</abbr> Working Group deems sufficient for meeting this Success Criterion. However, it is not necessary to use these particular techniques. For information on using other techniques, see <a href="understanding-techniques" class="understanding">Understanding Techniques for WCAG Success Criteria</a>, particularly the "Other Techniques" section.</p>
+      <section id="sufficient">
+        <h3>Sufficient</h3>
+        <section class="situation">
+          <ul>
+            <li>Ensuring that targets are at least 44 by 44 CSS pixels.</li>
+          </ul>
+        </section>
+      </section>
+      <section id="advisory">
+        <h2>Advisory</h2>
+        <ul>
+            <li>Ensuring inline links provide sufficiently large activation target.</li>
+        </ul>
+      </section>
+      <section id="failure">
+        <h2>Failure</h2>
+        <ul>
+          <li>Failure of Success Criterion 2.5.5 due to target being less than 44 by 44 CSS pixels.</li>
+        </ul>
+      </section>
+    </section>
+  </body>
 </html>
diff --git a/understanding/21/target-size.html b/understanding/21/target-size.html
deleted file mode 100644
index c3996b2c33..0000000000
--- a/understanding/21/target-size.html
+++ /dev/null
@@ -1,97 +0,0 @@
-<!DOCTYPE html>
-<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
-<head>
-  <meta charset="UTF-8" />
-  <title>WCAG 2.0 Understanding Page</title>
-  <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove" />
-</head>
-<body>
-  <h1>Understanding SC 2.5.3 Target Size</h1>
-  <section id="intent">
-    <h2>Intent</h2>
-    <p>The intent of this success criterion is to ensure that target sizes are large enough for users to easily activate them, even if the user is accessing content on a small handheld touch screen device, has limited dexterity, or has trouble activating small targets for other reasons. For instance, mice and similar pointing devices can be hard to use for these users, and a larger target will help them activate the target.</p>
-    <p>Touch is particularly problematic as it is an input mechanism with coarse precision. Users lack the same level of fine control when using inputs such as a mouse or stylus. A finger is larger than a mouse pointer, and generally obstructs the user's
-      view of the precise location on the screen that is being touched/activated.</p>
-    <p>The issue can even be further complicated with responsive layouts on small screens like mobile, which need to accommodate different types of fine and coarse inputs. Both input types must be supported for a site that can be accessed both on a traditional
-      desktop/laptop with a mouse, as well as on a tablet or mobile phone with a touch screen.</p>
-    <p>While this criterion defines a minimum target size, as a best practice it is recommended that larger sizes are used to reduce the possibility of unintentional activations. This is particularly relevant if any of the following are true:</p>
-    <ul>
-      <li>A control is used frequently;</li>
-      <li>Results of the interaction cannot be easily undone;</li>
-      <li>The control is positioned where it will be difficult to reach, e.g. is near the edge of the screen;</li>
-      <li>The control is part of a sequential task.</li>
-    </ul>
-    <p>The targets on a screen can have different purposes and uses, and this Success Criterion specifies how each is to be handled.</p>
-    <p><strong>Equivalent targets:</strong> If there is more than one target on a screen that performs the same action, only one of the targets need to meet the target size of 44 by 44 CSS pixels.</p>
-    <p><strong>Inline:</strong> Content displayed can often be reflowed based on the screen width available. This is known as responsive design and makes it easier to read since you do not need to scroll both horizontally and vertically. In reflowed content,
-      the targets can appear anywhere on a line and can change position based on the width of the available screen. Since targets can appear anywhere on the line, the size cannot be larger than the available text and spacing between the sentences or paragraphs,
-      otherwise the targets could overlap. It is for this reason targets which are contained within one or more sentences are excluded from the target size requirements.</p>
-      <p class="note">If the target is the full sentence and the sentence is not in a block of text, then the target needs to be at least 44 by 44 CSS pixels.</p>
-      <p class="note">A footnote or an icon within or at the end of a sentence is considered to be part of a sentence and therefore are excluded from the minimum target size.</p>
-    <p><strong>User Agent Control:</strong> If the size of the target is not modified by the author through CSS or other size properties, then the target does not need to meet the target size of 44 by 44 CSS pixels.</p>
-    <p><strong>Essential:</strong> If the target is required to be a particular target size and cannot be provided in another way, while changing it would essentially change the information or functionality of the content, then the target does not need to
-      meet the target size of 44 by 44 CSS pixels.</p>
-    <section id="benefits">
-      <h3>Benefits</h3>
-      <ul>
-        <li>Users who use a mobile device where touch screen is the primary mode of interaction;</li>
-        <li>Users with mobility impairments such as hand tremors;</li>
-        <li>Users who use a mobile device in environments where they are exposed to shaking such as public transportation;</li>
-        <li>Users who have difficulty with fine motor movements;</li>
-        <li>Users who access a device using one hand;</li>
-        <li>Users with large fingers, or who are operating the device with only a part of their finger or knuckle;</li>
-        <li>Users who have low vision may better see the target.</li>
-      </ul>
-    </section>
-  </section>
-  <section id="examples">
-    <h2>Examples</h2>
-    <ul>
-      <li><strong>Example 1: Buttons</strong><br /> Three buttons are on-screen and the touch target area of each button is 44 by 44 CSS pixels.</li>
-      <li><strong>Example 2: Equivalent target</strong><br /> Multiple targets are provided on the page that perform the same function. One of the targets is 44 by 44 CSS pixels. The other targets do not have a minimum touch target of 44 by 44 CSS pixels.</li>
-      <li><strong>Example 3: Anchor Link</strong><br /> The target is an in-page link and the target is less than 44 by 44 CSS pixels. Users can scroll the screen using browser functions so target size does not need to be met.</li>
-      <li><strong>Example 4: Text Link in a paragraph</strong><br /> Links within a paragraph of text have varying touch target dimensions. Links within paragraphs of text do no need to meet the 44 by 44 CSS pixels requirements.</li>
-      <li><strong>Example 5: Text Link in a sentence</strong><br /> A text link that is in a sentence is excluded and does not need to meet the 44 by 44 CSS pixel requirement. If the text link is the full sentence, then the text link target touch area does
-        need to meet the 44 by 44 CSS pixels.</li>
-      <li><strong>Example 6: Footnote</strong><br /> A footnote link at the end of a sentence does not need to meet the 44 by 44 CSS pixels requirements. The footnote at the end of the sentence is considered to be part of the sentence.</li>
-      <li><strong>Example 7: Help icon</strong><br /> A help icon within or at the end of a sentence does not need to meet the 44 by 44 CSS pixels requirements. The icon at the end of the sentence is considered to be part of the sentence.</li>
-    </ul>
-  </section>
-  <section id="resources">
-    <h2>Resources</h2>
-    <p class="instructions"></p>
-    <ul>
-      <li><a href="https://developer.apple.com/ios/human-interface-guidelines/visual-design/layout/">Apple touch target size recommendations</a></li>
-      <li><a href="https://docs.microsoft.com/en-us/windows/uwp/design/input/guidelines-for-targeting">Windows UWP Guidelines for touch targets</a></li>
-      <li><a href="https://material.io/design/layout/spacing-methods.html#touch-targets">Google Material Design Touch targets</a></li>
-      <li><a href="https://web.dev/accessible-tap-targets/">web.dev Accessible tap targets</a></li>
-      <li><a href="http://touchlab.mit.edu/publications/2003_009.pdf">Human Fingertips to Investigate the Mechanics of Tactile Sense (PDF)</a></li>
-      <li><a href="http://www.cs.umd.edu/hcil/trs/2006-11/2006-11.htm">One-Handed Thumb Use on Small Touchscreen Devices</a></li>
-      <li><a href="https://docs.microsoft.com/en-us/archive/blogs/ie/guidelines-for-building-touch-friendly-sites">Microsoft Guidelines for Building Touch Friendly Sites</a></li>
-    </ul>
-  </section>
-  <section id="techniques">
-    <h2>Techniques</h2>
-    <section id="sufficient">
-      <h3>Sufficient</h3>
-        <ul>
-          <li> Ensuring that touch targets are at least 44 by 44 CSS pixels. </li>
-          <li>Providing a mechanism to change the size of the target independent of magnification.</li>
-        </ul>
-    </section>
-    <section id="advisory">
-      <h2>Advisory</h2>
-      <ul>
-        <li>Ensuring inline links provide sufficiently large activation target.</li>
-      </ul>
-    </section>
-    <section id="failure">
-      <h2>Failure</h2>
-      <ul>
-        <li>Failure of success criterion 2.5.3 due to target size being less than 44 by 44 CSS pixels.</li>
-        <li>Failure of success criterion 2.5.3 due to target size of a paragraph that is also a link being less than 44 by 44 CSS pixels.</li>
-      </ul>
-    </section>
-  </section>
-</body>
-</html>
diff --git a/understanding/21/text-spacing.html b/understanding/21/text-spacing.html
index b5bdf853d1..8d15e5f89d 100644
--- a/understanding/21/text-spacing.html
+++ b/understanding/21/text-spacing.html
@@ -1,148 +1,170 @@
 <!DOCTYPE html>
 <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
-   <head>
-		<meta charset="UTF-8" />
-      <title>Understanding Text Spacing</title>
-      <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove" />
-   </head>
-   <body>
-      <h1>Understanding Text Spacing</h1>
-      <section id="intent">
-         <h2>Intent</h2>
-         <p>The intent of this Success Criterion (SC) is to ensure that people can override author specified text spacing to improve their reading experience. Each of the requirements stipulated in the SC's four bullets helps ensure text styling can be adapted by the user to suit their needs.</p>
-         <p>The specified metrics set a minimum baseline. The values in between the author's metrics and the metrics specified in this SC should not have loss of content or functionality.</p>
-         <p>This SC focuses on the ability to increase spacing between lines, words, letters, and paragraphs. Any combination of these may assist a user with effectively reading text. As well, ensuring users can override author settings for spacing also significantly increases the likelihood other style preferences can be set by the user. For example, a user may need to change to a wider font family than the author has set in order to effectively read text. </p>
-      	<section>
-         <h3 id="authorresp">Author Responsibility </h3>
-         <p>This SC does not dictate that authors must set all their content to the specified metrics. Rather, it specifies that an author's content has the ability to be set to those metrics without loss of content or functionality. The author requirement is both to not interfere with a user's ability to override the author settings, and to ensure that content thus modified does not break content in the manners shown in figures 1 through 3 in Effects of Not Allowing for Spacing Override. The values in the SC are a baseline. Authors are encouraged to surpass the values specified, not see them as a ceiling to build to. If the user chooses to go beyond the metrics specified any resulting loss of content or functionality is the user's responsibility.</p>
-         <section>
-         <h4 id="applicability">Applicability</h4>
-         <p>If the markup-based technologies being used are capable of overriding text to the Success Criterion's metrics, then this SC is applicable. For instance Cascading Style Sheet/HTML technologies are quite able to allow for the specified spacing metrics. Plugin technologies would need to have a built-in ability to modify styles to the specified metrics. Currently, this SC does not apply to PDF as it is not implemented using markup.</p>
-         <p>Examples of text that are typically not affected by <a>style properties</a> and not expected to adapt are:</p>
-         <ul>
-            <li>Video captions embedded directly into the video frames and not provided as an associated caption file</li>
-            <li><a>Images of text</a></li>
-         </ul>
-         <p>For this SC, <a href="https://www.w3.org/TR/html5/scripting-1.html#the-canvas-element">canvas</a> implementations of text are considered to be <a>images of text</a>.</p>
-      	</section>
-      	</section>
-      	<section>
-         <h3 id="userresp">User Responsibility</h3>
-         <p>The ability to read and derive meaning from the overridden spacing rests with the user. The user may choose to exceed the spacing adjustments in the SC. If the increased spacing causes loss of content or functionality, the user will adjust or return to the author’s original spacing or spacing within the bounds of the SC. Regardless, the user needs the flexibility to adjust spacing within the bounds set in the SC without loss of content or functionality. Such changes may be achieved via user stylesheet, bookmarklet, extension, or application.</p>
-      	</section>
+<head>
+ <meta charset="UTF-8"/>
+    <title>Understanding Text Spacing</title>
+    <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/>
+ </head>
+ <body>
+  <h1>Understanding Text Spacing</h1>
+  <section id="brief">
+    <h2>In brief</h2>
+    <dl>
+      <dt>Goal</dt><dd>Users can adjust text spacing to make it easier to read.</dd>
+      <dt>Author task</dt><dd>Ensure content adapts to user-defined text settings.</dd>
+      <dt>Why it's important</dt><dd>Some people need text with different spacing or font characteristics.</dd>
+    </dl>
+  </section>
+  <section id="intent">
+    <h2>Intent</h2>
+    <p>The intent of this Success Criterion (SC) is to ensure that when people override author specified text spacing to improve their reading experience, content is still readable and operable. Each of the requirements stipulated in the SC's four bullets helps ensure text styling can be adapted by the user to suit their needs.</p>
+    <p>The specified metrics set a minimum baseline. The values in between the author's metrics and the metrics specified in this SC should not have loss of content or functionality.</p>
+    <p>This SC focuses on the adaptability of content to an increase in spacing between lines, words, letters, and paragraphs. Any combination of these may assist a user with effectively reading text. As well, ensuring that content correctly adapts when users override author settings for spacing also significantly increases the likelihood other style preferences can be set by the user. For example, a user may need to change to a wider font family than the author has set in order to effectively read text. </p>
+    <section>
+      <h3 id="authorresp">Author Responsibility </h3>
+      <p>This SC does not dictate that authors must set all their content to the specified metrics, nor does the SC intend to imply that all users will adjust the specified metrics. Rather, it specifies that should a user choose to set any of these metrics they can do so without any loss of content or functionality. The author requirement is both to not interfere with a user's ability to override the author settings, and to ensure that content thus modified does not break content in the manners shown in figures 1 through 3 in Effects of Not Allowing for Spacing Override.</p>
 
-      	<section>
-         <h3 id="effects-not-allowing">Effects of Not Allowing for Spacing Override</h3>
-         <p>The following images show some types of  failures when authors do not take into consideration that users may override spacing to the metrics specified in this Success Criterion.</p>
-      		<section>
-         <h4 id="cutoff">Text Cut Off</h4>
-         <p>The bottom portion of the words &quot;Your Needs&quot; is cut off in a heading making that text unreadable in Figure 1. It should read  &quot;We Provide a Mobile Application Service to Meet Your Needs.&quot;</p>
-         <figure id="figure-text-cut">
-            <figcaption>Vertical text cut off  is a failure.</figcaption>
-            <img src="https://www.w3.org/WAI/GL/low-vision-a11y-tf/wiki/images/b/ba/Spacing_cutoff_fail_vertical.png" alt="Heading text truncated vertically." width="420" height="190" />         
-         </figure>
-         <p>In Figure 2 the last portion of text is cut off in 3 side-by-side  headings. The 1st heading should read &quot;A cog in the wheel.&quot; But it reads &quot;A cog in the whe&quot;. Only half of the second &quot;e&quot; is visible and the letter &quot;l&quot; is completely missing. The  2nd heading should read &quot;A penny for your thoughts&quot;. But it reads &quot;A penny for your&quot;. The 3rd should read &quot;Back to the drawing board.&quot; But it reads &quot;Back to the drawi&quot;. </p>
-         <figure id="figure-horiz-text-cut">
-            <figcaption>Horizontal text cut off is a  failure.</figcaption>
-            <img src="https://www.w3.org/WAI/GL/low-vision-a11y-tf/wiki/images/c/c2/Spacing_cutoff_fail_horizontal.png" alt="3 side-by-side headings with truncated text." width="509" height="184" />         
-         </figure>
-      		</section>
-      		<section>
-         <h4 id="overlap">Text Overlap</h4>
-         <p>In Figure 3 the last 3 words &quot;Groups and Programs&quot; of the heading "Technologists Seeking Input from Groups and Programs" overlap the following sentence. That sentence should read, &quot;You are invited to share  ideas and areas of interest related to the  integration of technology from a group or program perspective.&quot; But the words &quot;You are invited to share  ideas&quot; are obscured and unreadable.</p>
-         <figure id="figure-overlapping-text">
-            <figcaption>Overlapping text is a failure.</figcaption>
-            <img src="https://www.w3.org/WAI/GL/low-vision-a11y-tf/wiki/images/1/11/Spacing_overlap_fail.png" alt="Heading text overlaps part of paragraph text." width="510" height="170" />            
-         </figure>
-      		</section>
-      	</section>
-      	
+      <p>In some human languages and scripts, some of the metrics specified by the SC are inapplicable. For example, languages such as Japanese do not use spacing following paragraphs, meaning that users are unlikely to make any paragraph spacing changes in practice. The exception in this SC allows authors to ignore text style properties which are inapplicable to the combination of language and script being used.</p>
+
+      <p>It is beneficial for users if authors use any locally available guidance for improving readability in the local language or writing system. If the user chooses to go beyond the metrics specified, any resulting loss of content or functionality is the user's responsibility.</p>
+
+      <p>Further, this SC is not concerned with <em>how</em> users change the line height and spacing metrics. It does not require that content implement its own mechanisms to allow users to do this. It is not a failure of the content if a user agent or platform does not provide a way for users to do this. Content does not fail this SC if the method chosen by the user - for instance, the use of an extension or bookmarklet - fails to correctly set the line height and spacing text properties on the content (provided that the content is not actively and purposely preventing the properties from being added).</p>
+      <section>
+        <h4 id="applicability">Applicability</h4>
+        <p>If the markup-based technologies being used are capable of overriding text to the Success Criterion's metrics, then this SC is applicable. For instance Cascading Style Sheet/HTML technologies are quite able to allow for the specified spacing metrics. Plugin technologies would need to have a built-in ability to modify styles to the specified metrics. Currently, this SC does not apply to PDF as it is not implemented using markup.</p>
+        <p>Examples of text that are typically not affected by <a>style properties</a> and not expected to adapt are:</p>
+        <ul>
+        <li>Video captions embedded directly into the video frames and not provided as an associated caption file</li>
+        <li><a>Images of text</a></li>
+        </ul>
+        <p>For this SC, <a href="https://html.spec.whatwg.org/multipage/canvas.html#the-canvas-element">canvas</a> implementations of text are considered to be <a>images of text</a>.</p>
+
+      </section>
+      <section>
+        <h4 id="ellipses">Use of ellipses</h4>
+        <p>There may be regions of a page where text containers cannot expand due to design constraints (such as a maximum width for the left navigation or table column headers). A common convention if text exceeds its space is to replace truncated text with an ellipsis. Where ellipses appear as a result of modifying text style properties, the page can still meet the Text Spacing requirements, so long as the content is still available. For example:</p>
+        <ul>
+        <li>a mechanism is provided to reveal the truncated text on the page (for instance, the text appears on focus or on activation)</li>
+        <li>where the ellipsis is part of a section of content which includes a link, the truncated text is revealed on the linked page</li>
+        </ul>
+        <p>Where text is not truncated but it is when text is spaced, if there is no mechanism to show the truncated text, it fails this Success Criterion.</p>
       </section>
-         <section id="benefits">
-            <h2>Benefits</h2>
-            <ul>
-               <li>People with low vision who require increased space between lines, words, and letters are able to read text.</li>
-               <li>People with dyslexia may increase space between lines, words, and letters to increase reading speed.</li>
-               <li>Although not required by this SC, white space between blocks of text can help people with cognitive disabilities discern sections and call out boxes.</li>
-            </ul>
-         </section>
-      <section id="examples">
-         <h2>Examples</h2>
-        <p>When spacing is be overridden to the SC's metrics:</p>
-        <ol>
-            <li>Text fits within the bounds of its containing box without being cut off.</li>
-            <li>Text fits within the bounds of its containing box without overlapping other boxes.</li>
-         </ol>
+    </section>
+    <section>
+      <h3 id="userresp">User Responsibility</h3>
+      <p>The ability to read and derive meaning from the overridden spacing rests with the user. The user may choose to exceed the spacing adjustments in the SC. If the increased spacing causes loss of content or functionality, the user will adjust or return to the author’s original spacing or spacing within the bounds of the SC. Regardless, the user needs the flexibility to adjust spacing within the bounds set in the SC without loss of content or functionality. Such changes may be achieved via user stylesheet, bookmarklet, extension, or application.</p>
+    </section>
+
+    <section>
+      <h3 id="effects-not-allowing">Effects of Not Allowing for Spacing Override</h3>
+      <p>The following images show some types of  failures when authors do not take into consideration that users may override spacing to the metrics specified in this Success Criterion.</p>
+      <section>
+        <h4 id="cutoff">Text Cut Off</h4>
+        <p>The bottom portion of the words &quot;Your Needs&quot; is cut off in a heading making that text unreadable in Figure 1. It should read  &quot;We Provide a Mobile Application Service to Meet Your Needs.&quot;</p>
+        <figure id="figure-text-cut">
+          <figcaption>Vertical text cut off is a failure.</figcaption>
+          <img src="img/spacing_cutoff_fail_vertical.png" alt="Heading text truncated vertically." width="420" height="190" />         
+        </figure>
+        <p>In Figure 2 the last portion of text is cut off in three side-by-side headings. The first heading should read &quot;A cog in the wheel&quot;, but it reads &quot;A cog in the whe&quot;. Only half of the second &quot;e&quot; is visible and the letter &quot;l&quot; is completely missing. The second heading should read &quot;A penny for your thoughts&quot;. But it reads &quot;A penny for your&quot;. The third should read &quot;Back to the drawing board.&quot; But it reads &quot;Back to the drawi&quot;. </p>
+        <figure id="figure-horiz-text-cut">
+          <figcaption>Horizontal text cut off is a failure.</figcaption>
+          <img src="img/spacing_cutoff_fail_horizontal.png" alt="3 side-by-side headings with truncated text." width="509" height="184" />
+        </figure>
+      </section>
+      <section>
+        <h4 id="overlap">Text Overlap</h4>
+        <p>In Figure 3 the last three words &quot;Groups and Programs&quot; of the heading "Technologists Seeking Input from Groups and Programs" overlap the following sentence. That sentence should read, &quot;You are invited to share ideas and areas of interest related to the integration of technology from a group or program perspective.&quot; However, the words &quot;You are invited to share ideas&quot; are obscured and unreadable.</p>
+        <figure id="figure-overlapping-text">
+          <figcaption>Overlapping text is a failure.</figcaption>
+          <img src="img/spacing_overlap_fail.png" alt="Heading text overlaps part of paragraph text." width="510" height="170" />            
+        </figure>
       </section>
-      <section id="resources">
-         <h2>Resources</h2>
-               	<section>
-               		<h3>Research</h3>
-         <p>The  grounds for this SC are <a href="#resources">based on research</a>. The metrics chosen as measures are based on the <a href="http://journals.sagepub.com/doi/pdf/10.1177/0264619607075995">McLeish</a> study. She ran from .04 to .25 em tests. McLeish found an increasing curve in reading speed of actual materials up to .25, but it  started to flatten at .20. Previous studies that reported no improvement started at .5em. Right at the flat point.  <a href="https://lists.w3.org/Archives/Public/public-low-vision-a11y-tf/2017Jun/0047.html">Wayne E. Dick, Ph.D. analyzed the McLeish study</a> and translated from points. Dr. Dick recommended the metrics that the Working Group adopted.</p>
-      		<section>
-         <h4 id="lang">Languages and Scripts</h4>
-         <p>Roughly 480 different languages and scripts <a href="https://lists.w3.org/Archives/Public/public-low-vision-a11y-tf/2018Feb/0001.html">have been tested</a>.  Maximum spacing adjustments allowed by the SC were set on the following 3 pages:</p>
-         <ol>
-           <li><a href="http://www.geonames.de/languages.html">Languages in their own writing systems</a></li>
-            <li><a href="https://www.omniglot.com/language/names.htm">Online Encyclopedia of writing systems and languages &#8211; language names</a></li>
-           <li><a href="https://www.omniglot.com/language/phrases/index.htm">Universal Declaration of Human Rights (Article 1)</a></li>
-         </ol>
-      		</section>
-      			<section>
-         <h4 id="results">Results</h4>
-         <p id="langimpact">No adverse effects occurred. The following are the specific findings:</p>
-         <dl>
-            <dt>Character Spacing </dt>
-            <dd>Individual characters in words remained intact though they were spaced a bit further apart.</dd>
-            <dt>Word Spacing </dt>
-            <dd>Words were spaced farther apart. In languages that do not have words (e.g. Japanese) applying word spacing had no effect. This is expected.</dd>
-            <dt>Line Height</dt>
-            <dd>Changing line height did not separate diacritics from characters, nor did it adversely impact ascenders or descenders.</dd>
-         </dl>
-         <p>As previously discussed, the ability to read text with adjusted spacing is a <a href="#userresp">user responsibility</a>. This is true no matter the language.        </p>
-         <p>The SC's exception addresses cases where a text style property is not used in a language or script. In such cases, authors are only required  to ensure  relevant  properties do not break the layout.</p>
-      			</section>
-      		</section>
-      	<section>
-      		<h3>Other references</h3>
-         <ul>
-            <li>Allan, Kirkpatrick, Lawton Henry, Editors. (2017). <a href="https://www.w3.org/TR/low-vision-needs/#spacing">Accessibility Requirements for People with Low Vision (3.4 Spacing for Reading)</a>.  World Wide Web Consortium.</li>
-           <li><a href="https://github.com/openstyles/stylus/graphs/contributors">Stylus Team</a> (2012). <a href="https://github.com/openstyles/stylus/blob/master/README.md">Stylus browser extension</a> (Firefox, Chrome, and Opera) (compatible with Userstyles.org material).</li>
-            <li>Campbell, Alastair.  (2017). <a href="https://github.com/alastc/adaptation-scripts/blob/master/scripts/text-adaptation.js">Text Adaptation Bookmarklet</a>. GitHub.</li>
-            <li>Chung, Susana T. L. (2012). <a href="https://www.ncbi.nlm.nih.gov/pmc/articles/PMC3429790/">Dependence of Reading Speed on Letter Spacing in Central Vision Loss</a>. Optom Vis Sci.</li>
-            <li>Chung, Susana T. L. (2002). <a href="http://journals.sagepub.com/doi/pdf/10.1177/0264619607075995">The Effect of Letter Spacing on Reading Speed in Central and Peripheral Vision (PDF)</a>. IOVS ARVO Journals.</li>
-            <li>Mcleish, Eve. (2007).  <a href="http://journals.sagepub.com/doi/pdf/10.1177/0264619607075995">A study of the effect of letter spacing on the reading speed of young readers with low vision (PDF)</a>. The British Journal of Visual Impairment 25.2: 133-43.</li>
-            <li>Rello, L., &amp; Baeza-Yates, R. A. (2017). <a href="https://link.springer.com/article/10.1007/s10209-015-0438-8"> How to present more readable text for people with dyslexia</a>. Universal Access in the Information Society, 16(1), 29-49.</li>
-            <li> Sjoblom, A.M., Eaton, E. and Stagg, S.D., (2016). <a href="http://onlinelibrary.wiley.com/doi/10.1111/bjep.12127/full">The effects of letter spacing and coloured overlays on reading speed and accuracy in adult dyslexia</a>. British Journal of Educational Psychology, 86(4), pp. 630-639). </li>
-            <li>Zorzi,  Marco et, al. (2012). <a href="http://www.pnas.org/content/109/28/11455.full">Extra-large letter spacing improves reading in dyslexia</a>. Proceedings of the National Academy of Sciences.</li>
-         </ul>
-      	</section>
+    </section>
+  </section>
+  <section id="benefits">
+    <h2>Benefits</h2>
+    <ul>
+      <li>People with low vision who require increased space between lines, words, and letters are able to read text.</li>
+      <li>People with dyslexia may increase space between lines, words, and letters to increase reading speed.</li>
+      <li>Although not required by this SC, white space between blocks of text can help people with cognitive disabilities discern sections and call out boxes.</li>
+    </ul>
+  </section>
+  <section id="examples">
+    <h2>Examples</h2>
+    <p>When spacing is being overridden to the SC's metrics:</p>
+    <ul>
+      <li>Text fits within the bounds of its containing box without being cut off.</li>
+      <li>Text fits within the bounds of its containing box without overlapping other boxes.</li>
+    </ul>
+  </section>
+  <section id="resources">
+    <h2>Resources</h2>
+    <section>
+      <h3>Research</h3>
+      <p>The  grounds for this SC are <a href="#resources">based on research</a>. The metrics chosen as measures are based on the <a href="http://journals.sagepub.com/doi/pdf/10.1177/0264619607075995">McLeish</a> study. She ran from .04 to .25 em tests. McLeish found an increasing curve in reading speed of actual materials up to .25, but it  started to flatten at .20. Previous studies that reported no improvement started at .5em. Right at the flat point.  <a href="https://lists.w3.org/Archives/Public/public-low-vision-a11y-tf/2017Jun/0047.html">Wayne E. Dick, Ph.D. analyzed the McLeish study</a> and translated from points. Dr. Dick recommended the metrics that the Working Group adopted.</p>
+      <section>
+        <h4 id="lang">Languages and Scripts</h4>
+        <p>Roughly 480 different languages and scripts <a href="https://lists.w3.org/Archives/Public/public-low-vision-a11y-tf/2018Feb/0001.html">have been tested</a>.  Maximum spacing adjustments allowed by the SC were set on the following 3 pages:</p>
+        <ul>
+        <li><a href="http://www.geonames.de/languages.html">Languages in their own writing systems</a></li>
+        <li><a href="https://www.omniglot.com/language/names.htm">Online Encyclopedia of writing systems and languages &#8211; language names</a></li>
+        <li><a href="https://www.omniglot.com/language/phrases/index.htm">Universal Declaration of Human Rights (Article 1)</a></li>
+        </ul>
       </section>
-      <section id="techniques">
-         <h2>Techniques</h2>
-         <section id="sufficient">
-            <h3>Sufficient</h3>
-            <ul>
-               <li><a href="../../techniques/CSS/C36">Allowing for Spacing Override (Draft)
-                  </a>
-               </li>
-            	<li><a href="../../techniques/CSS/C35">C35</a></li>
-            </ul>
-         </section>
-         <section id="advisory">
-            <h3>Advisory</h3>
-            <ul>
-            	<li><a href="https://www.w3.org/WAI/WCAG21/Techniques/css/C8" class="css">C8: Using CSS letter-spacing to control spacing within a word</a></li>
-            	<li><a href="https://www.w3.org/WAI/WCAG21/Techniques/css/C21" class="css">C21: Specifying line spacing in CSS</a></li>
-            	<li><a href="https://www.w3.org/WAI/WCAG21/Techniques/css/C28" class="css">C28: Specifying the size of text containers using em units </a></li>
-            </ul>
-         </section>
-         <section id="failure">
-            <h3>Failure</h3>
-         	<ul>
-         		<li><a href="../../techniques/failures/F104"></a></li>
-         	</ul>
-         </section>
+      <section>
+        <h4 id="results">Results</h4>
+        <p id="langimpact">No adverse effects occurred. The following are the specific findings:</p>
+        <dl>
+          <dt>Character Spacing</dt>
+          <dd>Individual characters in words remained intact though they were spaced a bit further apart.</dd>
+          <dt>Word Spacing</dt>
+          <dd>Words were spaced further apart. In languages that do not have words (e.g., Japanese) applying word spacing had no effect. This is expected.</dd>
+          <dt>Line Height</dt>
+          <dd>Changing line height did not separate diacritics from characters, nor did it adversely impact ascenders or descenders.</dd>
+        </dl>
+        <p>As previously discussed, the ability to read text with adjusted spacing is a user responsibility. This is true no matter the language.</p>
+        <p>The SC's exception addresses cases where a text style property is not used in a language or script. In such cases, authors are only required to ensure relevant properties do not break the layout.</p>
+      </section>
+    </section>
+    <section>
+      <h3>Other references</h3>
+      <ul>
+        <li>Allan, Kirkpatrick, Lawton Henry, Editors. (2017). <a href="https://www.w3.org/TR/low-vision-needs/#spacing">Accessibility Requirements for People with Low Vision (3.4 Spacing for Reading)</a>.  World Wide Web Consortium.</li>
+        <li><a href="https://github.com/openstyles/stylus/graphs/contributors">Stylus Team</a> (2012). <a href="https://github.com/openstyles/stylus/blob/master/README.md">Stylus browser extension</a> (Firefox, Chrome, and Opera) (compatible with Userstyles.org material).</li>
+        <li>Campbell, Alastair.  (2017). <a href="https://github.com/alastc/adaptation-scripts/blob/master/scripts/text-adaptation.js">Text Adaptation Bookmarklet</a>. GitHub.</li>
+        <li>Chung, Susana T. L. (2012). <a href="https://www.ncbi.nlm.nih.gov/pmc/articles/PMC3429790/">Dependence of Reading Speed on Letter Spacing in Central Vision Loss</a>. Optom Vis Sci.</li>
+        <li>Chung, Susana T. L. (2002). <a href="http://journals.sagepub.com/doi/pdf/10.1177/0264619607075995">The Effect of Letter Spacing on Reading Speed in Central and Peripheral Vision (PDF)</a>. IOVS ARVO Journals.</li>
+        <li>Mcleish, Eve. (2007).  <a href="http://journals.sagepub.com/doi/pdf/10.1177/0264619607075995">A study of the effect of letter spacing on the reading speed of young readers with low vision (PDF)</a>. The British Journal of Visual Impairment 25.2: 133-43.</li>
+        <li>Rello, L., &amp; Baeza-Yates, R. A. (2017). <a href="https://link.springer.com/article/10.1007/s10209-015-0438-8"> How to present more readable text for people with dyslexia</a>. Universal Access in the Information Society, 16(1), 29-49.</li>
+        <li> Sjoblom, A.M., Eaton, E. and Stagg, S.D., (2016). <a href="http://onlinelibrary.wiley.com/doi/10.1111/bjep.12127/full">The effects of letter spacing and coloured overlays on reading speed and accuracy in adult dyslexia</a>. British Journal of Educational Psychology, 86(4), pp. 630-639). </li>
+        <li>Zorzi,  Marco et, al. (2012). <a href="http://www.pnas.org/content/109/28/11455.full">Extra-large letter spacing improves reading in dyslexia</a>. Proceedings of the National Academy of Sciences.</li>
+      </ul>
+    </section>
+  </section>
+  <section id="techniques">
+    <h2>Techniques</h2>
+      <section id="sufficient">
+        <h3>Sufficient</h3>
+        <ul>
+          <li><a href="../../techniques/CSS/C36">Allowing for Spacing Override (Draft)</a></li>
+          <li><a href="../../techniques/CSS/C35">C35</a></li>
+        </ul>
+
       </section>
-   </body>
+      <section id="advisory">
+      <h3>Advisory</h3>
+      <ul>
+        <li><a href="https://www.w3.org/WAI/WCAG21/Techniques/css/C8" class="css">C8: Using CSS letter-spacing to control spacing within a word</a></li>
+        <li><a href="https://www.w3.org/WAI/WCAG21/Techniques/css/C21" class="css">C21: Specifying line spacing in CSS</a></li>
+        <li><a href="https://www.w3.org/WAI/WCAG21/Techniques/css/C28" class="css">C28: Specifying the size of text containers using em units</a></li>
+      </ul>
+    </section>
+    <section id="failure">
+      <h3>Failure</h3>
+      <ul>
+        <li><a href="../../techniques/failures/F104"></a></li>
+      </ul>
+    </section>
+  </section>
+</body>
 </html>
diff --git a/understanding/21/timeouts.html b/understanding/21/timeouts.html
index 1f62a9131a..698906c613 100644
--- a/understanding/21/timeouts.html
+++ b/understanding/21/timeouts.html
@@ -1,21 +1,32 @@
 <!DOCTYPE html>
 <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
 	<head>
-		<meta charset="UTF-8" />
+		<meta charset="UTF-8"/>
 		<title>WCAG 2.0 Understanding Page</title>
-		<link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove" />
+		<link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/>
 	</head>
 	<body>
 		<h1>Understanding Timeouts</h1>
+
+		<section id="brief">
+			<h2>In brief</h2>
+			<dl>
+				<dt>Goal</dt><dd>Users do not lose data due to unknown timeouts.</dd>
+				<dt>Author task</dt><dd>Tell users how long their session can be inactive before they may lose information.</dd>
+				<dt>Why it's important</dt><dd>People with disabilities may need more time to complete actions.</dd>
+			</dl>
+	  
+		</section>
+
 		<section id="intent">
 			<h2>Intent</h2>
 			<p>The intent of this Success Criterion is to ensure that when a timeout is used, users know what duration of inactivity will cause the page to time out and result in lost data. The use of timed events can present significant barriers for users with cognitive disabilities, as these users may require more time to read content or to perform functions, such as completing an online form.</p>
 			<p>During the completion of an online process, such as to reserve a hotel room or purchase a plane ticket, a user with a cognitive impairment may become overwhelmed with lengthy instructions and data input required to complete the process. The user may not be able to complete the process in one sitting and may need to take a break. Users should be able to leave a process without losing their current place within the process, and without losing information that has already been entered. If users cannot take a break and check their work, many will often be unable to complete a task correctly.</p>
-<p>This Success Criterion works in tandem with Success Criterion 2.2.1 Timing Adjustable, but is specifically focused on notification of timeouts related to user inactivity.</p>
-      <p>The best way to conform to this success criterion is to keep the user data for at least 20 hours. This enables the user with disabilities and the aging community to start and finish a task, taking breaks as needed. However, when it is not practical to save the user data the author must warn the user about the duration of inactivity which will result in a timeout. Timeouts should be displayed to the user once at the beginning of the related task or process and not at each step.</p>
-      <p>This success criterion only applies to timeouts that are within the content provider's knowledge or control. For example, if the user closes a web browser or device and loses content in an open page that has not yet been submitted, the success criterion has not been violated.</p>
-    
-    </section>
+			<p>This Success Criterion works in tandem with Success Criterion 2.2.1 Timing Adjustable, but is specifically focused on notification of timeouts related to user inactivity.</p>
+			<p>The best way to conform to this success criterion is to keep the user data for at least 20 hours. This enables the user with disabilities and the aging community to start and finish a task, taking breaks as needed. However, when it is not practical to save the user data the author must warn the user about the duration of inactivity which will result in a timeout. Timeouts should be displayed to the user once at the beginning of the related task or process and not at each step.</p>
+			<p>This success criterion only applies to timeouts that are within the content provider's knowledge or control. For example, if the user closes a web browser or device and loses content in an open page that has not yet been submitted, the success criterion has not been violated.</p>
+			<p>Examples of privacy regulations mentioned in the Success Criterion note, and related compliance standards, are PCI DSS (Payment Card Industry Data Security Standard) and HIPAA (Health Insurance Portability and Accountability Act of 1996).</p>
+		</section>
 		<section id="benefits">
 			<h2>Benefits</h2>
 			<p>This Success Criterion helps users by ensuring they are notified about timeouts related to inactivity.</p>
diff --git a/understanding/22/accessible-authentication-enhanced.html b/understanding/22/accessible-authentication-enhanced.html
new file mode 100644
index 0000000000..978c7385dd
--- /dev/null
+++ b/understanding/22/accessible-authentication-enhanced.html
@@ -0,0 +1,116 @@
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+<head>
+   <meta charset="UTF-8"/>
+   <title>Understanding Accessible Authentication (Enhanced)</title>
+   <link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+</head>
+<body>
+    <h1>Understanding Accessible Authentication (Enhanced)</h1>
+
+    <section id="brief">
+        <h2>In brief</h2>
+        <dl>
+            <dt>Goal</dt><dd>Make logins possible with less mental effort.</dd>
+            <dt>What to do</dt><dd>Don't make people recognize objects or user-supplied images and media to login.</dd>
+            <dt>Why it's important</dt><dd>Some people with cognitive disabilities can't do puzzles, including identifying objects and non-text information they previously supplied.</dd>
+        </dl>
+    </section>
+
+    <section id="intent">
+        <h2>Intent of Accessible Authentication (Enhanced)</h2>
+
+        <p>The purpose of this Success Criterion is to ensure there is an accessible, easy-to-use, and secure method to log in, access content, and undertake tasks. This criterion is the same as <a href="accessible-authentication-minimum">Accessible Authentication (Minimum)</a> but without the exceptions for objects and user-provided content.</p>
+
+        <p>Any required step of the authentication process:</p>
+        <ul>
+            <li>cannot display a selection of images, videos, or audio clips, where users must choose which image they provided;</li>
+            <li>cannot display a selection of images, where users must choose the images which contain a specific object, such as a car.</li>
+        </ul>
+
+    </section>
+    <section id="benefits">
+      <h2>Benefits of Accessible Authentication (Enhanced)</h2>
+
+        <p>The benefits of this Success Criterion are the same as <a href="accessible-authentication-minimum.html#benefits">Accessible Authentication (Minimum)</a>.</p>
+
+      <p>People with cognitive issues relating to memory, reading (for example, dyslexia), numbers (for example, dyscalculia), or perception-processing limitations will be able to authenticate irrespective of the level of their cognitive abilities.</p>
+
+   </section>
+
+   <section id="examples">
+      <h2>Examples of Accessible Authentication (Enhanced)</h2>
+
+      <p>The examples of this Success Criterion are very similar to the <a href="accessible-authentication-minimum.html#examples">Accessible Authentication (Minimum)</a> examples.</p>
+
+      <ul>
+        <li>A web site uses a properly marked up username (or email) and password fields as the login authentication (meeting <a href="identify-input-purpose">Success Criterion 1.3.5 Input Purpose</a> and <a href="name-role-value">Success Criterion 4.1.2: Name, Role, Value</a>). The user's browser or integrated third-party password manager extension can identify the purpose of the inputs and automatically fill in the username and password.</li>
+        <li>A web site does not block paste functionality. The user is able to use a third-party password manager to store credentials, copy them, and paste them directly into a login form.</li>
+        <li>A web site uses WebAuthn so the user can authenticate with their device instead of username/password. The user's device could use any available modality. Common methods on laptops and phones are facial-scan, fingerprint, and PIN (Personal Identification Number). The web site is not enforcing any particular use; it is assumed a user will set up a method that suits them.</li>
+        <li>A web site offers the ability to login with a third-party provider using the OAuth method.</li>
+        <li>A web site that requires two-factor authentication allows for multiple options for the 2nd factor, including a USB-based method where the user simply presses a button to enter a time-based token.</li>
+        <li>A web site that requires two-factor authentication displays a QR code which can be scanned by an app on a user's device to confirm identity.</li>
+        <li>A web site that requires two-factor authentication sends a notification to a user's device. The user must use their device's authentication mechanism (for example, user-defined PIN, fingerprint, facial recognition) to confirm identity.</li>
+      </ul>
+
+   </section>
+
+
+   <section id="techniques">
+      <h2>Techniques for Accessible Authentication (Enhanced)</h2>
+
+      <section id="sufficient">
+        <h3>Sufficient Techniques</h3>
+        <ul>
+            <li>
+                <a href="../../techniques/general/G218.html" class="general">Email link authentication</a>
+            </li>
+            <li>
+                <a href="../../techniques/html/H100" class="html">Providing properly marked up email and password inputs</a>
+            </li>
+            <li>
+                Providing WebAuthn as an alternative to username/password (Potential future technique)
+            </li>
+            <li>
+                Providing a 3rd party login using OAuth (Potential future technique)
+            </li>
+            <li>
+                Using two techniques to provide 2 factor authentication (Potential future technique)
+            </li>
+        </ul>
+
+      </section>
+
+      <section id="advisory">
+        <h3>Additional Techniques (Advisory) for Accessible Authentication (Enhanced)</h3>
+      </section>
+
+      <section id="failure">
+        <h3>Failures for Accessible Authentication (Enhanced)</h3>
+        <ul>
+            <li>
+                <a href="../../techniques/failures/F109.html">Failure of Success Criterion 3.3.8 and 3.3.9 due to forcing transcription of individual password characters</a>
+            </li>
+        </ul>
+     </section>
+
+   </section>
+   <section id="resources">
+        <h2>Resources</h2>
+
+        <ul>
+            <li><a href="https://www.w3.org/TR/coga-gap-analysis/#table1">Cognitive Accessibility Gap Analysis Topic 1: Authentication and Safety</a></li>
+            <li><a href="https://w3c.github.io/coga/issue-papers/#web-security-and-privacy-technologies">Cognitive Accessibility Issue Papers 4. Web Security and Privacy Technologies</a> and <a href="https://w3c.github.io/coga/issue-papers/privacy-security.html">Web Security and Privacy Technologies</a></li>
+            <li><a href="https://www.w3.org/TR/coga-usable/#provide-a-login-that-does-not-rely-on-memory-or-other-cognitive-skills-pattern">Making Content Usable for People with Cogntive and Learning Disabilities 4.7.1 Provide a Login that Does Not Rely on Memory or Other Cognitive Skills</a></li>
+            <li><a href="https://rawgit.com/w3c/coga/master/issue-papers/privacy-security.html">Security and Privacy Technologies issue paper from the Cognitive Task Force</a>.</li>
+            <li><a href="https://www.w3.org/TR/webauthn/">WebAuthN specification</a>.</li>
+            <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Authentication_API">Web Authentication API on MDN</a>.</li>
+            <li><a href="https://webauthn.io/">WebAuthN Demo site</a>.</li>
+            <li><a href="https://en.wikipedia.org/wiki/OAuth">OAuth on Wikipedia</a>.</li>
+            <li><a href="https://www.ncsc.gov.uk/blog-post/let-them-paste-passwords">"Let them paste passwords", from the UK's National Cyber Security Centre</a></li>
+        </ul>
+
+    </section>
+
+</body>
+</html>
diff --git a/understanding/22/accessible-authentication-minimum.html b/understanding/22/accessible-authentication-minimum.html
new file mode 100644
index 0000000000..ceec50bf01
--- /dev/null
+++ b/understanding/22/accessible-authentication-minimum.html
@@ -0,0 +1,181 @@
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+<head>
+    <meta charset="UTF-8"></meta>
+    <title>Understanding Accessible Authentication (Minimum)</title>
+    <link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+</head>
+<body>
+    <h1>Understanding Accessible Authentication (Minimum)</h1>
+
+    <section id="brief">
+        <h2>In brief</h2>
+        <dl>
+            <dt>Goal</dt><dd>Make logins possible with less mental effort.</dd>
+            <dt>What to do</dt><dd>Don't make people solve, recall, or transcribe something to log in.</dd>
+            <dt>Why it's important</dt><dd>Some people with cognitive disabilities cannot solve puzzles, memorize a username and password, or retype one-time passcodes.</dd>
+        </dl>
+    </section>
+
+    <section id="intent">
+        <h2>Intent of Accessible Authentication (Minimum)</h2>
+
+        <p>The purpose of this Success Criterion is to ensure there is an accessible, easy-to-use, and secure method for users to authenticate when logging into an existing account. As the most prevalent form of authentication, Web sites commonly rely on usernames and passwords to log in. However, memorizing a username and password places a very high or impossible burden upon people with certain cognitive disabilities, as do additional steps often added to authentication processes. For instance, the need to transcribe a one-time verification code or requiring a puzzle to be solved.</p>
+
+        <p>While Web sites can use the recognition of objects or of non-text content provided by the user to meet this Success Criterion, such techniques do not fully support the cognitive accessibility community and should be avoided if possible. Refer to <a href="accessible-authentication-enhanced">Accessible Authentication (Enhanced)</a> for guidance to be more inclusive and accessible.</p>
+
+        <p>This Success Criterion is focused on authentication of existing users. It does <em>not</em> cover creation of a username or initiation of an account.  For many Web sites, establishing an initial username and credentials may not differ greatly from logging in with that username. The techniques used to satisfy this criterion (particularly allowing pasting into inputs and not relying on transcription) can also reduce the cognitive burden in account creation. However, the focus of the Success Criterion is on reducing the ongoing need for users to recall previously supplied information each time they log in or otherwise authenticate to an account.</p>
+      
+        <section id="cog-fun-tests">
+            <h3>Cognitive Function Tests</h3>
+            
+            <p>Remembering a site-specific password is a <a>cognitive function test</a>. Such tests are known to be problematic for many people with cognitive disabilities. Whether it is remembering random strings of characters, or a pattern gesture to perform on a touch screen, cognitive function tests will exclude some people. When a cognitive function test is used, at least one other authentication method must be available which is not a cognitive function test.</p>
+
+
+            <p>Some <abbr title="Completely Automated Public Turing test to tell Computers and Humans Apart">CAPTCHA</abbr> systems have an audio alternative of the visible text. If the user needs to transcribe this audio, it cannot be used to meet the Alternative exception.</p>            
+
+            <p>If there is more than one step in the authentication process, such as with multi-factor authentication, all steps need to comply with this Success Criterion to pass. There needs to be a path through authentication that does not rely on cognitive function tests.</p>
+
+            <p>Being able to recover or change the email and password is an important part of authentication. If the user is authenticating with alternative information in order to recover their account, there needs to be a method that is not a cognitive function test.</p>
+
+            <p>Many organizations are required to use 2-factor authentication that combines independent sources to confirm a user's identity. These sources can consist of combining authentication through:</p>
+
+            <ul>
+                <li>knowledge (e.g., password, letters in a passphrase or memorized swipe path);</li>
+                <li>possession (e.g., a verification code generated or received on a device, or scanning of a QR code on an external device);</li>
+                <li>biometrics (e.g., fingerprint scanning, facial recognition or keystroke dynamics).</li>
+            </ul>
+
+            <p>Most knowledge-based authentication methods rely on a cognitive function test, so mechanisms to assist users must be available. When authentication relies on performing an action on a separate device, it should be possible to complete the action without the need to transcribe information. It may not be possible to know what device-based authentication methods are available to a user; offering a choice of methods can allow them to choose the path that most suits them.</p>
+        </section>
+
+        <section id="auth-approaches">
+            <h3>Authentication Approaches</h3>
+            <p>Web sites can employ username (or email) and password inputs as an authentication method if the author enables the user agent (browsers and third-party password managers) to fill in the fields automatically. Generally, if the login form meets <a href="identify-input-purpose">Success Criterion 1.3.5 Input Purpose</a>, and the form controls have an appropriate accessible name in accordance with <a href="name-role-value">Success Criterion 4.1.2 Name, Role, Value</a>, the user agent should be able to reliably recognize the fields and automatically fill them in. However, if the user agent is actively blocked from filling in the fields (for instance, by a script), then the page would not pass this criterion because it prevents the mechanism from working.</p>
+        </section>
+
+        <section id="copy-paste">
+            <h3>Copy and paste</h3>
+            <p>Copy and paste can be relied on to avoid transcription. Users can copy their login credentials from a local source (such as a standalone third-party password manager) and paste it into the username and password fields on a login form, or into a web-based command line interfaces asking for a password. Blocking people from pasting into authentication fields, or using a different format between the copied text and the input field (for example, "Enter the 3rd, 4th, and 6th character of your password"), would force the user to transcribe information and therefore fail this criterion, unless another method is available.</p>
+        </section>
+
+        <section id="two-factor-authentication">
+            <h3>Two-factor authentication systems (verification codes)</h3>
+            <p>Beyond usernames and passwords, some sites may use two-factor authentication, asking the user to enter a verification code (also called a passcode or one-time password). A service that requires <em>manual</em> transcription of a verification code is not compliant. As with usernames and passwords, it must be possible for a user to at least paste the code (such as from a standalone third-party password manager, text message application, or software-based security key), or to allow user agents to fill in the fields automatically.</p>
+            <p>There are scenarios where a verification code must be received or generated on a secondary device. For example, authenticating in a web browser on a laptop requires a verification code that is sent as an SMS text message to a mobile phone. However, in most cases, it is possible for the code to then be sent directly to the primary device, where it can then be copied and pasted (for example, by copying the code on the secondary device and emailing it to the primary device, or through the use of a shared cross-device clipboard where copying content on the secondary device makes it available to paste on the primary device). Evaluating whether or not the code can be seamlessly transferred from the secondary device to the primary device is <em>outside of the scope</em> for this Success Criterion. For the purpose of evaluating Web content that relies on authentication using these types of secondary device systems, it is assumed that provisions are in place that make the code available in the user's clipboard. Evaluating this criterion therefore only requires verification that the web content does allow pasting the clipboard content in the related authentication challenge field.</p>
+            <p>Note that two-factor systems that do not rely on codes &#8212; including hardware authentication devices (such as YubiKey), secondary applications (either on the same primary device, or on a secondary device) that expect the user to confirm that it is indeed them trying to log in, and authentication methods provided by the user's operating system (such as Windows Hello, or Touch ID/Face ID on macOS and iOS) &#8212; are <em>not</em> a <a>cognitive function test</a>.</p>
+        </section>
+
+        <section id="object-recognition">
+            <h3>Object Recognition</h3>
+            <p>If a <a href="https://www.w3.org/TR/turingtest/">CAPTCHA</a> is used as part of an authentication process, there must be a method that does not include a cognitive function test, unless it meets the exception. If the test is based on something the website has set such as remembering or transcribing a word, or recognizing a picture the website provided, that would be a cognitive functional test. Recognizing objects, or a picture the user has provided is a cognitive function test; however, it is excepted at the AA level.</p>
+
+            <p>An object in this context means the general English definition ("a material thing that can be seen and touched") and can include vehicles and animals. If the test goes beyond recognition (e.g. multiply the number cats by the number of dogs), that does not meet the exception.</p>
+
+            <p>Some forms of object recognition may require an understanding of a particular culture. For example, taxis can appear differently in different locales. This is an issue for many people, including people with disabilities, but it is not considered an accessibility-specific issue.</p>
+
+        <p>Some CAPTCHAs and cognitive function tests used for authentication may only appear in certain situations, such as when ad blockers are present, or after repeated incorrect password entry. This criterion applies when these tests are used regardless of whether they are used every time or only triggered by specific scenarios.</p>
+
+        <p>There are a number of technologies that can be employed to prevent scripted abuse of the authentication process.</p>
+
+            <ul>
+                <li><a href="https://www.ietf.org/archive/id/draft-private-access-tokens-01.html#name-rate-limited-access">1.1.1. Rate-limited Access</a></li>
+                <li><a href="https://www.ietf.org/archive/id/draft-private-access-tokens-01.html#name-client-geo-location">1.1.2. Client Geo-Location</a></li>
+                <li><a href="https://www.ietf.org/archive/id/draft-private-access-tokens-01.html#name-private-client-authenticati">1.1.3. Private Client Authentication</a></li>
+            </ul>
+
+            <p>None of these systems are 100% effective. However, they may reduce the likelihood of a CAPTCHA being displayed.</p>
+        </section>
+        
+        <section id="personal-content">
+            <h3>Personal Content</h3>
+            <p>Personal content is sometimes used as a second factor for authentication. For example, as part of account creation the user would upload a picture, and when logging in they would be asked to select that picture from several possible alternatives. Care must be taken to provide adequate security in this case, since non-legitimate users might be able to guess the correct personal content when presented with a choice.</p>
+
+            <p>Text-based personal content does not qualify for this exception as it relies on recall (rather than recognition), and transcription (rather than selecting an item). Whilst picture-based personal content will still be a barrier for some people, text based versions tend to be a much larger barrier.</p>
+        </section>
+
+        <section id="hiding-content">
+            <h3>Hiding characters</h3>
+            <p>Another factor that can contribute to cognitive load is hiding characters when typing. Although this criterion requires that users do not have to type in (transcribe) a password, there are scenarios where that is necessary such as creating a password to be saved by a password manager. Providing a feature to optionally show a password can improve the chance of success for some people with cognitive disabilities or those who have difficulties with accurately typing.</p>
+        </section>
+
+
+    </section>
+    <section id="benefits">
+      <h2>Benefits of Accessible Authentication (Minimum)</h2>
+      
+      <p>People with cognitive issues relating to memory, reading (for example, dyslexia), numbers (for example, dyscalculia), or perception-processing limitations will be able to authenticate irrespective of the level of their cognitive abilities.</p>
+      
+   </section>
+   
+   <section id="examples">
+      <h2>Examples of Accessible Authentication (Minimum)</h2>
+      <p>The examples of this Success Criterion are the same as the <a href="accessible-authentication-enhanced.html#examples">Accessible Authentication (Enhanced)</a> examples.</p>
+
+      <ul>
+         <li>A web site uses a properly marked up username (or email) and password fields as the login authentication (meeting <a href="identify-input-purpose">Success Criterion 1.3.5 Input Purpose</a> and <a href="name-role-value">Success Criterion 4.1.2: Name, Role, Value</a>). The user's browser or integrated third-party password manager extension can identify the purpose of the inputs and automatically fill in the username and password.</li>
+         <li>A web site does not block paste functionality. The user is able to use a third-party password manager to store credentials, copy them, and paste them directly into a login form.</li>
+         <li>A web site uses WebAuthn so the user can authenticate with their device instead of username/password. The user's device could use any available modality. Common methods on laptops and phones are facial-scan, fingerprint, and PIN (Personal Identification Number). The web site is not enforcing any particular use; it is assumed a user will set up a method that suits them.</li>
+         <li>A web site offers the ability to login with a third-party provider using the OAuth method.</li>
+         <li>A web site that requires two-factor authentication allows for multiple options for the 2nd factor, including a USB-based method where the user simply presses a button to enter a time-based token.</li>
+         <li>A web site that requires two-factor authentication displays a QR code which can be scanned by an app on a user's device to confirm identity.</li>
+         <li>A web site that requires two-factor authentication sends a notification to a user's device. The user must use their device's authentication mechanism (for example, user-defined PIN, fingerprint, facial recognition) to confirm identity.</li>
+      </ul>
+      
+   </section>
+   
+   <section id="techniques">
+      <h2>Techniques for Accessible Authentication (Minimum)</h2>
+      
+      <section id="sufficient">
+        <h3>Sufficient Techniques for Accessible Authentication (Minimum)</h3>
+        <ul>
+            <li>
+                <a href="../../techniques/general/G218" class="general">Email link authentication</a>
+            </li>
+            <li>
+                <a href="../../techniques/html/H100" class="html">Providing properly marked up email and password inputs</a>
+            </li>
+            <li>
+                Providing WebAuthn as an alternative to username/password (Potential future technique)
+            </li>
+            <li>
+                Providing a 3rd party login using OAuth (Potential future technique)
+            </li>
+            <li>
+                Using two techniques to provide 2 factor authentication (Potential future technique)
+            </li>
+        </ul>
+      </section>
+      
+      <section id="advisory">
+        <h3>Additional Techniques (Advisory) for Accessible Authentication (Minimum)</h3>
+      </section>
+      
+      <section id="failure">
+        <h3>Failures for Accessible Authentication (Minimum)</h3>
+        <ul>
+            <li>
+                <a href="../../techniques/failures/F109.html">Failure of Success Criterion 3.3.8 and 3.3.9 due to forcing transcription of individual password characters</a>
+            </li>
+        </ul>
+      </section>
+      
+   </section>
+   <section id="resources">
+        <h2>Resources</h2>
+
+        <ul>
+            <li><a href="https://www.w3.org/TR/coga-gap-analysis/#table1">Cognitive Accessibility Gap Analysis Topic 1: Authentication and Safety</a></li>
+            <li><a href="https://w3c.github.io/coga/issue-papers/#web-security-and-privacy-technologies">Cognitive Accessibility Issue Papers 4. Web Security and Privacy Technologies</a> and <a href="https://w3c.github.io/coga/issue-papers/privacy-security.html">Web Security and Privacy Technologies</a></li>
+            <li><a href="https://www.w3.org/TR/coga-usable/#provide-a-login-that-does-not-rely-on-memory-or-other-cognitive-skills-pattern">Making Content Usable for People with Cognitive and Learning Disabilities 4.7.1 Provide a Login that Does Not Rely on Memory or Other Cognitive Skills</a></li>
+            <li><a href="https://www.w3.org/TR/webauthn/">WebAuthN specification</a></li>
+            <li><a href="https://webauthn.io/">WebAuthN Demo site</a></li>
+            <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Authentication_API">Web Authentication API on MDN</a></li>
+            <li><a href="https://en.wikipedia.org/wiki/OAuth">OAuth on Wikipedia</a></li>
+            <li><a href="https://www.ncsc.gov.uk/blog-post/let-them-paste-passwords">"Let them paste passwords", from the UK's National Cyber Security Centre</a></li>
+        </ul>
+    </section>
+
+</body>
+</html>
diff --git a/understanding/22/accessible-authentication.html b/understanding/22/accessible-authentication.html
deleted file mode 100644
index ecfa3b155e..0000000000
--- a/understanding/22/accessible-authentication.html
+++ /dev/null
@@ -1,126 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
-<head>
-   <meta charset="UTF-8"></meta>
-   <title>Understanding Accessible Authentication</title>
-   <link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"></link>
-</head>
-<body>
-   <h1>Understanding Accessible Authentication</h1>
-   
-    <section id="status" class="advisement">
-        <h2>Status</h2>
-        <p>This understanding document is part of the <a href="https://w3c.github.io/wcag/guidelines/22/"><strong>draft</strong> WCAG 2.2 content</a>. It may change or be removed before the final WCAG 2.2 is published.</p>
-    </section> 
-
-    <section class="remove">
-   
-        <h2>Accessible Authentication Success Criteria text</h2>
-        <blockquote>
-            <p class="conformance-level">AA</p>
-            
-
-            <p>For each step in an authentication process that relies on a <a>cognitive function test</a>, at least one other method is available that does not rely on a cognitive function test.</p>
-
-        </blockquote>
-        <h2>Cognitive function test definition</h2>
-        <blockquote>
-            <p>A task that requires the user to remember, manipulate, or transcribe information. Examples include, but are not limited to:</p>
-            <ul>
-                <li>memorization, such as remembering a username, password, set of characters, images, or patterns. The common identifiers name, e-mail, and phone number are not considered cognitive function tests as they are personal to the user and consistent across websites;</li>
-                <li>transcription, such as typing in characters;</li>
-                <li>use of correct spelling;</li>
-                <li>performance of calculations;</li>
-                <li>solving of puzzles.</li>
-            </ul>
-        </blockquote>
-    </section>
-   
-    <section id="intent">
-        <h2>Intent of Accessible Authentication</h2>
-
-        <p>The purpose of this success criterion is to ensure there is an accessible, easy-to-use, and secure method to log in and access content. Most web sites rely on usernames and passwords for logging in. Memorizing a username and password (or transcribing it manually) places a very high or impossible burden upon people with certain cognitive disabilities. </p>
- 
-        <p>Remembering a password is a <a>cognitive function test</a>. Such tests are known to be problematic for many people with cognitive disabilities. Whether it is remembering random strings of characters, a pattern gesture to perform on a touch screen, or identifying which images include a particular object, cognitive function tests will exclude some people. When a cognitive function test is used, at least one other authentication method must be available which is not a cognitive function test.</p>
-            
-        <p class="note">Web sites can employ username (or email) and password inputs as an authentication method if it meets <a href="#">Success Criterion 1.3.5 Input Purpose</a> and password managers / browser functionality is not blocked. When properly marked up, browser features or password managers can save the user’s information and refill the login.</p>
-
-        <p>If there is more than one step in the authentication process, such as with multi-factor authentication, all steps should comply with this success criterion. There should be a path through authentication that does not rely on cognitive function tests.</p>
-
-
-
-    </section>
-    <section id="benefits">
-      <h2>Benefits of Accessible Authentication</h2>
-      
-      <p>People with cognitive issues relating to memory, reading (e.g. dyslexia), numbers (e.g. dyscalculia), or perception-processing limitations will be able to authenticate irrespective of the level of their cognitive abilities.</p>
-      
-   </section>
-   
-   <section id="examples">
-      <h2>Examples of Accessible Authentication</h2>
-
-      <ul>
-         <li>A web site uses a properly marked up username and password as the login authentication. Copy &amp; paste is not blocked on the inputs, so the user's browser or extension can identify the purpose of the inputs and automatically fill in the username and password.</li>
-         <li>A web site uses WebAuthn so the user can authenticate with their device instead of username/password. The user's device could use any available modality. Common methods on laptops and phones are facial-scan, fingerprint, and pin number. The web site is not enforcing any particular use, it is assumed a user will setup a method that suits them.</li>
-         <li>A web site offers the ability to login with a 3rd party provider using the OAuth method.</li>
-         <li>A web site that requires 2-factor authentication allows for multiple options for the 2nd factor, including a USB-based method where the user simply presses a button to enter a time-based token.</li>
-      </ul>
-      
-   </section>
-
-   
-   <section id="techniques">
-      <h2>Techniques for Accessible Authentication</h2>
-      
-      
-      <section id="sufficient">
-         <h3>Sufficient Techniques for Accessible Authentication</h3>
-         
-         
-         <ol>
-            <li>
-                <a href="../../techniques/general/G218.html" class="general">Email link authentication</a>
-            </li>
-            <li>
-                @@ Providing a properly marked up email and password inputs.
-            </li>
-            <li>
-                @@ Providing WebAuthn as an alternative to username/password.
-            </li>
-            <li>
-                @@ Providing a 3rd party login using oAuth.
-            </li>
-            <li>
-                @@ Using two techniques provide 2 factor authentication.
-            </li>
-         </ol>
-         
-      </section>
-      
-      <section id="advisory">
-         <h3>Additional Techniques (Advisory) for Accessible Authentication</h3>
-         
-      </section>
-      
-      <section id="failure">
-         <h3>Failures for Accessible Authentication</h3>
-
-      </section>
-      
-   </section>
-   <section id="resources">
-        <h2>Resources</h2>
-
-        <ul>
-            <li><a href="https://rawgit.com/w3c/coga/master/issue-papers/privacy-security.html">Security and Privacy Technologies issue paper from the Cognitive Task Force</a>.</li>
-            <li><a href="https://www.w3.org/TR/webauthn/">WebAuthN specification</a>.</li>
-            <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Authentication_API">Web Authentication API on MDN</a>.</li>
-            <li><a href="https://webauthn.io/">WebAuthN Demo site</a>.</li>
-            <li><a href="https://en.wikipedia.org/wiki/OAuth">OAuth on Wikipedia</a>.</li>
-        </ul>
-
-    </section>
-   
-</body>
-</html>
diff --git a/understanding/22/consistent-help.html b/understanding/22/consistent-help.html
new file mode 100644
index 0000000000..f0bb522d29
--- /dev/null
+++ b/understanding/22/consistent-help.html
@@ -0,0 +1,163 @@
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+<head>
+   <meta charset="UTF-8"></meta>
+   <title>Understanding Consistent Help</title>
+   <link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+</head>
+<body>
+    <h1>Understanding Consistent Help</h1>
+
+    <section id="brief">
+      <h2>In brief</h2>
+      <dl>
+          <dt>Goal</dt><dd>Make it easier to find help and support.</dd>
+          <dt>What to do</dt><dd>Put help in the same place when it is on multiple pages.</dd>
+          <dt>Why it's important</dt><dd>People who need help can find it more easily if it's in the same place.</dd>
+      </dl>
+    </section>
+
+    <section id="intent">
+
+         <h2>Intent of Consistent Help</h2>
+
+         <p>The intent of this Success Criterion is to ensure users can find help for completing tasks on a Web site, when it is available. When the placement of the help mechanism is kept consistent across a set of pages, users looking for help will find it easier to identify. This is distinct from interface-level help, such as contextual help, features like spell checkers, and instructional text in a form. </p>
+
+         <p>Locating the help mechanism in a consistent location across pages makes it easier for users to find it.  For example, when a mechanism or link is located in the header of one Web page, it will be easier to find if it is in the header of other pages. The help mechanism, such as a contact phone number, may be provided directly on the page, or it may also be a direct link to a contact page. Regardless of which approach is used, the mechanism must be located in the same relative order on each page within the set of pages.</p>
+
+         <p>When testing this Success Criterion, it is the help item which is relative to the rest of the content. When testing a page, other content that is present across the set of web pages and is before the help item should be before the help item on this page. Items which are after the help item on other pages should be after the help item on this page.</p>
+
+         <p>If the help item is visually in a different location, but in the same serial order, that is not helpful from a user's point of view, but it would not fail this criterion.</p>
+
+         <p>When having problems completing a task on a Web site (or part of a Web site, what we call a <a>set of Web pages</a>), people with some types of disabilities may not be able to work through the issue without further help.  Issues could include difficulty:
+         completing a form, or finding a document or page which provides information required to complete a task.</p>
+
+         <p>Without help, some users may abandon the task. They may also fail to correctly complete a task, or they may require assistance from people who do not necessarily keep private information secure.</p>
+
+         <p>While it is recommended to consistently implement a help mechanism across a set of web pages, this criterion specifically pertains to pages that do include such a mechanism. Therefore, the absence of a help mechanism on certain pages within a set does not constitute a violation.</p>
+
+         <section id="limitations">
+            <h3>Limitations and Exceptions</h3>
+
+            <p>It is not the intent of this Success Criterion to require authors to provide help or access to help. The Criterion only requires that <em>when</em> one of the listed forms of help is available across multiple pages that it be in a consistent location. It does not require authors to provide help information on PDFs or other static documents that may be available for viewing/download from the Web pages. PDFs and other static documents are not considered part of the "<a>set of web pages</a>" from which they are downloaded.</p>
+
+            <p>It is also not the intent of this Success Criterion to require a human be available at all times. Ideally, if the human contact is not available during certain hours or certain days then information would be provided so the user can tell when it will be available. </p>
+
+            <p>This Success Criterion only requires help mechanisms to be consistent <em>within</em> a particular <a>set of web pages</a>. Some complex Web sites consist of multiple different sets of web pages with different purposes. For example, a web-based spreadsheet application might have one set of pages for editing spreadsheets and a separate set of pages for marketing the application. This Success Criterion would allow the different sets of web pages to use different help mechanism locations. However, it is best if help mechanisms are located as consistently as possible even among different related sets of web pages.</p>
+
+            <p>This Success Criterion contains an exception when "a change is initiated by the user." This exception is intended to cover cases where a user performs an action with the intent of changing the display or layout of a page, such as changing the zoom level, orientation, or viewport size. Help mechanism locations may change in response to such a user-initiated change; as the criterion's second note clarifies, "this criterion is concerned with relative order across pages displayed in the same page variation (e.g., same zoom level and orientation)."</p>
+
+            <p>This exception allows the location in a smaller viewport to be different than in a larger viewport. However, it is best if the mechanism or link is consistent across a set of web pages. A consistent location, both visually and programmatically, is the most usable.</p>
+            
+            <p>This exception is <em>not</em> intended to treat every action that a user might initiate as a "change"; to qualify for the exception, the user must be initiating an action that would reasonably be expected to change the relative order of components within a page. For example, merely navigating between pages within a set of web pages is not a "change initiated by the user" for the purposes of this exception. Similarly, logging into or out of a page would not typically qualify, unless logging in would present the user with a distinct <a>set of web pages</a>.</p>
+         </section>
+
+         <section id="help-mechanisms">
+            <h3>Help Mechanisms</h3>
+
+            <p>Typical help mechanisms include:</p>
+            <ul>
+               <li>Human contact details such as a phone number, email address, hours of operation.</li>
+               <li>Human contact mechanism such as a messaging system, chat client, contact form, social media channel.</li>
+               <li>Self-help option such as an up-to-date Frequently Asked Questions, How Do I page, Support page.</li>
+               <li>A fully automated contact mechanism such as a chatbot.</li>
+            </ul>
+
+            <p>The order of the types of help listed in the Success Criterion does not imply priority.</p>
+         </section>
+         <section id="support-for-coga">
+            <h3>Support for people with cognitive and learning disabilities</h3>
+
+            <p>This section is not required by the Consistent Help success criterion, but provides advice related to <a href="https://www.w3.org/TR/coga-usable/#support-user-story">Making Content Usable for People with Cognitive and Learning Disabilities</a>.</p>
+
+            <p>The human contact details enable users to connect with the  organization or the part of the organization that can assist with the content. For example, an online jobs / recruitment portal may provide a contact method for the team that supports the recruitment portal and not a catch-all for the entire company. Each layer of contact added prolongs the time before the user will receive help.</p>
+
+            <p>The human contact mechanism enables a person to express what they are looking for using their own words. For some with cognitive disabilities, this may be the best way for them to find an answer to their problem.</p>
+
+            <p>For pages for which no human support is available it helps if a self-help option says that no human support is available. Self-help options can go beyond allowing the user to search within the site. Contextual help is still recommended (see <a href="help">Success Criterion 3.3.5</a> for more information), but a self-help option provides a single location that makes it easier for people with cognitive disabilities to understand what help is available without having to hunt for it. While some people may easily be able to identify that no support would be available for a particular type of Web site, this may not be apparent to some users with disabilities.</p>
+
+            <p>Chatbots can work for many people, and particularly for people with cognitive disabilities if they:</p>
+
+            <ul>
+               <li>recognize misspelled words,</li>
+               <li>provide human contact details if the chatbot is unable to provide a satisfactory response after 3 attempts, and</li>
+               <li>can be dismissed with a single interaction, and recalled using a link or button.</li>
+            </ul>
+
+            <p>This criterion does not require that a site provide a help mechanism. However, when help is available:</p>
+            <ul>
+               <li>People who may have difficulty locating help are more likely to find it and complete their task.</li>
+               <li>Users that experience cognitive fatigue or cognitive shut down will be able to reserve their energy for the task, instead of using it to find support.</li>
+               <li>Enabling users (especially those with cognitive disabilities) to find solutions while expressing their question using their own words (for example by interacting with a chatbot) increases their chances of success for completing a task.</li>
+            </ul>
+      
+              <p>Self help methods beyond the site, such as using internet search to find the contact information for an organization, can be too difficult. Further, the user's disability may make it more difficult to find the help available (such as a "contact us" link, phone number, or support page) if the information is not consistently present within a few interactions (e.g., displayed in the header, or via a menu). In addition, for some users with disabilities, struggling to complete a task on a site may cause additional cognitive challenges when searching for help within the site.</p>
+      
+              <p>When a user is quickly able to find help, they are able to complete the task even if they encounter challenges.</p>
+         </section>
+   </section>
+
+   <section id="benefits">
+      <h2>Benefits of Consistent Help</h2>
+
+      <ul>
+         <li>People who may have difficulty locating help are more likely to find it when it is consistently located.</li>
+      </ul>
+   
+
+   </section>
+
+   <section id="examples">
+      <h2>Examples of Consistent Help</h2>
+
+      <ul>
+         <li>On-line job application: Some of the application questions may be hard for new job seekers to understand even after reading the contextual help. For example, the form may request their identification number, but they may have several and not know which one to enter. Consistently located contact information will enable them to use phone or email so they can get an answer to their question.</li>
+         <li>Medical appointment scheduling form: When the service a patient is trying to book is not easily findable within the interface, they may need human help. A consistently located messaging option (chat client) enables them to quickly interact with a staff person that can help, without requiring them to manage a second interface.</li>
+         <li>Finding a specific policy or procedure: An employee who needs to complete a work task may have difficulty locating the specific policy or procedure document on their employer's Web site. A consistently located "How Do I" page may include the information that enables them to independently complete this task.</li>
+      </ul>
+
+   </section>
+
+
+   <section id="techniques">
+      <h2>Techniques for Consistent Help</h2>
+
+
+      <section id="sufficient">
+         <h3>Sufficient Techniques for Consistent Help</h3>
+         <ul>
+            <li><a href="../../techniques/general/G220" class="general">Provide a contact-us link in a consistent location</a></li>
+         </ul>
+      </section>
+
+      <section id="advisory">
+         <h3>Additional Techniques (Advisory) for Consistent Help</h3>
+
+      </section>
+
+      <section id="failure">
+         <h3>Failures for Consistent Help</h3>
+
+         <ul>
+            <li>Inconsistent Help Location
+            </li>
+         </ul>
+      </section>
+   </section>
+   
+      <section id="resources">
+        <h2>Resources</h2>
+
+        <ul>
+            <li><a href="https://www.w3.org/TR/coga-gap-analysis/#table6">Cognitive Accessibility Gap Analysis Topic 6: Familiar Interface</a></li>
+            <li><a href="https://www.w3.org/TR/coga-usable/#make-it-easy-to-find-help-and-give-feedback-pattern">Making Content Usable for People with Cogntive and Learning Disabilities 4.8.5 Make it Easy to Find Help and Give Feedback</a></li>
+        </ul>
+
+    </section>
+
+</body>
+</html>
+
+
+
+ 
diff --git a/understanding/22/dragging-movements.html b/understanding/22/dragging-movements.html
new file mode 100644
index 0000000000..06537aa102
--- /dev/null
+++ b/understanding/22/dragging-movements.html
@@ -0,0 +1,127 @@
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+<head>
+   <meta charset="UTF-8"></meta>
+   <title>Understanding Dragging</title>
+   <link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+</head>
+<body>
+   <h1>Understanding Dragging Movements</h1>
+
+   <section id="brief">
+      <h2>In brief</h2>
+      <dl>
+         <dt>Goal</dt><dd>Don’t rely on dragging for user actions.</dd>
+         <dt>What to do</dt><dd>For any action that involves dragging, provide a simple pointer alternative.</dd>
+         <dt>Why it's important</dt><dd>Some people cannot use a mouse to drag items.</dd>
+      </dl>
+    </section>
+
+    <section id="intent">
+        
+      <h2>Intent of Dragging Movements</h2>
+
+      <p>The intent of this Success Criterion is to ensure functionality that uses a dragging movement has another <a>single pointer</a> mode of operation without the need for the dexterity required to drag elements.</p>
+
+      <p>Some people cannot perform dragging movements in a precise manner. Others use a specialized or adapted input device, such as a trackball, head pointer, eye-gaze system, or speech-controlled mouse emulator, which may make dragging cumbersome and error-prone.</p>
+
+      <p>When an interface implements functionality that uses dragging movements, users perform four discrete actions:</p>
+        
+           <ol>
+              <li>tap or click to establish a starting point, then</li>
+              <li>press and hold that contact while...</li>
+              <li>performing a repositioning of the pointer, before...</li>
+               <li>releasing the pointer at the end point.</li>
+            </ol>
+       
+      <p>Not all users can accurately press and hold that contact while also repositioning the pointer. An alternative method must be provided so that users with mobility impairments who use a pointer (mouse, pen, or touch contact) can use the functionality.</p>
+
+      <p>This requirement is separate from keyboard accessibility because people using a touch screen device may not use a physical keyboard. Keyboard specific interactions such as tabbing or arrow keys may not be possible when encountering a drag and drop control. Note, however, that providing a text input can be an acceptable single-pointer alternative to dragging. For example, an input beside a slider could allow any user to enter a precise value for the slider. In such a situation, the on-screen keyboard that appears for touch users offers a single-pointer means of entering an alphanumeric value.</p>
+
+      <p>This criterion does not apply to scrolling enabled by the user-agent. Scrolling a page is not in scope, nor is using a technique such as <abbr title="Cascading Style Sheets">CSS</abbr> <code>overflow</code> to make a section of content scrollable.</p>
+      
+		<section>
+        
+         <h3>Relationship to other requirements</h3>
+        
+         <p>Success Criteria 2.1.1 Keyboard and 2.1.3 Keyboard (No Exception) require dragging features to be keyboard accessible. However, achieving keyboard equivalence for a dragging operation does not automatically meet this Success Criterion. It is possible to create an interface that works with dragging and keyboard controls that does not work using only clicks or taps. While many designs can be created for a dragging alternative which address both keyboard accessibility and operability by single pointer operation, the two requirements should be assessed independently.</p>
+
+         <p>This Success Criterion applies to dragging movements as opposed to pointer gestures, which are covered in <a href="pointer-gestures">Success Criterion 2.5.1 Pointer Gestures</a>. Pointer gestures include directional path-based as well as multi-point gestures. In contrast, for dragging movements, only the start and end point of the movement matters, not the actual path.</p>
+
+         <p>Additional examples are selection rectangles that set the first x/y rectangle coordinate at the pointer position via a pointer down-event, and the second x/y coordinate, after a dragging movement, at the next up-event. A similar example is a connecting line drawn between two different items on the screen, as in an allocation test where users are required to draw a line between questions and corresponding answers. In these cases, the dragging movement requires an alternative way to accomplish the same action that does not rely on the dragging movement. For example, two separate single tap or click actions may define the rectangle coordinates or the start and end points of a connecting line.</p>
+
+      </section>
+      
+      <section>
+         <h3>Alternatives for dragging movements on the same page</h3>
+   
+         <p>Where functionality can be executed via dragging movements and an equivalent option exists that allows for single-pointer access without dragging, this Success Criterion is passed. It does not have to be the same component, so long as the functionality is equivalent. An example is a color wheel where a color can be changed by dragging an indicator. In addition, text fields for the numerical input of color values allow the definition of a color without requiring dragging movements. (Note that a text input is considered device agnostic; although the purpose is to enter characters, text entry can take place through voice, pointer or keyboard.)</p> 
+
+      </section>
+      
+      <section>
+         <h3>Distinguishing dragging movements from path-based pointer gestures</h3>
+      
+
+         <p>Dragging movements covered in this Success Criterion are pointer interactions where only the start- and endpoints matter. Once the pointer engages with a target, the direction of the dragging movement does not factor into the interaction until the pointer disengages the target. Since the dragging movement does not have an intermediate point, the dragging movement can go in any direction. Path-based gestures are covered in <a href="pointer-gestures.html">Success Criterion 2.5.1 Pointer Gestures</a>.</p> 
+
+      </section>
+
+      </section>
+  
+      <section id="benefits">
+         <h2>Benefits of Dragging Movements</h2>
+         
+         <ul>
+            <li>Users who struggle with performing dragging movements can still operate an interface with a pointer interface.</li>
+         </ul>
+      
+      </section>
+   
+   <section id="examples">
+      <h2>Examples of Dragging Movements with alternatives</h2>
+
+      <ul>
+         <li>A map allows users to drag the view of the map around, and the map has up/down/left/right buttons to move the view as well.</li>
+         <li>A sortable list of elements may, after tapping or clicking on a list element, provide adjacent controls for moving the element up or down in the list by simply tapping or clicking on those controls.</li>
+         <li>A taskboard that allows users to drag and drop items between columns also provides an additional pop-up menu after tapping or clicking on items for moving the selected element to another column by tapping or clicking on pop-up menu entries.</li>
+         <li>A radial control widget (color wheel) where the value can be set by dragging the marker for the currently selected color to another position, also allows picking another color value by tapping or clicking on another place in the color wheel.</li>
+         <li>A linear slider control widget, where the value can be set by dragging the visual indicator (thumb) showing the current value, allows tapping or clicking on any point of the slider track to change the value and set the thumb to that position. </li>  
+         <li>A widget where you can drag a gift to one person in a photo of a group of people also has a menu alternative where users can select the person that should receive the gift from the menu.</li>
+      </ul>
+      
+   </section>
+
+   <section id="techniques">
+      <h2>Techniques for Dragging</h2>
+      
+      <section id="sufficient">
+         <h3>Sufficient Techniques for Dragging Movements</h3>
+         
+         <ul>
+            <li>
+                <a href="../../techniques/general/G219" class="general">Ensuring that an alternative is available for dragging movements that operate on content</a>
+            </li>
+         </ul>
+         
+      </section>
+      
+      <section id="advisory">
+         <h3>Additional Techniques (Advisory) for Dragging Movements</h3>
+         
+      </section>
+      
+      <section id="failure">
+         <h3>Failures for Dragging Movements</h3>
+
+         <ul>
+            <li>								         
+                <a href="../../techniques/failures/F108" class="failure">Failure of Success Criterion 2.5.7 Dragging Movements due to not providing a single pointer method for the user to operate a function that does not require a dragging movement</a>						       
+            </li>
+         </ul>
+      </section>
+      
+   </section>
+   
+</body>
+</html>
diff --git a/understanding/22/dragging.html b/understanding/22/dragging.html
deleted file mode 100644
index 91e1fd1337..0000000000
--- a/understanding/22/dragging.html
+++ /dev/null
@@ -1,98 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
-<head>
-   <meta charset="UTF-8"></meta>
-   <title>Understanding Dragging</title>
-   <link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"></link>
-</head>
-<body>
-   <h1>Understanding Dragging</h1>
-   
-    <section id="status" class="advisement">
-        <h2>Status</h2>
-        <p>This understanding document is part of the <a href="https://w3c.github.io/wcag/guidelines/22/"><strong>draft</strong> WCAG 2.2 content</a>. It may change or be removed before the final WCAG 2.2 is published.</p>
-    </section>
-
-
-   <section class="remove">
-   
-        <h2>Dragging</h2>
-        <blockquote>
-        <p class="conformance-level">AA</p>
-        
-		<p>All functionality that uses a <a>dragging movement</a> for operation can be operated by a single pointer without dragging, unless dragging is <a>essential</a>.</p>
-		<p class="note">This requirement applies to web content that interprets pointer actions (i.e. this does not apply to actions that are required to operate the user agent or assistive technology).</p>
-		<p class="ednote">Is there an assistive technology that helps for people with mobility impairments? The group would like feedback on the frontier between AT &amp; author responsibility.</p>
-        </blockquote>
-   </section>
-   
-    <section id="intent">
-        
-        <h2>Intent of Dragging</h2>
-
-
-        <p>The intent of this Success Criterion is to ensure functionality that uses a dragging movement (e.g. sliders, drag-and-drop interfaces) has another <a href="#dfn-single-pointer">single pointer</a> mode of operation without the need for the dexterity required to drag elements.</p>
-
-        <p>Some people cannot perform dragging motions in a precise manner. Others use a specialized or adapted input device such as a head pointer, eye-gaze system, or speech-controlled mouse emulator, which makes dragging cumbersome, error-prone, or outright impossible.</p>
-            
-        <p>When an interface implements functionality that uses dragging motions, some users can tap or click, but not accurately maintain contact whilst performing a gesture. An alternative method must be provided so that users with mobility impairments that use a pointer (mouse, pen, or touch contact) can use the functionality.</p>
-		
-		<p>There is already a requirement for dragging features to be keyboard accessible, however, it is possible to create an interface that works with dragging and keyboard controls that does not work using only clicks or taps.</p>
-
-    </section>
-    <section id="benefits">
-      <h2>Benefits of Dragging</h2>
-      
-      <ul>
-         <li>Users who struggle with performing path-based gestures can still operate an interface with a pointer interface.</li>
-      </ul>
-      
-   </section>
-   
-   <section id="examples">
-      <h2>Examples of Dragging</h2>
-
-      <ul>
-         <li>A sortable list of elements may, after focussing a list element, provide adjacent controls for moving the element up or down in the list by simply tapping/clicking on those controls.</li>
-         <li>A kanban implementation may provide an additional pop-up menu for focused elements that can be activated by simple clicks/taps providing an option for moving the selected element to another kanban silo.</li>
-         <li>A radial control widget where the value can be set by dragging includes a text field that presents the current value and offers the input of the desired value via a keyboard (including on-screen virtual keyboards).</li>  
-         <li>A map allows users to drag the view of the map around, and the map has up/down/left/right buttons to move the view as well.</li>        
-      </ul>
-      
-   </section>
-
-   <section id="techniques">
-      <h2>Techniques for Dragging</h2>
-      
-      
-      <section id="sufficient">
-         <h3>Sufficient Techniques for Dragging</h3>
-         
-         
-         <ol>
-            <li>
-                <a href="../../techniques/general/G219" class="general">Ensuring that a single pointer operable alternative is available for dragging movements that operate on content</a>
-            </li>
-         </ol>
-         
-      </section>
-      
-      <section id="advisory">
-         <h3>Additional Techniques (Advisory) for Dragging</h3>
-         
-      </section>
-      
-      <section id="failure">
-         <h3>Failures for Dragging</h3>
-
-         <ul>
-            <li>								         
-                <a href="../../techniques/failures/F108" class="failure">Failure of Success Criterion 2.5.X Dragging due to not providing a single pointer method for the user to operate a function that does not require a dragging movement</a>						       
-            </li>
-         </ul>
-      </section>
-      
-   </section>
-   
-</body>
-</html>
diff --git a/understanding/22/findable-help.html b/understanding/22/findable-help.html
deleted file mode 100644
index 0316b403f5..0000000000
--- a/understanding/22/findable-help.html
+++ /dev/null
@@ -1,152 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
-<head>
-   <meta charset="UTF-8"></meta>
-   <title>Understanding Findable Help</title>
-   <link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"></link>
-</head>
-<body>
-   <h1>Understanding Findable Help</h1>
-   
-    <section id="status" class="advisement">
-        <h2>Status</h2>
-        <p>This understanding document is part of the <a href="https://w3c.github.io/wcag/guidelines/22/"><strong>draft</strong> WCAG 2.2 content</a>. It may change or be removed before the final WCAG 2.2 is published.</p>
-    </section>
-
-
-   <section class="remove">
-
-      <h2>Findable Help</h2>
-      <p>Success Criterion text:</p>
-      <blockquote>
-         <p class="conformance-level">A</p>
-
-         <p>For <a>single page Web applications</a> or any <a>set of Web pages</a>, if one of the following is available, then access to at least one option is included in the <a>same relative order</a> on each page:</p>
-            <ul>
-               <li>Human contact details;</li>
-               <li>Human contact mechanism;</li>
-               <li>Self-help option;</li>
-               <li>A fully automated contact mechanism.</li>
-            </ul>
-        
-        <p class="note">Access to help mechanisms may be provided directly on the page, or may be provided via a direct link to a different page containing the information"</p>
-        
-      </blockquote>
-      <p>Definition of Single page Web applications:</p>
-      <blockquote>
-         <p>Pages obtained from a single URI that provide navigation which changes the meaning of the Web page</p>
-      </blockquote>
-   </section>
-   
-    <section id="intent">
-        
-        <h2>Intent of Findable Help</h2>
-
-
-        <p>The intent of this success criterion is to ensure users can find help for completing tasks on a Web site. This is distinct from interface-level help, such as contextual help, features like spell checkers, and instructional text in a form. </p>
-
-        <p>Locating the help mechanism in a consistent location across pages makes it easier for users to find it.  For example, when a mechanism or link is located in the header of a Web page, it will be presented in the header of all pages within the set of Web pages.</p>
-            
-        <p>The location in a smaller viewport may be different than in a larger viewport but the mechanism or link will remain in the same location throughout the size.  The location should remain consistent both visually and programmatically.</p>
- 
-        <p>While it would be best for all sites to offer this type of help, the requirement is for:</p>
-        <ul>
-           <li>single page Web applications, or</li>
-            <li>any set of Web pages with blocks of content that are repeated on multiple Web pages,</li>
-            </ul>
-         <p>and is actively supported.</p>
-
-        <p>When having problems completing a task on a Web site, people with some types of disabilities may not be able to work through the issue without further help.  Issues could include difficulty:
-			completing a form, or finding a document or page which provides information required to complete a task.</p>
-
-        <p>Without help, some users may abandon the task. They may also fail to correctly complete a task, or they may require assistance from people who do not necessarily keep private information secure.</p>
-
-        <p>Self help methods beyond the site, such as using internet search to find the contact information for an organization, can be too difficult. Further, the user’s disability may make it more difficult to find the help available (such as a “contact us” link, phone number, or support page) if the information is not present within a few interactions (e.g., displayed in the header, or via a menu). In addition, for some users with disabilities, struggling to complete a task on a site may cause additional cognitive challenges when searching for help within the site.</p>
-
-        <p>When a user is quickly able to find help, they are able to complete the task even if they encounter challenges.</p>
-
-        <p>At least one of the following mechanisms to get help should be included:</p>
-			<ul>
-            <li>Human contact details such as a phone number, email address, hours of operation.</li>
-            <li>Human contact mechanism such as a messaging system, chat client, contact form, social media channel.</li>
-            <li>Self-help option such as an up-to-date Frequently Asked Questions, How Do I page, Support page.</li>
-            <li>A fully automated contact mechanism such as a chatbot.</li>
-         </ul>
-
-        <p>The human contact details should enable the user to connect with the  organization or the part of the organization that can assist with the content. For example, an online jobs / recruitment portal should provide a contact method for the team that supports the recruitment portal and not a catch-all for the entire company. Each layer of contact added prolongs the time before the user will receive help.</p>
-
-        <p>The human contact mechanism enables a person to express what they are looking for using their own words. For some with cognitive disabilities, this may be the best way for them to find an answer to their problem.</p>
-
-        <p>For pages for which no human support is available, a self-help option should say that no human support is available.  Self-help options should go beyond allowing the user to search within the site. Contextual help is still recommended (See SC 3.3.5 for more information) but a self-help option should provide a single location that makes it easier for people with cognitive disabilities to understand what help is available without having to hunt for it. While some people may easily be able to identify that no support would be available for a particular type of Web site, this may not be apparent to some users with disabilities.</p>
-
-        <p>If a chatbot is provided, it should meet other WCAG success criteria for your conformance level. Chatbots which work more effectively for everyone, and particularly for people with cognitive disabilities should:</p>
-
-			<ul>
-            <li>recognize misspelled words,</li>
-            <li>provide human contact details if the chatbot is unable to provide a satisfactory response after 3 attempts, and</li>
-            <li>be dismissed with a single interaction, and recalled using a link or button.</li>
-         </ul>
-
-        <p>It is not the intent of this Success Criterion to require authors to provide help information on PDFs or other static documents that may be available for viewing/download from the Web pages. It is also not the intent to require contact information if:</p>
-         <ul>
-            <li>A Web site is not supported,</li>
-				<li>Content is archived, or </li>
-            <li>When finding help would invalidate the activity such as in a testing situation. </li>
-         </ul>
-
-        <p>It is also not the intent of this Success Criterion to require a human be available at all times. If the human contact is not available during certain hours or certain days, information should be provided so the user can tell when it will be available. </p>
-   </section>
-
-   <section id="benefits">
-      <h2>Benefits of Findable Help</h2>
-      
-      <ul>
-         <li>This Success Criterion helps people who may have difficulty locating help that is not part of the page they are using. Ensuring they can connect with help allows them to complete the task.</li>
-         <li>When a user can easily find help for their specific questions, they are more successful completing tasks.</li>
-         <li>Users that experience cognitive fatigue or cognitive shut down will be able to reserve their energy for the task, instead of using it to find support.</li>
-         <li>Enabling users (especially those with cognitive disabilities) to find solutions while expressing their question using their own words increases their chances of success for completing a task.</li>
-      </ul>
-      
-   </section>
-   
-   <section id="examples">
-      <h2>Examples of Findable Help</h2>
-
-      <ul>
-         <li>On-line job application - Some of the application questions may be hard for new job seekers to understand even after reading the contextual help. For example, the form may request their identification number, but they may have several and not know which one to enter. Easily findable contact information will enable them to use phone or email so they can get an answer to their question.</li>   
-         <li>Medical appointment scheduling form - When the service a patient is trying to book is not easily findable within the interface, they may need human help. A built-in messaging option (chat client) enables them to quickly interact with a staff person that can help, without requiring them to manage a second interface.</li>   
-         <li>Finding a specific policy or procedure - An employee who needs to complete a work task may have difficulty locating the specific policy or procedure document on their employer’s Web site. A How Do I page may include the information that enables them to independently complete this task.</li>        
-      </ul>
-      
-   </section>
-
-   
-   <section id="techniques">
-      <h2>Techniques for Findable Help</h2>
-      
-      
-      <section id="sufficient">
-         <h3>Sufficient Techniques for Findable Help</h3>
-         <ol>
-            <li><a href="../../techniques/general/G220" class="general">Provide a contact-us link</a></li> 
-         </ol>
-      </section>
-      
-      <section id="advisory">
-         <h3>Additional Techniques (Advisory) for Findable Help</h3>
-         
-      </section>
-      
-      <section id="failure">
-         <h3>Failures for Findable Help</h3>
-
-         <ul>
-            <li>Inconsistent Help Location					       
-            </li>
-         </ul>
-      </section>
-      
-   </section>
-   
-</body>
-</html>
diff --git a/understanding/22/fixed-reference-points.html b/understanding/22/fixed-reference-points.html
deleted file mode 100644
index acfb6b3963..0000000000
--- a/understanding/22/fixed-reference-points.html
+++ /dev/null
@@ -1,121 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
-<head>
-   <meta charset="UTF-8"></meta>
-   <title>Understanding Fixed Reference Points</title>
-   <link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"></link>
-</head>
-<body>
-   <h1>Understanding Fixed Reference Points</h1>
-   
-    <section id="status" class="advisement">
-        <h2>Status</h2>
-        <p>This understanding document is part of the <a href="https://w3c.github.io/wcag/guidelines/22/"><strong>draft</strong> WCAG 2.2 content</a>. It may change or be removed before the final WCAG 2.2 is published.</p>
-    </section>
-
-
-   <section class="remove">
-   
-      <h2>Fixed Reference Points Normative Text</h2>
-      <blockquote>
-         <p class="conformance-level">A</p>
-
-         <p>When a <a>web page</a> or <a>set of web pages</a> is an <a>electronic publication</a> with <a>pagebreak locators</a>, a mechanism is available to navigate to each locator and each locator maintains its place in the flow of content, even when the formatting or platform change.</p>
-      </blockquote>
-
-      <h3>Definitions:</h3>
-      <p><strong>electronic publication</strong>: Content presented as a collection of related articles, document in the form of a book, textbook, magazine article, journal, a single journal article that is presented as having different pages, scholarly journal, or newspaper article in digital format.</p>
-      <p><strong>pagebreak locators</strong> Visual and/or programmatic markers that are arranged in a meaningful sequence to determine the location of a page in relation to others in the set.</p>
-      <p>Examples would be:</p>
-      <ul>
-         <li>Corresponding pages between a print book and a digital version of the same publication. (A digital pixel precise manifestation of the published print version)</li>
-         <li>Page numbering in the print version of an ebook</li>
-         <li>Page numbering in an electronic version of the ebook</li>
-         <li>A digital book is published is with no print equivalent and page break locators are inserted which supports direct navigation across platforms and form factors.</li> 
-         <li>Virtual page</li>  
-         <li>Synchronizing reading people with different form factors and platforms, screen sizes, can be on the same page.</li>
-      </ul>
-   
-   </section>
-   
-   <section id="intent">
-        
-      <h2>Intent of Fixed Reference Points</h2>
-
-
-      <p>The purpose of this success criterion is to allow users with disabilities to find references to content based on the page locators found in the default view or printed version of a publication.</p>
-
-      <p>The term “on the same page” is common in English to describe when two people are talking about the same thing and agree on the content of the conversation. This success criterion makes sure that all users can literally be on the same page.</p>
-         
-      <p>Page numbering has long been a fundamental way to identify and communicate the location of written content. They are used constantly in references, footnotes, endnotes, and bibliographies. Particularly, they are critical in academic and learning environments.</p>
-
-      <p>Electronic publishing has provided valuable access to content for people who are blind, have low vision, dyslexia or other cognitive disabilities. In order to consume the information the content may be adapted to use a different  layout, or presented to them using assistive technology.  If there is no clear way to find a specific page from the print version that was referenced by a professor in class, because the electronic version is zoomed-in and that paragraph is on page 145 of the user’s version of the content, the user misses out on valuable and sometimes critical information to understanding the reference.</p>
-
-		<p class="note">The term “article” in the success criterion does not refer to the <code>&lt;article&gt;</code> tag in PDF or InDesign.</p>
-
-    </section>
-    <section id="benefits">
-      <h2>Benefits of Fixed Reference Points</h2>
-      
-      <ul>
-         <li>People who are blind or who have low vision or those who may be magnifying content because of a cognitive disability will still be able to find their place and find references to content that are based on page numbers of the print or default version of the publication.</li>
-      </ul>
-      
-   </section>
-   
-   <section id="examples">
-      <h2>Examples of Fixed Reference Points</h2>
-
-      <ul>
-         <li>An electronic publication (ePub) document includes navigation to page number references that match the paper version of the publication.</li>
-      </ul>
-      
-   </section>
-   <section id="tests">
-      <h2>Tests</h2>
-      <section class="test-procedure">
-         <h3>Procedure</h3>
-         <p>Identify page break locators in the content.</p>
-         <ol>
-            <li>If the electronic publication is in one url page, check that a user can navigate focus to each page break locator from somewhere else on the page without relying on the natural tab order.</li>
-            <li>If the electronic publication is across a set of pages there is a way to navigate to each page break locator from another web page in the set.</li>
-         </ol>
-      </section>
-      <section class="test-results">
-         <h3>Expected Results</h3>
-         <ul>
-            <li>#1 or #2 is true depending on whether it is an electronic publication on on web page (url) or across set of web pages.</li>
-            <p></p>
-         </ul>
-      </section>
-   </section>
-   <section id="techniques">
-      <h2>Techniques for Fixed Reference Points</h2>
-      
-      
-      <section id="sufficient">
-         <h3>Sufficient Techniques for Fixed Reference Points</h3>
-         
-         
-         <ol>
-            <li>
-                <a href="../../techniques/html/H99" class="general">Ensure that a page list navigation aid is provided and that it includes a list of all the available locations in the digital publication</a>
-            </li>
-         </ol>
-         
-      </section>
-      
-      <section id="advisory">
-         <h3>Additional Techniques (Advisory) for Fixed Reference Points</h3>
-         
-      </section>
-      
-      <section id="failure">
-         <h3>Failures for Fixed Reference Points</h3>
-
-      </section>
-      
-   </section>
-   
-</body>
-</html>
diff --git a/understanding/22/focus-appearance-enhanced.html b/understanding/22/focus-appearance-enhanced.html
deleted file mode 100644
index 8b3d5d3061..0000000000
--- a/understanding/22/focus-appearance-enhanced.html
+++ /dev/null
@@ -1,124 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
-<head>
-   <meta charset="UTF-8"></meta>
-   <title>Understanding Focus Appearance (Enhanced)</title>
-   <link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"></link>
-</head>
-<body>
-   <h1>Understanding Focus Appearance (Enhanced)</h1>
-   
-    <section id="status" class="advisement">
-        <h2>Status</h2>
-        <p>This understanding document is part of the <a href="https://w3c.github.io/wcag/guidelines/22/"><strong>draft</strong> WCAG 2.2 content</a>. It may change or be removed before the final WCAG 2.2 is published.</p>
-    </section>
-
-
-   <section class="remove">
-   
-        <h2>Focus Appearance (Enhanced) Success Criteria text</h2>
-        <blockquote>
-            <h4>Focus Appearance (Enhanced)</h4>
-    
-            <p class="conformance-level">AAA</p>
-            <p class="change">New</p>
-            
-            <p>For the keyboard focus indicator of each User Interface Component, all of the following are true:</p>
-            <ul>
-                <li><strong>Minimum area:</strong> The <a>focus indication area</a> is greater than or equal to a 2 <a>CSS pixel</a> solid border around the control.</li>
-                <li><strong>Change of contrast:</strong> Color changes used to indicate focus have a contrast ratio of at least 4.5:1 with the colors changed from the unfocused control.</li>
-                <li><strong>Not obscured:</strong> No part of the focus indicator is hidden by author-created content.</li>
-            </ul>
-        </blockquote>
-     </section>
-   
-    <section id="intent">
-        
-        <h2>Intent of Focus Appearance (Enhanced)</h2>
-
-
-        <p>The purpose of this success criterion is to ensure a keyboard focus indicator is highly visible. This criterion is closely related to <a href="./focus-appearance-minimum.html">Success Criterion 2.4.11 Focus Appearance (Minimum)</a> and defines a higher level of visibility for the focus indicator.</p>
-
-        <p>In relation to Focus Visible (enhanced) this criterion:</p>
-        <ul>
-            <li>Expands the minimum area from 1 CSS pixel around the perimeter of the element to 2 CSS pixels around the perimeter.</li>
-            <li>Increases the change of contrast to 4.5:1.</li>
-            <li>Does not allow for any part of the element to be obscured by other content.</li>
-        </ul>
-        <p>The other aspects of the success criterion are the same as Focus Visible (Minimum).</p>
-        
-
-
-    </section>
-    <section id="benefits">
-      <h2>Benefits of Focus Appearance (Enhanced)</h2>
-      <p>The benefits of this success criterion are similar to Focus Appearance (Minimum).</p>
-      <ul>
-         <li>Letting anyone who relies on the keyboard to operate the page by enabling them to visually determine the component on which keyboard operations will interact at any point in time.</li>
-         <li>People with low vision are better able to follow a highly visible focus indicator.</li>
-         <li>People with attention limitations, short term memory limitations, or limitations in executive processes benefit by being able to discover where the focus is located.</li>
-      </ul>
-      
-   </section>
-   
-   <section id="examples">
-      <h2>Examples of Focus Visible</h2>
-      <p>The examples of this success criterion are similar to Focus Appearance (Minimum).</p>
-      <ul>
-         <li>When links receive focus, an outline is displayed around the link that contrasts with the background adjacent to the link.</li>
-         <li>When buttons receive focus, and outline is displayed within the button (around the text) that contrasts with the button’s background.</li>
-         <li>When text fields receive focus, an outline is displayed around the field, indicating that the input has focus.</li>  
-         <li>When radio buttons receive focus, an outline is displayed around the control, indicating that the input has focus.</li>        
-      </ul>
-      
-   </section>
-
-   
-   <section id="techniques">
-      <h2>Techniques for Focus Appearance (Enhanced)</h2>
-      
-      
-      <section id="sufficient">
-         <h3>Sufficient Techniques</h3>
-         
-         <p>@@@ Create a new techniques based on:</p>
-         <ol>
-            <li>
-                <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G195" class="general">Using an author-supplied, highly visible focus indicator</a>
-            </li>
-            <li>
-               <a href="../../techniques/css/C40">Creating a two-color focus indicator to ensure sufficient contrast</a>
-            </li>
-            <li>
-            	<a href="../../techniques/css/C41">Creating a contrasting focus indicator inside the component</a>
-            </li>
-         </ol>
-         
-      </section>
-      
-      <section id="advisory">
-         <h3>Additional Techniques (Advisory)</h3>
-         
-      </section>
-      
-      <section id="failure">
-         <h3>Failures</h3>
-
-         <ul>
-            <li>								         
-                <a href="https://www.w3.org/WAI/WCAG21/Techniques/failures/F78" class="failure">Failure due to styling element outlines and borders in a way that overrides or renders
-                    non-visible the default visual focus indicator
-                </a>						       
-            </li>
-            <li>								         
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/failures/F55" class="failure">Failure of Success Criterion 2.1.1, 2.4.7, and 3.2.1 due to using script to remove
-                  focus when focus is received
-               </a>						       
-            </li>
-         </ul>
-      </section>
-      
-   </section>
-   
-</body>
-</html>
diff --git a/understanding/22/focus-appearance-minimum.html b/understanding/22/focus-appearance-minimum.html
deleted file mode 100644
index b985bbfe10..0000000000
--- a/understanding/22/focus-appearance-minimum.html
+++ /dev/null
@@ -1,291 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
-<head>
-   <meta charset="UTF-8"></meta>
-   <title>Understanding Focus Visible</title>
-   <link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"></link>
-</head>
-<body>
-   <h1>Understanding Focus Appearance (Minimum)</h1>
-   
-    <section id="status" class="advisement">
-        <h2>Status</h2>
-        <p>This understanding document is part of the <a href="https://w3c.github.io/wcag/guidelines/22/"><strong>draft</strong> WCAG 2.2 content</a>. It may change or be removed before the final WCAG 2.2 is published.</p>
-    </section>
-
-
-   <section class="remove">
-   
-        <h2>Focus Appearance (Minimum) Success Criteria text</h2>
-        <blockquote>
-            <p class="conformance-level">AA</p>
-        
-            <p>For the keyboard focus indicator of each User Interface Component, all of the following are true:</p>
-            <ul>
-                <li><strong>Minimum area:</strong> The <a>focus indication area</a> is greater than or equal to a 1 <a>CSS pixel</a> border of the focused control, or has a thickness of at least 8 CSS pixels along the shortest side of the element.</li>
-                <li><strong>Change of contrast:</strong> The color change for the focus indication area has a contrast ratio of at least 3:1 with the colors of the unfocused state.</li>
-                <li><strong>Adjacent contrast:</strong> The focus indication area has a contrast ratio of at least 3:1 against all adjacent colors for the minimum area or greater, or has a thickness of at least 2 CSS pixels.</li>
-                <li><strong>Unobscured:</strong> The item with focus is not entirely hidden by author-created content</li>
-            </ul>
-            <p class="note">A keyboard focus indicator which has a pattern or gradient may have parts that do not meet the 3:1 contrast ratio for the change of contrast, as long as an area equal to the minimum does meet the contrast ratio.</p>
-            <p class="note">If the control has a visible boundary smaller than the hit area, the size measure is taken from the visible boundary.</p>
-            <dt class="new"><dfn>Focus indication area</dfn></dt>
-            <dd class="new">
-	            <p>the pixels that change between the focused and unfocused states of a <a>User Interface Component</a></p>   				
-            </dd>
-        </blockquote>
-     </section>
-   
-    <section id="intent">
-        
-        <h2>Intent of Focus Appearance (Minimum)</h2>
-
-
-        <p>The purpose of this success criterion is to ensure a keyboard focus indicator is clearly visible and discernible. This criterion is closely related to <a href="../20/focus-visible.html">SC 2.4.7 focus visible</a> and defines a minimum level of visibility.</p>
-
-        <p>For sighted people with mobility impairments who use a keyboard-like device (e.g. a switch, voice input), knowing the current point of focus is very important. Visible focus must also meet the needs of low-vision users, who may also be keyboard-only users.</p>
-            
-        <p>A keyboard focus indicator can take different forms, this success criterion sets a requirement to make it clearly distinguishable. For example, using a thick outline around the control that contrasts with the background would pass this criterion.</p>
-
-        <figure id="focus-indicator-strong">
-            <img src="img/focus-indicator-strong.png" alt="Three links on a white background with the middle one encompassed in a thick black border." width="250" />
-            <figcaption> A strong indicator around a link.</figcaption>
-        </figure>
-            
-        <section id="keyboard-focus">
-            <h3>Keyboard focus</h3>
-            <p>The keyboard focus is the point of interaction for someone using a keyboard. For environments with a keyboard operable interface, the keyboard focus can be moved around the interface in order to interact with different elements. Whichever element is being interacted with has focus.</p>
-
-            <p>In web pages some components may receive focus as a user presses the tab key to move to that component and then use the arrow keys to select an option (e.g. tabs, menu items). The item considered to be focused is whichever is being interacted with. For example, if you tab to a menu and arrow-down to a menu item, it is the menu item that is in focus as pressing enter would activate the menu item.</p>
-
-            <p>Some elements can take focus (such as the target of a skip link), however, it is only when the element is operable by keyboard controls that this criterion applies.</p>
-        </section>
-        <section id="size-of-indicator">
-            <h3>Minimum area</h3>
-
-            <p>The bigger the visible change, the easier it is for someone to see. Authors are encouraged to make the change as significant as possible, for example, by designing a thick border around the element, or significantly changing the background color.</p>
-
-            <p class="note">A border is the perimeter of the control, and defines its shape. A border is not a reference to the CSS property of the same name.</p>
-
-            <p>The minimum size of the focus indicator must be at least the area taken by a 1 CSS pixel border around the element. The indicator does not have to be a border, but the size of the area must be at least that size. For example, if a control is a rectangle of 90px wide and 30px tall, the size of the outer border is 90 + 90 + 30 + 30 = 240 CSS pixels.</p>
-
-            <p class="note">A <a>CSS pixel</a> is what developers use in CSS declarations like “width: 200px”, it is device-independent and not to be confused with device pixels which vary depending on the physical pixel density. <br />
-                The rest of this document notates CSS pixels as "px".
-            </p>
-
-            <p>The following 3 examples use a 90px wide by 30px tall button, therefore the surface area requirement is 240px. The middle button is focused in each example.</p>
-
-            <figure id="focus-indicator-innerline">
-                <img src="img/focus-indicator-innerline.png" alt="Three dark blue buttons on a white background. The middle button has a yellow inner border." width="284" />
-                <figcaption> The inner outline is slightly smaller than the outer edge of the component, but using a 2px thick indicator means it is well over the minimum requirement of 240px squared.</figcaption>
-            </figure>
-
-            <figure id="focus-indicator-underline">
-                <img src="img/focus-indicator-underline.png" alt="Three dark blue buttons on a white background. The middle button has a thick yellow line under the text." width="284" />
-                <figcaption> The thick (3px) yellow underline is almost as long as the longest edge, 80px x 3 meets the requirement of 240px.</figcaption>
-            </figure>
-
-            <p>If controls change size across different variations of a page (e.g. in a responsive design), it helps to use a proportionally sized indicator such as an outline or background change. In that way you can be sure of meeting the size requirement.</p>
-
-            <p>The success criterion includes an alternative size measure of "a thickness of at least 8 CSS pixels along the shortest side of the element". Smaller but very thick indicators can be very visible.</p>
-
-            <figure id="focus-indicator-shortside">
-                <img src="img/focus-indicator-thick-short-side.png" alt="Two dark blue buttons on a white background. The left button has a very thick yellow block of color left of the text." width="284" />
-                <figcaption>The thick (over 8px) yellow block on the left is along the short-side, but very thick.</figcaption>
-            </figure>
-
-            <p>Typical focus indicators:</p>
-            <ul>
-                <li>An outline around the whole component would pass the size requirement;</li>
-                <li>Changing the background of a control would pass the size requirement;</li>
-                <li>A 1px wide vertical line (such as a blinking cursor) would <strong>not pass</strong> the size requirement, a text input would need a larger or separate focus indicator.</li>
-            </ul>
-
-            <p>If you need to use complex mathematics to work out if a focus indicator is large enough, it is probably a sign that you should use a larger and proportional indicator that will provide a more visible indicator.</p>
-
-            <section id="unusual-shapes">
-                <h4>Unusual shapes and gradients</h4>
-            
-                <p>If you have an unusual shape, some mathematics may be required if the focus indicator is on the edge of the size requirement. For example, if the focusable control is a circle with a diameter of 100px, the circumference would be 314 pixels. A 1px (or greater) outline would meet the size criterion.</p>
-
-                <figure id="focus-indicator-circle">
-                    <img src="img/focus-indicator-circle.png" alt="Two orange circular buttons with an icon in the middle. The right hand circle has a dark outline around the whole circle to indicate focus" width="150" />
-                    <figcaption>A circular button in the default state, and then with a focus indicator.</figcaption>
-                </figure>
-
-                <p>If a focus indicator is an irregular shape, such as a drop-shadow under a star icon, it helps if the contrasting area is obviously quite large.</p>
-
-                <figure id="focus-indicator-star-shadow">
-                    <img src="img/focus-indicator-star-shadow.png" alt="Two yellow star symbols, the second has a dark drop-shadow." width="400" />
-                    <figcaption>The default and focused states of a star component.</figcaption>
-                </figure>
-
-                <p>What is the contrasting area of the drop shadow? The quick method is:</p>
-                <ul>
-                    <li>Look at the size of the component, how long is it around the edges?</li>
-                    <li>Look at the (contrasting) area of the focus indicator.</li>
-                    <li>Mentally compare the focus indicator to the border of the component.</li>
-                </ul>
-
-                <p>If it is too close to call, you could extract the contrasting area of the focus indicator and evaluate the surface area.</p>
-
-                <p>If a focus indicator has a gradient, the principle is to measure the contrast of the changed area, and ignore the change that does not meet 3:1.</p>
-                <figure id="focus-indicator-box-shadow">
-                    <img src="img/focus-indicator-box-shadow.png" alt="Three buttons, the middle with a heavy drop-shadow indicating focus." />
-                    <figcaption>When a gradient is used on a focus indictor, the measure of surface area should only include the area that has changed enough to meet the 3:1 contrast ratio.</figcaption>
-                </figure>
-                <p>If you take some spot-checks on the gradient area and establish what area meets the contrast, it is straightforward to work out if that area is sufficient.</p>
-                <figure id="focus-indicator-box-shadow-only">
-                    <img src="img/focus-indicator-box-shadow-only.png" alt="The middle button with the drop-shadow included, but the subtle grey areas removed to only show the contrasting area." />
-                    <figcaption>The focused button with the non-contrasting areas removed, showing that it is a thick indicator that meets the requirements.</figcaption>
-                </figure>
-
-                <p>If an inline link is broken over two or more lines the indicator can be split between them. In this case the link element is still treated as a single control.</p>
-                <figure id="focus-indicator-inline-link">
-                    <img src="img/focus-inline-link.png" alt="A paragraph of text containing a link broken over two lines. The red focus outline has a gap on the right of one part of the link, and on the left of the other part of the link." />
-                    <figcaption>The wrapping does not affect the calculation, it is considered one element for the purpose of calculating the focus indication area.</figcaption>
-                </figure>
-
-            </section>
-        </section>
-        <section id="change-of-color">
-            <h3>Change of contrast</h3>
-
-            <p>The greater the change of contrast between states the easier it is for users to see it. Authors are encouraged to make the change of color contrast as great as possible.</p>
-
-            <p>When a component changes to include a focus indicator, that change can always be measured as a change of color contrast. For example, if a yellow outline is added to a button on a blue background, the change of color is from blue to yellow.</p>
-                    
-            <p class="note">Color contrast measurements in WCAG are based on luminance (brightness) regardless of the hue.</p>
-            <figure id="focus-indicator-innerline-2">
-                <img src="img/focus-indicator-innerline.png" alt="Three dark blue buttons on a white background. The middle button has a yellow inner border." width="284" />
-                <figcaption>Adding a yellow outline to a link is a change of color from blue to yellow. That change has a contrast ratio of 12:1.</figcaption>
-            </figure>        
-
-                    
-            <p>Text and non-text contrast measures use adjacent colors, this success criterion measures the <em>change</em> in color between non-focused and focused states.</p>
-
-            <figure id="focus-indicator-non-contrast">
-                <img src="img/focus-indicator-non-contrast.png" alt="Three buttons with light background and dark border on a white background. The middle button has a light grey outline." width="250" />
-                <figcaption>The second link has a light-grey (#ccc) focus outline which <strong>fails</strong> this success criterion because the change from white-background to light-grey outline does not meet 3:1.</figcaption>
-            </figure>
-
-            <p>It is possible to use visual patterns such as strips switching places to disguise a change of focus indicator. This is not considered a visible indicator.</p>
-
-        </section>
-        <section id="Contrast-thickness">
-            <h3>Adjacent contrast</h3>
-
-            <p>Where a control is a solid color, and you add a border or outline of a very similar color, it is difficult to perceive the change to the control.</p>
-
-            <figure id="focus-indicator-thin-non-contrast">
-                <img src="img/focus-indicator-thin-non-contrast.png" alt="Three dark buttons, the middle one appears very slightly larger due to a thin dark outline." width="255" />
-                <figcaption>Adding a 1px dark outline around a dark button does not differentiate it, this example <strong>fails</strong> the success criterion.</figcaption>
-            </figure>
-                    
-            <p>The requirement is to have an indicator that has a 3:1 contrast ratio with the adjacent colors (including the component), or to be separated from the component, or to be at least 2px thick.</p>
-
-            <figure id="focus-indicator-thick-non-contrast">
-                <img src="img/focus-indicator-thick-non-contrast.png" alt="Three dark buttons, the middle one appears larger due to a thick dark outline." width="255" />
-                <figcaption>Adding a 2px border around the button helps to differentiate which one is focused.</figcaption>
-            </figure>
-
-            <figure id="focus-indicator-outerline">
-                <img src="img/focus-indicator-outerline.png" alt="Three dark buttons, the middle one has a outline slightly offset away from the component, so there is a gap between the component's background and the outline." width="250" />
-                <figcaption>Adding an outline that is separated from the button helps to differentiate which one is focused.</figcaption>
-            </figure>
-
-        </section>
-        <section id="unobscured">
-            <h3>Not fully obscured</h3>
-            <p>Where other content can overlap with a focused item, the focused element should not be hidden. Typical content which can overlap focused items are sticky footers, sticky headers, or non-modal dialogues. As a user tabs through the page, these layers of content can obscure the focused item, including the focus indicator.</p>
-            <p class="note">The criterion specifies the "focused item" in the 'Not fully obscured' bullet rather than the "focus indicator". The requirements for the indicator are set in the previous bullets, the last bullet applies to the item as a whole.</p>
-
-        </section>
-        <section id="relation-non-text-color-contrast">
-            <h3>Relation to non-text color contrast</h3>
-            <p><a href="non-text-contrasast" class="sc">Success Criterion 1.4.11 Non-text contrast</a> requires that a UI component maintains contrast across it’s states, including when focused. For example, a checkbox must contrast with its adjacent colors, and the check within the checkbox must contrast with its adjacent colors. </p>
-            
-            <p>Focus-visible (enhanced) requires that the change of color contrast for the focus indicator (only) has contrast compared to the non-focused component.</p>
-            
-            <figure id="focus-indicator-checkboxs">
-                <img src="img/focus-indicator-checkboxs.png" alt="Four checkboxes. Unchecked is a plain box. Focused has a circular line outside. Checked is dark green with a white tick. Focused and checked also has a dark green circle around it." width="400" />
-                <figcaption>Four checkboxes in different combinations of checked and focused. The circular indicators (lines) provide a sufficient change of color contrast.</figcaption>
-           </figure>
-           
-            <p>In the example above:</p>
-            <ul>
-                <li>The checkbox has sufficient contrast with its adjacent background in default, focused, checked, and checked-focused states; </li>
-                <li>The check (tick) within the checkbox contrasts with its adjacent color; </li>
-                <li>The circular outline around the checkbox that indicates focus has a sufficient <em>change</em> of contrast.</li>
-            </ul>
-                    
-            <figure id="focus-indicator-checked">
-                <img src="img/focus-indicator-checked.png" alt="Two checkboxes, the second has a dark blue outline around it." width="300" />
-                <figcaption>A default checkbox and a focused checkbox. </figcaption>
-            </figure>
-
-            <p>The contrast of the default checkbox passes 1.4.11 because the dark border and white background have a contrast ratio greater than 3:1. The 2px dark blue focus outline passes Focus Appearance (Minimum) because the change of contrast is greater than 3:1 with the white background. The component as a whole maintains contrast with the white background so continues to pass 1.4.11.</p>
-
-        </section>
-
-
-    </section>
-    <section id="benefits">
-      <h2>Benefits of Focus Visible</h2>
-      
-      <ul>
-         <li>This Success Criterion helps anyone who relies on the keyboard to operate the page, by letting them visually determine the component on which keyboard operations will interact at any point in time.</li>
-         <li>People with attention limitations, short term memory limitations, or limitations in executive processes benefit by being able to discover where the focus is located.</li>
-      </ul>
-      
-   </section>
-   
-   <section id="examples">
-      <h2>Examples of Focus Visible</h2>
-
-      <ul>
-         <li>When links receive focus, an outline is displayed around the link that contrasts with the background adjacent to the link.</li>
-         <li>When buttons receive focus, and outline is displayed within the button (around the text) that contrasts with the button’s background.</li>
-         <li>When text fields receive focus, an outline is displayed around the field, indicating that the input has focus.</li>  
-         <li>When radio buttons receive focus, an outline is displayed around the control, indicating that the input has focus.</li>        
-      </ul>
-      
-   </section>
-
-   
-   <section id="techniques">
-      <h2>Techniques for Focus Appearance (Minimum)</h2>
-      
-      
-      <section id="sufficient">
-         <h3>Sufficient Techniques</h3>
-         
-         
-         <ol>
-            <li>
-                <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G195" class="general">Using an author-supplied, highly visible focus indicator</a>
-            </li>
-            <li>
-               <a href="../../techniques/css/C40">Creating a two-color focus indicator to ensure sufficient contrast</a>
-            </li>
-            <li>
-            	<a href="../../techniques/css/C41">Creating a contrasting focus indicator inside the component</a>
-            </li>
-         </ol>
-         
-      </section>
-      
-      <section id="advisory">
-         <h3>Additional Techniques (Advisory)</h3>
-         
-      </section>
-      
-      <section id="failure">
-         <h3>Failures</h3>
-
-      </section>
-      
-   </section>
-   
-</body>
-</html>
diff --git a/understanding/22/focus-appearance.html b/understanding/22/focus-appearance.html
new file mode 100644
index 0000000000..5426fd0a9e
--- /dev/null
+++ b/understanding/22/focus-appearance.html
@@ -0,0 +1,783 @@
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+
+<head>
+
+   <meta charset="UTF-8"></meta>
+   <title>Understanding Focus Appearance</title>
+   <link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+
+</head>
+
+<body>
+    <h1>Understanding Focus Appearance</h1>
+
+    <section id="brief">
+        <h2>In brief</h2>
+        <dl>
+            <dt>Goal</dt>
+            <dd>Make it easier to spot the keyboard focus.</dd>
+            <dt>What to do</dt>
+            <dd>Use a focus indicator of sufficient size and contrast.</dd>
+            <dt>Why it's important</dt>
+            <dd>Many people can't see small changes in visual appearance, including older people.</dd>
+        </dl>
+    </section>
+
+    <section id="intent">
+
+        <h2>Intent of Focus Appearance</h2>
+
+
+        <p>The purpose of this Success Criterion is to ensure a keyboard focus indicator is clearly visible and
+            discernible. Focus Appearance is closely related to <a
+                href="https://www.w3.org/WAI/WCAG22/Understanding/focus-visible.html">2.4.7 Focus Visible</a> and <a
+                href="https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html">1.4.11 Non-text Contrast</a>.
+            Focus Visible requires that a visible focus indicator exists while a component has keyboard focus; Focus
+            Appearance defines a minimum level of visibility. Where Non-text Contrast requires a component to have
+            adequate contrast against the background in each of its states, Focus Appearance requires sufficient
+            contrast for the focus indicator itself.</p>
+
+        <p>For sighted people with mobility impairments who use a keyboard or a device that utilizes the <a>keyboard interface</a>
+            (such as a switch or voice input), knowing the current point of focus is very important. Visible focus must also meet the needs
+            of users with low vision, who may also rely on the keyboard.</p>
+
+        <p>A keyboard focus indicator can take different forms. This Success Criterion encourages the use of a solid
+            outline around the focused user interface component, but allows other types of indicators that are at least
+            as large.</p>
+
+
+        <p>This Understanding document will elaborate on the minimum area requirement, color contrast requirements, and
+            finally list some user agent exceptions.</p>
+
+        <section id="minimum-area">
+            <h3>Minimum area</h3>
+
+            <p>The first part of the Success Criterion specifies a minimum area for the focus indicator:</p>
+
+            <blockquote>
+                <ul>
+                    <li>is at least as large as the area of a 2 <a>CSS pixel</a> thick <a>perimeter</a> of the unfocused
+                        component or sub-component</li>
+                </ul>
+            </blockquote>
+
+
+            <p>This only specifies a minimum area for the focus indicator. It does not require that the focus indicator
+                literally be a 2 CSS pixel thick outline, only that the indicator be at least that large.</p>
+
+            <p>However, the simplest way to meet the size requirement is to use a focus indicator which <em>is</em> a
+                solid 2 CSS pixel thick perimeter.</p>
+
+            <p class="note">A <a>CSS pixel</a> is what developers use in CSS declarations like “width: 200px”. It is
+                device-independent and not to be confused with device pixels which vary depending on the physical pixel
+                density. <br />
+
+                The rest of this document notates CSS pixels as “px”.
+            </p>
+
+            <section id="area-solid-outline">
+                <h4>Using a solid outline</h4>
+
+                <p>The easiest and most common way to meet this requirement is to use a solid outline around the
+                    component. The outline must be at least 2px thick. The following illustration shows a
+                    <strong>minimally</strong> thick focus indicator, where a 2px thick band of white pixels making up
+                    the page background around an example button have been altered to black.
+                </p>
+
+                <figure id="focus-indicator-basic">
+
+                    <img src="img/focus-indicator-basic.png"
+                        alt="2 blue buttons with a dark 2 pixel thick offset focus rectangle around the second" />
+
+                    <figcaption>Passes: The focus indicator is a solid 2px thick outline.</figcaption>
+                </figure>
+
+                <p>For non-rectangular components, the "perimeter" definition allows authors to use either of the
+                    following types of outline:</p>
+
+                <ul>
+                    <li>a line which solidly encloses a shape, or</li>
+                    <li>a line which solidly encloses the <a>minimum bounding box</a> of a shape</li>
+                </ul>
+
+                <p>For example, a star-shaped button may use either a focus indicator that follows the shape of the star
+                    or a focus indicator that follows the bounding box of the star. In the following examples, the same
+                    three stars have already been selected, and focus is on the third star. The first example uses a
+                    focus indicator which matches the star shape of the focused star. The second uses a rectangular
+                    indicator.</p>
+
+                <figure id="focus-outline-solid">
+
+                    <img src="img/focus-indicator-solid-outline.svg"
+                        alt="Three of 5 stars are selected with a solid-line focus indicator in the shape of a star outlining the third" />
+
+                    <figcaption>Passes: a solid outline indicator surrounds the third of five stars.</figcaption>
+                </figure>
+
+                <figure id="focus-border-solid">
+
+                    <img src="img/focus-indicator-solid-border.svg"
+                        alt="3 of 5 stars are selected with a solid-line rectangular focus indicator around the third" />
+
+                    <figcaption>Passes: a solidly bound focus rectangle encloses the third of five stars.</figcaption>
+                </figure>
+
+                <p>Offsetting indicators slightly from the focused component, as in the examples above, is not required
+                    to meet the minimum area requirement of the success criterion, but it can help make indicators more
+                    visible. In CSS, the <code>outline</code> and <code>outline-offset</code> properties are commonly
+                    used to achieve this.</p>
+
+                <p>The smallest possible 2 CSS pixel thick indicator that is still a "perimeter" is a solid line that
+                    appears inside the component against the component's outer edge, for example by using a CSS
+                    <code>border</code> property. Indicators that are inset further within the component (not directly
+                    against the component's outer edge) need to be thicker than 2 CSS pixels to meet the minimum size
+                    requirement.
+                </p>
+
+                <figure id="focus-offsets">
+
+                    <img src="img/focus-indicator-offset-types.png"
+                        alt="a button along with 4 examples of different 2px solid focus indicators for it: offset outside the component, an outline around the boundary of the component, a border inside the boundary of the component, and inset inside the component" />
+                    <figcaption>All four of these example focus indicators are 2px solid lines. The "outset", "outline",
+                        and "border" indicators pass. The "inset" indicator does not meet the minimum area requirement
+                        and fails; it would need to be at least 3px thick to pass.</figcaption>
+
+                </figure>
+
+                <p>Note that different Non-text Contrast requirements may apply depending on whether the focus indicator
+                    is offset from, inset into, or against the edge of the component. See the <a
+                        href="#relationship-with-non-text-contrast">Relationship with Non-text Contrast</a> section
+                    below.</p>
+            </section>
+            <section id="area-other-indicator-shapes">
+                <h4>Other indicator shapes</h4>
+
+                <p>This Success Criterion does not require that focus indicators be solid outlines. Other shapes may be
+                    used so long as they meet the minimum area requirement.</p>
+
+                <p>The minimum area of the focus indicator for a control is the area of a 2 CSS pixel thick perimeter of
+                    the control (or its minimum bounding box) in the control's unfocused state. For example, if a
+                    control is a rectangle 90px wide and 30px tall, the area of a 2 CSS pixel thick perimeter is
+                    difference between the areas of:</p>
+
+                <ul>
+                    <li>A 92px by 32px rectangle (1px larger on all sides), and</li>
+                    <li>A 88px by 28px rectangle (1px smaller on all sides)</li>
+                </ul>
+
+                <p>This results in a minimum area of (92px * 32px) - (88px * 28px) = 480px<sup>2</sup>.</p>
+
+                <p>Some general formulas for 2 CSS pixel thick perimeters of common shapes are:</p>
+
+                <dl>
+                    <dt>Rectangle with width <em>w</em> and height <em>h</em></dt>
+                    <dd>4<em>h</em> + 4<em>w</em></dd>
+                    <dt>Circle with radius <em>r</em></dt>
+                    <dd>4𝜋<em>r</em></dd>
+                    <dt>Rounded rectangle with width <em>w</em>, height <em>h</em>, and border radius <em>r</em></dt>
+                    <dd>4<em>h</em> + 4<em>w</em> - (16 - 4𝜋)<em>r</em></dd>
+                </dl>
+
+                <p class="note">If you need to use complex mathematics to work out if a focus indicator is large enough,
+                    it is probably a sign that you should use a larger indicator instead. The bigger the visible change
+                    when an item receives focus, the easier it is for someone to see.</p>
+
+                <p>The following 2 examples use a 90px wide by 30px tall button, with a minimum area requirement of
+                    480px<sup>2</sup>:</p>
+
+                <figure id="focus-indicator-custom-shapes-inset">
+
+                    <img src="img/focus-indicator-custom-shapes-inset.png"
+                        alt="Three 90 by 30 pixel buttons. The middle button has a focus indicator which is a 3px thick outline inset by 3px inside the button" />
+                    <figcaption>Passes: the inner outline is inset slightly from the outer edge of the component, but
+                        compensates for this by being 3px thick. It has an area of 612px<sup>2</sup>, which exceeds the
+                        480px<sup>2</sup> minimum.</figcaption>
+                </figure>
+
+                <figure id="focus-indicator-custom-shapes-side-highlights">
+                    <img src="img/focus-indicator-custom-shapes-side-highlights.png"
+                        alt="Three 90 by 30 pixel buttons. The middle button has a focus indicator which is two rectangles inside the button, one on either side" />
+                    <figcaption>Passes: the indicator rectangles on either side of the focused button are each 9px wide
+                        by 28px tall. In total, they are 504px<sup>2</sup>, which just barely meets the
+                        480px<sup>2</sup> minimum.</figcaption>
+
+                </figure>
+
+                <p class="note">Prefer using focus indicator techniques that scale with both the width and height of the
+                    focused control. Otherwise, if controls change size across different variations of a page (for
+                    example, in a responsive design), the indicator might meet the area requirement in some variations
+                    but not others. For example, in the above figure, if the width of the two highlight rectangles did
+                    not scale as the button grew wider, it would stop meeting the minimum area requirement if the button
+                    needed to grow any wider to accomodate a longer button label.</p>
+
+                <p>Another way of achieving the area requirement is to alter the appearance of the entire component, for
+                    instance by changing its color – provided that the new color has a contrast ratio of at least 3:1
+                    against the original color. This can be effective in a set of closely placed buttons. The following
+                    example demonstrates this with 5 rating stars; the center star is filled in with a darker color to
+                    indicate focus. However, it is much more difficult to detect such a focus indicator when components
+                    are not near each other and so cannot be easily compared. For users using magnification, even
+                    components relatively close together may be difficult to compare, so it is not considered a best
+                    practice.</p>
+
+                <figure id="focus-indicator-whole-star">
+
+                    <img src="img/focus-indicator-whole-star.svg"
+                        alt="3 of 5 stars are selected with the whole third star altered in color to indicate focus" />
+
+                    <figcaption>Passes: a color change applies to the whole third star to indicate focus.</figcaption>
+                </figure>
+            </section>
+            <section id="area-inline-links">
+                <h4>Inline links</h4>
+                <p>If an inline link is broken over multiple lines, some methods of creating a focus indicator create
+                    different results by browsers. CSS <code>outline</code> separately surrounds each part of a link
+                    that breaks across multiple lines. It is by far the most common CSS technique for focus indication,
+                    and produces a result that satisfies the minimum bounding box definition since each part is solidly
+                    bound. CSS <code>border</code> will split the perimeter across the parts of the link, which results
+                    in an unenclosed border for each line of the link. The minimum bounding box definition states that
+                    link focus can be assessed as if the link was all on one line, so a 2px thick border is also
+                    considered to meet the minimum area requirement. Therefore, where the contrast requirements are met,
+                    each of these methods can produce a sufficient focus indicator.</p>
+
+                <figure id="focus-indicator-inline-link-outline">
+
+                    <img src="img/focus-inline-link-outline.png"
+                        alt="A paragraph of text containing a link broken over two lines. The red focus indicator is a complete rectangle around each part of the link." />
+                    <figcaption>Passes: the CSS <code>outline</code> property solidly bounds each part of the link
+                        completely, so it meets the definition of a perimeter.</figcaption>
+                </figure>
+
+                <figure id="focus-indicator-inline-link">
+                    <img src="img/focus-inline-link.png"
+                        alt="A paragraph of text containing a link broken over two lines. The red focus indicator has a gap on the right of one part of the link, and on the left of the other part of the link." />
+                    <figcaption>Passes: Although the CSS <code>border</code> on a multi-line link does not enclose the
+                        separate parts of the link, the minimum bounding box definition allows it to be assessed as if
+                        it was on a single line, so it also qualifies as a perimeter.</figcaption>
+
+                </figure>
+            </section>
+        </section>
+
+        <section id="change-of-contrast">
+            <h3>Change of contrast</h3>
+
+            <p>The second part of the Success Criterion's indicator requirements states that an area of the indicator:
+            </p>
+
+            <blockquote>
+                <ul>
+                    <li>has a contrast ratio of at least 3:1 between the same pixels in the focused and unfocused states
+                    </li>
+                </ul>
+            </blockquote>
+
+            <p>This requirement measures the change of contrast between the same pixels in different states. This is
+                different from the Text Contrast and Non-text Contrast Success Criteria, which measure the contrast
+                between different adjacent pixels in a single state at a time.</p>
+
+            <p>3:1 is the <strong>minimum</strong> allowable change-of-contrast ratio, but the greater the change of
+                contrast between states, the easier it is for users to see the focus indicator. Authors are encouraged
+                to make the change-of-contrast ratio as great as possible.</p>
+
+            <p>The following illustration shows a <strong>minimally</strong> contrasting focus indicator, where some of
+                the white pixels making up the page background have been altered to a mid-grey that has a 3:1 contrast
+                ratio with the original white. Authors are encouraged to exceed the minimum focus appearance. For
+                instance, the dark blue lines in figures 2 and 3 are much more visible.</p>
+
+            <figure id="focus-indicator-star-with-light-focus">
+
+                <img src="img/focus-indicator-star-with-light-focus.svg"
+                    alt="Two orange-yellow five-pointed stars, one with a mid-gray focus rectangle" />
+                <figcaption> Passes: Two buttons in the shape of a star, with the second surrounded by a focus indicator
+                    whose pixels contrast 3:1 between focused (light grey) and unfocused (white) states.</figcaption>
+
+            </figure>
+
+            <p>When a component changes to include a focus indicator, that change can be measured as a change of color
+                contrast. For example, if a yellow outline is added to a button on a blue background, the change of
+                color is from blue to yellow. This change can be measured whether the focus indicator is on the
+                background around the component, or the background within the component.</p>
+
+            <figure id="focus-indicator-innerline-2">
+
+                <img src="img/focus-indicator-innerline.png"
+                    alt="Three dark blue buttons on a white background. The middle button has a yellow inner border."
+                    width="284" />
+                <figcaption> Passes: adding a yellow outline to a link is a change of color from blue to yellow. That
+                    change has a contrast ratio of 12:1.</figcaption>
+
+            </figure>
+
+            <p>If a control receiving focus changes its background (fill color) to a color that contrasts less than 3:1
+                with the original background, that would not pass the change of contrast.</p>
+
+            <figure id="focus-indicator-background">
+
+                <img src="img/focus-indicator-background.png"
+                    alt="Three black buttons with a dark background. The middle button has a dark grey background."
+                    width="250" />
+                <figcaption> Fails: the second link has a dark-grey (#555) which <strong>fails</strong> this Success
+                    Criterion because the change from black-background to dark-grey background does not meet 3:1.
+                </figcaption>
+
+            </figure>
+
+            <p>If the background change is sufficient, it is a method of passing the criterion.</p>
+
+            <figure id="focus-indicator-background-passing">
+
+                <img src="img/focus-indicator-background-passing.png"
+                    alt="Three black buttons with a dark border and two have a dark background. The middle button has a white background."
+                    width="250" />
+                <figcaption> Passes: the second link has a white background (#fff) which <strong>passes</strong> this
+                    Success Criterion because the change from black-background to white-background meets 3:1.
+                </figcaption>
+
+            </figure>
+
+            <section id="change-of-contrast-partial">
+                <h4>Partially contrasting indicators</h4>
+
+                <p>It is not necessary for the <em>entire</em> focus indicator to have a 3:1 change of contrast. It is
+                    sufficient for just a part of the indicator to meet the change of contrast requirement, so long as
+                    the contrasting part of the indicator meets the minimum area requirement.</p>
+
+                <figure id="focus-indicator-two-color-thick">
+
+                    <img src="img/focus-indicator-two-color-thick.png"
+                        alt="A button whose focus indicator is two nested outlines: an inner 2px thick light gray outline with low contrast against the background, and an outer 2px thick black outline with high contrast" />
+                    <figcaption>Passes: The black part of the indicator meets 3:1 contrast with the white background,
+                        but the gray part does not. The black part is 2px thick, so it meets the minimum area
+                        requirement on its own and the gray part can be ignored.</figcaption>
+                </figure>
+
+                <figure id="focus-indicator-two-color-thick">
+                    <img src="img/focus-indicator-two-color-thin.png"
+                        alt="A button whose focus indicator is two nested outlines: an inner 1px thick light gray outline with low contrast against the background, and an outer 1px thick black outline with high contrast" />
+                    <figcaption>Fails: The indicator as a whole is 2px thick, but the part of it that has sufficient
+                        change-of-contrast is only 1px thick. The part of the indicator with sufficient
+                        change-of-contrast does not meet the minimum area requirement.</figcaption>
+
+                </figure>
+
+                <p>When calculating whether a focus indicator meets the minimum area requirement, only the part of the
+                    indicator which meets the change-of-contrast requirement should be included in the calculation.</p>
+            </section>
+
+            <section id="change-of-contrast-gradients">
+                <h4>Gradients</h4>
+
+                <p>If a focus indicator has a gradient, the principle is to measure the contrast of the changed area,
+                    and ignore any part of the gradient which has less than a 3:1 change-of-contrast ratio.</p>
+
+                <figure id="focus-indicator-box-shadow">
+
+                    <img src="img/focus-indicator-box-shadow.png"
+                        alt="Three buttons, the middle with a heavy drop-shadow indicating focus." />
+                    <figcaption>When a gradient is used on a focus indicator, the measure of surface area should only
+                        include the area that has changed enough to meet the 3:1 contrast ratio.</figcaption>
+
+                </figure>
+
+                <p>If you eliminate the area which has less than 3:1 change-of-contrast, you can calculate the area of
+                    the remaining parts of the indicator to determine whether the indicator meets the minimum area
+                    requirement.</p>
+
+                <figure id="focus-indicator-box-shadow-only">
+
+                    <img src="img/focus-indicator-box-shadow-only.png"
+                        alt="The middle button with the drop-shadow included, but the subtle grey areas removed to only show the contrasting area." />
+                    <figcaption>Passes: the same focused button with the non-contrasting areas removed. The contrasting
+                        area is 6px thick along most of the bottom edge and 3-4px thick on the left and right edges,
+                        which is enough to meet the minimum area requirement.</figcaption>
+                </figure>
+
+                <p class="note">Some of the examples in this document are screen-captured images of elements. Due to
+                    loss of resolution in these images, the actual pixel color may not match the original. As such, they
+                    are intended to be used for illustrative purposes, and should not be inspected on a pixel-by-pixel
+                    basis for sufficient contrast.</p>
+
+                <p>Some designs have pages with a non-solid background image covering the whole (or part) of the page or
+                    make use of parallax scrolling effects which result in a near-infinite number of color combinations
+                    if a page is scrolled and/or changes are made to the viewport size.</p>
+
+                <p>If the contrast of background colors that change are close enough to need to be tested for each
+                    combination then they would likely not meet the user need of people with low vision in certain
+                    scroll combinations and would likely fail in certain combinations as well. In these cases it would
+                    be an easy solution to use a <a href="https://www.w3.org/WAI/WCAG22/Techniques/css/C40">two-color
+                        focus indicator</a> or some other mechanism to indicate focus such as a solid box with a border
+                    to guarantee there is sufficient contrast across variations of background images or background
+                    gradients.</p>
+
+                <p>It is possible to use visual patterns such as strips switching places to disguise a change of focus
+                    indicator. However, this is not considered a visible indicator.</p>
+
+            </section>
+        </section>
+
+        <section id="relationship-with-non-text-contrast">
+            <h3>Relationship with Non-text Contrast</h3>
+
+            <p>Focus indicators are visual information required to identify a state of a user interface component. That
+                means that they are subject to <a href="non-text-contrast" class="sc">1.4.11 Non-text Contrast</a>, in
+                addition to 2.4.13 Focus Appearance.</p>
+
+            <p>In combination with <a href="focus-visible">2.4.7 Focus Visible</a>, <a href="non-text-contrast"
+                    class="sc">1.4.11 Non-text Contrast</a> requires that the visual focus indicator for a component
+                must have sufficient contrast against the adjacent colors when the component is focused, except where
+                the appearance of the component is determined by the user agent and not modified by the author.</p>
+
+            <p>The difference between the contrast requirements in Focus Appearance and Non-text Contrast is:</p>
+
+            <ul>
+                <li>Focus Appearance requires that focus indicators have a <em>change of contrast</em> between focused
+                    and non-focused states.</li>
+                <li>Non-text Contrast requires that focus indicators have <em>adjacent contrast</em> between the
+                    indicator (in the focused state) and adjacent non-indicator colors.</li>
+            </ul>
+
+            <figure id="non-text-contrast-fail-focus-appearance-pass">
+
+                <img src="img/focus-indicator-good-change-bad-adjacent.png"
+                    alt="A light blue button with a 3px thick border. The border is black in the unfocused state and light gray in the focused state." />
+                <figcaption>This example passes Focus Appearance but fails Non-text Contrast; there is insufficient
+                    <em>adjacent contrast</em> between the focus indicator and the adjacent colors.
+                </figcaption>
+            </figure>
+
+            <figure id="non-text-contrast-pass-focus-appearance-fail">
+                <img src="img/focus-indicator-good-adjacent-bad-change.png"
+                    alt="A light blue button with a 3px thick border. The border is black in the unfocused state and dark gray in the focused state." />
+                <figcaption>This example passes Non-text Contrast but fails Focus Appearance; there is insufficient
+                    <em>change of contrast</em> between the focused and unfocused states.
+                </figcaption>
+
+            </figure>
+
+            <p>Additionally, Non-text Contrast does not establish any size requirement and has slightly different rules
+                for when exceptions are allowed.</p>
+
+
+            <p>See the Relationship with Focus Visible section of <a
+                    href="https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html">Understanding 1.4.11
+                    Non-text Contrast</a> for more details and examples.</p>
+
+        </section>
+
+        <section id="keyboard-focus">
+            <h3>Component keyboard focus</h3>
+            <p>The preamble to this Success Criterion is "When a user interface component has keyboard focus..." The
+                <em>keyboard focus</em> is the point of interaction for someone using a keyboard. For environments with
+                a keyboard-operable interface, the keyboard focus can be moved around the interface in order to interact
+                with different components. Whichever component is being interacted with has focus.
+            </p>
+
+            <p>WCAG defines <em>user interface component</em> as "a part of the content that is perceived by users as a
+                single control for a distinct function." Because different users may perceive controls differently,
+                there is a potential for some variation when interpreting what constitutes both a <em>single
+                    control</em> and a <em>distinct function</em>. This is particularly the case when something visually
+                presents in a way that may differ from how it is programmatically created under the covers. Where there
+                is not a native HTML component upon which to base designs, there can be great variations in how the
+                components and their focus indicators are portrayed. Further, some components have sub-components that
+                can take focus, such as the menu items on a menu.</p>
+
+            <p>Nonetheless, consistent results from different testers were obtained for this Success Criterion by using
+                the focus indicator itself as the gauge of what constitutes the component being interacted with. For
+                complex components, the three typical focus indicators are as follows:</p>
+
+            <ul>
+                <li>Focus indicator around only the whole component</li>
+                <li>Focus indicators around both the component and subcomponent</li>
+                <li>Focus indicator around only the subcomponent</li>
+            </ul>
+
+            <p>Each of these will be discussed, using a tablist as a familiar complex component.</p>
+
+            <h4>Focus indicator around only the whole component</h4>
+            <figure id="component-complex-whole">
+
+                <img src="img/component-complex-whole.png"
+                    alt="Three tab buttons shown with a dark blue rectangle around all three tab buttons." />
+                <figcaption> A tablist with a focus indicator around only the whole.</figcaption>
+            </figure>
+
+            <p>When the focus indicator is shown only around the whole tablist, the user is guided to considering the
+                tablist as a single user component. The tab items within it are visually distinguished between selected
+                and unselected states (and visual indicators of selection state must meet the criteria given in <a
+                    href="https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html">1.4.11 Non-text
+                    Contrast</a>).</p>
+
+            <p>Having a focus indicator <em>only</em> around the whole is possible where there is no need to have a
+                selected sub-component while another sub-component has focus. For a tablist which synchronizes its tab
+                panel content with whatever tab is active, only one tab item can be selected at a time, and since
+                whatever tab is selected is considered active, a separate focus indicator is redundant.</p>
+
+
+            <p>Result: the group focus indicator must meet the requirements of this Success Criterion.</p>
+
+            <p>A <a href="https://codesandbox.io/s/practical-cori-nl4pld?file=/index.html">radio button group</a> and a
+                <a href="https://www.w3.org/WAI/ARIA/apg/example-index/slider/slider-rating.html">star-rating
+                    widget</a>, which each use only a whole-component focus indicator, provide working examples of
+                different complex components that pass the primary requirements of this Success Criterion. In the star
+                ratings example, users can increment the rating by 1/2 stars. Not only is a focus indicator for each 1/2
+                star unnecessary, but it would actually be difficult to achieve without making the interaction
+                confusing.
+            </p>
+
+            <h4>Focus indicators around both the component and subcomponent</h4>
+
+            <figure id="component-complex-both">
+
+                <img src="img/component-complex-both.png"
+                    alt="Three tab buttons shown with a dark blue rectangle around all three tab buttons, the first tab button also has a dark outline as well as a blue bar indicating it is selected." />
+                <br />
+                <img src="img/component-complex-both-unselected.png"
+                    alt="The same tab list showing except the first tab is selected, but the second has the focus outline." />
+                <figcaption> The same tablist in two states. In the first, focus is around both the tablist and the
+                    currently selected tab; in the second, focus is around both the tablist and an unselected tab.
+                </figcaption>
+            </figure>
+
+            <p>For a tablist which does not keep its tab panel content synchronized with whatever tab is selected, there
+                needs to be a focus indicator for the tab item subcomponent. This is because the tab item with focus may
+                be different than the selected item.</p>
+            <p>The user can navigate to the tablist, which in this implementation has a focus rectangle around the whole
+                tablist as well as one around a tab item (conventionally the item that is currently selected). The focus
+                around the whole is helpful in cueing a keyboard user that this is a complex component that has its own
+                interaction. The user can then move focus between the unselected and selected tab items -- each of which
+                in turn has its own focus indicator -- before activating one, which then makes it selected as well as
+                focused, and updates the tab panel to match.</p>
+            <p>In this scenario, either the group focus indicator or the sub-component indicator must meet the
+                requirements of this Success Criterion. To avoid being overly prescriptive, the Success Criterion allows
+                authors to choose which makes the most sense. Generally, if a sub-component focus is necessary, it
+                should be assessed instead of the group indicator.</p>
+
+            <p>Result: the focus indicator for the tab item meets the requirements of this Success Criterion. The
+                tablist focus indicator does not need to meet the requirements.</p>
+
+            <p>A <a href="https://www.w3.org/WAI/ARIA/apg/example-index/slider/slider-color-viewer.html">slider to pick
+                    colors</a> provides a working example of a different complex component that predominantly shows
+                focus for the subcomponent. In this case, the thumb slider sub-component has a focus indicator of
+                sufficient size and contrast to pass the sufficient area calculation. There is also a subtle focus
+                around the whole slider component, but it does not need to be assessed to pass this Success Criterion.
+            </p>
+
+
+            <h4>Focus indicator around only the subcomponent</h4>
+
+            <figure id="component-complex-sub">
+
+                <img src="img/component-complex-sub.png"
+                    alt="Three tab buttons shown and the first button has a dark outline." />
+                <figcaption> The same tabs as in the prior set, but the focus indicator around the whole is removed.
+                </figcaption>
+            </figure>
+
+            <p>The same unsynchronized tablist can also be implemented as something which only shows focus on the tab
+                items and not on the whole. The behaviour is the same as in the prior example, but there is never a
+                focus indicator placed around the tablist. This interaction is acceptable, but it is not best practice
+                since it demands more understanding from the user with less information. For example, some visual cues
+                for the tablist and tab items (and tab panel) may not be clear. As well, keyboard users may not
+                initially understand the expected keyboard interaction.</p>
+
+            <p>Result: the focus indicator for the tab item must meet the requirements of this Success Criterion,
+                judging focus with both selected and unselected tab items.</p>
+
+            <p>A <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tab_role#example">
+                    functional example of sub-component-only tab focus</a> has an indicator that is large enough (at
+                least four times the shortest side) with sufficient contrast to pass the focus area language of this
+                Success Criterion.</p>
+
+
+            <h4>Where something with focus is not a user interface component</h4>
+            <p>Some pages contain very large editing regions, such as web implementations of word processors and code
+                editors. Unlike a <code>textarea</code> element, which is a user interface component, these large
+                editing regions do not typically meet the definition of <a>user interface components</a>;
+                they are not "perceived by users as a single control for a distinct function."
+                Providing focus indicators around such editing regions may still be beneficial to some; however, where
+                the region is not perceived as a single control, it is not covered by this Success Criterion. The web
+                page will still need to provide a insertion point (caret indicator) in such editing regions in order to
+                meet the requirements of <a href="https://www.w3.org/WAI/WCAG22/Understanding/focus-visible.html">2.4.7
+                    Focus Visible</a>.</p>
+
+            <p>Some non-operable elements can take focus (such as a heading element that is the target of a skip link).
+                However, the preamble of this Success Criterion refers to user interface components; it is only when the
+                element with focus is operable by keyboard that this Success Criterion applies.</p>
+        </section>
+
+        <section id="exceptions">
+            <h3>Exceptions</h3>
+
+            <p>There are two situations where the focus appearance does not need to be assessed:</p>
+
+            <ul>
+                <li>the focus indicator cannot be adjusted by the author</li>
+                <li>the author has not modified the effects of the user agent default</li>
+            </ul>
+
+            <section id="exception-cannot-adjust">
+                <h4>First exception: the focus indicator cannot be adjusted by the author</h4>
+
+                <blockquote>
+                    <p>The focus indicator is determined by the user agent and cannot be adjusted by the author</p>
+                </blockquote>
+
+                <p>Some components or technologies may not allow the author to adjust the focus indicator. This is the
+                    case with HTML <code>select</code> elements (both single and multi-select), where the visual
+                    treatments for selection and focus cannot be adjusted by the author. In this case the Success
+                    Criterion does not apply.</p>
+
+                <figure id="country-select">
+
+                    <img src="img/focus-indicator-select.png"
+                        alt="A country select element with Afghanistan selected and Albani with focus" />
+                    <figcaption>Passes: The user agent's default <code>select</code> element presentation cannot be
+                        modified by the author, so it passes regardless of the quality of the focus indicator
+                    </figcaption>
+                </figure>
+
+            </section>
+
+            <section id="exception-default">
+                <h4>Second exception: the default indicator and background are not modified</h4>
+
+                <blockquote>
+                    <p>The focus indicator and the indicator's background color are not modified by the author</p>
+                </blockquote>
+
+                <p>If the focus indicator and the background behind the focus indicator are not modified by the author,
+                    the Success Criterion does not apply.</p>
+
+                <p>The intent of this exception is to reduce burden on authors by allowing them to rely on the default
+                    indicators provided by user agents (browsers). If all user agents provided good focus indicators,
+                    authors would be able to concentrate efforts on other accessibility considerations. Unfortunately,
+                    browser default focus indicators vary by component, browser, and across devices and operating
+                    systems, and the default focus indicators in some browsers can be difficult to see (such as a 1px
+                    dotted outline). For this reason, most authors override browser defaults in order to overcome these
+                    deficiencies and create a more uniform user experience, regardless of browser.</p>
+
+                <p>Some browser makers are improving their default focus indicators to make them more visible. As more
+                    browsers adopt defaults that meet the primary bullets of this Success Criterion, authors will be
+                    able to achieve improved focus indicators without customization.</p>
+
+                <h4>Modifying the focus indicator background</h4>
+
+                <p>Browser default focus indicators can be made <em>more</em> difficult to see if the author modifies
+                    the pixels directly adjacent to the indicator (commonly referred to as its background), such as by
+                    positioning a component on top of an image or gradient background, or altering the page's default
+                    white background color, for instance using a blue background in combination with a browser's blue
+                    default indicator. For this reason, where the author alters the pixels directly adjacent to the
+                    default focus indicator, the user agent exception does not apply, and the author will need to verify
+                    they meet the size and contrast requirements of this Success Criterion.</p>
+                <p class="note">Altering the <code>body</code> element's <code>background-color</code> attribute
+                    <em>is</em> one way of altering the pixels directly adjacent to the indicator in most
+                    implementations. However, specifying a value of white (<code>#FFFFFF</code>) does not nullify this
+                    exception since, as established in the third note of the <a>contrast ratio</a> definition, the
+                    default ("unspecified") color is assumed to be white.
+                </p>
+
+                <p>As well, if the browser provides an indicator <em>within</em> a component by default, then authors
+                    can potentially reduce the visibility by changing the component color (which in such a scenario is
+                    the background color for the focus indicator). For example, if the default indicator on a button
+                    uses a colored inner border, authors can negatively affect the focus appearance by making the button
+                    or its unfocused border color a similar-luminosity color. For this reason, this user agent exception
+                    can only be met if the author both does not modify the default focus indicator <em>and</em> does not
+                    modify its background.</p>
+
+                <figure id="focus-indicator-browser-defaults-modified-background">
+
+                    <img src="img/focus-indicator-browser-defaults-modified-background.png"
+                        alt="A button with an author-customized blue border which looks very similar to the blue border used by a user agent default focus indicator" />
+                    <figcaption>Fails: The middle button is focused using a browser's default focus indicator, but it is
+                        very difficult to tell which button is focused because the custom blue border on the unfocused
+                        button uses a similar color.</figcaption>
+
+                </figure>
+            </section>
+        </section>
+    </section>
+
+    <section id="benefits">
+        <h2>Benefits of Focus Appearance</h2>
+
+        <ul>
+            <li>This Success Criterion helps anyone who relies on the keyboard to operate the page, by letting them
+                visually determine the component on which keyboard operations will interact at any point in time.</li>
+            <li>People with attention limitations, short term memory limitations, or limitations in executive processes
+                benefit by being able to discover where the focus is located.</li>
+        </ul>
+
+    </section>
+
+    <section id="examples">
+        <h2>Examples of Focus Appearance</h2>
+
+        <ul>
+            <li>When links receive focus, an outline is displayed around the link that contrasts with the background
+                adjacent to the link.</li>
+            <li>When buttons receive focus, an outline is displayed within the button (around the text) that contrasts
+                with the button's background.</li>
+            <li>When text fields receive focus, an outline is displayed around the field, indicating that the input has
+                focus.</li>
+            <li>When radio buttons receive focus, an outline is displayed around the control, indicating that the input
+                has focus.</li>
+        </ul>
+
+    </section>
+
+    <section id="resources">
+        <h2>Related Resources</h2>
+        <ul>
+            <li><a href="https://www.sarasoueidan.com/blog/focus-indicators/">A guide to designing accessible focus
+                    indicators</a> by Sara Soueidan</li>
+            <li><a href="https://alastairc.uk/tests/wcag22-examples/focus-more-visible-3.html">Focus appearance -
+                    testing version 3</a></li>
+            <li><a href="https://alastairc.uk/tests/wcag22-examples/focus-more-visible-6.html">Focus visible testing
+                    (Feb 2022)</a></li>
+            <li><a href="https://adrianroselli.com/2017/02/avoid-default-browser-focus-styles.html">Avoid Default
+                    Browser Focus Styles</a> by Adrian Roselli</li>
+        </ul>
+    </section>
+
+    <section id="techniques">
+        <h2>Techniques</h2>
+
+        <section id="sufficient">
+            <h3>Sufficient Techniques</h3>
+
+            <ul>
+                <li>
+
+                    <a href="../../techniques/general/G195" class="general">Using an author-supplied, highly visible
+                        focus indicator</a>
+
+                </li>
+                <li>
+                    <a href="../../techniques/css/C40">Creating a two-color focus indicator to ensure sufficient
+                        contrast</a>
+                </li>
+                <li>
+                    <a href="../../techniques/css/C41">Creating a contrasting focus indicator inside the component</a>
+                </li>
+            </ul>
+        </section>
+
+        <section id="failure">
+            <h3>Failures</h3>
+            <ul>
+                <li>
+                    <a href="../../techniques/failures/F55">Failure of Success Criteria 2.1.1, 2.4.7, 2.4.13, and 3.2.1
+                        due to using script to remove focus when focus is received</a>
+                </li>
+                <li>
+                    <a href="../../techniques/failures/F78">Failure of Success Criterion 1.4.11, 2.4.7 and 2.4.13 due to
+                        styling element outlines and borders in a way that removes or renders non-visible the visual
+                        focus indicator</a>
+                </li>
+            </ul>
+        </section>
+    </section>
+</body>
+
+</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
new file mode 100644
index 0000000000..7d90460a6d
--- /dev/null
+++ b/understanding/22/focus-not-obscured-enhanced.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<meta charset="UTF-8"/>
+<title>Understanding Focus Not Obscured (Enhanced)</title>
+<link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+</head>
+<body>
+<h1>Understanding Focus Not Obscured (Enhanced)</h1>
+
+<section id="brief">
+  <h2>In brief</h2>
+  <dl>
+      <dt>Goal</dt><dd>Don't cover any part of the item with focus.</dd>
+      <dt>What to do</dt><dd>Ensure when an item gets keyboard focus, it is fully visible.</dd>
+      <dt>Why it's important</dt><dd>People who can't use a mouse need to see what has keyboard focus.</dd>
+  </dl>  
+</section>
+
+<section id="intent">
+  <h2>Intent of Focus Not Obscured (Enhanced)</h2>
+  <p>The intent of this Success Criterion is to ensure that the item receiving keyboard focus is always visible in the user's viewport. For sighted people who rely on a keyboard (or on a device that operates through the keyboard interface, such as a switch or voice input), knowing the current point of focus is critical. The component with focus signals the interaction point on the page. Where users cannot see the item with focus, they may not know how to proceed, or may even think the system has become unresponsive.</p>
+  <p>Typical types of content that can overlap focused items are sticky footers, sticky headers, and non-modal dialogs. As a user tabs through the page, these layers of content can hide the item receiving focus, along with its focus indicator.</p>
+  <p>A notification implemented as sticky content, such as a cookie banner, will fail this Success Criterion if it partially covers a component receiving focus. Ways of passing include making the banner modal so the user has to dismiss the banner before navigating through the page, or using <a href="https://www.w3.org/TR/css-scroll-snap/#propdef-scroll-padding">scroll padding</a> so the banner does not overlap other content. Notifications that do not require user action could also meet this criterion by closing on loss of focus.</p>
+  <p>Another form of obscuring can occur where light boxes or other semi-opaque effects overlap the item with focus. This form of obscuring is <em>not</em> in scope for this Success Criterion. While less than 100 percent opacity is not causing the component to be <q>visually hidden</q>, such semi-opaque overlaps may cause a failure of <a href="non-text-contrast">1.4.11 Non-text Contrast</a> and/or <a href="focus-appearance">2.4.13 Focus Appearance</a>. When a focus indicator can be covered by a semi-opaque component, the focus indicator should be assessed against 1.4.11 and 2.4.13. The intention in both situations is that the component receiving focus should never be obscured to the point a user cannot tell which item has focus.</p>
+</section>
+<section id="benefits">
+  <h2>Benefits of Focus Not Obscured (Enhanced)</h2>
+  <ul>
+    <li>Sighted users who rely on a keyboard interface to operate the page will be able to see the component which gets keyboard focus. Such users include those who rely on devices which use the keyboard interface, including speech input, sip-and-puff software, on-screen keyboards, scanning software, and a variety of assistive technologies and alternate keyboards.</li>
+    <li>People with limited or low vision but who rely upon a pointing device (for viewport orientation and repositioning) benefit from a clearly visible indication of the current point of keyboard interaction, especially where magnification reduces the overall useable portion of content.</li>
+    <li>People with attention limitations, short term memory limitations, or limitations in executive processes benefit by being able to more easily discover where the focus is located.</li>
+  </ul>
+</section>
+<section id="examples">
+  <h2>Examples of Focus Not Obscured (Enhanced)</h2>
+  
+  <ul>
+    <li>A page has a sticky footer (attached to the bottom of the viewport). When tabbing down the page the focused item is not at all obscured by the footer because content in the viewport scrolls up to always display the item with keyboard focus using <a href="https://www.w3.org/TR/css-scroll-snap/#propdef-scroll-padding" rel="nofollow">scroll padding</a>.</li>
+    <li>A page has a large (30% wide) cookie approval dialog. The dialog is modal, preventing access to the other controls in the page until it has been dismissed. Focus is not obscured because the cookie approval dialog (including the focus indicator) remains on screen until selections are made and submitted.</li>
+    <li>A notification is implemented as a sticky header and the keyboard focus is moved to the notification. The notification disappears when it loses focus, and does not obscure any other controls (including the focus indicator visible prior to the notification).</li>
+  </ul>
+</section>
+<section id="resources">
+  <h2>Resources</h2>
+</section>
+<section id="techniques">
+  <h2>Techniques for Focus Not Obscured (Enhanced)</h2>
+  <section id="sufficient">
+    <h3>Sufficient Techniques</h3>
+    <ul>
+      <li> <a href="../../techniques/css/C43">C43: Using CSS scroll-padding to un-obscure content</a></li>
+    </ul>
+  </section>
+  <section id="advisory">
+    <h3>Additional Techniques (Advisory)</h3>
+  </section>
+  <section id="failure">
+    <h3>Failures</h3>
+    <ul>
+      <li>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.</li>
+      <li>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 <a href="https://www.w3.org/TR/css-scroll-snap/#propdef-scroll-padding" rel="nofollow">scroll padding</a>.</li>
+    </ul>
+  </section>
+</section>
+</body>
+</html>
diff --git a/understanding/22/focus-not-obscured-minimum.html b/understanding/22/focus-not-obscured-minimum.html
new file mode 100644
index 0000000000..38f2ad1c76
--- /dev/null
+++ b/understanding/22/focus-not-obscured-minimum.html
@@ -0,0 +1,201 @@
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+<head>
+   <meta charset="UTF-8"/>
+   <title>Understanding Focus Not Obscured (Minimum)</title>
+   <link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+</head>
+<body>
+   <h1>Understanding Focus Not Obscured (Minimum)</h1>
+
+   <section id="brief">
+      <h2>In brief</h2>
+      <dl>
+         <dt>Goal</dt><dd>Keep the focused item visible.</dd>
+         <dt>What to do</dt><dd>Ensure when an item gets keyboard focus, it is at least partially visible.</dd>
+         <dt>Why it's important</dt><dd>People who can't use a mouse need to see what has keyboard focus.</dd>
+      </dl>
+    </section>
+
+   <section id="intent">
+      
+      <h2>Intent of Focus Not Obscured (Minimum)</h2>
+
+      <p>The intent of this Success Criterion is to ensure that the item receiving keyboard focus is always partially visible in the user's viewport. For sighted people who rely on a keyboard (or on a device that operates through the keyboard interface, such as a switch or voice input), knowing the current point of focus is critical. The component with focus signals the interaction point on the page. Where users cannot see the item with focus, they may not know how to proceed, or may even think the system has become unresponsive.</p>
+
+      <p>In recognition of the complex responsive designs common today, this AA criterion allows for the component receiving focus to be <em>partially</em> obscured by other author-created content. A partly obscured component can still be very visible, although the more of it that is obscured, the less easy it is to see. For that reason, authors should attempt to design interactions to reduce the degree and frequency with which the item receiving focus is partly obscured. For best visibility, <em>none</em> of the component receiving focus should be obscured. This preferred outcome is covered by the AAA criterion <a href="focus-not-obscured-enhanced.html">Focus Not Obscured (Enhanced)</a>.</p>
+
+      <p>Typical types of content that can overlap focused items are sticky footers, sticky headers, and non-modal dialogs. As a user tabs through the page, these layers of content can obscure the item receiving focus, along with its focus indicator.</p>
+
+      <p>A notification implemented as sticky content, such as a cookie banner, will fail this Success Criterion if it entirely obscures a component receiving focus. Ways of passing include making the banner modal so the user has to dismiss the banner before navigating through the page, or using <a href="https://www.w3.org/TR/css-scroll-snap/#propdef-scroll-padding">scroll padding</a> so the banner does not overlap other content. Notifications that do not require user action could also meet this criterion by closing on loss of focus.</p>
+
+      <p>Another form of obscuring can occur where light boxes or other semi-opaque effects overlap the item with focus. While less than 100 percent opacity is not causing the component to be <q>entirely obscured</q>, such semi-opaque overlaps may cause a failure of <a href="../understanding/non-text-contrast.html">1.4.11 Non-text Contrast</a>. When a focus indicator can be covered by a semi-opaque component, the ability of the focus indicator to pass 1.4.11 should be evaluated (and pass) while the focus indicator is under the semi-opaque component. The intention in both situations is that the component receiving focus should never be obscured to the point a user cannot tell which item has focus.</p>
+
+      <section id="Movable">
+         <h3>User-movable content</h3>
+         <p>This SC contains a note regarding content that can be repositioned. If users can move content regions, then they can potentially position the movable content such that it obscures other content that may receive focus. In such a case, the author is only responsible for ensuring that the movable content <em>in its initial position</em> does not obscure the item receiving focus.</p>
+         <p>This note is intended to accommodate a common interaction in complex applications such as authoring tools, where the main editing region (also called a canvas) can be enhanced by displaying toolbars or other panels, which can be repositioned around the canvas. It is possible to design such toolbars so they do <em>not</em> obscure focus. Authors are encouraged to do so, as well as pursue techniques which ensure equitable keyboard use of such toolbars. However, in recognition of the complexities involved in responsive design as well as in supporting the ability to transform the text size and spacing of content, only the starting position of such movable panels is assessed.</p>
+         <!--
+         <figure id="">
+            <img src="" alt=""/>
+            <figcaption>Placeholder for future simplified illustration showing an abstract layout of an authoring tool UI with a user-movable toolbar</figcaption>
+         </figure>
+         -->
+      </section>
+      <section id="disclosed">
+         <h3>User-opened content</h3>
+         <p>This SC contains a note regarding content that is opened or disclosed by the user. One example of such content is a menu button opened by a user that opens a list of choices over pre-existing content on the screen. Such content can obscure other information on the screen, but it does not obscure an item receiving keyboard focus, because the new content doesn't stay open through a change of focus. However, authors may create user-opened content that is intentionally designed to persist until closed by the user, such as a chat window. Such persistent content has the potential to fail Focus Not Obscured (Minimum). Various types are described in this section. All can be designed so that they pass this Success Criterion.</p>
+
+         <p>This section only applies to content that the user actively discloses. Content pre-positioned by the author (such as a sticky footer), or content that appears without direct user initiation, such as system warnings, must not prevent the item receiving focus from being immediately visible in the viewport. Also, this note is not intended to apply to disclosures that are by convention non-persistent. As discussed in the following sub-section, an open dropdown that does not close when no longer focused is not following this convention.</p>
+
+         <section>
+            <h4>Non-persistent opened information</h4>
+            <p>A number of components on the web open (or disclose) additional content (on activation or on focus) intended for immediate user interaction or information. This new content is often on top of other content, obscuring it. Examples of such components are menu items, select element items, combobox lists (and other dropdown items), date picker calendars, and tooltips. The common trait of all these components is that they are not expected to persist after being acted on or once they are no longer the primary point of user interaction. Such non-persistent disclosures do not fail this SC since they do not obscure the item with focus. However, if an author allows such components to <strong>persist</strong> after the user has 1) activated one of the opened items or 2) moved the focus away from the triggering item and the additional content, it is at risk of failing this criterion by obscuring the item with focus.</p>
+            <!--
+                  <figure id="">
+                     <img src="" alt=""/>
+                     <figcaption>Placeholder for future illustration showing an open dropdown obscuring information underneath</figcaption>
+               </figure>
+            -->
+         </section>
+
+         <section>
+            <h4>User openable, persistent disclosures</h4>
+            <p>Some disclosure patterns provide a mechanism for the user to open additional content that remains open until intentionally closed by the user. Accordions are a simple example of such a pattern. Chatbots and expandable side navigation are more complex examples. All of these patterns can be implemented so they are not at risk of failing this SC. Some possible approaches are:</p>
+
+            <ul>
+               <li><strong>When the additional content appears, it displaces existing content.</strong> An accordion is an example of this. When an accordion is opened, the disclosed content shifts existing content further down the page. Since the new content does not obscure existing content, it cannot obscure the item with focus.
+               <!--
+               <figure id="">
+               <img src="" alt=""/>
+               <figcaption>Placeholder for future illustrations showing an abstract representation of an accordion pushing content down when opened</figcaption>
+               </figure>
+               -->
+               </li>
+
+               <li><strong>When the additional content appears, existing content reflows.</strong> The popout sidebar on the <a href="https://www.w3.org/TR/WCAG22/">WCAG standard</a> is an example of this pattern. When the side menu is activated, it opens a new section of information along the left side of the page. The main content area is reduced horizontally to accommodate the new content, and the existing content reflows to fit in the thinner space. As a result, there is no overlapping content between the two sections; the item receiving focus, whether in the left navigation or in the main content, will not be obscured by the other section.
+               <!--
+               <figure id="">
+               <img src="" alt=""/>
+               <figcaption>Placeholder for future illustration pair showing an abstract representation of a sidebar reflowing a thinner main content region</figcaption>
+               </figure>
+               -->
+               </li>
+               <li>
+               <strong>When the additional content is opened, it takes focus and the tab ring is constrained to the new content until it is dismissed.</strong> This modality is somewhat like a dialog, in that a user cannot navigate beyond the opened content by keyboard without dismissing it first (typically by pressing Esc). However, unlike in a modal dialog, in some implementations a pointer user may be able to interact with content outside the opened section without dismissing it. Since this pattern potentially creates an inequitable experience between keyboard and pointer users, it should be used cautiously. That said, it does prevent the opened content from obscuring the keyboard focus in the main content, and thus should pass this SC. This is described and demonstrated in a short video in the Knowbility article in the reference section, under the section heading <a href="https://knowbility.org/blog/2020/accessible-slide-menus#keep-keyboard-focus-in-the-slide-out-navigation-until-its-closed">Keep keyboard focus in the slide-out navigation until it's closed</a>.
+               <!--
+               <figure id="">
+               <img src="" alt=""/>
+               <figcaption>Placeholder for future illustrations showing an abstract representation of a side panel where the tab ring is restricted to the panel</figcaption>
+               </figure>
+               -->
+               </li>
+               <li>
+               <strong>The disclosure expands into an area of the page containing no other content.</strong> Many pages are designed with wide margins, providing significant white space into which new content can be opened. Many chatbots and toast notifications are designed to 'slide up' into the right unpopulated side of a page. Where authors are careful to ensure content is not obscured at each breakpoint in a responsive design, no obscuring of other operable content need occur.
+               <!-- <figure id="">
+               <img src="" alt=""/>
+               <figcaption>Placeholder for future illustrations showing an abstract representation of a chat window expanding into empty space on the right side of the screen.</figcaption>
+               </figure>
+               -->
+               </li>
+               <li>
+               <strong>When focus leaves the additional content, the additional content is automatically hidden or collapsed, or the content can be hidden or collapsed by use of a dedicated keyboard command (for example, the <kbd>Escape</kbd> key</strong>.) This is very similar to patterns discussed previously under Non-persistent opened information. A distinguishing factor can be that the user's last point of interaction in the disclosure is preserved (it persists) even though it may be hidden until a user returns. Some trees and side navigation patterns behave this way.
+               <!--
+               <figure id="">
+               <img src="" alt=""/>
+               <figcaption>Placeholder for future illustrations showing a collapsible tree that when expanded shows the prior point of interaction</figcaption>
+               </figure>
+               -->
+               </li>
+            </ul>
+
+            <p>In recognition of more complex interfaces and user needs there is a note: <cite>Content opened by the user may obscure the component receiving focus</cite>. If the user can bring the item with focus into view using a method without having to navigate back to the user-opened content to dismiss it, this criterion would be passed. For example, keyboard actions that may allow the item with focus to be revealed include:
+</p>
+
+            <ul>
+               <li>using the <kbd>Escape</kbd> key to dismiss the obscuring content;</li>
+               <li>using keys to scroll the content in the viewport to reveal the item with focus;</li>
+               <li>issuing a key to move between overlays.</li>
+            </ul>
+   
+            <p>For example:</p>
+   
+            <ul>
+               <li>A user opens a chat interface, which is a popover non-modal dialog. This results in some content of the underlying page being fully obscured. The user navigates away from the chat interface by use of the <kbd>tab</kbd> key, focusing onto a link that has been fully obscured by the dialog. The user presses the <kbd>Escape</kbd> key to close the chat interface, which un-obscures the link.</li>
+               <li>A user expands a fixed-position page feedback component at the bottom of a Web page. They then use their keyboard to navigate to a link that's fully obscured by the expanded component and press the <kbd>down arrow</kbd> or <kbd>space</kbd> key on their keyboard to scroll the content on the page, un-obscuring the link.</li>
+               <li>A user opens a web-based multi-user authoring application. An overlay appears displaying a list of people who have contributed to the document. The user tabs through the list of contributors and activates one of them. The application displays a new overlay, which obscures the first one, that displays that person's recent contributions. The user presses the <kbd>F6</kbd> key to toggle the stacking order of the two overlays.</li>
+            </ul>
+
+         </section>
+      </section>
+      <section id="dialogs">
+         <h3>Modal dialogs</h3>
+
+         <p>A properly constructed modal dialog will always pass this SC. Even if it appears directly on top of an item with focus, the dialog takes focus on appearance, and thus the item receiving focus -- the dialog or one of its components -- is visible. A properly constructed modal maintains that focus and prevents interaction outside the modal until it is dismissed.</p>
+         <p>A dialog-like overlay that does not take focus on appearance and does not either constrain interaction to the overlay or dismiss itself on loss of focus (thus allowing focus to exit into the content behind it) will be at risk of failing this SC, where it is positioned such that it can obscure other focusable items.</p>
+      </section>   
+   </section>
+
+   <section id="benefits">
+      <h2>Benefits of Focus Not Obscured (Minimum)</h2>
+
+      <ul>
+         <li>Sighted users who rely on a keyboard interface to operate the page will be able to see the component which gets keyboard focus. Such users include those who rely on a keyboard or on devices which use the keyboard interface, including speech input, sip-and-puff software, onscreen keyboards, scanning software, and a variety of assistive technologies and alternate keyboards.</li>
+         <li>People with limited or low vision, who may primarily user a pointer for screen orientation and repositioning, nonetheless benefit from a visible indication of the current point of keyboard interaction, especially where magnification reduces the overall viewing portion of the screen.</li>
+         <li>People with attention limitations, short term memory limitations, or limitations in executive processes benefit by being able to discover where the focus is located.</li>
+      </ul>
+
+   </section>
+   
+   <section id="examples">
+      <h2>Examples of Focus Not Obscured (Minimum)</h2>
+
+      <ul>
+         <li>A page has a sticky footer (attached to the bottom of the viewport). When tabbing down the page the focused item is not completely visually obscured by the footer because content in the viewport scrolls up to always display the item with keyboard focus using <a href="https://www.w3.org/TR/css-scroll-snap/#propdef-scroll-padding" rel="nofollow">scroll padding</a>.</li>
+         <li>A page has a full-width cookie approval dialog. The dialog is modal, preventing access to the other controls in the page until it has been dismissed. Focus is not obscured because the major portion of the cookie approval dialog remains on screen (until selections are made and submitted),  and so the major portion of the keyboard focus indicator remains visible.</li>
+         <li>A notification is implemented as a sticky header and the keyboard focus is moved to the notification so at least part of the focus indicator is in view. The notification disappears when it loses focus so it does not obscure any other controls, and part of the prior keyboard focus indicator is visible.</li>
+      </ul>
+         
+   </section>
+
+   <section id="resources">
+       <h2>Resources</h2>
+       <ul>
+         <li><a href="https://knowbility.org/blog/2020/accessible-slide-menus">Let's Focus on Slide-Out Navigation </a></li>
+       </ul>
+
+   </section>
+
+   
+   <section id="techniques">
+      <h2>Techniques for Focus Not Obscured (Minimum)</h2>
+      
+      <section id="sufficient">
+         <h3>Sufficient Techniques</h3>
+         
+         <ul>
+            <li>
+              <a href="../../techniques/css/C43">C43: Using CSS scroll-padding to un-obscure content</a>
+            </li>
+         </ul>
+         
+      </section>
+      
+      <section id="advisory">
+         <h3>Additional Techniques (Advisory)</h3>
+         
+      </section>
+      
+      <section id="failure">
+         <h3>Failures</h3>
+         <ul>
+            <li>
+               <a href="../../techniques/failures/F110">F110 - Failure due to a sticky footer hiding focused elements</a>
+            </li>
+         </ul>
+      </section>
+      
+   </section>
+   
+</body>
+</html>
diff --git a/understanding/22/hidden-controls.html b/understanding/22/hidden-controls.html
deleted file mode 100644
index 28a8fc28ec..0000000000
--- a/understanding/22/hidden-controls.html
+++ /dev/null
@@ -1,111 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
-<head>
-   <meta charset="UTF-8"></meta>
-   <title>Understanding Hidden Controls</title>
-   <link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"></link>
-</head>
-<body>
-   <h1>Understanding Hidden Controls</h1>
-   
-    <section id="status" class="advisement">
-        <h2>Status</h2>
-        <p>This understanding document is part of the <a href="https://w3c.github.io/wcag/guidelines/22/"><strong>draft</strong> WCAG 2.2 content</a>. It may change or be removed before the final WCAG 2.2 is published.</p>
-    </section>
-
-
-   <section class="remove">
-   
-        <h2>Hidden Controls Success Criteria Text</h2>
-        <blockquote>
-        <p class="conformance-level">AA</p>
-        
-		<p>Controls needed to progress or complete a <a>process</a> are visible at the time they are needed without requiring pointer hover or keyboard focus, 
-		or a mechanism is available to make them persistently visible.</p>
-        </blockquote>
-     </section>
-   
-    <section id="intent">
-        
-        <h2>Intent of Hidden Controls</h2>
-
-		<p>The intent of this Success Criterion is to ensure that controls needed to progress or complete a process can be easily found by people with cognitive disabilities when they are needed.  </p>
-
-		<p>People with low executive function, impaired memory, and other cognitive and learning disabilities may not be able to find controls needed to progress if they are hidden until focus is placed on them or a pointer hovers over them. They may also not remember where the control is the next time they interact with the site.</p>  
-
-		<p>Some design approaches hide controls needed to complete tasks and require certain user interactions, such as mouse-over, to display these controls. These required interactions can leave users with cognitive disabilities without a path forward.   </p>
-
-		<h3>When Needed</h3>
-		<p>Controls should be visible without user interaction (i.e., persistently visible) when they are needed to progress.  In multistep processes or multipart forms, the control may be hidden in an earlier step/part, however, at the time the user can move forward the control needs to be persistently visible without having interacted with the control.  Similarly, this SC does not require inactive controls to be persistently visible until the user is able to progress. For example, when a form includes required fields be completed before the submit button becomes active, the submit button does not need to be persistently visible while it is inactive.</p> 
-
-		<p>When multiple controls are included in a single location, some indication of those controls such as a drop down indicator should be visible without user interaction. </p>
-
-		<p>In some cases, controls are provided in multiple locations on a page or at multiple points within a process. In these cases, at least one of the instances of the controls needs to be visible without user interaction.  For example, in an email process, some controls such as trash may be visible using pointer hover in the list of emails but are always visible on the view of the email itself. Because the controls are persistently visible when needed on the email view, they do not need to persistently visible on the list of emails. </p>
-
-		<h3>Visible</h3>
-		<p>The intent of this SC is to help individuals with cognitive and learning disabilities locate controls they need to successfully complete their desired task.  The controls addressed in this SC should also meet the SC for sufficient text (1.4.3/1.4.6) and non-text (1.4.11) contrast. </p>
-
-		<h3>Mutlimedia Controls</h3>
-		<p>Controls such as video players, web chats, and carousels include controls that are only visible on hover since they overlay the contents being displayed.  These controls are not considered a process in terms of this SC but occasionally completing a process requires interacting with one of these controls. For example, completing training may require the user watch a video before proceeding to the next step. In this case, a control needed to play the video needs to be visibly persistent. This may be accomplished by making the video controls all visibly persist or by adding a redundant play control to the page. </p>
-
-
-    </section>
-	
-    <section id="benefits">
-      <h2>Benefits of Hidden Controls</h2>
-      
-      <ul>
-         <li>Users with cognitive and learning disabilities can more easily locate controls that allow them to successfully progress through a process.</li>
-         <li>Users with memory impairments do not need to remember where controls are located</li>
-      </ul>
-      
-   </section>
-   
-   <section id="examples">
-      <h2>Examples of Hidden Controls</h2>
-
-      <ul>
-         <li><strong>Web Editor Success</strong>: In a web editor, once a page is open for editing, all the possible locations for editing display a pencil icon. </li>
-         <li><strong>Web Editor Success</strong>: In a web editor, the possible locations for editing are hidden until a user hovers over them but a radio button in settings can be changed so that the icons are all shown by default. </li>
-         <li><strong>Email Success</strong>: When writing an email, controls needed to trash or forward the email are hidden by hover on the email list page but visually persist at the top of the email screen.</li>         
-      </ul>
-      
-   </section>
-
-   
-   <section id="techniques">
-      <h2>Techniques for Hidden Controls</h2>
-      
-      
-      <section id="sufficient">
-         <h3>Sufficient Techniques for Hidden Controls</h3>
-         
-         
-         <ol>
-            <li>
-                <a href="../../techniques/general/hidden-control-1.html" class="general">Provide persistently visible controls</a>
-            </li>
-            <!--<li>
-               <a href="../../techniques/general/hidden-control-2.html" class="general">Provide a setting to make controls visibly persist</a>
-            </li>-->
-			<li>Use simplification=”important” to indicate the control is important (future)
-			</li>
-         </ol>
-         
-      </section>
-      
-      <section id="advisory">
-         <h3>Additional Techniques (Advisory) for Hidden Controls</h3>
-         
-      </section>
-      
-      <section id="failure">
-         <h3>Failures for Hidden Controls</h3>
-
-
-      </section>
-      
-   </section>
-   
-</body>
-</html>
diff --git a/understanding/22/img/component-complex-both-unselected.png b/understanding/22/img/component-complex-both-unselected.png
new file mode 100644
index 0000000000..8c68c31271
Binary files /dev/null and b/understanding/22/img/component-complex-both-unselected.png differ
diff --git a/understanding/22/img/component-complex-both.png b/understanding/22/img/component-complex-both.png
new file mode 100644
index 0000000000..771af997f0
Binary files /dev/null and b/understanding/22/img/component-complex-both.png differ
diff --git a/understanding/22/img/component-complex-sub.png b/understanding/22/img/component-complex-sub.png
new file mode 100644
index 0000000000..9df24991cd
Binary files /dev/null and b/understanding/22/img/component-complex-sub.png differ
diff --git a/understanding/22/img/component-complex-whole.png b/understanding/22/img/component-complex-whole.png
new file mode 100644
index 0000000000..1d0b6d77b1
Binary files /dev/null and b/understanding/22/img/component-complex-whole.png differ
diff --git a/understanding/22/img/focus-indicator-background-passing.png b/understanding/22/img/focus-indicator-background-passing.png
new file mode 100644
index 0000000000..cefbb10c7b
Binary files /dev/null and b/understanding/22/img/focus-indicator-background-passing.png differ
diff --git a/understanding/22/img/focus-indicator-background.png b/understanding/22/img/focus-indicator-background.png
new file mode 100644
index 0000000000..67562d3d60
Binary files /dev/null and b/understanding/22/img/focus-indicator-background.png differ
diff --git a/understanding/22/img/focus-indicator-basic.png b/understanding/22/img/focus-indicator-basic.png
new file mode 100644
index 0000000000..09666591ae
Binary files /dev/null and b/understanding/22/img/focus-indicator-basic.png differ
diff --git a/understanding/22/img/focus-indicator-browser-defaults-modified-background.png b/understanding/22/img/focus-indicator-browser-defaults-modified-background.png
new file mode 100644
index 0000000000..fdb1c6f7c6
Binary files /dev/null and b/understanding/22/img/focus-indicator-browser-defaults-modified-background.png differ
diff --git a/understanding/22/img/focus-indicator-browser-defaults-unmodified.png b/understanding/22/img/focus-indicator-browser-defaults-unmodified.png
new file mode 100644
index 0000000000..f240bb4fea
Binary files /dev/null and b/understanding/22/img/focus-indicator-browser-defaults-unmodified.png differ
diff --git a/understanding/22/img/focus-indicator-browser-defaults.html b/understanding/22/img/focus-indicator-browser-defaults.html
new file mode 100644
index 0000000000..e865ec70ab
--- /dev/null
+++ b/understanding/22/img/focus-indicator-browser-defaults.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+  <title>Figure source: Focus Indicator Custom Shapes</title>
+  <style>
+    button {
+      box-sizing: border-box;
+      margin-top: 15px;
+      margin-bottom: 15px;
+      margin-left: 10px;
+      margin-right: 10px;
+      width: 90px;
+      height: 30px;
+      font-size: 12px;
+    }
+
+    .blue button {
+      border: 2px solid #48f;
+    }
+  </style>
+
+  <main>
+    <h1>Figure source: Focus Indicator Browser Defaults</h1>
+    <div>
+      <h2>Unmodified indicator background</h2>
+      <button>Example</button>
+      <button>Example</button>
+      <button>Example</button>
+    </div>
+    <div class="blue">
+      <h2>Blue indicator background</h2>
+      <button>Example</button>
+      <button>Example</button>
+      <button>Example</button>
+    </div>
+  </main>
+
+</html>
diff --git a/understanding/22/img/focus-indicator-custom-shapes-inset.png b/understanding/22/img/focus-indicator-custom-shapes-inset.png
new file mode 100644
index 0000000000..7068585a83
Binary files /dev/null and b/understanding/22/img/focus-indicator-custom-shapes-inset.png differ
diff --git a/understanding/22/img/focus-indicator-custom-shapes-side-highlights.png b/understanding/22/img/focus-indicator-custom-shapes-side-highlights.png
new file mode 100644
index 0000000000..4c46f1213b
Binary files /dev/null and b/understanding/22/img/focus-indicator-custom-shapes-side-highlights.png differ
diff --git a/understanding/22/img/focus-indicator-custom-shapes.html b/understanding/22/img/focus-indicator-custom-shapes.html
new file mode 100644
index 0000000000..25f4a1ad94
--- /dev/null
+++ b/understanding/22/img/focus-indicator-custom-shapes.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html lang="en">
+  <title>Figure source: Focus Indicator Custom Shapes</title>
+  <style>
+    button {
+      background: #17569D;
+      border: none;
+      border-radius: 0;
+      box-shadow: none;
+      box-sizing: border-box;
+      color: #fff;
+      margin-top: 15px;
+      margin-bottom: 15px;
+      margin-left: 10px;
+      margin-right: 10px;
+      width: 90px;
+      height: 30px;
+      font-size: 12px;
+    }
+
+    button.focus-inset {
+      position:relative;
+    }
+    button.focus-inset::after {
+      --inset: 3px;
+      content: '';
+      position: absolute;
+      top: var(--inset);
+      right: var(--inset);
+      bottom: var(--inset);
+      left: var(--inset);
+      border: 3px solid yellow;
+    }
+
+    button.focus-side-highlights {
+      border: 1px solid #17569D;
+      position: relative;
+    }
+    button.focus-side-highlights::after {
+      --inset: 1px;
+      content: '';
+      position: absolute;
+      top: var(--inset);
+      right: var(--inset);
+      bottom: var(--inset);
+      left: var(--inset);
+      border-left: 10px solid yellow;
+      border-right: 10px solid yellow;
+    }
+  </style>
+
+  <main>
+    <h1>Figure source: Focus Indicator Custom Shapes</h1>
+    <p>All examples are 90px x 30px buttons, so have 480px<sup>2</sup> minimum indicator area.</p>
+    <div>
+      <h2>Passes: 3px inset, 3px thick</h2>
+      <p>Indicator area = (84 * 24) - (78 * 18) = 612px<sup>2</sup> > 480px<sup>2</sup></p>
+      <button>Example</button>
+      <button class="focus-inset">Example</button>
+      <button>Example</button>
+    </div>
+    <div>
+      <h2>Passes: 2 28px x 9px rectangles</h2>
+      <p>Indicator area = 2 * 28 * 9 = 504px<sup>2</sup> > 480px<sup>2</sup></p>
+      <button>Example</button>
+      <button class="focus-side-highlights">Example</button>
+      <button>Example</button>
+    </div>
+  </main>
+
+</html>
diff --git a/understanding/22/img/focus-indicator-extra-outline.png b/understanding/22/img/focus-indicator-extra-outline.png
new file mode 100644
index 0000000000..1810f48f4b
Binary files /dev/null and b/understanding/22/img/focus-indicator-extra-outline.png differ
diff --git a/understanding/22/img/focus-indicator-good-adjacent-bad-change.png b/understanding/22/img/focus-indicator-good-adjacent-bad-change.png
new file mode 100644
index 0000000000..b2fbb271f1
Binary files /dev/null and b/understanding/22/img/focus-indicator-good-adjacent-bad-change.png differ
diff --git a/understanding/22/img/focus-indicator-good-change-bad-adjacent.png b/understanding/22/img/focus-indicator-good-change-bad-adjacent.png
new file mode 100644
index 0000000000..49fc670d73
Binary files /dev/null and b/understanding/22/img/focus-indicator-good-change-bad-adjacent.png differ
diff --git a/understanding/22/img/focus-indicator-group-and-star.svg b/understanding/22/img/focus-indicator-group-and-star.svg
new file mode 100644
index 0000000000..f73f7c2172
--- /dev/null
+++ b/understanding/22/img/focus-indicator-group-and-star.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1004" height="214" viewBox="0 0 1004 214"><g fill="none" fill-rule="evenodd" transform="translate(2 2)"><rect width="1000" height="210" fill="#FAFAFA" stroke="#000864" stroke-width="3"/><polygon fill="#E96115" points="94.003 148.25 36.995 178.379 47.883 114.565 1.763 69.371 65.499 60.06 94.003 2 122.506 60.06 186.243 69.371 140.123 114.565 151.01 178.379" transform="translate(9 15)"/><g transform="translate(402 7)"><polygon fill="#E96115" points="94.003 148.25 36.995 178.379 47.883 114.565 1.763 69.371 65.499 60.06 94.003 2 122.506 60.06 186.243 69.371 140.123 114.565 151.01 178.379" transform="translate(3 8)"/><rect width="196" height="196" stroke="#000864" stroke-width="3"/></g><polygon fill="#E96115" points="94.003 148.25 36.995 178.379 47.883 114.565 1.763 69.371 65.499 60.06 94.003 2 122.506 60.06 186.243 69.371 140.123 114.565 151.01 178.379" transform="translate(207 15)"/><path stroke="#E96115" d="M95,3.12977573 L123.322498,60.5174254 L186.65353,69.7199629 L140.826765,114.390019 L151.644997,177.465149 L95,147.685112 L38.3550034,177.465149 L49.1732351,114.390019 L3.34647023,69.7199629 L66.6775017,60.5174254 L95,3.12977573 Z" transform="translate(603 15)"/><path stroke="#E96115" d="M95,3.12977573 L123.322498,60.5174254 L186.65353,69.7199629 L140.826765,114.390019 L151.644997,177.465149 L95,147.685112 L38.3550034,177.465149 L49.1732351,114.390019 L3.34647023,69.7199629 L66.6775017,60.5174254 L95,3.12977573 Z" transform="translate(802 15)"/></g></svg>
\ No newline at end of file
diff --git a/understanding/22/img/focus-indicator-group-outline.svg b/understanding/22/img/focus-indicator-group-outline.svg
new file mode 100644
index 0000000000..860e8562a6
--- /dev/null
+++ b/understanding/22/img/focus-indicator-group-outline.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1004" height="214" viewBox="0 0 1004 214"><g fill="none" fill-rule="evenodd" transform="translate(2 2)"><rect width="1000" height="210" fill="#FAFAFA" stroke="#000864" stroke-width="3"/><polygon fill="#E96115" points="94.003 148.25 36.995 178.379 47.883 114.565 1.763 69.371 65.499 60.06 94.003 2 122.506 60.06 186.243 69.371 140.123 114.565 151.01 178.379" transform="translate(9 15)"/><polygon fill="#E96115" points="94.003 148.25 36.995 178.379 47.883 114.565 1.763 69.371 65.499 60.06 94.003 2 122.506 60.06 186.243 69.371 140.123 114.565 151.01 178.379" transform="translate(207 15)"/><polygon fill="#E96115" points="94.003 148.25 36.995 178.379 47.883 114.565 1.763 69.371 65.499 60.06 94.003 2 122.506 60.06 186.243 69.371 140.123 114.565 151.01 178.379" transform="translate(405 15)"/><path stroke="#E96115" d="M95,3.12977573 L123.322498,60.5174254 L186.65353,69.7199629 L140.826765,114.390019 L151.644997,177.465149 L95,147.685112 L38.3550034,177.465149 L49.1732351,114.390019 L3.34647023,69.7199629 L66.6775017,60.5174254 L95,3.12977573 Z" transform="translate(603 15)"/><path stroke="#E96115" d="M95,3.12977573 L123.322498,60.5174254 L186.65353,69.7199629 L140.826765,114.390019 L151.644997,177.465149 L95,147.685112 L38.3550034,177.465149 L49.1732351,114.390019 L3.34647023,69.7199629 L66.6775017,60.5174254 L95,3.12977573 Z" transform="translate(802 15)"/></g></svg>
\ No newline at end of file
diff --git a/understanding/22/img/focus-indicator-non-text-contrast.html b/understanding/22/img/focus-indicator-non-text-contrast.html
new file mode 100644
index 0000000000..6f2e850483
--- /dev/null
+++ b/understanding/22/img/focus-indicator-non-text-contrast.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en">
+  <title>Figure source: Focus Indicator Custom Shapes</title>
+  <style>
+    button {
+      background: #AECFF4;
+      border: 3px solid black;
+      border-radius: 4px;
+      box-shadow: none;
+      box-sizing: border-box;
+      color: #000;
+      margin-top: 15px;
+      margin-bottom: 15px;
+      margin-left: 10px;
+      margin-right: 10px;
+      width: 90px;
+      height: 30px;
+      font-size: 12px;
+    }
+
+    button.focus-low-change-contrast {
+      /* > 3:1 with button bg and page bg, < 3:1 with unfocused button border */
+      border-color: #666;
+    }
+    button.focus-low-adjacent-contrast {
+      /* < 3:1 with button bg and page bg, > 3:1 with unfocused button border */
+      border-color: #ccc;
+    }
+  </style>
+
+  <main>
+    <h1>Figure source: Focus Indicator Relationship with Non-text Contrast</h1>
+    <div>
+      <h2>Passes Focus Appearance, fails Non-text Contrast</h2>
+      <button>Example</button>
+      <button class="focus-low-adjacent-contrast">Example</button>
+      <button>Example</button>
+    </div>
+    <div>
+      <h2>Passes Non-text Contrast, fails Focus Appearance</h2>
+      <button>Example</button>
+      <button class="focus-low-change-contrast">Example</button>
+      <button>Example</button>
+    </div>
+  </main>
+
+</html>
diff --git a/understanding/22/img/focus-indicator-ntc-comparison1.png b/understanding/22/img/focus-indicator-ntc-comparison1.png
new file mode 100644
index 0000000000..fc0a1fa38f
Binary files /dev/null and b/understanding/22/img/focus-indicator-ntc-comparison1.png differ
diff --git a/understanding/22/img/focus-indicator-offset-types.html b/understanding/22/img/focus-indicator-offset-types.html
new file mode 100644
index 0000000000..8f3d1e45da
--- /dev/null
+++ b/understanding/22/img/focus-indicator-offset-types.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<html lang="en">
+  <title>Figure source: Focus Indicator Offset Types</title>
+  <style>
+    :root {
+      /*
+        For figure accuracy:
+        - indicator-fg must meet 3:1 with page-bg, button-bg, and button-border-fg
+        - indicator-thickness must be exactly 2px
+        - indicator-style must be solid
+
+        For figure clarity:
+        - button-border-fg should meet 4.5:1 with page-bg and button-bg
+        - indicator-fg should meet 4.5:1 with page-bg, button-bg, and button-border-fg
+      */
+      --indicator-offset: 3px;
+      --indicator-thickness: 2px;
+      --indicator-style: solid;
+
+      --indicator-fg: #000;
+      --page-bg: #fff;
+      --button-bg: #cce;
+      --button-fg: #000;
+      --button-border-fg: #77a;
+
+      --button-border-radius: 10px;
+    }
+    button {
+      background: var(--button-bg);;
+      border: solid 2px var(--button-border-fg);
+      border-radius: var(--button-border-radius);
+      box-shadow: none;
+      box-sizing: border-box;
+      color: var(--button-fg);
+      margin-top: 15px;
+      margin-bottom: 15px;
+      margin-left: 10px;
+      margin-right: 10px;
+      outline: none;
+      width: 150px;
+      height: 50px;
+      font-size: 24px;
+    }
+    .button-container {
+      display: flex;
+      width: 100%;
+      justify-content: center
+    }
+
+    .outset {
+      outline-offset: var(--indicator-offset);
+      outline: var(--indicator-thickness) var(--indicator-style) var(--indicator-fg);
+    }
+
+    .outline {
+      outline: var(--indicator-thickness) var(--indicator-style) var(--indicator-fg);
+    }
+
+    .border {
+      border: var(--indicator-thickness) var(--indicator-style) var(--indicator-fg);
+    }
+
+    .inset {
+      position:relative;
+    }
+    .inset::after {
+      content: '';
+      position: absolute;
+      top: var(--indicator-offset);
+      right: var(--indicator-offset);
+      bottom: var(--indicator-offset);
+      left: var(--indicator-offset);
+      border: var(--indicator-thickness) var(--indicator-style) var(--indicator-fg);
+      border-radius: calc(var(--button-border-radius) - var(--indicator-offset));
+    }
+  </style>
+
+  <main>
+    <h1>Figure source: Focus Indicator Offset Types</h1>
+    <div class="button-container">
+      <button>Unfocused</button>
+    </div>
+    <div class="button-container">
+      <button class="outset">Outset</button>
+      <button class="outline">Outline</button>
+      <button class="border">Border</button>
+      <button class="inset">Inset</button>
+    </div>
+  </main>
+
+</html>
diff --git a/understanding/22/img/focus-indicator-offset-types.png b/understanding/22/img/focus-indicator-offset-types.png
new file mode 100644
index 0000000000..2ba42891ca
Binary files /dev/null and b/understanding/22/img/focus-indicator-offset-types.png differ
diff --git a/understanding/22/img/focus-indicator-outerline.png b/understanding/22/img/focus-indicator-outerline.png
index 63fa99975d..873775989e 100644
Binary files a/understanding/22/img/focus-indicator-outerline.png and b/understanding/22/img/focus-indicator-outerline.png differ
diff --git a/understanding/22/img/focus-indicator-select.png b/understanding/22/img/focus-indicator-select.png
new file mode 100644
index 0000000000..089e1d6667
Binary files /dev/null and b/understanding/22/img/focus-indicator-select.png differ
diff --git a/understanding/22/img/focus-indicator-solid-border.png b/understanding/22/img/focus-indicator-solid-border.png
new file mode 100644
index 0000000000..7f8e0f1db3
Binary files /dev/null and b/understanding/22/img/focus-indicator-solid-border.png differ
diff --git a/understanding/22/img/focus-indicator-solid-border.svg b/understanding/22/img/focus-indicator-solid-border.svg
new file mode 100644
index 0000000000..ce4f80676f
--- /dev/null
+++ b/understanding/22/img/focus-indicator-solid-border.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1000" height="210" viewBox="0 0 1000 210"><g fill="none" fill-rule="evenodd"><rect width="1000" height="210" fill="#FAFAFA"/><polygon fill="#E96115" points="94.003 148.25 36.995 178.379 47.883 114.565 1.763 69.371 65.499 60.06 94.003 2 122.506 60.06 186.243 69.371 140.123 114.565 151.01 178.379" transform="translate(9 16)"/><g transform="translate(402 8)"><polygon fill="#E96115" points="94.003 148.25 36.995 178.379 47.883 114.565 1.763 69.371 65.499 60.06 94.003 2 122.506 60.06 186.243 69.371 140.123 114.565 151.01 178.379" transform="translate(3 8)"/><rect width="196" height="196" stroke="#000864" stroke-width="3"/></g><polygon fill="#E96115" points="94.003 148.25 36.995 178.379 47.883 114.565 1.763 69.371 65.499 60.06 94.003 2 122.506 60.06 186.243 69.371 140.123 114.565 151.01 178.379" transform="translate(207 16)"/><path stroke="#E96115" d="M95,3.12977573 L123.322498,60.5174254 L186.65353,69.7199629 L140.826765,114.390019 L151.644997,177.465149 L95,147.685112 L38.3550034,177.465149 L49.1732351,114.390019 L3.34647023,69.7199629 L66.6775017,60.5174254 L95,3.12977573 Z" transform="translate(603 16)"/><path stroke="#E96115" d="M95,3.12977573 L123.322498,60.5174254 L186.65353,69.7199629 L140.826765,114.390019 L151.644997,177.465149 L95,147.685112 L38.3550034,177.465149 L49.1732351,114.390019 L3.34647023,69.7199629 L66.6775017,60.5174254 L95,3.12977573 Z" transform="translate(802 16)"/></g></svg>
\ No newline at end of file
diff --git a/understanding/22/img/focus-indicator-solid-outline.png b/understanding/22/img/focus-indicator-solid-outline.png
new file mode 100644
index 0000000000..dcadc0b8ec
Binary files /dev/null and b/understanding/22/img/focus-indicator-solid-outline.png differ
diff --git a/understanding/22/img/focus-indicator-solid-outline.svg b/understanding/22/img/focus-indicator-solid-outline.svg
new file mode 100644
index 0000000000..433a4c3673
--- /dev/null
+++ b/understanding/22/img/focus-indicator-solid-outline.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1001" height="210" viewBox="0 0 1001 210"><g fill="none" fill-rule="evenodd" transform="translate(.5)"><rect width="1000" height="210" fill="#FAFAFA"/><polygon fill="#E96115" points="94.003 148.25 36.995 178.379 47.883 114.565 1.763 69.371 65.499 60.06 94.003 2 122.506 60.06 186.243 69.371 140.123 114.565 151.01 178.379" transform="translate(9 15.5)"/><g transform="translate(396.5 6.5)"><path fill="#FFF" stroke="#000864" stroke-width="3" d="M104,3.7427533 L135.228221,67.0180408 L205.056647,77.164705 L154.528323,126.417648 L166.456443,195.963918 L104,163.128623 L41.5435574,195.963918 L53.4716766,126.417648 L2.94335313,77.164705 L72.7717787,67.0180408 L104,3.7427533 Z"/><polygon fill="#E96115" points="103.896 158.646 46.587 188.775 57.532 124.961 11.168 79.767 75.241 70.456 103.896 12.396 132.551 70.456 196.624 79.767 150.26 124.961 161.205 188.775"/></g><polygon fill="#E96115" points="94.003 148.25 36.995 178.379 47.883 114.565 1.763 69.371 65.499 60.06 94.003 2 122.506 60.06 186.243 69.371 140.123 114.565 151.01 178.379" transform="translate(208.5 15.5)"/><path stroke="#E96115" d="M95,3.12977573 L123.322498,60.5174254 L186.65353,69.7199629 L140.826765,114.390019 L151.644997,177.465149 L95,147.685112 L38.3550034,177.465149 L49.1732351,114.390019 L3.34647023,69.7199629 L66.6775017,60.5174254 L95,3.12977573 Z" transform="translate(603 15.5)"/><path stroke="#E96115" d="M95,3.12977573 L123.322498,60.5174254 L186.65353,69.7199629 L140.826765,114.390019 L151.644997,177.465149 L95,147.685112 L38.3550034,177.465149 L49.1732351,114.390019 L3.34647023,69.7199629 L66.6775017,60.5174254 L95,3.12977573 Z" transform="translate(802 15.5)"/></g></svg>
\ No newline at end of file
diff --git a/understanding/22/img/focus-indicator-star-with-abutted-line.png b/understanding/22/img/focus-indicator-star-with-abutted-line.png
new file mode 100644
index 0000000000..f466e7cfcf
Binary files /dev/null and b/understanding/22/img/focus-indicator-star-with-abutted-line.png differ
diff --git a/understanding/22/img/focus-indicator-star-with-abutted-line.svg b/understanding/22/img/focus-indicator-star-with-abutted-line.svg
new file mode 100644
index 0000000000..595e447fed
--- /dev/null
+++ b/understanding/22/img/focus-indicator-star-with-abutted-line.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="391" height="191" viewBox="0 0 391 191">
+	<g fill="none" fill-rule="evenodd" transform="translate(.5 .5)">
+		<rect width="390" height="190" fill="#ffffff"/>
+		<polygon fill="#E96115" points="94.5 148.25 37.191 178.379 48.136 114.565 1.772 69.371 65.845 60.06 94.5 2 123.155 60.06 187.228 69.371 140.864 114.565 151.809 178.379" transform="translate(2 4.5)"/>
+		<path fill="#E96115" stroke="#000864" stroke-width="2" d="M289.5,5.24044854 L318.818597,64.6464138 L384.376971,74.1726032 L336.938486,120.413698 L348.137193,185.707172 L289.5,154.879776 L230.862807,185.707172 L242.061514,120.413698 L194.623029,74.1726032 L260.181403,64.6464138 L289.5,5.24044854 Z"/>
+	</g>
+</svg>
\ No newline at end of file
diff --git a/understanding/22/img/focus-indicator-star-with-focus.png b/understanding/22/img/focus-indicator-star-with-focus.png
new file mode 100644
index 0000000000..e1c82cbdc2
Binary files /dev/null and b/understanding/22/img/focus-indicator-star-with-focus.png differ
diff --git a/understanding/22/img/focus-indicator-star-with-focus.svg b/understanding/22/img/focus-indicator-star-with-focus.svg
new file mode 100644
index 0000000000..496f7543bf
--- /dev/null
+++ b/understanding/22/img/focus-indicator-star-with-focus.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="197" height="197" viewBox="0 0 197 197"><g fill="none" fill-rule="evenodd" transform="translate(1.5 1.5)"><rect width="194" height="194" fill="#FFF" stroke="#000864" stroke-width="2"/><polygon fill="#E96115" points="94.5 148.25 37.191 178.379 48.136 114.565 1.772 69.371 65.845 60.06 94.5 2 123.155 60.06 187.228 69.371 140.864 114.565 151.809 178.379" transform="translate(2.5 5)"/></g></svg>
\ No newline at end of file
diff --git a/understanding/22/img/focus-indicator-star-with-light-focus.png b/understanding/22/img/focus-indicator-star-with-light-focus.png
new file mode 100644
index 0000000000..e37af2db88
Binary files /dev/null and b/understanding/22/img/focus-indicator-star-with-light-focus.png differ
diff --git a/understanding/22/img/focus-indicator-star-with-light-focus.svg b/understanding/22/img/focus-indicator-star-with-light-focus.svg
new file mode 100644
index 0000000000..02e0d0e6dc
--- /dev/null
+++ b/understanding/22/img/focus-indicator-star-with-light-focus.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="381" height="191"  viewBox="0 0 381 191" xml:space="preserve" fill-rule="evenodd" clip-rule="evenodd"><g transform="matrix(1,0,0,1,-1.5,0.5)"><rect width="381" height="191" fill="#fff" transform="matrix(1,0,0,1,1.5,-0.5)"/><rect x="191.5" width="190" height="190" fill="#fff" stroke="#949494" stroke-width="2px" transform="matrix(0.948047,0,0,0.948047,9.95606,4.93553)"/><path d="M94.5,148.25L37.191,178.379L48.136,114.565L1.772,69.371L65.845,60.06L94.5,2L123.155,60.06L187.228,69.371L140.864,114.565L151.809,178.379L94.5,148.25Z" fill="#e96115" transform="matrix(0.948047,0,0,0.948047,191.507,8.2537)"/><path d="M94.5,148.25L37.191,178.379L48.136,114.565L1.772,69.371L65.845,60.06L94.5,2L123.155,60.06L187.228,69.371L140.864,114.565L151.809,178.379L94.5,148.25Z" fill="#e96115" transform="matrix(0.948047,0,0,0.948047,9.95606,8.2537)"/></g></svg>
\ No newline at end of file
diff --git a/understanding/22/img/focus-indicator-star-without-focus.png b/understanding/22/img/focus-indicator-star-without-focus.png
new file mode 100644
index 0000000000..74ad6604c0
Binary files /dev/null and b/understanding/22/img/focus-indicator-star-without-focus.png differ
diff --git a/understanding/22/img/focus-indicator-star-without-focus.svg b/understanding/22/img/focus-indicator-star-without-focus.svg
new file mode 100644
index 0000000000..67157b1a35
--- /dev/null
+++ b/understanding/22/img/focus-indicator-star-without-focus.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="186" height="177" viewBox="0 0 186 177"><polygon fill="#E96115" fill-rule="evenodd" points="94.5 148.25 37.191 178.379 48.136 114.565 1.772 69.371 65.845 60.06 94.5 2 123.155 60.06 187.228 69.371 140.864 114.565 151.809 178.379" transform="translate(-1.5 -2)"/></svg>
\ No newline at end of file
diff --git a/understanding/22/img/focus-indicator-strong-dashed-border.png b/understanding/22/img/focus-indicator-strong-dashed-border.png
new file mode 100644
index 0000000000..12589b03bd
Binary files /dev/null and b/understanding/22/img/focus-indicator-strong-dashed-border.png differ
diff --git a/understanding/22/img/focus-indicator-strong-dashed-border.svg b/understanding/22/img/focus-indicator-strong-dashed-border.svg
new file mode 100644
index 0000000000..8852e04f03
--- /dev/null
+++ b/understanding/22/img/focus-indicator-strong-dashed-border.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1000" height="210" viewBox="0 0 1000 210"><g fill="none" fill-rule="evenodd"><path stroke="#000864" stroke-dasharray="7" stroke-width="4" d="M197.88806,3 L391.5,3 L391.5,191 L197.88806,191 L197.88806,3 Z"/><rect width="1000" height="210" fill="#FAFAFA"/><polygon fill="#E96115" points="94.003 148.25 36.995 178.379 47.883 114.565 1.763 69.371 65.499 60.06 94.003 2 122.506 60.06 186.243 69.371 140.123 114.565 151.01 178.379" transform="translate(10 15)"/><g transform="translate(402.5 7)"><polygon fill="#E96115" points="94.003 148.25 36.995 178.379 47.883 114.565 1.763 69.371 65.499 60.06 94.003 2 122.506 60.06 186.243 69.371 140.123 114.565 151.01 178.379" transform="translate(2.5 8)"/><path stroke="#000864" stroke-dasharray="6 3" stroke-width="3" d="M0,0 L196,0 L196,196 L0,196 L0,0 Z"/></g><polygon fill="#E96115" points="94.003 148.25 36.995 178.379 47.883 114.565 1.763 69.371 65.499 60.06 94.003 2 122.506 60.06 186.243 69.371 140.123 114.565 151.01 178.379" transform="translate(207 15)"/><path stroke="#E96115" d="M95,3.12977573 L123.322498,60.5174254 L186.65353,69.7199629 L140.826765,114.390019 L151.644997,177.465149 L95,147.685112 L38.3550034,177.465149 L49.1732351,114.390019 L3.34647023,69.7199629 L66.6775017,60.5174254 L95,3.12977573 Z" transform="translate(603 15)"/><path stroke="#E96115" d="M95,3.12977573 L123.322498,60.5174254 L186.65353,69.7199629 L140.826765,114.390019 L151.644997,177.465149 L95,147.685112 L38.3550034,177.465149 L49.1732351,114.390019 L3.34647023,69.7199629 L66.6775017,60.5174254 L95,3.12977573 Z" transform="translate(802 15)"/></g></svg>
\ No newline at end of file
diff --git a/understanding/22/img/focus-indicator-two-color-thick.png b/understanding/22/img/focus-indicator-two-color-thick.png
new file mode 100644
index 0000000000..aea14637c4
Binary files /dev/null and b/understanding/22/img/focus-indicator-two-color-thick.png differ
diff --git a/understanding/22/img/focus-indicator-two-color-thin.png b/understanding/22/img/focus-indicator-two-color-thin.png
new file mode 100644
index 0000000000..8d5ff4db69
Binary files /dev/null and b/understanding/22/img/focus-indicator-two-color-thin.png differ
diff --git a/understanding/22/img/focus-indicator-two-color.html b/understanding/22/img/focus-indicator-two-color.html
new file mode 100644
index 0000000000..5f145c335c
--- /dev/null
+++ b/understanding/22/img/focus-indicator-two-color.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+  <title>Figure source: Focus Indicator Two Color</title>
+  <style>
+    button {
+      background: #17569D;
+      border: none;
+      border-radius: 0;
+      box-shadow: none;
+      box-sizing: border-box;
+      color: #fff;
+      margin-top: 15px;
+      margin-bottom: 15px;
+      margin-left: 10px;
+      margin-right: 10px;
+      width: 150px;
+      height: 50px;
+      font-size: 24px;
+    }
+    button.focus-thick {
+      outline: solid 2px black;
+      outline-offset: 2px;
+      box-shadow: 0 0 0 2px #aaa;
+    }
+    button.focus-thin {
+      outline: solid 1px black;
+      outline-offset: 1px;
+      box-shadow: 0 0 0 1px #aaa;
+    }
+  </style>
+
+  <main>
+    <h1>Figure source: Focus Indicator Two Color</h1>
+    <div>
+      <h2>Passes: the 2px thick black line passes</h2>
+      <button>Example</button>
+      <button class="focus-thick">Example</button>
+    </div>
+    <div>
+      <h2>Fails: the indicator is 2px thick, but the part of the indicator meeting change contrast is only 1px thick</h2>
+      <button>Example</button>
+      <button class="focus-thin">Example</button>
+    </div>
+  </main>
+
+</html>
diff --git a/understanding/22/img/focus-indicator-weak-dashed-border.png b/understanding/22/img/focus-indicator-weak-dashed-border.png
new file mode 100644
index 0000000000..08cde7c6a9
Binary files /dev/null and b/understanding/22/img/focus-indicator-weak-dashed-border.png differ
diff --git a/understanding/22/img/focus-indicator-weak-dashed-border.svg b/understanding/22/img/focus-indicator-weak-dashed-border.svg
new file mode 100644
index 0000000000..1600f1f080
--- /dev/null
+++ b/understanding/22/img/focus-indicator-weak-dashed-border.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1000" height="210" viewBox="0 0 1000 210"><g fill="none" fill-rule="evenodd"><path stroke="#000864" stroke-dasharray="7" stroke-width="4" d="M197.88806,3 L391.5,3 L391.5,191 L197.88806,191 L197.88806,3 Z"/><rect width="1000" height="210" fill="#FAFAFA"/><polygon fill="#E96115" points="94.003 148.25 36.995 178.379 47.883 114.565 1.763 69.371 65.499 60.06 94.003 2 122.506 60.06 186.243 69.371 140.123 114.565 151.01 178.379" transform="translate(10 15)"/><g transform="translate(403 7)"><polygon fill="#E96115" points="94.003 148.25 36.995 178.379 47.883 114.565 1.763 69.371 65.499 60.06 94.003 2 122.506 60.06 186.243 69.371 140.123 114.565 151.01 178.379" transform="translate(2.5 8)"/><path stroke="#000864" stroke-dasharray="1 4" stroke-width="3" d="M0,0 L196,0 L196,196 L0,196 L0,0 Z"/></g><polygon fill="#E96115" points="94.003 148.25 36.995 178.379 47.883 114.565 1.763 69.371 65.499 60.06 94.003 2 122.506 60.06 186.243 69.371 140.123 114.565 151.01 178.379" transform="translate(207 15)"/><path stroke="#E96115" d="M95,3.12977573 L123.322498,60.5174254 L186.65353,69.7199629 L140.826765,114.390019 L151.644997,177.465149 L95,147.685112 L38.3550034,177.465149 L49.1732351,114.390019 L3.34647023,69.7199629 L66.6775017,60.5174254 L95,3.12977573 Z" transform="translate(603 15)"/><path stroke="#E96115" d="M95,3.12977573 L123.322498,60.5174254 L186.65353,69.7199629 L140.826765,114.390019 L151.644997,177.465149 L95,147.685112 L38.3550034,177.465149 L49.1732351,114.390019 L3.34647023,69.7199629 L66.6775017,60.5174254 L95,3.12977573 Z" transform="translate(802 15)"/></g></svg>
\ No newline at end of file
diff --git a/understanding/22/img/focus-indicator-whole-star.png b/understanding/22/img/focus-indicator-whole-star.png
new file mode 100644
index 0000000000..dd15c3bbd2
Binary files /dev/null and b/understanding/22/img/focus-indicator-whole-star.png differ
diff --git a/understanding/22/img/focus-indicator-whole-star.svg b/understanding/22/img/focus-indicator-whole-star.svg
new file mode 100644
index 0000000000..b7cbfe4f92
--- /dev/null
+++ b/understanding/22/img/focus-indicator-whole-star.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1001" height="210" viewBox="0 0 1001 210"><g fill="none" fill-rule="evenodd" transform="translate(.5)"><path stroke="#000864" stroke-dasharray="7" stroke-width="4" d="M197.88806,3 L391.5,3 L391.5,191 L197.88806,191 L197.88806,3 Z"/><rect width="1000" height="210" fill="#FAFAFA"/><polygon fill="#E96115" points="94.003 148.25 36.995 178.379 47.883 114.565 1.763 69.371 65.499 60.06 94.003 2 122.506 60.06 186.243 69.371 140.123 114.565 151.01 178.379" transform="translate(10 15)"/><polygon fill="#632A03" points="94.5 148.25 37.191 178.379 48.136 114.565 1.772 69.371 65.845 60.06 94.5 2 123.155 60.06 187.228 69.371 140.864 114.565 151.809 178.379" transform="translate(405 15)"/><polygon fill="#E96115" points="94.003 148.25 36.995 178.379 47.883 114.565 1.763 69.371 65.499 60.06 94.003 2 122.506 60.06 186.243 69.371 140.123 114.565 151.01 178.379" transform="translate(207.5 15)"/><path stroke="#E96115" d="M95,3.12977573 L123.322498,60.5174254 L186.65353,69.7199629 L140.826765,114.390019 L151.644997,177.465149 L95,147.685112 L38.3550034,177.465149 L49.1732351,114.390019 L3.34647023,69.7199629 L66.6775017,60.5174254 L95,3.12977573 Z" transform="translate(603 15)"/><path stroke="#E96115" d="M95,3.12977573 L123.322498,60.5174254 L186.65353,69.7199629 L140.826765,114.390019 L151.644997,177.465149 L95,147.685112 L38.3550034,177.465149 L49.1732351,114.390019 L3.34647023,69.7199629 L66.6775017,60.5174254 L95,3.12977573 Z" transform="translate(802 15)"/></g></svg>
\ No newline at end of file
diff --git a/understanding/22/img/focus-indicators-passing.png b/understanding/22/img/focus-indicators-passing.png
new file mode 100644
index 0000000000..01fb3531c0
Binary files /dev/null and b/understanding/22/img/focus-indicators-passing.png differ
diff --git a/understanding/22/img/focus-inline-link-outline.png b/understanding/22/img/focus-inline-link-outline.png
new file mode 100644
index 0000000000..8012eed63f
Binary files /dev/null and b/understanding/22/img/focus-inline-link-outline.png differ
diff --git a/understanding/22/img/focus-inline-link.png b/understanding/22/img/focus-inline-link.png
index 67579bedf4..f58e7671a5 100644
Binary files a/understanding/22/img/focus-inline-link.png and b/understanding/22/img/focus-inline-link.png differ
diff --git a/understanding/22/img/pointer-target-example1.png b/understanding/22/img/pointer-target-example1.png
deleted file mode 100644
index 8b8fff1022..0000000000
Binary files a/understanding/22/img/pointer-target-example1.png and /dev/null differ
diff --git a/understanding/22/img/pointer-target-example2.png b/understanding/22/img/pointer-target-example2.png
deleted file mode 100644
index 4822923cae..0000000000
Binary files a/understanding/22/img/pointer-target-example2.png and /dev/null differ
diff --git a/understanding/22/img/pointer-target-example3.png b/understanding/22/img/pointer-target-example3.png
deleted file mode 100644
index d81f88136f..0000000000
Binary files a/understanding/22/img/pointer-target-example3.png and /dev/null differ
diff --git a/understanding/22/img/pointer-target-example4.png b/understanding/22/img/pointer-target-example4.png
deleted file mode 100644
index 0342f9c93a..0000000000
Binary files a/understanding/22/img/pointer-target-example4.png and /dev/null differ
diff --git a/understanding/22/img/pointer-target-example5.png b/understanding/22/img/pointer-target-example5.png
deleted file mode 100644
index be4456a8a3..0000000000
Binary files a/understanding/22/img/pointer-target-example5.png and /dev/null differ
diff --git a/understanding/22/img/target-dropdown.afdesign b/understanding/22/img/target-dropdown.afdesign
new file mode 100644
index 0000000000..1c8e08e9bc
Binary files /dev/null and b/understanding/22/img/target-dropdown.afdesign differ
diff --git a/understanding/22/img/target-dropdown.png b/understanding/22/img/target-dropdown.png
new file mode 100644
index 0000000000..cd1ec5a3a6
Binary files /dev/null and b/understanding/22/img/target-dropdown.png differ
diff --git a/understanding/22/img/target-dropdown.svg b/understanding/22/img/target-dropdown.svg
new file mode 100644
index 0000000000..69c14bcf1d
--- /dev/null
+++ b/understanding/22/img/target-dropdown.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 690 210" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" fill-rule="evenodd" clip-rule="evenodd" stroke-miterlimit="10"><rect width="690" height="210" fill="none"/><clipPath id="a"><rect width="690" height="210"/></clipPath><g clip-path="url(#a)"><rect x="-0" width="690" height="210" fill="#fff"/><rect x="99" y="46" width="76" height="25" fill="#e7e7e7"/><path d="M139.141,31.779l4.398,-0l-0,-4.32l2.601,-0c3.28,-0 5.599,-1.619 5.599,-5.079c-0,-2.041 -1.359,-4.879 -5.238,-4.879l-7.36,0l0,14.278Zm4.398,-10.62l1.961,-0c1.081,-0 2.081,0.08 2.081,1.381c0,1.441 -1.2,1.521 -2.341,1.521l-1.701,0l-0,-2.902Z" fill="#196721" fill-rule="nonzero"/><path d="M156.46,26.681l1.38,-4.4l0.04,0l1.28,4.4l-2.7,0Zm-6.019,5.098l4.42,-0l0.639,-2.04l4.54,-0l0.6,2.04l4.559,-0l-5.199,-14.278l-4.3,0l-5.259,14.278Z" fill="#196721" fill-rule="nonzero"/><path d="M165.281,26.981c0.04,4.558 4.658,5.138 6.279,5.138c3.181,-0 6.599,-1.199 6.599,-4.918c-0,-2.621 -1.999,-3.562 -4.018,-4.122c-2.021,-0.56 -4.062,-0.78 -4.142,-1.8c-0,-0.8 0.98,-0.96 1.581,-0.96c0.44,-0 0.941,0.1 1.301,0.36c0.36,0.24 0.6,0.6 0.52,1.14l4.158,-0c-0.12,-3.478 -2.859,-4.658 -5.959,-4.658c-2.94,0 -5.759,1.419 -5.759,4.718c0,2.881 2.579,3.501 4.838,4.141c2.462,0.7 3.082,0.901 3.082,1.641c0,1.06 -1.1,1.3 -1.821,1.3c-0.82,0 -1.781,-0.18 -2.101,-1.04c-0.1,-0.26 -0.16,-0.58 -0.16,-0.94l-4.398,-0Z" fill="#196721" fill-rule="nonzero"/><path d="M178.621,26.981c0.04,4.558 4.658,5.138 6.279,5.138c3.181,-0 6.599,-1.199 6.599,-4.918c-0,-2.621 -1.999,-3.562 -4.018,-4.122c-2.021,-0.56 -4.062,-0.78 -4.142,-1.8c-0,-0.8 0.98,-0.96 1.581,-0.96c0.44,-0 0.941,0.1 1.301,0.36c0.36,0.24 0.6,0.6 0.52,1.14l4.158,-0c-0.12,-3.478 -2.859,-4.658 -5.959,-4.658c-2.94,0 -5.759,1.419 -5.759,4.718c0,2.881 2.579,3.501 4.838,4.141c2.462,0.7 3.082,0.901 3.082,1.641c0,1.06 -1.1,1.3 -1.821,1.3c-0.82,0 -1.781,-0.18 -2.101,-1.04c-0.1,-0.26 -0.16,-0.58 -0.16,-0.94l-4.398,-0Z" fill="#196721" fill-rule="nonzero"/><path d="M93.5,118.5l-8,-0" fill="none" stroke="#000" stroke-width="1px"/><path d="M93.5,141.5l-8,-0" fill="none" stroke="#000" stroke-width="1px"/><path d="M89.5,118.5l0,23" fill="none" stroke="#000" stroke-width="1px" stroke-miterlimit="1"/><g transform="matrix(1,0,0,1,-99.4993,-79.4682)"><path d="M0.129,-0.458c-0.003,-0.085 0.039,-0.176 0.138,-0.176c0.075,-0 0.137,0.051 0.137,0.128c0,0.098 -0.061,0.142 -0.181,0.216c-0.1,0.062 -0.185,0.122 -0.199,0.29l0.463,-0l-0,-0.075l-0.364,0c0.017,-0.088 0.11,-0.133 0.199,-0.187c0.088,-0.055 0.172,-0.118 0.172,-0.243c-0,-0.132 -0.098,-0.204 -0.222,-0.204c-0.15,0 -0.235,0.107 -0.228,0.251l0.085,-0Z" fill="#196722" fill-rule="nonzero" transform="matrix(12,0,0,12,154.823,213.245)"/><path d="M0.419,-0.709l-0.068,0l-0.323,0.461l0,0.082l0.311,-0l0,0.166l0.08,-0l-0,-0.166l0.096,-0l-0,-0.075l-0.096,0l-0,-0.468Zm-0.318,0.468l0.236,-0.347l0.002,0l0,0.347l-0.238,0Z" fill="#196722" fill-rule="nonzero" transform="matrix(12,0,0,12,161.495,213.245)"/><path d="M0.467,-0.263c0,0.101 -0.039,0.2 -0.155,0.2c-0.117,0 -0.163,-0.094 -0.163,-0.196c-0,-0.097 0.044,-0.195 0.158,-0.195c0.11,-0 0.16,0.094 0.16,0.191Zm-0.4,0.461l0.085,-0l-0,-0.267l0.002,0c0.038,0.061 0.114,0.081 0.167,0.081c0.158,-0 0.236,-0.123 0.236,-0.269c-0,-0.146 -0.079,-0.272 -0.238,-0.272c-0.071,0 -0.137,0.025 -0.165,0.082l-0.002,-0l-0,-0.07l-0.085,0l0,0.715Z" fill="#196722" fill-rule="nonzero" transform="matrix(12,0,0,12,168.167,213.245)"/><path d="M0.009,-0l0.103,-0l0.144,-0.215l0.144,0.215l0.109,-0l-0.2,-0.28l0.178,-0.237l-0.102,0l-0.129,0.18l-0.124,-0.18l-0.109,0l0.18,0.245l-0.194,0.272Z" fill="#196722" fill-rule="nonzero" transform="matrix(12,0,0,12,175.283,213.245)"/><rect x="154.823" y="214.145" width="26.676" height="0.6" fill="#196722"/></g><path d="M51.499,62.371l1.423,-0l0,-4.905l5.642,-0l0,4.905l1.423,-0l0,-10.709l-1.423,0l0,4.605l-5.642,0l0,-4.605l-1.423,0l0,10.709Z" fill-rule="nonzero"/><path d="M61.699,58.501c0,2.266 1.303,4.05 3.764,4.05c2.461,-0 3.764,-1.784 3.764,-4.05c0,-2.28 -1.303,-4.064 -3.764,-4.064c-2.461,0 -3.764,1.784 -3.764,4.064Zm1.348,0c0,-1.89 1.081,-2.94 2.416,-2.94c1.336,-0 2.416,1.05 2.416,2.94c0,1.876 -1.08,2.926 -2.416,2.926c-1.335,0 -2.416,-1.05 -2.416,-2.926Z" fill-rule="nonzero"/><path d="M70.729,62.371l1.273,-0l0,-4.83c0,-0.585 0.555,-1.98 2.071,-1.98c1.141,-0 1.456,0.72 1.456,1.725l0,5.085l1.273,-0l0,-4.83c0,-1.2 0.796,-1.98 2.026,-1.98c1.246,-0 1.501,0.765 1.501,1.725l0,5.085l1.273,-0l0,-5.685c0,-1.605 -1.033,-2.249 -2.579,-2.249c-0.99,0 -1.906,0.495 -2.43,1.319c-0.315,-0.944 -1.184,-1.319 -2.129,-1.319c-1.066,0 -1.937,0.45 -2.507,1.319l-0.03,-0l0,-1.139l-1.198,0l0,7.754Z" fill-rule="nonzero"/><path d="M88.879,59.911c-0.225,1.006 -0.96,1.516 -2.011,1.516c-1.696,0 -2.461,-1.2 -2.416,-2.551l5.805,-0c0.075,-1.874 -0.764,-4.439 -3.509,-4.439c-2.116,0 -3.644,1.709 -3.644,4.034c0.075,2.371 1.243,4.08 3.719,4.08c1.741,-0 2.97,-0.929 3.314,-2.64l-1.258,0Zm-4.427,-2.159c0.09,-1.186 0.886,-2.191 2.221,-2.191c1.261,-0 2.176,0.975 2.236,2.191l-4.457,0Z" fill-rule="nonzero"/><path d="M106.63,62.371l1.47,-0l1.2,-3.225l4.529,-0l1.17,3.225l1.574,-0l-4.184,-10.709l-1.574,0l-4.185,10.709Zm4.934,-9.42l0.03,-0l1.785,4.996l-3.629,0l1.814,-4.996Z" fill-rule="nonzero"/><path d="M123.46,58.426c0,1.516 -0.585,3.001 -2.326,3.001c-1.755,0 -2.445,-1.41 -2.445,-2.941c-0,-1.455 0.66,-2.925 2.37,-2.925c1.651,-0 2.401,1.41 2.401,2.865Zm-6,3.945l1.273,-0l0,-1.034l0.03,0c0.571,0.914 1.711,1.214 2.506,1.214c2.371,-0 3.539,-1.844 3.539,-4.035c0,-2.19 -1.183,-4.079 -3.569,-4.079c-1.065,0 -2.055,0.375 -2.476,1.229l-0.03,-0l0,-4.004l-1.273,0l0,10.709Z" fill-rule="nonzero"/><path d="M125.89,58.501c0,2.266 1.304,4.05 3.764,4.05c2.461,-0 3.764,-1.784 3.764,-4.05c0,-2.28 -1.303,-4.064 -3.764,-4.064c-2.46,0 -3.764,1.784 -3.764,4.064Zm1.348,0c0,-1.89 1.081,-2.94 2.416,-2.94c1.336,-0 2.416,1.05 2.416,2.94c0,1.876 -1.08,2.926 -2.416,2.926c-1.335,0 -2.416,-1.05 -2.416,-2.926Z" fill-rule="nonzero"/><path d="M141.338,54.617l-1.273,0l0,4.38c0,1.395 -0.75,2.43 -2.296,2.43c-0.975,0 -1.576,-0.615 -1.576,-1.56l0,-5.25l-1.273,0l0,5.1c0,1.665 0.629,2.834 2.669,2.834c1.111,-0 1.981,-0.45 2.521,-1.409l0.03,0l0,1.229l1.198,-0l0,-7.754Z" fill-rule="nonzero"/><path d="M145.028,52.292l-1.273,0l0,2.325l-1.32,0l0,1.124l1.32,-0l0,4.936c0,1.424 0.525,1.694 1.843,1.694l0.975,-0l0,-1.124l-0.585,0c-0.795,0 -0.96,-0.105 -0.96,-0.69l0,-4.816l1.545,-0l0,-1.124l-1.545,0l0,-2.325Z" fill-rule="nonzero"/><path d="M158.573,54.617l-1.273,0l0,4.38c0,1.395 -0.75,2.43 -2.296,2.43c-0.975,0 -1.576,-0.615 -1.576,-1.56l0,-5.25l-1.273,0l0,5.1c0,1.665 0.629,2.834 2.669,2.834c1.111,-0 1.981,-0.45 2.521,-1.409l0.03,0l0,1.229l1.198,-0l0,-7.754Z" fill-rule="nonzero"/><path d="M160,59.927c0.075,1.92 1.544,2.624 3.284,2.624c1.576,-0 3.299,-0.599 3.299,-2.444c0,-1.501 -1.258,-1.921 -2.533,-2.206c-1.186,-0.285 -2.537,-0.435 -2.537,-1.35c0,-0.78 0.886,-0.99 1.651,-0.99c0.841,-0 1.711,0.315 1.801,1.305l1.273,-0c-0.104,-1.89 -1.468,-2.429 -3.179,-2.429c-1.35,0 -2.894,0.644 -2.894,2.204c0,1.485 1.274,1.905 2.534,2.191c1.276,0.285 2.536,0.45 2.536,1.44c0,0.975 -1.08,1.155 -1.876,1.155c-1.05,0 -2.041,-0.36 -2.086,-1.5l-1.273,-0Z" fill-rule="nonzero"/><path d="M175,46l0,25l-76,0l-0,-25l76,0Zm-1,1l-74,-0l-0,23l74,0l-0,-23Z" fill="#6f6f6f"/><path d="M107.305,80.816c0,2.911 1.724,5.61 5.129,5.61c3.406,-0 5.129,-2.699 5.129,-5.61c0,-2.91 -1.723,-5.609 -5.129,-5.609c-3.405,0 -5.129,2.699 -5.129,5.609Zm1.423,0c0,-2.16 1.096,-4.41 3.706,-4.41c2.611,-0 3.706,2.25 3.706,4.41c0,2.161 -1.095,4.411 -3.706,4.411c-2.61,0 -3.706,-2.25 -3.706,-4.411Z" fill-rule="nonzero"/><path d="M125.513,78.417l-1.273,0l0,4.38c0,1.395 -0.75,2.43 -2.296,2.43c-0.975,0 -1.576,-0.615 -1.576,-1.56l0,-5.25l-1.273,0l0,5.1c0,1.665 0.629,2.834 2.669,2.834c1.111,-0 1.981,-0.45 2.521,-1.409l0.03,0l0,1.229l1.198,-0l0,-7.754Z" fill-rule="nonzero"/><path d="M127.39,86.171l1.273,-0l0,-3.45c0,-1.965 0.75,-3.135 2.805,-3.135l0,-1.349c-1.38,-0.045 -2.235,0.57 -2.849,1.814l-0.03,-0l-0,-1.634l-1.199,0l0,7.754Z" fill-rule="nonzero"/><path d="M136.6,86.171l1.273,-0l0,-4.83c0,-0.585 0.556,-1.98 2.072,-1.98c1.14,-0 1.455,0.72 1.455,1.725l0,5.085l1.273,-0l0,-4.83c0,-1.2 0.796,-1.98 2.027,-1.98c1.245,-0 1.5,0.765 1.5,1.725l0,5.085l1.273,-0l0,-5.685c0,-1.605 -1.033,-2.249 -2.578,-2.249c-0.991,0 -1.906,0.495 -2.431,1.319c-0.315,-0.944 -1.184,-1.319 -2.129,-1.319c-1.066,0 -1.936,0.45 -2.506,1.319l-0.03,-0l-0,-1.139l-1.199,0l0,7.754Z" fill-rule="nonzero"/><path d="M149.47,86.171l1.273,-0l0,-7.754l-1.273,0l0,7.754Zm1.273,-10.709l-1.273,0l0,1.559l1.273,-0l0,-1.559Z" fill-rule="nonzero"/><path d="M152.23,83.727c0.075,1.92 1.544,2.624 3.284,2.624c1.576,-0 3.299,-0.599 3.299,-2.444c0,-1.501 -1.258,-1.921 -2.533,-2.206c-1.186,-0.285 -2.537,-0.435 -2.537,-1.35c0,-0.78 0.886,-0.99 1.651,-0.99c0.841,-0 1.711,0.315 1.801,1.305l1.273,-0c-0.104,-1.89 -1.468,-2.429 -3.179,-2.429c-1.35,0 -2.894,0.644 -2.894,2.204c0,1.485 1.274,1.905 2.534,2.191c1.276,0.285 2.536,0.45 2.536,1.44c0,0.975 -1.08,1.155 -1.876,1.155c-1.05,0 -2.041,-0.36 -2.086,-1.5l-1.273,-0Z" fill-rule="nonzero"/><path d="M159.73,83.727c0.075,1.92 1.544,2.624 3.284,2.624c1.576,-0 3.299,-0.599 3.299,-2.444c0,-1.501 -1.258,-1.921 -2.533,-2.206c-1.186,-0.285 -2.537,-0.435 -2.537,-1.35c0,-0.78 0.886,-0.99 1.651,-0.99c0.841,-0 1.711,0.315 1.801,1.305l1.273,-0c-0.104,-1.89 -1.468,-2.429 -3.179,-2.429c-1.35,0 -2.894,0.644 -2.894,2.204c0,1.485 1.274,1.905 2.534,2.191c1.276,0.285 2.536,0.45 2.536,1.44c0,0.975 -1.08,1.155 -1.876,1.155c-1.05,0 -2.041,-0.36 -2.086,-1.5l-1.273,-0Z" fill-rule="nonzero"/><path d="M167.8,86.171l1.273,-0l0,-7.754l-1.273,0l0,7.754Zm1.273,-10.709l-1.273,0l0,1.559l1.273,-0l0,-1.559Z" fill-rule="nonzero"/><path d="M170.635,82.301c0,2.266 1.304,4.05 3.764,4.05c2.461,-0 3.764,-1.784 3.764,-4.05c0,-2.28 -1.303,-4.064 -3.764,-4.064c-2.46,0 -3.764,1.784 -3.764,4.064Zm1.348,0c0,-1.89 1.081,-2.94 2.416,-2.94c1.336,-0 2.416,1.05 2.416,2.94c0,1.876 -1.08,2.926 -2.416,2.926c-1.335,0 -2.416,-1.05 -2.416,-2.926Z" fill-rule="nonzero"/><path d="M179.665,86.171l1.273,-0l0,-4.38c0,-1.395 0.751,-2.43 2.297,-2.43c0.975,-0 1.575,0.615 1.575,1.56l0,5.25l1.273,-0l0,-5.1c0,-1.665 -0.629,-2.834 -2.668,-2.834c-1.111,0 -1.981,0.45 -2.521,1.409l-0.03,-0l-0,-1.229l-1.199,0l0,7.754Z" fill-rule="nonzero"/><path d="M99,93.5l133,-0" fill="none" stroke="#6f6f6f" stroke-width="1px" stroke-miterlimit="1"/><path d="M110.335,110.171l1.423,-0l0,-9.51l3.57,-0l0,-1.199l-8.563,0l0,1.199l3.57,-0l0,9.51Z" fill-rule="nonzero"/><path d="M116.305,110.171l1.273,-0l0,-4.38c0,-1.395 0.751,-2.43 2.297,-2.43c0.975,-0 1.575,0.615 1.575,1.56l0,5.25l1.273,-0l0,-5.1c0,-1.665 -0.629,-2.834 -2.668,-2.834c-0.931,0 -2.026,0.39 -2.447,1.319l-0.03,-0l0,-4.094l-1.273,0l0,10.709Z" fill-rule="nonzero"/><path d="M130,107.711c-0.225,1.006 -0.96,1.516 -2.011,1.516c-1.695,0 -2.46,-1.2 -2.416,-2.551l5.805,-0c0.075,-1.874 -0.763,-4.439 -3.509,-4.439c-2.115,0 -3.644,1.709 -3.644,4.034c0.075,2.371 1.244,4.08 3.719,4.08c1.741,-0 2.97,-0.929 3.315,-2.64l-1.259,0Zm-4.427,-2.159c0.09,-1.186 0.886,-2.191 2.221,-2.191c1.261,-0 2.176,0.975 2.236,2.191l-4.457,0Z" fill-rule="nonzero"/><path d="M138.638,100.092l-1.273,0l0,2.325l-1.32,0l0,1.124l1.32,-0l0,4.936c0,1.424 0.525,1.694 1.843,1.694l0.975,-0l0,-1.124l-0.585,0c-0.795,0 -0.96,-0.105 -0.96,-0.69l0,-4.816l1.545,-0l0,-1.124l-1.545,0l0,-2.325Z" fill-rule="nonzero"/><path d="M146.95,107.711c-0.225,1.006 -0.96,1.516 -2.011,1.516c-1.695,0 -2.46,-1.2 -2.416,-2.551l5.805,-0c0.075,-1.874 -0.763,-4.439 -3.509,-4.439c-2.115,0 -3.644,1.709 -3.644,4.034c0.075,2.371 1.244,4.08 3.719,4.08c1.741,-0 2.97,-0.929 3.315,-2.64l-1.259,0Zm-4.427,-2.159c0.09,-1.186 0.886,-2.191 2.221,-2.191c1.261,-0 2.176,0.975 2.236,2.191l-4.457,0Z" fill-rule="nonzero"/><path d="M154.45,107.472c0,0.705 -0.69,1.755 -2.371,1.755c-0.78,0 -1.501,-0.3 -1.501,-1.14c0,-0.945 0.721,-1.245 1.561,-1.395c0.856,-0.15 1.816,-0.165 2.311,-0.526l0,1.306Zm2.068,1.68c-0.165,0.06 -0.285,0.075 -0.39,0.075c-0.405,0 -0.405,-0.27 -0.405,-0.87l0,-3.991c0,-1.814 -1.513,-2.129 -2.908,-2.129c-1.726,0 -3.21,0.674 -3.285,2.594l1.273,-0c0.06,-1.14 0.856,-1.47 1.936,-1.47c0.811,-0 1.726,0.18 1.726,1.29c0,0.96 -1.2,0.87 -2.611,1.14c-1.32,0.255 -2.624,0.63 -2.624,2.386c0,1.545 1.154,2.174 2.564,2.174c1.081,-0 2.026,-0.375 2.731,-1.199c0,0.839 0.42,1.199 1.079,1.199c0.404,-0 0.689,-0.075 0.914,-0.21l0,-0.989Z" fill-rule="nonzero"/><path d="M157.705,110.171l1.273,-0l0,-4.83c0,-0.585 0.556,-1.98 2.072,-1.98c1.14,-0 1.455,0.72 1.455,1.725l0,5.085l1.273,-0l0,-4.83c0,-1.2 0.796,-1.98 2.027,-1.98c1.245,-0 1.5,0.765 1.5,1.725l0,5.085l1.273,-0l0,-5.685c0,-1.605 -1.033,-2.249 -2.578,-2.249c-0.991,0 -1.906,0.495 -2.431,1.319c-0.315,-0.944 -1.184,-1.319 -2.129,-1.319c-1.066,0 -1.936,0.45 -2.506,1.319l-0.03,-0l-0,-1.139l-1.199,0l0,7.754Z" fill-rule="nonzero"/><path d="M99,117.5l133,-0" fill="none" stroke="#6f6f6f" stroke-width="1px" stroke-miterlimit="1"/><rect x="99" y="118" width="133" height="24" fill="#949494"/><path d="M99,141.5l133,0" fill="none" stroke="#6f6f6f" stroke-width="1px" stroke-miterlimit="1"/><path d="M107.905,134.171l1.423,-0l0,-4.38l3.272,-0c2.13,0.015 3.283,-1.184 3.283,-3.165c0,-1.98 -1.153,-3.164 -3.283,-3.164l-4.695,0l0,10.709Zm1.423,-9.51l2.791,-0c1.606,-0 2.341,0.69 2.341,1.965c0,1.276 -0.735,1.981 -2.341,1.966l-2.791,0l0,-3.931Z" fill-rule="nonzero"/><path d="M117.37,134.171l1.273,-0l0,-3.45c0,-1.965 0.75,-3.135 2.805,-3.135l0,-1.349c-1.38,-0.045 -2.235,0.57 -2.849,1.814l-0.03,-0l-0,-1.634l-1.199,0l0,7.754Z" fill-rule="nonzero"/><path d="M127.495,131.711c-0.225,1.006 -0.96,1.516 -2.011,1.516c-1.695,0 -2.46,-1.2 -2.416,-2.551l5.805,-0c0.075,-1.874 -0.763,-4.439 -3.509,-4.439c-2.115,0 -3.644,1.709 -3.644,4.034c0.075,2.371 1.244,4.08 3.719,4.08c1.741,-0 2.97,-0.929 3.315,-2.64l-1.259,0Zm-4.427,-2.159c0.09,-1.186 0.886,-2.191 2.221,-2.191c1.261,-0 2.176,0.975 2.236,2.191l-4.457,0Z" fill-rule="nonzero"/><path d="M129.7,131.727c0.075,1.92 1.544,2.624 3.284,2.624c1.576,-0 3.299,-0.599 3.299,-2.444c0,-1.501 -1.258,-1.921 -2.533,-2.206c-1.186,-0.285 -2.537,-0.435 -2.537,-1.35c0,-0.78 0.886,-0.99 1.651,-0.99c0.841,-0 1.711,0.315 1.801,1.305l1.273,-0c-0.104,-1.89 -1.468,-2.429 -3.179,-2.429c-1.35,0 -2.894,0.644 -2.894,2.204c0,1.485 1.274,1.905 2.534,2.191c1.276,0.285 2.536,0.45 2.536,1.44c0,0.975 -1.08,1.155 -1.876,1.155c-1.05,0 -2.041,-0.36 -2.086,-1.5l-1.273,-0Z" fill-rule="nonzero"/><path d="M137.2,131.727c0.075,1.92 1.544,2.624 3.284,2.624c1.576,-0 3.299,-0.599 3.299,-2.444c0,-1.501 -1.258,-1.921 -2.533,-2.206c-1.186,-0.285 -2.537,-0.435 -2.537,-1.35c0,-0.78 0.886,-0.99 1.651,-0.99c0.841,-0 1.711,0.315 1.801,1.305l1.273,-0c-0.104,-1.89 -1.468,-2.429 -3.179,-2.429c-1.35,0 -2.894,0.644 -2.894,2.204c0,1.485 1.274,1.905 2.534,2.191c1.276,0.285 2.536,0.45 2.536,1.44c0,0.975 -1.08,1.155 -1.876,1.155c-1.05,0 -2.041,-0.36 -2.086,-1.5l-1.273,-0Z" fill-rule="nonzero"/><path d="M149.32,134.171l1.273,-0l0,-3.45c0,-1.965 0.75,-3.135 2.805,-3.135l0,-1.349c-1.38,-0.045 -2.235,0.57 -2.849,1.814l-0.03,-0l-0,-1.634l-1.199,0l0,7.754Z" fill-rule="nonzero"/><path d="M159.445,131.711c-0.225,1.006 -0.96,1.516 -2.011,1.516c-1.695,0 -2.46,-1.2 -2.416,-2.551l5.805,-0c0.075,-1.874 -0.763,-4.439 -3.509,-4.439c-2.115,0 -3.644,1.709 -3.644,4.034c0.075,2.371 1.244,4.08 3.719,4.08c1.741,-0 2.97,-0.929 3.315,-2.64l-1.259,0Zm-4.427,-2.159c0.09,-1.186 0.886,-2.191 2.221,-2.191c1.261,-0 2.176,0.975 2.236,2.191l-4.457,0Z" fill-rule="nonzero"/><rect x="162.22" y="123.462" width="1.273" height="10.708" fill-rule="nonzero"/><path d="M170.83,131.711c-0.225,1.006 -0.96,1.516 -2.011,1.516c-1.695,0 -2.46,-1.2 -2.416,-2.551l5.805,-0c0.075,-1.874 -0.763,-4.439 -3.509,-4.439c-2.115,0 -3.644,1.709 -3.644,4.034c0.075,2.371 1.244,4.08 3.719,4.08c1.741,-0 2.97,-0.929 3.315,-2.64l-1.259,0Zm-4.427,-2.159c0.09,-1.186 0.886,-2.191 2.221,-2.191c1.261,-0 2.176,0.975 2.236,2.191l-4.457,0Z" fill-rule="nonzero"/><path d="M178.33,131.472c0,0.705 -0.69,1.755 -2.371,1.755c-0.78,0 -1.501,-0.3 -1.501,-1.14c0,-0.945 0.721,-1.245 1.561,-1.395c0.856,-0.15 1.816,-0.165 2.311,-0.526l0,1.306Zm2.068,1.68c-0.165,0.06 -0.285,0.075 -0.39,0.075c-0.405,0 -0.405,-0.27 -0.405,-0.87l0,-3.991c0,-1.814 -1.513,-2.129 -2.908,-2.129c-1.726,0 -3.21,0.674 -3.285,2.594l1.273,-0c0.06,-1.14 0.856,-1.47 1.936,-1.47c0.811,-0 1.726,0.18 1.726,1.29c0,0.96 -1.2,0.87 -2.611,1.14c-1.32,0.255 -2.624,0.63 -2.624,2.386c0,1.545 1.154,2.174 2.564,2.174c1.081,-0 2.026,-0.375 2.731,-1.199c0,0.839 0.42,1.199 1.079,1.199c0.404,-0 0.689,-0.075 0.914,-0.21l0,-0.989Z" fill-rule="nonzero"/><path d="M181.09,131.727c0.075,1.92 1.544,2.624 3.284,2.624c1.576,-0 3.299,-0.599 3.299,-2.444c0,-1.501 -1.258,-1.921 -2.533,-2.206c-1.186,-0.285 -2.537,-0.435 -2.537,-1.35c0,-0.78 0.886,-0.99 1.651,-0.99c0.841,-0 1.711,0.315 1.801,1.305l1.273,-0c-0.104,-1.89 -1.468,-2.429 -3.179,-2.429c-1.35,0 -2.894,0.644 -2.894,2.204c0,1.485 1.274,1.905 2.534,2.191c1.276,0.285 2.536,0.45 2.536,1.44c0,0.975 -1.08,1.155 -1.876,1.155c-1.05,0 -2.041,-0.36 -2.086,-1.5l-1.273,-0Z" fill-rule="nonzero"/><path d="M194.44,131.711c-0.225,1.006 -0.96,1.516 -2.011,1.516c-1.695,0 -2.46,-1.2 -2.416,-2.551l5.805,-0c0.075,-1.874 -0.763,-4.439 -3.509,-4.439c-2.115,0 -3.644,1.709 -3.644,4.034c0.075,2.371 1.244,4.08 3.719,4.08c1.741,-0 2.97,-0.929 3.315,-2.64l-1.259,0Zm-4.427,-2.159c0.09,-1.186 0.886,-2.191 2.221,-2.191c1.261,-0 2.176,0.975 2.236,2.191l-4.457,0Z" fill-rule="nonzero"/><path d="M196.645,131.727c0.075,1.92 1.544,2.624 3.284,2.624c1.576,-0 3.299,-0.599 3.299,-2.444c0,-1.501 -1.258,-1.921 -2.533,-2.206c-1.186,-0.285 -2.537,-0.435 -2.537,-1.35c0,-0.78 0.886,-0.99 1.651,-0.99c0.841,-0 1.711,0.315 1.801,1.305l1.273,-0c-0.104,-1.89 -1.468,-2.429 -3.179,-2.429c-1.35,0 -2.894,0.644 -2.894,2.204c0,1.485 1.274,1.905 2.534,2.191c1.276,0.285 2.536,0.45 2.536,1.44c0,0.975 -1.08,1.155 -1.876,1.155c-1.05,0 -2.041,-0.36 -2.086,-1.5l-1.273,-0Z" fill-rule="nonzero"/><path d="M113.348,147.462l-1.423,0l0,7.83c0,1.185 -0.405,1.935 -1.711,1.935c-1.395,0 -1.726,-0.885 -1.726,-2.13l0,-0.45l-1.423,0l0,0.66c0,2.01 1.124,3.119 3.119,3.119c2.4,-0 3.164,-1.469 3.164,-2.924l0,-8.04Z" fill-rule="nonzero"/><path d="M115.06,154.301c0,2.266 1.304,4.05 3.764,4.05c2.461,-0 3.764,-1.784 3.764,-4.05c0,-2.28 -1.303,-4.064 -3.764,-4.064c-2.46,0 -3.764,1.784 -3.764,4.064Zm1.348,0c0,-1.89 1.081,-2.94 2.416,-2.94c1.336,-0 2.416,1.05 2.416,2.94c0,1.876 -1.08,2.926 -2.416,2.926c-1.335,0 -2.416,-1.05 -2.416,-2.926Z" fill-rule="nonzero"/><path d="M130.135,154.226c0,1.516 -0.585,3.001 -2.326,3.001c-1.755,0 -2.445,-1.41 -2.445,-2.941c-0,-1.455 0.66,-2.925 2.37,-2.925c1.651,-0 2.401,1.41 2.401,2.865Zm-6,3.945l1.273,-0l0,-1.034l0.03,0c0.571,0.914 1.711,1.214 2.506,1.214c2.371,-0 3.539,-1.844 3.539,-4.035c0,-2.19 -1.183,-4.079 -3.569,-4.079c-1.065,0 -2.055,0.375 -2.476,1.229l-0.03,-0l0,-4.004l-1.273,0l0,10.709Z" fill-rule="nonzero"/><path d="M136.735,154.301c0,2.266 1.304,4.05 3.764,4.05c2.461,-0 3.764,-1.784 3.764,-4.05c0,-2.28 -1.303,-4.064 -3.764,-4.064c-2.46,0 -3.764,1.784 -3.764,4.064Zm1.348,0c0,-1.89 1.081,-2.94 2.416,-2.94c1.336,-0 2.416,1.05 2.416,2.94c0,1.876 -1.08,2.926 -2.416,2.926c-1.335,0 -2.416,-1.05 -2.416,-2.926Z" fill-rule="nonzero"/><path d="M151.81,154.226c0,1.516 -0.585,3.001 -2.326,3.001c-1.755,0 -2.445,-1.41 -2.445,-2.941c-0,-1.455 0.66,-2.925 2.37,-2.925c1.651,-0 2.401,1.41 2.401,2.865Zm-6,6.915l1.273,-0l0,-4.004l0.03,0c0.571,0.914 1.711,1.214 2.506,1.214c2.371,-0 3.539,-1.844 3.539,-4.035c0,-2.19 -1.183,-4.079 -3.569,-4.079c-1.065,0 -2.055,0.375 -2.476,1.229l-0.03,-0l0,-1.049l-1.273,0l0,10.724Z" fill-rule="nonzero"/><path d="M160.705,154.226c0,1.516 -0.585,3.001 -2.326,3.001c-1.755,0 -2.445,-1.41 -2.445,-2.941c-0,-1.455 0.66,-2.925 2.37,-2.925c1.651,-0 2.401,1.41 2.401,2.865Zm-6,6.915l1.273,-0l0,-4.004l0.03,0c0.571,0.914 1.711,1.214 2.506,1.214c2.371,-0 3.539,-1.844 3.539,-4.035c0,-2.19 -1.183,-4.079 -3.569,-4.079c-1.065,0 -2.055,0.375 -2.476,1.229l-0.03,-0l0,-1.049l-1.273,0l0,10.724Z" fill-rule="nonzero"/><path d="M163.135,154.301c0,2.266 1.304,4.05 3.764,4.05c2.461,-0 3.764,-1.784 3.764,-4.05c0,-2.28 -1.303,-4.064 -3.764,-4.064c-2.46,0 -3.764,1.784 -3.764,4.064Zm1.348,0c0,-1.89 1.081,-2.94 2.416,-2.94c1.336,-0 2.416,1.05 2.416,2.94c0,1.876 -1.08,2.926 -2.416,2.926c-1.335,0 -2.416,-1.05 -2.416,-2.926Z" fill-rule="nonzero"/><path d="M172.12,158.171l1.273,-0l0,-3.45c0,-1.965 0.75,-3.135 2.805,-3.135l0,-1.349c-1.38,-0.045 -2.235,0.57 -2.849,1.814l-0.03,-0l-0,-1.634l-1.199,0l0,7.754Z" fill-rule="nonzero"/><path d="M178.928,148.092l-1.273,0l0,2.325l-1.32,0l0,1.124l1.32,-0l0,4.936c0,1.424 0.525,1.694 1.843,1.694l0.975,-0l0,-1.124l-0.585,0c-0.795,0 -0.96,-0.105 -0.96,-0.69l0,-4.816l1.545,-0l0,-1.124l-1.545,0l0,-2.325Z" fill-rule="nonzero"/><path d="M188.303,150.417l-1.273,0l0,4.38c0,1.395 -0.75,2.43 -2.296,2.43c-0.975,0 -1.576,-0.615 -1.576,-1.56l0,-5.25l-1.273,0l0,5.1c0,1.665 0.629,2.834 2.669,2.834c1.111,-0 1.981,-0.45 2.521,-1.409l0.03,0l0,1.229l1.198,-0l0,-7.754Z" fill-rule="nonzero"/><path d="M190.225,158.171l1.273,-0l0,-4.38c0,-1.395 0.751,-2.43 2.297,-2.43c0.975,-0 1.575,0.615 1.575,1.56l0,5.25l1.273,-0l0,-5.1c0,-1.665 -0.629,-2.834 -2.668,-2.834c-1.111,0 -1.981,0.45 -2.521,1.409l-0.03,-0l-0,-1.229l-1.199,0l0,7.754Z" fill-rule="nonzero"/><path d="M198.64,158.171l1.273,-0l0,-7.754l-1.273,0l0,7.754Zm1.273,-10.709l-1.273,0l0,1.559l1.273,-0l0,-1.559Z" fill-rule="nonzero"/><path d="M203.663,148.092l-1.273,0l0,2.325l-1.32,0l0,1.124l1.32,-0l0,4.936c0,1.424 0.525,1.694 1.843,1.694l0.975,-0l0,-1.124l-0.585,0c-0.795,0 -0.96,-0.105 -0.96,-0.69l0,-4.816l1.545,-0l0,-1.124l-1.545,0l0,-2.325Z" fill-rule="nonzero"/><path d="M206.695,158.171l1.273,-0l0,-7.754l-1.273,0l0,7.754Zm1.273,-10.709l-1.273,0l0,1.559l1.273,-0l0,-1.559Z" fill-rule="nonzero"/><path d="M215.305,155.711c-0.225,1.006 -0.96,1.516 -2.011,1.516c-1.695,0 -2.46,-1.2 -2.416,-2.551l5.805,-0c0.075,-1.874 -0.763,-4.439 -3.509,-4.439c-2.115,0 -3.644,1.709 -3.644,4.034c0.075,2.371 1.244,4.08 3.719,4.08c1.741,-0 2.97,-0.929 3.315,-2.64l-1.259,0Zm-4.427,-2.159c0.09,-1.186 0.886,-2.191 2.221,-2.191c1.261,-0 2.176,0.975 2.236,2.191l-4.457,0Z" fill-rule="nonzero"/><path d="M217.51,155.727c0.075,1.92 1.544,2.624 3.284,2.624c1.576,-0 3.299,-0.599 3.299,-2.444c0,-1.501 -1.258,-1.921 -2.533,-2.206c-1.186,-0.285 -2.537,-0.435 -2.537,-1.35c0,-0.78 0.886,-0.99 1.651,-0.99c0.841,-0 1.711,0.315 1.801,1.305l1.273,-0c-0.104,-1.89 -1.468,-2.429 -3.179,-2.429c-1.35,0 -2.894,0.644 -2.894,2.204c0,1.485 1.274,1.905 2.534,2.191c1.276,0.285 2.536,0.45 2.536,1.44c0,0.975 -1.08,1.155 -1.876,1.155c-1.05,0 -2.041,-0.36 -2.086,-1.5l-1.273,-0Z" fill-rule="nonzero"/><path d="M99,165.5l133,-0" fill="none" stroke="#6f6f6f" stroke-width="1px" stroke-miterlimit="1"/><path d="M116.859,175.141c-0.33,-2.28 -2.174,-3.478 -4.41,-3.478c-3.3,-0 -5.069,2.533 -5.069,5.639c0,3.12 1.618,5.579 4.949,5.579c2.701,-0 4.365,-1.618 4.634,-4.289l-1.423,-0c-0.135,1.77 -1.215,3.091 -3.091,3.091c-2.565,-0 -3.646,-2.041 -3.646,-4.486c0,-2.236 1.081,-4.336 3.631,-4.336c1.486,-0 2.701,0.765 3.001,2.28l1.424,0Z" fill-rule="nonzero"/><path d="M118.105,178.757c0,2.265 1.304,4.049 3.764,4.049c2.461,-0 3.764,-1.784 3.764,-4.049c0,-2.281 -1.303,-4.064 -3.764,-4.064c-2.46,-0 -3.764,1.783 -3.764,4.064Zm1.348,-0c0,-1.891 1.081,-2.941 2.416,-2.941c1.336,-0 2.416,1.05 2.416,2.941c0,1.875 -1.08,2.926 -2.416,2.926c-1.335,-0 -2.416,-1.051 -2.416,-2.926Z" fill-rule="nonzero"/><path d="M127.135,182.626l1.273,-0l0,-4.38c0,-1.395 0.751,-2.43 2.297,-2.43c0.975,-0 1.575,0.615 1.575,1.56l0,5.25l1.273,-0l0,-5.1c0,-1.665 -0.629,-2.833 -2.668,-2.833c-1.111,-0 -1.981,0.449 -2.521,1.408l-0.03,-0l-0,-1.228l-1.199,-0l0,7.753Z" fill-rule="nonzero"/><path d="M137.243,172.548l-1.273,-0l0,2.325l-1.32,-0l0,1.123l1.32,-0l0,4.936c0,1.424 0.525,1.694 1.843,1.694l0.975,-0l0,-1.123l-0.585,-0c-0.795,-0 -0.96,-0.105 -0.96,-0.691l0,-4.816l1.545,-0l0,-1.123l-1.545,-0l0,-2.325Z" fill-rule="nonzero"/><path d="M145,179.927c0,0.705 -0.69,1.756 -2.371,1.756c-0.78,-0 -1.501,-0.3 -1.501,-1.141c0,-0.945 0.721,-1.245 1.561,-1.395c0.856,-0.15 1.816,-0.165 2.311,-0.525l0,1.305Zm2.068,1.681c-0.165,0.06 -0.285,0.075 -0.39,0.075c-0.405,-0 -0.405,-0.27 -0.405,-0.871l0,-3.991c0,-1.814 -1.513,-2.128 -2.908,-2.128c-1.726,-0 -3.21,0.673 -3.285,2.593l1.273,0c0.06,-1.14 0.856,-1.47 1.936,-1.47c0.811,-0 1.726,0.18 1.726,1.29c0,0.96 -1.2,0.87 -2.611,1.141c-1.32,0.255 -2.624,0.63 -2.624,2.385c0,1.545 1.154,2.174 2.564,2.174c1.081,-0 2.026,-0.375 2.731,-1.198c0,0.838 0.42,1.198 1.079,1.198c0.404,-0 0.689,-0.075 0.914,-0.21l0,-0.988Z" fill-rule="nonzero"/><path d="M154.838,177.361c-0.18,-1.845 -1.59,-2.668 -3.345,-2.668c-2.459,-0 -3.658,1.828 -3.658,4.154c0,2.31 1.259,3.959 3.628,3.959c1.95,-0 3.135,-1.123 3.42,-3.014l-1.305,-0c-0.165,1.17 -0.9,1.891 -2.13,1.891c-1.62,-0 -2.265,-1.411 -2.265,-2.836c0,-1.576 0.57,-3.031 2.415,-3.031c1.05,-0 1.725,0.57 1.92,1.545l1.32,0Z" fill-rule="nonzero"/><path d="M158.078,172.548l-1.273,-0l0,2.325l-1.32,-0l0,1.123l1.32,-0l0,4.936c0,1.424 0.525,1.694 1.843,1.694l0.975,-0l0,-1.123l-0.585,-0c-0.795,-0 -0.96,-0.105 -0.96,-0.691l0,-4.816l1.545,-0l0,-1.123l-1.545,-0l0,-2.325Z" fill-rule="nonzero"/><path d="M232,70l0,120l-133,-0l0,-120l133,-0Zm-1,1l-131,0c0,0 0,118 0,118l131,-0l0,-118Z" fill="#6f6f6f"/><path d="M182.118,57.016c-0,2.911 1.723,5.61 5.129,5.61c3.406,-0 5.129,-2.699 5.129,-5.61c-0,-2.91 -1.723,-5.609 -5.129,-5.609c-3.406,0 -5.129,2.699 -5.129,5.609Zm1.423,0c-0,-2.16 1.095,-4.41 3.706,-4.41c2.611,-0 3.706,2.25 3.706,4.41c-0,2.161 -1.095,4.411 -3.706,4.411c-2.611,0 -3.706,-2.25 -3.706,-4.411Z" fill-rule="nonzero"/><path d="M200.326,54.617l-1.273,0l-0,4.38c-0,1.395 -0.751,2.43 -2.296,2.43c-0.976,0 -1.576,-0.615 -1.576,-1.56l-0,-5.25l-1.273,0l-0,5.1c-0,1.665 0.629,2.834 2.669,2.834c1.11,-0 1.981,-0.45 2.521,-1.409l0.03,0l-0,1.229l1.198,-0l-0,-7.754Z" fill-rule="nonzero"/><path d="M202.203,62.371l1.273,-0l-0,-3.45c-0,-1.965 0.75,-3.135 2.805,-3.135l-0,-1.349c-1.38,-0.045 -2.235,0.57 -2.85,1.814l-0.03,-0l0,-1.634l-1.198,0l-0,7.754Z" fill-rule="nonzero"/><path d="M217.458,58.426c-0,1.516 -0.585,3.001 -2.326,3.001c-1.756,0 -2.446,-1.41 -2.446,-2.941c0,-1.455 0.66,-2.925 2.371,-2.925c1.651,-0 2.401,1.41 2.401,2.865Zm-6,6.915l1.273,-0l-0,-4.004l0.03,0c0.57,0.914 1.711,1.214 2.506,1.214c2.371,-0 3.539,-1.844 3.539,-4.035c-0,-2.19 -1.183,-4.079 -3.569,-4.079c-1.065,0 -2.056,0.375 -2.476,1.229l-0.03,-0l-0,-1.049l-1.273,0l-0,10.724Z" fill-rule="nonzero"/><path d="M219.888,58.501c-0,2.266 1.303,4.05 3.764,4.05c2.461,-0 3.764,-1.784 3.764,-4.05c-0,-2.28 -1.303,-4.064 -3.764,-4.064c-2.461,0 -3.764,1.784 -3.764,4.064Zm1.348,0c-0,-1.89 1.08,-2.94 2.416,-2.94c1.335,-0 2.416,1.05 2.416,2.94c-0,1.876 -1.081,2.926 -2.416,2.926c-1.336,0 -2.416,-1.05 -2.416,-2.926Z" fill-rule="nonzero"/><path d="M228.873,62.371l1.273,-0l-0,-3.45c-0,-1.965 0.75,-3.135 2.805,-3.135l-0,-1.349c-1.38,-0.045 -2.235,0.57 -2.85,1.814l-0.03,-0l0,-1.634l-1.198,0l-0,7.754Z" fill-rule="nonzero"/><path d="M235.681,52.292l-1.273,0l-0,2.325l-1.32,0l-0,1.124l1.32,-0l-0,4.936c-0,1.424 0.524,1.694 1.843,1.694l0.975,-0l-0,-1.124l-0.585,0c-0.795,0 -0.96,-0.105 -0.96,-0.69l-0,-4.816l1.545,-0l-0,-1.124l-1.545,0l-0,-2.325Z" fill-rule="nonzero"/><path d="M239.163,62.371l1.273,-0l-0,-6.63l1.5,-0l-0,-1.124l-1.5,0l-0,-1.081c-0,-0.675 0.36,-0.87 0.975,-0.87c0.225,-0 0.495,0.03 0.72,0.105l-0,-1.109c-0.24,-0.075 -0.585,-0.12 -0.825,-0.12c-1.394,0 -2.143,0.659 -2.143,1.919l-0,1.156l-1.305,0l-0,1.124l1.305,-0l-0,6.63Z" fill-rule="nonzero"/><path d="M242.658,58.501c-0,2.266 1.303,4.05 3.764,4.05c2.461,-0 3.764,-1.784 3.764,-4.05c-0,-2.28 -1.303,-4.064 -3.764,-4.064c-2.461,0 -3.764,1.784 -3.764,4.064Zm1.348,0c-0,-1.89 1.08,-2.94 2.416,-2.94c1.335,-0 2.416,1.05 2.416,2.94c-0,1.876 -1.081,2.926 -2.416,2.926c-1.336,0 -2.416,-1.05 -2.416,-2.926Z" fill-rule="nonzero"/><rect x="251.763" y="51.662" width="1.273" height="10.708" fill-rule="nonzero"/><path d="M255.093,62.371l1.273,-0l-0,-7.754l-1.273,0l-0,7.754Zm1.273,-10.709l-1.273,0l-0,1.559l1.273,-0l-0,-1.559Z" fill-rule="nonzero"/><path d="M257.928,58.501c-0,2.266 1.303,4.05 3.764,4.05c2.461,-0 3.764,-1.784 3.764,-4.05c-0,-2.28 -1.303,-4.064 -3.764,-4.064c-2.461,0 -3.764,1.784 -3.764,4.064Zm1.348,0c-0,-1.89 1.08,-2.94 2.416,-2.94c1.335,-0 2.416,1.05 2.416,2.94c-0,1.876 -1.081,2.926 -2.416,2.926c-1.336,0 -2.416,-1.05 -2.416,-2.926Z" fill-rule="nonzero"/><rect x="389" y="46" width="76" height="25" fill="#e7e7e7"/><path d="M429.141,31.779l4.398,-0l-0,-5.44l5.7,-0l-0,-3.398l-5.7,0l-0,-1.782l6.64,-0l-0,-3.658l-11.038,0l0,14.278Z" fill="#ac2020" fill-rule="nonzero"/><path d="M445.36,26.681l1.38,-4.4l0.04,0l1.28,4.4l-2.7,0Zm-6.019,5.098l4.42,-0l0.639,-2.04l4.54,-0l0.6,2.04l4.559,-0l-5.199,-14.278l-4.3,0l-5.259,14.278Z" fill="#ac2020" fill-rule="nonzero"/><rect x="455.081" y="17.501" width="4.397" height="14.278" fill="#ac2020" fill-rule="nonzero"/><path d="M461.741,31.779l10.718,-0l-0,-3.658l-6.32,0l-0,-10.62l-4.398,0l0,14.278Z" fill="#ac2020" fill-rule="nonzero"/><g transform="matrix(1,0,0,1,190.501,-95.4682)"><path d="M0.356,-0.709l-0.065,0c-0.019,0.107 -0.107,0.133 -0.204,0.133l0,0.068l0.184,-0l0,0.508l0.085,-0l-0,-0.709Z" fill="#ac2020" fill-rule="nonzero" transform="matrix(12,0,0,12,154.823,213.245)"/><path d="M0.13,-0.2c-0,-0.082 0.066,-0.136 0.15,-0.136c0.08,-0 0.146,0.058 0.146,0.135c0,0.079 -0.06,0.138 -0.145,0.138c-0.088,0 -0.151,-0.052 -0.151,-0.137Zm-0.065,-0.328c0,0.064 0.04,0.123 0.099,0.147c-0.079,0.028 -0.124,0.093 -0.124,0.177c0,0.145 0.105,0.216 0.241,0.216c0.131,-0 0.235,-0.079 0.235,-0.216c-0,-0.088 -0.041,-0.15 -0.126,-0.177c0.058,-0.026 0.098,-0.084 0.098,-0.147c-0,-0.09 -0.06,-0.181 -0.215,-0.181c-0.109,0 -0.208,0.064 -0.208,0.181Zm0.09,0.003c-0,-0.071 0.056,-0.109 0.124,-0.109c0.069,-0 0.119,0.038 0.119,0.109c0,0.072 -0.05,0.114 -0.117,0.114c-0.07,0 -0.126,-0.036 -0.126,-0.114Z" fill="#ac2020" fill-rule="nonzero" transform="matrix(12,0,0,12,161.495,213.245)"/><path d="M0.467,-0.263c0,0.101 -0.039,0.2 -0.155,0.2c-0.117,0 -0.163,-0.094 -0.163,-0.196c-0,-0.097 0.044,-0.195 0.158,-0.195c0.11,-0 0.16,0.094 0.16,0.191Zm-0.4,0.461l0.085,-0l-0,-0.267l0.002,0c0.038,0.061 0.114,0.081 0.167,0.081c0.158,-0 0.236,-0.123 0.236,-0.269c-0,-0.146 -0.079,-0.272 -0.238,-0.272c-0.071,0 -0.137,0.025 -0.165,0.082l-0.002,-0l-0,-0.07l-0.085,0l0,0.715Z" fill="#ac2020" fill-rule="nonzero" transform="matrix(12,0,0,12,168.167,213.245)"/><path d="M0.009,-0l0.103,-0l0.144,-0.215l0.144,0.215l0.109,-0l-0.2,-0.28l0.178,-0.237l-0.102,0l-0.129,0.18l-0.124,-0.18l-0.109,0l0.18,0.245l-0.194,0.272Z" fill="#ac2020" fill-rule="nonzero" transform="matrix(12,0,0,12,175.283,213.245)"/><rect x="154.823" y="214.145" width="26.676" height="0.6" fill="#ac2020"/></g><path d="M383.5,106.5l-8,-0" fill="none" stroke="#000" stroke-width="1px"/><path d="M383.5,123.5l-8,-0" fill="none" stroke="#000" stroke-width="1px"/><path d="M379.5,106.5l-0,17" fill="none" stroke="#000" stroke-width="1px" stroke-miterlimit="1"/><path d="M341.499,62.371l1.423,-0l0,-4.905l5.642,-0l0,4.905l1.423,-0l0,-10.709l-1.423,0l0,4.605l-5.642,0l0,-4.605l-1.423,0l0,10.709Z" fill-rule="nonzero"/><path d="M351.699,58.501c0,2.266 1.303,4.05 3.764,4.05c2.461,-0 3.764,-1.784 3.764,-4.05c0,-2.28 -1.303,-4.064 -3.764,-4.064c-2.461,0 -3.764,1.784 -3.764,4.064Zm1.348,0c0,-1.89 1.081,-2.94 2.416,-2.94c1.336,-0 2.416,1.05 2.416,2.94c0,1.876 -1.08,2.926 -2.416,2.926c-1.335,0 -2.416,-1.05 -2.416,-2.926Z" fill-rule="nonzero"/><path d="M360.729,62.371l1.273,-0l0,-4.83c0,-0.585 0.555,-1.98 2.071,-1.98c1.141,-0 1.456,0.72 1.456,1.725l0,5.085l1.273,-0l0,-4.83c0,-1.2 0.796,-1.98 2.026,-1.98c1.246,-0 1.501,0.765 1.501,1.725l0,5.085l1.273,-0l0,-5.685c0,-1.605 -1.033,-2.249 -2.579,-2.249c-0.99,0 -1.906,0.495 -2.43,1.319c-0.315,-0.944 -1.184,-1.319 -2.13,-1.319c-1.065,0 -1.936,0.45 -2.506,1.319l-0.03,-0l0,-1.139l-1.198,0l0,7.754Z" fill-rule="nonzero"/><path d="M378.879,59.911c-0.225,1.006 -0.96,1.516 -2.011,1.516c-1.696,0 -2.461,-1.2 -2.416,-2.551l5.805,-0c0.075,-1.874 -0.764,-4.439 -3.509,-4.439c-2.116,0 -3.644,1.709 -3.644,4.034c0.075,2.371 1.243,4.08 3.719,4.08c1.741,-0 2.97,-0.929 3.314,-2.64l-1.258,0Zm-4.427,-2.159c0.09,-1.186 0.886,-2.191 2.221,-2.191c1.261,-0 2.176,0.975 2.236,2.191l-4.457,0Z" fill-rule="nonzero"/><path d="M396.63,62.371l1.47,-0l1.2,-3.225l4.529,-0l1.17,3.225l1.574,-0l-4.184,-10.709l-1.574,0l-4.185,10.709Zm4.934,-9.42l0.03,-0l1.785,4.996l-3.629,0l1.814,-4.996Z" fill-rule="nonzero"/><path d="M413.46,58.426c0,1.516 -0.585,3.001 -2.326,3.001c-1.755,0 -2.445,-1.41 -2.445,-2.941c-0,-1.455 0.66,-2.925 2.37,-2.925c1.651,-0 2.401,1.41 2.401,2.865Zm-6,3.945l1.273,-0l0,-1.034l0.03,0c0.571,0.914 1.711,1.214 2.506,1.214c2.371,-0 3.539,-1.844 3.539,-4.035c0,-2.19 -1.183,-4.079 -3.569,-4.079c-1.065,0 -2.055,0.375 -2.476,1.229l-0.03,-0l0,-4.004l-1.273,0l0,10.709Z" fill-rule="nonzero"/><path d="M415.89,58.501c0,2.266 1.303,4.05 3.764,4.05c2.461,-0 3.764,-1.784 3.764,-4.05c0,-2.28 -1.303,-4.064 -3.764,-4.064c-2.461,0 -3.764,1.784 -3.764,4.064Zm1.348,0c0,-1.89 1.081,-2.94 2.416,-2.94c1.336,-0 2.416,1.05 2.416,2.94c0,1.876 -1.08,2.926 -2.416,2.926c-1.335,0 -2.416,-1.05 -2.416,-2.926Z" fill-rule="nonzero"/><path d="M431.338,54.617l-1.273,0l0,4.38c0,1.395 -0.75,2.43 -2.296,2.43c-0.975,0 -1.576,-0.615 -1.576,-1.56l0,-5.25l-1.273,0l0,5.1c0,1.665 0.629,2.834 2.669,2.834c1.111,-0 1.981,-0.45 2.521,-1.409l0.03,0l0,1.229l1.198,-0l0,-7.754Z" fill-rule="nonzero"/><path d="M435.028,52.292l-1.273,0l0,2.325l-1.32,0l0,1.124l1.32,-0l0,4.936c0,1.424 0.525,1.694 1.843,1.694l0.975,-0l0,-1.124l-0.585,0c-0.795,0 -0.96,-0.105 -0.96,-0.69l0,-4.816l1.545,-0l0,-1.124l-1.545,0l0,-2.325Z" fill-rule="nonzero"/><path d="M448.573,54.617l-1.273,0l0,4.38c0,1.395 -0.75,2.43 -2.296,2.43c-0.975,0 -1.576,-0.615 -1.576,-1.56l0,-5.25l-1.273,0l0,5.1c0,1.665 0.629,2.834 2.669,2.834c1.111,-0 1.981,-0.45 2.521,-1.409l0.03,0l0,1.229l1.198,-0l0,-7.754Z" fill-rule="nonzero"/><path d="M450,59.927c0.075,1.92 1.544,2.624 3.284,2.624c1.576,-0 3.299,-0.599 3.299,-2.444c0,-1.501 -1.258,-1.921 -2.533,-2.206c-1.186,-0.285 -2.537,-0.435 -2.537,-1.35c0,-0.78 0.886,-0.99 1.651,-0.99c0.841,-0 1.711,0.315 1.801,1.305l1.273,-0c-0.104,-1.89 -1.468,-2.429 -3.179,-2.429c-1.35,0 -2.894,0.644 -2.894,2.204c0,1.485 1.274,1.905 2.534,2.191c1.276,0.285 2.536,0.45 2.536,1.44c0,0.975 -1.08,1.155 -1.876,1.155c-1.05,0 -2.041,-0.36 -2.086,-1.5l-1.273,-0Z" fill-rule="nonzero"/><path d="M397.305,78.816c0,2.911 1.724,5.61 5.129,5.61c3.406,-0 5.129,-2.699 5.129,-5.61c0,-2.91 -1.723,-5.609 -5.129,-5.609c-3.405,0 -5.129,2.699 -5.129,5.609Zm1.423,0c0,-2.16 1.096,-4.41 3.706,-4.41c2.611,-0 3.706,2.25 3.706,4.41c0,2.161 -1.095,4.411 -3.706,4.411c-2.61,0 -3.706,-2.25 -3.706,-4.411Z" fill-rule="nonzero"/><path d="M415.513,76.417l-1.273,0l0,4.38c0,1.395 -0.75,2.43 -2.296,2.43c-0.975,0 -1.576,-0.615 -1.576,-1.56l0,-5.25l-1.273,0l0,5.1c0,1.665 0.629,2.834 2.669,2.834c1.111,-0 1.981,-0.45 2.521,-1.409l0.03,0l0,1.229l1.198,-0l0,-7.754Z" fill-rule="nonzero"/><path d="M417.39,84.171l1.273,-0l0,-3.45c0,-1.965 0.75,-3.135 2.805,-3.135l0,-1.349c-1.38,-0.045 -2.235,0.57 -2.849,1.814l-0.03,-0l-0,-1.634l-1.199,0l0,7.754Z" fill-rule="nonzero"/><path d="M426.6,84.171l1.273,-0l0,-4.83c0,-0.585 0.556,-1.98 2.072,-1.98c1.14,-0 1.455,0.72 1.455,1.725l0,5.085l1.273,-0l0,-4.83c0,-1.2 0.796,-1.98 2.027,-1.98c1.245,-0 1.5,0.765 1.5,1.725l0,5.085l1.273,-0l0,-5.685c0,-1.605 -1.033,-2.249 -2.578,-2.249c-0.991,0 -1.906,0.495 -2.431,1.319c-0.315,-0.944 -1.184,-1.319 -2.129,-1.319c-1.066,0 -1.936,0.45 -2.506,1.319l-0.03,-0l-0,-1.139l-1.199,0l0,7.754Z" fill-rule="nonzero"/><path d="M439.47,84.171l1.273,-0l0,-7.754l-1.273,0l0,7.754Zm1.273,-10.709l-1.273,0l0,1.559l1.273,-0l0,-1.559Z" fill-rule="nonzero"/><path d="M442.23,81.727c0.075,1.92 1.544,2.624 3.284,2.624c1.576,-0 3.299,-0.599 3.299,-2.444c0,-1.501 -1.258,-1.921 -2.533,-2.206c-1.186,-0.285 -2.537,-0.435 -2.537,-1.35c0,-0.78 0.886,-0.99 1.651,-0.99c0.841,-0 1.711,0.315 1.801,1.305l1.273,-0c-0.104,-1.89 -1.468,-2.429 -3.179,-2.429c-1.35,0 -2.894,0.644 -2.894,2.204c0,1.485 1.274,1.905 2.534,2.191c1.276,0.285 2.536,0.45 2.536,1.44c0,0.975 -1.08,1.155 -1.876,1.155c-1.05,0 -2.041,-0.36 -2.086,-1.5l-1.273,-0Z" fill-rule="nonzero"/><path d="M449.73,81.727c0.075,1.92 1.544,2.624 3.284,2.624c1.576,-0 3.299,-0.599 3.299,-2.444c0,-1.501 -1.258,-1.921 -2.533,-2.206c-1.186,-0.285 -2.537,-0.435 -2.537,-1.35c0,-0.78 0.886,-0.99 1.651,-0.99c0.841,-0 1.711,0.315 1.801,1.305l1.273,-0c-0.104,-1.89 -1.468,-2.429 -3.179,-2.429c-1.35,0 -2.894,0.644 -2.894,2.204c0,1.485 1.274,1.905 2.534,2.191c1.276,0.285 2.536,0.45 2.536,1.44c0,0.975 -1.08,1.155 -1.876,1.155c-1.05,0 -2.041,-0.36 -2.086,-1.5l-1.273,-0Z" fill-rule="nonzero"/><path d="M457.8,84.171l1.273,-0l0,-7.754l-1.273,0l0,7.754Zm1.273,-10.709l-1.273,0l0,1.559l1.273,-0l0,-1.559Z" fill-rule="nonzero"/><path d="M460.635,80.301c0,2.266 1.303,4.05 3.764,4.05c2.461,-0 3.764,-1.784 3.764,-4.05c0,-2.28 -1.303,-4.064 -3.764,-4.064c-2.461,0 -3.764,1.784 -3.764,4.064Zm1.348,0c0,-1.89 1.081,-2.94 2.416,-2.94c1.336,-0 2.416,1.05 2.416,2.94c0,1.876 -1.08,2.926 -2.416,2.926c-1.335,0 -2.416,-1.05 -2.416,-2.926Z" fill-rule="nonzero"/><path d="M469.665,84.171l1.273,-0l0,-4.38c0,-1.395 0.751,-2.43 2.297,-2.43c0.975,-0 1.575,0.615 1.575,1.56l0,5.25l1.273,-0l0,-5.1c0,-1.665 -0.629,-2.834 -2.668,-2.834c-1.111,0 -1.981,0.45 -2.521,1.409l-0.03,-0l-0,-1.229l-1.199,0l0,7.754Z" fill-rule="nonzero"/><path d="M389,87.5l133,-0" fill="none" stroke="#6f6f6f" stroke-width="1px" stroke-miterlimit="1"/><path d="M465,46l-0,25l-76,-0l-0,-25l76,-0Zm-1,1l-74,-0l-0,23l74,0l-0,-23Z" fill="#6f6f6f"/><path d="M400.335,102.171l1.423,-0l0,-9.51l3.57,-0l0,-1.199l-8.563,0l0,1.199l3.57,-0l0,9.51Z" fill-rule="nonzero"/><path d="M406.305,102.171l1.273,-0l0,-4.38c0,-1.395 0.751,-2.43 2.297,-2.43c0.975,-0 1.575,0.615 1.575,1.56l0,5.25l1.273,-0l0,-5.1c0,-1.665 -0.629,-2.834 -2.668,-2.834c-0.931,0 -2.026,0.39 -2.447,1.319l-0.03,-0l0,-4.094l-1.273,0l0,10.709Z" fill-rule="nonzero"/><path d="M420,99.711c-0.225,1.006 -0.96,1.516 -2.011,1.516c-1.695,0 -2.461,-1.2 -2.416,-2.551l5.805,-0c0.075,-1.874 -0.764,-4.439 -3.509,-4.439c-2.115,0 -3.644,1.709 -3.644,4.034c0.075,2.371 1.244,4.08 3.719,4.08c1.741,-0 2.97,-0.929 3.315,-2.64l-1.259,0Zm-4.427,-2.159c0.09,-1.186 0.886,-2.191 2.221,-2.191c1.261,-0 2.176,0.975 2.236,2.191l-4.457,0Z" fill-rule="nonzero"/><path d="M428.638,92.092l-1.273,0l0,2.325l-1.32,0l0,1.124l1.32,-0l0,4.936c0,1.424 0.525,1.694 1.843,1.694l0.975,-0l0,-1.124l-0.585,0c-0.795,0 -0.96,-0.105 -0.96,-0.69l0,-4.816l1.545,-0l0,-1.124l-1.545,0l0,-2.325Z" fill-rule="nonzero"/><path d="M436.95,99.711c-0.225,1.006 -0.96,1.516 -2.011,1.516c-1.695,0 -2.461,-1.2 -2.416,-2.551l5.805,-0c0.075,-1.874 -0.764,-4.439 -3.509,-4.439c-2.115,0 -3.644,1.709 -3.644,4.034c0.075,2.371 1.244,4.08 3.719,4.08c1.741,-0 2.97,-0.929 3.315,-2.64l-1.259,0Zm-4.427,-2.159c0.09,-1.186 0.886,-2.191 2.221,-2.191c1.261,-0 2.176,0.975 2.236,2.191l-4.457,0Z" fill-rule="nonzero"/><path d="M444.45,99.472c0,0.705 -0.69,1.755 -2.371,1.755c-0.78,0 -1.501,-0.3 -1.501,-1.14c0,-0.945 0.721,-1.245 1.561,-1.395c0.856,-0.15 1.816,-0.165 2.311,-0.526l0,1.306Zm2.068,1.68c-0.165,0.06 -0.285,0.075 -0.39,0.075c-0.405,0 -0.405,-0.27 -0.405,-0.87l0,-3.991c0,-1.814 -1.513,-2.129 -2.908,-2.129c-1.726,0 -3.21,0.674 -3.285,2.594l1.273,-0c0.06,-1.14 0.856,-1.47 1.936,-1.47c0.811,-0 1.726,0.18 1.726,1.29c0,0.96 -1.2,0.87 -2.611,1.14c-1.321,0.255 -2.624,0.63 -2.624,2.386c0,1.545 1.154,2.174 2.564,2.174c1.081,-0 2.026,-0.375 2.731,-1.199c0,0.839 0.42,1.199 1.079,1.199c0.404,-0 0.689,-0.075 0.914,-0.21l0,-0.989Z" fill-rule="nonzero"/><path d="M447.705,102.171l1.273,-0l0,-4.83c0,-0.585 0.556,-1.98 2.072,-1.98c1.14,-0 1.455,0.72 1.455,1.725l0,5.085l1.273,-0l0,-4.83c0,-1.2 0.796,-1.98 2.027,-1.98c1.245,-0 1.5,0.765 1.5,1.725l0,5.085l1.273,-0l0,-5.685c0,-1.605 -1.033,-2.249 -2.578,-2.249c-0.991,0 -1.906,0.495 -2.431,1.319c-0.315,-0.944 -1.184,-1.319 -2.129,-1.319c-1.066,0 -1.936,0.45 -2.506,1.319l-0.03,-0l-0,-1.139l-1.199,0l0,7.754Z" fill-rule="nonzero"/><path d="M389,105.5l133,-0" fill="none" stroke="#6f6f6f" stroke-width="1px" stroke-miterlimit="1"/><rect x="389" y="106" width="133" height="18" fill="#949494"/><path d="M397.905,120.171l1.423,-0l0,-4.38l3.272,-0c2.13,0.015 3.283,-1.184 3.283,-3.165c0,-1.98 -1.153,-3.164 -3.283,-3.164l-4.695,0l0,10.709Zm1.423,-9.51l2.791,-0c1.606,-0 2.341,0.69 2.341,1.965c0,1.276 -0.735,1.981 -2.341,1.966l-2.791,0l0,-3.931Z" fill-rule="nonzero"/><path d="M407.37,120.171l1.273,-0l0,-3.45c0,-1.965 0.75,-3.135 2.805,-3.135l0,-1.349c-1.38,-0.045 -2.235,0.57 -2.849,1.814l-0.03,-0l-0,-1.634l-1.199,0l0,7.754Z" fill-rule="nonzero"/><path d="M417.495,117.711c-0.225,1.006 -0.96,1.516 -2.011,1.516c-1.695,0 -2.461,-1.2 -2.416,-2.551l5.805,-0c0.075,-1.874 -0.764,-4.439 -3.509,-4.439c-2.115,0 -3.644,1.709 -3.644,4.034c0.075,2.371 1.244,4.08 3.719,4.08c1.741,-0 2.97,-0.929 3.315,-2.64l-1.259,0Zm-4.427,-2.159c0.09,-1.186 0.886,-2.191 2.221,-2.191c1.261,-0 2.176,0.975 2.236,2.191l-4.457,0Z" fill-rule="nonzero"/><path d="M419.7,117.727c0.075,1.92 1.544,2.624 3.284,2.624c1.576,-0 3.299,-0.599 3.299,-2.444c0,-1.501 -1.258,-1.921 -2.533,-2.206c-1.186,-0.285 -2.537,-0.435 -2.537,-1.35c0,-0.78 0.886,-0.99 1.651,-0.99c0.841,-0 1.711,0.315 1.801,1.305l1.273,-0c-0.104,-1.89 -1.468,-2.429 -3.179,-2.429c-1.35,0 -2.894,0.644 -2.894,2.204c0,1.485 1.274,1.905 2.534,2.191c1.276,0.285 2.536,0.45 2.536,1.44c0,0.975 -1.08,1.155 -1.876,1.155c-1.05,0 -2.041,-0.36 -2.086,-1.5l-1.273,-0Z" fill-rule="nonzero"/><path d="M427.2,117.727c0.075,1.92 1.544,2.624 3.284,2.624c1.576,-0 3.299,-0.599 3.299,-2.444c0,-1.501 -1.258,-1.921 -2.533,-2.206c-1.186,-0.285 -2.537,-0.435 -2.537,-1.35c0,-0.78 0.886,-0.99 1.651,-0.99c0.841,-0 1.711,0.315 1.801,1.305l1.273,-0c-0.104,-1.89 -1.468,-2.429 -3.179,-2.429c-1.35,0 -2.894,0.644 -2.894,2.204c0,1.485 1.274,1.905 2.534,2.191c1.276,0.285 2.536,0.45 2.536,1.44c0,0.975 -1.08,1.155 -1.876,1.155c-1.05,0 -2.041,-0.36 -2.086,-1.5l-1.273,-0Z" fill-rule="nonzero"/><path d="M439.32,120.171l1.273,-0l0,-3.45c0,-1.965 0.75,-3.135 2.805,-3.135l0,-1.349c-1.38,-0.045 -2.235,0.57 -2.849,1.814l-0.03,-0l-0,-1.634l-1.199,0l0,7.754Z" fill-rule="nonzero"/><path d="M449.445,117.711c-0.225,1.006 -0.96,1.516 -2.011,1.516c-1.695,0 -2.461,-1.2 -2.416,-2.551l5.805,-0c0.075,-1.874 -0.764,-4.439 -3.509,-4.439c-2.115,0 -3.644,1.709 -3.644,4.034c0.075,2.371 1.244,4.08 3.719,4.08c1.741,-0 2.97,-0.929 3.315,-2.64l-1.259,0Zm-4.427,-2.159c0.09,-1.186 0.886,-2.191 2.221,-2.191c1.261,-0 2.176,0.975 2.236,2.191l-4.457,0Z" fill-rule="nonzero"/><rect x="452.22" y="109.462" width="1.273" height="10.708" fill-rule="nonzero"/><path d="M460.83,117.711c-0.225,1.006 -0.96,1.516 -2.011,1.516c-1.695,0 -2.461,-1.2 -2.416,-2.551l5.805,-0c0.075,-1.874 -0.764,-4.439 -3.509,-4.439c-2.115,0 -3.644,1.709 -3.644,4.034c0.075,2.371 1.244,4.08 3.719,4.08c1.741,-0 2.97,-0.929 3.315,-2.64l-1.259,0Zm-4.427,-2.159c0.09,-1.186 0.886,-2.191 2.221,-2.191c1.261,-0 2.176,0.975 2.236,2.191l-4.457,0Z" fill-rule="nonzero"/><path d="M468.33,117.472c0,0.705 -0.69,1.755 -2.371,1.755c-0.78,0 -1.501,-0.3 -1.501,-1.14c0,-0.945 0.721,-1.245 1.561,-1.395c0.856,-0.15 1.816,-0.165 2.311,-0.526l0,1.306Zm2.068,1.68c-0.165,0.06 -0.285,0.075 -0.39,0.075c-0.405,0 -0.405,-0.27 -0.405,-0.87l0,-3.991c0,-1.814 -1.513,-2.129 -2.908,-2.129c-1.726,0 -3.21,0.674 -3.285,2.594l1.273,-0c0.06,-1.14 0.856,-1.47 1.936,-1.47c0.811,-0 1.726,0.18 1.726,1.29c0,0.96 -1.2,0.87 -2.611,1.14c-1.321,0.255 -2.624,0.63 -2.624,2.386c0,1.545 1.154,2.174 2.564,2.174c1.081,-0 2.026,-0.375 2.731,-1.199c0,0.839 0.42,1.199 1.079,1.199c0.404,-0 0.689,-0.075 0.914,-0.21l0,-0.989Z" fill-rule="nonzero"/><path d="M471.09,117.727c0.075,1.92 1.544,2.624 3.284,2.624c1.576,-0 3.299,-0.599 3.299,-2.444c0,-1.501 -1.258,-1.921 -2.533,-2.206c-1.186,-0.285 -2.537,-0.435 -2.537,-1.35c0,-0.78 0.886,-0.99 1.651,-0.99c0.841,-0 1.711,0.315 1.801,1.305l1.273,-0c-0.104,-1.89 -1.468,-2.429 -3.179,-2.429c-1.35,0 -2.894,0.644 -2.894,2.204c0,1.485 1.274,1.905 2.534,2.191c1.276,0.285 2.536,0.45 2.536,1.44c0,0.975 -1.08,1.155 -1.876,1.155c-1.05,0 -2.041,-0.36 -2.086,-1.5l-1.273,-0Z" fill-rule="nonzero"/><path d="M484.44,117.711c-0.225,1.006 -0.96,1.516 -2.011,1.516c-1.695,0 -2.461,-1.2 -2.416,-2.551l5.805,-0c0.075,-1.874 -0.764,-4.439 -3.509,-4.439c-2.115,0 -3.644,1.709 -3.644,4.034c0.075,2.371 1.244,4.08 3.719,4.08c1.741,-0 2.97,-0.929 3.315,-2.64l-1.259,0Zm-4.427,-2.159c0.09,-1.186 0.886,-2.191 2.221,-2.191c1.261,-0 2.176,0.975 2.236,2.191l-4.457,0Z" fill-rule="nonzero"/><path d="M486.645,117.727c0.075,1.92 1.544,2.624 3.284,2.624c1.576,-0 3.299,-0.599 3.299,-2.444c0,-1.501 -1.258,-1.921 -2.533,-2.206c-1.186,-0.285 -2.537,-0.435 -2.537,-1.35c0,-0.78 0.886,-0.99 1.651,-0.99c0.841,-0 1.711,0.315 1.801,1.305l1.273,-0c-0.104,-1.89 -1.468,-2.429 -3.179,-2.429c-1.35,0 -2.894,0.644 -2.894,2.204c0,1.485 1.274,1.905 2.534,2.191c1.276,0.285 2.536,0.45 2.536,1.44c0,0.975 -1.08,1.155 -1.876,1.155c-1.05,0 -2.041,-0.36 -2.086,-1.5l-1.273,-0Z" fill-rule="nonzero"/><path d="M389,123.5l133,-0" fill="none" stroke="#6f6f6f" stroke-width="1px" stroke-miterlimit="1"/><path d="M403.348,126.462l-1.423,0l0,7.83c0,1.185 -0.405,1.935 -1.711,1.935c-1.395,0 -1.726,-0.885 -1.726,-2.13l0,-0.45l-1.423,0l0,0.66c0,2.01 1.124,3.119 3.119,3.119c2.4,-0 3.164,-1.469 3.164,-2.924l0,-8.04Z" fill-rule="nonzero"/><path d="M405.06,133.301c0,2.266 1.303,4.05 3.764,4.05c2.461,-0 3.764,-1.784 3.764,-4.05c0,-2.28 -1.303,-4.064 -3.764,-4.064c-2.461,0 -3.764,1.784 -3.764,4.064Zm1.348,0c0,-1.89 1.081,-2.94 2.416,-2.94c1.336,-0 2.416,1.05 2.416,2.94c0,1.876 -1.08,2.926 -2.416,2.926c-1.335,0 -2.416,-1.05 -2.416,-2.926Z" fill-rule="nonzero"/><path d="M420.135,133.226c0,1.516 -0.585,3.001 -2.326,3.001c-1.755,0 -2.445,-1.41 -2.445,-2.941c-0,-1.455 0.66,-2.925 2.37,-2.925c1.651,-0 2.401,1.41 2.401,2.865Zm-6,3.945l1.273,-0l0,-1.034l0.03,0c0.571,0.914 1.711,1.214 2.506,1.214c2.371,-0 3.539,-1.844 3.539,-4.035c0,-2.19 -1.183,-4.079 -3.569,-4.079c-1.065,0 -2.055,0.375 -2.476,1.229l-0.03,-0l0,-4.004l-1.273,0l0,10.709Z" fill-rule="nonzero"/><path d="M426.735,133.301c0,2.266 1.303,4.05 3.764,4.05c2.461,-0 3.764,-1.784 3.764,-4.05c0,-2.28 -1.303,-4.064 -3.764,-4.064c-2.461,0 -3.764,1.784 -3.764,4.064Zm1.348,0c0,-1.89 1.081,-2.94 2.416,-2.94c1.336,-0 2.416,1.05 2.416,2.94c0,1.876 -1.08,2.926 -2.416,2.926c-1.335,0 -2.416,-1.05 -2.416,-2.926Z" fill-rule="nonzero"/><path d="M441.81,133.226c0,1.516 -0.585,3.001 -2.326,3.001c-1.755,0 -2.445,-1.41 -2.445,-2.941c-0,-1.455 0.66,-2.925 2.37,-2.925c1.651,-0 2.401,1.41 2.401,2.865Zm-6,6.915l1.273,-0l0,-4.004l0.03,0c0.571,0.914 1.711,1.214 2.506,1.214c2.371,-0 3.539,-1.844 3.539,-4.035c0,-2.19 -1.183,-4.079 -3.569,-4.079c-1.065,0 -2.055,0.375 -2.476,1.229l-0.03,-0l0,-1.049l-1.273,0l0,10.724Z" fill-rule="nonzero"/><path d="M450.705,133.226c0,1.516 -0.585,3.001 -2.326,3.001c-1.755,0 -2.445,-1.41 -2.445,-2.941c-0,-1.455 0.66,-2.925 2.37,-2.925c1.651,-0 2.401,1.41 2.401,2.865Zm-6,6.915l1.273,-0l0,-4.004l0.03,0c0.571,0.914 1.711,1.214 2.506,1.214c2.371,-0 3.539,-1.844 3.539,-4.035c0,-2.19 -1.183,-4.079 -3.569,-4.079c-1.065,0 -2.055,0.375 -2.476,1.229l-0.03,-0l0,-1.049l-1.273,0l0,10.724Z" fill-rule="nonzero"/><path d="M453.135,133.301c0,2.266 1.303,4.05 3.764,4.05c2.461,-0 3.764,-1.784 3.764,-4.05c0,-2.28 -1.303,-4.064 -3.764,-4.064c-2.461,0 -3.764,1.784 -3.764,4.064Zm1.348,0c0,-1.89 1.081,-2.94 2.416,-2.94c1.336,-0 2.416,1.05 2.416,2.94c0,1.876 -1.08,2.926 -2.416,2.926c-1.335,0 -2.416,-1.05 -2.416,-2.926Z" fill-rule="nonzero"/><path d="M462.12,137.171l1.273,-0l0,-3.45c0,-1.965 0.75,-3.135 2.805,-3.135l0,-1.349c-1.38,-0.045 -2.235,0.57 -2.849,1.814l-0.03,-0l-0,-1.634l-1.199,0l0,7.754Z" fill-rule="nonzero"/><path d="M468.928,127.092l-1.273,0l0,2.325l-1.32,0l0,1.124l1.32,-0l0,4.936c0,1.424 0.525,1.694 1.843,1.694l0.975,-0l0,-1.124l-0.585,0c-0.795,0 -0.96,-0.105 -0.96,-0.69l0,-4.816l1.545,-0l0,-1.124l-1.545,0l0,-2.325Z" fill-rule="nonzero"/><path d="M478.303,129.417l-1.273,0l0,4.38c0,1.395 -0.75,2.43 -2.296,2.43c-0.975,0 -1.576,-0.615 -1.576,-1.56l0,-5.25l-1.273,0l0,5.1c0,1.665 0.629,2.834 2.669,2.834c1.111,-0 1.981,-0.45 2.521,-1.409l0.03,0l0,1.229l1.198,-0l0,-7.754Z" fill-rule="nonzero"/><path d="M480.225,137.171l1.273,-0l0,-4.38c0,-1.395 0.751,-2.43 2.297,-2.43c0.975,-0 1.575,0.615 1.575,1.56l0,5.25l1.273,-0l0,-5.1c0,-1.665 -0.629,-2.834 -2.668,-2.834c-1.111,0 -1.981,0.45 -2.521,1.409l-0.03,-0l-0,-1.229l-1.199,0l0,7.754Z" fill-rule="nonzero"/><path d="M488.64,137.171l1.273,-0l0,-7.754l-1.273,0l0,7.754Zm1.273,-10.709l-1.273,0l0,1.559l1.273,-0l0,-1.559Z" fill-rule="nonzero"/><path d="M493.663,127.092l-1.273,0l0,2.325l-1.32,0l0,1.124l1.32,-0l0,4.936c0,1.424 0.525,1.694 1.843,1.694l0.975,-0l0,-1.124l-0.585,0c-0.795,0 -0.96,-0.105 -0.96,-0.69l0,-4.816l1.545,-0l0,-1.124l-1.545,0l0,-2.325Z" fill-rule="nonzero"/><path d="M496.695,137.171l1.273,-0l0,-7.754l-1.273,0l0,7.754Zm1.273,-10.709l-1.273,0l0,1.559l1.273,-0l0,-1.559Z" fill-rule="nonzero"/><path d="M505.305,134.711c-0.225,1.006 -0.96,1.516 -2.011,1.516c-1.695,0 -2.461,-1.2 -2.416,-2.551l5.805,-0c0.075,-1.874 -0.764,-4.439 -3.509,-4.439c-2.115,0 -3.644,1.709 -3.644,4.034c0.075,2.371 1.244,4.08 3.719,4.08c1.741,-0 2.97,-0.929 3.315,-2.64l-1.259,0Zm-4.427,-2.159c0.09,-1.186 0.886,-2.191 2.221,-2.191c1.261,-0 2.176,0.975 2.236,2.191l-4.457,0Z" fill-rule="nonzero"/><path d="M507.51,134.727c0.075,1.92 1.544,2.624 3.284,2.624c1.576,-0 3.299,-0.599 3.299,-2.444c0,-1.501 -1.258,-1.921 -2.533,-2.206c-1.186,-0.285 -2.537,-0.435 -2.537,-1.35c0,-0.78 0.886,-0.99 1.651,-0.99c0.841,-0 1.711,0.315 1.801,1.305l1.273,-0c-0.104,-1.89 -1.468,-2.429 -3.179,-2.429c-1.35,0 -2.894,0.644 -2.894,2.204c0,1.485 1.274,1.905 2.534,2.191c1.276,0.285 2.536,0.45 2.536,1.44c0,0.975 -1.08,1.155 -1.876,1.155c-1.05,0 -2.041,-0.36 -2.086,-1.5l-1.273,-0Z" fill-rule="nonzero"/><path d="M389,141.5l133,0" fill="none" stroke="#6f6f6f" stroke-width="1px" stroke-miterlimit="1"/><path d="M406.859,148.141c-0.33,-2.28 -2.174,-3.478 -4.41,-3.478c-3.3,-0 -5.069,2.533 -5.069,5.639c0,3.12 1.618,5.579 4.949,5.579c2.701,-0 4.365,-1.618 4.634,-4.289l-1.423,-0c-0.135,1.77 -1.215,3.091 -3.091,3.091c-2.565,-0 -3.646,-2.041 -3.646,-4.486c0,-2.236 1.081,-4.336 3.631,-4.336c1.486,-0 2.701,0.765 3.001,2.28l1.424,0Z" fill-rule="nonzero"/><path d="M408.105,151.757c0,2.265 1.303,4.049 3.764,4.049c2.461,-0 3.764,-1.784 3.764,-4.049c0,-2.281 -1.303,-4.064 -3.764,-4.064c-2.461,-0 -3.764,1.783 -3.764,4.064Zm1.348,-0c0,-1.891 1.081,-2.941 2.416,-2.941c1.336,-0 2.416,1.05 2.416,2.941c0,1.875 -1.08,2.926 -2.416,2.926c-1.335,-0 -2.416,-1.051 -2.416,-2.926Z" fill-rule="nonzero"/><path d="M417.135,155.626l1.273,-0l0,-4.38c0,-1.395 0.751,-2.43 2.297,-2.43c0.975,-0 1.575,0.615 1.575,1.56l0,5.25l1.273,-0l0,-5.1c0,-1.665 -0.629,-2.833 -2.668,-2.833c-1.111,-0 -1.981,0.449 -2.521,1.408l-0.03,-0l-0,-1.228l-1.199,-0l0,7.753Z" fill-rule="nonzero"/><path d="M427.243,145.548l-1.273,-0l0,2.325l-1.32,-0l0,1.123l1.32,-0l0,4.936c0,1.424 0.525,1.694 1.843,1.694l0.975,-0l0,-1.123l-0.585,-0c-0.795,-0 -0.96,-0.105 -0.96,-0.691l0,-4.816l1.545,-0l0,-1.123l-1.545,-0l0,-2.325Z" fill-rule="nonzero"/><path d="M435,152.927c0,0.705 -0.69,1.756 -2.371,1.756c-0.78,-0 -1.501,-0.3 -1.501,-1.141c0,-0.945 0.721,-1.245 1.561,-1.395c0.856,-0.15 1.816,-0.165 2.311,-0.525l0,1.305Zm2.068,1.681c-0.165,0.06 -0.285,0.075 -0.39,0.075c-0.405,-0 -0.405,-0.27 -0.405,-0.871l0,-3.991c0,-1.814 -1.513,-2.128 -2.908,-2.128c-1.726,-0 -3.21,0.673 -3.285,2.593l1.273,0c0.06,-1.14 0.856,-1.47 1.936,-1.47c0.811,-0 1.726,0.18 1.726,1.29c0,0.96 -1.2,0.87 -2.611,1.141c-1.321,0.255 -2.624,0.63 -2.624,2.385c0,1.545 1.154,2.174 2.564,2.174c1.081,-0 2.026,-0.375 2.731,-1.198c0,0.838 0.42,1.198 1.079,1.198c0.404,-0 0.689,-0.075 0.914,-0.21l0,-0.988Z" fill-rule="nonzero"/><path d="M444.838,150.361c-0.18,-1.845 -1.59,-2.668 -3.345,-2.668c-2.459,-0 -3.658,1.828 -3.658,4.154c0,2.31 1.259,3.959 3.628,3.959c1.95,-0 3.135,-1.123 3.42,-3.014l-1.305,-0c-0.165,1.17 -0.9,1.891 -2.13,1.891c-1.62,-0 -2.265,-1.411 -2.265,-2.836c0,-1.576 0.57,-3.031 2.415,-3.031c1.05,-0 1.725,0.57 1.92,1.545l1.32,0Z" fill-rule="nonzero"/><path d="M448.078,145.548l-1.273,-0l0,2.325l-1.32,-0l0,1.123l1.32,-0l0,4.936c0,1.424 0.525,1.694 1.843,1.694l0.975,-0l0,-1.123l-0.585,-0c-0.795,-0 -0.96,-0.105 -0.96,-0.691l0,-4.816l1.545,-0l0,-1.123l-1.545,-0l0,-2.325Z" fill-rule="nonzero"/><path d="M522,70l-0,90l-133,0l-0,-90l133,0Zm-1,1l-131,-0c-0,-0 -0,88 0,88l131,0l0,-88Z" fill="#6f6f6f"/><path d="M472.118,57.016c-0,2.911 1.723,5.61 5.129,5.61c3.406,-0 5.129,-2.699 5.129,-5.61c-0,-2.91 -1.723,-5.609 -5.129,-5.609c-3.406,0 -5.129,2.699 -5.129,5.609Zm1.423,0c-0,-2.16 1.095,-4.41 3.706,-4.41c2.611,-0 3.706,2.25 3.706,4.41c-0,2.161 -1.095,4.411 -3.706,4.411c-2.611,0 -3.706,-2.25 -3.706,-4.411Z" fill-rule="nonzero"/><path d="M490.326,54.617l-1.273,0l-0,4.38c-0,1.395 -0.751,2.43 -2.296,2.43c-0.976,0 -1.576,-0.615 -1.576,-1.56l-0,-5.25l-1.273,0l-0,5.1c-0,1.665 0.629,2.834 2.669,2.834c1.11,-0 1.981,-0.45 2.521,-1.409l0.03,0l-0,1.229l1.198,-0l-0,-7.754Z" fill-rule="nonzero"/><path d="M492.203,62.371l1.273,-0l-0,-3.45c-0,-1.965 0.75,-3.135 2.805,-3.135l-0,-1.349c-1.38,-0.045 -2.235,0.57 -2.85,1.814l-0.03,-0l0,-1.634l-1.198,0l-0,7.754Z" fill-rule="nonzero"/><path d="M507.458,58.426c-0,1.516 -0.585,3.001 -2.326,3.001c-1.756,0 -2.446,-1.41 -2.446,-2.941c0,-1.455 0.66,-2.925 2.371,-2.925c1.651,-0 2.401,1.41 2.401,2.865Zm-6,6.915l1.273,-0l-0,-4.004l0.03,0c0.57,0.914 1.711,1.214 2.506,1.214c2.371,-0 3.539,-1.844 3.539,-4.035c-0,-2.19 -1.183,-4.079 -3.569,-4.079c-1.065,0 -2.056,0.375 -2.476,1.229l-0.03,-0l-0,-1.049l-1.273,0l-0,10.724Z" fill-rule="nonzero"/><path d="M509.888,58.501c-0,2.266 1.303,4.05 3.764,4.05c2.461,-0 3.764,-1.784 3.764,-4.05c-0,-2.28 -1.303,-4.064 -3.764,-4.064c-2.461,0 -3.764,1.784 -3.764,4.064Zm1.348,0c-0,-1.89 1.08,-2.94 2.416,-2.94c1.335,-0 2.416,1.05 2.416,2.94c-0,1.876 -1.081,2.926 -2.416,2.926c-1.336,0 -2.416,-1.05 -2.416,-2.926Z" fill-rule="nonzero"/><path d="M518.873,62.371l1.273,-0l-0,-3.45c-0,-1.965 0.75,-3.135 2.805,-3.135l-0,-1.349c-1.38,-0.045 -2.235,0.57 -2.85,1.814l-0.03,-0l0,-1.634l-1.198,0l-0,7.754Z" fill-rule="nonzero"/><path d="M525.681,52.292l-1.273,0l-0,2.325l-1.32,0l-0,1.124l1.32,-0l-0,4.936c-0,1.424 0.524,1.694 1.843,1.694l0.975,-0l-0,-1.124l-0.585,0c-0.795,0 -0.96,-0.105 -0.96,-0.69l-0,-4.816l1.545,-0l-0,-1.124l-1.545,0l-0,-2.325Z" fill-rule="nonzero"/><path d="M529.163,62.371l1.273,-0l-0,-6.63l1.5,-0l-0,-1.124l-1.5,0l-0,-1.081c-0,-0.675 0.36,-0.87 0.975,-0.87c0.225,-0 0.495,0.03 0.72,0.105l-0,-1.109c-0.24,-0.075 -0.585,-0.12 -0.825,-0.12c-1.394,0 -2.143,0.659 -2.143,1.919l-0,1.156l-1.305,0l-0,1.124l1.305,-0l-0,6.63Z" fill-rule="nonzero"/><path d="M532.658,58.501c-0,2.266 1.303,4.05 3.764,4.05c2.461,-0 3.764,-1.784 3.764,-4.05c-0,-2.28 -1.303,-4.064 -3.764,-4.064c-2.461,0 -3.764,1.784 -3.764,4.064Zm1.348,0c-0,-1.89 1.08,-2.94 2.416,-2.94c1.335,-0 2.416,1.05 2.416,2.94c-0,1.876 -1.081,2.926 -2.416,2.926c-1.336,0 -2.416,-1.05 -2.416,-2.926Z" fill-rule="nonzero"/><rect x="541.763" y="51.662" width="1.273" height="10.708" fill-rule="nonzero"/><path d="M545.093,62.371l1.273,-0l-0,-7.754l-1.273,0l-0,7.754Zm1.273,-10.709l-1.273,0l-0,1.559l1.273,-0l-0,-1.559Z" fill-rule="nonzero"/><path d="M547.928,58.501c-0,2.266 1.303,4.05 3.764,4.05c2.461,-0 3.764,-1.784 3.764,-4.05c-0,-2.28 -1.303,-4.064 -3.764,-4.064c-2.461,0 -3.764,1.784 -3.764,4.064Zm1.348,0c-0,-1.89 1.08,-2.94 2.416,-2.94c1.335,-0 2.416,1.05 2.416,2.94c-0,1.876 -1.081,2.926 -2.416,2.926c-1.336,0 -2.416,-1.05 -2.416,-2.926Z" fill-rule="nonzero"/><g transform="matrix(1,0,0,1,383.501,-95.4682)"><path d="M0.129,-0.458c-0.003,-0.085 0.039,-0.176 0.138,-0.176c0.075,-0 0.137,0.051 0.137,0.128c0,0.098 -0.061,0.142 -0.181,0.216c-0.1,0.062 -0.185,0.122 -0.199,0.29l0.463,-0l-0,-0.075l-0.364,0c0.017,-0.088 0.11,-0.133 0.199,-0.187c0.088,-0.055 0.172,-0.118 0.172,-0.243c-0,-0.132 -0.098,-0.204 -0.222,-0.204c-0.15,0 -0.235,0.107 -0.228,0.251l0.085,-0Z" fill-rule="nonzero" transform="matrix(12,0,0,12,154.499,213.245)"/><path d="M0.419,-0.709l-0.068,0l-0.323,0.461l0,0.082l0.311,-0l0,0.166l0.08,-0l-0,-0.166l0.096,-0l-0,-0.075l-0.096,0l-0,-0.468Zm-0.318,0.468l0.236,-0.347l0.002,0l0,0.347l-0.238,0Z" fill-rule="nonzero" transform="matrix(12,0,0,12,161.171,213.245)"/><path d="M0.467,-0.263c0,0.101 -0.039,0.2 -0.155,0.2c-0.117,0 -0.163,-0.094 -0.163,-0.196c-0,-0.097 0.044,-0.195 0.158,-0.195c0.11,-0 0.16,0.094 0.16,0.191Zm-0.4,0.461l0.085,-0l-0,-0.267l0.002,0c0.038,0.061 0.114,0.081 0.167,0.081c0.158,-0 0.236,-0.123 0.236,-0.269c-0,-0.146 -0.079,-0.272 -0.238,-0.272c-0.071,0 -0.137,0.025 -0.165,0.082l-0.002,-0l-0,-0.07l-0.085,0l0,0.715Z" fill-rule="nonzero" transform="matrix(12,0,0,12,167.843,213.245)"/><path d="M0.009,-0l0.103,-0l0.144,-0.215l0.144,0.215l0.109,-0l-0.2,-0.28l0.178,-0.237l-0.102,0l-0.129,0.18l-0.124,-0.18l-0.109,0l0.18,0.245l-0.194,0.272Z" fill-rule="nonzero" transform="matrix(12,0,0,12,174.959,213.245)"/><path d="M0.069,-0l0.085,-0l-0,-0.517l-0.085,0l0,0.517Zm0.085,-0.714l-0.085,0l0,0.104l0.085,-0l-0,-0.104Z" fill="#ac2020" fill-rule="nonzero" transform="matrix(12,0,0,12,184.511,213.245)"/><path d="M0.064,-0l0.085,-0l-0,-0.292c-0,-0.093 0.05,-0.162 0.153,-0.162c0.065,-0 0.105,0.041 0.105,0.104l0,0.35l0.085,-0l-0,-0.34c-0,-0.111 -0.042,-0.189 -0.178,-0.189c-0.074,0 -0.132,0.03 -0.168,0.094l-0.002,-0l-0,-0.082l-0.08,0l0,0.517Z" fill="#ac2020" fill-rule="nonzero" transform="matrix(12,0,0,12,187.175,213.245)"/><path d="M0.182,-0.672l-0.085,0l0,0.155l-0.088,0l0,0.075l0.088,-0l0,0.329c0,0.095 0.035,0.113 0.123,0.113l0.065,-0l-0,-0.075l-0.039,0c-0.053,0 -0.064,-0.007 -0.064,-0.046l-0,-0.321l0.103,-0l-0,-0.075l-0.103,0l-0,-0.155Z" fill="#ac2020" fill-rule="nonzero" transform="matrix(12,0,0,12,193.847,213.245)"/><path d="M0.421,-0.164c-0.015,0.067 -0.064,0.101 -0.134,0.101c-0.113,0 -0.164,-0.08 -0.161,-0.17l0.387,-0c0.005,-0.125 -0.051,-0.296 -0.234,-0.296c-0.141,0 -0.243,0.114 -0.243,0.269c0.005,0.158 0.083,0.272 0.248,0.272c0.116,-0 0.198,-0.062 0.221,-0.176l-0.084,-0Zm-0.295,-0.144c0.006,-0.079 0.059,-0.146 0.148,-0.146c0.084,-0 0.145,0.065 0.149,0.146l-0.297,0Z" fill="#ac2020" fill-rule="nonzero" transform="matrix(12,0,0,12,197.627,213.245)"/><path d="M0.061,-0l0.085,-0l-0,-0.23c-0,-0.131 0.05,-0.209 0.187,-0.209l-0,-0.09c-0.092,-0.003 -0.149,0.038 -0.19,0.121l-0.002,-0l-0,-0.109l-0.08,0l0,0.517Z" fill="#ac2020" fill-rule="nonzero" transform="matrix(12,0,0,12,204.071,213.245)"/><path d="M0.031,-0.163c0.005,0.128 0.103,0.175 0.219,0.175c0.105,-0 0.22,-0.04 0.22,-0.163c-0,-0.1 -0.084,-0.128 -0.169,-0.147c-0.079,-0.019 -0.169,-0.029 -0.169,-0.09c-0,-0.052 0.059,-0.066 0.11,-0.066c0.056,-0 0.114,0.021 0.12,0.087l0.085,-0c-0.007,-0.126 -0.098,-0.162 -0.212,-0.162c-0.09,0 -0.193,0.043 -0.193,0.147c0,0.099 0.085,0.127 0.169,0.146c0.085,0.019 0.169,0.03 0.169,0.096c0,0.065 -0.072,0.077 -0.125,0.077c-0.07,0 -0.136,-0.024 -0.139,-0.1l-0.085,0Z" fill="#ac2020" fill-rule="nonzero" transform="matrix(12,0,0,12,208.067,213.245)"/><path d="M0.421,-0.164c-0.015,0.067 -0.064,0.101 -0.134,0.101c-0.113,0 -0.164,-0.08 -0.161,-0.17l0.387,-0c0.005,-0.125 -0.051,-0.296 -0.234,-0.296c-0.141,0 -0.243,0.114 -0.243,0.269c0.005,0.158 0.083,0.272 0.248,0.272c0.116,-0 0.198,-0.062 0.221,-0.176l-0.084,-0Zm-0.295,-0.144c0.006,-0.079 0.059,-0.146 0.148,-0.146c0.084,-0 0.145,0.065 0.149,0.146l-0.297,0Z" fill="#ac2020" fill-rule="nonzero" transform="matrix(12,0,0,12,214.067,213.245)"/><path d="M0.503,-0.351c-0.012,-0.123 -0.106,-0.178 -0.223,-0.178c-0.164,0 -0.244,0.122 -0.244,0.277c0,0.154 0.084,0.264 0.242,0.264c0.13,-0 0.209,-0.075 0.228,-0.201l-0.087,0c-0.011,0.078 -0.06,0.126 -0.142,0.126c-0.108,0 -0.151,-0.094 -0.151,-0.189c-0,-0.105 0.038,-0.202 0.161,-0.202c0.07,-0 0.115,0.038 0.128,0.103l0.088,-0Z" fill="#ac2020" fill-rule="nonzero" transform="matrix(12,0,0,12,220.511,213.245)"/><path d="M0.182,-0.672l-0.085,0l0,0.155l-0.088,0l0,0.075l0.088,-0l0,0.329c0,0.095 0.035,0.113 0.123,0.113l0.065,-0l-0,-0.075l-0.039,0c-0.053,0 -0.064,-0.007 -0.064,-0.046l-0,-0.321l0.103,-0l-0,-0.075l-0.103,0l-0,-0.155Z" fill="#ac2020" fill-rule="nonzero" transform="matrix(12,0,0,12,226.955,213.245)"/><path d="M0.031,-0.163c0.005,0.128 0.103,0.175 0.219,0.175c0.105,-0 0.22,-0.04 0.22,-0.163c-0,-0.1 -0.084,-0.128 -0.169,-0.147c-0.079,-0.019 -0.169,-0.029 -0.169,-0.09c-0,-0.052 0.059,-0.066 0.11,-0.066c0.056,-0 0.114,0.021 0.12,0.087l0.085,-0c-0.007,-0.126 -0.098,-0.162 -0.212,-0.162c-0.09,0 -0.193,0.043 -0.193,0.147c0,0.099 0.085,0.127 0.169,0.146c0.085,0.019 0.169,0.03 0.169,0.096c0,0.065 -0.072,0.077 -0.125,0.077c-0.07,0 -0.136,-0.024 -0.139,-0.1l-0.085,0Z" fill="#ac2020" fill-rule="nonzero" transform="matrix(12,0,0,12,230.735,213.245)"/><path d="M0.182,-0.672l-0.085,0l0,0.155l-0.088,0l0,0.075l0.088,-0l0,0.329c0,0.095 0.035,0.113 0.123,0.113l0.065,-0l-0,-0.075l-0.039,0c-0.053,0 -0.064,-0.007 -0.064,-0.046l-0,-0.321l0.103,-0l-0,-0.075l-0.103,0l-0,-0.155Z" fill="#ac2020" fill-rule="nonzero" transform="matrix(12,0,0,12,240.071,213.245)"/><path d="M0.384,-0.18c0,0.047 -0.046,0.117 -0.158,0.117c-0.052,0 -0.1,-0.02 -0.1,-0.076c-0,-0.063 0.048,-0.083 0.104,-0.093c0.057,-0.01 0.121,-0.011 0.154,-0.035l0,0.087Zm0.138,0.112c-0.011,0.004 -0.019,0.005 -0.026,0.005c-0.027,0 -0.027,-0.018 -0.027,-0.058l-0,-0.266c-0,-0.121 -0.101,-0.142 -0.194,-0.142c-0.115,0 -0.214,0.045 -0.219,0.173l0.085,-0c0.004,-0.076 0.057,-0.098 0.129,-0.098c0.054,-0 0.115,0.012 0.115,0.086c0,0.064 -0.08,0.058 -0.174,0.076c-0.088,0.017 -0.175,0.042 -0.175,0.159c0,0.103 0.077,0.145 0.171,0.145c0.072,-0 0.135,-0.025 0.182,-0.08c0,0.056 0.028,0.08 0.072,0.08c0.027,-0 0.046,-0.005 0.061,-0.014l-0,-0.066Z" fill="#ac2020" fill-rule="nonzero" transform="matrix(12,0,0,12,243.851,213.245)"/><path d="M0.061,-0l0.085,-0l-0,-0.23c-0,-0.131 0.05,-0.209 0.187,-0.209l-0,-0.09c-0.092,-0.003 -0.149,0.038 -0.19,0.121l-0.002,-0l-0,-0.109l-0.08,0l0,0.517Z" fill="#ac2020" fill-rule="nonzero" transform="matrix(12,0,0,12,250.295,213.245)"/><path d="M0.272,-0.069c-0.112,0 -0.146,-0.104 -0.146,-0.197c-0,-0.099 0.044,-0.188 0.153,-0.188c0.107,-0 0.147,0.094 0.147,0.185c0,0.097 -0.042,0.2 -0.154,0.2Zm0.238,-0.448l-0.08,0l0,0.074l-0.001,-0c-0.031,-0.057 -0.089,-0.086 -0.154,-0.086c-0.179,0 -0.239,0.151 -0.239,0.273c0,0.141 0.077,0.262 0.231,0.262c0.065,-0 0.133,-0.031 0.161,-0.094l0.002,0l0,0.034c0,0.116 -0.044,0.196 -0.155,0.196c-0.056,0 -0.13,-0.022 -0.134,-0.084l-0.085,-0c0.005,0.113 0.117,0.152 0.214,0.152c0.163,-0 0.24,-0.086 0.24,-0.254l-0,-0.473Z" fill="#ac2020" fill-rule="nonzero" transform="matrix(12,0,0,12,253.955,213.245)"/><path d="M0.421,-0.164c-0.015,0.067 -0.064,0.101 -0.134,0.101c-0.113,0 -0.164,-0.08 -0.161,-0.17l0.387,-0c0.005,-0.125 -0.051,-0.296 -0.234,-0.296c-0.141,0 -0.243,0.114 -0.243,0.269c0.005,0.158 0.083,0.272 0.248,0.272c0.116,-0 0.198,-0.062 0.221,-0.176l-0.084,-0Zm-0.295,-0.144c0.006,-0.079 0.059,-0.146 0.148,-0.146c0.084,-0 0.145,0.065 0.149,0.146l-0.297,0Z" fill="#ac2020" fill-rule="nonzero" transform="matrix(12,0,0,12,260.843,213.245)"/><path d="M0.182,-0.672l-0.085,0l0,0.155l-0.088,0l0,0.075l0.088,-0l0,0.329c0,0.095 0.035,0.113 0.123,0.113l0.065,-0l-0,-0.075l-0.039,0c-0.053,0 -0.064,-0.007 -0.064,-0.046l-0,-0.321l0.103,-0l-0,-0.075l-0.103,0l-0,-0.155Z" fill="#ac2020" fill-rule="nonzero" transform="matrix(12,0,0,12,267.287,213.245)"/><path d="M0.031,-0.163c0.005,0.128 0.103,0.175 0.219,0.175c0.105,-0 0.22,-0.04 0.22,-0.163c-0,-0.1 -0.084,-0.128 -0.169,-0.147c-0.079,-0.019 -0.169,-0.029 -0.169,-0.09c-0,-0.052 0.059,-0.066 0.11,-0.066c0.056,-0 0.114,0.021 0.12,0.087l0.085,-0c-0.007,-0.126 -0.098,-0.162 -0.212,-0.162c-0.09,0 -0.193,0.043 -0.193,0.147c0,0.099 0.085,0.127 0.169,0.146c0.085,0.019 0.169,0.03 0.169,0.096c0,0.065 -0.072,0.077 -0.125,0.077c-0.07,0 -0.136,-0.024 -0.139,-0.1l-0.085,0Z" fill="#ac2020" fill-rule="nonzero" transform="matrix(12,0,0,12,271.067,213.245)"/><rect x="184.511" y="214.145" width="92.556" height="0.6" fill="#ac2020"/></g><path d="M535.5,103.5l-8,-0" fill="none" stroke="#000" stroke-width="1px"/><path d="M535.5,126.5l-8,-0" fill="none" stroke="#000" stroke-width="1px"/><path d="M531.5,103.5l-0,23" fill="none" stroke="#000" stroke-width="1px" stroke-miterlimit="1"/><circle cx="454.002" cy="115" r="12" fill="#ca2626" fill-opacity=".2"/><path d="M454.002,103c6.623,0 12,5.377 12,12c0,6.623 -5.377,12 -12,12c-6.623,0 -12,-5.377 -12,-12c0,-6.623 5.377,-12 12,-12Zm0,1c-6.071,0 -11,4.929 -11,11c0,6.071 4.929,11 11,11c6.071,0 11,-4.929 11,-11c0,-6.071 -4.929,-11 -11,-11Z" fill="#ca2626"/></g></svg>
\ No newline at end of file
diff --git a/understanding/22/img/target-large-small-clipping.afdesign b/understanding/22/img/target-large-small-clipping.afdesign
new file mode 100644
index 0000000000..7147bb94b0
Binary files /dev/null and b/understanding/22/img/target-large-small-clipping.afdesign differ
diff --git a/understanding/22/img/target-large-small-clipping.png b/understanding/22/img/target-large-small-clipping.png
new file mode 100644
index 0000000000..cbb4c39844
Binary files /dev/null and b/understanding/22/img/target-large-small-clipping.png differ
diff --git a/understanding/22/img/target-large-small-clipping.svg b/understanding/22/img/target-large-small-clipping.svg
new file mode 100644
index 0000000000..7513c40b4d
--- /dev/null
+++ b/understanding/22/img/target-large-small-clipping.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 460 320" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" fill-rule="evenodd" clip-rule="evenodd" stroke-miterlimit="1"><rect width="460" height="320" fill="none"/><clipPath id="a"><rect width="460" height="320"/></clipPath><g clip-path="url(#a)"><rect x="-0" y="-0" width="460" height="320" fill="#fff"/><path d="M10,162.5l440,-0" fill="none" stroke="#ddd" stroke-width="1px"/><path d="M129.5,45.5l-8,-0" fill="none" stroke="#000" stroke-width="1px" stroke-miterlimit="10"/><path d="M129.5,68.5l-8,-0" fill="none" stroke="#000" stroke-width="1px" stroke-miterlimit="10"/><path d="M125.5,45.5l-0,23" fill="none" stroke="#000" stroke-width="1px"/><path d="M91.5,31.5l-0,8" fill="none" stroke="#000" stroke-width="1px" stroke-miterlimit="10"/><path d="M114.5,31.5l-0,8" fill="none" stroke="#000" stroke-width="1px" stroke-miterlimit="10"/><path d="M91.5,35.5l23,0" fill="none" stroke="#000" stroke-width="1px"/><g transform="matrix(1,0,0,1,-22.5375,-152.468)"><path d="M0.129,-0.458c-0.003,-0.085 0.039,-0.176 0.138,-0.176c0.075,-0 0.137,0.051 0.137,0.128c0,0.098 -0.061,0.142 -0.181,0.216c-0.1,0.062 -0.185,0.122 -0.199,0.29l0.463,-0l-0,-0.075l-0.364,0c0.017,-0.088 0.11,-0.133 0.199,-0.187c0.088,-0.055 0.172,-0.118 0.172,-0.243c-0,-0.132 -0.098,-0.204 -0.222,-0.204c-0.15,0 -0.235,0.107 -0.228,0.251l0.085,-0Z" fill="#196721" fill-rule="nonzero" transform="matrix(12,0,0,12,154.861,213.245)"/><path d="M0.419,-0.709l-0.068,0l-0.323,0.461l0,0.082l0.311,-0l0,0.166l0.08,-0l-0,-0.166l0.096,-0l-0,-0.075l-0.096,0l-0,-0.468Zm-0.318,0.468l0.236,-0.347l0.002,0l0,0.347l-0.238,0Z" fill="#196721" fill-rule="nonzero" transform="matrix(12,0,0,12,161.533,213.245)"/><path d="M0.467,-0.263c0,0.101 -0.039,0.2 -0.155,0.2c-0.117,0 -0.163,-0.094 -0.163,-0.196c-0,-0.097 0.044,-0.195 0.158,-0.195c0.11,-0 0.16,0.094 0.16,0.191Zm-0.4,0.461l0.085,-0l-0,-0.267l0.002,0c0.038,0.061 0.114,0.081 0.167,0.081c0.158,-0 0.236,-0.123 0.236,-0.269c-0,-0.146 -0.079,-0.272 -0.238,-0.272c-0.071,0 -0.137,0.025 -0.165,0.082l-0.002,-0l-0,-0.07l-0.085,0l0,0.715Z" fill="#196721" fill-rule="nonzero" transform="matrix(12,0,0,12,168.205,213.245)"/><path d="M0.009,-0l0.103,-0l0.144,-0.215l0.144,0.215l0.109,-0l-0.2,-0.28l0.178,-0.237l-0.102,0l-0.129,0.18l-0.124,-0.18l-0.109,0l0.18,0.245l-0.194,0.272Z" fill="#196721" fill-rule="nonzero" transform="matrix(12,0,0,12,175.321,213.245)"/><rect x="154.861" y="214.145" width="26.676" height="0.6" fill="#196721"/></g><g transform="matrix(1,0,0,1,-65.2266,-187.677)"><path d="M0.129,-0.458c-0.003,-0.085 0.039,-0.176 0.138,-0.176c0.075,-0 0.137,0.051 0.137,0.128c0,0.098 -0.061,0.142 -0.181,0.216c-0.1,0.062 -0.185,0.122 -0.199,0.29l0.463,-0l-0,-0.075l-0.364,0c0.017,-0.088 0.11,-0.133 0.199,-0.187c0.088,-0.055 0.172,-0.118 0.172,-0.243c-0,-0.132 -0.098,-0.204 -0.222,-0.204c-0.15,0 -0.235,0.107 -0.228,0.251l0.085,-0Z" fill="#196721" fill-rule="nonzero" transform="matrix(12,0,0,12,155.078,213.245)"/><path d="M0.419,-0.709l-0.068,0l-0.323,0.461l0,0.082l0.311,-0l0,0.166l0.08,-0l-0,-0.166l0.096,-0l-0,-0.075l-0.096,0l-0,-0.468Zm-0.318,0.468l0.236,-0.347l0.002,0l0,0.347l-0.238,0Z" fill="#196721" fill-rule="nonzero" transform="matrix(12,0,0,12,161.75,213.245)"/><path d="M0.467,-0.263c0,0.101 -0.039,0.2 -0.155,0.2c-0.117,0 -0.163,-0.094 -0.163,-0.196c-0,-0.097 0.044,-0.195 0.158,-0.195c0.11,-0 0.16,0.094 0.16,0.191Zm-0.4,0.461l0.085,-0l-0,-0.267l0.002,0c0.038,0.061 0.114,0.081 0.167,0.081c0.158,-0 0.236,-0.123 0.236,-0.269c-0,-0.146 -0.079,-0.272 -0.238,-0.272c-0.071,0 -0.137,0.025 -0.165,0.082l-0.002,-0l-0,-0.07l-0.085,0l0,0.715Z" fill="#196721" fill-rule="nonzero" transform="matrix(12,0,0,12,168.422,213.245)"/><path d="M0.009,-0l0.103,-0l0.144,-0.215l0.144,0.215l0.109,-0l-0.2,-0.28l0.178,-0.237l-0.102,0l-0.129,0.18l-0.124,-0.18l-0.109,0l0.18,0.245l-0.194,0.272Z" fill="#196721" fill-rule="nonzero" transform="matrix(12,0,0,12,175.538,213.245)"/><rect x="155.078" y="214.145" width="26.676" height="0.6" fill="#196721"/></g><path d="M156.141,95.779l4.398,-0l-0,-4.32l2.601,-0c3.28,-0 5.599,-1.619 5.599,-5.079c-0,-2.041 -1.359,-4.879 -5.238,-4.879l-7.36,0l0,14.278Zm4.398,-10.62l1.961,-0c1.081,-0 2.081,0.08 2.081,1.381c0,1.441 -1.2,1.521 -2.341,1.521l-1.701,0l-0,-2.902Z" fill="#196721" fill-rule="nonzero"/><path d="M173.46,90.681l1.38,-4.4l0.04,0l1.28,4.4l-2.7,0Zm-6.019,5.098l4.42,-0l0.639,-2.04l4.54,-0l0.6,2.04l4.559,-0l-5.199,-14.278l-4.3,0l-5.259,14.278Z" fill="#196721" fill-rule="nonzero"/><path d="M182.281,90.981c0.04,4.558 4.658,5.138 6.279,5.138c3.181,-0 6.599,-1.199 6.599,-4.918c-0,-2.621 -1.999,-3.562 -4.018,-4.122c-2.021,-0.56 -4.062,-0.78 -4.142,-1.8c-0,-0.8 0.98,-0.96 1.581,-0.96c0.44,-0 0.941,0.1 1.301,0.36c0.36,0.24 0.6,0.6 0.52,1.14l4.158,-0c-0.12,-3.478 -2.859,-4.658 -5.959,-4.658c-2.94,0 -5.759,1.419 -5.759,4.718c0,2.881 2.579,3.501 4.838,4.141c2.462,0.7 3.082,0.901 3.082,1.641c0,1.06 -1.1,1.3 -1.821,1.3c-0.82,0 -1.781,-0.18 -2.101,-1.04c-0.1,-0.26 -0.16,-0.58 -0.16,-0.94l-4.398,-0Z" fill="#196721" fill-rule="nonzero"/><path d="M195.621,90.981c0.04,4.558 4.658,5.138 6.279,5.138c3.181,-0 6.599,-1.199 6.599,-4.918c-0,-2.621 -1.999,-3.562 -4.018,-4.122c-2.021,-0.56 -4.062,-0.78 -4.142,-1.8c-0,-0.8 0.98,-0.96 1.581,-0.96c0.44,-0 0.941,0.1 1.301,0.36c0.36,0.24 0.6,0.6 0.52,1.14l4.158,-0c-0.12,-3.478 -2.859,-4.658 -5.959,-4.658c-2.94,0 -5.759,1.419 -5.759,4.718c0,2.881 2.579,3.501 4.838,4.141c2.462,0.7 3.082,0.901 3.082,1.641c0,1.06 -1.1,1.3 -1.821,1.3c-0.82,0 -1.781,-0.18 -2.101,-1.04c-0.1,-0.26 -0.16,-0.58 -0.16,-0.94l-4.398,-0Z" fill="#196721" fill-rule="nonzero"/><path d="M102.094,60.25c2.828,-0 5.156,-2.328 5.156,-5.156c0,-2.829 -2.328,-5.156 -5.156,-5.156c-2.829,-0 -5.157,2.327 -5.157,5.156c0,2.828 2.328,5.156 5.157,5.156Zm6.094,-5.156c-0,3.343 -2.751,6.093 -6.094,6.093c-3.343,0 -6.094,-2.75 -6.094,-6.093c-0,-3.343 2.751,-6.094 6.094,-6.094c3.343,0 6.094,2.751 6.094,6.094Z"/><path d="M105.698,60.008c0.028,0.038 0.058,0.073 0.091,0.108l3.61,3.609c0.176,0.176 0.414,0.275 0.663,0.275c0.515,0 0.938,-0.423 0.938,-0.938c-0,-0.248 -0.099,-0.487 -0.275,-0.662l-3.609,-3.61c-0.034,-0.034 -0.07,-0.065 -0.108,-0.093c-0.368,0.501 -0.81,0.944 -1.31,1.312l-0,-0.001Z" fill-rule="nonzero"/><path d="M102.094,51.813c0.257,-0 0.468,0.211 0.468,0.468l0,2.344l2.344,0c0.257,0 0.469,0.212 0.469,0.469c0,0.257 -0.212,0.469 -0.469,0.469l-2.344,-0l0,2.343c0,0.257 -0.211,0.469 -0.468,0.469c-0.257,-0 -0.469,-0.212 -0.469,-0.469l-0,-2.343l-2.344,-0c-0.257,-0 -0.469,-0.212 -0.469,-0.469c0,-0.257 0.212,-0.469 0.469,-0.469l2.344,0l-0,-2.344c-0,-0.257 0.212,-0.468 0.469,-0.468Z"/><path d="M61.004,90c-0,1.646 -1.354,3 -3,3c-1.646,-0 -3,-1.354 -3,-3c-0,-1.646 1.354,-3 3,-3c1.646,-0 3,1.354 3,3Z" fill="gray" fill-rule="nonzero"/><path d="M52,83c-1.646,-0 -3,1.354 -3,3l-0,18c-0,1.646 1.354,3 3,3l26,-0c1.646,-0 3,-1.354 3,-3l-0,-18c-0,-1.646 -1.354,-3 -3,-3l-26,-0Zm26,2c0.549,-0 1,0.451 1,1l-0,12l-7.55,-3.894c-0.384,-0.192 -0.85,-0.117 -1.154,0.186l-7.42,7.42l-5.32,-3.544c-0.395,-0.263 -0.924,-0.211 -1.26,0.124l-5.292,4.708l-0,1.08c-0.002,-0.027 -0.004,-0.053 -0.004,-0.08l-0,-18c-0,-0.549 0.451,-1 1,-1l26,-0Z" fill="gray" fill-rule="nonzero"/><path d="M15,45l2,0l-0,1l-1,0l-1,0l0,-1Zm100,100l-2,-0l0,-1l1,-0l1,-0l-0,1Zm-100,0l0,-2l1,0l0,1l0,1l-1,0Zm0,-98l1,0l0,1l-1,0l0,-1Zm0,2l1,0l0,1l-1,0l0,-1Zm0,2l1,0l0,1l-1,0l0,-1Zm0,2l1,0l0,1l-1,0l0,-1Zm0,2l1,-0l0,1l-1,0l0,-1Zm0,2l1,0l0,1l-1,0l0,-1Zm0,2l1,0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,1l-1,0l0,-1Zm0,2l1,-0l0,1l-1,0l0,-1Zm0,2l1,0l0,1l-1,0l0,-1Zm0,2l1,0l0,1l-1,0l0,-1Zm0,2l1,0l0,1l-1,0l0,-1Zm0,2l1,0l0,1l-1,0l0,-1Zm0,2l1,0l0,1l-1,0l0,-1Zm0,2l1,0l0,1l-1,0l0,-1Zm0,2l1,0l0,1l-1,0l0,-1Zm0,2l1,0l0,1l-1,0l0,-1Zm0,2l1,0l0,1l-1,0l0,-1Zm0,2l1,0l0,1l-1,0l0,-1Zm0,2l1,0l0,1l-1,0l0,-1Zm0,2l1,0l0,1l-1,0l0,-1Zm0,2l1,0l0,1l-1,0l0,-1Zm0,2l1,0l0,1l-1,0l0,-1Zm0,2l1,0l0,1l-1,0l0,-1Zm0,2l1,0l0,1l-1,0l0,-1Zm0,2l1,0l0,1l-1,0l0,-1Zm0,2l1,0l0,1l-1,0l0,-1Zm0,2l1,0l0,1l-1,-0l0,-1Zm0,2l1,0l0,1l-1,0l0,-1Zm0,2l1,0l0,1l-1,0l0,-1Zm0,2l1,0l0,1l-1,0l0,-1Zm0,2l1,0l0,1l-1,0l0,-1Zm0,2l1,0l0,1l-1,0l0,-1Zm0,2l1,0l0,1l-1,0l0,-1Zm0,2l1,0l0,1l-1,0l0,-1Zm0,2l1,0l0,1l-1,0l0,-1Zm0,2l1,0l0,1l-1,0l0,-1Zm0,2l1,0l0,1l-1,0l0,-1Zm0,2l1,0l0,1l-1,0l0,-1Zm0,2l1,0l0,1l-1,0l0,-1Zm0,2l1,0l0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l0,1l-1,0l0,-1Zm0,2l1,0l0,1l-1,0l0,-1Zm0,2l1,0l0,1l-1,0l0,-1Zm0,2l1,0l0,1l-1,0l0,-1Zm0,2l1,0l0,1l-1,0l0,-1Zm2,4l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2.001,-0l-0,-1l0.999,0l0,1l-0.999,-0Zm1.999,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2.001,-0l-0,-1l1,0l-0,1l-1,-0Zm2,-0l-0,-1l1,0l-0,1l-1,-0Zm1.999,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm4,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1.001l1,0l-0,1.001Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2.001l-1,0l-0,-1l1,0l-0,1Zm-0,-2l-1,0l-0,-1l1,0l-0,1Zm-0,-2l-1,0l-0,-1l1,0l-0,1Zm-0,-2l-1,0l-0,-1l1,0l-0,1Zm-0,-2l-1,0l-0,-1l1,0l-0,1Zm-0,-2l-1,0l-0,-1l1,0l-0,1Zm-0,-2l-1,0l-0,-1l1,0l-0,1Zm-0,-2l-1,0l-0,-1l1,0l-0,1Zm-0,-1.999l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2.001l-1,0l-0,-1l1,0l-0,1Zm-0,-2l-1,0l-0,-1l1,0l-0,1Zm-0,-2l-1,0l-0,-1l1,0l-0,1Zm-0,-2l-1,0l-0,-1l1,0l-0,1Zm-0,-2l-1,0l-0,-1l1,0l-0,1Zm-0,-2l-1,0l-0,-1l1,0l-0,1Zm-0,-2l-1,0l-0,-1.999l1,0l-0,1.999Zm-2,-1.999l-0,1l-1,0l0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l0,1l-1,0l0,-1l1,0Zm-2,0l-0,1l-1,0l0,-1l1,0Zm-2,0l0,1l-1,0l0,-1l1,0Zm-2,0l0,1l-1,0l-0,-1l1,0Zm-2,0l0,1l-1,0l0,-1l1,0Zm-2,0l0,1l-1,0l0,-1l1,0Zm-2,0l0,1l-1,0l0,-1l1,0Zm-2,0l0,1l-1,0l0,-1l1,0Zm-2,0l0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l0,1l-1,0l-0,-1l1,0Zm-2,0l0,1l-1,0l0,-1l1,0Zm-2,0l0,1l-1,0l0,-1l1,0Zm-2,0l0,1l-1,0l0,-1l1,0Zm-2,0l0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Z" fill="#6a6bd3"/><path d="M91,46c0,0 0.331,-0.637 0.613,-1l0.387,0l0,0.011c0,-0.004 -0,-0.007 -0,-0.011l1,0l0,1l-2,0Zm0,1l1,-0l-0,1l-1,-0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,-0l-0,1l-1,-0l0,-1Zm0,2l1,-0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,-0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,-0l-0,1l-1,-0l0,-1Zm0,2l1,-0l-0,2l-1,0l0,-1l0.011,-0c-0.004,-0 -0.007,0 -0.011,0l0,-1Zm2,2l-0,-1l1,0l-0,1l-1,0Zm2,0l0,-1l1,0l0,1l-1,0Zm2,0l0,-1l1,0l0,1l-1,0Zm2,0l0,-1l1,0l0,1l-1,0Zm2,0l-0,-1l1,0l-0,1l-1,0Zm2,0l-0,-1l1,0l0,1l-1,0Zm2,0l0,-1l1,0l-0,1l-1,0Zm2,0l0,-1l1,0l0,1l-1,0Zm2,0l-0,-1l1,0l0,1l-1,0Zm2,0l-0,-1l1,0l-0,1l-1,0Zm2,0l-0,-1l2,0l-0,1l-1,0l-0,-0.011c-0,0.004 0,0.007 0,0.011l-1,0Zm2,-2l-1,0l-0,-1l1,0l-0,1Zm-0,-2l-1,0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,0l-0,-1l1,0l-0,1Zm-0,-2l-1,0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,0l-0,-1l1,0l-0,1Zm-0,-2l-1,0l-0,-1l1,0l-0,1Zm-0,-2l-1,0l0,-2c0,0.943 1,1 1,1l-0,1Zm-2,-2l0,1l-1,0l0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l0,1l-1,0l0,-1l1,0Zm-2,0l0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l0,1l-1,0l-0,-1l1,0Zm-2,0l0,1l-1,0l0,-1l1,0Z" fill="#6a6bd3"/><path d="M129.5,200.5l-8,-0" fill="none" stroke="#000" stroke-width="1px" stroke-miterlimit="10"/><path d="M129.5,215.5l-8,-0" fill="none" stroke="#000" stroke-width="1px" stroke-miterlimit="10"/><path d="M125.5,200.5l-0,15" fill="none" stroke="#000" stroke-width="1px"/><path d="M99.5,186.5l-0,8" fill="none" stroke="#000" stroke-width="1px" stroke-miterlimit="10"/><path d="M114.5,186.5l-0,8" fill="none" stroke="#000" stroke-width="1px" stroke-miterlimit="10"/><path d="M99.5,190.5l15,-0" fill="none" stroke="#000" stroke-width="1px"/><path d="M136.595,203.269l-0.779,0c-0.227,1.284 -1.283,1.596 -2.447,1.596l-0,0.815l2.208,-0l-0,6.096l1.018,-0l0,-8.507Z" fill-rule="nonzero"/><path d="M142.428,207.204c1.165,-0 1.717,0.876 1.717,1.932c-0,1.009 -0.612,1.885 -1.717,1.885c-1.116,0 -1.765,-0.84 -1.765,-1.897c0,-1.068 0.625,-1.92 1.765,-1.92Zm2.555,-1.764c-0.12,-1.38 -0.994,-2.171 -2.399,-2.171c-2.424,0 -3.131,2.22 -3.131,4.559c-0,1.789 0.407,4.092 2.927,4.092c2.148,-0 2.843,-1.619 2.843,-2.856c0,-1.572 -0.97,-2.759 -2.603,-2.759c-0.924,0 -1.645,0.336 -2.125,1.115l-0.024,-0.024c0.048,-1.307 0.324,-3.228 2.065,-3.228c0.804,-0 1.333,0.504 1.429,1.272l1.018,0Z" fill-rule="nonzero"/><path d="M151.273,208.62c-0,1.213 -0.468,2.401 -1.861,2.401c-1.405,0 -1.957,-1.128 -1.957,-2.353c0,-1.164 0.528,-2.34 1.897,-2.34c1.321,-0 1.921,1.128 1.921,2.292Zm-4.8,5.532l1.018,-0l0,-3.203l0.024,0c0.456,0.731 1.369,0.971 2.005,0.971c1.897,-0 2.831,-1.475 2.831,-3.228c0,-1.752 -0.946,-3.263 -2.855,-3.263c-0.852,0 -1.645,0.3 -1.981,0.983l-0.024,-0l0,-0.839l-1.018,0l-0,8.579Z" fill-rule="nonzero"/><path d="M152.893,211.776l1.235,-0l1.728,-2.578l1.728,2.578l1.307,-0l-2.399,-3.36l2.135,-2.843l-1.223,0l-1.548,2.162l-1.488,-2.162l-1.307,0l2.159,2.939l-2.327,3.264Z" fill-rule="nonzero"/><path d="M97.123,174.061l-0.779,-0c-0.228,1.284 -1.284,1.596 -2.448,1.596l0,0.814l2.208,0l0,6.096l1.019,0l-0,-8.506Z" fill-rule="nonzero"/><path d="M102.955,177.995c1.165,0 1.717,0.877 1.717,1.933c0,1.008 -0.612,1.885 -1.717,1.885c-1.116,-0 -1.764,-0.841 -1.764,-1.897c-0,-1.068 0.624,-1.921 1.764,-1.921Zm2.556,-1.763c-0.12,-1.381 -0.995,-2.171 -2.399,-2.171c-2.425,-0 -3.132,2.219 -3.132,4.558c0,1.789 0.408,4.092 2.927,4.092c2.149,0 2.844,-1.619 2.844,-2.855c-0,-1.573 -0.971,-2.759 -2.603,-2.759c-0.925,-0 -1.645,0.335 -2.125,1.114l-0.024,-0.024c0.048,-1.306 0.324,-3.228 2.065,-3.228c0.804,0 1.332,0.505 1.428,1.273l1.019,0Z" fill-rule="nonzero"/><path d="M111.8,179.412c0,1.212 -0.468,2.401 -1.861,2.401c-1.404,-0 -1.956,-1.129 -1.956,-2.353c-0,-1.164 0.528,-2.341 1.896,-2.341c1.321,0 1.921,1.129 1.921,2.293Zm-4.8,5.531l1.019,0l-0,-3.202l0.024,-0c0.456,0.731 1.368,0.97 2.004,0.97c1.897,0 2.832,-1.474 2.832,-3.227c-0,-1.753 -0.947,-3.263 -2.856,-3.263c-0.852,-0 -1.644,0.299 -1.98,0.982l-0.024,0l-0,-0.838l-1.019,-0l0,8.578Z" fill-rule="nonzero"/><path d="M113.42,182.567l1.236,0l1.727,-2.577l1.728,2.577l1.308,0l-2.4,-3.36l2.136,-2.842l-1.224,-0l-1.548,2.161l-1.487,-2.161l-1.308,-0l2.16,2.938l-2.328,3.264Z" fill-rule="nonzero"/><path d="M159.141,250.779l4.398,-0l-0,-5.44l5.7,-0l-0,-3.398l-5.7,0l-0,-1.782l6.64,-0l-0,-3.658l-11.038,0l0,14.278Z" fill="#ac2020" fill-rule="nonzero"/><path d="M175.36,245.681l1.38,-4.4l0.04,0l1.28,4.4l-2.7,0Zm-6.019,5.098l4.42,-0l0.639,-2.04l4.54,-0l0.6,2.04l4.559,-0l-5.199,-14.278l-4.3,0l-5.259,14.278Z" fill="#ac2020" fill-rule="nonzero"/><rect x="185.081" y="236.501" width="4.397" height="14.278" fill="#ac2020" fill-rule="nonzero"/><path d="M191.741,250.779l10.718,-0l-0,-3.658l-6.32,0l-0,-10.62l-4.398,0l0,14.278Z" fill="#ac2020" fill-rule="nonzero"/><path d="M106.062,210.5c1.886,0 3.438,-1.552 3.438,-3.437c-0,-1.886 -1.552,-3.438 -3.438,-3.438c-1.885,0 -3.437,1.552 -3.437,3.438c-0,1.885 1.552,3.437 3.437,3.437Zm4.063,-3.437c0,2.228 -1.834,4.062 -4.063,4.062c-2.228,-0 -4.062,-1.834 -4.062,-4.062c-0,-2.229 1.834,-4.063 4.062,-4.063c2.229,0 4.063,1.834 4.063,4.063Z"/><path d="M108.465,210.339c0.019,0.025 0.039,0.049 0.061,0.072l2.407,2.406c0.117,0.117 0.276,0.183 0.442,0.183c0.343,0 0.625,-0.282 0.625,-0.625c-0,-0.166 -0.066,-0.325 -0.183,-0.442l-2.406,-2.406c-0.023,-0.023 -0.047,-0.044 -0.072,-0.063c-0.245,0.335 -0.54,0.63 -0.874,0.875l-0,-0Z" fill-rule="nonzero"/><path d="M106.062,204.875c0.172,0 0.313,0.141 0.313,0.313l-0,1.562l1.562,0c0.172,0 0.313,0.141 0.313,0.313c-0,0.171 -0.141,0.312 -0.313,0.312l-1.562,0l-0,1.563c-0,0.171 -0.141,0.312 -0.313,0.312c-0.171,0 -0.312,-0.141 -0.312,-0.312l-0,-1.563l-1.563,0c-0.171,0 -0.312,-0.141 -0.312,-0.312c-0,-0.172 0.141,-0.313 0.312,-0.313l1.563,0l-0,-1.562c-0,-0.172 0.141,-0.313 0.312,-0.313Z"/><path d="M61.004,245c-0,1.646 -1.354,3 -3,3c-1.646,-0 -3,-1.354 -3,-3c-0,-1.646 1.354,-3 3,-3c1.646,-0 3,1.354 3,3Z" fill="gray" fill-rule="nonzero"/><path d="M52,238c-1.646,-0 -3,1.354 -3,3l-0,18c-0,1.646 1.354,3 3,3l26,-0c1.646,-0 3,-1.354 3,-3l-0,-18c-0,-1.646 -1.354,-3 -3,-3l-26,-0Zm26,2c0.549,-0 1,0.451 1,1l-0,12l-7.55,-3.894c-0.384,-0.192 -0.85,-0.117 -1.154,0.186l-7.42,7.42l-5.32,-3.544c-0.395,-0.263 -0.924,-0.211 -1.26,0.124l-5.292,4.708l-0,1.08c-0.002,-0.027 -0.004,-0.053 -0.004,-0.08l-0,-18c-0,-0.549 0.451,-1 1,-1l26,-0Z" fill="gray" fill-rule="nonzero"/><path d="M15,200l2,0l-0,1l-1,0l-1,0l0,-1Zm100,100l-2,-0l0,-1l1,-0l1,-0l-0,1Zm-100,0l0,-2l1,0l0,1l0,1l-1,0Zm0,-98l1,0l0,1l-1,0l0,-1Zm0,2l1,0l0,1l-1,0l0,-1Zm0,2l1,0l0,1l-1,0l0,-1Zm0,2l1,0l0,1l-1,0l0,-1Zm0,2l1,-0l0,1l-1,0l0,-1Zm0,2l1,0l0,1l-1,0l0,-1Zm0,2l1,0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,1l-1,0l0,-1Zm0,2l1,-0l0,1l-1,0l0,-1Zm0,2l1,0l0,1l-1,0l0,-1Zm0,2l1,0l0,1l-1,0l0,-1Zm0,2l1,0l0,1l-1,0l0,-1Zm0,2l1,0l0,1l-1,0l0,-1Zm0,2l1,0l0,1l-1,0l0,-1Zm0,2l1,0l0,1l-1,0l0,-1Zm0,2l1,0l0,1l-1,0l0,-1Zm0,2l1,0l0,1l-1,0l0,-1Zm0,2l1,0l0,1l-1,0l0,-1Zm0,2l1,0l0,1l-1,0l0,-1Zm0,2l1,0l0,1l-1,0l0,-1Zm0,2l1,0l0,1l-1,0l0,-1Zm0,2l1,0l0,1l-1,0l0,-1Zm0,2l1,0l0,1l-1,0l0,-1Zm0,2l1,0l0,1l-1,0l0,-1Zm0,2l1,0l0,1l-1,0l0,-1Zm0,2l1,0l0,1l-1,0l0,-1Zm0,2l1,0l0,1l-1,0l0,-1Zm0,2l1,0l0,1l-1,-0l0,-1Zm0,2l1,0l0,1l-1,0l0,-1Zm0,2l1,0l0,1l-1,0l0,-1Zm0,2l1,0l0,1l-1,0l0,-1Zm0,2l1,0l0,1l-1,0l0,-1Zm0,2l1,0l0,1l-1,0l0,-1Zm0,2l1,0l0,1l-1,0l0,-1Zm0,2l1,0l0,1l-1,0l0,-1Zm0,2l1,0l0,1l-1,0l0,-1Zm0,2l1,0l0,1l-1,0l0,-1Zm0,2l1,0l0,1l-1,0l0,-1Zm0,2l1,0l0,1l-1,0l0,-1Zm0,2l1,0l0,1l-1,0l0,-1Zm0,2l1,0l0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l0,1l-1,0l0,-1Zm0,2l1,0l0,1l-1,0l0,-1Zm0,2l1,0l0,1l-1,0l0,-1Zm0,2l1,0l0,1l-1,0l0,-1Zm0,2l1,0l0,1l-1,0l0,-1Zm2,4l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2.001,-0l-0,-1l0.999,0l0,1l-0.999,-0Zm1.999,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2.001,-0l-0,-1l1,0l-0,1l-1,-0Zm2,-0l-0,-1l1,0l-0,1l-1,-0Zm1.999,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm4,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1.001l1,0l-0,1.001Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2.001l-1,0l-0,-1l1,0l-0,1Zm-0,-2l-1,0l-0,-1l1,0l-0,1Zm-0,-2l-1,0l-0,-1l1,0l-0,1Zm-0,-2l-1,0l-0,-1l1,0l-0,1Zm-0,-2l-1,0l-0,-1l1,0l-0,1Zm-0,-2l-1,0l-0,-1l1,0l-0,1Zm-0,-2l-1,0l-0,-1l1,0l-0,1Zm-0,-2l-1,0l-0,-1l1,0l-0,1Zm-0,-1.999l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2.001l-1,0l-0,-1l1,0l-0,1Zm-0,-2l-1,0l-0,-1l1,0l-0,1Zm-0,-2l-1,0l-0,-1l1,0l-0,1Zm-0,-2l-1,0l-0,-1l1,0l-0,1Zm-0,-2l-1,0l-0,-1l1,0l-0,1Zm-0,-2l-1,0l-0,-1l1,0l-0,1Zm-0,-2l-1,0l-0,-1.999l1,0l-0,1.999Zm-2,-1.999l-0,1l-1,0l0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l0,1l-1,0l0,-1l1,0Zm-2,0l-0,1l-1,0l0,-1l1,0Zm-2,0l0,1l-1,0l0,-1l1,0Zm-2,0l0,1l-1,0l-0,-1l1,0Zm-2,0l0,1l-1,0l0,-1l1,0Zm-2,0l0,1l-1,0l0,-1l1,0Zm-2,0l0,1l-1,0l0,-1l1,0Zm-2,0l0,1l-1,0l0,-1l1,0Zm-2,0l0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l0,1l-1,0l-0,-1l1,0Zm-2,0l0,1l-1,0l0,-1l1,0Zm-2,0l0,1l-1,0l0,-1l1,0Zm-2,0l0,1l-1,0l0,-1l1,0Zm-2,0l0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Z" fill="#6a6bd3"/><path d="M99,201c0,-0 0.332,-0.638 0.613,-1l0.387,0l0,0.011c0,-0.004 -0,-0.007 -0,-0.011l1,0l0,1l-1,-0l-1,-0Zm0,1l1,-0l-0,1l-1,-0l0,-1Zm0,2l1,-0l-0,1l-1,-0l0,-1Zm0,2l1,-0l-0,1l-1,-0l0,-1Zm0,2l1,-0l-0,1l-1,-0l0,-1Zm0,2l1,-0l-0,1l-1,-0l0,-1Zm0,2l1,-0l-0,1l-1,-0l0,-1Zm0,2l1,-0l-0,1l-0,1l-1,0l0,-1l0.011,-0c-0.004,-0 -0.007,0 -0.011,0l0,-1Zm2,2l-0,-1l1,0l-0,1l-1,-0Zm2,-0l-0,-1l1,0l-0,1l-1,-0Zm2,-0l-0,-1l1,0l-0,1l-1,-0Zm2,-0l-0,-1l1,0l-0,1l-1,-0Zm2,-0l-0,-1l1,0l-0,1l-1,-0Zm2,-0l-0,-1l1,0l-0,1l-1,-0Zm2,-0l-0,-1l1,0l1,0l-0,1l-1,-0l-0,-0.011c-0,0.004 -0,0.007 -0,0.011l-1,-0Zm2,-2l-1,0l-0,-1l1,0l-0,1Zm-0,-2l-1,0l-0,-1l1,0l-0,1Zm-0,-2l-1,0l-0,-1l1,0l-0,1Zm-0,-2l-1,0l-0,-1l1,0l-0,1Zm-0,-2l-1,0l-0,-1l1,0l-0,1Zm-0,-2l-1,0l-0,-1l1,0l-0,1Zm-0,-2l-1,0l-0,-1l-0,-1c-0,0.942 1,1 1,1l-0,1Zm-2,-2l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l0,-1l1,0Zm-2,0l0,1l-1,0l0,-1l1,0Zm-2,0l0,1l-1,0l0,-1l1,0Zm-2,0l0,1l-1,0l0,-1l1,0Zm-2,0l0,1l-1,0l0,-1l1,0Z" fill="#6a6bd3"/><path d="M324.5,186.5l-0,8" fill="none" stroke="#000" stroke-width="1px" stroke-miterlimit="10"/><path d="M347.5,186.5l-0,8" fill="none" stroke="#000" stroke-width="1px" stroke-miterlimit="10"/><path d="M324.5,190.5l23,0" fill="none" stroke="#000" stroke-width="1px"/><g transform="matrix(1,0,0,1,166.773,-30.6766)"><path d="M0.129,-0.458c-0.003,-0.085 0.039,-0.176 0.138,-0.176c0.075,-0 0.137,0.051 0.137,0.128c0,0.098 -0.061,0.142 -0.181,0.216c-0.1,0.062 -0.185,0.122 -0.199,0.29l0.463,-0l-0,-0.075l-0.364,0c0.017,-0.088 0.11,-0.133 0.199,-0.187c0.088,-0.055 0.172,-0.118 0.172,-0.243c-0,-0.132 -0.098,-0.204 -0.222,-0.204c-0.15,0 -0.235,0.107 -0.228,0.251l0.085,-0Z" fill-rule="nonzero" transform="matrix(12,0,0,12,154.499,213.245)"/><path d="M0.419,-0.709l-0.068,0l-0.323,0.461l0,0.082l0.311,-0l0,0.166l0.08,-0l-0,-0.166l0.096,-0l-0,-0.075l-0.096,0l-0,-0.468Zm-0.318,0.468l0.236,-0.347l0.002,0l0,0.347l-0.238,0Z" fill-rule="nonzero" transform="matrix(12,0,0,12,161.171,213.245)"/><path d="M0.467,-0.263c0,0.101 -0.039,0.2 -0.155,0.2c-0.117,0 -0.163,-0.094 -0.163,-0.196c-0,-0.097 0.044,-0.195 0.158,-0.195c0.11,-0 0.16,0.094 0.16,0.191Zm-0.4,0.461l0.085,-0l-0,-0.267l0.002,0c0.038,0.061 0.114,0.081 0.167,0.081c0.158,-0 0.236,-0.123 0.236,-0.269c-0,-0.146 -0.079,-0.272 -0.238,-0.272c-0.071,0 -0.137,0.025 -0.165,0.082l-0.002,-0l-0,-0.07l-0.085,0l0,0.715Z" fill-rule="nonzero" transform="matrix(12,0,0,12,167.843,213.245)"/><path d="M0.009,-0l0.103,-0l0.144,-0.215l0.144,0.215l0.109,-0l-0.2,-0.28l0.178,-0.237l-0.102,0l-0.129,0.18l-0.124,-0.18l-0.109,0l0.18,0.245l-0.194,0.272Z" fill-rule="nonzero" transform="matrix(12,0,0,12,174.959,213.245)"/><path d="M0.069,-0l0.085,-0l-0,-0.517l-0.085,0l0,0.517Zm0.085,-0.714l-0.085,0l0,0.104l0.085,-0l-0,-0.104Z" fill="#ac2020" fill-rule="nonzero" transform="matrix(12,0,0,12,184.511,213.245)"/><path d="M0.064,-0l0.085,-0l-0,-0.292c-0,-0.093 0.05,-0.162 0.153,-0.162c0.065,-0 0.105,0.041 0.105,0.104l0,0.35l0.085,-0l-0,-0.34c-0,-0.111 -0.042,-0.189 -0.178,-0.189c-0.074,0 -0.132,0.03 -0.168,0.094l-0.002,-0l-0,-0.082l-0.08,0l0,0.517Z" fill="#ac2020" fill-rule="nonzero" transform="matrix(12,0,0,12,187.175,213.245)"/><path d="M0.182,-0.672l-0.085,0l0,0.155l-0.088,0l0,0.075l0.088,-0l0,0.329c0,0.095 0.035,0.113 0.123,0.113l0.065,-0l-0,-0.075l-0.039,0c-0.053,0 -0.064,-0.007 -0.064,-0.046l-0,-0.321l0.103,-0l-0,-0.075l-0.103,0l-0,-0.155Z" fill="#ac2020" fill-rule="nonzero" transform="matrix(12,0,0,12,193.847,213.245)"/><path d="M0.421,-0.164c-0.015,0.067 -0.064,0.101 -0.134,0.101c-0.113,0 -0.164,-0.08 -0.161,-0.17l0.387,-0c0.005,-0.125 -0.051,-0.296 -0.234,-0.296c-0.141,0 -0.243,0.114 -0.243,0.269c0.005,0.158 0.083,0.272 0.248,0.272c0.116,-0 0.198,-0.062 0.221,-0.176l-0.084,-0Zm-0.295,-0.144c0.006,-0.079 0.059,-0.146 0.148,-0.146c0.084,-0 0.145,0.065 0.149,0.146l-0.297,0Z" fill="#ac2020" fill-rule="nonzero" transform="matrix(12,0,0,12,197.627,213.245)"/><path d="M0.061,-0l0.085,-0l-0,-0.23c-0,-0.131 0.05,-0.209 0.187,-0.209l-0,-0.09c-0.092,-0.003 -0.149,0.038 -0.19,0.121l-0.002,-0l-0,-0.109l-0.08,0l0,0.517Z" fill="#ac2020" fill-rule="nonzero" transform="matrix(12,0,0,12,204.071,213.245)"/><path d="M0.031,-0.163c0.005,0.128 0.103,0.175 0.219,0.175c0.105,-0 0.22,-0.04 0.22,-0.163c-0,-0.1 -0.084,-0.128 -0.169,-0.147c-0.079,-0.019 -0.169,-0.029 -0.169,-0.09c-0,-0.052 0.059,-0.066 0.11,-0.066c0.056,-0 0.114,0.021 0.12,0.087l0.085,-0c-0.007,-0.126 -0.098,-0.162 -0.212,-0.162c-0.09,0 -0.193,0.043 -0.193,0.147c0,0.099 0.085,0.127 0.169,0.146c0.085,0.019 0.169,0.03 0.169,0.096c0,0.065 -0.072,0.077 -0.125,0.077c-0.07,0 -0.136,-0.024 -0.139,-0.1l-0.085,0Z" fill="#ac2020" fill-rule="nonzero" transform="matrix(12,0,0,12,208.067,213.245)"/><path d="M0.421,-0.164c-0.015,0.067 -0.064,0.101 -0.134,0.101c-0.113,0 -0.164,-0.08 -0.161,-0.17l0.387,-0c0.005,-0.125 -0.051,-0.296 -0.234,-0.296c-0.141,0 -0.243,0.114 -0.243,0.269c0.005,0.158 0.083,0.272 0.248,0.272c0.116,-0 0.198,-0.062 0.221,-0.176l-0.084,-0Zm-0.295,-0.144c0.006,-0.079 0.059,-0.146 0.148,-0.146c0.084,-0 0.145,0.065 0.149,0.146l-0.297,0Z" fill="#ac2020" fill-rule="nonzero" transform="matrix(12,0,0,12,214.067,213.245)"/><path d="M0.503,-0.351c-0.012,-0.123 -0.106,-0.178 -0.223,-0.178c-0.164,0 -0.244,0.122 -0.244,0.277c0,0.154 0.084,0.264 0.242,0.264c0.13,-0 0.209,-0.075 0.228,-0.201l-0.087,0c-0.011,0.078 -0.06,0.126 -0.142,0.126c-0.108,0 -0.151,-0.094 -0.151,-0.189c-0,-0.105 0.038,-0.202 0.161,-0.202c0.07,-0 0.115,0.038 0.128,0.103l0.088,-0Z" fill="#ac2020" fill-rule="nonzero" transform="matrix(12,0,0,12,220.511,213.245)"/><path d="M0.182,-0.672l-0.085,0l0,0.155l-0.088,0l0,0.075l0.088,-0l0,0.329c0,0.095 0.035,0.113 0.123,0.113l0.065,-0l-0,-0.075l-0.039,0c-0.053,0 -0.064,-0.007 -0.064,-0.046l-0,-0.321l0.103,-0l-0,-0.075l-0.103,0l-0,-0.155Z" fill="#ac2020" fill-rule="nonzero" transform="matrix(12,0,0,12,226.955,213.245)"/><path d="M0.031,-0.163c0.005,0.128 0.103,0.175 0.219,0.175c0.105,-0 0.22,-0.04 0.22,-0.163c-0,-0.1 -0.084,-0.128 -0.169,-0.147c-0.079,-0.019 -0.169,-0.029 -0.169,-0.09c-0,-0.052 0.059,-0.066 0.11,-0.066c0.056,-0 0.114,0.021 0.12,0.087l0.085,-0c-0.007,-0.126 -0.098,-0.162 -0.212,-0.162c-0.09,0 -0.193,0.043 -0.193,0.147c0,0.099 0.085,0.127 0.169,0.146c0.085,0.019 0.169,0.03 0.169,0.096c0,0.065 -0.072,0.077 -0.125,0.077c-0.07,0 -0.136,-0.024 -0.139,-0.1l-0.085,0Z" fill="#ac2020" fill-rule="nonzero" transform="matrix(12,0,0,12,230.735,213.245)"/><path d="M0.182,-0.672l-0.085,0l0,0.155l-0.088,0l0,0.075l0.088,-0l0,0.329c0,0.095 0.035,0.113 0.123,0.113l0.065,-0l-0,-0.075l-0.039,0c-0.053,0 -0.064,-0.007 -0.064,-0.046l-0,-0.321l0.103,-0l-0,-0.075l-0.103,0l-0,-0.155Z" fill="#ac2020" fill-rule="nonzero" transform="matrix(12,0,0,12,240.071,213.245)"/><path d="M0.384,-0.18c0,0.047 -0.046,0.117 -0.158,0.117c-0.052,0 -0.1,-0.02 -0.1,-0.076c-0,-0.063 0.048,-0.083 0.104,-0.093c0.057,-0.01 0.121,-0.011 0.154,-0.035l0,0.087Zm0.138,0.112c-0.011,0.004 -0.019,0.005 -0.026,0.005c-0.027,0 -0.027,-0.018 -0.027,-0.058l-0,-0.266c-0,-0.121 -0.101,-0.142 -0.194,-0.142c-0.115,0 -0.214,0.045 -0.219,0.173l0.085,-0c0.004,-0.076 0.057,-0.098 0.129,-0.098c0.054,-0 0.115,0.012 0.115,0.086c0,0.064 -0.08,0.058 -0.174,0.076c-0.088,0.017 -0.175,0.042 -0.175,0.159c0,0.103 0.077,0.145 0.171,0.145c0.072,-0 0.135,-0.025 0.182,-0.08c0,0.056 0.028,0.08 0.072,0.08c0.027,-0 0.046,-0.005 0.061,-0.014l-0,-0.066Z" fill="#ac2020" fill-rule="nonzero" transform="matrix(12,0,0,12,243.851,213.245)"/><path d="M0.061,-0l0.085,-0l-0,-0.23c-0,-0.131 0.05,-0.209 0.187,-0.209l-0,-0.09c-0.092,-0.003 -0.149,0.038 -0.19,0.121l-0.002,-0l-0,-0.109l-0.08,0l0,0.517Z" fill="#ac2020" fill-rule="nonzero" transform="matrix(12,0,0,12,250.295,213.245)"/><path d="M0.272,-0.069c-0.112,0 -0.146,-0.104 -0.146,-0.197c-0,-0.099 0.044,-0.188 0.153,-0.188c0.107,-0 0.147,0.094 0.147,0.185c0,0.097 -0.042,0.2 -0.154,0.2Zm0.238,-0.448l-0.08,0l0,0.074l-0.001,-0c-0.031,-0.057 -0.089,-0.086 -0.154,-0.086c-0.179,0 -0.239,0.151 -0.239,0.273c0,0.141 0.077,0.262 0.231,0.262c0.065,-0 0.133,-0.031 0.161,-0.094l0.002,0l0,0.034c0,0.116 -0.044,0.196 -0.155,0.196c-0.056,0 -0.13,-0.022 -0.134,-0.084l-0.085,-0c0.005,0.113 0.117,0.152 0.214,0.152c0.163,-0 0.24,-0.086 0.24,-0.254l-0,-0.473Z" fill="#ac2020" fill-rule="nonzero" transform="matrix(12,0,0,12,253.955,213.245)"/><path d="M0.421,-0.164c-0.015,0.067 -0.064,0.101 -0.134,0.101c-0.113,0 -0.164,-0.08 -0.161,-0.17l0.387,-0c0.005,-0.125 -0.051,-0.296 -0.234,-0.296c-0.141,0 -0.243,0.114 -0.243,0.269c0.005,0.158 0.083,0.272 0.248,0.272c0.116,-0 0.198,-0.062 0.221,-0.176l-0.084,-0Zm-0.295,-0.144c0.006,-0.079 0.059,-0.146 0.148,-0.146c0.084,-0 0.145,0.065 0.149,0.146l-0.297,0Z" fill="#ac2020" fill-rule="nonzero" transform="matrix(12,0,0,12,260.843,213.245)"/><path d="M0.182,-0.672l-0.085,0l0,0.155l-0.088,0l0,0.075l0.088,-0l0,0.329c0,0.095 0.035,0.113 0.123,0.113l0.065,-0l-0,-0.075l-0.039,0c-0.053,0 -0.064,-0.007 -0.064,-0.046l-0,-0.321l0.103,-0l-0,-0.075l-0.103,0l-0,-0.155Z" fill="#ac2020" fill-rule="nonzero" transform="matrix(12,0,0,12,267.287,213.245)"/><rect x="184.511" y="214.145" width="86.556" height="0.6" fill="#ac2020"/></g><path d="M335.062,210.5c1.886,0 3.438,-1.552 3.438,-3.437c-0,-1.886 -1.552,-3.438 -3.438,-3.438c-1.885,0 -3.437,1.552 -3.437,3.438c-0,1.885 1.552,3.437 3.437,3.437Zm4.063,-3.437c0,2.228 -1.834,4.062 -4.063,4.062c-2.228,-0 -4.062,-1.834 -4.062,-4.062c-0,-2.229 1.834,-4.063 4.062,-4.063c2.229,0 4.063,1.834 4.063,4.063Z"/><path d="M337.465,210.339c0.019,0.025 0.039,0.049 0.061,0.072l2.407,2.406c0.117,0.117 0.276,0.183 0.442,0.183c0.343,0 0.625,-0.282 0.625,-0.625c-0,-0.166 -0.066,-0.325 -0.183,-0.442l-2.406,-2.406c-0.023,-0.023 -0.047,-0.044 -0.072,-0.063c-0.245,0.335 -0.54,0.63 -0.874,0.875l-0,-0Z" fill-rule="nonzero"/><path d="M335.062,204.875c0.172,0 0.313,0.141 0.313,0.313l-0,1.562l1.562,0c0.172,0 0.313,0.141 0.313,0.313c-0,0.171 -0.141,0.312 -0.313,0.312l-1.562,0l-0,1.563c-0,0.171 -0.141,0.312 -0.313,0.312c-0.171,0 -0.312,-0.141 -0.312,-0.312l-0,-1.563l-1.563,0c-0.171,0 -0.312,-0.141 -0.312,-0.312c-0,-0.172 0.141,-0.313 0.312,-0.313l1.563,0l-0,-1.562c-0,-0.172 0.141,-0.313 0.312,-0.313Z"/><path d="M290.004,245c-0,1.646 -1.354,3 -3,3c-1.646,-0 -3,-1.354 -3,-3c-0,-1.646 1.354,-3 3,-3c1.646,-0 3,1.354 3,3Z" fill="gray" fill-rule="nonzero"/><path d="M281,238c-1.646,-0 -3,1.354 -3,3l-0,18c-0,1.646 1.354,3 3,3l26,-0c1.646,-0 3,-1.354 3,-3l-0,-18c-0,-1.646 -1.354,-3 -3,-3l-26,-0Zm26,2c0.549,-0 1,0.451 1,1l-0,12l-7.55,-3.894c-0.384,-0.192 -0.85,-0.117 -1.154,0.186l-7.42,7.42l-5.32,-3.544c-0.395,-0.263 -0.924,-0.211 -1.26,0.124l-5.292,4.708l-0,1.08c-0.002,-0.027 -0.004,-0.053 -0.004,-0.08l-0,-18c-0,-0.549 0.451,-1 1,-1l26,-0Z" fill="gray" fill-rule="nonzero"/><path d="M244,200l2,0l-0,1l-1,0l-1,0l-0,-1Zm100,100l-2,-0l0,-1l1,-0l1,-0l-0,1Zm-100,0l0,-2l1,0l0,1l0,1l-1,0Zm0,-98l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,-0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,-0l0,-1Zm0,2l1,-0l-0,1l-1,-0l0,-1Zm0,2l1,-0l-0,1l-1,0l0,-1Zm0,2l1,-0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,-0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm2,4l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2.001,-0l-0,-1l0.999,0l0,1l-0.999,-0Zm1.999,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2.001,-0l-0,-1l1,0l-0,1l-1,-0Zm2,-0l-0,-1l1,0l-0,1l-1,-0Zm1.999,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm4,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1.001l1,0l-0,1.001Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2.001l-1,0l-0,-1l1,0l-0,1Zm-0,-2l-1,0l-0,-1l1,0l-0,1Zm-0,-2l-1,0l-0,-1l1,0l-0,1Zm-0,-2l-1,0l-0,-1l1,0l-0,1Zm-0,-2l-1,0l-0,-1l1,0l-0,1Zm-0,-2l-1,0l-0,-1l1,0l-0,1Zm-0,-2l-1,0l-0,-1l1,0l-0,1Zm-0,-2l-1,0l-0,-1l1,0l-0,1Zm-0,-1.999l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2.001l-1,0l-0,-1l1,0l-0,1Zm-0,-2l-1,0l-0,-1l1,0l-0,1Zm-0,-2l-1,0l-0,-1l1,0l-0,1Zm-0,-2l-1,0l-0,-1l1,0l-0,1Zm-0,-2l-1,0l-0,-1l1,0l-0,1Zm-0,-2l-1,0l-0,-1l1,0l-0,1Zm-0,-2l-1,0l-0,-1.999l1,0l-0,1.999Zm-2,-1.999l-0,1l-1,0l0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l0,1l-1,0l0,-1l1,0Zm-2,0l-0,1l-1,0l0,-1l1,0Zm-2,0l0,1l-1,0l0,-1l1,0Zm-2,0l0,1l-1,0l-0,-1l1,0Zm-2,0l0,1l-1,0l0,-1l1,0Zm-2,0l0,1l-1,0l0,-1l1,0Zm-2,0l0,1l-1,0l0,-1l1,0Zm-2,0l0,1l-1,0l0,-1l1,0Zm-2,0l0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l0,1l-1,0l-0,-1l1,0Zm-2,0l0,1l-1,0l0,-1l1,0Zm-2,0l0,1l-1,0l0,-1l1,0Zm-2,0l0,1l-1,0l0,-1l1,0Zm-2,0l0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Z" fill="#ac2020"/><path d="M328,201c0,-0 0.332,-0.638 0.613,-1l0.387,0l0,0.011c0,-0.004 -0,-0.007 -0,-0.011l1,0l0,1l-1,-0l-1,-0Zm0,1l1,-0l-0,1l-1,-0l0,-1Zm0,2l1,-0l-0,1l-1,-0l0,-1Zm0,2l1,-0l-0,1l-1,-0l0,-1Zm0,2l1,-0l-0,1l-1,-0l0,-1Zm0,2l1,-0l-0,1l-1,-0l0,-1Zm0,2l1,-0l-0,1l-1,-0l0,-1Zm0,2l1,-0l-0,1l-0,1l-1,0l0,-1l0.011,-0c-0.004,-0 -0.007,0 -0.011,0l0,-1Zm2,2l-0,-1l1,0l-0,1l-1,-0Zm2,-0l-0,-1l1,0l-0,1l-1,-0Zm2,-0l-0,-1l1,0l-0,1l-1,-0Zm2,-0l-0,-1l1,0l-0,1l-1,-0Zm2,-0l-0,-1l1,0l-0,1l-1,-0Zm2,-0l-0,-1l1,0l-0,1l-1,-0Zm2,-0l-0,-1l1,0l1,0l-0,1l-1,-0l-0,-0.011c-0,0.004 -0,0.007 -0,0.011l-1,-0Zm2,-2l-1,0l-0,-1l1,0l-0,1Zm-0,-2l-1,0l-0,-1l1,0l-0,1Zm-0,-2l-1,0l-0,-1l1,0l-0,1Zm-0,-2l-1,0l-0,-1l1,0l-0,1Zm-0,-2l-1,0l-0,-1l1,0l-0,1Zm-0,-2l-1,0l-0,-1l1,0l-0,1Zm-0,-2l-1,0l-0,-1l-0,-1c-0,0.942 1,1 1,1l-0,1Zm-2,-2l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l0,-1l1,0Zm-2,0l0,1l-1,0l0,-1l1,0Zm-2,0l0,1l-1,0l0,-1l1,0Zm-2,0l0,1l-1,0l0,-1l1,0Zm-2,0l0,1l-1,0l0,-1l1,0Z" fill="#6a6bd3"/><circle cx="336" cy="208" r="12" fill="#ca2626" fill-opacity=".2"/><path d="M336,196c6.623,0 12,5.377 12,12c-0,6.623 -5.377,12 -12,12c-6.623,0 -12,-5.377 -12,-12c-0,-6.623 5.377,-12 12,-12Zm-0,1c-6.071,0 -11,4.929 -11,11c-0,6.071 4.929,11 11,11c6.071,0 11,-4.929 11,-11c-0,-6.071 -4.929,-11 -11,-11Z" fill="#ca2626"/></g></svg>
\ No newline at end of file
diff --git a/understanding/22/img/target-large-small-touching.afdesign b/understanding/22/img/target-large-small-touching.afdesign
new file mode 100644
index 0000000000..43afbd3e00
Binary files /dev/null and b/understanding/22/img/target-large-small-touching.afdesign differ
diff --git a/understanding/22/img/target-large-small-touching.png b/understanding/22/img/target-large-small-touching.png
new file mode 100644
index 0000000000..d54240b8af
Binary files /dev/null and b/understanding/22/img/target-large-small-touching.png differ
diff --git a/understanding/22/img/target-large-small-touching.svg b/understanding/22/img/target-large-small-touching.svg
new file mode 100644
index 0000000000..8a05adbd26
--- /dev/null
+++ b/understanding/22/img/target-large-small-touching.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 460 320" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" fill-rule="evenodd" clip-rule="evenodd" stroke-miterlimit="1"><rect width="460" height="320" fill="none"/><clipPath id="a"><rect width="460" height="320"/></clipPath><g clip-path="url(#a)"><rect x="-0" width="460" height="320" fill="#fff"/><path d="M10,160.5l440,0" fill="none" stroke="#ddd" stroke-width="1px"/><path d="M144.5,43.5l-8,-0" fill="none" stroke="#000" stroke-width="1px" stroke-miterlimit="10"/><path d="M144.5,58.5l-8,-0" fill="none" stroke="#000" stroke-width="1px" stroke-miterlimit="10"/><path d="M140.5,43.5l-0,15" fill="none" stroke="#000" stroke-width="1px"/><path d="M114.5,29.5l-0,8" fill="none" stroke="#000" stroke-width="1px" stroke-miterlimit="10"/><path d="M129.5,29.5l-0,8" fill="none" stroke="#000" stroke-width="1px" stroke-miterlimit="10"/><path d="M114.5,33.5l15,-0" fill="none" stroke="#000" stroke-width="1px"/><path d="M151.595,46.269l-0.779,0c-0.227,1.284 -1.283,1.596 -2.447,1.596l-0,0.815l2.208,-0l-0,6.096l1.018,-0l0,-8.507Z" fill-rule="nonzero"/><path d="M157.428,50.204c1.165,-0 1.717,0.876 1.717,1.932c-0,1.009 -0.612,1.885 -1.717,1.885c-1.116,0 -1.765,-0.84 -1.765,-1.897c0,-1.068 0.625,-1.92 1.765,-1.92Zm2.555,-1.764c-0.12,-1.38 -0.994,-2.171 -2.399,-2.171c-2.424,0 -3.131,2.22 -3.131,4.559c-0,1.789 0.407,4.092 2.927,4.092c2.148,-0 2.843,-1.619 2.843,-2.856c0,-1.572 -0.97,-2.759 -2.603,-2.759c-0.924,0 -1.645,0.336 -2.125,1.115l-0.024,-0.024c0.048,-1.307 0.324,-3.228 2.065,-3.228c0.804,-0 1.333,0.504 1.429,1.272l1.018,0Z" fill-rule="nonzero"/><path d="M166.273,51.62c-0,1.213 -0.468,2.401 -1.861,2.401c-1.405,0 -1.957,-1.128 -1.957,-2.353c0,-1.164 0.528,-2.34 1.897,-2.34c1.321,-0 1.921,1.128 1.921,2.292Zm-4.8,5.532l1.018,-0l0,-3.203l0.024,0c0.456,0.731 1.369,0.971 2.005,0.971c1.897,-0 2.831,-1.475 2.831,-3.228c0,-1.752 -0.946,-3.263 -2.855,-3.263c-0.852,0 -1.645,0.3 -1.981,0.983l-0.024,-0l0,-0.839l-1.018,0l-0,8.579Z" fill-rule="nonzero"/><path d="M167.893,54.776l1.235,-0l1.728,-2.578l1.728,2.578l1.307,-0l-2.399,-3.36l2.135,-2.843l-1.223,0l-1.548,2.162l-1.488,-2.162l-1.307,0l2.159,2.939l-2.327,3.264Z" fill-rule="nonzero"/><path d="M112.123,17.061l-0.779,-0c-0.228,1.284 -1.284,1.596 -2.448,1.596l0,0.814l2.208,0l0,6.096l1.019,0l-0,-8.506Z" fill-rule="nonzero"/><path d="M117.955,20.995c1.165,0 1.717,0.877 1.717,1.933c0,1.008 -0.612,1.885 -1.717,1.885c-1.116,-0 -1.764,-0.841 -1.764,-1.897c-0,-1.068 0.624,-1.921 1.764,-1.921Zm2.556,-1.763c-0.12,-1.381 -0.995,-2.171 -2.399,-2.171c-2.425,-0 -3.132,2.219 -3.132,4.558c0,1.789 0.408,4.092 2.927,4.092c2.149,0 2.844,-1.619 2.844,-2.855c-0,-1.573 -0.971,-2.759 -2.603,-2.759c-0.925,-0 -1.645,0.335 -2.125,1.114l-0.024,-0.024c0.048,-1.306 0.324,-3.228 2.065,-3.228c0.804,0 1.332,0.505 1.428,1.273l1.019,0Z" fill-rule="nonzero"/><path d="M126.8,22.412c0,1.212 -0.468,2.401 -1.861,2.401c-1.404,-0 -1.956,-1.129 -1.956,-2.353c-0,-1.164 0.528,-2.341 1.896,-2.341c1.321,0 1.921,1.129 1.921,2.293Zm-4.8,5.531l1.019,0l-0,-3.202l0.024,-0c0.456,0.731 1.368,0.97 2.004,0.97c1.897,0 2.832,-1.474 2.832,-3.227c-0,-1.753 -0.947,-3.263 -2.856,-3.263c-0.852,-0 -1.644,0.299 -1.98,0.982l-0.024,0l-0,-0.838l-1.019,-0l0,8.578Z" fill-rule="nonzero"/><path d="M128.42,25.567l1.236,0l1.727,-2.577l1.728,2.577l1.308,0l-2.4,-3.36l2.136,-2.842l-1.224,-0l-1.548,2.161l-1.487,-2.161l-1.308,-0l2.16,2.938l-2.328,3.264Z" fill-rule="nonzero"/><path d="M159.141,93.779l4.398,-0l-0,-5.44l5.7,-0l-0,-3.398l-5.7,0l-0,-1.782l6.64,-0l-0,-3.658l-11.038,0l0,14.278Z" fill="#ac2020" fill-rule="nonzero"/><path d="M175.36,88.681l1.38,-4.4l0.04,0l1.28,4.4l-2.7,0Zm-6.019,5.098l4.42,-0l0.639,-2.04l4.54,-0l0.6,2.04l4.559,-0l-5.199,-14.278l-4.3,0l-5.259,14.278Z" fill="#ac2020" fill-rule="nonzero"/><rect x="185.081" y="79.501" width="4.397" height="14.278" fill="#ac2020" fill-rule="nonzero"/><path d="M191.741,93.779l10.718,-0l-0,-3.658l-6.32,0l-0,-10.62l-4.398,0l0,14.278Z" fill="#ac2020" fill-rule="nonzero"/><path d="M121.062,53.5c1.886,0 3.438,-1.552 3.438,-3.437c-0,-1.886 -1.552,-3.438 -3.438,-3.438c-1.885,0 -3.437,1.552 -3.437,3.438c-0,1.885 1.552,3.437 3.437,3.437Zm4.063,-3.437c0,2.228 -1.834,4.062 -4.063,4.062c-2.228,-0 -4.062,-1.834 -4.062,-4.062c-0,-2.229 1.834,-4.063 4.062,-4.063c2.229,0 4.063,1.834 4.063,4.063Z"/><path d="M123.465,53.339c0.019,0.025 0.039,0.049 0.061,0.072l2.407,2.406c0.117,0.117 0.276,0.183 0.442,0.183c0.343,0 0.625,-0.282 0.625,-0.625c-0,-0.166 -0.066,-0.325 -0.183,-0.442l-2.406,-2.406c-0.023,-0.023 -0.047,-0.044 -0.072,-0.063c-0.245,0.335 -0.54,0.63 -0.874,0.875l-0,-0Z" fill-rule="nonzero"/><path d="M121.062,47.875c0.172,0 0.313,0.141 0.313,0.313l-0,1.562l1.562,0c0.172,0 0.313,0.141 0.313,0.313c-0,0.171 -0.141,0.312 -0.313,0.312l-1.562,0l-0,1.563c-0,0.171 -0.141,0.312 -0.313,0.312c-0.171,0 -0.312,-0.141 -0.312,-0.312l-0,-1.563l-1.563,0c-0.171,0 -0.312,-0.141 -0.312,-0.312c-0,-0.172 0.141,-0.313 0.312,-0.313l1.563,0l-0,-1.562c-0,-0.172 0.141,-0.313 0.312,-0.313Z"/><path d="M61.004,88c-0,1.646 -1.354,3 -3,3c-1.646,-0 -3,-1.354 -3,-3c-0,-1.646 1.354,-3 3,-3c1.646,-0 3,1.354 3,3Z" fill="gray" fill-rule="nonzero"/><path d="M52,81c-1.646,-0 -3,1.354 -3,3l-0,18c-0,1.646 1.354,3 3,3l26,-0c1.646,-0 3,-1.354 3,-3l-0,-18c-0,-1.646 -1.354,-3 -3,-3l-26,-0Zm26,2c0.549,-0 1,0.451 1,1l-0,12l-7.55,-3.894c-0.384,-0.192 -0.85,-0.117 -1.154,0.186l-7.42,7.42l-5.32,-3.544c-0.395,-0.263 -0.924,-0.211 -1.26,0.124l-5.292,4.708l-0,1.08c-0.002,-0.027 -0.004,-0.053 -0.004,-0.08l-0,-18c-0,-0.549 0.451,-1 1,-1l26,-0Z" fill="gray" fill-rule="nonzero"/><path d="M15,43l2,0l-0,1l-1,0l-1,0l-0,-1Zm100,100l-2,-0l0,-1l1,-0l1,-0l-0,1Zm-100,0l0,-2l1,0l0,1l0,1l-1,0Zm0,-98l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,-0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,-0l0,-1Zm0,2l1,-0l-0,1l-1,-0l0,-1Zm0,2l1,-0l-0,1l-1,0l0,-1Zm0,2l1,-0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,-0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm2,4l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2.001,-0l-0,-1l0.999,0l0,1l-0.999,-0Zm1.999,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2.001,-0l-0,-1l1,0l-0,1l-1,-0Zm2,-0l-0,-1l1,0l-0,1l-1,-0Zm1.999,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm4,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1.001l1,0l-0,1.001Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2.001l-1,0l-0,-1l1,0l-0,1Zm-0,-2l-1,0l-0,-1l1,0l-0,1Zm-0,-2l-1,0l-0,-1l1,0l-0,1Zm-0,-2l-1,0l-0,-1l1,0l-0,1Zm-0,-2l-1,0l-0,-1l1,0l-0,1Zm-0,-2l-1,0l-0,-1l1,0l-0,1Zm-0,-2l-1,0l-0,-1l1,0l-0,1Zm-0,-2l-1,0l-0,-1l1,0l-0,1Zm-0,-1.999l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2.001l-1,0l-0,-1l1,0l-0,1Zm-0,-2l-1,0l-0,-1l1,0l-0,1Zm-0,-2l-1,0l-0,-1l1,0l-0,1Zm-0,-2l-1,0l-0,-1l1,0l-0,1Zm-0,-2l-1,0l-0,-1l1,0l-0,1Zm-0,-2l-1,0l-0,-1l1,0l-0,1Zm-0,-2l-1,0l-0,-1.999l1,0l-0,1.999Zm-2,-1.999l-0,1l-1,0l0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l0,1l-1,0l0,-1l1,0Zm-2,0l-0,1l-1,0l0,-1l1,0Zm-2,0l0,1l-1,0l0,-1l1,0Zm-2,0l0,1l-1,0l-0,-1l1,0Zm-2,0l0,1l-1,0l0,-1l1,0Zm-2,0l0,1l-1,0l0,-1l1,0Zm-2,0l0,1l-1,0l0,-1l1,0Zm-2,0l0,1l-1,0l0,-1l1,0Zm-2,0l0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l0,1l-1,0l-0,-1l1,0Zm-2,0l0,1l-1,0l0,-1l1,0Zm-2,0l0,1l-1,0l0,-1l1,0Zm-2,0l0,1l-1,0l0,-1l1,0Zm-2,0l0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Z" fill="#6a6bd3"/><path d="M114,45l0,-2l1,0l0,1l-0,1l-1,-0Zm14,-2l2,0l-0,1l-1,0l-1,0l-0,-1Zm2,14l-0,2l-1,-0l-0,-1l-0,-1l1,0Zm-14,2l-2,-0l0,-1l1,-0l1,0l-0,1Zm-2,-13l1,-0l-0,1l-1,-0l0,-1Zm0,2l1,-0l-0,1l-1,-0l0,-1Zm0,2l1,-0l-0,1l-1,-0l0,-1Zm0,2l1,-0l-0,1l-1,-0l0,-1Zm0,2l1,-0l-0,1l-1,-0l0,-1Zm0,2l1,-0l-0,1l-1,-0l0,-1Zm3,3l-0,-1l1,0l-0,1l-1,-0Zm2,-0l-0,-1l1,0l-0,1l-1,-0Zm2,-0l-0,-1l1,0l-0,1l-1,-0Zm2,-0l-0,-1l1,0l-0,1l-1,-0Zm2,-0l-0,-1l1,0l-0,1l-1,-0Zm2,-0l-0,-1l1,0l-0,1l-1,-0Zm3,-3l-1,0l-0,-1l1,0l-0,1Zm-0,-2l-1,0l-0,-1l1,0l-0,1Zm-0,-2l-1,0l-0,-1l1,0l-0,1Zm-0,-2l-1,0l-0,-1l1,0l-0,1Zm-0,-2l-1,0l-0,-1l1,0l-0,1Zm-0,-2l-1,0l-0,-1l1,0l-0,1Zm-3,-3l-0,1l-1,0l-0,-1l1,0Zm-2,0l0,1l-1,0l0,-1l1,0Zm-2,0l0,1l-1,0l0,-1l1,0Zm-2,0l0,1l-1,0l0,-1l1,0Zm-2,0l0,1l-1,0l0,-1l1,0Zm-2,0l0,1l-1,0l0,-1l1,0Z" fill="#6a6bd3"/><path d="M350.062,53.5c1.886,0 3.438,-1.552 3.438,-3.437c-0,-1.886 -1.552,-3.438 -3.438,-3.438c-1.885,0 -3.437,1.552 -3.437,3.438c-0,1.885 1.552,3.437 3.437,3.437Zm4.063,-3.437c0,2.228 -1.834,4.062 -4.063,4.062c-2.228,-0 -4.062,-1.834 -4.062,-4.062c-0,-2.229 1.834,-4.063 4.062,-4.063c2.229,0 4.063,1.834 4.063,4.063Z"/><path d="M352.465,53.339c0.019,0.025 0.039,0.049 0.061,0.072l2.407,2.406c0.117,0.117 0.276,0.183 0.442,0.183c0.343,0 0.625,-0.282 0.625,-0.625c-0,-0.166 -0.066,-0.325 -0.183,-0.442l-2.406,-2.406c-0.023,-0.023 -0.047,-0.044 -0.072,-0.063c-0.245,0.335 -0.54,0.63 -0.874,0.875l-0,-0Z" fill-rule="nonzero"/><path d="M350.062,47.875c0.172,0 0.313,0.141 0.313,0.313l-0,1.562l1.562,0c0.172,0 0.313,0.141 0.313,0.313c-0,0.171 -0.141,0.312 -0.313,0.312l-1.562,0l-0,1.563c-0,0.171 -0.141,0.312 -0.313,0.312c-0.171,0 -0.312,-0.141 -0.312,-0.312l-0,-1.563l-1.563,0c-0.171,0 -0.312,-0.141 -0.312,-0.312c-0,-0.172 0.141,-0.313 0.312,-0.313l1.563,0l-0,-1.562c-0,-0.172 0.141,-0.313 0.312,-0.313Z"/><path d="M290.004,88c-0,1.646 -1.354,3 -3,3c-1.646,-0 -3,-1.354 -3,-3c-0,-1.646 1.354,-3 3,-3c1.646,-0 3,1.354 3,3Z" fill="gray" fill-rule="nonzero"/><path d="M281,81c-1.646,-0 -3,1.354 -3,3l-0,18c-0,1.646 1.354,3 3,3l26,-0c1.646,-0 3,-1.354 3,-3l-0,-18c-0,-1.646 -1.354,-3 -3,-3l-26,-0Zm26,2c0.549,-0 1,0.451 1,1l-0,12l-7.55,-3.894c-0.384,-0.192 -0.85,-0.117 -1.154,0.186l-7.42,7.42l-5.32,-3.544c-0.395,-0.263 -0.924,-0.211 -1.26,0.124l-5.292,4.708l-0,1.08c-0.002,-0.027 -0.004,-0.053 -0.004,-0.08l-0,-18c-0,-0.549 0.451,-1 1,-1l26,-0Z" fill="gray" fill-rule="nonzero"/><path d="M244,43l2,0l-0,1l-1,0l-1,0l-0,-1Zm100,100l-2,-0l0,-1l1,-0l1,-0l-0,1Zm-100,0l0,-2l1,0l0,1l0,1l-1,0Zm0,-98l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,-0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,-0l0,-1Zm0,2l1,-0l-0,1l-1,-0l0,-1Zm0,2l1,-0l-0,1l-1,0l0,-1Zm0,2l1,-0l0,1l-1,0l0,-1Zm0,2l1,0l0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,-0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l0,1l-1,0l0,-1Zm0,2l1,0l0,1l-1,0l0,-1Zm2,4l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2.001,-0l-0,-1l0.999,0l0,1l-0.999,-0Zm1.999,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2.001,-0l-0,-1l1,0l-0,1l-1,-0Zm2,-0l-0,-1l1,0l-0,1l-1,-0Zm1.999,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm4,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1.001l1,0l-0,1.001Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2.001l-1,0l-0,-1l1,0l-0,1Zm-0,-2l-1,0l-0,-1l1,0l-0,1Zm-0,-2l-1,0l-0,-1l1,0l-0,1Zm-0,-2l-1,0l-0,-1l1,0l-0,1Zm-0,-2l-1,0l-0,-1l1,0l-0,1Zm-0,-2l-1,0l-0,-1l1,0l-0,1Zm-0,-2l-1,0l-0,-1l1,0l-0,1Zm-0,-2l-1,0l-0,-1l1,0l-0,1Zm-0,-1.999l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2.001l-1,0l-0,-1l1,0l-0,1Zm-0,-2l-1,0l-0,-1l1,0l-0,1Zm-0,-2l-1,0l-0,-1l1,0l-0,1Zm-0,-2l-1,0l-0,-1l1,0l-0,1Zm-0,-2l-1,0l-0,-1l1,0l-0,1Zm-0,-2l-1,0l-0,-1l1,0l-0,1Zm-0,-2l-1,0l-0,-1.999l1,0l-0,1.999Zm-2,-1.999l-0,1l-1,0l0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l0,1l-1,0l0,-1l1,0Zm-2,0l-0,1l-1,0l0,-1l1,0Zm-2,0l0,1l-1,0l0,-1l1,0Zm-2,0l0,1l-1,0l-0,-1l1,0Zm-2,0l0,1l-1,0l0,-1l1,0Zm-2,0l0,1l-1,0l0,-1l1,0Zm-2,0l0,1l-1,0l0,-1l1,0Zm-2,0l0,1l-1,0l0,-1l1,0Zm-2,0l0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l0,1l-1,0l-0,-1l1,0Zm-2,0l0,1l-1,0l0,-1l1,0Zm-2,0l0,1l-1,0l0,-1l1,0Zm-2,0l0,1l-1,0l0,-1l1,0Zm-2,0l0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Z" fill="#ac2020"/><path d="M343,45l0,-2l1,0l0,1l-0,1l-1,-0Zm14,-2l2,0l-0,1l-1,0l-1,0l-0,-1Zm2,14l-0,2l-1,-0l-0,-1l-0,-1l1,0Zm-14,2l-2,-0l0,-1l1,-0l1,0l-0,1Zm-2,-13l1,-0l-0,1l-1,-0l0,-1Zm0,2l1,-0l-0,1l-1,-0l0,-1Zm0,2l1,-0l-0,1l-1,-0l0,-1Zm0,2l1,-0l-0,1l-1,-0l0,-1Zm0,2l1,-0l-0,1l-1,-0l0,-1Zm0,2l1,-0l-0,1l-1,-0l0,-1Zm3,3l-0,-1l1,0l-0,1l-1,-0Zm2,-0l-0,-1l1,0l-0,1l-1,-0Zm2,-0l-0,-1l1,0l-0,1l-1,-0Zm2,-0l-0,-1l1,0l-0,1l-1,-0Zm2,-0l-0,-1l1,0l-0,1l-1,-0Zm2,-0l-0,-1l1,0l-0,1l-1,-0Zm3,-3l-1,0l-0,-1l1,0l-0,1Zm-0,-2l-1,0l-0,-1l1,0l-0,1Zm-0,-2l-1,0l-0,-1l1,0l-0,1Zm-0,-2l-1,0l-0,-1l1,0l-0,1Zm-0,-2l-1,0l-0,-1l1,0l-0,1Zm-0,-2l-1,0l-0,-1l1,0l-0,1Zm-3,-3l-0,1l-1,0l-0,-1l1,0Zm-2,0l0,1l-1,0l0,-1l1,0Zm-2,0l0,1l-1,0l0,-1l1,0Zm-2,0l0,1l-1,0l0,-1l1,0Zm-2,0l0,1l-1,0l0,-1l1,0Zm-2,0l0,1l-1,0l0,-1l1,0Z" fill="#6a6bd3"/><path d="M339.5,29.5l-0,8" fill="none" stroke="#000" stroke-width="1px" stroke-miterlimit="10"/><path d="M362.5,29.5l-0,8" fill="none" stroke="#000" stroke-width="1px" stroke-miterlimit="10"/><path d="M339.5,33.5l23,0" fill="none" stroke="#000" stroke-width="1px"/><g transform="matrix(1,0,0,1,181.773,-187.677)"><path d="M0.129,-0.458c-0.003,-0.085 0.039,-0.176 0.138,-0.176c0.075,-0 0.137,0.051 0.137,0.128c0,0.098 -0.061,0.142 -0.181,0.216c-0.1,0.062 -0.185,0.122 -0.199,0.29l0.463,-0l-0,-0.075l-0.364,0c0.017,-0.088 0.11,-0.133 0.199,-0.187c0.088,-0.055 0.172,-0.118 0.172,-0.243c-0,-0.132 -0.098,-0.204 -0.222,-0.204c-0.15,0 -0.235,0.107 -0.228,0.251l0.085,-0Z" fill-rule="nonzero" transform="matrix(12,0,0,12,154.499,213.245)"/><path d="M0.419,-0.709l-0.068,0l-0.323,0.461l0,0.082l0.311,-0l0,0.166l0.08,-0l-0,-0.166l0.096,-0l-0,-0.075l-0.096,0l-0,-0.468Zm-0.318,0.468l0.236,-0.347l0.002,0l0,0.347l-0.238,0Z" fill-rule="nonzero" transform="matrix(12,0,0,12,161.171,213.245)"/><path d="M0.467,-0.263c0,0.101 -0.039,0.2 -0.155,0.2c-0.117,0 -0.163,-0.094 -0.163,-0.196c-0,-0.097 0.044,-0.195 0.158,-0.195c0.11,-0 0.16,0.094 0.16,0.191Zm-0.4,0.461l0.085,-0l-0,-0.267l0.002,0c0.038,0.061 0.114,0.081 0.167,0.081c0.158,-0 0.236,-0.123 0.236,-0.269c-0,-0.146 -0.079,-0.272 -0.238,-0.272c-0.071,0 -0.137,0.025 -0.165,0.082l-0.002,-0l-0,-0.07l-0.085,0l0,0.715Z" fill-rule="nonzero" transform="matrix(12,0,0,12,167.843,213.245)"/><path d="M0.009,-0l0.103,-0l0.144,-0.215l0.144,0.215l0.109,-0l-0.2,-0.28l0.178,-0.237l-0.102,0l-0.129,0.18l-0.124,-0.18l-0.109,0l0.18,0.245l-0.194,0.272Z" fill-rule="nonzero" transform="matrix(12,0,0,12,174.959,213.245)"/><path d="M0.069,-0l0.085,-0l-0,-0.517l-0.085,0l0,0.517Zm0.085,-0.714l-0.085,0l0,0.104l0.085,-0l-0,-0.104Z" fill="#ac2020" fill-rule="nonzero" transform="matrix(12,0,0,12,184.511,213.245)"/><path d="M0.064,-0l0.085,-0l-0,-0.292c-0,-0.093 0.05,-0.162 0.153,-0.162c0.065,-0 0.105,0.041 0.105,0.104l0,0.35l0.085,-0l-0,-0.34c-0,-0.111 -0.042,-0.189 -0.178,-0.189c-0.074,0 -0.132,0.03 -0.168,0.094l-0.002,-0l-0,-0.082l-0.08,0l0,0.517Z" fill="#ac2020" fill-rule="nonzero" transform="matrix(12,0,0,12,187.175,213.245)"/><path d="M0.182,-0.672l-0.085,0l0,0.155l-0.088,0l0,0.075l0.088,-0l0,0.329c0,0.095 0.035,0.113 0.123,0.113l0.065,-0l-0,-0.075l-0.039,0c-0.053,0 -0.064,-0.007 -0.064,-0.046l-0,-0.321l0.103,-0l-0,-0.075l-0.103,0l-0,-0.155Z" fill="#ac2020" fill-rule="nonzero" transform="matrix(12,0,0,12,193.847,213.245)"/><path d="M0.421,-0.164c-0.015,0.067 -0.064,0.101 -0.134,0.101c-0.113,0 -0.164,-0.08 -0.161,-0.17l0.387,-0c0.005,-0.125 -0.051,-0.296 -0.234,-0.296c-0.141,0 -0.243,0.114 -0.243,0.269c0.005,0.158 0.083,0.272 0.248,0.272c0.116,-0 0.198,-0.062 0.221,-0.176l-0.084,-0Zm-0.295,-0.144c0.006,-0.079 0.059,-0.146 0.148,-0.146c0.084,-0 0.145,0.065 0.149,0.146l-0.297,0Z" fill="#ac2020" fill-rule="nonzero" transform="matrix(12,0,0,12,197.627,213.245)"/><path d="M0.061,-0l0.085,-0l-0,-0.23c-0,-0.131 0.05,-0.209 0.187,-0.209l-0,-0.09c-0.092,-0.003 -0.149,0.038 -0.19,0.121l-0.002,-0l-0,-0.109l-0.08,0l0,0.517Z" fill="#ac2020" fill-rule="nonzero" transform="matrix(12,0,0,12,204.071,213.245)"/><path d="M0.031,-0.163c0.005,0.128 0.103,0.175 0.219,0.175c0.105,-0 0.22,-0.04 0.22,-0.163c-0,-0.1 -0.084,-0.128 -0.169,-0.147c-0.079,-0.019 -0.169,-0.029 -0.169,-0.09c-0,-0.052 0.059,-0.066 0.11,-0.066c0.056,-0 0.114,0.021 0.12,0.087l0.085,-0c-0.007,-0.126 -0.098,-0.162 -0.212,-0.162c-0.09,0 -0.193,0.043 -0.193,0.147c0,0.099 0.085,0.127 0.169,0.146c0.085,0.019 0.169,0.03 0.169,0.096c0,0.065 -0.072,0.077 -0.125,0.077c-0.07,0 -0.136,-0.024 -0.139,-0.1l-0.085,0Z" fill="#ac2020" fill-rule="nonzero" transform="matrix(12,0,0,12,208.067,213.245)"/><path d="M0.421,-0.164c-0.015,0.067 -0.064,0.101 -0.134,0.101c-0.113,0 -0.164,-0.08 -0.161,-0.17l0.387,-0c0.005,-0.125 -0.051,-0.296 -0.234,-0.296c-0.141,0 -0.243,0.114 -0.243,0.269c0.005,0.158 0.083,0.272 0.248,0.272c0.116,-0 0.198,-0.062 0.221,-0.176l-0.084,-0Zm-0.295,-0.144c0.006,-0.079 0.059,-0.146 0.148,-0.146c0.084,-0 0.145,0.065 0.149,0.146l-0.297,0Z" fill="#ac2020" fill-rule="nonzero" transform="matrix(12,0,0,12,214.067,213.245)"/><path d="M0.503,-0.351c-0.012,-0.123 -0.106,-0.178 -0.223,-0.178c-0.164,0 -0.244,0.122 -0.244,0.277c0,0.154 0.084,0.264 0.242,0.264c0.13,-0 0.209,-0.075 0.228,-0.201l-0.087,0c-0.011,0.078 -0.06,0.126 -0.142,0.126c-0.108,0 -0.151,-0.094 -0.151,-0.189c-0,-0.105 0.038,-0.202 0.161,-0.202c0.07,-0 0.115,0.038 0.128,0.103l0.088,-0Z" fill="#ac2020" fill-rule="nonzero" transform="matrix(12,0,0,12,220.511,213.245)"/><path d="M0.182,-0.672l-0.085,0l0,0.155l-0.088,0l0,0.075l0.088,-0l0,0.329c0,0.095 0.035,0.113 0.123,0.113l0.065,-0l-0,-0.075l-0.039,0c-0.053,0 -0.064,-0.007 -0.064,-0.046l-0,-0.321l0.103,-0l-0,-0.075l-0.103,0l-0,-0.155Z" fill="#ac2020" fill-rule="nonzero" transform="matrix(12,0,0,12,226.955,213.245)"/><path d="M0.031,-0.163c0.005,0.128 0.103,0.175 0.219,0.175c0.105,-0 0.22,-0.04 0.22,-0.163c-0,-0.1 -0.084,-0.128 -0.169,-0.147c-0.079,-0.019 -0.169,-0.029 -0.169,-0.09c-0,-0.052 0.059,-0.066 0.11,-0.066c0.056,-0 0.114,0.021 0.12,0.087l0.085,-0c-0.007,-0.126 -0.098,-0.162 -0.212,-0.162c-0.09,0 -0.193,0.043 -0.193,0.147c0,0.099 0.085,0.127 0.169,0.146c0.085,0.019 0.169,0.03 0.169,0.096c0,0.065 -0.072,0.077 -0.125,0.077c-0.07,0 -0.136,-0.024 -0.139,-0.1l-0.085,0Z" fill="#ac2020" fill-rule="nonzero" transform="matrix(12,0,0,12,230.735,213.245)"/><path d="M0.182,-0.672l-0.085,0l0,0.155l-0.088,0l0,0.075l0.088,-0l0,0.329c0,0.095 0.035,0.113 0.123,0.113l0.065,-0l-0,-0.075l-0.039,0c-0.053,0 -0.064,-0.007 -0.064,-0.046l-0,-0.321l0.103,-0l-0,-0.075l-0.103,0l-0,-0.155Z" fill="#ac2020" fill-rule="nonzero" transform="matrix(12,0,0,12,240.071,213.245)"/><path d="M0.384,-0.18c0,0.047 -0.046,0.117 -0.158,0.117c-0.052,0 -0.1,-0.02 -0.1,-0.076c-0,-0.063 0.048,-0.083 0.104,-0.093c0.057,-0.01 0.121,-0.011 0.154,-0.035l0,0.087Zm0.138,0.112c-0.011,0.004 -0.019,0.005 -0.026,0.005c-0.027,0 -0.027,-0.018 -0.027,-0.058l-0,-0.266c-0,-0.121 -0.101,-0.142 -0.194,-0.142c-0.115,0 -0.214,0.045 -0.219,0.173l0.085,-0c0.004,-0.076 0.057,-0.098 0.129,-0.098c0.054,-0 0.115,0.012 0.115,0.086c0,0.064 -0.08,0.058 -0.174,0.076c-0.088,0.017 -0.175,0.042 -0.175,0.159c0,0.103 0.077,0.145 0.171,0.145c0.072,-0 0.135,-0.025 0.182,-0.08c0,0.056 0.028,0.08 0.072,0.08c0.027,-0 0.046,-0.005 0.061,-0.014l-0,-0.066Z" fill="#ac2020" fill-rule="nonzero" transform="matrix(12,0,0,12,243.851,213.245)"/><path d="M0.061,-0l0.085,-0l-0,-0.23c-0,-0.131 0.05,-0.209 0.187,-0.209l-0,-0.09c-0.092,-0.003 -0.149,0.038 -0.19,0.121l-0.002,-0l-0,-0.109l-0.08,0l0,0.517Z" fill="#ac2020" fill-rule="nonzero" transform="matrix(12,0,0,12,250.295,213.245)"/><path d="M0.272,-0.069c-0.112,0 -0.146,-0.104 -0.146,-0.197c-0,-0.099 0.044,-0.188 0.153,-0.188c0.107,-0 0.147,0.094 0.147,0.185c0,0.097 -0.042,0.2 -0.154,0.2Zm0.238,-0.448l-0.08,0l0,0.074l-0.001,-0c-0.031,-0.057 -0.089,-0.086 -0.154,-0.086c-0.179,0 -0.239,0.151 -0.239,0.273c0,0.141 0.077,0.262 0.231,0.262c0.065,-0 0.133,-0.031 0.161,-0.094l0.002,0l0,0.034c0,0.116 -0.044,0.196 -0.155,0.196c-0.056,0 -0.13,-0.022 -0.134,-0.084l-0.085,-0c0.005,0.113 0.117,0.152 0.214,0.152c0.163,-0 0.24,-0.086 0.24,-0.254l-0,-0.473Z" fill="#ac2020" fill-rule="nonzero" transform="matrix(12,0,0,12,253.955,213.245)"/><path d="M0.421,-0.164c-0.015,0.067 -0.064,0.101 -0.134,0.101c-0.113,0 -0.164,-0.08 -0.161,-0.17l0.387,-0c0.005,-0.125 -0.051,-0.296 -0.234,-0.296c-0.141,0 -0.243,0.114 -0.243,0.269c0.005,0.158 0.083,0.272 0.248,0.272c0.116,-0 0.198,-0.062 0.221,-0.176l-0.084,-0Zm-0.295,-0.144c0.006,-0.079 0.059,-0.146 0.148,-0.146c0.084,-0 0.145,0.065 0.149,0.146l-0.297,0Z" fill="#ac2020" fill-rule="nonzero" transform="matrix(12,0,0,12,260.843,213.245)"/><path d="M0.182,-0.672l-0.085,0l0,0.155l-0.088,0l0,0.075l0.088,-0l0,0.329c0,0.095 0.035,0.113 0.123,0.113l0.065,-0l-0,-0.075l-0.039,0c-0.053,0 -0.064,-0.007 -0.064,-0.046l-0,-0.321l0.103,-0l-0,-0.075l-0.103,0l-0,-0.155Z" fill="#ac2020" fill-rule="nonzero" transform="matrix(12,0,0,12,267.287,213.245)"/><rect x="184.511" y="214.145" width="86.556" height="0.6" fill="#ac2020"/></g><circle cx="351" cy="51" r="12" fill="#ca2626" fill-opacity=".2"/><path d="M351,39c6.623,0 12,5.377 12,12c-0,6.623 -5.377,12 -12,12c-6.623,-0 -12,-5.377 -12,-12c-0,-6.623 5.377,-12 12,-12Zm-0,1c-6.071,0 -11,4.929 -11,11c-0,6.071 4.929,11 11,11c6.071,-0 11,-4.929 11,-11c-0,-6.071 -4.929,-11 -11,-11Z" fill="#ca2626"/><path d="M149.5,198.5l-8,-0" fill="none" stroke="#000" stroke-width="1px" stroke-miterlimit="10"/><path d="M149.5,213.5l-8,-0" fill="none" stroke="#000" stroke-width="1px" stroke-miterlimit="10"/><path d="M145.5,198.5l-0,15" fill="none" stroke="#000" stroke-width="1px"/><path d="M156.595,201.269l-0.779,0c-0.227,1.284 -1.283,1.596 -2.447,1.596l-0,0.815l2.208,-0l-0,6.096l1.018,-0l0,-8.507Z" fill-rule="nonzero"/><path d="M162.428,205.204c1.165,-0 1.717,0.876 1.717,1.932c-0,1.009 -0.612,1.885 -1.717,1.885c-1.116,0 -1.765,-0.84 -1.765,-1.897c0,-1.068 0.625,-1.92 1.765,-1.92Zm2.555,-1.764c-0.12,-1.38 -0.994,-2.171 -2.399,-2.171c-2.424,0 -3.131,2.22 -3.131,4.559c-0,1.789 0.407,4.092 2.927,4.092c2.148,-0 2.843,-1.619 2.843,-2.856c0,-1.572 -0.97,-2.759 -2.603,-2.759c-0.924,0 -1.645,0.336 -2.125,1.115l-0.024,-0.024c0.048,-1.307 0.324,-3.228 2.065,-3.228c0.804,-0 1.333,0.504 1.429,1.272l1.018,0Z" fill-rule="nonzero"/><path d="M171.273,206.62c-0,1.213 -0.468,2.401 -1.861,2.401c-1.405,0 -1.957,-1.128 -1.957,-2.353c0,-1.164 0.528,-2.34 1.897,-2.34c1.321,-0 1.921,1.128 1.921,2.292Zm-4.8,5.532l1.018,-0l0,-3.203l0.024,0c0.456,0.731 1.369,0.971 2.005,0.971c1.897,-0 2.831,-1.475 2.831,-3.228c0,-1.752 -0.946,-3.263 -2.855,-3.263c-0.852,0 -1.645,0.3 -1.981,0.983l-0.024,-0l0,-0.839l-1.018,0l-0,8.579Z" fill-rule="nonzero"/><path d="M172.893,209.776l1.235,-0l1.728,-2.578l1.728,2.578l1.307,-0l-2.399,-3.36l2.135,-2.843l-1.223,0l-1.548,2.162l-1.488,-2.162l-1.307,0l2.159,2.939l-2.327,3.264Z" fill-rule="nonzero"/><path d="M113.215,184.061l-0.815,-0l-3.876,5.532l0,0.982l3.732,0l0,1.992l0.959,0l-0,-1.992l1.152,0l-0,-0.898l-1.152,-0l-0,-5.616Zm-3.815,5.616l2.832,-4.164l0.024,-0l0,4.164l-2.856,-0Z" fill-rule="nonzero"/><path d="M120.464,189.412c0,1.212 -0.468,2.401 -1.861,2.401c-1.404,-0 -1.956,-1.129 -1.956,-2.353c-0,-1.164 0.528,-2.341 1.896,-2.341c1.321,0 1.921,1.129 1.921,2.293Zm-4.8,5.531l1.019,0l-0,-3.202l0.024,-0c0.456,0.731 1.368,0.97 2.004,0.97c1.897,0 2.832,-1.474 2.832,-3.227c-0,-1.753 -0.947,-3.263 -2.856,-3.263c-0.852,-0 -1.644,0.299 -1.98,0.982l-0.024,0l-0,-0.838l-1.019,-0l0,8.578Z" fill-rule="nonzero"/><path d="M122.084,192.567l1.236,0l1.727,-2.577l1.728,2.577l1.308,0l-2.4,-3.36l2.136,-2.842l-1.224,-0l-1.548,2.161l-1.487,-2.161l-1.308,-0l2.16,2.938l-2.328,3.264Z" fill-rule="nonzero"/><path d="M159.141,248.779l4.398,-0l-0,-4.32l2.601,-0c3.28,-0 5.599,-1.619 5.599,-5.079c-0,-2.041 -1.359,-4.879 -5.238,-4.879l-7.36,0l0,14.278Zm4.398,-10.62l1.961,-0c1.081,-0 2.081,0.08 2.081,1.381c0,1.441 -1.2,1.521 -2.341,1.521l-1.701,0l-0,-2.902Z" fill="#196721" fill-rule="nonzero"/><path d="M176.46,243.681l1.38,-4.4l0.04,0l1.28,4.4l-2.7,0Zm-6.019,5.098l4.42,-0l0.639,-2.04l4.54,-0l0.6,2.04l4.559,-0l-5.199,-14.278l-4.3,0l-5.259,14.278Z" fill="#196721" fill-rule="nonzero"/><path d="M185.281,243.981c0.04,4.558 4.658,5.138 6.279,5.138c3.181,-0 6.599,-1.199 6.599,-4.918c-0,-2.621 -1.999,-3.562 -4.018,-4.122c-2.021,-0.56 -4.062,-0.78 -4.142,-1.8c-0,-0.8 0.98,-0.96 1.581,-0.96c0.44,-0 0.941,0.1 1.301,0.36c0.36,0.24 0.6,0.6 0.52,1.14l4.158,-0c-0.12,-3.478 -2.859,-4.658 -5.959,-4.658c-2.94,0 -5.759,1.419 -5.759,4.718c0,2.881 2.579,3.501 4.838,4.141c2.462,0.7 3.082,0.901 3.082,1.641c0,1.06 -1.1,1.3 -1.821,1.3c-0.82,0 -1.781,-0.18 -2.101,-1.04c-0.1,-0.26 -0.16,-0.58 -0.16,-0.94l-4.398,-0Z" fill="#196721" fill-rule="nonzero"/><path d="M198.621,243.981c0.04,4.558 4.658,5.138 6.279,5.138c3.181,-0 6.599,-1.199 6.599,-4.918c-0,-2.621 -1.999,-3.562 -4.018,-4.122c-2.021,-0.56 -4.062,-0.78 -4.142,-1.8c-0,-0.8 0.98,-0.96 1.581,-0.96c0.44,-0 0.941,0.1 1.301,0.36c0.36,0.24 0.6,0.6 0.52,1.14l4.158,-0c-0.12,-3.478 -2.859,-4.658 -5.959,-4.658c-2.94,0 -5.759,1.419 -5.759,4.718c0,2.881 2.579,3.501 4.838,4.141c2.462,0.7 3.082,0.901 3.082,1.641c0,1.06 -1.1,1.3 -1.821,1.3c-0.82,0 -1.781,-0.18 -2.101,-1.04c-0.1,-0.26 -0.16,-0.58 -0.16,-0.94l-4.398,-0Z" fill="#196721" fill-rule="nonzero"/><path d="M126.062,208.5c1.886,0 3.438,-1.552 3.438,-3.437c-0,-1.886 -1.552,-3.438 -3.438,-3.438c-1.885,0 -3.437,1.552 -3.437,3.438c-0,1.885 1.552,3.437 3.437,3.437Zm4.063,-3.437c0,2.228 -1.834,4.062 -4.063,4.062c-2.228,-0 -4.062,-1.834 -4.062,-4.062c-0,-2.229 1.834,-4.063 4.062,-4.063c2.229,0 4.063,1.834 4.063,4.063Z"/><path d="M128.465,208.339c0.019,0.025 0.039,0.049 0.061,0.072l2.407,2.406c0.117,0.117 0.276,0.183 0.442,0.183c0.343,0 0.625,-0.282 0.625,-0.625c-0,-0.166 -0.066,-0.325 -0.183,-0.442l-2.406,-2.406c-0.023,-0.023 -0.047,-0.044 -0.072,-0.063c-0.245,0.335 -0.54,0.63 -0.874,0.875l-0,-0Z" fill-rule="nonzero"/><path d="M126.062,202.875c0.172,0 0.313,0.141 0.313,0.313l-0,1.562l1.562,0c0.172,0 0.313,0.141 0.313,0.313c-0,0.171 -0.141,0.312 -0.313,0.312l-1.562,0l-0,1.563c-0,0.171 -0.141,0.312 -0.313,0.312c-0.171,0 -0.312,-0.141 -0.312,-0.312l-0,-1.563l-1.563,0c-0.171,0 -0.312,-0.141 -0.312,-0.312c-0,-0.172 0.141,-0.313 0.312,-0.313l1.563,0l-0,-1.562c-0,-0.172 0.141,-0.313 0.312,-0.313Z"/><path d="M61.004,243c-0,1.646 -1.354,3 -3,3c-1.646,-0 -3,-1.354 -3,-3c-0,-1.646 1.354,-3 3,-3c1.646,-0 3,1.354 3,3Z" fill="gray" fill-rule="nonzero"/><path d="M52,236c-1.646,-0 -3,1.354 -3,3l-0,18c-0,1.646 1.354,3 3,3l26,-0c1.646,-0 3,-1.354 3,-3l-0,-18c-0,-1.646 -1.354,-3 -3,-3l-26,-0Zm26,2c0.549,-0 1,0.451 1,1l-0,12l-7.55,-3.894c-0.384,-0.192 -0.85,-0.117 -1.154,0.186l-7.42,7.42l-5.32,-3.544c-0.395,-0.263 -0.924,-0.211 -1.26,0.124l-5.292,4.708l-0,1.08c-0.002,-0.027 -0.004,-0.053 -0.004,-0.08l-0,-18c-0,-0.549 0.451,-1 1,-1l26,-0Z" fill="gray" fill-rule="nonzero"/><path d="M15,198l2,0l-0,1l-1,0l-1,0l-0,-1Zm100,100l-2,-0l0,-1l1,-0l1,-0l-0,1Zm-100,0l0,-2l1,0l0,1l0,1l-1,0Zm0,-98l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,-0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,-0l0,-1Zm0,2l1,-0l-0,1l-1,-0l0,-1Zm0,2l1,-0l-0,1l-1,0l0,-1Zm0,2l1,-0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,-0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm2,4l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2.001,-0l-0,-1l0.999,0l0,1l-0.999,-0Zm1.999,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2.001,-0l-0,-1l1,0l-0,1l-1,-0Zm2,-0l-0,-1l1,0l-0,1l-1,-0Zm1.999,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm4,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1.001l1,0l-0,1.001Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2.001l-1,0l-0,-1l1,0l-0,1Zm-0,-2l-1,0l-0,-1l1,0l-0,1Zm-0,-2l-1,0l-0,-1l1,0l-0,1Zm-0,-2l-1,0l-0,-1l1,0l-0,1Zm-0,-2l-1,0l-0,-1l1,0l-0,1Zm-0,-2l-1,0l-0,-1l1,0l-0,1Zm-0,-2l-1,0l-0,-1l1,0l-0,1Zm-0,-2l-1,0l-0,-1l1,0l-0,1Zm-0,-1.999l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2.001l-1,0l-0,-1l1,0l-0,1Zm-0,-2l-1,0l-0,-1l1,0l-0,1Zm-0,-2l-1,0l-0,-1l1,0l-0,1Zm-0,-2l-1,0l-0,-1l1,0l-0,1Zm-0,-2l-1,0l-0,-1l1,0l-0,1Zm-0,-2l-1,0l-0,-1l1,0l-0,1Zm-0,-2l-1,0l-0,-1.999l1,0l-0,1.999Zm-2,-1.999l-0,1l-1,0l0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l0,1l-1,0l0,-1l1,0Zm-2,0l-0,1l-1,0l0,-1l1,0Zm-2,0l0,1l-1,0l0,-1l1,0Zm-2,0l0,1l-1,0l-0,-1l1,0Zm-2,0l0,1l-1,0l0,-1l1,0Zm-2,0l0,1l-1,0l0,-1l1,0Zm-2,0l0,1l-1,0l0,-1l1,0Zm-2,0l0,1l-1,0l0,-1l1,0Zm-2,0l0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l0,1l-1,0l-0,-1l1,0Zm-2,0l0,1l-1,0l0,-1l1,0Zm-2,0l0,1l-1,0l0,-1l1,0Zm-2,0l0,1l-1,0l0,-1l1,0Zm-2,0l0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Z" fill="#6a6bd3"/><path d="M119,200l0,-2l1,0l0,1l-0,1l-1,-0Zm14,-2l2,0l-0,1l-1,0l-1,0l-0,-1Zm2,14l-0,2l-1,-0l-0,-1l-0,-1l1,0Zm-14,2l-2,-0l0,-1l1,-0l1,0l-0,1Zm-2,-13l1,-0l-0,1l-1,-0l0,-1Zm0,2l1,-0l-0,1l-1,-0l0,-1Zm0,2l1,-0l-0,1l-1,-0l0,-1Zm0,2l1,-0l-0,1l-1,-0l0,-1Zm0,2l1,-0l-0,1l-1,-0l0,-1Zm0,2l1,-0l-0,1l-1,-0l0,-1Zm3,3l-0,-1l1,0l-0,1l-1,-0Zm2,-0l-0,-1l1,0l-0,1l-1,-0Zm2,-0l-0,-1l1,0l-0,1l-1,-0Zm2,-0l-0,-1l1,0l-0,1l-1,-0Zm2,-0l-0,-1l1,0l-0,1l-1,-0Zm2,-0l-0,-1l1,0l-0,1l-1,-0Zm3,-3l-1,0l-0,-1l1,0l-0,1Zm-0,-2l-1,0l-0,-1l1,0l-0,1Zm-0,-2l-1,0l-0,-1l1,0l-0,1Zm-0,-2l-1,0l-0,-1l1,0l-0,1Zm-0,-2l-1,0l-0,-1l1,0l-0,1Zm-0,-2l-1,0l-0,-1l1,0l-0,1Zm-3,-3l-0,1l-1,0l-0,-1l1,0Zm-2,0l0,1l-1,0l0,-1l1,0Zm-2,0l0,1l-1,0l0,-1l1,0Zm-2,0l0,1l-1,0l0,-1l1,0Zm-2,0l0,1l-1,0l0,-1l1,0Zm-2,0l0,1l-1,0l0,-1l1,0Z" fill="#6a6bd3"/><path d="M355.062,208.5c1.886,0 3.438,-1.552 3.438,-3.437c-0,-1.886 -1.552,-3.438 -3.438,-3.438c-1.885,0 -3.437,1.552 -3.437,3.438c-0,1.885 1.552,3.437 3.437,3.437Zm4.063,-3.437c0,2.228 -1.834,4.062 -4.063,4.062c-2.228,-0 -4.062,-1.834 -4.062,-4.062c-0,-2.229 1.834,-4.063 4.062,-4.063c2.229,0 4.063,1.834 4.063,4.063Z"/><path d="M357.465,208.339c0.019,0.025 0.039,0.049 0.061,0.072l2.407,2.406c0.117,0.117 0.276,0.183 0.442,0.183c0.343,0 0.625,-0.282 0.625,-0.625c-0,-0.166 -0.066,-0.325 -0.183,-0.442l-2.406,-2.406c-0.023,-0.023 -0.047,-0.044 -0.072,-0.063c-0.245,0.335 -0.54,0.63 -0.874,0.875l-0,-0Z" fill-rule="nonzero"/><path d="M355.062,202.875c0.172,0 0.313,0.141 0.313,0.313l-0,1.562l1.562,0c0.172,0 0.313,0.141 0.313,0.313c-0,0.171 -0.141,0.312 -0.313,0.312l-1.562,0l-0,1.563c-0,0.171 -0.141,0.312 -0.313,0.312c-0.171,0 -0.312,-0.141 -0.312,-0.312l-0,-1.563l-1.563,0c-0.171,0 -0.312,-0.141 -0.312,-0.312c-0,-0.172 0.141,-0.313 0.312,-0.313l1.563,0l-0,-1.562c-0,-0.172 0.141,-0.313 0.312,-0.313Z"/><path d="M290.004,243c-0,1.646 -1.354,3 -3,3c-1.646,-0 -3,-1.354 -3,-3c-0,-1.646 1.354,-3 3,-3c1.646,-0 3,1.354 3,3Z" fill="gray" fill-rule="nonzero"/><path d="M281,236c-1.646,-0 -3,1.354 -3,3l-0,18c-0,1.646 1.354,3 3,3l26,-0c1.646,-0 3,-1.354 3,-3l-0,-18c-0,-1.646 -1.354,-3 -3,-3l-26,-0Zm26,2c0.549,-0 1,0.451 1,1l-0,12l-7.55,-3.894c-0.384,-0.192 -0.85,-0.117 -1.154,0.186l-7.42,7.42l-5.32,-3.544c-0.395,-0.263 -0.924,-0.211 -1.26,0.124l-5.292,4.708l-0,1.08c-0.002,-0.027 -0.004,-0.053 -0.004,-0.08l-0,-18c-0,-0.549 0.451,-1 1,-1l26,-0Z" fill="gray" fill-rule="nonzero"/><path d="M244,198l2,0l-0,1l-1,0l-1,0l-0,-1Zm100,100l-2,-0l0,-1l1,-0l1,-0l-0,1Zm-100,0l0,-2l1,0l0,1l0,1l-1,0Zm0,-98l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,-0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,-0l0,-1Zm0,2l1,-0l-0,1l-1,-0l0,-1Zm0,2l1,-0l-0,1l-1,0l0,-1Zm0,2l1,-0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,-0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm2,4l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2.001,-0l-0,-1l0.999,0l0,1l-0.999,-0Zm1.999,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2.001,-0l-0,-1l1,0l-0,1l-1,-0Zm2,-0l-0,-1l1,0l-0,1l-1,-0Zm1.999,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm4,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1.001l1,0l-0,1.001Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2.001l-1,0l-0,-1l1,0l-0,1Zm-0,-2l-1,0l-0,-1l1,0l-0,1Zm-0,-2l-1,0l-0,-1l1,0l-0,1Zm-0,-2l-1,0l-0,-1l1,0l-0,1Zm-0,-2l-1,0l-0,-1l1,0l-0,1Zm-0,-2l-1,0l-0,-1l1,0l-0,1Zm-0,-2l-1,0l-0,-1l1,0l-0,1Zm-0,-2l-1,0l-0,-1l1,0l-0,1Zm-0,-1.999l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2.001l-1,0l-0,-1l1,0l-0,1Zm-0,-2l-1,0l-0,-1l1,0l-0,1Zm-0,-2l-1,0l-0,-1l1,0l-0,1Zm-0,-2l-1,0l-0,-1l1,0l-0,1Zm-0,-2l-1,0l-0,-1l1,0l-0,1Zm-0,-2l-1,0l-0,-1l1,0l-0,1Zm-0,-2l-1,0l-0,-1.999l1,0l-0,1.999Zm-2,-1.999l-0,1l-1,0l0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l0,1l-1,0l0,-1l1,0Zm-2,0l-0,1l-1,0l0,-1l1,0Zm-2,0l0,1l-1,0l0,-1l1,0Zm-2,0l0,1l-1,0l-0,-1l1,0Zm-2,0l0,1l-1,0l0,-1l1,0Zm-2,0l0,1l-1,0l0,-1l1,0Zm-2,0l0,1l-1,0l0,-1l1,0Zm-2,0l0,1l-1,0l0,-1l1,0Zm-2,0l0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l0,1l-1,0l-0,-1l1,0Zm-2,0l0,1l-1,0l0,-1l1,0Zm-2,0l0,1l-1,0l0,-1l1,0Zm-2,0l0,1l-1,0l0,-1l1,0Zm-2,0l0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Z" fill="#6a6bd3"/><path d="M348,200l0,-2l1,0l0,1l-0,1l-1,-0Zm14,-2l2,0l-0,1l-1,0l-1,0l-0,-1Zm2,14l-0,2l-1,-0l-0,-1l-0,-1l1,0Zm-14,2l-2,-0l0,-1l1,-0l1,0l-0,1Zm-2,-13l1,-0l-0,1l-1,-0l0,-1Zm0,2l1,-0l-0,1l-1,-0l0,-1Zm0,2l1,-0l-0,1l-1,-0l0,-1Zm0,2l1,-0l-0,1l-1,-0l0,-1Zm0,2l1,-0l-0,1l-1,-0l0,-1Zm0,2l1,-0l-0,1l-1,-0l0,-1Zm3,3l-0,-1l1,0l-0,1l-1,-0Zm2,-0l-0,-1l1,0l-0,1l-1,-0Zm2,-0l-0,-1l1,0l-0,1l-1,-0Zm2,-0l-0,-1l1,0l-0,1l-1,-0Zm2,-0l-0,-1l1,0l-0,1l-1,-0Zm2,-0l-0,-1l1,0l-0,1l-1,-0Zm3,-3l-1,0l-0,-1l1,0l-0,1Zm-0,-2l-1,0l-0,-1l1,0l-0,1Zm-0,-2l-1,0l-0,-1l1,0l-0,1Zm-0,-2l-1,0l-0,-1l1,0l-0,1Zm-0,-2l-1,0l-0,-1l1,0l-0,1Zm-0,-2l-1,0l-0,-1l1,0l-0,1Zm-3,-3l-0,1l-1,0l-0,-1l1,0Zm-2,0l0,1l-1,0l0,-1l1,0Zm-2,0l0,1l-1,0l0,-1l1,0Zm-2,0l0,1l-1,0l0,-1l1,0Zm-2,0l0,1l-1,0l0,-1l1,0Zm-2,0l0,1l-1,0l0,-1l1,0Z" fill="#6a6bd3"/><path d="M344.5,184.5l-0,8" fill="none" stroke="#000" stroke-width="1px" stroke-miterlimit="10"/><path d="M367.5,184.5l-0,8" fill="none" stroke="#000" stroke-width="1px" stroke-miterlimit="10"/><path d="M344.5,188.5l23,0" fill="none" stroke="#000" stroke-width="1px"/><g transform="matrix(1,0,0,1,186.773,-32.6766)"><path d="M0.129,-0.458c-0.003,-0.085 0.039,-0.176 0.138,-0.176c0.075,-0 0.137,0.051 0.137,0.128c0,0.098 -0.061,0.142 -0.181,0.216c-0.1,0.062 -0.185,0.122 -0.199,0.29l0.463,-0l-0,-0.075l-0.364,0c0.017,-0.088 0.11,-0.133 0.199,-0.187c0.088,-0.055 0.172,-0.118 0.172,-0.243c-0,-0.132 -0.098,-0.204 -0.222,-0.204c-0.15,0 -0.235,0.107 -0.228,0.251l0.085,-0Z" fill="#196721" fill-rule="nonzero" transform="matrix(12,0,0,12,154.499,213.245)"/><path d="M0.419,-0.709l-0.068,0l-0.323,0.461l0,0.082l0.311,-0l0,0.166l0.08,-0l-0,-0.166l0.096,-0l-0,-0.075l-0.096,0l-0,-0.468Zm-0.318,0.468l0.236,-0.347l0.002,0l0,0.347l-0.238,0Z" fill="#196721" fill-rule="nonzero" transform="matrix(12,0,0,12,161.171,213.245)"/><path d="M0.467,-0.263c0,0.101 -0.039,0.2 -0.155,0.2c-0.117,0 -0.163,-0.094 -0.163,-0.196c-0,-0.097 0.044,-0.195 0.158,-0.195c0.11,-0 0.16,0.094 0.16,0.191Zm-0.4,0.461l0.085,-0l-0,-0.267l0.002,0c0.038,0.061 0.114,0.081 0.167,0.081c0.158,-0 0.236,-0.123 0.236,-0.269c-0,-0.146 -0.079,-0.272 -0.238,-0.272c-0.071,0 -0.137,0.025 -0.165,0.082l-0.002,-0l-0,-0.07l-0.085,0l0,0.715Z" fill="#196721" fill-rule="nonzero" transform="matrix(12,0,0,12,167.843,213.245)"/><path d="M0.009,-0l0.103,-0l0.144,-0.215l0.144,0.215l0.109,-0l-0.2,-0.28l0.178,-0.237l-0.102,0l-0.129,0.18l-0.124,-0.18l-0.109,0l0.18,0.245l-0.194,0.272Z" fill="#196721" fill-rule="nonzero" transform="matrix(12,0,0,12,174.959,213.245)"/><rect x="154.499" y="214.145" width="26.676" height="0.6" fill="#196721"/></g><circle cx="356" cy="206" r="12" fill="#196721" fill-opacity=".2"/><path d="M356,194c6.623,0 12,5.377 12,12c-0,6.623 -5.377,12 -12,12c-6.623,-0 -12,-5.377 -12,-12c-0,-6.623 5.377,-12 12,-12Zm-0,1c-6.071,0 -11,4.929 -11,11c-0,6.071 4.929,11 11,11c6.071,-0 11,-4.929 11,-11c-0,-6.071 -4.929,-11 -11,-11Z" fill="#196721"/></g></svg>
\ No newline at end of file
diff --git a/understanding/22/img/target-size-basic.afdesign b/understanding/22/img/target-size-basic.afdesign
new file mode 100644
index 0000000000..533abaf054
Binary files /dev/null and b/understanding/22/img/target-size-basic.afdesign differ
diff --git a/understanding/22/img/target-size-basic.png b/understanding/22/img/target-size-basic.png
new file mode 100644
index 0000000000..92dc95b80c
Binary files /dev/null and b/understanding/22/img/target-size-basic.png differ
diff --git a/understanding/22/img/target-size-basic.svg b/understanding/22/img/target-size-basic.svg
new file mode 100644
index 0000000000..274c2337ef
--- /dev/null
+++ b/understanding/22/img/target-size-basic.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 180 75" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" fill-rule="evenodd" clip-rule="evenodd" stroke-miterlimit="10"><rect width="180" height="75" fill="none"/><clipPath id="a"><rect width="180" height="75"/></clipPath><g clip-path="url(#a)"><rect x="-0" width="180" height="75" fill="#fff"/><path d="M48.5,18.707l-3,-3l-3,3" fill="none" stroke="#000" stroke-width="1px"/><path d="M48.5,35.293l-3,3l-3,-3" fill="none" stroke="#000" stroke-width="1px"/><path d="M45.5,15.707l0,22.586" fill="none" stroke="#000" stroke-width="1px" stroke-miterlimit="1"/><path d="M19.153,25.512c-0.027,-0.765 0.352,-1.584 1.243,-1.584c0.675,-0 1.234,0.459 1.234,1.152c-0,0.882 -0.55,1.278 -1.63,1.944c-0.9,0.559 -1.664,1.099 -1.79,2.61l4.166,-0l-0,-0.674l-3.276,-0c0.152,-0.792 0.99,-1.197 1.791,-1.683c0.792,-0.496 1.547,-1.063 1.547,-2.188c0,-1.188 -0.88,-1.835 -1.997,-1.835c-1.35,-0 -2.114,0.962 -2.051,2.258l0.763,0Z" fill-rule="nonzero"/><path d="M26.767,23.254l-0.611,-0l-2.906,4.149l-0,0.737l2.799,-0l-0,1.494l0.718,-0l0,-1.494l0.864,-0l0,-0.674l-0.864,-0l0,-4.212Zm-2.86,4.212l2.124,-3.123l0.018,-0l-0,3.123l-2.142,-0Z" fill-rule="nonzero"/><path d="M32.205,27.267c-0,0.91 -0.352,1.801 -1.396,1.801c-1.053,-0 -1.468,-0.846 -1.468,-1.765c0,-0.873 0.397,-1.755 1.423,-1.755c0.99,-0 1.441,0.846 1.441,1.719Zm-3.6,4.149l0.763,-0l0,-2.402l0.018,-0c0.343,0.548 1.027,0.728 1.504,0.728c1.422,-0 2.123,-1.106 2.123,-2.421c0,-1.314 -0.71,-2.447 -2.141,-2.447c-0.639,-0 -1.233,0.225 -1.486,0.737l-0.018,-0l0,-0.629l-0.763,-0l-0,6.434Z" fill-rule="nonzero"/><path d="M33.42,29.634l0.926,-0l1.296,-1.933l1.296,1.933l0.98,-0l-1.799,-2.52l1.602,-2.132l-0.918,-0l-1.161,1.621l-1.116,-1.621l-0.98,-0l1.619,2.204l-1.745,2.448Z" fill-rule="nonzero"/><path d="M58.157,58.304c-0.027,-0.765 0.351,-1.585 1.243,-1.585c0.675,0 1.233,0.46 1.233,1.153c0,0.882 -0.549,1.278 -1.63,1.944c-0.9,0.558 -1.664,1.098 -1.79,2.609l4.166,0l0,-0.673l-3.276,-0c0.153,-0.793 0.99,-1.198 1.792,-1.684c0.792,-0.495 1.547,-1.062 1.547,-2.187c-0,-1.189 -0.881,-1.835 -1.997,-1.835c-1.351,-0 -2.115,0.961 -2.052,2.258l0.764,-0Z" fill-rule="nonzero"/><path d="M65.771,56.046l-0.611,-0l-2.907,4.149l0,0.736l2.799,0l0,1.494l0.719,0l-0,-1.494l0.864,0l-0,-0.673l-0.864,-0l-0,-4.212Zm-2.861,4.212l2.124,-3.123l0.018,-0l0,3.123l-2.142,-0Z" fill-rule="nonzero"/><path d="M71.208,60.059c0,0.909 -0.351,1.801 -1.395,1.801c-1.054,-0 -1.468,-0.847 -1.468,-1.765c-0,-0.873 0.396,-1.756 1.422,-1.756c0.991,0 1.441,0.847 1.441,1.72Zm-3.6,4.148l0.764,0l-0,-2.401l0.018,-0c0.342,0.548 1.026,0.727 1.504,0.727c1.422,0 2.123,-1.106 2.123,-2.42c-0,-1.314 -0.71,-2.447 -2.141,-2.447c-0.64,-0 -1.234,0.224 -1.486,0.736l-0.018,0l-0,-0.628l-0.764,-0l0,6.433Z" fill-rule="nonzero"/><path d="M72.423,62.425l0.927,0l1.296,-1.932l1.295,1.932l0.981,0l-1.8,-2.52l1.602,-2.131l-0.918,-0l-1.16,1.621l-1.116,-1.621l-0.981,-0l1.62,2.203l-1.746,2.448Z" fill-rule="nonzero"/><path d="M82.157,58.304c-0.027,-0.765 0.351,-1.585 1.243,-1.585c0.675,0 1.233,0.46 1.233,1.153c0,0.882 -0.549,1.278 -1.63,1.944c-0.9,0.558 -1.664,1.098 -1.79,2.609l4.166,0l0,-0.673l-3.276,-0c0.153,-0.793 0.99,-1.198 1.792,-1.684c0.792,-0.495 1.547,-1.062 1.547,-2.187c-0,-1.189 -0.881,-1.835 -1.997,-1.835c-1.351,-0 -2.115,0.961 -2.052,2.258l0.764,-0Z" fill-rule="nonzero"/><path d="M89.771,56.046l-0.611,-0l-2.907,4.149l0,0.736l2.799,0l0,1.494l0.719,0l-0,-1.494l0.864,0l-0,-0.673l-0.864,-0l-0,-4.212Zm-2.861,4.212l2.124,-3.123l0.018,-0l0,3.123l-2.142,-0Z" fill-rule="nonzero"/><path d="M95.208,60.059c0,0.909 -0.351,1.801 -1.395,1.801c-1.054,-0 -1.468,-0.847 -1.468,-1.765c-0,-0.873 0.396,-1.756 1.422,-1.756c0.991,0 1.441,0.847 1.441,1.72Zm-3.6,4.148l0.764,0l-0,-2.401l0.018,-0c0.342,0.548 1.026,0.727 1.504,0.727c1.422,0 2.123,-1.106 2.123,-2.42c-0,-1.314 -0.71,-2.447 -2.141,-2.447c-0.64,-0 -1.234,0.224 -1.486,0.736l-0.018,0l-0,-0.628l-0.764,-0l0,6.433Z" fill-rule="nonzero"/><path d="M96.423,62.425l0.927,0l1.296,-1.932l1.295,1.932l0.981,0l-1.8,-2.52l1.602,-2.131l-0.918,-0l-1.16,1.621l-1.116,-1.621l-0.981,-0l1.62,2.203l-1.746,2.448Z" fill-rule="nonzero"/><path d="M106.157,58.304c-0.027,-0.765 0.351,-1.585 1.243,-1.585c0.675,0 1.233,0.46 1.233,1.153c0,0.882 -0.549,1.278 -1.63,1.944c-0.9,0.558 -1.664,1.098 -1.79,2.609l4.166,0l0,-0.673l-3.276,-0c0.153,-0.793 0.99,-1.198 1.792,-1.684c0.792,-0.495 1.547,-1.062 1.547,-2.187c-0,-1.189 -0.881,-1.835 -1.997,-1.835c-1.351,-0 -2.115,0.961 -2.052,2.258l0.764,-0Z" fill-rule="nonzero"/><path d="M113.771,56.046l-0.611,-0l-2.907,4.149l0,0.736l2.799,0l0,1.494l0.719,0l-0,-1.494l0.864,0l-0,-0.673l-0.864,-0l-0,-4.212Zm-2.861,4.212l2.124,-3.123l0.018,-0l0,3.123l-2.142,-0Z" fill-rule="nonzero"/><path d="M119.208,60.059c0,0.909 -0.351,1.801 -1.395,1.801c-1.054,-0 -1.468,-0.847 -1.468,-1.765c-0,-0.873 0.396,-1.756 1.422,-1.756c0.991,0 1.441,0.847 1.441,1.72Zm-3.6,4.148l0.764,0l-0,-2.401l0.018,-0c0.342,0.548 1.026,0.727 1.504,0.727c1.422,0 2.123,-1.106 2.123,-2.42c-0,-1.314 -0.71,-2.447 -2.141,-2.447c-0.64,-0 -1.234,0.224 -1.486,0.736l-0.018,0l-0,-0.628l-0.764,-0l0,6.433Z" fill-rule="nonzero"/><path d="M120.423,62.425l0.927,0l1.296,-1.932l1.295,1.932l0.981,0l-1.8,-2.52l1.602,-2.131l-0.918,-0l-1.16,1.621l-1.116,-1.621l-0.981,-0l1.62,2.203l-1.746,2.448Z" fill-rule="nonzero"/><path d="M58.707,46.5l-3,3l3,3" fill="none" stroke="#000" stroke-width="1px"/><path d="M75.293,46.5l3,3l-3,3" fill="none" stroke="#000" stroke-width="1px"/><path d="M55.707,49.5l22.586,-0" fill="none" stroke="#000" stroke-width="1px" stroke-miterlimit="1"/><path d="M82.707,46.5l-3,3l3,3" fill="none" stroke="#000" stroke-width="1px"/><path d="M99.293,46.5l3,3l-3,3" fill="none" stroke="#000" stroke-width="1px"/><path d="M79.707,49.5l22.586,-0" fill="none" stroke="#000" stroke-width="1px" stroke-miterlimit="1"/><path d="M106.707,46.5l-3,3l3,3" fill="none" stroke="#000" stroke-width="1px"/><path d="M123.293,46.5l3,3l-3,3" fill="none" stroke="#000" stroke-width="1px"/><path d="M103.707,49.5l22.586,-0" fill="none" stroke="#000" stroke-width="1px" stroke-miterlimit="1"/><rect x="55" y="15" width="24" height="24" fill="#e0e0ea"/><path d="M79,15l0,24l-24,0l0,-24l24,0Zm-1,1c0,0 -22,0 -22,-0c0,-0 0,22 -0,22c-0,0 22,0 22,0l0,-22Z" fill="#6a6bd3"/><rect x="79" y="15" width="24" height="24" fill="#e0e0ea"/><path d="M103,15l0,24l-24,0l0,-24l24,0Zm-1,1c0,0 -22,0 -22,-0c0,-0 0,22 -0,22c-0,0 22,0 22,0l0,-22Z" fill="#6a6bd3"/><rect x="103" y="15" width="24" height="24" fill="#e0e0ea"/><path d="M127,15l0,24l-24,0l0,-24l24,0Zm-1,1c0,0 -22,0 -22,-0c0,-0 0,22 -0,22c-0,0 22,0 22,0l-0,-22Z" fill="#6a6bd3"/></g></svg>
\ No newline at end of file
diff --git a/understanding/22/img/target-size-bounding-boxes.afdesign b/understanding/22/img/target-size-bounding-boxes.afdesign
new file mode 100644
index 0000000000..378e8214b6
Binary files /dev/null and b/understanding/22/img/target-size-bounding-boxes.afdesign differ
diff --git a/understanding/22/img/target-size-bounding-boxes.png b/understanding/22/img/target-size-bounding-boxes.png
new file mode 100644
index 0000000000..35f8b9aa51
Binary files /dev/null and b/understanding/22/img/target-size-bounding-boxes.png differ
diff --git a/understanding/22/img/target-size-bounding-boxes.svg b/understanding/22/img/target-size-bounding-boxes.svg
new file mode 100644
index 0000000000..9aca20ca03
--- /dev/null
+++ b/understanding/22/img/target-size-bounding-boxes.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 395 100" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" fill-rule="evenodd" clip-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="1.5"><rect width="395" height="100" fill="none"/><clipPath id="a"><rect width="395" height="100"/></clipPath><g clip-path="url(#a)"><rect x="-0" width="395" height="100" fill="#fff"/><rect x="43" y="27" width="18" height="18" fill="#d8d8d8" stroke="#8c8c8c" stroke-width="1px"/><path d="M52,24c6.623,0 12,5.377 12,12c-0,6.623 -5.377,12 -12,12c-6.623,0 -12,-5.377 -12,-12c-0,-6.623 5.377,-12 12,-12Zm-0,1c-6.071,0 -11,4.929 -11,11c-0,6.071 4.929,11 11,11c6.071,0 11,-4.929 11,-11c-0,-6.071 -4.929,-11 -11,-11Z" fill="#6a6bd3"/><path d="M43.5,52.5l-0,8" fill="none" stroke="#000" stroke-width="1px" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10"/><path d="M60.5,52.5l-0,8" fill="none" stroke="#000" stroke-width="1px" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10"/><path d="M43.5,56.5l17,-0" fill="none" stroke="#000" stroke-width="1px" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="1"/><path d="M43.123,63.061l-0.779,-0c-0.228,1.284 -1.284,1.596 -2.448,1.596l0,0.814l2.208,0l0,6.096l1.019,0l-0,-8.506Z" fill-rule="nonzero"/><path d="M47.083,69.168c-0,-0.984 0.792,-1.633 1.8,-1.633c0.961,0 1.753,0.697 1.753,1.621c0,0.948 -0.72,1.657 -1.741,1.657c-1.056,-0 -1.812,-0.625 -1.812,-1.645Zm-0.779,-3.937c0,0.768 0.479,1.476 1.187,1.764c-0.948,0.336 -1.487,1.117 -1.487,2.125c0,1.741 1.259,2.591 2.891,2.591c1.573,0 2.82,-0.946 2.82,-2.591c-0,-1.056 -0.492,-1.801 -1.511,-2.125c0.695,-0.312 1.175,-1.008 1.175,-1.764c-0,-1.08 -0.719,-2.17 -2.58,-2.17c-1.308,-0 -2.495,0.766 -2.495,2.17Zm1.079,0.037c-0,-0.853 0.672,-1.309 1.488,-1.309c0.829,0 1.429,0.456 1.429,1.309c0,0.864 -0.6,1.369 -1.405,1.369c-0.84,-0 -1.512,-0.432 -1.512,-1.369Z" fill-rule="nonzero"/><path d="M57.8,68.412c0,1.212 -0.468,2.401 -1.861,2.401c-1.404,-0 -1.956,-1.129 -1.956,-2.353c-0,-1.164 0.528,-2.341 1.896,-2.341c1.321,0 1.921,1.129 1.921,2.293Zm-4.8,5.531l1.019,0l-0,-3.202l0.024,-0c0.456,0.731 1.368,0.97 2.004,0.97c1.897,0 2.832,-1.474 2.832,-3.227c-0,-1.753 -0.947,-3.263 -2.856,-3.263c-0.852,-0 -1.644,0.299 -1.98,0.982l-0.024,0l-0,-0.838l-1.019,-0l0,8.578Z" fill-rule="nonzero"/><path d="M59.42,71.567l1.236,0l1.727,-2.577l1.728,2.577l1.308,0l-2.4,-3.36l2.136,-2.842l-1.224,-0l-1.548,2.161l-1.487,-2.161l-1.308,-0l2.16,2.938l-2.328,3.264Z" fill-rule="nonzero"/><path d="M78.5,24.5l-8,-0" fill="none" stroke="#3a3bc5" stroke-width="1px" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10"/><path d="M78.5,47.5l-8,-0" fill="none" stroke="#3a3bc5" stroke-width="1px" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10"/><path d="M74.5,24.5l-0,23" fill="none" stroke="#3a3bc5" stroke-width="1px" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="1"/><path d="M79.509,34.28c-0.036,-1.02 0.468,-2.112 1.657,-2.112c0.9,-0 1.645,0.612 1.645,1.536c-0,1.176 -0.733,1.704 -2.173,2.592c-1.201,0.745 -2.219,1.465 -2.387,3.48l5.554,-0l0,-0.899l-4.368,0c0.204,-1.056 1.321,-1.596 2.389,-2.244c1.057,-0.661 2.063,-1.417 2.063,-2.917c0,-1.584 -1.174,-2.447 -2.663,-2.447c-1.801,0 -2.819,1.283 -2.735,3.011l1.018,0Z" fill="#3a3bc5" fill-rule="nonzero"/><path d="M89.661,31.269l-0.815,0l-3.875,5.532l-0,0.983l3.732,-0l-0,1.992l0.958,-0l0,-1.992l1.152,-0l0,-0.899l-1.152,0l0,-5.616Zm-3.814,5.616l2.832,-4.164l0.024,0l-0,4.164l-2.856,0Z" fill="#3a3bc5" fill-rule="nonzero"/><path d="M96.911,36.62c-0,1.213 -0.469,2.401 -1.861,2.401c-1.405,0 -1.957,-1.128 -1.957,-2.353c0,-1.164 0.528,-2.34 1.897,-2.34c1.32,-0 1.921,1.128 1.921,2.292Zm-4.8,5.532l1.018,-0l0,-3.203l0.024,0c0.456,0.731 1.369,0.971 2.005,0.971c1.896,-0 2.831,-1.475 2.831,-3.228c0,-1.752 -0.947,-3.263 -2.855,-3.263c-0.852,0 -1.645,0.3 -1.981,0.983l-0.024,-0l0,-0.839l-1.018,0l-0,8.579Z" fill="#3a3bc5" fill-rule="nonzero"/><path d="M98.531,39.776l1.235,-0l1.728,-2.578l1.727,2.578l1.308,-0l-2.399,-3.36l2.135,-2.843l-1.223,0l-1.548,2.162l-1.488,-2.162l-1.307,0l2.159,2.939l-2.327,3.264Z" fill="#3a3bc5" fill-rule="nonzero"/><path d="M50,34l4,4" fill="none" stroke="#000" stroke-width="1px"/><path d="M50,38l4,-4" fill="none" stroke="#000" stroke-width="1px"/><path d="M171,23l25,10.4l-9,10.4l-19,5.2l3,-26Z" fill="#dadada" stroke="#8c8c8c" stroke-width="1px"/><g transform="matrix(1,0,0,1,-28.2266,-147.677)"><path d="M0.503,-0.351c-0.012,-0.123 -0.106,-0.178 -0.223,-0.178c-0.164,0 -0.244,0.122 -0.244,0.277c0,0.154 0.084,0.264 0.242,0.264c0.13,-0 0.209,-0.075 0.228,-0.201l-0.087,0c-0.011,0.078 -0.06,0.126 -0.142,0.126c-0.108,0 -0.151,-0.094 -0.151,-0.189c-0,-0.105 0.038,-0.202 0.161,-0.202c0.07,-0 0.115,0.038 0.128,0.103l0.088,-0Z" fill-rule="nonzero" transform="matrix(12,0,0,12,173.078,213.245)"/><path d="M0.036,-0.258c0,0.151 0.087,0.27 0.251,0.27c0.164,-0 0.251,-0.119 0.251,-0.27c-0,-0.152 -0.087,-0.271 -0.251,-0.271c-0.164,0 -0.251,0.119 -0.251,0.271Zm0.09,0c-0,-0.126 0.072,-0.196 0.161,-0.196c0.089,-0 0.161,0.07 0.161,0.196c0,0.125 -0.072,0.195 -0.161,0.195c-0.089,0 -0.161,-0.07 -0.161,-0.195Z" fill-rule="nonzero" transform="matrix(12,0,0,12,179.522,213.245)"/><path d="M0.064,-0l0.085,-0l-0,-0.292c-0,-0.093 0.05,-0.162 0.153,-0.162c0.065,-0 0.105,0.041 0.105,0.104l0,0.35l0.085,-0l-0,-0.34c-0,-0.111 -0.042,-0.189 -0.178,-0.189c-0.074,0 -0.132,0.03 -0.168,0.094l-0.002,-0l-0,-0.082l-0.08,0l0,0.517Z" fill-rule="nonzero" transform="matrix(12,0,0,12,186.41,213.245)"/><path d="M0.486,-0.517l-0.089,0l-0.141,0.431l-0.002,0l-0.145,-0.431l-0.095,0l0.192,0.517l0.091,-0l0.189,-0.517Z" fill-rule="nonzero" transform="matrix(12,0,0,12,193.082,213.245)"/><path d="M0.421,-0.164c-0.015,0.067 -0.064,0.101 -0.134,0.101c-0.113,0 -0.164,-0.08 -0.161,-0.17l0.387,-0c0.005,-0.125 -0.051,-0.296 -0.234,-0.296c-0.141,0 -0.243,0.114 -0.243,0.269c0.005,0.158 0.083,0.272 0.248,0.272c0.116,-0 0.198,-0.062 0.221,-0.176l-0.084,-0Zm-0.295,-0.144c0.006,-0.079 0.059,-0.146 0.148,-0.146c0.084,-0 0.145,0.065 0.149,0.146l-0.297,0Z" fill-rule="nonzero" transform="matrix(12,0,0,12,199.082,213.245)"/><path d="M0.009,-0l0.103,-0l0.144,-0.215l0.144,0.215l0.109,-0l-0.2,-0.28l0.178,-0.237l-0.102,0l-0.129,0.18l-0.124,-0.18l-0.109,0l0.18,0.245l-0.194,0.272Z" fill-rule="nonzero" transform="matrix(12,0,0,12,205.526,213.245)"/><path d="M0.031,-0.163c0.005,0.128 0.103,0.175 0.219,0.175c0.105,-0 0.22,-0.04 0.22,-0.163c-0,-0.1 -0.084,-0.128 -0.169,-0.147c-0.079,-0.019 -0.169,-0.029 -0.169,-0.09c-0,-0.052 0.059,-0.066 0.11,-0.066c0.056,-0 0.114,0.021 0.12,0.087l0.085,-0c-0.007,-0.126 -0.098,-0.162 -0.212,-0.162c-0.09,0 -0.193,0.043 -0.193,0.147c0,0.099 0.085,0.127 0.169,0.146c0.085,0.019 0.169,0.03 0.169,0.096c0,0.065 -0.072,0.077 -0.125,0.077c-0.07,0 -0.136,-0.024 -0.139,-0.1l-0.085,0Z" fill-rule="nonzero" transform="matrix(12,0,0,12,215.078,213.245)"/><path d="M0.064,-0l0.085,-0l-0,-0.292c-0,-0.093 0.05,-0.162 0.153,-0.162c0.065,-0 0.105,0.041 0.105,0.104l0,0.35l0.085,-0l-0,-0.34c-0,-0.111 -0.042,-0.189 -0.178,-0.189c-0.062,0 -0.135,0.026 -0.163,0.088l-0.002,-0l-0,-0.273l-0.085,0l0,0.714Z" fill-rule="nonzero" transform="matrix(12,0,0,12,221.078,213.245)"/><path d="M0.384,-0.18c0,0.047 -0.046,0.117 -0.158,0.117c-0.052,0 -0.1,-0.02 -0.1,-0.076c-0,-0.063 0.048,-0.083 0.104,-0.093c0.057,-0.01 0.121,-0.011 0.154,-0.035l0,0.087Zm0.138,0.112c-0.011,0.004 -0.019,0.005 -0.026,0.005c-0.027,0 -0.027,-0.018 -0.027,-0.058l-0,-0.266c-0,-0.121 -0.101,-0.142 -0.194,-0.142c-0.115,0 -0.214,0.045 -0.219,0.173l0.085,-0c0.004,-0.076 0.057,-0.098 0.129,-0.098c0.054,-0 0.115,0.012 0.115,0.086c0,0.064 -0.08,0.058 -0.174,0.076c-0.088,0.017 -0.175,0.042 -0.175,0.159c0,0.103 0.077,0.145 0.171,0.145c0.072,-0 0.135,-0.025 0.182,-0.08c0,0.056 0.028,0.08 0.072,0.08c0.027,-0 0.046,-0.005 0.061,-0.014l-0,-0.066Z" fill-rule="nonzero" transform="matrix(12,0,0,12,227.75,213.245)"/><path d="M0.467,-0.263c0,0.101 -0.039,0.2 -0.155,0.2c-0.117,0 -0.163,-0.094 -0.163,-0.196c-0,-0.097 0.044,-0.195 0.158,-0.195c0.11,-0 0.16,0.094 0.16,0.191Zm-0.4,0.461l0.085,-0l-0,-0.267l0.002,0c0.038,0.061 0.114,0.081 0.167,0.081c0.158,-0 0.236,-0.123 0.236,-0.269c-0,-0.146 -0.079,-0.272 -0.238,-0.272c-0.071,0 -0.137,0.025 -0.165,0.082l-0.002,-0l-0,-0.07l-0.085,0l0,0.715Z" fill-rule="nonzero" transform="matrix(12,0,0,12,234.194,213.245)"/><path d="M0.421,-0.164c-0.015,0.067 -0.064,0.101 -0.134,0.101c-0.113,0 -0.164,-0.08 -0.161,-0.17l0.387,-0c0.005,-0.125 -0.051,-0.296 -0.234,-0.296c-0.141,0 -0.243,0.114 -0.243,0.269c0.005,0.158 0.083,0.272 0.248,0.272c0.116,-0 0.198,-0.062 0.221,-0.176l-0.084,-0Zm-0.295,-0.144c0.006,-0.079 0.059,-0.146 0.148,-0.146c0.084,-0 0.145,0.065 0.149,0.146l-0.297,0Z" fill-rule="nonzero" transform="matrix(12,0,0,12,241.31,213.245)"/><path d="M0.741,-0.517l-0.088,0l-0.116,0.423l-0.002,0l-0.108,-0.423l-0.093,0l-0.104,0.423l-0.002,0l-0.117,-0.423l-0.094,0l0.166,0.517l0.092,-0l0.104,-0.411l0.002,-0l0.105,0.411l0.09,-0l0.165,-0.517Z" fill-rule="nonzero" transform="matrix(12,0,0,12,160.52,227.645)"/><path d="M0.069,-0l0.085,-0l-0,-0.517l-0.085,0l0,0.517Zm0.085,-0.714l-0.085,0l0,0.104l0.085,-0l-0,-0.104Z" fill-rule="nonzero" transform="matrix(12,0,0,12,169.616,227.645)"/><path d="M0.182,-0.672l-0.085,0l0,0.155l-0.088,0l0,0.075l0.088,-0l0,0.329c0,0.095 0.035,0.113 0.123,0.113l0.065,-0l-0,-0.075l-0.039,0c-0.053,0 -0.064,-0.007 -0.064,-0.046l-0,-0.321l0.103,-0l-0,-0.075l-0.103,0l-0,-0.155Z" fill-rule="nonzero" transform="matrix(12,0,0,12,172.28,227.645)"/><path d="M0.064,-0l0.085,-0l-0,-0.292c-0,-0.093 0.05,-0.162 0.153,-0.162c0.065,-0 0.105,0.041 0.105,0.104l0,0.35l0.085,-0l-0,-0.34c-0,-0.111 -0.042,-0.189 -0.178,-0.189c-0.062,0 -0.135,0.026 -0.163,0.088l-0.002,-0l-0,-0.273l-0.085,0l0,0.714Z" fill-rule="nonzero" transform="matrix(12,0,0,12,176.06,227.645)"/><path d="M0.467,-0.263c0,0.101 -0.039,0.2 -0.155,0.2c-0.117,0 -0.163,-0.094 -0.163,-0.196c-0,-0.097 0.044,-0.195 0.158,-0.195c0.11,-0 0.16,0.094 0.16,0.191Zm-0.4,0.263l0.085,-0l-0,-0.069l0.002,0c0.038,0.061 0.114,0.081 0.167,0.081c0.158,-0 0.236,-0.123 0.236,-0.269c-0,-0.146 -0.079,-0.272 -0.238,-0.272c-0.071,0 -0.137,0.025 -0.165,0.082l-0.002,-0l-0,-0.267l-0.085,0l0,0.714Z" fill-rule="nonzero" transform="matrix(12,0,0,12,186.068,227.645)"/><path d="M0.036,-0.258c0,0.151 0.087,0.27 0.251,0.27c0.164,-0 0.251,-0.119 0.251,-0.27c-0,-0.152 -0.087,-0.271 -0.251,-0.271c-0.164,0 -0.251,0.119 -0.251,0.271Zm0.09,0c-0,-0.126 0.072,-0.196 0.161,-0.196c0.089,-0 0.161,0.07 0.161,0.196c0,0.125 -0.072,0.195 -0.161,0.195c-0.089,0 -0.161,-0.07 -0.161,-0.195Z" fill-rule="nonzero" transform="matrix(12,0,0,12,193.184,227.645)"/><path d="M0.492,-0.517l-0.085,0l0,0.292c0,0.093 -0.05,0.162 -0.153,0.162c-0.065,0 -0.105,-0.041 -0.105,-0.104l-0,-0.35l-0.085,0l0,0.34c0,0.111 0.042,0.189 0.178,0.189c0.074,-0 0.132,-0.03 0.168,-0.094l0.002,0l0,0.082l0.08,-0l-0,-0.517Z" fill-rule="nonzero" transform="matrix(12,0,0,12,200.072,227.645)"/><path d="M0.064,-0l0.085,-0l-0,-0.292c-0,-0.093 0.05,-0.162 0.153,-0.162c0.065,-0 0.105,0.041 0.105,0.104l0,0.35l0.085,-0l-0,-0.34c-0,-0.111 -0.042,-0.189 -0.178,-0.189c-0.074,0 -0.132,0.03 -0.168,0.094l-0.002,-0l-0,-0.082l-0.08,0l0,0.517Z" fill-rule="nonzero" transform="matrix(12,0,0,12,206.744,227.645)"/><path d="M0.526,-0.714l-0.085,0l0,0.266l-0.002,-0c-0.038,-0.061 -0.114,-0.081 -0.167,-0.081c-0.158,0 -0.236,0.123 -0.236,0.269c0,0.146 0.079,0.272 0.238,0.272c0.071,-0 0.137,-0.025 0.165,-0.082l0.002,0l0,0.07l0.085,-0l-0,-0.714Zm-0.4,0.46c-0,-0.101 0.039,-0.2 0.155,-0.2c0.117,-0 0.163,0.094 0.163,0.196c0,0.097 -0.044,0.195 -0.158,0.195c-0.11,0 -0.16,-0.094 -0.16,-0.191Z" fill-rule="nonzero" transform="matrix(12,0,0,12,213.416,227.645)"/><path d="M0.069,-0l0.085,-0l-0,-0.517l-0.085,0l0,0.517Zm0.085,-0.714l-0.085,0l0,0.104l0.085,-0l-0,-0.104Z" fill-rule="nonzero" transform="matrix(12,0,0,12,220.532,227.645)"/><path d="M0.064,-0l0.085,-0l-0,-0.292c-0,-0.093 0.05,-0.162 0.153,-0.162c0.065,-0 0.105,0.041 0.105,0.104l0,0.35l0.085,-0l-0,-0.34c-0,-0.111 -0.042,-0.189 -0.178,-0.189c-0.074,0 -0.132,0.03 -0.168,0.094l-0.002,-0l-0,-0.082l-0.08,0l0,0.517Z" fill-rule="nonzero" transform="matrix(12,0,0,12,223.196,227.645)"/><path d="M0.272,-0.069c-0.112,0 -0.146,-0.104 -0.146,-0.197c-0,-0.099 0.044,-0.188 0.153,-0.188c0.107,-0 0.147,0.094 0.147,0.185c0,0.097 -0.042,0.2 -0.154,0.2Zm0.238,-0.448l-0.08,0l0,0.074l-0.001,-0c-0.031,-0.057 -0.089,-0.086 -0.154,-0.086c-0.179,0 -0.239,0.151 -0.239,0.273c0,0.141 0.077,0.262 0.231,0.262c0.065,-0 0.133,-0.031 0.161,-0.094l0.002,0l0,0.034c0,0.116 -0.044,0.196 -0.155,0.196c-0.056,0 -0.13,-0.022 -0.134,-0.084l-0.085,-0c0.005,0.113 0.117,0.152 0.214,0.152c0.163,-0 0.24,-0.086 0.24,-0.254l-0,-0.473Z" fill-rule="nonzero" transform="matrix(12,0,0,12,229.868,227.645)"/><path d="M0.467,-0.263c0,0.101 -0.039,0.2 -0.155,0.2c-0.117,0 -0.163,-0.094 -0.163,-0.196c-0,-0.097 0.044,-0.195 0.158,-0.195c0.11,-0 0.16,0.094 0.16,0.191Zm-0.4,0.263l0.085,-0l-0,-0.069l0.002,0c0.038,0.061 0.114,0.081 0.167,0.081c0.158,-0 0.236,-0.123 0.236,-0.269c-0,-0.146 -0.079,-0.272 -0.238,-0.272c-0.071,0 -0.137,0.025 -0.165,0.082l-0.002,-0l-0,-0.267l-0.085,0l0,0.714Z" fill-rule="nonzero" transform="matrix(12,0,0,12,240.092,227.645)"/><path d="M0.036,-0.258c0,0.151 0.087,0.27 0.251,0.27c0.164,-0 0.251,-0.119 0.251,-0.27c-0,-0.152 -0.087,-0.271 -0.251,-0.271c-0.164,0 -0.251,0.119 -0.251,0.271Zm0.09,0c-0,-0.126 0.072,-0.196 0.161,-0.196c0.089,-0 0.161,0.07 0.161,0.196c0,0.125 -0.072,0.195 -0.161,0.195c-0.089,0 -0.161,-0.07 -0.161,-0.195Z" fill-rule="nonzero" transform="matrix(12,0,0,12,247.208,227.645)"/><path d="M0.009,-0l0.103,-0l0.144,-0.215l0.144,0.215l0.109,-0l-0.2,-0.28l0.178,-0.237l-0.102,0l-0.129,0.18l-0.124,-0.18l-0.109,0l0.18,0.245l-0.194,0.272Z" fill-rule="nonzero" transform="matrix(12,0,0,12,254.096,227.645)"/></g><path d="M168,25l-1,-0l-0,-1l1,-0l0,1Zm0,-2l0,-1l1,0l0,1l-1,0Zm2,0l0,-1l1,0l0,1l-1,0Zm2,0l0,-1l1,0l0,1l-1,0Zm2,0l0,-1l1,0l0,1l-1,0Zm2,0l0,-1l1,0l0,1l-1,0Zm2,0l0,-1l1,0l0,1l-1,0Zm2,0l0,-1l1,0l0,1l-1,0Zm2,0l0,-1l1,0l0,1l-1,0Zm2,0l0,-1l1,0l0,1l-1,0Zm2,0l0,-1l1,0l0,1l-1,0Zm2,0l0,-1l1,0l-0,1l-1,0Zm2,0l0,-1l1,0l0,1l-1,0Zm2,0l0,-1l1,0l0,1l-1,0Zm2,0l0,-1l1,0l0,1l-1,0Zm2,0l1,0l-0,1l-1,0l-0,-1Zm-0,2l1,0l0,1l-1,0l-0,-1Zm-0,2l1,0l0,1l-1,0l-0,-1Zm-0,2l1,0l0,1l-1,0l-0,-1Zm-0,2l1,0l0,1l-1,0l-0,-1Zm-0,2l1,0l0,1l-1,0l-0,-1Zm-0,2l1,0l0,1l-1,0l-0,-1Zm-0,2l1,0l0,1l-1,0l-0,-1Zm-0,2l1,0l0,1l-1,0l-0,-1Zm-0,2l1,0l0,1l-1,0l-0,-1Zm-0,2l1,0l-0,1l-1,0l-0,-1Zm-0,2l1,0l-0,1l-1,0l-0,-1Zm-0,2l1,0l0,1l-1,0l-0,-1Zm-0,2l-0,1l-1,0l-0,-1l1,0Zm-2,-0l-0,1l-1,0l-0,-1l1,-0Zm-2,-0l-0,1l-1,0l-0,-1l1,-0Zm-2,-0l-0,1l-1,0l-0,-1l1,-0Zm-2,-0l-0,1l-1,-0l-0,-1l1,-0Zm-2,-0l-0,1l-1,0l-0,-1l1,-0Zm-2,-0l-0,1l-1,0l-0,-1l1,-0Zm-2,-0l-0,1l-1,-0l-0,-1l1,-0Zm-2,-0l-0,1l-1,0l-0,-1l1,-0Zm-2,-0l-0,1l-1,0l-0,-1l1,-0Zm-2,-0l-0,1l-1,0l0,-1l1,-0Zm-2,-0l-0,1l-1,0l-0,-1l1,-0Zm-2,-0l-0,1l-1,0l-0,-1l1,-0Zm-2,-0l-0,1l-1,0l-0,-1l1,-0Zm-2,-0l-1,-0l-0,-1l1,-0l-0,1Zm0,-2l-1,-0l-0,-1l1,-0l0,1Zm0,-2l-1,-0l-0,-1l1,-0l0,1Zm0,-2l-1,-0l-0,-1l1,-0l0,1Zm0,-2l-1,-0l-0,-1l1,-0l0,1Zm0,-2l-1,-0l-0,-1l1,-0l0,1Zm0,-2l-1,-0l-0,-1l1,-0l0,1Zm0,-2l-1,-0l-0,-1l1,-0l0,1Zm0,-2l-1,-0l-0,-1l1,-0l0,1Zm0,-2l-1,-0l-0,-1l1,-0l0,1Zm0,-2l-1,-0l-0,-1l1,-0l0,1Zm0,-2l-1,-0l-0,-1l1,-0l0,1Z" fill="#8c8c8c"/><path d="M182,24c6.623,0 12,5.377 12,12c-0,6.623 -5.377,12 -12,12c-6.623,0 -12,-5.377 -12,-12c-0,-6.623 5.377,-12 12,-12Zm-0,1c-6.071,0 -11,4.929 -11,11c-0,6.071 4.929,11 11,11c6.071,0 11,-4.929 11,-11c-0,-6.071 -4.929,-11 -11,-11Z" fill="#6a6bd3"/><path d="M208.5,24.5l-8,-0" fill="none" stroke="#3a3bc5" stroke-width="1px" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10"/><path d="M208.5,47.5l-8,-0" fill="none" stroke="#3a3bc5" stroke-width="1px" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10"/><path d="M204.5,24.5l-0,23" fill="none" stroke="#3a3bc5" stroke-width="1px" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="1"/><path d="M209.509,34.28c-0.036,-1.02 0.468,-2.112 1.657,-2.112c0.9,-0 1.645,0.612 1.645,1.536c-0,1.176 -0.733,1.704 -2.173,2.592c-1.201,0.745 -2.219,1.465 -2.387,3.48l5.554,-0l0,-0.899l-4.368,0c0.204,-1.056 1.321,-1.596 2.389,-2.244c1.057,-0.661 2.063,-1.417 2.063,-2.917c0,-1.584 -1.174,-2.447 -2.663,-2.447c-1.801,0 -2.819,1.283 -2.735,3.011l1.018,0Z" fill="#3a3bc5" fill-rule="nonzero"/><path d="M219.661,31.269l-0.815,0l-3.875,5.532l-0,0.983l3.732,-0l-0,1.992l0.958,-0l0,-1.992l1.152,-0l0,-0.899l-1.152,0l0,-5.616Zm-3.814,5.616l2.832,-4.164l0.024,0l-0,4.164l-2.856,0Z" fill="#3a3bc5" fill-rule="nonzero"/><path d="M226.911,36.62c-0,1.213 -0.469,2.401 -1.861,2.401c-1.405,0 -1.957,-1.128 -1.957,-2.353c0,-1.164 0.528,-2.34 1.897,-2.34c1.32,-0 1.921,1.128 1.921,2.292Zm-4.8,5.532l1.018,-0l0,-3.203l0.024,0c0.456,0.731 1.369,0.971 2.005,0.971c1.896,-0 2.831,-1.475 2.831,-3.228c0,-1.752 -0.947,-3.263 -2.855,-3.263c-0.852,0 -1.645,0.3 -1.981,0.983l-0.024,-0l0,-0.839l-1.018,0l-0,8.579Z" fill="#3a3bc5" fill-rule="nonzero"/><path d="M228.531,39.776l1.235,-0l1.728,-2.578l1.727,2.578l1.308,-0l-2.399,-3.36l2.135,-2.843l-1.223,0l-1.548,2.162l-1.488,-2.162l-1.307,0l2.159,2.939l-2.327,3.264Z" fill="#3a3bc5" fill-rule="nonzero"/><path d="M180,34l4,4" fill="none" stroke="#000" stroke-width="1px"/><path d="M180,38l4,-4" fill="none" stroke="#000" stroke-width="1px"/><path d="M309,23l15.187,5.904l1.813,19.496l-27,-5.4l22.654,-5.416l-12.654,-14.584Z" fill="#dadada" stroke="#8c8c8c" stroke-width="1px"/><g transform="matrix(1,0,0,1,101.773,-147.677)"><path d="M0.503,-0.351c-0.012,-0.123 -0.106,-0.178 -0.223,-0.178c-0.164,0 -0.244,0.122 -0.244,0.277c0,0.154 0.084,0.264 0.242,0.264c0.13,-0 0.209,-0.075 0.228,-0.201l-0.087,0c-0.011,0.078 -0.06,0.126 -0.142,0.126c-0.108,0 -0.151,-0.094 -0.151,-0.189c-0,-0.105 0.038,-0.202 0.161,-0.202c0.07,-0 0.115,0.038 0.128,0.103l0.088,-0Z" fill-rule="nonzero" transform="matrix(12,0,0,12,169.742,213.245)"/><path d="M0.036,-0.258c0,0.151 0.087,0.27 0.251,0.27c0.164,-0 0.251,-0.119 0.251,-0.27c-0,-0.152 -0.087,-0.271 -0.251,-0.271c-0.164,0 -0.251,0.119 -0.251,0.271Zm0.09,0c-0,-0.126 0.072,-0.196 0.161,-0.196c0.089,-0 0.161,0.07 0.161,0.196c0,0.125 -0.072,0.195 -0.161,0.195c-0.089,0 -0.161,-0.07 -0.161,-0.195Z" fill-rule="nonzero" transform="matrix(12,0,0,12,176.186,213.245)"/><path d="M0.064,-0l0.085,-0l-0,-0.292c-0,-0.093 0.05,-0.162 0.153,-0.162c0.065,-0 0.105,0.041 0.105,0.104l0,0.35l0.085,-0l-0,-0.34c-0,-0.111 -0.042,-0.189 -0.178,-0.189c-0.074,0 -0.132,0.03 -0.168,0.094l-0.002,-0l-0,-0.082l-0.08,0l0,0.517Z" fill-rule="nonzero" transform="matrix(12,0,0,12,183.074,213.245)"/><path d="M0.503,-0.351c-0.012,-0.123 -0.106,-0.178 -0.223,-0.178c-0.164,0 -0.244,0.122 -0.244,0.277c0,0.154 0.084,0.264 0.242,0.264c0.13,-0 0.209,-0.075 0.228,-0.201l-0.087,0c-0.011,0.078 -0.06,0.126 -0.142,0.126c-0.108,0 -0.151,-0.094 -0.151,-0.189c-0,-0.105 0.038,-0.202 0.161,-0.202c0.07,-0 0.115,0.038 0.128,0.103l0.088,-0Z" fill-rule="nonzero" transform="matrix(12,0,0,12,189.746,213.245)"/><path d="M0.384,-0.18c0,0.047 -0.046,0.117 -0.158,0.117c-0.052,0 -0.1,-0.02 -0.1,-0.076c-0,-0.063 0.048,-0.083 0.104,-0.093c0.057,-0.01 0.121,-0.011 0.154,-0.035l0,0.087Zm0.138,0.112c-0.011,0.004 -0.019,0.005 -0.026,0.005c-0.027,0 -0.027,-0.018 -0.027,-0.058l-0,-0.266c-0,-0.121 -0.101,-0.142 -0.194,-0.142c-0.115,0 -0.214,0.045 -0.219,0.173l0.085,-0c0.004,-0.076 0.057,-0.098 0.129,-0.098c0.054,-0 0.115,0.012 0.115,0.086c0,0.064 -0.08,0.058 -0.174,0.076c-0.088,0.017 -0.175,0.042 -0.175,0.159c0,0.103 0.077,0.145 0.171,0.145c0.072,-0 0.135,-0.025 0.182,-0.08c0,0.056 0.028,0.08 0.072,0.08c0.027,-0 0.046,-0.005 0.061,-0.014l-0,-0.066Z" fill-rule="nonzero" transform="matrix(12,0,0,12,196.19,213.245)"/><path d="M0.486,-0.517l-0.089,0l-0.141,0.431l-0.002,0l-0.145,-0.431l-0.095,0l0.192,0.517l0.091,-0l0.189,-0.517Z" fill-rule="nonzero" transform="matrix(12,0,0,12,202.634,213.245)"/><path d="M0.421,-0.164c-0.015,0.067 -0.064,0.101 -0.134,0.101c-0.113,0 -0.164,-0.08 -0.161,-0.17l0.387,-0c0.005,-0.125 -0.051,-0.296 -0.234,-0.296c-0.141,0 -0.243,0.114 -0.243,0.269c0.005,0.158 0.083,0.272 0.248,0.272c0.116,-0 0.198,-0.062 0.221,-0.176l-0.084,-0Zm-0.295,-0.144c0.006,-0.079 0.059,-0.146 0.148,-0.146c0.084,-0 0.145,0.065 0.149,0.146l-0.297,0Z" fill-rule="nonzero" transform="matrix(12,0,0,12,208.634,213.245)"/><path d="M0.031,-0.163c0.005,0.128 0.103,0.175 0.219,0.175c0.105,-0 0.22,-0.04 0.22,-0.163c-0,-0.1 -0.084,-0.128 -0.169,-0.147c-0.079,-0.019 -0.169,-0.029 -0.169,-0.09c-0,-0.052 0.059,-0.066 0.11,-0.066c0.056,-0 0.114,0.021 0.12,0.087l0.085,-0c-0.007,-0.126 -0.098,-0.162 -0.212,-0.162c-0.09,0 -0.193,0.043 -0.193,0.147c0,0.099 0.085,0.127 0.169,0.146c0.085,0.019 0.169,0.03 0.169,0.096c0,0.065 -0.072,0.077 -0.125,0.077c-0.07,0 -0.136,-0.024 -0.139,-0.1l-0.085,0Z" fill-rule="nonzero" transform="matrix(12,0,0,12,218.414,213.245)"/><path d="M0.064,-0l0.085,-0l-0,-0.292c-0,-0.093 0.05,-0.162 0.153,-0.162c0.065,-0 0.105,0.041 0.105,0.104l0,0.35l0.085,-0l-0,-0.34c-0,-0.111 -0.042,-0.189 -0.178,-0.189c-0.062,0 -0.135,0.026 -0.163,0.088l-0.002,-0l-0,-0.273l-0.085,0l0,0.714Z" fill-rule="nonzero" transform="matrix(12,0,0,12,224.414,213.245)"/><path d="M0.384,-0.18c0,0.047 -0.046,0.117 -0.158,0.117c-0.052,0 -0.1,-0.02 -0.1,-0.076c-0,-0.063 0.048,-0.083 0.104,-0.093c0.057,-0.01 0.121,-0.011 0.154,-0.035l0,0.087Zm0.138,0.112c-0.011,0.004 -0.019,0.005 -0.026,0.005c-0.027,0 -0.027,-0.018 -0.027,-0.058l-0,-0.266c-0,-0.121 -0.101,-0.142 -0.194,-0.142c-0.115,0 -0.214,0.045 -0.219,0.173l0.085,-0c0.004,-0.076 0.057,-0.098 0.129,-0.098c0.054,-0 0.115,0.012 0.115,0.086c0,0.064 -0.08,0.058 -0.174,0.076c-0.088,0.017 -0.175,0.042 -0.175,0.159c0,0.103 0.077,0.145 0.171,0.145c0.072,-0 0.135,-0.025 0.182,-0.08c0,0.056 0.028,0.08 0.072,0.08c0.027,-0 0.046,-0.005 0.061,-0.014l-0,-0.066Z" fill-rule="nonzero" transform="matrix(12,0,0,12,231.086,213.245)"/><path d="M0.467,-0.263c0,0.101 -0.039,0.2 -0.155,0.2c-0.117,0 -0.163,-0.094 -0.163,-0.196c-0,-0.097 0.044,-0.195 0.158,-0.195c0.11,-0 0.16,0.094 0.16,0.191Zm-0.4,0.461l0.085,-0l-0,-0.267l0.002,0c0.038,0.061 0.114,0.081 0.167,0.081c0.158,-0 0.236,-0.123 0.236,-0.269c-0,-0.146 -0.079,-0.272 -0.238,-0.272c-0.071,0 -0.137,0.025 -0.165,0.082l-0.002,-0l-0,-0.07l-0.085,0l0,0.715Z" fill-rule="nonzero" transform="matrix(12,0,0,12,237.53,213.245)"/><path d="M0.421,-0.164c-0.015,0.067 -0.064,0.101 -0.134,0.101c-0.113,0 -0.164,-0.08 -0.161,-0.17l0.387,-0c0.005,-0.125 -0.051,-0.296 -0.234,-0.296c-0.141,0 -0.243,0.114 -0.243,0.269c0.005,0.158 0.083,0.272 0.248,0.272c0.116,-0 0.198,-0.062 0.221,-0.176l-0.084,-0Zm-0.295,-0.144c0.006,-0.079 0.059,-0.146 0.148,-0.146c0.084,-0 0.145,0.065 0.149,0.146l-0.297,0Z" fill-rule="nonzero" transform="matrix(12,0,0,12,244.646,213.245)"/><rect x="169.742" y="214.145" width="45.336" height="0.6"/><path d="M0.741,-0.517l-0.088,0l-0.116,0.423l-0.002,0l-0.108,-0.423l-0.093,0l-0.104,0.423l-0.002,0l-0.117,-0.423l-0.094,0l0.166,0.517l0.092,-0l0.104,-0.411l0.002,-0l0.105,0.411l0.09,-0l0.165,-0.517Z" fill-rule="nonzero" transform="matrix(12,0,0,12,160.52,227.645)"/><path d="M0.069,-0l0.085,-0l-0,-0.517l-0.085,0l0,0.517Zm0.085,-0.714l-0.085,0l0,0.104l0.085,-0l-0,-0.104Z" fill-rule="nonzero" transform="matrix(12,0,0,12,169.616,227.645)"/><path d="M0.182,-0.672l-0.085,0l0,0.155l-0.088,0l0,0.075l0.088,-0l0,0.329c0,0.095 0.035,0.113 0.123,0.113l0.065,-0l-0,-0.075l-0.039,0c-0.053,0 -0.064,-0.007 -0.064,-0.046l-0,-0.321l0.103,-0l-0,-0.075l-0.103,0l-0,-0.155Z" fill-rule="nonzero" transform="matrix(12,0,0,12,172.28,227.645)"/><path d="M0.064,-0l0.085,-0l-0,-0.292c-0,-0.093 0.05,-0.162 0.153,-0.162c0.065,-0 0.105,0.041 0.105,0.104l0,0.35l0.085,-0l-0,-0.34c-0,-0.111 -0.042,-0.189 -0.178,-0.189c-0.062,0 -0.135,0.026 -0.163,0.088l-0.002,-0l-0,-0.273l-0.085,0l0,0.714Z" fill-rule="nonzero" transform="matrix(12,0,0,12,176.06,227.645)"/><path d="M0.467,-0.263c0,0.101 -0.039,0.2 -0.155,0.2c-0.117,0 -0.163,-0.094 -0.163,-0.196c-0,-0.097 0.044,-0.195 0.158,-0.195c0.11,-0 0.16,0.094 0.16,0.191Zm-0.4,0.263l0.085,-0l-0,-0.069l0.002,0c0.038,0.061 0.114,0.081 0.167,0.081c0.158,-0 0.236,-0.123 0.236,-0.269c-0,-0.146 -0.079,-0.272 -0.238,-0.272c-0.071,0 -0.137,0.025 -0.165,0.082l-0.002,-0l-0,-0.267l-0.085,0l0,0.714Z" fill-rule="nonzero" transform="matrix(12,0,0,12,186.068,227.645)"/><path d="M0.036,-0.258c0,0.151 0.087,0.27 0.251,0.27c0.164,-0 0.251,-0.119 0.251,-0.27c-0,-0.152 -0.087,-0.271 -0.251,-0.271c-0.164,0 -0.251,0.119 -0.251,0.271Zm0.09,0c-0,-0.126 0.072,-0.196 0.161,-0.196c0.089,-0 0.161,0.07 0.161,0.196c0,0.125 -0.072,0.195 -0.161,0.195c-0.089,0 -0.161,-0.07 -0.161,-0.195Z" fill-rule="nonzero" transform="matrix(12,0,0,12,193.184,227.645)"/><path d="M0.492,-0.517l-0.085,0l0,0.292c0,0.093 -0.05,0.162 -0.153,0.162c-0.065,0 -0.105,-0.041 -0.105,-0.104l-0,-0.35l-0.085,0l0,0.34c0,0.111 0.042,0.189 0.178,0.189c0.074,-0 0.132,-0.03 0.168,-0.094l0.002,0l0,0.082l0.08,-0l-0,-0.517Z" fill-rule="nonzero" transform="matrix(12,0,0,12,200.072,227.645)"/><path d="M0.064,-0l0.085,-0l-0,-0.292c-0,-0.093 0.05,-0.162 0.153,-0.162c0.065,-0 0.105,0.041 0.105,0.104l0,0.35l0.085,-0l-0,-0.34c-0,-0.111 -0.042,-0.189 -0.178,-0.189c-0.074,0 -0.132,0.03 -0.168,0.094l-0.002,-0l-0,-0.082l-0.08,0l0,0.517Z" fill-rule="nonzero" transform="matrix(12,0,0,12,206.744,227.645)"/><path d="M0.526,-0.714l-0.085,0l0,0.266l-0.002,-0c-0.038,-0.061 -0.114,-0.081 -0.167,-0.081c-0.158,0 -0.236,0.123 -0.236,0.269c0,0.146 0.079,0.272 0.238,0.272c0.071,-0 0.137,-0.025 0.165,-0.082l0.002,0l0,0.07l0.085,-0l-0,-0.714Zm-0.4,0.46c-0,-0.101 0.039,-0.2 0.155,-0.2c0.117,-0 0.163,0.094 0.163,0.196c0,0.097 -0.044,0.195 -0.158,0.195c-0.11,0 -0.16,-0.094 -0.16,-0.191Z" fill-rule="nonzero" transform="matrix(12,0,0,12,213.416,227.645)"/><path d="M0.069,-0l0.085,-0l-0,-0.517l-0.085,0l0,0.517Zm0.085,-0.714l-0.085,0l0,0.104l0.085,-0l-0,-0.104Z" fill-rule="nonzero" transform="matrix(12,0,0,12,220.532,227.645)"/><path d="M0.064,-0l0.085,-0l-0,-0.292c-0,-0.093 0.05,-0.162 0.153,-0.162c0.065,-0 0.105,0.041 0.105,0.104l0,0.35l0.085,-0l-0,-0.34c-0,-0.111 -0.042,-0.189 -0.178,-0.189c-0.074,0 -0.132,0.03 -0.168,0.094l-0.002,-0l-0,-0.082l-0.08,0l0,0.517Z" fill-rule="nonzero" transform="matrix(12,0,0,12,223.196,227.645)"/><path d="M0.272,-0.069c-0.112,0 -0.146,-0.104 -0.146,-0.197c-0,-0.099 0.044,-0.188 0.153,-0.188c0.107,-0 0.147,0.094 0.147,0.185c0,0.097 -0.042,0.2 -0.154,0.2Zm0.238,-0.448l-0.08,0l0,0.074l-0.001,-0c-0.031,-0.057 -0.089,-0.086 -0.154,-0.086c-0.179,0 -0.239,0.151 -0.239,0.273c0,0.141 0.077,0.262 0.231,0.262c0.065,-0 0.133,-0.031 0.161,-0.094l0.002,0l0,0.034c0,0.116 -0.044,0.196 -0.155,0.196c-0.056,0 -0.13,-0.022 -0.134,-0.084l-0.085,-0c0.005,0.113 0.117,0.152 0.214,0.152c0.163,-0 0.24,-0.086 0.24,-0.254l-0,-0.473Z" fill-rule="nonzero" transform="matrix(12,0,0,12,229.868,227.645)"/><path d="M0.467,-0.263c0,0.101 -0.039,0.2 -0.155,0.2c-0.117,0 -0.163,-0.094 -0.163,-0.196c-0,-0.097 0.044,-0.195 0.158,-0.195c0.11,-0 0.16,0.094 0.16,0.191Zm-0.4,0.263l0.085,-0l-0,-0.069l0.002,0c0.038,0.061 0.114,0.081 0.167,0.081c0.158,-0 0.236,-0.123 0.236,-0.269c-0,-0.146 -0.079,-0.272 -0.238,-0.272c-0.071,0 -0.137,0.025 -0.165,0.082l-0.002,-0l-0,-0.267l-0.085,0l0,0.714Z" fill-rule="nonzero" transform="matrix(12,0,0,12,240.092,227.645)"/><path d="M0.036,-0.258c0,0.151 0.087,0.27 0.251,0.27c0.164,-0 0.251,-0.119 0.251,-0.27c-0,-0.152 -0.087,-0.271 -0.251,-0.271c-0.164,0 -0.251,0.119 -0.251,0.271Zm0.09,0c-0,-0.126 0.072,-0.196 0.161,-0.196c0.089,-0 0.161,0.07 0.161,0.196c0,0.125 -0.072,0.195 -0.161,0.195c-0.089,0 -0.161,-0.07 -0.161,-0.195Z" fill-rule="nonzero" transform="matrix(12,0,0,12,247.208,227.645)"/><path d="M0.009,-0l0.103,-0l0.144,-0.215l0.144,0.215l0.109,-0l-0.2,-0.28l0.178,-0.237l-0.102,0l-0.129,0.18l-0.124,-0.18l-0.109,0l0.18,0.245l-0.194,0.272Z" fill-rule="nonzero" transform="matrix(12,0,0,12,254.096,227.645)"/></g><path d="M298,25l-1,-0l0,-1l1,-0l0,1Zm0,-2l0,-1l1,0l0,1l-1,0Zm2,0l0,-1l1,0l0,1l-1,0Zm2,0l0,-1l1,0l0,1l-1,0Zm2,0l0,-1l1,0l0,1l-1,0Zm2,0l0,-1l1,0l0,1l-1,0Zm2,0l0,-1l1,0l0,1l-1,0Zm2,0l0,-1l1,0l0,1l-1,0Zm2,0l0,-1l1,0l0,1l-1,0Zm2,0l0,-1l1,0l0,1l-1,0Zm2,0l0,-1l1,0l0,1l-1,0Zm2,0l0,-1l1,0l-0,1l-1,0Zm2,0l0,-1l1,0l0,1l-1,0Zm2,0l0,-1l1,0l0,1l-1,0Zm2,0l0,-1l1,0l0,1l-1,0Zm2,0l1,0l0,1l-1,0l0,-1Zm-0,2l1,0l0,1l-1,0l-0,-1Zm-0,2l1,0l0,1l-1,0l-0,-1Zm-0,2l1,0l0,1l-1,0l-0,-1Zm-0,2l1,0l0,1l-1,0l-0,-1Zm-0,2l1,0l0,1l-1,0l-0,-1Zm-0,2l1,0l0,1l-1,0l-0,-1Zm-0,2l1,0l0,1l-1,0l-0,-1Zm-0,2l1,0l0,1l-1,0l-0,-1Zm-0,2l1,0l0,1l-1,0l-0,-1Zm-0,2l1,0l-0,1l-1,0l-0,-1Zm-0,2l1,0l0,1l-1,0l-0,-1Zm-0,2l1,0l0,1l-1,0l-0,-1Zm-0,2l-0,1l-1,0l-0,-1l1,0Zm-2,-0l-0,1l-1,0l-0,-1l1,-0Zm-2,-0l-0,1l-1,0l-0,-1l1,-0Zm-2,-0l-0,1l-1,0l-0,-1l1,-0Zm-2,-0l-0,1l-1,-0l-0,-1l1,-0Zm-2,-0l-0,1l-1,0l-0,-1l1,-0Zm-2,-0l-0,1l-1,0l-0,-1l1,-0Zm-2,-0l-0,1l-1,-0l-0,-1l1,-0Zm-2,-0l-0,1l-1,0l-0,-1l1,-0Zm-2,-0l-0,1l-1,0l-0,-1l1,-0Zm-2,-0l-0,1l-1,0l0,-1l1,-0Zm-2,-0l-0,1l-1,0l-0,-1l1,-0Zm-2,-0l-0,1l-1,0l-0,-1l1,-0Zm-2,-0l-0,1l-1,0l-0,-1l1,-0Zm-2,-0l-1,-0l0,-1l1,-0l0,1Zm0,-2l-1,-0l0,-1l1,-0l0,1Zm0,-2l-1,-0l0,-1l1,-0l0,1Zm0,-2l-1,-0l0,-1l1,-0l0,1Zm0,-2l-1,-0l0,-1l1,-0l0,1Zm0,-2l-1,-0l0,-1l1,-0l0,1Zm0,-2l-1,-0l0,-1l1,-0l0,1Zm0,-2l-1,-0l0,-1l1,-0l0,1Zm0,-2l-1,-0l0,-1l1,-0l0,1Zm0,-2l-1,-0l0,-1l1,-0l0,1Zm0,-2l-1,-0l0,-1l1,-0l0,1Zm0,-2l-1,-0l0,-1l1,-0l0,1Z" fill="#8c8c8c"/><path d="M312,24c6.623,0 12,5.377 12,12c-0,6.623 -5.377,12 -12,12c-6.623,0 -12,-5.377 -12,-12c-0,-6.623 5.377,-12 12,-12Zm-0,1c-6.071,0 -11,4.929 -11,11c-0,6.071 4.929,11 11,11c6.071,0 11,-4.929 11,-11c-0,-6.071 -4.929,-11 -11,-11Z" fill="#6a6bd3"/><path d="M338.5,24.5l-8,-0" fill="none" stroke="#3a3bc5" stroke-width="1px" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10"/><path d="M338.5,47.5l-8,-0" fill="none" stroke="#3a3bc5" stroke-width="1px" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10"/><path d="M334.5,24.5l-0,23" fill="none" stroke="#3a3bc5" stroke-width="1px" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="1"/><path d="M339.509,34.28c-0.036,-1.02 0.468,-2.112 1.657,-2.112c0.9,-0 1.645,0.612 1.645,1.536c-0,1.176 -0.733,1.704 -2.173,2.592c-1.201,0.745 -2.219,1.465 -2.387,3.48l5.554,-0l0,-0.899l-4.368,0c0.204,-1.056 1.321,-1.596 2.389,-2.244c1.057,-0.661 2.063,-1.417 2.063,-2.917c0,-1.584 -1.174,-2.447 -2.663,-2.447c-1.801,0 -2.819,1.283 -2.735,3.011l1.018,0Z" fill="#3a3bc5" fill-rule="nonzero"/><path d="M349.661,31.269l-0.815,0l-3.875,5.532l-0,0.983l3.732,-0l-0,1.992l0.958,-0l0,-1.992l1.152,-0l0,-0.899l-1.152,0l0,-5.616Zm-3.814,5.616l2.832,-4.164l0.024,0l-0,4.164l-2.856,0Z" fill="#3a3bc5" fill-rule="nonzero"/><path d="M356.911,36.62c-0,1.213 -0.469,2.401 -1.861,2.401c-1.405,0 -1.957,-1.128 -1.957,-2.353c0,-1.164 0.528,-2.34 1.897,-2.34c1.32,-0 1.921,1.128 1.921,2.292Zm-4.8,5.532l1.018,-0l0,-3.203l0.024,0c0.456,0.731 1.369,0.971 2.005,0.971c1.896,-0 2.831,-1.475 2.831,-3.228c0,-1.752 -0.947,-3.263 -2.855,-3.263c-0.852,0 -1.645,0.3 -1.981,0.983l-0.024,-0l0,-0.839l-1.018,0l-0,8.579Z" fill="#3a3bc5" fill-rule="nonzero"/><path d="M358.531,39.776l1.235,-0l1.728,-2.578l1.727,2.578l1.308,-0l-2.399,-3.36l2.135,-2.843l-1.223,0l-1.548,2.162l-1.488,-2.162l-1.307,0l2.159,2.939l-2.327,3.264Z" fill="#3a3bc5" fill-rule="nonzero"/><path d="M310,34l4,4" fill="none" stroke="#000" stroke-width="1px"/><path d="M310,38l4,-4" fill="none" stroke="#000" stroke-width="1px"/></g></svg>
\ No newline at end of file
diff --git a/understanding/22/img/target-size-skewed.afdesign b/understanding/22/img/target-size-skewed.afdesign
new file mode 100644
index 0000000000..5061a64bc4
Binary files /dev/null and b/understanding/22/img/target-size-skewed.afdesign differ
diff --git a/understanding/22/img/target-size-skewed.png b/understanding/22/img/target-size-skewed.png
new file mode 100644
index 0000000000..22153e6b72
Binary files /dev/null and b/understanding/22/img/target-size-skewed.png differ
diff --git a/understanding/22/img/target-size-skewed.svg b/understanding/22/img/target-size-skewed.svg
new file mode 100644
index 0000000000..9f6987679f
--- /dev/null
+++ b/understanding/22/img/target-size-skewed.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 130 120" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" fill-rule="evenodd" clip-rule="evenodd" stroke-miterlimit="10"><rect width="130" height="120" fill="none"/><clipPath id="a"><rect width="130" height="120"/></clipPath><g clip-path="url(#a)"><rect x="-0" width="130" height="120" fill="#fff"/><path d="M43.5,45.707l-3,-3l-3,3" fill="none" stroke="#000" stroke-width="1px"/><path d="M43.5,62.293l-3,3l-3,-3" fill="none" stroke="#000" stroke-width="1px"/><path d="M40.5,42.707l0,22.586" fill="none" stroke="#000" stroke-width="1px" stroke-miterlimit="1"/><path d="M7.871,53.28c-0.036,-1.02 0.468,-2.112 1.657,-2.112c0.9,-0 1.645,0.612 1.645,1.536c-0,1.176 -0.733,1.704 -2.173,2.592c-1.201,0.745 -2.219,1.465 -2.387,3.48l5.554,-0l0,-0.899l-4.368,0c0.204,-1.056 1.321,-1.596 2.389,-2.244c1.057,-0.661 2.063,-1.417 2.063,-2.917c0,-1.584 -1.174,-2.447 -2.663,-2.447c-1.801,0 -2.819,1.283 -2.735,3.011l1.018,0Z" fill-rule="nonzero"/><path d="M18.023,50.269l-0.814,0l-3.876,5.532l-0,0.983l3.732,-0l-0,1.992l0.958,-0l0,-1.992l1.152,-0l0,-0.899l-1.152,0l0,-5.616Zm-3.814,5.616l2.832,-4.164l0.024,0l-0,4.164l-2.856,0Z" fill-rule="nonzero"/><path d="M25.273,55.62c-0,1.213 -0.468,2.401 -1.861,2.401c-1.405,0 -1.957,-1.128 -1.957,-2.353c0,-1.164 0.528,-2.34 1.897,-2.34c1.321,-0 1.921,1.128 1.921,2.292Zm-4.8,5.532l1.018,-0l0,-3.203l0.024,0c0.456,0.731 1.369,0.971 2.005,0.971c1.897,-0 2.831,-1.475 2.831,-3.228c0,-1.752 -0.946,-3.263 -2.855,-3.263c-0.852,0 -1.645,0.3 -1.981,0.983l-0.024,-0l0,-0.839l-1.018,0l-0,8.579Z" fill-rule="nonzero"/><path d="M26.893,58.776l1.235,-0l1.728,-2.578l1.728,2.578l1.307,-0l-2.399,-3.36l2.135,-2.843l-1.223,0l-1.548,2.162l-1.488,-2.162l-1.307,0l2.159,2.939l-2.327,3.264Z" fill-rule="nonzero"/><path d="M55.709,91.072c-0.036,-1.021 0.468,-2.113 1.657,-2.113c0.9,0 1.645,0.612 1.645,1.537c-0,1.176 -0.733,1.704 -2.173,2.592c-1.201,0.744 -2.219,1.464 -2.387,3.479l5.554,0l0,-0.898l-4.368,-0c0.204,-1.056 1.321,-1.597 2.389,-2.245c1.057,-0.66 2.063,-1.416 2.063,-2.916c0,-1.585 -1.174,-2.447 -2.663,-2.447c-1.801,-0 -2.819,1.282 -2.735,3.011l1.018,-0Z" fill-rule="nonzero"/><path d="M65.861,88.061l-0.814,-0l-3.876,5.532l-0,0.982l3.732,0l-0,1.992l0.958,0l0,-1.992l1.152,0l0,-0.898l-1.152,-0l0,-5.616Zm-3.814,5.616l2.832,-4.164l0.024,-0l-0,4.164l-2.856,-0Z" fill-rule="nonzero"/><path d="M73.111,93.412c-0,1.212 -0.468,2.401 -1.861,2.401c-1.405,-0 -1.957,-1.129 -1.957,-2.353c0,-1.164 0.528,-2.341 1.897,-2.341c1.321,0 1.921,1.129 1.921,2.293Zm-4.8,5.531l1.018,0l0,-3.202l0.024,-0c0.456,0.731 1.369,0.97 2.005,0.97c1.897,0 2.831,-1.474 2.831,-3.227c0,-1.753 -0.946,-3.263 -2.855,-3.263c-0.852,-0 -1.645,0.299 -1.981,0.982l-0.024,0l0,-0.838l-1.018,-0l-0,8.578Z" fill-rule="nonzero"/><path d="M74.731,96.567l1.235,0l1.728,-2.577l1.728,2.577l1.307,0l-2.399,-3.36l2.135,-2.842l-1.223,-0l-1.548,2.161l-1.488,-2.161l-1.307,-0l2.159,2.938l-2.327,3.264Z" fill-rule="nonzero"/><path d="M58.707,78.5l-3,3l3,3" fill="none" stroke="#000" stroke-width="1px"/><path d="M75.293,78.5l3,3l-3,3" fill="none" stroke="#000" stroke-width="1px"/><path d="M55.707,81.5l22.586,-0" fill="none" stroke="#000" stroke-width="1px" stroke-miterlimit="1"/><path d="M90,31l-32,0l-13,44l32,0l13,-44Z" fill="#e0e0ea"/><path d="M90,31l-13,44l-32,0l13,-44l32,0Zm-1.338,1c-0,-0 -29.915,0 -29.915,-0l-12.409,42c0,0 29.915,0 29.915,0l12.409,-42Z" fill="#6a6bd3"/><path d="M55,44l0,-2l1,0l0,2l-1,-0Zm22,-2l2,0l-0,1l-2,-0l0,-1Zm2,22l-0,2l-1,-0l-0,-2l1,0Zm-22,2l-2,-0l0,-1l2,0l-0,1Zm-2,-21l1,-0l0,1l-1,0l0,-1Zm0,2l1,0l0,1l-1,0l0,-1Zm0,2l1,0l0,1l-1,0l0,-1Zm0,2l1,0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,1l-1,-0l0,-1Zm0,2l1,0l0,1l-1,0l0,-1Zm0,2l1,-0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,-0l0,-1Zm0,2l1,0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,1l-1,-0l0,-1Zm3,3l-0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l-0,1l-1,-0Zm2,-0l-0,-1l1,0l-0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l-0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l1,0l-0,1l-1,-0Zm2,-0l0,-1l1,0l-0,1l-1,-0Zm2,-0l-0,-1l1,0l-0,1l-1,-0Zm3,-3l-1,0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l0,-1l1,-0l-0,1Zm-0,-2l-1,-0l0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,0l-0,1Zm-0,-2l-1,0l-0,-1l1,0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,0l-0,1Zm-0,-2l-1,-0l-0,-1l1,0l-0,1Zm-0,-2l-1,0l-0,-1l1,0l-0,1Zm-3,-3l0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l0,-1l1,0Zm-2,0l0,1l-1,0l0,-1l1,0Zm-2,0l-0,1l-1,-0l-0,-1l1,0Zm-2,0l0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,-0l0,-1l1,0Zm-2,0l-0,1l-1,0l0,-1l1,0Zm-2,0l0,1l-1,0l0,-1l1,0Z" fill="#6a6bd3"/></g></svg>
\ No newline at end of file
diff --git a/understanding/22/img/target-size-undersized-rounded.afdesign b/understanding/22/img/target-size-undersized-rounded.afdesign
new file mode 100644
index 0000000000..0d14bf90a0
Binary files /dev/null and b/understanding/22/img/target-size-undersized-rounded.afdesign differ
diff --git a/understanding/22/img/target-size-undersized-rounded.png b/understanding/22/img/target-size-undersized-rounded.png
new file mode 100644
index 0000000000..3d92a1b887
Binary files /dev/null and b/understanding/22/img/target-size-undersized-rounded.png differ
diff --git a/understanding/22/img/target-size-undersized-rounded.svg b/understanding/22/img/target-size-undersized-rounded.svg
new file mode 100644
index 0000000000..a308f28063
--- /dev/null
+++ b/understanding/22/img/target-size-undersized-rounded.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 250 105" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" fill-rule="evenodd" clip-rule="evenodd" stroke-miterlimit="10"><rect width="250" height="105" fill="none"/><clipPath id="a"><rect width="250" height="105"/></clipPath><g clip-path="url(#a)"><rect x="-0" width="250" height="105" fill="#fff"/><path d="M48.5,31.707l-3,-3l-3,3" fill="none" stroke="#000" stroke-width="1px"/><path d="M48.5,48.293l-3,3l-3,-3" fill="none" stroke="#000" stroke-width="1px"/><path d="M45.5,28.707l-0,22.586" fill="none" stroke="#000" stroke-width="1px" stroke-miterlimit="1"/><path d="M12.871,39.28c-0.036,-1.02 0.468,-2.112 1.657,-2.112c0.9,-0 1.645,0.612 1.645,1.536c-0,1.176 -0.733,1.704 -2.173,2.592c-1.201,0.745 -2.219,1.465 -2.387,3.48l5.554,-0l0,-0.899l-4.368,0c0.204,-1.056 1.321,-1.596 2.389,-2.244c1.057,-0.661 2.063,-1.417 2.063,-2.917c0,-1.584 -1.174,-2.447 -2.663,-2.447c-1.801,0 -2.819,1.283 -2.735,3.011l1.018,0Z" fill-rule="nonzero"/><path d="M23.023,36.269l-0.814,0l-3.876,5.532l-0,0.983l3.732,-0l-0,1.992l0.958,-0l0,-1.992l1.152,-0l0,-0.899l-1.152,0l0,-5.616Zm-3.814,5.616l2.832,-4.164l0.024,0l-0,4.164l-2.856,0Z" fill-rule="nonzero"/><path d="M30.273,41.62c-0,1.213 -0.468,2.401 -1.861,2.401c-1.405,0 -1.957,-1.128 -1.957,-2.353c0,-1.164 0.528,-2.34 1.897,-2.34c1.321,-0 1.921,1.128 1.921,2.292Zm-4.8,5.532l1.018,-0l0,-3.203l0.024,0c0.456,0.731 1.369,0.971 2.005,0.971c1.897,-0 2.831,-1.475 2.831,-3.228c0,-1.752 -0.946,-3.263 -2.855,-3.263c-0.852,0 -1.645,0.3 -1.981,0.983l-0.024,-0l0,-0.839l-1.018,0l-0,8.579Z" fill-rule="nonzero"/><path d="M31.893,44.776l1.235,-0l1.728,-2.578l1.728,2.578l1.307,-0l-2.399,-3.36l2.135,-2.843l-1.223,0l-1.548,2.162l-1.488,-2.162l-1.307,0l2.159,2.939l-2.327,3.264Z" fill-rule="nonzero"/><path d="M55.709,71.072c-0.036,-1.021 0.468,-2.113 1.657,-2.113c0.9,0 1.645,0.612 1.645,1.537c-0,1.176 -0.733,1.704 -2.173,2.592c-1.201,0.744 -2.219,1.464 -2.387,3.479l5.554,0l0,-0.898l-4.368,-0c0.204,-1.056 1.321,-1.597 2.389,-2.245c1.057,-0.66 2.063,-1.416 2.063,-2.916c0,-1.585 -1.174,-2.447 -2.663,-2.447c-1.801,-0 -2.819,1.282 -2.735,3.011l1.018,-0Z" fill-rule="nonzero"/><path d="M65.861,68.061l-0.814,-0l-3.876,5.532l-0,0.982l3.732,0l-0,1.992l0.958,0l0,-1.992l1.152,0l0,-0.898l-1.152,-0l0,-5.616Zm-3.814,5.616l2.832,-4.164l0.024,-0l-0,4.164l-2.856,-0Z" fill-rule="nonzero"/><path d="M73.111,73.412c-0,1.212 -0.468,2.401 -1.861,2.401c-1.405,-0 -1.957,-1.129 -1.957,-2.353c0,-1.164 0.528,-2.341 1.897,-2.341c1.321,0 1.921,1.129 1.921,2.293Zm-4.8,5.531l1.018,0l0,-3.202l0.024,-0c0.456,0.731 1.369,0.97 2.005,0.97c1.897,0 2.831,-1.474 2.831,-3.227c0,-1.753 -0.946,-3.263 -2.855,-3.263c-0.852,-0 -1.645,0.299 -1.981,0.982l-0.024,0l0,-0.838l-1.018,-0l-0,8.578Z" fill-rule="nonzero"/><path d="M74.731,76.567l1.235,0l1.728,-2.577l1.728,2.577l1.307,0l-2.399,-3.36l2.135,-2.842l-1.223,-0l-1.548,2.161l-1.488,-2.161l-1.307,-0l2.159,2.938l-2.327,3.264Z" fill-rule="nonzero"/><path d="M58.707,58.5l-3,3l3,3" fill="none" stroke="#000" stroke-width="1px"/><path d="M75.293,58.5l3,3l-3,3" fill="none" stroke="#000" stroke-width="1px"/><path d="M55.707,61.5l22.586,-0" fill="none" stroke="#000" stroke-width="1px" stroke-miterlimit="1"/><path d="M79,36.4c-0,-4.636 -3.764,-8.4 -8.4,-8.4l-7.2,0c-4.636,0 -8.4,3.764 -8.4,8.4l-0,7.2c-0,4.636 3.764,8.4 8.4,8.4l7.2,0c4.636,0 8.4,-3.764 8.4,-8.4l-0,-7.2Z" fill="#e0e0ea"/><path d="M79,36.4l-0,7.2c-0,4.636 -3.764,8.4 -8.4,8.4l-7.2,0c-4.636,0 -8.4,-3.764 -8.4,-8.4l-0,-7.2c-0,-4.636 3.764,-8.4 8.4,-8.4l7.2,0c4.636,0 8.4,3.764 8.4,8.4Zm-1,-0c-0,-4.084 -3.316,-7.4 -7.4,-7.4l-7.2,0c-4.084,0 -7.4,3.316 -7.4,7.4l-0,7.2c-0,4.084 3.316,7.4 7.4,7.4l7.2,0c4.084,0 7.4,-3.316 7.4,-7.4l-0,-7.2Z" fill="#949494"/><path d="M55,30l0,-2l1,0l-0,2l-1,-0Zm22,-2l2,0l-0,1l-2,-0l0,-1Zm2,22l-0,2l-1,-0l-0,-2l1,0Zm-22,2l-2,-0l0,-1l2,0l-0,1Zm-2,-21l1,-0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,-0l0,-1Zm0,2l1,-0l-0,1l-1,-0l0,-1Zm0,2l1,0l-0,1l-1,0l0,-1Zm0,2l1,-0l-0,1l-1,0l0,-1Zm0,2l1,0l-0,1l-1,-0l0,-1Zm0,2l1,0l-0,1l-1,-0l0,-1Zm0,2l1,-0l-0,1l-1,-0l0,-1Zm3,3l-0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l1,-0l-0,1l-1,-0Zm2,-0l-0,-1l1,-0l-0,1l-1,-0Zm2,-0l0,-1l1,-0l0,1l-1,-0Zm2,-0l-0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l1,-0l-0,1l-1,-0Zm2,-0l0,-1l1,0l-0,1l-1,-0Zm2,-0l-0,-1l1,0l-0,1l-1,-0Zm3,-3l-1,0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l0,-1l1,-0l-0,1Zm-0,-2l-1,-0l0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,0l-0,1Zm-0,-2l-1,0l-0,-1l1,0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,0l-0,1Zm-0,-2l-1,-0l-0,-1l1,0l-0,1Zm-0,-2l-1,0l-0,-1l1,0l-0,1Zm-3,-3l0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,-0l-0,-1l1,0Zm-2,0l-0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,0l0,-1l1,0Zm-2,0l0,1l-1,0l0,-1l1,0Zm-2,0l-0,1l-1,-0l-0,-1l1,0Zm-2,0l0,1l-1,0l-0,-1l1,0Zm-2,0l-0,1l-1,-0l0,-1l1,0Zm-2,0l-0,1l-1,0l0,-1l1,0Zm-2,0l0,1l-1,0l0,-1l1,0Z" fill="#6a6bd3"/><path d="M165.5,20.707l-3,-3l-3,3" fill="none" stroke="#000" stroke-width="1px"/><path d="M165.5,61.293l-3,3l-3,-3" fill="none" stroke="#000" stroke-width="1px"/><path d="M162.5,17.707l0,46.586" fill="none" stroke="#000" stroke-width="1px" stroke-miterlimit="1"/><path d="M129.871,39.056c-0.036,-1.02 0.468,-2.113 1.657,-2.113c0.9,0 1.645,0.612 1.645,1.537c-0,1.176 -0.733,1.704 -2.173,2.592c-1.201,0.744 -2.219,1.465 -2.387,3.479l5.554,0l0,-0.898l-4.368,-0c0.204,-1.056 1.321,-1.597 2.389,-2.245c1.057,-0.66 2.063,-1.416 2.063,-2.916c0,-1.585 -1.174,-2.447 -2.663,-2.447c-1.801,-0 -2.819,1.282 -2.735,3.011l1.018,-0Z" fill-rule="nonzero"/><path d="M140.023,36.045l-0.814,-0l-3.876,5.532l-0,0.982l3.732,0l-0,1.992l0.958,0l0,-1.992l1.152,0l0,-0.898l-1.152,-0l0,-5.616Zm-3.814,5.616l2.832,-4.164l0.024,-0l-0,4.164l-2.856,-0Z" fill-rule="nonzero"/><path d="M147.273,41.396c-0,1.212 -0.468,2.401 -1.861,2.401c-1.405,-0 -1.957,-1.129 -1.957,-2.353c0,-1.164 0.528,-2.341 1.897,-2.341c1.321,0 1.921,1.129 1.921,2.293Zm-4.8,5.531l1.018,0l0,-3.202l0.024,-0c0.456,0.731 1.369,0.97 2.005,0.97c1.897,0 2.831,-1.474 2.831,-3.227c0,-1.752 -0.946,-3.263 -2.855,-3.263c-0.852,-0 -1.645,0.299 -1.981,0.982l-0.024,0l0,-0.838l-1.018,-0l-0,8.578Z" fill-rule="nonzero"/><path d="M148.893,44.551l1.235,0l1.728,-2.577l1.728,2.577l1.307,0l-2.399,-3.36l2.135,-2.842l-1.223,-0l-1.548,2.162l-1.488,-2.162l-1.307,-0l2.159,2.938l-2.327,3.264Z" fill-rule="nonzero"/><path d="M184.709,85.072c-0.036,-1.021 0.468,-2.113 1.657,-2.113c0.9,0 1.645,0.612 1.645,1.537c-0,1.176 -0.733,1.704 -2.173,2.592c-1.201,0.744 -2.219,1.464 -2.387,3.479l5.554,0l0,-0.898l-4.368,-0c0.204,-1.056 1.321,-1.597 2.389,-2.245c1.057,-0.66 2.063,-1.416 2.063,-2.916c0,-1.585 -1.174,-2.447 -2.663,-2.447c-1.801,-0 -2.819,1.282 -2.735,3.011l1.018,-0Z" fill-rule="nonzero"/><path d="M194.861,82.061l-0.814,-0l-3.876,5.532l-0,0.982l3.732,0l-0,1.992l0.958,0l0,-1.992l1.152,0l0,-0.898l-1.152,-0l0,-5.616Zm-3.814,5.616l2.832,-4.164l0.024,-0l-0,4.164l-2.856,-0Z" fill-rule="nonzero"/><path d="M202.111,87.412c-0,1.212 -0.468,2.401 -1.861,2.401c-1.405,-0 -1.957,-1.129 -1.957,-2.353c0,-1.164 0.528,-2.341 1.897,-2.341c1.321,0 1.921,1.129 1.921,2.293Zm-4.8,5.531l1.018,0l0,-3.202l0.024,-0c0.456,0.731 1.369,0.97 2.005,0.97c1.897,0 2.831,-1.474 2.831,-3.227c0,-1.753 -0.946,-3.263 -2.855,-3.263c-0.852,-0 -1.645,0.299 -1.981,0.982l-0.024,0l0,-0.838l-1.018,-0l-0,8.578Z" fill-rule="nonzero"/><path d="M203.731,90.567l1.235,0l1.728,-2.577l1.728,2.577l1.307,0l-2.399,-3.36l2.135,-2.842l-1.223,-0l-1.548,2.161l-1.488,-2.161l-1.307,-0l2.159,2.938l-2.327,3.264Z" fill-rule="nonzero"/><path d="M175.707,71.5l-3,3l3,3" fill="none" stroke="#000" stroke-width="1px"/><path d="M216.293,71.5l3,3l-3,3" fill="none" stroke="#000" stroke-width="1px"/><path d="M172.707,74.5l46.586,-0" fill="none" stroke="#000" stroke-width="1px" stroke-miterlimit="1"/><path d="M220,33.801c0,-9.272 -7.528,-16.8 -16.8,-16.8l-14.4,-0c-9.272,-0 -16.8,7.528 -16.8,16.8l0,14.4c0,9.272 7.528,16.8 16.8,16.8l14.4,-0c9.272,-0 16.8,-7.528 16.8,-16.8l0,-14.4Z" fill="#e0e0ea"/><path d="M220,33.801l0,14.4c0,9.272 -7.528,16.8 -16.8,16.8l-14.4,-0c-9.272,-0 -16.8,-7.528 -16.8,-16.8l0,-14.4c0,-9.272 7.528,-16.8 16.8,-16.8l14.4,-0c9.272,-0 16.8,7.528 16.8,16.8Zm-1,-0c0,-8.721 -7.08,-15.8 -15.8,-15.8l-14.4,-0c-8.72,-0 -15.8,7.079 -15.8,15.8l0,14.4c0,8.72 7.08,15.8 15.8,15.8l14.4,-0c8.72,-0 15.8,-7.08 15.8,-15.8l0,-14.4Z" fill="#949494"/><path d="M173,17.001l-0,1l-0,1l-1,-0l-0,-1c-0,-0 0.325,-0.632 0.605,-1l0.395,-0Zm-1,3l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l-0,1l-1,-0l0,-1Zm0,2l1,-0l-0,1l-1,-0l0,-1Zm0,2l1,-0l-0,1l-1,-0l0,-1Zm0,2l1,-0l-0,1l-1,-0l0,-1Zm0,2l1,-0l-0,1l-1,-0l0,-1Zm0,2l1,-0l-0,1l-1,-0l0,-1Zm0,2l1,-0l-0,1l-1,-0l0,-1Zm0,2l1,-0l-0,1l-1,-0l0,-1Zm0,2l1,-0l-0,1l-1,-0l0,-1Zm0,2l1,-0l-0,1l-1,-0l0,-1Zm0,2l1,-0l-0,1l-1,-0l0,-1Zm0,2l1,-0l-0,1l-1,-0l0,-1Zm0,2l1,-0l1,-0l0,1l-1,-0c0,-0.004 0,-0.007 0,-0.011l0,0.011l-1,-0l0,-1Zm3,1l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l-0,-1l1,-0l-0,1c-0.003,-0 -0.007,-0 -0.011,-0l0.011,-0l-0,1l-1,-0Zm1,-3l-1,-0l0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-1,-0l0,-1l1,-0l0,0.01l1,0.99Zm-3,-1l-0,1l-1,-0l-0,-1l1,-0Zm-2,-0l-0,1l-1,-0l-0,-1l1,-0Zm-2,-0l-0,1l-1,-0l-0,-1l1,-0Zm-2,-0l-0,1l-1,-0l-0,-1l1,-0Zm-2,-0l-0,1l-1,-0l-0,-1l1,-0Zm-2,-0l-0,1l-1,-0l0,-1l1,-0Zm-2,-0l0,1l-1,-0l0,-1l1,-0Zm-2,-0l0,1l-1,-0l0,-1l1,-0Zm-2,-0l0,1l-1,-0l0,-1l1,-0Zm-2,-0l0,1l-1,-0l-0,-1l1,-0Zm-2,-0l-0,1l-1,-0l-0,-1l1,-0Zm-2,-0l-0,1l-1,-0l-0,-1l1,-0Zm-2,-0l-0,1l-1,-0l-0,-1l1,-0Zm-2,-0l-0,1l-1,-0l-0,-1l1,-0Zm-2,-0l-0,1l-1,-0l-0,-1l1,-0Zm-2,-0l-0,1l-1,-0l-0,-1l1,-0Zm-2,-0l-0,1l-1,-0l-0,-1l1,-0Zm-2,-0l-0,1l-1,-0l-0,-1l1,-0Zm-2,-0l-0,1l-1,-0l-0,-1l1,-0Zm-2,-0l-0,1l-1,-0l-0,-1l1,-0Zm-2,-0l-0,1l-1,-0l-0,-1l1,-0Zm-2,-0l-0,1l-1,-0l-0,-1l1,-0Z" fill="#6a6bd3"/></g></svg>
\ No newline at end of file
diff --git a/understanding/22/img/target-spacing-toolbar.afdesign b/understanding/22/img/target-spacing-toolbar.afdesign
new file mode 100644
index 0000000000..bf90181127
Binary files /dev/null and b/understanding/22/img/target-spacing-toolbar.afdesign differ
diff --git a/understanding/22/img/target-spacing-toolbar.png b/understanding/22/img/target-spacing-toolbar.png
new file mode 100644
index 0000000000..895e340014
Binary files /dev/null and b/understanding/22/img/target-spacing-toolbar.png differ
diff --git a/understanding/22/img/target-spacing-toolbar.svg b/understanding/22/img/target-spacing-toolbar.svg
new file mode 100644
index 0000000000..d488b49480
--- /dev/null
+++ b/understanding/22/img/target-spacing-toolbar.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 560 265" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" fill-rule="evenodd" clip-rule="evenodd" stroke-miterlimit="1"><rect width="560" height="265" fill="none"/><clipPath id="a"><rect width="560" height="265"/></clipPath><g clip-path="url(#a)"><rect x="-0" width="560" height="265" fill="#fff"/><path d="M10,87.5l540,-0" fill="none" stroke="#ddd" stroke-width="1px"/><path d="M10,172.5l540,-0" fill="none" stroke="#ddd" stroke-width="1px"/><path d="M59.002,26c0,-0 0.332,-0.637 0.613,-1l0.387,0l0,0.011c0,-0.004 0,-0.007 0,-0.011l1,0l0,1l-2,-0Zm0,1l1,-0l0,1l-1,-0l0,-1Zm0,2l1,0l0,1l-1,0l0,-1Zm0,2l1,0l0,1l-1,0l0,-1Zm0,2l1,0l0,1l-1,0l0,-1Zm0,2l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,1l-1,0l0,-1Zm0,2l1,0l0,1l-1,-0l0,-1Zm0,2l1,0l0,1l-1,0l0,-1Zm0,2l1,-0l0,1l-1,0l0,-1Zm0,2l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,2l-1,-0l0,-1l0.011,-0c-0.004,-0 -0.007,0 -0.011,0l0,-1Zm2,2l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l2,0l0,1l-1,-0l0,-0.011c0,0.004 0,0.007 0,0.011l-1,-0Zm2,-2l-1,0l0,-1l1,0l0,1Zm0,-2l-1,-0l0,-1l1,-0l0,1Zm0,-2l-1,-0l0,-1l1,-0l0,1Zm0,-2l-1,-0l0,-1l1,-0l0,1Zm0,-2l-1,0l0,-1l1,0l0,1Zm0,-2l-1,0l0,-1l1,-0l0,1Zm0,-2l-1,-0l0,-1l1,0l0,1Zm0,-2l-1,-0l0,-1l1,-0l0,1Zm0,-2l-1,0l0,-1l1,-0l0,1Zm0,-2l-1,0l0,-1l1,0l0,1Zm0,-2l-1,0l0,-2c0,0.943 1,1 1,1l0,1Zm-2,-2l0,1l-1,-0l0,-1l1,0Zm-2,0l0,1l-1,-0l0,-1l1,0Zm-2,0l0,1l-1,-0l0,-1l1,0Zm-2,0l0,1l-1,-0l0,-1l1,0Zm-2,0l0,1l-1,-0l0,-1l1,0Zm-2,0l0,1l-1,-0l0,-1l1,0Zm-2,0l0,1l-1,-0l0,-1l1,0Zm-2,0l0,1l-1,-0l0,-1l1,0Zm-2,0l0,1l-1,0l0,-1l1,0Zm-2,0l0,1l-1,-0l0,-1l1,0Z" fill="#6a6bd3"/><path d="M83.002,26c0,-0 0.332,-0.637 0.613,-1l0.387,0l0,0.011c0,-0.004 0,-0.007 0,-0.011l1,0l0,1l-2,-0Zm0,1l1,-0l0,1l-1,-0l0,-1Zm0,2l1,0l0,1l-1,0l0,-1Zm0,2l1,0l0,1l-1,0l0,-1Zm0,2l1,0l0,1l-1,0l0,-1Zm0,2l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,1l-1,0l0,-1Zm0,2l1,0l0,1l-1,-0l0,-1Zm0,2l1,0l0,1l-1,0l0,-1Zm0,2l1,-0l0,1l-1,0l0,-1Zm0,2l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,2l-1,-0l0,-1l0.011,-0c-0.004,-0 -0.007,0 -0.011,0l0,-1Zm2,2l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l2,0l0,1l-1,-0l0,-0.011c0,0.004 0,0.007 0,0.011l-1,-0Zm2,-2l-1,0l0,-1l1,0l0,1Zm0,-2l-1,-0l0,-1l1,-0l0,1Zm0,-2l-1,-0l0,-1l1,-0l0,1Zm0,-2l-1,-0l0,-1l1,-0l0,1Zm0,-2l-1,0l0,-1l1,0l0,1Zm0,-2l-1,0l0,-1l1,-0l0,1Zm0,-2l-1,-0l0,-1l1,0l0,1Zm0,-2l-1,-0l0,-1l1,-0l0,1Zm0,-2l-1,0l0,-1l1,-0l0,1Zm0,-2l-1,0l0,-1l1,0l0,1Zm0,-2l-1,0l0,-2c0,0.943 1,1 1,1l0,1Zm-2,-2l0,1l-1,-0l0,-1l1,0Zm-2,0l0,1l-1,-0l0,-1l1,0Zm-2,0l0,1l-1,-0l0,-1l1,0Zm-2,0l0,1l-1,-0l0,-1l1,0Zm-2,0l0,1l-1,-0l0,-1l1,0Zm-2,0l0,1l-1,-0l0,-1l1,0Zm-2,0l0,1l-1,-0l0,-1l1,0Zm-2,0l0,1l-1,-0l0,-1l1,0Zm-2,0l0,1l-1,0l0,-1l1,0Zm-2,0l0,1l-1,-0l0,-1l1,0Z" fill="#6a6bd3"/><path d="M107.002,26c0,-0 0.332,-0.637 0.613,-1l0.387,0l0,0.011c0,-0.004 0,-0.007 0,-0.011l1,0l0,1l-2,-0Zm0,1l1,-0l0,1l-1,-0l0,-1Zm0,2l1,0l0,1l-1,0l0,-1Zm0,2l1,0l0,1l-1,0l0,-1Zm0,2l1,0l0,1l-1,0l0,-1Zm0,2l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,1l-1,0l0,-1Zm0,2l1,0l0,1l-1,-0l0,-1Zm0,2l1,0l0,1l-1,0l0,-1Zm0,2l1,-0l0,1l-1,0l0,-1Zm0,2l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,2l-1,-0l0,-1l0.011,-0c-0.004,-0 -0.007,0 -0.011,0l0,-1Zm2,2l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l2,0l0,1l-1,-0l0,-0.011c0,0.004 0,0.007 0,0.011l-1,-0Zm2,-2l-1,0l0,-1l1,0l0,1Zm0,-2l-1,-0l0,-1l1,-0l0,1Zm0,-2l-1,-0l0,-1l1,-0l0,1Zm0,-2l-1,-0l0,-1l1,-0l0,1Zm0,-2l-1,0l0,-1l1,0l0,1Zm0,-2l-1,0l0,-1l1,-0l0,1Zm0,-2l-1,-0l0,-1l1,0l0,1Zm0,-2l-1,-0l0,-1l1,-0l0,1Zm0,-2l-1,0l0,-1l1,-0l0,1Zm0,-2l-1,0l0,-1l1,0l0,1Zm0,-2l-1,0l0,-2c0,0.943 1,1 1,1l0,1Zm-2,-2l0,1l-1,-0l0,-1l1,0Zm-2,0l0,1l-1,-0l0,-1l1,0Zm-2,0l0,1l-1,-0l0,-1l1,0Zm-2,0l0,1l-1,-0l0,-1l1,0Zm-2,0l0,1l-1,-0l0,-1l1,0Zm-2,0l0,1l-1,-0l0,-1l1,0Zm-2,0l0,1l-1,-0l0,-1l1,0Zm-2,0l0,1l-1,-0l0,-1l1,0Zm-2,0l0,1l-1,0l0,-1l1,0Zm-2,0l0,1l-1,-0l0,-1l1,0Z" fill="#6a6bd3"/><path d="M131.002,26c0,-0 0.332,-0.637 0.613,-1l0.387,0l0,0.011c0,-0.004 0,-0.007 0,-0.011l1,0l0,1l-2,-0Zm0,1l1,-0l0,1l-1,-0l0,-1Zm0,2l1,0l0,1l-1,0l0,-1Zm0,2l1,0l0,1l-1,0l0,-1Zm0,2l1,0l0,1l-1,0l0,-1Zm0,2l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,1l-1,0l0,-1Zm0,2l1,0l0,1l-1,-0l0,-1Zm0,2l1,0l0,1l-1,0l0,-1Zm0,2l1,-0l0,1l-1,0l0,-1Zm0,2l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,2l-1,-0l0,-1l0.011,-0c-0.004,-0 -0.007,0 -0.011,0l0,-1Zm2,2l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l2,0l0,1l-1,-0l0,-0.011c0,0.004 0,0.007 0,0.011l-1,-0Zm2,-2l-1,0l0,-1l1,0l0,1Zm0,-2l-1,-0l0,-1l1,-0l0,1Zm0,-2l-1,-0l0,-1l1,-0l0,1Zm0,-2l-1,-0l0,-1l1,-0l0,1Zm0,-2l-1,0l0,-1l1,0l0,1Zm0,-2l-1,0l0,-1l1,-0l0,1Zm0,-2l-1,-0l0,-1l1,0l0,1Zm0,-2l-1,-0l0,-1l1,-0l0,1Zm0,-2l-1,0l0,-1l1,-0l0,1Zm0,-2l-1,0l0,-1l1,0l0,1Zm0,-2l-1,0l0,-2c0,0.943 1,1 1,1l0,1Zm-2,-2l0,1l-1,-0l0,-1l1,0Zm-2,0l0,1l-1,-0l0,-1l1,0Zm-2,0l0,1l-1,-0l0,-1l1,0Zm-2,0l0,1l-1,-0l0,-1l1,0Zm-2,0l0,1l-1,-0l0,-1l1,0Zm-2,0l0,1l-1,-0l0,-1l1,0Zm-2,0l0,1l-1,-0l0,-1l1,0Zm-2,0l0,1l-1,-0l0,-1l1,0Zm-2,0l0,1l-1,0l0,-1l1,0Zm-2,0l0,1l-1,-0l0,-1l1,0Z" fill="#6a6bd3"/><path d="M155.002,26c0,-0 0.332,-0.637 0.613,-1l0.387,0l0,0.011c0,-0.004 0,-0.007 0,-0.011l1,0l0,1l-2,-0Zm0,1l1,-0l0,1l-1,-0l0,-1Zm0,2l1,0l0,1l-1,0l0,-1Zm0,2l1,0l0,1l-1,0l0,-1Zm0,2l1,0l0,1l-1,0l0,-1Zm0,2l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,1l-1,0l0,-1Zm0,2l1,0l0,1l-1,-0l0,-1Zm0,2l1,0l0,1l-1,0l0,-1Zm0,2l1,-0l0,1l-1,0l0,-1Zm0,2l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,2l-1,-0l0,-1l0.011,-0c-0.004,-0 -0.007,0 -0.011,0l0,-1Zm2,2l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l2,0l0,1l-0.989,-0l-0.011,-0.011l0,0.011l-1,-0Zm2,-2l-1,0l0,-1l1,0l0,1Zm0,-2l-1,-0l0,-1l1,-0l0,1Zm0,-2l-1,-0l0,-1l1,-0l0,1Zm0,-2l-1,-0l0,-1l1,-0l0,1Zm0,-2l-1,0l0,-1l1,0l0,1Zm0,-2l-1,0l0,-1l1,-0l0,1Zm0,-2l-1,-0l0,-1l1,0l0,1Zm0,-2l-1,-0l0,-1l1,-0l0,1Zm0,-2l-1,0l0,-1l1,-0l0,1Zm0,-2l-1,0l0,-1l1,0l0,1Zm0,-2l-1,0l0,-2c0,0.943 1,1 1,1l0,1Zm-2,-2l0,1l-1,-0l0,-1l1,0Zm-2,0l0,1l-1,-0l0,-1l1,0Zm-2,0l0,1l-1,-0l0,-1l1,0Zm-2,0l0,1l-1,-0l0,-1l1,0Zm-2,0l0,1l-1,-0l0,-1l1,0Zm-2,0l0,1l-1,-0l0,-1l1,0Zm-2,0l0,1l-1,-0l0,-1l1,0Zm-2,0l0,1l-1,-0l0,-1l1,0Zm-2,0l0,1l-1,0l0,-1l1,0Zm-2,0l0,1l-1,-0l0,-1l1,0Z" fill="#6a6bd3"/><path d="M179.002,26c0,-0 0.332,-0.637 0.613,-1l0.387,0l0,0.011c0,-0.004 0,-0.007 0,-0.011l1,0l0,1l-2,-0Zm0,1l1,-0l0,1l-1,-0l0,-1Zm0,2l1,0l0,1l-1,0l0,-1Zm0,2l1,0l0,1l-1,0l0,-1Zm0,2l1,0l0,1l-1,0l0,-1Zm0,2l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,1l-1,0l0,-1Zm0,2l1,0l0,1l-1,-0l0,-1Zm0,2l1,0l0,1l-1,0l0,-1Zm0,2l1,-0l0,1l-1,0l0,-1Zm0,2l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,2l-1,-0l0,-1l0.011,-0c-0.004,-0 -0.007,0 -0.011,0l0,-1Zm2,2l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,0l0,1l-1,-0Zm2,-0l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l2,0l0,1l-1,-0l0,-0.011c0,0.004 0,0.007 0,0.011l-1,-0Zm2,-2l-1,0l0,-1l1,0l0,1Zm0,-2l-1,-0l0,-1l1,-0l0,1Zm0,-2l-1,-0l0,-1l1,-0l0,1Zm0,-2l-1,-0l0,-1l1,-0l0,1Zm0,-2l-1,0l0,-1l1,0l0,1Zm0,-2l-1,0l0,-1l1,-0l0,1Zm0,-2l-1,-0l0,-1l1,0l0,1Zm0,-2l-1,-0l0,-1l1,-0l0,1Zm0,-2l-1,0l0,-1l1,-0l0,1Zm0,-2l-1,0l0,-1l1,0l0,1Zm0,-2l-1,0l0,-2c0,0.943 1,1 1,1l0,1Zm-2,-2l0,1l-1,-0l0,-1l1,0Zm-2,0l0,1l-1,-0l0,-1l1,0Zm-2,0l0,1l-1,-0l0,-1l1,0Zm-2,0l0,1l-1,-0l0,-1l1,0Zm-2,0l0,1l-1,-0l0,-1l1,0Zm-2,0l0,1l-1,-0l0,-1l1,0Zm-2,0l0,1l-1,-0l0,-1l1,0Zm-2,0l0,1l-1,-0l0,-1l1,0Zm-2,0l0,1l-1,0l0,-1l1,0Zm-2,0l0,1l-1,-0l0,-1l1,0Z" fill="#6a6bd3"/><path d="M194.002,35c0,1.646 -1.354,3 -3,3c-1.646,-0 -3,-1.354 -3,-3c0,-1.646 1.354,-3 3,-3c1.646,-0 3,1.354 3,3Z" fill-rule="nonzero"/><path d="M183.002,37c0,-4.389 3.611,-8 8,-8c4.389,-0 8,3.611 8,8c0,4.389 -3.611,8 -8,8c-4.389,-0 -8,-3.611 -8,-8Zm8,-7c-3.84,0 -7,3.16 -7,7c0,1.588 0.541,3.13 1.532,4.37c0.71,-1.144 2.273,-2.37 5.468,-2.37c3.195,-0 4.757,1.225 5.468,2.37c0.991,-1.24 1.532,-2.782 1.532,-4.37c-0,-3.84 -3.16,-7 -7,-7Z"/><path d="M168.537,30.016c0.132,-0.001 0.26,0.052 0.354,0.146l4.95,4.95c0.194,0.194 0.194,0.513 -0,0.707c-0.48,0.48 -1.072,0.588 -1.503,0.588c-0.177,-0 -0.335,-0.018 -0.46,-0.039l-3.134,3.134c0.082,0.332 0.136,0.671 0.16,1.013c0.046,0.702 -0.032,1.687 -0.72,2.375c-0.194,0.194 -0.513,0.194 -0.707,-0l-2.829,-2.828l-3.182,3.182c-0.195,0.195 -1.219,0.902 -1.414,0.707c-0.195,-0.195 0.512,-1.22 0.707,-1.414l3.182,-3.182l-2.828,-2.829c-0.194,-0.194 -0.194,-0.513 -0,-0.707c0.688,-0.688 1.673,-0.767 2.375,-0.72c0.341,0.024 0.68,0.077 1.013,0.16l3.134,-3.133c-0.026,-0.153 -0.04,-0.307 -0.04,-0.461c-0,-0.43 0.108,-1.022 0.589,-1.503c0.093,-0.094 0.22,-0.146 0.353,-0.146Z" fill-rule="nonzero"/><path d="M135.052,32.555c0.207,-0.907 1.02,-1.555 1.95,-1.555l12,0c0.93,-0 1.743,0.648 1.95,1.555l-7.95,4.859l-7.95,-4.859Zm-0.05,1.142l0,7.104l5.803,-3.558l-5.803,-3.546Zm6.761,4.133l-6.57,4.026c0.331,0.698 1.037,1.145 1.809,1.144l6.256,0c-0.17,-0.482 -0.256,-0.989 -0.256,-1.5c-0.001,-1.329 0.587,-2.592 1.606,-3.446l-0.367,-0.225l-1.239,0.757l-1.239,-0.757l0,0.001Zm9.239,-4.133l0,4.974c-0.853,-1.057 -2.141,-1.672 -3.5,-1.671c-0.681,-0.001 -1.352,0.153 -1.965,0.45l-0.338,-0.207l5.803,-3.546Z" fill-rule="nonzero"/><path d="M151.002,41.5c0,1.92 -1.58,3.5 -3.5,3.5c-1.92,0 -3.5,-1.58 -3.5,-3.5c0,-1.92 1.58,-3.5 3.5,-3.5c1.92,0 3.5,1.58 3.5,3.5Zm-3.5,-2c-0.274,0 -0.5,0.226 -0.5,0.5l0,1l-1,0c-0.274,0 -0.5,0.226 -0.5,0.5c0,0.274 0.226,0.5 0.5,0.5l1,0l0,1c0,0.274 0.226,0.5 0.5,0.5c0.274,0 0.5,-0.226 0.5,-0.5l0,-1l1,0c0.274,0 0.5,-0.226 0.5,-0.5c0,-0.274 -0.226,-0.5 -0.5,-0.5l-1,0l0,-1c0,-0.274 -0.226,-0.5 -0.5,-0.5Z" fill-rule="nonzero"/><path d="M119.709,30.395c-0.388,-0.387 -1.026,-0.387 -1.414,0l-6.647,6.646c-0.094,0.094 -0.147,0.222 -0.147,0.354c0,0.275 0.226,0.501 0.501,0.501c0.133,0 0.26,-0.053 0.354,-0.147l6.646,-6.647l6.646,6.647c0.094,0.094 0.221,0.147 0.354,0.147c0.275,0 0.501,-0.226 0.501,-0.501c-0,-0.132 -0.053,-0.26 -0.147,-0.354l-2.354,-2.353l0,-3.293c0,-0.274 -0.226,-0.5 -0.5,-0.5l-1,0c-0.274,0 -0.5,0.226 -0.5,0.5l0,1.293l-2.293,-2.293Z" fill-rule="nonzero"/><path d="M119.002,32.188l6,6l0,4.207c0,0.823 -0.677,1.5 -1.5,1.5l-9,0c-0.823,0 -1.5,-0.677 -1.5,-1.5l0,-4.207l6,-6Z" fill-rule="nonzero"/><path d="M95.002,29c4.389,-0 8,3.611 8,8c0,4.389 -3.611,8 -8,8c-4.389,0 -8,-3.611 -8,-8c0,-4.389 3.611,-8 8,-8Zm-3.5,7.5c-0.274,0 -0.5,0.226 -0.5,0.5c0,0.274 0.226,0.5 0.5,0.5l5.793,0l-2.147,2.146c-0.094,0.094 -0.147,0.221 -0.147,0.354c0,0.275 0.226,0.501 0.501,0.501c0.133,-0 0.26,-0.053 0.354,-0.147l3,-3c0.094,-0.094 0.147,-0.221 0.147,-0.354c0,-0.133 -0.053,-0.26 -0.147,-0.354l-3,-3c-0.094,-0.094 -0.221,-0.147 -0.354,-0.147c-0.275,0 -0.501,0.226 -0.501,0.501c0,0.133 0.053,0.26 0.147,0.354l2.147,2.146l-5.793,0Z" fill-rule="nonzero"/><path d="M71.002,29c-4.389,-0 -8,3.611 -8,8c0,4.389 3.611,8 8,8c4.389,0 8,-3.611 8,-8c0,-4.389 -3.611,-8 -8,-8Zm3.5,7.5c0.274,0 0.5,0.226 0.5,0.5c0,0.274 -0.226,0.5 -0.5,0.5l-5.793,0l2.147,2.146c0.094,0.094 0.147,0.221 0.147,0.354c-0,0.275 -0.226,0.501 -0.501,0.501c-0.133,-0 -0.26,-0.053 -0.354,-0.147l-3,-3c-0.094,-0.094 -0.147,-0.221 -0.147,-0.354c0,-0.133 0.053,-0.26 0.147,-0.354l3,-3c0.094,-0.094 0.221,-0.147 0.354,-0.147c0.275,0 0.501,0.226 0.501,0.501c-0,0.133 -0.053,0.26 -0.147,0.354l-2.147,2.146l5.793,0Z" fill-rule="nonzero"/><path d="M53.502,25.5l-8,-0" fill="none" stroke="#000" stroke-width="1px" stroke-miterlimit="10"/><path d="M53.502,48.5l-8,0" fill="none" stroke="#000" stroke-width="1px" stroke-miterlimit="10"/><path d="M49.502,25.5l0,23" fill="none" stroke="#000" stroke-width="1px"/><path d="M59.502,54.5l0,8" fill="none" stroke="#000" stroke-width="1px" stroke-miterlimit="10"/><path d="M82.502,54.5l0,8" fill="none" stroke="#000" stroke-width="1px" stroke-miterlimit="10"/><path d="M59.502,58.5l23,0" fill="none" stroke="#000" stroke-width="1px"/><g transform="matrix(1,0,0,1,-139.535,-173.468)"><path d="M0.129,-0.458c-0.003,-0.085 0.039,-0.176 0.138,-0.176c0.075,-0 0.137,0.051 0.137,0.128c0,0.098 -0.061,0.142 -0.181,0.216c-0.1,0.062 -0.185,0.122 -0.199,0.29l0.463,-0l-0,-0.075l-0.364,0c0.017,-0.088 0.11,-0.133 0.199,-0.187c0.088,-0.055 0.172,-0.118 0.172,-0.243c-0,-0.132 -0.098,-0.204 -0.222,-0.204c-0.15,0 -0.235,0.107 -0.228,0.251l0.085,-0Z" fill="#196721" fill-rule="nonzero" transform="matrix(12,0,0,12,154.861,213.245)"/><path d="M0.419,-0.709l-0.068,0l-0.323,0.461l0,0.082l0.311,-0l0,0.166l0.08,-0l-0,-0.166l0.096,-0l-0,-0.075l-0.096,0l-0,-0.468Zm-0.318,0.468l0.236,-0.347l0.002,0l0,0.347l-0.238,0Z" fill="#196721" fill-rule="nonzero" transform="matrix(12,0,0,12,161.533,213.245)"/><path d="M0.467,-0.263c0,0.101 -0.039,0.2 -0.155,0.2c-0.117,0 -0.163,-0.094 -0.163,-0.196c-0,-0.097 0.044,-0.195 0.158,-0.195c0.11,-0 0.16,0.094 0.16,0.191Zm-0.4,0.461l0.085,-0l-0,-0.267l0.002,0c0.038,0.061 0.114,0.081 0.167,0.081c0.158,-0 0.236,-0.123 0.236,-0.269c-0,-0.146 -0.079,-0.272 -0.238,-0.272c-0.071,0 -0.137,0.025 -0.165,0.082l-0.002,-0l-0,-0.07l-0.085,0l0,0.715Z" fill="#196721" fill-rule="nonzero" transform="matrix(12,0,0,12,168.205,213.245)"/><path d="M0.009,-0l0.103,-0l0.144,-0.215l0.144,0.215l0.109,-0l-0.2,-0.28l0.178,-0.237l-0.102,0l-0.129,0.18l-0.124,-0.18l-0.109,0l0.18,0.245l-0.194,0.272Z" fill="#196721" fill-rule="nonzero" transform="matrix(12,0,0,12,175.321,213.245)"/><rect x="154.861" y="214.145" width="26.676" height="0.6" fill="#196721"/></g><g transform="matrix(1,0,0,1,-97.2245,-139.677)"><path d="M0.129,-0.458c-0.003,-0.085 0.039,-0.176 0.138,-0.176c0.075,-0 0.137,0.051 0.137,0.128c0,0.098 -0.061,0.142 -0.181,0.216c-0.1,0.062 -0.185,0.122 -0.199,0.29l0.463,-0l-0,-0.075l-0.364,0c0.017,-0.088 0.11,-0.133 0.199,-0.187c0.088,-0.055 0.172,-0.118 0.172,-0.243c-0,-0.132 -0.098,-0.204 -0.222,-0.204c-0.15,0 -0.235,0.107 -0.228,0.251l0.085,-0Z" fill="#196721" fill-rule="nonzero" transform="matrix(12,0,0,12,155.078,213.245)"/><path d="M0.419,-0.709l-0.068,0l-0.323,0.461l0,0.082l0.311,-0l0,0.166l0.08,-0l-0,-0.166l0.096,-0l-0,-0.075l-0.096,0l-0,-0.468Zm-0.318,0.468l0.236,-0.347l0.002,0l0,0.347l-0.238,0Z" fill="#196721" fill-rule="nonzero" transform="matrix(12,0,0,12,161.75,213.245)"/><path d="M0.467,-0.263c0,0.101 -0.039,0.2 -0.155,0.2c-0.117,0 -0.163,-0.094 -0.163,-0.196c-0,-0.097 0.044,-0.195 0.158,-0.195c0.11,-0 0.16,0.094 0.16,0.191Zm-0.4,0.461l0.085,-0l-0,-0.267l0.002,0c0.038,0.061 0.114,0.081 0.167,0.081c0.158,-0 0.236,-0.123 0.236,-0.269c-0,-0.146 -0.079,-0.272 -0.238,-0.272c-0.071,0 -0.137,0.025 -0.165,0.082l-0.002,-0l-0,-0.07l-0.085,0l0,0.715Z" fill="#196721" fill-rule="nonzero" transform="matrix(12,0,0,12,168.422,213.245)"/><path d="M0.009,-0l0.103,-0l0.144,-0.215l0.144,0.215l0.109,-0l-0.2,-0.28l0.178,-0.237l-0.102,0l-0.129,0.18l-0.124,-0.18l-0.109,0l0.18,0.245l-0.194,0.272Z" fill="#196721" fill-rule="nonzero" transform="matrix(12,0,0,12,175.538,213.245)"/><rect x="155.078" y="214.145" width="26.676" height="0.6" fill="#196721"/></g><path d="M254.141,43.779l4.398,-0l-0,-4.32l2.601,-0c3.28,-0 5.599,-1.619 5.599,-5.079c-0,-2.041 -1.359,-4.879 -5.238,-4.879l-7.36,0l0,14.278Zm4.398,-10.62l1.961,-0c1.081,-0 2.081,0.08 2.081,1.381c0,1.441 -1.2,1.521 -2.341,1.521l-1.701,0l-0,-2.902Z" fill="#196721" fill-rule="nonzero"/><path d="M271.46,38.681l1.38,-4.4l0.04,0l1.28,4.4l-2.7,0Zm-6.019,5.098l4.42,-0l0.639,-2.04l4.54,-0l0.6,2.04l4.559,-0l-5.199,-14.278l-4.3,0l-5.259,14.278Z" fill="#196721" fill-rule="nonzero"/><path d="M280.281,38.981c0.04,4.558 4.658,5.138 6.279,5.138c3.181,-0 6.599,-1.199 6.599,-4.918c-0,-2.621 -1.999,-3.562 -4.018,-4.122c-2.021,-0.56 -4.062,-0.78 -4.142,-1.8c-0,-0.8 0.98,-0.96 1.581,-0.96c0.44,-0 0.941,0.1 1.301,0.36c0.36,0.24 0.6,0.6 0.52,1.14l4.158,-0c-0.12,-3.478 -2.859,-4.658 -5.959,-4.658c-2.94,0 -5.759,1.419 -5.759,4.718c0,2.881 2.579,3.501 4.838,4.141c2.462,0.7 3.082,0.901 3.082,1.641c0,1.06 -1.1,1.3 -1.821,1.3c-0.82,0 -1.781,-0.18 -2.101,-1.04c-0.1,-0.26 -0.16,-0.58 -0.16,-0.94l-4.398,-0Z" fill="#196721" fill-rule="nonzero"/><path d="M293.621,38.981c0.04,4.558 4.658,5.138 6.279,5.138c3.181,-0 6.599,-1.199 6.599,-4.918c-0,-2.621 -1.999,-3.562 -4.018,-4.122c-2.021,-0.56 -4.062,-0.78 -4.142,-1.8c-0,-0.8 0.98,-0.96 1.581,-0.96c0.44,-0 0.941,0.1 1.301,0.36c0.36,0.24 0.6,0.6 0.52,1.14l4.158,-0c-0.12,-3.478 -2.859,-4.658 -5.959,-4.658c-2.94,0 -5.759,1.419 -5.759,4.718c0,2.881 2.579,3.501 4.838,4.141c2.462,0.7 3.082,0.901 3.082,1.641c0,1.06 -1.1,1.3 -1.821,1.3c-0.82,0 -1.781,-0.18 -2.101,-1.04c-0.1,-0.26 -0.16,-0.58 -0.16,-0.94l-4.398,-0Z" fill="#196721" fill-rule="nonzero"/><path d="M59,111c0,-0 0.332,-0.638 0.613,-1l0.387,-0l0,0.011c0,-0.004 -0,-0.008 -0,-0.011l1,-0l0,1l-2,-0Zm0,1l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l-0,2l-1,-0l0,-1l0.011,-0c-0.004,-0 -0.007,-0 -0.011,-0l0,-1Zm2,2l0,-1l1,-0l0,1l-1,-0Zm2,-0l-0,-1l1,-0l-0,1l-1,-0Zm2,-0l-0,-1l1,-0l-0,1l-1,-0Zm2,-0l-0,-1l1,-0l-0,1l-1,-0Zm2,-0l-0,-1l1,-0l-0,1l-1,-0Zm2,-0l-0,-1l1,-0l-0,1l-1,-0Zm2,-0l0,-1l1,-0l-0,1l-1,-0Zm2,-0l-0,-1l1,-0l-0,1l-1,-0Zm2,-0l-0,-1l2,-0l0,1l-1,-0l-0,-0.011c-0,0.003 0,0.007 0,0.011l-1,-0Zm2,-2l-1,-0l0,-1l1,-0l0,1Zm0,-2l-1,-0l0,-1l1,-0l0,1Zm0,-2l-1,-0l0,-1l1,-0l0,1Zm0,-2l-1,-0l0,-1l1,-0l0,1Zm0,-2l-1,-0l0,-1l1,-0l0,1Zm0,-2l-1,-0l0,-1l1,-0l0,1Zm0,-2l-1,-0l0,-1l1,-0l0,1Zm0,-2l-1,-0l0,-1l1,-0l0,1Zm0,-2l-1,-0l0,-2c0,0.942 1,1 1,1l0,1Zm-2,-2l-0,1l-1,-0l-0,-1l1,-0Zm-2,-0l0,1l-1,-0l0,-1l1,-0Zm-2,-0l0,1l-1,-0l0,-1l1,-0Zm-2,-0l0,1l-1,-0l0,-1l1,-0Zm-2,-0l0,1l-1,-0l0,-1l1,-0Zm-2,-0l0,1l-1,-0l0,-1l1,-0Zm-2,-0l-0,1l-1,-0l0,-1l1,-0Zm-2,-0l0,1l-1,-0l0,-1l1,-0Z" fill="#6a6bd3"/><path d="M83,111c0,-0 0.332,-0.638 0.613,-1l0.387,-0l0,0.011c0,-0.004 -0,-0.008 -0,-0.011l1,-0l0,1l-2,-0Zm0,1l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l-0,2l-1,-0l0,-1l0.011,-0c-0.004,-0 -0.007,-0 -0.011,-0l0,-1Zm2,2l0,-1l1,-0l0,1l-1,-0Zm2,-0l-0,-1l1,-0l-0,1l-1,-0Zm2,-0l-0,-1l1,-0l-0,1l-1,-0Zm2,-0l-0,-1l1,-0l-0,1l-1,-0Zm2,-0l-0,-1l1,-0l-0,1l-1,-0Zm2,-0l-0,-1l1,-0l-0,1l-1,-0Zm2,-0l0,-1l1,-0l-0,1l-1,-0Zm2,-0l-0,-1l1,-0l-0,1l-1,-0Zm2,-0l-0,-1l2,-0l0,1l-1,-0l-0,-0.011c-0,0.003 0,0.007 0,0.011l-1,-0Zm2,-2l-1,-0l0,-1l1,-0l0,1Zm0,-2l-1,-0l0,-1l1,-0l0,1Zm0,-2l-1,-0l0,-1l1,-0l0,1Zm0,-2l-1,-0l0,-1l1,-0l0,1Zm0,-2l-1,-0l0,-1l1,-0l0,1Zm0,-2l-1,-0l0,-1l1,-0l0,1Zm0,-2l-1,-0l0,-1l1,-0l0,1Zm0,-2l-1,-0l0,-1l1,-0l0,1Zm0,-2l-1,-0l0,-2c0,0.942 1,1 1,1l0,1Zm-2,-2l-0,1l-1,-0l-0,-1l1,-0Zm-2,-0l0,1l-1,-0l0,-1l1,-0Zm-2,-0l0,1l-1,-0l0,-1l1,-0Zm-2,-0l0,1l-1,-0l0,-1l1,-0Zm-2,-0l0,1l-1,-0l0,-1l1,-0Zm-2,-0l0,1l-1,-0l0,-1l1,-0Zm-2,-0l-0,1l-1,-0l0,-1l1,-0Zm-2,-0l0,1l-1,-0l0,-1l1,-0Z" fill="#6a6bd3"/><path d="M107,111c0,-0 0.332,-0.638 0.613,-1l0.387,-0l0,0.011c0,-0.004 -0,-0.008 -0,-0.011l1,-0l0,1l-2,-0Zm0,1l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l-0,2l-1,-0l0,-1l0.011,-0c-0.004,-0 -0.007,-0 -0.011,-0l0,-1Zm2,2l0,-1l1,-0l0,1l-1,-0Zm2,-0l-0,-1l1,-0l-0,1l-1,-0Zm2,-0l-0,-1l1,-0l-0,1l-1,-0Zm2,-0l-0,-1l1,-0l-0,1l-1,-0Zm2,-0l-0,-1l1,-0l-0,1l-1,-0Zm2,-0l-0,-1l1,-0l-0,1l-1,-0Zm2,-0l0,-1l1,-0l-0,1l-1,-0Zm2,-0l-0,-1l1,-0l-0,1l-1,-0Zm2,-0l-0,-1l2,-0l0,1l-1,-0l-0,-0.011c-0,0.003 0,0.007 0,0.011l-1,-0Zm2,-2l-1,-0l0,-1l1,-0l0,1Zm0,-2l-1,-0l0,-1l1,-0l0,1Zm0,-2l-1,-0l0,-1l1,-0l0,1Zm0,-2l-1,-0l0,-1l1,-0l0,1Zm0,-2l-1,-0l0,-1l1,-0l0,1Zm0,-2l-1,-0l0,-1l1,-0l0,1Zm0,-2l-1,-0l0,-1l1,-0l0,1Zm0,-2l-1,-0l0,-1l1,-0l0,1Zm0,-2l-1,-0l0,-2c0,0.942 1,1 1,1l0,1Zm-2,-2l-0,1l-1,-0l-0,-1l1,-0Zm-2,-0l0,1l-1,-0l0,-1l1,-0Zm-2,-0l0,1l-1,-0l0,-1l1,-0Zm-2,-0l0,1l-1,-0l0,-1l1,-0Zm-2,-0l0,1l-1,-0l0,-1l1,-0Zm-2,-0l0,1l-1,-0l0,-1l1,-0Zm-2,-0l-0,1l-1,-0l0,-1l1,-0Zm-2,-0l0,1l-1,-0l0,-1l1,-0Z" fill="#6a6bd3"/><path d="M131,111c0,-0 0.332,-0.638 0.613,-1l0.387,-0l0,0.011c0,-0.004 -0,-0.008 -0,-0.011l1,-0l0,1l-2,-0Zm0,1l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l-0,2l-1,-0l0,-1l0.011,-0c-0.004,-0 -0.007,-0 -0.011,-0l0,-1Zm2,2l0,-1l1,-0l0,1l-1,-0Zm2,-0l-0,-1l1,-0l-0,1l-1,-0Zm2,-0l-0,-1l1,-0l-0,1l-1,-0Zm2,-0l-0,-1l1,-0l-0,1l-1,-0Zm2,-0l-0,-1l1,-0l-0,1l-1,-0Zm2,-0l-0,-1l1,-0l-0,1l-1,-0Zm2,-0l0,-1l1,-0l-0,1l-1,-0Zm2,-0l-0,-1l1,-0l-0,1l-1,-0Zm2,-0l-0,-1l2,-0l0,1l-1,-0l-0,-0.011c-0,0.003 0,0.007 0,0.011l-1,-0Zm2,-2l-1,-0l0,-1l1,-0l0,1Zm0,-2l-1,-0l0,-1l1,-0l0,1Zm0,-2l-1,-0l0,-1l1,-0l0,1Zm0,-2l-1,-0l0,-1l1,-0l0,1Zm0,-2l-1,-0l0,-1l1,-0l0,1Zm0,-2l-1,-0l0,-1l1,-0l0,1Zm0,-2l-1,-0l0,-1l1,-0l0,1Zm0,-2l-1,-0l0,-1l1,-0l0,1Zm0,-2l-1,-0l0,-2c0,0.942 1,1 1,1l0,1Zm-2,-2l-0,1l-1,-0l-0,-1l1,-0Zm-2,-0l0,1l-1,-0l0,-1l1,-0Zm-2,-0l0,1l-1,-0l0,-1l1,-0Zm-2,-0l0,1l-1,-0l0,-1l1,-0Zm-2,-0l0,1l-1,-0l0,-1l1,-0Zm-2,-0l0,1l-1,-0l0,-1l1,-0Zm-2,-0l-0,1l-1,-0l0,-1l1,-0Zm-2,-0l0,1l-1,-0l0,-1l1,-0Z" fill="#6a6bd3"/><path d="M155,111c0,-0 0.332,-0.638 0.613,-1l0.387,-0l0,0.011c0,-0.004 -0,-0.008 -0,-0.011l1,-0l0,1l-2,-0Zm0,1l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l-0,1l-1,-0l0,-1Zm0,2l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l-0,2l-1,-0l0,-1l0.011,-0c-0.004,-0 -0.007,-0 -0.011,-0l0,-1Zm2,2l0,-1l1,-0l0,1l-1,-0Zm2,-0l-0,-1l1,-0l-0,1l-1,-0Zm2,-0l-0,-1l1,-0l-0,1l-1,-0Zm2,-0l-0,-1l1,-0l-0,1l-1,-0Zm2,-0l-0,-1l1,-0l-0,1l-1,-0Zm2,-0l-0,-1l1,-0l-0,1l-1,-0Zm2,-0l0,-1l1,-0l-0,1l-1,-0Zm2,-0l-0,-1l1,-0l-0,1l-1,-0Zm2,-0l-0,-1l2,-0l-0,1l-1,-0l-0,-0.011c-0,0.003 0,0.007 0,0.011l-1,-0Zm2,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l0,-1l1,-0l-0,1Zm-0,-2l-1,-0l0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l0,-1l1,-0l-0,1Zm-0,-2l-1,-0l0,-2c0,0.942 1,1 1,1l-0,1Zm-2,-2l-0,1l-1,-0l-0,-1l1,-0Zm-2,-0l0,1l-1,-0l0,-1l1,-0Zm-2,-0l0,1l-1,-0l0,-1l1,-0Zm-2,-0l0,1l-1,-0l0,-1l1,-0Zm-2,-0l0,1l-1,-0l0,-1l1,-0Zm-2,-0l0,1l-1,-0l0,-1l1,-0Zm-2,-0l-0,1l-1,-0l0,-1l1,-0Zm-2,-0l0,1l-1,-0l0,-1l1,-0Z" fill="#6a6bd3"/><path d="M179,111c0,-0 0.332,-0.638 0.613,-1l0.387,-0l0,0.011c0,-0.004 -0,-0.008 -0,-0.011l1,-0l0,1l-2,-0Zm0,1l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l-0,2l-1,-0l0,-1l0.011,-0c-0.004,-0 -0.007,-0 -0.011,-0l0,-1Zm2,2l0,-1l1,-0l0,1l-1,-0Zm2,-0l-0,-1l1,-0l-0,1l-1,-0Zm2,-0l-0,-1l1,-0l-0,1l-1,-0Zm2,-0l-0,-1l1,-0l-0,1l-1,-0Zm2,-0l-0,-1l1,-0l-0,1l-1,-0Zm2,-0l-0,-1l1,-0l-0,1l-1,-0Zm2,-0l0,-1l1,-0l-0,1l-1,-0Zm2,-0l-0,-1l1,-0l-0,1l-1,-0Zm2,-0l-0,-1l2,-0l-0,1l-1,-0l-0,-0.011c-0,0.003 0,0.007 0,0.011l-1,-0Zm2,-2l-1,-0l0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l0,-1l1,-0l-0,1Zm-0,-2l-1,-0l0,-1l1,-0l-0,1Zm-0,-2l-1,-0l0,-1l1,-0l-0,1Zm-0,-2l-1,-0l0,-1l1,-0l-0,1Zm-0,-2l-1,-0l0,-2c0,0.942 1,1 1,1l-0,1Zm-2,-2l-0,1l-1,-0l-0,-1l1,-0Zm-2,-0l0,1l-1,-0l0,-1l1,-0Zm-2,-0l0,1l-1,-0l0,-1l1,-0Zm-2,-0l0,1l-1,-0l0,-1l1,-0Zm-2,-0l0,1l-1,-0l0,-1l1,-0Zm-2,-0l0,1l-1,-0l0,-1l1,-0Zm-2,-0l-0,1l-1,-0l0,-1l1,-0Zm-2,-0l0,1l-1,-0l0,-1l1,-0Z" fill="#6a6bd3"/><path d="M192,118c-0,1.645 -1.354,3 -3,3c-1.646,-0 -3,-1.355 -3,-3c-0,-1.646 1.354,-3 3,-3c1.646,-0 3,1.354 3,3Z" fill-rule="nonzero"/><path d="M181,120c-0,-4.389 3.611,-8 8,-8c4.389,-0 8,3.611 8,8c-0,4.388 -3.611,8 -8,8c-4.389,-0 -8,-3.612 -8,-8Zm8,-7c-3.84,-0 -7,3.16 -7,7c0,1.588 0.541,3.129 1.532,4.37c0.71,-1.144 2.273,-2.37 5.468,-2.37c3.195,-0 4.757,1.225 5.468,2.37c0.991,-1.241 1.532,-2.782 1.532,-4.37c-0,-3.84 -3.16,-7 -7,-7Z"/><path d="M166.535,113.015c0.132,0 0.26,0.053 0.354,0.146l4.95,4.95c0.194,0.194 0.194,0.513 -0,0.707c-0.48,0.48 -1.072,0.588 -1.503,0.588c-0.177,0 -0.335,-0.018 -0.46,-0.039l-3.134,3.134c0.082,0.333 0.136,0.672 0.16,1.013c0.046,0.702 -0.032,1.687 -0.72,2.375c-0.194,0.194 -0.513,0.194 -0.707,0l-2.829,-2.828l-3.182,3.182c-0.195,0.195 -1.219,0.902 -1.414,0.707c-0.195,-0.195 0.512,-1.22 0.707,-1.414l3.182,-3.182l-2.828,-2.829c-0.194,-0.194 -0.194,-0.513 -0,-0.707c0.688,-0.688 1.673,-0.767 2.375,-0.72c0.341,0.024 0.68,0.078 1.013,0.16l3.134,-3.133c-0.027,-0.152 -0.04,-0.306 -0.04,-0.461c-0,-0.43 0.108,-1.022 0.589,-1.503c0.093,-0.093 0.22,-0.146 0.353,-0.146Z" fill-rule="nonzero"/><path d="M133.05,115.555c0.207,-0.907 1.02,-1.555 1.95,-1.555l12,-0c0.93,-0 1.743,0.648 1.95,1.555l-7.95,4.859l-7.95,-4.859Zm-0.05,1.142l-0,7.104l5.803,-3.558l-5.803,-3.546Zm6.761,4.133l-6.57,4.026c0.33,0.697 1.037,1.144 1.809,1.144l6.256,-0c-0.17,-0.482 -0.257,-0.989 -0.256,-1.5c-0.001,-1.329 0.587,-2.593 1.606,-3.446l-0.367,-0.225l-1.239,0.757l-1.239,-0.757l-0,0.001Zm9.239,-4.133l-0,4.974c-0.853,-1.058 -2.141,-1.673 -3.5,-1.671c-0.681,-0.001 -1.353,0.153 -1.965,0.45l-0.338,-0.207l5.803,-3.546Z" fill-rule="nonzero"/><path d="M149,124.5c-0,1.92 -1.58,3.5 -3.5,3.5c-1.92,-0 -3.5,-1.58 -3.5,-3.5c-0,-1.92 1.58,-3.5 3.5,-3.5c1.92,-0 3.5,1.58 3.5,3.5Zm-3.5,-2c-0.274,-0 -0.5,0.225 -0.5,0.5l-0,1l-1,-0c-0.274,-0 -0.5,0.225 -0.5,0.5c-0,0.274 0.226,0.5 0.5,0.5l1,-0l-0,1c-0,0.274 0.226,0.5 0.5,0.5c0.274,-0 0.5,-0.226 0.5,-0.5l-0,-1l1,-0c0.274,-0 0.5,-0.226 0.5,-0.5c-0,-0.275 -0.226,-0.5 -0.5,-0.5l-1,-0l-0,-1c-0,-0.275 -0.226,-0.5 -0.5,-0.5Z" fill-rule="nonzero"/><path d="M117.707,113.395c-0.388,-0.388 -1.026,-0.388 -1.414,0l-6.647,6.646c-0.094,0.094 -0.147,0.221 -0.147,0.354c0,0.275 0.226,0.501 0.501,0.501c0.133,-0 0.26,-0.053 0.354,-0.147l6.646,-6.647l6.646,6.647c0.094,0.094 0.221,0.147 0.354,0.147c0.275,-0 0.501,-0.226 0.501,-0.501c-0,-0.133 -0.053,-0.26 -0.147,-0.354l-2.354,-2.353l-0,-3.293c-0,-0.274 -0.226,-0.5 -0.5,-0.5l-1,0c-0.274,0 -0.5,0.226 -0.5,0.5l-0,1.293l-2.293,-2.293Z" fill-rule="nonzero"/><path d="M117,115.188l6,6l-0,4.207c-0,0.823 -0.677,1.5 -1.5,1.5l-9,0c-0.823,0 -1.5,-0.677 -1.5,-1.5l-0,-4.207l6,-6Z" fill-rule="nonzero"/><path d="M93,112c4.389,-0 8,3.611 8,8c0,4.388 -3.611,8 -8,8c-4.389,-0 -8,-3.612 -8,-8c0,-4.389 3.611,-8 8,-8Zm-3.5,7.5c-0.274,-0 -0.5,0.225 -0.5,0.5c0,0.274 0.226,0.5 0.5,0.5l5.793,-0l-2.147,2.146c-0.094,0.093 -0.147,0.221 -0.147,0.354c0,0.274 0.226,0.5 0.501,0.5c0.133,0 0.26,-0.053 0.354,-0.146l3,-3c0.094,-0.094 0.147,-0.222 0.147,-0.354c-0,-0.133 -0.053,-0.261 -0.147,-0.354l-3,-3c-0.094,-0.094 -0.221,-0.147 -0.354,-0.147c-0.275,-0 -0.501,0.226 -0.501,0.501c0,0.132 0.053,0.26 0.147,0.354l2.147,2.146l-5.793,-0Z" fill-rule="nonzero"/><path d="M69,112c-4.389,-0 -8,3.611 -8,8c0,4.388 3.611,8 8,8c4.389,-0 8,-3.612 8,-8c0,-4.389 -3.611,-8 -8,-8Zm3.5,7.5c0.274,-0 0.5,0.225 0.5,0.5c0,0.274 -0.226,0.5 -0.5,0.5l-5.793,-0l2.147,2.146c0.094,0.093 0.147,0.221 0.147,0.354c-0,0.274 -0.226,0.5 -0.501,0.5c-0.133,0 -0.26,-0.053 -0.354,-0.146l-3,-3c-0.094,-0.094 -0.147,-0.222 -0.147,-0.354c0,-0.133 0.053,-0.261 0.147,-0.354l3,-3c0.094,-0.094 0.221,-0.147 0.354,-0.147c0.275,-0 0.501,0.226 0.501,0.501c-0,0.132 -0.053,0.26 -0.147,0.354l-2.147,2.146l5.793,-0Z" fill-rule="nonzero"/><path d="M53.5,110.5l-8,-0" fill="none" stroke="#000" stroke-width="1px" stroke-miterlimit="10"/><path d="M53.5,129.5l-8,-0" fill="none" stroke="#000" stroke-width="1px" stroke-miterlimit="10"/><path d="M49.5,110.5l0,19" fill="none" stroke="#000" stroke-width="1px"/><path d="M59.5,135.5l0,8" fill="none" stroke="#000" stroke-width="1px" stroke-miterlimit="10"/><path d="M78.5,135.5l0,8" fill="none" stroke="#000" stroke-width="1px" stroke-miterlimit="10"/><path d="M59.5,139.5l19,-0" fill="none" stroke="#000" stroke-width="1px"/><path d="M16.871,117.28c-0.036,-1.02 0.468,-2.112 1.657,-2.112c0.9,-0 1.645,0.612 1.645,1.536c-0,1.176 -0.733,1.704 -2.173,2.592c-1.201,0.745 -2.219,1.465 -2.387,3.48l5.554,-0l0,-0.899l-4.368,0c0.204,-1.056 1.321,-1.596 2.389,-2.244c1.057,-0.661 2.063,-1.417 2.063,-2.917c0,-1.584 -1.174,-2.447 -2.663,-2.447c-1.801,0 -2.819,1.283 -2.735,3.011l1.018,0Z" fill-rule="nonzero"/><path d="M22.501,118.6c-0,1.873 0.168,4.32 2.831,4.32c2.663,-0 2.831,-2.447 2.831,-4.32c0,-1.884 -0.168,-4.331 -2.831,-4.331c-2.663,0 -2.831,2.447 -2.831,4.331Zm1.078,-0.012c0,-1.26 0.012,-3.42 1.753,-3.42c1.741,-0 1.753,2.16 1.753,3.42c-0,1.273 -0.012,3.433 -1.753,3.433c-1.741,0 -1.753,-2.16 -1.753,-3.433Z" fill-rule="nonzero"/><path d="M34.273,119.62c-0,1.213 -0.468,2.401 -1.861,2.401c-1.405,0 -1.957,-1.128 -1.957,-2.353c0,-1.164 0.528,-2.34 1.897,-2.34c1.321,-0 1.921,1.128 1.921,2.292Zm-4.8,5.532l1.018,-0l0,-3.203l0.024,0c0.456,0.731 1.369,0.971 2.005,0.971c1.897,-0 2.831,-1.475 2.831,-3.228c0,-1.752 -0.946,-3.263 -2.855,-3.263c-0.852,0 -1.645,0.3 -1.981,0.983l-0.024,-0l0,-0.839l-1.018,0l-0,8.579Z" fill-rule="nonzero"/><path d="M35.893,122.776l1.235,-0l1.728,-2.578l1.728,2.578l1.307,-0l-2.399,-3.36l2.135,-2.843l-1.223,0l-1.548,2.162l-1.488,-2.162l-1.307,0l2.159,2.939l-2.327,3.264Z" fill-rule="nonzero"/><path d="M57.277,149.072c-0.036,-1.021 0.469,-2.113 1.657,-2.113c0.901,0 1.645,0.612 1.645,1.537c-0,1.176 -0.732,1.704 -2.173,2.592c-1.201,0.744 -2.219,1.464 -2.387,3.479l5.554,0l0,-0.898l-4.368,-0c0.204,-1.056 1.321,-1.597 2.389,-2.245c1.057,-0.66 2.063,-1.416 2.063,-2.916c0,-1.585 -1.174,-2.447 -2.663,-2.447c-1.801,-0 -2.819,1.282 -2.735,3.011l1.018,-0Z" fill-rule="nonzero"/><path d="M62.907,150.392c-0,1.872 0.168,4.319 2.831,4.319c2.664,0 2.831,-2.447 2.831,-4.319c0,-1.884 -0.167,-4.331 -2.831,-4.331c-2.663,-0 -2.831,2.447 -2.831,4.331Zm1.078,-0.012c0,-1.26 0.012,-3.421 1.753,-3.421c1.741,0 1.753,2.161 1.753,3.421c-0,1.272 -0.012,3.433 -1.753,3.433c-1.741,-0 -1.753,-2.161 -1.753,-3.433Z" fill-rule="nonzero"/><path d="M74.679,151.412c-0,1.212 -0.468,2.401 -1.861,2.401c-1.404,-0 -1.957,-1.129 -1.957,-2.353c0,-1.164 0.529,-2.341 1.897,-2.341c1.321,0 1.921,1.129 1.921,2.293Zm-4.8,5.531l1.018,0l0,-3.202l0.024,-0c0.457,0.731 1.369,0.97 2.005,0.97c1.897,0 2.831,-1.474 2.831,-3.227c0,-1.753 -0.946,-3.263 -2.855,-3.263c-0.852,-0 -1.645,0.299 -1.981,0.982l-0.024,0l0,-0.838l-1.018,-0l-0,8.578Z" fill-rule="nonzero"/><path d="M76.299,154.567l1.236,0l1.727,-2.577l1.728,2.577l1.307,0l-2.399,-3.36l2.135,-2.842l-1.223,-0l-1.548,2.161l-1.488,-2.161l-1.307,-0l2.159,2.938l-2.327,3.264Z" fill-rule="nonzero"/><path d="M78.081,98.561l-0.814,-0l-3.876,5.532l-0,0.982l3.732,0l-0,1.992l0.958,0l0,-1.992l1.152,0l0,-0.898l-1.152,-0l0,-5.616Zm-3.814,5.616l2.832,-4.164l0.024,-0l-0,4.164l-2.856,-0Z" fill-rule="nonzero"/><path d="M85.331,103.912c-0,1.212 -0.468,2.401 -1.861,2.401c-1.404,-0 -1.957,-1.129 -1.957,-2.353c0,-1.164 0.529,-2.341 1.897,-2.341c1.321,0 1.921,1.129 1.921,2.293Zm-4.8,5.531l1.018,0l0,-3.202l0.024,-0c0.457,0.731 1.369,0.97 2.005,0.97c1.897,0 2.831,-1.474 2.831,-3.227c0,-1.753 -0.946,-3.263 -2.855,-3.263c-0.852,-0 -1.644,0.299 -1.981,0.982l-0.024,0l0,-0.838l-1.018,-0l-0,8.578Z" fill-rule="nonzero"/><path d="M86.951,107.067l1.236,0l1.727,-2.577l1.728,2.577l1.307,0l-2.399,-3.36l2.136,-2.842l-1.224,-0l-1.548,2.161l-1.487,-2.161l-1.308,-0l2.159,2.938l-2.327,3.264Z" fill-rule="nonzero"/><path d="M254.141,126.779l4.398,-0l-0,-4.32l2.601,-0c3.28,-0 5.599,-1.619 5.599,-5.079c-0,-2.041 -1.359,-4.879 -5.238,-4.879l-7.36,0l0,14.278Zm4.398,-10.62l1.961,-0c1.081,-0 2.081,0.08 2.081,1.381c0,1.441 -1.2,1.521 -2.341,1.521l-1.701,0l-0,-2.902Z" fill="#196721" fill-rule="nonzero"/><path d="M271.46,121.681l1.38,-4.4l0.04,0l1.28,4.4l-2.7,0Zm-6.019,5.098l4.42,-0l0.639,-2.04l4.54,-0l0.6,2.04l4.559,-0l-5.199,-14.278l-4.3,0l-5.259,14.278Z" fill="#196721" fill-rule="nonzero"/><path d="M280.281,121.981c0.04,4.558 4.658,5.138 6.279,5.138c3.181,-0 6.599,-1.199 6.599,-4.918c-0,-2.621 -1.999,-3.562 -4.018,-4.122c-2.021,-0.56 -4.062,-0.78 -4.142,-1.8c-0,-0.8 0.98,-0.96 1.581,-0.96c0.44,-0 0.941,0.1 1.301,0.36c0.36,0.24 0.6,0.6 0.52,1.14l4.158,-0c-0.12,-3.478 -2.859,-4.658 -5.959,-4.658c-2.94,0 -5.759,1.419 -5.759,4.718c0,2.881 2.579,3.501 4.838,4.141c2.462,0.7 3.082,0.901 3.082,1.641c0,1.06 -1.1,1.3 -1.821,1.3c-0.82,0 -1.781,-0.18 -2.101,-1.04c-0.1,-0.26 -0.16,-0.58 -0.16,-0.94l-4.398,-0Z" fill="#196721" fill-rule="nonzero"/><path d="M293.621,121.981c0.04,4.558 4.658,5.138 6.279,5.138c3.181,-0 6.599,-1.199 6.599,-4.918c-0,-2.621 -1.999,-3.562 -4.018,-4.122c-2.021,-0.56 -4.062,-0.78 -4.142,-1.8c-0,-0.8 0.98,-0.96 1.581,-0.96c0.44,-0 0.941,0.1 1.301,0.36c0.36,0.24 0.6,0.6 0.52,1.14l4.158,-0c-0.12,-3.478 -2.859,-4.658 -5.959,-4.658c-2.94,0 -5.759,1.419 -5.759,4.718c0,2.881 2.579,3.501 4.838,4.141c2.462,0.7 3.082,0.901 3.082,1.641c0,1.06 -1.1,1.3 -1.821,1.3c-0.82,0 -1.781,-0.18 -2.101,-1.04c-0.1,-0.26 -0.16,-0.58 -0.16,-0.94l-4.398,-0Z" fill="#196721" fill-rule="nonzero"/><path d="M358.999,111c-0,-0 0.331,-0.638 0.612,-1l0.388,-0l-0,0.011c-0,-0.004 -0,-0.008 -0,-0.011l1,-0l-0,1l-2,-0Zm-0,1l1,-0l-0,1l-1,-0l-0,-1Zm-0,2l1,-0l-0,1l-1,-0l-0,-1Zm-0,2l1,-0l-0,1l-1,-0l-0,-1Zm-0,2l1,-0l-0,1l-1,-0l-0,-1Zm-0,2l1,-0l-0,1l-1,-0l-0,-1Zm-0,2l1,-0l-0,1l-1,-0l-0,-1Zm-0,2l1,-0l-0,1l-1,-0l-0,-1Zm-0,2l1,-0l-0,1l-1,-0l-0,-1Zm-0,2l1,-0l-0,2l-1,-0l-0,-1l0.01,-0c-0.003,-0 -0.007,-0 -0.01,-0l-0,-1Zm2,2l-0,-1l1,-0l-0,1l-1,-0Zm2,-0l-0,-1l1,-0l-0,1l-1,-0Zm2,-0l-0,-1l1,-0l-0,1l-1,-0Zm2,-0l-0,-1l1,-0l-0,1l-1,-0Zm2,-0l-0,-1l1,-0l-0,1l-1,-0Zm2,-0l-0,-1l1,-0l-0,1l-1,-0Zm2,-0l-0,-1l1,-0l-0,1l-1,-0Zm2,-0l-0,-1l1,-0l-0,1l-1,-0Zm2,-0l-0,-1l2,-0l-0,1l-0.99,-0l-0.01,-0.011l-0,0.011l-1,-0Zm2,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-2c-0,0.942 1,1 1,1l-0,1Zm-2,-2l-0,1l-1,-0l-0,-1l1,-0Zm-2,-0l-0,1l-1,-0l-0,-1l1,-0Zm-2,-0l-0,1l-1,-0l-0,-1l1,-0Zm-2,-0l-0,1l-1,-0l-0,-1l1,-0Zm-2,-0l-0,1l-1,-0l-0,-1l1,-0Zm-2,-0l-0,1l-1,-0l-0,-1l1,-0Zm-2,-0l-0,1l-1,-0l-0,-1l1,-0Zm-2,-0l-0,1l-1,-0l-0,-1l1,-0Z" fill="#6a6bd3"/><path d="M382.999,111c-0,-0 0.331,-0.638 0.612,-1l0.388,-0l-0,0.011c-0,-0.004 -0,-0.008 -0,-0.011l1,-0l-0,1l-2,-0Zm-0,1l1,-0l-0,1l-1,-0l-0,-1Zm-0,2l1,-0l-0,1l-1,-0l-0,-1Zm-0,2l1,-0l-0,1l-1,-0l-0,-1Zm-0,2l1,-0l-0,1l-1,-0l-0,-1Zm-0,2l1,-0l-0,1l-1,-0l-0,-1Zm-0,2l1,-0l-0,1l-1,-0l-0,-1Zm-0,2l1,-0l-0,1l-1,-0l-0,-1Zm-0,2l1,-0l-0,1l-1,-0l-0,-1Zm-0,2l1,-0l-0,2l-1,-0l-0,-1l0.01,-0c-0.003,-0 -0.007,-0 -0.01,-0l-0,-1Zm2,2l-0,-1l1,-0l-0,1l-1,-0Zm2,-0l-0,-1l1,-0l-0,1l-1,-0Zm2,-0l-0,-1l1,-0l-0,1l-1,-0Zm2,-0l-0,-1l1,-0l-0,1l-1,-0Zm2,-0l-0,-1l1,-0l-0,1l-1,-0Zm2,-0l-0,-1l1,-0l-0,1l-1,-0Zm2,-0l-0,-1l1,-0l-0,1l-1,-0Zm2,-0l-0,-1l1,-0l-0,1l-1,-0Zm2,-0l-0,-1l2,-0l-0,1l-1,-0l-0,-0.011c-0,0.003 -0,0.007 -0,0.011l-1,-0Zm2,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-2c-0,0.942 1,1 1,1l-0,1Zm-2,-2l-0,1l-1,-0l-0,-1l1,-0Zm-2,-0l-0,1l-1,-0l-0,-1l1,-0Zm-2,-0l-0,1l-1,-0l-0,-1l1,-0Zm-2,-0l-0,1l-1,-0l-0,-1l1,-0Zm-2,-0l-0,1l-1,-0l-0,-1l1,-0Zm-2,-0l-0,1l-1,-0l-0,-1l1,-0Zm-2,-0l-0,1l-1,-0l-0,-1l1,-0Zm-2,-0l-0,1l-1,-0l-0,-1l1,-0Z" fill="#6a6bd3"/><path d="M406.999,111c-0,-0 0.331,-0.638 0.612,-1l0.388,-0l-0,0.011c-0,-0.004 -0,-0.008 -0,-0.011l1,-0l-0,1l-2,-0Zm-0,1l1,-0l-0,1l-1,-0l-0,-1Zm-0,2l1,-0l-0,1l-1,-0l-0,-1Zm-0,2l1,-0l-0,1l-1,-0l-0,-1Zm-0,2l1,-0l-0,1l-1,-0l-0,-1Zm-0,2l1,-0l-0,1l-1,-0l-0,-1Zm-0,2l1,-0l-0,1l-1,-0l-0,-1Zm-0,2l1,-0l-0,1l-1,-0l-0,-1Zm-0,2l1,-0l-0,1l-1,-0l-0,-1Zm-0,2l1,-0l-0,2l-1,-0l-0,-1l0.01,-0c-0.003,-0 -0.007,-0 -0.01,-0l-0,-1Zm2,2l-0,-1l1,-0l-0,1l-1,-0Zm2,-0l-0,-1l1,-0l-0,1l-1,-0Zm2,-0l-0,-1l1,-0l-0,1l-1,-0Zm2,-0l-0,-1l1,-0l-0,1l-1,-0Zm2,-0l-0,-1l1,-0l-0,1l-1,-0Zm2,-0l-0,-1l1,-0l-0,1l-1,-0Zm2,-0l-0,-1l1,-0l-0,1l-1,-0Zm2,-0l-0,-1l1,-0l-0,1l-1,-0Zm2,-0l-0,-1l2,-0l-0,1l-0.99,-0l-0.01,-0.011l-0,0.011l-1,-0Zm2,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-2c-0,0.942 1,1 1,1l-0,1Zm-2,-2l-0,1l-1,-0l-0,-1l1,-0Zm-2,-0l-0,1l-1,-0l-0,-1l1,-0Zm-2,-0l-0,1l-1,-0l-0,-1l1,-0Zm-2,-0l-0,1l-1,-0l-0,-1l1,-0Zm-2,-0l-0,1l-1,-0l-0,-1l1,-0Zm-2,-0l-0,1l-1,-0l-0,-1l1,-0Zm-2,-0l-0,1l-1,-0l-0,-1l1,-0Zm-2,-0l-0,1l-1,-0l-0,-1l1,-0Z" fill="#6a6bd3"/><path d="M430.999,111c-0,-0 0.331,-0.638 0.612,-1l0.388,-0l-0,0.011c-0,-0.004 -0,-0.008 -0,-0.011l1,-0l-0,1l-2,-0Zm-0,1l1,-0l-0,1l-1,-0l-0,-1Zm-0,2l1,-0l-0,1l-1,-0l-0,-1Zm-0,2l1,-0l-0,1l-1,-0l-0,-1Zm-0,2l1,-0l-0,1l-1,-0l-0,-1Zm-0,2l1,-0l-0,1l-1,-0l-0,-1Zm-0,2l1,-0l-0,1l-1,-0l-0,-1Zm-0,2l1,-0l-0,1l-1,-0l-0,-1Zm-0,2l1,-0l-0,1l-1,-0l-0,-1Zm-0,2l1,-0l-0,2l-1,-0l-0,-1l0.01,-0c-0.003,-0 -0.007,-0 -0.01,-0l-0,-1Zm2,2l-0,-1l1,-0l-0,1l-1,-0Zm2,-0l-0,-1l1,-0l-0,1l-1,-0Zm2,-0l-0,-1l1,-0l-0,1l-1,-0Zm2,-0l-0,-1l1,-0l-0,1l-1,-0Zm2,-0l-0,-1l1,-0l-0,1l-1,-0Zm2,-0l-0,-1l1,-0l-0,1l-1,-0Zm2,-0l-0,-1l1,-0l-0,1l-1,-0Zm2,-0l-0,-1l1,-0l-0,1l-1,-0Zm2,-0l-0,-1l2,-0l-0,1l-0.99,-0l-0.01,-0.011l-0,0.011l-1,-0Zm2,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-2c-0,0.942 1,1 1,1l-0,1Zm-2,-2l-0,1l-1,-0l-0,-1l1,-0Zm-2,-0l-0,1l-1,-0l-0,-1l1,-0Zm-2,-0l-0,1l-1,-0l-0,-1l1,-0Zm-2,-0l-0,1l-1,-0l-0,-1l1,-0Zm-2,-0l-0,1l-1,-0l-0,-1l1,-0Zm-2,-0l-0,1l-1,-0l-0,-1l1,-0Zm-2,-0l-0,1l-1,-0l-0,-1l1,-0Zm-2,-0l-0,1l-1,-0l-0,-1l1,-0Z" fill="#6a6bd3"/><path d="M454.999,111c-0,-0 0.331,-0.638 0.612,-1l0.388,-0l-0,0.011c-0,-0.004 -0,-0.008 -0,-0.011l1,-0l-0,1l-2,-0Zm-0,1l1,-0l-0,1l-1,-0l-0,-1Zm-0,2l1,-0l-0,1l-1,-0l-0,-1Zm-0,2l1,-0l-0,1l-1,-0l-0,-1Zm-0,2l1,-0l-0,1l-1,-0l-0,-1Zm-0,2l1,-0l-0,1l-1,-0l-0,-1Zm-0,2l1,-0l-0,1l-1,-0l-0,-1Zm-0,2l1,-0l-0,1l-1,-0l-0,-1Zm-0,2l1,-0l-0,1l-1,-0l-0,-1Zm-0,2l1,-0l-0,2l-1,-0l-0,-1l0.01,-0c-0.003,-0 -0.007,-0 -0.01,-0l-0,-1Zm2,2l-0,-1l1,-0l-0,1l-1,-0Zm2,-0l-0,-1l1,-0l-0,1l-1,-0Zm2,-0l-0,-1l1,-0l-0,1l-1,-0Zm2,-0l-0,-1l1,-0l-0,1l-1,-0Zm2,-0l-0,-1l1,-0l-0,1l-1,-0Zm2,-0l-0,-1l1,-0l-0,1l-1,-0Zm2,-0l-0,-1l1,-0l-0,1l-1,-0Zm2,-0l-0,-1l1,-0l-0,1l-1,-0Zm2,-0l-0,-1l2,-0l-0,1l-1,-0l-0,-0.011c-0,0.003 -0,0.007 -0,0.011l-1,-0Zm2,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-2c-0,0.942 1,1 1,1l-0,1Zm-2,-2l-0,1l-1,-0l-0,-1l1,-0Zm-2,-0l-0,1l-1,-0l-0,-1l1,-0Zm-2,-0l-0,1l-1,-0l-0,-1l1,-0Zm-2,-0l-0,1l-1,-0l-0,-1l1,-0Zm-2,-0l-0,1l-1,-0l-0,-1l1,-0Zm-2,-0l-0,1l-1,-0l-0,-1l1,-0Zm-2,-0l-0,1l-1,-0l-0,-1l1,-0Zm-2,-0l-0,1l-1,-0l-0,-1l1,-0Z" fill="#6a6bd3"/><path d="M478.999,111c-0,-0 0.331,-0.638 0.612,-1l0.388,-0l-0,0.011c-0,-0.004 -0,-0.008 -0,-0.011l1,-0l-0,1l-2,-0Zm-0,1l1,-0l-0,1l-1,-0l-0,-1Zm-0,2l1,-0l-0,1l-1,-0l-0,-1Zm-0,2l1,-0l-0,1l-1,-0l-0,-1Zm-0,2l1,-0l-0,1l-1,-0l-0,-1Zm-0,2l1,-0l-0,1l-1,-0l-0,-1Zm-0,2l1,-0l-0,1l-1,-0l-0,-1Zm-0,2l1,-0l-0,1l-1,-0l-0,-1Zm-0,2l1,-0l-0,1l-1,-0l-0,-1Zm-0,2l1,-0l-0,2l-1,-0l-0,-1l0.01,-0c-0.003,-0 -0.007,-0 -0.01,-0l-0,-1Zm2,2l-0,-1l1,-0l-0,1l-1,-0Zm2,-0l-0,-1l1,-0l-0,1l-1,-0Zm2,-0l-0,-1l1,-0l-0,1l-1,-0Zm2,-0l-0,-1l1,-0l-0,1l-1,-0Zm2,-0l-0,-1l1,-0l-0,1l-1,-0Zm2,-0l-0,-1l1,-0l-0,1l-1,-0Zm2,-0l-0,-1l1,-0l-0,1l-1,-0Zm2,-0l-0,-1l1,-0l-0,1l-1,-0Zm2,-0l-0,-1l2,-0l-0,1l-0.99,-0l-0.01,-0.011l-0,0.011l-1,-0Zm2,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-1l1,-0l-0,1Zm-0,-2l-1,-0l-0,-2c-0,0.942 1,1 1,1l-0,1Zm-2,-2l-0,1l-1,-0l-0,-1l1,-0Zm-2,-0l-0,1l-1,-0l-0,-1l1,-0Zm-2,-0l-0,1l-1,-0l-0,-1l1,-0Zm-2,-0l-0,1l-1,-0l-0,-1l1,-0Zm-2,-0l-0,1l-1,-0l-0,-1l1,-0Zm-2,-0l-0,1l-1,-0l-0,-1l1,-0Zm-2,-0l-0,1l-1,-0l-0,-1l1,-0Zm-2,-0l-0,1l-1,-0l-0,-1l1,-0Z" fill="#6a6bd3"/><path d="M491.999,118c-0,1.645 -1.355,3 -3,3c-1.646,-0 -3,-1.355 -3,-3c-0,-1.646 1.354,-3 3,-3c1.645,-0 3,1.354 3,3Z" fill-rule="nonzero"/><path d="M480.999,120c-0,-4.389 3.611,-8 8,-8c4.388,-0 8,3.611 8,8c-0,4.388 -3.612,8 -8,8c-4.389,-0 -8,-3.612 -8,-8Zm8,-7c-3.84,-0 -7,3.16 -7,7c-0,1.588 0.54,3.129 1.532,4.37c0.71,-1.144 2.273,-2.37 5.468,-2.37c3.195,-0 4.757,1.225 5.468,2.37c0.991,-1.241 1.531,-2.782 1.531,-4.37c0,-3.84 -3.159,-7 -6.999,-7Z"/><path d="M466.533,113.015c0.133,0 0.26,0.053 0.354,0.146l4.95,4.95c0.194,0.194 0.194,0.513 0,0.707c-0.48,0.48 -1.072,0.588 -1.503,0.588c-0.177,0 -0.335,-0.018 -0.46,-0.039l-3.134,3.134c0.083,0.333 0.136,0.672 0.16,1.013c0.046,0.702 -0.032,1.687 -0.72,2.375c-0.194,0.194 -0.513,0.194 -0.707,0l-2.829,-2.828l-3.182,3.182c-0.195,0.195 -1.219,0.902 -1.414,0.707c-0.195,-0.195 0.512,-1.22 0.707,-1.414l3.182,-3.182l-2.828,-2.829c-0.194,-0.194 -0.194,-0.513 0,-0.707c0.688,-0.688 1.673,-0.767 2.375,-0.72c0.342,0.024 0.681,0.078 1.013,0.16l3.134,-3.133c-0.026,-0.152 -0.039,-0.306 -0.04,-0.461c0,-0.43 0.108,-1.022 0.589,-1.503c0.094,-0.093 0.221,-0.146 0.353,-0.146Z" fill-rule="nonzero"/><path d="M433.049,115.555c0.206,-0.907 1.02,-1.555 1.95,-1.555l12,-0c0.929,-0 1.743,0.648 1.95,1.555l-7.95,4.859l-7.95,-4.859Zm-0.05,1.142l-0,7.104l5.803,-3.558l-5.803,-3.546Zm6.761,4.133l-6.57,4.026c0.33,0.697 1.036,1.144 1.809,1.144l6.256,-0c-0.17,-0.482 -0.257,-0.989 -0.256,-1.5c-0.002,-1.329 0.587,-2.593 1.606,-3.446l-0.367,-0.225l-1.239,0.757l-1.239,-0.757l-0,0.001Zm9.239,-4.133l-0,4.974c-0.854,-1.058 -2.142,-1.673 -3.5,-1.671c-0.681,-0.001 -1.353,0.153 -1.965,0.45l-0.338,-0.207l5.803,-3.546Z" fill-rule="nonzero"/><path d="M448.999,124.5c-0,1.92 -1.58,3.5 -3.5,3.5c-1.92,-0 -3.5,-1.58 -3.5,-3.5c-0,-1.92 1.58,-3.5 3.5,-3.5c1.92,-0 3.5,1.58 3.5,3.5Zm-3.5,-2c-0.275,-0 -0.5,0.225 -0.5,0.5l-0,1l-1,-0c-0.275,-0 -0.5,0.225 -0.5,0.5c-0,0.274 0.225,0.5 0.5,0.5l1,-0l-0,1c-0,0.274 0.225,0.5 0.5,0.5c0.274,-0 0.5,-0.226 0.5,-0.5l-0,-1l1,-0c0.274,-0 0.5,-0.226 0.5,-0.5c-0,-0.275 -0.226,-0.5 -0.5,-0.5l-1,-0l-0,-1c-0,-0.275 -0.226,-0.5 -0.5,-0.5Z" fill-rule="nonzero"/><path d="M417.706,113.395c-0.388,-0.388 -1.027,-0.388 -1.414,0l-6.647,6.646c-0.094,0.094 -0.147,0.221 -0.147,0.354c-0,0.275 0.226,0.501 0.501,0.501c0.132,-0 0.26,-0.053 0.354,-0.147l6.646,-6.647l6.646,6.647c0.093,0.094 0.221,0.147 0.354,0.147c0.274,-0 0.5,-0.226 0.5,-0.501c0,-0.133 -0.053,-0.26 -0.146,-0.354l-2.354,-2.353l-0,-3.293c-0,-0.274 -0.226,-0.5 -0.5,-0.5l-1,0c-0.275,0 -0.5,0.226 -0.5,0.5l-0,1.293l-2.293,-2.293Z" fill-rule="nonzero"/><path d="M416.999,115.188l6,6l-0,4.207c-0,0.823 -0.678,1.5 -1.5,1.5l-9,0c-0.823,0 -1.5,-0.677 -1.5,-1.5l-0,-4.207l6,-6Z" fill-rule="nonzero"/><path d="M392.999,112c4.388,-0 8,3.611 8,8c-0,4.388 -3.612,8 -8,8c-4.389,-0 -8,-3.612 -8,-8c-0,-4.389 3.611,-8 8,-8Zm-3.5,7.5c-0.275,-0 -0.5,0.225 -0.5,0.5c-0,0.274 0.225,0.5 0.5,0.5l5.793,-0l-2.147,2.146c-0.094,0.093 -0.147,0.221 -0.147,0.354c-0,0.274 0.226,0.5 0.501,0.5c0.132,0 0.26,-0.053 0.354,-0.146l3,-3c0.094,-0.094 0.146,-0.222 0.146,-0.354c0,-0.133 -0.052,-0.261 -0.146,-0.354l-3,-3c-0.094,-0.094 -0.222,-0.147 -0.354,-0.147c-0.275,-0 -0.501,0.226 -0.501,0.501c-0,0.132 0.053,0.26 0.147,0.354l2.147,2.146l-5.793,-0Z" fill-rule="nonzero"/><path d="M368.999,112c-4.389,-0 -8,3.611 -8,8c-0,4.388 3.611,8 8,8c4.388,-0 8,-3.612 8,-8c-0,-4.389 -3.612,-8 -8,-8Zm3.5,7.5c0.274,-0 0.5,0.225 0.5,0.5c-0,0.274 -0.226,0.5 -0.5,0.5l-5.793,-0l2.147,2.146c0.093,0.093 0.146,0.221 0.146,0.354c0,0.274 -0.226,0.5 -0.5,0.5c-0.133,0 -0.261,-0.053 -0.354,-0.146l-3,-3c-0.094,-0.094 -0.147,-0.222 -0.147,-0.354c-0,-0.133 0.053,-0.261 0.147,-0.354l3,-3c0.093,-0.094 0.221,-0.147 0.354,-0.147c0.274,-0 0.5,0.226 0.5,0.501c0,0.132 -0.053,0.26 -0.146,0.354l-2.147,2.146l5.793,-0Z" fill-rule="nonzero"/><path d="M357.499,135.5l-0,8" fill="none" stroke="#000" stroke-width="1px" stroke-miterlimit="10"/><path d="M380.499,135.5l-0,8" fill="none" stroke="#000" stroke-width="1px" stroke-miterlimit="10"/><path d="M357.499,139.5l23,-0" fill="none" stroke="#000" stroke-width="1px"/><g transform="matrix(1,0,0,1,200.901,-58.6766)"><path d="M0.129,-0.458c-0.003,-0.085 0.039,-0.176 0.138,-0.176c0.075,-0 0.137,0.051 0.137,0.128c0,0.098 -0.061,0.142 -0.181,0.216c-0.1,0.062 -0.185,0.122 -0.199,0.29l0.463,-0l-0,-0.075l-0.364,0c0.017,-0.088 0.11,-0.133 0.199,-0.187c0.088,-0.055 0.172,-0.118 0.172,-0.243c-0,-0.132 -0.098,-0.204 -0.222,-0.204c-0.15,0 -0.235,0.107 -0.228,0.251l0.085,-0Z" fill="#196721" fill-rule="nonzero" transform="matrix(12,0,0,12,154.828,213.245)"/><path d="M0.419,-0.709l-0.068,0l-0.323,0.461l0,0.082l0.311,-0l0,0.166l0.08,-0l-0,-0.166l0.096,-0l-0,-0.075l-0.096,0l-0,-0.468Zm-0.318,0.468l0.236,-0.347l0.002,0l0,0.347l-0.238,0Z" fill="#196721" fill-rule="nonzero" transform="matrix(12,0,0,12,161.5,213.245)"/><path d="M0.467,-0.263c0,0.101 -0.039,0.2 -0.155,0.2c-0.117,0 -0.163,-0.094 -0.163,-0.196c-0,-0.097 0.044,-0.195 0.158,-0.195c0.11,-0 0.16,0.094 0.16,0.191Zm-0.4,0.461l0.085,-0l-0,-0.267l0.002,0c0.038,0.061 0.114,0.081 0.167,0.081c0.158,-0 0.236,-0.123 0.236,-0.269c-0,-0.146 -0.079,-0.272 -0.238,-0.272c-0.071,0 -0.137,0.025 -0.165,0.082l-0.002,-0l-0,-0.07l-0.085,0l0,0.715Z" fill="#196721" fill-rule="nonzero" transform="matrix(12,0,0,12,168.172,213.245)"/><path d="M0.009,-0l0.103,-0l0.144,-0.215l0.144,0.215l0.109,-0l-0.2,-0.28l0.178,-0.237l-0.102,0l-0.129,0.18l-0.124,-0.18l-0.109,0l0.18,0.245l-0.194,0.272Z" fill="#196721" fill-rule="nonzero" transform="matrix(12,0,0,12,175.288,213.245)"/><rect x="154.828" y="214.145" width="26.676" height="0.6" fill="#196721"/></g><circle cx="369.002" cy="120" r="12" fill="#00ff41" fill-opacity=".2"/><path d="M369.002,108c6.623,0 12,5.377 12,12c0,6.623 -5.377,12 -12,12c-6.623,-0 -12,-5.377 -12,-12c0,-6.623 5.377,-12 12,-12Zm0,1c-6.071,0 -11,4.929 -11,11c0,6.071 4.929,11 11,11c6.071,-0 11,-4.929 11,-11c0,-6.071 -4.929,-11 -11,-11Z" fill="#1b7024"/><circle cx="393.002" cy="120" r="12" fill="#00ff41" fill-opacity=".2"/><path d="M393.002,108c6.623,0 12,5.377 12,12c0,6.623 -5.377,12 -12,12c-6.623,-0 -12,-5.377 -12,-12c0,-6.623 5.377,-12 12,-12Zm0,1c-6.071,0 -11,4.929 -11,11c0,6.071 4.929,11 11,11c6.071,-0 11,-4.929 11,-11c0,-6.071 -4.929,-11 -11,-11Z" fill="#1b7024"/><circle cx="417.002" cy="120" r="12" fill="#00ff41" fill-opacity=".2"/><path d="M417.002,108c6.623,0 12,5.377 12,12c0,6.623 -5.377,12 -12,12c-6.623,-0 -12,-5.377 -12,-12c0,-6.623 5.377,-12 12,-12Zm0,1c-6.071,0 -11,4.929 -11,11c0,6.071 4.929,11 11,11c6.071,-0 11,-4.929 11,-11c0,-6.071 -4.929,-11 -11,-11Z" fill="#1b7024"/><circle cx="441.002" cy="120" r="12" fill="#00ff41" fill-opacity=".2"/><path d="M441.002,108c6.623,0 12,5.377 12,12c0,6.623 -5.377,12 -12,12c-6.623,-0 -12,-5.377 -12,-12c0,-6.623 5.377,-12 12,-12Zm0,1c-6.071,0 -11,4.929 -11,11c0,6.071 4.929,11 11,11c6.071,-0 11,-4.929 11,-11c0,-6.071 -4.929,-11 -11,-11Z" fill="#1b7024"/><circle cx="465.002" cy="120" r="12" fill="#00ff41" fill-opacity=".2"/><path d="M465.002,108c6.623,0 12,5.377 12,12c0,6.623 -5.377,12 -12,12c-6.623,-0 -12,-5.377 -12,-12c0,-6.623 5.377,-12 12,-12Zm0,1c-6.071,0 -11,4.929 -11,11c0,6.071 4.929,11 11,11c6.071,-0 11,-4.929 11,-11c0,-6.071 -4.929,-11 -11,-11Z" fill="#1b7024"/><circle cx="489.002" cy="120" r="12" fill="#00ff41" fill-opacity=".2"/><path d="M489.002,108c6.623,0 12,5.377 12,12c0,6.623 -5.377,12 -12,12c-6.623,-0 -12,-5.377 -12,-12c0,-6.623 5.377,-12 12,-12Zm0,1c-6.071,0 -11,4.929 -11,11c0,6.071 4.929,11 11,11c6.071,-0 11,-4.929 11,-11c0,-6.071 -4.929,-11 -11,-11Z" fill="#1b7024"/><path d="M59.002,196c0,-0 0.332,-0.637 0.613,-1l0.387,-0l0,0.011c0,-0.004 0,-0.007 0,-0.011l1,-0l0,1l-2,-0Zm0,1l1,0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,2l-1,-0l0,-1l0.011,-0c-0.004,-0 -0.007,0 -0.011,0l0,-1Zm2,2l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l2,-0l0,1l-1,-0l0,-0.011c0,0.004 0,0.007 0,0.011l-1,-0Zm2,-2l-1,-0l0,-1l1,-0l0,1Zm0,-2l-1,0l0,-1l1,0l0,1Zm0,-2l-1,0l0,-1l1,0l0,1Zm0,-2l-1,0l0,-1l1,0l0,1Zm0,-2l-1,0l0,-1l1,0l0,1Zm0,-2l-1,0l0,-1l1,0l0,1Zm0,-2l-1,-0l0,-1l1,0l0,1Zm0,-2l-1,0l0,-1l1,0l0,1Zm0,-2l-1,0l0,-2c0,0.943 1,1 1,1l0,1Zm-2,-2l0,1l-1,-0l0,-1l1,-0Zm-2,-0l0,1l-1,-0l0,-1l1,-0Zm-2,-0l0,1l-1,-0l0,-1l1,-0Zm-2,-0l0,1l-1,-0l0,-1l1,-0Zm-2,-0l0,1l-1,-0l0,-1l1,-0Zm-2,-0l0,1l-1,-0l0,-1l1,-0Zm-2,-0l0,1l-1,-0l0,-1l1,-0Zm-2,-0l0,1l-1,-0l0,-1l1,-0Z" fill="#6a6bd3"/><path d="M79.002,196c0,-0 0.332,-0.637 0.613,-1l0.387,-0l0,0.011c0,-0.004 0,-0.007 0,-0.011l1,-0l0,1l-2,-0Zm0,1l1,0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,2l-1,-0l0,-1l0.011,-0c-0.004,-0 -0.007,0 -0.011,0l0,-1Zm2,2l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l2,-0l0,1l-1,-0l0,-0.011c0,0.004 0,0.007 0,0.011l-1,-0Zm2,-2l-1,-0l0,-1l1,-0l0,1Zm0,-2l-1,0l0,-1l1,0l0,1Zm0,-2l-1,0l0,-1l1,0l0,1Zm0,-2l-1,0l0,-1l1,0l0,1Zm0,-2l-1,0l0,-1l1,0l0,1Zm0,-2l-1,0l0,-1l1,0l0,1Zm0,-2l-1,-0l0,-1l1,0l0,1Zm0,-2l-1,0l0,-1l1,0l0,1Zm0,-2l-1,0l0,-2c0,0.943 1,1 1,1l0,1Zm-2,-2l0,1l-1,-0l0,-1l1,-0Zm-2,-0l0,1l-1,-0l0,-1l1,-0Zm-2,-0l0,1l-1,-0l0,-1l1,-0Zm-2,-0l0,1l-1,-0l0,-1l1,-0Zm-2,-0l0,1l-1,-0l0,-1l1,-0Zm-2,-0l0,1l-1,-0l0,-1l1,-0Zm-2,-0l0,1l-1,-0l0,-1l1,-0Zm-2,-0l0,1l-1,-0l0,-1l1,-0Z" fill="#6a6bd3"/><path d="M99.002,196c0,-0 0.332,-0.637 0.613,-1l0.387,-0l0,0.011c0,-0.004 0,-0.007 0,-0.011l1,-0l0,1l-2,-0Zm0,1l1,0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,2l-1,-0l0,-1l0.011,-0c-0.004,-0 -0.007,0 -0.011,0l0,-1Zm2,2l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l2,-0l0,1l-1,-0l0,-0.011c0,0.004 0,0.007 0,0.011l-1,-0Zm2,-2l-1,-0l0,-1l1,-0l0,1Zm0,-2l-1,0l0,-1l1,0l0,1Zm0,-2l-1,0l0,-1l1,0l0,1Zm0,-2l-1,0l0,-1l1,0l0,1Zm0,-2l-1,0l0,-1l1,0l0,1Zm0,-2l-1,0l0,-1l1,0l0,1Zm0,-2l-1,-0l0,-1l1,0l0,1Zm0,-2l-1,0l0,-1l1,0l0,1Zm0,-2l-1,0l0,-2c0,0.943 1,1 1,1l0,1Zm-2,-2l0,1l-1,-0l0,-1l1,-0Zm-2,-0l0,1l-1,-0l0,-1l1,-0Zm-2,-0l0,1l-1,-0l0,-1l1,-0Zm-2,-0l0,1l-1,-0l0,-1l1,-0Zm-2,-0l0,1l-1,-0l0,-1l1,-0Zm-2,-0l0,1l-1,-0l0,-1l1,-0Zm-2,-0l0,1l-1,-0l0,-1l1,-0Zm-2,-0l0,1l-1,-0l0,-1l1,-0Z" fill="#6a6bd3"/><path d="M119.002,196c0,-0 0.332,-0.637 0.613,-1l0.387,-0l0,0.011c0,-0.004 0,-0.007 0,-0.011l1,-0l0,1l-2,-0Zm0,1l1,0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,2l-1,-0l0,-1l0.011,-0c-0.004,-0 -0.007,0 -0.011,0l0,-1Zm2,2l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l2,-0l0,1l-1,-0l0,-0.011c0,0.004 0,0.007 0,0.011l-1,-0Zm2,-2l-1,-0l0,-1l1,-0l0,1Zm0,-2l-1,0l0,-1l1,0l0,1Zm0,-2l-1,0l0,-1l1,0l0,1Zm0,-2l-1,0l0,-1l1,0l0,1Zm0,-2l-1,0l0,-1l1,0l0,1Zm0,-2l-1,0l0,-1l1,0l0,1Zm0,-2l-1,-0l0,-1l1,0l0,1Zm0,-2l-1,0l0,-1l1,0l0,1Zm0,-2l-1,0l0,-2c0,0.943 1,1 1,1l0,1Zm-2,-2l0,1l-1,-0l0,-1l1,-0Zm-2,-0l0,1l-1,-0l0,-1l1,-0Zm-2,-0l0,1l-1,-0l0,-1l1,-0Zm-2,-0l0,1l-1,-0l0,-1l1,-0Zm-2,-0l0,1l-1,-0l0,-1l1,-0Zm-2,-0l0,1l-1,-0l0,-1l1,-0Zm-2,-0l0,1l-1,-0l0,-1l1,-0Zm-2,-0l0,1l-1,-0l0,-1l1,-0Z" fill="#6a6bd3"/><path d="M139.002,196c0,-0 0.332,-0.637 0.613,-1l0.387,-0l0,0.011c0,-0.004 0,-0.007 0,-0.011l1,-0l0,1l-2,-0Zm0,1l1,0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,2l-1,-0l0,-1l0.011,-0c-0.004,-0 -0.007,0 -0.011,0l0,-1Zm2,2l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l2,-0l0,1l-1,-0l0,-0.011c0,0.004 0,0.007 0,0.011l-1,-0Zm2,-2l-1,-0l0,-1l1,-0l0,1Zm0,-2l-1,0l0,-1l1,0l0,1Zm0,-2l-1,0l0,-1l1,0l0,1Zm0,-2l-1,0l0,-1l1,0l0,1Zm0,-2l-1,0l0,-1l1,0l0,1Zm0,-2l-1,0l0,-1l1,0l0,1Zm0,-2l-1,-0l0,-1l1,0l0,1Zm0,-2l-1,0l0,-1l1,0l0,1Zm0,-2l-1,0l0,-2c0,0.943 1,1 1,1l0,1Zm-2,-2l0,1l-1,-0l0,-1l1,-0Zm-2,-0l0,1l-1,-0l0,-1l1,-0Zm-2,-0l0,1l-1,-0l0,-1l1,-0Zm-2,-0l0,1l-1,-0l0,-1l1,-0Zm-2,-0l0,1l-1,-0l0,-1l1,-0Zm-2,-0l0,1l-1,-0l0,-1l1,-0Zm-2,-0l0,1l-1,-0l0,-1l1,-0Zm-2,-0l0,1l-1,-0l0,-1l1,-0Z" fill="#6a6bd3"/><path d="M159.002,196c0,-0 0.332,-0.637 0.613,-1l0.387,-0l0,0.011c0,-0.004 0,-0.007 0,-0.011l1,-0l0,1l-2,-0Zm0,1l1,0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,2l-1,-0l0,-1l0.011,-0c-0.004,-0 -0.007,0 -0.011,0l0,-1Zm2,2l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l2,-0l0,1l-0.989,-0l-0.011,-0.011l0,0.011l-1,-0Zm2,-2l-1,-0l0,-1l1,-0l0,1Zm0,-2l-1,0l0,-1l1,0l0,1Zm0,-2l-1,0l0,-1l1,0l0,1Zm0,-2l-1,0l0,-1l1,0l0,1Zm0,-2l-1,0l0,-1l1,0l0,1Zm0,-2l-1,0l0,-1l1,0l0,1Zm0,-2l-1,-0l0,-1l1,0l0,1Zm0,-2l-1,0l0,-1l1,0l0,1Zm0,-2l-1,0l0,-2c0,0.943 1,1 1,1l0,1Zm-2,-2l0,1l-1,-0l0,-1l1,-0Zm-2,-0l0,1l-1,-0l0,-1l1,-0Zm-2,-0l0,1l-1,-0l0,-1l1,-0Zm-2,-0l0,1l-1,-0l0,-1l1,-0Zm-2,-0l0,1l-1,-0l0,-1l1,-0Zm-2,-0l0,1l-1,-0l0,-1l1,-0Zm-2,-0l0,1l-1,-0l0,-1l1,-0Zm-2,-0l0,1l-1,-0l0,-1l1,-0Z" fill="#6a6bd3"/><path d="M172.002,203c0,1.646 -1.354,3 -3,3c-1.646,-0 -3,-1.354 -3,-3c0,-1.646 1.354,-3 3,-3c1.646,-0 3,1.354 3,3Z" fill-rule="nonzero"/><path d="M161.002,205c0,-4.389 3.611,-8 8,-8c4.389,-0 8,3.611 8,8c0,4.389 -3.611,8 -8,8c-4.389,-0 -8,-3.611 -8,-8Zm8,-7c-3.84,0 -7,3.16 -7,7c0,1.588 0.541,3.13 1.532,4.37c0.71,-1.144 2.273,-2.37 5.468,-2.37c3.195,-0 4.757,1.225 5.468,2.37c0.991,-1.24 1.532,-2.782 1.532,-4.37c-0,-3.84 -3.16,-7 -7,-7Z"/><path d="M150.537,198.016c0.132,-0.001 0.26,0.052 0.354,0.146l4.95,4.95c0.194,0.194 0.194,0.513 -0,0.707c-0.48,0.48 -1.072,0.588 -1.503,0.588c-0.177,-0 -0.335,-0.018 -0.46,-0.039l-3.134,3.134c0.082,0.332 0.136,0.671 0.16,1.013c0.046,0.702 -0.032,1.687 -0.72,2.375c-0.194,0.194 -0.513,0.194 -0.707,-0l-2.829,-2.828l-3.182,3.182c-0.195,0.195 -1.219,0.902 -1.414,0.707c-0.195,-0.195 0.512,-1.22 0.707,-1.414l3.182,-3.182l-2.828,-2.829c-0.194,-0.194 -0.194,-0.513 -0,-0.707c0.688,-0.688 1.673,-0.767 2.375,-0.72c0.341,0.024 0.68,0.077 1.013,0.16l3.134,-3.133c-0.026,-0.153 -0.04,-0.307 -0.04,-0.461c-0,-0.43 0.108,-1.022 0.589,-1.503c0.093,-0.094 0.22,-0.146 0.353,-0.146Z" fill-rule="nonzero"/><path d="M121.052,200.555c0.207,-0.907 1.02,-1.555 1.95,-1.555l12,-0c0.93,-0 1.743,0.648 1.95,1.555l-7.95,4.859l-7.95,-4.859Zm-0.05,1.142l0,7.104l5.803,-3.558l-5.803,-3.546Zm6.761,4.133l-6.57,4.026c0.331,0.698 1.037,1.145 1.809,1.144l6.256,-0c-0.17,-0.482 -0.256,-0.989 -0.256,-1.5c-0.001,-1.329 0.587,-2.592 1.606,-3.446l-0.367,-0.225l-1.239,0.757l-1.239,-0.757l0,0.001Zm9.239,-4.133l0,4.974c-0.853,-1.057 -2.141,-1.672 -3.5,-1.671c-0.681,-0.001 -1.352,0.153 -1.965,0.45l-0.338,-0.207l5.803,-3.546Z" fill-rule="nonzero"/><path d="M137.002,209.5c0,1.92 -1.58,3.5 -3.5,3.5c-1.92,-0 -3.5,-1.58 -3.5,-3.5c0,-1.92 1.58,-3.5 3.5,-3.5c1.92,-0 3.5,1.58 3.5,3.5Zm-3.5,-2c-0.274,-0 -0.5,0.226 -0.5,0.5l0,1l-1,-0c-0.274,-0 -0.5,0.226 -0.5,0.5c0,0.274 0.226,0.5 0.5,0.5l1,-0l0,1c0,0.274 0.226,0.5 0.5,0.5c0.274,-0 0.5,-0.226 0.5,-0.5l0,-1l1,-0c0.274,-0 0.5,-0.226 0.5,-0.5c0,-0.274 -0.226,-0.5 -0.5,-0.5l-1,-0l0,-1c0,-0.274 -0.226,-0.5 -0.5,-0.5Z" fill-rule="nonzero"/><path d="M109.709,198.395c-0.388,-0.387 -1.026,-0.387 -1.414,0l-6.647,6.646c-0.094,0.094 -0.147,0.222 -0.147,0.354c0,0.275 0.226,0.501 0.501,0.501c0.133,0 0.26,-0.053 0.354,-0.147l6.646,-6.647l6.646,6.647c0.094,0.094 0.221,0.147 0.354,0.147c0.275,0 0.501,-0.226 0.501,-0.501c-0,-0.132 -0.053,-0.26 -0.147,-0.354l-2.354,-2.353l0,-3.293c0,-0.274 -0.226,-0.5 -0.5,-0.5l-1,0c-0.274,0 -0.5,0.226 -0.5,0.5l0,1.293l-2.293,-2.293Z" fill-rule="nonzero"/><path d="M109.002,200.188l6,6l0,4.207c0,0.823 -0.677,1.5 -1.5,1.5l-9,0c-0.823,0 -1.5,-0.677 -1.5,-1.5l0,-4.207l6,-6Z" fill-rule="nonzero"/><path d="M89.002,197c4.389,-0 8,3.611 8,8c0,4.389 -3.611,8 -8,8c-4.389,-0 -8,-3.611 -8,-8c0,-4.389 3.611,-8 8,-8Zm-3.5,7.5c-0.274,-0 -0.5,0.226 -0.5,0.5c0,0.274 0.226,0.5 0.5,0.5l5.793,-0l-2.147,2.146c-0.094,0.094 -0.147,0.221 -0.147,0.354c0,0.275 0.226,0.501 0.501,0.501c0.133,-0 0.26,-0.053 0.354,-0.147l3,-3c0.094,-0.094 0.147,-0.221 0.147,-0.354c0,-0.133 -0.053,-0.26 -0.147,-0.354l-3,-3c-0.094,-0.094 -0.221,-0.147 -0.354,-0.147c-0.275,0 -0.501,0.226 -0.501,0.501c0,0.133 0.053,0.26 0.147,0.354l2.147,2.146l-5.793,-0Z" fill-rule="nonzero"/><path d="M69.002,197c-4.389,-0 -8,3.611 -8,8c0,4.389 3.611,8 8,8c4.389,-0 8,-3.611 8,-8c0,-4.389 -3.611,-8 -8,-8Zm3.5,7.5c0.274,-0 0.5,0.226 0.5,0.5c0,0.274 -0.226,0.5 -0.5,0.5l-5.793,-0l2.147,2.146c0.094,0.094 0.147,0.221 0.147,0.354c-0,0.275 -0.226,0.501 -0.501,0.501c-0.133,-0 -0.26,-0.053 -0.354,-0.147l-3,-3c-0.094,-0.094 -0.147,-0.221 -0.147,-0.354c0,-0.133 0.053,-0.26 0.147,-0.354l3,-3c0.094,-0.094 0.221,-0.147 0.354,-0.147c0.275,0 0.501,0.226 0.501,0.501c-0,0.133 -0.053,0.26 -0.147,0.354l-2.147,2.146l5.793,-0Z" fill-rule="nonzero"/><path d="M53.502,195.5l-8,-0" fill="none" stroke="#000" stroke-width="1px" stroke-miterlimit="10"/><path d="M53.502,214.5l-8,-0" fill="none" stroke="#000" stroke-width="1px" stroke-miterlimit="10"/><path d="M49.502,195.5l0,19" fill="none" stroke="#000" stroke-width="1px"/><path d="M59.502,220.5l0,8" fill="none" stroke="#000" stroke-width="1px" stroke-miterlimit="10"/><path d="M78.502,220.5l0,8" fill="none" stroke="#000" stroke-width="1px" stroke-miterlimit="10"/><path d="M59.502,224.5l19,-0" fill="none" stroke="#000" stroke-width="1px"/><path d="M16.871,203.072c-0.036,-1.021 0.468,-2.113 1.657,-2.113c0.9,0 1.645,0.612 1.645,1.537c-0,1.176 -0.733,1.704 -2.173,2.592c-1.201,0.744 -2.219,1.464 -2.387,3.479l5.554,0l0,-0.898l-4.368,-0c0.204,-1.056 1.321,-1.597 2.389,-2.245c1.057,-0.66 2.063,-1.416 2.063,-2.916c0,-1.585 -1.174,-2.447 -2.663,-2.447c-1.801,-0 -2.819,1.282 -2.735,3.011l1.018,-0Z" fill-rule="nonzero"/><path d="M22.501,204.392c-0,1.872 0.168,4.319 2.831,4.319c2.663,0 2.831,-2.447 2.831,-4.319c0,-1.884 -0.168,-4.331 -2.831,-4.331c-2.663,-0 -2.831,2.447 -2.831,4.331Zm1.078,-0.012c0,-1.26 0.012,-3.421 1.753,-3.421c1.741,0 1.753,2.161 1.753,3.421c-0,1.272 -0.012,3.433 -1.753,3.433c-1.741,-0 -1.753,-2.161 -1.753,-3.433Z" fill-rule="nonzero"/><path d="M34.273,205.412c-0,1.212 -0.468,2.401 -1.861,2.401c-1.405,-0 -1.957,-1.129 -1.957,-2.353c0,-1.164 0.528,-2.341 1.897,-2.341c1.321,0 1.921,1.129 1.921,2.293Zm-4.8,5.531l1.018,0l0,-3.202l0.024,-0c0.456,0.731 1.369,0.97 2.005,0.97c1.897,0 2.831,-1.474 2.831,-3.227c0,-1.753 -0.946,-3.263 -2.855,-3.263c-0.852,-0 -1.645,0.299 -1.981,0.982l-0.024,0l0,-0.838l-1.018,-0l-0,8.578Z" fill-rule="nonzero"/><path d="M35.893,208.567l1.235,0l1.728,-2.577l1.728,2.577l1.307,0l-2.399,-3.36l2.135,-2.842l-1.223,-0l-1.548,2.161l-1.488,-2.161l-1.307,-0l2.159,2.938l-2.327,3.264Z" fill-rule="nonzero"/><path d="M57.556,234.432c-0.036,-1.021 0.468,-2.113 1.657,-2.113c0.9,0 1.645,0.612 1.645,1.536c-0,1.177 -0.733,1.705 -2.173,2.593c-1.201,0.744 -2.219,1.464 -2.387,3.479l5.554,0l0,-0.898l-4.368,-0c0.204,-1.057 1.321,-1.597 2.389,-2.245c1.056,-0.66 2.063,-1.416 2.063,-2.917c0,-1.584 -1.175,-2.446 -2.663,-2.446c-1.801,-0 -2.819,1.282 -2.735,3.011l1.018,-0Z" fill-rule="nonzero"/><path d="M63.186,235.752c-0,1.872 0.167,4.319 2.831,4.319c2.663,0 2.831,-2.447 2.831,-4.319c0,-1.884 -0.168,-4.331 -2.831,-4.331c-2.664,-0 -2.831,2.447 -2.831,4.331Zm1.078,-0.012c0,-1.26 0.012,-3.421 1.753,-3.421c1.741,0 1.753,2.161 1.753,3.421c-0,1.272 -0.012,3.433 -1.753,3.433c-1.741,-0 -1.753,-2.161 -1.753,-3.433Z" fill-rule="nonzero"/><path d="M74.958,236.772c-0,1.212 -0.469,2.401 -1.861,2.401c-1.405,-0 -1.957,-1.129 -1.957,-2.353c0,-1.164 0.528,-2.341 1.897,-2.341c1.32,0 1.921,1.128 1.921,2.293Zm-4.8,5.531l1.018,0l0,-3.202l0.024,-0c0.456,0.731 1.369,0.97 2.005,0.97c1.896,0 2.831,-1.475 2.831,-3.227c0,-1.753 -0.947,-3.263 -2.855,-3.263c-0.853,-0 -1.645,0.299 -1.981,0.982l-0.024,0l0,-0.838l-1.018,-0l-0,8.578Z" fill-rule="nonzero"/><path d="M76.578,239.927l1.235,0l1.728,-2.577l1.727,2.577l1.308,0l-2.399,-3.36l2.135,-2.842l-1.224,-0l-1.547,2.161l-1.488,-2.161l-1.308,-0l2.16,2.938l-2.327,3.264Z" fill-rule="nonzero"/><path d="M258.141,211.779l4.398,-0l-0,-5.44l5.7,-0l-0,-3.398l-5.7,0l-0,-1.782l6.64,-0l-0,-3.658l-11.038,0l0,14.278Z" fill="#ac2020" fill-rule="nonzero"/><path d="M274.36,206.681l1.38,-4.4l0.04,0l1.28,4.4l-2.7,0Zm-6.019,5.098l4.42,-0l0.639,-2.04l4.54,-0l0.6,2.04l4.559,-0l-5.199,-14.278l-4.3,0l-5.259,14.278Z" fill="#ac2020" fill-rule="nonzero"/><rect x="284.081" y="197.501" width="4.397" height="14.278" fill="#ac2020" fill-rule="nonzero"/><path d="M290.741,211.779l10.718,-0l-0,-3.658l-6.32,0l-0,-10.62l-4.398,0l0,14.278Z" fill="#ac2020" fill-rule="nonzero"/><path d="M359.002,196c0,-0 0.332,-0.637 0.613,-1l0.387,-0l0,0.011c0,-0.004 0,-0.007 0,-0.011l1,-0l0,1l-2,-0Zm0,1l1,0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,2l-1,-0l0,-1l0.011,-0c-0.004,-0 -0.007,0 -0.011,0l0,-1Zm2,2l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l2,-0l0,1l-1,-0l0,-0.011c0,0.004 0,0.007 0,0.011l-1,-0Zm2,-2l-1,-0l0,-1l1,-0l0,1Zm0,-2l-1,0l0,-1l1,0l0,1Zm0,-2l-1,0l0,-1l1,0l0,1Zm0,-2l-1,0l0,-1l1,0l0,1Zm0,-2l-1,0l0,-1l1,0l0,1Zm0,-2l-1,0l0,-1l1,0l0,1Zm0,-2l-1,-0l0,-1l1,0l0,1Zm0,-2l-1,0l0,-1l1,0l0,1Zm0,-2l-1,0l0,-2c0,0.943 1,1 1,1l0,1Zm-2,-2l0,1l-1,-0l0,-1l1,-0Zm-2,-0l0,1l-1,-0l0,-1l1,-0Zm-2,-0l0,1l-1,-0l0,-1l1,-0Zm-2,-0l0,1l-1,-0l0,-1l1,-0Zm-2,-0l0,1l-1,-0l0,-1l1,-0Zm-2,-0l0,1l-1,-0l0,-1l1,-0Zm-2,-0l0,1l-1,-0l0,-1l1,-0Zm-2,-0l0,1l-1,-0l0,-1l1,-0Z" fill="#6a6bd3"/><path d="M379.002,196c0,-0 0.332,-0.637 0.613,-1l0.387,-0l0,0.011c0,-0.004 0,-0.007 0,-0.011l1,-0l0,1l-2,-0Zm0,1l1,0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,2l-1,-0l0,-1l0.011,-0c-0.004,-0 -0.007,0 -0.011,0l0,-1Zm2,2l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l2,-0l0,1l-1,-0l0,-0.011c0,0.004 0,0.007 0,0.011l-1,-0Zm2,-2l-1,-0l0,-1l1,-0l0,1Zm0,-2l-1,0l0,-1l1,0l0,1Zm0,-2l-1,0l0,-1l1,0l0,1Zm0,-2l-1,0l0,-1l1,0l0,1Zm0,-2l-1,0l0,-1l1,0l0,1Zm0,-2l-1,0l0,-1l1,0l0,1Zm0,-2l-1,-0l0,-1l1,0l0,1Zm0,-2l-1,0l0,-1l1,0l0,1Zm0,-2l-1,0l0,-2c0,0.943 1,1 1,1l0,1Zm-2,-2l0,1l-1,-0l0,-1l1,-0Zm-2,-0l0,1l-1,-0l0,-1l1,-0Zm-2,-0l0,1l-1,-0l0,-1l1,-0Zm-2,-0l0,1l-1,-0l0,-1l1,-0Zm-2,-0l0,1l-1,-0l0,-1l1,-0Zm-2,-0l0,1l-1,-0l0,-1l1,-0Zm-2,-0l0,1l-1,-0l0,-1l1,-0Zm-2,-0l0,1l-1,-0l0,-1l1,-0Z" fill="#6a6bd3"/><path d="M399.002,196c0,-0 0.332,-0.637 0.613,-1l0.387,-0l0,0.011c0,-0.004 0,-0.007 0,-0.011l1,-0l0,1l-2,-0Zm0,1l1,0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,2l-1,-0l0,-1l0.011,-0c-0.004,-0 -0.007,0 -0.011,0l0,-1Zm2,2l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l2,-0l0,1l-0.989,-0l-0.011,-0.011l0,0.011l-1,-0Zm2,-2l-1,-0l0,-1l1,-0l0,1Zm0,-2l-1,0l0,-1l1,0l0,1Zm0,-2l-1,0l0,-1l1,0l0,1Zm0,-2l-1,0l0,-1l1,0l0,1Zm0,-2l-1,0l0,-1l1,0l0,1Zm0,-2l-1,0l0,-1l1,0l0,1Zm0,-2l-1,-0l0,-1l1,0l0,1Zm0,-2l-1,0l0,-1l1,0l0,1Zm0,-2l-1,0l0,-2c0,0.943 1,1 1,1l0,1Zm-2,-2l0,1l-1,-0l0,-1l1,-0Zm-2,-0l0,1l-1,-0l0,-1l1,-0Zm-2,-0l0,1l-1,-0l0,-1l1,-0Zm-2,-0l0,1l-1,-0l0,-1l1,-0Zm-2,-0l0,1l-1,-0l0,-1l1,-0Zm-2,-0l0,1l-1,-0l0,-1l1,-0Zm-2,-0l0,1l-1,-0l0,-1l1,-0Zm-2,-0l0,1l-1,-0l0,-1l1,-0Z" fill="#6a6bd3"/><path d="M419.002,196c0,-0 0.332,-0.637 0.613,-1l0.387,-0l0,0.011c0,-0.004 0,-0.007 0,-0.011l1,-0l0,1l-2,-0Zm0,1l1,0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,2l-1,-0l0,-1l0.011,-0c-0.004,-0 -0.007,0 -0.011,0l0,-1Zm2,2l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l2,-0l0,1l-1,-0l0,-0.011c0,0.004 0,0.007 0,0.011l-1,-0Zm2,-2l-1,-0l0,-1l1,-0l0,1Zm0,-2l-1,0l0,-1l1,0l0,1Zm0,-2l-1,0l0,-1l1,0l0,1Zm0,-2l-1,0l0,-1l1,0l0,1Zm0,-2l-1,0l0,-1l1,0l0,1Zm0,-2l-1,0l0,-1l1,0l0,1Zm0,-2l-1,-0l0,-1l1,0l0,1Zm0,-2l-1,0l0,-1l1,0l0,1Zm0,-2l-1,0l0,-2c0,0.943 1,1 1,1l0,1Zm-2,-2l0,1l-1,-0l0,-1l1,-0Zm-2,-0l0,1l-1,-0l0,-1l1,-0Zm-2,-0l0,1l-1,-0l0,-1l1,-0Zm-2,-0l0,1l-1,-0l0,-1l1,-0Zm-2,-0l0,1l-1,-0l0,-1l1,-0Zm-2,-0l0,1l-1,-0l0,-1l1,-0Zm-2,-0l0,1l-1,-0l0,-1l1,-0Zm-2,-0l0,1l-1,-0l0,-1l1,-0Z" fill="#6a6bd3"/><path d="M439.002,196c0,-0 0.332,-0.637 0.613,-1l0.387,-0l0,0.011c0,-0.004 0,-0.007 0,-0.011l1,-0l0,1l-2,-0Zm0,1l1,0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,2l-1,-0l0,-1l0.011,-0c-0.004,-0 -0.007,0 -0.011,0l0,-1Zm2,2l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l2,-0l0,1l-1,-0l0,-0.011c0,0.004 0,0.007 0,0.011l-1,-0Zm2,-2l-1,-0l0,-1l1,-0l0,1Zm0,-2l-1,0l0,-1l1,0l0,1Zm0,-2l-1,0l0,-1l1,0l0,1Zm0,-2l-1,0l0,-1l1,0l0,1Zm0,-2l-1,0l0,-1l1,0l0,1Zm0,-2l-1,0l0,-1l1,0l0,1Zm0,-2l-1,-0l0,-1l1,0l0,1Zm0,-2l-1,0l0,-1l1,0l0,1Zm0,-2l-1,0l0,-2c0,0.943 1,1 1,1l0,1Zm-2,-2l0,1l-1,-0l0,-1l1,-0Zm-2,-0l0,1l-1,-0l0,-1l1,-0Zm-2,-0l0,1l-1,-0l0,-1l1,-0Zm-2,-0l0,1l-1,-0l0,-1l1,-0Zm-2,-0l0,1l-1,-0l0,-1l1,-0Zm-2,-0l0,1l-1,-0l0,-1l1,-0Zm-2,-0l0,1l-1,-0l0,-1l1,-0Zm-2,-0l0,1l-1,-0l0,-1l1,-0Z" fill="#6a6bd3"/><path d="M459.002,196c0,-0 0.332,-0.637 0.613,-1l0.387,-0l0,0.011c0,-0.004 0,-0.007 0,-0.011l1,-0l0,1l-2,-0Zm0,1l1,0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,1l-1,-0l0,-1Zm0,2l1,-0l0,2l-1,-0l0,-1l0.011,-0c-0.004,-0 -0.007,0 -0.011,0l0,-1Zm2,2l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l1,-0l0,1l-1,-0Zm2,-0l0,-1l2,-0l0,1l-0.989,-0l-0.011,-0.011l0,0.011l-1,-0Zm2,-2l-1,-0l0,-1l1,-0l0,1Zm0,-2l-1,0l0,-1l1,0l0,1Zm0,-2l-1,0l0,-1l1,0l0,1Zm0,-2l-1,0l0,-1l1,0l0,1Zm0,-2l-1,0l0,-1l1,0l0,1Zm0,-2l-1,0l0,-1l1,0l0,1Zm0,-2l-1,-0l0,-1l1,0l0,1Zm0,-2l-1,0l0,-1l1,0l0,1Zm0,-2l-1,0l0,-2c0,0.943 1,1 1,1l0,1Zm-2,-2l0,1l-1,-0l0,-1l1,-0Zm-2,-0l0,1l-1,-0l0,-1l1,-0Zm-2,-0l0,1l-1,-0l0,-1l1,-0Zm-2,-0l0,1l-1,-0l0,-1l1,-0Zm-2,-0l0,1l-1,-0l0,-1l1,-0Zm-2,-0l0,1l-1,-0l0,-1l1,-0Zm-2,-0l0,1l-1,-0l0,-1l1,-0Zm-2,-0l0,1l-1,-0l0,-1l1,-0Z" fill="#6a6bd3"/><path d="M472.002,203c0,1.646 -1.354,3 -3,3c-1.646,-0 -3,-1.354 -3,-3c0,-1.646 1.354,-3 3,-3c1.646,-0 3,1.354 3,3Z" fill-rule="nonzero"/><path d="M461.002,205c0,-4.389 3.611,-8 8,-8c4.389,-0 8,3.611 8,8c0,4.389 -3.611,8 -8,8c-4.389,-0 -8,-3.611 -8,-8Zm8,-7c-3.84,0 -7,3.16 -7,7c0,1.588 0.541,3.13 1.532,4.37c0.71,-1.144 2.273,-2.37 5.468,-2.37c3.195,-0 4.757,1.225 5.468,2.37c0.991,-1.24 1.532,-2.782 1.532,-4.37c-0,-3.84 -3.16,-7 -7,-7Z"/><path d="M450.537,198.016c0.132,-0.001 0.26,0.052 0.354,0.146l4.95,4.95c0.194,0.194 0.194,0.513 -0,0.707c-0.48,0.48 -1.072,0.588 -1.503,0.588c-0.177,-0 -0.335,-0.018 -0.46,-0.039l-3.134,3.134c0.082,0.332 0.136,0.671 0.16,1.013c0.046,0.702 -0.032,1.687 -0.72,2.375c-0.194,0.194 -0.513,0.194 -0.707,-0l-2.829,-2.828l-3.182,3.182c-0.195,0.195 -1.219,0.902 -1.414,0.707c-0.195,-0.195 0.512,-1.22 0.707,-1.414l3.182,-3.182l-2.828,-2.829c-0.194,-0.194 -0.194,-0.513 -0,-0.707c0.688,-0.688 1.673,-0.767 2.375,-0.72c0.341,0.024 0.68,0.077 1.013,0.16l3.134,-3.133c-0.026,-0.153 -0.04,-0.307 -0.04,-0.461c-0,-0.43 0.108,-1.022 0.589,-1.503c0.093,-0.094 0.22,-0.146 0.353,-0.146Z" fill-rule="nonzero"/><path d="M421.052,200.555c0.207,-0.907 1.02,-1.555 1.95,-1.555l12,-0c0.93,-0 1.743,0.648 1.95,1.555l-7.95,4.859l-7.95,-4.859Zm-0.05,1.142l0,7.104l5.803,-3.558l-5.803,-3.546Zm6.761,4.133l-6.57,4.026c0.331,0.698 1.037,1.145 1.809,1.144l6.256,-0c-0.17,-0.482 -0.256,-0.989 -0.256,-1.5c-0.001,-1.329 0.587,-2.592 1.606,-3.446l-0.367,-0.225l-1.239,0.757l-1.239,-0.757l0,0.001Zm9.239,-4.133l0,4.974c-0.853,-1.057 -2.141,-1.672 -3.5,-1.671c-0.681,-0.001 -1.352,0.153 -1.965,0.45l-0.338,-0.207l5.803,-3.546Z" fill-rule="nonzero"/><path d="M437.002,209.5c0,1.92 -1.58,3.5 -3.5,3.5c-1.92,-0 -3.5,-1.58 -3.5,-3.5c0,-1.92 1.58,-3.5 3.5,-3.5c1.92,-0 3.5,1.58 3.5,3.5Zm-3.5,-2c-0.274,-0 -0.5,0.226 -0.5,0.5l0,1l-1,-0c-0.274,-0 -0.5,0.226 -0.5,0.5c0,0.274 0.226,0.5 0.5,0.5l1,-0l0,1c0,0.274 0.226,0.5 0.5,0.5c0.274,-0 0.5,-0.226 0.5,-0.5l0,-1l1,-0c0.274,-0 0.5,-0.226 0.5,-0.5c0,-0.274 -0.226,-0.5 -0.5,-0.5l-1,-0l0,-1c0,-0.274 -0.226,-0.5 -0.5,-0.5Z" fill-rule="nonzero"/><path d="M409.709,198.395c-0.388,-0.387 -1.026,-0.387 -1.414,0l-6.647,6.646c-0.094,0.094 -0.147,0.222 -0.147,0.354c0,0.275 0.226,0.501 0.501,0.501c0.133,0 0.26,-0.053 0.354,-0.147l6.646,-6.647l6.646,6.647c0.094,0.094 0.221,0.147 0.354,0.147c0.275,0 0.501,-0.226 0.501,-0.501c-0,-0.132 -0.053,-0.26 -0.147,-0.354l-2.354,-2.353l0,-3.293c0,-0.274 -0.226,-0.5 -0.5,-0.5l-1,0c-0.274,0 -0.5,0.226 -0.5,0.5l0,1.293l-2.293,-2.293Z" fill-rule="nonzero"/><path d="M409.002,200.188l6,6l0,4.207c0,0.823 -0.677,1.5 -1.5,1.5l-9,0c-0.823,0 -1.5,-0.677 -1.5,-1.5l0,-4.207l6,-6Z" fill-rule="nonzero"/><path d="M389.002,197c4.389,-0 8,3.611 8,8c0,4.389 -3.611,8 -8,8c-4.389,-0 -8,-3.611 -8,-8c0,-4.389 3.611,-8 8,-8Zm-3.5,7.5c-0.274,-0 -0.5,0.226 -0.5,0.5c0,0.274 0.226,0.5 0.5,0.5l5.793,-0l-2.147,2.146c-0.094,0.094 -0.147,0.221 -0.147,0.354c0,0.275 0.226,0.501 0.501,0.501c0.133,-0 0.26,-0.053 0.354,-0.147l3,-3c0.094,-0.094 0.147,-0.221 0.147,-0.354c0,-0.133 -0.053,-0.26 -0.147,-0.354l-3,-3c-0.094,-0.094 -0.221,-0.147 -0.354,-0.147c-0.275,0 -0.501,0.226 -0.501,0.501c0,0.133 0.053,0.26 0.147,0.354l2.147,2.146l-5.793,-0Z" fill-rule="nonzero"/><path d="M369.002,197c-4.389,-0 -8,3.611 -8,8c0,4.389 3.611,8 8,8c4.389,-0 8,-3.611 8,-8c0,-4.389 -3.611,-8 -8,-8Zm3.5,7.5c0.274,-0 0.5,0.226 0.5,0.5c0,0.274 -0.226,0.5 -0.5,0.5l-5.793,-0l2.147,2.146c0.094,0.094 0.147,0.221 0.147,0.354c-0,0.275 -0.226,0.501 -0.501,0.501c-0.133,-0 -0.26,-0.053 -0.354,-0.147l-3,-3c-0.094,-0.094 -0.147,-0.221 -0.147,-0.354c0,-0.133 0.053,-0.26 0.147,-0.354l3,-3c0.094,-0.094 0.221,-0.147 0.354,-0.147c0.275,0 0.501,0.226 0.501,0.501c-0,0.133 -0.053,0.26 -0.147,0.354l-2.147,2.146l5.793,-0Z" fill-rule="nonzero"/><path d="M357.502,220.5l0,8" fill="none" stroke="#000" stroke-width="1px" stroke-miterlimit="10"/><path d="M380.502,220.5l0,8" fill="none" stroke="#000" stroke-width="1px" stroke-miterlimit="10"/><path d="M357.502,224.5l23,-0" fill="none" stroke="#000" stroke-width="1px"/><g transform="matrix(1,0,0,1,201.519,26.6833)"><path d="M0.129,-0.458c-0.003,-0.085 0.039,-0.176 0.138,-0.176c0.075,-0 0.137,0.051 0.137,0.128c0,0.098 -0.061,0.142 -0.181,0.216c-0.1,0.062 -0.185,0.122 -0.199,0.29l0.463,-0l-0,-0.075l-0.364,0c0.017,-0.088 0.11,-0.133 0.199,-0.187c0.088,-0.055 0.172,-0.118 0.172,-0.243c-0,-0.132 -0.098,-0.204 -0.222,-0.204c-0.15,0 -0.235,0.107 -0.228,0.251l0.085,-0Z" fill="#ac2020" fill-rule="nonzero" transform="matrix(12,0,0,12,154.654,213.245)"/><path d="M0.419,-0.709l-0.068,0l-0.323,0.461l0,0.082l0.311,-0l0,0.166l0.08,-0l-0,-0.166l0.096,-0l-0,-0.075l-0.096,0l-0,-0.468Zm-0.318,0.468l0.236,-0.347l0.002,0l0,0.347l-0.238,0Z" fill="#ac2020" fill-rule="nonzero" transform="matrix(12,0,0,12,161.326,213.245)"/><path d="M0.467,-0.263c0,0.101 -0.039,0.2 -0.155,0.2c-0.117,0 -0.163,-0.094 -0.163,-0.196c-0,-0.097 0.044,-0.195 0.158,-0.195c0.11,-0 0.16,0.094 0.16,0.191Zm-0.4,0.461l0.085,-0l-0,-0.267l0.002,0c0.038,0.061 0.114,0.081 0.167,0.081c0.158,-0 0.236,-0.123 0.236,-0.269c-0,-0.146 -0.079,-0.272 -0.238,-0.272c-0.071,0 -0.137,0.025 -0.165,0.082l-0.002,-0l-0,-0.07l-0.085,0l0,0.715Z" fill="#ac2020" fill-rule="nonzero" transform="matrix(12,0,0,12,167.998,213.245)"/><path d="M0.009,-0l0.103,-0l0.144,-0.215l0.144,0.215l0.109,-0l-0.2,-0.28l0.178,-0.237l-0.102,0l-0.129,0.18l-0.124,-0.18l-0.109,0l0.18,0.245l-0.194,0.272Z" fill="#ac2020" fill-rule="nonzero" transform="matrix(12,0,0,12,175.114,213.245)"/><path d="M0.503,-0.351c-0.012,-0.123 -0.106,-0.178 -0.223,-0.178c-0.164,0 -0.244,0.122 -0.244,0.277c0,0.154 0.084,0.264 0.242,0.264c0.13,-0 0.209,-0.075 0.228,-0.201l-0.087,0c-0.011,0.078 -0.06,0.126 -0.142,0.126c-0.108,0 -0.151,-0.094 -0.151,-0.189c-0,-0.105 0.038,-0.202 0.161,-0.202c0.07,-0 0.115,0.038 0.128,0.103l0.088,-0Z" fill="#ac2020" fill-rule="nonzero" transform="matrix(12,0,0,12,184.666,213.245)"/><path d="M0.069,-0l0.085,-0l-0,-0.517l-0.085,0l0,0.517Zm0.085,-0.714l-0.085,0l0,0.104l0.085,-0l-0,-0.104Z" fill="#ac2020" fill-rule="nonzero" transform="matrix(12,0,0,12,191.11,213.245)"/><path d="M0.061,-0l0.085,-0l-0,-0.23c-0,-0.131 0.05,-0.209 0.187,-0.209l-0,-0.09c-0.092,-0.003 -0.149,0.038 -0.19,0.121l-0.002,-0l-0,-0.109l-0.08,0l0,0.517Z" fill="#ac2020" fill-rule="nonzero" transform="matrix(12,0,0,12,193.774,213.245)"/><path d="M0.503,-0.351c-0.012,-0.123 -0.106,-0.178 -0.223,-0.178c-0.164,0 -0.244,0.122 -0.244,0.277c0,0.154 0.084,0.264 0.242,0.264c0.13,-0 0.209,-0.075 0.228,-0.201l-0.087,0c-0.011,0.078 -0.06,0.126 -0.142,0.126c-0.108,0 -0.151,-0.094 -0.151,-0.189c-0,-0.105 0.038,-0.202 0.161,-0.202c0.07,-0 0.115,0.038 0.128,0.103l0.088,-0Z" fill="#ac2020" fill-rule="nonzero" transform="matrix(12,0,0,12,197.554,213.245)"/><rect x="0.069" y="-0.714" width="0.085" height="0.714" fill="#ac2020" fill-rule="nonzero" transform="matrix(12,0,0,12,203.998,213.245)"/><path d="M0.421,-0.164c-0.015,0.067 -0.064,0.101 -0.134,0.101c-0.113,0 -0.164,-0.08 -0.161,-0.17l0.387,-0c0.005,-0.125 -0.051,-0.296 -0.234,-0.296c-0.141,0 -0.243,0.114 -0.243,0.269c0.005,0.158 0.083,0.272 0.248,0.272c0.116,-0 0.198,-0.062 0.221,-0.176l-0.084,-0Zm-0.295,-0.144c0.006,-0.079 0.059,-0.146 0.148,-0.146c0.084,-0 0.145,0.065 0.149,0.146l-0.297,0Z" fill="#ac2020" fill-rule="nonzero" transform="matrix(12,0,0,12,206.662,213.245)"/><path d="M0.031,-0.163c0.005,0.128 0.103,0.175 0.219,0.175c0.105,-0 0.22,-0.04 0.22,-0.163c-0,-0.1 -0.084,-0.128 -0.169,-0.147c-0.079,-0.019 -0.169,-0.029 -0.169,-0.09c-0,-0.052 0.059,-0.066 0.11,-0.066c0.056,-0 0.114,0.021 0.12,0.087l0.085,-0c-0.007,-0.126 -0.098,-0.162 -0.212,-0.162c-0.09,0 -0.193,0.043 -0.193,0.147c0,0.099 0.085,0.127 0.169,0.146c0.085,0.019 0.169,0.03 0.169,0.096c0,0.065 -0.072,0.077 -0.125,0.077c-0.07,0 -0.136,-0.024 -0.139,-0.1l-0.085,0Z" fill="#ac2020" fill-rule="nonzero" transform="matrix(12,0,0,12,213.106,213.245)"/><path d="M0.069,-0l0.085,-0l-0,-0.517l-0.085,0l0,0.517Zm0.085,-0.714l-0.085,0l0,0.104l0.085,-0l-0,-0.104Z" fill="#ac2020" fill-rule="nonzero" transform="matrix(12,0,0,12,222.442,213.245)"/><path d="M0.064,-0l0.085,-0l-0,-0.292c-0,-0.093 0.05,-0.162 0.153,-0.162c0.065,-0 0.105,0.041 0.105,0.104l0,0.35l0.085,-0l-0,-0.34c-0,-0.111 -0.042,-0.189 -0.178,-0.189c-0.074,0 -0.132,0.03 -0.168,0.094l-0.002,-0l-0,-0.082l-0.08,0l0,0.517Z" fill="#ac2020" fill-rule="nonzero" transform="matrix(12,0,0,12,225.106,213.245)"/><path d="M0.182,-0.672l-0.085,0l0,0.155l-0.088,0l0,0.075l0.088,-0l0,0.329c0,0.095 0.035,0.113 0.123,0.113l0.065,-0l-0,-0.075l-0.039,0c-0.053,0 -0.064,-0.007 -0.064,-0.046l-0,-0.321l0.103,-0l-0,-0.075l-0.103,0l-0,-0.155Z" fill="#ac2020" fill-rule="nonzero" transform="matrix(12,0,0,12,231.778,213.245)"/><path d="M0.421,-0.164c-0.015,0.067 -0.064,0.101 -0.134,0.101c-0.113,0 -0.164,-0.08 -0.161,-0.17l0.387,-0c0.005,-0.125 -0.051,-0.296 -0.234,-0.296c-0.141,0 -0.243,0.114 -0.243,0.269c0.005,0.158 0.083,0.272 0.248,0.272c0.116,-0 0.198,-0.062 0.221,-0.176l-0.084,-0Zm-0.295,-0.144c0.006,-0.079 0.059,-0.146 0.148,-0.146c0.084,-0 0.145,0.065 0.149,0.146l-0.297,0Z" fill="#ac2020" fill-rule="nonzero" transform="matrix(12,0,0,12,235.558,213.245)"/><path d="M0.061,-0l0.085,-0l-0,-0.23c-0,-0.131 0.05,-0.209 0.187,-0.209l-0,-0.09c-0.092,-0.003 -0.149,0.038 -0.19,0.121l-0.002,-0l-0,-0.109l-0.08,0l0,0.517Z" fill="#ac2020" fill-rule="nonzero" transform="matrix(12,0,0,12,242.002,213.245)"/><path d="M0.031,-0.163c0.005,0.128 0.103,0.175 0.219,0.175c0.105,-0 0.22,-0.04 0.22,-0.163c-0,-0.1 -0.084,-0.128 -0.169,-0.147c-0.079,-0.019 -0.169,-0.029 -0.169,-0.09c-0,-0.052 0.059,-0.066 0.11,-0.066c0.056,-0 0.114,0.021 0.12,0.087l0.085,-0c-0.007,-0.126 -0.098,-0.162 -0.212,-0.162c-0.09,0 -0.193,0.043 -0.193,0.147c0,0.099 0.085,0.127 0.169,0.146c0.085,0.019 0.169,0.03 0.169,0.096c0,0.065 -0.072,0.077 -0.125,0.077c-0.07,0 -0.136,-0.024 -0.139,-0.1l-0.085,0Z" fill="#ac2020" fill-rule="nonzero" transform="matrix(12,0,0,12,245.998,213.245)"/><path d="M0.421,-0.164c-0.015,0.067 -0.064,0.101 -0.134,0.101c-0.113,0 -0.164,-0.08 -0.161,-0.17l0.387,-0c0.005,-0.125 -0.051,-0.296 -0.234,-0.296c-0.141,0 -0.243,0.114 -0.243,0.269c0.005,0.158 0.083,0.272 0.248,0.272c0.116,-0 0.198,-0.062 0.221,-0.176l-0.084,-0Zm-0.295,-0.144c0.006,-0.079 0.059,-0.146 0.148,-0.146c0.084,-0 0.145,0.065 0.149,0.146l-0.297,0Z" fill="#ac2020" fill-rule="nonzero" transform="matrix(12,0,0,12,251.998,213.245)"/><path d="M0.503,-0.351c-0.012,-0.123 -0.106,-0.178 -0.223,-0.178c-0.164,0 -0.244,0.122 -0.244,0.277c0,0.154 0.084,0.264 0.242,0.264c0.13,-0 0.209,-0.075 0.228,-0.201l-0.087,0c-0.011,0.078 -0.06,0.126 -0.142,0.126c-0.108,0 -0.151,-0.094 -0.151,-0.189c-0,-0.105 0.038,-0.202 0.161,-0.202c0.07,-0 0.115,0.038 0.128,0.103l0.088,-0Z" fill="#ac2020" fill-rule="nonzero" transform="matrix(12,0,0,12,258.442,213.245)"/><path d="M0.182,-0.672l-0.085,0l0,0.155l-0.088,0l0,0.075l0.088,-0l0,0.329c0,0.095 0.035,0.113 0.123,0.113l0.065,-0l-0,-0.075l-0.039,0c-0.053,0 -0.064,-0.007 -0.064,-0.046l-0,-0.321l0.103,-0l-0,-0.075l-0.103,0l-0,-0.155Z" fill="#ac2020" fill-rule="nonzero" transform="matrix(12,0,0,12,264.886,213.245)"/><rect x="184.666" y="214.145" width="84" height="0.6" fill="#ac2020"/></g><circle cx="369.002" cy="205" r="12" fill="#ca2626" fill-opacity=".2"/><path d="M369.002,193c6.623,-0 12,5.377 12,12c0,6.623 -5.377,12 -12,12c-6.623,-0 -12,-5.377 -12,-12c0,-6.623 5.377,-12 12,-12Zm0,1c-6.071,-0 -11,4.929 -11,11c0,6.071 4.929,11 11,11c6.071,-0 11,-4.929 11,-11c0,-6.071 -4.929,-11 -11,-11Z" fill="#ca2626"/><circle cx="389.002" cy="205" r="12" fill="#ca2626" fill-opacity=".2"/><path d="M389.002,193c6.623,-0 12,5.377 12,12c0,6.623 -5.377,12 -12,12c-6.623,-0 -12,-5.377 -12,-12c0,-6.623 5.377,-12 12,-12Zm0,1c-6.071,-0 -11,4.929 -11,11c0,6.071 4.929,11 11,11c6.071,-0 11,-4.929 11,-11c0,-6.071 -4.929,-11 -11,-11Z" fill="#ca2626"/><circle cx="409.035" cy="205" r="12" fill="#ca2626" fill-opacity=".2"/><path d="M409.035,193c6.623,-0 12,5.377 12,12c0,6.623 -5.377,12 -12,12c-6.623,-0 -12,-5.377 -12,-12c0,-6.623 5.377,-12 12,-12Zm0,1c-6.071,-0 -11,4.929 -11,11c0,6.071 4.929,11 11,11c6.072,-0 11,-4.929 11,-11c0,-6.071 -4.928,-11 -11,-11Z" fill="#ca2626"/><circle cx="429.035" cy="205" r="12" fill="#ca2626" fill-opacity=".2"/><path d="M429.035,193c6.623,-0 12,5.377 12,12c0,6.623 -5.377,12 -12,12c-6.623,-0 -12,-5.377 -12,-12c0,-6.623 5.377,-12 12,-12Zm0,1c-6.071,-0 -11,4.929 -11,11c0,6.071 4.929,11 11,11c6.072,-0 11,-4.929 11,-11c0,-6.071 -4.928,-11 -11,-11Z" fill="#ca2626"/><circle cx="449.002" cy="205" r="12" fill="#ca2626" fill-opacity=".2"/><path d="M449.002,193c6.623,-0 12,5.377 12,12c0,6.623 -5.377,12 -12,12c-6.623,-0 -12,-5.377 -12,-12c0,-6.623 5.377,-12 12,-12Zm0,1c-6.071,-0 -11,4.929 -11,11c0,6.071 4.929,11 11,11c6.071,-0 11,-4.929 11,-11c0,-6.071 -4.929,-11 -11,-11Z" fill="#ca2626"/><circle cx="469.002" cy="205" r="12" fill="#ca2626" fill-opacity=".2"/><path d="M469.002,193c6.623,-0 12,5.377 12,12c0,6.623 -5.377,12 -12,12c-6.623,-0 -12,-5.377 -12,-12c0,-6.623 5.377,-12 12,-12Zm0,1c-6.071,-0 -11,4.929 -11,11c0,6.071 4.929,11 11,11c6.071,-0 11,-4.929 11,-11c0,-6.071 -4.929,-11 -11,-11Z" fill="#ca2626"/></g></svg>
\ No newline at end of file
diff --git a/understanding/22/img/target-text-buttons-single-row.afdesign b/understanding/22/img/target-text-buttons-single-row.afdesign
new file mode 100644
index 0000000000..a6d9f87570
Binary files /dev/null and b/understanding/22/img/target-text-buttons-single-row.afdesign differ
diff --git a/understanding/22/img/target-text-buttons-single-row.png b/understanding/22/img/target-text-buttons-single-row.png
new file mode 100644
index 0000000000..d1971fe4e4
Binary files /dev/null and b/understanding/22/img/target-text-buttons-single-row.png differ
diff --git a/understanding/22/img/target-text-buttons-single-row.svg b/understanding/22/img/target-text-buttons-single-row.svg
new file mode 100644
index 0000000000..5d2dbfb405
--- /dev/null
+++ b/understanding/22/img/target-text-buttons-single-row.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 785 105" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" fill-rule="evenodd" clip-rule="evenodd" stroke-miterlimit="10"><rect width="785" height="105" fill="none"/><clipPath id="a"><rect width="785" height="105"/></clipPath><g clip-path="url(#a)"><rect x="-0" width="785" height="105" fill="#fff"/><path d="M49.5,42.5l-8,-0" fill="none" stroke="#000" stroke-width="1px"/><path d="M49.5,57.5l-8,-0" fill="none" stroke="#000" stroke-width="1px"/><path d="M45.5,42.5l-0,15" fill="none" stroke="#000" stroke-width="1px" stroke-miterlimit="1"/><path d="M15.595,45.269l-0.779,0c-0.227,1.284 -1.283,1.596 -2.447,1.596l-0,0.815l2.208,-0l-0,6.096l1.018,-0l0,-8.507Z" fill-rule="nonzero"/><path d="M21.428,49.204c1.165,-0 1.717,0.876 1.717,1.932c-0,1.009 -0.612,1.885 -1.717,1.885c-1.116,0 -1.765,-0.84 -1.765,-1.897c0,-1.068 0.625,-1.92 1.765,-1.92Zm2.555,-1.764c-0.12,-1.38 -0.994,-2.171 -2.399,-2.171c-2.424,0 -3.131,2.22 -3.131,4.559c-0,1.789 0.407,4.092 2.927,4.092c2.148,-0 2.843,-1.619 2.843,-2.856c0,-1.572 -0.97,-2.759 -2.603,-2.759c-0.924,0 -1.645,0.336 -2.125,1.115l-0.024,-0.024c0.048,-1.307 0.324,-3.228 2.065,-3.228c0.804,-0 1.333,0.504 1.429,1.272l1.018,0Z" fill-rule="nonzero"/><path d="M30.273,50.62c-0,1.213 -0.468,2.401 -1.861,2.401c-1.405,0 -1.957,-1.128 -1.957,-2.353c0,-1.164 0.528,-2.34 1.897,-2.34c1.321,-0 1.921,1.128 1.921,2.292Zm-4.8,5.532l1.018,-0l0,-3.203l0.024,0c0.456,0.731 1.369,0.971 2.005,0.971c1.897,-0 2.831,-1.475 2.831,-3.228c0,-1.752 -0.946,-3.263 -2.855,-3.263c-0.852,0 -1.645,0.3 -1.981,0.983l-0.024,-0l0,-0.839l-1.018,0l-0,8.579Z" fill-rule="nonzero"/><path d="M31.893,53.776l1.235,-0l1.728,-2.578l1.728,2.578l1.307,-0l-2.399,-3.36l2.135,-2.843l-1.223,0l-1.548,2.162l-1.488,-2.162l-1.307,0l2.159,2.939l-2.327,3.264Z" fill-rule="nonzero"/><rect x="55" y="42" width="44" height="16" fill="#e0e0ea"/><path d="M99,42l-0,16l-44,0l-0,-16l44,-0Zm-1,1l-42,0l-0,14l42,-0l-0,-14Z" fill="#6a6bd3"/><path d="M69.769,47.58c-0.263,-1.825 -1.738,-2.783 -3.527,-2.783c-2.641,-0 -4.055,2.026 -4.055,4.511c-0,2.497 1.294,4.463 3.959,4.463c2.161,0 3.492,-1.294 3.707,-3.431l-1.138,0c-0.108,1.417 -0.973,2.473 -2.473,2.473c-2.053,-0 -2.917,-1.633 -2.917,-3.589c0,-1.788 0.864,-3.469 2.905,-3.469c1.188,0 2.161,0.612 2.401,1.825l1.138,-0Z" fill-rule="nonzero"/><rect x="71.163" y="45.001" width="1.019" height="8.567" fill-rule="nonzero"/><path d="M73.431,50.472c-0,1.813 1.042,3.239 3.011,3.239c1.969,0 3.011,-1.426 3.011,-3.239c0,-1.825 -1.042,-3.251 -3.011,-3.251c-1.969,-0 -3.011,1.426 -3.011,3.251Zm1.078,0c0,-1.512 0.865,-2.353 1.933,-2.353c1.068,0 1.933,0.841 1.933,2.353c-0,1.5 -0.865,2.341 -1.933,2.341c-1.068,-0 -1.933,-0.841 -1.933,-2.341Z" fill-rule="nonzero"/><path d="M80.259,51.612c0.06,1.536 1.234,2.099 2.627,2.099c1.261,0 2.639,-0.479 2.639,-1.955c0,-1.2 -1.006,-1.536 -2.027,-1.764c-0.948,-0.228 -2.029,-0.348 -2.029,-1.08c0,-0.625 0.709,-0.793 1.321,-0.793c0.672,0 1.369,0.252 1.441,1.045l1.018,-0c-0.084,-1.512 -1.174,-1.943 -2.543,-1.943c-1.081,-0 -2.315,0.515 -2.315,1.763c-0,1.188 1.018,1.524 2.027,1.752c1.02,0.228 2.029,0.36 2.029,1.152c-0,0.781 -0.865,0.925 -1.501,0.925c-0.84,-0 -1.633,-0.288 -1.669,-1.201l-1.018,0Z" fill-rule="nonzero"/><path d="M90.939,51.6c-0.18,0.804 -0.769,1.213 -1.609,1.213c-1.357,-0 -1.969,-0.961 -1.933,-2.042l4.644,0c0.06,-1.499 -0.611,-3.55 -2.807,-3.55c-1.693,-0 -2.915,1.367 -2.915,3.227c0.06,1.896 0.994,3.263 2.975,3.263c1.393,0 2.376,-0.743 2.651,-2.111l-1.006,-0Zm-3.542,-1.727c0.072,-0.949 0.709,-1.754 1.777,-1.754c1.008,0 1.741,0.781 1.789,1.754l-3.566,-0Z" fill-rule="nonzero"/><path d="M55.5,64.5l0,8" fill="none" stroke="#000" stroke-width="1px"/><path d="M98.5,64.5l0,8" fill="none" stroke="#000" stroke-width="1px"/><path d="M55.5,68.5l43,-0" fill="none" stroke="#000" stroke-width="1px" stroke-miterlimit="1"/><path d="M68.757,75.061l-0.814,-0l-3.876,5.532l-0,0.982l3.732,0l-0,1.992l0.958,0l0,-1.992l1.152,0l0,-0.898l-1.152,-0l0,-5.616Zm-3.814,5.616l2.832,-4.164l0.024,-0l-0,4.164l-2.856,-0Z" fill-rule="nonzero"/><path d="M75.429,75.061l-0.814,-0l-3.876,5.532l-0,0.982l3.732,0l-0,1.992l0.958,0l0,-1.992l1.152,0l0,-0.898l-1.152,-0l0,-5.616Zm-3.814,5.616l2.832,-4.164l0.024,-0l-0,4.164l-2.856,-0Z" fill-rule="nonzero"/><path d="M82.679,80.412c-0,1.212 -0.468,2.401 -1.861,2.401c-1.404,-0 -1.957,-1.129 -1.957,-2.353c0,-1.164 0.529,-2.341 1.897,-2.341c1.321,0 1.921,1.129 1.921,2.293Zm-4.8,5.531l1.018,0l0,-3.202l0.024,-0c0.457,0.731 1.369,0.97 2.005,0.97c1.897,0 2.831,-1.474 2.831,-3.227c0,-1.753 -0.946,-3.263 -2.855,-3.263c-0.852,-0 -1.645,0.299 -1.981,0.982l-0.024,0l0,-0.838l-1.018,-0l-0,8.578Z" fill-rule="nonzero"/><path d="M84.299,83.567l1.236,0l1.727,-2.577l1.728,2.577l1.307,0l-2.399,-3.36l2.135,-2.842l-1.223,-0l-1.548,2.161l-1.488,-2.161l-1.307,-0l2.159,2.938l-2.327,3.264Z" fill-rule="nonzero"/><rect x="100" y="42" width="44" height="16" fill="#e0e0ea"/><path d="M144,42l0,16l-44,0l0,-16l44,-0Zm-1,1l-42,0l-0,14l42,-0l-0,-14Z" fill="#6a6bd3"/><path d="M115.639,47.508c-0.072,-1.885 -1.402,-2.711 -3.155,-2.711c-1.561,-0 -3.107,0.767 -3.107,2.507c-0,1.572 1.378,1.968 2.747,2.268c1.368,0.3 2.737,0.504 2.737,1.68c-0,1.237 -1.141,1.561 -2.173,1.561c-1.296,-0 -2.497,-0.624 -2.497,-2.065l-1.078,0c-0,2.089 1.618,3.023 3.539,3.023c1.561,0 3.347,-0.731 3.347,-2.555c0,-1.68 -1.366,-2.16 -2.735,-2.472c-1.38,-0.312 -2.749,-0.468 -2.749,-1.524c0,-1.117 0.961,-1.465 1.921,-1.465c1.176,0 1.993,0.528 2.125,1.753l1.078,-0Z" fill-rule="nonzero"/><path d="M121.053,51.408c-0,0.564 -0.553,1.405 -1.897,1.405c-0.624,-0 -1.201,-0.24 -1.201,-0.913c0,-0.756 0.577,-0.996 1.249,-1.116c0.684,-0.12 1.453,-0.132 1.849,-0.42l-0,1.044Zm1.654,1.345c-0.132,0.048 -0.228,0.06 -0.312,0.06c-0.324,-0 -0.324,-0.216 -0.324,-0.696l0,-3.193c0,-1.452 -1.21,-1.703 -2.327,-1.703c-1.381,-0 -2.567,0.539 -2.627,2.075l1.018,-0c0.048,-0.913 0.685,-1.177 1.549,-1.177c0.648,0 1.381,0.144 1.381,1.033c-0,0.768 -0.961,0.696 -2.089,0.912c-1.057,0.204 -2.099,0.504 -2.099,1.908c-0,1.236 0.922,1.739 2.051,1.739c0.864,0 1.621,-0.299 2.185,-0.958c-0,0.671 0.335,0.958 0.862,0.958c0.324,0 0.552,-0.06 0.732,-0.167l0,-0.791Z" fill-rule="nonzero"/><path d="M128.719,47.365l-1.067,-0l-1.692,5.172l-0.024,-0l-1.74,-5.172l-1.139,-0l2.303,6.202l1.092,0l2.267,-6.202Z" fill-rule="nonzero"/><path d="M133.941,51.6c-0.18,0.804 -0.769,1.213 -1.609,1.213c-1.357,-0 -1.969,-0.961 -1.933,-2.042l4.644,0c0.06,-1.499 -0.611,-3.55 -2.807,-3.55c-1.693,-0 -2.915,1.367 -2.915,3.227c0.06,1.896 0.994,3.263 2.975,3.263c1.393,0 2.376,-0.743 2.651,-2.111l-1.006,-0Zm-3.542,-1.727c0.072,-0.949 0.709,-1.754 1.777,-1.754c1.008,0 1.741,0.781 1.789,1.754l-3.566,-0Z" fill-rule="nonzero"/><path d="M100.5,64.5l0,8" fill="none" stroke="#000" stroke-width="1px"/><path d="M143.5,64.5l0,8" fill="none" stroke="#000" stroke-width="1px"/><path d="M100.5,68.5l43,-0" fill="none" stroke="#000" stroke-width="1px" stroke-miterlimit="1"/><path d="M113.757,75.061l-0.814,-0l-3.876,5.532l-0,0.982l3.732,0l-0,1.992l0.958,0l0,-1.992l1.152,0l0,-0.898l-1.152,-0l0,-5.616Zm-3.814,5.616l2.832,-4.164l0.024,-0l-0,4.164l-2.856,-0Z" fill-rule="nonzero"/><path d="M120.429,75.061l-0.814,-0l-3.876,5.532l-0,0.982l3.732,0l-0,1.992l0.958,0l0,-1.992l1.152,0l0,-0.898l-1.152,-0l0,-5.616Zm-3.814,5.616l2.832,-4.164l0.024,-0l-0,4.164l-2.856,-0Z" fill-rule="nonzero"/><path d="M127.679,80.412c-0,1.212 -0.468,2.401 -1.861,2.401c-1.404,-0 -1.957,-1.129 -1.957,-2.353c0,-1.164 0.529,-2.341 1.897,-2.341c1.321,0 1.921,1.129 1.921,2.293Zm-4.8,5.531l1.018,0l0,-3.202l0.024,-0c0.457,0.731 1.369,0.97 2.005,0.97c1.897,0 2.831,-1.474 2.831,-3.227c0,-1.753 -0.946,-3.263 -2.855,-3.263c-0.852,-0 -1.645,0.299 -1.981,0.982l-0.024,0l0,-0.838l-1.018,-0l-0,8.578Z" fill-rule="nonzero"/><path d="M129.299,83.567l1.236,0l1.727,-2.577l1.728,2.577l1.307,0l-2.399,-3.36l2.135,-2.842l-1.223,-0l-1.548,2.161l-1.488,-2.161l-1.307,-0l2.159,2.938l-2.327,3.264Z" fill-rule="nonzero"/><rect x="145" y="42" width="58" height="16" fill="#e0e0ea"/><path d="M203,42l-0,16l-58,0l-0,-16l58,-0Zm-1,1l-56,0c-0,0 0,14 -0,14l56,-0l-0,-14Z" fill="#6a6bd3"/><path d="M164.433,47.58c-0.263,-1.825 -1.738,-2.783 -3.527,-2.783c-2.641,-0 -4.055,2.026 -4.055,4.511c-0,2.497 1.294,4.463 3.959,4.463c2.161,0 3.492,-1.294 3.707,-3.431l-1.138,0c-0.108,1.417 -0.973,2.473 -2.473,2.473c-2.053,-0 -2.917,-1.633 -2.917,-3.589c0,-1.788 0.864,-3.469 2.905,-3.469c1.188,0 2.161,0.612 2.401,1.825l1.138,-0Z" fill-rule="nonzero"/><path d="M169.607,51.408c-0,0.564 -0.553,1.405 -1.897,1.405c-0.624,-0 -1.201,-0.24 -1.201,-0.913c0,-0.756 0.577,-0.996 1.249,-1.116c0.684,-0.12 1.453,-0.132 1.849,-0.42l-0,1.044Zm1.654,1.345c-0.132,0.048 -0.228,0.06 -0.312,0.06c-0.324,-0 -0.324,-0.216 -0.324,-0.696l0,-3.193c0,-1.452 -1.21,-1.703 -2.327,-1.703c-1.381,-0 -2.567,0.539 -2.627,2.075l1.018,-0c0.048,-0.913 0.685,-1.177 1.549,-1.177c0.648,0 1.381,0.144 1.381,1.033c-0,0.768 -0.961,0.696 -2.089,0.912c-1.057,0.204 -2.099,0.504 -2.099,1.908c-0,1.236 0.922,1.739 2.051,1.739c0.864,0 1.621,-0.299 2.185,-0.958c-0,0.671 0.335,0.958 0.862,0.958c0.324,0 0.552,-0.06 0.732,-0.167l0,-0.791Z" fill-rule="nonzero"/><path d="M172.211,53.567l1.018,0l0,-3.504c0,-1.116 0.601,-1.944 1.837,-1.944c0.781,0 1.261,0.492 1.261,1.248l-0,4.2l1.018,0l0,-4.08c0,-1.332 -0.503,-2.266 -2.135,-2.266c-0.888,-0 -1.585,0.359 -2.017,1.126l-0.024,0l0,-0.982l-0.958,-0l-0,6.202Z" fill-rule="nonzero"/><path d="M184.149,49.356c-0.144,-1.476 -1.272,-2.135 -2.676,-2.135c-1.968,-0 -2.926,1.462 -2.926,3.323c-0,1.849 1.006,3.167 2.902,3.167c1.56,0 2.508,-0.898 2.736,-2.411l-1.044,0c-0.132,0.937 -0.72,1.513 -1.704,1.513c-1.296,-0 -1.812,-1.129 -1.812,-2.269c0,-1.26 0.456,-2.425 1.932,-2.425c0.84,0 1.38,0.456 1.536,1.237l1.056,-0Z" fill-rule="nonzero"/><path d="M189.611,51.6c-0.18,0.804 -0.769,1.213 -1.609,1.213c-1.357,-0 -1.969,-0.961 -1.933,-2.042l4.644,0c0.06,-1.499 -0.611,-3.55 -2.807,-3.55c-1.693,-0 -2.915,1.367 -2.915,3.227c0.06,1.896 0.994,3.263 2.975,3.263c1.393,0 2.376,-0.743 2.651,-2.111l-1.006,-0Zm-3.542,-1.727c0.072,-0.949 0.709,-1.754 1.777,-1.754c1.008,0 1.741,0.781 1.789,1.754l-3.566,-0Z" fill-rule="nonzero"/><rect x="191.831" y="45.001" width="1.018" height="8.567" fill-rule="nonzero"/><path d="M145.5,64.5l0,8" fill="none" stroke="#000" stroke-width="1px"/><path d="M202.5,64.5l-0,8" fill="none" stroke="#000" stroke-width="1px"/><path d="M145.5,68.5l57,-0" fill="none" stroke="#000" stroke-width="1px" stroke-miterlimit="1"/><path d="M166.37,75.205l-4.201,-0l-0.79,4.415l0.874,0.048c0.397,-0.481 0.937,-0.805 1.585,-0.805c1.141,0 1.921,0.805 1.921,1.933c-0,1.356 -0.829,2.017 -1.801,2.017c-1.02,-0 -1.729,-0.661 -1.789,-1.537l-1.018,0c0.036,1.537 1.234,2.435 2.711,2.435c1.981,0 2.975,-1.39 2.975,-2.831c0,-1.945 -1.234,-2.915 -2.747,-2.915c-0.576,-0 -1.212,0.191 -1.585,0.611l-0.024,-0.024l0.457,-2.449l3.432,0l0,-0.898Z" fill-rule="nonzero"/><path d="M168.961,81.168c0,-0.984 0.793,-1.633 1.801,-1.633c0.961,0 1.753,0.697 1.753,1.621c-0,0.948 -0.72,1.657 -1.741,1.657c-1.056,-0 -1.813,-0.625 -1.813,-1.645Zm-0.778,-3.937c-0,0.768 0.479,1.476 1.186,1.764c-0.947,0.336 -1.486,1.117 -1.486,2.125c-0,1.741 1.258,2.591 2.891,2.591c1.573,0 2.819,-0.946 2.819,-2.591c0,-1.056 -0.491,-1.801 -1.51,-2.125c0.695,-0.312 1.174,-1.008 1.174,-1.764c0,-1.08 -0.719,-2.17 -2.579,-2.17c-1.309,-0 -2.495,0.766 -2.495,2.17Zm1.078,0.037c0,-0.853 0.673,-1.309 1.489,-1.309c0.829,0 1.429,0.456 1.429,1.309c-0,0.864 -0.6,1.369 -1.405,1.369c-0.84,-0 -1.513,-0.432 -1.513,-1.369Z" fill-rule="nonzero"/><path d="M179.679,80.412c-0,1.212 -0.468,2.401 -1.861,2.401c-1.404,-0 -1.957,-1.129 -1.957,-2.353c0,-1.164 0.529,-2.341 1.897,-2.341c1.321,0 1.921,1.129 1.921,2.293Zm-4.8,5.531l1.018,0l0,-3.202l0.024,-0c0.457,0.731 1.369,0.97 2.005,0.97c1.897,0 2.831,-1.474 2.831,-3.227c0,-1.753 -0.946,-3.263 -2.855,-3.263c-0.852,-0 -1.645,0.299 -1.981,0.982l-0.024,0l0,-0.838l-1.018,-0l-0,8.578Z" fill-rule="nonzero"/><path d="M181.299,83.567l1.236,0l1.727,-2.577l1.728,2.577l1.307,0l-2.399,-3.36l2.135,-2.842l-1.223,-0l-1.548,2.161l-1.488,-2.161l-1.307,-0l2.159,2.938l-2.327,3.264Z" fill-rule="nonzero"/><rect x="204" y="42" width="52" height="16" fill="#e0e0ea"/><path d="M256,42l-0,16l-52,0l-0,-16l52,-0Zm-1,1l-50,0c-0,0 -0,14 -0,14l50,-0l0,-14Z" fill="#6a6bd3"/><path d="M213.273,53.567l5.95,0l0,-0.958l-4.812,-0l0,-2.966l4.452,0l0,-0.958l-4.452,-0l0,-2.726l4.776,0l0,-0.958l-5.914,-0l-0,8.566Z" fill-rule="nonzero"/><path d="M219.777,53.567l1.235,0l1.728,-2.577l1.728,2.577l1.307,0l-2.399,-3.36l2.135,-2.842l-1.223,-0l-1.548,2.161l-1.488,-2.161l-1.307,-0l2.159,2.938l-2.327,3.264Z" fill-rule="nonzero"/><path d="M231.489,50.412c-0,1.212 -0.468,2.401 -1.861,2.401c-1.405,-0 -1.957,-1.129 -1.957,-2.353c0,-1.164 0.528,-2.341 1.897,-2.341c1.321,0 1.921,1.129 1.921,2.293Zm-4.8,5.531l1.018,0l0,-3.202l0.024,-0c0.456,0.731 1.369,0.97 2.005,0.97c1.897,0 2.831,-1.474 2.831,-3.227c0,-1.753 -0.946,-3.263 -2.855,-3.263c-0.852,-0 -1.645,0.299 -1.981,0.982l-0.024,0l0,-0.838l-1.018,-0l-0,8.578Z" fill-rule="nonzero"/><path d="M233.433,50.472c-0,1.813 1.042,3.239 3.011,3.239c1.969,0 3.011,-1.426 3.011,-3.239c0,-1.825 -1.042,-3.251 -3.011,-3.251c-1.969,-0 -3.011,1.426 -3.011,3.251Zm1.078,0c0,-1.512 0.865,-2.353 1.933,-2.353c1.068,0 1.933,0.841 1.933,2.353c-0,1.5 -0.865,2.341 -1.933,2.341c-1.068,-0 -1.933,-0.841 -1.933,-2.341Z" fill-rule="nonzero"/><path d="M240.621,53.567l1.018,0l0,-2.76c0,-1.572 0.6,-2.508 2.244,-2.508l0,-1.078c-1.104,-0.036 -1.788,0.455 -2.28,1.45l-0.024,0l0,-1.306l-0.958,-0l-0,6.202Z" fill-rule="nonzero"/><path d="M246.067,45.505l-1.018,-0l-0,1.86l-1.056,-0l-0,0.898l1.056,0l-0,3.95c-0,1.139 0.419,1.354 1.474,1.354l0.78,0l0,-0.898l-0.468,-0c-0.636,-0 -0.768,-0.084 -0.768,-0.552l0,-3.854l1.236,0l0,-0.898l-1.236,-0l0,-1.86Z" fill-rule="nonzero"/><path d="M204.5,64.5l-0,8" fill="none" stroke="#000" stroke-width="1px"/><path d="M255.5,64.5l-0,8" fill="none" stroke="#000" stroke-width="1px"/><path d="M204.5,68.5l51,-0" fill="none" stroke="#000" stroke-width="1px" stroke-miterlimit="1"/><path d="M221.37,75.205l-4.201,-0l-0.79,4.415l0.874,0.048c0.397,-0.481 0.937,-0.805 1.585,-0.805c1.141,0 1.921,0.805 1.921,1.933c-0,1.356 -0.829,2.017 -1.801,2.017c-1.02,-0 -1.729,-0.661 -1.789,-1.537l-1.018,0c0.036,1.537 1.234,2.435 2.711,2.435c1.981,0 2.975,-1.39 2.975,-2.831c0,-1.945 -1.234,-2.915 -2.747,-2.915c-0.576,-0 -1.212,0.191 -1.585,0.611l-0.024,-0.024l0.457,-2.449l3.432,0l0,-0.898Z" fill-rule="nonzero"/><path d="M223.949,78.072c-0.036,-1.021 0.469,-2.113 1.657,-2.113c0.901,0 1.645,0.612 1.645,1.537c-0,1.176 -0.732,1.704 -2.173,2.592c-1.201,0.744 -2.219,1.464 -2.387,3.479l5.554,0l0,-0.898l-4.368,-0c0.204,-1.056 1.321,-1.597 2.389,-2.245c1.057,-0.66 2.063,-1.416 2.063,-2.916c0,-1.585 -1.174,-2.447 -2.663,-2.447c-1.801,-0 -2.819,1.282 -2.735,3.011l1.018,-0Z" fill-rule="nonzero"/><path d="M234.679,80.412c-0,1.212 -0.468,2.401 -1.861,2.401c-1.404,-0 -1.957,-1.129 -1.957,-2.353c0,-1.164 0.529,-2.341 1.897,-2.341c1.321,0 1.921,1.129 1.921,2.293Zm-4.8,5.531l1.018,0l0,-3.202l0.024,-0c0.457,0.731 1.369,0.97 2.005,0.97c1.897,0 2.831,-1.474 2.831,-3.227c0,-1.753 -0.946,-3.263 -2.855,-3.263c-0.852,-0 -1.645,0.299 -1.981,0.982l-0.024,0l0,-0.838l-1.018,-0l-0,8.578Z" fill-rule="nonzero"/><path d="M236.299,83.567l1.236,0l1.727,-2.577l1.728,2.577l1.307,0l-2.399,-3.36l2.135,-2.842l-1.223,-0l-1.548,2.161l-1.488,-2.161l-1.307,-0l2.159,2.938l-2.327,3.264Z" fill-rule="nonzero"/><rect x="257" y="42" width="38" height="16" fill="#e0e0ea"/><path d="M295,42l-0,16l-38,0l-0,-16l38,-0Zm-1,1l-36,0l0,14l36,-0l0,-14Z" fill="#6a6bd3"/><path d="M263.877,53.567l1.138,0l0,-3.504l2.617,0c1.704,0.012 2.627,-0.946 2.627,-2.531c0,-1.585 -0.923,-2.531 -2.627,-2.531l-3.755,-0l-0,8.566Zm1.138,-7.608l2.233,0c1.285,0 1.873,0.553 1.873,1.573c-0,1.02 -0.588,1.585 -1.873,1.573l-2.233,-0l0,-3.146Z" fill-rule="nonzero"/><path d="M276.619,47.365l-1.018,-0l-0,3.504c-0,1.116 -0.601,1.944 -1.837,1.944c-0.781,-0 -1.261,-0.492 -1.261,-1.248l0,-4.2l-1.018,-0l-0,4.08c-0,1.332 0.503,2.266 2.135,2.266c0.888,0 1.585,-0.359 2.017,-1.126l0.024,-0l-0,0.982l0.958,0l0,-6.202Z" fill-rule="nonzero"/><path d="M277.761,51.612c0.06,1.536 1.234,2.099 2.627,2.099c1.261,0 2.639,-0.479 2.639,-1.955c0,-1.2 -1.006,-1.536 -2.027,-1.764c-0.948,-0.228 -2.029,-0.348 -2.029,-1.08c0,-0.625 0.709,-0.793 1.321,-0.793c0.672,0 1.369,0.252 1.441,1.045l1.018,-0c-0.084,-1.512 -1.174,-1.943 -2.543,-1.943c-1.081,-0 -2.315,0.515 -2.315,1.763c-0,1.188 1.018,1.524 2.027,1.752c1.02,0.228 2.029,0.36 2.029,1.152c-0,0.781 -0.865,0.925 -1.501,0.925c-0.84,-0 -1.633,-0.288 -1.669,-1.201l-1.018,0Z" fill-rule="nonzero"/><path d="M284.157,53.567l1.018,0l0,-3.504c0,-1.116 0.601,-1.944 1.837,-1.944c0.781,0 1.261,0.492 1.261,1.248l-0,4.2l1.018,0l0,-4.08c0,-1.332 -0.503,-2.266 -2.135,-2.266c-0.744,-0 -1.621,0.311 -1.957,1.054l-0.024,0l0,-3.274l-1.018,-0l-0,8.566Z" fill-rule="nonzero"/><path d="M257.5,64.5l0,8" fill="none" stroke="#000" stroke-width="1px"/><path d="M294.5,64.5l0,8" fill="none" stroke="#000" stroke-width="1px"/><path d="M257.5,68.5l37,-0" fill="none" stroke="#000" stroke-width="1px" stroke-miterlimit="1"/><path d="M265.346,79.571c0.192,-0.024 0.408,-0.036 0.612,-0.036c1.009,0 1.813,0.565 1.813,1.633c-0,1.032 -0.852,1.645 -1.849,1.645c-1.164,-0 -1.777,-0.769 -1.813,-1.873l-1.018,-0c-0.036,1.753 1.102,2.771 2.831,2.771c1.597,0 2.927,-0.886 2.927,-2.591c0,-1.02 -0.503,-1.836 -1.534,-2.064l-0,-0.024c0.647,-0.299 1.174,-0.948 1.174,-1.692c0,-1.572 -1.114,-2.279 -2.591,-2.279c-1.705,-0 -2.567,1.126 -2.627,2.747l1.018,0c0.012,-0.996 0.493,-1.849 1.609,-1.849c0.865,0 1.513,0.48 1.513,1.369c-0,0.924 -0.756,1.393 -1.621,1.393c-0.144,-0 -0.288,-0 -0.444,-0.012l-0,0.862Z" fill-rule="nonzero"/><path d="M270.961,81.168c0,-0.984 0.793,-1.633 1.801,-1.633c0.961,0 1.753,0.697 1.753,1.621c-0,0.948 -0.72,1.657 -1.741,1.657c-1.056,-0 -1.813,-0.625 -1.813,-1.645Zm-0.778,-3.937c-0,0.768 0.479,1.476 1.186,1.764c-0.947,0.336 -1.486,1.117 -1.486,2.125c-0,1.741 1.258,2.591 2.891,2.591c1.573,0 2.819,-0.946 2.819,-2.591c0,-1.056 -0.491,-1.801 -1.51,-2.125c0.695,-0.312 1.174,-1.008 1.174,-1.764c0,-1.08 -0.719,-2.17 -2.579,-2.17c-1.309,-0 -2.495,0.766 -2.495,2.17Zm1.078,0.037c0,-0.853 0.673,-1.309 1.489,-1.309c0.829,0 1.429,0.456 1.429,1.309c-0,0.864 -0.6,1.369 -1.405,1.369c-0.84,-0 -1.513,-0.432 -1.513,-1.369Z" fill-rule="nonzero"/><path d="M281.679,80.412c-0,1.212 -0.468,2.401 -1.861,2.401c-1.404,-0 -1.957,-1.129 -1.957,-2.353c0,-1.164 0.529,-2.341 1.897,-2.341c1.321,0 1.921,1.129 1.921,2.293Zm-4.8,5.531l1.018,0l0,-3.202l0.024,-0c0.457,0.731 1.369,0.97 2.005,0.97c1.897,0 2.831,-1.474 2.831,-3.227c0,-1.753 -0.946,-3.263 -2.855,-3.263c-0.852,-0 -1.645,0.299 -1.981,0.982l-0.024,0l0,-0.838l-1.018,-0l-0,8.578Z" fill-rule="nonzero"/><path d="M283.299,83.567l1.236,0l1.727,-2.577l1.728,2.577l1.307,0l-2.399,-3.36l2.135,-2.842l-1.223,-0l-1.548,2.161l-1.488,-2.161l-1.307,-0l2.159,2.938l-2.327,3.264Z" fill-rule="nonzero"/><rect x="490" y="42" width="44" height="16" fill="#e0e0ea"/><path d="M534,42l0,16l-44,-0l-0,-16l44,-0Zm-1,1l-42,0l-0,14l42,-0l-0,-14Z" fill="#6a6bd3"/><path d="M504.769,47.58c-0.263,-1.825 -1.738,-2.783 -3.527,-2.783c-2.641,-0 -4.055,2.026 -4.055,4.511c-0,2.497 1.294,4.463 3.959,4.463c2.161,0 3.492,-1.294 3.707,-3.431l-1.138,0c-0.108,1.417 -0.973,2.473 -2.473,2.473c-2.053,-0 -2.917,-1.633 -2.917,-3.589c0,-1.788 0.864,-3.469 2.905,-3.469c1.188,0 2.161,0.612 2.401,1.825l1.138,-0Z" fill-rule="nonzero"/><rect x="506.163" y="45.001" width="1.018" height="8.567" fill-rule="nonzero"/><path d="M508.431,50.472c-0,1.813 1.042,3.239 3.011,3.239c1.969,0 3.011,-1.426 3.011,-3.239c0,-1.825 -1.042,-3.251 -3.011,-3.251c-1.969,-0 -3.011,1.426 -3.011,3.251Zm1.078,0c0,-1.512 0.865,-2.353 1.933,-2.353c1.068,0 1.933,0.841 1.933,2.353c-0,1.5 -0.865,2.341 -1.933,2.341c-1.068,-0 -1.933,-0.841 -1.933,-2.341Z" fill-rule="nonzero"/><path d="M515.259,51.612c0.06,1.536 1.234,2.099 2.627,2.099c1.261,0 2.639,-0.479 2.639,-1.955c0,-1.2 -1.006,-1.536 -2.027,-1.764c-0.948,-0.228 -2.029,-0.348 -2.029,-1.08c0,-0.625 0.709,-0.793 1.321,-0.793c0.672,0 1.369,0.252 1.441,1.045l1.018,-0c-0.084,-1.512 -1.174,-1.943 -2.543,-1.943c-1.081,-0 -2.315,0.515 -2.315,1.763c-0,1.188 1.018,1.524 2.027,1.752c1.02,0.228 2.029,0.36 2.029,1.152c-0,0.781 -0.865,0.925 -1.501,0.925c-0.84,-0 -1.633,-0.288 -1.669,-1.201l-1.018,0Z" fill-rule="nonzero"/><path d="M525.939,51.6c-0.18,0.804 -0.769,1.213 -1.609,1.213c-1.357,-0 -1.969,-0.961 -1.933,-2.042l4.644,0c0.06,-1.499 -0.611,-3.55 -2.807,-3.55c-1.693,-0 -2.915,1.367 -2.915,3.227c0.06,1.896 0.994,3.263 2.975,3.263c1.393,0 2.376,-0.743 2.651,-2.111l-1.006,-0Zm-3.542,-1.727c0.072,-0.949 0.709,-1.754 1.777,-1.754c1.008,0 1.741,0.781 1.789,1.754l-3.566,-0Z" fill-rule="nonzero"/><circle cx="512" cy="50" r="12" fill="#00ff41" fill-opacity=".2"/><path d="M512,38c6.623,0 12,5.377 12,12c0,6.623 -5.377,12 -12,12c-6.623,0 -12,-5.377 -12,-12c0,-6.623 5.377,-12 12,-12Zm0,1c-6.071,0 -11,4.929 -11,11c0,6.071 4.929,11 11,11c6.071,0 11,-4.929 11,-11c0,-6.071 -4.929,-11 -11,-11Z" fill="#1b7024"/><rect x="535" y="42" width="44" height="16" fill="#e0e0ea"/><path d="M579,42l0,16l-44,-0l0,-16l44,-0Zm-1,1l-42,0l-0,14l42,-0l-0,-14Z" fill="#6a6bd3"/><path d="M550.639,47.508c-0.072,-1.885 -1.402,-2.711 -3.155,-2.711c-1.561,-0 -3.107,0.767 -3.107,2.507c-0,1.572 1.378,1.968 2.747,2.268c1.368,0.3 2.737,0.504 2.737,1.68c-0,1.237 -1.141,1.561 -2.173,1.561c-1.296,-0 -2.497,-0.624 -2.497,-2.065l-1.078,0c-0,2.089 1.618,3.023 3.539,3.023c1.561,0 3.347,-0.731 3.347,-2.555c0,-1.68 -1.366,-2.16 -2.735,-2.472c-1.38,-0.312 -2.749,-0.468 -2.749,-1.524c0,-1.117 0.961,-1.465 1.921,-1.465c1.176,0 1.993,0.528 2.125,1.753l1.078,-0Z" fill-rule="nonzero"/><path d="M556.053,51.408c-0,0.564 -0.553,1.405 -1.897,1.405c-0.624,-0 -1.201,-0.24 -1.201,-0.913c0,-0.756 0.577,-0.996 1.249,-1.116c0.684,-0.12 1.453,-0.132 1.849,-0.42l-0,1.044Zm1.654,1.345c-0.132,0.048 -0.228,0.06 -0.312,0.06c-0.324,-0 -0.324,-0.216 -0.324,-0.696l0,-3.193c0,-1.452 -1.21,-1.703 -2.327,-1.703c-1.381,-0 -2.567,0.539 -2.627,2.075l1.018,-0c0.048,-0.913 0.685,-1.177 1.549,-1.177c0.648,0 1.381,0.144 1.381,1.033c-0,0.768 -0.961,0.696 -2.089,0.912c-1.057,0.204 -2.099,0.504 -2.099,1.908c-0,1.236 0.922,1.739 2.051,1.739c0.864,0 1.621,-0.299 2.185,-0.958c-0,0.671 0.335,0.958 0.862,0.958c0.324,0 0.552,-0.06 0.732,-0.167l0,-0.791Z" fill-rule="nonzero"/><path d="M563.719,47.365l-1.067,-0l-1.692,5.172l-0.024,-0l-1.74,-5.172l-1.139,-0l2.303,6.202l1.092,0l2.267,-6.202Z" fill-rule="nonzero"/><path d="M568.941,51.6c-0.18,0.804 -0.769,1.213 -1.609,1.213c-1.357,-0 -1.969,-0.961 -1.933,-2.042l4.644,0c0.06,-1.499 -0.611,-3.55 -2.807,-3.55c-1.693,-0 -2.915,1.367 -2.915,3.227c0.06,1.896 0.994,3.263 2.975,3.263c1.393,0 2.376,-0.743 2.651,-2.111l-1.006,-0Zm-3.542,-1.727c0.072,-0.949 0.709,-1.754 1.777,-1.754c1.008,0 1.741,0.781 1.789,1.754l-3.566,-0Z" fill-rule="nonzero"/><circle cx="557.002" cy="50" r="12" fill="#00ff41" fill-opacity=".2"/><path d="M557.002,38c6.623,0 12,5.377 12,12c0,6.623 -5.377,12 -12,12c-6.623,-0 -12,-5.377 -12,-12c0,-6.623 5.377,-12 12,-12Zm0,1c-6.071,0 -11,4.929 -11,11c0,6.071 4.929,11 11,11c6.071,-0 11,-4.929 11,-11c0,-6.071 -4.929,-11 -11,-11Z" fill="#1b7024"/><rect x="580" y="42" width="58" height="16" fill="#e0e0ea"/><path d="M638,42l0,16l-58,-0l0,-16l58,-0Zm-1,1l-56,0c0,0 -0,14 -0,14l56,-0l-0,-14Z" fill="#6a6bd3"/><path d="M599.433,47.58c-0.263,-1.825 -1.738,-2.783 -3.527,-2.783c-2.641,-0 -4.055,2.026 -4.055,4.511c-0,2.497 1.294,4.463 3.959,4.463c2.161,0 3.492,-1.294 3.707,-3.431l-1.138,0c-0.108,1.417 -0.973,2.473 -2.473,2.473c-2.053,-0 -2.917,-1.633 -2.917,-3.589c0,-1.788 0.864,-3.469 2.905,-3.469c1.188,0 2.161,0.612 2.401,1.825l1.138,-0Z" fill-rule="nonzero"/><path d="M604.607,51.408c-0,0.564 -0.553,1.405 -1.897,1.405c-0.624,-0 -1.201,-0.24 -1.201,-0.913c0,-0.756 0.577,-0.996 1.249,-1.116c0.684,-0.12 1.453,-0.132 1.849,-0.42l-0,1.044Zm1.654,1.345c-0.132,0.048 -0.228,0.06 -0.312,0.06c-0.324,-0 -0.324,-0.216 -0.324,-0.696l0,-3.193c0,-1.452 -1.21,-1.703 -2.327,-1.703c-1.381,-0 -2.567,0.539 -2.627,2.075l1.018,-0c0.048,-0.913 0.685,-1.177 1.549,-1.177c0.648,0 1.381,0.144 1.381,1.033c-0,0.768 -0.961,0.696 -2.089,0.912c-1.057,0.204 -2.099,0.504 -2.099,1.908c-0,1.236 0.922,1.739 2.051,1.739c0.864,0 1.621,-0.299 2.185,-0.958c-0,0.671 0.335,0.958 0.862,0.958c0.324,0 0.552,-0.06 0.732,-0.167l0,-0.791Z" fill-rule="nonzero"/><path d="M607.211,53.567l1.018,0l0,-3.504c0,-1.116 0.601,-1.944 1.837,-1.944c0.781,0 1.261,0.492 1.261,1.248l-0,4.2l1.018,0l0,-4.08c0,-1.332 -0.503,-2.266 -2.135,-2.266c-0.888,-0 -1.585,0.359 -2.017,1.126l-0.024,0l0,-0.982l-0.958,-0l-0,6.202Z" fill-rule="nonzero"/><path d="M619.149,49.356c-0.144,-1.476 -1.272,-2.135 -2.676,-2.135c-1.968,-0 -2.926,1.462 -2.926,3.323c-0,1.849 1.006,3.167 2.902,3.167c1.56,0 2.508,-0.898 2.736,-2.411l-1.044,0c-0.132,0.937 -0.72,1.513 -1.704,1.513c-1.296,-0 -1.812,-1.129 -1.812,-2.269c0,-1.26 0.456,-2.425 1.932,-2.425c0.84,0 1.38,0.456 1.536,1.237l1.056,-0Z" fill-rule="nonzero"/><path d="M624.611,51.6c-0.18,0.804 -0.769,1.213 -1.609,1.213c-1.357,-0 -1.969,-0.961 -1.933,-2.042l4.644,0c0.06,-1.499 -0.611,-3.55 -2.807,-3.55c-1.693,-0 -2.915,1.367 -2.915,3.227c0.06,1.896 0.994,3.263 2.975,3.263c1.393,0 2.376,-0.743 2.651,-2.111l-1.006,-0Zm-3.542,-1.727c0.072,-0.949 0.709,-1.754 1.777,-1.754c1.008,0 1.741,0.781 1.789,1.754l-3.566,-0Z" fill-rule="nonzero"/><rect x="626.831" y="45.001" width="1.019" height="8.567" fill-rule="nonzero"/><circle cx="609.002" cy="50" r="12" fill="#00ff41" fill-opacity=".2"/><path d="M609.002,38c6.623,0 12,5.377 12,12c0,6.623 -5.377,12 -12,12c-6.623,0 -12,-5.377 -12,-12c0,-6.623 5.377,-12 12,-12Zm0,1c-6.071,0 -11,4.929 -11,11c0,6.071 4.929,11 11,11c6.071,0 11,-4.929 11,-11c0,-6.071 -4.929,-11 -11,-11Z" fill="#1b7024"/><rect x="639" y="42" width="52" height="16" fill="#e0e0ea"/><path d="M691,42l0,16l-52,-0l0,-16l52,-0Zm-1,1l-50,0c0,0 0,14 -0,14l50,-0l0,-14Z" fill="#6a6bd3"/><path d="M648.273,53.567l5.95,0l0,-0.958l-4.812,-0l0,-2.966l4.452,0l0,-0.958l-4.452,-0l0,-2.726l4.776,0l0,-0.958l-5.914,-0l-0,8.566Z" fill-rule="nonzero"/><path d="M654.777,53.567l1.235,0l1.728,-2.577l1.728,2.577l1.307,0l-2.399,-3.36l2.135,-2.842l-1.223,-0l-1.548,2.161l-1.488,-2.161l-1.307,-0l2.159,2.938l-2.327,3.264Z" fill-rule="nonzero"/><path d="M666.489,50.412c-0,1.212 -0.468,2.401 -1.861,2.401c-1.405,-0 -1.957,-1.129 -1.957,-2.353c0,-1.164 0.528,-2.341 1.897,-2.341c1.321,0 1.921,1.129 1.921,2.293Zm-4.8,5.531l1.018,0l0,-3.202l0.024,-0c0.456,0.731 1.369,0.97 2.005,0.97c1.897,0 2.831,-1.474 2.831,-3.227c0,-1.753 -0.946,-3.263 -2.855,-3.263c-0.852,-0 -1.645,0.299 -1.981,0.982l-0.024,0l0,-0.838l-1.018,-0l-0,8.578Z" fill-rule="nonzero"/><path d="M668.433,50.472c-0,1.813 1.042,3.239 3.011,3.239c1.969,0 3.011,-1.426 3.011,-3.239c0,-1.825 -1.042,-3.251 -3.011,-3.251c-1.969,-0 -3.011,1.426 -3.011,3.251Zm1.078,0c0,-1.512 0.865,-2.353 1.933,-2.353c1.068,0 1.933,0.841 1.933,2.353c-0,1.5 -0.865,2.341 -1.933,2.341c-1.068,-0 -1.933,-0.841 -1.933,-2.341Z" fill-rule="nonzero"/><path d="M675.621,53.567l1.018,0l0,-2.76c0,-1.572 0.6,-2.508 2.244,-2.508l0,-1.078c-1.104,-0.036 -1.788,0.455 -2.28,1.45l-0.024,0l0,-1.306l-0.958,-0l-0,6.202Z" fill-rule="nonzero"/><path d="M681.067,45.505l-1.018,-0l-0,1.86l-1.056,-0l-0,0.898l1.056,0l-0,3.95c-0,1.139 0.419,1.354 1.474,1.354l0.78,0l0,-0.898l-0.468,-0c-0.636,-0 -0.768,-0.084 -0.768,-0.552l0,-3.854l1.236,0l0,-0.898l-1.236,-0l0,-1.86Z" fill-rule="nonzero"/><circle cx="665.002" cy="50" r="12" fill="#00ff41" fill-opacity=".2"/><path d="M665.002,38c6.623,0 12,5.377 12,12c0,6.623 -5.377,12 -12,12c-6.623,0 -12,-5.377 -12,-12c0,-6.623 5.377,-12 12,-12Zm0,1c-6.071,0 -11,4.929 -11,11c0,6.071 4.929,11 11,11c6.071,0 11,-4.929 11,-11c0,-6.071 -4.929,-11 -11,-11Z" fill="#1b7024"/><rect x="692" y="42" width="38" height="16" fill="#e0e0ea"/><path d="M730,42l0,16l-38,-0l0,-16l38,-0Zm-1,1l-36,0l0,14l36,-0l0,-14Z" fill="#6a6bd3"/><path d="M698.877,53.567l1.138,0l0,-3.504l2.617,0c1.704,0.012 2.627,-0.946 2.627,-2.531c0,-1.585 -0.923,-2.531 -2.627,-2.531l-3.755,-0l-0,8.566Zm1.138,-7.608l2.233,0c1.285,0 1.873,0.553 1.873,1.573c-0,1.02 -0.588,1.585 -1.873,1.573l-2.233,-0l0,-3.146Z" fill-rule="nonzero"/><path d="M711.619,47.365l-1.018,-0l-0,3.504c-0,1.116 -0.601,1.944 -1.837,1.944c-0.781,-0 -1.261,-0.492 -1.261,-1.248l0,-4.2l-1.018,-0l-0,4.08c-0,1.332 0.503,2.266 2.135,2.266c0.888,0 1.585,-0.359 2.017,-1.126l0.024,-0l-0,0.982l0.958,0l0,-6.202Z" fill-rule="nonzero"/><path d="M712.761,51.612c0.06,1.536 1.234,2.099 2.627,2.099c1.261,0 2.639,-0.479 2.639,-1.955c0,-1.2 -1.006,-1.536 -2.027,-1.764c-0.948,-0.228 -2.029,-0.348 -2.029,-1.08c0,-0.625 0.709,-0.793 1.321,-0.793c0.672,0 1.369,0.252 1.441,1.045l1.018,-0c-0.084,-1.512 -1.174,-1.943 -2.543,-1.943c-1.081,-0 -2.315,0.515 -2.315,1.763c-0,1.188 1.018,1.524 2.027,1.752c1.02,0.228 2.029,0.36 2.029,1.152c-0,0.781 -0.865,0.925 -1.501,0.925c-0.84,-0 -1.633,-0.288 -1.669,-1.201l-1.018,0Z" fill-rule="nonzero"/><path d="M719.157,53.567l1.018,0l0,-3.504c0,-1.116 0.601,-1.944 1.837,-1.944c0.781,0 1.261,0.492 1.261,1.248l-0,4.2l1.018,0l0,-4.08c0,-1.332 -0.503,-2.266 -2.135,-2.266c-0.744,-0 -1.621,0.311 -1.957,1.054l-0.024,0l0,-3.274l-1.018,-0l-0,8.566Z" fill-rule="nonzero"/><circle cx="711.002" cy="50" r="12" fill="#00ff41" fill-opacity=".2"/><path d="M711.002,38c6.623,0 12,5.377 12,12c0,6.623 -5.377,12 -12,12c-6.623,0 -12,-5.377 -12,-12c0,-6.623 5.377,-12 12,-12Zm0,1c-6.071,0 -11,4.929 -11,11c0,6.071 4.929,11 11,11c6.071,0 11,-4.929 11,-11c0,-6.071 -4.929,-11 -11,-11Z" fill="#1b7024"/><path d="M484.5,38.5l-8,-0" fill="none" stroke="#000" stroke-width="1px"/><path d="M484.5,61.5l-8,-0" fill="none" stroke="#000" stroke-width="1px"/><path d="M480.5,38.5l0,23" fill="none" stroke="#000" stroke-width="1px" stroke-miterlimit="1"/><g transform="matrix(1,0,0,1,291.501,-159.468)"><path d="M0.129,-0.458c-0.003,-0.085 0.039,-0.176 0.138,-0.176c0.075,-0 0.137,0.051 0.137,0.128c0,0.098 -0.061,0.142 -0.181,0.216c-0.1,0.062 -0.185,0.122 -0.199,0.29l0.463,-0l-0,-0.075l-0.364,0c0.017,-0.088 0.11,-0.133 0.199,-0.187c0.088,-0.055 0.172,-0.118 0.172,-0.243c-0,-0.132 -0.098,-0.204 -0.222,-0.204c-0.15,0 -0.235,0.107 -0.228,0.251l0.085,-0Z" fill="#196722" fill-rule="nonzero" transform="matrix(12,0,0,12,154.823,213.245)"/><path d="M0.419,-0.709l-0.068,0l-0.323,0.461l0,0.082l0.311,-0l0,0.166l0.08,-0l-0,-0.166l0.096,-0l-0,-0.075l-0.096,0l-0,-0.468Zm-0.318,0.468l0.236,-0.347l0.002,0l0,0.347l-0.238,0Z" fill="#196722" fill-rule="nonzero" transform="matrix(12,0,0,12,161.495,213.245)"/><path d="M0.467,-0.263c0,0.101 -0.039,0.2 -0.155,0.2c-0.117,0 -0.163,-0.094 -0.163,-0.196c-0,-0.097 0.044,-0.195 0.158,-0.195c0.11,-0 0.16,0.094 0.16,0.191Zm-0.4,0.461l0.085,-0l-0,-0.267l0.002,0c0.038,0.061 0.114,0.081 0.167,0.081c0.158,-0 0.236,-0.123 0.236,-0.269c-0,-0.146 -0.079,-0.272 -0.238,-0.272c-0.071,0 -0.137,0.025 -0.165,0.082l-0.002,-0l-0,-0.07l-0.085,0l0,0.715Z" fill="#196722" fill-rule="nonzero" transform="matrix(12,0,0,12,168.167,213.245)"/><path d="M0.009,-0l0.103,-0l0.144,-0.215l0.144,0.215l0.109,-0l-0.2,-0.28l0.178,-0.237l-0.102,0l-0.129,0.18l-0.124,-0.18l-0.109,0l0.18,0.245l-0.194,0.272Z" fill="#196722" fill-rule="nonzero" transform="matrix(12,0,0,12,175.283,213.245)"/><rect x="154.823" y="214.145" width="26.676" height="0.6" fill="#196722"/></g><g transform="matrix(1,0,0,1,336.501,-184.26)"><path d="M0.064,-0l0.085,-0l-0,-0.292c-0,-0.093 0.05,-0.162 0.153,-0.162c0.065,-0 0.105,0.041 0.105,0.104l0,0.35l0.085,-0l-0,-0.34c-0,-0.111 -0.042,-0.189 -0.178,-0.189c-0.074,0 -0.132,0.03 -0.168,0.094l-0.002,-0l-0,-0.082l-0.08,0l0,0.517Z" fill="#196722" fill-rule="nonzero" transform="matrix(12,0,0,12,213.051,213.245)"/><path d="M0.036,-0.258c0,0.151 0.087,0.27 0.251,0.27c0.164,-0 0.251,-0.119 0.251,-0.27c-0,-0.152 -0.087,-0.271 -0.251,-0.271c-0.164,0 -0.251,0.119 -0.251,0.271Zm0.09,0c-0,-0.126 0.072,-0.196 0.161,-0.196c0.089,-0 0.161,0.07 0.161,0.196c0,0.125 -0.072,0.195 -0.161,0.195c-0.089,0 -0.161,-0.07 -0.161,-0.195Z" fill="#196722" fill-rule="nonzero" transform="matrix(12,0,0,12,219.723,213.245)"/><path d="M0.503,-0.351c-0.012,-0.123 -0.106,-0.178 -0.223,-0.178c-0.164,0 -0.244,0.122 -0.244,0.277c0,0.154 0.084,0.264 0.242,0.264c0.13,-0 0.209,-0.075 0.228,-0.201l-0.087,0c-0.011,0.078 -0.06,0.126 -0.142,0.126c-0.108,0 -0.151,-0.094 -0.151,-0.189c-0,-0.105 0.038,-0.202 0.161,-0.202c0.07,-0 0.115,0.038 0.128,0.103l0.088,-0Z" fill="#196722" fill-rule="nonzero" transform="matrix(12,0,0,12,229.947,213.245)"/><rect x="0.069" y="-0.714" width="0.085" height="0.714" fill="#196722" fill-rule="nonzero" transform="matrix(12,0,0,12,236.391,213.245)"/><path d="M0.036,-0.258c0,0.151 0.087,0.27 0.251,0.27c0.164,-0 0.251,-0.119 0.251,-0.27c-0,-0.152 -0.087,-0.271 -0.251,-0.271c-0.164,0 -0.251,0.119 -0.251,0.271Zm0.09,0c-0,-0.126 0.072,-0.196 0.161,-0.196c0.089,-0 0.161,0.07 0.161,0.196c0,0.125 -0.072,0.195 -0.161,0.195c-0.089,0 -0.161,-0.07 -0.161,-0.195Z" fill="#196722" fill-rule="nonzero" transform="matrix(12,0,0,12,239.055,213.245)"/><path d="M0.031,-0.163c0.005,0.128 0.103,0.175 0.219,0.175c0.105,-0 0.22,-0.04 0.22,-0.163c-0,-0.1 -0.084,-0.128 -0.169,-0.147c-0.079,-0.019 -0.169,-0.029 -0.169,-0.09c-0,-0.052 0.059,-0.066 0.11,-0.066c0.056,-0 0.114,0.021 0.12,0.087l0.085,-0c-0.007,-0.126 -0.098,-0.162 -0.212,-0.162c-0.09,0 -0.193,0.043 -0.193,0.147c0,0.099 0.085,0.127 0.169,0.146c0.085,0.019 0.169,0.03 0.169,0.096c0,0.065 -0.072,0.077 -0.125,0.077c-0.07,0 -0.136,-0.024 -0.139,-0.1l-0.085,0Z" fill="#196722" fill-rule="nonzero" transform="matrix(12,0,0,12,245.943,213.245)"/><path d="M0.421,-0.164c-0.015,0.067 -0.064,0.101 -0.134,0.101c-0.113,0 -0.164,-0.08 -0.161,-0.17l0.387,-0c0.005,-0.125 -0.051,-0.296 -0.234,-0.296c-0.141,0 -0.243,0.114 -0.243,0.269c0.005,0.158 0.083,0.272 0.248,0.272c0.116,-0 0.198,-0.062 0.221,-0.176l-0.084,-0Zm-0.295,-0.144c0.006,-0.079 0.059,-0.146 0.148,-0.146c0.084,-0 0.145,0.065 0.149,0.146l-0.297,0Z" fill="#196722" fill-rule="nonzero" transform="matrix(12,0,0,12,251.943,213.245)"/><path d="M0.182,-0.672l-0.085,0l0,0.155l-0.088,0l0,0.075l0.088,-0l0,0.329c0,0.095 0.035,0.113 0.123,0.113l0.065,-0l-0,-0.075l-0.039,0c-0.053,0 -0.064,-0.007 -0.064,-0.046l-0,-0.321l0.103,-0l-0,-0.075l-0.103,0l-0,-0.155Z" fill="#196722" fill-rule="nonzero" transform="matrix(12,0,0,12,261.723,213.245)"/><path d="M0.384,-0.18c0,0.047 -0.046,0.117 -0.158,0.117c-0.052,0 -0.1,-0.02 -0.1,-0.076c-0,-0.063 0.048,-0.083 0.104,-0.093c0.057,-0.01 0.121,-0.011 0.154,-0.035l0,0.087Zm0.138,0.112c-0.011,0.004 -0.019,0.005 -0.026,0.005c-0.027,0 -0.027,-0.018 -0.027,-0.058l-0,-0.266c-0,-0.121 -0.101,-0.142 -0.194,-0.142c-0.115,0 -0.214,0.045 -0.219,0.173l0.085,-0c0.004,-0.076 0.057,-0.098 0.129,-0.098c0.054,-0 0.115,0.012 0.115,0.086c0,0.064 -0.08,0.058 -0.174,0.076c-0.088,0.017 -0.175,0.042 -0.175,0.159c0,0.103 0.077,0.145 0.171,0.145c0.072,-0 0.135,-0.025 0.182,-0.08c0,0.056 0.028,0.08 0.072,0.08c0.027,-0 0.046,-0.005 0.061,-0.014l-0,-0.066Z" fill="#196722" fill-rule="nonzero" transform="matrix(12,0,0,12,265.503,213.245)"/><path d="M0.061,-0l0.085,-0l-0,-0.23c-0,-0.131 0.05,-0.209 0.187,-0.209l-0,-0.09c-0.092,-0.003 -0.149,0.038 -0.19,0.121l-0.002,-0l-0,-0.109l-0.08,0l0,0.517Z" fill="#196722" fill-rule="nonzero" transform="matrix(12,0,0,12,271.947,213.245)"/><path d="M0.272,-0.069c-0.112,0 -0.146,-0.104 -0.146,-0.197c-0,-0.099 0.044,-0.188 0.153,-0.188c0.107,-0 0.147,0.094 0.147,0.185c0,0.097 -0.042,0.2 -0.154,0.2Zm0.238,-0.448l-0.08,0l0,0.074l-0.001,-0c-0.031,-0.057 -0.089,-0.086 -0.154,-0.086c-0.179,0 -0.239,0.151 -0.239,0.273c0,0.141 0.077,0.262 0.231,0.262c0.065,-0 0.133,-0.031 0.161,-0.094l0.002,0l0,0.034c0,0.116 -0.044,0.196 -0.155,0.196c-0.056,0 -0.13,-0.022 -0.134,-0.084l-0.085,-0c0.005,0.113 0.117,0.152 0.214,0.152c0.163,-0 0.24,-0.086 0.24,-0.254l-0,-0.473Z" fill="#196722" fill-rule="nonzero" transform="matrix(12,0,0,12,275.607,213.245)"/><path d="M0.421,-0.164c-0.015,0.067 -0.064,0.101 -0.134,0.101c-0.113,0 -0.164,-0.08 -0.161,-0.17l0.387,-0c0.005,-0.125 -0.051,-0.296 -0.234,-0.296c-0.141,0 -0.243,0.114 -0.243,0.269c0.005,0.158 0.083,0.272 0.248,0.272c0.116,-0 0.198,-0.062 0.221,-0.176l-0.084,-0Zm-0.295,-0.144c0.006,-0.079 0.059,-0.146 0.148,-0.146c0.084,-0 0.145,0.065 0.149,0.146l-0.297,0Z" fill="#196722" fill-rule="nonzero" transform="matrix(12,0,0,12,282.495,213.245)"/><path d="M0.182,-0.672l-0.085,0l0,0.155l-0.088,0l0,0.075l0.088,-0l0,0.329c0,0.095 0.035,0.113 0.123,0.113l0.065,-0l-0,-0.075l-0.039,0c-0.053,0 -0.064,-0.007 -0.064,-0.046l-0,-0.321l0.103,-0l-0,-0.075l-0.103,0l-0,-0.155Z" fill="#196722" fill-rule="nonzero" transform="matrix(12,0,0,12,288.939,213.245)"/><path d="M0.031,-0.163c0.005,0.128 0.103,0.175 0.219,0.175c0.105,-0 0.22,-0.04 0.22,-0.163c-0,-0.1 -0.084,-0.128 -0.169,-0.147c-0.079,-0.019 -0.169,-0.029 -0.169,-0.09c-0,-0.052 0.059,-0.066 0.11,-0.066c0.056,-0 0.114,0.021 0.12,0.087l0.085,-0c-0.007,-0.126 -0.098,-0.162 -0.212,-0.162c-0.09,0 -0.193,0.043 -0.193,0.147c0,0.099 0.085,0.127 0.169,0.146c0.085,0.019 0.169,0.03 0.169,0.096c0,0.065 -0.072,0.077 -0.125,0.077c-0.07,0 -0.136,-0.024 -0.139,-0.1l-0.085,0Z" fill="#196722" fill-rule="nonzero" transform="matrix(12,0,0,12,292.719,213.245)"/><path d="M0.384,-0.18c0,0.047 -0.046,0.117 -0.158,0.117c-0.052,0 -0.1,-0.02 -0.1,-0.076c-0,-0.063 0.048,-0.083 0.104,-0.093c0.057,-0.01 0.121,-0.011 0.154,-0.035l0,0.087Zm0.138,0.112c-0.011,0.004 -0.019,0.005 -0.026,0.005c-0.027,0 -0.027,-0.018 -0.027,-0.058l-0,-0.266c-0,-0.121 -0.101,-0.142 -0.194,-0.142c-0.115,0 -0.214,0.045 -0.219,0.173l0.085,-0c0.004,-0.076 0.057,-0.098 0.129,-0.098c0.054,-0 0.115,0.012 0.115,0.086c0,0.064 -0.08,0.058 -0.174,0.076c-0.088,0.017 -0.175,0.042 -0.175,0.159c0,0.103 0.077,0.145 0.171,0.145c0.072,-0 0.135,-0.025 0.182,-0.08c0,0.056 0.028,0.08 0.072,0.08c0.027,-0 0.046,-0.005 0.061,-0.014l-0,-0.066Z" fill="#196722" fill-rule="nonzero" transform="matrix(12,0,0,12,302.055,213.245)"/><path d="M0.467,-0.263c0,0.101 -0.039,0.2 -0.155,0.2c-0.117,0 -0.163,-0.094 -0.163,-0.196c-0,-0.097 0.044,-0.195 0.158,-0.195c0.11,-0 0.16,0.094 0.16,0.191Zm-0.4,0.263l0.085,-0l-0,-0.069l0.002,0c0.038,0.061 0.114,0.081 0.167,0.081c0.158,-0 0.236,-0.123 0.236,-0.269c-0,-0.146 -0.079,-0.272 -0.238,-0.272c-0.071,0 -0.137,0.025 -0.165,0.082l-0.002,-0l-0,-0.267l-0.085,0l0,0.714Z" fill="#196722" fill-rule="nonzero" transform="matrix(12,0,0,12,308.499,213.245)"/><path d="M0.036,-0.258c0,0.151 0.087,0.27 0.251,0.27c0.164,-0 0.251,-0.119 0.251,-0.27c-0,-0.152 -0.087,-0.271 -0.251,-0.271c-0.164,0 -0.251,0.119 -0.251,0.271Zm0.09,0c-0,-0.126 0.072,-0.196 0.161,-0.196c0.089,-0 0.161,0.07 0.161,0.196c0,0.125 -0.072,0.195 -0.161,0.195c-0.089,0 -0.161,-0.07 -0.161,-0.195Z" fill="#196722" fill-rule="nonzero" transform="matrix(12,0,0,12,315.615,213.245)"/><path d="M0.486,-0.517l-0.089,0l-0.141,0.431l-0.002,0l-0.145,-0.431l-0.095,0l0.192,0.517l0.091,-0l0.189,-0.517Z" fill="#196722" fill-rule="nonzero" transform="matrix(12,0,0,12,322.503,213.245)"/><path d="M0.421,-0.164c-0.015,0.067 -0.064,0.101 -0.134,0.101c-0.113,0 -0.164,-0.08 -0.161,-0.17l0.387,-0c0.005,-0.125 -0.051,-0.296 -0.234,-0.296c-0.141,0 -0.243,0.114 -0.243,0.269c0.005,0.158 0.083,0.272 0.248,0.272c0.116,-0 0.198,-0.062 0.221,-0.176l-0.084,-0Zm-0.295,-0.144c0.006,-0.079 0.059,-0.146 0.148,-0.146c0.084,-0 0.145,0.065 0.149,0.146l-0.297,0Z" fill="#196722" fill-rule="nonzero" transform="matrix(12,0,0,12,328.503,213.245)"/><rect x="213.051" y="214.145" width="85.668" height="0.6" fill="#196722"/></g><g transform="matrix(1,0,0,1,336.501,-136.677)"><path d="M0.064,-0l0.085,-0l-0,-0.292c-0,-0.093 0.05,-0.162 0.153,-0.162c0.065,-0 0.105,0.041 0.105,0.104l0,0.35l0.085,-0l-0,-0.34c-0,-0.111 -0.042,-0.189 -0.178,-0.189c-0.074,0 -0.132,0.03 -0.168,0.094l-0.002,-0l-0,-0.082l-0.08,0l0,0.517Z" fill="#196722" fill-rule="nonzero" transform="matrix(12,0,0,12,213.393,213.245)"/><path d="M0.036,-0.258c0,0.151 0.087,0.27 0.251,0.27c0.164,-0 0.251,-0.119 0.251,-0.27c-0,-0.152 -0.087,-0.271 -0.251,-0.271c-0.164,0 -0.251,0.119 -0.251,0.271Zm0.09,0c-0,-0.126 0.072,-0.196 0.161,-0.196c0.089,-0 0.161,0.07 0.161,0.196c0,0.125 -0.072,0.195 -0.161,0.195c-0.089,0 -0.161,-0.07 -0.161,-0.195Z" fill="#196722" fill-rule="nonzero" transform="matrix(12,0,0,12,220.065,213.245)"/><path d="M0.503,-0.351c-0.012,-0.123 -0.106,-0.178 -0.223,-0.178c-0.164,0 -0.244,0.122 -0.244,0.277c0,0.154 0.084,0.264 0.242,0.264c0.13,-0 0.209,-0.075 0.228,-0.201l-0.087,0c-0.011,0.078 -0.06,0.126 -0.142,0.126c-0.108,0 -0.151,-0.094 -0.151,-0.189c-0,-0.105 0.038,-0.202 0.161,-0.202c0.07,-0 0.115,0.038 0.128,0.103l0.088,-0Z" fill="#196722" fill-rule="nonzero" transform="matrix(12,0,0,12,230.289,213.245)"/><rect x="0.069" y="-0.714" width="0.085" height="0.714" fill="#196722" fill-rule="nonzero" transform="matrix(12,0,0,12,236.733,213.245)"/><path d="M0.036,-0.258c0,0.151 0.087,0.27 0.251,0.27c0.164,-0 0.251,-0.119 0.251,-0.27c-0,-0.152 -0.087,-0.271 -0.251,-0.271c-0.164,0 -0.251,0.119 -0.251,0.271Zm0.09,0c-0,-0.126 0.072,-0.196 0.161,-0.196c0.089,-0 0.161,0.07 0.161,0.196c0,0.125 -0.072,0.195 -0.161,0.195c-0.089,0 -0.161,-0.07 -0.161,-0.195Z" fill="#196722" fill-rule="nonzero" transform="matrix(12,0,0,12,239.397,213.245)"/><path d="M0.031,-0.163c0.005,0.128 0.103,0.175 0.219,0.175c0.105,-0 0.22,-0.04 0.22,-0.163c-0,-0.1 -0.084,-0.128 -0.169,-0.147c-0.079,-0.019 -0.169,-0.029 -0.169,-0.09c-0,-0.052 0.059,-0.066 0.11,-0.066c0.056,-0 0.114,0.021 0.12,0.087l0.085,-0c-0.007,-0.126 -0.098,-0.162 -0.212,-0.162c-0.09,0 -0.193,0.043 -0.193,0.147c0,0.099 0.085,0.127 0.169,0.146c0.085,0.019 0.169,0.03 0.169,0.096c0,0.065 -0.072,0.077 -0.125,0.077c-0.07,0 -0.136,-0.024 -0.139,-0.1l-0.085,0Z" fill="#196722" fill-rule="nonzero" transform="matrix(12,0,0,12,246.285,213.245)"/><path d="M0.421,-0.164c-0.015,0.067 -0.064,0.101 -0.134,0.101c-0.113,0 -0.164,-0.08 -0.161,-0.17l0.387,-0c0.005,-0.125 -0.051,-0.296 -0.234,-0.296c-0.141,0 -0.243,0.114 -0.243,0.269c0.005,0.158 0.083,0.272 0.248,0.272c0.116,-0 0.198,-0.062 0.221,-0.176l-0.084,-0Zm-0.295,-0.144c0.006,-0.079 0.059,-0.146 0.148,-0.146c0.084,-0 0.145,0.065 0.149,0.146l-0.297,0Z" fill="#196722" fill-rule="nonzero" transform="matrix(12,0,0,12,252.285,213.245)"/><path d="M0.182,-0.672l-0.085,0l0,0.155l-0.088,0l0,0.075l0.088,-0l0,0.329c0,0.095 0.035,0.113 0.123,0.113l0.065,-0l-0,-0.075l-0.039,0c-0.053,0 -0.064,-0.007 -0.064,-0.046l-0,-0.321l0.103,-0l-0,-0.075l-0.103,0l-0,-0.155Z" fill="#196722" fill-rule="nonzero" transform="matrix(12,0,0,12,262.065,213.245)"/><path d="M0.384,-0.18c0,0.047 -0.046,0.117 -0.158,0.117c-0.052,0 -0.1,-0.02 -0.1,-0.076c-0,-0.063 0.048,-0.083 0.104,-0.093c0.057,-0.01 0.121,-0.011 0.154,-0.035l0,0.087Zm0.138,0.112c-0.011,0.004 -0.019,0.005 -0.026,0.005c-0.027,0 -0.027,-0.018 -0.027,-0.058l-0,-0.266c-0,-0.121 -0.101,-0.142 -0.194,-0.142c-0.115,0 -0.214,0.045 -0.219,0.173l0.085,-0c0.004,-0.076 0.057,-0.098 0.129,-0.098c0.054,-0 0.115,0.012 0.115,0.086c0,0.064 -0.08,0.058 -0.174,0.076c-0.088,0.017 -0.175,0.042 -0.175,0.159c0,0.103 0.077,0.145 0.171,0.145c0.072,-0 0.135,-0.025 0.182,-0.08c0,0.056 0.028,0.08 0.072,0.08c0.027,-0 0.046,-0.005 0.061,-0.014l-0,-0.066Z" fill="#196722" fill-rule="nonzero" transform="matrix(12,0,0,12,265.845,213.245)"/><path d="M0.061,-0l0.085,-0l-0,-0.23c-0,-0.131 0.05,-0.209 0.187,-0.209l-0,-0.09c-0.092,-0.003 -0.149,0.038 -0.19,0.121l-0.002,-0l-0,-0.109l-0.08,0l0,0.517Z" fill="#196722" fill-rule="nonzero" transform="matrix(12,0,0,12,272.289,213.245)"/><path d="M0.272,-0.069c-0.112,0 -0.146,-0.104 -0.146,-0.197c-0,-0.099 0.044,-0.188 0.153,-0.188c0.107,-0 0.147,0.094 0.147,0.185c0,0.097 -0.042,0.2 -0.154,0.2Zm0.238,-0.448l-0.08,0l0,0.074l-0.001,-0c-0.031,-0.057 -0.089,-0.086 -0.154,-0.086c-0.179,0 -0.239,0.151 -0.239,0.273c0,0.141 0.077,0.262 0.231,0.262c0.065,-0 0.133,-0.031 0.161,-0.094l0.002,0l0,0.034c0,0.116 -0.044,0.196 -0.155,0.196c-0.056,0 -0.13,-0.022 -0.134,-0.084l-0.085,-0c0.005,0.113 0.117,0.152 0.214,0.152c0.163,-0 0.24,-0.086 0.24,-0.254l-0,-0.473Z" fill="#196722" fill-rule="nonzero" transform="matrix(12,0,0,12,275.949,213.245)"/><path d="M0.421,-0.164c-0.015,0.067 -0.064,0.101 -0.134,0.101c-0.113,0 -0.164,-0.08 -0.161,-0.17l0.387,-0c0.005,-0.125 -0.051,-0.296 -0.234,-0.296c-0.141,0 -0.243,0.114 -0.243,0.269c0.005,0.158 0.083,0.272 0.248,0.272c0.116,-0 0.198,-0.062 0.221,-0.176l-0.084,-0Zm-0.295,-0.144c0.006,-0.079 0.059,-0.146 0.148,-0.146c0.084,-0 0.145,0.065 0.149,0.146l-0.297,0Z" fill="#196722" fill-rule="nonzero" transform="matrix(12,0,0,12,282.837,213.245)"/><path d="M0.182,-0.672l-0.085,0l0,0.155l-0.088,0l0,0.075l0.088,-0l0,0.329c0,0.095 0.035,0.113 0.123,0.113l0.065,-0l-0,-0.075l-0.039,0c-0.053,0 -0.064,-0.007 -0.064,-0.046l-0,-0.321l0.103,-0l-0,-0.075l-0.103,0l-0,-0.155Z" fill="#196722" fill-rule="nonzero" transform="matrix(12,0,0,12,289.281,213.245)"/><path d="M0.031,-0.163c0.005,0.128 0.103,0.175 0.219,0.175c0.105,-0 0.22,-0.04 0.22,-0.163c-0,-0.1 -0.084,-0.128 -0.169,-0.147c-0.079,-0.019 -0.169,-0.029 -0.169,-0.09c-0,-0.052 0.059,-0.066 0.11,-0.066c0.056,-0 0.114,0.021 0.12,0.087l0.085,-0c-0.007,-0.126 -0.098,-0.162 -0.212,-0.162c-0.09,0 -0.193,0.043 -0.193,0.147c0,0.099 0.085,0.127 0.169,0.146c0.085,0.019 0.169,0.03 0.169,0.096c0,0.065 -0.072,0.077 -0.125,0.077c-0.07,0 -0.136,-0.024 -0.139,-0.1l-0.085,0Z" fill="#196722" fill-rule="nonzero" transform="matrix(12,0,0,12,293.061,213.245)"/><path d="M0.467,-0.263c0,0.101 -0.039,0.2 -0.155,0.2c-0.117,0 -0.163,-0.094 -0.163,-0.196c-0,-0.097 0.044,-0.195 0.158,-0.195c0.11,-0 0.16,0.094 0.16,0.191Zm-0.4,0.263l0.085,-0l-0,-0.069l0.002,0c0.038,0.061 0.114,0.081 0.167,0.081c0.158,-0 0.236,-0.123 0.236,-0.269c-0,-0.146 -0.079,-0.272 -0.238,-0.272c-0.071,0 -0.137,0.025 -0.165,0.082l-0.002,-0l-0,-0.267l-0.085,0l0,0.714Z" fill="#196722" fill-rule="nonzero" transform="matrix(12,0,0,12,302.397,213.245)"/><path d="M0.421,-0.164c-0.015,0.067 -0.064,0.101 -0.134,0.101c-0.113,0 -0.164,-0.08 -0.161,-0.17l0.387,-0c0.005,-0.125 -0.051,-0.296 -0.234,-0.296c-0.141,0 -0.243,0.114 -0.243,0.269c0.005,0.158 0.083,0.272 0.248,0.272c0.116,-0 0.198,-0.062 0.221,-0.176l-0.084,-0Zm-0.295,-0.144c0.006,-0.079 0.059,-0.146 0.148,-0.146c0.084,-0 0.145,0.065 0.149,0.146l-0.297,0Z" fill="#196722" fill-rule="nonzero" transform="matrix(12,0,0,12,309.513,213.245)"/><rect x="0.069" y="-0.714" width="0.085" height="0.714" fill="#196722" fill-rule="nonzero" transform="matrix(12,0,0,12,315.957,213.245)"/><path d="M0.036,-0.258c0,0.151 0.087,0.27 0.251,0.27c0.164,-0 0.251,-0.119 0.251,-0.27c-0,-0.152 -0.087,-0.271 -0.251,-0.271c-0.164,0 -0.251,0.119 -0.251,0.271Zm0.09,0c-0,-0.126 0.072,-0.196 0.161,-0.196c0.089,-0 0.161,0.07 0.161,0.196c0,0.125 -0.072,0.195 -0.161,0.195c-0.089,0 -0.161,-0.07 -0.161,-0.195Z" fill="#196722" fill-rule="nonzero" transform="matrix(12,0,0,12,318.621,213.245)"/><path d="M0.741,-0.517l-0.088,0l-0.116,0.423l-0.002,0l-0.108,-0.423l-0.093,0l-0.104,0.423l-0.002,0l-0.117,-0.423l-0.094,0l0.166,0.517l0.092,-0l0.104,-0.411l0.002,-0l0.105,0.411l0.09,-0l0.165,-0.517Z" fill="#196722" fill-rule="nonzero" transform="matrix(12,0,0,12,325.509,213.245)"/><rect x="213.393" y="214.145" width="85.668" height="0.6" fill="#196722"/></g><path d="M357.141,56.779l4.398,-0l-0,-4.32l2.601,-0c3.28,-0 5.599,-1.619 5.599,-5.079c-0,-2.041 -1.359,-4.879 -5.238,-4.879l-7.36,0l0,14.278Zm4.398,-10.62l1.961,-0c1.081,-0 2.081,0.08 2.081,1.381c0,1.441 -1.2,1.521 -2.341,1.521l-1.701,0l-0,-2.902Z" fill="#196721" fill-rule="nonzero"/><path d="M374.46,51.681l1.38,-4.4l0.04,0l1.28,4.4l-2.7,0Zm-6.019,5.098l4.42,-0l0.639,-2.04l4.54,-0l0.6,2.04l4.559,-0l-5.199,-14.278l-4.3,0l-5.259,14.278Z" fill="#196721" fill-rule="nonzero"/><path d="M383.281,51.981c0.04,4.558 4.658,5.138 6.279,5.138c3.181,-0 6.599,-1.199 6.599,-4.918c-0,-2.621 -1.999,-3.562 -4.018,-4.122c-2.021,-0.56 -4.062,-0.78 -4.142,-1.8c-0,-0.8 0.98,-0.96 1.581,-0.96c0.44,-0 0.941,0.1 1.301,0.36c0.36,0.24 0.6,0.6 0.52,1.14l4.158,-0c-0.12,-3.478 -2.859,-4.658 -5.959,-4.658c-2.94,0 -5.759,1.419 -5.759,4.718c0,2.881 2.579,3.501 4.838,4.141c2.462,0.7 3.082,0.901 3.082,1.641c0,1.06 -1.1,1.3 -1.821,1.3c-0.82,0 -1.781,-0.18 -2.101,-1.04c-0.1,-0.26 -0.16,-0.58 -0.16,-0.94l-4.398,-0Z" fill="#196721" fill-rule="nonzero"/><path d="M396.621,51.981c0.04,4.558 4.658,5.138 6.279,5.138c3.181,-0 6.599,-1.199 6.599,-4.918c-0,-2.621 -1.999,-3.562 -4.018,-4.122c-2.021,-0.56 -4.062,-0.78 -4.142,-1.8c-0,-0.8 0.98,-0.96 1.581,-0.96c0.44,-0 0.941,0.1 1.301,0.36c0.36,0.24 0.6,0.6 0.52,1.14l4.158,-0c-0.12,-3.478 -2.859,-4.658 -5.959,-4.658c-2.94,0 -5.759,1.419 -5.759,4.718c0,2.881 2.579,3.501 4.838,4.141c2.462,0.7 3.082,0.901 3.082,1.641c0,1.06 -1.1,1.3 -1.821,1.3c-0.82,0 -1.781,-0.18 -2.101,-1.04c-0.1,-0.26 -0.16,-0.58 -0.16,-0.94l-4.398,-0Z" fill="#196721" fill-rule="nonzero"/></g></svg>
\ No newline at end of file
diff --git a/understanding/22/img/target-text-buttons-two-rows.afdesign b/understanding/22/img/target-text-buttons-two-rows.afdesign
new file mode 100644
index 0000000000..a9f3d1dbaa
Binary files /dev/null and b/understanding/22/img/target-text-buttons-two-rows.afdesign differ
diff --git a/understanding/22/img/target-text-buttons-two-rows.png b/understanding/22/img/target-text-buttons-two-rows.png
new file mode 100644
index 0000000000..bb78992288
Binary files /dev/null and b/understanding/22/img/target-text-buttons-two-rows.png differ
diff --git a/understanding/22/img/target-text-buttons-two-rows.svg b/understanding/22/img/target-text-buttons-two-rows.svg
new file mode 100644
index 0000000000..9f856f9a66
--- /dev/null
+++ b/understanding/22/img/target-text-buttons-two-rows.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 785 105" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" fill-rule="evenodd" clip-rule="evenodd" stroke-miterlimit="10"><rect width="785" height="105" fill="none"/><clipPath id="a"><rect width="785" height="105"/></clipPath><g clip-path="url(#a)"><rect x="-0" width="785" height="105" fill="#fff"/><path d="M49.5,42.5l-8,-0" fill="none" stroke="#000" stroke-width="1px"/><path d="M49.5,57.5l-8,-0" fill="none" stroke="#000" stroke-width="1px"/><path d="M45.5,42.5l-0,15" fill="none" stroke="#000" stroke-width="1px" stroke-miterlimit="1"/><path d="M49.5,59.5l-8,-0" fill="none" stroke="#000" stroke-width="1px"/><path d="M49.5,74.5l-8,-0" fill="none" stroke="#000" stroke-width="1px"/><path d="M45.5,59.5l-0,15" fill="none" stroke="#000" stroke-width="1px" stroke-miterlimit="1"/><path d="M15.595,45.269l-0.779,0c-0.227,1.284 -1.283,1.596 -2.447,1.596l-0,0.815l2.208,-0l-0,6.096l1.018,-0l0,-8.507Z" fill-rule="nonzero"/><path d="M21.428,49.204c1.165,-0 1.717,0.876 1.717,1.932c-0,1.009 -0.612,1.885 -1.717,1.885c-1.116,0 -1.765,-0.84 -1.765,-1.897c0,-1.068 0.625,-1.92 1.765,-1.92Zm2.555,-1.764c-0.12,-1.38 -0.994,-2.171 -2.399,-2.171c-2.424,0 -3.131,2.22 -3.131,4.559c-0,1.789 0.407,4.092 2.927,4.092c2.148,-0 2.843,-1.619 2.843,-2.856c0,-1.572 -0.97,-2.759 -2.603,-2.759c-0.924,0 -1.645,0.336 -2.125,1.115l-0.024,-0.024c0.048,-1.307 0.324,-3.228 2.065,-3.228c0.804,-0 1.333,0.504 1.429,1.272l1.018,0Z" fill-rule="nonzero"/><path d="M30.273,50.62c-0,1.213 -0.468,2.401 -1.861,2.401c-1.405,0 -1.957,-1.128 -1.957,-2.353c0,-1.164 0.528,-2.34 1.897,-2.34c1.321,-0 1.921,1.128 1.921,2.292Zm-4.8,5.532l1.018,-0l0,-3.203l0.024,0c0.456,0.731 1.369,0.971 2.005,0.971c1.897,-0 2.831,-1.475 2.831,-3.228c0,-1.752 -0.946,-3.263 -2.855,-3.263c-0.852,0 -1.645,0.3 -1.981,0.983l-0.024,-0l0,-0.839l-1.018,0l-0,8.579Z" fill-rule="nonzero"/><path d="M31.893,53.776l1.235,-0l1.728,-2.578l1.728,2.578l1.307,-0l-2.399,-3.36l2.135,-2.843l-1.223,0l-1.548,2.162l-1.488,-2.162l-1.307,0l2.159,2.939l-2.327,3.264Z" fill-rule="nonzero"/><path d="M15.595,62.269l-0.779,0c-0.227,1.284 -1.283,1.596 -2.447,1.596l-0,0.815l2.208,-0l-0,6.096l1.018,-0l0,-8.507Z" fill-rule="nonzero"/><path d="M21.428,66.204c1.165,-0 1.717,0.876 1.717,1.932c-0,1.009 -0.612,1.885 -1.717,1.885c-1.116,0 -1.765,-0.84 -1.765,-1.897c0,-1.068 0.625,-1.92 1.765,-1.92Zm2.555,-1.764c-0.12,-1.38 -0.994,-2.171 -2.399,-2.171c-2.424,0 -3.131,2.22 -3.131,4.559c-0,1.789 0.407,4.092 2.927,4.092c2.148,-0 2.843,-1.619 2.843,-2.856c0,-1.572 -0.97,-2.759 -2.603,-2.759c-0.924,0 -1.645,0.336 -2.125,1.115l-0.024,-0.024c0.048,-1.307 0.324,-3.228 2.065,-3.228c0.804,-0 1.333,0.504 1.429,1.272l1.018,0Z" fill-rule="nonzero"/><path d="M30.273,67.62c-0,1.213 -0.468,2.401 -1.861,2.401c-1.405,0 -1.957,-1.128 -1.957,-2.353c0,-1.164 0.528,-2.34 1.897,-2.34c1.321,-0 1.921,1.128 1.921,2.292Zm-4.8,5.532l1.018,-0l0,-3.203l0.024,0c0.456,0.731 1.369,0.971 2.005,0.971c1.897,-0 2.831,-1.475 2.831,-3.228c0,-1.752 -0.946,-3.263 -2.855,-3.263c-0.852,0 -1.645,0.3 -1.981,0.983l-0.024,-0l0,-0.839l-1.018,0l-0,8.579Z" fill-rule="nonzero"/><path d="M31.893,70.776l1.235,-0l1.728,-2.578l1.728,2.578l1.307,-0l-2.399,-3.36l2.135,-2.843l-1.223,0l-1.548,2.162l-1.488,-2.162l-1.307,0l2.159,2.939l-2.327,3.264Z" fill-rule="nonzero"/><rect x="55" y="42" width="44" height="16" fill="#e0e0ea"/><path d="M99,42l-0,16l-44,0l-0,-16l44,-0Zm-1,1l-42,0l-0,14l42,-0l-0,-14Z" fill="#6a6bd3"/><path d="M69.769,47.58c-0.263,-1.825 -1.738,-2.783 -3.527,-2.783c-2.641,-0 -4.055,2.026 -4.055,4.511c-0,2.497 1.294,4.463 3.959,4.463c2.161,0 3.492,-1.294 3.707,-3.431l-1.138,0c-0.108,1.417 -0.973,2.473 -2.473,2.473c-2.053,-0 -2.917,-1.633 -2.917,-3.589c0,-1.788 0.864,-3.469 2.905,-3.469c1.188,0 2.161,0.612 2.401,1.825l1.138,-0Z" fill-rule="nonzero"/><rect x="71.163" y="45.001" width="1.019" height="8.567" fill-rule="nonzero"/><path d="M73.431,50.472c-0,1.813 1.042,3.239 3.011,3.239c1.969,0 3.011,-1.426 3.011,-3.239c0,-1.825 -1.042,-3.251 -3.011,-3.251c-1.969,-0 -3.011,1.426 -3.011,3.251Zm1.078,0c0,-1.512 0.865,-2.353 1.933,-2.353c1.068,0 1.933,0.841 1.933,2.353c-0,1.5 -0.865,2.341 -1.933,2.341c-1.068,-0 -1.933,-0.841 -1.933,-2.341Z" fill-rule="nonzero"/><path d="M80.259,51.612c0.06,1.536 1.234,2.099 2.627,2.099c1.261,0 2.639,-0.479 2.639,-1.955c0,-1.2 -1.006,-1.536 -2.027,-1.764c-0.948,-0.228 -2.029,-0.348 -2.029,-1.08c0,-0.625 0.709,-0.793 1.321,-0.793c0.672,0 1.369,0.252 1.441,1.045l1.018,-0c-0.084,-1.512 -1.174,-1.943 -2.543,-1.943c-1.081,-0 -2.315,0.515 -2.315,1.763c-0,1.188 1.018,1.524 2.027,1.752c1.02,0.228 2.029,0.36 2.029,1.152c-0,0.781 -0.865,0.925 -1.501,0.925c-0.84,-0 -1.633,-0.288 -1.669,-1.201l-1.018,0Z" fill-rule="nonzero"/><path d="M90.939,51.6c-0.18,0.804 -0.769,1.213 -1.609,1.213c-1.357,-0 -1.969,-0.961 -1.933,-2.042l4.644,0c0.06,-1.499 -0.611,-3.55 -2.807,-3.55c-1.693,-0 -2.915,1.367 -2.915,3.227c0.06,1.896 0.994,3.263 2.975,3.263c1.393,0 2.376,-0.743 2.651,-2.111l-1.006,-0Zm-3.542,-1.727c0.072,-0.949 0.709,-1.754 1.777,-1.754c1.008,0 1.741,0.781 1.789,1.754l-3.566,-0Z" fill-rule="nonzero"/><rect x="100" y="42" width="44" height="16" fill="#e0e0ea"/><path d="M144,42l0,16l-44,0l0,-16l44,-0Zm-1,1l-42,0l-0,14l42,-0l-0,-14Z" fill="#6a6bd3"/><path d="M115.639,47.508c-0.072,-1.885 -1.402,-2.711 -3.155,-2.711c-1.561,-0 -3.107,0.767 -3.107,2.507c-0,1.572 1.378,1.968 2.747,2.268c1.368,0.3 2.737,0.504 2.737,1.68c-0,1.237 -1.141,1.561 -2.173,1.561c-1.296,-0 -2.497,-0.624 -2.497,-2.065l-1.078,0c-0,2.089 1.618,3.023 3.539,3.023c1.561,0 3.347,-0.731 3.347,-2.555c0,-1.68 -1.366,-2.16 -2.735,-2.472c-1.38,-0.312 -2.749,-0.468 -2.749,-1.524c0,-1.117 0.961,-1.465 1.921,-1.465c1.176,0 1.993,0.528 2.125,1.753l1.078,-0Z" fill-rule="nonzero"/><path d="M121.053,51.408c-0,0.564 -0.553,1.405 -1.897,1.405c-0.624,-0 -1.201,-0.24 -1.201,-0.913c0,-0.756 0.577,-0.996 1.249,-1.116c0.684,-0.12 1.453,-0.132 1.849,-0.42l-0,1.044Zm1.654,1.345c-0.132,0.048 -0.228,0.06 -0.312,0.06c-0.324,-0 -0.324,-0.216 -0.324,-0.696l0,-3.193c0,-1.452 -1.21,-1.703 -2.327,-1.703c-1.381,-0 -2.567,0.539 -2.627,2.075l1.018,-0c0.048,-0.913 0.685,-1.177 1.549,-1.177c0.648,0 1.381,0.144 1.381,1.033c-0,0.768 -0.961,0.696 -2.089,0.912c-1.057,0.204 -2.099,0.504 -2.099,1.908c-0,1.236 0.922,1.739 2.051,1.739c0.864,0 1.621,-0.299 2.185,-0.958c-0,0.671 0.335,0.958 0.862,0.958c0.324,0 0.552,-0.06 0.732,-0.167l0,-0.791Z" fill-rule="nonzero"/><path d="M128.719,47.365l-1.067,-0l-1.692,5.172l-0.024,-0l-1.74,-5.172l-1.139,-0l2.303,6.202l1.092,0l2.267,-6.202Z" fill-rule="nonzero"/><path d="M133.941,51.6c-0.18,0.804 -0.769,1.213 -1.609,1.213c-1.357,-0 -1.969,-0.961 -1.933,-2.042l4.644,0c0.06,-1.499 -0.611,-3.55 -2.807,-3.55c-1.693,-0 -2.915,1.367 -2.915,3.227c0.06,1.896 0.994,3.263 2.975,3.263c1.393,0 2.376,-0.743 2.651,-2.111l-1.006,-0Zm-3.542,-1.727c0.072,-0.949 0.709,-1.754 1.777,-1.754c1.008,0 1.741,0.781 1.789,1.754l-3.566,-0Z" fill-rule="nonzero"/><rect x="145" y="42" width="58" height="16" fill="#e0e0ea"/><path d="M203,42l-0,16l-58,0l-0,-16l58,-0Zm-1,1l-56,0c-0,0 0,14 -0,14l56,-0l-0,-14Z" fill="#6a6bd3"/><path d="M164.433,47.58c-0.263,-1.825 -1.738,-2.783 -3.527,-2.783c-2.641,-0 -4.055,2.026 -4.055,4.511c-0,2.497 1.294,4.463 3.959,4.463c2.161,0 3.492,-1.294 3.707,-3.431l-1.138,0c-0.108,1.417 -0.973,2.473 -2.473,2.473c-2.053,-0 -2.917,-1.633 -2.917,-3.589c0,-1.788 0.864,-3.469 2.905,-3.469c1.188,0 2.161,0.612 2.401,1.825l1.138,-0Z" fill-rule="nonzero"/><path d="M169.607,51.408c-0,0.564 -0.553,1.405 -1.897,1.405c-0.624,-0 -1.201,-0.24 -1.201,-0.913c0,-0.756 0.577,-0.996 1.249,-1.116c0.684,-0.12 1.453,-0.132 1.849,-0.42l-0,1.044Zm1.654,1.345c-0.132,0.048 -0.228,0.06 -0.312,0.06c-0.324,-0 -0.324,-0.216 -0.324,-0.696l0,-3.193c0,-1.452 -1.21,-1.703 -2.327,-1.703c-1.381,-0 -2.567,0.539 -2.627,2.075l1.018,-0c0.048,-0.913 0.685,-1.177 1.549,-1.177c0.648,0 1.381,0.144 1.381,1.033c-0,0.768 -0.961,0.696 -2.089,0.912c-1.057,0.204 -2.099,0.504 -2.099,1.908c-0,1.236 0.922,1.739 2.051,1.739c0.864,0 1.621,-0.299 2.185,-0.958c-0,0.671 0.335,0.958 0.862,0.958c0.324,0 0.552,-0.06 0.732,-0.167l0,-0.791Z" fill-rule="nonzero"/><path d="M172.211,53.567l1.018,0l0,-3.504c0,-1.116 0.601,-1.944 1.837,-1.944c0.781,0 1.261,0.492 1.261,1.248l-0,4.2l1.018,0l0,-4.08c0,-1.332 -0.503,-2.266 -2.135,-2.266c-0.888,-0 -1.585,0.359 -2.017,1.126l-0.024,0l0,-0.982l-0.958,-0l-0,6.202Z" fill-rule="nonzero"/><path d="M184.149,49.356c-0.144,-1.476 -1.272,-2.135 -2.676,-2.135c-1.968,-0 -2.926,1.462 -2.926,3.323c-0,1.849 1.006,3.167 2.902,3.167c1.56,0 2.508,-0.898 2.736,-2.411l-1.044,0c-0.132,0.937 -0.72,1.513 -1.704,1.513c-1.296,-0 -1.812,-1.129 -1.812,-2.269c0,-1.26 0.456,-2.425 1.932,-2.425c0.84,0 1.38,0.456 1.536,1.237l1.056,-0Z" fill-rule="nonzero"/><path d="M189.611,51.6c-0.18,0.804 -0.769,1.213 -1.609,1.213c-1.357,-0 -1.969,-0.961 -1.933,-2.042l4.644,0c0.06,-1.499 -0.611,-3.55 -2.807,-3.55c-1.693,-0 -2.915,1.367 -2.915,3.227c0.06,1.896 0.994,3.263 2.975,3.263c1.393,0 2.376,-0.743 2.651,-2.111l-1.006,-0Zm-3.542,-1.727c0.072,-0.949 0.709,-1.754 1.777,-1.754c1.008,0 1.741,0.781 1.789,1.754l-3.566,-0Z" fill-rule="nonzero"/><rect x="191.831" y="45.001" width="1.018" height="8.567" fill-rule="nonzero"/><rect x="204" y="42" width="52" height="16" fill="#e0e0ea"/><path d="M256,42l-0,16l-52,0l-0,-16l52,-0Zm-1,1l-50,0c-0,0 -0,14 -0,14l50,-0l0,-14Z" fill="#6a6bd3"/><path d="M213.273,53.567l5.95,0l0,-0.958l-4.812,-0l0,-2.966l4.452,0l0,-0.958l-4.452,-0l0,-2.726l4.776,0l0,-0.958l-5.914,-0l-0,8.566Z" fill-rule="nonzero"/><path d="M219.777,53.567l1.235,0l1.728,-2.577l1.728,2.577l1.307,0l-2.399,-3.36l2.135,-2.842l-1.223,-0l-1.548,2.161l-1.488,-2.161l-1.307,-0l2.159,2.938l-2.327,3.264Z" fill-rule="nonzero"/><path d="M231.489,50.412c-0,1.212 -0.468,2.401 -1.861,2.401c-1.405,-0 -1.957,-1.129 -1.957,-2.353c0,-1.164 0.528,-2.341 1.897,-2.341c1.321,0 1.921,1.129 1.921,2.293Zm-4.8,5.531l1.018,0l0,-3.202l0.024,-0c0.456,0.731 1.369,0.97 2.005,0.97c1.897,0 2.831,-1.474 2.831,-3.227c0,-1.753 -0.946,-3.263 -2.855,-3.263c-0.852,-0 -1.645,0.299 -1.981,0.982l-0.024,0l0,-0.838l-1.018,-0l-0,8.578Z" fill-rule="nonzero"/><path d="M233.433,50.472c-0,1.813 1.042,3.239 3.011,3.239c1.969,0 3.011,-1.426 3.011,-3.239c0,-1.825 -1.042,-3.251 -3.011,-3.251c-1.969,-0 -3.011,1.426 -3.011,3.251Zm1.078,0c0,-1.512 0.865,-2.353 1.933,-2.353c1.068,0 1.933,0.841 1.933,2.353c-0,1.5 -0.865,2.341 -1.933,2.341c-1.068,-0 -1.933,-0.841 -1.933,-2.341Z" fill-rule="nonzero"/><path d="M240.621,53.567l1.018,0l0,-2.76c0,-1.572 0.6,-2.508 2.244,-2.508l0,-1.078c-1.104,-0.036 -1.788,0.455 -2.28,1.45l-0.024,0l0,-1.306l-0.958,-0l-0,6.202Z" fill-rule="nonzero"/><path d="M246.067,45.505l-1.018,-0l-0,1.86l-1.056,-0l-0,0.898l1.056,0l-0,3.95c-0,1.139 0.419,1.354 1.474,1.354l0.78,0l0,-0.898l-0.468,-0c-0.636,-0 -0.768,-0.084 -0.768,-0.552l0,-3.854l1.236,0l0,-0.898l-1.236,-0l0,-1.86Z" fill-rule="nonzero"/><rect x="257" y="42" width="38" height="16" fill="#e0e0ea"/><path d="M295,42l-0,16l-38,0l-0,-16l38,-0Zm-1,1l-36,0l0,14l36,-0l0,-14Z" fill="#6a6bd3"/><path d="M263.877,53.567l1.138,0l0,-3.504l2.617,0c1.704,0.012 2.627,-0.946 2.627,-2.531c0,-1.585 -0.923,-2.531 -2.627,-2.531l-3.755,-0l-0,8.566Zm1.138,-7.608l2.233,0c1.285,0 1.873,0.553 1.873,1.573c-0,1.02 -0.588,1.585 -1.873,1.573l-2.233,-0l0,-3.146Z" fill-rule="nonzero"/><path d="M276.619,47.365l-1.018,-0l-0,3.504c-0,1.116 -0.601,1.944 -1.837,1.944c-0.781,-0 -1.261,-0.492 -1.261,-1.248l0,-4.2l-1.018,-0l-0,4.08c-0,1.332 0.503,2.266 2.135,2.266c0.888,0 1.585,-0.359 2.017,-1.126l0.024,-0l-0,0.982l0.958,0l0,-6.202Z" fill-rule="nonzero"/><path d="M277.761,51.612c0.06,1.536 1.234,2.099 2.627,2.099c1.261,0 2.639,-0.479 2.639,-1.955c0,-1.2 -1.006,-1.536 -2.027,-1.764c-0.948,-0.228 -2.029,-0.348 -2.029,-1.08c0,-0.625 0.709,-0.793 1.321,-0.793c0.672,0 1.369,0.252 1.441,1.045l1.018,-0c-0.084,-1.512 -1.174,-1.943 -2.543,-1.943c-1.081,-0 -2.315,0.515 -2.315,1.763c-0,1.188 1.018,1.524 2.027,1.752c1.02,0.228 2.029,0.36 2.029,1.152c-0,0.781 -0.865,0.925 -1.501,0.925c-0.84,-0 -1.633,-0.288 -1.669,-1.201l-1.018,0Z" fill-rule="nonzero"/><path d="M284.157,53.567l1.018,0l0,-3.504c0,-1.116 0.601,-1.944 1.837,-1.944c0.781,0 1.261,0.492 1.261,1.248l-0,4.2l1.018,0l0,-4.08c0,-1.332 -0.503,-2.266 -2.135,-2.266c-0.744,-0 -1.621,0.311 -1.957,1.054l-0.024,0l0,-3.274l-1.018,-0l-0,8.566Z" fill-rule="nonzero"/><rect x="55" y="59" width="58" height="16" fill="#e0e0ea"/><path d="M113,59l-0,16l-58,-0l-0,-16l58,-0Zm-1,1l-56,0c-0,0 -0,14 -0,14l56,-0l-0,-14Z" fill="#6a6bd3"/><path d="M71.877,64.58c-0.263,-1.825 -1.738,-2.783 -3.527,-2.783c-2.641,-0 -4.055,2.026 -4.055,4.511c-0,2.497 1.294,4.463 3.959,4.463c2.161,0 3.492,-1.294 3.707,-3.431l-1.138,0c-0.108,1.417 -0.973,2.473 -2.473,2.473c-2.053,-0 -2.917,-1.633 -2.917,-3.589c0,-1.788 0.864,-3.469 2.905,-3.469c1.188,0 2.161,0.612 2.401,1.825l1.138,-0Z" fill-rule="nonzero"/><path d="M72.875,67.472c-0,1.813 1.042,3.239 3.011,3.239c1.969,0 3.011,-1.426 3.011,-3.239c0,-1.825 -1.042,-3.251 -3.011,-3.251c-1.969,-0 -3.011,1.426 -3.011,3.251Zm1.078,0c0,-1.512 0.865,-2.353 1.933,-2.353c1.068,0 1.933,0.841 1.933,2.353c-0,1.5 -0.865,2.341 -1.933,2.341c-1.068,-0 -1.933,-0.841 -1.933,-2.341Z" fill-rule="nonzero"/><path d="M80.099,70.567l1.018,0l0,-3.504c0,-1.116 0.601,-1.944 1.837,-1.944c0.781,0 1.261,0.492 1.261,1.248l-0,4.2l1.018,0l0,-4.08c0,-1.332 -0.503,-2.266 -2.135,-2.266c-0.888,-0 -1.585,0.359 -2.017,1.126l-0.024,0l0,-0.982l-0.958,-0l-0,6.202Z" fill-rule="nonzero"/><path d="M91.833,64.365l-1.067,-0l-1.692,5.172l-0.024,-0l-1.74,-5.172l-1.139,-0l2.303,6.202l1.092,0l2.267,-6.202Z" fill-rule="nonzero"/><path d="M97.055,68.6c-0.18,0.804 -0.769,1.213 -1.609,1.213c-1.357,-0 -1.969,-0.961 -1.933,-2.042l4.644,0c0.06,-1.499 -0.611,-3.55 -2.807,-3.55c-1.693,-0 -2.915,1.367 -2.915,3.227c0.06,1.896 0.994,3.263 2.975,3.263c1.393,0 2.376,-0.743 2.651,-2.111l-1.006,-0Zm-3.542,-1.727c0.072,-0.949 0.709,-1.754 1.777,-1.754c1.008,0 1.741,0.781 1.789,1.754l-3.566,-0Z" fill-rule="nonzero"/><path d="M99.179,70.567l1.018,0l0,-2.76c0,-1.572 0.6,-2.508 2.244,-2.508l0,-1.078c-1.104,-0.036 -1.788,0.455 -2.28,1.45l-0.024,0l0,-1.306l-0.958,-0l-0,6.202Z" fill-rule="nonzero"/><path d="M104.625,62.505l-1.018,-0l-0,1.86l-1.056,-0l-0,0.898l1.056,0l-0,3.95c-0,1.139 0.419,1.354 1.474,1.354l0.78,0l0,-0.898l-0.468,-0c-0.636,-0 -0.768,-0.084 -0.768,-0.552l0,-3.854l1.236,0l0,-0.898l-1.236,-0l0,-1.86Z" fill-rule="nonzero"/><rect x="114" y="59" width="44" height="16" fill="#e0e0ea"/><path d="M158,59l0,16l-44,-0l0,-16l44,-0Zm-1,1l-42,0l-0,14l42,-0l-0,-14Z" fill="#6a6bd3"/><path d="M121.781,66.284c-0,2.328 1.378,4.487 4.103,4.487c2.725,0 4.103,-2.159 4.103,-4.487c0,-2.329 -1.378,-4.487 -4.103,-4.487c-2.725,-0 -4.103,2.158 -4.103,4.487Zm1.138,-0c0,-1.728 0.876,-3.529 2.965,-3.529c2.089,0 2.965,1.801 2.965,3.529c-0,1.728 -0.876,3.529 -2.965,3.529c-2.089,-0 -2.965,-1.801 -2.965,-3.529Z" fill-rule="nonzero"/><path d="M136.049,67.412c-0,1.212 -0.468,2.401 -1.861,2.401c-1.405,-0 -1.957,-1.129 -1.957,-2.353c0,-1.164 0.528,-2.341 1.897,-2.341c1.321,0 1.921,1.129 1.921,2.293Zm-4.8,5.531l1.018,0l0,-3.202l0.024,-0c0.456,0.731 1.369,0.97 2.005,0.97c1.897,0 2.831,-1.474 2.831,-3.227c0,-1.753 -0.946,-3.263 -2.855,-3.263c-0.852,-0 -1.645,0.299 -1.981,0.982l-0.024,0l0,-0.838l-1.018,-0l-0,8.578Z" fill-rule="nonzero"/><path d="M142.613,68.6c-0.18,0.804 -0.769,1.213 -1.609,1.213c-1.357,-0 -1.969,-0.961 -1.933,-2.042l4.644,0c0.06,-1.499 -0.611,-3.55 -2.807,-3.55c-1.693,-0 -2.915,1.367 -2.915,3.227c0.06,1.896 0.994,3.263 2.975,3.263c1.393,0 2.376,-0.743 2.651,-2.111l-1.006,-0Zm-3.542,-1.727c0.072,-0.949 0.709,-1.754 1.777,-1.754c1.008,0 1.741,0.781 1.789,1.754l-3.566,-0Z" fill-rule="nonzero"/><path d="M144.773,70.567l1.018,0l0,-3.504c0,-1.116 0.601,-1.944 1.837,-1.944c0.781,0 1.261,0.492 1.261,1.248l-0,4.2l1.018,0l0,-4.08c0,-1.332 -0.503,-2.266 -2.135,-2.266c-0.888,-0 -1.585,0.359 -2.017,1.126l-0.024,0l0,-0.982l-0.958,-0l-0,6.202Z" fill-rule="nonzero"/><rect x="159" y="59" width="52" height="16" fill="#e0e0ea"/><path d="M211,59l-0,16l-52,-0l-0,-16l52,-0Zm-1,1l-50,0c-0,0 -0,14 -0,14l50,-0l0,-14Z" fill="#6a6bd3"/><path d="M169.017,70.567l1.078,0l0,-7.128l0.024,0l2.677,7.128l0.972,0l2.677,-7.128l0.024,0l-0,7.128l1.078,0l0,-8.566l-1.558,-0l-2.713,7.2l-2.701,-7.2l-1.558,-0l-0,8.566Z" fill-rule="nonzero"/><path d="M183.561,68.6c-0.18,0.804 -0.769,1.213 -1.609,1.213c-1.357,-0 -1.969,-0.961 -1.933,-2.042l4.644,0c0.06,-1.499 -0.611,-3.55 -2.807,-3.55c-1.693,-0 -2.915,1.367 -2.915,3.227c0.06,1.896 0.994,3.263 2.975,3.263c1.393,0 2.376,-0.743 2.651,-2.111l-1.006,-0Zm-3.542,-1.727c0.072,-0.949 0.709,-1.754 1.777,-1.754c1.008,0 1.741,0.781 1.789,1.754l-3.566,-0Z" fill-rule="nonzero"/><path d="M185.685,70.567l1.018,0l0,-2.76c0,-1.572 0.6,-2.508 2.244,-2.508l0,-1.078c-1.104,-0.036 -1.788,0.455 -2.28,1.45l-0.024,0l0,-1.306l-0.958,-0l-0,6.202Z" fill-rule="nonzero"/><path d="M191.876,69.741c-1.345,-0 -1.753,-1.249 -1.753,-2.365c0,-1.188 0.528,-2.257 1.837,-2.257c1.285,0 1.765,1.129 1.765,2.221c-0,1.164 -0.504,2.401 -1.849,2.401Zm2.855,-5.376l-0.958,-0l-0,0.886l-0.012,0c-0.372,-0.683 -1.069,-1.03 -1.849,-1.03c-2.148,-0 -2.867,1.811 -2.867,3.275c-0,1.693 0.922,3.143 2.771,3.143c0.78,0 1.597,-0.371 1.933,-1.126l0.024,-0l-0,0.407c-0,1.392 -0.528,2.353 -1.861,2.353c-0.672,-0 -1.561,-0.264 -1.609,-1.009l-1.018,-0c0.06,1.356 1.402,1.823 2.567,1.823c1.957,0 2.879,-1.03 2.879,-3.047l0,-5.675Z" fill-rule="nonzero"/><path d="M200.553,68.6c-0.18,0.804 -0.769,1.213 -1.609,1.213c-1.357,-0 -1.969,-0.961 -1.933,-2.042l4.644,0c0.06,-1.499 -0.611,-3.55 -2.807,-3.55c-1.693,-0 -2.915,1.367 -2.915,3.227c0.06,1.896 0.994,3.263 2.975,3.263c1.393,0 2.376,-0.743 2.651,-2.111l-1.006,-0Zm-3.542,-1.727c0.072,-0.949 0.709,-1.754 1.777,-1.754c1.008,0 1.741,0.781 1.789,1.754l-3.566,-0Z" fill-rule="nonzero"/><rect x="212" y="59" width="38" height="16" fill="#e0e0ea"/><path d="M250,59l-0,16l-38,-0l-0,-16l38,-0Zm-1,1l-36,0l0,14l36,-0l0,-14Z" fill="#6a6bd3"/><path d="M221.991,70.567l5.95,0l0,-0.958l-4.812,-0l0,-2.966l4.452,0l0,-0.958l-4.452,-0l0,-2.726l4.776,0l0,-0.958l-5.914,-0l-0,8.566Z" fill-rule="nonzero"/><path d="M234.697,62.001l-1.018,-0l-0,3.19l-0.024,0c-0.456,-0.731 -1.369,-0.97 -2.005,-0.97c-1.897,-0 -2.831,1.474 -2.831,3.227c-0,1.753 0.946,3.263 2.855,3.263c0.852,0 1.645,-0.299 1.981,-0.982l0.024,-0l-0,0.838l1.018,0l0,-8.566Zm-4.8,5.519c0,-1.212 0.468,-2.401 1.861,-2.401c1.405,0 1.957,1.129 1.957,2.353c-0,1.164 -0.528,2.341 -1.897,2.341c-1.321,-0 -1.921,-1.129 -1.921,-2.293Z" fill-rule="nonzero"/><path d="M236.331,70.567l1.018,0l0,-6.202l-1.018,-0l-0,6.202Zm1.018,-8.566l-1.018,-0l-0,1.246l1.018,0l0,-1.246Z" fill-rule="nonzero"/><path d="M240.349,62.505l-1.018,-0l-0,1.86l-1.056,-0l-0,0.898l1.056,0l-0,3.95c-0,1.139 0.419,1.354 1.474,1.354l0.78,0l0,-0.898l-0.468,-0c-0.636,-0 -0.768,-0.084 -0.768,-0.552l0,-3.854l1.236,0l0,-0.898l-1.236,-0l0,-1.86Z" fill-rule="nonzero"/><rect x="251" y="59" width="44" height="16" fill="#e0e0ea"/><path d="M295,59l0,16l-44,-0l0,-16l44,-0Zm-1,1l-42,0l-0,14l42,-0l-0,-14Z" fill="#6a6bd3"/><path d="M264.635,64.508c-0.072,-1.885 -1.402,-2.711 -3.155,-2.711c-1.561,-0 -3.107,0.767 -3.107,2.507c-0,1.572 1.378,1.968 2.747,2.268c1.368,0.3 2.737,0.504 2.737,1.68c-0,1.237 -1.141,1.561 -2.173,1.561c-1.296,-0 -2.497,-0.624 -2.497,-2.065l-1.078,0c-0,2.089 1.618,3.023 3.539,3.023c1.561,0 3.347,-0.731 3.347,-2.555c0,-1.68 -1.366,-2.16 -2.735,-2.472c-1.38,-0.312 -2.749,-0.468 -2.749,-1.524c0,-1.117 0.961,-1.465 1.921,-1.465c1.176,0 1.993,0.528 2.125,1.753l1.078,-0Z" fill-rule="nonzero"/><path d="M267.623,62.505l-1.018,-0l-0,1.86l-1.056,-0l-0,0.898l1.056,0l-0,3.95c-0,1.139 0.419,1.354 1.474,1.354l0.78,0l0,-0.898l-0.468,-0c-0.636,-0 -0.768,-0.084 -0.768,-0.552l0,-3.854l1.236,0l0,-0.898l-1.236,-0l0,-1.86Z" fill-rule="nonzero"/><path d="M273.829,68.408c-0,0.564 -0.553,1.405 -1.897,1.405c-0.624,-0 -1.201,-0.24 -1.201,-0.913c0,-0.756 0.577,-0.996 1.249,-1.116c0.684,-0.12 1.453,-0.132 1.849,-0.42l-0,1.044Zm1.654,1.345c-0.132,0.048 -0.228,0.06 -0.312,0.06c-0.324,-0 -0.324,-0.216 -0.324,-0.696l0,-3.193c0,-1.452 -1.21,-1.703 -2.327,-1.703c-1.381,-0 -2.567,0.539 -2.627,2.075l1.018,-0c0.048,-0.913 0.685,-1.177 1.549,-1.177c0.648,0 1.381,0.144 1.381,1.033c-0,0.768 -0.961,0.696 -2.089,0.912c-1.057,0.204 -2.099,0.504 -2.099,1.908c-0,1.236 0.922,1.739 2.051,1.739c0.864,0 1.621,-0.299 2.185,-0.958c-0,0.671 0.335,0.958 0.862,0.958c0.324,0 0.552,-0.06 0.732,-0.167l0,-0.791Z" fill-rule="nonzero"/><path d="M276.037,68.612c0.06,1.536 1.234,2.099 2.627,2.099c1.261,0 2.639,-0.479 2.639,-1.955c0,-1.2 -1.006,-1.536 -2.027,-1.764c-0.948,-0.228 -2.029,-0.348 -2.029,-1.08c0,-0.625 0.709,-0.793 1.321,-0.793c0.672,0 1.369,0.252 1.441,1.045l1.018,-0c-0.084,-1.512 -1.174,-1.943 -2.543,-1.943c-1.081,-0 -2.315,0.515 -2.315,1.763c-0,1.188 1.018,1.524 2.027,1.752c1.02,0.228 2.029,0.36 2.029,1.152c-0,0.781 -0.865,0.925 -1.501,0.925c-0.84,-0 -1.633,-0.288 -1.669,-1.201l-1.018,0Z" fill-rule="nonzero"/><path d="M282.433,70.567l1.018,0l0,-3.504c0,-1.116 0.601,-1.944 1.837,-1.944c0.781,0 1.261,0.492 1.261,1.248l-0,4.2l1.018,0l0,-4.08c0,-1.332 -0.503,-2.266 -2.135,-2.266c-0.744,-0 -1.621,0.311 -1.957,1.054l-0.024,0l0,-3.274l-1.018,-0l-0,8.566Z" fill-rule="nonzero"/><rect x="490" y="42" width="44" height="16" fill="#e0e0ea"/><path d="M534,42l0,16l-44,-0l-0,-16l44,-0Zm-1,1l-42,0l-0,14l42,-0l-0,-14Z" fill="#6a6bd3"/><path d="M504.769,47.58c-0.263,-1.825 -1.738,-2.783 -3.527,-2.783c-2.641,-0 -4.055,2.026 -4.055,4.511c-0,2.497 1.294,4.463 3.959,4.463c2.161,0 3.492,-1.294 3.707,-3.431l-1.138,0c-0.108,1.417 -0.973,2.473 -2.473,2.473c-2.053,-0 -2.917,-1.633 -2.917,-3.589c0,-1.788 0.864,-3.469 2.905,-3.469c1.188,0 2.161,0.612 2.401,1.825l1.138,-0Z" fill-rule="nonzero"/><rect x="506.163" y="45.001" width="1.018" height="8.567" fill-rule="nonzero"/><path d="M508.431,50.472c-0,1.813 1.042,3.239 3.011,3.239c1.969,0 3.011,-1.426 3.011,-3.239c0,-1.825 -1.042,-3.251 -3.011,-3.251c-1.969,-0 -3.011,1.426 -3.011,3.251Zm1.078,0c0,-1.512 0.865,-2.353 1.933,-2.353c1.068,0 1.933,0.841 1.933,2.353c-0,1.5 -0.865,2.341 -1.933,2.341c-1.068,-0 -1.933,-0.841 -1.933,-2.341Z" fill-rule="nonzero"/><path d="M515.259,51.612c0.06,1.536 1.234,2.099 2.627,2.099c1.261,0 2.639,-0.479 2.639,-1.955c0,-1.2 -1.006,-1.536 -2.027,-1.764c-0.948,-0.228 -2.029,-0.348 -2.029,-1.08c0,-0.625 0.709,-0.793 1.321,-0.793c0.672,0 1.369,0.252 1.441,1.045l1.018,-0c-0.084,-1.512 -1.174,-1.943 -2.543,-1.943c-1.081,-0 -2.315,0.515 -2.315,1.763c-0,1.188 1.018,1.524 2.027,1.752c1.02,0.228 2.029,0.36 2.029,1.152c-0,0.781 -0.865,0.925 -1.501,0.925c-0.84,-0 -1.633,-0.288 -1.669,-1.201l-1.018,0Z" fill-rule="nonzero"/><path d="M525.939,51.6c-0.18,0.804 -0.769,1.213 -1.609,1.213c-1.357,-0 -1.969,-0.961 -1.933,-2.042l4.644,0c0.06,-1.499 -0.611,-3.55 -2.807,-3.55c-1.693,-0 -2.915,1.367 -2.915,3.227c0.06,1.896 0.994,3.263 2.975,3.263c1.393,0 2.376,-0.743 2.651,-2.111l-1.006,-0Zm-3.542,-1.727c0.072,-0.949 0.709,-1.754 1.777,-1.754c1.008,0 1.741,0.781 1.789,1.754l-3.566,-0Z" fill-rule="nonzero"/><rect x="535" y="42" width="44" height="16" fill="#e0e0ea"/><path d="M579,42l0,16l-44,-0l0,-16l44,-0Zm-1,1l-42,0l-0,14l42,-0l-0,-14Z" fill="#6a6bd3"/><path d="M550.639,47.508c-0.072,-1.885 -1.402,-2.711 -3.155,-2.711c-1.561,-0 -3.107,0.767 -3.107,2.507c-0,1.572 1.378,1.968 2.747,2.268c1.368,0.3 2.737,0.504 2.737,1.68c-0,1.237 -1.141,1.561 -2.173,1.561c-1.296,-0 -2.497,-0.624 -2.497,-2.065l-1.078,0c-0,2.089 1.618,3.023 3.539,3.023c1.561,0 3.347,-0.731 3.347,-2.555c0,-1.68 -1.366,-2.16 -2.735,-2.472c-1.38,-0.312 -2.749,-0.468 -2.749,-1.524c0,-1.117 0.961,-1.465 1.921,-1.465c1.176,0 1.993,0.528 2.125,1.753l1.078,-0Z" fill-rule="nonzero"/><path d="M556.053,51.408c-0,0.564 -0.553,1.405 -1.897,1.405c-0.624,-0 -1.201,-0.24 -1.201,-0.913c0,-0.756 0.577,-0.996 1.249,-1.116c0.684,-0.12 1.453,-0.132 1.849,-0.42l-0,1.044Zm1.654,1.345c-0.132,0.048 -0.228,0.06 -0.312,0.06c-0.324,-0 -0.324,-0.216 -0.324,-0.696l0,-3.193c0,-1.452 -1.21,-1.703 -2.327,-1.703c-1.381,-0 -2.567,0.539 -2.627,2.075l1.018,-0c0.048,-0.913 0.685,-1.177 1.549,-1.177c0.648,0 1.381,0.144 1.381,1.033c-0,0.768 -0.961,0.696 -2.089,0.912c-1.057,0.204 -2.099,0.504 -2.099,1.908c-0,1.236 0.922,1.739 2.051,1.739c0.864,0 1.621,-0.299 2.185,-0.958c-0,0.671 0.335,0.958 0.862,0.958c0.324,0 0.552,-0.06 0.732,-0.167l0,-0.791Z" fill-rule="nonzero"/><path d="M563.719,47.365l-1.067,-0l-1.692,5.172l-0.024,-0l-1.74,-5.172l-1.139,-0l2.303,6.202l1.092,0l2.267,-6.202Z" fill-rule="nonzero"/><path d="M568.941,51.6c-0.18,0.804 -0.769,1.213 -1.609,1.213c-1.357,-0 -1.969,-0.961 -1.933,-2.042l4.644,0c0.06,-1.499 -0.611,-3.55 -2.807,-3.55c-1.693,-0 -2.915,1.367 -2.915,3.227c0.06,1.896 0.994,3.263 2.975,3.263c1.393,0 2.376,-0.743 2.651,-2.111l-1.006,-0Zm-3.542,-1.727c0.072,-0.949 0.709,-1.754 1.777,-1.754c1.008,0 1.741,0.781 1.789,1.754l-3.566,-0Z" fill-rule="nonzero"/><rect x="580" y="42" width="58" height="16" fill="#e0e0ea"/><path d="M638,42l0,16l-58,-0l0,-16l58,-0Zm-1,1l-56,0c0,0 -0,14 -0,14l56,-0l-0,-14Z" fill="#6a6bd3"/><path d="M599.433,47.58c-0.263,-1.825 -1.738,-2.783 -3.527,-2.783c-2.641,-0 -4.055,2.026 -4.055,4.511c-0,2.497 1.294,4.463 3.959,4.463c2.161,0 3.492,-1.294 3.707,-3.431l-1.138,0c-0.108,1.417 -0.973,2.473 -2.473,2.473c-2.053,-0 -2.917,-1.633 -2.917,-3.589c0,-1.788 0.864,-3.469 2.905,-3.469c1.188,0 2.161,0.612 2.401,1.825l1.138,-0Z" fill-rule="nonzero"/><path d="M604.607,51.408c-0,0.564 -0.553,1.405 -1.897,1.405c-0.624,-0 -1.201,-0.24 -1.201,-0.913c0,-0.756 0.577,-0.996 1.249,-1.116c0.684,-0.12 1.453,-0.132 1.849,-0.42l-0,1.044Zm1.654,1.345c-0.132,0.048 -0.228,0.06 -0.312,0.06c-0.324,-0 -0.324,-0.216 -0.324,-0.696l0,-3.193c0,-1.452 -1.21,-1.703 -2.327,-1.703c-1.381,-0 -2.567,0.539 -2.627,2.075l1.018,-0c0.048,-0.913 0.685,-1.177 1.549,-1.177c0.648,0 1.381,0.144 1.381,1.033c-0,0.768 -0.961,0.696 -2.089,0.912c-1.057,0.204 -2.099,0.504 -2.099,1.908c-0,1.236 0.922,1.739 2.051,1.739c0.864,0 1.621,-0.299 2.185,-0.958c-0,0.671 0.335,0.958 0.862,0.958c0.324,0 0.552,-0.06 0.732,-0.167l0,-0.791Z" fill-rule="nonzero"/><path d="M607.211,53.567l1.018,0l0,-3.504c0,-1.116 0.601,-1.944 1.837,-1.944c0.781,0 1.261,0.492 1.261,1.248l-0,4.2l1.018,0l0,-4.08c0,-1.332 -0.503,-2.266 -2.135,-2.266c-0.888,-0 -1.585,0.359 -2.017,1.126l-0.024,0l0,-0.982l-0.958,-0l-0,6.202Z" fill-rule="nonzero"/><path d="M619.149,49.356c-0.144,-1.476 -1.272,-2.135 -2.676,-2.135c-1.968,-0 -2.926,1.462 -2.926,3.323c-0,1.849 1.006,3.167 2.902,3.167c1.56,0 2.508,-0.898 2.736,-2.411l-1.044,0c-0.132,0.937 -0.72,1.513 -1.704,1.513c-1.296,-0 -1.812,-1.129 -1.812,-2.269c0,-1.26 0.456,-2.425 1.932,-2.425c0.84,0 1.38,0.456 1.536,1.237l1.056,-0Z" fill-rule="nonzero"/><path d="M624.611,51.6c-0.18,0.804 -0.769,1.213 -1.609,1.213c-1.357,-0 -1.969,-0.961 -1.933,-2.042l4.644,0c0.06,-1.499 -0.611,-3.55 -2.807,-3.55c-1.693,-0 -2.915,1.367 -2.915,3.227c0.06,1.896 0.994,3.263 2.975,3.263c1.393,0 2.376,-0.743 2.651,-2.111l-1.006,-0Zm-3.542,-1.727c0.072,-0.949 0.709,-1.754 1.777,-1.754c1.008,0 1.741,0.781 1.789,1.754l-3.566,-0Z" fill-rule="nonzero"/><rect x="626.831" y="45.001" width="1.019" height="8.567" fill-rule="nonzero"/><rect x="639" y="42" width="52" height="16" fill="#e0e0ea"/><path d="M691,42l0,16l-52,-0l0,-16l52,-0Zm-1,1l-50,0c0,0 0,14 -0,14l50,-0l0,-14Z" fill="#6a6bd3"/><path d="M648.273,53.567l5.95,0l0,-0.958l-4.812,-0l0,-2.966l4.452,0l0,-0.958l-4.452,-0l0,-2.726l4.776,0l0,-0.958l-5.914,-0l-0,8.566Z" fill-rule="nonzero"/><path d="M654.777,53.567l1.235,0l1.728,-2.577l1.728,2.577l1.307,0l-2.399,-3.36l2.135,-2.842l-1.223,-0l-1.548,2.161l-1.488,-2.161l-1.307,-0l2.159,2.938l-2.327,3.264Z" fill-rule="nonzero"/><path d="M666.489,50.412c-0,1.212 -0.468,2.401 -1.861,2.401c-1.405,-0 -1.957,-1.129 -1.957,-2.353c0,-1.164 0.528,-2.341 1.897,-2.341c1.321,0 1.921,1.129 1.921,2.293Zm-4.8,5.531l1.018,0l0,-3.202l0.024,-0c0.456,0.731 1.369,0.97 2.005,0.97c1.897,0 2.831,-1.474 2.831,-3.227c0,-1.753 -0.946,-3.263 -2.855,-3.263c-0.852,-0 -1.645,0.299 -1.981,0.982l-0.024,0l0,-0.838l-1.018,-0l-0,8.578Z" fill-rule="nonzero"/><path d="M668.433,50.472c-0,1.813 1.042,3.239 3.011,3.239c1.969,0 3.011,-1.426 3.011,-3.239c0,-1.825 -1.042,-3.251 -3.011,-3.251c-1.969,-0 -3.011,1.426 -3.011,3.251Zm1.078,0c0,-1.512 0.865,-2.353 1.933,-2.353c1.068,0 1.933,0.841 1.933,2.353c-0,1.5 -0.865,2.341 -1.933,2.341c-1.068,-0 -1.933,-0.841 -1.933,-2.341Z" fill-rule="nonzero"/><path d="M675.621,53.567l1.018,0l0,-2.76c0,-1.572 0.6,-2.508 2.244,-2.508l0,-1.078c-1.104,-0.036 -1.788,0.455 -2.28,1.45l-0.024,0l0,-1.306l-0.958,-0l-0,6.202Z" fill-rule="nonzero"/><path d="M681.067,45.505l-1.018,-0l-0,1.86l-1.056,-0l-0,0.898l1.056,0l-0,3.95c-0,1.139 0.419,1.354 1.474,1.354l0.78,0l0,-0.898l-0.468,-0c-0.636,-0 -0.768,-0.084 -0.768,-0.552l0,-3.854l1.236,0l0,-0.898l-1.236,-0l0,-1.86Z" fill-rule="nonzero"/><rect x="692" y="42" width="38" height="16" fill="#e0e0ea"/><path d="M730,42l0,16l-38,-0l0,-16l38,-0Zm-1,1l-36,0l0,14l36,-0l0,-14Z" fill="#6a6bd3"/><path d="M698.877,53.567l1.138,0l0,-3.504l2.617,0c1.704,0.012 2.627,-0.946 2.627,-2.531c0,-1.585 -0.923,-2.531 -2.627,-2.531l-3.755,-0l-0,8.566Zm1.138,-7.608l2.233,0c1.285,0 1.873,0.553 1.873,1.573c-0,1.02 -0.588,1.585 -1.873,1.573l-2.233,-0l0,-3.146Z" fill-rule="nonzero"/><path d="M711.619,47.365l-1.018,-0l-0,3.504c-0,1.116 -0.601,1.944 -1.837,1.944c-0.781,-0 -1.261,-0.492 -1.261,-1.248l0,-4.2l-1.018,-0l-0,4.08c-0,1.332 0.503,2.266 2.135,2.266c0.888,0 1.585,-0.359 2.017,-1.126l0.024,-0l-0,0.982l0.958,0l0,-6.202Z" fill-rule="nonzero"/><path d="M712.761,51.612c0.06,1.536 1.234,2.099 2.627,2.099c1.261,0 2.639,-0.479 2.639,-1.955c0,-1.2 -1.006,-1.536 -2.027,-1.764c-0.948,-0.228 -2.029,-0.348 -2.029,-1.08c0,-0.625 0.709,-0.793 1.321,-0.793c0.672,0 1.369,0.252 1.441,1.045l1.018,-0c-0.084,-1.512 -1.174,-1.943 -2.543,-1.943c-1.081,-0 -2.315,0.515 -2.315,1.763c-0,1.188 1.018,1.524 2.027,1.752c1.02,0.228 2.029,0.36 2.029,1.152c-0,0.781 -0.865,0.925 -1.501,0.925c-0.84,-0 -1.633,-0.288 -1.669,-1.201l-1.018,0Z" fill-rule="nonzero"/><path d="M719.157,53.567l1.018,0l0,-3.504c0,-1.116 0.601,-1.944 1.837,-1.944c0.781,0 1.261,0.492 1.261,1.248l-0,4.2l1.018,0l0,-4.08c0,-1.332 -0.503,-2.266 -2.135,-2.266c-0.744,-0 -1.621,0.311 -1.957,1.054l-0.024,0l0,-3.274l-1.018,-0l-0,8.566Z" fill-rule="nonzero"/><rect x="490" y="59" width="58" height="16" fill="#e0e0ea"/><path d="M548,59l0,16l-58,-0l-0,-16l58,-0Zm-1,1l-56,0c-0,0 -0,14 -0,14l56,-0l-0,-14Z" fill="#6a6bd3"/><path d="M506.877,64.58c-0.263,-1.825 -1.738,-2.783 -3.527,-2.783c-2.641,-0 -4.055,2.026 -4.055,4.511c-0,2.497 1.294,4.463 3.959,4.463c2.161,0 3.492,-1.294 3.707,-3.431l-1.138,0c-0.108,1.417 -0.973,2.473 -2.473,2.473c-2.053,-0 -2.917,-1.633 -2.917,-3.589c0,-1.788 0.864,-3.469 2.905,-3.469c1.188,0 2.161,0.612 2.401,1.825l1.138,-0Z" fill-rule="nonzero"/><path d="M507.875,67.472c-0,1.813 1.042,3.239 3.011,3.239c1.969,0 3.011,-1.426 3.011,-3.239c0,-1.825 -1.042,-3.251 -3.011,-3.251c-1.969,-0 -3.011,1.426 -3.011,3.251Zm1.078,0c0,-1.512 0.865,-2.353 1.933,-2.353c1.068,0 1.933,0.841 1.933,2.353c-0,1.5 -0.865,2.341 -1.933,2.341c-1.068,-0 -1.933,-0.841 -1.933,-2.341Z" fill-rule="nonzero"/><path d="M515.099,70.567l1.018,0l0,-3.504c0,-1.116 0.601,-1.944 1.837,-1.944c0.781,0 1.261,0.492 1.261,1.248l-0,4.2l1.018,0l0,-4.08c0,-1.332 -0.503,-2.266 -2.135,-2.266c-0.888,-0 -1.585,0.359 -2.017,1.126l-0.024,0l0,-0.982l-0.958,-0l-0,6.202Z" fill-rule="nonzero"/><path d="M526.833,64.365l-1.067,-0l-1.692,5.172l-0.024,-0l-1.74,-5.172l-1.139,-0l2.303,6.202l1.092,0l2.267,-6.202Z" fill-rule="nonzero"/><path d="M532.055,68.6c-0.18,0.804 -0.769,1.213 -1.609,1.213c-1.357,-0 -1.969,-0.961 -1.933,-2.042l4.644,0c0.06,-1.499 -0.611,-3.55 -2.807,-3.55c-1.693,-0 -2.915,1.367 -2.915,3.227c0.06,1.896 0.994,3.263 2.975,3.263c1.393,0 2.376,-0.743 2.651,-2.111l-1.006,-0Zm-3.542,-1.727c0.072,-0.949 0.709,-1.754 1.777,-1.754c1.008,0 1.741,0.781 1.789,1.754l-3.566,-0Z" fill-rule="nonzero"/><path d="M534.179,70.567l1.018,0l0,-2.76c0,-1.572 0.6,-2.508 2.244,-2.508l0,-1.078c-1.104,-0.036 -1.788,0.455 -2.28,1.45l-0.024,0l0,-1.306l-0.958,-0l-0,6.202Z" fill-rule="nonzero"/><path d="M539.625,62.505l-1.018,-0l-0,1.86l-1.056,-0l-0,0.898l1.056,0l-0,3.95c-0,1.139 0.419,1.354 1.474,1.354l0.78,0l0,-0.898l-0.468,-0c-0.636,-0 -0.768,-0.084 -0.768,-0.552l0,-3.854l1.236,0l0,-0.898l-1.236,-0l0,-1.86Z" fill-rule="nonzero"/><rect x="549" y="59" width="44" height="16" fill="#e0e0ea"/><path d="M593,59l0,16l-44,-0l0,-16l44,-0Zm-1,1l-42,0l-0,14l42,-0l-0,-14Z" fill="#6a6bd3"/><path d="M556.781,66.284c-0,2.328 1.378,4.487 4.103,4.487c2.725,0 4.103,-2.159 4.103,-4.487c0,-2.329 -1.378,-4.487 -4.103,-4.487c-2.725,-0 -4.103,2.158 -4.103,4.487Zm1.138,-0c0,-1.728 0.876,-3.529 2.965,-3.529c2.089,0 2.965,1.801 2.965,3.529c-0,1.728 -0.876,3.529 -2.965,3.529c-2.089,-0 -2.965,-1.801 -2.965,-3.529Z" fill-rule="nonzero"/><path d="M571.049,67.412c-0,1.212 -0.468,2.401 -1.861,2.401c-1.405,-0 -1.957,-1.129 -1.957,-2.353c0,-1.164 0.528,-2.341 1.897,-2.341c1.321,0 1.921,1.129 1.921,2.293Zm-4.8,5.531l1.018,0l0,-3.202l0.024,-0c0.456,0.731 1.369,0.97 2.005,0.97c1.897,0 2.831,-1.474 2.831,-3.227c0,-1.753 -0.946,-3.263 -2.855,-3.263c-0.852,-0 -1.645,0.299 -1.981,0.982l-0.024,0l0,-0.838l-1.018,-0l-0,8.578Z" fill-rule="nonzero"/><path d="M577.613,68.6c-0.18,0.804 -0.769,1.213 -1.609,1.213c-1.357,-0 -1.969,-0.961 -1.933,-2.042l4.644,0c0.06,-1.499 -0.611,-3.55 -2.807,-3.55c-1.693,-0 -2.915,1.367 -2.915,3.227c0.06,1.896 0.994,3.263 2.975,3.263c1.393,0 2.376,-0.743 2.651,-2.111l-1.006,-0Zm-3.542,-1.727c0.072,-0.949 0.709,-1.754 1.777,-1.754c1.008,0 1.741,0.781 1.789,1.754l-3.566,-0Z" fill-rule="nonzero"/><path d="M579.773,70.567l1.018,0l0,-3.504c0,-1.116 0.601,-1.944 1.837,-1.944c0.781,0 1.261,0.492 1.261,1.248l-0,4.2l1.018,0l0,-4.08c0,-1.332 -0.503,-2.266 -2.135,-2.266c-0.888,-0 -1.585,0.359 -2.017,1.126l-0.024,0l0,-0.982l-0.958,-0l-0,6.202Z" fill-rule="nonzero"/><rect x="594" y="59" width="52" height="16" fill="#e0e0ea"/><path d="M646,59l0,16l-52,-0l0,-16l52,-0Zm-1,1l-50,0c0,0 -0,14 -0,14l50,-0l0,-14Z" fill="#6a6bd3"/><path d="M604.017,70.567l1.078,0l0,-7.128l0.024,0l2.677,7.128l0.972,0l2.677,-7.128l0.024,0l-0,7.128l1.078,0l0,-8.566l-1.558,-0l-2.713,7.2l-2.701,-7.2l-1.558,-0l-0,8.566Z" fill-rule="nonzero"/><path d="M618.561,68.6c-0.18,0.804 -0.769,1.213 -1.609,1.213c-1.357,-0 -1.969,-0.961 -1.933,-2.042l4.644,0c0.06,-1.499 -0.611,-3.55 -2.807,-3.55c-1.693,-0 -2.915,1.367 -2.915,3.227c0.06,1.896 0.994,3.263 2.975,3.263c1.393,0 2.376,-0.743 2.651,-2.111l-1.006,-0Zm-3.542,-1.727c0.072,-0.949 0.709,-1.754 1.777,-1.754c1.008,0 1.741,0.781 1.789,1.754l-3.566,-0Z" fill-rule="nonzero"/><path d="M620.685,70.567l1.018,0l0,-2.76c0,-1.572 0.6,-2.508 2.244,-2.508l0,-1.078c-1.104,-0.036 -1.788,0.455 -2.28,1.45l-0.024,0l0,-1.306l-0.958,-0l-0,6.202Z" fill-rule="nonzero"/><path d="M626.876,69.741c-1.345,-0 -1.753,-1.249 -1.753,-2.365c0,-1.188 0.528,-2.257 1.837,-2.257c1.285,0 1.765,1.129 1.765,2.221c-0,1.164 -0.504,2.401 -1.849,2.401Zm2.855,-5.376l-0.958,-0l-0,0.886l-0.012,0c-0.372,-0.683 -1.069,-1.03 -1.849,-1.03c-2.148,-0 -2.867,1.811 -2.867,3.275c-0,1.693 0.922,3.143 2.771,3.143c0.78,0 1.597,-0.371 1.933,-1.126l0.024,-0l-0,0.407c-0,1.392 -0.528,2.353 -1.861,2.353c-0.672,-0 -1.561,-0.264 -1.609,-1.009l-1.018,-0c0.06,1.356 1.402,1.823 2.567,1.823c1.957,0 2.879,-1.03 2.879,-3.047l0,-5.675Z" fill-rule="nonzero"/><path d="M635.553,68.6c-0.18,0.804 -0.769,1.213 -1.609,1.213c-1.357,-0 -1.969,-0.961 -1.933,-2.042l4.644,0c0.06,-1.499 -0.611,-3.55 -2.807,-3.55c-1.693,-0 -2.915,1.367 -2.915,3.227c0.06,1.896 0.994,3.263 2.975,3.263c1.393,0 2.376,-0.743 2.651,-2.111l-1.006,-0Zm-3.542,-1.727c0.072,-0.949 0.709,-1.754 1.777,-1.754c1.008,0 1.741,0.781 1.789,1.754l-3.566,-0Z" fill-rule="nonzero"/><rect x="647" y="59" width="38" height="16" fill="#e0e0ea"/><path d="M685,59l0,16l-38,-0l0,-16l38,-0Zm-1,1l-36,0l0,14l36,-0l0,-14Z" fill="#6a6bd3"/><path d="M656.991,70.567l5.95,0l0,-0.958l-4.812,-0l0,-2.966l4.452,0l0,-0.958l-4.452,-0l0,-2.726l4.776,0l0,-0.958l-5.914,-0l-0,8.566Z" fill-rule="nonzero"/><path d="M669.697,62.001l-1.018,-0l-0,3.19l-0.024,0c-0.456,-0.731 -1.369,-0.97 -2.005,-0.97c-1.897,-0 -2.831,1.474 -2.831,3.227c-0,1.753 0.946,3.263 2.855,3.263c0.852,0 1.645,-0.299 1.981,-0.982l0.024,-0l-0,0.838l1.018,0l0,-8.566Zm-4.8,5.519c0,-1.212 0.468,-2.401 1.861,-2.401c1.405,0 1.957,1.129 1.957,2.353c-0,1.164 -0.528,2.341 -1.897,2.341c-1.321,-0 -1.921,-1.129 -1.921,-2.293Z" fill-rule="nonzero"/><path d="M671.331,70.567l1.018,0l0,-6.202l-1.018,-0l-0,6.202Zm1.018,-8.566l-1.018,-0l-0,1.246l1.018,0l0,-1.246Z" fill-rule="nonzero"/><path d="M675.349,62.505l-1.018,-0l-0,1.86l-1.056,-0l-0,0.898l1.056,0l-0,3.95c-0,1.139 0.419,1.354 1.474,1.354l0.78,0l0,-0.898l-0.468,-0c-0.636,-0 -0.768,-0.084 -0.768,-0.552l0,-3.854l1.236,0l0,-0.898l-1.236,-0l0,-1.86Z" fill-rule="nonzero"/><rect x="686" y="59" width="44" height="16" fill="#e0e0ea"/><path d="M730,59l-0,16l-44,-0l-0,-16l44,-0Zm-1,1l-42,0l-0,14l42,-0l-0,-14Z" fill="#6a6bd3"/><path d="M699.635,64.508c-0.072,-1.885 -1.402,-2.711 -3.155,-2.711c-1.561,-0 -3.107,0.767 -3.107,2.507c-0,1.572 1.378,1.968 2.747,2.268c1.368,0.3 2.737,0.504 2.737,1.68c-0,1.237 -1.141,1.561 -2.173,1.561c-1.296,-0 -2.497,-0.624 -2.497,-2.065l-1.078,0c-0,2.089 1.618,3.023 3.539,3.023c1.561,0 3.347,-0.731 3.347,-2.555c0,-1.68 -1.366,-2.16 -2.735,-2.472c-1.38,-0.312 -2.749,-0.468 -2.749,-1.524c0,-1.117 0.961,-1.465 1.921,-1.465c1.176,0 1.993,0.528 2.125,1.753l1.078,-0Z" fill-rule="nonzero"/><path d="M702.623,62.505l-1.018,-0l-0,1.86l-1.056,-0l-0,0.898l1.056,0l-0,3.95c-0,1.139 0.419,1.354 1.474,1.354l0.78,0l0,-0.898l-0.468,-0c-0.636,-0 -0.768,-0.084 -0.768,-0.552l0,-3.854l1.236,0l0,-0.898l-1.236,-0l0,-1.86Z" fill-rule="nonzero"/><path d="M708.829,68.408c-0,0.564 -0.553,1.405 -1.897,1.405c-0.624,-0 -1.201,-0.24 -1.201,-0.913c0,-0.756 0.577,-0.996 1.249,-1.116c0.684,-0.12 1.453,-0.132 1.849,-0.42l-0,1.044Zm1.654,1.345c-0.132,0.048 -0.228,0.06 -0.312,0.06c-0.324,-0 -0.324,-0.216 -0.324,-0.696l0,-3.193c0,-1.452 -1.21,-1.703 -2.327,-1.703c-1.381,-0 -2.567,0.539 -2.627,2.075l1.018,-0c0.048,-0.913 0.685,-1.177 1.549,-1.177c0.648,0 1.381,0.144 1.381,1.033c-0,0.768 -0.961,0.696 -2.089,0.912c-1.057,0.204 -2.099,0.504 -2.099,1.908c-0,1.236 0.922,1.739 2.051,1.739c0.864,0 1.621,-0.299 2.185,-0.958c-0,0.671 0.335,0.958 0.862,0.958c0.324,0 0.552,-0.06 0.732,-0.167l0,-0.791Z" fill-rule="nonzero"/><path d="M711.037,68.612c0.06,1.536 1.234,2.099 2.627,2.099c1.261,0 2.639,-0.479 2.639,-1.955c0,-1.2 -1.006,-1.536 -2.027,-1.764c-0.948,-0.228 -2.029,-0.348 -2.029,-1.08c0,-0.625 0.709,-0.793 1.321,-0.793c0.672,0 1.369,0.252 1.441,1.045l1.018,-0c-0.084,-1.512 -1.174,-1.943 -2.543,-1.943c-1.081,-0 -2.315,0.515 -2.315,1.763c-0,1.188 1.018,1.524 2.027,1.752c1.02,0.228 2.029,0.36 2.029,1.152c-0,0.781 -0.865,0.925 -1.501,0.925c-0.84,-0 -1.633,-0.288 -1.669,-1.201l-1.018,0Z" fill-rule="nonzero"/><path d="M717.433,70.567l1.018,0l0,-3.504c0,-1.116 0.601,-1.944 1.837,-1.944c0.781,0 1.261,0.492 1.261,1.248l-0,4.2l1.018,0l0,-4.08c0,-1.332 -0.503,-2.266 -2.135,-2.266c-0.744,-0 -1.621,0.311 -1.957,1.054l-0.024,0l0,-3.274l-1.018,-0l-0,8.566Z" fill-rule="nonzero"/><path d="M484.5,38.5l-8,-0" fill="none" stroke="#000" stroke-width="1px"/><path d="M484.5,61.5l-8,-0" fill="none" stroke="#000" stroke-width="1px"/><path d="M480.5,38.5l0,23" fill="none" stroke="#000" stroke-width="1px" stroke-miterlimit="1"/><path d="M447.871,48.28c-0.036,-1.02 0.468,-2.112 1.657,-2.112c0.9,-0 1.645,0.612 1.645,1.536c-0,1.176 -0.733,1.704 -2.173,2.592c-1.201,0.745 -2.219,1.465 -2.387,3.48l5.554,-0l0,-0.899l-4.368,0c0.204,-1.056 1.321,-1.596 2.389,-2.244c1.057,-0.661 2.063,-1.417 2.063,-2.917c0,-1.584 -1.174,-2.447 -2.663,-2.447c-1.801,0 -2.819,1.283 -2.735,3.011l1.018,0Z" fill="#ac2020" fill-rule="nonzero"/><path d="M458.023,45.269l-0.814,0l-3.876,5.532l-0,0.983l3.732,-0l-0,1.992l0.958,-0l0,-1.992l1.152,-0l0,-0.899l-1.152,0l0,-5.616Zm-3.814,5.616l2.832,-4.164l0.024,0l-0,4.164l-2.856,0Z" fill="#ac2020" fill-rule="nonzero"/><path d="M465.273,50.62c-0,1.213 -0.468,2.401 -1.861,2.401c-1.405,0 -1.957,-1.128 -1.957,-2.353c0,-1.164 0.528,-2.34 1.897,-2.34c1.321,-0 1.921,1.128 1.921,2.292Zm-4.8,5.532l1.018,-0l0,-3.203l0.024,0c0.456,0.731 1.369,0.971 2.005,0.971c1.897,-0 2.831,-1.475 2.831,-3.228c0,-1.752 -0.946,-3.263 -2.855,-3.263c-0.852,0 -1.645,0.3 -1.981,0.983l-0.024,-0l0,-0.839l-1.018,0l-0,8.579Z" fill="#ac2020" fill-rule="nonzero"/><path d="M466.893,53.776l1.235,-0l1.728,-2.578l1.728,2.578l1.307,-0l-2.399,-3.36l2.135,-2.843l-1.223,0l-1.548,2.162l-1.488,-2.162l-1.307,0l2.159,2.939l-2.327,3.264Z" fill="#ac2020" fill-rule="nonzero"/><circle cx="512.002" cy="50" r="12" fill="#ca2626" fill-opacity=".2"/><path d="M512.002,38c6.623,0 12,5.377 12,12c0,6.623 -5.377,12 -12,12c-6.623,0 -12,-5.377 -12,-12c0,-6.623 5.377,-12 12,-12Zm0,1c-6.071,0 -11,4.929 -11,11c0,6.071 4.929,11 11,11c6.071,0 11,-4.929 11,-11c0,-6.071 -4.929,-11 -11,-11Z" fill="#ca2626"/><circle cx="557.002" cy="50" r="12" fill="#ca2626" fill-opacity=".2"/><path d="M557.002,38c6.623,0 12,5.377 12,12c0,6.623 -5.377,12 -12,12c-6.623,0 -12,-5.377 -12,-12c0,-6.623 5.377,-12 12,-12Zm0,1c-6.071,0 -11,4.929 -11,11c0,6.071 4.929,11 11,11c6.071,0 11,-4.929 11,-11c0,-6.071 -4.929,-11 -11,-11Z" fill="#ca2626"/><circle cx="609.002" cy="50" r="12" fill="#ca2626" fill-opacity=".2"/><path d="M609.002,38c6.623,0 12,5.377 12,12c0,6.623 -5.377,12 -12,12c-6.623,0 -12,-5.377 -12,-12c0,-6.623 5.377,-12 12,-12Zm0,1c-6.071,0 -11,4.929 -11,11c0,6.071 4.929,11 11,11c6.071,0 11,-4.929 11,-11c0,-6.071 -4.929,-11 -11,-11Z" fill="#ca2626"/><circle cx="665.002" cy="50" r="12" fill="#ca2626" fill-opacity=".2"/><path d="M665.002,38c6.623,0 12,5.377 12,12c0,6.623 -5.377,12 -12,12c-6.623,0 -12,-5.377 -12,-12c0,-6.623 5.377,-12 12,-12Zm0,1c-6.071,0 -11,4.929 -11,11c0,6.071 4.929,11 11,11c6.071,0 11,-4.929 11,-11c0,-6.071 -4.929,-11 -11,-11Z" fill="#ca2626"/><circle cx="711.002" cy="50" r="12" fill="#ca2626" fill-opacity=".2"/><path d="M711.002,38c6.623,0 12,5.377 12,12c0,6.623 -5.377,12 -12,12c-6.623,0 -12,-5.377 -12,-12c0,-6.623 5.377,-12 12,-12Zm0,1c-6.071,0 -11,4.929 -11,11c0,6.071 4.929,11 11,11c6.071,0 11,-4.929 11,-11c0,-6.071 -4.929,-11 -11,-11Z" fill="#ca2626"/><circle cx="519" cy="67" r="12" fill="#ca2626" fill-opacity=".2"/><path d="M519,55c6.623,0 12,5.377 12,12c0,6.623 -5.377,12 -12,12c-6.623,0 -12,-5.377 -12,-12c-0,-6.623 5.377,-12 12,-12Zm0,1c-6.071,0 -11,4.929 -11,11c0,6.071 4.929,11 11,11c6.071,0 11,-4.929 11,-11c0,-6.071 -4.929,-11 -11,-11Z" fill="#ca2626"/><circle cx="571" cy="67" r="12" fill="#ca2626" fill-opacity=".2"/><path d="M571,55c6.623,0 12,5.377 12,12c-0,6.623 -5.377,12 -12,12c-6.623,0 -12,-5.377 -12,-12c-0,-6.623 5.377,-12 12,-12Zm-0,1c-6.071,0 -11,4.929 -11,11c-0,6.071 4.929,11 11,11c6.071,0 11,-4.929 11,-11c-0,-6.071 -4.929,-11 -11,-11Z" fill="#ca2626"/><circle cx="620.002" cy="67" r="12" fill="#ca2626" fill-opacity=".2"/><path d="M620.002,55c6.623,0 12,5.377 12,12c0,6.623 -5.377,12 -12,12c-6.623,0 -12,-5.377 -12,-12c0,-6.623 5.377,-12 12,-12Zm0,1c-6.071,0 -11,4.929 -11,11c0,6.071 4.929,11 11,11c6.071,0 11,-4.929 11,-11c0,-6.071 -4.929,-11 -11,-11Z" fill="#ca2626"/><circle cx="666" cy="67" r="12" fill="#ca2626" fill-opacity=".2"/><path d="M666,55c6.623,0 12,5.377 12,12c0,6.623 -5.377,12 -12,12c-6.623,0 -12,-5.377 -12,-12c0,-6.623 5.377,-12 12,-12Zm0,1c-6.071,0 -11,4.929 -11,11c0,6.071 4.929,11 11,11c6.071,0 11,-4.929 11,-11c0,-6.071 -4.929,-11 -11,-11Z" fill="#ca2626"/><circle cx="708.002" cy="67" r="12" fill="#ca2626" fill-opacity=".2"/><path d="M708.002,55c6.623,0 12,5.377 12,12c0,6.623 -5.377,12 -12,12c-6.623,0 -12,-5.377 -12,-12c0,-6.623 5.377,-12 12,-12Zm0,1c-6.071,0 -11,4.929 -11,11c0,6.071 4.929,11 11,11c6.071,0 11,-4.929 11,-11c0,-6.071 -4.929,-11 -11,-11Z" fill="#ca2626"/><g transform="matrix(1,0,0,1,336.501,-184.26)"><path d="M0.503,-0.351c-0.012,-0.123 -0.106,-0.178 -0.223,-0.178c-0.164,0 -0.244,0.122 -0.244,0.277c0,0.154 0.084,0.264 0.242,0.264c0.13,-0 0.209,-0.075 0.228,-0.201l-0.087,0c-0.011,0.078 -0.06,0.126 -0.142,0.126c-0.108,0 -0.151,-0.094 -0.151,-0.189c-0,-0.105 0.038,-0.202 0.161,-0.202c0.07,-0 0.115,0.038 0.128,0.103l0.088,-0Z" fill="#ac2020" fill-rule="nonzero" transform="matrix(12,0,0,12,172.119,213.245)"/><path d="M0.069,-0l0.085,-0l-0,-0.517l-0.085,0l0,0.517Zm0.085,-0.714l-0.085,0l0,0.104l0.085,-0l-0,-0.104Z" fill="#ac2020" fill-rule="nonzero" transform="matrix(12,0,0,12,178.563,213.245)"/><path d="M0.061,-0l0.085,-0l-0,-0.23c-0,-0.131 0.05,-0.209 0.187,-0.209l-0,-0.09c-0.092,-0.003 -0.149,0.038 -0.19,0.121l-0.002,-0l-0,-0.109l-0.08,0l0,0.517Z" fill="#ac2020" fill-rule="nonzero" transform="matrix(12,0,0,12,181.227,213.245)"/><path d="M0.503,-0.351c-0.012,-0.123 -0.106,-0.178 -0.223,-0.178c-0.164,0 -0.244,0.122 -0.244,0.277c0,0.154 0.084,0.264 0.242,0.264c0.13,-0 0.209,-0.075 0.228,-0.201l-0.087,0c-0.011,0.078 -0.06,0.126 -0.142,0.126c-0.108,0 -0.151,-0.094 -0.151,-0.189c-0,-0.105 0.038,-0.202 0.161,-0.202c0.07,-0 0.115,0.038 0.128,0.103l0.088,-0Z" fill="#ac2020" fill-rule="nonzero" transform="matrix(12,0,0,12,185.007,213.245)"/><rect x="0.069" y="-0.714" width="0.085" height="0.714" fill="#ac2020" fill-rule="nonzero" transform="matrix(12,0,0,12,191.451,213.245)"/><path d="M0.421,-0.164c-0.015,0.067 -0.064,0.101 -0.134,0.101c-0.113,0 -0.164,-0.08 -0.161,-0.17l0.387,-0c0.005,-0.125 -0.051,-0.296 -0.234,-0.296c-0.141,0 -0.243,0.114 -0.243,0.269c0.005,0.158 0.083,0.272 0.248,0.272c0.116,-0 0.198,-0.062 0.221,-0.176l-0.084,-0Zm-0.295,-0.144c0.006,-0.079 0.059,-0.146 0.148,-0.146c0.084,-0 0.145,0.065 0.149,0.146l-0.297,0Z" fill="#ac2020" fill-rule="nonzero" transform="matrix(12,0,0,12,194.115,213.245)"/><path d="M0.031,-0.163c0.005,0.128 0.103,0.175 0.219,0.175c0.105,-0 0.22,-0.04 0.22,-0.163c-0,-0.1 -0.084,-0.128 -0.169,-0.147c-0.079,-0.019 -0.169,-0.029 -0.169,-0.09c-0,-0.052 0.059,-0.066 0.11,-0.066c0.056,-0 0.114,0.021 0.12,0.087l0.085,-0c-0.007,-0.126 -0.098,-0.162 -0.212,-0.162c-0.09,0 -0.193,0.043 -0.193,0.147c0,0.099 0.085,0.127 0.169,0.146c0.085,0.019 0.169,0.03 0.169,0.096c0,0.065 -0.072,0.077 -0.125,0.077c-0.07,0 -0.136,-0.024 -0.139,-0.1l-0.085,0Z" fill="#ac2020" fill-rule="nonzero" transform="matrix(12,0,0,12,200.559,213.245)"/><path d="M0.069,-0l0.085,-0l-0,-0.517l-0.085,0l0,0.517Zm0.085,-0.714l-0.085,0l0,0.104l0.085,-0l-0,-0.104Z" fill="#ac2020" fill-rule="nonzero" transform="matrix(12,0,0,12,209.895,213.245)"/><path d="M0.064,-0l0.085,-0l-0,-0.292c-0,-0.093 0.05,-0.162 0.153,-0.162c0.065,-0 0.105,0.041 0.105,0.104l0,0.35l0.085,-0l-0,-0.34c-0,-0.111 -0.042,-0.189 -0.178,-0.189c-0.074,0 -0.132,0.03 -0.168,0.094l-0.002,-0l-0,-0.082l-0.08,0l0,0.517Z" fill="#ac2020" fill-rule="nonzero" transform="matrix(12,0,0,12,212.559,213.245)"/><path d="M0.182,-0.672l-0.085,0l0,0.155l-0.088,0l0,0.075l0.088,-0l0,0.329c0,0.095 0.035,0.113 0.123,0.113l0.065,-0l-0,-0.075l-0.039,0c-0.053,0 -0.064,-0.007 -0.064,-0.046l-0,-0.321l0.103,-0l-0,-0.075l-0.103,0l-0,-0.155Z" fill="#ac2020" fill-rule="nonzero" transform="matrix(12,0,0,12,219.231,213.245)"/><path d="M0.421,-0.164c-0.015,0.067 -0.064,0.101 -0.134,0.101c-0.113,0 -0.164,-0.08 -0.161,-0.17l0.387,-0c0.005,-0.125 -0.051,-0.296 -0.234,-0.296c-0.141,0 -0.243,0.114 -0.243,0.269c0.005,0.158 0.083,0.272 0.248,0.272c0.116,-0 0.198,-0.062 0.221,-0.176l-0.084,-0Zm-0.295,-0.144c0.006,-0.079 0.059,-0.146 0.148,-0.146c0.084,-0 0.145,0.065 0.149,0.146l-0.297,0Z" fill="#ac2020" fill-rule="nonzero" transform="matrix(12,0,0,12,223.011,213.245)"/><path d="M0.061,-0l0.085,-0l-0,-0.23c-0,-0.131 0.05,-0.209 0.187,-0.209l-0,-0.09c-0.092,-0.003 -0.149,0.038 -0.19,0.121l-0.002,-0l-0,-0.109l-0.08,0l0,0.517Z" fill="#ac2020" fill-rule="nonzero" transform="matrix(12,0,0,12,229.455,213.245)"/><path d="M0.031,-0.163c0.005,0.128 0.103,0.175 0.219,0.175c0.105,-0 0.22,-0.04 0.22,-0.163c-0,-0.1 -0.084,-0.128 -0.169,-0.147c-0.079,-0.019 -0.169,-0.029 -0.169,-0.09c-0,-0.052 0.059,-0.066 0.11,-0.066c0.056,-0 0.114,0.021 0.12,0.087l0.085,-0c-0.007,-0.126 -0.098,-0.162 -0.212,-0.162c-0.09,0 -0.193,0.043 -0.193,0.147c0,0.099 0.085,0.127 0.169,0.146c0.085,0.019 0.169,0.03 0.169,0.096c0,0.065 -0.072,0.077 -0.125,0.077c-0.07,0 -0.136,-0.024 -0.139,-0.1l-0.085,0Z" fill="#ac2020" fill-rule="nonzero" transform="matrix(12,0,0,12,233.451,213.245)"/><path d="M0.421,-0.164c-0.015,0.067 -0.064,0.101 -0.134,0.101c-0.113,0 -0.164,-0.08 -0.161,-0.17l0.387,-0c0.005,-0.125 -0.051,-0.296 -0.234,-0.296c-0.141,0 -0.243,0.114 -0.243,0.269c0.005,0.158 0.083,0.272 0.248,0.272c0.116,-0 0.198,-0.062 0.221,-0.176l-0.084,-0Zm-0.295,-0.144c0.006,-0.079 0.059,-0.146 0.148,-0.146c0.084,-0 0.145,0.065 0.149,0.146l-0.297,0Z" fill="#ac2020" fill-rule="nonzero" transform="matrix(12,0,0,12,239.451,213.245)"/><path d="M0.503,-0.351c-0.012,-0.123 -0.106,-0.178 -0.223,-0.178c-0.164,0 -0.244,0.122 -0.244,0.277c0,0.154 0.084,0.264 0.242,0.264c0.13,-0 0.209,-0.075 0.228,-0.201l-0.087,0c-0.011,0.078 -0.06,0.126 -0.142,0.126c-0.108,0 -0.151,-0.094 -0.151,-0.189c-0,-0.105 0.038,-0.202 0.161,-0.202c0.07,-0 0.115,0.038 0.128,0.103l0.088,-0Z" fill="#ac2020" fill-rule="nonzero" transform="matrix(12,0,0,12,245.895,213.245)"/><path d="M0.182,-0.672l-0.085,0l0,0.155l-0.088,0l0,0.075l0.088,-0l0,0.329c0,0.095 0.035,0.113 0.123,0.113l0.065,-0l-0,-0.075l-0.039,0c-0.053,0 -0.064,-0.007 -0.064,-0.046l-0,-0.321l0.103,-0l-0,-0.075l-0.103,0l-0,-0.155Z" fill="#ac2020" fill-rule="nonzero" transform="matrix(12,0,0,12,252.339,213.245)"/><path d="M0.036,-0.258c0,0.151 0.087,0.27 0.251,0.27c0.164,-0 0.251,-0.119 0.251,-0.27c-0,-0.152 -0.087,-0.271 -0.251,-0.271c-0.164,0 -0.251,0.119 -0.251,0.271Zm0.09,0c-0,-0.126 0.072,-0.196 0.161,-0.196c0.089,-0 0.161,0.07 0.161,0.196c0,0.125 -0.072,0.195 -0.161,0.195c-0.089,0 -0.161,-0.07 -0.161,-0.195Z" fill="#ac2020" fill-rule="nonzero" transform="matrix(12,0,0,12,259.455,213.245)"/><path d="M0.182,-0.672l-0.085,0l0,0.155l-0.088,0l0,0.075l0.088,-0l0,0.329c0,0.095 0.035,0.113 0.123,0.113l0.065,-0l-0,-0.075l-0.039,0c-0.053,0 -0.064,-0.007 -0.064,-0.046l-0,-0.321l0.103,-0l-0,-0.075l-0.103,0l-0,-0.155Z" fill="#ac2020" fill-rule="nonzero" transform="matrix(12,0,0,12,266.343,213.245)"/><path d="M0.064,-0l0.085,-0l-0,-0.292c-0,-0.093 0.05,-0.162 0.153,-0.162c0.065,-0 0.105,0.041 0.105,0.104l0,0.35l0.085,-0l-0,-0.34c-0,-0.111 -0.042,-0.189 -0.178,-0.189c-0.062,0 -0.135,0.026 -0.163,0.088l-0.002,-0l-0,-0.273l-0.085,0l0,0.714Z" fill="#ac2020" fill-rule="nonzero" transform="matrix(12,0,0,12,270.123,213.245)"/><path d="M0.421,-0.164c-0.015,0.067 -0.064,0.101 -0.134,0.101c-0.113,0 -0.164,-0.08 -0.161,-0.17l0.387,-0c0.005,-0.125 -0.051,-0.296 -0.234,-0.296c-0.141,0 -0.243,0.114 -0.243,0.269c0.005,0.158 0.083,0.272 0.248,0.272c0.116,-0 0.198,-0.062 0.221,-0.176l-0.084,-0Zm-0.295,-0.144c0.006,-0.079 0.059,-0.146 0.148,-0.146c0.084,-0 0.145,0.065 0.149,0.146l-0.297,0Z" fill="#ac2020" fill-rule="nonzero" transform="matrix(12,0,0,12,276.795,213.245)"/><path d="M0.061,-0l0.085,-0l-0,-0.23c-0,-0.131 0.05,-0.209 0.187,-0.209l-0,-0.09c-0.092,-0.003 -0.149,0.038 -0.19,0.121l-0.002,-0l-0,-0.109l-0.08,0l0,0.517Z" fill="#ac2020" fill-rule="nonzero" transform="matrix(12,0,0,12,283.239,213.245)"/><path d="M0.182,-0.672l-0.085,0l0,0.155l-0.088,0l0,0.075l0.088,-0l0,0.329c0,0.095 0.035,0.113 0.123,0.113l0.065,-0l-0,-0.075l-0.039,0c-0.053,0 -0.064,-0.007 -0.064,-0.046l-0,-0.321l0.103,-0l-0,-0.075l-0.103,0l-0,-0.155Z" fill="#ac2020" fill-rule="nonzero" transform="matrix(12,0,0,12,290.571,213.245)"/><path d="M0.384,-0.18c0,0.047 -0.046,0.117 -0.158,0.117c-0.052,0 -0.1,-0.02 -0.1,-0.076c-0,-0.063 0.048,-0.083 0.104,-0.093c0.057,-0.01 0.121,-0.011 0.154,-0.035l0,0.087Zm0.138,0.112c-0.011,0.004 -0.019,0.005 -0.026,0.005c-0.027,0 -0.027,-0.018 -0.027,-0.058l-0,-0.266c-0,-0.121 -0.101,-0.142 -0.194,-0.142c-0.115,0 -0.214,0.045 -0.219,0.173l0.085,-0c0.004,-0.076 0.057,-0.098 0.129,-0.098c0.054,-0 0.115,0.012 0.115,0.086c0,0.064 -0.08,0.058 -0.174,0.076c-0.088,0.017 -0.175,0.042 -0.175,0.159c0,0.103 0.077,0.145 0.171,0.145c0.072,-0 0.135,-0.025 0.182,-0.08c0,0.056 0.028,0.08 0.072,0.08c0.027,-0 0.046,-0.005 0.061,-0.014l-0,-0.066Z" fill="#ac2020" fill-rule="nonzero" transform="matrix(12,0,0,12,294.351,213.245)"/><path d="M0.061,-0l0.085,-0l-0,-0.23c-0,-0.131 0.05,-0.209 0.187,-0.209l-0,-0.09c-0.092,-0.003 -0.149,0.038 -0.19,0.121l-0.002,-0l-0,-0.109l-0.08,0l0,0.517Z" fill="#ac2020" fill-rule="nonzero" transform="matrix(12,0,0,12,300.795,213.245)"/><path d="M0.272,-0.069c-0.112,0 -0.146,-0.104 -0.146,-0.197c-0,-0.099 0.044,-0.188 0.153,-0.188c0.107,-0 0.147,0.094 0.147,0.185c0,0.097 -0.042,0.2 -0.154,0.2Zm0.238,-0.448l-0.08,0l0,0.074l-0.001,-0c-0.031,-0.057 -0.089,-0.086 -0.154,-0.086c-0.179,0 -0.239,0.151 -0.239,0.273c0,0.141 0.077,0.262 0.231,0.262c0.065,-0 0.133,-0.031 0.161,-0.094l0.002,0l0,0.034c0,0.116 -0.044,0.196 -0.155,0.196c-0.056,0 -0.13,-0.022 -0.134,-0.084l-0.085,-0c0.005,0.113 0.117,0.152 0.214,0.152c0.163,-0 0.24,-0.086 0.24,-0.254l-0,-0.473Z" fill="#ac2020" fill-rule="nonzero" transform="matrix(12,0,0,12,304.455,213.245)"/><path d="M0.421,-0.164c-0.015,0.067 -0.064,0.101 -0.134,0.101c-0.113,0 -0.164,-0.08 -0.161,-0.17l0.387,-0c0.005,-0.125 -0.051,-0.296 -0.234,-0.296c-0.141,0 -0.243,0.114 -0.243,0.269c0.005,0.158 0.083,0.272 0.248,0.272c0.116,-0 0.198,-0.062 0.221,-0.176l-0.084,-0Zm-0.295,-0.144c0.006,-0.079 0.059,-0.146 0.148,-0.146c0.084,-0 0.145,0.065 0.149,0.146l-0.297,0Z" fill="#ac2020" fill-rule="nonzero" transform="matrix(12,0,0,12,311.343,213.245)"/><path d="M0.182,-0.672l-0.085,0l0,0.155l-0.088,0l0,0.075l0.088,-0l0,0.329c0,0.095 0.035,0.113 0.123,0.113l0.065,-0l-0,-0.075l-0.039,0c-0.053,0 -0.064,-0.007 -0.064,-0.046l-0,-0.321l0.103,-0l-0,-0.075l-0.103,0l-0,-0.155Z" fill="#ac2020" fill-rule="nonzero" transform="matrix(12,0,0,12,317.787,213.245)"/><path d="M0.031,-0.163c0.005,0.128 0.103,0.175 0.219,0.175c0.105,-0 0.22,-0.04 0.22,-0.163c-0,-0.1 -0.084,-0.128 -0.169,-0.147c-0.079,-0.019 -0.169,-0.029 -0.169,-0.09c-0,-0.052 0.059,-0.066 0.11,-0.066c0.056,-0 0.114,0.021 0.12,0.087l0.085,-0c-0.007,-0.126 -0.098,-0.162 -0.212,-0.162c-0.09,0 -0.193,0.043 -0.193,0.147c0,0.099 0.085,0.127 0.169,0.146c0.085,0.019 0.169,0.03 0.169,0.096c0,0.065 -0.072,0.077 -0.125,0.077c-0.07,0 -0.136,-0.024 -0.139,-0.1l-0.085,0Z" fill="#ac2020" fill-rule="nonzero" transform="matrix(12,0,0,12,321.567,213.245)"/><path d="M0.334,-0.506l-0.068,0l0,0.219l-0.218,0l0,0.068l0.218,-0l0,0.219l0.068,-0l-0,-0.219l0.218,-0l-0,-0.068l-0.218,0l-0,-0.219Z" fill="#ac2020" fill-rule="nonzero" transform="matrix(12,0,0,12,330.903,213.245)"/><path d="M0.503,-0.351c-0.012,-0.123 -0.106,-0.178 -0.223,-0.178c-0.164,0 -0.244,0.122 -0.244,0.277c0,0.154 0.084,0.264 0.242,0.264c0.13,-0 0.209,-0.075 0.228,-0.201l-0.087,0c-0.011,0.078 -0.06,0.126 -0.142,0.126c-0.108,0 -0.151,-0.094 -0.151,-0.189c-0,-0.105 0.038,-0.202 0.161,-0.202c0.07,-0 0.115,0.038 0.128,0.103l0.088,-0Z" fill="#ac2020" fill-rule="nonzero" transform="matrix(12,0,0,12,341.439,213.245)"/><path d="M0.069,-0l0.085,-0l-0,-0.517l-0.085,0l0,0.517Zm0.085,-0.714l-0.085,0l0,0.104l0.085,-0l-0,-0.104Z" fill="#ac2020" fill-rule="nonzero" transform="matrix(12,0,0,12,347.883,213.245)"/><path d="M0.061,-0l0.085,-0l-0,-0.23c-0,-0.131 0.05,-0.209 0.187,-0.209l-0,-0.09c-0.092,-0.003 -0.149,0.038 -0.19,0.121l-0.002,-0l-0,-0.109l-0.08,0l0,0.517Z" fill="#ac2020" fill-rule="nonzero" transform="matrix(12,0,0,12,350.547,213.245)"/><path d="M0.503,-0.351c-0.012,-0.123 -0.106,-0.178 -0.223,-0.178c-0.164,0 -0.244,0.122 -0.244,0.277c0,0.154 0.084,0.264 0.242,0.264c0.13,-0 0.209,-0.075 0.228,-0.201l-0.087,0c-0.011,0.078 -0.06,0.126 -0.142,0.126c-0.108,0 -0.151,-0.094 -0.151,-0.189c-0,-0.105 0.038,-0.202 0.161,-0.202c0.07,-0 0.115,0.038 0.128,0.103l0.088,-0Z" fill="#ac2020" fill-rule="nonzero" transform="matrix(12,0,0,12,354.327,213.245)"/><rect x="0.069" y="-0.714" width="0.085" height="0.714" fill="#ac2020" fill-rule="nonzero" transform="matrix(12,0,0,12,360.771,213.245)"/><path d="M0.421,-0.164c-0.015,0.067 -0.064,0.101 -0.134,0.101c-0.113,0 -0.164,-0.08 -0.161,-0.17l0.387,-0c0.005,-0.125 -0.051,-0.296 -0.234,-0.296c-0.141,0 -0.243,0.114 -0.243,0.269c0.005,0.158 0.083,0.272 0.248,0.272c0.116,-0 0.198,-0.062 0.221,-0.176l-0.084,-0Zm-0.295,-0.144c0.006,-0.079 0.059,-0.146 0.148,-0.146c0.084,-0 0.145,0.065 0.149,0.146l-0.297,0Z" fill="#ac2020" fill-rule="nonzero" transform="matrix(12,0,0,12,363.435,213.245)"/><path d="M0.031,-0.163c0.005,0.128 0.103,0.175 0.219,0.175c0.105,-0 0.22,-0.04 0.22,-0.163c-0,-0.1 -0.084,-0.128 -0.169,-0.147c-0.079,-0.019 -0.169,-0.029 -0.169,-0.09c-0,-0.052 0.059,-0.066 0.11,-0.066c0.056,-0 0.114,0.021 0.12,0.087l0.085,-0c-0.007,-0.126 -0.098,-0.162 -0.212,-0.162c-0.09,0 -0.193,0.043 -0.193,0.147c0,0.099 0.085,0.127 0.169,0.146c0.085,0.019 0.169,0.03 0.169,0.096c0,0.065 -0.072,0.077 -0.125,0.077c-0.07,0 -0.136,-0.024 -0.139,-0.1l-0.085,0Z" fill="#ac2020" fill-rule="nonzero" transform="matrix(12,0,0,12,369.879,213.245)"/><rect x="172.119" y="214.145" width="203.76" height="0.6" fill="#ac2020"/></g><path d="M361.541,56.779l4.398,-0l-0,-5.44l5.7,-0l-0,-3.398l-5.7,0l-0,-1.782l6.64,-0l-0,-3.658l-11.038,0l0,14.278Z" fill="#ac2020" fill-rule="nonzero"/><path d="M377.76,51.681l1.38,-4.4l0.04,0l1.28,4.4l-2.7,0Zm-6.019,5.098l4.42,-0l0.639,-2.04l4.54,-0l0.6,2.04l4.559,-0l-5.199,-14.278l-4.3,0l-5.259,14.278Z" fill="#ac2020" fill-rule="nonzero"/><rect x="387.481" y="42.501" width="4.397" height="14.278" fill="#ac2020" fill-rule="nonzero"/><path d="M394.141,56.779l10.718,-0l-0,-3.658l-6.32,0l-0,-10.62l-4.398,0l0,14.278Z" fill="#ac2020" fill-rule="nonzero"/></g></svg>
\ No newline at end of file
diff --git a/understanding/22/pointer-target-spacing.html b/understanding/22/pointer-target-spacing.html
deleted file mode 100644
index 729b67f8db..0000000000
--- a/understanding/22/pointer-target-spacing.html
+++ /dev/null
@@ -1,153 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
-<head>
-   <meta charset="UTF-8"></meta>
-   <title>Understanding Pointer Target Spacing</title>
-   <link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"></link>
-</head>
-<body>
-   <h1>Understanding Pointer Target Spacing</h1>
-   
-    <section id="status" class="advisement">
-        <h2>Status</h2>
-        <p>This understanding document is part of the <a href="https://w3c.github.io/wcag/guidelines/22/"><strong>draft</strong> WCAG 2.2 content</a>. It may change or be removed before the final WCAG 2.2 is published.</p>
-    </section> 
-
-    <section class="remove">
-   
-        <h2>Pointer Target Spacing Success Criterion text</h2>
-        <blockquote>
-            <h4>Pointer Target Spacing</h4>
-    
-            <p class="conformance-level">AA</p>
-            <p class="change">New</p>
-            
-            <p>For each <a href="https://www.w3.org/TR/WCAG21/#dfn-target">target</a>, there is an area with a width and height of at least 44 CSS pixels that includes it, and no other targets, except when:</p>
-            <ul>
-                <li><strong>Enlarge:</strong> A mechanism is available to change the CSS pixel size of each target, or its spacing, so there is an area with a width and height of at least 44 CSS pixels that includes it, and no other targets;</li>
-                <li><strong>Inline:</strong> The target is in a sentence or block of text;</li>
-                <li><strong>User agent:</strong> The size of the target is controlled by the user agent and is not modified by the author;</li>
-                <li><strong>Essential:</strong> A particular presentation of the target is essential to the information being conveyed.</li>
-            </ul>
-            <p class="note">This criterion has been formulated to make it less likely that users accidentally hit a target adjacent to the one they intend to hit. The group would like feedback from providers of touch-screen devices if there is another way of forming the criterion to better complement the tap-heuristics used.</p>
-            <p class="note">Are there issues with internationalization when describing inline links?</p>
-            <p class="note">Are there issues with pop-over content overlapping targets triggering failures?</p>
-        </blockquote>
-    </section>
-   
-    <section id="intent">
-        <h2>Intent of Pointer Target Spacing</h2>
-
-        <p>The intent of this Success Criterion is to ensure targets can easily be activated without accidentally activating an adjacent target. When  targets are small, it is difficult for users with hand tremors and those who have difficulty with fine motor movement to activate them accurately. Providing spacing between targets will reduce the likelihood of accidentally activating the wrong control.</p>
-
-        <p>The requirement is for targets that are smaller than 44 x 44px to be included in an area with a width and height of at least 44px each. For the horizontal dimension, this means that the total width of 44px is composed of the width of the target and the width of the spacing that separates it from adjacent targets. The same applies to the height. For example, a target of 24 x 24px would meet the requirement if it had a spacing of 10 px on all sides. If the target is 44 x 44px or larger, no spacing between it and adjacent targets would be required.</p>
-      
-
-        <p>There are three exceptions:</p>
-        <ol>
-            <li>If there is a mechanism to change the target sizes or spacing to meet the minimum, such as a button to change the sizes and layout of the targets.</li>
-            <li>If the target is inline within a sentence there doesn’t need to be a minimum target size.</li>
-            <li>If the spacing of the targets is essential to the information being conveyed there doesn’t need to be a minimum target size.</li>
-        </ol>
-
-        <p>The requirement is independent of the zoom factor of the page, when users zoom in the CSS pixel size of elements does not change. This means that authors cannot meet it by claiming that the target will have enough spacing or sufficient size if the user zooms into the page.</p>
-
-        <p>The requirement does not apply to the spacing of targets inside unstyled native elements. For example, when a default select element is used, the vertical spacing of option elements inside the select's dropdown list is exempt.</p>
-
-        <p>While the Success Criterion primarily helps touch users by ensuring that activation with the 'fat finger' will not accidentally trigger adjacent targets, it is also useful for mouse or pen users. It reduces the chances of erroneous activation due to a tremor or some other input imprecision.</p>
-      
-        <p>As mobile devices generally have internal heuristics to identify which link is closest, spacing can work as effectively as a larger target size.</p>
-
-        <figure id="pointer-target-44x44">
-            <img src="img/pointer-target-example1.png" alt="A series of icons with measures showing they are each 44 by 44 pixels wide and high." />
-            <figcaption>The dimension of each icon target in a row is 44 by 44 CSS pixels, so the targets pass this Success Criterion without additional spacing.</figcaption>
-        </figure>
-
-        <figure id="pointer-target-38x38-spacing">
-            <img src="img/pointer-target-example2.png" alt="A row of icons with measures showing they are each 38 by 38 pixels wide and high, with 6 pixel spacing between them." />
-            <figcaption>The dimension of each icon target in a row is 38 by 38 CSS pixels, so a spacing of 6 CSS pixels is required to arrive at 44 CSS pixels for the combined width and spacing of the target. No adjacent targets are present above and below, i.e., there is sufficient vertical spacing for the height of 38 CSS pixels to be sufficient.</figcaption>
-        </figure>
-
-        <figure id="pointer-target-44x20-spacing">
-            <img src="img/pointer-target-example3.png" alt="A row of buttons which are more that 44px wide and 20px high. There are no targets above or below." />
-            <figcaption>The widths of the button with adjacent neighbors is at least 44 CSS pixels, while the height is only 22 CSS pixels. The target height combined with the vertical spacing above and below exceeds 44 CSS pixels, therefore, the targets pass this Success Criterion.</figcaption>
-        </figure>
-      
-        <figure id="pointer-target-44-20-nospace">
-            <img src="img/pointer-target-example4.png" alt="A row of icons which are 44px wide and 20px high, with other targets above and below with only 2px spacing." />   
-            <figcaption><strong>Fail:</strong> Two rows of buttons, all with a height of only 20 CSS pixels. In the top row, buttons all have a width of more than 44 CSS pixels. For the top row, targets above and below are in close proximity. The top spacing of the first row is 4 px while the bottom spacing is 2 px, which adds up to 26 px for target height and vertical spacing combined. Therefore, the buttons in the top row fail the Success Criterion. The button "Pop" in the second row is only 32px wide with no horizontal spacing, so it also fails the Success Criterion even when there is sufficient space below to meet the vertical spacing requirement.</figcaption>
-        </figure>
-
-        <p>Where targets are embedded inside other targets, the inner target either needs a size of at least 44 x 44 CSS pixels or must be placed at the edge or corner to make sure that there is sufficient adjacent spacing in each dimension.</p>
-
-        <figure id="pointer=target-embedded">
-            <img src="img/pointer-target-example5.png" alt="Three examples of a target adjacent to another target (see legend below)" />
-            <figcaption>Three examples of a person's profile image, which is supposed to be a target leading to another page, and a magnifying glass icon, which is supposed to open a lightbox view of the profile image. In the first example, the magnifying icon is outside the picture and passes. In the second example, the icon overlaps with the top-left corner of the image, but passes due to sufficient spacing top and left. In the third example, the icon sits inside the linked image. Since it is surrounded by an active click area, the icon target is not large enough to pass the success criterion.</figcaption>
-        </figure>
-      
-        <p>Users with different disabilities have different needs for control sizes. It can be beneficial to provide an option to increase the active target area without increasing the visible target size. Another option is to provide a mechanism to control the density of layout and thereby change target size or spacing, or both. This can be beneficial for a wide range of users. For example, users with visual field loss may prefer a more condensed layout with smaller sized controls while users with other forms of low vision may prefer large controls.</p>
-      
-      <p>Where user-agents control the size of a target, such as the options in a <code>select</code> drop-down, and the author has not tried to change the size of target with size or padding adjustments, the target is exempted from this criterion. It would be beneficial for users if the minimum size &amp; spacing requirement is met, but where the user-agent has defined the target it is not the authors responsibility.</p>
-        
-        
-    </section>
-    <section id="benefits">
-      <h2>Benefits of Pointer Target Spacing</h2>
-      <p>Having targets with sufficient target spacing can help all users who may have difficulty in confidently targeting or operating small controls. Users who benefit include, but are not limited to:</p>
-      <ul>
-        <li>Users who use a mobile device where the touch screen is the primary mode of interaction;</li>
-        <li>Users with mobility impairments such as hand tremors;</li>
-       <li>Users who use a device in environments where they are exposed to shaking such as public transportation;</li>
-       <li>Users who have difficulty with fine motor movements;</li>
-       <li>Users who access a device using one hand;</li>
-       <li>Users with large fingers, or who are operating the device with only a part of their finger or knuckle.</li>
-     </ul>
-      
-   </section>
-   
-   <section id="examples">
-        <h2>Examples of Pointer Target Spacing</h2>
-
-        <ul>
-            <li>Three buttons are on-screen and the target area of each button is 44 by 44 CSS pixels. Since the target size itself is 44 x 44 px, no additional spacing is required, the Success Criterion passes.</li>
-            <li>A row of buttons, each of which has a horizontal width of more than 44 px, but a height of only 30 px. Since there is sufficient spacing above and below the row of buttons, the Success Criterion passes.</li>
-            <li>Links within a paragraph of text have varying target dimensions. Links within paragraphs of text do not need to meet the 44 by 44 CSS pixels requirements, so the Success Criterion passes.</li>
-        </ul>
-   </section>
-
-   
-   <section id="techniques">
-      <h2>Techniques for Pointer Target Spacing</h2>
-      
-      
-      <section id="sufficient">
-         <h3>Sufficient Techniques for Pointer Target Spacing</h3>
-         
-         
-         <ol>
-            <li>
-                <a href="../../techniques/css/C42" class="css">Using min-height and min-width to ensure sufficient target spacing</a>
-            </li>
-         </ol>
-         
-      </section>
-      
-      <section id="advisory">
-         <h3>Additional Techniques (Advisory) for Pointer Target Spacing</h3>
-         
-      </section>
-      
-      <section id="failure">
-         <h3>Failures for Pointer Target Spacing</h3>
-
-      </section>
-      
-   </section>
-   <section id="resources">
-        <h2>Resources</h2>
-
-
-    </section>
-   
-</body>
-</html>
diff --git a/understanding/22/redundant-entry.html b/understanding/22/redundant-entry.html
index 40502ec485..4ef19cd3fd 100644
--- a/understanding/22/redundant-entry.html
+++ b/understanding/22/redundant-entry.html
@@ -3,42 +3,56 @@
 <head>
    <meta charset="UTF-8"></meta>
    <title>Understanding Redundant Entry</title>
-   <link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"></link>
+   <link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
 </head>
 <body>
-   <h1>Understanding Redundant Entry</h1>
-   
-   <section class="remove">
-   
-        <h2>Redundant Entry Success Criteria text</h2>
-        <blockquote>
-            <p>For steps in a <a>process</a>, information previously entered by or provided to the user that is required on subsequent steps is either:</p>
-            <ul>
-                <li>auto-populated, or</li>
-                <li>available for the user to select.</li>
-            </ul>
-            <p>Exception: When re-entering the information is essential.</p>
-            <p class="note">Security verification, such as repeating a password, is considered essential.</p>
-        </blockquote>
-     </section>
-   
-    <section id="intent">
-        <h2>Intent of Redundant Entry</h2>
+    <h1>Understanding Redundant Entry</h1>
 
+    <section id="brief">
+        <h2>In brief</h2>
+        <dl>
+            <dt>Goal</dt><dd>Make it easier for users to complete multi-step processes.</dd>
+            <dt>What to do</dt><dd>Don't ask for the same information twice in the same session.</dd>
+            <dt>Why it's important</dt><dd>Some people with cognitive disabilities have difficulty remembering what they entered before.</dd>
+        </dl>
+    </section>
 
-        <p>The intent of this Success Criterion is to ensure that users can successfully navigate multi-step processes. It reduces cognitive effort where  information is asked for more than once during steps in a process. It also reduces the need to recall information provided in a previous  step.</p>
+    <section id="intent">
 
-        <p>This Success Criterion pertains to the current user session, and is not applicable when a user returns after closing a session or navigating away.</p>
+      <h2>Intent of Redundant Entry</h2>
+
+        <p>The intent of this Success Criterion is to ensure that users can successfully complete multi-step processes. It reduces cognitive effort where information is asked for more than once during a process. It also reduces the need to recall information provided in a previous step.</p>
         
-        <p>Information that is required to be remembered for input can pose a significant barrier to users with cognitive or memory difficulty. All users experience a natural gradual mental fatigue as they proceed through steps in a process. This fatigue is accelerated by the stress of recalling information from short-term working memory. Users with learning, and cognitive disabilities are highly susceptible to mental fatigue.</p>
+        <p>Information that is required to be remembered for input can pose a significant barrier to users with cognitive or memory difficulties. All users experience a natural gradual mental fatigue as they proceed through steps in a process. This fatigue is accelerated by the stress of recalling information from short-term working memory. Users with learning, and cognitive disabilities are highly susceptible to mental fatigue.</p>
         
-        <p>Requiring people to recall information already entered in the previous steps can cause them to give up or enter incorrect information. The autocomplete feature of browsers is not considered sufficient because it is the content (the web site) that needs to provide the stored information for a redundant entry, or avoid asking for the same information again.</p>
+        <p>Requiring people to recall information previously entered can cause them to give up or re-enter the same information incorrectly. The autocomplete feature of browsers is not considered sufficient because it is the content (the web site) that needs to provide the stored information for a redundant entry, or avoid asking for the same information again.</p>
         
-        <p>This Success Criterion does not add a requirement to remember information between sessions, a <a>process</a> is defined on the basis of an activity and does not continue across sessions.</p>
+        <p>This Success Criterion does not add a requirement to store information between sessions. A <a>process</a> is defined on the basis of an activity and is not applicable when a user returns after closing a session or navigating away. However, a process can run across different domains, so if a check-out process includes a 3rd party payment provider, that would be in scope.</p>
+
+        <p>The term "available to select" is not prescriptive. The term allows authors to develop techniques where auto-population is not possible. It can include allowing the user to:</p>
+
+        <ul>
+            <li>select and populate a field, including from a drop-down;</li>
+            <li>select text from the page and copy it into an input;</li>
+            <li>tick a checkbox to populate inputs with the same values as previously entered (e.g., my billing address is the same as my shipping address).</li>
+        </ul>
+
+        <p>Data which is "available to select" would need to be on the same page. Ideally, it would be visible by default and closely associated with the input where the data is required. However, it could be elsewhere on a page, including within a show/hide component.</p>
+
+        <p>This Success Criterion does not apply if data is provided by the user with a different method, such as uploading a resume in a document format.</p>
 
-        <p>This success criterion does not apply if data is provide by the user with a different method, such as uploading a resume in a document format.</p>
+        <p>This Success Criterion does not impact <a href="accessible-authentication-minimum.html">Accessible Authentication (Minimum)</a>, for which allowing auto-filling of passwords is a sufficient technique. In that case the filling is performed by the user's browser. Redundant Entry is asking for the website content to make the previous entry available, but not between sessions or for essential purposes such as asking for a password.</p>
+
+        <p>This criterion does not include requirements or exceptions specific to privacy or personally identifiable information (PII), but when implementing techniques such as auto-population, authors should ensure data protection when storing information even temporarily during a process. It is possible to eliminate redundant entry in ways that do not introduce additional privacy risks, but it is also possible that a poor implementation (for meeting this criterion) could leak additional PII.</p>
+
+        <h3>Exceptions</h3>
         
-        <p>There is an exception for essential uses of input re-entry for things like password entry (security), or memory games which would not be possible if the previous answers were supplied.</p>
+        <p>There are exceptions for:</p>
+        <ul>
+           <li>Essential uses of input re-entry for things like memory games which would be invalidated if the previous answers were supplied.</li>
+           <li>Security measures such as preventing a password string from being shown or copied. When creating a password, it should be a unique and complex string and therefore cannot be validated by the author. If the system requires the user to manually create a password that is not displayed, having users re-validate their new string is allowed as an exception.</li>
+           <li>When the previously entered information is no longer valid, it can be requested that the user enter that information again.</li>
+         </ul>
 
     </section>
     <section id="benefits">
@@ -46,7 +60,7 @@ <h2>Benefits of Redundant Entry</h2>
       
       <ul>
          <li>Users with cognitive disabilities experience short-term, working memory difficulty. Not having to repeatedly remember particular information reduces stress and the likelihood of mistakes.</li>
-         <li>Users that experience difficulty forming new memories, recalling information, and other functions related to cognition can complete processes without having to unnecessarily rely on their memory.</li>
+         <li>Users who experience difficulty forming new memories, recalling information, and other functions related to cognition can complete processes without having to unnecessarily rely on their memory.</li>
          <li>Users with mobility impairments, for example using switch control or voice input, benefit from a reduced need for text entry.</li>
       </ul>
       
@@ -57,23 +71,23 @@ <h2>Examples of Redundant Entry</h2>
 
       <ul>
          <li>A form requests the user’s corporate identification number (ID) in the first step of a process to purchase a new computer. In the 3rd step the user is asked to confirm that the computer will belong to the user (rather than a colleague), and re-shows the ID. It allows the user to change the ID, but defaults to the previously entered one.</li>
-         <li>A form on an e-commerce website allows the user to confirm that the billing address and delivery address are the same address.</li>        
+         <li>A form on an e-commerce website allows the user to confirm that the billing address and delivery address are the same address.</li>
+         <li>A search results page pre-fills the search input with the previously entered search term in the same process.</li>        
       </ul>
       
    </section>
-
    
    <section id="techniques">
+     
       <h2>Techniques for Redundant Entry</h2>
       
-      
       <section id="sufficient">
+        
          <h3>Sufficient Techniques for Redundant Entry</h3>
          
-         
          <ul>
             <li><a href="../../techniques/general/G221">"Provide data from a previous step in a process</a></li>
-            <li>@@@ Not requesting the same information twice in multiple steps.</li>
+            <li>Not requesting the same information twice (Potential future technique)</li>
          </ul>
          
       </section>
@@ -89,6 +103,16 @@ <h3>Failures for Redundant Entry</h3>
       </section>
       
    </section>
+
+         <section id="resources">
+        <h2>Resources</h2>
+
+        <ul>
+            <li><a href="https://www.w3.org/TR/coga-gap-analysis/#table3">Cognitive Accessibility Gap Analysis Topic 3: Entering Data, Error Prevention, &amp; Recovery</a></li>
+            <li><a href="https://www.w3.org/TR/coga-usable/#design-forms-to-prevent-mistakes-pattern">Making Content Usable for People with Cogntive and Learning Disabilities 4.5.4 Design Forms to Prevent Mistakes</a></li>
+        </ul>
+
+    </section>
    
 </body>
 </html>
diff --git a/understanding/22/target-size-minimum.html b/understanding/22/target-size-minimum.html
new file mode 100644
index 0000000000..70048d3c36
--- /dev/null
+++ b/understanding/22/target-size-minimum.html
@@ -0,0 +1,199 @@
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+<head>
+    <meta charset="UTF-8"/>
+    <title>Understanding Target Size (Minimum)</title>
+    <link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/>
+</head>
+<body>
+    <h1>Understanding Target Size (Minimum)</h1>
+
+    <section id="brief">
+        <h2>In brief</h2>
+        <dl>
+            <dt>Goal</dt><dd>Make controls easier to activate.</dd>
+            <dt>What to do</dt><dd>Ensure targets meet a minimum size or have sufficient spacing around them.</dd>
+            <dt>Why it's important</dt><dd>Some people with physical impairments cannot click small buttons that are close together.</dd>
+        </dl>
+    </section>
+    
+    <section id="intent">
+        <h2>Intent of Target Size (Minimum)</h2>
+
+        <p>The intent of this Success Criterion is to help ensure targets can be easily activated without accidentally activating an adjacent target.  Users with dexterity limitations and those who have difficulty with fine motor movement find it difficult to accurately activate small targets when there are other targets that are too close.  Providing sufficient size, or sufficient spacing between targets, will reduce the likelihood of accidentally activating the wrong control.</p>
+        <p>Disabilities addressed by this requirement include hand tremors, spasticity, and quadriplegia.  Some people with disabilities use specialized input devices instead of a computer mouse or trackpad.  Typically these types of input device do not provide as much accuracy as mainstream pointing devices.  Meeting this requirement also ensures that touchscreen interfaces are easier to use.</p>
+        <p class="note">This Success Criterion defines a <em>minimum size</em> and, if this can't be met, a <em>minimum spacing</em>. It is still possible to have very small, and difficult to activate, targets and meet the requirements of this Success Criterion, provided that the targets don't have any adjacent targets that are too close. However, using larger target sizes will help many people use targets more easily. <em>As a best practice</em> it is recommended to at least meet the <em>minimum size</em> requirement of the Success Criterion, regardless of spacing. For important links/controls, consider aiming for the stricter <a href="target-size-enhanced.html">2.5.5 Target Size (Enhanced)</a>.</p>
+
+        <section id="exceptions">
+            <h3>Exceptions</h3>
+            <p>The requirement is for targets to be at least 24 by 24 CSS pixels in size. There are five exceptions:</p>
+
+            <ul>
+                <li><strong>Spacing:</strong> Undersized targets (those less than 24 by 24 CSS pixels) are positioned so that if a 24 CSS pixel diameter circle is centered on the <a>bounding box</a> of each, the circles do not intersect another target or the circle for another undersized target.</li>
+                <li><strong>Equivalent:</strong> In cases where a target does not have a size equivalent to 24 by 24 CSS pixels, but there is another control that can achieve the underlying function that <em>does</em> meet the requirements of this success criterion, the target can be excepted based on the "Equivalent" exception.</li>
+                <li><strong>Inline:</strong> The success criterion does not apply to inline targets in sentences, or where the size of the target is constrained by the line-height of non-target text. This exception is allowed because text reflow based on viewport size makes it impossible for authors to anticipate where links may be positioned relative to one another. Applying this success criterion when multiple links are embedded in blocks of smaller text often results in an undesirable design. It is more important to set the line height to a value that improves readability.</li>
+                <li><strong>User agent control:</strong> Browsers have default renderings of some controls, such as the days of the month calendar in an <code>&lt;input type="date"&gt;</code>. As long as the author has not modified the user agent default, the target size for a <q>User agent control</q> is excepted.</li>
+                <li><strong>Essential:</strong> If the size and spacing of the targets is fundamental to the information being conveyed, the <q>Essential</q> exception applies. For example, in digital maps, the position of pins is analogous to the position of places shown on the map. If there are many pins close together, the spacing between pins and neighboring pins will often be below 24 CSS pixels. It is essential to show the pins at the correct map location, therefore the Essential exception applies. A similar example is an interactive data visualization where targets are necessarily dense. Another example is where jurisdictions legally require online forms to replicate paper forms, which can impose constraints on the size of targets. In such jurisdictions, any legal requirement to replicate small targets can be considered essential. When the "Essential" exception is applicable, authors are strongly encouraged to provide equivalent functionality through alternative means to the extent practical.</li>
+            </ul>
+        </section>
+
+        <section id="size-requirement">
+            <h3>Size requirement</h3>
+
+            <p>For a target to be "at least 24 by 24 CSS pixels", it must be possible to draw a solid 24 by 24 CSS pixel square, aligned to the horizontal and vertical axis such that the square is completely within the target (does not extend outside the target's area).</p>
+
+            <figure id="target-size-basic">
+                <img src="img/target-size-basic.svg" width="180" height="75" alt="Three square boxes next to each other, each with a height and width of 24px"/>
+                <figcaption>Where targets are a 24 by 24px square (and larger is better), they meet the size requirement of the criterion and pass (image shown to scale - <a href="img/target-size-basic.svg">see the scalable original version</a>)</figcaption>
+            </figure>
+
+            <p>The 24 by 24px square has to be aligned with the page, although the target itself could be skewed.</p>
+
+            <figure id="target-size-skewed">
+                <img src="img/target-size-skewed.svg" width="130" height="120" alt="A skewed rectangle that includes a 24 by 24px square within it."/>
+                <figcaption>So long as there is a solid 24 by 24px square within the target, it meets the size requirement of the criterion and passes (image shown to scale - <a href="img/target-size-skewed.svg">see the scalable original version</a>)</figcaption>
+            </figure>
+
+            <p>If a target is not large enough to allow for a 24 by 24px square to be drawn inside it, it is considered <em>undersized</em>, and does not pass the size requirement of the Success Criterion. However, if it has sufficient space around it without adjacent targets, it may still pass the criterion thanks to the spacing exception (below).</p>
+
+            <figure id="target-size-undersized-rounded">
+                <img src="img/target-size-undersized-rounded.svg" width="250" height="105" alt="A circle with a diameter of 24px, but not filling up a 24px square."/>
+                <figcaption>The rounded corners do not leave sufficient space to draw a 24 by 24px square inside the target, making the target <em>undersized</em>. Depending on the spacing to other targets, it may still pass if it has sufficient clearance (image shown at 1:1 and 2:1 scale - <a href="img/target-size-undersized-rounded.svg">see the scalable original version</a>)</figcaption>
+            </figure>
+
+            <p>The requirement is independent of the zoom factor of the page; when users zoom in, the CSS pixel size of elements does not change. This means that authors cannot meet it by claiming that the target will have enough spacing or sufficient size if the user zooms into the page.</p>
+        
+            <p>The requirement does not apply to targets while they are obscured by content displayed as a result of a user interaction or scripted behavior of content, for example:</p>
+
+            <ul>
+                <li>interacting with a combobox shows a dropdown list of suggestions</li>
+                <li>activating a button displays a modal dialog</li>
+                <li>content displays a cookie banner after page load</li>
+                <li>content displays a "Take a survey" dialog after some period of user inactivity</li>
+            </ul>    
+            <p>The requirement does however apply to targets in any new content that appears on top of other content.</p>
+
+            <p>While the Success Criterion primarily helps touch users by providing target sizing to prevent accidental triggering of adjacent targets, it is also useful for mouse or pen users. It reduces the chances of erroneous activation due to either a tremor or reduced precision, whether because of reduced fine motor control or input imprecision.</p>
+
+        </section>
+        <section id="spacing">
+            <h3>Spacing</h3>
+
+            <p>When the minimum size for a target is not met, spacing can at least improve the user experience. There is less chance of accidentally activating a neighboring target if a target is not immediately adjacent to another. Touchscreen devices and user agents generally have internal heuristics to identify which link or control is closest to a user's touch interaction - this means that sufficient spacing between targets can work as effectively as a larger target size itself.</p>
+
+            <p>When a target is smaller than 24 by 24 CSS pixels, it is <em>undersized</em>. In this case, we check if it at least has sufficient <em>spacing</em> by drawing a 24 CSS pixel diameter circle over the undersized target, centered on the target's <a>bounding box</a>. For rectangular targets, the bounding box coincides with the target itself – thus, the circle is placed on the center of the target. If the target is <em>not</em> rectangular – for instance, if the target is clipped, has rounded corners, or if it's a more complex clickable SVG shape – we need to first determine the bounding box, and then find the box's center. Note that for concave shapes, the center of the bounding box may be outside of the target itself. Now, we center the circle on the center of the bounding box.</p>
+
+            <figure id="target-size-bounding-boxes">
+                <img src="img/target-size-bounding-boxes.svg" width="395" height="100" alt="Three undersized targets - a square target, a convex target, and a concave target; the concave and convex targets have a bounding box around them; all three targets have a 24 CSS pixel circle centered on the center of their bounding box"/>
+                <figcaption>For a square/rectangular target, the 24 CSS pixel diameter circle is centered on the target itself. For convex and concave targets, it is centered on the bounding box of the shape. Note the concave target, where in this case the center of the bounding box is outside of the actual target (image shown to scale - <a href="img/target-size-bounding-boxes.svg">see the scalable original version</a>)</figcaption>
+            </figure>
+
+            <p>We repeat this process for all adjacent undersized targets. To determine if an undersized target has sufficient spacing (to pass this Success Criterion's spacing exception), we check that the 24 CSS pixel diameter circle of the target does not intersect another target or the circle of any other adjacent undersized targets.</p>
+
+            <p>The following example shows three versions of a horizontal row of six icon-based buttons:</p>
+            <ul>
+                <li>In the top row, the dimensions of each target are 24 by 24 CSS pixels, passing this Success Criterion.</li>
+                <li>In the second row, the same targets are only 20 by 20 CSS pixels, but have a 4 CSS pixel space between them – as the target size is below 24 by 24 CSS pixels, these need to be evaluated against the Success Criterion's spacing exception, and they pass.</li>
+                <li>In the last row, the targets are again 20 by 20 CSS pixels, but have no space between them – these fail the spacing exception. This is because, when drawing the 24 CSS pixel diameter circles over the targets, the circles intersect.</li>
+            </ul>
+
+            <figure id="target-spacing-toolbar">
+                <img src="img/target-spacing-toolbar.svg" width="560" height="265" alt="The first toolbar's targets have a dimension of 24 by 24 CSS pixels, so pass. The second toolbar, with smaller targets, shows 24 CSS pixel circles drawn on each target for assessment. The circles do not intersect and so the targets have enough space to pass. The third toolbar shows similar circles on the targets, but the circles intersect due to the lack of spacing between targets, so the toolbar fails."/>
+                <figcaption>Three rows of targets, illustrating two ways of meeting this Success Criterion and one way of failing it (image shown to scale - <a href="img/target-spacing-toolbar.svg">see the scalable original version</a>)</figcaption>
+            </figure>
+            <p>The next two illustrations show sets of buttons which are only 16 CSS pixels tall. In the first set, there are no targets immediately above or below the buttons, so they pass. In the second illustration, there are further buttons, and they have been stacked on top of one another, resulting in a fail.</p>
+            <figure id="target-text-buttons-one-row">
+                <img src="img/target-text-buttons-single-row.svg" width="785" height="105" alt="A row of buttons which are more than 44px wide and 16 CSS pixels high. There are no close targets above or below. The buttons are overlaid with the 24 CSS pixel diameter circles, and do not intersect each other nor any other targets."/>
+                <figcaption>While the height of the targets is only 16 CSS pixels, the lack of adjacent targets above and below means that the targets pass this Success Criterion (image shown to scale - <a href="img/target-text-buttons-single-row.svg">see the scalable original version</a>)</figcaption>
+            </figure>
+
+            <figure id="target-text-buttons-two-rows">
+                <img src="img/target-text-buttons-two-rows.svg" width="785" height="105" alt="Two rows of buttons only 16 CSS pixels high, with no spacing between them. The buttons are overlaid with the 24 CSS pixel diameter circles, and all the circles either overlap another circle, or another target." />
+                <figcaption>Two rows of buttons, both with a height of only 16 CSS pixels. The rows are close, with only a 1 CSS pixel gap between them. This means that the 24 CSS pixel spacing circles of the targets in one row will <em>intersect</em> the targets (and their circles, depending on their respective widths) in the other line, thus failing the Success Criterion. Image shown to scale - <a href="img/target-text-buttons-two-rows.svg">see the scalable original version</a>.</figcaption>
+            </figure>
+            <p>The following two illustrations show how menu items can be adjusted to properly meet this requirement. In the first illustration, the <q>About us</q> menu has been activated, showing that each of the menu item targets has a 24 CSS pixel height (text and padding), and so passes. In the second illustration, the same menu is expanded, but the menu items only achieve 18 CSS pixels in height, and so fail.</p>
+            <figure id="target-dropdown">
+                <img src="img/target-dropdown.svg" width="690" height="210" alt="Two examples of a dropdown menu - a pass example with menu items 24 CSS pixels high, and a fail example with menu items only 18 CSS pixels high. One item has a 24 CSS pixel diameter circle which intersects adjacent targets."/>
+                <figcaption>The menu items with a height of 24 CSS pixels pass. For the menu items that are only 18 CSS pixels high, the 24 CSS pixel spacing circles of the targets in one row will intersect the adjacent menu item targets and circles, and fail (image shown to scale - <a href="img/target-dropdown.svg">see the scalable original version</a>)</figcaption>
+            </figure>
+
+            <p>The following example has one large target (an image that links to a new page related to that image) and a very small second target (a control with a magnifier icon to open a zoomed-in preview, possibly in a modal, of the image).</p>
+            <p>In the top row, the small target overlaps - or, to be more technically accurate, <em>clips</em> - the large target. The small target itself has a size of 24 by 24 CSS pixels, so passes. In the second row, we see that if the second target is any smaller – in this case 16 by 16 CSS pixels – it fails the criterion, as the circle with a 24 CSS pixel diameter we draw over the small target will intersect the large target itself.</p>
+
+            <figure id="target-large-small-clipping">
+                <img src="img/target-large-small-clipping.svg" width="460" height="320" alt="Two rows showing a small target clipping a large target"/>
+                <figcaption>The 24 by 24 CSS pixel small target passes, while the 16 by 16 CSS pixel small target fails, since the 24 CSS pixel diameter circle used for undersized targets intersect the large target (image shown to scale - <a href="img/target-large-small-clipping.svg">see the scalable original version</a>)</figcaption>
+            </figure>
+
+            <p>In the following example, we have the same two targets – a large target and a small target. This time, the small target touches/abuts the large target. If the small target is smaller than 24 by 24 CSS pixels, the circle with a 24 CSS pixel diameter we draw over the small target will intersect the large target itself, failing the requirement. The undersized target must be spaced further away from the large target until its circle doesn't intersect the large target.</p>
+
+            <figure id="target-large-small-touching">
+                <img src="img/target-large-small-touching.svg" width="460" height="320" alt="Two rows showing a small target and a large target touching/abutting"/>
+                <figcaption>In the first row, the 16 by 16 CSS pixel target touching/abutting the large target fails, as its 24 CSS pixel diameter circle used for undersized targets intersects the large target. In the second row we see that the only way the undersized target can pass is by adding a 4 CSS pixel spacing gap between the targets (image shown to scale - <a href="img/target-large-small-touching.svg">see the scalable original version</a>)</figcaption>
+            </figure>
+
+            <p class="note">Users with different disabilities have different needs for control sizes. It can be beneficial to provide an option to increase the active target area without increasing the visible target size. Another option is to provide a mechanism to control the density of layout and thereby change target size or spacing, or both. This can be beneficial for a wide range of users. For example, users with visual field loss may prefer a more condensed layout with smaller sized controls while users with other forms of low vision may prefer large controls.</p>
+        </section>
+    </section>
+
+    <section id="benefits">
+        <h2>Benefits of Target Size (Minimum)</h2>
+        <p>Having targets with sufficient size - or at least sufficient target spacing - can help all users who may have difficulty in confidently targeting or operating small controls. Users who benefit include, but are not limited to:</p>
+        <ul>
+            <li>People who use a mobile device where the touch screen is the primary mode of interaction;</li>
+            <li>People using mouse, stylus or touch input who have mobility impairments such as hand tremors;</li>
+            <li>People using a device in environments where they are exposed to shaking such as public transportation;</li>
+            <li>Mouse users who have difficulty with fine motor movements;</li>
+            <li>People who access a device using one hand;</li>
+            <li>People with large fingers, or who are operating the device with only a part of their finger or knuckle.</li>
+        </ul>
+
+    </section>
+
+    <section id="examples">
+        <h2>Examples of Target Size (Minimum)</h2>
+
+        <ul>
+            <li>Three buttons are on-screen and the target size of each button is 24 by 24 CSS pixels. Since the target size itself is 24 by 24 CSS pixels, no additional spacing is required, the Success Criterion passes.</li>
+            <li>A row of buttons, each of which has a horizontal width of more than 24 CSS pixels, a height of only 20 CSS pixels, and vertical margin of 4 CSS pixels above and below the row of buttons. Since there is sufficient spacing both above and below the row of buttons, the Success Criterion passes.</li>
+            <li>Links within a paragraph of text have varying target dimensions. Links within paragraphs of text do not need to meet the 24 by 24 CSS pixels requirements, so the Success Criterion passes.</li>
+        </ul>
+    </section>
+
+    <section id="resources">
+
+        <h2>Resources</h2>
+        <ul>
+            <li><a href="https://dl.acm.org/doi/10.1145/1152215.1152260">Target size study for one-handed thumb use on small touchscreen devices</a></li>
+        </ul>
+    </section>
+
+    <section id="techniques">
+        <h2>Techniques for Target Size (Minimum)</h2>
+
+
+        <section id="sufficient">
+            <h3>Sufficient Techniques for Target Size (Minimum)</h3>
+
+            <ul>
+                <li>
+                    <a href="../../techniques/css/C42" class="css">Using min-height and min-width to ensure sufficient target spacing</a>
+                </li>
+            </ul>
+
+        </section>
+
+        <section id="advisory">
+            <h3>Additional Techniques (Advisory) for Target Size (Minimum)</h3>
+
+        </section>
+
+        <section id="failure">
+            <h3>Failures for Target Size (Minimum)</h3>
+
+        </section>
+
+    </section>
+
+</body>
+</html>
diff --git a/understanding/about.html b/understanding/about.html
new file mode 100644
index 0000000000..2da202d0c8
--- /dev/null
+++ b/understanding/about.html
@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
+
+<head>
+    <meta charset="UTF-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1"/>
+    <title>About WCAG Understanding Documents | WAI | W3C</title>
+    <link rel="stylesheet" href="https://w3.org/WAI/assets/css/style.css"/>
+    <link rel="stylesheet" href="base.css"/>
+</head>
+
+<body dir="ltr">
+
+	<div class="default-grid with-gap leftcol">
+		<aside class="box nav-hack sidebar standalone-resource__sidebar ">
+			<nav>
+				<header class="box-h ">Page Contents</header>
+				<div class="box-i">
+					<ul>
+            <li><a href="#aboutwcag">About WCAG</a></li>
+            <li><a href="#introduction">About the Understand Documents</a></li>
+            <li><a href="#structure">Structure of the Documents</a></li>
+            <li><a href="#changelog">Change Log</a></li>
+            <li><a href="#acknowledgements">Acknowledgements</a></li>
+					</ul>
+				</div>
+			</nav>
+		</aside>
+		<main id="main" class="main-content standalone-resource__main">
+			<h1 id="title" class="title p-name">About WCAG Understanding Documents</h1>
+      <aside class="box">
+        <header class="box-h ">Summary</header>
+        <div class="box-i">
+          <p><em>Understanding documents</em> provide detailed  explanations for Web Content Accessibility Guidelines (WCAG) guidelines and success criteria. They are informative, not  part of the &quot;normative&quot; WCAG standard. To start learning about WCAG, see the <a href="https://www.w3.org/WAI/intro/wcag">WCAG Overview</a>.</p>
+        </div>
+      </aside>
+      <section id="aboutwcag">
+        <h2>About WCAG</h2>
+        <p>Web Content Accessibility Guidelines (WCAG) provides requirements for making websites, applications, and other digital content accessible to people with disabilities. For an introduction to WCAG, supporting technical documents, and educational material, see <a href="https://www.w3.org/WAI/standards-guidelines/wcag/">WCAG 2 Overview<!-- <svg focusable="false" aria-hidden="true" class="icon-different-view "><use xlink:href="/WAI/assets/images/icons.svg#icon-different-view"></use></svg> --></a>.</p>
+        <p>There are additional resources that help you understand and implement WCAG. These Understanding documents are one type of resource. Others are explained in the <a href="https://www.w3.org/WAI/standards-guidelines/wcag/docs/">WCAG 2 Documents<!-- <svg focusable="false" aria-hidden="true" class="icon-different-view "><use xlink:href="/WAI/assets/images/icons.svg#icon-different-view"></use></svg>--></a>.</p>
+      </section>
+      <section id="introduction">
+        <h2>About the Understanding Documents</h2>
+        <p>WCAG Understanding documents are guides to understanding and implementing WCAG.   They provide detailed  explanations for
+          each guideline and each success criterion to help readers better understand the intent
+          of the success criteria. They include  background information and  technical details. They include <em>techniques</em> that are examples of ways to meet the success criteria. Each technique is linked to more details in a techniques page. Techniques are explained in <a class="understanding" href="understanding-techniques">Understanding Techniques for WCAG Success Criteria</a>.</p>
+        <p>WCAG Understanding documents are not  introductory resources. They are  for people who want to understand WCAG more thoroughly. The <a href="https://www.w3.org/WAI/intro/wcag">WCAG Overview</a> provides introductory information.</p>
+
+        <section id="structure">
+          <h3>Structure of the Documents</h3>
+          <p><em>Understanding <strong>Guideline</strong> </em>pages include:</p>
+          <ul>
+            <li>The intent</li>
+            <li>Any advisory techniques that are related
+              to the guideline and not specifically related to any of its success criteria</li>
+          </ul>
+          <p><em>Understanding <strong>Success Criterion</strong></em> pages include:</p>
+          <ul>
+            <li> The success criterion wording from WCAG</li>
+            <li> Intent of the success criterion </li>
+            <li> Benefits, how  it helps people with disabilities</li>
+            <li> Examples </li>
+            <li> Related resources</li>
+            <li>Techniques
+              <ul>
+                <li> Sufficient techniques</li>
+                <li> Advisory techniques</li>
+                <li> Failures</li>
+              </ul>
+            </li>
+            <li> Key terms for this success criterion,  from the WCAG Glossary </li>
+          </ul>
+        </section>
+      </section>
+
+      <section id="changelog">
+        <details>
+          <summary><h2>Change Log</h2></summary>
+          <p>For a detailed view of recent changes to the informative documents see the <a href="https://github.com/w3c/wcag/commits/master">github updates</a>.</p>
+        </details>
+      </section>
+
+      <section id="acknowledgements">
+        <details>
+          <summary><h2>Acknowledgements</h2></summary>
+          <div data-include="../acknowledgements/ag-wg-active.html" data-include-replace="true"></div>
+          <div data-include="../acknowledgements/ag-contributors.html" data-include-replace="true"></div>
+          <div data-include="../acknowledgements/funders.html" data-include-replace="true"></div>
+        </details>
+      </section>
+
+    </main>
+		<a class="button button-backtotop" href="#top"><span><svg focusable="false" aria-hidden="true" class="icon-arrow-up " viewBox="0 0 26 28">
+			<path d="M25.172 15.172c0 0.531-0.219 1.031-0.578 1.406l-1.172 1.172c-0.375 0.375-0.891 0.594-1.422 0.594s-1.047-0.219-1.406-0.594l-4.594-4.578v11c0 1.125-0.938 1.828-2 1.828h-2c-1.062 0-2-0.703-2-1.828v-11l-4.594 4.578c-0.359 0.375-0.875 0.594-1.406 0.594s-1.047-0.219-1.406-0.594l-1.172-1.172c-0.375-0.375-0.594-0.875-0.594-1.406s0.219-1.047 0.594-1.422l10.172-10.172c0.359-0.375 0.875-0.578 1.406-0.578s1.047 0.203 1.422 0.578l10.172 10.172c0.359 0.375 0.578 0.891 0.578 1.422z"></path></svg> Back to Top
+		</span></a>
+	</div>
+	<script>
+  	var translationStrings = {}; /* fix WAI JS */
+	</script>
+	<script src="https://www.w3.org/WAI/assets/scripts/main.js"></script></body>
+
+</html>
diff --git a/understanding/conformance.html b/understanding/conformance.html
index 5c3ed693a7..8559cb484a 100644
--- a/understanding/conformance.html
+++ b/understanding/conformance.html
@@ -1,22 +1,22 @@
 <!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
 <head xmlns:wcag="https://www.w3.org/WAI/GL/">
-   <meta charset="UTF-8" />
+   <meta charset="UTF-8"/>
    <title>Understanding Conformance</title>
-   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link>
+   <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/>
 </head>
 <body xmlns:wcag="https://www.w3.org/WAI/GL/">
    <h1>Understanding Conformance</h1>
    
    
-   <p>All WCAG 2.0 Success Criteria are written as testable criteria for objectively determining
-      if content satisfies them. Testing the Success Criteria would involve a combination
+   <p>All WCAG 2 success criteria are written as testable criteria for objectively determining
+      if content satisfies them. Testing the success criteria would involve a combination
       of automated testing and human evaluation. The content should be tested by those who
       understand how people with different types of disabilities use the Web.
    </p>
    
    <p>Testing and testable in the context refer to functional testing, that is verifying
-      that the content functions as expected, or in this case, that it satisfies the Success
-      Criteria. Although content may satisfy all Success Criteria, the content may not always
+      that the content functions as expected, or in this case, that it satisfies the success criteria.
+      Although content may satisfy all success criteria, the content may not always
       be usable by people with a wide variety of disabilities. Therefore, usability testing
       is recommended, in addition to the required functional testing. Usability testing
       aims to determine how well people can use the content for its intended purpose. It
@@ -29,22 +29,21 @@ <h1>Understanding Conformance</h1>
       <h2>What does conformance mean?</h2>
       
       <p>Conformance to a standard means that you meet or satisfy the 'requirements' of the
-         standard. In WCAG 2.0 the 'requirements' are the Success Criteria. To conform to WCAG
-         2.0, you need to satisfy the Success Criteria, that is, there is no content which
-         violates the Success Criteria. 
+         standard. In WCAG 2 the 'requirements' are the success criteria. To conform to WCAG
+         2, you need to satisfy the success criteria, that is, there is no content which
+         violates the success criteria.
       </p>
       
       <div class="note">
          
-         <p>This means that if there is no content to which a success criterion applies, the success
-            criterion is satisfied.
+         <p>This means that if there is no content to which a success criterion applies, the success criterion is satisfied.
          </p>
          
       </div>
       
       <p>Most standards only have one level of conformance. In order to accommodate different
          situations that may require or allow greater levels of accessibility than others,
-         WCAG 2.0 has three levels of conformance, and therefore, three levels of Success Criteria.
+         WCAG 2 has three levels of conformance, and therefore, three levels of success criteria.
       </p>
       
    </section>
@@ -54,7 +53,7 @@ <h2>What does conformance mean?</h2>
       <h2>Understanding Conformance Requirements</h2>
       
       <p>There are five requirements that must be met in order for content to be classified
-         as 'conforming' to WCAG 2.0. This section provides brief notes on those requirements.
+         as 'conforming' to WCAG 2. This section provides brief notes on those requirements.
          This section will be expanded over time to address questions that may arise or to
          provide new examples of ways to meet the different conformance requirements.
       </p>
@@ -67,19 +66,19 @@ <h3>Understanding Requirement 1</h3>
          	<p><strong>Conformance Level</strong>: One of the following levels of conformance is met in full.</p>
          	<ul>
          		<li>For Level A conformance (the minimum level of conformance), the <a>Web page</a>
-         			<a>satisfies</a> all the Level A Success Criteria, or a <a>conforming alternate version</a> is provided.</li>
-         		<li>For Level AA conformance, the Web page satisfies all the Level A and Level AA Success Criteria, or a Level AA conforming alternate version is provided.</li>
-         		<li>For Level AAA conformance, the Web page satisfies all the Level A, Level AA and Level AAA Success Criteria, or a Level AAA conforming alternate version is provided.</li>
+         			<a>satisfies</a> all the Level A success criteria, or a <a>conforming alternate version</a> is provided.</li>
+         		<li>For Level AA conformance, the Web page satisfies all the Level A and Level AA success criteria, or a Level AA conforming alternate version is provided.</li>
+         		<li>For Level AAA conformance, the Web page satisfies all the Level A, Level AA and Level AAA success criteria, or a Level AAA conforming alternate version is provided.</li>
          	</ul>
          	<p class="note">Although conformance can only be achieved at the stated levels, authors are encouraged to report (in their claim) any progress toward meeting success criteria from all levels beyond the achieved level of conformance.</p>
-         	<p class="note">It is not recommended that Level AAA conformance be required as a general policy for entire sites because it is not possible to satisfy all Level AAA Success Criteria for some content.</p>
+         	<p class="note">It is not recommended that Level AAA conformance be required as a general policy for entire sites because it is not possible to satisfy all Level AAA success criteria for some content.</p>
          	
          </blockquote>
          
          <p>The first requirement deals with the levels of conformance. It basically says that
             all information on a page conforms or has a 
             <a>conforming alternate version</a> that is available from the page. The requirement also explains that no conformance
-            is possible without at least satisfying all of the Level A Success Criteria. 
+            is possible without at least satisfying all of the Level A success criteria. 
          </p>
          
          <p>The note points out that authors are encouraged to go beyond conformance to a particular
@@ -156,9 +155,9 @@ <h3>Understanding Requirement 3</h3>
          <h3>Understanding Requirement 4</h3>
          
       	<blockquote class="scquote" id="cc4">
-      		<p><strong>Only Accessibility-Supported Ways of Using Technologies</strong>: Only <a>accessibility-supported</a> ways of using <a>technologies</a> are <a>relied upon</a> to satisfy the success criteria. Any information or functionality that is provided in a way that is not accessibility supported is also available in a way that is accessibility supported. (See <a href="https://www.w3.org/WAI/WCAG21/Understanding/conformance#accessibility-support">Understanding accessibility support</a>.)</p></blockquote>
+      		<p><strong>Only Accessibility-Supported Ways of Using Technologies</strong>: Only <a>accessibility-supported</a> ways of using <a>technologies</a> are <a>relied upon</a> to satisfy the success criteria. Any information or functionality that is provided in a way that is not accessibility supported is also available in a way that is accessibility supported. (See <a href="#accessibility-support">Understanding accessibility support</a>.)</p></blockquote>
          
-         <p>This conformance requirement is explained below under 
+         <p>This conformance requirement is explained below under
             <a href="#accessibility-support">Understanding Accessibility Support</a>.
          </p>
          
@@ -201,7 +200,7 @@ <h3>Understanding Requirement 5</h3>
          
          <p>There are four provisions that particularly deal with issues of interference with
             use of the page. These four are included in a note here. A note on each of the provisions
-            indicates that these Success Criteria need to be met for all content including content
+            indicates that these success criteria need to be met for all content including content
             created using technologies that are not accessibility supported.
          </p>
          
@@ -236,7 +235,7 @@ <h2>Understanding Conformance Claims</h2>
 
      <p>Here is a claim which has been enhanced with schema.org metadata:</p>
 
-     <pre>
+     <pre xml:space="preserve">
 &lt;div typeof="WebPage" vocab="http://schema.org/">
     &lt;p property="accessibilitySummary">On 23 March 2009, all content available on
        the server at &lt;a 
@@ -316,11 +315,11 @@ <h3>Partial conformance claims due to third party content</h3>
       
       <section>
          
-         <h3>Information about any additional steps taken that go beyond the Success Criteria</h3>
+         <h3>Information about any additional steps taken that go beyond the success criteria</h3>
          
          <p>One of the optional components of a conformance claim is "Information about any additional
-            steps taken that go beyond the Success Criteria to enhance accessibility." This can
-            include additional Success Criteria that have been met, advisory techniques that were
+            steps taken that go beyond the success criteria to enhance accessibility." This can
+            include additional success criteria that have been met, advisory techniques that were
             implemented, information about any additional protocols used to aid access for people
             with particular disabilities or needs, etc. Any information that would be useful to
             people in understanding the accessibility of the pages may be included.
@@ -340,7 +339,7 @@ <h3>Use of metadata to report conformance claims</h3>
             and tool developers are encouraged to support them.
          </p>
          
-         <p>In addition, metadata can be used to report conformance to individual Success Criteria
+         <p>In addition, metadata can be used to report conformance to individual success criteria
             once Level A conformance has been achieved.
          </p>
          
@@ -425,7 +424,7 @@ <h4>Examples of Conformance Claims including optional components</h4>
                
                <ul>
                   
-                  <li>The following additional Success Criteria have also been met: 1.1.2, 1.2.5, and 1.4.3.
+                  <li>The following additional success criteria have also been met: 1.1.2, 1.2.5, and 1.4.3.
                      
                   </li>
                   
@@ -500,28 +499,28 @@ <h2>Techniques for Conformance Claims</h2>
          <section id="conformance-claims-sufficient">
          	<ul>
            <li>   
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/client-side-script/SCR38" class="script"></a>
+               <a href="../Techniques/client-side-script/SCR38" class="script"></a>
            </li>         
            <li>   
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/server-side-script/SVR2" class="script"></a>
+               <a href="../Techniques/server-side-script/SVR2" class="script"></a>
            </li>         
            <li>   
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/server-side-script/SVR3" class="script"></a>
+               <a href="../Techniques/server-side-script/SVR3" class="script"></a>
            </li>         
            <li>   
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/server-side-script/SVR4" class="script"></a>
+               <a href="../Techniques/server-side-script/SVR4" class="script"></a>
            </li>         
            <li>   
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/css/C29" class="css"></a>
+               <a href="../Techniques/css/C29" class="css"></a>
            </li>         
            <li>   
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/failures/F19" class="failure"></a>
+               <a href="../Techniques/failures/F19" class="failure"></a>
            </li>         
            <li>   
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G136" class="general"></a>
+               <a href="../Techniques/general/G136" class="general"></a>
            </li>         
            <li>   
-               <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G190" class="general"></a>
+               <a href="../Techniques/general/G190" class="general"></a>
            </li>         
            </ul>
          </section>
@@ -546,56 +545,56 @@ <h3>Advisory Techniques for Conformance Claims</h3>
       
       <h2>Understanding Levels of Conformance</h2>
       
-      <p>First, there are a number of conditions that must be met for a Success Criterion to
+      <p>First, there are a number of conditions that must be met for a success criterion to
          be included at all. These include:
       </p>
       
       <ol>
          
-         <li>All Success Criteria must be 
+         <li>All success criteria must be 
             <strong>important access issues for people with disabilities</strong> that address problems beyond the usability problems that might be faced by all users.
             In other words, the access issue must cause a proportionately greater problem for
             people with disabilities than it causes people without disabilities in order to be
             considered an accessibility issue (and covered under these accessibility guidelines).
          </li>
          
-         <li>All Success Criteria must also be testable. This is important since otherwise it would
-            not be possible to determine whether a page met or failed to meet the Success Criteria.
-            The Success Criteria can be tested by a combination of machine and human evaluation
-            as long as it is possible to determine whether a Success Criterion has been satisfied
+         <li>All success criteria must also be testable. This is important since otherwise it would
+            not be possible to determine whether a page met or failed to meet the success criteria.
+            The success criteria can be tested by a combination of machine and human evaluation
+            as long as it is possible to determine whether a success criterion has been satisfied
             with a high level of confidence.
          </li>
          
       </ol>
       
-      <p>The Success Criteria were assigned to one of the three levels of conformance by the
+      <p>The success criteria were assigned to one of the three levels of conformance by the
          working group after taking into consideration a wide range of interacting issues.
          Some of the common factors evaluated when setting the level included:
       </p>
       
       <ul>
          
-         <li>whether the Success Criterion is 
-            <strong>essential</strong> (in other words, if the Success Criterion isn't met, then even assistive technology
+         <li>whether the success criterion is 
+            <strong>essential</strong> (in other words, if the success criterion isn't met, then even assistive technology
             can't make content accessible)
          </li>
          
-         <li>whether it is possible to satisfy the Success Criterion for 
-            <strong>all Web sites and types of content</strong> that the Success Criteria would apply to (e.g., different topics, types of content,
+         <li>whether it is possible to satisfy the success criterion for 
+            <strong>all Web sites and types of content</strong> that the success criterion would apply to (e.g., different topics, types of content,
             types of Web technology)
          </li>
          
-         <li>whether the Success Criterion requires skills that could 
-            <strong>reasonably be achieved by the content creators</strong> (that is, the knowledge and skill to meet the Success Criteria could be acquired
+         <li>whether the success criterion requires skills that could 
+            <strong>reasonably be achieved by the content creators</strong> (that is, the knowledge and skill to meet the success criterion could be acquired
             in a week's training or less)
          </li>
          
-         <li>whether the Success Criterion would impose limits on the "look &amp; feel" and/or function
+         <li>whether the success criterion would impose limits on the "look &amp; feel" and/or function
             of the Web page. (limits on function, presentation, freedom of expression, design
-            or aesthetic that the Success Criteria might place on authors)
+            or aesthetic that the success criterion might place on authors)
          </li>
          
-         <li>whether there are no workarounds if the Success Criterion is not met</li>
+         <li>whether there are no workarounds if the success criterion is not met</li>
          
       </ul>
       
@@ -605,9 +604,9 @@ <h2>Understanding Levels of Conformance</h2>
       
       <h2>Understanding Accessibility Support</h2>
       
-      <p>Many of the Success Criteria deal with providing accessibility through assistive technologies
+      <p>Many of the success criteria deal with providing accessibility through assistive technologies
          or special accessibility features in mainstream user agents (for example, a 'show
-         captions' option in a media player). That is, the Success Criteria require that something
+         captions' option in a media player). That is, the success criteria require that something
          be done in the Web content that would make it possible for assistive technologies
          to successfully present the content's information to the user. For example, a picture
          that you were supposed to click on to go to a topic would not be accessible to a person
@@ -800,7 +799,7 @@ <h3>Understanding Accessibility-Supported Web Technology Uses</h3>
             accessibility-supported technology uses and this is allowed in meeting WCAG. Customers,
             companies or others may, however, specify that technology uses from a custom or public
             compilation be used. See 
-            <a href="#accessibility-support-documenting"></a>.
+            <a href="documenting-accessibility-support">Documenting Accessibility Support for Uses of a Web Technology</a>.
             
          </p>
          
@@ -851,7 +850,7 @@ <h3>Accessibility Support Statements</h3>
       
       <h2>Understanding "Programmatically Determined"</h2>
       
-      <p>Several Success Criteria require that content (or certain aspects of content) can
+      <p>Several success criteria require that content (or certain aspects of content) can
          be "programmatically determined." This means that the content is authored in such
          a way that user agents, including assistive technologies, can access the information.
       </p>
@@ -859,7 +858,7 @@ <h2>Understanding "Programmatically Determined"</h2>
       <p>In order for content created with Web technologies (such as HTML, CSS, PDF, GIF, MPEG, etc.) to be accessible to people with different types of disabilities, it is
          essential that the technologies used work with the accessibility features of browsers
          and other user agents, including assistive technologies. In order for something to
-         meet a Success Criterion that requires it to be "programmatically determined," it
+         meet a success criterion that requires it to be "programmatically determined," it
          would need to be implemented using a technology that has assistive technology support.
       </p>
       
@@ -929,7 +928,7 @@ <h2>Understanding Conforming Alternate Versions</h2>
          <h3>Why permit alternate versions?</h3>
          
          <p>Why does WCAG permit conforming alternate versions of Web pages to be included in
-            conformance claims? That is, why include pages that do not satisfy the Success Criteria
+            conformance claims? That is, why include pages that do not satisfy the success criteria
             for a conformance level in the scope of conformance or a claim?
          </p>
          
@@ -944,7 +943,7 @@ <h3>Why permit alternate versions?</h3>
                providing an accessible alternative page in technologies that are accessibility supported.
                Users for whom the new technology is adequately supported get the benefits of the
                new version. Authors who look ahead to future accessibility support can satisfy the
-               Success Criteria now with the alternate version page, and also work with the other
+               success criteria now with the alternate version page, and also work with the other
                page to build in future access when assistive technology (AT) support is available.
             </li>
             
@@ -979,7 +978,7 @@ <h3>Why permit alternate versions?</h3>
             <li>Sometimes, the best experience for users with certain types of disabilities is provided
                by tailoring a Web page specifically to accommodate that disability. In such a situation,
                it may not be possible or practical to make the Web page accommodate all disabilities
-               by satisfying all of the Success Criteria. The alternate versions requirement permits
+               by satisfying all of the success criteria. The alternate versions requirement permits
                such specialized pages to be included within a conformance claim as long as there
                is a fully conformant 'alternate version' page.
             </li>
@@ -998,10 +997,10 @@ <h3>Why permit alternate versions?</h3>
             
          </ul>
          
-         <p>A concern when permitting Web pages that do not satisfy the Success Criteria is that
+         <p>A concern when permitting Web pages that do not satisfy the success criteria is that
             people with disabilities will encounter these non-conforming pages, not be able to
             access their content, and not be able to find the “conforming alternate version."
-            A key part of the Alternate Versions provision, therefore, is the ability to find
+            A key part of the alternate versions provision, therefore, is the ability to find
             the conforming page (the alternate version) from the non-conforming page when it is
             encountered. The conformance requirement that permits alternate pages, therefore,
             also requires a way for users to find the accessible version among the alternate versions.
@@ -1040,7 +1039,7 @@ <h3>Techniques for Providing a Conforming Alternate Version</h3>
             <h4>Sufficient Techniques for Providing Conforming Alternative Versions of Web pages</h4>
             
             <p>Each numbered item in this section represents a technique or combination of techniques
-               that the WCAG Working Group deems sufficient for meeting this Success Criterion. However, it is
+               that the WCAG Working Group deems sufficient for meeting this success criterion. However, it is
                not necessary to use these particular techniques. For information on using other techniques,
                see 
                <a href="understanding-techniques"></a>, particularly the "Other Techniques" section.
@@ -1050,7 +1049,7 @@ <h4>Sufficient Techniques for Providing Conforming Alternative Versions of Web p
                
                <li>
                   										                    
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G136">Providing a link at the beginning of the nonconforming content that points to an alternate
+                  <a href="../Techniques/general/G136">Providing a link at the beginning of the nonconforming content that points to an alternate
                      version that does meet WCAG 2.0 Level A Success Criteria
                   </a>
                   									                  
@@ -1058,7 +1057,7 @@ <h4>Sufficient Techniques for Providing Conforming Alternative Versions of Web p
                
                <li>
                   										                    
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G190">Providing a link adjacent to or associated with a non-conforming object that links
+                  <a href="../Techniques/general/G190">Providing a link adjacent to or associated with a non-conforming object that links
                      to a conforming alternate version
                   </a>
                   									                  
@@ -1066,13 +1065,13 @@ <h4>Sufficient Techniques for Providing Conforming Alternative Versions of Web p
                
                <li>
                   										                    
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/css/C29">C29: Using a style switcher to provide a conforming alternate version</a>
+                  <a href="../Techniques/css/C29">C29: Using a style switcher to provide a conforming alternate version</a>
                   									                  
                </li>
                
                <li>
                   										                    
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/client-side-script/SCR38">SCR38: Creating a conforming alternate version for a web page designed with progressive
+                  <a href="../Techniques/client-side-script/SCR38">SCR38: Creating a conforming alternate version for a web page designed with progressive
                      enhancement
                   </a>
                   									                  
@@ -1080,7 +1079,7 @@ <h4>Sufficient Techniques for Providing Conforming Alternative Versions of Web p
                
                <li>
                   										                    
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/server-side-script/SVR2">Using .htaccess to ensure that the only way to access non-conforming content is from
+                  <a href="../Techniques/server-side-script/SVR2">Using .htaccess to ensure that the only way to access non-conforming content is from
                      conforming content
                   </a>
                   									                  
@@ -1088,7 +1087,7 @@ <h4>Sufficient Techniques for Providing Conforming Alternative Versions of Web p
                
                <li>
                   										                    
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/server-side-script/SVR3">SVR3: Using HTTP referer to ensure that the only way to access non-conforming content
+                  <a href="../Techniques/server-side-script/SVR3">SVR3: Using HTTP referer to ensure that the only way to access non-conforming content
                      is from conforming content
                   </a>
                   									                  
@@ -1096,7 +1095,7 @@ <h4>Sufficient Techniques for Providing Conforming Alternative Versions of Web p
                
                <li>
                   										                    
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/server-side-script/SVR4">Allowing users to provide preferences for the display of conforming alternate versions</a>
+                  <a href="../Techniques/server-side-script/SVR4">Allowing users to provide preferences for the display of conforming alternate versions</a>
                   									                  
                </li>
                
@@ -1111,7 +1110,7 @@ <h4>Common Failures Identified by the Working Group</h4>
                
                <li>
                   										                    
-                  <a href="https://www.w3.org/WAI/WCAG21/Techniques/failures/F19">F19: Failure of Conformance Requirement 1 due to not providing a method for the user
+                  <a href="../Techniques/failures/F19">F19: Failure of Conformance Requirement 1 due to not providing a method for the user
                      to find the alternative conforming version of a non-conforming Web page
                   </a>
                   									                  
@@ -1165,7 +1164,7 @@ <h4>Examples of Conforming Alternate Versions</h4>
                      site might limit their ability to address the needs of diverse office locations that
                      have different technology bases and individual employees who use a wide variety of
                      user agents and assistive technologies. To address these concerns, the company created
-                     an alternate version of the content that met all Level A Success Criteria using a
+                     an alternate version of the content that met all Level A success criteria using a
                      more limited set of uses of accessibility-supported content technologies. 
                      The two versions link to each other.
                      
diff --git a/understanding/documenting-accessibility-support.html b/understanding/documenting-accessibility-support.html
index 185fa6c654..d9b619e75e 100644
--- a/understanding/documenting-accessibility-support.html
+++ b/understanding/documenting-accessibility-support.html
@@ -1,11 +1,11 @@
 <!DOCTYPE html>
-<html xmlns="http://www.w3.org/1999/xhtml">
+<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
 	<head>
 		<title>Documenting Accessibility Support for Uses of a Web Technology</title>
 	</head>
 	<body>
 		<h1>Documenting Accessibility Support for Uses of a Web Technology</h1>
-		<p>The documentation of accessibility support for uses of a Web technology provides the information needed to determine whether it is possible to satisfy the WCAG 2.1 Success Criteria for a particular environment. </p>
+		<p>The documentation of accessibility support for uses of a Web technology provides the information needed to determine whether it is possible to satisfy the WCAG 2 success criteria for a particular environment. </p>
 		<p>Accessibility Support documentation for uses of a Web technology includes the following information: </p>
 		<ul>
 			<li>
@@ -21,7 +21,7 @@ <h1>Documenting Accessibility Support for Uses of a Web Technology</h1>
 						<p> Ways of using the technology that are supported by the user agent; ideally, there are ways to meet all of the success criteria, but exceptions should be noted. </p>
 					</li>
 					<li>
-						<p> Known limitations of the user agent support for uses of the technology to meet Success Criteria </p>
+						<p> Known limitations of the user agent support for uses of the technology to meet success criteria </p>
 					</li>
 				</ul>
 			</li>
diff --git a/understanding/index.html b/understanding/index.html
index fb66c69489..163d088a0f 100644
--- a/understanding/index.html
+++ b/understanding/index.html
@@ -4,115 +4,49 @@
 		<meta charset="UTF-8"/>
 		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
 			
-		<title>Understanding WCAG 2.2</title>
-		<link rel="stylesheet" type="text/css" href="https://www.w3.org/StyleSheets/TR/2016/base"/>
-		<link rel="stylesheet" type="text/css" href="understanding.css"/>
+		<title>Understanding WCAG 2.2 | WAI | W3C</title>
+		<link rel="stylesheet" href="https://w3.org/WAI/assets/css/style.css"/>
+		<link rel="stylesheet" type="text/css" href="base.css"/>
 	</head>
-	<body>
-		<div class="head">
-			<a href="https://www.w3.org/" class="logo">
-				<img alt="W3C" src="https://www.w3.org/StyleSheets/TR/2016/logos/W3C" width="72" height="48"/>
-			</a>
-			<h1 id="title" class="title p-name">Understanding WCAG 2.2</h1>
-			<h2>Updated <span class="generate-date"/></h2>
-			
-			<ul id="masthead">
-				<li><strong>Authors:</strong> <a href="https://www.w3.org/WAI/GL/">Accessibility Guidelines Working Group</a></li>
-				<li><strong>Editors:</strong> <a href="mailto:group-ag-chairs@w3.org">Alastair Campbell, Michael Cooper, Andrew Kirkpatrick</a></li>
-				<li><strong>Editors' Draft:</strong> <a href="https://w3c.github.io/wcag/understanding/">https://w3c.github.io/wcag/understanding/</a></li>
-				<li><strong>Official Version:</strong> <a href="https://www.w3.org/WAI/WCAG22/Understanding/">https://www.w3.org/WAI/WCAG22/Understanding/</a></li>
-				<li><strong>File Issues</strong>: <a href="https://github.com/w3c/wcag/issues/">https://github.com/w3c/wcag/issues/</a></li>
-			</ul>
-			
-			<p class="copyright">
-				<a href="https://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a> ©
-				2017-<span class="generate-year">2018</span>
+	<body dir="ltr">
+      		
+      
+      <div class="default-grid with-gap leftcol">
+         <aside class="box nav-hack sidebar standalone-resource__sidebar ">
+           <header class="box-h ">Page Contents</header>
+           <div class="box-i">
+             <nav aria-label="page contents" class="navtoc">
+                  <ul>
+                     <li><a href="#perceivable">Perceivable</a></li>
+                     <li><a href="#operable">Operable</a></li>
+                     <li><a href="#understandable">Understandable</a></li>
+                     <li><a href="#robust">Robust</a></li>
+                     <li><a href="#other">Other Understanding Documents</a></li>
+                  </ul>
+             </nav>
+           </div>
+         </aside>
+
+		<main id="main" class="main-content standalone-resource__main">
 				
-				<a href="https://www.w3.org/"><abbr title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup>
-				(<a href="https://www.csail.mit.edu/"><abbr title="Massachusetts Institute of Technology">MIT</abbr></a>,
-				<a href="https://www.ercim.eu/"><abbr title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>,
-				<a href="https://www.keio.ac.jp/">Keio</a>, <a href="http://ev.buaa.edu.cn/">Beihang</a>).
+		<h1 id="title" class="title p-name">All WCAG 2.2 Understanding Docs</h1>
+				<aside class="box">
+					<header class="box-h ">Summary</header>
+					<div class="box-i">
+						<p><em>Understanding documents</em> provide detailed explanations for Web Content Accessibility Guidelines (WCAG) guidelines and success criteria. They are informative, not part of the &quot;normative&quot; WCAG standard. For information, see <a href="about">About WCAG Understanding Documents</a>.</p>
+					</div>
+				</aside>
 				
-				<abbr title="World Wide Web Consortium">W3C</abbr> <a href="https://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>,
-				<a href="https://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a> and
-				<a rel="license" href="https://www.w3.org/Consortium/Legal/copyright-documents">document use</a>
-				rules apply.
-			</p>
-			<hr title="Separator for header"/>
-		</div>
-		<section id="abstract">
-			<h2>Abstract</h2>
-			<p>Understanding WCAG 2.2 is a guide to understanding and using <a href="https://www.w3.org/TR/WCAG22/">Web Content Accessibility Guidelines (WCAG) 2.2</a> [[WCAG22]]. It is part of a set of documents that support WCAG 2.2. Please note that the contents of this document are informative (they provide guidance), and not normative (they do not set requirements for conforming to WCAG 2.2). See <a href="https://www.w3.org/WAI/intro/wcag.php">Web Content Accessibility Guidelines (WCAG) Overview</a> for an introduction to WCAG, supporting technical documents, and educational material.</p>
-		</section>
-		<section id="sotd">
-			<h2>Status of This Document</h2>
-			<p>This is the official version of "Understanding WCAG 2.2", and is referenced by <a href="https://www.w3.org/TR/WCAG22/">Web Content Accessibility Guidelines 2.2</a>. This resource is maintained as needed to update interpretive guidance and reference techniques to meet the guidelines.</p>
-			<p>To comment, <a href="https://github.com/w3c/wcag/issues/new">file an issue in the <abbr title="World Wide Web Consortium">W3C</abbr> WCAG GitHub repository</a>. Although the proposed Success Criteria in this document reference issues tracking discussion, the Working Group requests that public comments be filed as new issues, one issue per discrete comment. It is free to create a GitHub account to file issues. If filing issues in GitHub is not feasible, send email to <a href="mailto:public-agwg-comments@w3.org?subject=WCAG%202.2%20public%20comment">public-agwg-comments@w3.org</a> (<a href="https://lists.w3.org/Archives/Public/public-agwg-comments/">comment archive</a>). </p>
-		</section>
-		<section class="informative introductory" id="intro">
-			<h2>Introduction</h2>
-			<p>Understanding WCAG 2.2 is a  guide to understanding and using <a href="https://www.w3.org/TR/WCAG22/">Web Content Accessibility Guidelines 2.2</a> [[WCAG22]] Although the normative definition and requirements for WCAG 2.2 can all be found in the WCAG 2.2 document itself, the concepts and provisions may be new to some people. Understanding WCAG 2.2 provides a non-normative extended commentary on each guideline and each Success Criterion to help readers better understand the intent and how the guidelines and Success Criteria work together. It also provides examples of techniques or combinations of techniques that the Working Group has identified as being sufficient to meet each Success Criterion. Links are then provided to write-ups for each of the techniques.</p>
-			<section>
-				<h3>Relationship to Understanding WCAG 2.0</h3>
-				<p><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/">Understanding WCAG 2.0</a> [[UNDERSTANDING-WCAG20]] is a substantial resource to support <a href="https://www.w3.org/TR/WCAG20/">Web Content Accessibility Guidelines 2.0</a> [[WCAG20]]. Understanding WCAG 2.2 is a parallel resource that supports the new success criteria in WCAG 2.2. At this stage, it only includes content related to new features of WCAG 2.0. Future versions <em>may</em> include content relevant to WCAG 2.0, depending on how WCAG 2.2 evolves and what structure is determined to provide optimal support.</p>
-				<p>Unlike Understanding WCAG 2.0, this document has not been published as a Technical Report. This change reduces the formality of the document and increases the ability of the Accessibility Guidelines Working Group to maintain the content and optimize the structure. The Working Group considers the content to be authoritative. If feedback indicates the need, the document could be published as a Technical Report in the future.</p>
-			</section>
-			<section>
-				<h3>Structure of Understanding WCAG 2.2</h3>
-				<p>This is not an introductory document. It is a detailed technical description of the guidelines and their Success Criteria. See <a href="https://www.w3.org/WAI/intro/wcag">Web Content Accessibility Guidelines (WCAG) Overview</a> for an introduction to WCAG, supporting technical documents, and educational material. </p>
-				<p>Understanding WCAG 2.2 is organized by guideline. There is an <em>Understanding Guideline X.X</em> section for each guideline. The intent and any advisory techniques that are related to the guideline but not specifically related to any of its Success Criteria are listed there as well.</p>
-				<p>The <em>Understanding Guidelines X.X</em> section is then followed by a <em>Understanding Success Criterion X.X.X</em> section for each Success Criterion of that guideline. These sections each contain:</p>
-				<ul>
-					<li>
-						<p>The Success Criterion as it appears in WCAG 2.2</p>
-					</li>
-					<li>
-						<p>Intent of the Success Criterion</p>
-					</li>
-					<li>
-						<p>Benefits (how the Success Criterion helps people with disabilities)</p>
-					</li>
-					<li>
-						<p>Examples</p>
-					</li>
-					<li>
-						<p> Related Resources </p>
-					</li>
-					<li>
-						<p>Techniques or combinations of techniques that are sufficient to meet the guidelines</p>
-					</li>
-					<li>
-						<p>Failures of this Success Criterion</p>
-					</li>
-					<li>
-						<p>Additional advisory techniques that go beyond what is required to meet the Success Criterion but can be used to make some or all types of content more accessible. Use of advisory techniques does not impact the level of conformance claimed. </p>
-					</li>
-					<li>
-						<p>Key terms for this Success Criterion (taken from the WCAG 2.2 Glossary)</p>
-					</li>
-				</ul>
-				<p>Links are provided from each Guideline in WCAG 2.2 directly to each <em>Understanding Guideline X.X</em> in this document. Similarly, there is a link from each Success Criterion in WCAG 2.2 to the <em>Understanding Success Criterion X.X.X</em> section in this document. </p>
-			</section>
-			<section>
-				<h3>Techniques for WCAG 2.2</h3>
-				<p>Techniques specific to WCAG 2.2 are added to the the techniques for WCAG 2.0, it is one set. The <a href="../techniques/#changelog">Techniques change log</a> lists the new techniques added since WCAG 2.2 was published.</p>
-			</section>
-
-		</section>
-		
 		<div data-include="toc.html" data-include-replace="true"></div>
-
-		<section id="changelog">
-			<h2>Understanding documents change Log</h2>
-			<p>A list of significantly updated Understanding documents since WCAG 2.2 was published:</p>
-			<ol>
-				<li><time datetime="2019-01-17">Jan 18th 2019</time>: Updated <a href="./non-text-contrast">Understanding Non-text contrast</a>, based on the changes from <a href="https://github.com/w3c/wcag/pull/550">Pull request 550</a>.</li>
-			</ol>
-			<p>For a more detailed view of recent changes to the informative documents see the <a href="https://github.com/w3c/wcag/commits/master">github updates</a>.</p>
-		</section>
-
-		<div data-include="../acknowledgements.html" data-include-replace="true">
-			<p>Acknowledgements</p>
+    
+			</main>
+			<a class="button button-backtotop" href="#top"><span><svg focusable="false" aria-hidden="true" class="icon-arrow-up " viewBox="0 0 26 28">
+				<path d="M25.172 15.172c0 0.531-0.219 1.031-0.578 1.406l-1.172 1.172c-0.375 0.375-0.891 0.594-1.422 0.594s-1.047-0.219-1.406-0.594l-4.594-4.578v11c0 1.125-0.938 1.828-2 1.828h-2c-1.062 0-2-0.703-2-1.828v-11l-4.594 4.578c-0.359 0.375-0.875 0.594-1.406 0.594s-1.047-0.219-1.406-0.594l-1.172-1.172c-0.375-0.375-0.594-0.875-0.594-1.406s0.219-1.047 0.594-1.422l10.172-10.172c0.359-0.375 0.875-0.578 1.406-0.578s1.047 0.203 1.422 0.578l10.172 10.172c0.359 0.375 0.578 0.891 0.578 1.422z"></path></svg> Back to Top
+			</span></a>
 		</div>
+		<script>
+				var translationStrings = {}; /* fix WAI JS */
+			</script>
+		<script src="https://www.w3.org/WAI/assets/scripts/main.js"></script>
 	</body>
 </html>
diff --git a/understanding/intro.html b/understanding/intro.html
index fb8cba8688..f4c29f8a8d 100644
--- a/understanding/intro.html
+++ b/understanding/intro.html
@@ -1,23 +1,23 @@
 <!DOCTYPE html>
-<html xmlns="http://www.w3.org/1999/xhtml">
+<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
 	<head>
-		<title>Introduction to Understanding WCAG 2.1</title>
+		<title>Introduction to Understanding WCAG 2</title>
 	</head>
 	<body>
-		<h1>Introduction to Understanding WCAG 2.1</h1>
-		<p>Understanding WCAG 2.1 is an essential guide to understanding and using "<a href="https://www.w3.org/TR/WCAG21/">Web Content Accessibility Guidelines 2.1</a>". Although the normative definition and requirements for WCAG 2.1 can all be found in the WCAG 2.1 document itself, the concepts and provisions may be new to some people. Understanding WCAG 2.1 provides a non-normative extended commentary on each guideline and each Success Criterion to help readers better understand the intent and how the guidelines and Success Criteria work together. It also provides examples of techniques or combinations of techniques that the Working Group has identified as being sufficient to meet each Success Criterion. Links are then provided to write-ups for each of the techniques.</p>
-		<p>This is not an introductory document. It is a detailed technical description of the guidelines and their Success Criteria. See <a href="https://www.w3.org/WAI/intro/wcag">Web Content Accessibility Guidelines (WCAG) Overview</a> for an introduction to WCAG, supporting technical documents, and educational material. </p>
-		<p>Understanding WCAG 2.1 is organized by guideline. There is an <em>Understanding Guideline X.X</em> section for each guideline. The intent and any advisory techniques that are related to the guideline but not specifically related to any of its Success Criteria are listed there as well.</p>
-		<p>The <em>Understanding Guidelines X.X</em> section is then followed by a <em>Understanding Success Criterion X.X.X</em> section for each Success Criterion of that guideline. These sections each contain:</p>
+		<h1>Introduction to Understanding WCAG 2</h1>
+		<p>Understanding WCAG 2 is an essential guide to understanding and using "<a href="https://www.w3.org/TR/WCAG/">Web Content Accessibility Guidelines 2</a>". Although the normative definition and requirements for WCAG 2 can all be found in the WCAG 2 document itself, the concepts and provisions may be new to some people. Understanding WCAG 2 provides a non-normative extended commentary on each guideline and each success criterion to help readers better understand the intent and how the guidelines and success criteria work together. It also provides examples of techniques or combinations of techniques that the Working Group has identified as being sufficient to meet each success criterion. Links are then provided to write-ups for each of the techniques.</p>
+		<p>This is not an introductory document. It is a detailed technical description of the guidelines and their success criteria. See <a href="https://www.w3.org/WAI/intro/wcag">Web Content Accessibility Guidelines (WCAG) Overview</a> for an introduction to WCAG, supporting technical documents, and educational material. </p>
+		<p>Understanding WCAG 2 is organized by guideline. There is an <em>Understanding Guideline X.X</em> section for each guideline. The intent and any advisory techniques that are related to the guideline but not specifically related to any of its success criteria are listed there as well.</p>
+		<p>The <em>Understanding Guidelines X.X</em> section is then followed by an <em>Understanding success criterion X.X.X</em> section for each success criterion of that guideline. These sections each contain:</p>
 		<ul>
 			<li>
-				<p>The Success Criterion as it appears in WCAG 2.1</p>
+				<p>The success criterion as it appears in WCAG 2</p>
 			</li>
 			<li>
-				<p>Intent of the Success Criterion</p>
+				<p>Intent of the success criterion</p>
 			</li>
 			<li>
-				<p>Benefits (how the Success Criterion helps people with disabilities)</p>
+				<p>Benefits (how the success criterion helps people with disabilities)</p>
 			</li>
 			<li>
 				<p>Examples</p>
@@ -29,21 +29,21 @@ <h1>Introduction to Understanding WCAG 2.1</h1>
 				<p>Techniques or combinations of techniques that are sufficient to meet the guidelines</p>
 			</li>
 			<li>
-				<p>Common failures of this Success Criterion</p>
+				<p>Common failures of this success criterion</p>
 			</li>
 			<li>
-				<p>Additional advisory techniques that go beyond what is required to meet the Success Criterion but can be used to make some or all types of content more accessible. Use of advisory techniques does not impact the level of conformance claimed. </p>
+				<p>Additional advisory techniques that go beyond what is required to meet the success criterion but can be used to make some or all types of content more accessible. Use of advisory techniques does not impact the level of conformance claimed. </p>
 			</li>
 			<li>
-				<p>Key terms for this Success Criterion (taken from the WCAG 2.1 Glossary)</p>
+				<p>Key terms for this success criterion (taken from the WCAG 2 Glossary)</p>
 			</li>
 		</ul>
-		<p>Links are provided from each Guideline in WCAG 2.1 directly to each <em>Understanding Guideline X.X</em> in this document. Similarly, there is a link from each Success Criterion in WCAG 2.1 to the <em>Understanding Success Criterion X.X.X</em> section in this document. </p>
-		<p>For information about individual techniques, follow the links throughout this document to the techniques of interest in the <a href="https://www.w3.org/WAI/WCAG21/Techniques/">Techniques for WCAG 2.1</a> document.</p>
+		<p>Links are provided from each Guideline in WCAG 2 directly to each <em>Understanding Guideline X.X</em> in this document. Similarly, there is a link from each success criterion in WCAG 2 to the <em>Understanding Success Criterion X.X.X</em> section in this document. </p>
+		<p>For information about individual techniques, follow the links throughout this document to the techniques of interest in the <a href="../Techniques/">Techniques for WCAG 2</a> document.</p>
 		<p>For links to information on different disabilities and assistive technologies see <a href="https://en.wikipedia.org/wiki/Disability">Disabilities on Wikipedia</a>. </p>
 		<section>
 			<h2>Understanding the Four Principles of Accessibility</h2>
-			<p>The guidelines and Success Criteria are organized around the following four principles, which lay the foundation necessary for anyone to access and use Web content. Anyone who wants to use the Web must have content that is:</p>
+			<p>The guidelines and success criteria are organized around the following four principles, which lay the foundation necessary for anyone to access and use Web content. Anyone who wants to use the Web must have content that is:</p>
 			<ol>
 				<li>
 					<p> Perceivable - Information and user interface components must be presentable to users in ways they can perceive.</p>
@@ -79,30 +79,30 @@ <h2>Understanding the Four Principles of Accessibility</h2>
 				</li>
 			</ol>
 			<p>If any of these are not true, users with disabilities will not be able to use the Web. </p>
-			<p>Under each of the principles are guidelines and Success Criteria that help to address these principles for people with disabilities. There are many general usability guidelines that make content more usable by all people, including those with disabilities. However, in WCAG 2.1, we only include those guidelines that address problems particular to people with disabilities. This includes issues that block access or interfere with access to the Web more severely for people with disabilities.</p>
+			<p>Under each of the principles are guidelines and success criteria that help to address these principles for people with disabilities. There are many general usability guidelines that make content more usable by all people, including those with disabilities. However, in WCAG 2, we only include those guidelines that address problems particular to people with disabilities. This includes issues that block access or interfere with access to the Web more severely for people with disabilities.</p>
 		</section>
 		<section>
 			<h2>Layers of Guidance</h2>
 			<section>
 				<h3>The Guidelines</h3>
-				<p>Under each principle there is a list of guidelines that address the principle. There are a total of 12 guidelines. A convenient list of just the guidelines can be found in the <a class="gl-ref" href="https://www.w3.org/TR/WCAG21/#toc">WCAG 2.1 table of contents</a>. One of the key objectives of the guidelines is to ensure that content is directly accessible to as many people as possible, and capable of being re-presented in different forms to match different peoples' sensory, physical and cognitive abilities.</p>
+				<p>Under each principle there is a list of guidelines that address the principle. There are a total of 13 guidelines. A convenient list of just the guidelines can be found in the <a class="gl-ref" href="https://www.w3.org/TR/WCAG/#toc">WCAG 2 table of contents</a>. One of the key objectives of the guidelines is to ensure that content is directly accessible to as many people as possible, and capable of being re-presented in different forms to match different peoples' sensory, physical and cognitive abilities.</p>
 			</section>
 			<section>
 				<h3>Success Criteria</h3>
-				<p>Under each guideline, there are Success Criteria that describe specifically what must be achieved in order to <a class="gl-ref" href="https://www.w3.org/TR/WCAG21/#dfn-conform">conform</a> to this standard. They are similar to the "checkpoints" in WCAG 1.0. Each Success Criterion is written as a statement that will be either true or false when specific Web content is tested against it. The Success Criteria are written to be technology neutral.</p>
-				<p>All WCAG 2.1 Success Criteria are written as testable criteria for objectively determining if content satisfies the Success Criteria. While some of the testing can be automated using software evaluation programs, others require human testers for part or all of the test.</p>
-				<p>Although content may satisfy the Success Criteria, the content may not always be usable by people with a wide variety of disabilities. Professional reviews utilizing recognized qualitative heuristics are important in achieving accessibility for some audiences. In addition, usability testing is recommended. Usability testing aims to determine how well people can use the content for its intended purpose.</p>
+				<p>Under each guideline, there are success criteria that describe specifically what must be achieved in order to <a>conform</a> to this standard. They are similar to the "checkpoints" in WCAG 1.0. Each success criterion is written as a statement that will be either true or false when specific Web content is tested against it. The success criteria are written to be technology neutral.</p>
+				<p>All WCAG 2 success criteria are written as testable criteria for objectively determining if content satisfies the success criteria. While some of the testing can be automated using software evaluation programs, others require human testers for part or all of the test.</p>
+				<p>Although content may satisfy the success criteria, the content may not always be usable by people with a wide variety of disabilities. Professional reviews utilizing recognized qualitative heuristics are important in achieving accessibility for some audiences. In addition, usability testing is recommended. Usability testing aims to determine how well people can use the content for its intended purpose.</p>
 				<p>The content should be tested by those who understand how people with different types of disabilities use the Web. It is recommended that users with disabilities be included in test groups when performing human testing. </p>
-				<p>Each Success Criterion for a guideline has a link to the section of the How to Meet document that provides:</p>
+				<p>Each success criterion for a guideline has a link to the section of the How to Meet document that provides:</p>
 				<ul>
 					<li>
-						<p>sufficient techniques for meeting the Success Criterion,</p>
+						<p>sufficient techniques for meeting the success criterion,</p>
 					</li>
 					<li>
 						<p>optional advisory techniques, and</p>
 					</li>
 					<li>
-						<p>descriptions of the intent of the Success Criteria, including benefits, and examples.</p>
+						<p>descriptions of the intent of the success criterion, including benefits, and examples.</p>
 					</li>
 				</ul>
 			</section>
diff --git a/understanding/refer-to-wcag.html b/understanding/refer-to-wcag.html
index 8fb4adb859..22b4450799 100644
--- a/understanding/refer-to-wcag.html
+++ b/understanding/refer-to-wcag.html
@@ -1,60 +1,60 @@
 <!DOCTYPE html>
-<html xmlns="http://www.w3.org/1999/xhtml">
+<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
 	<head>
-		<title>How to refer to WCAG 2.1 from other documents</title>
+		<title>How to refer to WCAG 2 from other documents</title>
 	</head>
 	<body>
-		<h1>How to refer to WCAG 2.1 from other documents</h1>
-		<p>The following examples show how to reference WCAG 2.1 in various situations. For additional guidance, see <a href="https://www.w3.org/WAI/intro/linking.html">Referencing and Linking to WAI Guidelines and Technical Documents</a>.</p>
-		<p> Please note that the following language for referencing WCAG 2.1 can be inserted into your own documents. </p>
+		<h1>How to refer to WCAG 2 from other documents</h1>
+		<p>The following examples show how to reference WCAG 2 in various situations. For additional guidance, see <a href="https://www.w3.org/WAI/intro/linking.html">Referencing and Linking to WAI Guidelines and Technical Documents</a>.</p>
+		<p> Please note that the following language for referencing WCAG 2 can be inserted into your own documents. </p>
 		<section id="conformance-referencing-information">
 			<h2>Information references</h2>
-			<p>When referencing WCAG 2.1 in an informational fashion, the following format can be used.</p>
-			<p><em>Web Content Accessibility Guidelines 2.0, W3C World Wide Web Consortium Recommendation XX Month Year (https://www.w3.org/TR/YYYY/REC-WCAG21-YYYYMMDD/, Latest version at https://www.w3.org/TR/WCAG21/)</em></p>
+			<p>When referencing WCAG 2 in an informational fashion, the following format can be used.</p>
+			<p><em>Web Content Accessibility Guidelines 2.2, W3C World Wide Web Consortium Recommendation XX Month Year (https://www.w3.org/TR/YYYY/REC-WCAG22-YYYYMMDD/, Latest version at https://www.w3.org/TR/WCAG22/)</em></p>
 		</section>
 		<section id="conformance-referencing-should">
-			<h2>When referring to WCAG 2.1 from another standard with a "should" statement</h2>
-			<p>When referencing WCAG 2.1 from within a <strong>should</strong> statement in a standard (or advisory statement in a regulation), then the full WCAG 2.1 should be referenced. This would mean that all three levels of WCAG 2.1 should be considered but that none are required. The format for referencing WCAG 2.1 from a "should" statement therefore, is:</p>
-			<p><em>Web Content Accessibility Guidelines 2.0, W3C World Wide Web Consortium Recommendation XX Month Year. (https://www.w3.org/TR/YYYY/REC-WCAG21-YYYYMMDD/)</em></p>
+			<h2>When referring to WCAG 2 from another standard with a "should" statement</h2>
+			<p>When referencing WCAG 2 from within a <strong>should</strong> statement in a standard (or advisory statement in a regulation), then the full WCAG 2 should be referenced. This would mean that all three levels of WCAG 2 should be considered but that none are required. The format for referencing WCAG 2 from a "should" statement therefore, is:</p>
+			<p><em>Web Content Accessibility Guidelines 2.2, W3C World Wide Web Consortium Recommendation XX Month Year. (https://www.w3.org/TR/YYYY/REC-WCAG22-YYYYMMDD/)</em></p>
 		</section>
 		<section id="conformance-referencing-must">
-			<h2>When referring to WCAG 2.1 from another standard with a "shall or must" statement</h2>
-			<p>When citing WCAG 2.1 as part of a requirement (e.g., a <strong>shall or must </strong> statement in a standard or regulation), the reference must include the specific parts of WCAG 2.1 that are intended to be required. When referencing WCAG 2.1 in this manner, the following rules apply: </p>
+			<h2>When referring to WCAG 2 from another standard with a "shall or must" statement</h2>
+			<p>When citing WCAG 2 as part of a requirement (e.g., a <strong>shall or must </strong> statement in a standard or regulation), the reference must include the specific parts of WCAG 2 that are intended to be required. When referencing WCAG 2 in this manner, the following rules apply: </p>
 			<ol class="enumar">
 				<li>
-					<p>Conformance at any level of WCAG 2.1 requires that all of the Level A Success Criteria be met. References to WCAG 2.1 conformance cannot be for any subset of Level A. </p>
+					<p>Conformance at any level of WCAG 2 requires that all of the Level A success criteria be met. References to WCAG 2 conformance cannot be for any subset of Level A. </p>
 				</li>
 				<li>
-					<p>Beyond Level A, a "shall or must" reference may include any subset of provisions in Levels AA and AAA. For example, "<em>all of Level A and [some specific list of Success Criteria in Level AA and Level AAA]</em>" be met. </p>
+					<p>Beyond Level A, a "shall or must" reference may include any subset of provisions in Levels AA and AAA. For example, "<em>all of Level A and [some specific list of success criteria in Level AA and Level AAA]</em>" be met. </p>
 				</li>
 				<li>
-					<p>If Level AA conformance to WCAG 2.1 is specified, then all Level A and all Level AA Success Criteria must be met.</p>
+					<p>If Level AA conformance to WCAG 2 is specified, then all Level A and all Level AA success criteria must be met.</p>
 				</li>
 				<li>
-					<p>If Level AAA conformance to WCAG 2.1 is specified, then all Level A, all Level AA, and all Level AAA Success Criteria must be met.</p>
-					<p class="prefix"><em>Note 1: </em>It is not recommended that Level AAA conformance ever be required for entire sites as a general policy because it is not possible to satisfy all Level AAA Success Criteria for some content. </p>
-					<p class="prefix"><em>Note 2: </em>The sets of Success Criteria defined in WCAG are interdependent and individual Success Criteria rely on each other's definitions in ways which may not be immediately obvious to the reader. Any set of Success Criteria must include all of the Level A provisions.</p>
+					<p>If Level AAA conformance to WCAG 2 is specified, then all Level A, all Level AA, and all Level AAA success criteria must be met.</p>
+					<p class="prefix"><em>Note 1: </em>It is not recommended that Level AAA conformance ever be required for entire sites as a general policy because it is not possible to satisfy all Level AAA success criteria for some content. </p>
+					<p class="prefix"><em>Note 2: </em>The sets of success criteria defined in WCAG 2 are interdependent and individual success criteria rely on each other's definitions in ways which may not be immediately obvious to the reader. Any set of success criteria must include all of the Level A provisions.</p>
 				</li>
 			</ol>
 		</section>
 		<section id="conformance-referencing-examples">
 			<h2>Examples</h2>
 			<p><strong>To cite only the Level A Success Criteria (Single-A conformance):</strong></p>
-			<p><em>Web Content Accessibility Guidelines 2.0, W3C World Wide Web Consortium Recommendation XX Month Year, Level A Success Criteria. (https://www.w3.org/TR/YYYY/REC-WCAG21-YYYYMMDD/)</em></p>
+			<p><em>Web Content Accessibility Guidelines 2.2, W3C World Wide Web Consortium Recommendation XX Month Year, Level A Success Criteria. (https://www.w3.org/TR/YYYY/REC-WCAG22-YYYYMMDD/)</em></p>
 			<p><strong>To cite the Levels A and AA Success Criteria (Double-A conformance):</strong></p>
-			<p><em>Web Content Accessibility Guidelines 2.0, W3C World Wide Web Consortium Recommendation XX Month Year, Level A &amp; Level AA Success Criteria. (https://www.w3.org/TR/YYYY/REC-WCAG21-YYYYMMDD/)</em></p>
+			<p><em>Web Content Accessibility Guidelines 2.2, W3C World Wide Web Consortium Recommendation XX Month Year, Level A &amp; Level AA Success Criteria. (https://www.w3.org/TR/YYYY/REC-WCAG22-YYYYMMDD/)</em></p>
 			<p><strong>To cite Level A Success Criteria and selected Success Criteria from Level AA and Level AAA: </strong></p>
-			<p><em>Web Content Accessibility Guidelines 2.0, W3C World Wide Web Consortium Recommendation XX Month Year, Level A Success Criteria plus Success Criteria 1.x.x, 2.y.y, … 3.z.z. (https://www.w3.org/TR/YYYY/REC-WCAG21-YYYYMMDD/)</em></p>
-			<p><strong>Example of use of a WCAG reference in a "shall or must" statement.</strong></p>
-			<p>All Web content on publicly available Web sites shall conform to Web Content Accessibility Guidelines 2.0, W3C World Wide Web Consortium Recommendation XX Month Year, Level A Success Criteria plus Success Criteria 1.2.3, 2.4.5-6, 3.1.2 (https://www.w3.org/TR/YYYY/REC-WCAG21-YYYYMMDD/)</p>
+			<p><em>Web Content Accessibility Guidelines 2.2, W3C World Wide Web Consortium Recommendation XX Month Year, Level A Success Criteria plus Success Criteria 1.x.x, 2.y.y, … 3.z.z. (https://www.w3.org/TR/YYYY/REC-WCAG22-YYYYMMDD/)</em></p>
+			<p><strong>Example of use of a WCAG 2 reference in a "shall or must" statement.</strong></p>
+			<p>All Web content on publicly available Web sites shall conform to Web Content Accessibility Guidelines 2.2, W3C World Wide Web Consortium Recommendation XX Month Year, Level A Success Criteria plus Success Criteria 1.2.3, 2.4.5-6, 3.1.2 (https://www.w3.org/TR/YYYY/REC-WCAG22-YYYYMMDD/)</p>
 		</section>
 		<section id="conformance-referencing-support">
-			<h2>Referring to content from WCAG support documents</h2>
-			<p>Techniques, which are listed in Understanding WCAG 2.1 and described in other supporting documents, are not part of the normative WCAG 2.1 Recommendation and should not be cited using the citation for the WCAG 2.1 Recommendation itself. References to techniques in support documents should be cited separately.</p>
-			<p>Techniques can be cited based on the individual Technique document or on the master WCAG 2.1 Techniques document. For example, the technique "Using alt attributes on img elements" could be cited as</p>
+			<h2>Referring to content from WCAG 2 support documents</h2>
+			<p>Techniques, which are listed in Understanding WCAG 2 and described in other supporting documents, are not part of the normative WCAG 2 Recommendation and should not be cited using the citation for the WCAG 2 Recommendation itself. References to techniques in support documents should be cited separately.</p>
+			<p>Techniques can be cited based on the individual Technique document or on the master WCAG 2 Techniques document. For example, the technique "Using alt attributes on img elements" could be cited as</p>
 			<p class="indented"><em>"Using alt attributes on img elements," W3C World Wide Web Consortium Note. (URI: {URI of technique}) </em></p>
 			<p class="indented">or</p>
-			<p class="indented"><em>W3C World Wide Web Consortium (200x): WCAG2.0 HTML Techniques (URI: {URI of HTML Techniques})</em></p>
+			<p class="indented"><em>W3C World Wide Web Consortium (20xx): WCAG2.2 HTML Techniques (URI: {URI of HTML Techniques})</em></p>
 			<p class="indented"><strong>Techniques are not designed to be referenced as "required"</strong> from any standard or regulation.Standards and regulations should not make any specific technique mandatory, though they may choose to recommend techniques.</p>
 		</section>
 	</body>
diff --git a/understanding/toc.html b/understanding/toc.html
deleted file mode 100644
index f2153e694b..0000000000
--- a/understanding/toc.html
+++ /dev/null
@@ -1,151 +0,0 @@
-<nav xmlns="http://www.w3.org/1999/xhtml" id="toc">
-   <h2 class="introductory" id="understanding-pages">
-      					Understanding Pages
-      					
-      				
-   </h2>
-   <ol class="toc">
-      <li class="tocline"><a href="intro" class="tocxref"><span class="secno"> </span>Introduction to Understanding WCAG 2.1</a></li>
-      <li class="tocline"><a href="understanding-techniques" class="tocxref"><span class="secno"> </span>Understanding Techniques for WCAG Success Criteria</a></li>
-      <li class="tocline"> Perceivable 
-         <ol class="toc">
-            <li class="tocline"><a href="text-alternatives" class="tocxref"><span class="secno">1.1 </span>Text Alternatives</a><ol class="toc">
-                  <li class="tocline"><a href="non-text-content" class="tocxref"><span class="secno">1.1.1 </span>Non-text Content</a></li>
-               </ol>
-            </li>
-            <li class="tocline"><a href="time-based-media" class="tocxref"><span class="secno">1.2 </span>Time-based Media</a><ol class="toc">
-                  <li class="tocline"><a href="audio-only-and-video-only-prerecorded" class="tocxref"><span class="secno">1.2.1 </span>Audio-only and Video-only (Prerecorded)</a></li>
-                  <li class="tocline"><a href="captions-prerecorded" class="tocxref"><span class="secno">1.2.2 </span>Captions (Prerecorded)</a></li>
-                  <li class="tocline"><a href="audio-description-or-media-alternative-prerecorded" class="tocxref"><span class="secno">1.2.3 </span>Audio Description or Media Alternative (Prerecorded)</a></li>
-                  <li class="tocline"><a href="captions-live" class="tocxref"><span class="secno">1.2.4 </span>Captions (Live)</a></li>
-                  <li class="tocline"><a href="audio-description-prerecorded" class="tocxref"><span class="secno">1.2.5 </span>Audio Description (Prerecorded)</a></li>
-                  <li class="tocline"><a href="sign-language-prerecorded" class="tocxref"><span class="secno">1.2.6 </span>Sign Language (Prerecorded)</a></li>
-                  <li class="tocline"><a href="extended-audio-description-prerecorded" class="tocxref"><span class="secno">1.2.7 </span>Extended Audio Description (Prerecorded)</a></li>
-                  <li class="tocline"><a href="media-alternative-prerecorded" class="tocxref"><span class="secno">1.2.8 </span>Media Alternative (Prerecorded)</a></li>
-                  <li class="tocline"><a href="audio-only-live" class="tocxref"><span class="secno">1.2.9 </span>Audio-only (Live)</a></li>
-               </ol>
-            </li>
-            <li class="tocline"><a href="adaptable" class="tocxref"><span class="secno">1.3 </span>Adaptable</a><ol class="toc">
-                  <li class="tocline"><a href="info-and-relationships" class="tocxref"><span class="secno">1.3.1 </span>Info and Relationships</a></li>
-                  <li class="tocline"><a href="meaningful-sequence" class="tocxref"><span class="secno">1.3.2 </span>Meaningful Sequence</a></li>
-                  <li class="tocline"><a href="sensory-characteristics" class="tocxref"><span class="secno">1.3.3 </span>Sensory Characteristics</a></li>
-                  <li class="tocline"><a href="orientation" class="tocxref"><span class="secno">1.3.4 </span>Orientation</a></li>
-                  <li class="tocline"><a href="identify-input-purpose" class="tocxref"><span class="secno">1.3.5 </span>Identify Input Purpose</a></li>
-                  <li class="tocline"><a href="identify-purpose" class="tocxref"><span class="secno">1.3.6 </span>Identify Purpose</a></li>
-               </ol>
-            </li>
-            <li class="tocline"><a href="distinguishable" class="tocxref"><span class="secno">1.4 </span>Distinguishable</a><ol class="toc">
-                  <li class="tocline"><a href="use-of-color" class="tocxref"><span class="secno">1.4.1 </span>Use of Color</a></li>
-                  <li class="tocline"><a href="audio-control" class="tocxref"><span class="secno">1.4.2 </span>Audio Control</a></li>
-                  <li class="tocline"><a href="contrast-minimum" class="tocxref"><span class="secno">1.4.3 </span>Contrast (Minimum)</a></li>
-                  <li class="tocline"><a href="resize-text" class="tocxref"><span class="secno">1.4.4 </span>Resize text</a></li>
-                  <li class="tocline"><a href="images-of-text" class="tocxref"><span class="secno">1.4.5 </span>Images of Text</a></li>
-                  <li class="tocline"><a href="contrast-enhanced" class="tocxref"><span class="secno">1.4.6 </span>Contrast (Enhanced)</a></li>
-                  <li class="tocline"><a href="low-or-no-background-audio" class="tocxref"><span class="secno">1.4.7 </span>Low or No Background Audio</a></li>
-                  <li class="tocline"><a href="visual-presentation" class="tocxref"><span class="secno">1.4.8 </span>Visual Presentation</a></li>
-                  <li class="tocline"><a href="images-of-text-no-exception" class="tocxref"><span class="secno">1.4.9 </span>Images of Text (No Exception)</a></li>
-                  <li class="tocline"><a href="reflow" class="tocxref"><span class="secno">1.4.10 </span>Reflow</a></li>
-                  <li class="tocline"><a href="non-text-contrast" class="tocxref"><span class="secno">1.4.11 </span>Non-text Contrast</a></li>
-                  <li class="tocline"><a href="text-spacing" class="tocxref"><span class="secno">1.4.12 </span>Text Spacing</a></li>
-                  <li class="tocline"><a href="content-on-hover-or-focus" class="tocxref"><span class="secno">1.4.13 </span>Content on Hover or Focus</a></li>
-               </ol>
-            </li>
-         </ol>
-      </li>
-      <li class="tocline">Operable 
-         <ol class="toc">
-            <li class="tocline"><a href="keyboard-accessible" class="tocxref"><span class="secno">2.1 </span>Keyboard Accessible</a><ol class="toc">
-                  <li class="tocline"><a href="keyboard" class="tocxref"><span class="secno">2.1.1 </span>Keyboard</a></li>
-                  <li class="tocline"><a href="no-keyboard-trap" class="tocxref"><span class="secno">2.1.2 </span>No Keyboard Trap</a></li>
-                  <li class="tocline"><a href="keyboard-no-exception" class="tocxref"><span class="secno">2.1.3 </span>Keyboard (No Exception)</a></li>
-                  <li class="tocline"><a href="character-key-shortcuts" class="tocxref"><span class="secno">2.1.4 </span>Character Key Shortcuts</a></li>
-               </ol>
-            </li>
-            <li class="tocline"><a href="enough-time" class="tocxref"><span class="secno">2.2 </span>Enough Time</a><ol class="toc">
-                  <li class="tocline"><a href="timing-adjustable" class="tocxref"><span class="secno">2.2.1 </span>Timing Adjustable</a></li>
-                  <li class="tocline"><a href="pause-stop-hide" class="tocxref"><span class="secno">2.2.2 </span>Pause, Stop, Hide</a></li>
-                  <li class="tocline"><a href="no-timing" class="tocxref"><span class="secno">2.2.3 </span>No Timing</a></li>
-                  <li class="tocline"><a href="interruptions" class="tocxref"><span class="secno">2.2.4 </span>Interruptions</a></li>
-                  <li class="tocline"><a href="re-authenticating" class="tocxref"><span class="secno">2.2.5 </span>Re-authenticating</a></li>
-                  <li class="tocline"><a href="timeouts" class="tocxref"><span class="secno">2.2.6 </span>Timeouts</a></li>
-               </ol>
-            </li>
-            <li class="tocline"><a href="seizures-and-physical-reactions" class="tocxref"><span class="secno">2.3 </span>Seizures and Physical Reactions</a><ol class="toc">
-                  <li class="tocline"><a href="three-flashes-or-below-threshold" class="tocxref"><span class="secno">2.3.1 </span>Three Flashes or Below Threshold</a></li>
-                  <li class="tocline"><a href="three-flashes" class="tocxref"><span class="secno">2.3.2 </span>Three Flashes</a></li>
-                  <li class="tocline"><a href="animation-from-interactions" class="tocxref"><span class="secno">2.3.3 </span>Animation from Interactions</a></li>
-               </ol>
-            </li>
-            <li class="tocline"><a href="navigable" class="tocxref"><span class="secno">2.4 </span>Navigable</a><ol class="toc">
-                  <li class="tocline"><a href="bypass-blocks" class="tocxref"><span class="secno">2.4.1 </span>Bypass Blocks</a></li>
-                  <li class="tocline"><a href="page-titled" class="tocxref"><span class="secno">2.4.2 </span>Page Titled</a></li>
-                  <li class="tocline"><a href="focus-order" class="tocxref"><span class="secno">2.4.3 </span>Focus Order</a></li>
-                  <li class="tocline"><a href="link-purpose-in-context" class="tocxref"><span class="secno">2.4.4 </span>Link Purpose (In Context)</a></li>
-                  <li class="tocline"><a href="multiple-ways" class="tocxref"><span class="secno">2.4.5 </span>Multiple Ways</a></li>
-                  <li class="tocline"><a href="headings-and-labels" class="tocxref"><span class="secno">2.4.6 </span>Headings and Labels</a></li>
-                  <li class="tocline"><a href="focus-visible" class="tocxref"><span class="secno">2.4.7 </span>Focus Visible</a></li>
-                  <li class="tocline"><a href="location" class="tocxref"><span class="secno">2.4.8 </span>Location</a></li>
-                  <li class="tocline"><a href="link-purpose-link-only" class="tocxref"><span class="secno">2.4.9 </span>Link Purpose (Link Only)</a></li>
-                  <li class="tocline"><a href="section-headings" class="tocxref"><span class="secno">2.4.10 </span>Section Headings</a></li>
-                  <li class="tocline"><a href="focus-visible-enhanced" class="tocxref"><span class="secno">2.4.11 </span>Focus Visible (Enhanced)</a></li>
-               </ol>
-            </li>
-            <li class="tocline"><a href="input-modalities" class="tocxref"><span class="secno">2.5 </span>Input Modalities</a><ol class="toc">
-                  <li class="tocline"><a href="pointer-gestures" class="tocxref"><span class="secno">2.5.1 </span>Pointer Gestures</a></li>
-                  <li class="tocline"><a href="pointer-cancellation" class="tocxref"><span class="secno">2.5.2 </span>Pointer Cancellation</a></li>
-                  <li class="tocline"><a href="label-in-name" class="tocxref"><span class="secno">2.5.3 </span>Label in Name</a></li>
-                  <li class="tocline"><a href="motion-actuation" class="tocxref"><span class="secno">2.5.4 </span>Motion Actuation</a></li>
-                  <li class="tocline"><a href="target-size" class="tocxref"><span class="secno">2.5.5 </span>Target Size</a></li>
-                  <li class="tocline"><a href="concurrent-input-mechanisms" class="tocxref"><span class="secno">2.5.6 </span>Concurrent Input Mechanisms</a></li>
-                  <li class="tocline"><a href="dragging" class="tocxref"><span class="secno">2.5.7 </span>Dragging</a></li>
-               </ol>
-            </li>
-         </ol>
-      </li>
-      <li class="tocline"> Understandable 
-         <ol class="toc">
-            <li class="tocline"><a href="readable" class="tocxref"><span class="secno">3.1 </span>Readable</a><ol class="toc">
-                  <li class="tocline"><a href="language-of-page" class="tocxref"><span class="secno">3.1.1 </span>Language of Page</a></li>
-                  <li class="tocline"><a href="language-of-parts" class="tocxref"><span class="secno">3.1.2 </span>Language of Parts</a></li>
-                  <li class="tocline"><a href="unusual-words" class="tocxref"><span class="secno">3.1.3 </span>Unusual Words</a></li>
-                  <li class="tocline"><a href="abbreviations" class="tocxref"><span class="secno">3.1.4 </span>Abbreviations</a></li>
-                  <li class="tocline"><a href="reading-level" class="tocxref"><span class="secno">3.1.5 </span>Reading Level</a></li>
-                  <li class="tocline"><a href="pronunciation" class="tocxref"><span class="secno">3.1.6 </span>Pronunciation</a></li>
-               </ol>
-            </li>
-            <li class="tocline"><a href="predictable" class="tocxref"><span class="secno">3.2 </span>Predictable</a><ol class="toc">
-                  <li class="tocline"><a href="on-focus" class="tocxref"><span class="secno">3.2.1 </span>On Focus</a></li>
-                  <li class="tocline"><a href="on-input" class="tocxref"><span class="secno">3.2.2 </span>On Input</a></li>
-                  <li class="tocline"><a href="consistent-navigation" class="tocxref"><span class="secno">3.2.3 </span>Consistent Navigation</a></li>
-                  <li class="tocline"><a href="consistent-identification" class="tocxref"><span class="secno">3.2.4 </span>Consistent Identification</a></li>
-                  <li class="tocline"><a href="change-on-request" class="tocxref"><span class="secno">3.2.5 </span>Change on Request</a></li>
-               </ol>
-            </li>
-            <li class="tocline"><a href="input-assistance" class="tocxref"><span class="secno">3.3 </span>Input Assistance</a><ol class="toc">
-                  <li class="tocline"><a href="error-identification" class="tocxref"><span class="secno">3.3.1 </span>Error Identification</a></li>
-                  <li class="tocline"><a href="labels-or-instructions" class="tocxref"><span class="secno">3.3.2 </span>Labels or Instructions</a></li>
-                  <li class="tocline"><a href="error-suggestion" class="tocxref"><span class="secno">3.3.3 </span>Error Suggestion</a></li>
-                  <li class="tocline"><a href="error-prevention-legal-financial-data" class="tocxref"><span class="secno">3.3.4 </span>Error Prevention (Legal, Financial, Data)</a></li>
-                  <li class="tocline"><a href="help" class="tocxref"><span class="secno">3.3.5 </span>Help</a></li>
-                  <li class="tocline"><a href="error-prevention-all" class="tocxref"><span class="secno">3.3.6 </span>Error Prevention (All)</a></li>
-                  <li class="tocline"><a href="accessible-authentication" class="tocxref"><span class="secno">3.3.7 </span>Accessible Authentication</a></li>
-               </ol>
-            </li>
-         </ol>
-      </li>
-      <li class="tocline"> Robust 
-         <ol class="toc">
-            <li class="tocline"><a href="compatible" class="tocxref"><span class="secno">4.1 </span>Compatible</a><ol class="toc">
-                  <li class="tocline"><a href="parsing" class="tocxref"><span class="secno">4.1.1 </span>Parsing</a></li>
-                  <li class="tocline"><a href="name-role-value" class="tocxref"><span class="secno">4.1.2 </span>Name, Role, Value</a></li>
-                  <li class="tocline"><a href="status-messages" class="tocxref"><span class="secno">4.1.3 </span>Status Messages</a></li>
-               </ol>
-            </li>
-         </ol>
-      </li>
-      <li class="tocline"><a href="conformance" class="tocxref"><span class="secno"> </span>Understanding Conformance</a></li>
-      <li class="tocline"><a href="refer-to-wcag" class="tocxref"><span class="secno"> </span>How to Refer to WCAG 2.1 from Other Documents</a></li>
-      <li class="tocline"><a href="documenting-accessibility-support" class="tocxref"><span class="secno"> </span>Documenting Accessibility Support for Uses of a Web Technology</a></li>
-      <li class="tocline"><a href="understanding-metadata" class="tocxref"><span class="secno"> </span>Understanding Metadata</a></li>
-   </ol>
-</nav>
\ No newline at end of file
diff --git a/understanding/understanding-act-rules.html b/understanding/understanding-act-rules.html
new file mode 100644
index 0000000000..ef08e26b36
--- /dev/null
+++ b/understanding/understanding-act-rules.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
+	<head>
+		<title>Understanding Test Rules for WCAG 2 Success Criteria</title>
+	</head>
+	<body>
+		<h1>Understanding Test Rules for WCAG 2 Success Criteria</h1>
+		
+		<p>Test Rules provide guidance for developers of automated testing tools and manual testing methodologies, to help ensure consistent interpretation of WCAG 2 success criteria.</p>
+		<p>W3C's <a href="https://www.w3.org/WAI/standards-guidelines/act/rules/">List of Test Rules for WCAG 2</a> is updated periodically. They are developed according to the <a href="https://www.w3.org/TR/act-rules-format/">Accessibility Conformance Testing (ACT) Rules Format 1.0</a> standard.</p>
+		<p><a href="conformance">Understanding Conformance</a> provides related information, including on <a href="conformance#accessibility-support">understanding accessibility support</a>.</p>
+		
+		<section>
+			<h2>Test Rules Rules are Informative</h2>
+			<p><em>Test Rules are informative — that means they are not required for determining conformance. The basis for determining conformance to WCAG 2 are the success criteria from the WCAG 2 standard — not the Test Rules.</em></p>
+			<p>While W3C's <a href="https://www.w3.org/WAI/standards-guidelines/act/rules/">List of Test Rules for WCAG 2</a> are reviewed by the W3C Accessibility Guidelines Working Group (AGWG), they are not vetted to the same degree as the W3C Web Content Accessibility Guidelines (WCAG) standard (called <em>W3C Recommendation</em>). The WCAG 2 standard is the normative reference on determining conformance.</p>
+		</section>
+		
+		<section>
+			<h2>Test Rules are Partial Checks</h2>
+			<p>Test Rules typically check specific aspects of WCAG 2 success criteria. For example, that a table cell has a header rather than the entire WCAG 2 success criterion 1.3.1 "Info and Relationships", which applies to many more information structures on a web page. In fact, this example rule would not even check the validity of the table header, only if the header exists for a given table cell.</p>
+			<p>Test Rules are also technology-specific. For example, the aforementioned table header example would be specific to HTML, possibly enriched with WAI-ARIA roles and properties, but not to other formats with tables. WCAG 2 success criteria are designed to be technology-agnostic and applicable to all web technologies.</p>
+		</section>
+		
+		<section>
+			<h2>Test Rules Check for Failures</h2>
+			<p>Test Rules are designed to check failures in satisfying WCAG 2 success criteria. That is, when content fails Test Rules, it means that the content does not satisfy the corresponding success criteria. However, when content passes Test Rules, it means that no corresponding failures were detected — it does not necessarily mean that the content satisfies all aspects of the corresponding success criteria.</p>
+			<p>The reason for this is because WCAG 2 success criteria typically cover several aspects and technologies, while Test Rules only check specific aspects. Checking that content satisfies all aspects of WCAG 2 success criteria typically requires further verification by human testers.</p>
+			<p class="note"><a href="conformance#cc1">WCAG 2 Conformance Requirement 1</a> allows for "conforming alternate versions". That means that content may still conform to WCAG 2, even when content fails Test Rules, thus does not satisfy the corresponding success criteria.</p>
+		</section>
+		
+		<!-- //
+         <section>
+            <h2>Test Rule Implementations</h2>
+            <p>Implementation of an Test Rule can be any automated testing tool, manual testing methodology, or other procedure that provides the same expected results for the test cases defined by the Test Rule. Specifically, when the expected result for a test case is:</p>
+            <ul>
+               <li><strong>Passed</strong>, the test result generated from the implementation is <strong>passed</strong>, <strong>cantTell</strong>, or <strong>inapplicable</strong></li>
+               <li><strong>Failed</strong>, the test result generated from the implementation is <strong>failed</strong> or <strong>cantTell</strong></li>
+               <li><strong>Inapplicable</strong>, the test result generated from the implementation is <strong>inapplicable</strong>, <strong>cantTell</strong>, or <strong>passed</strong></li>
+            </ul>
+         </section>
+         //-->
+		
+		<section>
+			<h2>Structure of Test Rules</h2>
+			<p>Test Rules conform to the <a href="https://www.w3.org/TR/act-rules-format/">Accessibility Conformance Testing (ACT) Rules Format 1.0</a> standard. They include the following parts:</p>
+			<ul>
+				<li><strong>Descriptive Title</strong> – title for the Test Rule, which should describe the rule</li>
+				<li><strong>Rule Identifier</strong> – identifier for the Test Rule; the W3C rules use alphanumeric strings</li>
+				<li><strong>Rule Type</strong> – there are two basic types of Test Rules, depending on what is being tested:
+					<ul>
+						<li><strong>Atomic Rule</strong> – test one specific situation, which may be part of a composite rule</li>
+						<li><strong>Composite Rule</strong> – combine outcome from multiple atomic rules to one outcome</li>
+					</ul>
+				</li>
+				<li><strong>Accessibility Requirements Mapping</strong> – maps the Test Rule to particular accessibility requirements; in this suite of rules we use Web Content Accessibility Guidelines (WCAG) 2 success criteria</li>
+				<li><strong>Rule Input</strong> – describes the scope of input into Test Rules, which is one of the following:
+					<ul>
+						<li><strong>Input Aspects</strong> – input into atomic rules, such as DOM Tree and CSS Styling etc.</li>
+						<li><strong>Input Rules</strong> – input into the composite rules, which are the atomic rules in scope</li>
+					</ul>
+				</li>
+				<li><strong>Applicability</strong> – description of the specific parts of the content, for which the rule applies</li>
+				<li><strong>Expectations</strong> – description of the expected characteristics of the applicable rule content</li>
+				<li><strong>Assumptions</strong> – assumptions made, such as specific interpretations of the requirements</li>
+				<li><strong>Accessibility Support</strong> – known limitations regarding browsers and assistive technology</li>
+				<li><strong>Test Cases</strong> – sample code demonstrating passed, failed, and inapplicable rule conditions</li>
+				<li><strong>Change Log</strong> – history of changes for the Test Rules, to support backward compatibility</li>
+				<li><strong>Glossary</strong> – list of key terms defined by the Test Rule or used by the specific Test Rule</li>
+				<li><strong>Issues List (Optional)</strong> – list of known issues or bugs for the particular Test Rule, if any</li>
+				<li><strong>Background (Optional)</strong> – relevant background, such as additional documentation, if any</li>
+				<li><strong>Acknowledgements (Optional)</strong> – such as rule writers, reviewers, and other contributors</li>
+			</ul>
+		</section>
+	</body>
+</html>
diff --git a/understanding/understanding-metadata.html b/understanding/understanding-metadata.html
index b518e2a1df..7dee0f25ca 100644
--- a/understanding/understanding-metadata.html
+++ b/understanding/understanding-metadata.html
@@ -1,14 +1,14 @@
 <!DOCTYPE html>
-<html xmlns="http://www.w3.org/1999/xhtml">
+<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
 	<head>
 		<title>Understanding Metadata</title>
 	</head>
 	<body>
 		<h1>Understanding Metadata</h1>
-		<p>This section discusses metadata techniques that can be employed to satisfy WCAG 2.1 Success Criteria. For more information about metadata see resources below. </p>
+		<p>This section discusses metadata techniques that can be employed to satisfy WCAG 2 success criteria. For more information about metadata see resources below. </p>
 		<p>At its most basic level, metadata is essentially 'data about data' and is used to both describe and find resources. </p>
 		<p>Metadata is a powerful tool that can be used for describing Web pages and accessible components of Web pages as well as associating alternate versions of Web content to each other. These descriptions in turn allows users to locate specific information they need or prefer. </p>
-		<p>In conjunction with WCAG, metadata can play a number of roles including: </p>
+		<p>In conjunction with WCAG 2, metadata can play a number of roles including: </p>
 		<ol>
 			<li>
 				<p> Metadata can be used to associate conforming alternate versions of Web pages with Web pages which do not conform, in order to allow users to find the conforming alternate version when they land on a non-conforming page that they cannot use. </p>
@@ -17,7 +17,7 @@ <h1>Understanding Metadata</h1>
 				<p> Metadata can be used to locate and also to describe alternate pages where there are multiple versions of a page which have been developed, especially where the alternate pages are optimized for individuals with different disabilities. The user can use the metadata both to locate the alternate versions and to identify characteristics of the versions, so that they can find the one that best meets their needs. </p>
 			</li>
 			<li>
-				<p>In addition to being used for whole pages (as in #1 and #2 above), metadata can be used to describe alternate versions of subcomponents of a page. Again, the metadata can be used to find alternate versions of a Web page component as well as to get descriptions of the alternate versions ( if there are several) in order to determine which one would best meet the user's needs. </p>
+				<p>In addition to being used for whole pages (as in #1 and #2 above), metadata can be used to describe alternate versions of subcomponents of a page. Again, the metadata can be used to find alternate versions of a Web page component as well as to get descriptions of the alternate versions (if there are several) in order to determine which one would best meet the user's needs. </p>
 			</li>
 		</ol>
 		<section id="understanding-metadata-resources">
diff --git a/understanding/understanding-techniques.html b/understanding/understanding-techniques.html
index 8bb496e315..be18332fc6 100644
--- a/understanding/understanding-techniques.html
+++ b/understanding/understanding-techniques.html
@@ -1,53 +1,37 @@
 <!DOCTYPE html>
 <html xmlns="http://www.w3.org/1999/xhtml">
 	<head>
-		<title>Understanding Techniques for WCAG Success Criteria</title>
+		<title>Understanding Techniques for WCAG 2 Success Criteria</title>
 	</head>
 	<body>
-		<h1>Understanding Techniques for WCAG Success Criteria</h1>
-		<p>WCAG 2.1 guidelines and success criteria are designed to be broadly applicable to current and future web technologies, including dynamic applications, mobile, digital television, etc. They are stable and do not change.</p>
-		<p>Specific guidance for authors and evaluators on meeting the WCAG success criteria is provided in techniques, which include code examples, resources, and tests. W3C's <a href="https://www.w3.org/WAI/WCAG21/Techniques/">Techniques for WCAG 2.1</a> document is updated periodically, about twice per year, to cover more current best practices and changes in technologies and tools.</p>
-		<p>The three types of guidance in <a href="https://www.w3.org/WAI/WCAG21/Techniques/">Techniques for WCAG 2.1</a> are explained below:</p>
+		<h1>Understanding Techniques for WCAG 2 Success Criteria</h1>
+		<p>WCAG 2 guidelines and success criteria are designed to be broadly applicable to current and future web technologies, including dynamic applications, mobile, digital television, etc. They are stable and do not change.</p>
+		<p>Specific guidance for authors and evaluators on meeting the WCAG 2 success criteria is provided in techniques, which include code examples, resources, and tests. W3C's <a href="../Techniques/">Techniques for WCAG 2</a> document is updated periodically, about twice per year, to cover more current best practices and changes in technologies and tools.</p>
+		<p>The three types of guidance in <a href="../Techniques/">Techniques for WCAG 2</a> are explained below:</p>
 		<ul>
-			<li>
-				<p>Sufficient techniques</p>
-			</li>
-			<li>
-				<p>Advisory techniques</p>
-			</li>
-			<li>
-				<p>Failures</p>
-			</li>
+			<li>Sufficient techniques</li>
+			<li>Advisory techniques</li>
+			<li>Failures</li>
 		</ul>
 		<p>Also explained below:</p>
 		<ul>
-			<li>
-				<p>General and technology-specific techniques - which can be sufficient or advisory</p>
-			</li>
-			<li>
-				<p>Other techniques - beyond what is in W3C's published document</p>
-			</li>
-			<li>
-				<p>Technique tests</p>
-			</li>
-			<li>
-				<p>User agent and assistive technology support</p>
-			</li>
-			<li>
-				<p>Using the techniques - with important considerations</p>
-			</li>
+			<li>General and technology-specific techniques - which can be sufficient or advisory</li>
+			<li>Other techniques - beyond what is in W3C's published document</li>
+			<li>Technique tests</li>
+			<li>User agent and assistive technology support</li>
+			<li>Using the techniques - with important considerations</li>
 		</ul>
 		<p><a href="conformance">Understanding Conformance</a> provides related information, including on <a href="conformance#accessibility-support">understanding accessibility support</a>.</p>
 		<section>
 			<h2>Techniques are Informative</h2>
-			<p><em>Techniques are informative—that means they are not required. The basis for determining conformance to WCAG 2.1 is the success criteria from the WCAG 2.1 standard—not the techniques.</em></p>
-			<p class="prefix"><em>Note 1: </em>W3C cautions against requiring W3C's sufficient techniques. The only thing that should be required is meeting the WCAG 2.1 success criteria. To learn more, see:</p>
+			<p><em>Techniques are informative — that means they are not required. The basis for determining conformance to WCAG 2 are the success criteria from the WCAG 2 standard — not the techniques.</em></p>
+			<p class="prefix"><em>Note 1: </em>W3C cautions against requiring W3C's sufficient techniques. The only thing that should be required is meeting the WCAG 2 success criteria. To learn more, see:</p>
 			<ul>
 				<li>
-					<p><a href="https://www.w3.org/WAI/WCAG20/wcag2faq.html#techsnot">What would be the negative consequences of allowing <em>only</em> W3C's published techniques to be used for conformance to WCAG 2.1?</a> in the WCAG 2 FAQ</p>
+					<p><a href="https://www.w3.org/WAI/standards-guidelines/wcag/faq/#techsnot">What would be the negative consequences of allowing <em>only</em> W3C's published techniques to be used for conformance to WCAG 2?</a> in the WCAG 2 FAQ</p>
 				</li>
 			</ul>
-			<p class="prefix"><em>Note 2: </em><a href="https://www.w3.org/WAI/WCAG21/Techniques/">Techniques for WCAG 2.1</a> uses the words "must" and "should" only to clarify guidance within the techniques, not to convey requirements for WCAG.</p>
+			<p class="prefix"><em>Note 2: </em><a href="../Techniques/">Techniques for WCAG 2</a> uses the words "must" and "should" only to clarify guidance within the techniques, not to convey requirements for WCAG 2.</p>
 		</section>
 		<section>
 			<h2>Sufficient Techniques</h2>
@@ -57,10 +41,10 @@ <h2>Sufficient Techniques</h2>
 					<p>From an author's perspective: If you use the sufficient techniques for a given criterion correctly and it is <a href="conformance#accessibility-support">accessibility-supported</a> for your users, you can be confident that you met the success criterion.</p>
 				</li>
 				<li>
-					<p>From an evaluator's perspective: If web content implements the sufficient techniques for a given criterion correctly and it is <a href="conformance#accessibility-support">accessibility-supported</a> for the content's users, it conforms to that success criterion. (The converse is not true; if content does not implement these sufficient techniques, it does not necessarily fail the success criteria, as explained in <a href="#understanding-techniques-tests">Testing Techniques</a> below.)</p>
+					<p>From an evaluator's perspective: If web content implements the sufficient techniques for a given criterion correctly and it is <a href="conformance#accessibility-support">accessibility-supported</a> for the content's users, it conforms to that success criterion. (The converse is not true; if content does not implement these sufficient techniques, it does not necessarily fail the success criteria, as explained in <a href="#testing-techniques">Testing Techniques</a> below.)</p>
 				</li>
 			</ul>
-			<p>There may be other ways to meet success criteria besides the sufficient techniques in W3C's <a href="https://www.w3.org/WAI/WCAG21/Techniques/">Techniques for WCAG 2.1</a> document, as explained in <a href="#understanding-techniques-othertechs">Other Techniques</a> below. <em>(See also <a href="#understanding-techniques-informative">Techniques are Informative</a> above.)</em></p>
+			<p>There may be other ways to meet success criteria besides the sufficient techniques in W3C's <a href="../Techniques/">Techniques for WCAG 2</a> document, as explained in <a href="#understanding-techniques-othertechs">Other Techniques</a> below. <em>(See also <a href="#understanding-techniques-informative">Techniques are Informative</a> above.)</em></p>
 			<section>
 				<h3>Numbered Lists, "AND"</h3>
 				<p> The W3C-documented sufficient techniques are provided in a numbered list where each list item provides a technique or combination of techniques that can be used to meet the success criterion. Where there are multiple techniques on a numbered list item connected by "AND" then all of the techniques must be used to be sufficient. For example, <a href="info-and-relationships#techniques">Sufficient Techniques for 1.3.1</a> has: "G115: Using semantic elements to mark up structure AND H49: Using semantic markup to mark emphasized or special text (HTML)".</p>
@@ -71,24 +55,12 @@ <h2>Advisory Techniques</h2>
 			<p><em>Advisory techniques</em> are suggested ways to improve accessibility. They are often very helpful to some users, and may be the only way that some users can access some types of content.</p>
 			<p>Advisory techniques are not designated as sufficient techniques for various reasons such as:</p>
 			<ul>
-				<li>
-					<p>they may not be sufficient to meet the full requirements of the success criteria;</p>
-				</li>
-				<li>
-					<p>they may be based on technology that is not yet stable;</p>
-				</li>
-				<li>
-					<p>they may not be <a href="conformance#accessibility-support">accessibility supported</a> in many cases (for example, assistive technologies do not work with them yet);</p>
-				</li>
-				<li>
-					<p>they may not be testable;</p>
-				</li>
-				<li>
-					<p>in some circumstances they may not be applicable or practical, and may even decrease accessibility for some users while increasing it for others;</p>
-				</li>
-				<li>
-					<p>they may not address the success criterion itself, and instead provide related accessibility benefits.</p>
-				</li>
+				<li>they may not be sufficient to meet the full requirements of the success criteria;</li>
+				<li>they may be based on technology that is not yet stable;</li>
+				<li>they may not be <a href="conformance#accessibility-support">accessibility supported</a> in many cases (for example, assistive technologies do not work with them yet);</li>
+				<li>they may not be testable;</li>
+				<li>in some circumstances they may not be applicable or practical, and may even decrease accessibility for some users while increasing it for others;</li>
+				<li>they may not address the success criterion itself, and instead provide related accessibility benefits.</li>
 			</ul>
 			<p>Authors are encouraged to apply all of the techniques where appropriate to best address the widest range of users' needs.</p>
 		</section>
@@ -100,64 +72,60 @@ <h2>Failures</h2>
 					<p>Authors to know what to avoid,</p>
 				</li>
 				<li>
-					<p>Evaluators to use for checking if content does not meet WCAG success criteria.</p>
+					<p>Evaluators to use for checking if content does not meet WCAG 2 success criteria.</p>
 				</li>
 			</ul>
-			<p>Content that has a <em>failure</em> does not meet WCAG success criteria, unless an alternate version is provided without the failure.</p>
-			<p>If anyone identifies a situation where a documented failure is not correct, please <a href="https://www.w3.org/WAI/WCAG21/comments/">report the situation as a WCAG comment</a> so that it can be corrected or deleted as appropriate.</p>
+			<p>Content that has a <em>failure</em> does not meet WCAG 2 success criteria, unless an alternate version is provided without the failure.</p>
+			<p>If anyone identifies a situation where a documented failure is not correct, please <a href="https://www.w3.org/WAI/standards-guidelines/wcag/commenting/">report the situation as a WCAG 2 comment</a> so that it can be corrected or deleted as appropriate.</p>
 		</section>
 		<section>
-			<h2> General and Technology-specific Techniques</h2>
+			<h2>General and Technology-specific Techniques</h2>
 			<p><em>General techniques</em> describe basic practices that apply to all technologies. <em>Technology-specific techniques</em> apply to a specific technology.</p>
 			<p>Some success criteria do not have technology-specific techniques and are covered only with general techniques. Therefore, both the general techniques and the relevant technology-specific techniques should be considered.</p>
-			<p>Publication of techniques for a specific technology does not imply that the technology can be used in all situations to create content that meets WCAG 2.1 success criteria and conformance requirements. Developers need to be aware of the limitations of specific technologies and provide content in a way that is accessible to people with disabilities.</p>
+			<p>Publication of techniques for a specific technology does not imply that the technology can be used in all situations to create content that meets WCAG 2 success criteria and conformance requirements. Developers need to be aware of the limitations of specific technologies and provide content in a way that is accessible to people with disabilities.</p>
 		</section>
 		<section>
 			<h2>Other Techniques</h2>
-			<p>In addition to the techniques in W3C's <a href="https://www.w3.org/WAI/WCAG21/Techniques/">Techniques for WCAG 2.1</a> document, <em>there are other ways to meet WCAG success criteria</em>. W3C's techniques are not comprehensive and may not cover newer technologies and situations.</p>
-			<p><em>Web content does not have to use W3C's published techniques in order to conform to WCAG 2.1.</em><em>(See also <a href="understanding-techniques-informative">Techniques are Informative</a> above.)</em></p>
-			<p>Content authors can develop different techniques. For example, an author could develop a technique for HTML5, <a href="https://www.w3.org/WAI/intro/aria">WAI-ARIA</a>, or other new technology. Other organizations may develop sets of techniques to meet WCAG 2.1 success criteria.</p>
+			<p>In addition to the techniques in W3C's <a href="../Techniques/">Techniques for WCAG 2</a> document, <em>there are other ways to meet WCAG 2 success criteria</em>. W3C's techniques are not comprehensive and may not cover newer technologies and situations.</p>
+			<p><em>Web content does not have to use W3C's published techniques in order to conform to WCAG 2. (See also <a href="understanding-techniques-informative">Techniques are Informative</a> above.)</em></p>
+			<p>Content authors can develop different techniques. For example, an author could develop a technique for HTML5, <a href="https://www.w3.org/WAI/intro/aria">WAI-ARIA</a>, or other new technology. Other organizations may develop sets of techniques to meet WCAG 2 success criteria.</p>
 			<p>Any techniques can be sufficient if:</p>
 			<ul>
 				<li>
 					<p>they satisfy the success criterion, and</p>
 				</li>
 				<li>
-					<p> all of the <a href="conformance">WCAG 2.1 conformance requirements</a> are met.</p>
+					<p> all of the <a href="conformance">WCAG 2 conformance requirements</a> are met.</p>
 				</li>
 			</ul>
 			<section>
 				<h3>Submitting Techniques</h3>
-				<p>The WCAG Working Group encourages people to submit new techniques so that they can be considered for inclusion in updates of the <a href="https://www.w3.org/WAI/WCAG21/Techniques/">Techniques for WCAG 2.1</a> document. Please submit techniques for consideration using the <a href="https://www.w3.org/WAI/GL/WCAG20/TECHS-SUBMIT/">Techniques Submission Form</a>.</p>
+				<p>The WCAG Working Group encourages people to submit new techniques so that they can be considered for inclusion in updates of the <a href="../Techniques/">Techniques for WCAG 2</a> document. Please submit techniques for consideration to the <a href="https://github.com/w3c/wcag/">WCAG repository on GitHub</a>.</p>
 			</section>
 		</section>
 		<section>
 			<h2>Testing Techniques</h2>
-			<p> Each technique has tests that help:</p>
+			<p>Each technique has tests that help:</p>
 			<ul>
-				<li>
-					<p> authors verify that they implemented the technique properly, and</p>
-				</li>
-				<li>
-					<p>evaluators determine if web content meets the technique.</p>
-				</li>
+				<li>authors verify that they implemented the technique properly, and</li>
+				<li>evaluators determine if web content meets the technique.</li>
 			</ul>
-			<p>The tests are only for a technique, they are not tests for conformance to WCAG success criteria.</p>
+			<p>The tests are only for a technique, they are not tests for conformance to WCAG 2 success criteria.</p>
 			<ul>
 				<li>
 					<p>Failing a technique test does not necessarily mean failing WCAG, because the techniques are discrete (that is, they address one specific point) and they are not required.</p>
 				</li>
 				<li>
-					<p>Content can meet WCAG success criteria in different ways other than W3C's published sufficient techniques.</p>
+					<p>Content can meet WCAG 2 success criteria in different ways other than W3C's published sufficient techniques.</p>
 				</li>
 				<li>
-					<p>Content that passes the sufficient techniques for a specific technology does not necessarily meet all WCAG success criteria. Some success criteria have only general techniques, not technology-specific techniques.</p>
+					<p>Content that passes the sufficient techniques for a specific technology does not necessarily meet all WCAG 2 success criteria. Some success criteria have only general techniques, not technology-specific techniques.</p>
 				</li>
 				<li>
 					<p>The content must be <a href="conformance#accessibility-support">accessibility supported</a> for the content's users. Some sufficient techniques require browser, assistive technology, or other support that some users might not have.</p>
 				</li>
 			</ul>
-			<p>Thus while the techniques are useful for evaluating content, evaluations must go beyond just checking the sufficient technique tests in order to evaluate how content conforms to WCAG success criteria.</p>
+			<p>Thus while the techniques are useful for evaluating content, evaluations must go beyond just checking the sufficient technique tests in order to evaluate how content conforms to WCAG 2 success criteria.</p>
 			<p><em>Failures</em> are particularly useful for evaluations because they do indicate non-conformance (unless an alternate version is provided without the failure).</p>
 		</section>
 		<section>
@@ -170,10 +138,10 @@ <h3>Support Notes Change Over Time</h3>
 		</section>
 		<section>
 			<h2>Using the Techniques</h2>
-			<p><a href="https://www.w3.org/WAI/WCAG21/Techniques/">Techniques for WCAG 2.1</a> is not intended to be used as a stand-alone document. Instead, it is expected that content authors will usually use <a href="https://www.w3.org/WAI/WCAG21/quickref/">How to Meet WCAG 2.1: A customizable quick reference</a> to read the WCAG success criteria, and follow links from there to specific topics in Understanding WCAG 2.1 and to specific techniques.</p>
+			<p><a href="../Techniques/">Techniques for WCAG 2</a> is not intended to be used as a stand-alone document. Instead, it is expected that content authors will usually use <a href="https://www.w3.org/WAI/WCAG22/quickref/">How to Meet WCAG 2.2: A customizable quick reference</a> to read the WCAG 2 success criteria, and follow links from there to specific topics in Understanding WCAG 2 and to specific techniques.</p>
 			<section>
 				<h3>Alternatives must meet success criteria</h3>
-				<p>Some techniques describe how to provide alternate ways for users to get content. For example, <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G73">G73: Providing a long description in another location...</a> mentions a transcript as an alternative for an audio file. Some alternatives must also conform to WCAG. For example, the transcript itself must meet all relevant success criteria. </p>
+				<p>Some techniques describe how to provide alternate ways for users to get content. For example, <a href="https://www.w3.org/WAI/WCAG22/Techniques/general/G73">G73: Providing a long description in another location...</a> mentions a transcript as an alternative for an audio file. Some alternatives must also conform to WCAG 2. For example, the transcript itself must meet all relevant success criteria. </p>
 			</section>
 			<section>
 				<h3>Example Code</h3>
diff --git a/understanding/understanding-template.html b/understanding/understanding-template.html
index ddb681842d..f73ba2b723 100644
--- a/understanding/understanding-template.html
+++ b/understanding/understanding-template.html
@@ -1,21 +1,21 @@
 <!DOCTYPE html>
 <html xmlns="http://www.w3.org/1999/xhtml">
 	<head>
-		<title>WCAG 2.0 Understanding Page</title>
+		<title>WCAG 2 Understanding Page</title>
 		<link rel="stylesheet" type="text/css" href="sources.css"/>
 	</head>
 	<body>
 		<h1>Understanding SC #.#.#</h1>
 		<section id="intent">
 			<h2>Intent</h2>
-			<p class="instructions">This section contains the main explanatory content of the Understanding. It explains why the Guideline or Success Criterion exists and, at a high level, how to meet it.</p>
-			<section id="benefits">
-				<h3>Benefits</h3>
-				<p class="instructions">This explains how following the success criterion benefits particular types of users with disabilities.</p>
-				<ul>
-					<li>Benefit</li>
-				</ul>
-			</section>
+			<p class="instructions">This section contains the main explanatory content of the Understanding. It explains why the Guideline or success criterion exists and, at a high level, how to meet it.</p>
+		</section>
+		<section id="benefits">
+			<h2>Benefits</h2>
+			<p class="instructions">This explains how following the success criterion benefits particular types of users with disabilities.</p>
+			<ul>
+				<li>Benefit</li>
+			</ul>
 		</section>
 		<section id="examples">
 			<h2>Examples</h2>
@@ -37,7 +37,7 @@ <h2>Resources</h2>
 		<section id="techniques">
 			<h2>Techniques</h2>
 			<div class="instructions">
-				<p>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. </p>
+				<p>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. </p>
 				<ul>
 					<li>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.</li>
 					<li>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.</li>
@@ -49,7 +49,7 @@ <h2>Techniques</h2>
 			</div>
 			<section id="sufficient">
 				<h3>Sufficient</h3>
-				<p class="instructions">Techniques that are sufficient to meet the Guideline or Success Criterion.</p>
+				<p class="instructions">Techniques that are sufficient to meet the guideline or success criterion.</p>
 				<section class="situation">
 					<h4>Situation</h4>
 					<ul>
@@ -63,14 +63,14 @@ <h4>Situation</h4>
 			</section>
 			<section id="advisory">
 				<h2>Advisory</h2>
-				<p class="instructions">Techniques that are not sufficient by themselves to meet the Guideline or Success Criterion.</p>
+				<p class="instructions">Techniques that are not sufficient by themselves to meet the guideline or success criterion.</p>
 				<p class="instructions">Same template as sufficient techniques.</p>
 			</section>
 			<section id="failure">
 				<h2>Failure</h2>
-				<p class="instructions">Techniques that document conditions that would cause the page not to meet the Guideline or Success Criterion, even if sufficient techniques are also used.</p>
+				<p class="instructions">Techniques that document conditions that would cause the page not to meet the guideline or success criterion, even if sufficient techniques are also used.</p>
 				<p class="instructions">Same template as sufficient techniques.</p>
 			</section>
 		</section>
 	</body>
-</html>
\ No newline at end of file
+</html>
diff --git a/understanding/understanding.11tydata.js b/understanding/understanding.11tydata.js
new file mode 100644
index 0000000000..e6a12fdc66
--- /dev/null
+++ b/understanding/understanding.11tydata.js
@@ -0,0 +1,7 @@
+export default function (data) {
+  return {
+    headerLabel: "Understanding Docs",
+    headerUrl: data.understandingUrl,
+    isUnderstanding: true,
+  };
+}
diff --git a/wcag20/Techniques/ua-notes/aria.html b/wcag20/Techniques/ua-notes/aria.html
index 475368b656..44e8d1af4e 100644
--- a/wcag20/Techniques/ua-notes/aria.html
+++ b/wcag20/Techniques/ua-notes/aria.html
@@ -27,7 +27,7 @@ <h3><a name="wai-aria_notes" id="wai-aria_notes"> </a>WAI-ARIA Technology Notes<
                   support the use of Liveregions.</p></li><li><p> Firefox 3+ contains better support for WAI-ARIA, including
                   Liveregions.</p></li><li><p> IE8 partially supports WAI-ARIA. </p></li><li><p> JAWS 8 and Window-Eyes 5.5+ partially support
                   WAI-ARIA.</p></li><li><p> Jaws 10+ supports WAI-ARIA. </p></li><li><p> FireVox, a self-voicing extension to Firefox, also
-                  	supports WAI-ARIA via direct DOM access. </p></li><li><p>NVDA partially supports WAI-ARIA.</p></li></ul></div><div class="div3"><h3><a name="wai-aria_accessibility_support" id="wai-aria_accessibility_support"> </a>Accessibility Support for WAI-ARIA</h3><p>Using technologies in an Accessibility Supported way is required for conformance claims. Read more about <a href="http://www.w3.org/TR/UNDERSTANDING-WCAG20/appendixB.html#accessibility-support-documenting">Accessibility Support</a>. <span class="diff-delete"><span class="difftext">[begin delete] </span>The WCAG Working Group plans to review which WAI-ARIA techniques are sufficient when Accessible Rich Internet Application specifications reach W3C Recommendation status. <span class="difftext">[end delete]</span></span>Refer to <a href="http://www.w3.org/WAI/intro/aria">WAI-ARIA Overview</a> for the latest information on the status of WAI-ARIA specifications.</p></div></section><section id="ARIA1"><h2><a href="http://www.w3.org/TR/WCAG20-TECHS/ARIA1.html">ARIA1</a>: Using the aria-describedby property to provide a descriptive label for user interface controls</h2><div class="ua-issue"><p>See <a href="http://www.w3.org/TR/WCAG20-TECHS/wai-aria_notes.html#wai-aria_ua_support">User Agent Support for WAI-ARIA</a> for general information on user agent support.</p></div><div class="ua-issue"><p>IE 8 only supports <code>aria-labelledby</code> with a single id value and it partially supports <code>aria-describedby</code>.</p></div></section><section id="ARIA2"><h2><a href="http://www.w3.org/TR/WCAG20-TECHS/ARIA2.html">ARIA2</a>: Identifying a required field with the aria-required property</h2><div class="ua-issue"><p>See <a href="http://www.w3.org/TR/WCAG20-TECHS/wai-aria_notes.html#wai-aria_ua_support">User Agent Support for WAI-ARIA</a> for general information on user agent support.</p></div></section><section id="ARIA4"><h2><a href="http://www.w3.org/TR/WCAG20-TECHS/ARIA4.html">ARIA4</a>: Using a WAI-ARIA role to expose the role of a user interface component</h2><div class="ua-issue"><p>See <a href="http://www.w3.org/TR/WCAG20-TECHS/wai-aria_notes.html#wai-aria_ua_support">User Agent Support for WAI-ARIA</a> for general information on user agent support.</p></div></section><section id="ARIA5"><h2><a href="http://www.w3.org/TR/WCAG20-TECHS/ARIA5.html">ARIA5</a>: Using WAI-ARIA state and property attributes to expose the state of a user interface component</h2><div class="ua-issue"><p>See <a href="http://www.w3.org/TR/WCAG20-TECHS/wai-aria_notes.html#wai-aria_ua_support">User Agent Support for WAI-ARIA</a> for general information on user agent support.</p></div></section><section id="ARIA6"><h2><a href="http://www.w3.org/TR/WCAG20-TECHS/ARIA6.html">ARIA6</a>: Using aria-label to provide labels for objects</h2><div class="ua-issue"><p>See <a href="http://www.w3.org/TR/WCAG20-TECHS/wai-aria_notes.html#wai-aria_ua_support">User Agent Support for WAI-ARIA</a> for general information on user agent support.</p><ul><li><p>Jaws V.11 and greater has complete support.
+                  	supports WAI-ARIA via direct DOM access. </p></li><li><p>NVDA partially supports WAI-ARIA.</p></li></ul></div><div class="div3"><h3><a name="wai-aria_accessibility_support" id="wai-aria_accessibility_support"> </a>Accessibility Support for WAI-ARIA</h3><p>Using technologies in an Accessibility Supported way is required for conformance claims. Read more about <a href="https://www.w3.org/WAI/WCAG21/Understanding/conformance#accessibility-support">Accessibility Support</a>. <span class="diff-delete"><span class="difftext">[begin delete] </span>The WCAG Working Group plans to review which WAI-ARIA techniques are sufficient when Accessible Rich Internet Application specifications reach W3C Recommendation status. <span class="difftext">[end delete]</span></span>Refer to <a href="http://www.w3.org/WAI/intro/aria">WAI-ARIA Overview</a> for the latest information on the status of WAI-ARIA specifications.</p></div></section><section id="ARIA1"><h2><a href="http://www.w3.org/TR/WCAG20-TECHS/ARIA1.html">ARIA1</a>: Using the aria-describedby property to provide a descriptive label for user interface controls</h2><div class="ua-issue"><p>See <a href="http://www.w3.org/TR/WCAG20-TECHS/wai-aria_notes.html#wai-aria_ua_support">User Agent Support for WAI-ARIA</a> for general information on user agent support.</p></div><div class="ua-issue"><p>IE 8 only supports <code>aria-labelledby</code> with a single id value and it partially supports <code>aria-describedby</code>.</p></div></section><section id="ARIA2"><h2><a href="http://www.w3.org/TR/WCAG20-TECHS/ARIA2.html">ARIA2</a>: Identifying a required field with the aria-required property</h2><div class="ua-issue"><p>See <a href="http://www.w3.org/TR/WCAG20-TECHS/wai-aria_notes.html#wai-aria_ua_support">User Agent Support for WAI-ARIA</a> for general information on user agent support.</p></div></section><section id="ARIA4"><h2><a href="http://www.w3.org/TR/WCAG20-TECHS/ARIA4.html">ARIA4</a>: Using a WAI-ARIA role to expose the role of a user interface component</h2><div class="ua-issue"><p>See <a href="http://www.w3.org/TR/WCAG20-TECHS/wai-aria_notes.html#wai-aria_ua_support">User Agent Support for WAI-ARIA</a> for general information on user agent support.</p></div></section><section id="ARIA5"><h2><a href="http://www.w3.org/TR/WCAG20-TECHS/ARIA5.html">ARIA5</a>: Using WAI-ARIA state and property attributes to expose the state of a user interface component</h2><div class="ua-issue"><p>See <a href="http://www.w3.org/TR/WCAG20-TECHS/wai-aria_notes.html#wai-aria_ua_support">User Agent Support for WAI-ARIA</a> for general information on user agent support.</p></div></section><section id="ARIA6"><h2><a href="http://www.w3.org/TR/WCAG20-TECHS/ARIA6.html">ARIA6</a>: Using aria-label to provide labels for objects</h2><div class="ua-issue"><p>See <a href="http://www.w3.org/TR/WCAG20-TECHS/wai-aria_notes.html#wai-aria_ua_support">User Agent Support for WAI-ARIA</a> for general information on user agent support.</p><ul><li><p>Jaws V.11 and greater has complete support.
 </p></li><li><p>ChromeVox V.1 and greater has complete support 
 </p></li><li><p>VoiceOver V.3 and greater supports
 </p></li><li><p>NVDA 2 supports Aria Describedby
diff --git a/wcag20/Techniques/ua-notes/html.html b/wcag20/Techniques/ua-notes/html.html
index c810730dc4..7f235d59c8 100644
--- a/wcag20/Techniques/ua-notes/html.html
+++ b/wcag20/Techniques/ua-notes/html.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html xmlns="http://www.w3.org/1999/xhtml"><head><title>User Agent Support Notes for for HTML and XHTML Techniques</title></head><body><h1>User Agent Support Notes for HTML and XHTML Techniques</h1><p>This page documents user agent support notes for <a href="/TR/WCAG20-TECHS/html">HTML and XHTML Techniques</a>.</p><ul class="toc"><li class="toc"><a href="#H24"> Providing text alternatives for the area elements of image maps </a></li><li class="toc"><a href="#H27">Providing text and non-text alternatives for object
 				</a></li><li class="toc"><a href="#H28">Providing definitions for abbreviations by using the abbr and acronym elements</a></li><li class="toc"><a href="#H33">Supplementing link text with the title attribute</a></li><li class="toc"><a href="#H35"> Providing text alternatives on applet elements </a></li><li class="toc"><a href="#H44">Using label elements to associate text labels with form controls</a></li><li class="toc"><a href="#H45">Using longdesc</a></li><li class="toc"><a href="#H46">Using noembed with embed
-				</a></li><li class="toc"><a href="#H48">Using ol, ul and dl for lists or groups of links</a></li><li class="toc"><a href="#H49">Using semantic markup to mark emphasized or special text</a></li><li class="toc"><a href="#H53">Using the body of the object element</a></li><li class="toc"><a href="#H57"> Using language attributes on the html element </a></li><li class="toc"><a href="#H58">Using language attributes to identify changes in the human language </a></li><li class="toc"><a href="#H59">Using the link element and navigation tools</a></li><li class="toc"><a href="#H60">Using the link element to link to a glossary</a></li><li class="toc"><a href="#H62">Using the ruby element</a></li><li class="toc"><a href="#H63">Using the scope attribute to associate header cells and data cells in data
+				</a></li><li class="toc"><a href="#H48">Using ol, ul and dl for lists or groups of links</a></li><li class="toc"><a href="#H49">Using semantic markup to mark emphasized or special text</a></li><li class="toc"><a href="#H53">Using the body of the object element</a></li><li class="toc"><a href="#H57"> Using language attributes on the html element </a></li><li class="toc"><a href="#H58">Using language attributes to identify changes in the human language </a></li><li class="toc"><a href="#H60">Using the link element to link to a glossary</a></li><li class="toc"><a href="#H62">Using the ruby element</a></li><li class="toc"><a href="#H63">Using the scope attribute to associate header cells and data cells in data
           tables</a></li><li class="toc"><a href="#H64">Using the title attribute of the frame and iframe elements</a></li><li class="toc"><a href="#H65">Using the title attribute to identify form controls when the label element
           cannot be used</a></li><li class="toc"><a href="#H69">Providing heading elements at the beginning of each section of content</a></li><li class="toc"><a href="#H78">Identifying the purpose of a link using link text combined with its enclosing
           paragraph</a></li><li class="toc"><a href="#H80">Identifying the purpose of a link using link text combined with the preceding
@@ -74,11 +74,7 @@
                   </p></li><li><p>Most screen readers do not provide automatic notification about <code>em</code>, <code>strong</code>, <code>b</code>, or <code>i</code>.
                   </p></li><li><p>JAWS contains support for <code>blockquote</code> and <code>cite</code>. WindowEyes contains support for <code>blockquote</code>, <code>q</code> and <code>cite</code>. </p></li><li><p>Firefox 1.0 (Windows) and higher, Opera 7.54 (Windows) and higher, Mozilla 1.7.3 (Windows) and higher automatically generate quotes around <code>q</code> elements, but Internet Explorer 6 for Windows does not.
                   </p></li></ul></div></section><section id="H53"><h2><a href="http://www.w3.org/TR/WCAG20-TECHS/H53.html">H53</a>: Using the body of the object element</h2><div class="ua-issue"><p>This technique is not supported well by assistive technologies and cross-browser
-              support is irregular.</p></div></section><section id="H57"><h2><a href="http://www.w3.org/TR/WCAG20-TECHS/H57.html">H57</a>:  Using language attributes on the html element </h2><div class="ua-issue"><p>Additional subtags for region, script, variant or other aspects may lead to errors in language switching in older versions of some screenreaders.</p></div><div class="ua-issue"><p>JAWS 8.0 can be configured to change language automatically on the basis of the lang attribute. However, it only switches amongst major languages as indicated by the primary code. If a regional language variant is indicated with a language subcode, JAWS will use the default variant for which it is configured.</p></div></section><section id="H58"><h2><a href="http://www.w3.org/TR/WCAG20-TECHS/H58.html">H58</a>: Using language attributes to identify changes in the human language </h2><div class="ua-issue"><p>Additional subtags for region, script, variant or other aspects may lead to errors in language switching in older versions of some screenreaders.</p></div><div class="ua-issue"><p>JAWS 8.0 can be configured to change language automatically on the basis of the lang attribute. However, it only switches amongst major languages as indicated by the primary code. If a regional language variant is indicated with a language subcode, JAWS will use the default variant for which it is configured.</p></div></section><section id="H59"><h2><a href="http://www.w3.org/TR/WCAG20-TECHS/H59.html">H59</a>: Using the link element and navigation tools</h2><div class="ua-issue"><ul><li><p>The link element has inconsistent user agent and assistive technology support. </p></li><li><p>Some user agents provide an optional navigation bar which will display the
-              information specified in the link element. Current versions of the Mozilla and Opera
-              browsers provide this functionality. IE 6.0 and Firefox 1.5 do not offer this feature
-              but it may be available through extensions or add-ons.</p><p>See <a href="//www.subotnik.net/html/link">The 'link'-Element in (X)HTML</a> for
-              more information on browser support for <code>link</code>.</p></li></ul></div></section><section id="H60"><h2><a href="http://www.w3.org/TR/WCAG20-TECHS/H60.html">H60</a>: Using the link element to link to a glossary</h2><div class="ua-issue"><p>Some user agents provide an optional navigation bar which will display the
+              support is irregular.</p></div></section><section id="H57"><h2><a href="http://www.w3.org/TR/WCAG20-TECHS/H57.html">H57</a>:  Using language attributes on the html element </h2><div class="ua-issue"><p>Additional subtags for region, script, variant or other aspects may lead to errors in language switching in older versions of some screenreaders.</p></div><div class="ua-issue"><p>JAWS 8.0 can be configured to change language automatically on the basis of the lang attribute. However, it only switches amongst major languages as indicated by the primary code. If a regional language variant is indicated with a language subcode, JAWS will use the default variant for which it is configured.</p></div></section><section id="H58"><h2><a href="http://www.w3.org/TR/WCAG20-TECHS/H58.html">H58</a>: Using language attributes to identify changes in the human language </h2><div class="ua-issue"><p>Additional subtags for region, script, variant or other aspects may lead to errors in language switching in older versions of some screenreaders.</p></div><div class="ua-issue"><p>JAWS 8.0 can be configured to change language automatically on the basis of the lang attribute. However, it only switches amongst major languages as indicated by the primary code. If a regional language variant is indicated with a language subcode, JAWS will use the default variant for which it is configured.</p></div></section><section id="H60"><h2><a href="http://www.w3.org/TR/WCAG20-TECHS/H60.html">H60</a>: Using the link element to link to a glossary</h2><div class="ua-issue"><p>Some user agents provide an optional navigation bar which will display the
               information specified in the <code>link</code> element. Current versions of the Mozilla
               and Opera browsers provide this functionality. IE 6.0 and Firefox 1.5 do not offer
               this feature but it may be available through extensions or add-ons. See <a href="http://www.subotnik.net/html/link">The 'link'-Element in (X)HTML</a> for
diff --git a/wcag20/Techniques/working-examples/ARIA1/ex1.html b/wcag20/Techniques/working-examples/ARIA1/ex1.html
index 093b5e6900..075d5fa713 100644
--- a/wcag20/Techniques/working-examples/ARIA1/ex1.html
+++ b/wcag20/Techniques/working-examples/ARIA1/ex1.html
@@ -3,7 +3,7 @@
 "http://www.w3.org/TR/html4/strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
 <head>
-<meta http-equiv="content-type" content="text/xhtml; charset=utf-8" />
+<meta http-equiv="content-type" content="text/xhtml; charset=utf-8"/>
 <title>Demonstration of describedby property</title>
 <style type="text/css">
 div.form p { clear:left; margin: 0.3em 0;}
diff --git a/wcag20/Techniques/working-examples/ARIA10/ARIA10-example1.html b/wcag20/Techniques/working-examples/ARIA10/ARIA10-example1.html
index 74cb9a407d..8bfc1e19b4 100644
--- a/wcag20/Techniques/working-examples/ARIA10/ARIA10-example1.html
+++ b/wcag20/Techniques/working-examples/ARIA10/ARIA10-example1.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-<meta charset=utf-8 />
+<meta charset=utf-8/>
 <title>ARIA10 Example 1</title>
 </head>
 
diff --git a/wcag20/Techniques/working-examples/ARIA17/grouping-roles-example.html b/wcag20/Techniques/working-examples/ARIA17/grouping-roles-example.html
index 24573d2f45..e80984cfea 100644
--- a/wcag20/Techniques/working-examples/ARIA17/grouping-roles-example.html
+++ b/wcag20/Techniques/working-examples/ARIA17/grouping-roles-example.html
@@ -3,7 +3,7 @@
 
 <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
 <head>
-     <meta charset="utf-8" />
+     <meta charset="utf-8"/>
      <title>Example - Using grouping roles to identify related form controls</title>
        <style>
 
@@ -33,7 +33,7 @@
 <h1>Example of using grouping roles to identify related form controls</h1>
 
 <p>NB: This example does not use the script needed to make it work, but does include enough to understand the grouping mechanism.</p>
-<hr />
+<hr/>
 
 <h3>Set Alerts for your Account</h3>
 
@@ -42,9 +42,9 @@ <h3>Set Alerts for your Account</h3>
 <div role="group" aria-labelledby="accountnum">
     <span id="accountnum">Your 12-digit account number</span>
     <p>
-      <input size="4" type="text" title="First 4 digits" name="part1" /> - 
-      <input size="4" type="text" title="Next 4 digits" name="part2" /> - 
-      <input size="4" type="text" title="Last 4 digits" name="part3" />
+      <input size="4" type="text" title="First 4 digits" name="part1"/> - 
+      <input size="4" type="text" title="Next 4 digits" name="part2"/> - 
+      <input size="4" type="text" title="Last 4 digits" name="part3"/>
     </p>
   </div>
 
@@ -70,7 +70,7 @@ <h3>Set Alerts for your Account</h3>
       <span id="a2r2">No</span>
     </div>
   </div>
-  <p><input type="submit" value="Continue" id="continue_btn" name="continue_btn" /></p>
+  <p><input type="submit" value="Continue" id="continue_btn" name="continue_btn"/></p>
 </form>
 
 </body>
diff --git a/wcag20/Techniques/working-examples/ARIA17/ssn.html b/wcag20/Techniques/working-examples/ARIA17/ssn.html
index bbae29d628..b8ee150727 100644
--- a/wcag20/Techniques/working-examples/ARIA17/ssn.html
+++ b/wcag20/Techniques/working-examples/ARIA17/ssn.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
-    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
+    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
 <title>Marking up forms and reporting violations for forms</title>
 </head>
 <body>
@@ -11,9 +11,9 @@ <h2>Multi-part fields like social security# and telephone#:</h2>
 <div role="group" aria-labelledby="ssn1">
 <span id="ssn1">Social Security#</span> 
 <span style="color:#D90D0D;"> * </span>
-<input size="3" type="text" aria-required="true" title="First 3 digits" />-
-<input size="2" type="text" aria-required="true" title="Next 2 digits" />-
-<input size="4" type="text" aria-required="true" title="Last 4 digits" />
+<input size="3" type="text" aria-required="true" title="First 3 digits"/>-
+<input size="2" type="text" aria-required="true" title="Next 2 digits"/>-
+<input size="4" type="text" aria-required="true" title="Last 4 digits"/>
 </div>
 </form>
 <p style="margin: 20em 0 0 0;" role="contentinfo">Created by Sailesh Panchang, Deque Systems | July 15, 2013 || Last updated: February 26, 2014</p>
diff --git a/wcag20/Techniques/working-examples/ARIA21/form-alert3.html b/wcag20/Techniques/working-examples/ARIA21/form-alert3.html
index be5891aa80..18d9ce4429 100644
--- a/wcag20/Techniques/working-examples/ARIA21/form-alert3.html
+++ b/wcag20/Techniques/working-examples/ARIA21/form-alert3.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
-    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
+    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
 <title>Forms: Using aria-invalid </title>
 <style type="text/css">
 div.control label {
@@ -54,23 +54,23 @@ <h2> <span role="alert" id="err_final" tabindex="-1"></span></h2>
 
 <div class="control">
 <p><label for="pin4">Personal Id. Number (PIN) - 4 digits: [*]</label> 
-<input type="text" size="4" name="pin4" id="pin4" /></p>
+<input type="text" size="4" name="pin4" id="pin4"/></p>
 </div>
 <div class="control">
 <p><label for="email">Email address: [*]</label> 
-<input type="text" name="email" id="email" /> </p> 
+<input type="text" name="email" id="email"/> </p> 
 </div>
 <div class="control">
 <p><label for="lname">Last name:  [*]</label>
-<input type="text" name="lname" id="lname" size="12" /> </p> 
+<input type="text" name="lname" id="lname" size="12"/> </p> 
 </div>
 <div class="control">
 <p><label for="startDt">Desired policy start date (MM / DD / YYYY)</label>
-<input type="text" name="startDt" id="startDt" size="12" /> </p> 
+<input type="text" name="startDt" id="startDt" size="12"/> </p> 
 </div>
-<p><input type="hidden" name="spanval" id="spanval" />
+<p><input type="hidden" name="spanval" id="spanval"/>
 
-<input type="submit" value="Login" id="next_btn" name="next_btn" /></p>
+<input type="submit" value="Login" id="next_btn" name="next_btn"/></p>
 </form>
 <h3>About the error messages</h3>
 <ul>
diff --git a/wcag20/Techniques/working-examples/ARIA9/ex2.html b/wcag20/Techniques/working-examples/ARIA9/ex2.html
index acb61841cc..14a04a0dc4 100644
--- a/wcag20/Techniques/working-examples/ARIA9/ex2.html
+++ b/wcag20/Techniques/working-examples/ARIA9/ex2.html
@@ -15,14 +15,14 @@
 
 	<tr>
 		<th id="gross">W2 Gross</th>
-		<td><input type="text" size="20" aria-labelledby="tpayer gross" /></td>
-		<td><input type="text" size="20" aria-labelledby="sp gross" /></td>
+		<td><input type="text" size="20" aria-labelledby="tpayer gross"/></td>
+		<td><input type="text" size="20" aria-labelledby="sp gross"/></td>
 	</tr>
 	
 	<tr>
 		<th id="div">Dividends</th>
-		<td><input type="text" size="20" aria-labelledby="tpayer div" /></td>
-		<td><input type="text" size="20" aria-labelledby="sp div" /></td>
+		<td><input type="text" size="20" aria-labelledby="tpayer div"/></td>
+		<td><input type="text" size="20" aria-labelledby="sp div"/></td>
 	</tr>
 </table>
 </body>
diff --git a/wcag20/Techniques/working-examples/ARIA9/ex3.html b/wcag20/Techniques/working-examples/ARIA9/ex3.html
index baaf7ac57d..5fa45fc1ac 100644
--- a/wcag20/Techniques/working-examples/ARIA9/ex3.html
+++ b/wcag20/Techniques/working-examples/ARIA9/ex3.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
-<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 <title>Dinosaur conference</title>
 </head>
 
diff --git a/wcag20/Techniques/working-examples/C15/focus-pseudo-class.html b/wcag20/Techniques/working-examples/C15/focus-pseudo-class.html
index 0c9228d503..3a84930017 100644
--- a/wcag20/Techniques/working-examples/C15/focus-pseudo-class.html
+++ b/wcag20/Techniques/working-examples/C15/focus-pseudo-class.html
@@ -1,26 +1,26 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
-<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 <style type="text/css">
       input.text:focus {
         background-color: #7FFF00; 
 		color: #000;
       }
       input[type=checkbox]:focus + label, input[type=radio]:focus + label {
-        background-color: #FF6;
-		color: #000; 
+        background-color: #1E2EB8;
+		color: #FFF;
       }
     </style>
   <title>Highlighting elements that receive focus</title></head>
   <body>
     <form method="post" action="form.php">
       <p><label for="fname">Name: </label>
-        <input class="text" type="text" name="fname" id="fname" />
+        <input class="text" type="text" name="fname" id="fname"/>
       </p>
       <p>
-        <input type="radio" name="sex" value="male" id="sm" /> <label for="sm">Male</label><br />
-        <input type="radio" name="sex" value="female" id="sf" /> <label for="sf">Female</label>
+        <input type="radio" name="sex" value="male" id="sm"/> <label for="sm">Male</label><br/>
+        <input type="radio" name="sex" value="female" id="sf"/> <label for="sf">Female</label>
       </p>
     </form>
   </body>
diff --git a/wcag20/Techniques/working-examples/C17/input-resize.html b/wcag20/Techniques/working-examples/C17/input-resize.html
index 3607b7ef55..df10223f10 100644
--- a/wcag20/Techniques/working-examples/C17/input-resize.html
+++ b/wcag20/Techniques/working-examples/C17/input-resize.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
-<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 <title>Example of resizing input with CSS</title>
 <style media="all" type="text/css">
 h1 { font-size: 2em; }
@@ -14,11 +14,11 @@
 <h1>Contact Us</h1>
 <p>Please provide us with your details and we will contact you as soon as we can. Note that all of the form fields are required.</p>
 <form>
-<p><label for="fname">First Name: </label><input type="text" name="fname" id="fname" /></p>
-<p><label for="lname">Last Name: </label><input type="text" name="lname" id="lname" /></p>
-<p><label for="phone">Telephone: </label><input type="text" name="phone" id="phone" /></p>
-<p><label for="email">Email: </label><input type="text" name="email" id="email" /></p>
-<input type="submit" name="Submit" value="Submit" id="Submit" />
+<p><label for="fname">First Name: </label><input type="text" name="fname" id="fname"/></p>
+<p><label for="lname">Last Name: </label><input type="text" name="lname" id="lname"/></p>
+<p><label for="phone">Telephone: </label><input type="text" name="phone" id="phone"/></p>
+<p><label for="email">Email: </label><input type="text" name="email" id="email"/></p>
+<input type="submit" name="Submit" value="Submit" id="Submit"/>
 </form>
 </body>
 </html>
diff --git a/wcag20/Techniques/working-examples/C17/radio-checkbox-resize.html b/wcag20/Techniques/working-examples/C17/radio-checkbox-resize.html
index d290c6f69b..5acb586666 100644
--- a/wcag20/Techniques/working-examples/C17/radio-checkbox-resize.html
+++ b/wcag20/Techniques/working-examples/C17/radio-checkbox-resize.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
-<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 <title>Example of resizing radio buttons and checkboxes with CSS</title>
 <style media="all" type="text/css">
 input.geomsize {
@@ -13,8 +13,8 @@
 <body>
 
 <form>
-<p><input type="radio" name="r1" value="r1" id="r1" class="geomsize" /> <label for="r1">Example Radio Button</label></p>
-<p><input type="checkbox" name="c1" id="c1" value="c1" class="geomsize" /> <label for="c1">Example Checkbox</label></p>
+<p><input type="radio" name="r1" value="r1" id="r1" class="geomsize"/> <label for="r1">Example Radio Button</label></p>
+<p><input type="checkbox" name="c1" id="c1" value="c1" class="geomsize"/> <label for="c1">Example Checkbox</label></p>
 </form>
 </body>
 </html>
diff --git a/wcag20/Techniques/working-examples/C29/ex1/index.html b/wcag20/Techniques/working-examples/C29/ex1/index.html
index a9ae246581..32d48de6bc 100644
--- a/wcag20/Techniques/working-examples/C29/ex1/index.html
+++ b/wcag20/Techniques/working-examples/C29/ex1/index.html
@@ -1,13 +1,13 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
-<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 <title>Using a Javascript control to apply a different external CSS file </title>
    
   <script type="text/javascript" src="colorswitcher.js"></script>
 
-  <link href="main.css" rel="stylesheet" type="text/css" />
-  <link id="currentCSS" href="defaultColors.css" rel="stylesheet" type="text/css" />
+  <link href="main.css" rel="stylesheet" type="text/css"/>
+  <link id="currentCSS" href="defaultColors.css" rel="stylesheet" type="text/css"/>
 </head>
 
 <body>
diff --git a/wcag20/Techniques/working-examples/C29/ex2/index.html b/wcag20/Techniques/working-examples/C29/ex2/index.html
index 04907f2c25..36c508ee97 100644
--- a/wcag20/Techniques/working-examples/C29/ex2/index.html
+++ b/wcag20/Techniques/working-examples/C29/ex2/index.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
-<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 <title>Using a client-side JavaScript to change a CSS property</title>
 
 <script type="text/javascript">
diff --git a/wcag20/Techniques/working-examples/F90/incorrectassociation.html b/wcag20/Techniques/working-examples/F90/incorrectassociation.html
index 456855e27b..da918cd39e 100644
--- a/wcag20/Techniques/working-examples/F90/incorrectassociation.html
+++ b/wcag20/Techniques/working-examples/F90/incorrectassociation.html
@@ -4,8 +4,8 @@
 
 <head>
 	<title>Failure of Success Criterion 1.3.1 for incorrectly associating table headers and content via the headers and id attributes - example</title>
-	<link title="oturn-style" rel="stylesheet" href="style/oturn.css" type="text/css" />
-	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
+	<link title="oturn-style" rel="stylesheet" href="style/oturn.css" type="text/css"/>
+	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
 	
 	<style type="text/css">
         .extraneous {background-color:#fcc;}
diff --git a/wcag20/Techniques/working-examples/F91/td-not-th.html b/wcag20/Techniques/working-examples/F91/td-not-th.html
index 72f4061cc4..62d37e8b84 100644
--- a/wcag20/Techniques/working-examples/F91/td-not-th.html
+++ b/wcag20/Techniques/working-examples/F91/td-not-th.html
@@ -6,7 +6,7 @@
 <head>
 	<title>Failure of Success Criterion 1.3.1 for not correctly marking up table headers - example 2</title>
 	
-	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
+	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
 	
 	<style type="text/css">
         .extraneous {background-color:#fcc;}
diff --git a/wcag20/Techniques/working-examples/FLASH10/required_form_fields_as2.html b/wcag20/Techniques/working-examples/FLASH10/required_form_fields_as2.html
index 270c1cd626..0da3a5f4d8 100644
--- a/wcag20/Techniques/working-examples/FLASH10/required_form_fields_as2.html
+++ b/wcag20/Techniques/working-examples/FLASH10/required_form_fields_as2.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
-<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
+<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
 <title>required_form_fields_as2</title>
 <script language="JavaScript" type="text/javascript">
 <!--
@@ -165,7 +165,7 @@
     str += '>';
     for (var i in params)
     {
-      str += '<param name="' + i + '" value="' + params[i] + '" /> ';
+      str += '<param name="' + i + '" value="' + params[i] + '"/> ';
     }
     str += '</object>';
   }
@@ -313,9 +313,9 @@
 </script>
 <noscript>
 	<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0" width="550" height="400" id="required_form_fields_as2" align="middle">
-	<param name="allowScriptAccess" value="sameDomain" />
-	<param name="allowFullScreen" value="false" />
-	<param name="movie" value="required_form_fields_as2.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#ffffff" />	<embed src="required_form_fields_as2.swf" quality="high" bgcolor="#ffffff" width="550" height="400" name="required_form_fields_as2" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://get.adobe.com/flashplayer/" />
+	<param name="allowScriptAccess" value="sameDomain"/>
+	<param name="allowFullScreen" value="false"/>
+	<param name="movie" value="required_form_fields_as2.swf"/><param name="quality" value="high"/><param name="bgcolor" value="#ffffff"/>	<embed src="required_form_fields_as2.swf" quality="high" bgcolor="#ffffff" width="550" height="400" name="required_form_fields_as2" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://get.adobe.com/flashplayer/"/>
 	</object>
 </noscript>
 </body>
diff --git a/wcag20/Techniques/working-examples/FLASH11/long_description_for_image_as3.html b/wcag20/Techniques/working-examples/FLASH11/long_description_for_image_as3.html
index 5affc0f7a3..3ec1d1f4fd 100644
--- a/wcag20/Techniques/working-examples/FLASH11/long_description_for_image_as3.html
+++ b/wcag20/Techniques/working-examples/FLASH11/long_description_for_image_as3.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
-<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
+<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
 <title>long_description_for_image_as3</title>
 <script language="JavaScript" type="text/javascript">
 <!--
@@ -165,7 +165,7 @@
     str += '>';
     for (var i in params)
     {
-      str += '<param name="' + i + '" value="' + params[i] + '" /> ';
+      str += '<param name="' + i + '" value="' + params[i] + '"/> ';
     }
     str += '</object>';
   }
@@ -315,9 +315,9 @@
 </script>
 <noscript>
 	<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0" width="550" height="400" id="long_description_for_image_as3" align="middle">
-	<param name="allowScriptAccess" value="sameDomain" />
-	<param name="allowFullScreen" value="false" />
-	<param name="movie" value="long_description_for_image_as3.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#ffffff" />	<embed src="long_description_for_image_as3.swf" quality="high" bgcolor="#ffffff" width="550" height="400" name="long_description_for_image_as3" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://get.adobe.com/flashplayer/" />
+	<param name="allowScriptAccess" value="sameDomain"/>
+	<param name="allowFullScreen" value="false"/>
+	<param name="movie" value="long_description_for_image_as3.swf"/><param name="quality" value="high"/><param name="bgcolor" value="#ffffff"/>	<embed src="long_description_for_image_as3.swf" quality="high" bgcolor="#ffffff" width="550" height="400" name="long_description_for_image_as3" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://get.adobe.com/flashplayer/"/>
 	</object>
 </noscript>
 </body>
diff --git a/wcag20/Techniques/working-examples/FLASH12/client_side_validation_flash_forms_using_alert_as2.html b/wcag20/Techniques/working-examples/FLASH12/client_side_validation_flash_forms_using_alert_as2.html
index cff704364a..72f7d7988a 100644
--- a/wcag20/Techniques/working-examples/FLASH12/client_side_validation_flash_forms_using_alert_as2.html
+++ b/wcag20/Techniques/working-examples/FLASH12/client_side_validation_flash_forms_using_alert_as2.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
-<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
+<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
 <title>client_side_validation_flash_forms_using_alert_as2</title>
 <script language="JavaScript" type="text/javascript">
 <!--
@@ -165,7 +165,7 @@
     str += '>';
     for (var i in params)
     {
-      str += '<param name="' + i + '" value="' + params[i] + '" /> ';
+      str += '<param name="' + i + '" value="' + params[i] + '"/> ';
     }
     str += '</object>';
   }
@@ -310,9 +310,9 @@
 </script>
 <noscript>
 	<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0" width="550" height="400" id="client_side_validation_flash_forms_using_alert_as2" align="middle">
-	<param name="allowScriptAccess" value="sameDomain" />
-	<param name="allowFullScreen" value="false" />
-	<param name="movie" value="client_side_validation_flash_forms_using_alert_as2.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#ffffff" />	<embed src="client_side_validation_flash_forms_using_alert_as2.swf" quality="high" bgcolor="#ffffff" width="550" height="400" name="client_side_validation_flash_forms_using_alert_as2" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://get.adobe.com/flashplayer/" />
+	<param name="allowScriptAccess" value="sameDomain"/>
+	<param name="allowFullScreen" value="false"/>
+	<param name="movie" value="client_side_validation_flash_forms_using_alert_as2.swf"/><param name="quality" value="high"/><param name="bgcolor" value="#ffffff"/>	<embed src="client_side_validation_flash_forms_using_alert_as2.swf" quality="high" bgcolor="#ffffff" width="550" height="400" name="client_side_validation_flash_forms_using_alert_as2" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://get.adobe.com/flashplayer/"/>
 	</object>
 </noscript>
 </body>
diff --git a/wcag20/Techniques/working-examples/FLASH13/language_en.html b/wcag20/Techniques/working-examples/FLASH13/language_en.html
index ea8e8fdc8f..b3fc7b64ac 100644
--- a/wcag20/Techniques/working-examples/FLASH13/language_en.html
+++ b/wcag20/Techniques/working-examples/FLASH13/language_en.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
-	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
+	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
 	<title>Flash Languages Examples - English</title>
 	<script type="text/javascript" src="swfobject.js"></script>
 	<script type="text/javascript">
@@ -11,7 +11,7 @@
 <body>
 	<h1>Flash content with English language settings:</h1>
 	<object id="languageMovie" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="780" height="420" lang="en" xml:lang="en">
-		<param name="movie" value="languages.swf" />
+		<param name="movie" value="languages.swf"/>
 		<!--[if !IE]>-->
 		<object type="application/x-shockwave-flash" data="languages.swf" width="780" height="420" lang="en" xml:lang="en">
 		<!--<![endif]-->
diff --git a/wcag20/Techniques/working-examples/FLASH13/language_es.html b/wcag20/Techniques/working-examples/FLASH13/language_es.html
index 1092cf781b..64aec4af7d 100644
--- a/wcag20/Techniques/working-examples/FLASH13/language_es.html
+++ b/wcag20/Techniques/working-examples/FLASH13/language_es.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
-	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
+	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
 	<title>Flash Languages Examples - Spanish</title>
 	<script type="text/javascript" src="swfobject.js"></script>
 	<script type="text/javascript">
@@ -11,7 +11,7 @@
 <body>
 	<h1>Flash content with Spanish language settings:</h1>
 	<object id="languageMovie" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="780" height="420" lang="es" xml:lang="es">
-		<param name="movie" value="languages.swf" />
+		<param name="movie" value="languages.swf"/>
 		<!--[if !IE]>-->
 		<object type="application/x-shockwave-flash" data="languages.swf" width="780" height="420" lang="en" xml:lang="es">
 		<!--<![endif]-->
diff --git a/wcag20/Techniques/working-examples/FLASH13/language_fr.html b/wcag20/Techniques/working-examples/FLASH13/language_fr.html
index b4aefa99dd..206ed14d49 100644
--- a/wcag20/Techniques/working-examples/FLASH13/language_fr.html
+++ b/wcag20/Techniques/working-examples/FLASH13/language_fr.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
-	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
+	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
 	<title>Flash Languages Examples - French</title>
 	<script type="text/javascript" src="swfobject.js"></script>
 	<script type="text/javascript">
@@ -11,7 +11,7 @@
 <body>
 	<h1>Flash content with Spanish language settings:</h1>
 	<object id="languageMovie" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="780" height="420" lang="fr" xml:lang="fr">
-		<param name="movie" value="languages.swf" />
+		<param name="movie" value="languages.swf"/>
 		<!--[if !IE]>-->
 		<object type="application/x-shockwave-flash" data="languages.swf" width="780" height="420" lang="fr" xml:lang="fr">
 		<!--<![endif]-->
diff --git a/wcag20/Techniques/working-examples/FLASH14/redundant_event_handlers_as3.html b/wcag20/Techniques/working-examples/FLASH14/redundant_event_handlers_as3.html
index b3e5941528..a0386057fa 100644
--- a/wcag20/Techniques/working-examples/FLASH14/redundant_event_handlers_as3.html
+++ b/wcag20/Techniques/working-examples/FLASH14/redundant_event_handlers_as3.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
-<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
+<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
 <title>redundant_event_handlers_as3</title>
 <script language="JavaScript" type="text/javascript">
 <!--
@@ -165,7 +165,7 @@
     str += '>';
     for (var i in params)
     {
-      str += '<param name="' + i + '" value="' + params[i] + '" /> ';
+      str += '<param name="' + i + '" value="' + params[i] + '"/> ';
     }
     str += '</object>';
   }
@@ -313,9 +313,9 @@
 </script>
 <noscript>
 	<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0" width="550" height="400" id="redundant_event_handlers_as3" align="middle">
-	<param name="allowScriptAccess" value="sameDomain" />
-	<param name="allowFullScreen" value="false" />
-	<param name="movie" value="redundant_event_handlers_as3.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#ffffff" />	<embed src="redundant_event_handlers_as3.swf" quality="high" bgcolor="#ffffff" width="550" height="400" name="redundant_event_handlers_as3" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://get.adobe.com/flashplayer/" />
+	<param name="allowScriptAccess" value="sameDomain"/>
+	<param name="allowFullScreen" value="false"/>
+	<param name="movie" value="redundant_event_handlers_as3.swf"/><param name="quality" value="high"/><param name="bgcolor" value="#ffffff"/>	<embed src="redundant_event_handlers_as3.swf" quality="high" bgcolor="#ffffff" width="550" height="400" name="redundant_event_handlers_as3" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://get.adobe.com/flashplayer/"/>
 	</object>
 </noscript>
 </body>
diff --git a/wcag20/Techniques/working-examples/FLASH15/custom_reading_order_as3.html b/wcag20/Techniques/working-examples/FLASH15/custom_reading_order_as3.html
index 6674b8103c..0897e1cb74 100644
--- a/wcag20/Techniques/working-examples/FLASH15/custom_reading_order_as3.html
+++ b/wcag20/Techniques/working-examples/FLASH15/custom_reading_order_as3.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
-<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
+<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
 <title>custom_reading_order_as3</title>
 <script language="JavaScript" type="text/javascript">
 <!--
@@ -165,7 +165,7 @@
     str += '>';
     for (var i in params)
     {
-      str += '<param name="' + i + '" value="' + params[i] + '" /> ';
+      str += '<param name="' + i + '" value="' + params[i] + '"/> ';
     }
     str += '</object>';
   }
@@ -320,9 +320,9 @@
 </script>
 <noscript>
 	<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0" width="550" height="400" id="custom_reading_order_as3" align="middle">
-	<param name="allowScriptAccess" value="sameDomain" />
-	<param name="allowFullScreen" value="false" />
-	<param name="movie" value="custom_reading_order_as3.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#ffffff" />	<embed src="custom_reading_order_as3.swf" quality="high" bgcolor="#ffffff" width="550" height="400" name="custom_reading_order_as3" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://get.adobe.com/flashplayer/" />
+	<param name="allowScriptAccess" value="sameDomain"/>
+	<param name="allowFullScreen" value="false"/>
+	<param name="movie" value="custom_reading_order_as3.swf"/><param name="quality" value="high"/><param name="bgcolor" value="#ffffff"/>	<embed src="custom_reading_order_as3.swf" quality="high" bgcolor="#ffffff" width="550" height="400" name="custom_reading_order_as3" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://get.adobe.com/flashplayer/"/>
 	</object>
 </noscript>
 </body>
diff --git a/wcag20/Techniques/working-examples/FLASH15/custom_tab_order_as3.html b/wcag20/Techniques/working-examples/FLASH15/custom_tab_order_as3.html
index a232a3640d..f561a66e5e 100644
--- a/wcag20/Techniques/working-examples/FLASH15/custom_tab_order_as3.html
+++ b/wcag20/Techniques/working-examples/FLASH15/custom_tab_order_as3.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
-<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
+<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
 <title>custom_tab_order_as3</title>
 <script language="JavaScript" type="text/javascript">
 <!--
@@ -165,7 +165,7 @@
     str += '>';
     for (var i in params)
     {
-      str += '<param name="' + i + '" value="' + params[i] + '" /> ';
+      str += '<param name="' + i + '" value="' + params[i] + '"/> ';
     }
     str += '</object>';
   }
@@ -310,9 +310,9 @@
 </script>
 <noscript>
 	<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0" width="600" height="250" id="custom_tab_order_as3" align="middle">
-	<param name="allowScriptAccess" value="sameDomain" />
-	<param name="allowFullScreen" value="false" />
-	<param name="movie" value="custom_tab_order_as3.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#ffffff" />	<embed src="custom_tab_order_as3.swf" quality="high" bgcolor="#ffffff" width="600" height="250" name="custom_tab_order_as3" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://get.adobe.com/flashplayer/" />
+	<param name="allowScriptAccess" value="sameDomain"/>
+	<param name="allowFullScreen" value="false"/>
+	<param name="movie" value="custom_tab_order_as3.swf"/><param name="quality" value="high"/><param name="bgcolor" value="#ffffff"/>	<embed src="custom_tab_order_as3.swf" quality="high" bgcolor="#ffffff" width="600" height="250" name="custom_tab_order_as3" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://get.adobe.com/flashplayer/"/>
 	</object>
 </noscript>
 </body>
diff --git a/wcag20/Techniques/working-examples/FLASH16/device_independent_event_handler_on_component_as3.html b/wcag20/Techniques/working-examples/FLASH16/device_independent_event_handler_on_component_as3.html
index 12196ea817..f5716a91e9 100644
--- a/wcag20/Techniques/working-examples/FLASH16/device_independent_event_handler_on_component_as3.html
+++ b/wcag20/Techniques/working-examples/FLASH16/device_independent_event_handler_on_component_as3.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
-<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
+<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
 <title>device_independent_event_handler_on_component_as3</title>
 <script language="JavaScript" type="text/javascript">
 <!--
@@ -165,7 +165,7 @@
     str += '>';
     for (var i in params)
     {
-      str += '<param name="' + i + '" value="' + params[i] + '" /> ';
+      str += '<param name="' + i + '" value="' + params[i] + '"/> ';
     }
     str += '</object>';
   }
@@ -310,9 +310,9 @@
 </script>
 <noscript>
 	<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0" width="550" height="400" id="device_independent_event_handler_on_component_as3" align="middle">
-	<param name="allowScriptAccess" value="sameDomain" />
-	<param name="allowFullScreen" value="false" />
-	<param name="movie" value="device_independent_event_handler_on_component_as3.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#ffffff" />	<embed src="device_independent_event_handler_on_component_as3.swf" quality="high" bgcolor="#ffffff" width="550" height="400" name="device_independent_event_handler_on_component_as3" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://get.adobe.com/flashplayer/" />
+	<param name="allowScriptAccess" value="sameDomain"/>
+	<param name="allowFullScreen" value="false"/>
+	<param name="movie" value="device_independent_event_handler_on_component_as3.swf"/><param name="quality" value="high"/><param name="bgcolor" value="#ffffff"/>	<embed src="device_independent_event_handler_on_component_as3.swf" quality="high" bgcolor="#ffffff" width="550" height="400" name="device_independent_event_handler_on_component_as3" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://get.adobe.com/flashplayer/"/>
 	</object>
 </noscript>
 </body>
diff --git a/wcag20/Techniques/working-examples/FLASH17/keyboard_trap_fix_custom_as3.html b/wcag20/Techniques/working-examples/FLASH17/keyboard_trap_fix_custom_as3.html
index 977c91427a..ce6e4539bf 100644
--- a/wcag20/Techniques/working-examples/FLASH17/keyboard_trap_fix_custom_as3.html
+++ b/wcag20/Techniques/working-examples/FLASH17/keyboard_trap_fix_custom_as3.html
@@ -2,7 +2,7 @@
 <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
 	<head>
 		<title>Keyboard Trap Fix Example</title>
-		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+		<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 		<style type="text/css" media="screen">
 			html, body { 
 				font: normal 1em/1.2 sans-serif; 
@@ -28,15 +28,15 @@ <h1>Keyboard Trap Fix Example</h1>
 			<p>The following Flash movie automatically generates invisible links before and after the flash movie, allowing keyboard focus to move out of the Flash content.</p>
 			<div id="flashSample1"> 
 				<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="150" height="200" align="middle">
-					<param name="movie" value="keyboard_trap_fix_custom_as3.swf" />
-					<param name="bgcolor" value="#ffffff" />
+					<param name="movie" value="keyboard_trap_fix_custom_as3.swf"/>
+					<param name="bgcolor" value="#ffffff"/>
 					<!--[if !IE]>-->
 					<object type="application/x-shockwave-flash" data="keyboard_trap_fix_custom_as3.swf" width="150" height="200">
-						<param name="movie" value="keyboard_trap_fix_custom_as3.swf" />
-						<param name="bgcolor" value="#ffffff" />
+						<param name="movie" value="keyboard_trap_fix_custom_as3.swf"/>
+						<param name="bgcolor" value="#ffffff"/>
 					<!--<![endif]-->
 						<a href="http://www.adobe.com/go/getflash">
-							<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
+							<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player"/>
 
 						</a>
 					<!--[if !IE]>-->
@@ -51,16 +51,16 @@ <h1>Keyboard Trap Fix Example</h1>
 			<div id="flashSample2"> 
 				<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="150" height="200"
 					class="swfPrev-focus1 swfNext-focus2">
-					<param name="movie" value="keyboard_trap_fix_custom_as3.swf" />
-					<param name="bgcolor" value="#ffffff" />
+					<param name="movie" value="keyboard_trap_fix_custom_as3.swf"/>
+					<param name="bgcolor" value="#ffffff"/>
 					<!--[if !IE]>-->
 					<object type="application/x-shockwave-flash" data="keyboard_trap_fix_custom_as3.swf" width="150" height="200"
 						class="swfPrev-focus1 swfNext-focus2">
-						<param name="movie" value="keyboard_trap_fix_custom_as3.swf" />
-						<param name="bgcolor" value="#ffffff" />
+						<param name="movie" value="keyboard_trap_fix_custom_as3.swf"/>
+						<param name="bgcolor" value="#ffffff"/>
 					<!--<![endif]-->
 						<a href="http://www.adobe.com/go/getflash">
-							<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
+							<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player"/>
 						</a>
 					<!--[if !IE]>-->
 					</object>
diff --git a/wcag20/Techniques/working-examples/FLASH18/control_to_toggle_audio_as3.html b/wcag20/Techniques/working-examples/FLASH18/control_to_toggle_audio_as3.html
index 79e4c69edc..0a26fab07c 100644
--- a/wcag20/Techniques/working-examples/FLASH18/control_to_toggle_audio_as3.html
+++ b/wcag20/Techniques/working-examples/FLASH18/control_to_toggle_audio_as3.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
-<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
+<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
 <title>control_to_toggle_audio_as3</title>
 <script language="JavaScript" type="text/javascript">
 <!--
@@ -165,7 +165,7 @@
     str += '>';
     for (var i in params)
     {
-      str += '<param name="' + i + '" value="' + params[i] + '" /> ';
+      str += '<param name="' + i + '" value="' + params[i] + '"/> ';
     }
     str += '</object>';
   }
@@ -310,9 +310,9 @@
 </script>
 <noscript>
 	<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0" width="550" height="400" id="control_to_toggle_audio_as3" align="middle">
-	<param name="allowScriptAccess" value="sameDomain" />
-	<param name="allowFullScreen" value="false" />
-	<param name="movie" value="control_to_toggle_audio_as3.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#ffffff" />	<embed src="control_to_toggle_audio_as3.swf" quality="high" bgcolor="#ffffff" width="550" height="400" name="control_to_toggle_audio_as3" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://get.adobe.com/flashplayer/" />
+	<param name="allowScriptAccess" value="sameDomain"/>
+	<param name="allowFullScreen" value="false"/>
+	<param name="movie" value="control_to_toggle_audio_as3.swf"/><param name="quality" value="high"/><param name="bgcolor" value="#ffffff"/>	<embed src="control_to_toggle_audio_as3.swf" quality="high" bgcolor="#ffffff" width="550" height="400" name="control_to_toggle_audio_as3" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://get.adobe.com/flashplayer/"/>
 	</object>
 </noscript>
 </body>
diff --git a/wcag20/Techniques/working-examples/FLASH18/html_control_to_toggle_audio_as3.html b/wcag20/Techniques/working-examples/FLASH18/html_control_to_toggle_audio_as3.html
index 781b14b471..9c0fd63602 100644
--- a/wcag20/Techniques/working-examples/FLASH18/html_control_to_toggle_audio_as3.html
+++ b/wcag20/Techniques/working-examples/FLASH18/html_control_to_toggle_audio_as3.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
-<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
 <title>Flash Sound Toggle example</title>
 <script type="text/javascript" src="swfobject.js"></script>
 <script type="text/javascript">
@@ -25,7 +25,7 @@
 <body id="header">
 	<h1>Flash Automatic Sound Demo</h1>
 	<p>This page contains a Flash movie that automatically starts playing sound. Use the button below to stop or start the sound</p>
-	<input type="button" id="soundToggle" value="Stop Sound" />
+	<input type="button" id="soundToggle" value="Stop Sound"/>
 	<p id="flashPlaceHolder">Flash needs to be installed for this example to work</p>
 </body>
 </html>
diff --git a/wcag20/Techniques/working-examples/FLASH19/timeout_extension_as2.html b/wcag20/Techniques/working-examples/FLASH19/timeout_extension_as2.html
index 391fb81bd1..4c653082a8 100644
--- a/wcag20/Techniques/working-examples/FLASH19/timeout_extension_as2.html
+++ b/wcag20/Techniques/working-examples/FLASH19/timeout_extension_as2.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
-<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
+<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
 <title>timeout_extension_as2</title>
 <script language="JavaScript" type="text/javascript">
 <!--
@@ -165,7 +165,7 @@
     str += '>';
     for (var i in params)
     {
-      str += '<param name="' + i + '" value="' + params[i] + '" /> ';
+      str += '<param name="' + i + '" value="' + params[i] + '"/> ';
     }
     str += '</object>';
   }
@@ -313,9 +313,9 @@
 </script>
 <noscript>
 	<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0" width="550" height="400" id="timeout_extension_as2" align="middle">
-	<param name="allowScriptAccess" value="sameDomain" />
-	<param name="allowFullScreen" value="false" />
-	<param name="movie" value="timeout_extension_as2.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#ffffff" />	<embed src="timeout_extension_as2.swf" quality="high" bgcolor="#ffffff" width="550" height="400" name="timeout_extension_as2" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://get.adobe.com/flashplayer/" />
+	<param name="allowScriptAccess" value="sameDomain"/>
+	<param name="allowFullScreen" value="false"/>
+	<param name="movie" value="timeout_extension_as2.swf"/><param name="quality" value="high"/><param name="bgcolor" value="#ffffff"/>	<embed src="timeout_extension_as2.swf" quality="high" bgcolor="#ffffff" width="550" height="400" name="timeout_extension_as2" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://get.adobe.com/flashplayer/"/>
 	</object>
 </noscript>
 </body>
diff --git a/wcag20/Techniques/working-examples/FLASH20/change_styles_on_focus_as3.html b/wcag20/Techniques/working-examples/FLASH20/change_styles_on_focus_as3.html
index 80fe02880d..cf04a0c5ea 100644
--- a/wcag20/Techniques/working-examples/FLASH20/change_styles_on_focus_as3.html
+++ b/wcag20/Techniques/working-examples/FLASH20/change_styles_on_focus_as3.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
-<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
+<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
 <title>change_styles_on_focus_as3</title>
 <script language="JavaScript" type="text/javascript">
 <!--
@@ -165,7 +165,7 @@
     str += '>';
     for (var i in params)
     {
-      str += '<param name="' + i + '" value="' + params[i] + '" /> ';
+      str += '<param name="' + i + '" value="' + params[i] + '"/> ';
     }
     str += '</object>';
   }
@@ -310,9 +310,9 @@
 </script>
 <noscript>
 	<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0" width="550" height="400" id="change_styles_on_focus_as3" align="middle">
-	<param name="allowScriptAccess" value="sameDomain" />
-	<param name="allowFullScreen" value="false" />
-	<param name="movie" value="change_styles_on_focus_as3.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#ffffff" />	<embed src="change_styles_on_focus_as3.swf" quality="high" bgcolor="#ffffff" width="550" height="400" name="change_styles_on_focus_as3" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://get.adobe.com/flashplayer/" />
+	<param name="allowScriptAccess" value="sameDomain"/>
+	<param name="allowFullScreen" value="false"/>
+	<param name="movie" value="change_styles_on_focus_as3.swf"/><param name="quality" value="high"/><param name="bgcolor" value="#ffffff"/>	<embed src="change_styles_on_focus_as3.swf" quality="high" bgcolor="#ffffff" width="550" height="400" name="change_styles_on_focus_as3" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://get.adobe.com/flashplayer/"/>
 	</object>
 </noscript>
 </body>
diff --git a/wcag20/Techniques/working-examples/FLASH21/using_datagrid_to_associate_headers_with_cells_as3.html b/wcag20/Techniques/working-examples/FLASH21/using_datagrid_to_associate_headers_with_cells_as3.html
index 2d6f9abdea..7c49b01c7e 100644
--- a/wcag20/Techniques/working-examples/FLASH21/using_datagrid_to_associate_headers_with_cells_as3.html
+++ b/wcag20/Techniques/working-examples/FLASH21/using_datagrid_to_associate_headers_with_cells_as3.html
@@ -2,7 +2,7 @@
 <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
 	<head>
 		<title>using_datagrid_to_associate_headers_with_cells_as3</title>
-		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+		<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 		<style type="text/css" media="screen">
 		html, body { height:100%; background-color: #ffffff;}
 		body { margin:0; padding:0; overflow:hidden; }
@@ -12,33 +12,33 @@
 	<body>
 		<div id="flashContent">
 			<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="550" height="400" id="using_datagrid_to_associate_headers_with_cells_as3" align="middle">
-				<param name="movie" value="using_datagrid_to_associate_headers_with_cells_as3.swf" />
-				<param name="quality" value="high" />
-				<param name="bgcolor" value="#ffffff" />
-				<param name="play" value="true" />
-				<param name="loop" value="true" />
-				<param name="wmode" value="window" />
-				<param name="scale" value="showall" />
-				<param name="menu" value="true" />
-				<param name="devicefont" value="false" />
-				<param name="salign" value="" />
-				<param name="allowScriptAccess" value="sameDomain" />
+				<param name="movie" value="using_datagrid_to_associate_headers_with_cells_as3.swf"/>
+				<param name="quality" value="high"/>
+				<param name="bgcolor" value="#ffffff"/>
+				<param name="play" value="true"/>
+				<param name="loop" value="true"/>
+				<param name="wmode" value="window"/>
+				<param name="scale" value="showall"/>
+				<param name="menu" value="true"/>
+				<param name="devicefont" value="false"/>
+				<param name="salign" value=""/>
+				<param name="allowScriptAccess" value="sameDomain"/>
 				<!--[if !IE]>-->
 				<object type="application/x-shockwave-flash" data="using_datagrid_to_associate_headers_with_cells_as3.swf" width="550" height="400">
-					<param name="movie" value="using_datagrid_to_associate_headers_with_cells_as3.swf" />
-					<param name="quality" value="high" />
-					<param name="bgcolor" value="#ffffff" />
-					<param name="play" value="true" />
-					<param name="loop" value="true" />
-					<param name="wmode" value="window" />
-					<param name="scale" value="showall" />
-					<param name="menu" value="true" />
-					<param name="devicefont" value="false" />
-					<param name="salign" value="" />
-					<param name="allowScriptAccess" value="sameDomain" />
+					<param name="movie" value="using_datagrid_to_associate_headers_with_cells_as3.swf"/>
+					<param name="quality" value="high"/>
+					<param name="bgcolor" value="#ffffff"/>
+					<param name="play" value="true"/>
+					<param name="loop" value="true"/>
+					<param name="wmode" value="window"/>
+					<param name="scale" value="showall"/>
+					<param name="menu" value="true"/>
+					<param name="devicefont" value="false"/>
+					<param name="salign" value=""/>
+					<param name="allowScriptAccess" value="sameDomain"/>
 				<!--<![endif]-->
 					<a href="http://get.adobe.com/flashplayer/">
-						<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
+						<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player"/>
 					</a>
 				<!--[if !IE]>-->
 				</object>
diff --git a/wcag20/Techniques/working-examples/FLASH22/event_handlers_to_static_objects_as3.html b/wcag20/Techniques/working-examples/FLASH22/event_handlers_to_static_objects_as3.html
index f6a54c520f..bc727f0914 100644
--- a/wcag20/Techniques/working-examples/FLASH22/event_handlers_to_static_objects_as3.html
+++ b/wcag20/Techniques/working-examples/FLASH22/event_handlers_to_static_objects_as3.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
-<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
+<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
 <title>event_handlers_to_static_objects_as3</title>
 <script language="JavaScript" type="text/javascript">
 <!--
@@ -165,7 +165,7 @@
     str += '>';
     for (var i in params)
     {
-      str += '<param name="' + i + '" value="' + params[i] + '" /> ';
+      str += '<param name="' + i + '" value="' + params[i] + '"/> ';
     }
     str += '</object>';
   }
@@ -310,9 +310,9 @@
 </script>
 <noscript>
 	<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0" width="550" height="400" id="event_handlers_to_static_objects_as3" align="middle">
-	<param name="allowScriptAccess" value="sameDomain" />
-	<param name="allowFullScreen" value="false" />
-	<param name="movie" value="event_handlers_to_static_objects_as3.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#ffffff" />	<embed src="event_handlers_to_static_objects_as3.swf" quality="high" bgcolor="#ffffff" width="550" height="400" name="event_handlers_to_static_objects_as3" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://get.adobe.com/flashplayer/" />
+	<param name="allowScriptAccess" value="sameDomain"/>
+	<param name="allowFullScreen" value="false"/>
+	<param name="movie" value="event_handlers_to_static_objects_as3.swf"/><param name="quality" value="high"/><param name="bgcolor" value="#ffffff"/>	<embed src="event_handlers_to_static_objects_as3.swf" quality="high" bgcolor="#ffffff" width="550" height="400" name="event_handlers_to_static_objects_as3" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://get.adobe.com/flashplayer/"/>
 	</object>
 </noscript>
 </body>
diff --git a/wcag20/Techniques/working-examples/FLASH23/datagrid_with_summary_as3.html b/wcag20/Techniques/working-examples/FLASH23/datagrid_with_summary_as3.html
index 14786fde3e..ecb2ea9147 100644
--- a/wcag20/Techniques/working-examples/FLASH23/datagrid_with_summary_as3.html
+++ b/wcag20/Techniques/working-examples/FLASH23/datagrid_with_summary_as3.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
-<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
+<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
 <title>datagrid_with_summary_as3</title>
 <script language="JavaScript" type="text/javascript">
 <!--
@@ -165,7 +165,7 @@
     str += '>';
     for (var i in params)
     {
-      str += '<param name="' + i + '" value="' + params[i] + '" /> ';
+      str += '<param name="' + i + '" value="' + params[i] + '"/> ';
     }
     str += '</object>';
   }
@@ -310,9 +310,9 @@
 </script>
 <noscript>
 	<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0" width="550" height="400" id="datagrid_with_summary_as3" align="middle">
-	<param name="allowScriptAccess" value="sameDomain" />
-	<param name="allowFullScreen" value="false" />
-	<param name="movie" value="datagrid_with_summary_as3.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#ffffff" />	<embed src="datagrid_with_summary_as3.swf" quality="high" bgcolor="#ffffff" width="550" height="400" name="datagrid_with_summary_as3" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://get.adobe.com/flashplayer/" />
+	<param name="allowScriptAccess" value="sameDomain"/>
+	<param name="allowFullScreen" value="false"/>
+	<param name="movie" value="datagrid_with_summary_as3.swf"/><param name="quality" value="high"/><param name="bgcolor" value="#ffffff"/>	<embed src="datagrid_with_summary_as3.swf" quality="high" bgcolor="#ffffff" width="550" height="400" name="datagrid_with_summary_as3" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://get.adobe.com/flashplayer/"/>
 	</object>
 </noscript>
 </body>
diff --git a/wcag20/Techniques/working-examples/FLASH24/checkbox_for_extending_timelimit_as3.html b/wcag20/Techniques/working-examples/FLASH24/checkbox_for_extending_timelimit_as3.html
index e4efd1add1..c63df10be2 100644
--- a/wcag20/Techniques/working-examples/FLASH24/checkbox_for_extending_timelimit_as3.html
+++ b/wcag20/Techniques/working-examples/FLASH24/checkbox_for_extending_timelimit_as3.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
-<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
+<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
 <title>checkbox_for_extending_timelimit_as3</title>
 <script language="JavaScript" type="text/javascript">
 <!--
@@ -165,7 +165,7 @@
     str += '>';
     for (var i in params)
     {
-      str += '<param name="' + i + '" value="' + params[i] + '" /> ';
+      str += '<param name="' + i + '" value="' + params[i] + '"/> ';
     }
     str += '</object>';
   }
@@ -313,9 +313,9 @@
 </script>
 <noscript>
 	<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0" width="550" height="500" id="checkbox_for_extending_timelimit_as3" align="middle">
-	<param name="allowScriptAccess" value="sameDomain" />
-	<param name="allowFullScreen" value="false" />
-	<param name="movie" value="checkbox_for_extending_timelimit_as3.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#ffffff" />	<embed src="checkbox_for_extending_timelimit_as3.swf" quality="high" bgcolor="#ffffff" width="550" height="500" name="checkbox_for_extending_timelimit_as3" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://get.adobe.com/flashplayer/" />
+	<param name="allowScriptAccess" value="sameDomain"/>
+	<param name="allowFullScreen" value="false"/>
+	<param name="movie" value="checkbox_for_extending_timelimit_as3.swf"/><param name="quality" value="high"/><param name="bgcolor" value="#ffffff"/>	<embed src="checkbox_for_extending_timelimit_as3.swf" quality="high" bgcolor="#ffffff" width="550" height="500" name="checkbox_for_extending_timelimit_as3" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://get.adobe.com/flashplayer/"/>
 	</object>
 </noscript>
 </body>
diff --git a/wcag20/Techniques/working-examples/FLASH24/timeout_extension_as2.html b/wcag20/Techniques/working-examples/FLASH24/timeout_extension_as2.html
index 391fb81bd1..4c653082a8 100644
--- a/wcag20/Techniques/working-examples/FLASH24/timeout_extension_as2.html
+++ b/wcag20/Techniques/working-examples/FLASH24/timeout_extension_as2.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
-<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
+<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
 <title>timeout_extension_as2</title>
 <script language="JavaScript" type="text/javascript">
 <!--
@@ -165,7 +165,7 @@
     str += '>';
     for (var i in params)
     {
-      str += '<param name="' + i + '" value="' + params[i] + '" /> ';
+      str += '<param name="' + i + '" value="' + params[i] + '"/> ';
     }
     str += '</object>';
   }
@@ -313,9 +313,9 @@
 </script>
 <noscript>
 	<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0" width="550" height="400" id="timeout_extension_as2" align="middle">
-	<param name="allowScriptAccess" value="sameDomain" />
-	<param name="allowFullScreen" value="false" />
-	<param name="movie" value="timeout_extension_as2.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#ffffff" />	<embed src="timeout_extension_as2.swf" quality="high" bgcolor="#ffffff" width="550" height="400" name="timeout_extension_as2" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://get.adobe.com/flashplayer/" />
+	<param name="allowScriptAccess" value="sameDomain"/>
+	<param name="allowFullScreen" value="false"/>
+	<param name="movie" value="timeout_extension_as2.swf"/><param name="quality" value="high"/><param name="bgcolor" value="#ffffff"/>	<embed src="timeout_extension_as2.swf" quality="high" bgcolor="#ffffff" width="550" height="400" name="timeout_extension_as2" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://get.adobe.com/flashplayer/"/>
 	</object>
 </noscript>
 </body>
diff --git a/wcag20/Techniques/working-examples/FLASH25/accessible_name_for_form_components_as2.html b/wcag20/Techniques/working-examples/FLASH25/accessible_name_for_form_components_as2.html
index c4b1ddd697..3446927c0b 100644
--- a/wcag20/Techniques/working-examples/FLASH25/accessible_name_for_form_components_as2.html
+++ b/wcag20/Techniques/working-examples/FLASH25/accessible_name_for_form_components_as2.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
-<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
+<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
 <title>accessible_name_for_form_components_as2</title>
 <script language="JavaScript" type="text/javascript">
 <!--
@@ -165,7 +165,7 @@
     str += '>';
     for (var i in params)
     {
-      str += '<param name="' + i + '" value="' + params[i] + '" /> ';
+      str += '<param name="' + i + '" value="' + params[i] + '"/> ';
     }
     str += '</object>';
   }
@@ -310,9 +310,9 @@
 </script>
 <noscript>
 	<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0" width="550" height="400" id="accessible_name_for_form_components_as2" align="middle">
-	<param name="allowScriptAccess" value="sameDomain" />
-	<param name="allowFullScreen" value="false" />
-	<param name="movie" value="accessible_name_for_form_components_as2.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#ffffff" />	<embed src="accessible_name_for_form_components_as2.swf" quality="high" bgcolor="#ffffff" width="550" height="400" name="accessible_name_for_form_components_as2" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://get.adobe.com/flashplayer/" />
+	<param name="allowScriptAccess" value="sameDomain"/>
+	<param name="allowFullScreen" value="false"/>
+	<param name="movie" value="accessible_name_for_form_components_as2.swf"/><param name="quality" value="high"/><param name="bgcolor" value="#ffffff"/>	<embed src="accessible_name_for_form_components_as2.swf" quality="high" bgcolor="#ffffff" width="550" height="400" name="accessible_name_for_form_components_as2" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://get.adobe.com/flashplayer/"/>
 	</object>
 </noscript>
 </body>
diff --git a/wcag20/Techniques/working-examples/FLASH25/accessible_name_for_form_components_as3.html b/wcag20/Techniques/working-examples/FLASH25/accessible_name_for_form_components_as3.html
index b41f749717..c4bf519639 100644
--- a/wcag20/Techniques/working-examples/FLASH25/accessible_name_for_form_components_as3.html
+++ b/wcag20/Techniques/working-examples/FLASH25/accessible_name_for_form_components_as3.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
-<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
+<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
 <title>accessible_name_for_form_components_as3</title>
 <script language="JavaScript" type="text/javascript">
 <!--
@@ -165,7 +165,7 @@
     str += '>';
     for (var i in params)
     {
-      str += '<param name="' + i + '" value="' + params[i] + '" /> ';
+      str += '<param name="' + i + '" value="' + params[i] + '"/> ';
     }
     str += '</object>';
   }
@@ -310,9 +310,9 @@
 </script>
 <noscript>
 	<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0" width="550" height="400" id="accessible_name_for_form_components_as3" align="middle">
-	<param name="allowScriptAccess" value="sameDomain" />
-	<param name="allowFullScreen" value="false" />
-	<param name="movie" value="accessible_name_for_form_components_as3.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#ffffff" />	<embed src="accessible_name_for_form_components_as3.swf" quality="high" bgcolor="#ffffff" width="550" height="400" name="accessible_name_for_form_components_as3" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://get.adobe.com/flashplayer/" />
+	<param name="allowScriptAccess" value="sameDomain"/>
+	<param name="allowFullScreen" value="false"/>
+	<param name="movie" value="accessible_name_for_form_components_as3.swf"/><param name="quality" value="high"/><param name="bgcolor" value="#ffffff"/>	<embed src="accessible_name_for_form_components_as3.swf" quality="high" bgcolor="#ffffff" width="550" height="400" name="accessible_name_for_form_components_as3" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://get.adobe.com/flashplayer/"/>
 	</object>
 </noscript>
 </body>
diff --git a/wcag20/Techniques/working-examples/FLASH26/audio_descriptions_as3.html b/wcag20/Techniques/working-examples/FLASH26/audio_descriptions_as3.html
index 326fb11e16..f925f76a42 100644
--- a/wcag20/Techniques/working-examples/FLASH26/audio_descriptions_as3.html
+++ b/wcag20/Techniques/working-examples/FLASH26/audio_descriptions_as3.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
-<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
+<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
 <title>audio_descriptions_as3</title>
 <script language="JavaScript" type="text/javascript">
 <!--
@@ -165,7 +165,7 @@
     str += '>';
     for (var i in params)
     {
-      str += '<param name="' + i + '" value="' + params[i] + '" /> ';
+      str += '<param name="' + i + '" value="' + params[i] + '"/> ';
     }
     str += '</object>';
   }
@@ -310,9 +310,9 @@
 </script>
 <noscript>
 	<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="400" height="320" id="audio_descriptions_as3" align="middle">
-	<param name="allowScriptAccess" value="sameDomain" />
-	<param name="allowFullScreen" value="false" />
-	<param name="movie" value="audio_descriptions_as3.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#ffffff" />	<embed src="audio_descriptions_as3.swf" quality="high" bgcolor="#ffffff" width="400" height="320" name="audio_descriptions_as3" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://get.adobe.com/flashplayer/" />
+	<param name="allowScriptAccess" value="sameDomain"/>
+	<param name="allowFullScreen" value="false"/>
+	<param name="movie" value="audio_descriptions_as3.swf"/><param name="quality" value="high"/><param name="bgcolor" value="#ffffff"/>	<embed src="audio_descriptions_as3.swf" quality="high" bgcolor="#ffffff" width="400" height="320" name="audio_descriptions_as3" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://get.adobe.com/flashplayer/"/>
 	</object>
 </noscript>
 </body>
diff --git a/wcag20/Techniques/working-examples/FLASH28/ascii_art_alternatives_as3.html b/wcag20/Techniques/working-examples/FLASH28/ascii_art_alternatives_as3.html
index 14d7b3145d..904e9011bb 100644
--- a/wcag20/Techniques/working-examples/FLASH28/ascii_art_alternatives_as3.html
+++ b/wcag20/Techniques/working-examples/FLASH28/ascii_art_alternatives_as3.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
-<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
+<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
 <title>ascii_art_alternatives_as3</title>
 <script language="JavaScript" type="text/javascript">
 <!--
@@ -165,7 +165,7 @@
     str += '>';
     for (var i in params)
     {
-      str += '<param name="' + i + '" value="' + params[i] + '" /> ';
+      str += '<param name="' + i + '" value="' + params[i] + '"/> ';
     }
     str += '</object>';
   }
@@ -313,9 +313,9 @@
 </script>
 <noscript>
 	<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0" width="550" height="400" id="ascii_art_alternatives_as3" align="middle">
-	<param name="allowScriptAccess" value="sameDomain" />
-	<param name="allowFullScreen" value="false" />
-	<param name="movie" value="ascii_art_alternatives_as3.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#ffffff" />	<embed src="ascii_art_alternatives_as3.swf" quality="high" bgcolor="#ffffff" width="550" height="400" name="ascii_art_alternatives_as3" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://get.adobe.com/flashplayer/" />
+	<param name="allowScriptAccess" value="sameDomain"/>
+	<param name="allowFullScreen" value="false"/>
+	<param name="movie" value="ascii_art_alternatives_as3.swf"/><param name="quality" value="high"/><param name="bgcolor" value="#ffffff"/>	<embed src="ascii_art_alternatives_as3.swf" quality="high" bgcolor="#ffffff" width="550" height="400" name="ascii_art_alternatives_as3" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://get.adobe.com/flashplayer/"/>
 	</object>
 </noscript>
 </body>
diff --git a/wcag20/Techniques/working-examples/FLASH29/setting_label_property_as3.html b/wcag20/Techniques/working-examples/FLASH29/setting_label_property_as3.html
index 2100fa4604..2aadd661be 100644
--- a/wcag20/Techniques/working-examples/FLASH29/setting_label_property_as3.html
+++ b/wcag20/Techniques/working-examples/FLASH29/setting_label_property_as3.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
-<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
+<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
 <title>setting_label_property_as3</title>
 <script language="JavaScript" type="text/javascript">
 <!--
@@ -165,7 +165,7 @@
     str += '>';
     for (var i in params)
     {
-      str += '<param name="' + i + '" value="' + params[i] + '" /> ';
+      str += '<param name="' + i + '" value="' + params[i] + '"/> ';
     }
     str += '</object>';
   }
@@ -310,9 +310,9 @@
 </script>
 <noscript>
 	<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0" width="550" height="400" id="setting_label_property_as3" align="middle">
-	<param name="allowScriptAccess" value="sameDomain" />
-	<param name="allowFullScreen" value="false" />
-	<param name="movie" value="setting_label_property_as3.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#ffffff" />	<embed src="setting_label_property_as3.swf" quality="high" bgcolor="#ffffff" width="550" height="400" name="setting_label_property_as3" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://get.adobe.com/flashplayer/" />
+	<param name="allowScriptAccess" value="sameDomain"/>
+	<param name="allowFullScreen" value="false"/>
+	<param name="movie" value="setting_label_property_as3.swf"/><param name="quality" value="high"/><param name="bgcolor" value="#ffffff"/>	<embed src="setting_label_property_as3.swf" quality="high" bgcolor="#ffffff" width="550" height="400" name="setting_label_property_as3" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://get.adobe.com/flashplayer/"/>
 	</object>
 </noscript>
 </body>
diff --git a/wcag20/Techniques/working-examples/FLASH30/Text_description_for_simpleimage_buttons_as3.html b/wcag20/Techniques/working-examples/FLASH30/Text_description_for_simpleimage_buttons_as3.html
index 717b00c760..96035b6fc9 100644
--- a/wcag20/Techniques/working-examples/FLASH30/Text_description_for_simpleimage_buttons_as3.html
+++ b/wcag20/Techniques/working-examples/FLASH30/Text_description_for_simpleimage_buttons_as3.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
-<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
+<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
 <title>Text_description_for_simpleimage_buttons_as3</title>
 <script language="JavaScript" type="text/javascript">
 <!--
@@ -165,7 +165,7 @@
     str += '>';
     for (var i in params)
     {
-      str += '<param name="' + i + '" value="' + params[i] + '" /> ';
+      str += '<param name="' + i + '" value="' + params[i] + '"/> ';
     }
     str += '</object>';
   }
@@ -310,9 +310,9 @@
 </script>
 <noscript>
 	<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="60" height="60" id="Text_description_for_simpleimage_buttons_as3" align="middle">
-	<param name="allowScriptAccess" value="sameDomain" />
-	<param name="allowFullScreen" value="false" />
-	<param name="movie" value="Text_description_for_simpleimage_buttons_as3.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#ffffff" />	<embed src="Text_description_for_simpleimage_buttons_as3.swf" quality="high" bgcolor="#ffffff" width="60" height="60" name="Text_description_for_simpleimage_buttons_as3" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://get.adobe.com/flashplayer/" />
+	<param name="allowScriptAccess" value="sameDomain"/>
+	<param name="allowFullScreen" value="false"/>
+	<param name="movie" value="Text_description_for_simpleimage_buttons_as3.swf"/><param name="quality" value="high"/><param name="bgcolor" value="#ffffff"/>	<embed src="Text_description_for_simpleimage_buttons_as3.swf" quality="high" bgcolor="#ffffff" width="60" height="60" name="Text_description_for_simpleimage_buttons_as3" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://get.adobe.com/flashplayer/"/>
 	</object>
 </noscript>
 </body>
diff --git a/wcag20/Techniques/working-examples/FLASH30/text_description_for_image_buttons_as3.html b/wcag20/Techniques/working-examples/FLASH30/text_description_for_image_buttons_as3.html
index 75c17bac10..d7d0b5200e 100644
--- a/wcag20/Techniques/working-examples/FLASH30/text_description_for_image_buttons_as3.html
+++ b/wcag20/Techniques/working-examples/FLASH30/text_description_for_image_buttons_as3.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
-<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
+<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
 <title>text_description_for_image_buttons_as3</title>
 <script language="JavaScript" type="text/javascript">
 <!--
@@ -165,7 +165,7 @@
     str += '>';
     for (var i in params)
     {
-      str += '<param name="' + i + '" value="' + params[i] + '" /> ';
+      str += '<param name="' + i + '" value="' + params[i] + '"/> ';
     }
     str += '</object>';
   }
@@ -310,9 +310,9 @@
 </script>
 <noscript>
 	<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0" width="550" height="400" id="text_description_for_image_buttons_as3" align="middle">
-	<param name="allowScriptAccess" value="sameDomain" />
-	<param name="allowFullScreen" value="false" />
-	<param name="movie" value="text_description_for_image_buttons_as3.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#ffffff" />	<embed src="text_description_for_image_buttons_as3.swf" quality="high" bgcolor="#ffffff" width="550" height="400" name="text_description_for_image_buttons_as3" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://get.adobe.com/flashplayer/" />
+	<param name="allowScriptAccess" value="sameDomain"/>
+	<param name="allowFullScreen" value="false"/>
+	<param name="movie" value="text_description_for_image_buttons_as3.swf"/><param name="quality" value="high"/><param name="bgcolor" value="#ffffff"/>	<embed src="text_description_for_image_buttons_as3.swf" quality="high" bgcolor="#ffffff" width="550" height="400" name="text_description_for_image_buttons_as3" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://get.adobe.com/flashplayer/"/>
 	</object>
 </noscript>
 </body>
diff --git a/wcag20/Techniques/working-examples/FLASH31/datagrid_with_caption_as3.html b/wcag20/Techniques/working-examples/FLASH31/datagrid_with_caption_as3.html
index 58de127278..c3c4ff4a2f 100644
--- a/wcag20/Techniques/working-examples/FLASH31/datagrid_with_caption_as3.html
+++ b/wcag20/Techniques/working-examples/FLASH31/datagrid_with_caption_as3.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
-<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
+<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
 <title>datagrid_with_caption_as3</title>
 <script language="JavaScript" type="text/javascript">
 <!--
@@ -165,7 +165,7 @@
     str += '>';
     for (var i in params)
     {
-      str += '<param name="' + i + '" value="' + params[i] + '" /> ';
+      str += '<param name="' + i + '" value="' + params[i] + '"/> ';
     }
     str += '</object>';
   }
@@ -310,9 +310,9 @@
 </script>
 <noscript>
 	<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0" width="550" height="400" id="datagrid_with_caption_as3" align="middle">
-	<param name="allowScriptAccess" value="sameDomain" />
-	<param name="allowFullScreen" value="false" />
-	<param name="movie" value="datagrid_with_caption_as3.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#ffffff" />	<embed src="datagrid_with_caption_as3.swf" quality="high" bgcolor="#ffffff" width="550" height="400" name="datagrid_with_caption_as3" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://get.adobe.com/flashplayer/" />
+	<param name="allowScriptAccess" value="sameDomain"/>
+	<param name="allowFullScreen" value="false"/>
+	<param name="movie" value="datagrid_with_caption_as3.swf"/><param name="quality" value="high"/><param name="bgcolor" value="#ffffff"/>	<embed src="datagrid_with_caption_as3.swf" quality="high" bgcolor="#ffffff" width="550" height="400" name="datagrid_with_caption_as3" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://get.adobe.com/flashplayer/"/>
 	</object>
 </noscript>
 </body>
diff --git a/wcag20/Techniques/working-examples/FLASH32/using_auto_labeling_to_associate_label_text_with_controls_as3.html b/wcag20/Techniques/working-examples/FLASH32/using_auto_labeling_to_associate_label_text_with_controls_as3.html
index 6afb7648be..e72973f8be 100644
--- a/wcag20/Techniques/working-examples/FLASH32/using_auto_labeling_to_associate_label_text_with_controls_as3.html
+++ b/wcag20/Techniques/working-examples/FLASH32/using_auto_labeling_to_associate_label_text_with_controls_as3.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
-<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
+<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
 <title>using_auto_labeling_to_associate_label_text_with_controls_as3</title>
 <script language="JavaScript" type="text/javascript">
 <!--
@@ -165,7 +165,7 @@
     str += '>';
     for (var i in params)
     {
-      str += '<param name="' + i + '" value="' + params[i] + '" /> ';
+      str += '<param name="' + i + '" value="' + params[i] + '"/> ';
     }
     str += '</object>';
   }
@@ -310,9 +310,9 @@
 </script>
 <noscript>
 	<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0" width="300" height="450" id="using_auto_labeling_to_associate_label_text_with_controls_as3" align="middle">
-	<param name="allowScriptAccess" value="sameDomain" />
-	<param name="allowFullScreen" value="false" />
-	<param name="movie" value="using_auto_labeling_to_associate_label_text_with_controls_as3.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#ffffff" />	<embed src="using_auto_labeling_to_associate_label_text_with_controls_as3.swf" quality="high" bgcolor="#ffffff" width="300" height="450" name="using_auto_labeling_to_associate_label_text_with_controls_as3" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://get.adobe.com/flashplayer/" />
+	<param name="allowScriptAccess" value="sameDomain"/>
+	<param name="allowFullScreen" value="false"/>
+	<param name="movie" value="using_auto_labeling_to_associate_label_text_with_controls_as3.swf"/><param name="quality" value="high"/><param name="bgcolor" value="#ffffff"/>	<embed src="using_auto_labeling_to_associate_label_text_with_controls_as3.swf" quality="high" bgcolor="#ffffff" width="300" height="450" name="using_auto_labeling_to_associate_label_text_with_controls_as3" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://get.adobe.com/flashplayer/"/>
 	</object>
 </noscript>
 </body>
diff --git a/wcag20/Techniques/working-examples/FLASH33/scale_movie_dimensions_on_text_resize_as3.html b/wcag20/Techniques/working-examples/FLASH33/scale_movie_dimensions_on_text_resize_as3.html
index 752bd8e64d..9d142691d1 100644
--- a/wcag20/Techniques/working-examples/FLASH33/scale_movie_dimensions_on_text_resize_as3.html
+++ b/wcag20/Techniques/working-examples/FLASH33/scale_movie_dimensions_on_text_resize_as3.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
-<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
 <title>Flash Resize example</title>
 <script type="text/javascript" src="swfobject/swfobject.js"></script>
 <script type="text/javascript">
diff --git a/wcag20/Techniques/working-examples/FLASH33/swfobject/index.html b/wcag20/Techniques/working-examples/FLASH33/swfobject/index.html
index 3264034ae4..f5eb9bf12b 100644
--- a/wcag20/Techniques/working-examples/FLASH33/swfobject/index.html
+++ b/wcag20/Techniques/working-examples/FLASH33/swfobject/index.html
@@ -2,7 +2,7 @@
 <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
 	<head>
 		<title>SWFObject 2 static publishing example page</title>
-		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
+		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
 		<script type="text/javascript" src="swfobject.js"></script>
 		<script type="text/javascript">
 		swfobject.registerObject("myId", "9.0.0", "expressInstall.swf");
@@ -11,13 +11,13 @@
 	<body>
 		<div>	
 			<object id="myId" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="300" height="120">
-				<param name="movie" value="test.swf" />
+				<param name="movie" value="test.swf"/>
         		<!--[if !IE]>-->
 				<object type="application/x-shockwave-flash" data="test.swf" width="300" height="120">
 				<!--<![endif]-->
 				<div>
 					<h1>Alternative content</h1>
-					<p><a href="http://get.adobe.com/flashplayer/"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p>
+					<p><a href="http://get.adobe.com/flashplayer/"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player"/></a></p>
 				</div>
 				<!--[if !IE]>-->
 				</object>
diff --git a/wcag20/Techniques/working-examples/FLASH33/swfobject/index_dynamic.html b/wcag20/Techniques/working-examples/FLASH33/swfobject/index_dynamic.html
index 3c36217845..83edd10074 100644
--- a/wcag20/Techniques/working-examples/FLASH33/swfobject/index_dynamic.html
+++ b/wcag20/Techniques/working-examples/FLASH33/swfobject/index_dynamic.html
@@ -2,7 +2,7 @@
 <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
 	<head>
 		<title>SWFObject 2 dynamic publishing example page</title>
-		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
+		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
 		<script type="text/javascript" src="swfobject.js"></script>
 		<script type="text/javascript">
 		swfobject.embedSWF("test.swf", "myContent", "300", "120", "9.0.0", "expressInstall.swf");
@@ -11,7 +11,7 @@
 	<body>
 		<div id="myContent">
 			<h1>Alternative content</h1>
-			<p><a href="http://get.adobe.com/flashplayer/"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p>
+			<p><a href="http://get.adobe.com/flashplayer/"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player"/></a></p>
 		</div>
 	</body>
 </html>
diff --git a/wcag20/Techniques/working-examples/FLASH34/screen_reader_detection_to_prevent_autoplay_as3.html b/wcag20/Techniques/working-examples/FLASH34/screen_reader_detection_to_prevent_autoplay_as3.html
index 032a3c02b3..83b4f2e527 100644
--- a/wcag20/Techniques/working-examples/FLASH34/screen_reader_detection_to_prevent_autoplay_as3.html
+++ b/wcag20/Techniques/working-examples/FLASH34/screen_reader_detection_to_prevent_autoplay_as3.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
-<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
+<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
 <title>screen_reader_detection_to_prevent_autoplay_as3</title>
 <script language="JavaScript" type="text/javascript">
 <!--
@@ -165,7 +165,7 @@
     str += '>';
     for (var i in params)
     {
-      str += '<param name="' + i + '" value="' + params[i] + '" /> ';
+      str += '<param name="' + i + '" value="' + params[i] + '"/> ';
     }
     str += '</object>';
   }
@@ -310,9 +310,9 @@
 </script>
 <noscript>
 	<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0" width="550" height="400" id="screen_reader_detection_to_prevent_autoplay_as3" align="middle">
-	<param name="allowScriptAccess" value="sameDomain" />
-	<param name="allowFullScreen" value="false" />
-	<param name="movie" value="screen_reader_detection_to_prevent_autoplay_as3.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#ffffff" />	<embed src="screen_reader_detection_to_prevent_autoplay_as3.swf" quality="high" bgcolor="#ffffff" width="550" height="400" name="screen_reader_detection_to_prevent_autoplay_as3" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://get.adobe.com/flashplayer/" />
+	<param name="allowScriptAccess" value="sameDomain"/>
+	<param name="allowFullScreen" value="false"/>
+	<param name="movie" value="screen_reader_detection_to_prevent_autoplay_as3.swf"/><param name="quality" value="high"/><param name="bgcolor" value="#ffffff"/>	<embed src="screen_reader_detection_to_prevent_autoplay_as3.swf" quality="high" bgcolor="#ffffff" width="550" height="400" name="screen_reader_detection_to_prevent_autoplay_as3" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://get.adobe.com/flashplayer/"/>
 	</object>
 </noscript>
 </body>
diff --git a/wcag20/Techniques/working-examples/FLASH35/pause_scrolling_as3.html b/wcag20/Techniques/working-examples/FLASH35/pause_scrolling_as3.html
index ec9a297df7..c331475ad7 100644
--- a/wcag20/Techniques/working-examples/FLASH35/pause_scrolling_as3.html
+++ b/wcag20/Techniques/working-examples/FLASH35/pause_scrolling_as3.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
-<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
+<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
 <title>pause_scrolling_as3</title>
 <script language="JavaScript" type="text/javascript">
 <!--
@@ -165,7 +165,7 @@
     str += '>';
     for (var i in params)
     {
-      str += '<param name="' + i + '" value="' + params[i] + '" /> ';
+      str += '<param name="' + i + '" value="' + params[i] + '"/> ';
     }
     str += '</object>';
   }
@@ -310,9 +310,9 @@
 </script>
 <noscript>
 	<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0" width="550" height="400" id="pause_scrolling_as3" align="middle">
-	<param name="allowScriptAccess" value="sameDomain" />
-	<param name="allowFullScreen" value="false" />
-	<param name="movie" value="pause_scrolling_as3.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#ffffff" />	<embed src="pause_scrolling_as3.swf" quality="high" bgcolor="#ffffff" width="550" height="400" name="pause_scrolling_as3" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://get.adobe.com/flashplayer/" />
+	<param name="allowScriptAccess" value="sameDomain"/>
+	<param name="allowFullScreen" value="false"/>
+	<param name="movie" value="pause_scrolling_as3.swf"/><param name="quality" value="high"/><param name="bgcolor" value="#ffffff"/>	<embed src="pause_scrolling_as3.swf" quality="high" bgcolor="#ffffff" width="550" height="400" name="pause_scrolling_as3" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://get.adobe.com/flashplayer/"/>
 	</object>
 </noscript>
 </body>
diff --git a/wcag20/Techniques/working-examples/FLASH36/control_blinking_with_script_as3.html b/wcag20/Techniques/working-examples/FLASH36/control_blinking_with_script_as3.html
index c14e783fcc..eb8b814d8c 100644
--- a/wcag20/Techniques/working-examples/FLASH36/control_blinking_with_script_as3.html
+++ b/wcag20/Techniques/working-examples/FLASH36/control_blinking_with_script_as3.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
-<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
+<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
 <title>control_blinking_with_script_as3</title>
 <script language="JavaScript" type="text/javascript">
 <!--
@@ -165,7 +165,7 @@
     str += '>';
     for (var i in params)
     {
-      str += '<param name="' + i + '" value="' + params[i] + '" /> ';
+      str += '<param name="' + i + '" value="' + params[i] + '"/> ';
     }
     str += '</object>';
   }
@@ -310,9 +310,9 @@
 </script>
 <noscript>
 	<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="550" height="400" id="control_blinking_with_script_as3" align="middle">
-	<param name="allowScriptAccess" value="sameDomain" />
-	<param name="allowFullScreen" value="false" />
-	<param name="movie" value="control_blinking_with_script_as3.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#ffffff" />	<embed src="control_blinking_with_script_as3.swf" quality="high" bgcolor="#ffffff" width="550" height="400" name="control_blinking_with_script_as3" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://get.adobe.com/flashplayer/" />
+	<param name="allowScriptAccess" value="sameDomain"/>
+	<param name="allowFullScreen" value="false"/>
+	<param name="movie" value="control_blinking_with_script_as3.swf"/><param name="quality" value="high"/><param name="bgcolor" value="#ffffff"/>	<embed src="control_blinking_with_script_as3.swf" quality="high" bgcolor="#ffffff" width="550" height="400" name="control_blinking_with_script_as3" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://get.adobe.com/flashplayer/"/>
 	</object>
 </noscript>
 </body>
diff --git a/wcag20/Techniques/working-examples/FLASH6/invisible_buttons_as_image_map_regions.html b/wcag20/Techniques/working-examples/FLASH6/invisible_buttons_as_image_map_regions.html
index ae4887db20..4f406c6170 100644
--- a/wcag20/Techniques/working-examples/FLASH6/invisible_buttons_as_image_map_regions.html
+++ b/wcag20/Techniques/working-examples/FLASH6/invisible_buttons_as_image_map_regions.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
-<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
+<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
 <title>invisible_buttons_as_image_map_regions</title>
 <script language="JavaScript" type="text/javascript">
 <!--
@@ -165,7 +165,7 @@
     str += '>';
     for (var i in params)
     {
-      str += '<param name="' + i + '" value="' + params[i] + '" /> ';
+      str += '<param name="' + i + '" value="' + params[i] + '"/> ';
     }
     str += '</object>';
   }
@@ -310,9 +310,9 @@
 </script>
 <noscript>
 	<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0" width="550" height="400" id="invisible_buttons_as_image_map_regions" align="middle">
-	<param name="allowScriptAccess" value="sameDomain" />
-	<param name="allowFullScreen" value="false" />
-	<param name="movie" value="invisible_buttons_as_image_map_regions.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#ffffff" />	<embed src="invisible_buttons_as_image_map_regions.swf" quality="high" bgcolor="#ffffff" width="550" height="400" name="invisible_buttons_as_image_map_regions" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://get.adobe.com/flashplayer/" />
+	<param name="allowScriptAccess" value="sameDomain"/>
+	<param name="allowFullScreen" value="false"/>
+	<param name="movie" value="invisible_buttons_as_image_map_regions.swf"/><param name="quality" value="high"/><param name="bgcolor" value="#ffffff"/>	<embed src="invisible_buttons_as_image_map_regions.swf" quality="high" bgcolor="#ffffff" width="550" height="400" name="invisible_buttons_as_image_map_regions" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://get.adobe.com/flashplayer/"/>
 	</object>
 </noscript>
 </body>
diff --git a/wcag20/Techniques/working-examples/FLASH7/change_button_label.html b/wcag20/Techniques/working-examples/FLASH7/change_button_label.html
index 1d87c06b04..f1f284f16c 100644
--- a/wcag20/Techniques/working-examples/FLASH7/change_button_label.html
+++ b/wcag20/Techniques/working-examples/FLASH7/change_button_label.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
-<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
+<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
 <title>change_button_label</title>
 <script language="JavaScript" type="text/javascript">
 <!--
@@ -165,7 +165,7 @@
     str += '>';
     for (var i in params)
     {
-      str += '<param name="' + i + '" value="' + params[i] + '" /> ';
+      str += '<param name="' + i + '" value="' + params[i] + '"/> ';
     }
     str += '</object>';
   }
@@ -310,9 +310,9 @@
 </script>
 <noscript>
 	<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0" width="550" height="400" id="change_button_label" align="middle">
-	<param name="allowScriptAccess" value="sameDomain" />
-	<param name="allowFullScreen" value="false" />
-	<param name="movie" value="change_button_label.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#ffffff" />	<embed src="change_button_label.swf" quality="high" bgcolor="#ffffff" width="550" height="400" name="change_button_label" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://get.adobe.com/flashplayer/" />
+	<param name="allowScriptAccess" value="sameDomain"/>
+	<param name="allowFullScreen" value="false"/>
+	<param name="movie" value="change_button_label.swf"/><param name="quality" value="high"/><param name="bgcolor" value="#ffffff"/>	<embed src="change_button_label.swf" quality="high" bgcolor="#ffffff" width="550" height="400" name="change_button_label" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://get.adobe.com/flashplayer/"/>
 	</object>
 </noscript>
 </body>
diff --git a/wcag20/Techniques/working-examples/FLASH8/grouped_form_controls.html b/wcag20/Techniques/working-examples/FLASH8/grouped_form_controls.html
index 5a18e4edfb..74f91bdc36 100644
--- a/wcag20/Techniques/working-examples/FLASH8/grouped_form_controls.html
+++ b/wcag20/Techniques/working-examples/FLASH8/grouped_form_controls.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
-<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
+<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
 <title>grouped_form_controls</title>
 <script language="JavaScript" type="text/javascript">
 <!--
@@ -165,7 +165,7 @@
     str += '>';
     for (var i in params)
     {
-      str += '<param name="' + i + '" value="' + params[i] + '" /> ';
+      str += '<param name="' + i + '" value="' + params[i] + '"/> ';
     }
     str += '</object>';
   }
@@ -310,9 +310,9 @@
 </script>
 <noscript>
 	<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0" width="550" height="400" id="grouped_form_controls" align="middle">
-	<param name="allowScriptAccess" value="sameDomain" />
-	<param name="allowFullScreen" value="false" />
-	<param name="movie" value="grouped_form_controls.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#ffffff" />	<embed src="grouped_form_controls.swf" quality="high" bgcolor="#ffffff" width="550" height="400" name="grouped_form_controls" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://get.adobe.com/flashplayer/" />
+	<param name="allowScriptAccess" value="sameDomain"/>
+	<param name="allowFullScreen" value="false"/>
+	<param name="movie" value="grouped_form_controls.swf"/><param name="quality" value="high"/><param name="bgcolor" value="#ffffff"/>	<embed src="grouped_form_controls.swf" quality="high" bgcolor="#ffffff" width="550" height="400" name="grouped_form_controls" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://get.adobe.com/flashplayer/"/>
 	</object>
 </noscript>
 </body>
diff --git a/wcag20/Techniques/working-examples/FLASH8/radio_button_group_as3.html b/wcag20/Techniques/working-examples/FLASH8/radio_button_group_as3.html
index 3e112bccb9..6d8a4e6e7b 100644
--- a/wcag20/Techniques/working-examples/FLASH8/radio_button_group_as3.html
+++ b/wcag20/Techniques/working-examples/FLASH8/radio_button_group_as3.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
-<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
+<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
 <title>radio_button_group_as3</title>
 <script language="JavaScript" type="text/javascript">
 <!--
@@ -165,7 +165,7 @@
     str += '>';
     for (var i in params)
     {
-      str += '<param name="' + i + '" value="' + params[i] + '" /> ';
+      str += '<param name="' + i + '" value="' + params[i] + '"/> ';
     }
     str += '</object>';
   }
@@ -310,9 +310,9 @@
 </script>
 <noscript>
 	<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0" width="550" height="400" id="radio_button_group_as3" align="middle">
-	<param name="allowScriptAccess" value="sameDomain" />
-	<param name="allowFullScreen" value="false" />
-	<param name="movie" value="radio_button_group_as3.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#ffffff" />	<embed src="radio_button_group_as3.swf" quality="high" bgcolor="#ffffff" width="550" height="400" name="radio_button_group_as3" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://get.adobe.com/flashplayer/" />
+	<param name="allowScriptAccess" value="sameDomain"/>
+	<param name="allowFullScreen" value="false"/>
+	<param name="movie" value="radio_button_group_as3.swf"/><param name="quality" value="high"/><param name="bgcolor" value="#ffffff"/>	<embed src="radio_button_group_as3.swf" quality="high" bgcolor="#ffffff" width="550" height="400" name="radio_button_group_as3" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://get.adobe.com/flashplayer/"/>
 	</object>
 </noscript>
 </body>
diff --git a/wcag20/Techniques/working-examples/FLASH9/adding_captions_to_Flash_video_as3.html b/wcag20/Techniques/working-examples/FLASH9/adding_captions_to_Flash_video_as3.html
index 35037d2066..267ca73db3 100644
--- a/wcag20/Techniques/working-examples/FLASH9/adding_captions_to_Flash_video_as3.html
+++ b/wcag20/Techniques/working-examples/FLASH9/adding_captions_to_Flash_video_as3.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
-<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
+<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
 <title>adding captions to Flash video_as3</title>
 <script language="JavaScript" type="text/javascript">
 <!--
@@ -165,7 +165,7 @@
     str += '>';
     for (var i in params)
     {
-      str += '<param name="' + i + '" value="' + params[i] + '" /> ';
+      str += '<param name="' + i + '" value="' + params[i] + '"/> ';
     }
     str += '</object>';
   }
@@ -310,9 +310,9 @@
 </script>
 <noscript>
 	<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="550" height="400" id="adding_captions_to_Flash_video_as3" align="middle">
-	<param name="allowScriptAccess" value="sameDomain" />
-	<param name="allowFullScreen" value="false" />
-		<param name="movie" value="adding_captions_to_Flash_video_as3.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#000000" />	<embed src="adding_captions_to_Flash_video_as3.swf" quality="high" bgcolor="#000000" width="550" height="400" name="adding captions to Flash video_as3" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://get.adobe.com/flashplayer/" />
+	<param name="allowScriptAccess" value="sameDomain"/>
+	<param name="allowFullScreen" value="false"/>
+		<param name="movie" value="adding_captions_to_Flash_video_as3.swf"/><param name="quality" value="high"/><param name="bgcolor" value="#000000"/>	<embed src="adding_captions_to_Flash_video_as3.swf" quality="high" bgcolor="#000000" width="550" height="400" name="adding captions to Flash video_as3" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://get.adobe.com/flashplayer/"/>
 	</object>
 </noscript>
 </body>
diff --git a/wcag20/Techniques/working-examples/H49/semantictext.html b/wcag20/Techniques/working-examples/H49/semantictext.html
index 1a5b0225fb..77a0cd902f 100644
--- a/wcag20/Techniques/working-examples/H49/semantictext.html
+++ b/wcag20/Techniques/working-examples/H49/semantictext.html
@@ -7,7 +7,7 @@
 <body>
 <h1>Using Semantic markup to mark emphasized or special text</h1>
 <h2>em and strong elements </h2>
-<p>...What she <em>really</em> meant to say was, "This isn't ok, it is <strong>excellent</strong>!...</p>
+<p>...What the user <em>really</em> meant to say was, "This isn't ok, it is <strong>excellent</strong>!...</p>
 <h2>blockquote and cite elements </h2>
 <p>The following is an excerpt from the <cite>The Story of my Life</cite> by Helen Keller</p>
  <blockquote>
diff --git a/wcag20/Techniques/working-examples/SCR14/enablealerts.html b/wcag20/Techniques/working-examples/SCR14/enablealerts.html
index a3f14a1ea9..49cbb9616b 100644
--- a/wcag20/Techniques/working-examples/SCR14/enablealerts.html
+++ b/wcag20/Techniques/working-examples/SCR14/enablealerts.html
@@ -3,7 +3,7 @@
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
-<meta http-equiv="content-type" content="text/html; charset=utf-8" />
+<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
 <title>Enable Alerts</title>
 <script type="text/javascript">
 //<![CDATA[
@@ -38,7 +38,7 @@
 </head>
 <body onload="showQuotes();">
 
-<p>Press the button below to enable the display of famous quotes using an alert box<br />
+<p>Press the button below to enable the display of famous quotes using an alert box<br/>
 <button id="enableBtn" type="button" onclick="modifyAlerts(true);">Turn Alerts On</button>&nbsp;&nbsp;
 <button id="disableBtn" type="button" onclick="modifyAlerts(false);">Turn Alerts Off</button></p>
 </body>
diff --git a/wcag20/Techniques/working-examples/SCR18/multiple-controls.html b/wcag20/Techniques/working-examples/SCR18/multiple-controls.html
index 2544583fc9..690c31e238 100644
--- a/wcag20/Techniques/working-examples/SCR18/multiple-controls.html
+++ b/wcag20/Techniques/working-examples/SCR18/multiple-controls.html
@@ -42,11 +42,11 @@ <h1>Validate multiple controls</h1>
 		<form action="multiple-controls.html" onsubmit="return validate()">
 			<p>
 				<label for="name">Name: </label>
-				<input type="text" name="name" id="name" />
+				<input type="text" name="name" id="name"/>
 			</p>
 			<p>
 				<label for="tel">Telephone number: </label>
-				<input type="text" name="tel" id="tel" />				
+				<input type="text" name="tel" id="tel"/>				
 			</p>
 			<p>
 				<input type="submit"/>
diff --git a/wcag20/Techniques/working-examples/SCR19/dynselect.html b/wcag20/Techniques/working-examples/SCR19/dynselect.html
index 142a7abf69..b27dfdaee6 100644
--- a/wcag20/Techniques/working-examples/SCR19/dynselect.html
+++ b/wcag20/Techniques/working-examples/SCR19/dynselect.html
@@ -3,7 +3,7 @@
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
-<meta http-equiv="content-type" content="text/xhtml; charset=utf-8" />
+<meta http-equiv="content-type" content="text/xhtml; charset=utf-8"/>
 <title>Dynamic Select Statements</title>
 <script type="text/javascript">
 //<![CDATA[
@@ -60,7 +60,7 @@ <h1>Dynamic Select Statements</h1>
 <option value="Asia">Asia</option>
 <option value="Europe">Europe</option>
 </select>
-<br />
+<br/>
 <label for="country">Select a country</label>
 <select id="country">
 <option value="0">Select a country</option>
diff --git a/wcag20/Techniques/working-examples/SCR22/ex1.html b/wcag20/Techniques/working-examples/SCR22/ex1.html
index fd60d98249..75b8d53830 100644
--- a/wcag20/Techniques/working-examples/SCR22/ex1.html
+++ b/wcag20/Techniques/working-examples/SCR22/ex1.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
-<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 <title>Example of SCR22: Using scripts to control blinking and stop it in five seconds or less</title>
 </head>
 
diff --git a/wcag20/Techniques/working-examples/SCR28/toggle-navbar.html b/wcag20/Techniques/working-examples/SCR28/toggle-navbar.html
index fb2ea52968..cd2e1b4969 100644
--- a/wcag20/Techniques/working-examples/SCR28/toggle-navbar.html
+++ b/wcag20/Techniques/working-examples/SCR28/toggle-navbar.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
-<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 <title>SCR 28 Example: Toggle navigation bar with a link</title>
 <style type="text/css" media="screen">
 #navbar li {
diff --git a/wcag20/Techniques/working-examples/SCR28/toggle-toc.html b/wcag20/Techniques/working-examples/SCR28/toggle-toc.html
index 6f3b6b8c30..97729b9dbb 100644
--- a/wcag20/Techniques/working-examples/SCR28/toggle-toc.html
+++ b/wcag20/Techniques/working-examples/SCR28/toggle-toc.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
-<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 <title>SCR 28 Example: Toggle table of contents with a button</title>
 <style type="text/css" media="screen">
 #toc {
diff --git a/wcag20/Techniques/working-examples/SCR29/action-on-div.html b/wcag20/Techniques/working-examples/SCR29/action-on-div.html
index 7e054eb6e1..c9e81aff2f 100644
--- a/wcag20/Techniques/working-examples/SCR29/action-on-div.html
+++ b/wcag20/Techniques/working-examples/SCR29/action-on-div.html
@@ -3,7 +3,7 @@
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
- <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+ <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
  <title>Creating Divs with Actions using JavaScript</title>
 <style type="text/css" media="screen">
 #active {
@@ -56,7 +56,7 @@
  <div>
   <span id="active" tabindex="0">Do Something</span>
  </div>
-<br />
+<br/>
  <div id="message" style="display:none">Hello, world!</div>
  </body>
  </html>
diff --git a/wcag20/Techniques/working-examples/SCR30/expand-links.html b/wcag20/Techniques/working-examples/SCR30/expand-links.html
index 0f09565da2..265647ea22 100644
--- a/wcag20/Techniques/working-examples/SCR30/expand-links.html
+++ b/wcag20/Techniques/working-examples/SCR30/expand-links.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
-<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 <title>Providing link expansions on demand</title>
 <script type="text/javascript">
 var expanded = false;
diff --git a/wcag20/Techniques/working-examples/SCR33/Overview.html b/wcag20/Techniques/working-examples/SCR33/Overview.html
index 3ffa304140..bc3c94d6af 100644
--- a/wcag20/Techniques/working-examples/SCR33/Overview.html
+++ b/wcag20/Techniques/working-examples/SCR33/Overview.html
@@ -4,11 +4,11 @@
 
 <head>
 
-<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 
 <title>Example of using script to scroll content and providing mechanism to pause it</title>
 
-<link rel="stylesheet" type="text/css" href="scroll.css" />
+<link rel="stylesheet" type="text/css" href="scroll.css"/>
 <script type="text/javascript" src="scroll.js"></script>
 </head>
 
diff --git a/wcag20/Techniques/working-examples/SCR35/jsbutton.html b/wcag20/Techniques/working-examples/SCR35/jsbutton.html
index d27091cfcc..c4ecb8506a 100644
--- a/wcag20/Techniques/working-examples/SCR35/jsbutton.html
+++ b/wcag20/Techniques/working-examples/SCR35/jsbutton.html
@@ -3,7 +3,7 @@
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
- <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+ <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
  <title>Creating Action Buttons using JavaScript</title>
  <script type="text/javascript">
  //<![CDATA[
diff --git a/wcag20/Techniques/working-examples/SCR35/jslink.html b/wcag20/Techniques/working-examples/SCR35/jslink.html
index dd0cde6228..eb07886da0 100644
--- a/wcag20/Techniques/working-examples/SCR35/jslink.html
+++ b/wcag20/Techniques/working-examples/SCR35/jslink.html
@@ -3,7 +3,7 @@
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title>Creating Action Links using JavaScript</title>
  <script type="text/javascript">
  //<![CDATA[
diff --git a/wcag20/Techniques/working-examples/SCR36/scrolltext.html b/wcag20/Techniques/working-examples/SCR36/scrolltext.html
index e415ded22e..d31249735d 100644
--- a/wcag20/Techniques/working-examples/SCR36/scrolltext.html
+++ b/wcag20/Techniques/working-examples/SCR36/scrolltext.html
@@ -1,5 +1,5 @@
 <html><head>
-<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
+<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"/>
  <title>Expanding Scrolling Text in Place</title>
 
     <style type="text/css">
@@ -67,7 +67,7 @@
 
 </head><body onload="init()"> 
     <p>
-  <input id="scrollButton" value="Expand" onclick="toggle()" type="button" /></p>
+  <input id="scrollButton" value="Expand" onclick="toggle()" type="button"/></p>
   <div id="scrollContainer" class="scrolling"> 
     <div style="top: -305px;" id="scrollingText" class="on"> 
       <p>Four score and
diff --git a/wcag20/Techniques/working-examples/SL1/AlternativeAudioChannelTestPage.html b/wcag20/Techniques/working-examples/SL1/AlternativeAudioChannelTestPage.html
index 6d34e531dc..59ec422cfa 100644
--- a/wcag20/Techniques/working-examples/SL1/AlternativeAudioChannelTestPage.html
+++ b/wcag20/Techniques/working-examples/SL1/AlternativeAudioChannelTestPage.html
@@ -60,10 +60,10 @@
     <div id="silverlightControlHost">
         <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
 		  <param name="source" value="AlternativeAudioChannel.xap"/>
-		  <param name="onError" value="onSilverlightError" />
-		  <param name="background" value="white" />
-		  <param name="minRuntimeVersion" value="4.0.50826.0" />
-		  <param name="autoUpgrade" value="true" />
+		  <param name="onError" value="onSilverlightError"/>
+		  <param name="background" value="white"/>
+		  <param name="minRuntimeVersion" value="4.0.50826.0"/>
+		  <param name="autoUpgrade" value="true"/>
 		  <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50826.0" style="text-decoration:none">
  			  <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/>
 		  </a>
diff --git a/wcag20/Techniques/working-examples/SL10/BasicSubmitButtonTestPage.html b/wcag20/Techniques/working-examples/SL10/BasicSubmitButtonTestPage.html
index 4cd6e2d272..818b770671 100644
--- a/wcag20/Techniques/working-examples/SL10/BasicSubmitButtonTestPage.html
+++ b/wcag20/Techniques/working-examples/SL10/BasicSubmitButtonTestPage.html
@@ -60,10 +60,10 @@
     <div id="silverlightControlHost">
         <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
 		  <param name="source" value="BasicSubmitButton.xap"/>
-		  <param name="onError" value="onSilverlightError" />
-		  <param name="background" value="white" />
-		  <param name="minRuntimeVersion" value="4.0.50401.0" />
-		  <param name="autoUpgrade" value="true" />
+		  <param name="onError" value="onSilverlightError"/>
+		  <param name="background" value="white"/>
+		  <param name="minRuntimeVersion" value="4.0.50401.0"/>
+		  <param name="autoUpgrade" value="true"/>
 		  <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50401.0" style="text-decoration:none">
  			  <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/>
 		  </a>
diff --git a/wcag20/Techniques/working-examples/SL11/PauseBouncyBall.html b/wcag20/Techniques/working-examples/SL11/PauseBouncyBall.html
index ee8cdb781e..a60826e289 100644
--- a/wcag20/Techniques/working-examples/SL11/PauseBouncyBall.html
+++ b/wcag20/Techniques/working-examples/SL11/PauseBouncyBall.html
@@ -60,10 +60,10 @@
     <div id="silverlightControlHost">
         <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
 		  <param name="source" value="PauseBouncyBall.xap"/>
-		  <param name="onError" value="onSilverlightError" />
-		  <param name="background" value="white" />
-		  <param name="minRuntimeVersion" value="4.0.50826.0" />
-		  <param name="autoUpgrade" value="true" />
+		  <param name="onError" value="onSilverlightError"/>
+		  <param name="background" value="white"/>
+		  <param name="minRuntimeVersion" value="4.0.50826.0"/>
+		  <param name="autoUpgrade" value="true"/>
 		  <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50826.0" style="text-decoration:none">
  			  <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/>
 		  </a>
diff --git a/wcag20/Techniques/working-examples/SL13/HighContrastTestPage.html b/wcag20/Techniques/working-examples/SL13/HighContrastTestPage.html
index 39c48b1496..9b156ee74e 100644
--- a/wcag20/Techniques/working-examples/SL13/HighContrastTestPage.html
+++ b/wcag20/Techniques/working-examples/SL13/HighContrastTestPage.html
@@ -60,10 +60,10 @@
     <div id="silverlightControlHost">
         <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
 		  <param name="source" value="HighContrast.xap"/>
-		  <param name="onError" value="onSilverlightError" />
-		  <param name="background" value="white" />
-		  <param name="minRuntimeVersion" value="4.0.50826.0" />
-		  <param name="autoUpgrade" value="true" />
+		  <param name="onError" value="onSilverlightError"/>
+		  <param name="background" value="white"/>
+		  <param name="minRuntimeVersion" value="4.0.50826.0"/>
+		  <param name="autoUpgrade" value="true"/>
 		  <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50826.0" style="text-decoration:none">
  			  <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/>
 		  </a>
diff --git a/wcag20/Techniques/working-examples/SL14/SimpleNumericUpDownTestPage.html b/wcag20/Techniques/working-examples/SL14/SimpleNumericUpDownTestPage.html
index 791e39c019..b802078e6f 100644
--- a/wcag20/Techniques/working-examples/SL14/SimpleNumericUpDownTestPage.html
+++ b/wcag20/Techniques/working-examples/SL14/SimpleNumericUpDownTestPage.html
@@ -60,10 +60,10 @@
     <div id="silverlightControlHost">
         <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
 		  <param name="source" value="SimpleNumericUpDown.xap"/>
-		  <param name="onError" value="onSilverlightError" />
-		  <param name="background" value="white" />
-		  <param name="minRuntimeVersion" value="4.0.50826.0" />
-		  <param name="autoUpgrade" value="true" />
+		  <param name="onError" value="onSilverlightError"/>
+		  <param name="background" value="white"/>
+		  <param name="minRuntimeVersion" value="4.0.50826.0"/>
+		  <param name="autoUpgrade" value="true"/>
 		  <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50826.0" style="text-decoration:none">
  			  <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/>
 		  </a>
diff --git a/wcag20/Techniques/working-examples/SL15/ApplicationLevelKeyHandlingTestPage.html b/wcag20/Techniques/working-examples/SL15/ApplicationLevelKeyHandlingTestPage.html
index ae3a0f5dfd..4d76dfd998 100644
--- a/wcag20/Techniques/working-examples/SL15/ApplicationLevelKeyHandlingTestPage.html
+++ b/wcag20/Techniques/working-examples/SL15/ApplicationLevelKeyHandlingTestPage.html
@@ -60,10 +60,10 @@
     <div id="silverlightControlHost">
         <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
 		  <param name="source" value="ApplicationLevelKeyHandling.xap"/>
-		  <param name="onError" value="onSilverlightError" />
-		  <param name="background" value="white" />
-		  <param name="minRuntimeVersion" value="4.0.50826.0" />
-		  <param name="autoUpgrade" value="true" />
+		  <param name="onError" value="onSilverlightError"/>
+		  <param name="background" value="white"/>
+		  <param name="minRuntimeVersion" value="4.0.50826.0"/>
+		  <param name="autoUpgrade" value="true"/>
 		  <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50826.0" style="text-decoration:none">
  			  <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/>
 		  </a>
diff --git a/wcag20/Techniques/working-examples/SL16/MediaTimelineMarkersTestPage.html b/wcag20/Techniques/working-examples/SL16/MediaTimelineMarkersTestPage.html
index 7bcd697679..bf803f2fd0 100644
--- a/wcag20/Techniques/working-examples/SL16/MediaTimelineMarkersTestPage.html
+++ b/wcag20/Techniques/working-examples/SL16/MediaTimelineMarkersTestPage.html
@@ -60,10 +60,10 @@
     <div id="silverlightControlHost">
         <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
 		  <param name="source" value="MediaTimelineMarkers.xap"/>
-		  <param name="onError" value="onSilverlightError" />
-		  <param name="background" value="white" />
-		  <param name="minRuntimeVersion" value="4.0.50826.0" />
-		  <param name="autoUpgrade" value="true" />
+		  <param name="onError" value="onSilverlightError"/>
+		  <param name="background" value="white"/>
+		  <param name="minRuntimeVersion" value="4.0.50826.0"/>
+		  <param name="autoUpgrade" value="true"/>
 		  <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50826.0" style="text-decoration:none">
  			  <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/>
 		  </a>
diff --git a/wcag20/Techniques/working-examples/SL17/ReplaceAudioWithTranscriptTextTestPage.html b/wcag20/Techniques/working-examples/SL17/ReplaceAudioWithTranscriptTextTestPage.html
index 4376ac3f16..bb48bc31d2 100644
--- a/wcag20/Techniques/working-examples/SL17/ReplaceAudioWithTranscriptTextTestPage.html
+++ b/wcag20/Techniques/working-examples/SL17/ReplaceAudioWithTranscriptTextTestPage.html
@@ -60,10 +60,10 @@
     <div id="silverlightControlHost">
         <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
 		  <param name="source" value="ReplaceAudioWithTranscriptText.xap"/>
-		  <param name="onError" value="onSilverlightError" />
-		  <param name="background" value="white" />
-		  <param name="minRuntimeVersion" value="4.0.50826.0" />
-		  <param name="autoUpgrade" value="true" />
+		  <param name="onError" value="onSilverlightError"/>
+		  <param name="background" value="white"/>
+		  <param name="minRuntimeVersion" value="4.0.50826.0"/>
+		  <param name="autoUpgrade" value="true"/>
 		  <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50826.0" style="text-decoration:none">
  			  <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/>
 		  </a>
diff --git a/wcag20/Techniques/working-examples/SL18/ButtonNontextTextCompositionTestPage.html b/wcag20/Techniques/working-examples/SL18/ButtonNontextTextCompositionTestPage.html
index bca3914dce..e025c5be68 100644
--- a/wcag20/Techniques/working-examples/SL18/ButtonNontextTextCompositionTestPage.html
+++ b/wcag20/Techniques/working-examples/SL18/ButtonNontextTextCompositionTestPage.html
@@ -60,10 +60,10 @@
     <div id="silverlightControlHost">
         <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
 		  <param name="source" value="ButtonNontextTextComposition.xap"/>
-		  <param name="onError" value="onSilverlightError" />
-		  <param name="background" value="white" />
-		  <param name="minRuntimeVersion" value="4.0.50826.0" />
-		  <param name="autoUpgrade" value="true" />
+		  <param name="onError" value="onSilverlightError"/>
+		  <param name="background" value="white"/>
+		  <param name="minRuntimeVersion" value="4.0.50826.0"/>
+		  <param name="autoUpgrade" value="true"/>
 		  <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50826.0" style="text-decoration:none">
  			  <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/>
 		  </a>
diff --git a/wcag20/Techniques/working-examples/SL19/AutomationPropertiesHelpTextTestPage.html b/wcag20/Techniques/working-examples/SL19/AutomationPropertiesHelpTextTestPage.html
index 8cccf97d01..828e843598 100644
--- a/wcag20/Techniques/working-examples/SL19/AutomationPropertiesHelpTextTestPage.html
+++ b/wcag20/Techniques/working-examples/SL19/AutomationPropertiesHelpTextTestPage.html
@@ -60,10 +60,10 @@
     <div id="silverlightControlHost">
         <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
 		  <param name="source" value="AutomationPropertiesHelpText.xap"/>
-		  <param name="onError" value="onSilverlightError" />
-		  <param name="background" value="white" />
-		  <param name="minRuntimeVersion" value="4.0.50401.0" />
-		  <param name="autoUpgrade" value="true" />
+		  <param name="onError" value="onSilverlightError"/>
+		  <param name="background" value="white"/>
+		  <param name="minRuntimeVersion" value="4.0.50401.0"/>
+		  <param name="autoUpgrade" value="true"/>
 		  <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50401.0" style="text-decoration:none">
  			  <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/>
 		  </a>
diff --git a/wcag20/Techniques/working-examples/SL2/VisibleFocusTemplateTestPage.html b/wcag20/Techniques/working-examples/SL2/VisibleFocusTemplateTestPage.html
index f75b2393f6..fbbd229150 100644
--- a/wcag20/Techniques/working-examples/SL2/VisibleFocusTemplateTestPage.html
+++ b/wcag20/Techniques/working-examples/SL2/VisibleFocusTemplateTestPage.html
@@ -60,10 +60,10 @@
     <div id="silverlightControlHost">
         <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
 		  <param name="source" value="VisibleFocusTemplate.xap"/>
-		  <param name="onError" value="onSilverlightError" />
-		  <param name="background" value="white" />
-		  <param name="minRuntimeVersion" value="4.0.50401.0" />
-		  <param name="autoUpgrade" value="true" />
+		  <param name="onError" value="onSilverlightError"/>
+		  <param name="background" value="white"/>
+		  <param name="minRuntimeVersion" value="4.0.50401.0"/>
+		  <param name="autoUpgrade" value="true"/>
 		  <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50401.0" style="text-decoration:none">
  			  <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/>
 		  </a>
diff --git a/wcag20/Techniques/working-examples/SL20/SimplePeerForwardingTestPage.html b/wcag20/Techniques/working-examples/SL20/SimplePeerForwardingTestPage.html
index 1ccc05049e..3e16fa56aa 100644
--- a/wcag20/Techniques/working-examples/SL20/SimplePeerForwardingTestPage.html
+++ b/wcag20/Techniques/working-examples/SL20/SimplePeerForwardingTestPage.html
@@ -60,10 +60,10 @@
     <div id="silverlightControlHost">
         <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
 		  <param name="source" value="SimplePeerForwarding.xap"/>
-		  <param name="onError" value="onSilverlightError" />
-		  <param name="background" value="white" />
-		  <param name="minRuntimeVersion" value="4.0.50401.0" />
-		  <param name="autoUpgrade" value="true" />
+		  <param name="onError" value="onSilverlightError"/>
+		  <param name="background" value="white"/>
+		  <param name="minRuntimeVersion" value="4.0.50401.0"/>
+		  <param name="autoUpgrade" value="true"/>
 		  <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50401.0" style="text-decoration:none">
  			  <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/>
 		  </a>
diff --git a/wcag20/Techniques/working-examples/SL21/StopAnimationTestPage.html b/wcag20/Techniques/working-examples/SL21/StopAnimationTestPage.html
index a1333454ed..ead18ca39d 100644
--- a/wcag20/Techniques/working-examples/SL21/StopAnimationTestPage.html
+++ b/wcag20/Techniques/working-examples/SL21/StopAnimationTestPage.html
@@ -60,10 +60,10 @@
     <div id="silverlightControlHost">
         <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
 		  <param name="source" value="StopAnimation.xap"/>
-		  <param name="onError" value="onSilverlightError" />
-		  <param name="background" value="white" />
-		  <param name="minRuntimeVersion" value="4.0.50826.0" />
-		  <param name="autoUpgrade" value="true" />
+		  <param name="onError" value="onSilverlightError"/>
+		  <param name="background" value="white"/>
+		  <param name="minRuntimeVersion" value="4.0.50826.0"/>
+		  <param name="autoUpgrade" value="true"/>
 		  <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50826.0" style="text-decoration:none">
  			  <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/>
 		  </a>
diff --git a/wcag20/Techniques/working-examples/SL22/BrowserZoomTestPage.html b/wcag20/Techniques/working-examples/SL22/BrowserZoomTestPage.html
index 571f23e04e..c902bfea87 100644
--- a/wcag20/Techniques/working-examples/SL22/BrowserZoomTestPage.html
+++ b/wcag20/Techniques/working-examples/SL22/BrowserZoomTestPage.html
@@ -60,10 +60,10 @@
     <div id="silverlightControlHost">
         <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
 		  <param name="source" value="BrowserZoom.xap"/>
-		  <param name="onError" value="onSilverlightError" />
-		  <param name="background" value="white" />
-		  <param name="minRuntimeVersion" value="4.0.50401.0" />
-		  <param name="autoUpgrade" value="true" />
+		  <param name="onError" value="onSilverlightError"/>
+		  <param name="background" value="white"/>
+		  <param name="minRuntimeVersion" value="4.0.50401.0"/>
+		  <param name="autoUpgrade" value="true"/>
 		  <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50401.0" style="text-decoration:none">
  			  <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/>
 		  </a>
diff --git a/wcag20/Techniques/working-examples/SL23/ByAnimationFontSizeTestPage.html b/wcag20/Techniques/working-examples/SL23/ByAnimationFontSizeTestPage.html
index b0694b3c06..3ef66b4927 100644
--- a/wcag20/Techniques/working-examples/SL23/ByAnimationFontSizeTestPage.html
+++ b/wcag20/Techniques/working-examples/SL23/ByAnimationFontSizeTestPage.html
@@ -60,10 +60,10 @@
     <div id="silverlightControlHost">
         <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
 		  <param name="source" value="StyleSwitcherFontSize.xap"/>
-		  <param name="onError" value="onSilverlightError" />
-		  <param name="background" value="white" />
-		  <param name="minRuntimeVersion" value="4.0.50401.0" />
-		  <param name="autoUpgrade" value="true" />
+		  <param name="onError" value="onSilverlightError"/>
+		  <param name="background" value="white"/>
+		  <param name="minRuntimeVersion" value="4.0.50401.0"/>
+		  <param name="autoUpgrade" value="true"/>
 		  <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50401.0" style="text-decoration:none">
  			  <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/>
 		  </a>
diff --git a/wcag20/Techniques/working-examples/SL23/StyleSwitcherFontSizeTestPage.html b/wcag20/Techniques/working-examples/SL23/StyleSwitcherFontSizeTestPage.html
index b0694b3c06..3ef66b4927 100644
--- a/wcag20/Techniques/working-examples/SL23/StyleSwitcherFontSizeTestPage.html
+++ b/wcag20/Techniques/working-examples/SL23/StyleSwitcherFontSizeTestPage.html
@@ -60,10 +60,10 @@
     <div id="silverlightControlHost">
         <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
 		  <param name="source" value="StyleSwitcherFontSize.xap"/>
-		  <param name="onError" value="onSilverlightError" />
-		  <param name="background" value="white" />
-		  <param name="minRuntimeVersion" value="4.0.50401.0" />
-		  <param name="autoUpgrade" value="true" />
+		  <param name="onError" value="onSilverlightError"/>
+		  <param name="background" value="white"/>
+		  <param name="minRuntimeVersion" value="4.0.50401.0"/>
+		  <param name="autoUpgrade" value="true"/>
 		  <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50401.0" style="text-decoration:none">
  			  <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/>
 		  </a>
diff --git a/wcag20/Techniques/working-examples/SL24/MediaElementControlsAutoPlayTestPage.html b/wcag20/Techniques/working-examples/SL24/MediaElementControlsAutoPlayTestPage.html
index e8e3b5824a..7008514e47 100644
--- a/wcag20/Techniques/working-examples/SL24/MediaElementControlsAutoPlayTestPage.html
+++ b/wcag20/Techniques/working-examples/SL24/MediaElementControlsAutoPlayTestPage.html
@@ -60,10 +60,10 @@
     <div id="silverlightControlHost">
         <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
 		  <param name="source" value="MediaElementControlsAutoPlay.xap"/>
-		  <param name="onError" value="onSilverlightError" />
-		  <param name="background" value="white" />
-		  <param name="minRuntimeVersion" value="4.0.50826.0" />
-		  <param name="autoUpgrade" value="true" />
+		  <param name="onError" value="onSilverlightError"/>
+		  <param name="background" value="white"/>
+		  <param name="minRuntimeVersion" value="4.0.50826.0"/>
+		  <param name="autoUpgrade" value="true"/>
 		  <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50826.0" style="text-decoration:none">
  			  <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/>
 		  </a>
diff --git a/wcag20/Techniques/working-examples/SL25/ProgrammaticFocusTestPage.html b/wcag20/Techniques/working-examples/SL25/ProgrammaticFocusTestPage.html
index 011c8cf696..f722567bb1 100644
--- a/wcag20/Techniques/working-examples/SL25/ProgrammaticFocusTestPage.html
+++ b/wcag20/Techniques/working-examples/SL25/ProgrammaticFocusTestPage.html
@@ -60,10 +60,10 @@
     <div id="silverlightControlHost">
         <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
 		  <param name="source" value="ProgrammaticFocus.xap"/>
-		  <param name="onError" value="onSilverlightError" />
-		  <param name="background" value="white" />
-		  <param name="minRuntimeVersion" value="4.0.50826.0" />
-		  <param name="autoUpgrade" value="true" />
+		  <param name="onError" value="onSilverlightError"/>
+		  <param name="background" value="white"/>
+		  <param name="minRuntimeVersion" value="4.0.50826.0"/>
+		  <param name="autoUpgrade" value="true"/>
 		  <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50826.0" style="text-decoration:none">
  			  <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/>
 		  </a>
diff --git a/wcag20/Techniques/working-examples/SL26/LabelsTestPage.html b/wcag20/Techniques/working-examples/SL26/LabelsTestPage.html
index 246d53ac9f..5aaad0f1c4 100644
--- a/wcag20/Techniques/working-examples/SL26/LabelsTestPage.html
+++ b/wcag20/Techniques/working-examples/SL26/LabelsTestPage.html
@@ -60,10 +60,10 @@
     <div id="silverlightControlHost">
         <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
 		  <param name="source" value="Labels.xap"/>
-		  <param name="onError" value="onSilverlightError" />
-		  <param name="background" value="white" />
-		  <param name="minRuntimeVersion" value="4.0.50826.0" />
-		  <param name="autoUpgrade" value="true" />
+		  <param name="onError" value="onSilverlightError"/>
+		  <param name="background" value="white"/>
+		  <param name="minRuntimeVersion" value="4.0.50826.0"/>
+		  <param name="autoUpgrade" value="true"/>
 		  <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50826.0" style="text-decoration:none">
  			  <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/>
 		  </a>
diff --git a/wcag20/Techniques/working-examples/SL27/LangPropertiesTestPage.html b/wcag20/Techniques/working-examples/SL27/LangPropertiesTestPage.html
index e6ce0ee1a3..a9ec32dda8 100644
--- a/wcag20/Techniques/working-examples/SL27/LangPropertiesTestPage.html
+++ b/wcag20/Techniques/working-examples/SL27/LangPropertiesTestPage.html
@@ -60,10 +60,10 @@
     <div id="silverlightControlHost">
         <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
 		  <param name="source" value="LangProperties.xap"/>
-		  <param name="onError" value="onSilverlightError" />
-		  <param name="background" value="white" />
-		  <param name="minRuntimeVersion" value="4.0.50401.0" />
-		  <param name="autoUpgrade" value="true" />
+		  <param name="onError" value="onSilverlightError"/>
+		  <param name="background" value="white"/>
+		  <param name="minRuntimeVersion" value="4.0.50401.0"/>
+		  <param name="autoUpgrade" value="true"/>
 		  <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50401.0" style="text-decoration:none">
  			  <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/>
 		  </a>
diff --git a/wcag20/Techniques/working-examples/SL29/TabNavigationTestPage.html b/wcag20/Techniques/working-examples/SL29/TabNavigationTestPage.html
index 3551d29d3e..d1d8bec4f1 100644
--- a/wcag20/Techniques/working-examples/SL29/TabNavigationTestPage.html
+++ b/wcag20/Techniques/working-examples/SL29/TabNavigationTestPage.html
@@ -60,10 +60,10 @@
     <div id="silverlightControlHost">
         <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
 		  <param name="source" value="TabNavigation.xap"/>
-		  <param name="onError" value="onSilverlightError" />
-		  <param name="background" value="white" />
-		  <param name="minRuntimeVersion" value="4.0.50401.0" />
-		  <param name="autoUpgrade" value="true" />
+		  <param name="onError" value="onSilverlightError"/>
+		  <param name="background" value="white"/>
+		  <param name="minRuntimeVersion" value="4.0.50401.0"/>
+		  <param name="autoUpgrade" value="true"/>
 		  <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50401.0" style="text-decoration:none">
  			  <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/>
 		  </a>
diff --git a/wcag20/Techniques/working-examples/SL3/MediaElementControlsTestPage.html b/wcag20/Techniques/working-examples/SL3/MediaElementControlsTestPage.html
index ef74ef18c9..024274a6a4 100644
--- a/wcag20/Techniques/working-examples/SL3/MediaElementControlsTestPage.html
+++ b/wcag20/Techniques/working-examples/SL3/MediaElementControlsTestPage.html
@@ -60,10 +60,10 @@
     <div id="silverlightControlHost">
         <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
 		  <param name="source" value="MediaElementControls.xap"/>
-		  <param name="onError" value="onSilverlightError" />
-		  <param name="background" value="white" />
-		  <param name="minRuntimeVersion" value="4.0.50826.0" />
-		  <param name="autoUpgrade" value="true" />
+		  <param name="onError" value="onSilverlightError"/>
+		  <param name="background" value="white"/>
+		  <param name="minRuntimeVersion" value="4.0.50826.0"/>
+		  <param name="autoUpgrade" value="true"/>
 		  <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50826.0" style="text-decoration:none">
  			  <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/>
 		  </a>
diff --git a/wcag20/Techniques/working-examples/SL30/ButtonNontextTextCompositionTestPage.html b/wcag20/Techniques/working-examples/SL30/ButtonNontextTextCompositionTestPage.html
index bca3914dce..e025c5be68 100644
--- a/wcag20/Techniques/working-examples/SL30/ButtonNontextTextCompositionTestPage.html
+++ b/wcag20/Techniques/working-examples/SL30/ButtonNontextTextCompositionTestPage.html
@@ -60,10 +60,10 @@
     <div id="silverlightControlHost">
         <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
 		  <param name="source" value="ButtonNontextTextComposition.xap"/>
-		  <param name="onError" value="onSilverlightError" />
-		  <param name="background" value="white" />
-		  <param name="minRuntimeVersion" value="4.0.50826.0" />
-		  <param name="autoUpgrade" value="true" />
+		  <param name="onError" value="onSilverlightError"/>
+		  <param name="background" value="white"/>
+		  <param name="minRuntimeVersion" value="4.0.50826.0"/>
+		  <param name="autoUpgrade" value="true"/>
 		  <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50826.0" style="text-decoration:none">
  			  <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/>
 		  </a>
diff --git a/wcag20/Techniques/working-examples/SL31/DocumentStructureTestPage.html b/wcag20/Techniques/working-examples/SL31/DocumentStructureTestPage.html
index 0bc9c9ed2a..c5a1810961 100644
--- a/wcag20/Techniques/working-examples/SL31/DocumentStructureTestPage.html
+++ b/wcag20/Techniques/working-examples/SL31/DocumentStructureTestPage.html
@@ -60,10 +60,10 @@
     <div id="silverlightControlHost">
         <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
 		  <param name="source" value="DocumentStructure.xap"/>
-		  <param name="onError" value="onSilverlightError" />
-		  <param name="background" value="white" />
-		  <param name="minRuntimeVersion" value="4.0.50826.0" />
-		  <param name="autoUpgrade" value="true" />
+		  <param name="onError" value="onSilverlightError"/>
+		  <param name="background" value="white"/>
+		  <param name="minRuntimeVersion" value="4.0.50826.0"/>
+		  <param name="autoUpgrade" value="true"/>
 		  <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50826.0" style="text-decoration:none">
  			  <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/>
 		  </a>
diff --git a/wcag20/Techniques/working-examples/SL34/TabSequenceTestPage.html b/wcag20/Techniques/working-examples/SL34/TabSequenceTestPage.html
index 56ddc47d71..558c6fb5e1 100644
--- a/wcag20/Techniques/working-examples/SL34/TabSequenceTestPage.html
+++ b/wcag20/Techniques/working-examples/SL34/TabSequenceTestPage.html
@@ -60,10 +60,10 @@
     <div id="silverlightControlHost">
         <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
 		  <param name="source" value="TabSequence.xap"/>
-		  <param name="onError" value="onSilverlightError" />
-		  <param name="background" value="white" />
-		  <param name="minRuntimeVersion" value="4.0.50401.0" />
-		  <param name="autoUpgrade" value="true" />
+		  <param name="onError" value="onSilverlightError"/>
+		  <param name="background" value="white"/>
+		  <param name="minRuntimeVersion" value="4.0.50401.0"/>
+		  <param name="autoUpgrade" value="true"/>
 		  <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50401.0" style="text-decoration:none">
  			  <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/>
 		  </a>
diff --git a/wcag20/Techniques/working-examples/SL34/TabSequence_EnabledTestPage.html b/wcag20/Techniques/working-examples/SL34/TabSequence_EnabledTestPage.html
index c12eca2391..65bb846cfd 100644
--- a/wcag20/Techniques/working-examples/SL34/TabSequence_EnabledTestPage.html
+++ b/wcag20/Techniques/working-examples/SL34/TabSequence_EnabledTestPage.html
@@ -60,10 +60,10 @@
     <div id="silverlightControlHost">
         <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
 		  <param name="source" value="TabSequenceEnabled.xap"/>
-		  <param name="onError" value="onSilverlightError" />
-		  <param name="background" value="white" />
-		  <param name="minRuntimeVersion" value="4.0.50826.0" />
-		  <param name="autoUpgrade" value="true" />
+		  <param name="onError" value="onSilverlightError"/>
+		  <param name="background" value="white"/>
+		  <param name="minRuntimeVersion" value="4.0.50826.0"/>
+		  <param name="autoUpgrade" value="true"/>
 		  <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50826.0" style="text-decoration:none">
  			  <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/>
 		  </a>
diff --git a/wcag20/Techniques/working-examples/SL34/TabSequence_TabIndexTestPage.html b/wcag20/Techniques/working-examples/SL34/TabSequence_TabIndexTestPage.html
index 829cea89fc..619eb974cd 100644
--- a/wcag20/Techniques/working-examples/SL34/TabSequence_TabIndexTestPage.html
+++ b/wcag20/Techniques/working-examples/SL34/TabSequence_TabIndexTestPage.html
@@ -60,10 +60,10 @@
     <div id="silverlightControlHost">
         <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
 		  <param name="source" value="TabSequence_TabIndex.xap"/>
-		  <param name="onError" value="onSilverlightError" />
-		  <param name="background" value="white" />
-		  <param name="minRuntimeVersion" value="4.0.50401.0" />
-		  <param name="autoUpgrade" value="true" />
+		  <param name="onError" value="onSilverlightError"/>
+		  <param name="background" value="white"/>
+		  <param name="minRuntimeVersion" value="4.0.50401.0"/>
+		  <param name="autoUpgrade" value="true"/>
 		  <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50401.0" style="text-decoration:none">
  			  <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/>
 		  </a>
diff --git a/wcag20/Techniques/working-examples/SL35/AccessibleValidationTestPage.html b/wcag20/Techniques/working-examples/SL35/AccessibleValidationTestPage.html
index caf69c4167..0bf9dc4c70 100644
--- a/wcag20/Techniques/working-examples/SL35/AccessibleValidationTestPage.html
+++ b/wcag20/Techniques/working-examples/SL35/AccessibleValidationTestPage.html
@@ -60,10 +60,10 @@
     <div id="silverlightControlHost">
         <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
 		  <param name="source" value="AccessibleValidation.xap"/>
-		  <param name="onError" value="onSilverlightError" />
-		  <param name="background" value="white" />
-		  <param name="minRuntimeVersion" value="4.0.50826.0" />
-		  <param name="autoUpgrade" value="true" />
+		  <param name="onError" value="onSilverlightError"/>
+		  <param name="background" value="white"/>
+		  <param name="minRuntimeVersion" value="4.0.50826.0"/>
+		  <param name="autoUpgrade" value="true"/>
 		  <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50826.0" style="text-decoration:none">
  			  <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/>
 		  </a>
diff --git a/wcag20/Techniques/working-examples/SL4/SilverFishTestPage.html b/wcag20/Techniques/working-examples/SL4/SilverFishTestPage.html
index f6640f1f0a..c85cb61d54 100644
--- a/wcag20/Techniques/working-examples/SL4/SilverFishTestPage.html
+++ b/wcag20/Techniques/working-examples/SL4/SilverFishTestPage.html
@@ -9,7 +9,7 @@
 	  <param name="source" value="ClientBin/SilverFish.xap"/>
         </object>
       </div>
-      <hr />
+      <hr/>
       <div id="silverlightControl_de">
         <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="25px" lang="de">
           <param name="source" value="ClientBin/SilverFish_DE.xap"/>
diff --git a/wcag20/Techniques/working-examples/SL5/ImageEquivalentTestPage.html b/wcag20/Techniques/working-examples/SL5/ImageEquivalentTestPage.html
index 036f0e6bfe..33196379c3 100644
--- a/wcag20/Techniques/working-examples/SL5/ImageEquivalentTestPage.html
+++ b/wcag20/Techniques/working-examples/SL5/ImageEquivalentTestPage.html
@@ -60,10 +60,10 @@
     <div id="silverlightControlHost">
         <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
 		  <param name="source" value="ImageEquivalent.xap"/>
-		  <param name="onError" value="onSilverlightError" />
-		  <param name="background" value="white" />
-		  <param name="minRuntimeVersion" value="4.0.50401.0" />
-		  <param name="autoUpgrade" value="true" />
+		  <param name="onError" value="onSilverlightError"/>
+		  <param name="background" value="white"/>
+		  <param name="minRuntimeVersion" value="4.0.50401.0"/>
+		  <param name="autoUpgrade" value="true"/>
 		  <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50401.0" style="text-decoration:none">
  			  <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/>
 		  </a>
diff --git a/wcag20/Techniques/working-examples/SL6/SimpleNumericUpDownTestPage.html b/wcag20/Techniques/working-examples/SL6/SimpleNumericUpDownTestPage.html
index d14af06ea0..46c3f9e487 100644
--- a/wcag20/Techniques/working-examples/SL6/SimpleNumericUpDownTestPage.html
+++ b/wcag20/Techniques/working-examples/SL6/SimpleNumericUpDownTestPage.html
@@ -60,10 +60,10 @@
     <div id="silverlightControlHost">
         <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
 		  <param name="source" value="SimpleNumericUpDown.xap"/>
-		  <param name="onError" value="onSilverlightError" />
-		  <param name="background" value="white" />
-		  <param name="minRuntimeVersion" value="4.0.50401.0" />
-		  <param name="autoUpgrade" value="true" />
+		  <param name="onError" value="onSilverlightError"/>
+		  <param name="background" value="white"/>
+		  <param name="minRuntimeVersion" value="4.0.50401.0"/>
+		  <param name="autoUpgrade" value="true"/>
 		  <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50401.0" style="text-decoration:none">
  			  <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/>
 		  </a>
diff --git a/wcag20/Techniques/working-examples/SL7/FocusVisualCustomControlTestPage.html b/wcag20/Techniques/working-examples/SL7/FocusVisualCustomControlTestPage.html
index fb2645e061..50db03cfaa 100644
--- a/wcag20/Techniques/working-examples/SL7/FocusVisualCustomControlTestPage.html
+++ b/wcag20/Techniques/working-examples/SL7/FocusVisualCustomControlTestPage.html
@@ -60,10 +60,10 @@
     <div id="silverlightControlHost">
         <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
         	<param name="source" value="FocusVisualCustomControl.xap"/>
-		  <param name="onError" value="onSilverlightError" />
-		  <param name="background" value="white" />
-		  <param name="minRuntimeVersion" value="4.0.50826.0" />
-		  <param name="autoUpgrade" value="true" />
+		  <param name="onError" value="onSilverlightError"/>
+		  <param name="background" value="white"/>
+		  <param name="minRuntimeVersion" value="4.0.50826.0"/>
+		  <param name="autoUpgrade" value="true"/>
 		  <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50826.0" style="text-decoration:none">
  			  <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/>
 		  </a>
diff --git a/wcag20/Techniques/working-examples/SL8/HelpTextAndToolTipTestPage.html b/wcag20/Techniques/working-examples/SL8/HelpTextAndToolTipTestPage.html
index b5fd046903..c9628068bd 100644
--- a/wcag20/Techniques/working-examples/SL8/HelpTextAndToolTipTestPage.html
+++ b/wcag20/Techniques/working-examples/SL8/HelpTextAndToolTipTestPage.html
@@ -60,10 +60,10 @@
     <div id="silverlightControlHost">
         <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
 		  <param name="source" value="HelpTextAndToolTip.xap"/>
-		  <param name="onError" value="onSilverlightError" />
-		  <param name="background" value="white" />
-		  <param name="minRuntimeVersion" value="4.0.50826.0" />
-		  <param name="autoUpgrade" value="true" />
+		  <param name="onError" value="onSilverlightError"/>
+		  <param name="background" value="white"/>
+		  <param name="minRuntimeVersion" value="4.0.50826.0"/>
+		  <param name="autoUpgrade" value="true"/>
 		  <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50826.0" style="text-decoration:none">
  			  <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/>
 		  </a>
diff --git a/wcag20/Techniques/working-examples/SL9/BuiltInKeyEquivalenceTestPage.html b/wcag20/Techniques/working-examples/SL9/BuiltInKeyEquivalenceTestPage.html
index 379c00fcb7..99f4c48c80 100644
--- a/wcag20/Techniques/working-examples/SL9/BuiltInKeyEquivalenceTestPage.html
+++ b/wcag20/Techniques/working-examples/SL9/BuiltInKeyEquivalenceTestPage.html
@@ -60,10 +60,10 @@
     <div id="silverlightControlHost">
         <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
 		  <param name="source" value="BuiltInKeyEquivalence.xap"/>
-		  <param name="onError" value="onSilverlightError" />
-		  <param name="background" value="white" />
-		  <param name="minRuntimeVersion" value="4.0.50401.0" />
-		  <param name="autoUpgrade" value="true" />
+		  <param name="onError" value="onSilverlightError"/>
+		  <param name="background" value="white"/>
+		  <param name="minRuntimeVersion" value="4.0.50401.0"/>
+		  <param name="autoUpgrade" value="true"/>
 		  <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50401.0" style="text-decoration:none">
  			  <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/>
 		  </a>
diff --git a/wcag20/build.xml b/wcag20/build.xml
index 13332fd919..28d8514ca8 100644
--- a/wcag20/build.xml
+++ b/wcag20/build.xml
@@ -609,6 +609,7 @@ Enter &quot;ant -projecthelp&quot; to get list of available build tasks</echo>
 			<param name="outputdir.prefix" value=""/>
 			<param name="publoc.understanding" value="http://w3c.github.io/wcag/Understanding"/>
 			<param name="publoc.techniques" value="http://w3c.github.io/wcag/Techniques"/>
+			<param name="source.guidelines" value="sources/wcag2-src.xml"/>
 		</antcall>
 	</target>
 </project>
\ No newline at end of file
diff --git a/wcag20/sources/ariatechblock_template.xml b/wcag20/sources/ariatechblock_template.xml
index 56d4c7e012..8f0e638756 100644
--- a/wcag20/sources/ariatechblock_template.xml
+++ b/wcag20/sources/ariatechblock_template.xml
@@ -66,7 +66,7 @@
                             <item><p><loc href="http://www.w3.org/TR/wai-aria-primer/">WAI-ARIA 1.0 Primer</loc></p>
                             </item>
 							<item>
-								<p><loc ref="http://www.w3.org/TR/wai-aria-practices/">WAI-ARIA 1.0 Authoring Practices</loc> </p>
+								<p><loc ref="https://www.w3.org/WAI/ARIA/apg/">WAI-ARIA Authoring Practices Guide</loc> </p>
 							</item>
 							<item>
 								<p><loc ref="http://www.w3.org/TR/aria-in-html/">Using WAI-ARIA in HTML</loc> </p>
@@ -165,7 +165,7 @@
                             <item><p><loc href="http://www.w3.org/TR/wai-aria-primer/">WAI-ARIA 1.0 Primer</loc></p>
                             </item>
 							<item>
-								<p><loc ref="http://www.w3.org/TR/wai-aria-practices/">WAI-ARIA 1.0 Authoring Practices</loc> </p>
+								<p><loc ref="https://www.w3.org/WAI/ARIA/apg/">WAI-ARIA Authoring Practices Guide</loc> </p>
 							</item>
 							<item>
 								<p><loc ref="http://www.w3.org/TR/aria-in-html/">Using WAI-ARIA in HTML</loc> </p>
diff --git a/wcag20/sources/guide-to-wcag2-src.xml b/wcag20/sources/guide-to-wcag2-src.xml
index 2cf1f79e8c..e3d7973dff 100644
--- a/wcag20/sources/guide-to-wcag2-src.xml
+++ b/wcag20/sources/guide-to-wcag2-src.xml
@@ -1,798 +1,798 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!DOCTYPE spec
-  SYSTEM "xmlspec.dtd">
-<spec status="final" w3c-doctype="wgnote" xmlns:xi="http://www.w3.org/2001/XInclude">
-   <header>
-      <title>Understanding <abbr expansion="Web Content Accessibiity Guidelines">WCAG</abbr> 2.0</title>
-      <subtitle>A guide to understanding and implementing Web Content Accessibility Guidelines 2.0</subtitle>
-      <version/>
-      <w3c-designation>UNDERSTANDING-WCAG20</w3c-designation>
-      <w3c-doctype>W3C Working Group Note</w3c-doctype>
-      <pubdate>
-         <day>13</day>
-         <month>September</month>
-         <year>2016</year>
-      </pubdate>
-      <publoc>
-      	<loc href="http://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20160913/">http://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20160913/</loc>
-      	<!--<loc href="http://www.w3.org/WAI/GL/2016/WD-UNDERSTANDING-WCAG20-20160719/">http://www.w3.org/WAI/GL/2016/WD-UNDERSTANDING-WCAG20-20160719/</loc>-->
-	</publoc>
-      <altlocs>
-         <loc href="complete.html">Single file version</loc>
-         <loc href="complete-diff.html">Single file diff-marked version showing revisions since 17 March 2015</loc>
-         <loc href="/WAI/WCAG20/versions/understanding/">Alternate Versions of Understanding WCAG 2.0</loc>
-      </altlocs>
-      <latestloc>
-      	<loc href="http://www.w3.org/TR/UNDERSTANDING-WCAG20/">http://www.w3.org/TR/UNDERSTANDING-WCAG20/</loc>
-      	<!--<loc href="http://www.w3.org/WAI/GL/UNDERSTANDING-WCAG20/">http://www.w3.org/WAI/GL/UNDERSTANDING-WCAG20/</loc>-->
-      </latestloc>
-      <prevlocs>
-      	<loc href="http://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20160317/">http://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20160317/</loc>
-      	<!--	<loc href="http://www.w3.org/WAI/GL/2016/WD-UNDERSTANDING-WCAG20-20160105/">http://www.w3.org/WAI/GL/2016/WD-UNDERSTANDING-WCAG20-20160105/</loc>-->
-		    </prevlocs>
-      <authlist>
-         <author role="current">
-            <name>Michael Cooper</name>
-            <affiliation>W3C</affiliation>
-         </author>
-         <author role="current">
-            <name>Andrew Kirkpatrick</name>
-            <affiliation>Adobe Systems Inc.</affiliation>
-         </author>
-         <author role="current">
-            <name>Joshue O Connor</name>
-            <affiliation>InterAccess</affiliation>
-         </author>
-         <author role="past">
-            <name>Loretta Guarino Reid</name>
-            <affiliation>(until May 2013 while at Google, Inc.)</affiliation>
-         </author>
-         <author role="past">
-            <name>Gregg Vanderheiden</name>
-            <affiliation>(until May 2013 while at Trace R&amp;D  Center, University of
-Wisconsin-Madison)</affiliation>
-			</author>
-			<author role="past">
-				<name>Ben Caldwell</name>
-				<affiliation>(until September 2010 while at Trace R&amp;D Center, University of
-    			Wisconsin-Madison)</affiliation>
-			</author>
-			<author role="past">
-				<name>Wendy Chisholm</name>
-				<affiliation>(until July 2006 while at W3C)</affiliation>
-			</author>
-			<author role="past">
-				<name>John Slatin</name>
-				<affiliation>(until June 2006 while at Accessibility Institute, University of Texas at
-Austin)</affiliation>
-			</author>
-		</authlist>
-		<status>
-         <p>
-            <emph>This section describes the status of this document at the time of its publication. Other documents may supersede this document. A list of current W3C publications and the latest revision of this technical report can be found in the <loc href="http://www.w3.org/TR/">W3C technical reports index</loc> at <loc href="http://www.w3.org/TR/">http://www.w3.org/TR/</loc>.</emph>
-         </p>
-         <p>This is a <phrase role="final">Working Group Note</phrase>
-         	<phrase role="ext-review">Public Editors' Draft of</phrase><phrase role="int-review">Editors' Draft of</phrase> "Understanding WCAG 2.0". The <loc href="http://www.w3.org/WAI/GL/">Web Content Accessibility Guidelines Working Group</loc> considers this document to be important for understanding the success criteria in the <loc href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/">Web Content Accessibility Guidelines (WCAG) 2.0 Recommendation</loc>. Please note that the contents of this document are informative (they provide guidance), and not normative (they do not set requirements for conforming to WCAG 2.0).</p>
-			<p>Understanding WCAG 2.0 was previously published on 11 December 2008 as a Working Group Note and updated 14 October 2010, 3 January 2012, 5 September 2013, 3 March 2014, 8 April 2014, 16 September 2014, 26 February 2015, and 17 March 2016. This new version updates the support information provided for WCAG 2.0. Note that WCAG 2.0 itself remains unchanged, only the informative support materials have been updated. The only change in this version is to <loc href="conformance.html#uc-partial-third-head">add explanation about partial conformance claims due to third-party content</loc>.</p>
-      	<p><phrase role="ext-review">The purpose of this draft is to collect public feedback on proposed changes since the <loc href="http://www.w3.org/TR/2015/NOTE-UNDERSTANDING-WCAG20-20150226/">Understanding WCAG 2.0 Working Group Note of 26 February 2015</loc>. The Working Group intends to publish an updated Note once feedback from this review has been incorporated. <emph role="bold">The existing Understanding document remains in place as a W3C Note</emph> while this separate draft update is under review and the WCAG Working Group addresses comments.</phrase> The changes are highlighted in the <loc href="complete-diff">diff-marked version</loc>.</p>
-         <p>
-         	<phrase role="ext-review">Comments on this draft are due <emph role="bold">on or before 29 January 2016</emph>.</phrase> The Working Group requests that any comments be made using the options documented in <loc href="http://www.w3.org/WAI/WCAG20/comments/">Instructions for Commenting on WCAG 2.0 Documents</loc>. If this is not possible, comments can also be sent to <loc href="mailto:public-comments-wcag20@w3.org">public-comments-wcag20@w3.org</loc>. The <loc href="http://lists.w3.org/Archives/Public/public-comments-wcag20/">archives for the public comments list</loc> are publicly available. <phrase role="ext-review">Because this is a public review of changes to the Working Group Notes, only comments on changes made since the last Notes will be processed during this review; other comments will be saved and treated as comments on the updated Notes once published. </phrase><phrase role="final">Comments received on this document may be addressed in future versions of this document, or in another manner. </phrase><!--The Working Group does not plan to make formal responses to comments.--> Archives of the <loc href="http://lists.w3.org/Archives/Public/w3c-wai-gl/">WCAG WG mailing list discussions</loc> are also publicly available, and future work undertaken by the Working Group may address comments received on this document.</p>
-			<p>This document has been produced as part of the W3C <loc href="http://www.w3.org/WAI/">Web Accessibility Initiative</loc> (WAI). The goals of the WCAG Working Group are discussed in the <loc href="http://www.w3.org/WAI/GL/charter">WCAG Working Group charter</loc>. The WCAG Working Group is part of the <loc href="http://www.w3.org/WAI/Technical/Activity">WAI Technical Activity</loc>.</p>
-         <p> Publication as a <phrase role="final">Working Group Note</phrase>
-         	<phrase role="ext-review">Public Editors' Draft</phrase><phrase role="int-review">Editors' Draft</phrase> does not imply endorsement by the W3C Membership. This is a draft document and may be updated, replaced or obsoleted by other documents at any time. It is inappropriate to cite this document as other than work in progress. </p>
-         <p>This document was produced by a group operating under the <loc href="http://www.w3.org/Consortium/Patent-Policy-20040205/">5 February 2004 W3C Patent Policy</loc>. W3C maintains a <loc role="disclosures"
-                 href="http://www.w3.org/2004/01/pp-impl/35422/status">public list of any patent disclosures</loc> made in connection with the deliverables of the group; that page also includes instructions for disclosing a patent. An individual who has actual knowledge of a patent which the individual believes contains <loc href="http://www.w3.org/Consortium/Patent-Policy-20040205/#def-essential">Essential Claim(s)</loc> must disclose the information in accordance with <loc href="http://www.w3.org/Consortium/Patent-Policy-20040205/#sec-Disclosure">section 6 of the W3C Patent Policy</loc>. </p>
-			<p>This document is governed by the <loc id="w3c_process_revision" href="http://www.w3.org/2015/Process-20150901/">1 September 2015 W3C Process Document</loc>. </p>
-		</status>
-		<abstract>
-         <p>This document, "Understanding WCAG 2.0," is an essential guide to  understanding and using <loc href="http://www.w3.org/TR/WCAG20/">Web Content Accessibility Guidelines (WCAG) 2.0</loc> 
-            <bibref ref="WCAG20"/>. It is part of a series of documents that support WCAG 2.0. Please note that the  contents of this document are informative  (they provide guidance), and not normative (they do not set  requirements for conforming to WCAG 2.0). See <loc href="http://www.w3.org/WAI/intro/wcag.php">Web Content Accessibility Guidelines (WCAG) Overview</loc> for an introduction to WCAG, supporting  technical documents, and educational material.</p>
-			<p>WCAG 2.0 establishes a set of Success Criteria to define conformance  to the WCAG 2.0 Guidelines. A Success Criterion is a testable statement  that will be either true or false when applied to specific Web content.  "Understanding WCAG 2.0" provides detailed information about each  Success Criterion, including its intent, the key terms that are used in  the Success Criterion, and how the Success Criteria in WCAG 2.0 help people with different types of disabilities. This document also provides examples of Web content that meet the success  criterion using various Web technologies (for instance, HTML, CSS, XML),  and common examples of Web content that does not meet the success  criterion. </p>
-			<p>This document indicates specific techniques to meet each Success Criterion. Details for how to implement each technique are available in <loc href="http://www.w3.org/TR/WCAG20-TECHS/">Techniques for WCAG 2.0</loc>, but "Understanding WCAG 2.0" provides the information about the relationship of each technique to the Success Criteria. Techniques are categorized by the level of support they provide for the Success Criteria. "Sufficient techniques" are <emph>sufficient</emph> to meet a  particular Success Criterion (either by themselves or in combination with  other techniques), while other techniques are advisory and therefore optional.  None of  the techniques are <emph>required</emph> to meet WCAG 2.0, although some may be the only  known method if a particular technology is used. "Advisory techniques" are not sufficient to meet the Success Criteria on their own (because they are not testable or provide incomplete support) but it is encouraged that authors follow them when possible to provide enhanced accessibility. </p>
-			<p>In addition to techniques for addressing the success criteria, "Common Failures" are also documented. These "Common Failures" are authoring practices that are known to cause Web content to fail to conform to WCAG 2.0. Authors must avoid those practices in order to meet the WCAG 2.0 Success Criteria.</p>
-			<p>This document is part of a series of documents published by the W3C Web  Accessibility Initiative (WAI) to support WCAG 2.0. This document was published as a Working Group Note at the same time WCAG 2.0 was published as a W3C Recommendation. Unlike WCAG 2.0, is expected that the information in Understanding WCAG 2.0 will be updated from time to time. See <loc href="http://www.w3.org/WAI/intro/wcag.php">Web Content Accessibility Guidelines (WCAG) Overview</loc> for an introduction to WCAG, supporting technical documents, and educational material.</p>
-		</abstract>
-		<langusage>
-			<language id="en-US"/>
-		</langusage>
-		<revisiondesc>
-			<p>
-				<loc href="/WAI/GL/WCAG20/change-history.html">History of Changes to WCAG 2.0 Working Drafts</loc>
-			</p>
-		</revisiondesc>
-	</header>
-	<front>
-		<div1 id="intro">
-			<head>Introduction to Understanding WCAG 2.0</head>
-			<div2 role="suppressed" id="introduction">
-				<head>Intro</head>
-            <p>Understanding WCAG 2.0 is an essential guide to understanding and using "Web Content Accessibility Guidelines 2.0" <bibref ref="WCAG20"/> Although the normative definition and requirements for WCAG 2.0 can all be found in the WCAG 2.0 document itself, the concepts and provisions may be new to some people. Understanding WCAG 2.0 provides a non-normative extended commentary on each guideline and each Success Criterion to help readers better understand the intent and how the guidelines and Success Criteria work together. It also provides examples of techniques or combinations of techniques that the Working Group has identified as being sufficient to meet each Success Criterion. Links are then provided to write-ups for each of the techniques.</p>
-				<p>This is not an introductory document. It is a detailed technical description of the guidelines and their Success Criteria. See <loc href="http://www.w3.org/WAI/intro/wcag.php">Web Content Accessibility Guidelines (WCAG) Overview</loc> for an introduction to WCAG, supporting  technical documents, and educational material.
-      </p>
-				<p>Understanding WCAG 2.0 is organized by guideline. There is an <emph>Understanding Guideline X.X</emph> section for each guideline.  The intent and any advisory techniques that are related to the guideline but not specifically related to any of its Success Criteria are listed there as well.</p>
-				<p>The <emph>Understanding Guidelines X.X</emph> section is then followed by a <emph>Understanding Success Criterion X.X.X</emph> section for each Success Criterion of that guideline.   These sections each contain:</p>
-				<ulist>
-					<item>
-						<p>The Success Criterion as it appears in WCAG 2.0</p>
-					</item>
-					<item>
-						<p>Intent of the Success Criterion</p>
-					</item>
-					<item>
-						<p>Benefits (how the Success Criterion helps people with disabilities)</p>
-					</item>
-					<item>
-						<p>Examples</p>
-					</item>
-					<item>
-						<p>
-            Related Resources
-          </p>
-					</item>
-					<item>
-						<p>Techniques or combinations of techniques that are sufficient to meet the guidelines</p>
-					</item>
-					<item>
-						<p>Common failures of this Success Criterion</p>
-					</item>
-					<item>
-						<p>Additional advisory techniques that go beyond what is required to meet the Success Criterion but can be used to make some or all types of content more accessible. Use of advisory techniques does not impact the level of conformance claimed.
-          </p>
-					</item>
-					<item>
-						<p>Key terms for this Success Criterion  (taken from the WCAG 2.0 Glossary)</p>
-					</item>
-				</ulist>
-				<p>Links are provided from each Guideline in WCAG 2.0 directly to each <emph>Understanding Guideline X.X</emph> in this document.  Similarly, there is a link from each Success Criterion in WCAG 2.0 to the <emph>Understanding Success Criterion X.X.X</emph> section in this document. </p>
-				<p>For information about individual techniques, follow the links throughout this document to the techniques of interest in the <loc href="/TR/WCAG20-TECHS/">Techniques for WCAG 2.0</loc> document.</p>
-				<p>For links to information on different disabilities and assistive technologies see <loc href="https://en.wikipedia.org/wiki/Disability">Disabilities on Wikipedia</loc>.
-        </p>
-				<div3 id="fourprincs" role="normal">
-					<head>Understanding the Four Principles of Accessibility</head>
-					<p>The guidelines and Success Criteria are organized around the following four principles, which lay the foundation necessary for anyone to access and use Web content. Anyone who wants to use the Web must have content that is:</p>
-					<olist>
-						<item>
-							<p> Perceivable - Information and user interface components must be presentable to users in ways they can perceive.</p>
-							<ulist>
-								<item>
-									<p>This means that users must be able to perceive the information being presented (it can't be invisible to all of their senses)</p>
-								</item>
-							</ulist>
-						</item>
-						<item>
-							<p>Operable - User interface components and navigation must be operable.</p>
-							<ulist>
-								<item>
-									<p>This means that users must be able to operate the interface (the interface cannot require interaction that a user cannot perform) </p>
-								</item>
-							</ulist>
-						</item>
-						<item>
-							<p>Understandable - Information and the operation of user interface must be understandable.</p>
-							<ulist>
-								<item>
-									<p>This means that users must be able to understand the information as well as the operation of the user interface (the content or operation cannot be beyond their understanding)</p>
-								</item>
-							</ulist>
-						</item>
-						<item>
-							<p>Robust - Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies.</p>
-							<ulist>
-								<item>
-									<p>This means that users must be able to access the content as technologies advance (as technologies and user agents evolve, the content should remain accessible)</p>
-								</item>
-							</ulist>
-						</item>
-					</olist>
-					<p>If any of these are not true, users with disabilities will not be able to use the Web. </p>
-					<p>Under each of the principles are guidelines and Success Criteria that help to address these principles for people with disabilities. There are many general usability guidelines that make content more usable by all people, including those with disabilities. However, in WCAG 2.0, we only include those guidelines that address problems particular to people with disabilities. This includes issues that block access or interfere with access to the Web more severely for people with disabilities.</p>
-				</div3>
-				<div3 id="layers" role="normal">
-					<head>Layers of Guidance</head>
-					<div4 id="layers-guidelines" role="normal">
-						<head>The Guidelines</head>
-                  <p>Under each principle there is a list of guidelines that address the principle. There are a total of 12 guidelines. A convenient list of just the guidelines can be found in the <loc href="contents"
-                          linktype="guideline">WCAG 2.0 table of contents</loc>. One of the key objectives of the guidelines is to ensure that content is directly accessible to as many people as possible, and capable of being re-presented in different forms to match different peoples' sensory, physical and cognitive abilities.</p>
-					</div4>
-					<div4 id="layers-sc" role="normal">
-						<head>Success Criteria</head>
-                  <p>Under each guideline, there are Success Criteria that describe specifically what must be achieved in order to <loc href="conformancedef"
-                          linktype="guideline">conform</loc> to this standard. They are similar to the "checkpoints" in WCAG 1.0. Each Success Criterion is written as a statement that will be either true or false when specific Web content is tested against it. The Success Criteria are written to be technology neutral.</p>
-						<p>All WCAG 2.0 Success Criteria are written as testable criteria for objectively determining if content satisfies the Success Criteria. While some of the testing can be automated using software evaluation programs, others require human testers for part or all of the test.</p>
-						<p>Although content may satisfy the Success Criteria, the content may not always be usable by people with a wide variety of disabilities. Professional reviews utilizing recognized qualitative heuristics are important in achieving accessibility for some audiences. In addition, usability testing is recommended. Usability testing aims to determine how well people can use the content for its intended purpose.</p>
-						<p>The content should be tested by those who understand how people with different types of disabilities use the Web. It is recommended that users with disabilities be included in test groups when performing human testing.
-            </p>
-						<p>Each Success Criterion for a guideline has a link to the section of the How to Meet document that provides:</p>
-						<ulist>
-							<item>
-								<p>sufficient techniques for meeting the Success Criterion,</p>
-							</item>
-							<item>
-								<p>optional advisory techniques, and</p>
-							</item>
-							<item>
-								<p>descriptions of the intent of the Success Criteria, including benefits, and examples.</p>
-							</item>
-						</ulist>
-					</div4>
-					<div4 id="layers-techs" role="normal">
-						<head>Sufficient Techniques, Advisory Techniques, and Failures</head>
-						<p>The next section, <specref ref="understanding-techniques"/>, provides important information about the techniques.</p>
-					</div4>
-				</div3>
-			</div2>
-		</div1>
-		<div1 id="understanding-techniques">
-			<head>Understanding Techniques for WCAG Success Criteria</head>
-			<div2 id="ut" role="suppressed">
-				<head>Understanding Techniques for WCAG Success Criteria (suppressed)</head>
-				<p>WCAG 2.0 guidelines and success criteria are designed to be broadly applicable to current and future web technologies, including dynamic applications, mobile, digital television, etc. They are stable and do not change.</p>
-            <p>Specific guidance for authors and evaluators on meeting the WCAG success criteria is provided in techniques, which include code examples, resources, and tests. W3C's <loc href="/TR/WCAG20-TECHS/">Techniques for WCAG 2.0</loc> document is updated periodically, about <phrase>twice per</phrase> year, to cover more current best practices and changes in technologies and tools.</p>
-				<p>The three types of guidance in <loc href="/TR/WCAG20-TECHS/">Techniques for WCAG 2.0</loc> are explained below:</p>
-				<ulist>
-					<item>
-						<p>Sufficient techniques</p>
-					</item>
-					<item>
-						<p>Advisory techniques</p>
-					</item>
-					<item>
-						<p>Failures</p>
-					</item>
-				</ulist>
-				<p>Also explained below:</p>
-				<ulist>
-					<item>
-						<p>General and technology-specific techniques - which can be sufficient or advisory</p>
-					</item>
-					<item>
-						<p>Other techniques - beyond what is in W3C's published document</p>
-					</item>
-					<item>
-						<p>Technique tests</p>
-					</item>
-					<item>
-						<p>User agent and assistive technology support</p>
-					</item>
-					<item>
-						<p>Using the techniques - with important considerations</p>
-					</item>
-				</ulist>
-            <p>
-               <loc href="http://www.w3.org/TR/UNDERSTANDING-WCAG20/conformance">Understanding Conformance</loc> provides related information, including on <loc href="http://www.w3.org/TR/UNDERSTANDING-WCAG20/conformance#uc-accessibility-support-head">understanding accessibility support</loc>.</p>
-				<div3 id="understanding-techniques-informative" role="normal">
-					<head>Techniques are Informative</head>
-					<p>
-						<emph role="strong">Techniques are informative—that means they are not required. The basis for determining conformance to WCAG 2.0 is the success criteria from the WCAG 2.0 standard—not the techniques.</emph>
-					</p>
-					<note>
-						<p>W3C cautions against requiring W3C's sufficient techniques. The only thing that should be required is meeting the WCAG 2.0 success criteria. To learn more, see:</p>
-						<ulist>
-							<item>
-                        <p>
-                           <loc href="http://www.w3.org/WAI/WCAG20/wcag2faq.html#techsnot">What would be the negative consequences of allowing <emph>only</emph> W3C's published techniques to be used for conformance to WCAG 2.0?</loc> in the WCAG 2 FAQ</p>
-							</item>
-							<!--
-							<item>
-								<p>
-									<loc href="http://www.w3.org/2013/02/stdref">Normative References to W3C Standards</loc>
-									<span class="quiet">[@@ Ian asks that we not point to this for now.]</span>
-								</p>
-							</item>
-							-->
-						</ulist>
-                  <p>
-                     <loc href="/TR/WCAG20-TECHS/">Techniques for WCAG 2.0</loc> uses the words "must" and "should" only to clarify guidance within the techniques, not to convey requirements for WCAG.</p>
-					</note>
-				</div3>
-				<div3 id="understanding-techniques-sufficient" role="normal">
-					<head>Sufficient Techniques</head>
-               <p>
-                  <emph>Sufficient techniques</emph> are reliable ways to meet the success criteria.</p>
-					<ulist>
-						<item>
-							<p>From an author's perspective: If you use the sufficient techniques for a given criterion correctly and it is <loc href="http://www.w3.org/TR/UNDERSTANDING-WCAG20/conformance.html#uc-accessibility-support-head">accessibility-supported</loc> for your users, you can be confident that you met the success criterion.</p>
-						</item>
-						<item>
-							<p>From an evaluator's perspective: If web content implements the sufficient techniques for a given criterion correctly and it is <loc href="http://www.w3.org/TR/UNDERSTANDING-WCAG20/conformance.html#uc-accessibility-support-head">accessibility-supported</loc> for the content's users, it conforms to that success criterion. (The converse is not true; if content does not implement these sufficient techniques, it does not necessarily fail the success criteria, as explained in <loc href="#ut-understanding-techniques-tests-head">Testing Techniques</loc> below.)</p>
-						</item>
-					</ulist>
-               <p>There may be other ways to meet success criteria besides the sufficient techniques in W3C's <loc href="/TR/WCAG20-TECHS/">Techniques for WCAG 2.0</loc> document, as explained in <loc href="#ut-understanding-techniques-othertechs-head">Other Techniques</loc> below. <emph>(See also <loc href="#ut-understanding-techniques-informative-head">Techniques are Informative</loc> above.)</emph>
-               </p>
-					<div4 id="understanding-techniques-sufficient-lists-and" role="normal">
-						<head>Numbered Lists, "AND"</head>
-                  <p> The W3C-documented sufficient techniques are provided in a numbered list where each list item provides a technique or combination of techniques that can be used to meet the success criterion. Where there are multiple techniques on a numbered list item connected by "AND" then all of the techniques must be used to be sufficient. For example, <loc href="http://www.w3.org/TR/UNDERSTANDING-WCAG20/complete#content-structure-separation-programmatic-techniques-head">Sufficient Techniques for 1.3.1</loc> has: "G115: Using semantic elements to mark up structure AND H49: Using semantic markup to mark emphasized or special text (HTML)".</p>
-               </div4>
-				</div3>
-				<div3 id="understanding-techniques-advisory" role="normal">
-					<head>Advisory Techniques</head>
-               <p>
-                  <emph>Advisory techniques</emph> are suggested ways to improve accessibility. They are often very helpful to some users, and may be the only way that some users can access some types of content.</p>
-					<p>Advisory techniques are not designated as sufficient techniques for various reasons such as:</p>
-					<ulist>
-						<item>
-							<p>they may not be sufficient to meet the full requirements of the success criteria;</p>
-						</item>
-						<item>
-							<p>they may be based on technology that is not yet stable;</p>
-						</item>
-						<item>
-							<p>they may not be <loc href="http://www.w3.org/WAI/GL/UNDERSTANDING-WCAG20/conformance.html#uc-accessibility-support-head">accessibility supported</loc> in many cases (for example, assistive technologies do not work with them yet);</p>
-						</item>
-						<item>
-							<p>they may not be testable;</p>
-						</item>
-						<item>
-							<p>in some circumstances they may not be applicable or practical, and may even decrease accessibility for some users while increasing it for others;</p>
-						</item>
-						<item>
-							<p>they may not address the success criterion itself, and instead provide related accessibility benefits.</p>
-						</item>
-					</ulist>
-					<p>Authors are encouraged to apply all of the techniques where appropriate to best address the widest range of users' needs.</p>
-				</div3>
-				<div3 id="understanding-techniques-failures" role="normal">
-					<head>Failures</head>
-               <p>
-                  <emph>Failures</emph> are things that cause accessibility barriers and fail specific success criteria. The documented <emph>failures</emph> are useful for:</p>
-					<ulist>
-						<item>
-							<p>Authors to know what to avoid,</p>
-						</item>
-						<item>
-							<p>Evaluators to use for checking if content does not meet WCAG success criteria.</p>
-						</item>
-					</ulist>
-					<p>Content that has a <emph>failure</emph> does not meet WCAG success criteria, unless an alternate version is provided without the failure.</p>
-					<p>If anyone identifies a situation where a documented failure is not correct, please <loc href="http://www.w3.org/WAI/WCAG20/comments/">report the situation as a WCAG comment</loc> so that it can be corrected or deleted as appropriate.</p>
-				</div3>
-				<div3 id="understanding-techniques-general-tech-specific" role="normal">
-					<head> General and Technology-specific Techniques</head>
-               <p>
-                  <emph>General techniques</emph> describe basic practices that apply to all technologies. <emph>Technology-specific techniques</emph> apply to a specific technology.</p>
-					<p>Some success criteria do not have technology-specific techniques and are covered only with general techniques. Therefore, both the general techniques and the relevant technology-specific techniques should be considered.</p>
-               <p>Publication of techniques for a specific technology does not imply that the technology can be used in all situations to create content that meets WCAG 2.0 success criteria and conformance requirements. Developers need to be aware of the limitations of specific technologies and provide content in a way that is accessible to people with disabilities.</p>
-				</div3>
-				<div3  id="understanding-techniques-othertechs" role="normal">
-					<head>Other Techniques</head>
-					<p>In addition to the techniques in W3C's <loc href="/TR/WCAG20-TECHS/">Techniques for WCAG 2.0</loc> document, <emph role="strong">there are other ways to meet WCAG success criteria</emph>. W3C's techniques are not comprehensive and may not cover newer technologies and situations.</p>
-					<p>
-						<emph role="strong">Web content does not have to use W3C's published techniques in order to conform to WCAG 2.0.</emph>
-						<emph>(See also <loc href="#ut-understanding-techniques-informative-head">Techniques are Informative</loc> above.)</emph>
-					</p>
-					<p>Content authors can develop different techniques. For example, an author could develop a technique for HTML5, <loc href="http://www.w3.org/WAI/intro/aria">WAI-ARIA</loc>, or other new technology. Other organizations may develop sets of techniques to meet WCAG 2.0 success criteria.</p>
-					<p>Any techniques can be sufficient if:</p>
-					<ulist>
-						<item>
-							<p>they satisfy the success criterion, and</p>
-						</item>
-						<item>
-							<p> all of the <loc href="http://www.w3.org/TR/UNDERSTANDING-WCAG20/conformance.html">WCAG 2.0 conformance requirements</loc> are met.</p>
-						</item>
-					</ulist>
-					<div4 id="understanding-techniques-submitting" role="normal">
-						<head>Submitting Techniques</head>
-						<p>The WCAG Working Group encourages people to submit new techniques so that they can be considered for inclusion in updates of the <loc href="/TR/WCAG20-TECHS/">Techniques for WCAG 2.0</loc> document. Please submit techniques for consideration using the <loc href="http://www.w3.org/WAI/GL/WCAG20/TECHS-SUBMIT/">Techniques Submission Form</loc>.</p>
-					</div4>
-				</div3>
-				<div3 id="understanding-techniques-tests" role="normal">
-					<head>Testing Techniques</head>
-					<p> Each technique has tests that help:</p>
-					<ulist>
-						<item>
-							<p> authors verify that they implemented the technique properly, and</p>
-						</item>
-						<item>
-							<p>evaluators determine if web content meets the technique.</p>
-						</item>
-					</ulist>
-					<p>The tests are only for a technique, they are not tests for conformance to WCAG success criteria.</p>
-					<ulist>
-						<item>
-							<p>Failing a technique test does not necessarily mean failing WCAG, because the techniques are discrete (that is, they address one specific point) and they are not required.</p>
-						</item>
-						<item>
-							<p>Content can meet WCAG success criteria in different ways other than W3C's published sufficient techniques.</p>
-						</item>
-						<item>
-							<p>Content that passes the sufficient techniques for a specific technology does not necessarily meet all WCAG success criteria. Some success criteria have only general techniques, not technology-specific techniques.</p>
-						</item>
-						<item>
-							<p>The content must be <loc href="http://www.w3.org/WAI/GL/UNDERSTANDING-WCAG20/conformance.html#uc-accessibility-support-head">accessibility supported</loc> for the content's users. Some sufficient techniques require browser, assistive technology, or other support that some users might not have.</p>
-						</item>
-					</ulist>
-					<p>Thus while the techniques are useful for evaluating content, evaluations must go beyond just checking the sufficient technique tests in order to evaluate how content conforms to WCAG success criteria.</p>
-               <p>
-                  <emph>Failures</emph> are particularly useful for evaluations because they do indicate non-conformance (unless an alternate version is provided without the failure).</p>
-				</div3>
-				<div3 id="understanding-techniques-support" role="normal">
-					<head>User Agent and Assistive Technology Support Notes</head>
-					<p>Some techniques require that web content users have specific browsers or assistive technologies in order for the technique to be <loc href="http://www.w3.org/TR/UNDERSTANDING-WCAG20/conformance.html#uc-accessibility-support-head">accessibility-supported</loc>. The <emph role="strong">User Agent and Assistive Technology Support Notes</emph> sections of individual techniques include some information to help determine accessibility support.</p>
-					<div4 id="understanding-techniques-support-change" role="normal">
-						<head>Support Notes Change Over Time</head>
-						<p>As time passes, the versions of user agents (browsers, etc.) or assistive technologies listed may not be the current versions. The Working Group may not update most of these notes as new versions are released. Authors should test techniques with the user agents and assistive technologies currently available to their users. See also <loc href="http://www.w3.org/WAI/GL/UNDERSTANDING-WCAG20/conformance.html#uc-accessibility-support-head">Understanding Accessibility Support</loc>.</p>
-					</div4>
-				</div3>
-				<div3 id="understanding-techniques-using" role="normal">
-					<head>Using the Techniques</head>
-               <p>
-                  <loc href="/TR/WCAG20-TECHS/">Techniques for WCAG 2.0</loc> is not intended to be used as a stand-alone document. Instead, it is expected that content authors will usually use <loc href="http://www.w3.org/WAI/WCAG20/quickref/">How to Meet WCAG 2.0: A customizable quick reference</loc> to read the WCAG success criteria, and follow links from there to specific topics in Understanding WCAG 2.0 and to specific techniques.</p>
-					<div4 id="understanding-techniques-using-alternatives" role="normal">
-						<head>Alternatives must meet success criteria</head>
-						<p>Some techniques describe how to provide alternate ways for users to get content. For example, <loc href="http://www.w3.org/TR/WCAG20-HTML-TECHS/G73">G73: Providing a long description in another location...</loc> mentions a transcript as an alternative for an audio file. Some alternatives must also conform to WCAG. For example, the transcript itself must meet all relevant success criteria. </p>
-					</div4>
-					<div4 id="understanding-techniques-using-examples" role="normal">
-						<head>Example Code</head>
-						<p>The code examples in the techniques are intended to demonstrate only the specific point discussed in the technique. They might not demonstrate best practice for other aspects of accessibility, usability, or coding not related to the technique. They are not intended to be copied and used as the basis for developing web content.</p>
-						<p>Many techniques point to "working examples" that are more robust and may be appropriate for copying and integrating into web content.</p>
-					</div4>
-				</div3>
-			</div2>
-		</div1>
-	</front>
-	<body>
-      <xi:include href="understanding/text-equiv.xml"/>
-      <xi:include href="understanding/media-equiv.xml"/>
-      <xi:include href="understanding/content-structure-separation.xml"/>
-      <xi:include href="understanding/visual-audio-contrast.xml"/>
-      <xi:include href="understanding/keyboard-operation.xml"/>
-      <xi:include href="understanding/time-limits.xml"/>
-      <xi:include href="understanding/seizure.xml"/>
-      <xi:include href="understanding/navigation-mechanisms.xml"/>
-      <xi:include href="understanding/meaning.xml"/>
-      <xi:include href="understanding/consistent-behavior.xml"/>
-      <xi:include href="understanding/minimize-error.xml"/>
-      <xi:include href="understanding/ensure-compat.xml"/>
-      <xi:include href="understanding/conformance.xml"/>
-	</body>
-	<back>
-		<inform-div1 id="conformance-referencing">
-			<head>How to refer to WCAG 2.0 from other documents</head>
-			<p>The following examples show how to reference WCAG 2.0 in various situations. For additional guidance, see <loc href="http://www.w3.org/WAI/intro/linking.html">Referencing and Linking to WAI Guidelines and Technical Documents</loc>.</p>
-			<p>
-        Please note that the 
-following language for referencing WCAG 2.0 can be inserted into your own 
-documents.
-        
-      </p>
-			<div2 role="normal" id="conformance-referencing-information">
-				<head>Information references</head>
-				<p>When referencing WCAG 2.0 in an informational fashion, the following format can be used.</p>
-				<p>
-					<emph>Web Content Accessibility Guidelines 2.0, W3C World Wide Web Consortium Recommendation XX Month Year (http://www.w3.org/TR/200X/REC-WCAG20-20081211/, Latest version at http://www.w3.org/TR/WCAG20/)</emph>
-				</p>
-			</div2>
-			<div2 role="normal" id="conformance-referencing-should">
-				<head>When referring to WCAG 2.0 from another standard with a "should" statement</head>
-				<p>When referencing WCAG 2.0 from within a <emph role="bold">should</emph> statement in a standard (or advisory statement in a regulation), then the full WCAG 2.0 should be referenced. This would mean that all three levels of WCAG 2.0 should be considered but that none are required. The format for referencing WCAG 2.0 from a "should" statement therefore, is:</p>
-				<p>
-					<emph>Web Content Accessibility Guidelines 2.0, W3C World Wide Web Consortium Recommendation XX Month Year. (http://www.w3.org/TR/200X/REC-WCAG20-20081211/)</emph>
-				</p>
-			</div2>
-			<div2 role="normal" id="conformance-referencing-must">
-				<head>When referring to WCAG 2.0 from another standard with a "shall or must" statement</head>
-            <p>When citing WCAG 2.0 as part of a requirement (e.g., a <emph role="bold">shall or must
-          </emph> statement in a standard or regulation), the reference must include the specific parts of WCAG 2.0 that are intended to be required. When referencing WCAG 2.0 in this manner, the following rules apply: 
-        </p>
-				<olist>
-					<item>
-						<p>Conformance at any level of WCAG 2.0 requires that all of the Level A Success Criteria be met. References to WCAG 2.0 conformance cannot be for any subset of Level A.
-            </p>
-					</item>
-					<item>
-						<p>Beyond Level A, a "shall or must" reference may include any subset of provisions in Levels AA and AAA. For example, "<emph>all of Level A and [some specific list of Success Criteria in Level AA and Level AAA]</emph>" be met.
-            </p>
-					</item>
-					<item>
-						<p>If Level AA conformance to WCAG 2.0 is specified, then all Level A and all Level AA Success Criteria must be met.</p>
-					</item>
-					<item>
-						<p>If Level AAA conformance to WCAG 2.0 is specified, then all Level A, all Level AA, and all Level AAA Success Criteria must be met.</p>
-						<note>
-							<p>It is not recommended that Level AAA conformance ever be required for entire sites as a general policy because it is not possible to satisfy all Level AAA Success Criteria for some content. 
-              </p>
-							<p>The sets of Success Criteria defined in WCAG are interdependent and individual Success Criteria rely on each other's definitions in ways which may not be immediately obvious to the reader. Any set of Success Criteria must include all of the Level A provisions.</p>
-						</note>
-					</item>
-				</olist>
-			</div2>
-			<div2 role="normal" id="conformance-referencing-examples">
-				<head>Examples</head>
-				<p>
-					<emph role="bold">To cite only the Level A Success Criteria (Single-A conformance):</emph>
-				</p>
-				<p>
-					<emph>Web Content Accessibility Guidelines 2.0, W3C World Wide Web Consortium Recommendation XX Month Year, Level A Success Criteria. (http://www.w3.org/TR/200X/REC-WCAG20-20081211/)</emph>
-				</p>
-				<p>
-					<emph role="bold">To cite the Levels A and AA Success Criteria (Double-A conformance):</emph>
-				</p>
-				<p>
-					<emph>Web Content Accessibility Guidelines 2.0, W3C World Wide Web Consortium Recommendation XX Month Year, Level A &amp; Level AA Success Criteria. (http://www.w3.org/TR/200X/REC-WCAG20-20081211/)</emph>
-				</p>
-				<p>
-					<emph role="bold">To cite Level A Success Criteria and selected Success Criteria from Level AA and Level AAA: </emph>
-				</p>
-				<p>
-					<emph>Web Content Accessibility Guidelines 2.0, W3C World Wide Web Consortium Recommendation XX Month Year, Level A Success Criteria plus Success Criteria 1.x.x, 2.y.y, … 3.z.z. (http://www.w3.org/TR/200X/REC-WCAG20-20081211/)</emph>
-				</p>
-				<p>
-					<emph role="bold">Example of use of a WCAG reference in a "shall or must" statement.</emph>
-				</p>
-				<p>All Web content on publicly available Web sites shall conform to Web Content Accessibility Guidelines 2.0, W3C World Wide Web Consortium Recommendation XX Month Year, Level A Success Criteria plus Success Criteria 1.2.3, 2.4.5-6, 3.1.2 (http://www.w3.org/TR/200X/REC-WCAG20-20081211/)</p>
-			</div2>
-			<div2 role="normal" id="conformance-referencing-support">
-				<head>Referring to content from WCAG support documents</head>
-				<p>Techniques, which are listed in Understanding WCAG 2.0 and described in other supporting documents, are not part of the normative WCAG 2.0 Recommendation and should not be cited using the citation for the WCAG 2.0 Recommendation itself. References to techniques in support documents should be cited separately.</p>
-				<p>Techniques can be cited based on the individual Technique document or on the master WCAG 2.0 Techniques document. For example, the technique "Using alt attributes on img elements" could be cited as</p>
-				<p role="indent">
-					<emph>"Using alt attributes on img elements," W3C World Wide Web Consortium Note. (URI: {URI of technique}) </emph>
-				</p>
-				<p role="indent">or</p>
-				<p role="indent">
-					<emph>W3C World Wide Web Consortium (200x): WCAG2.0 HTML Techniques (URI: {URI of HTML Techniques})</emph>
-				</p>
-            <p role="indent"> 
-               <emph role="bold">Techniques are not designed to be referenced as "required"</emph> from any standard or regulation.Standards and regulations should not make any specific technique mandatory, though they may choose to recommend techniques.</p>
-			</div2>
-		</inform-div1>
-		<inform-div1 id="accessibility-support-documenting">
-			<head>Documenting Accessibility Support for Uses of a Web Technology</head>
-			<p>The documentation of accessibility support for uses of a Web technology  provides the information needed to determine whether it is possible to  satisfy the WCAG 2.0 Success Criteria for a particular environment. </p>
-			<p>Accessibility Support documentation for uses of a Web technology includes the following information: </p>
-			<ulist>
-				<item>
-					<p> The version or versions of the technology </p>
-				</item>
-				<item>
-					<p> For each user agent or plug-in that supports this version of the technology:</p>
-					<ulist>
-						<item>
-							<p> The version of the user agent or plug-in, including the operating system or platform </p>
-						</item>
-						<item>
-							<p> Ways of using the technology that are supported by the user agent; ideally, there are ways to meet all of the success criteria, but exceptions should be noted. </p>
-						</item>
-						<item>
-							<p> Known limitations of the user agent support for uses of the technology to meet Success Criteria
-							</p>
-						</item>
-					</ulist>
-				</item>
-				<item>
-					<p> For each assistive technology that supports the Web technology:</p>
-					<ulist>
-						<item>
-							<p> The version of the assistive technology, including the operating system or platform </p>
-						</item>
-					</ulist>
-				</item>
-				<item>
-					<p> For each host user agent that is supported by this version of the assistive technology:</p>
-					<ulist>
-						<item>
-							<p> Ways of using the technology supported by the assistive technology for this user agent </p>
-						</item>
-						<item>
-							<p> Known limitations in the support of uses of the technology to meet success criteria when using the assistive technology with this user agent </p>
-						</item>
-					</ulist>
-				</item>
-			</ulist>
-			<p>Target environments are defined by the user agents and assistive technologies available to its users. Documentation of accessibility support involves detailed understanding of the ways to use functionality of a  technology to meet success criteria, and also of user agents and assistive technology. Because of this, vendors and developers of Web technologies and user agents are encouraged to provide this information about the accessibility  support of their products. Similarly, developers and vendors of  assistive technology are encouraged to provide this information about  the ways to use Web technologies  that are supported by their products. Authors should need to document the accessibility supported ways to use a technology only  when there is not reliable documentation available from vendors or  testing groups for those uses. </p>
-			<p>For a controlled environment, such as a corporate workplace,  the user agents and assistive technologies available may be a specific  set of versions of user agents on a specific set of platforms. To  determine whether uses of a Web technology are accessibility supported in a  target environment, an author checks that the user agents and assistive  technologies available are in the set of supported user agents and assistive technologies listed for those uses in the Accessibility Support  documentation. </p>
-			<p>For a target environment like the Internet, authors may need  to consider a much larger set of user agents, including older versions,  and on a wider variety of platforms. </p>
-			<p>Environments that use different natural languages are different target environments. For example, the accessibility-supported ways of using technologies for an English language environment may differ from those  for an Arabic language environment, since there may be different user agents and assistive technologies that support these languages.</p>
-			<p>The documentation includes version-specific information about all the assistive technologies and all the user agents and the ways  that they interact with one another. If support in these user agents is  similar, it will be straightforward for an author to decide if a documented way of using a technology is accessibility supported. If the uses supported are different in different versions, authors can only rely on the uses that are supported in the versions available to their users in  determining accessibility support. </p>
-			<p>If a way of using a technology is not relied upon for conformance, the absence of accessibility support for that use does not prevent conformance of the Web page. So if the unsupported use does not occur in the content, or if there is a conforming version of that content available, the Web page still conforms. For instance, lack of accessibility support for interactive controls in a Web technology would not prevent uses of the Web technology for non-interactive content that are accessibility supported. </p>
-		</inform-div1>
-		<inform-div1 id="understanding-metadata">
-			<head>Understanding Metadata</head>
-			<p>This section discusses metadata techniques that can be employed to  satisfy WCAG 2.0 Success Criteria. For more information about metadata  see resources below. </p>
-			<p>At its most basic level, metadata is essentially 'data about data' and is used to both describe and find resources. </p>
-			<p>Metadata is a powerful tool that can be used for describing Web  pages and accessible components of Web pages as well as associating  alternate versions of Web content to each other. These descriptions in  turn allows users to locate specific information they need or prefer. </p>
-			<p>In conjunction with WCAG, metadata can play a number of roles including: </p>
-			<olist>
-				<item>
-					<p> Metadata can be used to associate conforming alternate  versions of Web pages with Web pages which do not conform, in order to  allow users to find the conforming alternate version when they land on  a non-conforming page that they cannot use. </p>
-				</item>
-				<item>
-					<p> Metadata can be used to locate and also to describe  alternate pages where there are multiple versions of a page which have  been developed, especially where the alternate pages are optimized for  individuals with different disabilities. The user can use the metadata  both to locate the alternate versions and to identify characteristics  of the versions, so that they can find the one that best meets their  needs. </p>
-				</item>
-				<item>
-					<p>In addition to being used for whole pages (as in #1 and #2  above), metadata can be used to describe alternate versions of  subcomponents of a page. Again, the metadata can be used to find  alternate versions of a Web page component as well as to get  descriptions of the alternate versions ( if there are several) in order  to determine which one would best meet the user's needs. </p>
-				</item>
-			</olist>
-			<div2 role="normal" id="understanding-metadata-resources">
-				<head>Metadata Resources</head>
-				<p>Metadata descriptions often provide values from defined, agreed  vocabularies such as the resource's subject matter or its date of  publication, and are machine readable - software that understands the  metadata scheme in use can do useful tasks not feasible otherwise.  Typically, an object having metadata may have one or more such metadata  descriptions. </p>
-				<p>Well-known specifications (schemas) for metadata include: </p>
-				<ulist>
-					<item>
-						<p>
-							<loc href="http://www.loc.gov/standards/mets/">Metadata Encoding and Transmission Standard (METS) scheme</loc>
-						</p>
-					</item>
-					<item>
-						<p>
-							<loc href="http://dublincore.org">Dublin Core Metadata Initiative (DCMI) terms for cross-disciplinary resources</loc>
-						</p>
-					</item>
-					<item>
-						<p>
-							<loc href="http://www.ieee.org/index.html">IEEE Standards</loc>
-						</p>
-					</item>
-					<!-- BBC: Commented out Dec. 2008 (broken linkserver non-responsive) item>
-            <p>
-              <loc href="http://jtc1sc36.org/Workgroups/Work%20Group%20Seven">ISO/IEC JTC1 Individualized Adaptability and Accessibility for Learning, Education and Training 24751</loc> otherwise known as the Access For All (AfA) Metadata </p>
-          </item-->
-				</ulist>
-				<p>There are some tools available to provide resource descriptions, or  they can be provided manually. The more easily the metadata can be  created and collected at point of creation of a resource or at point of  publication, the more efficient the process and the more likely it is  to take place. </p>
-				<p>Some examples include: </p>
-				<ulist>
-					<item>
-						<p>
-							<loc href="http://www.ukoln.ac.uk/metadata/dcdot/">DC-dot</loc>
-						</p>
-					</item>					
-				</ulist>
-				<p>Accessibility metadata implementations include: </p>
-				<ulist>
-					<item>
-						<p>
-							<loc href="http://barrierfree.ca/tile/">The Inclusive Learning Exchange (TILE)</loc>
-						</p>
-					</item>
-				</ulist>
-			</div2>
-			<!--div2 role="normal">
-        <head>Metadata Techniques for WCAG 2.0</head>
-        <p>A [compilation of the metadata techniques for WCAG 2.0] is included in the techniques document </p>
-      </div2-->
-      </inform-div1>
-      <inform-div1 id="acknowledgements">
-         <head>Acknowledgements</head>
-      	<p>This publication has been funded in part with U.S. Federal funds from the Department of Education, National Institute on Disability, Independent Living, and Rehabilitation Research (NIDILRR), initially under contract number ED-OSE-10-C-0067 and currently under contract number HHSP23301500054C. The content of this publication does not necessarily reflect the views or policies of the U.S. Department of Education, nor does mention of trade names, commercial products, or organizations imply endorsement by the U.S. Government.</p>
-         <p>Additional information about participation in the Web Content Accessibility Guidelines Working Group (WCAG WG) can be found on the <loc href="http://www.w3.org/WAI/GL/">Working Group home page</loc>. 
-			</p>
-         <div2 id="ack_participants-active" role="normal">
-            <head>Participants of the WCAG WG active in the development of this document:</head>
-            <ulist>
-               <item>
-                  <p>Paul Adam (Deque)</p>
-               </item>
-               <item>
-                  <p>Kathleen Anderson</p>
-               </item>
-               <item>
-                  <p>Jon Avila (SSB Bart Group)</p>
-               </item>
-               <item>
-                  <p>Bruce Bailey (U.S. Access Board) </p>
-               </item>
-            	<item>
-            		<p>Laura Carlson</p>
-            	</item>
-            	<item>
-            		<p>Louis Cheng (Google)</p>
-            	</item>
-               <item>
-                  <p>Michael Cooper (W3C)</p>
-               </item>
-            	<item>
-            		<p>Wayne Dick</p>
-            	</item>
-            	<item>
-            		<p>Eric Eggert (W3C)</p>
-            	</item>
-            	<item>
-            		<p>Michael Elledge</p>
-            	</item>
-               <item>
-                  <p>Detlev Fischer</p>
-               </item>
-               <item>
-                  <p>John Foliot (Deque)</p>
-               </item>
-               <item>
-                  <p>Loretta Guarino Reid (Google)</p>
-               </item>
-               <item>
-                  <p>Jon Gunderson</p>
-               </item>
-               <item>
-                  <p>Katie Haritos-Shea</p>
-               </item>
-               <item>
-                  <p>Marc Johlic (IBM)</p>
-               </item>
-               <item>
-                  <p>Barry Johnson (Deque)</p>
-               </item>
-               <item>
-                  <p>Andrew Kirkpatrick (Adobe)</p>
-               </item>
-               <item>
-                  <p>David MacDonald</p>
-               </item>
-            	<item>
-            		<p>Erich Manser (IBM)</p>
-            	</item>
-               <item>
-                  <p>James Nurthen (Oracle)</p>
-               </item>
-               <item>
-                  <p>Joshue O Connor</p>
-               </item>
-            	<item>
-            		<p>Jan Richards</p>
-            	</item>
-               <item>
-                  <p>Alan Smith</p>
-               </item>
-               <item>
-                  <p>Adam Solomon</p>
-               </item>
-            	<item>
-            		<p>Makoto Ueki</p>
-            	</item>
-               <item>
-                  <p>Gregg Vanderheiden</p>
-               </item>
-               <item>
-                  <p>Kathleen Wahlbin</p>
-               </item>
-            	<item>
-            		<p>Can Wang (Zhejiang University)</p>
-            	</item>
-            	<item>
-            		<p>Jason White (Educational Testing Service)</p>
-            	</item>
-            	<item>
-            		<p>Kenny Zhang (W3C)</p>
-            	</item>
-            </ulist>
-         </div2>
-         <div2 id="ack_participants-previous" role="normal">
-            <head>Other previously active WCAG WG participants and other contributors to WCAG 2.0 or supporting resources</head>
-         	<p>Shadi Abou-Zahra, Jim Allan, Jenae Andershonis, Wilhelm Joys Andersen, Andrew Arch, Avi Arditti, Aries Arditi, Jon Avila, Mark Barratt, Mike Barta, Sandy Bartell, Kynn Bartlett, Chris Beer, Charles Belov, Marco Bertoni, Harvey Bingham, Chris Blouch, Paul Bohman, Frederick Boland, Denis Boudreau, Patrice Bourlon, Judy Brewer, Andy Brown, Dick Brown, Doyle Burnett, Raven Calais, Ben Caldwell, Alastair Campbell, Laura Carlson, Tomas Caspers, Roberto Castaldo, Sofia Celic-Li, Sambhavi Chandrashekar, Mike Cherim, Jonathan Chetwynd, Wendy Chisholm, Alan Chuter, David M Clark, Joe Clark, Darcy Clarke, James Coltham, Vivienne Conway, Earl Cousins, James Craig, Tom Croucher, Pierce Crowell, Nir Dagan, Daniel Dardailler, Geoff Deering, Sébastien Delorme, Pete DeVasto, Wayne Dick, Iyad Abu Doush, Sylvie Duchateau, Cherie Eckholm, Roberto Ellero, Don Evans, Gavin Evans, Neal Ewers, Steve Faulkner, Bengt Farre, Lainey Feingold, Wilco Fiers, Michel Fitos, Alan J. Flavell, Nikolaos Floratos, Kentarou Fukuda, Miguel Garcia, P.J. Gardner, Alistair Garrison, Greg Gay, Becky Gibson, Al Gilman, Kerstin Goldsmith, Michael Grade, Karl Groves, Jon Gunderson, Emmanuelle Gutiérrez y Restrepo, Brian Hardy, Eric Hansen, Benjamin Hawkes-Lewis, Sean Hayes, Shawn Henry, Hans Hillen, Donovan Hipke, Bjoern Hoehrmann, Allen Hoffman, Chris Hofstader, Yvette Hoitink, Martijn Houtepen, Carlos Iglesias, Jonas Jacek, Ian Jacobs, Phill Jenkins, Duff Johnson, Jyotsna Kaki, Shilpi Kapoor, Leonard R. Kasday, Kazuhito Kidachi, Ken Kipness, John Kirkwood, Jason Kiss, Johannes Koch, Marja-Riitta Koivunen, Maureen Kraft, Preety Kumar, Kristjan Kure, Andrew LaHart, Gez Lemon, Chuck Letourneau, Aurélien Levy, Harry Loots, Scott Luebking, Tim Lacy, Jim Ley, Alex Li, William Loughborough, Greg Lowney, N Maffeo, Mark Magennis, Kapsi Maria, Luca Mascaro, Matt May, Sheena McCullagh, Liam McGee, Jens Meiert, Niqui Merret, Jonathan Metz, Alessandro Miele, Steven Miller, Mathew J Mirabella, Matt May, Marti McCuller, Sorcha Moore, Mary Jo Mueller, Charles F. Munat, Robert Neff, Charles Nevile, Liddy Nevile, Dylan Nicholson, Bruno von Niman, Tim Noonan, Sebastiano Nutarelli, Graham Oliver, Sean B. Palmer, Sailesh Panchang, Devarshi Pant, Nigel Peck, Anne Pemberton, David Poehlman, Ian Pouncey, Charles Pritchard, Kerstin Probiesch, W Reagan, Adam Victor Reed, Chris Reeve, Chris Ridpath, Lee Roberts, Mark Rogers, Raph de Rooij, Gregory J. Rosmaita, Matthew Ross, Sharron Rush, Joel Sanda, Janina Sajka, Roberto Scano, Gordon Schantz, Tim van Schie, Wolf Schmidt, Stefan Schnabel, Lisa Seeman, Cynthia Shelly, Glenda Sims, John Slatin, Becky Smith, Jared Smith, Andi Snow-Weaver, Neil Soiffer, Jeanne Spellman, Mike Squillace, Michael Stenitzer, Diane Stottlemyer, Christophe Strobbe, Sarah J Swierenga, Jim Thatcher, Terry Thompson, Justin Thorp, David Todd, Mary Utt, Jean Vanderdonckt, Carlos A Velasco, Eric Velleman, Gijs Veyfeyken, Dena Wainwright, Paul Walsch, Daman Wandke, Richard Warren, Elle Waters, Takayuki Watanabe, Léonie Watson, Gian Wild, David Wooley, Wu Wei, Leona Zumbo.</p>
-         </div2>
-      </inform-div1>
-		<inform-div1 id="references">
-			<head>References</head>
-			<blist>
-            <bibl id="ANSI-HFES-100-1988"
-                  key="ANSI-HFES-100-1988">ANSI/HFS 100-1988, American National Standard for Human Factors Engineering of Visual Display Terminal Workstations, Section 6, pp. 17-20.</bibl>
-				<bibl id="ARDITI" key="ARDITI">Arditi, A. (2002). Effective color contrast: designing for people with partial sight and color deficiencies. New York, Arlene R. Gordon Research Institute, Lighthouse International.</bibl>
-            <bibl id="ARDITI-FAYE"
-                  key="ARDITI-FAYE">Arditi, A. and Faye, E. (2004). Monocular and binocular letter contrast sensitivity and letter acuity in a diverse ophthalmologic practice. Supplement to Optometry and Vision Science, 81 (12S), 287.</bibl>
-            <bibl id="ARDITI-KNOBLAUCH-1994"
-                  key="ARDITI-KNOBLAUCH">Arditi, A. and Knoblauch, K. (1994). Choosing effective display colors for the partially-sighted. Society for Information Display International Symposium Digest of Technical Papers, 25, 32-35.</bibl>
-            <bibl id="ARDITI-KNOBLAUCH-1996"
-                  key="ARDITI-KNOBLAUCH-1996">Arditi, A. and Knoblauch, K. (1996). Effective color contrast and low vision. In B. Rosenthal and R. Cole (Eds.) Functional Assessment of Low Vision. St. Louis, Mosby, 129-135.</bibl>
-				<bibl id="CAPTCHA" key="CAPTCHA">The CAPTCHA Project, Carnegie Mellon University. The project is online at <loc href="http://www.captcha.net">http://www.captcha.net</loc>.</bibl>
-				<!-- <bibl id="EPFND" key="EPFND"> Experts Issue Recommendations to Protect Public from Seizures Induced by TV / Videogames. A copy of the standard is available at <loc href="http://www.epilepsyfoundation.org/aboutus/pressroom/pr20050919.cfm">http://www.epilepsyfoundation.org/aboutus/pressroom/pr20050919.cfm</loc>.</bibl> -->
-            <bibl id="GITTINGS-FOZARD"
-                  key="GITTINGS-FOZARD">Gittings, NS and Fozard, JL (1986). Age related changes in visual acuity. Experimental Gerontology, 21(4-5), 423-433.</bibl>
-				<bibl id="HARDING-BINNIE">Harding G. F. A. and Binnie, C.D., Independent Analysis of the ITC Photosensitive Epilepsy Calibration Test Tape. 2002.</bibl>
-            <bibl id="HEARING-AID-INT"
-                  key="HEARING-AID-INT">Levitt, H., Kozma-Spytek, L., &amp; Harkins, J. (2005). In-the-ear measurements of interference in hearing aids from digital wireless telephones. Seminars in Hearing, 26(2), 87.</bibl>
-				<bibl id="IEC-4WD">IEC/4WD 61966-2-1: Colour Measurement and Management in Multimedia Systems and Equipment - Part 2.1: Default Colour Space - sRGB. May 5, 1998.</bibl>
-				<bibl id="ISO-9241-3">ISO 9241-3, Ergonomic requirements for office work with visual display terminals (VDTs) - Part 3: Visual display requirements. Amendment 1.</bibl>
-            <bibl id="I18N-CHAR-ENC"
-                  key="I18N-CHAR-ENC">
-"Tutorial: Character sets &amp; encodings in XHTML, HTML and CSS," R. Ishida, ed., This tutorial is available at <loc href="http://www.w3.org/International/tutorials/tutorial-char-enc/">http://www.w3.org/International/tutorials/tutorial-char-enc/</loc>. 
-</bibl>
-            <bibl id="KNOBLAUCH"
-                  key="KNOBLAUCH">Knoblauch, K., Arditi, A. and Szlyk, J. (1991). Effects of chromatic and luminance contrast on reading. Journal of the Optical Society of America A, 8, 428-439.</bibl>
-				<bibl id="LAALS" key="LAALS">Bakke, M. H., Levitt, H., Ross, M., &amp; Erickson, F. (1999). <loc href="http://search.naric.com/research/rehab/download.cfm?ID=101662">Large area assistive listening systems (ALS): Review and recommendations (PDF)</loc> (Final Report. NARIC Accession Number: O16430). Jackson Heights, NY: Lexington School for the Deaf/Center for the Deaf Rehabilitation Research Engineering Center on Hearing Enhancement.
-</bibl>
-				<bibl id="sRGB">"A Standard Default Color Space for the Internet - sRGB," M. Stokes, M. Anderson, S. Chandrasekar, R. Motta, eds., Version 1.10, November 5, 1996. A copy of this paper is available at <loc href="http://www.w3.org/Graphics/Color/sRGB.html">http://www.w3.org/Graphics/Color/sRGB.html</loc>.</bibl>
-				<bibl id="UNESCO" key="UNESCO">International Standard Classification of Education, 1997. A copy of the standard is available at <loc href="http://www.unesco.org/education/information/nfsunesco/doc/isced_1997.htm">http://www.unesco.org/education/information/nfsunesco/doc/isced_1997.htm</loc>.</bibl>
-				<bibl id="WCAG20" key="WCAG20">"Web Content Accessibility Guidelines 2.0,"  B. Caldwell, M Cooper, L Guarino Reid, and G. Vanderheiden, eds., W3 Recommendation 12 December 2008, <loc href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/">http://www.w3.org/TR/2008/REC-WCAG20-20081211</loc>. The latest version of WCAG 2.0 is available at <loc href="http://www.w3.org/TR/WCAG20/">http://www.w3.org/TR/WCAG20/</loc>.
-        </bibl>
-			</blist>
-		</inform-div1>
-	</back>
-</spec>
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE spec
+  SYSTEM "xmlspec.dtd">
+<spec status="int-review" w3c-doctype="review" role="editors-copy" xmlns:xi="http://www.w3.org/2001/XInclude">
+   <header>
+      <title>Understanding <abbr expansion="Web Content Accessibiity Guidelines">WCAG</abbr> 2.0</title>
+      <subtitle>A guide to understanding and implementing Web Content Accessibility Guidelines 2.0</subtitle>
+      <version/>
+      <w3c-designation>UNDERSTANDING-WCAG20</w3c-designation>
+      <w3c-doctype>Editors' Draft</w3c-doctype>
+      <pubdate>
+         <day>28</day>
+         <month>October</month>
+         <year>2016</year>
+      </pubdate>
+      <publoc>
+      	<loc href="http://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20160913/">http://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20160913/</loc>
+      	<!--<loc href="http://www.w3.org/WAI/GL/2016/WD-UNDERSTANDING-WCAG20-20160719/">http://www.w3.org/WAI/GL/2016/WD-UNDERSTANDING-WCAG20-20160719/</loc>-->
+	</publoc>
+      <altlocs>
+         <loc href="complete.html">Single file version</loc>
+         <loc href="complete-diff.html">Single file diff-marked version showing revisions since 17 March 2015</loc>
+         <loc href="/WAI/WCAG20/versions/understanding/">Alternate Versions of Understanding WCAG 2.0</loc>
+      </altlocs>
+      <latestloc>
+      	<loc href="http://www.w3.org/TR/UNDERSTANDING-WCAG20/">http://www.w3.org/TR/UNDERSTANDING-WCAG20/</loc>
+      	<!--<loc href="http://www.w3.org/WAI/GL/UNDERSTANDING-WCAG20/">http://www.w3.org/WAI/GL/UNDERSTANDING-WCAG20/</loc>-->
+      </latestloc>
+      <prevlocs>
+      	<loc href="http://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20160317/">http://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20160317/</loc>
+      	<!--	<loc href="http://www.w3.org/WAI/GL/2016/WD-UNDERSTANDING-WCAG20-20160105/">http://www.w3.org/WAI/GL/2016/WD-UNDERSTANDING-WCAG20-20160105/</loc>-->
+		    </prevlocs>
+      <authlist>
+         <author role="current">
+            <name>Michael Cooper</name>
+            <affiliation>W3C</affiliation>
+         </author>
+         <author role="current">
+            <name>Andrew Kirkpatrick</name>
+            <affiliation>Adobe Systems Inc.</affiliation>
+         </author>
+         <author role="current">
+            <name>Joshue O Connor</name>
+            <affiliation>InterAccess</affiliation>
+         </author>
+         <author role="past">
+            <name>Loretta Guarino Reid</name>
+            <affiliation>(until May 2013 while at Google, Inc.)</affiliation>
+         </author>
+         <author role="past">
+            <name>Gregg Vanderheiden</name>
+            <affiliation>(until May 2013 while at Trace R&amp;D  Center, University of
+Wisconsin-Madison)</affiliation>
+			</author>
+			<author role="past">
+				<name>Ben Caldwell</name>
+				<affiliation>(until September 2010 while at Trace R&amp;D Center, University of
+    			Wisconsin-Madison)</affiliation>
+			</author>
+			<author role="past">
+				<name>Wendy Chisholm</name>
+				<affiliation>(until July 2006 while at W3C)</affiliation>
+			</author>
+			<author role="past">
+				<name>John Slatin</name>
+				<affiliation>(until June 2006 while at Accessibility Institute, University of Texas at
+Austin)</affiliation>
+			</author>
+		</authlist>
+		<status>
+         <p>
+            <emph>This section describes the status of this document at the time of its publication. Other documents may supersede this document. A list of current W3C publications and the latest revision of this technical report can be found in the <loc href="http://www.w3.org/TR/">W3C technical reports index</loc> at <loc href="http://www.w3.org/TR/">http://www.w3.org/TR/</loc>.</emph>
+         </p>
+         <p>This is a <phrase role="final">Working Group Note</phrase>
+         	<phrase role="ext-review">Public Editors' Draft of</phrase><phrase role="int-review">Editors' Draft of</phrase> "Understanding WCAG 2.0". The <loc href="http://www.w3.org/WAI/GL/">Web Content Accessibility Guidelines Working Group</loc> considers this document to be important for understanding the success criteria in the <loc href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/">Web Content Accessibility Guidelines (WCAG) 2.0 Recommendation</loc>. Please note that the contents of this document are informative (they provide guidance), and not normative (they do not set requirements for conforming to WCAG 2.0).</p>
+			<p>Understanding WCAG 2.0 was previously published on 11 December 2008 as a Working Group Note and updated 14 October 2010, 3 January 2012, 5 September 2013, 3 March 2014, 8 April 2014, 16 September 2014, 26 February 2015, and 17 March 2016. This new version updates the support information provided for WCAG 2.0. Note that WCAG 2.0 itself remains unchanged, only the informative support materials have been updated. The only change in this version is to <loc href="conformance.html#uc-partial-third-head">add explanation about partial conformance claims due to third-party content</loc>.</p>
+      	<p><phrase role="ext-review">The purpose of this draft is to collect public feedback on proposed changes since the <loc href="http://www.w3.org/TR/2015/NOTE-UNDERSTANDING-WCAG20-20150226/">Understanding WCAG 2.0 Working Group Note of 26 February 2015</loc>. The Working Group intends to publish an updated Note once feedback from this review has been incorporated. <emph role="bold">The existing Understanding document remains in place as a W3C Note</emph> while this separate draft update is under review and the WCAG Working Group addresses comments.</phrase> The changes are highlighted in the <loc href="complete-diff">diff-marked version</loc>.</p>
+         <p>
+         	<phrase role="ext-review">Comments on this draft are due <emph role="bold">on or before 29 January 2016</emph>.</phrase> The Working Group requests that any comments be made using the options documented in <loc href="http://www.w3.org/WAI/WCAG20/comments/">Instructions for Commenting on WCAG 2.0 Documents</loc>. If this is not possible, comments can also be sent to <loc href="mailto:public-comments-wcag20@w3.org">public-comments-wcag20@w3.org</loc>. The <loc href="http://lists.w3.org/Archives/Public/public-comments-wcag20/">archives for the public comments list</loc> are publicly available. <phrase role="ext-review">Because this is a public review of changes to the Working Group Notes, only comments on changes made since the last Notes will be processed during this review; other comments will be saved and treated as comments on the updated Notes once published. </phrase><phrase role="final">Comments received on this document may be addressed in future versions of this document, or in another manner. </phrase><!--The Working Group does not plan to make formal responses to comments.--> Archives of the <loc href="http://lists.w3.org/Archives/Public/w3c-wai-gl/">WCAG WG mailing list discussions</loc> are also publicly available, and future work undertaken by the Working Group may address comments received on this document.</p>
+			<p>This document has been produced as part of the W3C <loc href="http://www.w3.org/WAI/">Web Accessibility Initiative</loc> (WAI). The goals of the WCAG Working Group are discussed in the <loc href="http://www.w3.org/WAI/GL/charter">WCAG Working Group charter</loc>. The WCAG Working Group is part of the <loc href="http://www.w3.org/WAI/Technical/Activity">WAI Technical Activity</loc>.</p>
+         <p> Publication as a <phrase role="final">Working Group Note</phrase>
+         	<phrase role="ext-review">Public Editors' Draft</phrase><phrase role="int-review">Editors' Draft</phrase> does not imply endorsement by the W3C Membership. This is a draft document and may be updated, replaced or obsoleted by other documents at any time. It is inappropriate to cite this document as other than work in progress. </p>
+         <p>This document was produced by a group operating under the <loc href="http://www.w3.org/Consortium/Patent-Policy-20040205/">5 February 2004 W3C Patent Policy</loc>. W3C maintains a <loc role="disclosures"
+                 href="http://www.w3.org/2004/01/pp-impl/35422/status">public list of any patent disclosures</loc> made in connection with the deliverables of the group; that page also includes instructions for disclosing a patent. An individual who has actual knowledge of a patent which the individual believes contains <loc href="http://www.w3.org/Consortium/Patent-Policy-20040205/#def-essential">Essential Claim(s)</loc> must disclose the information in accordance with <loc href="http://www.w3.org/Consortium/Patent-Policy-20040205/#sec-Disclosure">section 6 of the W3C Patent Policy</loc>. </p>
+			<p>This document is governed by the <loc id="w3c_process_revision" href="http://www.w3.org/2015/Process-20150901/">1 September 2015 W3C Process Document</loc>. </p>
+		</status>
+		<abstract>
+         <p>This document, "Understanding WCAG 2.0," is an essential guide to  understanding and using <loc href="http://www.w3.org/TR/WCAG20/">Web Content Accessibility Guidelines (WCAG) 2.0</loc> 
+            <bibref ref="WCAG20"/>. It is part of a series of documents that support WCAG 2.0. Please note that the  contents of this document are informative  (they provide guidance), and not normative (they do not set  requirements for conforming to WCAG 2.0). See <loc href="http://www.w3.org/WAI/intro/wcag.php">Web Content Accessibility Guidelines (WCAG) Overview</loc> for an introduction to WCAG, supporting  technical documents, and educational material.</p>
+			<p>WCAG 2.0 establishes a set of Success Criteria to define conformance  to the WCAG 2.0 Guidelines. A Success Criterion is a testable statement  that will be either true or false when applied to specific Web content.  "Understanding WCAG 2.0" provides detailed information about each  Success Criterion, including its intent, the key terms that are used in  the Success Criterion, and how the Success Criteria in WCAG 2.0 help people with different types of disabilities. This document also provides examples of Web content that meet the success  criterion using various Web technologies (for instance, HTML, CSS, XML),  and common examples of Web content that does not meet the success  criterion. </p>
+			<p>This document indicates specific techniques to meet each Success Criterion. Details for how to implement each technique are available in <loc href="http://www.w3.org/TR/WCAG20-TECHS/">Techniques for WCAG 2.0</loc>, but "Understanding WCAG 2.0" provides the information about the relationship of each technique to the Success Criteria. Techniques are categorized by the level of support they provide for the Success Criteria. "Sufficient techniques" are <emph>sufficient</emph> to meet a  particular Success Criterion (either by themselves or in combination with  other techniques), while other techniques are advisory and therefore optional.  None of  the techniques are <emph>required</emph> to meet WCAG 2.0, although some may be the only  known method if a particular technology is used. "Advisory techniques" are not sufficient to meet the Success Criteria on their own (because they are not testable or provide incomplete support) but it is encouraged that authors follow them when possible to provide enhanced accessibility. </p>
+			<p>In addition to techniques for addressing the success criteria, "Common Failures" are also documented. These "Common Failures" are authoring practices that are known to cause Web content to fail to conform to WCAG 2.0. Authors must avoid those practices in order to meet the WCAG 2.0 Success Criteria.</p>
+			<p>This document is part of a series of documents published by the W3C Web  Accessibility Initiative (WAI) to support WCAG 2.0. This document was published as a Working Group Note at the same time WCAG 2.0 was published as a W3C Recommendation. Unlike WCAG 2.0, is expected that the information in Understanding WCAG 2.0 will be updated from time to time. See <loc href="http://www.w3.org/WAI/intro/wcag.php">Web Content Accessibility Guidelines (WCAG) Overview</loc> for an introduction to WCAG, supporting technical documents, and educational material.</p>
+		</abstract>
+		<langusage>
+			<language id="en-US"/>
+		</langusage>
+		<revisiondesc>
+			<p>
+				<loc href="/WAI/GL/WCAG20/change-history.html">History of Changes to WCAG 2.0 Working Drafts</loc>
+			</p>
+		</revisiondesc>
+	</header>
+	<front>
+		<div1 id="intro">
+			<head>Introduction to Understanding WCAG 2.0</head>
+			<div2 role="suppressed" id="introduction">
+				<head>Intro</head>
+            <p>Understanding WCAG 2.0 is an essential guide to understanding and using "Web Content Accessibility Guidelines 2.0" <bibref ref="WCAG20"/> Although the normative definition and requirements for WCAG 2.0 can all be found in the WCAG 2.0 document itself, the concepts and provisions may be new to some people. Understanding WCAG 2.0 provides a non-normative extended commentary on each guideline and each Success Criterion to help readers better understand the intent and how the guidelines and Success Criteria work together. It also provides examples of techniques or combinations of techniques that the Working Group has identified as being sufficient to meet each Success Criterion. Links are then provided to write-ups for each of the techniques.</p>
+				<p>This is not an introductory document. It is a detailed technical description of the guidelines and their Success Criteria. See <loc href="http://www.w3.org/WAI/intro/wcag.php">Web Content Accessibility Guidelines (WCAG) Overview</loc> for an introduction to WCAG, supporting  technical documents, and educational material.
+      </p>
+				<p>Understanding WCAG 2.0 is organized by guideline. There is an <emph>Understanding Guideline X.X</emph> section for each guideline.  The intent and any advisory techniques that are related to the guideline but not specifically related to any of its Success Criteria are listed there as well.</p>
+				<p>The <emph>Understanding Guidelines X.X</emph> section is then followed by a <emph>Understanding Success Criterion X.X.X</emph> section for each Success Criterion of that guideline.   These sections each contain:</p>
+				<ulist>
+					<item>
+						<p>The Success Criterion as it appears in WCAG 2.0</p>
+					</item>
+					<item>
+						<p>Intent of the Success Criterion</p>
+					</item>
+					<item>
+						<p>Benefits (how the Success Criterion helps people with disabilities)</p>
+					</item>
+					<item>
+						<p>Examples</p>
+					</item>
+					<item>
+						<p>
+            Related Resources
+          </p>
+					</item>
+					<item>
+						<p>Techniques or combinations of techniques that are sufficient to meet the guidelines</p>
+					</item>
+					<item>
+						<p>Common failures of this Success Criterion</p>
+					</item>
+					<item>
+						<p>Additional advisory techniques that go beyond what is required to meet the Success Criterion but can be used to make some or all types of content more accessible. Use of advisory techniques does not impact the level of conformance claimed.
+          </p>
+					</item>
+					<item>
+						<p>Key terms for this Success Criterion  (taken from the WCAG 2.0 Glossary)</p>
+					</item>
+				</ulist>
+				<p>Links are provided from each Guideline in WCAG 2.0 directly to each <emph>Understanding Guideline X.X</emph> in this document.  Similarly, there is a link from each Success Criterion in WCAG 2.0 to the <emph>Understanding Success Criterion X.X.X</emph> section in this document. </p>
+				<p>For information about individual techniques, follow the links throughout this document to the techniques of interest in the <loc href="/TR/WCAG20-TECHS/">Techniques for WCAG 2.0</loc> document.</p>
+				<p>For links to information on different disabilities and assistive technologies see <loc href="https://en.wikipedia.org/wiki/Disability">Disabilities on Wikipedia</loc>.
+        </p>
+				<div3 id="fourprincs" role="normal">
+					<head>Understanding the Four Principles of Accessibility</head>
+					<p>The guidelines and Success Criteria are organized around the following four principles, which lay the foundation necessary for anyone to access and use Web content. Anyone who wants to use the Web must have content that is:</p>
+					<olist>
+						<item>
+							<p> Perceivable - Information and user interface components must be presentable to users in ways they can perceive.</p>
+							<ulist>
+								<item>
+									<p>This means that users must be able to perceive the information being presented (it can't be invisible to all of their senses)</p>
+								</item>
+							</ulist>
+						</item>
+						<item>
+							<p>Operable - User interface components and navigation must be operable.</p>
+							<ulist>
+								<item>
+									<p>This means that users must be able to operate the interface (the interface cannot require interaction that a user cannot perform) </p>
+								</item>
+							</ulist>
+						</item>
+						<item>
+							<p>Understandable - Information and the operation of user interface must be understandable.</p>
+							<ulist>
+								<item>
+									<p>This means that users must be able to understand the information as well as the operation of the user interface (the content or operation cannot be beyond their understanding)</p>
+								</item>
+							</ulist>
+						</item>
+						<item>
+							<p>Robust - Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies.</p>
+							<ulist>
+								<item>
+									<p>This means that users must be able to access the content as technologies advance (as technologies and user agents evolve, the content should remain accessible)</p>
+								</item>
+							</ulist>
+						</item>
+					</olist>
+					<p>If any of these are not true, users with disabilities will not be able to use the Web. </p>
+					<p>Under each of the principles are guidelines and Success Criteria that help to address these principles for people with disabilities. There are many general usability guidelines that make content more usable by all people, including those with disabilities. However, in WCAG 2.0, we only include those guidelines that address problems particular to people with disabilities. This includes issues that block access or interfere with access to the Web more severely for people with disabilities.</p>
+				</div3>
+				<div3 id="layers" role="normal">
+					<head>Layers of Guidance</head>
+					<div4 id="layers-guidelines" role="normal">
+						<head>The Guidelines</head>
+                  <p>Under each principle there is a list of guidelines that address the principle. There are a total of 12 guidelines. A convenient list of just the guidelines can be found in the <loc href="contents"
+                          linktype="guideline">WCAG 2.0 table of contents</loc>. One of the key objectives of the guidelines is to ensure that content is directly accessible to as many people as possible, and capable of being re-presented in different forms to match different peoples' sensory, physical and cognitive abilities.</p>
+					</div4>
+					<div4 id="layers-sc" role="normal">
+						<head>Success Criteria</head>
+                  <p>Under each guideline, there are Success Criteria that describe specifically what must be achieved in order to <loc href="conformancedef"
+                          linktype="guideline">conform</loc> to this standard. They are similar to the "checkpoints" in WCAG 1.0. Each Success Criterion is written as a statement that will be either true or false when specific Web content is tested against it. The Success Criteria are written to be technology neutral.</p>
+						<p>All WCAG 2.0 Success Criteria are written as testable criteria for objectively determining if content satisfies the Success Criteria. While some of the testing can be automated using software evaluation programs, others require human testers for part or all of the test.</p>
+						<p>Although content may satisfy the Success Criteria, the content may not always be usable by people with a wide variety of disabilities. Professional reviews utilizing recognized qualitative heuristics are important in achieving accessibility for some audiences. In addition, usability testing is recommended. Usability testing aims to determine how well people can use the content for its intended purpose.</p>
+						<p>The content should be tested by those who understand how people with different types of disabilities use the Web. It is recommended that users with disabilities be included in test groups when performing human testing.
+            </p>
+						<p>Each Success Criterion for a guideline has a link to the section of the How to Meet document that provides:</p>
+						<ulist>
+							<item>
+								<p>sufficient techniques for meeting the Success Criterion,</p>
+							</item>
+							<item>
+								<p>optional advisory techniques, and</p>
+							</item>
+							<item>
+								<p>descriptions of the intent of the Success Criteria, including benefits, and examples.</p>
+							</item>
+						</ulist>
+					</div4>
+					<div4 id="layers-techs" role="normal">
+						<head>Sufficient Techniques, Advisory Techniques, and Failures</head>
+						<p>The next section, <specref ref="understanding-techniques"/>, provides important information about the techniques.</p>
+					</div4>
+				</div3>
+			</div2>
+		</div1>
+		<div1 id="understanding-techniques">
+			<head>Understanding Techniques for WCAG Success Criteria</head>
+			<div2 id="ut" role="suppressed">
+				<head>Understanding Techniques for WCAG Success Criteria (suppressed)</head>
+				<p>WCAG 2.0 guidelines and success criteria are designed to be broadly applicable to current and future web technologies, including dynamic applications, mobile, digital television, etc. They are stable and do not change.</p>
+            <p>Specific guidance for authors and evaluators on meeting the WCAG success criteria is provided in techniques, which include code examples, resources, and tests. W3C's <loc href="/TR/WCAG20-TECHS/">Techniques for WCAG 2.0</loc> document is updated periodically, about <phrase>twice per</phrase> year, to cover more current best practices and changes in technologies and tools.</p>
+				<p>The three types of guidance in <loc href="/TR/WCAG20-TECHS/">Techniques for WCAG 2.0</loc> are explained below:</p>
+				<ulist>
+					<item>
+						<p>Sufficient techniques</p>
+					</item>
+					<item>
+						<p>Advisory techniques</p>
+					</item>
+					<item>
+						<p>Failures</p>
+					</item>
+				</ulist>
+				<p>Also explained below:</p>
+				<ulist>
+					<item>
+						<p>General and technology-specific techniques - which can be sufficient or advisory</p>
+					</item>
+					<item>
+						<p>Other techniques - beyond what is in W3C's published document</p>
+					</item>
+					<item>
+						<p>Technique tests</p>
+					</item>
+					<item>
+						<p>User agent and assistive technology support</p>
+					</item>
+					<item>
+						<p>Using the techniques - with important considerations</p>
+					</item>
+				</ulist>
+            <p>
+               <loc href="http://www.w3.org/TR/UNDERSTANDING-WCAG20/conformance">Understanding Conformance</loc> provides related information, including on <loc href="http://www.w3.org/TR/UNDERSTANDING-WCAG20/conformance#uc-accessibility-support-head">understanding accessibility support</loc>.</p>
+				<div3 id="understanding-techniques-informative" role="normal">
+					<head>Techniques are Informative</head>
+					<p>
+						<emph role="strong">Techniques are informative—that means they are not required. The basis for determining conformance to WCAG 2.0 is the success criteria from the WCAG 2.0 standard—not the techniques.</emph>
+					</p>
+					<note>
+						<p>W3C cautions against requiring W3C's sufficient techniques. The only thing that should be required is meeting the WCAG 2.0 success criteria. To learn more, see:</p>
+						<ulist>
+							<item>
+                        <p>
+                           <loc href="http://www.w3.org/WAI/WCAG20/wcag2faq.html#techsnot">What would be the negative consequences of allowing <emph>only</emph> W3C's published techniques to be used for conformance to WCAG 2.0?</loc> in the WCAG 2 FAQ</p>
+							</item>
+							<!--
+							<item>
+								<p>
+									<loc href="http://www.w3.org/2013/02/stdref">Normative References to W3C Standards</loc>
+									<span class="quiet">[@@ Ian asks that we not point to this for now.]</span>
+								</p>
+							</item>
+							-->
+						</ulist>
+                  <p>
+                     <loc href="/TR/WCAG20-TECHS/">Techniques for WCAG 2.0</loc> uses the words "must" and "should" only to clarify guidance within the techniques, not to convey requirements for WCAG.</p>
+					</note>
+				</div3>
+				<div3 id="understanding-techniques-sufficient" role="normal">
+					<head>Sufficient Techniques</head>
+               <p>
+                  <emph>Sufficient techniques</emph> are reliable ways to meet the success criteria.</p>
+					<ulist>
+						<item>
+							<p>From an author's perspective: If you use the sufficient techniques for a given criterion correctly and it is <loc href="http://www.w3.org/TR/UNDERSTANDING-WCAG20/conformance.html#uc-accessibility-support-head">accessibility-supported</loc> for your users, you can be confident that you met the success criterion.</p>
+						</item>
+						<item>
+							<p>From an evaluator's perspective: If web content implements the sufficient techniques for a given criterion correctly and it is <loc href="http://www.w3.org/TR/UNDERSTANDING-WCAG20/conformance.html#uc-accessibility-support-head">accessibility-supported</loc> for the content's users, it conforms to that success criterion. (The converse is not true; if content does not implement these sufficient techniques, it does not necessarily fail the success criteria, as explained in <loc href="#ut-understanding-techniques-tests-head">Testing Techniques</loc> below.)</p>
+						</item>
+					</ulist>
+               <p>There may be other ways to meet success criteria besides the sufficient techniques in W3C's <loc href="/TR/WCAG20-TECHS/">Techniques for WCAG 2.0</loc> document, as explained in <loc href="#ut-understanding-techniques-othertechs-head">Other Techniques</loc> below. <emph>(See also <loc href="#ut-understanding-techniques-informative-head">Techniques are Informative</loc> above.)</emph>
+               </p>
+					<div4 id="understanding-techniques-sufficient-lists-and" role="normal">
+						<head>Numbered Lists, "AND"</head>
+                  <p> The W3C-documented sufficient techniques are provided in a numbered list where each list item provides a technique or combination of techniques that can be used to meet the success criterion. Where there are multiple techniques on a numbered list item connected by "AND" then all of the techniques must be used to be sufficient. For example, <loc href="http://www.w3.org/TR/UNDERSTANDING-WCAG20/complete#content-structure-separation-programmatic-techniques-head">Sufficient Techniques for 1.3.1</loc> has: "G115: Using semantic elements to mark up structure AND H49: Using semantic markup to mark emphasized or special text (HTML)".</p>
+               </div4>
+				</div3>
+				<div3 id="understanding-techniques-advisory" role="normal">
+					<head>Advisory Techniques</head>
+               <p>
+                  <emph>Advisory techniques</emph> are suggested ways to improve accessibility. They are often very helpful to some users, and may be the only way that some users can access some types of content.</p>
+					<p>Advisory techniques are not designated as sufficient techniques for various reasons such as:</p>
+					<ulist>
+						<item>
+							<p>they may not be sufficient to meet the full requirements of the success criteria;</p>
+						</item>
+						<item>
+							<p>they may be based on technology that is not yet stable;</p>
+						</item>
+						<item>
+							<p>they may not be <loc href="http://www.w3.org/WAI/GL/UNDERSTANDING-WCAG20/conformance.html#uc-accessibility-support-head">accessibility supported</loc> in many cases (for example, assistive technologies do not work with them yet);</p>
+						</item>
+						<item>
+							<p>they may not be testable;</p>
+						</item>
+						<item>
+							<p>in some circumstances they may not be applicable or practical, and may even decrease accessibility for some users while increasing it for others;</p>
+						</item>
+						<item>
+							<p>they may not address the success criterion itself, and instead provide related accessibility benefits.</p>
+						</item>
+					</ulist>
+					<p>Authors are encouraged to apply all of the techniques where appropriate to best address the widest range of users' needs.</p>
+				</div3>
+				<div3 id="understanding-techniques-failures" role="normal">
+					<head>Failures</head>
+               <p>
+                  <emph>Failures</emph> are things that cause accessibility barriers and fail specific success criteria. The documented <emph>failures</emph> are useful for:</p>
+					<ulist>
+						<item>
+							<p>Authors to know what to avoid,</p>
+						</item>
+						<item>
+							<p>Evaluators to use for checking if content does not meet WCAG success criteria.</p>
+						</item>
+					</ulist>
+					<p>Content that has a <emph>failure</emph> does not meet WCAG success criteria, unless an alternate version is provided without the failure.</p>
+					<p>If anyone identifies a situation where a documented failure is not correct, please <loc href="http://www.w3.org/WAI/WCAG20/comments/">report the situation as a WCAG comment</loc> so that it can be corrected or deleted as appropriate.</p>
+				</div3>
+				<div3 id="understanding-techniques-general-tech-specific" role="normal">
+					<head> General and Technology-specific Techniques</head>
+               <p>
+                  <emph>General techniques</emph> describe basic practices that apply to all technologies. <emph>Technology-specific techniques</emph> apply to a specific technology.</p>
+					<p>Some success criteria do not have technology-specific techniques and are covered only with general techniques. Therefore, both the general techniques and the relevant technology-specific techniques should be considered.</p>
+               <p>Publication of techniques for a specific technology does not imply that the technology can be used in all situations to create content that meets WCAG 2.0 success criteria and conformance requirements. Developers need to be aware of the limitations of specific technologies and provide content in a way that is accessible to people with disabilities.</p>
+				</div3>
+				<div3  id="understanding-techniques-othertechs" role="normal">
+					<head>Other Techniques</head>
+					<p>In addition to the techniques in W3C's <loc href="/TR/WCAG20-TECHS/">Techniques for WCAG 2.0</loc> document, <emph role="strong">there are other ways to meet WCAG success criteria</emph>. W3C's techniques are not comprehensive and may not cover newer technologies and situations.</p>
+					<p>
+						<emph role="strong">Web content does not have to use W3C's published techniques in order to conform to WCAG 2.0.</emph>
+						<emph>(See also <loc href="#ut-understanding-techniques-informative-head">Techniques are Informative</loc> above.)</emph>
+					</p>
+					<p>Content authors can develop different techniques. For example, an author could develop a technique for HTML5, <loc href="http://www.w3.org/WAI/intro/aria">WAI-ARIA</loc>, or other new technology. Other organizations may develop sets of techniques to meet WCAG 2.0 success criteria.</p>
+					<p>Any techniques can be sufficient if:</p>
+					<ulist>
+						<item>
+							<p>they satisfy the success criterion, and</p>
+						</item>
+						<item>
+							<p> all of the <loc href="http://www.w3.org/TR/UNDERSTANDING-WCAG20/conformance.html">WCAG 2.0 conformance requirements</loc> are met.</p>
+						</item>
+					</ulist>
+					<div4 id="understanding-techniques-submitting" role="normal">
+						<head>Submitting Techniques</head>
+						<p>The WCAG Working Group encourages people to submit new techniques so that they can be considered for inclusion in updates of the <loc href="/TR/WCAG20-TECHS/">Techniques for WCAG 2.0</loc> document. Please submit techniques for consideration using the <loc href="http://www.w3.org/WAI/GL/WCAG20/TECHS-SUBMIT/">Techniques Submission Form</loc>.</p>
+					</div4>
+				</div3>
+				<div3 id="understanding-techniques-tests" role="normal">
+					<head>Testing Techniques</head>
+					<p> Each technique has tests that help:</p>
+					<ulist>
+						<item>
+							<p> authors verify that they implemented the technique properly, and</p>
+						</item>
+						<item>
+							<p>evaluators determine if web content meets the technique.</p>
+						</item>
+					</ulist>
+					<p>The tests are only for a technique, they are not tests for conformance to WCAG success criteria.</p>
+					<ulist>
+						<item>
+							<p>Failing a technique test does not necessarily mean failing WCAG, because the techniques are discrete (that is, they address one specific point) and they are not required.</p>
+						</item>
+						<item>
+							<p>Content can meet WCAG success criteria in different ways other than W3C's published sufficient techniques.</p>
+						</item>
+						<item>
+							<p>Content that passes the sufficient techniques for a specific technology does not necessarily meet all WCAG success criteria. Some success criteria have only general techniques, not technology-specific techniques.</p>
+						</item>
+						<item>
+							<p>The content must be <loc href="http://www.w3.org/WAI/GL/UNDERSTANDING-WCAG20/conformance.html#uc-accessibility-support-head">accessibility supported</loc> for the content's users. Some sufficient techniques require browser, assistive technology, or other support that some users might not have.</p>
+						</item>
+					</ulist>
+					<p>Thus while the techniques are useful for evaluating content, evaluations must go beyond just checking the sufficient technique tests in order to evaluate how content conforms to WCAG success criteria.</p>
+               <p>
+                  <emph>Failures</emph> are particularly useful for evaluations because they do indicate non-conformance (unless an alternate version is provided without the failure).</p>
+				</div3>
+				<div3 id="understanding-techniques-support" role="normal">
+					<head>User Agent and Assistive Technology Support Notes</head>
+					<p>Some techniques require that web content users have specific browsers or assistive technologies in order for the technique to be <loc href="http://www.w3.org/TR/UNDERSTANDING-WCAG20/conformance.html#uc-accessibility-support-head">accessibility-supported</loc>. The <emph role="strong">User Agent and Assistive Technology Support Notes</emph> sections of individual techniques include some information to help determine accessibility support.</p>
+					<div4 id="understanding-techniques-support-change" role="normal">
+						<head>Support Notes Change Over Time</head>
+						<p>As time passes, the versions of user agents (browsers, etc.) or assistive technologies listed may not be the current versions. The Working Group may not update most of these notes as new versions are released. Authors should test techniques with the user agents and assistive technologies currently available to their users. See also <loc href="http://www.w3.org/WAI/GL/UNDERSTANDING-WCAG20/conformance.html#uc-accessibility-support-head">Understanding Accessibility Support</loc>.</p>
+					</div4>
+				</div3>
+				<div3 id="understanding-techniques-using" role="normal">
+					<head>Using the Techniques</head>
+               <p>
+                  <loc href="/TR/WCAG20-TECHS/">Techniques for WCAG 2.0</loc> is not intended to be used as a stand-alone document. Instead, it is expected that content authors will usually use <loc href="http://www.w3.org/WAI/WCAG20/quickref/">How to Meet WCAG 2.0: A customizable quick reference</loc> to read the WCAG success criteria, and follow links from there to specific topics in Understanding WCAG 2.0 and to specific techniques.</p>
+					<div4 id="understanding-techniques-using-alternatives" role="normal">
+						<head>Alternatives must meet success criteria</head>
+						<p>Some techniques describe how to provide alternate ways for users to get content. For example, <loc href="http://www.w3.org/TR/WCAG20-HTML-TECHS/G73">G73: Providing a long description in another location...</loc> mentions a transcript as an alternative for an audio file. Some alternatives must also conform to WCAG. For example, the transcript itself must meet all relevant success criteria. </p>
+					</div4>
+					<div4 id="understanding-techniques-using-examples" role="normal">
+						<head>Example Code</head>
+						<p>The code examples in the techniques are intended to demonstrate only the specific point discussed in the technique. They might not demonstrate best practice for other aspects of accessibility, usability, or coding not related to the technique. They are not intended to be copied and used as the basis for developing web content.</p>
+						<p>Many techniques point to "working examples" that are more robust and may be appropriate for copying and integrating into web content.</p>
+					</div4>
+				</div3>
+			</div2>
+		</div1>
+	</front>
+	<body>
+      <xi:include href="understanding/text-equiv.xml"/>
+      <xi:include href="understanding/media-equiv.xml"/>
+      <xi:include href="understanding/content-structure-separation.xml"/>
+      <xi:include href="understanding/visual-audio-contrast.xml"/>
+      <xi:include href="understanding/keyboard-operation.xml"/>
+      <xi:include href="understanding/time-limits.xml"/>
+      <xi:include href="understanding/seizure.xml"/>
+      <xi:include href="understanding/navigation-mechanisms.xml"/>
+      <xi:include href="understanding/meaning.xml"/>
+      <xi:include href="understanding/consistent-behavior.xml"/>
+      <xi:include href="understanding/minimize-error.xml"/>
+      <xi:include href="understanding/ensure-compat.xml"/>
+      <xi:include href="understanding/conformance.xml"/>
+	</body>
+	<back>
+		<inform-div1 id="conformance-referencing">
+			<head>How to refer to WCAG 2.0 from other documents</head>
+			<p>The following examples show how to reference WCAG 2.0 in various situations. For additional guidance, see <loc href="http://www.w3.org/WAI/intro/linking.html">Referencing and Linking to WAI Guidelines and Technical Documents</loc>.</p>
+			<p>
+        Please note that the 
+following language for referencing WCAG 2.0 can be inserted into your own 
+documents.
+        
+      </p>
+			<div2 role="normal" id="conformance-referencing-information">
+				<head>Information references</head>
+				<p>When referencing WCAG 2.0 in an informational fashion, the following format can be used.</p>
+				<p>
+					<emph>Web Content Accessibility Guidelines 2.0, W3C World Wide Web Consortium Recommendation XX Month Year (http://www.w3.org/TR/200X/REC-WCAG20-20081211/, Latest version at http://www.w3.org/TR/WCAG20/)</emph>
+				</p>
+			</div2>
+			<div2 role="normal" id="conformance-referencing-should">
+				<head>When referring to WCAG 2.0 from another standard with a "should" statement</head>
+				<p>When referencing WCAG 2.0 from within a <emph role="bold">should</emph> statement in a standard (or advisory statement in a regulation), then the full WCAG 2.0 should be referenced. This would mean that all three levels of WCAG 2.0 should be considered but that none are required. The format for referencing WCAG 2.0 from a "should" statement therefore, is:</p>
+				<p>
+					<emph>Web Content Accessibility Guidelines 2.0, W3C World Wide Web Consortium Recommendation XX Month Year. (http://www.w3.org/TR/200X/REC-WCAG20-20081211/)</emph>
+				</p>
+			</div2>
+			<div2 role="normal" id="conformance-referencing-must">
+				<head>When referring to WCAG 2.0 from another standard with a "shall or must" statement</head>
+            <p>When citing WCAG 2.0 as part of a requirement (e.g., a <emph role="bold">shall or must
+          </emph> statement in a standard or regulation), the reference must include the specific parts of WCAG 2.0 that are intended to be required. When referencing WCAG 2.0 in this manner, the following rules apply: 
+        </p>
+				<olist>
+					<item>
+						<p>Conformance at any level of WCAG 2.0 requires that all of the Level A Success Criteria be met. References to WCAG 2.0 conformance cannot be for any subset of Level A.
+            </p>
+					</item>
+					<item>
+						<p>Beyond Level A, a "shall or must" reference may include any subset of provisions in Levels AA and AAA. For example, "<emph>all of Level A and [some specific list of Success Criteria in Level AA and Level AAA]</emph>" be met.
+            </p>
+					</item>
+					<item>
+						<p>If Level AA conformance to WCAG 2.0 is specified, then all Level A and all Level AA Success Criteria must be met.</p>
+					</item>
+					<item>
+						<p>If Level AAA conformance to WCAG 2.0 is specified, then all Level A, all Level AA, and all Level AAA Success Criteria must be met.</p>
+						<note>
+							<p>It is not recommended that Level AAA conformance ever be required for entire sites as a general policy because it is not possible to satisfy all Level AAA Success Criteria for some content. 
+              </p>
+							<p>The sets of Success Criteria defined in WCAG are interdependent and individual Success Criteria rely on each other's definitions in ways which may not be immediately obvious to the reader. Any set of Success Criteria must include all of the Level A provisions.</p>
+						</note>
+					</item>
+				</olist>
+			</div2>
+			<div2 role="normal" id="conformance-referencing-examples">
+				<head>Examples</head>
+				<p>
+					<emph role="bold">To cite only the Level A Success Criteria (Single-A conformance):</emph>
+				</p>
+				<p>
+					<emph>Web Content Accessibility Guidelines 2.0, W3C World Wide Web Consortium Recommendation XX Month Year, Level A Success Criteria. (http://www.w3.org/TR/200X/REC-WCAG20-20081211/)</emph>
+				</p>
+				<p>
+					<emph role="bold">To cite the Levels A and AA Success Criteria (Double-A conformance):</emph>
+				</p>
+				<p>
+					<emph>Web Content Accessibility Guidelines 2.0, W3C World Wide Web Consortium Recommendation XX Month Year, Level A &amp; Level AA Success Criteria. (http://www.w3.org/TR/200X/REC-WCAG20-20081211/)</emph>
+				</p>
+				<p>
+					<emph role="bold">To cite Level A Success Criteria and selected Success Criteria from Level AA and Level AAA: </emph>
+				</p>
+				<p>
+					<emph>Web Content Accessibility Guidelines 2.0, W3C World Wide Web Consortium Recommendation XX Month Year, Level A Success Criteria plus Success Criteria 1.x.x, 2.y.y, … 3.z.z. (http://www.w3.org/TR/200X/REC-WCAG20-20081211/)</emph>
+				</p>
+				<p>
+					<emph role="bold">Example of use of a WCAG reference in a "shall or must" statement.</emph>
+				</p>
+				<p>All Web content on publicly available Web sites shall conform to Web Content Accessibility Guidelines 2.0, W3C World Wide Web Consortium Recommendation XX Month Year, Level A Success Criteria plus Success Criteria 1.2.4, 2.4.5-6, 3.1.2 (http://www.w3.org/TR/200X/REC-WCAG20-20081211/)</p>
+			</div2>
+			<div2 role="normal" id="conformance-referencing-support">
+				<head>Referring to content from WCAG support documents</head>
+				<p>Techniques, which are listed in Understanding WCAG 2.0 and described in other supporting documents, are not part of the normative WCAG 2.0 Recommendation and should not be cited using the citation for the WCAG 2.0 Recommendation itself. References to techniques in support documents should be cited separately.</p>
+				<p>Techniques can be cited based on the individual Technique document or on the master WCAG 2.0 Techniques document. For example, the technique "Using alt attributes on img elements" could be cited as</p>
+				<p role="indent">
+					<emph>"Using alt attributes on img elements," W3C World Wide Web Consortium Note. (URI: {URI of technique}) </emph>
+				</p>
+				<p role="indent">or</p>
+				<p role="indent">
+					<emph>W3C World Wide Web Consortium (200x): WCAG2.0 HTML Techniques (URI: {URI of HTML Techniques})</emph>
+				</p>
+            <p role="indent"> 
+               <emph role="bold">Techniques are not designed to be referenced as "required"</emph> from any standard or regulation.Standards and regulations should not make any specific technique mandatory, though they may choose to recommend techniques.</p>
+			</div2>
+		</inform-div1>
+		<inform-div1 id="accessibility-support-documenting">
+			<head>Documenting Accessibility Support for Uses of a Web Technology</head>
+			<p>The documentation of accessibility support for uses of a Web technology  provides the information needed to determine whether it is possible to  satisfy the WCAG 2.0 Success Criteria for a particular environment. </p>
+			<p>Accessibility Support documentation for uses of a Web technology includes the following information: </p>
+			<ulist>
+				<item>
+					<p> The version or versions of the technology </p>
+				</item>
+				<item>
+					<p> For each user agent or plug-in that supports this version of the technology:</p>
+					<ulist>
+						<item>
+							<p> The version of the user agent or plug-in, including the operating system or platform </p>
+						</item>
+						<item>
+							<p> Ways of using the technology that are supported by the user agent; ideally, there are ways to meet all of the success criteria, but exceptions should be noted. </p>
+						</item>
+						<item>
+							<p> Known limitations of the user agent support for uses of the technology to meet Success Criteria
+							</p>
+						</item>
+					</ulist>
+				</item>
+				<item>
+					<p> For each assistive technology that supports the Web technology:</p>
+					<ulist>
+						<item>
+							<p> The version of the assistive technology, including the operating system or platform </p>
+						</item>
+					</ulist>
+				</item>
+				<item>
+					<p> For each host user agent that is supported by this version of the assistive technology:</p>
+					<ulist>
+						<item>
+							<p> Ways of using the technology supported by the assistive technology for this user agent </p>
+						</item>
+						<item>
+							<p> Known limitations in the support of uses of the technology to meet success criteria when using the assistive technology with this user agent </p>
+						</item>
+					</ulist>
+				</item>
+			</ulist>
+			<p>Target environments are defined by the user agents and assistive technologies available to its users. Documentation of accessibility support involves detailed understanding of the ways to use functionality of a  technology to meet success criteria, and also of user agents and assistive technology. Because of this, vendors and developers of Web technologies and user agents are encouraged to provide this information about the accessibility  support of their products. Similarly, developers and vendors of  assistive technology are encouraged to provide this information about  the ways to use Web technologies  that are supported by their products. Authors should need to document the accessibility supported ways to use a technology only  when there is not reliable documentation available from vendors or  testing groups for those uses. </p>
+			<p>For a controlled environment, such as a corporate workplace,  the user agents and assistive technologies available may be a specific  set of versions of user agents on a specific set of platforms. To  determine whether uses of a Web technology are accessibility supported in a  target environment, an author checks that the user agents and assistive  technologies available are in the set of supported user agents and assistive technologies listed for those uses in the Accessibility Support  documentation. </p>
+			<p>For a target environment like the Internet, authors may need  to consider a much larger set of user agents, including older versions,  and on a wider variety of platforms. </p>
+			<p>Environments that use different natural languages are different target environments. For example, the accessibility-supported ways of using technologies for an English language environment may differ from those  for an Arabic language environment, since there may be different user agents and assistive technologies that support these languages.</p>
+			<p>The documentation includes version-specific information about all the assistive technologies and all the user agents and the ways  that they interact with one another. If support in these user agents is  similar, it will be straightforward for an author to decide if a documented way of using a technology is accessibility supported. If the uses supported are different in different versions, authors can only rely on the uses that are supported in the versions available to their users in  determining accessibility support. </p>
+			<p>If a way of using a technology is not relied upon for conformance, the absence of accessibility support for that use does not prevent conformance of the Web page. So if the unsupported use does not occur in the content, or if there is a conforming version of that content available, the Web page still conforms. For instance, lack of accessibility support for interactive controls in a Web technology would not prevent uses of the Web technology for non-interactive content that are accessibility supported. </p>
+		</inform-div1>
+		<inform-div1 id="understanding-metadata">
+			<head>Understanding Metadata</head>
+			<p>This section discusses metadata techniques that can be employed to  satisfy WCAG 2.0 Success Criteria. For more information about metadata  see resources below. </p>
+			<p>At its most basic level, metadata is essentially 'data about data' and is used to both describe and find resources. </p>
+			<p>Metadata is a powerful tool that can be used for describing Web  pages and accessible components of Web pages as well as associating  alternate versions of Web content to each other. These descriptions in  turn allows users to locate specific information they need or prefer. </p>
+			<p>In conjunction with WCAG, metadata can play a number of roles including: </p>
+			<olist>
+				<item>
+					<p> Metadata can be used to associate conforming alternate  versions of Web pages with Web pages which do not conform, in order to  allow users to find the conforming alternate version when they land on  a non-conforming page that they cannot use. </p>
+				</item>
+				<item>
+					<p> Metadata can be used to locate and also to describe  alternate pages where there are multiple versions of a page which have  been developed, especially where the alternate pages are optimized for  individuals with different disabilities. The user can use the metadata  both to locate the alternate versions and to identify characteristics  of the versions, so that they can find the one that best meets their  needs. </p>
+				</item>
+				<item>
+					<p>In addition to being used for whole pages (as in #1 and #2  above), metadata can be used to describe alternate versions of  subcomponents of a page. Again, the metadata can be used to find  alternate versions of a Web page component as well as to get  descriptions of the alternate versions ( if there are several) in order  to determine which one would best meet the user's needs. </p>
+				</item>
+			</olist>
+			<div2 role="normal" id="understanding-metadata-resources">
+				<head>Metadata Resources</head>
+				<p>Metadata descriptions often provide values from defined, agreed  vocabularies such as the resource's subject matter or its date of  publication, and are machine readable - software that understands the  metadata scheme in use can do useful tasks not feasible otherwise.  Typically, an object having metadata may have one or more such metadata  descriptions. </p>
+				<p>Well-known specifications (schemas) for metadata include: </p>
+				<ulist>
+					<item>
+						<p>
+							<loc href="http://www.loc.gov/standards/mets/">Metadata Encoding and Transmission Standard (METS) scheme</loc>
+						</p>
+					</item>
+					<item>
+						<p>
+							<loc href="http://dublincore.org">Dublin Core Metadata Initiative (DCMI) terms for cross-disciplinary resources</loc>
+						</p>
+					</item>
+					<item>
+						<p>
+							<loc href="http://www.ieee.org/index.html">IEEE Standards</loc>
+						</p>
+					</item>
+					<!-- BBC: Commented out Dec. 2008 (broken linkserver non-responsive) item>
+            <p>
+              <loc href="http://jtc1sc36.org/Workgroups/Work%20Group%20Seven">ISO/IEC JTC1 Individualized Adaptability and Accessibility for Learning, Education and Training 24751</loc> otherwise known as the Access For All (AfA) Metadata </p>
+          </item-->
+				</ulist>
+				<p>There are some tools available to provide resource descriptions, or  they can be provided manually. The more easily the metadata can be  created and collected at point of creation of a resource or at point of  publication, the more efficient the process and the more likely it is  to take place. </p>
+				<p>Some examples include: </p>
+				<ulist>
+					<item>
+						<p>
+							<loc href="http://www.ukoln.ac.uk/metadata/dcdot/">DC-dot</loc>
+						</p>
+					</item>					
+				</ulist>
+				<p>Accessibility metadata implementations include: </p>
+				<ulist>
+					<item>
+						<p>
+							<loc href="http://barrierfree.ca/tile/">The Inclusive Learning Exchange (TILE)</loc>
+						</p>
+					</item>
+				</ulist>
+			</div2>
+			<!--div2 role="normal">
+        <head>Metadata Techniques for WCAG 2.0</head>
+        <p>A [compilation of the metadata techniques for WCAG 2.0] is included in the techniques document </p>
+      </div2-->
+      </inform-div1>
+      <inform-div1 id="acknowledgements">
+         <head>Acknowledgements</head>
+      	<p>This publication has been funded in part with U.S. Federal funds from the Department of Education, National Institute on Disability, Independent Living, and Rehabilitation Research (NIDILRR), initially under contract number ED-OSE-10-C-0067 and currently under contract number HHSP23301500054C. The content of this publication does not necessarily reflect the views or policies of the U.S. Department of Education, nor does mention of trade names, commercial products, or organizations imply endorsement by the U.S. Government.</p>
+         <p>Additional information about participation in the Web Content Accessibility Guidelines Working Group (WCAG WG) can be found on the <loc href="http://www.w3.org/WAI/GL/">Working Group home page</loc>. 
+			</p>
+         <div2 id="ack_participants-active" role="normal">
+            <head>Participants of the WCAG WG active in the development of this document:</head>
+            <ulist>
+               <item>
+                  <p>Paul Adam (Deque)</p>
+               </item>
+               <item>
+                  <p>Kathleen Anderson</p>
+               </item>
+               <item>
+                  <p>Jon Avila (SSB Bart Group)</p>
+               </item>
+               <item>
+                  <p>Bruce Bailey (U.S. Access Board) </p>
+               </item>
+            	<item>
+            		<p>Laura Carlson</p>
+            	</item>
+            	<item>
+            		<p>Louis Cheng (Google)</p>
+            	</item>
+               <item>
+                  <p>Michael Cooper (W3C)</p>
+               </item>
+            	<item>
+            		<p>Wayne Dick</p>
+            	</item>
+            	<item>
+            		<p>Eric Eggert (W3C)</p>
+            	</item>
+            	<item>
+            		<p>Michael Elledge</p>
+            	</item>
+               <item>
+                  <p>Detlev Fischer</p>
+               </item>
+               <item>
+                  <p>John Foliot (Deque)</p>
+               </item>
+               <item>
+                  <p>Loretta Guarino Reid (Google)</p>
+               </item>
+               <item>
+                  <p>Jon Gunderson</p>
+               </item>
+               <item>
+                  <p>Katie Haritos-Shea</p>
+               </item>
+               <item>
+                  <p>Marc Johlic (IBM)</p>
+               </item>
+               <item>
+                  <p>Barry Johnson (Deque)</p>
+               </item>
+               <item>
+                  <p>Andrew Kirkpatrick (Adobe)</p>
+               </item>
+               <item>
+                  <p>David MacDonald</p>
+               </item>
+            	<item>
+            		<p>Erich Manser (IBM)</p>
+            	</item>
+               <item>
+                  <p>James Nurthen (Oracle)</p>
+               </item>
+               <item>
+                  <p>Joshue O Connor</p>
+               </item>
+            	<item>
+            		<p>Jan Richards</p>
+            	</item>
+               <item>
+                  <p>Alan Smith</p>
+               </item>
+               <item>
+                  <p>Adam Solomon</p>
+               </item>
+            	<item>
+            		<p>Makoto Ueki</p>
+            	</item>
+               <item>
+                  <p>Gregg Vanderheiden</p>
+               </item>
+               <item>
+                  <p>Kathleen Wahlbin</p>
+               </item>
+            	<item>
+            		<p>Can Wang (Zhejiang University)</p>
+            	</item>
+            	<item>
+            		<p>Jason White (Educational Testing Service)</p>
+            	</item>
+            	<item>
+            		<p>Kenny Zhang (W3C)</p>
+            	</item>
+            </ulist>
+         </div2>
+         <div2 id="ack_participants-previous" role="normal">
+            <head>Other previously active WCAG WG participants and other contributors to WCAG 2.0 or supporting resources</head>
+         	<p>Shadi Abou-Zahra, Jim Allan, Jenae Andershonis, Wilhelm Joys Andersen, Andrew Arch, Avi Arditti, Aries Arditi, Jon Avila, Mark Barratt, Mike Barta, Sandy Bartell, Kynn Bartlett, Chris Beer, Charles Belov, Marco Bertoni, Harvey Bingham, Chris Blouch, Paul Bohman, Frederick Boland, Denis Boudreau, Patrice Bourlon, Judy Brewer, Andy Brown, Dick Brown, Doyle Burnett, Raven Calais, Ben Caldwell, Alastair Campbell, Laura Carlson, Tomas Caspers, Roberto Castaldo, Sofia Celic-Li, Sambhavi Chandrashekar, Mike Cherim, Jonathan Chetwynd, Wendy Chisholm, Alan Chuter, David M Clark, Joe Clark, Darcy Clarke, James Coltham, Vivienne Conway, Earl Cousins, James Craig, Tom Croucher, Pierce Crowell, Nir Dagan, Daniel Dardailler, Geoff Deering, Sébastien Delorme, Pete DeVasto, Wayne Dick, Iyad Abu Doush, Sylvie Duchateau, Cherie Eckholm, Roberto Ellero, Don Evans, Gavin Evans, Neal Ewers, Steve Faulkner, Bengt Farre, Lainey Feingold, Wilco Fiers, Michel Fitos, Alan J. Flavell, Nikolaos Floratos, Kentarou Fukuda, Miguel Garcia, P.J. Gardner, Alistair Garrison, Greg Gay, Becky Gibson, Al Gilman, Kerstin Goldsmith, Michael Grade, Karl Groves, Jon Gunderson, Emmanuelle Gutiérrez y Restrepo, Brian Hardy, Eric Hansen, Benjamin Hawkes-Lewis, Sean Hayes, Shawn Henry, Hans Hillen, Donovan Hipke, Bjoern Hoehrmann, Allen Hoffman, Chris Hofstader, Yvette Hoitink, Martijn Houtepen, Carlos Iglesias, Jonas Jacek, Ian Jacobs, Phill Jenkins, Duff Johnson, Jyotsna Kaki, Shilpi Kapoor, Leonard R. Kasday, Kazuhito Kidachi, Ken Kipness, John Kirkwood, Jason Kiss, Johannes Koch, Marja-Riitta Koivunen, Maureen Kraft, Preety Kumar, Kristjan Kure, Andrew LaHart, Gez Lemon, Chuck Letourneau, Aurélien Levy, Harry Loots, Scott Luebking, Tim Lacy, Jim Ley, Alex Li, William Loughborough, Greg Lowney, N Maffeo, Mark Magennis, Kapsi Maria, Luca Mascaro, Matt May, Sheena McCullagh, Liam McGee, Jens Meiert, Niqui Merret, Jonathan Metz, Alessandro Miele, Steven Miller, Mathew J Mirabella, Matt May, Marti McCuller, Sorcha Moore, Mary Jo Mueller, Charles F. Munat, Robert Neff, Charles Nevile, Liddy Nevile, Dylan Nicholson, Bruno von Niman, Tim Noonan, Sebastiano Nutarelli, Graham Oliver, Sean B. Palmer, Sailesh Panchang, Devarshi Pant, Nigel Peck, Anne Pemberton, David Poehlman, Ian Pouncey, Charles Pritchard, Kerstin Probiesch, W Reagan, Adam Victor Reed, Chris Reeve, Chris Ridpath, Lee Roberts, Mark Rogers, Raph de Rooij, Gregory J. Rosmaita, Matthew Ross, Sharron Rush, Joel Sanda, Janina Sajka, Roberto Scano, Gordon Schantz, Tim van Schie, Wolf Schmidt, Stefan Schnabel, Lisa Seeman, Cynthia Shelly, Glenda Sims, John Slatin, Becky Smith, Jared Smith, Andi Snow-Weaver, Neil Soiffer, Jeanne Spellman, Mike Squillace, Michael Stenitzer, Diane Stottlemyer, Christophe Strobbe, Sarah J Swierenga, Jim Thatcher, Terry Thompson, Justin Thorp, David Todd, Mary Utt, Jean Vanderdonckt, Carlos A Velasco, Eric Velleman, Gijs Veyfeyken, Dena Wainwright, Paul Walsch, Daman Wandke, Richard Warren, Elle Waters, Takayuki Watanabe, Léonie Watson, Gian Wild, David Wooley, Wu Wei, Leona Zumbo.</p>
+         </div2>
+      </inform-div1>
+		<inform-div1 id="references">
+			<head>References</head>
+			<blist>
+            <bibl id="ANSI-HFES-100-1988"
+                  key="ANSI-HFES-100-1988">ANSI/HFS 100-1988, American National Standard for Human Factors Engineering of Visual Display Terminal Workstations, Section 6, pp. 17-20.</bibl>
+				<bibl id="ARDITI" key="ARDITI">Arditi, A. (2002). Effective color contrast: designing for people with partial sight and color deficiencies. New York, Arlene R. Gordon Research Institute, Lighthouse International.</bibl>
+            <bibl id="ARDITI-FAYE"
+                  key="ARDITI-FAYE">Arditi, A. and Faye, E. (2004). Monocular and binocular letter contrast sensitivity and letter acuity in a diverse ophthalmologic practice. Supplement to Optometry and Vision Science, 81 (12S), 287.</bibl>
+            <bibl id="ARDITI-KNOBLAUCH-1994"
+                  key="ARDITI-KNOBLAUCH">Arditi, A. and Knoblauch, K. (1994). Choosing effective display colors for the partially-sighted. Society for Information Display International Symposium Digest of Technical Papers, 25, 32-35.</bibl>
+            <bibl id="ARDITI-KNOBLAUCH-1996"
+                  key="ARDITI-KNOBLAUCH-1996">Arditi, A. and Knoblauch, K. (1996). Effective color contrast and low vision. In B. Rosenthal and R. Cole (Eds.) Functional Assessment of Low Vision. St. Louis, Mosby, 129-135.</bibl>
+				<bibl id="CAPTCHA" key="CAPTCHA">The CAPTCHA Project, Carnegie Mellon University. The project is online at <loc href="http://www.captcha.net">http://www.captcha.net</loc>.</bibl>
+				<!-- <bibl id="EPFND" key="EPFND"> Experts Issue Recommendations to Protect Public from Seizures Induced by TV / Videogames. A copy of the standard is available at <loc href="http://www.epilepsyfoundation.org/aboutus/pressroom/pr20050919.cfm">http://www.epilepsyfoundation.org/aboutus/pressroom/pr20050919.cfm</loc>.</bibl> -->
+            <bibl id="GITTINGS-FOZARD"
+                  key="GITTINGS-FOZARD">Gittings, NS and Fozard, JL (1986). Age related changes in visual acuity. Experimental Gerontology, 21(4-5), 423-433.</bibl>
+				<bibl id="HARDING-BINNIE">Harding G. F. A. and Binnie, C.D., Independent Analysis of the ITC Photosensitive Epilepsy Calibration Test Tape. 2002.</bibl>
+            <bibl id="HEARING-AID-INT"
+                  key="HEARING-AID-INT">Levitt, H., Kozma-Spytek, L., &amp; Harkins, J. (2005). In-the-ear measurements of interference in hearing aids from digital wireless telephones. Seminars in Hearing, 26(2), 87.</bibl>
+				<bibl id="IEC-4WD">IEC/4WD 61966-2-1: Colour Measurement and Management in Multimedia Systems and Equipment - Part 2.1: Default Colour Space - sRGB. May 5, 1998.</bibl>
+				<bibl id="ISO-9241-3">ISO 9241-3, Ergonomic requirements for office work with visual display terminals (VDTs) - Part 3: Visual display requirements. Amendment 1.</bibl>
+            <bibl id="I18N-CHAR-ENC"
+                  key="I18N-CHAR-ENC">
+"Tutorial: Character sets &amp; encodings in XHTML, HTML and CSS," R. Ishida, ed., This tutorial is available at <loc href="http://www.w3.org/International/tutorials/tutorial-char-enc/">http://www.w3.org/International/tutorials/tutorial-char-enc/</loc>. 
+</bibl>
+            <bibl id="KNOBLAUCH"
+                  key="KNOBLAUCH">Knoblauch, K., Arditi, A. and Szlyk, J. (1991). Effects of chromatic and luminance contrast on reading. Journal of the Optical Society of America A, 8, 428-439.</bibl>
+				<bibl id="LAALS" key="LAALS">Bakke, M. H., Levitt, H., Ross, M., &amp; Erickson, F. (1999). <loc href="http://search.naric.com/research/rehab/download.cfm?ID=101662">Large area assistive listening systems (ALS): Review and recommendations (PDF)</loc> (Final Report. NARIC Accession Number: O16430). Jackson Heights, NY: Lexington School for the Deaf/Center for the Deaf Rehabilitation Research Engineering Center on Hearing Enhancement.
+</bibl>
+				<bibl id="sRGB">"A Standard Default Color Space for the Internet - sRGB," M. Stokes, M. Anderson, S. Chandrasekar, R. Motta, eds., Version 1.10, November 5, 1996. A copy of this paper is available at <loc href="http://www.w3.org/Graphics/Color/sRGB.html">http://www.w3.org/Graphics/Color/sRGB.html</loc>.</bibl>
+				<bibl id="UNESCO" key="UNESCO">International Standard Classification of Education, 1997. A copy of the standard is available at <loc href="http://www.unesco.org/education/information/nfsunesco/doc/isced_1997.htm">http://www.unesco.org/education/information/nfsunesco/doc/isced_1997.htm</loc>.</bibl>
+				<bibl id="WCAG20" key="WCAG20">"Web Content Accessibility Guidelines 2.0,"  B. Caldwell, M Cooper, L Guarino Reid, and G. Vanderheiden, eds., W3 Recommendation 12 December 2008, <loc href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/">http://www.w3.org/TR/2008/REC-WCAG20-20081211</loc>. The latest version of WCAG 2.0 is available at <loc href="http://www.w3.org/TR/WCAG20/">http://www.w3.org/TR/WCAG20/</loc>.
+        </bibl>
+			</blist>
+		</inform-div1>
+	</back>
+</spec>
diff --git a/wcag20/sources/misc/wcag2-orig.json b/wcag20/sources/misc/wcag2-orig.json
index 099728eeba..be1479e479 100644
--- a/wcag20/sources/misc/wcag2-orig.json
+++ b/wcag20/sources/misc/wcag2-orig.json
@@ -2192,7 +2192,7 @@
             "id": "WCAG2:visual-audio-contrast-scale",
             "num": "1.4.4",
             "level": "AA",
-            "handle": "Resize text",
+            "handle": "Resize Text",
             "title": "Except for captions and images of text, text can be resized without assistive technology up to 200 percent without loss of content or functionality.",
             "techniques": [
               {"sufficient": [
@@ -2270,7 +2270,7 @@
                 },
                 {
                   "id": "TECH:future3",
-                  "title": "Avoiding scaling font sizes smaller than the user-agent default (future link)"
+                  "title": "Avoiding scaling font sizes smaller than the user agent default (future link)"
                 },
                 {
                   "id": "TECH:future4",
@@ -2756,7 +2756,7 @@
                 },
                 {
                   "id": "TECH:future7",
-                  "title": "Avoiding scaling font sizes smaller than the user-agent default (future link)"
+                  "title": "Avoiding scaling font sizes smaller than the user agent default (future link)"
                 },
                 {
                   "id": "TECH:future8",
@@ -3012,7 +3012,7 @@
                 },
                 {
                   "id": "TECH:future6",
-                  "title": "Avoiding use of common user-agent keyboard commands for other purposes (future link)"
+                  "title": "Avoiding use of common user agent keyboard commands for other purposes (future link)"
                 }
               ]},
               {"failure": [
diff --git a/wcag20/sources/misc/wcag2.json b/wcag20/sources/misc/wcag2.json
index fa2dd71ae5..c6543351ff 100644
--- a/wcag20/sources/misc/wcag2.json
+++ b/wcag20/sources/misc/wcag2.json
@@ -2192,7 +2192,7 @@
             "id": "WCAG2:visual-audio-contrast-scale",
             "num": "1.4.4",
             "level": "AA",
-            "handle": "Resize text",
+            "handle": "Resize Text",
             "title": "Except for captions and images of text, text can be resized without assistive technology up to 200 percent without loss of content or functionality.",
             "techniques": [
               {"sufficient": [
@@ -2270,7 +2270,7 @@
                 },
                 {
                   "id": "TECH:future3",
-                  "title": "Avoiding scaling font sizes smaller than the user-agent default (future link)"
+                  "title": "Avoiding scaling font sizes smaller than the user agent default (future link)"
                 },
                 {
                   "id": "TECH:future4",
@@ -2756,7 +2756,7 @@
                 },
                 {
                   "id": "TECH:future7",
-                  "title": "Avoiding scaling font sizes smaller than the user-agent default (future link)"
+                  "title": "Avoiding scaling font sizes smaller than the user agent default (future link)"
                 },
                 {
                   "id": "TECH:future8",
@@ -3012,7 +3012,7 @@
                 },
                 {
                   "id": "TECH:future6",
-                  "title": "Avoiding use of common user-agent keyboard commands for other purposes (future link)"
+                  "title": "Avoiding use of common user agent keyboard commands for other purposes (future link)"
                 }
               ]},
               {"failure": [
diff --git a/wcag20/sources/techniques/aria.xml b/wcag20/sources/techniques/aria.xml
index 0c3a5e4065..33e73533a7 100644
--- a/wcag20/sources/techniques/aria.xml
+++ b/wcag20/sources/techniques/aria.xml
@@ -463,7 +463,6 @@
          <p id="H56">placeholder for H56</p>
          <p id="H57">placeholder for H57</p>
          <p id="H58">placeholder for H58</p>
-         <p id="H59">placeholder for H59</p>
          <p id="H60">placeholder for H60</p>
          <p id="H62">placeholder for H62</p>
          <p id="H63">placeholder for H63</p>
diff --git a/wcag20/sources/techniques/aria/ARIA1.xml b/wcag20/sources/techniques/aria/ARIA1.xml
index 9ca8bfa8f5..e87d39f267 100644
--- a/wcag20/sources/techniques/aria/ARIA1.xml
+++ b/wcag20/sources/techniques/aria/ARIA1.xml
@@ -244,7 +244,7 @@ about the button action.
             <item>
                <p>
                   <loc xmlns:xlink="http://www.w3.org/1999/xlink"
-                       href="http://www.w3.org/TR/wai-aria-practices/">WAI-ARIA Authoring Practices 1.1</loc>
+                       href="https://www.w3.org/WAI/ARIA/apg/">WAI-ARIA Authoring Practices Guide</loc>
                </p>
             </item>
             <item>
diff --git a/wcag20/sources/techniques/aria/ARIA10.xml b/wcag20/sources/techniques/aria/ARIA10.xml
index 168fa235c8..87c08de1ec 100644
--- a/wcag20/sources/techniques/aria/ARIA10.xml
+++ b/wcag20/sources/techniques/aria/ARIA10.xml
@@ -52,7 +52,7 @@
             <item>
                <p>
                   <loc xmlns:xlink="http://www.w3.org/1999/xlink"
-                       href="http://www.w3.org/TR/wai-aria-practices/">WAI-ARIA Authoring Practices 1.1</loc> 
+                       href="https://www.w3.org/WAI/ARIA/apg/">WAI-ARIA Authoring Practices Guide</loc> 
                </p>
             </item>
             <item>
diff --git a/wcag20/sources/techniques/aria/ARIA11.xml b/wcag20/sources/techniques/aria/ARIA11.xml
index c695ab5bb4..869dc19677 100644
--- a/wcag20/sources/techniques/aria/ARIA11.xml
+++ b/wcag20/sources/techniques/aria/ARIA11.xml
@@ -130,7 +130,7 @@
       <eg-group>
          <head>Search form</head>
          <description>
-            <p>The following example shows a search form with a "search" landmark. The search role typically goes on the form field or a div surrounding the search form.</p>
+            <p>The following example shows a search form with a "search" landmark. The search role typically goes on the form element or a div surrounding the form.</p>
             <codeblock xml:space="preserve"><![CDATA[<form role="search">
 <label for="s6">search</label><input id="s6" type="text" size="20">
 ...
@@ -144,7 +144,7 @@
             <item>
                <p>
                   <loc xmlns:xlink="http://www.w3.org/1999/xlink"
-                       href="http://www.w3.org/TR/wai-aria-practices/">WAI-ARIA Authoring Practices 1.1</loc> 
+                       href="https://www.w3.org/WAI/ARIA/apg/">WAI-ARIA Authoring Practices Guide</loc> 
                </p>
             </item>
             <item>
diff --git a/wcag20/sources/techniques/aria/ARIA12.xml b/wcag20/sources/techniques/aria/ARIA12.xml
index 2e9c696a14..77b66fd9af 100644
--- a/wcag20/sources/techniques/aria/ARIA12.xml
+++ b/wcag20/sources/techniques/aria/ARIA12.xml
@@ -40,7 +40,7 @@ to use <el>h1</el> rather than using <code><![CDATA[<div role="heading" aria-lev
 heading role, instead of heading mark-up, may be necessary. For example, when retrofitting a legacy site where scripts depend on the existing element hierarchy.
 </p>
       <p>The use of the <prop>heading</prop> role and nesting levels is discussed in <loc xmlns:xlink="http://www.w3.org/1999/xlink"
-              href="http://www.w3.org/TR/wai-aria-practices/">WAI-ARIA Authoring Practices 1.1</loc>.
+              href="https://www.w3.org/WAI/ARIA/apg/">WAI-ARIA Authoring Practices Guide</loc>.
 </p>
    </description>
    <examples>
@@ -83,7 +83,7 @@ heading role, instead of heading mark-up, may be necessary. For example, when re
             <item>
                <p>
                   <loc xmlns:xlink="http://www.w3.org/1999/xlink"
-                       href="http://www.w3.org/TR/wai-aria-practices/">WAI-ARIA Authoring Practices 1.1</loc> 
+                       href="https://www.w3.org/WAI/ARIA/apg/">WAI-ARIA Authoring Practices Guide</loc> 
                </p>
             </item>
          </ulist>
diff --git a/wcag20/sources/techniques/aria/ARIA13.xml b/wcag20/sources/techniques/aria/ARIA13.xml
index c30dc2d6c3..e46b7e9977 100644
--- a/wcag20/sources/techniques/aria/ARIA13.xml
+++ b/wcag20/sources/techniques/aria/ARIA13.xml
@@ -57,7 +57,7 @@ This calendar shows the game schedule for the Boston Red Sox.
             <item>
                <p> 
                   <loc xmlns:xlink="http://www.w3.org/1999/xlink"
-                       href="http://www.w3.org/TR/wai-aria-practices/">WAI-ARIA Authoring Practices 1.1</loc>
+                       href="https://www.w3.org/WAI/ARIA/apg/">WAI-ARIA Authoring Practices Guide</loc>
                </p>
             </item>
             <item>
diff --git a/wcag20/sources/techniques/aria/ARIA14.xml b/wcag20/sources/techniques/aria/ARIA14.xml
index d1be2182a9..1d0e2ff519 100644
--- a/wcag20/sources/techniques/aria/ARIA14.xml
+++ b/wcag20/sources/techniques/aria/ARIA14.xml
@@ -219,7 +219,7 @@
             <item>
                <p> 
                   <loc xmlns:xlink="http://www.w3.org/1999/xlink"
-                       href="http://www.w3.org/TR/wai-aria-practices/">WAI-ARIA Authoring Practices 1.1</loc>
+                       href="https://www.w3.org/WAI/ARIA/apg/">WAI-ARIA Authoring Practices Guide</loc>
                </p>
             </item>
             <item>
diff --git a/wcag20/sources/techniques/aria/ARIA15.xml b/wcag20/sources/techniques/aria/ARIA15.xml
index bcd9710755..88680cd6b3 100644
--- a/wcag20/sources/techniques/aria/ARIA15.xml
+++ b/wcag20/sources/techniques/aria/ARIA15.xml
@@ -65,7 +65,7 @@ Jean-Guy Millome, and represents ...</p>]]></codeblock>
             <item>
                <p> 
                   <loc xmlns:xlink="http://www.w3.org/1999/xlink"
-                       href="http://www.w3.org/TR/wai-aria-practices/">WAI-ARIA Authoring Practices 1.1</loc>
+                       href="https://www.w3.org/WAI/ARIA/apg/">WAI-ARIA Authoring Practices Guide</loc>
                </p>
             </item>
             <item>
diff --git a/wcag20/sources/techniques/aria/ARIA16.xml b/wcag20/sources/techniques/aria/ARIA16.xml
index d16369fd19..392c872765 100644
--- a/wcag20/sources/techniques/aria/ARIA16.xml
+++ b/wcag20/sources/techniques/aria/ARIA16.xml
@@ -102,7 +102,7 @@
             <item>
                <p> 
                   <loc xmlns:xlink="http://www.w3.org/1999/xlink"
-                       href="http://www.w3.org/TR/wai-aria-practices/">WAI-ARIA Authoring Practices 1.1</loc>
+                       href="https://www.w3.org/WAI/ARIA/apg/">WAI-ARIA Authoring Practices Guide</loc>
                </p>
             </item>
             <item>
diff --git a/wcag20/sources/techniques/aria/ARIA18.xml b/wcag20/sources/techniques/aria/ARIA18.xml
index cfc11f1efb..d3473e9a1e 100644
--- a/wcag20/sources/techniques/aria/ARIA18.xml
+++ b/wcag20/sources/techniques/aria/ARIA18.xml
@@ -75,7 +75,7 @@
             <item>
                <p>
                   <loc xmlns:xlink="http://www.w3.org/1999/xlink"
-                       href="http://www.w3.org/TR/wai-aria-practices/">WAI-ARIA Authoring Practices 1.1</loc> 
+                       href="https://www.w3.org/WAI/ARIA/apg/">WAI-ARIA Authoring Practices Guide</loc> 
                </p>
             </item>
          </ulist>
diff --git a/wcag20/sources/techniques/aria/ARIA19.xml b/wcag20/sources/techniques/aria/ARIA19.xml
index ebf460b092..8dd2c9042e 100644
--- a/wcag20/sources/techniques/aria/ARIA19.xml
+++ b/wcag20/sources/techniques/aria/ARIA19.xml
@@ -61,7 +61,7 @@
       <p>The purpose of this technique is to notify Assistive Technologies (AT) when an input error occurs. The <att>aria-live</att> attribute makes it possible for an AT (such as a screen reader) to be notified when error messages are injected into a Live Region container. The content within the <att>aria-live</att> region is automatically read by the AT, without the AT having to focus on the place where the text is displayed.
 </p>
       <p>There are also a number of <loc xmlns:xlink="http://www.w3.org/1999/xlink"
-              href="http://www.w3.org/WAI/PF/aria-practices/#chobet">special case live region roles</loc> which can be used instead of applying live region properties directly.</p>
+              href="https://www.w3.org/TR/wai-aria/#live_region_roles">special case live region roles</loc> which can be used instead of applying live region properties directly.</p>
    </description>
    <examples>
       <eg-group>
@@ -122,7 +122,7 @@ $(document).ready(function(e) {
             <item>
                <p>
                   <loc xmlns:xlink="http://www.w3.org/1999/xlink"
-                       href="http://www.w3.org/TR/wai-aria-practices/">WAI-ARIA Authoring Practices 1.1</loc>
+                       href="https://www.w3.org/WAI/ARIA/apg/">WAI-ARIA Authoring Practices Guide</loc>
                </p>
             </item>
             <item>
diff --git a/wcag20/sources/techniques/aria/ARIA2.xml b/wcag20/sources/techniques/aria/ARIA2.xml
index 2093b62f06..66a2e050f1 100644
--- a/wcag20/sources/techniques/aria/ARIA2.xml
+++ b/wcag20/sources/techniques/aria/ARIA2.xml
@@ -205,7 +205,7 @@
             <item>
                <p>
                   <loc xmlns:xlink="http://www.w3.org/1999/xlink"
-                       href="http://www.w3.org/TR/wai-aria-practices/">WAI-ARIA Authoring Practices 1.1</loc>
+                       href="https://www.w3.org/WAI/ARIA/apg/">WAI-ARIA Authoring Practices Guide</loc>
                </p>
             </item>
             <item>
diff --git a/wcag20/sources/techniques/aria/ARIA4.xml b/wcag20/sources/techniques/aria/ARIA4.xml
index 80e14d56e3..ff79024ca4 100644
--- a/wcag20/sources/techniques/aria/ARIA4.xml
+++ b/wcag20/sources/techniques/aria/ARIA4.xml
@@ -23,8 +23,7 @@
       <eg-group>
          <head>A simple toolbar</head>
          <description>
-            <p>The WAI-ARIA Authoring Practices document <loc xmlns:xlink="http://www.w3.org/1999/xlink"
-                    href="https://www.w3.org/TR/wai-aria-practices-1.1/#accessiblewidget">demonstrates a toolbar containing three buttons</loc>. The <el>div</el> element has a role of "toolbar", and the <el>img</el> elements have "button" roles:</p>
+            <p>A toolbar containing three buttons. The <el>div</el> element has a role of "toolbar", and the <el>img</el> elements have "button" roles:</p>
             <codeblock xml:space="preserve"><![CDATA[
     <div role="toolbar"
       tabindex="0" 
@@ -56,14 +55,13 @@
  </div>  
                         ]]></codeblock>
             <p>The Authoring Practices Toolbar Pattern <loc xmlns:xlink="http://www.w3.org/1999/xlink"
-                    href="https://www.w3.org/TR/wai-aria-practices-1.1/#toolbar">provides a working example of a toolbar.</loc>.</p>
+                    href="https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/">provides a working example of a toolbar.</loc>.</p>
          </description>
       </eg-group>
       <eg-group>
          <head>A Tree Widget</head>
          <description>
-            <p>The WAI-ARIA Authoring Practices <loc xmlns:xlink="http://www.w3.org/1999/xlink"
-                    href="https://www.w3.org/TR/wai-aria-practices-1.1/#exampletree">demonstrates a tree widget</loc>. Note the use of the roles "tree", "treeitem", and "group" to identify the tree and its structure. Here is a simplified excerpt from the code:</p>
+            <p>A basic tree widget. Note the use of the roles "tree", "treeitem", and "group" to identify the tree and its structure. Here is a simplified excerpt from the code:</p>
             <codeblock xml:space="preserve"><![CDATA[
 <ul role="tree" tabindex="0">
   <li role="treeitem">Birds</li>
@@ -101,7 +99,7 @@
 </ul>
 ]]></codeblock>
             <p>The Authoring Practices Tree View Pattern <loc xmlns:xlink="http://www.w3.org/1999/xlink"
-                    href="https://www.w3.org/TR/wai-aria-practices-1.1/#TreeView"> provides a working example of a tree</loc>.</p>
+                    href="https://www.w3.org/WAI/ARIA/apg/patterns/treeview/"> provides a working example of a tree</loc>.</p>
          </description>
       </eg-group>
    </examples>
@@ -129,7 +127,7 @@
          	<item>
                <p>
                   <loc xmlns:xlink="http://www.w3.org/1999/xlink"
-                       href="https://www.w3.org/TR/wai-aria-practices-1.1/">WAI-ARIA 1.1 Authoring Practices</loc> 
+                       href="https://www.w3.org/WAI/ARIA/apg/">WAI-ARIA Authoring Practices Guide</loc> 
                </p>
             </item>
             <item>
diff --git a/wcag20/sources/techniques/aria/ARIA5.xml b/wcag20/sources/techniques/aria/ARIA5.xml
index 8b88ece3ad..af1166c052 100644
--- a/wcag20/sources/techniques/aria/ARIA5.xml
+++ b/wcag20/sources/techniques/aria/ARIA5.xml
@@ -24,64 +24,60 @@
          <head>A toggle button</head>
          <description>
             <p>A widget with role <att>button</att> acts as a toggle button when it implements the attribute <att>aria-pressed</att>. When <att>aria-pressed</att> is true, the button is in a "pressed" state. When <att>aria-pressed</att> is false, it is not pressed. If the attribute is not present, the button is a simple command button.</p>
-            <p>The following snippet from The Open Ajax Accessibility Examples, Example 38, shows WAI-ARIA mark-up for a toggle button that selects bold text:</p>
+            <p>The following snippet from the <loc xmlns:xlink="http://www.w3.org/1999/xlink" href="https://www.w3.org/WAI/ARIA/apg/example-index/button/button.html">ARIA Authoring Practices Guide (APG) examples for button</loc> shows WAI-ARIA mark-up for a toggle button to mute/unmute audio:</p>
             <codeblock xml:space="preserve"><![CDATA[
-  <li id="bold1"  
-    class="toggleButton"
-    role="button"
-    tabindex="0"
-    aria-pressed="false"
-    aria-labelledby="bold_label"
-    aria-controls="text1">
-    <img src="http://www.oaa-accessibility.org/media/examples/images/button-bold.png" alt="bold text" align="middle">
-</li>
+<a tabindex="0"
+   role="button"
+   id="toggle"
+   aria-pressed="false">
+  Mute
+  …
+</a>
 ]]></codeblock>
-            <p>The <el>li</el> element has a role of "button" and an "aria-pressed" attribute. The following excerpt from the Javascript for this example updates the value of the "aria-pressed" attribute:</p>
+            <p>The <el>a</el> element has a <att>role="button"</att> and an <att>aria-pressed</att> attribute. The following excerpt from the Javascript for this example updates the value of the <att>aria-pressed</att> attribute:</p>
             <codeblock xml:space="preserve"><![CDATA[                   
-                             /**
-   * togglePressed() toggles the aria-pressed atribute between true or false
-   *
-   * @param ( id object) button to be operated on
-   *
-   * @return N/A
-   */
-  function togglePressed(id) {
-  
-    // reverse the aria-pressed state
-    if ($(id).attr('aria-pressed') == 'true') {
-      $(id).attr('aria-pressed', 'false');
-    }
-    else {
-      $(id).attr('aria-pressed', 'true');
-    }
-  }
-                            ]]></codeblock>
-            <p>This button is available as part of the <loc xmlns:xlink="http://www.w3.org/1999/xlink"
-                    href="http://www.oaa-accessibility.org/examplep/toolbar1/">working example of Example 38 - Toolbar using inline images for visual state</loc>, on the OpenAjax Alliance site.</p>
+/**
+ * Toggles the toggle button’s state between *pressed* and *not pressed*.
+ *
+ * @param {HTMLElement} button
+ */
+function toggleButtonState(button) {
+  var isAriaPressed = button.getAttribute('aria-pressed') === 'true';
+
+  button.setAttribute('aria-pressed', isAriaPressed ? 'false' : 'true');
+
+  …
+}
+]]></codeblock>
          </description>
       </eg-group>
       <eg-group>
          <head>A slider</head>
          <description>
             <p>A widget with role <att>slider</att> lets a user select a value from within a given range. The slider represents the current value and the range of possible values via the size of the slider and the position of the handle. These properties of the slider are represented by the attributes <att>aria-valuemin</att>, <att>aria-valuemax</att>, and <att>aria-valuenow</att>.</p>
-            <p>The following snippet from The Open Ajax Accessibility Examples, Example 32, shows WAI-ARIA mark-up for a slider created in Javascript. Note that the javascript sets the attributes aria-valuemin, aria-valuemax, and aria-valuenow:</p>
-            <codeblock xml:space="preserve"><![CDATA[   var handle = '<img id="' + id + '" class="' + (this.vert == true ? 'v':'h') +'sliderHandle" ' +
-    'src="http://www.oaa-accessibility.org/media/examples/images/slider_' + (this.vert == true ? 'v':'h') + '.png" ' + 'role="slider" ' +
-    'aria-valuemin="' + this.min +
-    '" aria-valuemax="' + this.max +
-    '" aria-valuenow="' + (val == undefined ? this.min : val) +
-           '" aria-labelledby="' + label +
-           '" aria-controls="' + controls + '" tabindex="0"></img>';]]></codeblock>
-            <p>The following excerpt from the Javascript for this example updates the value of the "aria-valuenow" attribute when the value of the slider handle is changed:</p>
-            <codeblock xml:space="preserve"><![CDATA[ slider.prototype.positionHandle = function($handle, val) {
-    ...
-   // Set the aria-valuenow position of the handle
-  $handle.attr('aria-valuenow', val);
-   ...
-  }
+            <p>The following snippet from the <loc xmlns:xlink="http://www.w3.org/1999/xlink" href="https://www.w3.org/WAI/ARIA/apg/example-index/slider/slider-color-viewer.html">ARIA Authoring Practices Guide (APG) color viewer slider example</loc> shows WAI-ARIA mark-up for one of the sliders:</p>
+            <codeblock xml:space="preserve"><![CDATA[
+<div id="id-red" class="color-slider-label">
+   Red
+</div>
+<div class="color-slider red"
+      role="slider"
+      tabindex="0"
+      aria-valuemin="0"
+      aria-valuenow="128"
+      aria-valuemax="255"
+      aria-labelledby="id-red">
+   …
+</div>
+]]></codeblock>
+            <p>The following excerpt from the Javascript for this example updates the value of the <att>>aria-valuenow</att> attribute when the value of the slider handle is changed:</p>
+            <codeblock xml:space="preserve"><![CDATA[
+moveSliderTo(slider, value) {
+  …
+  slider.sliderNode.setAttribute('aria-valuenow', value);
+  …
+}
 ]]></codeblock>
-            <p>This slider is available as part of the <loc xmlns:xlink="http://www.w3.org/1999/xlink"
-                    href="http://oaa-accessibility.org/example/32/">working example of Example 32 - Slider</loc>, on the OpenAjax Alliance site.</p>
          </description>
       </eg-group>
    </examples>
@@ -115,7 +111,7 @@
             <item>
                <p>
                   <loc xmlns:xlink="http://www.w3.org/1999/xlink"
-                       href="http://www.w3.org/TR/wai-aria-practices/">WAI-ARIA Authoring Practices 1.1</loc>
+                       href="https://www.w3.org/WAI/ARIA/apg/">WAI-ARIA Authoring Practices Guide</loc>
                </p>
             </item>
             <item>
diff --git a/wcag20/sources/techniques/aria/ARIA6.xml b/wcag20/sources/techniques/aria/ARIA6.xml
index a51e6d1838..bf039e92c5 100644
--- a/wcag20/sources/techniques/aria/ARIA6.xml
+++ b/wcag20/sources/techniques/aria/ARIA6.xml
@@ -92,7 +92,7 @@
             <item>
                <p>
                   <loc xmlns:xlink="http://www.w3.org/1999/xlink"
-                       href="http://www.w3.org/TR/wai-aria-practices/">WAI-ARIA Authoring Practices 1.1</loc> 
+                       href="https://www.w3.org/WAI/ARIA/apg/">WAI-ARIA Authoring Practices Guide</loc> 
                </p>
             </item>
          </ulist>
diff --git a/wcag20/sources/techniques/aria/ARIA9.xml b/wcag20/sources/techniques/aria/ARIA9.xml
index 547ce3765f..01e665c5e5 100644
--- a/wcag20/sources/techniques/aria/ARIA9.xml
+++ b/wcag20/sources/techniques/aria/ARIA9.xml
@@ -242,7 +242,7 @@
             <item>
                <p>
                   <loc xmlns:xlink="http://www.w3.org/1999/xlink"
-                       href="http://www.w3.org/TR/wai-aria-practices/">WAI-ARIA Authoring Practices 1.1</loc> 
+                       href="https://www.w3.org/WAI/ARIA/apg/">WAI-ARIA Authoring Practices Guide</loc> 
                </p>
             </item>
             <item>
diff --git a/wcag20/sources/techniques/client-side-script.xml b/wcag20/sources/techniques/client-side-script.xml
index f63f746cc0..f002986809 100644
--- a/wcag20/sources/techniques/client-side-script.xml
+++ b/wcag20/sources/techniques/client-side-script.xml
@@ -320,7 +320,6 @@ Web Accessibility Initiative (WAI) to support WCAG 2.0.</p>
          <p id="H56">placeholder for H56</p>
          <p id="H57">placeholder for H57</p>
          <p id="H58">placeholder for H58</p>
-         <p id="H59">placeholder for H59</p>
          <p id="H60">placeholder for H60</p>
          <p id="H62">placeholder for H62</p>
          <p id="H63">placeholder for H63</p>
diff --git a/wcag20/sources/techniques/client-side-script/SCR35.xml b/wcag20/sources/techniques/client-side-script/SCR35.xml
index 2a6c1f05a1..fffd3e3c67 100644
--- a/wcag20/sources/techniques/client-side-script/SCR35.xml
+++ b/wcag20/sources/techniques/client-side-script/SCR35.xml
@@ -93,7 +93,7 @@ function doStuff()
             <p>Button that runs a script, implemented with <code><![CDATA[input type="submit"]]></code>, <code><![CDATA[input type="reset"]]></code> or <code><![CDATA[input type="button"]]></code>. This approach should only be used when script is relied upon.  </p>
          </description>
          <code><![CDATA[
-<input type="submit" onclick="return doStuff();" value=”Do Stuff” />
+<input type="submit" onclick="return doStuff();" value="Do Stuff" />
 ]]></code>
       </eg-group>
       <eg-group>
diff --git a/wcag20/sources/techniques/css.xml b/wcag20/sources/techniques/css.xml
index 2470f364ce..aa07714db1 100644
--- a/wcag20/sources/techniques/css.xml
+++ b/wcag20/sources/techniques/css.xml
@@ -337,7 +337,6 @@ Web Accessibility Initiative (WAI) to support WCAG 2.0.</p>
          <p id="H56">placeholder for H56</p>
          <p id="H57">placeholder for H57</p>
          <p id="H58">placeholder for H58</p>
-         <p id="H59">placeholder for H59</p>
          <p id="H60">placeholder for H60</p>
          <p id="H62">placeholder for H62</p>
          <p id="H63">placeholder for H63</p>
diff --git a/wcag20/sources/techniques/css/C27.xml b/wcag20/sources/techniques/css/C27.xml
index 23e78982d2..fdaec8b25b 100644
--- a/wcag20/sources/techniques/css/C27.xml
+++ b/wcag20/sources/techniques/css/C27.xml
@@ -55,7 +55,7 @@
                <p>Examine the elements in the DOM using a tool that allows you to see the DOM. </p>
             </item>
             <item>
-               <p>Ensure that the the order of the content in the source code sections match the visual presentation of the content in the Web page. (e.g., for an English language page the order is from top to bottom and from left to right.) " </p>
+               <p>Ensure that the order of the content in the source code sections match the visual presentation of the content in the Web page. (e.g., for an English language page the order is from top to bottom and from left to right.) " </p>
             </item>
          </olist>
       </procedure>
diff --git a/wcag20/sources/techniques/css/C29.xml b/wcag20/sources/techniques/css/C29.xml
index 3af3328438..86a18c09df 100644
--- a/wcag20/sources/techniques/css/C29.xml
+++ b/wcag20/sources/techniques/css/C29.xml
@@ -332,7 +332,7 @@ In style2.css:
             <p>The example below uses two files </p>
             <ulist>
                <item>
-                  <p>a Java Server Page (JSP) with the form and the the form processing code, and </p>
+                  <p>a Java Server Page (JSP) with the form and the form processing code, and </p>
                </item>
                <item>
                   <p>an include file with functions used by the previous page and in other pages use the same style. </p>
diff --git a/wcag20/sources/techniques/failures.xml b/wcag20/sources/techniques/failures.xml
index f0bdb7f320..affdeb20d6 100644
--- a/wcag20/sources/techniques/failures.xml
+++ b/wcag20/sources/techniques/failures.xml
@@ -376,7 +376,6 @@
          <p id="H56">placeholder for H56</p>
          <p id="H57">placeholder for H57</p>
          <p id="H58">placeholder for H58</p>
-         <p id="H59">placeholder for H59</p>
          <p id="H60">placeholder for H60</p>
          <p id="H62">placeholder for H62</p>
          <p id="H63">placeholder for H63</p>
diff --git a/wcag20/sources/techniques/failures/F15.xml b/wcag20/sources/techniques/failures/F15.xml
index 11f17fc252..3f9cbe7f30 100644
--- a/wcag20/sources/techniques/failures/F15.xml
+++ b/wcag20/sources/techniques/failures/F15.xml
@@ -44,7 +44,7 @@
             <item>
                <p>
                   <loc xmlns:xlink="http://www.w3.org/1999/xlink"
-                       href="http://www.w3.org/TR/wai-aria-practices/">WAI-ARIA 1.0 Authoring Practices</loc> 
+                       href="https://www.w3.org/WAI/ARIA/apg/">WAI-ARIA  Authoring Practices Guide</loc> 
                </p>
             </item>
             <item>
diff --git a/wcag20/sources/techniques/failures/F59.xml b/wcag20/sources/techniques/failures/F59.xml
index e41a5d574c..62499f477f 100644
--- a/wcag20/sources/techniques/failures/F59.xml
+++ b/wcag20/sources/techniques/failures/F59.xml
@@ -72,7 +72,7 @@
             <item>
                <p>
                   <loc xmlns:xlink="http://www.w3.org/1999/xlink"
-                       href="http://www.w3.org/TR/wai-aria-practices/">WAI-ARIA 1.0 Authoring Practices</loc> 
+                       href="https://www.w3.org/WAI/ARIA/apg/">WAI-ARIA  Authoring Practices Guide</loc> 
                </p>
             </item>
          </ulist>
diff --git a/wcag20/sources/techniques/failures/F63.xml b/wcag20/sources/techniques/failures/F63.xml
index cea21bbfb4..9bd80b6dab 100644
--- a/wcag20/sources/techniques/failures/F63.xml
+++ b/wcag20/sources/techniques/failures/F63.xml
@@ -71,7 +71,7 @@ travel on the world's first commercial tourism flights to space.</p>
             <item>
                <p>
                   <loc xmlns:xlink="http://www.w3.org/1999/xlink"
-                       href="http://www.w3.org/TR/wai-aria-practices/">WAI-ARIA 1.0 Authoring Practices</loc>
+                       href="https://www.w3.org/WAI/ARIA/apg/">WAI-ARIA  Authoring Practices Guide</loc>
                </p>
             </item>
          </ulist>
diff --git a/wcag20/sources/techniques/flash/FLASH29.xml b/wcag20/sources/techniques/flash/FLASH29.xml
index 246570b030..82194d149d 100644
--- a/wcag20/sources/techniques/flash/FLASH29.xml
+++ b/wcag20/sources/techniques/flash/FLASH29.xml
@@ -83,7 +83,7 @@ CheckBoxAccImpl.enableAccessibility();]]></code>
             <olist>
                <item>
                   <p> Add the Button, CheckBox or RadioButton component to the movie
-    						by dragging it on the the stage from the 'Components' panel. </p>
+    						by dragging it on the stage from the 'Components' panel. </p>
                </item>
                <item>
                   <p> With the component selected, open the 'Component Inspector' panel
diff --git a/wcag20/sources/techniques/general.xml b/wcag20/sources/techniques/general.xml
index 60ba4a11dd..fa09037277 100644
--- a/wcag20/sources/techniques/general.xml
+++ b/wcag20/sources/techniques/general.xml
@@ -303,7 +303,6 @@
          <p id="H56">placeholder for H56</p>
          <p id="H57">placeholder for H57</p>
          <p id="H58">placeholder for H58</p>
-         <p id="H59">placeholder for H59</p>
          <p id="H60">placeholder for H60</p>
          <p id="H62">placeholder for H62</p>
          <p id="H63">placeholder for H63</p>
diff --git a/wcag20/sources/techniques/general/G101.xml b/wcag20/sources/techniques/general/G101.xml
index 29e1dfc824..ff0bb08bfe 100644
--- a/wcag20/sources/techniques/general/G101.xml
+++ b/wcag20/sources/techniques/general/G101.xml
@@ -56,7 +56,7 @@
          <description>
             <p>This example uses parentheses to provide the definition of an idiomatic expression in Japanese. The phrase in Japanese says that "he throws a spoon." It means that there was nothing he can do and finally he gives up.</p>
             <p>
-                <phrase xml:lang="jp">さじを投げる（どうすることもできなくなり、あきらめること）。</phrase>
+                <phrase xml:lang="ja">さじを投げる（どうすることもできなくなり、あきらめること）。</phrase>
               </p>
          </description>
       </eg-group>
@@ -71,11 +71,11 @@
          <description>
             <p>In Japanese, Kata-kana is used for adopted foreign words. If words are unfamiliar to users, provide the meaning or translation so that users can understand them.</p>
             <p>
-                <phrase xml:lang="jp">アクセシビリティ（高齢者・障害者を含む全ての人が利用できること）は、Webサイトに不可欠である。</phrase>
+                <phrase xml:lang="ja">アクセシビリティ（高齢者・障害者を含む全ての人が利用できること）は、Webサイトに不可欠である。</phrase>
               </p>
             <p>English translation: "Accessibility" (it can be accessed by all users including elderly people and people with disabilities) is an essential aspect of the Websites.</p>
             <p>
-                <phrase xml:lang="jp">レイアウトテーブルとCSSの併用をハイブリッド（複合型）という。</phrase>
+                <phrase xml:lang="ja">レイアウトテーブルとCSSの併用をハイブリッド（複合型）という。</phrase>
               </p>
             <p>English translation: Using both layout table and CSS is called "hybrid" (combination of multiple forms).</p>
          </description>
diff --git a/wcag20/sources/techniques/general/G112.xml b/wcag20/sources/techniques/general/G112.xml
index 2a4b56c200..d2c7c1fcc1 100644
--- a/wcag20/sources/techniques/general/G112.xml
+++ b/wcag20/sources/techniques/general/G112.xml
@@ -38,7 +38,7 @@
          <description>
             <p>This example uses parentheses to provide the definition of an idiomatic expression in Japanese. The phrase in Japanese says that "he throws a spoon." It means that there was nothing he can do and finally he gives up.</p>
             <p>
-                <phrase xml:lang="jp">さじを投げる（どうすることもできなくなり、あきらめること）。</phrase>
+                <phrase xml:lang="ja">さじを投げる（どうすることもできなくなり、あきらめること）。</phrase>
               </p>
          </description>
       </eg-group>
diff --git a/wcag20/sources/techniques/general/G142.xml b/wcag20/sources/techniques/general/G142.xml
index 19f485396e..086dda1198 100644
--- a/wcag20/sources/techniques/general/G142.xml
+++ b/wcag20/sources/techniques/general/G142.xml
@@ -4,7 +4,7 @@
 <technique id="G142">
    <short-name>Using a technology that has commonly-available user agents that support zoom</short-name>
    <applicability>
-      <p>All technologies with user-agent provided zoom capability.</p>
+      <p>All technologies with user agent provided zoom capability.</p>
    </applicability>
    <applies-to>
       <success-criterion idref="visual-audio-contrast-scale" relationship="sufficient"/>
diff --git a/wcag20/sources/techniques/general/G145.xml b/wcag20/sources/techniques/general/G145.xml
index 2f84c88d31..7b512deeb0 100644
--- a/wcag20/sources/techniques/general/G145.xml
+++ b/wcag20/sources/techniques/general/G145.xml
@@ -63,7 +63,7 @@
             <item>
                <p>
                   <loc xmlns:xlink="http://www.w3.org/1999/xlink"
-                       href="http://trace.wisc.edu/contrast-ratio-examples/">Color Contrast Samples</loc>
+                       href="https://web.archive.org/web/20160814160227/http://trace.wisc.edu/contrast-ratio-examples">Color Contrast Samples</loc>
                 </p>
             </item>
             <item>
diff --git a/wcag20/sources/techniques/general/G148.xml b/wcag20/sources/techniques/general/G148.xml
index 02a46a491a..09fbce84a9 100644
--- a/wcag20/sources/techniques/general/G148.xml
+++ b/wcag20/sources/techniques/general/G148.xml
@@ -54,7 +54,7 @@
             <item>
                <p>
                   <loc xmlns:xlink="http://www.w3.org/1999/xlink"
-                       href="http://trace.wisc.edu/contrast-ratio-examples/">Color Contrast Samples</loc>
+                       href="https://web.archive.org/web/20160814160227/http://trace.wisc.edu/contrast-ratio-examples">Color Contrast Samples</loc>
                 </p>
             </item>
             <item>
diff --git a/wcag20/sources/techniques/general/G149.xml b/wcag20/sources/techniques/general/G149.xml
index 2fb7ef4ccd..72c7ef7f39 100644
--- a/wcag20/sources/techniques/general/G149.xml
+++ b/wcag20/sources/techniques/general/G149.xml
@@ -4,7 +4,7 @@
 <technique id="G149">
    <short-name>Using user interface components that are highlighted by the user agent when they receive focus</short-name>
    <applicability>
-      <p>All technologies with user-agent provided focus highlighting.</p>
+      <p>All technologies with user agent provided focus highlighting.</p>
    </applicability>
    <applies-to>
       <success-criterion idref="navigation-mechanisms-focus-visible" relationship="sufficient"/>
diff --git a/wcag20/sources/techniques/general/G15.xml b/wcag20/sources/techniques/general/G15.xml
index dd8ea3bcf5..3ed0b62206 100644
--- a/wcag20/sources/techniques/general/G15.xml
+++ b/wcag20/sources/techniques/general/G15.xml
@@ -47,7 +47,7 @@
             <item>
                <p>
                   <loc xmlns:xlink="http://www.w3.org/1999/xlink"
-                       href="http://trace.wisc.edu/peat/">Trace Center Photosensitive Epilepsy Analysis Tool (PEAT)</loc>
+                       href="https://trace.umd.edu/peat/">Trace Center Photosensitive Epilepsy Analysis Tool (PEAT)</loc>
                 </p>
             </item>
          </ulist>
diff --git a/wcag20/sources/techniques/general/G153.xml b/wcag20/sources/techniques/general/G153.xml
index be43d2c3ae..0964251a9b 100644
--- a/wcag20/sources/techniques/general/G153.xml
+++ b/wcag20/sources/techniques/general/G153.xml
@@ -17,7 +17,7 @@
             <p>Develop a single topic or subtopic per paragraph.</p>
          </item>
          <item>
-            <p>Use the simplest sentence forms consistent with the purpose of the content. For example, the simplest sentence-form for English consists of Subject-Verb-Object, as in John hit the ball or The Web site conforms to WCAG 2.0.</p>
+            <p>Use the simplest sentence forms consistent with the purpose of the content. For example, the simplest sentence form for English consists of Subject-Verb-Object, as in <i>John hit the ball</i> or <i>The Web site conforms to WCAG 2.0</i>.</p>
          </item>
          <item>
             <p>Use sentences that are no longer than the typical accepted length for secondary education. (Note: In English that is 25 words.)</p>
@@ -26,7 +26,7 @@
             <p>Consider dividing longer sentences into two.</p>
          </item>
          <item>
-            <p>Use sentences that contain no more than two conjunction.</p>
+            <p>Use sentences that contain no more than two conjunctions.</p>
          </item>
          <item>
             <p>Indicate logical relationships between phrases, sentences, paragraphs, or sections of the text.</p>
@@ -41,7 +41,7 @@
             <p>Remove redundant words, that is, words that do not change the meaning of the sentence.</p>
          </item>
          <item>
-            <p>Use single nouns or short noun-phrases.</p>
+            <p>Use single nouns or short noun phrases.</p>
          </item>
          <item>
             <p>Remove complex words or phrases that could be replaced with more commonly used words without changing the meaning of the sentence.</p>
diff --git a/wcag20/sources/techniques/general/G17.xml b/wcag20/sources/techniques/general/G17.xml
index 9d3f30390d..bf2498662c 100644
--- a/wcag20/sources/techniques/general/G17.xml
+++ b/wcag20/sources/techniques/general/G17.xml
@@ -68,7 +68,7 @@
             <item>
                <p>
                   <loc xmlns:xlink="http://www.w3.org/1999/xlink"
-                       href="http://trace.wisc.edu/contrast-ratio-examples/">Color Contrast Samples</loc>
+                       href="https://web.archive.org/web/20160814160227/http://trace.wisc.edu/contrast-ratio-examples">Color Contrast Samples</loc>
                 </p>
             </item>
             <item>
diff --git a/wcag20/sources/techniques/general/G176.xml b/wcag20/sources/techniques/general/G176.xml
index 1159661517..ab58a4f170 100644
--- a/wcag20/sources/techniques/general/G176.xml
+++ b/wcag20/sources/techniques/general/G176.xml
@@ -92,13 +92,13 @@
             <item>
                <p>
                   <loc xmlns:xlink="http://www.w3.org/1999/xlink"
-                       href="http://trace.wisc.edu/peat/">Trace Center Photosensitive Epilepsy Analysis Tool (PEAT)</loc>
+                       href="https://trace.umd.edu/peat/">Trace Center Photosensitive Epilepsy Analysis Tool (PEAT)</loc>
                 </p>
             </item>
             <item>
                <p>
                   <loc xmlns:xlink="http://www.w3.org/1999/xlink"
-                       href="http://trace.wisc.edu/peat/photosensitive.php">Information about Photosensitive Seizure Disorders</loc>
+                       href="https://trace.umd.edu/information-about-photosensitive-seizure-disorders/">Information about Photosensitive Seizure Disorders</loc>
                 </p>
             </item>
             <item>
diff --git a/wcag20/sources/techniques/general/G18.xml b/wcag20/sources/techniques/general/G18.xml
index e533bfe878..264c4c294b 100644
--- a/wcag20/sources/techniques/general/G18.xml
+++ b/wcag20/sources/techniques/general/G18.xml
@@ -72,7 +72,7 @@
             <item>
                <p>
                   <loc xmlns:xlink="http://www.w3.org/1999/xlink"
-                       href="http://trace.wisc.edu/contrast-ratio-examples/">Color Contrast Samples</loc>
+                       href="https://web.archive.org/web/20160814160227/http://trace.wisc.edu/contrast-ratio-examples">Color Contrast Samples</loc>
                 </p>
             </item>
             <item>
diff --git a/wcag20/sources/techniques/general/G19.xml b/wcag20/sources/techniques/general/G19.xml
index 55f5417876..9383bb2d41 100644
--- a/wcag20/sources/techniques/general/G19.xml
+++ b/wcag20/sources/techniques/general/G19.xml
@@ -41,7 +41,7 @@
             <item>
                <p>
                   <loc xmlns:xlink="http://www.w3.org/1999/xlink"
-                       href="http://trace.wisc.edu/peat/">Trace Center Photosensitive Epilepsy Analysis Tool (PEAT)</loc>
+                       href="https://trace.umd.edu/peat/">Trace Center Photosensitive Epilepsy Analysis Tool (PEAT)</loc>
                 </p>
             </item>
          </ulist>
diff --git a/wcag20/sources/techniques/general/G190.xml b/wcag20/sources/techniques/general/G190.xml
index 858faf3941..f6ffbbbebc 100644
--- a/wcag20/sources/techniques/general/G190.xml
+++ b/wcag20/sources/techniques/general/G190.xml
@@ -10,7 +10,7 @@
       <conformance-criterion idref="cc1" relationship="sufficient"/>
    </applies-to>
    <description>
-      <p>It is better for all objects on a page to conform, but there are certain circumstances where that may not be possible. There may be situations when an object or section of content targets people with certain disabilities while those same attributes make it inaccessible for someone else. There may also be other reasons not to have a conforming object on the Web page. When an object does not conform, then a link to a conforming alternate version is adjacent to the non-conforming object in the linear reading order or is associated with the the non-conforming content. The conforming alternate version conveys the same information as the non-conforming version.</p>
+      <p>It is better for all objects on a page to conform, but there are certain circumstances where that may not be possible. There may be situations when an object or section of content targets people with certain disabilities while those same attributes make it inaccessible for someone else. There may also be other reasons not to have a conforming object on the Web page. When an object does not conform, then a link to a conforming alternate version is adjacent to the non-conforming object in the linear reading order or is associated with the non-conforming content. The conforming alternate version conveys the same information as the non-conforming version.</p>
    </description>
    <examples>
       <eg-group>
diff --git a/wcag20/sources/techniques/general/G195.xml b/wcag20/sources/techniques/general/G195.xml
index 4952721436..e047f3b28c 100644
--- a/wcag20/sources/techniques/general/G195.xml
+++ b/wcag20/sources/techniques/general/G195.xml
@@ -43,13 +43,13 @@
       <procedure>
          <olist>
             <item>
-               <p>Place focus on each focusable user interface element on the page using the mouse.</p>
+               <p>Place focus on each focusable user interface component on the page using the mouse.</p>
             </item>
             <item>
                <p>Check that there is a highly visible focus indicator.</p>
             </item>
             <item>
-               <p>Place focus on each focusable user interface element on the page using the keyboard.</p>
+               <p>Place focus on each focusable user interface component on the page using the keyboard.</p>
             </item>
             <item>
                <p>Check that there is a highly visible focus indicator.</p>
diff --git a/wcag20/sources/techniques/general/G56.xml b/wcag20/sources/techniques/general/G56.xml
index c83288aa2e..358455e37d 100644
--- a/wcag20/sources/techniques/general/G56.xml
+++ b/wcag20/sources/techniques/general/G56.xml
@@ -14,10 +14,7 @@
       <p>The objective of this technique is to allow authors to include sound behind
             speech without making it too hard for people with hearing problems to
             understand the speech. Making sure that the foreground speech is 20 db louder than the
-            backgound sound makes the speech 4 times louder than the background audio.
-            For information on Decibels (dB), refer to
-            <loc xmlns:xlink="http://www.w3.org/1999/xlink"
-              href="http://trace.wisc.edu/docs/2004-About-dB/index.htm">About Decibels</loc>.</p>
+            backgound sound makes the speech 4 times louder than the background audio. For information on Decibels (dB), refer to <a href="https://ds.gpii.net/content/about-decibels-db">About Decibels</a>.</p>
    </description>
    <examples>
       <eg-group>
diff --git a/wcag20/sources/techniques/html.xml b/wcag20/sources/techniques/html.xml
index 79402bdf2a..582c429c9e 100644
--- a/wcag20/sources/techniques/html.xml
+++ b/wcag20/sources/techniques/html.xml
@@ -153,7 +153,6 @@
          <xi:include href="html/H56.xml"/>
          <xi:include href="html/H57.xml"/>
          <xi:include href="html/H58.xml"/>
-         <xi:include href="html/H59.xml"/>
          <xi:include href="html/H60.xml"/>
          <xi:include href="html/H62.xml"/>
          <xi:include href="html/H63.xml"/>
diff --git a/wcag20/sources/techniques/html/H49.xml b/wcag20/sources/techniques/html/H49.xml
index 83891db20c..c293193f5e 100644
--- a/wcag20/sources/techniques/html/H49.xml
+++ b/wcag20/sources/techniques/html/H49.xml
@@ -96,6 +96,19 @@ we can never do anything good in the world.</q>"</p>]]></code>
          <code role="html401"><![CDATA[ <p>Beth received 1<sup>st</sup> place in the 9<sup>th</sup> grade science competition.</p>
 <p>The chemical notation for water is H<sub>2</sub>O.</p>]]></code>
       </eg-group>
+      <eg-group>
+         <description>
+           <p>This example shows use of the <el>code</el> element to provide visual emphasis and consistent restyling capability for code rendered on a web page. In this example shows a <el>code</el> code element being used to emphasize a block of CSS code.</p>
+         </description>
+         <code role="html5"><![CDATA[<code>
+#trial {
+background-image: url(30daytrial.jpg);
+background-repeat: no-repeat;
+background-position: left top;
+padding-top: 68px;
+} 
+</code>]]></code>
+      </eg-group>
    </examples>
    <resources>
       <see-also>
diff --git a/wcag20/sources/techniques/html/H59.xml b/wcag20/sources/techniques/html/H59.xml
deleted file mode 100644
index a54863afa2..0000000000
--- a/wcag20/sources/techniques/html/H59.xml
+++ /dev/null
@@ -1,150 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!DOCTYPE technique
-  SYSTEM "../../xmlspec.dtd">
-<technique id="H59">
-   <short-name>Using the link element and navigation tools</short-name>
-   <applicability>
-      <p>HTML and XHTML</p>
-   </applicability>
-   <applies-to>
-      <success-criterion idref="navigation-mechanisms-mult-loc" relationship="sufficient"/>
-      <success-criterion idref="navigation-mechanisms-location" relationship="sufficient"/>
-   </applies-to>
-   <ua-issues>
-      <ua-issue name="" version="">
-         <ulist>
-            <item>
-               <p>The link element has inconsistent user agent and assistive technology support. </p>
-            </item>
-            <item>
-               <p>Some user agents provide an optional navigation bar which will display the
-              information specified in the link element. Current versions of the Mozilla and Opera
-              browsers provide this functionality. IE 6.0 and Firefox 1.5 do not offer this feature
-              but it may be available through extensions or add-ons.</p>
-               <p>See <loc xmlns:xlink="http://www.w3.org/1999/xlink"
-                       href="//www.subotnik.net/html/link">The 'link'-Element in (X)HTML</loc> for
-              more information on browser support for <el>link</el>.</p>
-            </item>
-         </ulist>
-      </ua-issue>
-   </ua-issues>
-   <description>
-      <p>The objective of this technique is to describe how the <el>link</el> element can
-            provide metadata about the position of an HTML page within a set of Web pages or can
-            assist in locating content with a set of Web pages. The value of the <att>rel</att>
-            attributes indicates what type of relation is being described, and the <att>href</att>
-            attribute provides a link to the document having that relation. Multiple
-            <el>link</el> elements can provide multiple relationships. Several values of
-              <att>rel</att> are useful: </p>
-      <ulist>
-         <item>
-            <p>Start: Refers to the first document in a collection of documents.</p>
-         </item>
-         <item>
-            <p>Next: Refers to the next document in a linear sequence of documents.</p>
-         </item>
-         <item>
-            <p>Prev: Refers to the previous document in an ordered series of documents.</p>
-         </item>
-         <item>
-            <p>Contents: Refers to a document serving as a table of contents.</p>
-         </item>
-         <item>
-            <p>Index: Refers to a document providing an index for the current document.</p>
-         </item>
-      </ulist>
-   </description>
-   <examples>
-      <eg-group>
-         <description>
-            <p>A Web page for Chapter 2 of an on-line book might contain the following links
-                within the <el>head</el> section.</p>
-         </description>
-         <code role="html401"><![CDATA[<link rel="Contents" href="Contents.html" title="Table of Contents"  />
-<link rel="Index" href="Index.html" title="Index" />
-<link rel="Prev" href="Chapter01.html" title="01. Why Volunteer?" />
-<link rel="Next" href="Chapter03.html" title="03. Who Volunteers?" />]]></code>
-      </eg-group>
-   </examples>
-   <resources>
-      <see-also>
-         <ulist>
-            <item>
-               <p>
-									         <loc xmlns:xlink="http://www.w3.org/1999/xlink"
-                       href="http://www.w3.org/TR/REC-html40/struct/links.html#edef-LINK">HTML 4.01
-                    LINK element</loc>
-								       </p>
-            </item>
-            <item>
-               <p>
-									         <loc xmlns:xlink="http://www.w3.org/1999/xlink"
-                       href="http://www.w3.org/TR/REC-html40/types.html#type-links">HTML 4.01 link
-                    types</loc>
-								       </p>
-            </item>
-            <item>
-               <p>
-									         <loc xmlns:xlink="http://www.w3.org/1999/xlink"
-                       href="http://cdn.mozdev.org/linkToolbar/">Link Toolbar extension for
-                  Firefox</loc>
-								       </p>
-            </item>
-            <item>
-               <p>
-									         <loc xmlns:xlink="http://www.w3.org/1999/xlink"
-                       href="http://www.w3.org/QA/Tips/use-links">Use &lt;link&gt;s in your
-                    document</loc> from W3C's Quality Web Tips </p>
-            </item>
-            <item>
-               <p>
-									         <loc xmlns:xlink="http://www.w3.org/1999/xlink"
-                       href="http://www.htmlhelp.com/reference/html40/head/link.html">LINK -
-                    Document Relationship</loc> from Web Design Group </p>
-            </item>
-            <item>
-               <p>
-									         <loc xmlns:xlink="http://www.w3.org/1999/xlink"
-                       href="http://www.subotnik.net/html/link">The 'link'-Element in (X)HTML</loc>
-								       </p>
-            </item>
-         </ulist>
-      </see-also>
-   </resources>
-   <related-techniques>
-      <relatedtech idref="G1"/>
-      <relatedtech idref="G63"/>
-      <relatedtech idref="G64"/>
-      <relatedtech idref="G123"/>
-   </related-techniques>
-   <tests>
-      <procedure>
-         <p>For a Web page that is within a sequence or collection of Web pages: </p>
-         <olist>
-            <item>
-               <p>Check that all <el>link</el> elements pertaining to navigation occur in the
-                    <el>head</el> section of the document.</p>
-            </item>
-            <item>
-               <p>For each <el>link</el> element in the <el>head</el> section of the
-                  document which pertains to navigation, check that it contains at least: </p>
-               <olist>
-                  <item>
-                     <p>a <att>rel</att> attribute identifying the link type</p>
-                  </item>
-                  <item>
-                     <p>a valid <att>href</att> attribute to locate the appropriate resource</p>
-                  </item>
-               </olist>
-            </item>
-         </olist>
-      </procedure>
-      <expected-results>
-         <ulist>
-            <item>
-               <p>All of the checks above are true.</p>
-            </item>
-         </ulist>
-      </expected-results>
-   </tests>
-</technique>
diff --git a/wcag20/sources/techniques/html/H80.xml b/wcag20/sources/techniques/html/H80.xml
index 18116a1bfa..36a7a067dd 100644
--- a/wcag20/sources/techniques/html/H80.xml
+++ b/wcag20/sources/techniques/html/H80.xml
@@ -62,9 +62,9 @@
       </eg-group>
       <eg-group>
          <head>Newspaper Web site</head>
-         <code role="xhtml"><![CDATA[<h2><a href="Stockmarket_05052007.htm>Stock market soars as bullishness prevails</a></h2>
-<p>this week was a stellar week for the stock market as investing in gold rose 2%. 
-<a href="Stockmarket_05052007.htm>More here</a></p>     ]]></code>
+         <code role="xhtml"><![CDATA[<h2><a href="Stockmarket_05052007.htm">Stock market soars as bullishness prevails</a></h2>
+<p>This week was a stellar week for the stock market as investing in gold rose 2%. 
+<a href="Stockmarket_05052007.htm">More here</a></p>     ]]></code>
       </eg-group>
    </examples>
    <resources/>
diff --git a/wcag20/sources/techniques/html/H97.xml b/wcag20/sources/techniques/html/H97.xml
index 9b3b39bcca..9904e3615c 100644
--- a/wcag20/sources/techniques/html/H97.xml
+++ b/wcag20/sources/techniques/html/H97.xml
@@ -8,6 +8,7 @@
    </applicability>
    <applies-to>
       <success-criterion idref="content-structure-separation-programmatic" relationship="sufficient"/>
+      <success-criterion idref="navigation-mechanisms-skip" relationship="advisory"/>
    </applies-to>
    <description>
       <p>The objective of this technique is to group navigation links using the HTML5 <el>nav</el> element. The <el>nav</el> element is one of several sectioning elements in HTML5. Use of this markup can make groups of links easier to locate and skip past by users of assistive technology such as screen readers. Using semantic structures allow custom style sheets to be used to change the presentation of groups of links while preserving their relationship. When the <el>nav</el> element is employed more than once on a page, distinguish the navigation groups by using an <att>aria-label</att> or <att>aria-labelledby</att> attribute.</p>
diff --git a/wcag20/sources/techniques/pdf.xml b/wcag20/sources/techniques/pdf.xml
index b41cd18e73..74fb5a0199 100644
--- a/wcag20/sources/techniques/pdf.xml
+++ b/wcag20/sources/techniques/pdf.xml
@@ -788,7 +788,6 @@ Web Accessibility Initiative (WAI) to support WCAG 2.0.</p>
          <p id="H56">placeholder for H56</p>
          <p id="H57">placeholder for H57</p>
          <p id="H58">placeholder for H58</p>
-         <p id="H59">placeholder for H59</p>
          <p id="H60">placeholder for H60</p>
          <p id="H62">placeholder for H62</p>
          <p id="H63">placeholder for H63</p>
diff --git a/wcag20/sources/techniques/pdf/PDF2.xml b/wcag20/sources/techniques/pdf/PDF2.xml
index 171c20f6e8..363880c529 100644
--- a/wcag20/sources/techniques/pdf/PDF2.xml
+++ b/wcag20/sources/techniques/pdf/PDF2.xml
@@ -7,7 +7,7 @@
       <p id="pdf.applicability.general">Tagged PDF documents</p>
    </applicability>
    <applies-to>
-      <success-criterion idref="navigation-mechanisms-mult-loc" relationship="sufficient"/>
+      <success-criterion idref="navigation-mechanisms-mult-loc" relationship="advisory"/>
    </applies-to>
    <ua-issues>
       <ua-issue use-id="pdf.ua-issue.general"/>
@@ -20,6 +20,7 @@
     				that provides an overview of the document rather than reading and traversing
     				through many pages. This is also a conventional means of navigating
     				a document that benefits all users. </p>
+     <p>This technique is advisory because bookmarks in a PDF support navigation within a document, but since a multi-page PDF document is not regarded as a "set of web pages" this technique is not sufficient to meet Success Criteria 2.4.5.</p>
    </description>
    <examples>
       <eg-group>
diff --git a/wcag20/sources/techniques/server-side-script.xml b/wcag20/sources/techniques/server-side-script.xml
index 129282d4a1..4435431f41 100644
--- a/wcag20/sources/techniques/server-side-script.xml
+++ b/wcag20/sources/techniques/server-side-script.xml
@@ -303,7 +303,6 @@
          <p id="H56">placeholder for H56</p>
          <p id="H57">placeholder for H57</p>
          <p id="H58">placeholder for H58</p>
-         <p id="H59">placeholder for H59</p>
          <p id="H60">placeholder for H60</p>
          <p id="H62">placeholder for H62</p>
          <p id="H63">placeholder for H63</p>
diff --git a/wcag20/sources/techniques/silverlight.xml b/wcag20/sources/techniques/silverlight.xml
index b7e7d0500f..836fa16893 100644
--- a/wcag20/sources/techniques/silverlight.xml
+++ b/wcag20/sources/techniques/silverlight.xml
@@ -1223,7 +1223,6 @@ Web Accessibility Initiative (WAI) to support WCAG 2.0.</p>
          <p id="H56">placeholder for H56</p>
          <p id="H57">placeholder for H57</p>
          <p id="H58">placeholder for H58</p>
-         <p id="H59">placeholder for H59</p>
          <p id="H60">placeholder for H60</p>
          <p id="H62">placeholder for H62</p>
          <p id="H63">placeholder for H63</p>
diff --git a/wcag20/sources/techniques/silverlight/SL19.xml b/wcag20/sources/techniques/silverlight/SL19.xml
index 69bf7e9fc2..d3e820c437 100644
--- a/wcag20/sources/techniques/silverlight/SL19.xml
+++ b/wcag20/sources/techniques/silverlight/SL19.xml
@@ -82,9 +82,9 @@
    Height="400" Width="600"
    Source="/office.png"
    AutomationProperties.Name="Diagram of standard office layout"
-   AutomationProperties.HelpText=”The standard office layout
+   AutomationProperties.HelpText="The standard office layout
 includes one corner desk unit in the corner farthest from the
-door, and one file cabinet against the same wall as the door.”/>
+door, and one file cabinet against the same wall as the door."/>
 ]]></codeblock>
          </description>
       </eg-group>
diff --git a/wcag20/sources/techniques/smil.xml b/wcag20/sources/techniques/smil.xml
index 28a0d37aa1..a2e921b6ca 100644
--- a/wcag20/sources/techniques/smil.xml
+++ b/wcag20/sources/techniques/smil.xml
@@ -306,7 +306,6 @@
          <p id="H56">placeholder for H56</p>
          <p id="H57">placeholder for H57</p>
          <p id="H58">placeholder for H58</p>
-         <p id="H59">placeholder for H59</p>
          <p id="H60">placeholder for H60</p>
          <p id="H62">placeholder for H62</p>
          <p id="H63">placeholder for H63</p>
diff --git a/wcag20/sources/techniques/text.xml b/wcag20/sources/techniques/text.xml
index 80f9c6b3f5..dee089452a 100644
--- a/wcag20/sources/techniques/text.xml
+++ b/wcag20/sources/techniques/text.xml
@@ -301,7 +301,6 @@
          <p id="H56">placeholder for H56</p>
          <p id="H57">placeholder for H57</p>
          <p id="H58">placeholder for H58</p>
-         <p id="H59">placeholder for H59</p>
          <p id="H60">placeholder for H60</p>
          <p id="H62">placeholder for H62</p>
          <p id="H63">placeholder for H63</p>
diff --git a/wcag20/sources/understanding/keyboard-operation-keyboard-operable.xml b/wcag20/sources/understanding/keyboard-operation-keyboard-operable.xml
index 167f427fca..07b29eff3e 100644
--- a/wcag20/sources/understanding/keyboard-operation-keyboard-operable.xml
+++ b/wcag20/sources/understanding/keyboard-operation-keyboard-operable.xml
@@ -204,7 +204,7 @@
                <p>Using the onactivate event (future link) (Scripting)</p>
             </item>
             <item>
-               <p>Avoiding use of common user-agent keyboard commands for other purposes (future link) </p>
+               <p>Avoiding use of common user agent keyboard commands for other purposes (future link) </p>
             </item>
          </ulist>
       </div4>
diff --git a/wcag20/sources/understanding/navigation-mechanisms-location.xml b/wcag20/sources/understanding/navigation-mechanisms-location.xml
index 0297b3d110..8529b8c518 100644
--- a/wcag20/sources/understanding/navigation-mechanisms-location.xml
+++ b/wcag20/sources/understanding/navigation-mechanisms-location.xml
@@ -68,14 +68,8 @@
             <item role="html">
                <p> 
                   <loc href="G127"
-                       linktype="general">Identifying a Web page's relationship to a larger collection of Web pages</loc> using one of the following techniques:</p>
-               <ulist>
-                  <item>
-                     <p>
-											             <loc href="H59" linktype="html">Using the link element and navigation tools</loc>
-										           </p>
-                  </item>
-               </ulist>
+                       linktype="general">Identifying a Web page's relationship to a larger collection of Web pages</loc>
+                       </p>
             </item>
          </olist>
       </div4>
diff --git a/wcag20/sources/understanding/navigation-mechanisms-mult-loc.xml b/wcag20/sources/understanding/navigation-mechanisms-mult-loc.xml
index a7b748e13d..2b6e8f9f96 100644
--- a/wcag20/sources/understanding/navigation-mechanisms-mult-loc.xml
+++ b/wcag20/sources/understanding/navigation-mechanisms-mult-loc.xml
@@ -14,7 +14,7 @@
                <p>Providing an opportunity to navigate sites in more than one manner can help people find information faster. Users with visual impairments may find it easier to navigate to the correct part of the site by using a search, rather than scrolling through a large navigation bar using a screen magnifier or screen reader. A person with cognitive disabilities may prefer a table of contents or site map that provides an overview of the site rather than reading and traversing through several Web pages. Some users may prefer to explore the site in a sequential manner, moving from Web page to Web page in order to best understand the concepts and layout.</p>
             </item>
             <item>
-               <p>Individuals with cognitive limitations may find it easier to use search features than to use a hierarchical navigation scheme that be difficult to understand.</p>
+               <p>Individuals with cognitive limitations may find it easier to use search features than to use a hierarchical navigation scheme that may be difficult to understand.</p>
             </item>
          </ulist>
       </div4>
@@ -107,11 +107,6 @@
       <div4 role="tech-optional">
          <head>Additional Techniques (Advisory) for 2.4.2</head>
          <ulist>
-            <item>
-               <p>
-									         <loc href="H59" linktype="html">Using the link element and navigation tools</loc>
-								       </p>
-            </item>
             <item>
                <p>
         Including information about presentation modes in tables of contents and concept maps (future link)
diff --git a/wcag20/sources/understanding/navigation-mechanisms-skip.xml b/wcag20/sources/understanding/navigation-mechanisms-skip.xml
index e823e643e5..6e053d0ec7 100644
--- a/wcag20/sources/understanding/navigation-mechanisms-skip.xml
+++ b/wcag20/sources/understanding/navigation-mechanisms-skip.xml
@@ -165,6 +165,11 @@
 									         <loc href="C6" linktype="css">Positioning content based on structural markup</loc>
 								       </p>
             </item>
+                     <item>      
+                  <p>      
+                  <loc href="H97" linktype="html">Grouping related links using the nav element</loc>      
+                  </p>      
+                  </item>
          </ulist>
       </div4>
       <div4 role="failures">
diff --git a/wcag20/sources/understanding/seizure-does-not-violate.xml b/wcag20/sources/understanding/seizure-does-not-violate.xml
index 3d013a3c44..e60f40b7b4 100644
--- a/wcag20/sources/understanding/seizure-does-not-violate.xml
+++ b/wcag20/sources/understanding/seizure-does-not-violate.xml
@@ -60,12 +60,12 @@
          </item>
          <item>
             <p>
-								       <loc href="http://trace.wisc.edu/peat/">Trace Center Photosensitive Epilepsy Analysis Tool (PEAT)</loc>
+								       <loc href="https://trace.umd.edu/peat/">Trace Center Photosensitive Epilepsy Analysis Tool (PEAT)</loc>
 							     </p>
          </item>
          <item>
             <p>
-								       <loc href="http://trace.wisc.edu/peat/photosensitive.php">Information about Photosensitive Seizure Disorders</loc>
+								       <loc href="https://trace.umd.edu/information-about-photosensitive-seizure-disorders/">Information about Photosensitive Seizure Disorders</loc>
 							     </p>
          </item>
          <item>
diff --git a/wcag20/sources/understanding/seizure-three-times.xml b/wcag20/sources/understanding/seizure-three-times.xml
index 8fc034fb25..165a73e7a8 100644
--- a/wcag20/sources/understanding/seizure-three-times.xml
+++ b/wcag20/sources/understanding/seizure-three-times.xml
@@ -41,12 +41,12 @@
          </item>
          <item>
             <p>
-								       <loc href="http://trace.wisc.edu/peat/">Trace Center Photosensitive Epilepsy Analysis Tool (PEAT)</loc>
+								       <loc href="https://trace.umd.edu/peat/">Trace Center Photosensitive Epilepsy Analysis Tool (PEAT)</loc>
 							     </p>
          </item>
          <item>
             <p>
-								       <loc href="http://trace.wisc.edu/peat/photosensitive.php">Information about Photosensitive Seizure Disorders</loc>
+								       <loc href="https://trace.umd.edu/information-about-photosensitive-seizure-disorders/">Information about Photosensitive Seizure Disorders</loc>
 							     </p>
          </item>
          <item>
diff --git a/wcag20/sources/understanding/visual-audio-contrast-contrast.xml b/wcag20/sources/understanding/visual-audio-contrast-contrast.xml
index 03e2fe68fa..fef815f35b 100644
--- a/wcag20/sources/understanding/visual-audio-contrast-contrast.xml
+++ b/wcag20/sources/understanding/visual-audio-contrast-contrast.xml
@@ -12,7 +12,8 @@
       <note>
          <p>When evaluating this success criterion, the font size in points should be obtained from the user agent or calculated on font metrics in the way that user agents do. Point sizes are based on the CSS pt size as defined in <loc ref="https://www.w3.org/TR/css3-values/#absolute-lengths">CSS3 Values</loc>. The ratio between sizes in points and CSS pixels is 1pt = 1.333px, therefore 14pt and 18pt are equivalent to approximately 18.5px and 24px.</p>
          <p>Because different image editing applications default to different pixel densities (<abbr expansion="for example">e.g.</abbr> 72 PPI or 96 PPI), specifying point sizes for fonts from within an image editing application can be unreliable when it comes to presenting text at a specific size. When creating images of large-scale text, authors should ensure that the text in the resulting image is roughly equivalent to 1.2 and 1.5 em or to 120% or 150% of the default size for body text. For example, for a 72 PPI image, an author would need to use approximately 19 pt and 24 pt font sizes in order to successfully present images of large-scale text to a user. </p>
-      </note>
+        <p>The 4.5:1 and 3:1 contrast ratios referenced in this Success Criteria are intended to be treated as threshold values. When comparing the computed contrast ratio to the Success Criteria ratio the computed values should not be rounded (eg. 4.499:1 would not meet the 4.5:1 threshold).</p>
+     </note>
       <p>The previously-mentioned contrast requirements for text also apply to images of text (text that has been rendered into pixels and then stored in an image format) as stated in Success Criterion 1.4.3.
           </p>
       <p>This requirement applies to situations in which images of text were intended to be understood as text. Incidental text, such as in photographs that happen to include a street sign, are not included. Nor is text that for some reason is designed to be invisible to all viewers. Stylized text, such as in corporate logos, should be treated in terms of its function on the page, which may or may not warrant including the content in the text alternative. Corporate visual guidelines beyond logo and logotype are not included in the exception.
@@ -105,7 +106,7 @@
          </item>
          <item>
             <p>
-								       <loc href="http://trace.wisc.edu/contrast-ratio-examples/">Color Contrast Samples</loc>
+								       <loc href="https://web.archive.org/web/20160814160227/http://trace.wisc.edu/contrast-ratio-examples">Color Contrast Samples</loc>
 							     </p>
          </item>
          <item>
diff --git a/wcag20/sources/understanding/visual-audio-contrast-noaudio.xml b/wcag20/sources/understanding/visual-audio-contrast-noaudio.xml
index 74d4a3a7d4..ae1199bbb4 100644
--- a/wcag20/sources/understanding/visual-audio-contrast-noaudio.xml
+++ b/wcag20/sources/understanding/visual-audio-contrast-noaudio.xml
@@ -19,19 +19,6 @@
          </ulist>
       </div4>
    </div3>
-   <div3 role="examples">
-      <head>Examples of this Success Criterion</head>
-   </div3>
-   <div3 role="resources">
-      <head/>
-      <ulist>
-         <item>
-            <p>
-								       <loc href="http://trace.wisc.edu/docs/2004-About-dB/index.htm">About Decibels</loc>
-							     </p>
-         </item>
-      </ulist>
-   </div3>
    <div3 role="techniques">
       <head>Techniques for Addressing Success Criterion 1.4.4</head>
       <div4 role="sufficient">
diff --git a/wcag20/sources/understanding/visual-audio-contrast-scale.xml b/wcag20/sources/understanding/visual-audio-contrast-scale.xml
index c64dda8d02..ea0ad36814 100644
--- a/wcag20/sources/understanding/visual-audio-contrast-scale.xml
+++ b/wcag20/sources/understanding/visual-audio-contrast-scale.xml
@@ -8,7 +8,7 @@
       <p>The intent of this Success Criterion is to ensure that visually rendered text, including text-based controls (text characters that have been displayed so that they can be seen [vs. text characters that are still in data form such as ASCII]) can be scaled successfully so that it can be read directly by people with mild visual disabilities, without requiring the use of assistive technology such as a screen magnifier. Users may benefit from scaling all content on the Web page, but text is most critical. </p>
       <p>The scaling of content is primarily a user agent responsibility. User agents that satisfy <loc href="http://www.w3.org/TR/WAI-USERAGENT/guidelines.html#tech-configure-text-scale">UAAG 1.0 Checkpoint 4.1</loc> allow users to configure text scale. The author's responsibility is to create Web content that does not prevent the user agent from scaling the content effectively. Authors may satisfy this Success Criterion by verifying that content does not interfere with user agent support for resizing text, including text-based controls, or by providing direct support for resizing text or changing the layout. An example of direct support might be via server-side script that can be used to assign different style sheets.</p>
       <p>The author cannot rely on the user agent to satisfy this Success Criterion for HTML content if users do not have access to a user agent with zoom support. For example, if they work in an environment that requires them to use IE 6.</p>
-      <p>If the author is using a technology whose user agents do not provide zoom support, the author is responsible to provide this type of functionality directly or to provide content that works with the type of functionality provided by the user agent. If the user agent doesn't provide zoom functionality but does let the the user change the text size, the author is responsible for ensuring that the content remains usable when the text is resized. </p>
+      <p>If the author is using a technology whose user agents do not provide zoom support, the author is responsible to provide this type of functionality directly or to provide content that works with the type of functionality provided by the user agent. If the user agent doesn't provide zoom functionality but does let the user change the text size, the author is responsible for ensuring that the content remains usable when the text is resized. </p>
       <p>Some user interface components that function as a label and require activation by the user to access content are not wide enough to accommodate the label's content. For example, in Web mail applications the subject column may not be wide enough to accommodate every possible subject header, but activating the subject header takes the user to the full message with the full subject header. In Web-based spreadsheets, cell content that is too long to be displayed in a column can be truncated, and the full content of the cell is available to the user when the cell receives focus. The content of a user interface component may also become too wide in user interfaces where the user can resize the column width. In this type of user interface component, line wrapping is not required; truncation is acceptable if the component's full content is available on focus or after user activation and an indication that this information can be accessed, is provided to the user in some way besides the fact that it is truncated.</p>
       <p>Content satisfies the Success Criterion if it can be scaled up to 200%, that is, up to twice the width and height. Authors may support scaling beyond that limit, however, as scaling becomes more extreme, adaptive layouts may introduce usability problems. For example, words may be too wide to fit into the horizontal space available to them, causing them to be truncated; layout constraints may cause text to overlap with other content when it is scaled larger; or only one word of a sentence may fit on each line, causing the sentence to be displayed as a vertical column of text that is difficult to read. </p>
       <p>The working group feels that 200% is a reasonable accommodation that can support a wide range of designs and layouts, and complements older screen magnifiers that provide a minimum magnification of 200%. Above 200%, zoom (which resizes text, images, and layout regions and creates a larger canvas that may require both horizontal and vertical scrolling) may be more effective than text resizing. Assistive technology dedicated to zoom support would usually be used in such a situation and may provide better accessibility than attempts by the author to support the user directly.</p>
@@ -173,7 +173,7 @@ Ensuring that text containers resize when the text resizes <emph role="bold">AND
                <p>Using page-percent for container sizes (future link)</p>
             </item>
             <item>
-               <p>Avoiding scaling font sizes smaller than the user-agent default (future link)</p>
+               <p>Avoiding scaling font sizes smaller than the user agent default (future link)</p>
                <note>
                   <p>The author won't actually know the font size, but should avoid percentage scaling that results in less than 100%</p>
                </note>
diff --git a/wcag20/sources/understanding/visual-audio-contrast-visual-presentation.xml b/wcag20/sources/understanding/visual-audio-contrast-visual-presentation.xml
index 11e0e78c7a..520e7aeb20 100644
--- a/wcag20/sources/understanding/visual-audio-contrast-visual-presentation.xml
+++ b/wcag20/sources/understanding/visual-audio-contrast-visual-presentation.xml
@@ -116,11 +116,11 @@
          </item>
          <item>
             <p>
-               <phrase xml:lang="jp">川嶋英嗣・小田浩一</phrase>(2003).<phrase xml:lang="jp">読書におけるスクロール方向とウィンドウ幅の影響　日本心理学会第</phrase>67<phrase xml:lang="jp">回大会</phrase>, 502.</p>
+               <phrase xml:lang="ja">川嶋英嗣・小田浩一</phrase>(2003).<phrase xml:lang="ja">読書におけるスクロール方向とウィンドウ幅の影響　日本心理学会第</phrase>67<phrase xml:lang="jp">回大会</phrase>, 502.</p>
          </item>
          <item>
             <p>
-               <phrase xml:lang="jp">小田浩一・今橋真理子</phrase>(1995). <phrase xml:lang="jp">文字認知の閾値と読みの閾値</phrase>.  VISION, 7,
+               <phrase xml:lang="ja">小田浩一・今橋真理子</phrase>(1995). <phrase xml:lang="ja">文字認知の閾値と読みの閾値</phrase>.  VISION, 7,
                 165-168.</p>
          </item>
          <item>
@@ -128,8 +128,8 @@
          </item>
          <item>
             <p>
-               <phrase xml:lang="jp">山中今日子・小田浩一</phrase> (2007). <phrase xml:lang="jp">漢字の画数と書体のウェイトが視認性に及ぼす
-                影響. 視覚学会</phrase>2007<phrase xml:lang="jp">年夏季大会ポスター</phrase> 1p1 Vision, P.167.</p>
+               <phrase xml:lang="ja">山中今日子・小田浩一</phrase> (2007). <phrase xml:lang="ja">漢字の画数と書体のウェイトが視認性に及ぼす
+                影響. 視覚学会</phrase>2007<phrase xml:lang="ja">年夏季大会ポスター</phrase> 1p1 Vision, P.167.</p>
          </item>
          <item>
             <p>
@@ -325,7 +325,7 @@
                <p> Avoiding the use of text in raster images  (future link)</p>
             </item>
             <item>
-               <p> Avoiding scaling font sizes smaller than the user-agent default  (future link)</p>
+               <p> Avoiding scaling font sizes smaller than the user agent default  (future link)</p>
             </item>
             <item>
                <p> Providing sufficient inter-column spacing (future link)</p>
diff --git a/wcag20/sources/understanding/visual-audio-contrast7.xml b/wcag20/sources/understanding/visual-audio-contrast7.xml
index afea7df703..a52e9cac56 100644
--- a/wcag20/sources/understanding/visual-audio-contrast7.xml
+++ b/wcag20/sources/understanding/visual-audio-contrast7.xml
@@ -14,7 +14,8 @@
          <p>When fonts have anti-aliasing applied to make them look smoother, they can lose darkness or lightness.  Thus, the actual contrast can be reduced. Thicker stem widths will reduce this effect (thin fonts could have the full stem lightened rather than just the ends). Using larger fonts and testing for legibility in user agents with font smoothing turned on is recommended.
             </p>
          <p>Because different image editing applications default to different pixel densities (ex. 72 PPI or 96 PPI), specifying point sizes for fonts from within an image editing application can be unreliable when it comes to presenting text at a specific size. When creating images of large-scale text, authors should ensure that the text in the resulting image is roughly equivalent to 1.2 and 1.5 em or to 120% or 150% of the default size for body text as rendered by the browser.</p>
-      </note>
+        <p>The 7:1 and 4.5:1 contrast ratios referenced in this Success Criteria are intended to be treated as threshold values. When comparing the computed contrast ratio to the Success Criteria ratio the computed values should not be rounded (eg. 4.499:1 would not meet the 4.5:1 threshold).</p>      
+     </note>
       <p>The previously-mentioned contrast requirements for text also apply to
 images of text (text that has been rendered into pixels and then stored in an image format) as stated in Success Criterion 1.4.5
             
@@ -93,7 +94,7 @@ images of text (text that has been rendered into pixels and then stored in an im
          </item>
          <item>
             <p>
-								       <loc href="http://trace.wisc.edu/contrast-ratio-examples/">Color Contrast Samples</loc>
+								       <loc href="https://web.archive.org/web/20160814160227/http://trace.wisc.edu/contrast-ratio-examples">Color Contrast Samples</loc>
 							     </p>
          </item>
          <item>
diff --git a/wcag20/sources/wcag2-src.REC.xml b/wcag20/sources/wcag2-src.REC.xml
index 102bed7b1d..494749c4d6 100644
--- a/wcag20/sources/wcag2-src.REC.xml
+++ b/wcag20/sources/wcag2-src.REC.xml
@@ -428,7 +428,7 @@ and operating content do not rely solely on sensory characteristics of component
               </ulist>
             </div5>
             <div5 role="sc" id="visual-audio-contrast-scale">
-              <head>Resize text</head>
+              <head>Resize Text</head>
               <p role="v">
                   Except for <termref def="captionsdef">captions</termref> and <termref def="images-of-textdef">images of text</termref>, <termref def="textdef">text</termref> can be resized without <termref def="atdef">assistive technology</termref> up to 200 percent without loss of content or functionality. 
               </p>
@@ -1667,7 +1667,7 @@ and operating content do not rely solely on sensory characteristics of component
             <note>
               <p>Fonts with extraordinarily thin strokes or unusual features and characteristics that reduce the familiarity of their letter forms are harder to read, especially at lower contrast levels.</p>
               <p>Font size is the size when the content is delivered. It does not include resizing that may be done by a user.</p>
-                <p>The actual size of the character that a user sees is dependent both on the author-defined size and the user's display or user-agent settings. For many mainstream body text fonts, 14 and 18 point is roughly equivalent to 1.2 and 1.5 em or to 120% or 150% of the default size for body text (assuming that the body font is 100%), but authors would need to check this for the particular fonts in use. When fonts are defined in relative units, the actual point size is calculated by the user agent for display. The point size should be obtained from the user agent, or calculated based on font metrics as the user agent does, when evaluating this success criterion. Users who have low vision would be responsible for choosing appropriate settings.
+                <p>The actual size of the character that a user sees is dependent both on the author-defined size and the user's display or user agent settings. For many mainstream body text fonts, 14 and 18 point is roughly equivalent to 1.2 and 1.5 em or to 120% or 150% of the default size for body text (assuming that the body font is 100%), but authors would need to check this for the particular fonts in use. When fonts are defined in relative units, the actual point size is calculated by the user agent for display. The point size should be obtained from the user agent, or calculated based on font metrics as the user agent does, when evaluating this success criterion. Users who have low vision would be responsible for choosing appropriate settings.
               </p>
               <p>When using text without specifying the font size, the smallest font size used on major browsers for unspecified text would be a reasonable size to assume for the font. If a level 1 heading is rendered in 14pt bold or higher on major browsers, then it would be reasonable to assume it is large text. Relative scaling can be calculated from the default sizes in a similar fashion. </p>
                 <p>The 18 and 14 point sizes for roman texts are taken from the minimum size for large print (14pt) and the larger standard font size (18pt).  For other fonts such as CJK languages, the "equivalent" sizes would be the minimum large print size used for those languages and the next larger standard large print size.</p>
diff --git a/wcag20/sources/wcag2-src.xml b/wcag20/sources/wcag2-src.xml
index 11ce2e2b93..7336a80db5 100644
--- a/wcag20/sources/wcag2-src.xml
+++ b/wcag20/sources/wcag2-src.xml
@@ -216,13 +216,13 @@
           Each of these is introduced briefly below and defined more fully in the glossary.
         </p>
         <glist>
-          <gitem>
+          <gitem id="web-page_def">
             <label>Web Page</label>
             <def>
               <p>It is important to note that, in this standard, the term "<termref def="webpagedef">Web page</termref>" includes much more than static HTML pages. It also includes the increasingly dynamic Web pages that are emerging on the Web, including "pages" that can present entire virtual interactive communities. For example, the term "Web page" includes an immersive, interactive movie-like experience found at a single URI. For more information, see <loc href="conformance" locn-note="uc-web-page-head" linktype="understanding">Understanding "Web Page"</loc>.</p>
             </def>
           </gitem>
-          <gitem>
+          <gitem id="programmatically-determined_def">
             <label>Programmatically Determined</label>
             <def>
               <p>Several success criteria require that content (or certain aspects of content) can be "<termref def="programmaticallydetermineddef">programmatically determined</termref>." This means that the content is delivered in such a way that <termref def="useragentdef">user agents</termref>, including <termref def="atdef">assistive technologies</termref>, can extract and present this information to users in different modalities. For more information, see <loc href="conformance" locn-note="uc-programmatically-determined-head" linktype="understanding">Understanding Programmatically Determined</loc>.
@@ -230,7 +230,7 @@
               </p>
             </def>
           </gitem>
-          <gitem>
+          <gitem id="accessibility-supported_def">
             <label>Accessibility Supported</label>
             <def>
                 <p>Using a technology in a way that is accessibility supported means that it works with assistive technologies (AT) and the accessibility features of operating systems, browsers, and other user agents. Technology features can only be <termref def="reliedupondef">relied upon</termref> to conform to WCAG 2.0 success criteria if they are used in a way that is "<termref def="accessibility-supporteddef">accessibility supported</termref>". Technology features can be used in ways that are not accessibility supported (do not work with assistive technologies, etc.) as long as they are not relied upon to conform to any success criterion (i.e., the same information or functionality is also available another way that is supported). </p>
@@ -429,7 +429,7 @@ and operating content do not rely solely on sensory characteristics of component
               </ulist>
             </div5>
             <div5 role="sc" id="visual-audio-contrast-scale">
-              <head>Resize text</head>
+              <head>Resize Text</head>
               <p role="v">
                   Except for <termref def="captionsdef">captions</termref> and <termref def="images-of-textdef">images of text</termref>, <termref def="textdef">text</termref> can be resized without <termref def="atdef">assistive technology</termref> up to 200 percent without loss of content or functionality. 
               </p>
@@ -1668,7 +1668,7 @@ and operating content do not rely solely on sensory characteristics of component
             <note>
               <p>Fonts with extraordinarily thin strokes or unusual features and characteristics that reduce the familiarity of their letter forms are harder to read, especially at lower contrast levels.</p>
               <p>Font size is the size when the content is delivered. It does not include resizing that may be done by a user.</p>
-                <p>The actual size of the character that a user sees is dependent both on the author-defined size and the user's display or user-agent settings. For many mainstream body text fonts, 14 and 18 point is roughly equivalent to 1.2 and 1.5 em or to 120% or 150% of the default size for body text (assuming that the body font is 100%), but authors would need to check this for the particular fonts in use. When fonts are defined in relative units, the actual point size is calculated by the user agent for display. The point size should be obtained from the user agent, or calculated based on font metrics as the user agent does, when evaluating this success criterion. Users who have low vision would be responsible for choosing appropriate settings.
+                <p>The actual size of the character that a user sees is dependent both on the author-defined size and the user's display or user agent settings. For many mainstream body text fonts, 14 and 18 point is roughly equivalent to 1.2 and 1.5 em or to 120% or 150% of the default size for body text (assuming that the body font is 100%), but authors would need to check this for the particular fonts in use. When fonts are defined in relative units, the actual point size is calculated by the user agent for display. The point size should be obtained from the user agent, or calculated based on font metrics as the user agent does, when evaluating this success criterion. Users who have low vision would be responsible for choosing appropriate settings.
               </p>
               <p>When using text without specifying the font size, the smallest font size used on major browsers for unspecified text would be a reasonable size to assume for the font. If a level 1 heading is rendered in 14pt bold or higher on major browsers, then it would be reasonable to assume it is large text. Relative scaling can be calculated from the default sizes in a similar fashion. </p>
                 <p>The 18 and 14 point sizes for roman texts are taken from the minimum size for large print (14pt) and the larger standard font size (18pt).  For other fonts such as CJK languages, the "equivalent" sizes would be the minimum large print size used for those languages and the next larger standard large print size.</p>
diff --git a/wcag20/sources/wcag20-merged-techs.xml b/wcag20/sources/wcag20-merged-techs.xml
index 716cca04a1..442f46d06b 100644
--- a/wcag20/sources/wcag20-merged-techs.xml
+++ b/wcag20/sources/wcag20-merged-techs.xml
@@ -1,268 +1,268 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!DOCTYPE spec SYSTEM "xmlspec.dtd">
-<!-- edited with XMLSpy v2006 rel. 3 sp1 (http://www.altova.com) by Ben Caldwell (W3C) -->
-<?xml-stylesheet type="text/xsl" href="techs-merge.xslt"?>
-<spec status="final" w3c-doctype="wgnote" xmlns:xi="http://www.w3.org/2001/XInclude">
-	<header>
-		<title>Techniques for <abbr expansion="Web Content Accessibility Guidelines">WCAG</abbr> 2.0</title>
-		<subtitle>Techniques and Failures for Web Content Accessibility Guidelines 2.0</subtitle>
-		<w3c-designation>WCAG20-TECHS</w3c-designation>
-		<w3c-doctype>W3C Working Group Note</w3c-doctype>
-		<pubdate>
-			<day>13</day>
-			<month>September</month>
-			<year>2016</year>
-		</pubdate>
-		<publoc>
-			<loc href="http://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20160913/">http://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20160913/</loc>
-			<!--<loc href="http://www.w3.org/WAI/GL/2016/WD-WCAG20-TECHS-20160719/">http://www.w3.org/WAI/GL/2016/WD-WCAG20-TECHS-20160719/</loc>-->
-		</publoc>
-		<altlocs>
-			<loc href="complete.html">Single file version</loc>
-			<loc href="complete-diff.html">Single file diff-marked version showing revisions since 17 March 2015</loc>
-			<loc href="/WAI/WCAG20/versions/techniques/">Alternate Versions of Techniques for WCAG 2.0</loc>
-		</altlocs>
-		<latestloc>
-			<loc href="http://www.w3.org/TR/WCAG20-TECHS/">http://www.w3.org/TR/WCAG20-TECHS/</loc>
-			<!--<loc href="http://www.w3.org/WAI/GL/WCAG20-TECHS/">http://www.w3.org/WAI/GL/WCAG20-TECHS/</loc>-->
-		</latestloc>
-		<prevlocs>
-			<loc href="http://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20160317/">http://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20160317/</loc>
-			<!--<loc href="https://www.w3.org/WAI/GL/2016/WD-WCAG20-TECHS-20160105/">https://www.w3.org/WAI/GL/2016/WD-WCAG20-TECHS-20160105/</loc>-->
-		</prevlocs>
-		<authlist>
-			<author role="current">
-				<name>Michael Cooper</name>
-				<affiliation>W3C</affiliation>
-			</author>
-			<author role="current">
-				<name>Andrew Kirkpatrick</name>
-				<affiliation>Adobe Systems Inc.</affiliation>
-			</author>
-			<author role="current">
-				<name>Joshue O Connor</name>
-				<affiliation>InterAccess</affiliation>
-			</author>
-			<author role="past">
-				<name>Loretta Guarino Reid</name>
-				<affiliation>(until May 2013 while at Google, Inc.)</affiliation>
-			</author>
-			<author role="past">
-				<name>Gregg Vanderheiden</name>
-				<affiliation>(until May 2013 while at Trace R&amp;D Center, University of
-					Wisconsin-Madison)</affiliation>
-			</author>
-			<author role="past">
-				<name>Ben Caldwell</name>
-				<affiliation>(until September 2010 while at Trace R&amp;D Center, University of
-					Wisconsin-Madison)</affiliation>
-			</author>
-			<author role="past">
-				<name>Wendy Chisholm</name>
-				<affiliation>(until July 2006 while at W3C)</affiliation>
-			</author>
-			<author role="past">
-				<name>John Slatin</name>
-				<affiliation>(until June 2006 while at Accessibility Institute, University of Texas at
-					Austin)</affiliation>
-			</author>
-		</authlist>
-		<status>
-			<p><emph>This section describes the status of this document at the time of its publication. Other documents may supersede this document. A list of current W3C publications and the latest revision of this technical report can be found in the <loc href="http://www.w3.org/TR/">W3C technical reports index</loc> at <loc href="http://www.w3.org/TR/">http://www.w3.org/TR/</loc>.</emph></p>
-			<p>This is a <phrase role="final">Working Group Note</phrase><phrase role="ext-review">Public Editors' Draft of</phrase><phrase role="int-review">Editors' Draft of</phrase> "Techniques for WCAG 2.0". These techniques are produced by the <loc href="http://www.w3.org/WAI/GL/">Web Content Accessibility Guidelines Working Group</loc> to provide guidance about how to conform to the <loc href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/">Web Content Accessibility Guidelines (WCAG) 2.0 Recommendation</loc>. Techniques are referenced from <loc href="" linktype="understanding">Understanding WCAG 2.0</loc> and <loc href="http://www.w3.org/WAI/WCAG20/quickref/">How to Meet WCAG 2.0</loc>. Please note that the contents of this document are informative (they provide guidance), and not normative (they do not set requirements for conforming to WCAG 2.0).</p>
-			<p>WCAG 2.0 Techniques was previously published on 11 December 2008 as a Working Group Note and updated 14 October 2010, 3 January 2012, 5 September 2013, 3 March 2014, 8 April 2014, 16 September 2014, 26 February 2015, and 17 March 2016. This new version updates the support information provided for WCAG 2.0. Note that WCAG 2.0 itself remains unchanged, only the informative support materials have been updated. Primary changes include clarifications based on input from the public and translators. Changes in this version include clarifications in techniques <loc href="G136" linktype="general">G136</loc>, <loc href="ARIA2" linktype="aria">ARIA2</loc>, and <loc href="F68" linktype="failure">F68</loc>.</p>
-			<p><phrase role="ext-review">The purpose of this draft is to collect public feedback on proposed changes since the <loc href="http://www.w3.org/TR/2015/NOTE-WCAG20-TECHS-20150226/">WCAG 2.0 Techniques Working Group Note of 26 February 2015</loc>. The Working Group intends to publish an updated Note once feedback from this review has been incorporated. <emph role="bold">The existing Techniques document remains in place as a W3C Note</emph> while this separate draft update is under review and the WCAG Working Group addresses comments.</phrase> The changes are highlighted in the <loc href="complete-diff">diff-marked version</loc>.</p>
-			<p><phrase role="ext-review">Comments on this draft are due <emph role="bold">on or before 29 January 2016</emph>.</phrase> The Working Group requests that any comments be made using the options documented in <loc href="http://www.w3.org/WAI/WCAG20/comments/">Instructions for Commenting on WCAG 2.0 Documents</loc>. If this is not possible, comments can also be sent to <loc href="mailto:public-comments-wcag20@w3.org">public-comments-wcag20@w3.org</loc>. The <loc href="http://lists.w3.org/Archives/Public/public-comments-wcag20/">archives for the public comments list</loc> are publicly available. <phrase role="ext-review">Because this is a public review of changes to the Working Group Notes, only comments on changes made since the last Notes will be processed during this review; other comments will be saved and treated as comments on the updated Notes once published. </phrase><phrase role="final">Comments received on this document may be addressed in future versions of this document, or in another manner. </phrase><!--The Working Group does not plan to make formal responses to comments. -->Archives of the <loc href="http://lists.w3.org/Archives/Public/w3c-wai-gl/">WCAG WG mailing list discussions</loc> are also publicly available, and future work undertaken by the Working Group may address comments received on this document.</p>
-			<p>Materials from the public to assist in documenting techniques are particularly welcomed. Please use the <loc href="http://www.w3.org/WAI/GL/WCAG20/TECHS-SUBMIT/">Techniques Submission Form</loc> to submit techniques. </p>
-			<p>This document has been produced as part of the W3C <loc href="http://www.w3.org/WAI/">Web Accessibility Initiative</loc> (WAI). The goals of the WCAG Working Group are discussed in the <loc href="http://www.w3.org/WAI/GL/charter">WCAG Working Group charter</loc>. The WCAG Working Group is part of the <loc href="http://www.w3.org/WAI/Technical/Activity">WAI Technical Activity</loc>.</p>
-			<p> Publication as a <phrase role="final">Working Group Note</phrase><phrase role="ext-review">Public Editors' Draft</phrase><phrase role="int-review">Editors' Draft</phrase> does not imply endorsement by the W3C Membership. This is a draft document and may be updated, replaced or obsoleted by other documents at any time. It is inappropriate to cite this document as other than work in progress. </p>
-			<p>This document was produced by a group operating under the <loc href="http://www.w3.org/Consortium/Patent-Policy-20040205/">5 February 2004 W3C Patent Policy</loc>. W3C maintains a <loc role="disclosures" href="http://www.w3.org/2004/01/pp-impl/35422/status">public list of any patent disclosures</loc> made in connection with the deliverables of the group; that page also includes instructions for disclosing a patent. An individual who has actual knowledge of a patent which the individual believes contains <loc href="http://www.w3.org/Consortium/Patent-Policy-20040205/#def-essential">Essential Claim(s)</loc> must disclose the information in accordance with <loc href="http://www.w3.org/Consortium/Patent-Policy-20040205/#sec-Disclosure">section 6 of the W3C Patent Policy</loc>. </p>
-			<p>This document is governed by the <loc id="w3c_process_revision" href="http://www.w3.org/2015/Process-20150901/">1 September 2015 W3C Process Document</loc>. </p>
-		</status>
-		<abstract>
-			<p id="abstract-general-intro">This <emph>Techniques for WCAG 2.0</emph> document provides guidance for web content authors and evaluators on meeting <loc href="http://www.w3.org/TR/WCAG20/">Web Content Accessibility Guidelines (WCAG) 2.0</loc> <bibref ref="WCAG20"/> success criteria. It is part of a series of documents published by the W3C Web Accessibility Initiative (WAI) to support WCAG 2.0. For an introduction to WCAG, supporting technical documents, and educational material, see <loc href="http://www.w3.org/WAI/intro/wcag">Web Content Accessibility Guidelines (WCAG) Overview</loc>.</p>
-			<p><phrase id="abstract-techniques-informative">Techniques are informative—that means they are not required. The basis for determining conformance to WCAG 2.0 is the success criteria from the <loc href="http://www.w3.org/TR/WCAG20/">WCAG 2.0 standard</loc>—not the techniques.</phrase> <phrase id="abstract-techniques-understanding"><emph role="bold">For important information about techniques, please see the <loc href="understanding-techniques" linktype="understanding">Understanding Techniques for WCAG Success Criteria</loc> section of Understanding WCAG 2.0.</emph></phrase></p>
-			<p id="abstract-not-standalone"><emph>Techniques for WCAG 2.0</emph> is not intended to be used as a stand-alone document. Instead, it is expected that content authors will usually use <loc href="http://www.w3.org/WAI/WCAG20/quickref/">How to Meet WCAG 2.0: A customizable quick reference</loc> to read the WCAG success criteria, and follow links from there to specific topics in Understanding WCAG 2.0 and to specific techniques.</p>
-		</abstract>
-		<langusage>
-			<language id="en-US"/>
-		</langusage>
-		<revisiondesc>
-			<p>
-				<loc href="/WAI/GL/WCAG20/change-history.html">History of Changes to WCAG 2.0 Working Drafts</loc>
-			</p>
-		</revisiondesc>
-	</header>
-	<front>
-		<div1 id="intro">
-			<head>Introduction to <emph>Techniques for WCAG 2.0</emph></head>
-			<p use-id="abstract-general-intro"/>
-			<p>WCAG 2.0 itself is a stable document that does not change. This <emph>Techniques for WCAG 2.0</emph> document is updated periodically, about <phrase>twice per</phrase> year, to cover more current best practices and changes in technologies and tools.</p>
-			<p><phrase use-id="abstract-techniques-informative"/>.</p>
-			<note>
-				<p>W3C cautions against requiring W3C's sufficient techniques. The only thing that should be required is meeting the WCAG 2.0 success criteria. To learn more, see:</p>
-				<ulist>
-					<item>
-						<p><loc href="http://www.w3.org/WAI/WCAG20/wcag2faq.html#techsnot">What would be the negative consequences of allowing <emph>only</emph> W3C's published techniques to be used for conformance to WCAG 2.0?</loc> in the WCAG 2 FAQ</p>
-					</item>
-					<!--
-							<item>
-								<p>
-									<loc href="http://www.w3.org/2013/02/stdref">Normative References to W3C Standards</loc>
-									<span class="quiet">[@@ Ian asks that we not point to this for now.]</span>
-								</p>
-							</item>
-							-->
-				</ulist>
-			</note>
-			<p use-id="abstract-not-standalone"/>
-			<p>Publication of techniques for a specific technology does not imply that the technology can be used in all situations to create content that meets WCAG 2.0 success criteria and conformance requirements. Developers need to be aware of the limitations of specific technologies and provide content in a way that is accessible to people with disabilities. </p>
-			<p><phrase use-id="abstract-techniques-understanding"/></p>
-		</div1>
-	</front>
-	<body>
-		<xi:include href="techniques/general.xml" xpointer="general"/>
-		<xi:include href="techniques/html.xml" xpointer="html"/>
-		<xi:include href="techniques/css.xml" xpointer="css"/>
-		<xi:include href="techniques/client-side-script.xml" xpointer="client-side-script"/>
-		<xi:include href="techniques/server-side-script.xml" xpointer="server-side-script"/>
-		<xi:include href="techniques/smil.xml" xpointer="smil"/>
-		<xi:include href="techniques/text.xml" xpointer="text"/>
-		<xi:include href="techniques/aria.xml" xpointer="aria"/>
-		<xi:include href="techniques/flash.xml" xpointer="flash"/>
-		<xi:include href="techniques/silverlight.xml" xpointer="silverlight"/>
-		<xi:include href="techniques/pdf.xml" xpointer="pdf"/>
-		<xi:include href="techniques/failures.xml" xpointer="failures"/>
-	</body>
-	<back>
-		<!-- BBC - This is the master list. Some of these refs also appear in the Understanding Doc. -->
-		<inform-div1 id="acknowledgements">
-			<head>Acknowledgements</head>
-			<p>This publication has been funded in part with U.S. Federal funds from the Department of Education, National Institute on Disability, Independent Living, and Rehabilitation Research (NIDILRR), initially under contract number ED-OSE-10-C-0067 and currently under contract number HHSP23301500054C. The content of this publication does not necessarily reflect the views or policies of the U.S. Department of Education, nor does mention of trade names, commercial products, or organizations imply endorsement by the U.S. Government.</p>
-			<p>Additional information about participation in the Web Content Accessibility Guidelines Working Group (WCAG WG) can be found on the <loc href="http://www.w3.org/WAI/GL/">Working Group home page</loc>. 
-			</p>
-			<div2 id="ack_participants-active" role="normal">
-				<head>Participants of the WCAG WG active in the development of this document:</head>
-				<ulist>
-					<item>
-						<p>Paul Adam (Deque)</p>
-					</item>
-					<item>
-						<p>Kathleen Anderson</p>
-					</item>
-					<item>
-						<p>Jon Avila (SSB Bart Group)</p>
-					</item>
-					<item>
-						<p>Bruce Bailey (U.S. Access Board) </p>
-					</item>
-					<item>
-						<p>Laura Carlson</p>
-					</item>
-					<item>
-						<p>Louis Cheng (Google)</p>
-					</item>
-					<item>
-						<p>Michael Cooper (W3C)</p>
-					</item>
-					<item>
-						<p>Wayne Dick</p>
-					</item>
-					<item>
-						<p>Eric Eggert (W3C)</p>
-					</item>
-					<item>
-						<p>Michael Elledge</p>
-					</item>
-					<item>
-						<p>Detlev Fischer</p>
-					</item>
-					<item>
-						<p>John Foliot (Deque)</p>
-					</item>
-					<item>
-						<p>Loretta Guarino Reid (Google)</p>
-					</item>
-					<item>
-						<p>Jon Gunderson</p>
-					</item>
-					<item>
-						<p>Katie Haritos-Shea</p>
-					</item>
-					<item>
-						<p>Marc Johlic (IBM)</p>
-					</item>
-					<item>
-						<p>Barry Johnson (Deque)</p>
-					</item>
-					<item>
-						<p>Andrew Kirkpatrick (Adobe)</p>
-					</item>
-					<item>
-						<p>David MacDonald</p>
-					</item>
-					<item>
-						<p>Erich Manser (IBM)</p>
-					</item>
-					<item>
-						<p>James Nurthen (Oracle)</p>
-					</item>
-					<item>
-						<p>Joshue O Connor</p>
-					</item>
-					<item>
-						<p>Jan Richards</p>
-					</item>
-					<item>
-						<p>Alan Smith</p>
-					</item>
-					<item>
-						<p>Adam Solomon</p>
-					</item>
-					<item>
-						<p>Makoto Ueki</p>
-					</item>
-					<item>
-						<p>Gregg Vanderheiden</p>
-					</item>
-					<item>
-						<p>Kathleen Wahlbin</p>
-					</item>
-					<item>
-						<p>Can Wang (Zhejiang University)</p>
-					</item>
-					<item>
-						<p>Jason White (Educational Testing Service)</p>
-					</item>
-					<item>
-						<p>Kenny Zhang (W3C)</p>
-					</item>
-				</ulist>
-			</div2>
-			<div2 id="ack_participants-previous" role="normal">
-				<head>Other previously active WCAG WG participants and other contributors to WCAG 2.0 or supporting resources</head>
-				<p>Shadi Abou-Zahra, Jim Allan, Jenae Andershonis, Wilhelm Joys Andersen, Andrew Arch, Avi Arditti, Aries Arditi, Jon Avila, Mark Barratt, Mike Barta, Sandy Bartell, Kynn Bartlett, Chris Beer, Charles Belov, Marco Bertoni, Harvey Bingham, Chris Blouch, Paul Bohman, Frederick Boland, Denis Boudreau, Patrice Bourlon, Judy Brewer, Andy Brown, Dick Brown, Doyle Burnett, Raven Calais, Ben Caldwell, Alastair Campbell, Laura Carlson, Tomas Caspers, Roberto Castaldo, Sofia Celic-Li, Sambhavi Chandrashekar, Mike Cherim, Jonathan Chetwynd, Wendy Chisholm, Alan Chuter, David M Clark, Joe Clark, Darcy Clarke, James Coltham, Vivienne Conway, Earl Cousins, James Craig, Tom Croucher, Pierce Crowell, Nir Dagan, Daniel Dardailler, Geoff Deering, Sébastien Delorme, Pete DeVasto, Wayne Dick, Iyad Abu Doush, Sylvie Duchateau, Cherie Eckholm, Roberto Ellero, Don Evans, Gavin Evans, Neal Ewers, Steve Faulkner, Bengt Farre, Lainey Feingold, Wilco Fiers, Michel Fitos, Alan J. Flavell, Nikolaos Floratos, Kentarou Fukuda, Miguel Garcia, P.J. Gardner, Alistair Garrison, Greg Gay, Becky Gibson, Al Gilman, Kerstin Goldsmith, Michael Grade, Karl Groves, Jon Gunderson, Emmanuelle Gutiérrez y Restrepo, Brian Hardy, Eric Hansen, Benjamin Hawkes-Lewis, Sean Hayes, Shawn Henry, Hans Hillen, Donovan Hipke, Bjoern Hoehrmann, Allen Hoffman, Chris Hofstader, Yvette Hoitink, Martijn Houtepen, Carlos Iglesias, Jonas Jacek, Ian Jacobs, Phill Jenkins, Duff Johnson, Jyotsna Kaki, Shilpi Kapoor, Leonard R. Kasday, Kazuhito Kidachi, Ken Kipness, John Kirkwood, Jason Kiss, Johannes Koch, Marja-Riitta Koivunen, Maureen Kraft, Preety Kumar, Kristjan Kure, Andrew LaHart, Gez Lemon, Chuck Letourneau, Aurélien Levy, Harry Loots, Scott Luebking, Tim Lacy, Jim Ley, Alex Li, William Loughborough, Greg Lowney, N Maffeo, Mark Magennis, Kapsi Maria, Luca Mascaro, Matt May, Sheena McCullagh, Liam McGee, Jens Meiert, Niqui Merret, Jonathan Metz, Alessandro Miele, Steven Miller, Mathew J Mirabella, Matt May, Marti McCuller, Sorcha Moore, Mary Jo Mueller, Charles F. Munat, Robert Neff, Charles Nevile, Liddy Nevile, Dylan Nicholson, Bruno von Niman, Tim Noonan, Sebastiano Nutarelli, Graham Oliver, Sean B. Palmer, Sailesh Panchang, Devarshi Pant, Nigel Peck, Anne Pemberton, David Poehlman, Ian Pouncey, Charles Pritchard, Kerstin Probiesch, W Reagan, Adam Victor Reed, Chris Reeve, Chris Ridpath, Lee Roberts, Mark Rogers, Raph de Rooij, Gregory J. Rosmaita, Matthew Ross, Sharron Rush, Joel Sanda, Janina Sajka, Roberto Scano, Gordon Schantz, Tim van Schie, Wolf Schmidt, Stefan Schnabel, Lisa Seeman, Cynthia Shelly, Glenda Sims, John Slatin, Becky Smith, Jared Smith, Andi Snow-Weaver, Neil Soiffer, Jeanne Spellman, Mike Squillace, Michael Stenitzer, Diane Stottlemyer, Christophe Strobbe, Sarah J Swierenga, Jim Thatcher, Terry Thompson, Justin Thorp, David Todd, Mary Utt, Jean Vanderdonckt, Carlos A Velasco, Eric Velleman, Gijs Veyfeyken, Dena Wainwright, Paul Walsch, Daman Wandke, Richard Warren, Elle Waters, Takayuki Watanabe, Léonie Watson, Gian Wild, David Wooley, Wu Wei, Leona Zumbo.</p>
-			</div2>
-		</inform-div1>
-		<inform-div1 id="references">
-			<head>References</head>
-			<blist>
-				<bibl id="CSS1" key="CSS1">"Cascading Style Sheets, level 1," B. Bos, H. Wium Lie, eds., W3C Recommendation 17 Dec 1996, revised 11 Jan 1999. Available at <loc href="http://www.w3.org/TR/REC-CSS1/">http://www.w3.org/TR/REC-CSS1/</loc>.</bibl>
-				<bibl id="CSS2" key="CSS2">"Cascading Style Sheets, level 2," B. Bos, H. Wium Lie, C. Lilley, and I. Jacobs, eds., W3C Recommendation 12 May 1998. Available at <loc href="http://www.w3.org/TR/CSS2/">http://www.w3.org/TR/CSS2/</loc>.</bibl>
-				<bibl id="CSS21" key="CSS21">"Cascading Style Sheets, level 2 revision 1,"  B. Bos, T. Çelik,  I. Hickson,   H. Wium Lie, eds., W3C Candidate Recommendation 25 February 2004.  Available at:  <loc href="http://www.w3.org/TR/CSS21/">http://www.w3.org/TR/CSS21/</loc>
-				</bibl>
-				<bibl id="CSS3" key="CSS3">
-					<titleref href="http://www.w3.org/Style/CSS/current-work">[CSS 2.1 and CSS 3] Roadmap</titleref>, CSS WG's table of modules and publication dates.</bibl>
-				<bibl id="FLASH" key="FLASH">"Flash", Adobe Systems. Available at <loc href="http://www.adobe.com/devnet/swf.html">http://www.adobe.com/devnet/swf.html</loc>.</bibl>
-				<bibl id="HTML4" key="HTML4">"HTML 4.01 Specification," D. Raggett, A. Le Hors, I. Jacobs, eds.,  W3C Recommendation 24 December 1999. Available at <loc href="http://www.w3.org/TR/html401/">http://www.w3.org/TR/html401/</loc>
-				</bibl>
-				<bibl id="ISO32000" key="ISO32000">"Document management - Portable document format - Part 1: PDF 1.7", ISO/TC 171/SC 2. ISO. Available at <loc href="http://www.iso.org/iso/home/store/catalogue_tc/catalogue_detail.htm?csnumber=51502">http://www.iso.org/iso/home/store/catalogue_tc/catalogue_detail.htm?csnumber=51502</loc>. ISO-approved copy available at: <loc href="http://www.adobe.com/content/dam/Adobe/en/devnet/pdf/pdfs/PDF32000_2008.pdf">http://www.adobe.com/content/dam/Adobe/en/devnet/pdf/pdfs/PDF32000_2008.pdf</loc>.
-				</bibl>
-				<bibl id="PDF" key="PDF">"PDF", Adobe Systems. Available at <loc href="http://www.adobe.com/devnet/pdf.html">http://www.adobe.com/devnet/pdf.html</loc>.</bibl>
-				<bibl id="WCAG20" key="WCAG20">"Web Content Accessibility Guidelines 2.0,"  B. Caldwell, M Cooper, L Guarino Reid, and G. Vanderheiden, eds., W3 Recommendation 12 December 2008, <loc href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/">http://www.w3.org/TR/2008/REC-WCAG20-20081211</loc>.  The latest version of WCAG 2.0 is available at <loc href="http://www.w3.org/TR/WCAG20/">http://www.w3.org/TR/WCAG20/</loc>.
-				</bibl>
-				<bibl id="XHTML1" key="XHTML1">"XHTML 1.0 The Extensible HyperText Markup Language (Second Edition)," S. Pemberton, et al.,  W3C Recommendation 26 January 2000, revised 1 August 2002. Available at:  <loc href="http://www.w3.org/TR/xhtml1/">http://www.w3.org/TR/xhtml1/</loc>.</bibl>
-			</blist>
-		</inform-div1>
-	</back>
-</spec>
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE spec SYSTEM "xmlspec.dtd">
+<!-- edited with XMLSpy v2006 rel. 3 sp1 (http://www.altova.com) by Ben Caldwell (W3C) -->
+<?xml-stylesheet type="text/xsl" href="techs-merge.xslt"?>
+<spec status="int-review" w3c-doctype="review" role="editors-copy" xmlns:xi="http://www.w3.org/2001/XInclude">
+	<header>
+		<title>Techniques for <abbr expansion="Web Content Accessibility Guidelines">WCAG</abbr> 2.0</title>
+		<subtitle>Techniques and Failures for Web Content Accessibility Guidelines 2.0</subtitle>
+		<w3c-designation>WCAG20-TECHS</w3c-designation>
+		<w3c-doctype>Editors' Draft</w3c-doctype>
+		<pubdate>
+			<day>28</day>
+			<month>October</month>
+			<year>2016</year>
+		</pubdate>
+		<publoc>
+			<loc href="http://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20160913/">http://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20160913/</loc>
+			<!--<loc href="http://www.w3.org/WAI/GL/2016/WD-WCAG20-TECHS-20160719/">http://www.w3.org/WAI/GL/2016/WD-WCAG20-TECHS-20160719/</loc>-->
+		</publoc>
+		<altlocs>
+			<loc href="complete.html">Single file version</loc>
+			<loc href="complete-diff.html">Single file diff-marked version showing revisions since 17 March 2015</loc>
+			<loc href="/WAI/WCAG20/versions/techniques/">Alternate Versions of Techniques for WCAG 2.0</loc>
+		</altlocs>
+		<latestloc>
+			<loc href="http://www.w3.org/TR/WCAG20-TECHS/">http://www.w3.org/TR/WCAG20-TECHS/</loc>
+			<!--<loc href="http://www.w3.org/WAI/GL/WCAG20-TECHS/">http://www.w3.org/WAI/GL/WCAG20-TECHS/</loc>-->
+		</latestloc>
+		<prevlocs>
+			<loc href="http://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20160317/">http://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20160317/</loc>
+			<!--<loc href="https://www.w3.org/WAI/GL/2016/WD-WCAG20-TECHS-20160105/">https://www.w3.org/WAI/GL/2016/WD-WCAG20-TECHS-20160105/</loc>-->
+		</prevlocs>
+		<authlist>
+			<author role="current">
+				<name>Michael Cooper</name>
+				<affiliation>W3C</affiliation>
+			</author>
+			<author role="current">
+				<name>Andrew Kirkpatrick</name>
+				<affiliation>Adobe Systems Inc.</affiliation>
+			</author>
+			<author role="current">
+				<name>Joshue O Connor</name>
+				<affiliation>InterAccess</affiliation>
+			</author>
+			<author role="past">
+				<name>Loretta Guarino Reid</name>
+				<affiliation>(until May 2013 while at Google, Inc.)</affiliation>
+			</author>
+			<author role="past">
+				<name>Gregg Vanderheiden</name>
+				<affiliation>(until May 2013 while at Trace R&amp;D Center, University of
+					Wisconsin-Madison)</affiliation>
+			</author>
+			<author role="past">
+				<name>Ben Caldwell</name>
+				<affiliation>(until September 2010 while at Trace R&amp;D Center, University of
+					Wisconsin-Madison)</affiliation>
+			</author>
+			<author role="past">
+				<name>Wendy Chisholm</name>
+				<affiliation>(until July 2006 while at W3C)</affiliation>
+			</author>
+			<author role="past">
+				<name>John Slatin</name>
+				<affiliation>(until June 2006 while at Accessibility Institute, University of Texas at
+					Austin)</affiliation>
+			</author>
+		</authlist>
+		<status>
+			<p><emph>This section describes the status of this document at the time of its publication. Other documents may supersede this document. A list of current W3C publications and the latest revision of this technical report can be found in the <loc href="http://www.w3.org/TR/">W3C technical reports index</loc> at <loc href="http://www.w3.org/TR/">http://www.w3.org/TR/</loc>.</emph></p>
+			<p>This is a <phrase role="final">Working Group Note</phrase><phrase role="ext-review">Public Editors' Draft of</phrase><phrase role="int-review">Editors' Draft of</phrase> "Techniques for WCAG 2.0". These techniques are produced by the <loc href="http://www.w3.org/WAI/GL/">Web Content Accessibility Guidelines Working Group</loc> to provide guidance about how to conform to the <loc href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/">Web Content Accessibility Guidelines (WCAG) 2.0 Recommendation</loc>. Techniques are referenced from <loc href="" linktype="understanding">Understanding WCAG 2.0</loc> and <loc href="http://www.w3.org/WAI/WCAG20/quickref/">How to Meet WCAG 2.0</loc>. Please note that the contents of this document are informative (they provide guidance), and not normative (they do not set requirements for conforming to WCAG 2.0).</p>
+			<p>WCAG 2.0 Techniques was previously published on 11 December 2008 as a Working Group Note and updated 14 October 2010, 3 January 2012, 5 September 2013, 3 March 2014, 8 April 2014, 16 September 2014, 26 February 2015, and 17 March 2016. This new version updates the support information provided for WCAG 2.0. Note that WCAG 2.0 itself remains unchanged, only the informative support materials have been updated. Primary changes include clarifications based on input from the public and translators. Changes in this version include clarifications in techniques <loc href="G136" linktype="general">G136</loc>, <loc href="ARIA2" linktype="aria">ARIA2</loc>, and <loc href="F68" linktype="failure">F68</loc>.</p>
+			<p><phrase role="ext-review">The purpose of this draft is to collect public feedback on proposed changes since the <loc href="http://www.w3.org/TR/2015/NOTE-WCAG20-TECHS-20150226/">WCAG 2.0 Techniques Working Group Note of 26 February 2015</loc>. The Working Group intends to publish an updated Note once feedback from this review has been incorporated. <emph role="bold">The existing Techniques document remains in place as a W3C Note</emph> while this separate draft update is under review and the WCAG Working Group addresses comments.</phrase> The changes are highlighted in the <loc href="complete-diff">diff-marked version</loc>.</p>
+			<p><phrase role="ext-review">Comments on this draft are due <emph role="bold">on or before 29 January 2016</emph>.</phrase> The Working Group requests that any comments be made using the options documented in <loc href="http://www.w3.org/WAI/WCAG20/comments/">Instructions for Commenting on WCAG 2.0 Documents</loc>. If this is not possible, comments can also be sent to <loc href="mailto:public-comments-wcag20@w3.org">public-comments-wcag20@w3.org</loc>. The <loc href="http://lists.w3.org/Archives/Public/public-comments-wcag20/">archives for the public comments list</loc> are publicly available. <phrase role="ext-review">Because this is a public review of changes to the Working Group Notes, only comments on changes made since the last Notes will be processed during this review; other comments will be saved and treated as comments on the updated Notes once published. </phrase><phrase role="final">Comments received on this document may be addressed in future versions of this document, or in another manner. </phrase><!--The Working Group does not plan to make formal responses to comments. -->Archives of the <loc href="http://lists.w3.org/Archives/Public/w3c-wai-gl/">WCAG WG mailing list discussions</loc> are also publicly available, and future work undertaken by the Working Group may address comments received on this document.</p>
+			<p>Materials from the public to assist in documenting techniques are particularly welcomed. Please use the <loc href="http://www.w3.org/WAI/GL/WCAG20/TECHS-SUBMIT/">Techniques Submission Form</loc> to submit techniques. </p>
+			<p>This document has been produced as part of the W3C <loc href="http://www.w3.org/WAI/">Web Accessibility Initiative</loc> (WAI). The goals of the WCAG Working Group are discussed in the <loc href="http://www.w3.org/WAI/GL/charter">WCAG Working Group charter</loc>. The WCAG Working Group is part of the <loc href="http://www.w3.org/WAI/Technical/Activity">WAI Technical Activity</loc>.</p>
+			<p> Publication as a <phrase role="final">Working Group Note</phrase><phrase role="ext-review">Public Editors' Draft</phrase><phrase role="int-review">Editors' Draft</phrase> does not imply endorsement by the W3C Membership. This is a draft document and may be updated, replaced or obsoleted by other documents at any time. It is inappropriate to cite this document as other than work in progress. </p>
+			<p>This document was produced by a group operating under the <loc href="http://www.w3.org/Consortium/Patent-Policy-20040205/">5 February 2004 W3C Patent Policy</loc>. W3C maintains a <loc role="disclosures" href="http://www.w3.org/2004/01/pp-impl/35422/status">public list of any patent disclosures</loc> made in connection with the deliverables of the group; that page also includes instructions for disclosing a patent. An individual who has actual knowledge of a patent which the individual believes contains <loc href="http://www.w3.org/Consortium/Patent-Policy-20040205/#def-essential">Essential Claim(s)</loc> must disclose the information in accordance with <loc href="http://www.w3.org/Consortium/Patent-Policy-20040205/#sec-Disclosure">section 6 of the W3C Patent Policy</loc>. </p>
+			<p>This document is governed by the <loc id="w3c_process_revision" href="http://www.w3.org/2015/Process-20150901/">1 September 2015 W3C Process Document</loc>. </p>
+		</status>
+		<abstract>
+			<p id="abstract-general-intro">This <emph>Techniques for WCAG 2.0</emph> document provides guidance for web content authors and evaluators on meeting <loc href="http://www.w3.org/TR/WCAG20/">Web Content Accessibility Guidelines (WCAG) 2.0</loc> <bibref ref="WCAG20"/> success criteria. It is part of a series of documents published by the W3C Web Accessibility Initiative (WAI) to support WCAG 2.0. For an introduction to WCAG, supporting technical documents, and educational material, see <loc href="http://www.w3.org/WAI/intro/wcag">Web Content Accessibility Guidelines (WCAG) Overview</loc>.</p>
+			<p><phrase id="abstract-techniques-informative">Techniques are informative—that means they are not required. The basis for determining conformance to WCAG 2.0 is the success criteria from the <loc href="http://www.w3.org/TR/WCAG20/">WCAG 2.0 standard</loc>—not the techniques.</phrase> <phrase id="abstract-techniques-understanding"><emph role="bold">For important information about techniques, please see the <loc href="understanding-techniques" linktype="understanding">Understanding Techniques for WCAG Success Criteria</loc> section of Understanding WCAG 2.0.</emph></phrase></p>
+			<p id="abstract-not-standalone"><emph>Techniques for WCAG 2.0</emph> is not intended to be used as a stand-alone document. Instead, it is expected that content authors will usually use <loc href="http://www.w3.org/WAI/WCAG20/quickref/">How to Meet WCAG 2.0: A customizable quick reference</loc> to read the WCAG success criteria, and follow links from there to specific topics in Understanding WCAG 2.0 and to specific techniques.</p>
+		</abstract>
+		<langusage>
+			<language id="en-US"/>
+		</langusage>
+		<revisiondesc>
+			<p>
+				<loc href="/WAI/GL/WCAG20/change-history.html">History of Changes to WCAG 2.0 Working Drafts</loc>
+			</p>
+		</revisiondesc>
+	</header>
+	<front>
+		<div1 id="intro">
+			<head>Introduction to <emph>Techniques for WCAG 2.0</emph></head>
+			<p use-id="abstract-general-intro"/>
+			<p>WCAG 2.0 itself is a stable document that does not change. This <emph>Techniques for WCAG 2.0</emph> document is updated periodically, about <phrase>twice per</phrase> year, to cover more current best practices and changes in technologies and tools.</p>
+			<p><phrase use-id="abstract-techniques-informative"/>.</p>
+			<note>
+				<p>W3C cautions against requiring W3C's sufficient techniques. The only thing that should be required is meeting the WCAG 2.0 success criteria. To learn more, see:</p>
+				<ulist>
+					<item>
+						<p><loc href="http://www.w3.org/WAI/WCAG20/wcag2faq.html#techsnot">What would be the negative consequences of allowing <emph>only</emph> W3C's published techniques to be used for conformance to WCAG 2.0?</loc> in the WCAG 2 FAQ</p>
+					</item>
+					<!--
+							<item>
+								<p>
+									<loc href="http://www.w3.org/2013/02/stdref">Normative References to W3C Standards</loc>
+									<span class="quiet">[@@ Ian asks that we not point to this for now.]</span>
+								</p>
+							</item>
+							-->
+				</ulist>
+			</note>
+			<p use-id="abstract-not-standalone"/>
+			<p>Publication of techniques for a specific technology does not imply that the technology can be used in all situations to create content that meets WCAG 2.0 success criteria and conformance requirements. Developers need to be aware of the limitations of specific technologies and provide content in a way that is accessible to people with disabilities. </p>
+			<p><phrase use-id="abstract-techniques-understanding"/></p>
+		</div1>
+	</front>
+	<body>
+		<xi:include href="techniques/general.xml" xpointer="general"/>
+		<xi:include href="techniques/html.xml" xpointer="html"/>
+		<xi:include href="techniques/css.xml" xpointer="css"/>
+		<xi:include href="techniques/client-side-script.xml" xpointer="client-side-script"/>
+		<xi:include href="techniques/server-side-script.xml" xpointer="server-side-script"/>
+		<xi:include href="techniques/smil.xml" xpointer="smil"/>
+		<xi:include href="techniques/text.xml" xpointer="text"/>
+		<xi:include href="techniques/aria.xml" xpointer="aria"/>
+		<xi:include href="techniques/flash.xml" xpointer="flash"/>
+		<xi:include href="techniques/silverlight.xml" xpointer="silverlight"/>
+		<xi:include href="techniques/pdf.xml" xpointer="pdf"/>
+		<xi:include href="techniques/failures.xml" xpointer="failures"/>
+	</body>
+	<back>
+		<!-- BBC - This is the master list. Some of these refs also appear in the Understanding Doc. -->
+		<inform-div1 id="acknowledgements">
+			<head>Acknowledgements</head>
+			<p>This publication has been funded in part with U.S. Federal funds from the Department of Education, National Institute on Disability, Independent Living, and Rehabilitation Research (NIDILRR), initially under contract number ED-OSE-10-C-0067 and currently under contract number HHSP23301500054C. The content of this publication does not necessarily reflect the views or policies of the U.S. Department of Education, nor does mention of trade names, commercial products, or organizations imply endorsement by the U.S. Government.</p>
+			<p>Additional information about participation in the Web Content Accessibility Guidelines Working Group (WCAG WG) can be found on the <loc href="http://www.w3.org/WAI/GL/">Working Group home page</loc>. 
+			</p>
+			<div2 id="ack_participants-active" role="normal">
+				<head>Participants of the WCAG WG active in the development of this document:</head>
+				<ulist>
+					<item>
+						<p>Paul Adam (Deque)</p>
+					</item>
+					<item>
+						<p>Kathleen Anderson</p>
+					</item>
+					<item>
+						<p>Jon Avila (SSB Bart Group)</p>
+					</item>
+					<item>
+						<p>Bruce Bailey (U.S. Access Board) </p>
+					</item>
+					<item>
+						<p>Laura Carlson</p>
+					</item>
+					<item>
+						<p>Louis Cheng (Google)</p>
+					</item>
+					<item>
+						<p>Michael Cooper (W3C)</p>
+					</item>
+					<item>
+						<p>Wayne Dick</p>
+					</item>
+					<item>
+						<p>Eric Eggert (W3C)</p>
+					</item>
+					<item>
+						<p>Michael Elledge</p>
+					</item>
+					<item>
+						<p>Detlev Fischer</p>
+					</item>
+					<item>
+						<p>John Foliot (Deque)</p>
+					</item>
+					<item>
+						<p>Loretta Guarino Reid (Google)</p>
+					</item>
+					<item>
+						<p>Jon Gunderson</p>
+					</item>
+					<item>
+						<p>Katie Haritos-Shea</p>
+					</item>
+					<item>
+						<p>Marc Johlic (IBM)</p>
+					</item>
+					<item>
+						<p>Barry Johnson (Deque)</p>
+					</item>
+					<item>
+						<p>Andrew Kirkpatrick (Adobe)</p>
+					</item>
+					<item>
+						<p>David MacDonald</p>
+					</item>
+					<item>
+						<p>Erich Manser (IBM)</p>
+					</item>
+					<item>
+						<p>James Nurthen (Oracle)</p>
+					</item>
+					<item>
+						<p>Joshue O Connor</p>
+					</item>
+					<item>
+						<p>Jan Richards</p>
+					</item>
+					<item>
+						<p>Alan Smith</p>
+					</item>
+					<item>
+						<p>Adam Solomon</p>
+					</item>
+					<item>
+						<p>Makoto Ueki</p>
+					</item>
+					<item>
+						<p>Gregg Vanderheiden</p>
+					</item>
+					<item>
+						<p>Kathleen Wahlbin</p>
+					</item>
+					<item>
+						<p>Can Wang (Zhejiang University)</p>
+					</item>
+					<item>
+						<p>Jason White (Educational Testing Service)</p>
+					</item>
+					<item>
+						<p>Kenny Zhang (W3C)</p>
+					</item>
+				</ulist>
+			</div2>
+			<div2 id="ack_participants-previous" role="normal">
+				<head>Other previously active WCAG WG participants and other contributors to WCAG 2.0 or supporting resources</head>
+				<p>Shadi Abou-Zahra, Jim Allan, Jenae Andershonis, Wilhelm Joys Andersen, Andrew Arch, Avi Arditti, Aries Arditi, Jon Avila, Mark Barratt, Mike Barta, Sandy Bartell, Kynn Bartlett, Chris Beer, Charles Belov, Marco Bertoni, Harvey Bingham, Chris Blouch, Paul Bohman, Frederick Boland, Denis Boudreau, Patrice Bourlon, Judy Brewer, Andy Brown, Dick Brown, Doyle Burnett, Raven Calais, Ben Caldwell, Alastair Campbell, Laura Carlson, Tomas Caspers, Roberto Castaldo, Sofia Celic-Li, Sambhavi Chandrashekar, Mike Cherim, Jonathan Chetwynd, Wendy Chisholm, Alan Chuter, David M Clark, Joe Clark, Darcy Clarke, James Coltham, Vivienne Conway, Earl Cousins, James Craig, Tom Croucher, Pierce Crowell, Nir Dagan, Daniel Dardailler, Geoff Deering, Sébastien Delorme, Pete DeVasto, Wayne Dick, Iyad Abu Doush, Sylvie Duchateau, Cherie Eckholm, Roberto Ellero, Don Evans, Gavin Evans, Neal Ewers, Steve Faulkner, Bengt Farre, Lainey Feingold, Wilco Fiers, Michel Fitos, Alan J. Flavell, Nikolaos Floratos, Kentarou Fukuda, Miguel Garcia, P.J. Gardner, Alistair Garrison, Greg Gay, Becky Gibson, Al Gilman, Kerstin Goldsmith, Michael Grade, Karl Groves, Jon Gunderson, Emmanuelle Gutiérrez y Restrepo, Brian Hardy, Eric Hansen, Benjamin Hawkes-Lewis, Sean Hayes, Shawn Henry, Hans Hillen, Donovan Hipke, Bjoern Hoehrmann, Allen Hoffman, Chris Hofstader, Yvette Hoitink, Martijn Houtepen, Carlos Iglesias, Jonas Jacek, Ian Jacobs, Phill Jenkins, Duff Johnson, Jyotsna Kaki, Shilpi Kapoor, Leonard R. Kasday, Kazuhito Kidachi, Ken Kipness, John Kirkwood, Jason Kiss, Johannes Koch, Marja-Riitta Koivunen, Maureen Kraft, Preety Kumar, Kristjan Kure, Andrew LaHart, Gez Lemon, Chuck Letourneau, Aurélien Levy, Harry Loots, Scott Luebking, Tim Lacy, Jim Ley, Alex Li, William Loughborough, Greg Lowney, N Maffeo, Mark Magennis, Kapsi Maria, Luca Mascaro, Matt May, Sheena McCullagh, Liam McGee, Jens Meiert, Niqui Merret, Jonathan Metz, Alessandro Miele, Steven Miller, Mathew J Mirabella, Matt May, Marti McCuller, Sorcha Moore, Mary Jo Mueller, Charles F. Munat, Robert Neff, Charles Nevile, Liddy Nevile, Dylan Nicholson, Bruno von Niman, Tim Noonan, Sebastiano Nutarelli, Graham Oliver, Sean B. Palmer, Sailesh Panchang, Devarshi Pant, Nigel Peck, Anne Pemberton, David Poehlman, Ian Pouncey, Charles Pritchard, Kerstin Probiesch, W Reagan, Adam Victor Reed, Chris Reeve, Chris Ridpath, Lee Roberts, Mark Rogers, Raph de Rooij, Gregory J. Rosmaita, Matthew Ross, Sharron Rush, Joel Sanda, Janina Sajka, Roberto Scano, Gordon Schantz, Tim van Schie, Wolf Schmidt, Stefan Schnabel, Lisa Seeman, Cynthia Shelly, Glenda Sims, John Slatin, Becky Smith, Jared Smith, Andi Snow-Weaver, Neil Soiffer, Jeanne Spellman, Mike Squillace, Michael Stenitzer, Diane Stottlemyer, Christophe Strobbe, Sarah J Swierenga, Jim Thatcher, Terry Thompson, Justin Thorp, David Todd, Mary Utt, Jean Vanderdonckt, Carlos A Velasco, Eric Velleman, Gijs Veyfeyken, Dena Wainwright, Paul Walsch, Daman Wandke, Richard Warren, Elle Waters, Takayuki Watanabe, Léonie Watson, Gian Wild, David Wooley, Wu Wei, Leona Zumbo.</p>
+			</div2>
+		</inform-div1>
+		<inform-div1 id="references">
+			<head>References</head>
+			<blist>
+				<bibl id="CSS1" key="CSS1">"Cascading Style Sheets, level 1," B. Bos, H. Wium Lie, eds., W3C Recommendation 17 Dec 1996, revised 11 Jan 1999. Available at <loc href="http://www.w3.org/TR/REC-CSS1/">http://www.w3.org/TR/REC-CSS1/</loc>.</bibl>
+				<bibl id="CSS2" key="CSS2">"Cascading Style Sheets, level 2," B. Bos, H. Wium Lie, C. Lilley, and I. Jacobs, eds., W3C Recommendation 12 May 1998. Available at <loc href="http://www.w3.org/TR/CSS2/">http://www.w3.org/TR/CSS2/</loc>.</bibl>
+				<bibl id="CSS21" key="CSS21">"Cascading Style Sheets, level 2 revision 1,"  B. Bos, T. Çelik,  I. Hickson,   H. Wium Lie, eds., W3C Candidate Recommendation 25 February 2004.  Available at:  <loc href="http://www.w3.org/TR/CSS21/">http://www.w3.org/TR/CSS21/</loc>
+				</bibl>
+				<bibl id="CSS3" key="CSS3">
+					<titleref href="http://www.w3.org/Style/CSS/current-work">[CSS 2.1 and CSS 3] Roadmap</titleref>, CSS WG's table of modules and publication dates.</bibl>
+				<bibl id="FLASH" key="FLASH">"Flash", Adobe Systems. Available at <loc href="http://www.adobe.com/devnet/swf.html">http://www.adobe.com/devnet/swf.html</loc>.</bibl>
+				<bibl id="HTML4" key="HTML4">"HTML 4.01 Specification," D. Raggett, A. Le Hors, I. Jacobs, eds.,  W3C Recommendation 24 December 1999. Available at <loc href="http://www.w3.org/TR/html401/">http://www.w3.org/TR/html401/</loc>
+				</bibl>
+				<bibl id="ISO32000" key="ISO32000">"Document management - Portable document format - Part 1: PDF 1.7", ISO/TC 171/SC 2. ISO. Available at <loc href="http://www.iso.org/iso/home/store/catalogue_tc/catalogue_detail.htm?csnumber=51502">http://www.iso.org/iso/home/store/catalogue_tc/catalogue_detail.htm?csnumber=51502</loc>. ISO-approved copy available at: <loc href="http://www.adobe.com/content/dam/Adobe/en/devnet/pdf/pdfs/PDF32000_2008.pdf">http://www.adobe.com/content/dam/Adobe/en/devnet/pdf/pdfs/PDF32000_2008.pdf</loc>.
+				</bibl>
+				<bibl id="PDF" key="PDF">"PDF", Adobe Systems. Available at <loc href="http://www.adobe.com/devnet/pdf.html">http://www.adobe.com/devnet/pdf.html</loc>.</bibl>
+				<bibl id="WCAG20" key="WCAG20">"Web Content Accessibility Guidelines 2.0,"  B. Caldwell, M Cooper, L Guarino Reid, and G. Vanderheiden, eds., W3 Recommendation 12 December 2008, <loc href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/">http://www.w3.org/TR/2008/REC-WCAG20-20081211</loc>.  The latest version of WCAG 2.0 is available at <loc href="http://www.w3.org/TR/WCAG20/">http://www.w3.org/TR/WCAG20/</loc>.
+				</bibl>
+				<bibl id="XHTML1" key="XHTML1">"XHTML 1.0 The Extensible HyperText Markup Language (Second Edition)," S. Pemberton, et al.,  W3C Recommendation 26 January 2000, revised 1 August 2002. Available at:  <loc href="http://www.w3.org/TR/xhtml1/">http://www.w3.org/TR/xhtml1/</loc>.</bibl>
+			</blist>
+		</inform-div1>
+	</back>
+</spec>
diff --git a/wcag20/sources/wcag2ict.html b/wcag20/sources/wcag2ict.html
index 964550f5f9..7d0ad94d2b 100644
--- a/wcag20/sources/wcag2ict.html
+++ b/wcag20/sources/wcag2ict.html
@@ -207,12 +207,12 @@
 	<style type="text/css">
 /* Overriding styles for the accordion */
 	</style>
-	<link href="http://www.w3.org/StyleSheets/TR/W3C-ED" rel="stylesheet" type="text/css" class="pubtarget.editors" />
-	<link href="http://www.w3.org/StyleSheets/TR/W3C-WG-NOTE" rel="stylesheet" type="text/css" class="pubtarget.tr" />
+	<link href="http://www.w3.org/StyleSheets/TR/W3C-ED" rel="stylesheet" type="text/css" class="pubtarget.editors"/>
+	<link href="http://www.w3.org/StyleSheets/TR/W3C-WG-NOTE" rel="stylesheet" type="text/css" class="pubtarget.tr"/>
 	<!--[if lt IE 9]><script src='undefined://www.w3.org/2008/site/js/html5shiv.js'></script><![endif]-->
 </head>
 	<body> <div class="head">
-		<p> <a href="http://www.w3.org/"><img width="72" height="48" src="http://www.w3.org/Icons/w3c_home" alt="W3C" /></a> </p>
+		<p> <a href="http://www.w3.org/"><img width="72" height="48" src="http://www.w3.org/Icons/w3c_home" alt="W3C"/></a> </p>
 		<h1 class="title" id="title">Guidance on Applying WCAG 2.0 to Non-Web Information and Communications Technologies (WCAG2ICT)</h1>
 		<h2 id="w3c-status"><abbr title="World Wide Web Consortium">W3C</abbr> <span class="pubtarget.editors">Editors' Draft</span><span class="pubtarget.tr">Working Group Note</span> 5 September 2013</h2>
 		<dl>
@@ -241,7 +241,7 @@ <h2 id="w3c-status"><abbr title="World Wide Web Consortium">W3C</abbr> <span cla
 		</dl>
 		<p>This document is available in an <a href="http://www.w3.org/WAI/GL/2013/WD-wcag2ict-20130905/accordion">expandable / collapsible alternate version</a> in which the “Intent” sections copied from Understanding WCAG 2.0 are hidden and individually expandable, for easier reading.</p>
 		<p class="copyright"><a href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a> © 2012-2013 <a href="http://www.w3.org/"><abbr title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a href="http://www.csail.mit.edu/"><abbr title="Massachusetts Institute of Technology">MIT</abbr></a>, <a href="http://www.ercim.eu/"><abbr title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>, <a href="http://www.keio.ac.jp/">Keio</a>, <a href="http://ev.buaa.edu.cn/">Beihang</a>). W3C <a href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>, <a href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a> and <a href="http://www.w3.org/Consortium/Legal/copyright-documents">document use</a> rules apply.</p>
-		</div> <hr /> <section id="abstract" class="introductory">
+		</div> <hr/> <section id="abstract" class="introductory">
 		<h2>Abstract</h2>
 		<p> This document, “<strong><abbr>Guidance on Applying WCAG 2.0 to Non-Web Information and Communications Technologies</abbr> (WCAG2ICT)</strong>” describes how the <a href="http://www.w3.org/WAI/GL/WCAG20/">Web Content Accessibility Guidelines (WCAG) 2.0</a> [<cite><a href="#REF-WCAG20">WCAG20</a></cite>] and its principles, guidelines, and success criteria can be applied to non-web <abbr>Information and Communications Technologies</abbr> (ICT), specifically to non-web documents and software. It provides informative guidance (guidance that is not normative and does not set requirements). </p>
 		<p>This document is <span class="pubtarget.editors">intended to become </span>a Working Group Note, and is part of a series of technical and educational documents published by the <a href="http://www.w3.org/WAI/"><abbr title="World Wide Web Consortium">W3C</abbr> Web Accessibility Initiative (WAI)</a> and available from the <a href="http://www.w3.org/WAI/intro/wcag.php">WCAG 2.0 Overview</a>. </p>
@@ -523,7 +523,7 @@ <h4>Success Criterion 1.4.2: Audio Control (Level A)</h4>
 		<h4>Success Criterion 1.4.3: Contrast (Minimum) (Level AA)</h4>
 		<p>This applies directly as written, and as described in <a href="http://www.w3.org/WAI/GL/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html#visual-audio-contrast-contrast-intent-head">Intent from Understanding Success Criterion 1.4.3</a> (also provided below).</p>
 		</section><section id="visual-audio-contrast-scale">
-		<h4>Success Criterion 1.4.4: Resize text (Level AA)</h4>
+		<h4>Success Criterion 1.4.4: Resize Text (Level AA)</h4>
 		<p> This applies directly as written, and as described in <a href="http://www.w3.org/WAI/GL/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html#visual-audio-contrast-scale-intent-head">Intent from Understanding Success Criterion 1.4.4</a> (also provided below). </p>
 		<p class="note"><strong class="note-title">Note 1: </strong><a href="#keyterms_content">Content</a> for which there are software players, viewers or editors with a 200 percent zoom feature would automatically meet this success criterion when used with such players, unless the content will not work with zoom.</p>
 		<p class="note"><strong class="note-title">Note 2: </strong>The Intent section refers to the ability to allow users to enlarge the text on screen at least up to 200% without needing to use <a href="#atdef">assistive technologies</a>. This means that the application provides some means for enlarging the text 200% (zoom or otherwise) without loss of <a href="#keyterms_content">content</a> or functionality or that the application works with the platform features that meet this requirement. </p>
diff --git a/working-examples/aria-alert-identify-errors/index.html b/working-examples/aria-alert-identify-errors/index.html
index ea01f5d6c3..8a8bd92df3 100644
--- a/working-examples/aria-alert-identify-errors/index.html
+++ b/working-examples/aria-alert-identify-errors/index.html
@@ -1,9 +1,28 @@
 <!doctype html>
-<html>
+<html lang="en">
 <head>
 <meta charset="UTF-8">
-<title>Using role=alert to Identify Errors</title>
-<script src="http://code.jquery.com/jquery.js"></script>
+<title>Using ARIA live regions or role=alert to identify errors</title>
+<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+<style>
+	body{
+		background:#fff;
+		color:#000;
+		font-family:system-ui;
+	}
+
+	input{
+		border:1px solid #000;
+		font:inherit;
+	}
+
+	[type=submit]{
+		background: #666;
+		color:#fff;
+	}
+</style>
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
+
 <script>
 $(document).ready(function(e) {
 	$('#signup').submit(function() {
@@ -50,7 +69,7 @@
 </head>
 
 <body>
-<h1>Using ARIA Live Regions or role=alert to Identify Errors</h1>
+<h1>Using ARIA live regions or <code class="language-html">role=alert</code> to identify errors</h1>
 <form name="signup" id="signup" method="post" action="">
   <p id="errors" role="alert" aria-atomic="true"></p>
   <p>
diff --git a/working-examples/aria-alertdialog-identify-errors/index.html b/working-examples/aria-alertdialog-identify-errors/index.html
index f9b126b2df..bd42b86560 100644
--- a/working-examples/aria-alertdialog-identify-errors/index.html
+++ b/working-examples/aria-alertdialog-identify-errors/index.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html>
+<html lang="en">
 <head>
 <meta charset="UTF-8">
 <title>Using aria-alertdialog to Identify Errors</title>
@@ -11,8 +11,8 @@
 		var lastFocus = document.activeElement;
 		var modalOverlay = $('<div>').attr({id:"modalOverlay", tabindex:"0"});
 		$(modalOverlay).appendTo('body');		
-		var dialog = $('<div>').attr({role:"alertdialog", "aria-labelledby":"alertHeading", "aria-describedby":"alertText", tabindex:"0"});
-		$(dialog).html('<div id="firstElement" tabindex="0"></div><h1 id="alertHeading">Error</h1><div id="alertText">Employee\'s Birth Date is after their hire date. Please verify the birth date and hire date.</div><button id="firstButton">Save and Continue</button><button id="lastButton">Return to page and correct error</button><div id="lastElement" tabindex="0"></div>').appendTo('body');
+		var dialog = $('<div>').attr({role:"alertdialog", "aria-labelledby":"alertHeading", tabindex:"0"});
+		$(dialog).html('<div id="firstElement" tabindex="0"></div><h1 id="alertHeading">Error</h1><p>Employee\'s Birth Date is after their hire date. Please verify the birth date and hire date.</p><button id="firstButton">Save and Continue</button><button id="lastButton">Return to page and correct error</button><div id="lastElement" tabindex="0"></div>').appendTo('body');
 		$('#firstButton').focus();
 
 $('#lastElement').focusin(function(e) {
diff --git a/working-examples/aria-describedby-close/index.html b/working-examples/aria-describedby-close/index.html
deleted file mode 100644
index 5726fadde4..0000000000
--- a/working-examples/aria-describedby-close/index.html
+++ /dev/null
@@ -1,18 +0,0 @@
-<!-- saved from url=(0061)http://3needs.org/en/testing/code/aria-describedby-close.html -->
-<!DOCTYPE html>
-<html lang="en">
-	<head>
-		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-			<title>aria-describedby example 1: Add description to close button</title>	
-			
-	</head>
-	
-	<body>
-		
-		<button aria-label="Close window" aria-describedby="descriptionClose"
-			onclick="myDialog.close()">X</button>
-		<p>other content</p>
-		<div id="descriptionClose">Closing this window will discard any information entered and return you back to the main page</div>
-		
-	</body>
-</html>
diff --git a/working-examples/aria-grouping-multipart-fields-ssn/index.html b/working-examples/aria-grouping-multipart-fields-ssn/index.html
index bbae29d628..3b3191d393 100644
--- a/working-examples/aria-grouping-multipart-fields-ssn/index.html
+++ b/working-examples/aria-grouping-multipart-fields-ssn/index.html
@@ -1,21 +1,20 @@
 <!DOCTYPE html>
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<html lang="en">
 <head>
-    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
-<title>Marking up forms and reporting violations for forms</title>
+  <meta charset="utf-8">
+  <title>Marking up forms and reporting violations for forms</title>
 </head>
 <body>
 
-<h2>Multi-part fields like social security# and telephone#:</h2>
-<form action="#" method="post" id="form6">
+<h2>Multi-part fields like social security number and telephone#:</h2>
+<form action="#" method="post">
 <div role="group" aria-labelledby="ssn1">
-<span id="ssn1">Social Security#</span> 
-<span style="color:#D90D0D;"> * </span>
-<input size="3" type="text" aria-required="true" title="First 3 digits" />-
-<input size="2" type="text" aria-required="true" title="Next 2 digits" />-
-<input size="4" type="text" aria-required="true" title="Last 4 digits" />
+<span id="ssn1">Social Security Number</span> 
+<span style="color:#D90D0D;"> (required) </span>
+<input size="3" type="text" aria-required="true" title="First 3 digits">-
+<input size="2" type="text" aria-required="true" title="Next 2 digits">-
+<input size="4" type="text" aria-required="true" title="Last 4 digits">
 </div>
 </form>
-<p style="margin: 20em 0 0 0;" role="contentinfo">Created by Sailesh Panchang, Deque Systems | July 15, 2013 || Last updated: February 26, 2014</p>
 </body>
 </html>
diff --git a/working-examples/aria-grouping-related-fields/index.html b/working-examples/aria-grouping-related-fields/index.html
index 24573d2f45..e80984cfea 100644
--- a/working-examples/aria-grouping-related-fields/index.html
+++ b/working-examples/aria-grouping-related-fields/index.html
@@ -3,7 +3,7 @@
 
 <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
 <head>
-     <meta charset="utf-8" />
+     <meta charset="utf-8"/>
      <title>Example - Using grouping roles to identify related form controls</title>
        <style>
 
@@ -33,7 +33,7 @@
 <h1>Example of using grouping roles to identify related form controls</h1>
 
 <p>NB: This example does not use the script needed to make it work, but does include enough to understand the grouping mechanism.</p>
-<hr />
+<hr/>
 
 <h3>Set Alerts for your Account</h3>
 
@@ -42,9 +42,9 @@ <h3>Set Alerts for your Account</h3>
 <div role="group" aria-labelledby="accountnum">
     <span id="accountnum">Your 12-digit account number</span>
     <p>
-      <input size="4" type="text" title="First 4 digits" name="part1" /> - 
-      <input size="4" type="text" title="Next 4 digits" name="part2" /> - 
-      <input size="4" type="text" title="Last 4 digits" name="part3" />
+      <input size="4" type="text" title="First 4 digits" name="part1"/> - 
+      <input size="4" type="text" title="Next 4 digits" name="part2"/> - 
+      <input size="4" type="text" title="Last 4 digits" name="part3"/>
     </p>
   </div>
 
@@ -70,7 +70,7 @@ <h3>Set Alerts for your Account</h3>
       <span id="a2r2">No</span>
     </div>
   </div>
-  <p><input type="submit" value="Continue" id="continue_btn" name="continue_btn" /></p>
+  <p><input type="submit" value="Continue" id="continue_btn" name="continue_btn"/></p>
 </form>
 
 </body>
diff --git a/working-examples/aria-invalid-data-format/index.html b/working-examples/aria-invalid-data-format/index.html
index be5891aa80..18d9ce4429 100644
--- a/working-examples/aria-invalid-data-format/index.html
+++ b/working-examples/aria-invalid-data-format/index.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
-    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
+    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
 <title>Forms: Using aria-invalid </title>
 <style type="text/css">
 div.control label {
@@ -54,23 +54,23 @@ <h2> <span role="alert" id="err_final" tabindex="-1"></span></h2>
 
 <div class="control">
 <p><label for="pin4">Personal Id. Number (PIN) - 4 digits: [*]</label> 
-<input type="text" size="4" name="pin4" id="pin4" /></p>
+<input type="text" size="4" name="pin4" id="pin4"/></p>
 </div>
 <div class="control">
 <p><label for="email">Email address: [*]</label> 
-<input type="text" name="email" id="email" /> </p> 
+<input type="text" name="email" id="email"/> </p> 
 </div>
 <div class="control">
 <p><label for="lname">Last name:  [*]</label>
-<input type="text" name="lname" id="lname" size="12" /> </p> 
+<input type="text" name="lname" id="lname" size="12"/> </p> 
 </div>
 <div class="control">
 <p><label for="startDt">Desired policy start date (MM / DD / YYYY)</label>
-<input type="text" name="startDt" id="startDt" size="12" /> </p> 
+<input type="text" name="startDt" id="startDt" size="12"/> </p> 
 </div>
-<p><input type="hidden" name="spanval" id="spanval" />
+<p><input type="hidden" name="spanval" id="spanval"/>
 
-<input type="submit" value="Login" id="next_btn" name="next_btn" /></p>
+<input type="submit" value="Login" id="next_btn" name="next_btn"/></p>
 </form>
 <h3>About the error messages</h3>
 <ul>
diff --git a/working-examples/aria-labelledby-description-complex-graphic/index.html b/working-examples/aria-labelledby-description-complex-graphic/index.html
index 74cb9a407d..8bfc1e19b4 100644
--- a/working-examples/aria-labelledby-description-complex-graphic/index.html
+++ b/working-examples/aria-labelledby-description-complex-graphic/index.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-<meta charset=utf-8 />
+<meta charset=utf-8/>
 <title>ARIA10 Example 1</title>
 </head>
 
diff --git a/working-examples/aria-labelledby-table-text-inputs/index.html b/working-examples/aria-labelledby-table-text-inputs/index.html
index acb61841cc..14a04a0dc4 100644
--- a/working-examples/aria-labelledby-table-text-inputs/index.html
+++ b/working-examples/aria-labelledby-table-text-inputs/index.html
@@ -15,14 +15,14 @@
 
 	<tr>
 		<th id="gross">W2 Gross</th>
-		<td><input type="text" size="20" aria-labelledby="tpayer gross" /></td>
-		<td><input type="text" size="20" aria-labelledby="sp gross" /></td>
+		<td><input type="text" size="20" aria-labelledby="tpayer gross"/></td>
+		<td><input type="text" size="20" aria-labelledby="sp gross"/></td>
 	</tr>
 	
 	<tr>
 		<th id="div">Dividends</th>
-		<td><input type="text" size="20" aria-labelledby="tpayer div" /></td>
-		<td><input type="text" size="20" aria-labelledby="sp div" /></td>
+		<td><input type="text" size="20" aria-labelledby="tpayer div"/></td>
+		<td><input type="text" size="20" aria-labelledby="sp div"/></td>
 	</tr>
 </table>
 </body>
diff --git a/working-examples/aria-labelledby-time-out-input-concatenated-label/index.html b/working-examples/aria-labelledby-time-out-input-concatenated-label/index.html
index 3a44053be0..a8fa8223b7 100644
--- a/working-examples/aria-labelledby-time-out-input-concatenated-label/index.html
+++ b/working-examples/aria-labelledby-time-out-input-concatenated-label/index.html
@@ -1,14 +1,20 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-<title>aria-labelledby example 1:  Extend time-out</title>	
-
+<meta content="charset=UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+<title>aria-labelledby example 1: Extend time-out</title>
+<style>
+    body{
+        background:#fff;
+        color:#000;
+        font-family: system-ui;
+    }
+</style>
 </head>
-
 <body>
 
-<h2>Extend timeout</h2>
+<h1><code class="language-html">aria-labelledby</code> example 1: Extend time-out</h1>
 
 <form>
 <p><span id="timeout-label"><label for="timeout-duration">Extend time-out to</label></span>
@@ -18,6 +24,6 @@ <h2>Extend timeout</h2>
 </form>
 
 
-<p>(Adapted from <a href="http://www.marcozehe.de/2008/03/23/easy-aria-tip-2-aria-labelledby-and-aria-described">Easy ARIA tip #2: aria-labelledby and aria-describedby</a>, an example put together by Marco Zehe in 2008)</p>
+<p>(Adapted from <a href="https://www.marcozehe.de/easy-aria-tip-2-aria-labelledby-and-aria-describedby/">Easy ARIA tip #2: aria-labelledby and aria-describedby</a>, an example put together by Marco Zehe in 2008)</p>
 </body>
 </html>
diff --git a/working-examples/aria-labelledby-workshop-booking-timetable/index.html b/working-examples/aria-labelledby-workshop-booking-timetable/index.html
index e2d7a77816..2635f96d7c 100644
--- a/working-examples/aria-labelledby-workshop-booking-timetable/index.html
+++ b/working-examples/aria-labelledby-workshop-booking-timetable/index.html
@@ -1,10 +1,31 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml">
+<!DOCTYPE html>
+<html lang="en">
 <head>
-<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+<meta charset="utf-8"/>
 <title>Dinosaur conference</title>
-</head>
+<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+<style>
+	body{
+		background:#fff;
+		color:#000;
+		font:1rem / 1.5 system-ui;
+	}
 
+	table{
+		border:1px solid hsl(0, 0%, 0%);
+		border-collapse:collapse;
+		margin-block-end:1rem;
+	}
+	th, td{
+		border:1px solid;
+	}
+
+	input[type=submit]{
+		font:inherit;
+	}
+</style>
+</head>
 <body>
 <h1>Dinosaur conference workshops timetable Thursday, 14.  & Friday, 15. March 2013</h1>
 
@@ -13,7 +34,7 @@ <h1>Dinosaur conference workshops timetable Thursday, 14.  & Friday, 15. March 2
 Dinosaur conference workshop booking table
 </caption>
 <tr>
-	<td rowspan="2"></td>
+	<th rowspan="2" scope="col">Track</th>
 	<th colspan="2" scope="colgroup">Thursday</th>
 	<th colspan="2" scope="colgroup">Friday</th>
 </tr>
@@ -26,12 +47,12 @@ <h1>Dinosaur conference workshops timetable Thursday, 14.  & Friday, 15. March 2
 </tr>
 
 <tr>
-	<th id="track1" scope="row">track 1</th>
+	<th id="track1" scope="row">Track 1</th>
 	<td>
-		<h2 id="title-TM1">The Paleozoic era </h2>
+		<h2 id="title-TM1">The Paleozoic era</h2>
 		<p>2 places left</p>
 		<p><input type="checkbox" id="TM1" aria-labelledby="title-TM1 track1 am1 TM1-att">
-                <label id="TM1-att" for="TM1">Attend</label></p>
+			<label id="TM1-att" for="TM1">Attend</label></p>
 	</td>
 	
 	<td>
@@ -59,7 +80,7 @@ <h2 id="title-FA1">The Jurassic period</h2>
 
 
 <tr>
-	<th id="track2" scope="row">track 2</th>
+	<th id="track2" scope="row">Track 2</th>
 	<td>
 		<h2 id="title-TM2">The Cretaceous period</h2>
 		<p>18 places left</p>
@@ -89,8 +110,7 @@ <h2 id="title-FA2">Emerging scholarship </h2>
 	</td>
 </tr>
 </table>
-<p>&nbsp;</p>
-<table role="presentation" cellspacing="0" cellpadding="4" border="0">
+<table role="presentation" cellspacing="0" cellpadding="4">
 <tr>
 <td><label for="123">Maiden Name:</label></td>
 <td>
@@ -98,7 +118,6 @@ <h2 id="title-FA2">Emerging scholarship </h2>
   <span id="986">(Only enter if different from last name) </span>
 </td>
 </table>
-<p>&nbsp;</p>
 <input type="submit" value="Log in">
 </body>
 </html>
diff --git a/working-examples/breadcrumb-trail/index.html b/working-examples/breadcrumb-trail/index.html
index df9c98ee6e..bf997256e5 100644
--- a/working-examples/breadcrumb-trail/index.html
+++ b/working-examples/breadcrumb-trail/index.html
@@ -2,29 +2,49 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8">
-    <title>G65 Example 3: Breadcrumb Example</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">    
+    <title>G65 Providing a breadcrumb trail examples</title>
     <style>
-      nav, h2, ul, ul li{
-      display: inline;
+      body {
+        background:#fff;
+        color: #000;
+        font: 1rem/1.5 system-ui, "Segoe UI", Roboto, Helvetica, sans-serif;
+      }      
+      h2, ul, ul li {
+        display: inline;
       }
-      nav > h2{
-      font-size: 1em;
+      nav > h2 {
+        font-size: 1em;
       }
       ul {
-      padding-left: 0em;
+        padding-left: 0em;
       }
     </style>
   </head>
   <body>
-    <h1>Breadcrumb Example</h1>
+    <h1>Breadcrumb Trail Examples</h1>
+    <p>Note: hyperlinks in these examples will return 404 errors.</p>
+    
+    <h2>Breadcrumb trail where current page is not a link</h2>
+    <nav aria-label="Breadcrumbs">
+      <ul>
+        <li><a href="/">Home</a> /</li>
+        <li><a href="/galleries">Galleries</a> /</li> 
+        <li><a href="/galleries/antarctica">Antarctica</a> /</li>
+        <li><a href="/galleries/antarctica/penguins">Penguins</a> /</li>
+        <li aria-current="page">Gentoo Penguin</li>
+      </ul> 
+    </nav>
+
+    <h2>Breadcrumb trail where current page is a link</h2>
     <nav aria-label="Breadcrumbs">
       <h2>You are here:</h2>
       <ul>
         <li><a href="/">Acme Company</a> &#8594;</li>
         <li><a href="/electronics/">Electronics</a> &#8594;</li>
         <li><a href="/electronics/computers/">Computers</a> &#8594;</li>
-        <li>Laptops</li>
+        <li><a href="/electronics/computers/laptops" aria-current="page">Laptops</a></li>
       </ul>
     </nav>
   </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/working-examples/css-fit-labels-inputs/index.html b/working-examples/css-fit-labels-inputs/index.html
index c51a7d05b5..f615307d2a 100644
--- a/working-examples/css-fit-labels-inputs/index.html
+++ b/working-examples/css-fit-labels-inputs/index.html
@@ -61,8 +61,9 @@
       }
 
       body {
-        font-family: Noto Sans,Trebuchet MS,Helvetica Neue,Arial,sans-serif;
+        font: 1rem/1.5 system-ui, "Segoe UI", Roboto, Helvetica,sans-serif;
         background-color: #fafafc;
+        color:#000;
         margin: 0;
       }
 
@@ -99,11 +100,12 @@
 
       input {
         height: 44px;
-        border: 1px solid #d5d5d5;
+        border: 1px solid #666666;
         border-radius: 4px;
         background-color: #ffffff;
         background-image: none;
         color: #333333;
+        font:inherit;
         margin-bottom: 0;
         padding: 7px 11px;
       }
@@ -122,6 +124,7 @@
         text-align: center;
         vertical-align: middle;
         background-color: #fafafc;
+        font:inherit;
         font-size: 1.1rem;
         font-weight: bold;
         border: 1px solid #d5d5d5;
@@ -150,10 +153,10 @@
       }
 
       @media all and (min-width: 992px) { 
-        main[role="main"] {
+        main.col {
           flex: 0 1 66.333333%;
         }
-        aside[role="complementary"] {
+        aside.col {
           flex: 0 1 33.333333%;
           margin-top: 0;
         }
@@ -179,7 +182,7 @@
           max-width: 100%; }
       }
 
-      header[role="banner"] {
+      header {
         background-color: #005a9c;
         margin-top: 1rem;
       }
@@ -209,22 +212,22 @@
         color: #ffffff;
       }
 
-      main[role="main"] {
+      main {
         background: #ffffff;
         padding-bottom: 0;
         border-left: 1px solid #dddddd;
         border-right: 1px solid #dddddd;
       }
 
-      @media (min-width: 992px) { main[role="main"] { border-right: none; } }
+      @media (min-width: 992px) { main.col { border-right: none; } }
 
-      aside[role="complementary"] {
+      aside {
         border-left: 1px solid #dddddd;
         border-right: 1px solid #dddddd;
       }
 
 
-      footer[role="contentinfo"] {
+      footer {
         color: #ffffff;
         background-color: #3b3b3b;
       }
@@ -287,7 +290,7 @@
     <div class="container">
       <div class="row">
 
-        <main role="main" class="col">
+        <main class="col">
           <h1>Using Adjustable Labels and Inputs for Reflow</h1>
           <p>The objective of this technique is to be able to present labels and inputs without introducing a horizontal scroll bar by using CSS <code>width</code>, <code>max-width</code> and <code>flexbox</code> property techniques that adapt to the available space to fit the labels and inputs.</p>
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porttitor lorem vitae quam aliquam, vel vulputate dolor ultricies. Sed sed nunc ipsum. Aliquam rhoncus risus pellentesque, faucibus nunc sodales, laoreet risus. Nulla interdum purus at facilisis porta.</p>
@@ -316,8 +319,8 @@ <h1>Using Adjustable Labels and Inputs for Reflow</h1>
               <div class="form-col-4">
                <label for="favorite-fruit">Favorite fruit</label>
               </div>
-              <div id="favorite-fruit" class="form-col-8">
-                <select>
+              <div class="form-col-8">
+                <select id="favorite-fruit">
                   <option>Banana</option>
                   <option>Pineapple</option>
                   <option>Strawberry</option>
@@ -327,7 +330,7 @@ <h1>Using Adjustable Labels and Inputs for Reflow</h1>
             
             <div class="form-group">
               <div class="offset-form-col-4 form-col-8">
-                <button>Submit</button>
+                <button type="submit">Submit</button>
               </div>
             </div>
             
@@ -335,7 +338,7 @@ <h1>Using Adjustable Labels and Inputs for Reflow</h1>
           
         </main>
 
-        <aside role="complementary" class="col">
+        <aside class="col">
           <h2>Aside</h2>
           <p>Quisque ac ultricies massa. Ut eu aliquam sem. Aenean sit amet pharetra tellus, eu sollicitudin sem. Curabitur sit amet erat mi. Proin rutrum pretium nisl nec ornare. Curabitur ultricies eros justo, vel tempus augue consequat eget. Ut lacinia orci a eleifend facilisis.</p>
         </aside>
@@ -343,15 +346,13 @@ <h2>Aside</h2>
       </div>
     </div>
 
-    <footer role="contentinfo">
+    <footer>
       <div class="container">
         <div class="row">
           <div class="col">
 
             <h2>Footer</h2>
-            <p>Copyright © 2018 W3C <sup>®</sup> (<a href="http://www.csail.mit.edu/"><abbr title="Massachusetts Institute of Technology">MIT</abbr></a>, <a href="http://www.ercim.eu/"><abbr title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>,
-              <a href="http://www.keio.ac.jp/">Keio</a>, <a href="http://ev.buaa.edu.cn/">Beihang</a>) <a href="/Consortium/Legal/ipr-notice">Usage policies apply</a>.
-            </p>
+            <p>Footer content.</p>
 
           </div>
         </div>
diff --git a/working-examples/css-fitting-images/index.html b/working-examples/css-fitting-images/index.html
index 28cd96d6bd..66af734f4e 100644
--- a/working-examples/css-fitting-images/index.html
+++ b/working-examples/css-fitting-images/index.html
@@ -24,7 +24,7 @@
       }
 
       body {
-        font-family: Noto Sans,Trebuchet MS,Helvetica Neue,Arial,sans-serif;
+        font: 1rem/1.5 system-ui, "Segoe UI", Roboto, Helvetica, sans-serif;
         background-color: #fafafc;
         margin: 0;
       }
@@ -76,10 +76,10 @@
       }
 
       @media all and (min-width: 992px) { 
-        main[role="main"] {
+        main.col {
           flex: 0 1 66.333333%;
         }
-        aside[role="complementary"] {
+        aside.col {
           flex: 0 1 33.333333%;
           margin-top: 0;
         }
@@ -105,7 +105,7 @@
           max-width: 100%; }
       }
 
-      header[role="banner"] {
+      header {
         background-color: #005a9c;
         margin-top: 1rem;
       }
@@ -135,22 +135,22 @@
         color: #ffffff;
       }
 
-      main[role="main"] {
+      main {
         background: #ffffff;
         padding-bottom: 0;
         border-left: 1px solid #dddddd;
         border-right: 1px solid #dddddd;
       }
 
-      @media (min-width: 992px) { main[role="main"] { border-right: none; } }
+      @media (min-width: 992px) { main.col { border-right: none; } }
 
-      aside[role="complementary"] {
+      aside {
         border-left: 1px solid #dddddd;
         border-right: 1px solid #dddddd;
       }
 
 
-      footer[role="contentinfo"] {
+      footer {
         color: #ffffff;
         background-color: #3b3b3b;
       }
@@ -185,7 +185,7 @@
 
   <body class="grid">
 
-    <header role="banner">
+    <header>
       <div class="container">
         <div class="row">
           <div class="col">
@@ -218,7 +218,7 @@
     <div class="container">
       <div class="row">
 
-        <main role="main" class="col">
+        <main class="col">
           <h1>Using Fitting Images for Reflow</h1>
           <p>The objective of this technique is to be able to present images without introducing a horizontal scroll bar by using CSS <code>max-width</code> and <code>height</code> property techniques that adapt to the available space and keep the original dimensions of the image.</p>
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porttitor lorem vitae quam aliquam, vel vulputate dolor ultricies. Sed sed nunc ipsum. Aliquam rhoncus risus pellentesque, faucibus nunc sodales, laoreet risus. Nulla interdum purus at
@@ -248,7 +248,7 @@ <h3>Panel 2</h3>
           
         </main>
 
-        <aside role="complementary" class="col">
+        <aside class="col">
           <h2>Aside</h2>
           <p>Quisque ac ultricies massa. Ut eu aliquam sem. Aenean sit amet pharetra tellus, eu sollicitudin sem. Curabitur sit amet erat mi. Proin rutrum pretium nisl nec ornare. Curabitur ultricies eros justo, vel tempus augue consequat eget. Ut lacinia orci a eleifend facilisis.</p>
         </aside>
@@ -256,15 +256,13 @@ <h2>Aside</h2>
       </div>
     </div>
 
-    <footer role="contentinfo">
+    <footer>
       <div class="container">
         <div class="row">
           <div class="col">
 
             <h2>Footer</h2>
-            <p>Copyright © 2018 W3C <sup>®</sup> (<a href="http://www.csail.mit.edu/"><abbr title="Massachusetts Institute of Technology">MIT</abbr></a>, <a href="http://www.ercim.eu/"><abbr title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>,
-              <a href="http://www.keio.ac.jp/">Keio</a>, <a href="http://ev.buaa.edu.cn/">Beihang</a>) <a href="/Consortium/Legal/ipr-notice">Usage policies apply</a>.
-            </p>
+            <p>Footer content</p>
 
           </div>
         </div>
diff --git a/working-examples/css-flexbox/index.html b/working-examples/css-flexbox/index.html
index 5b850c02be..f71a25f108 100644
--- a/working-examples/css-flexbox/index.html
+++ b/working-examples/css-flexbox/index.html
@@ -32,10 +32,10 @@
     }
 
     @media all and (min-width: 992px) { 
-      main[role="main"] {
+      main {
         flex: 0 1 66.333333%;
       }
-      aside[role="complementary"] {
+      aside {
         flex: 0 1 33.333333%;
         margin-top: 0;
       }
@@ -54,7 +54,7 @@
     }
 
     body {
-      font-family: Noto Sans,Trebuchet MS,Helvetica Neue,Arial,sans-serif;
+      font: 1rem/1.5 system-ui, "Segoe UI", Roboto, Helvetica, sans-serif;
       background-color: #fafafc;
       margin: 0;
     }
@@ -82,7 +82,7 @@
       margin-top: 0;
     }
 
-    header[role="banner"] {
+    header {
       background-color: #005a9c;
       margin-top: 1rem;
     }
@@ -112,22 +112,19 @@
       color: #ffffff;
     }
 
-    main[role="main"] {
+    main {
       background: #ffffff;
       padding-bottom: 0;
     }
 
-    aside[role="complementary"] {
+    aside {
       border-left: 1px solid #dddddd;
     }
 
-    footer[role="contentinfo"] {
+    footer {
       color: #ffffff;
       background-color: #3b3b3b;
-    }
-
-    footer h2 {
-      color: #ffffff;
+      border-top:1px solid #dddddd;
     }
 
     .logo {
@@ -148,7 +145,7 @@
 
   <body class="row">
 
-    <header role="banner" class="col">
+    <header class="col">
       <a href="http://w3.org/"><img alt="W3C" class="logo" src="https://www.w3.org/WAI/assets/images/w3c.svg">Header</a>
       <nav>
         <ul>
@@ -160,36 +157,34 @@
       </nav>
     </header>
 
-    <main role="main" class="col">      
-      <h1>Using CSS Flexbox for Reflow</h1>
+    <main class="col">      
+      <h1>Using <abbr title="Cascading Style Sheets">CSS</abbr> Flexbox for Reflow</h1>
       <p>The objective of this technique is to be able to present content without introducing horizontal scroll bars by using layout techniques that adapt to the available horizontal space. To view the effect use the zoom feature, or change the window width of your browser. The remaining text is Latin filler-text not intended to convey information.</p>
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porttitor lorem vitae quam aliquam, vel vulputate dolor ultricies. Sed sed nunc ipsum. Aliquam rhoncus risus pellentesque, faucibus nunc sodales, laoreet risus. Nulla interdum purus at facilisis porta.</p>      
       <div class="row row-nested">
         <div class="col col-panel">
           <div class="panel">
-            <h3>Panel 1</h3>
+            <h2>Panel 1</h2>
             <p>Nam venenatis turpis in erat tincidunt, non laoreet sem egestas. Etiam feugiat vehicula risus, non lobortis turpis aliquam nec. Nunc nec cursus arcu. In felis sapien, dictum a metus in, vehicula fermentum sem. Morbi in aliquam lorem. Suspendisse in interdum nunc.</p>
           </div>
         </div>
         <div class="col col-panel">
           <div class="panel">
-            <h3>Panel 2</h3>
+            <h2>Panel 2</h2>
             <p>Curabitur semper dui dui, quis interdum felis ullamcorper ut. Sed mauris eros, ullamcorper eget dolor a, fringilla consequat mi. In tortor lorem, varius in accumsan et, volutpat eu dolor. Proin fermentum velit non nulla blandit pharetra.</p>
           </div>
         </div>
       </div>
     </main>
 
-    <aside role="complementary" class="col">
+    <aside class="col">
       <h2>Aside</h2>
       <p>Quisque ac ultricies massa. Ut eu aliquam sem. Aenean sit amet pharetra tellus, eu sollicitudin sem. Curabitur sit amet erat mi. Proin rutrum pretium nisl nec ornare. Curabitur ultricies eros justo, vel tempus augue consequat eget. Ut lacinia orci a eleifend facilisis.</p>
     </aside>
 
-    <footer role="contentinfo" class="col">
+    <footer class="col">
       <h2>Footer</h2>
-      <p>Copyright © 2018 W3C <sup>®</sup> (<a href="http://www.csail.mit.edu/"><abbr title="Massachusetts Institute of Technology">MIT</abbr></a>, <a href="http://www.ercim.eu/"><abbr title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>,
-        <a href="http://www.keio.ac.jp/">Keio</a>, <a href="http://ev.buaa.edu.cn/">Beihang</a>) <a href="/Consortium/Legal/ipr-notice">Usage policies apply</a>.
-      </p>
+      <p>Footer information.</p>
     </footer>
 
   </body>
diff --git a/working-examples/css-focus-visible/index.html b/working-examples/css-focus-visible/index.html
new file mode 100644
index 0000000000..69f1a86b62
--- /dev/null
+++ b/working-examples/css-focus-visible/index.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <title>Using CSS :focus-visible to provide keyboard focus indication</title>
+    <style>
+
+      /* Specific :focus-visible styles */
+
+      :focus-visible {
+        outline: 5px solid red;
+      }
+
+      /* General styles for the example */
+
+      body {
+        font-family: Noto Sans,Trebuchet MS,Helvetica Neue,Arial,sans-serif;
+        background-color: #fafafc;
+        color: #222;
+        margin: 0;
+        padding: 1em;
+      }
+
+      pre {
+        background-color: #f0f0f0;
+        border: 1px solid #888;
+        padding: 0.5em;
+      }
+
+    </style>
+  </head>
+
+  <body>
+    <h1>Using <abbr title="Cascading Style Sheets">CSS</abbr> <code class="language-css">:focus-visible</code> to provide keyboard focus indication</h1>
+    <p>In this example, we have a standard <code>&lt;button&gt;</code> control in the HTML.</p>
+
+    <button>Example button</button>
+
+    <p>By default, in all modern browsers, this button does not show any focus indication when activated using a mouse/pointer. Browsers show their default focus outline/indication when a user sets focus on the button using <kbd>Tab</kbd>.</p>
+    <p>In order to make this focus indication more prominent, we use the <code class="language-css">:focus-visible</code> pseudo-class selector to define a more intentional and pronounced focus style.</p>
+    <pre><code>:focus-visible { outline: 5px solid red; }</code></pre>
+  </body>
+</html>
diff --git a/working-examples/css-grid/index.html b/working-examples/css-grid/index.html
index 6d54cdc328..2a66bbbf90 100644
--- a/working-examples/css-grid/index.html
+++ b/working-examples/css-grid/index.html
@@ -7,10 +7,10 @@
     <style>
 
     /* Reflow Styling */
-    header[role="banner"]       { grid-area: header; }
-    main[role="main"]           { grid-area: main; }
-    aside[role="complementary"] { grid-area: aside; }
-    footer[role="contentinfo"]  { grid-area: footer; }
+    header { grid-area: header; }
+    main  { grid-area: main; }
+    aside { grid-area: aside; }
+    footer { grid-area: footer; }
 
     .grid,
     .subgrid {
@@ -70,8 +70,9 @@
     }
 
     body {
-      font-family: Noto Sans,Trebuchet MS,Helvetica Neue,Arial,sans-serif;
+      font: 1rem/1.5 system-ui, "Segoe UI", Roboto, Helvetica, sans-serif;
       background-color: #fafafc;
+      color:#000;
       margin: 0;
     }
 
@@ -98,7 +99,7 @@
       margin-top: 0;
     }
 
-    header[role="banner"] {
+    header {
       background-color: #005a9c;
       margin-top: 1rem;
     }
@@ -128,16 +129,16 @@
       color: #ffffff;
     }
 
-    main[role="main"] {
+    main {
       background: #ffffff;
       padding-bottom: 0;
     }
 
-    aside[role="complementary"] {
+    aside {
       border-left: 1px solid #dddddd;
     }
 
-    footer[role="contentinfo"] {
+    footer {
       color: #ffffff;
       background-color: #3b3b3b;
     }
@@ -164,7 +165,7 @@
 
   <body class="grid">
 
-    <header role="banner" class="grid-item">
+    <header class="grid-item">
       <a href="https://w3.org/"><img alt="W3C" class="logo" src="https://www.w3.org/WAI/assets/images/w3c.svg">Header</a>
       <nav>
         <ul>
@@ -176,7 +177,7 @@
       </nav>
     </header>
 
-    <main role="main" class="grid-item">        
+    <main class="grid-item">        
       <h1>Using media queries and grid CSS to reflow columns</h1>
       <p>The objective of this technique is to be able to present content without introducing horizontal scroll bars by using layout techniques that adapt to the available horizontal space. To view the effect use the zoom feature, or change the window width of your browser. The remaining text is Latin filler-text not intended to convey information.</p>
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porttitor lorem vitae quam aliquam, vel vulputate dolor ultricies. Sed sed nunc ipsum. Aliquam rhoncus risus pellentesque, faucibus nunc sodales, laoreet risus. Nulla interdum purus at facilisis porta.</p>
@@ -196,16 +197,14 @@ <h3>Panel 2</h3>
       </div>
     </main>
 
-    <aside role="complementary" class="grid-item">
+    <aside class="grid-item">
       <h2>Aside</h2>
       <p>Quisque ac ultricies massa. Ut eu aliquam sem. Aenean sit amet pharetra tellus, eu sollicitudin sem. Curabitur sit amet erat mi. Proin rutrum pretium nisl nec ornare. Curabitur ultricies eros justo, vel tempus augue consequat eget. Ut lacinia orci a eleifend facilisis.</p>
     </aside>
 
-    <footer role="contentinfo" class="grid-item">
+    <footer class="grid-item">
       <h2>Footer</h2>
-      <p>Copyright © 2018 W3C <sup>®</sup> (<a href="http://www.csail.mit.edu/"><abbr title="Massachusetts Institute of Technology">MIT</abbr></a>, <a href="http://www.ercim.eu/"><abbr title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>,
-        <a href="http://www.keio.ac.jp/">Keio</a>, <a href="http://ev.buaa.edu.cn/">Beihang</a>) <a href="/Consortium/Legal/ipr-notice">Usage policies apply</a>.
-      </p>
+      <p>Footer information.</p>
     </footer>
 
   </body>
diff --git a/working-examples/css-new-window-warn/index.html b/working-examples/css-new-window-warn/index.html
index 50c13211a4..2547c2c6a2 100644
--- a/working-examples/css-new-window-warn/index.html
+++ b/working-examples/css-new-window-warn/index.html
@@ -1,58 +1,38 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <head>
-<title>Pop-Up Warning</title>
-<style type="text/css">
-body
-{
-margin-left:2em;
-margin-right:2em;
-}
-:focus
-{
-outline: 0;
-}
-a.info
-{
-position:relative;
-z-index:24;
-background-color:#ccc;
-color:#000;
-text-decoration:none
-}
-a.info:hover, a.info:focus, a.info:active
-{
-z-index:25;
-background-color:#ff0
-}
-a.info span
-{
-position: absolute;
-left: -9000px;
-width: 0;
-overflow: hidden;
-}
-a.info:hover span, a.info:focus span, a.info:active span 
-{
-display:block;
-position:absolute;
-top:1em; left:1em; width:12em;
-border:1px solid #0cf;
-background-color:#cff;
-color:#000;
-text-align: center
-}
-div.example
-{
-margin-left: 5em;
-}
-</style>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+	<title>Link opens in new window notification</title>
+	<style>
+		body {
+        background:#fff;
+        color: #000;
+        font: 1rem/1.5 system-ui, "Segoe UI", Roboto, Helvetica, sans-serif;
+      }
+
+		[hidden]{
+			display:none;
+		}
+
+		.new-window-icon{
+			fill:currentColor;
+			height:0.75rem;
+			margin-inline-start:0.3em;
+			vertical-align:middle;
+			width:0.75rem;
+		}
+	</style>
 </head>
 <body>
-<h1>Pop-Up Warning</h1>
-<p>
-This is an example of an <a  target="_blank" class="info" href="http://example.com/popup_advisory_technique.html"><strong>External link</strong><span>Opens a new window</span></a>
-</p>
+	<svg hidden>
+		<symbol id="new-window-icon" viewBox="0 0 12 12">
+			<title id="new-win-desc">opens in a new window</title>			
+			<polygon points="11.586 .414 8.276 .828 9.284 1.836 5.354 5.767 4.914 6.207 5.793 7.086 6.233 6.646 10.164 2.716 11.172 3.724 11.586 .414"/><path d="M0.8279429,0 C0.628094614,0 0.394731398,0.0711675057 0.232949452,0.232949452 C0.0711675057,0.394731398 0,0.62768085 0,0.8279429 L0,11.1720571 C0,11.3719054 0.0711675057,11.6052686 0.232949452,11.7670505 C0.394731398,11.9288325 0.62768085,12 0.8279429,12 L11.1720571,12 C11.3719054,12 11.6052686,11.9288325 11.7670505,11.7670505 C11.9288325,11.6052686 12,11.3723192 12,11.1720571 L12,4.96558858 L10.7587063,4.96558858 L10.7587063,10.7582925 L1.24212123,10.7582925 L1.24212123,1.24170747 L7.44858975,1.24170747 L7.44858975,0.000413764568 L0.828356665,0.000413764568 L0.8279429,0 Z"/>
+		</symbol>
+	</svg>
+
+<h1>Link opens in new window notification</h1>
+<p>This is an example of an <a aria-describedby="new-win-desc" href="https://example.com" rel="noopener" target="_blank">external link<svg class="new-window-icon" aria-hidden="true" role="img"><use href="#new-window-icon"></use></svg></a></p>
 </body>
 </html>
\ No newline at end of file
diff --git a/working-examples/css-padding-focus-not-obscured/index.html b/working-examples/css-padding-focus-not-obscured/index.html
new file mode 100644
index 0000000000..befed6ed31
--- /dev/null
+++ b/working-examples/css-padding-focus-not-obscured/index.html
@@ -0,0 +1,200 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <title>Using CSS scroll-padding to un-obscure content</title>
+    <style>
+ 			:root {
+				font-size: 100%;
+				box-sizing: border-box;
+				-moz-osx-font-smoothing: grayscale;
+				-webkit-font-smoothing: antialiased;
+				--white: #fff;
+				--black: #000;
+				--banner-background:hsl(60,80%,90%);
+				--banner-border:hsl(0, 0%, 50%);
+				--default-focus-indicator:hsl(234, 72%, 42%);
+				--fixed-banner-focus-indicator:var(--black);
+
+				--height-dialog: 400px;
+				--breathing-room: 20px;
+				--scroll-padding: calc(var(--height-dialog) + var(--breathing-room));
+      }
+			
+			*,
+			*::after,
+			*::before {
+				box-sizing: border-box;
+			}
+			
+      body {
+				background: var(--white);
+        color: var(--black);
+        font: 1rem/1.5 system-ui, "Segoe UI", Roboto, Helvetica, sans-serif;
+				margin:0;
+      }
+
+      h1, h2, h3, h4, h5, h6 {
+        font-weight: 500;
+      }
+
+			.wrapper {
+				display:grid;
+				gap:1rem;
+				grid-template-columns: repeat(9, 1fr);
+				grid-template-rows:8rem auto minmax(10rem, max-content);
+        min-block-size: 100vh;
+			}
+
+			.wrapper > * {
+				border:1px solid var(--black);
+				padding:1rem;
+			}
+
+			.wrapper :focus-visible{
+				outline:2px solid transparent;
+				box-shadow:0 5px 0 0 var(--default-focus-indicator);
+			}
+
+			header {
+				align-items:center;
+				display:flex;
+				font-size:1.5rem;
+				font-weight:bold;
+				grid-column:1 / -1;
+				grid-row:1;
+			}
+
+			main {
+				grid-column:1 / 8;
+			}
+
+			aside {
+				grid-column:8 / 10;
+			}
+
+			footer {
+				grid-column:1 / -1;
+			}
+
+			@media (max-width: 50rem){
+ 				main{
+   				grid-column:1 / -1;
+  			}
+  
+  			aside{
+    			grid-column: 1 / -1;
+  			}
+			}
+
+			.fixed-position-banner{
+				background:var(--banner-background);
+				border:3px solid var(--banner-border);
+				margin-block-end: 0.5rem;
+				padding:1rem 1rem 5rem;
+				position:relative;
+				width:calc(100vw - 1rem);
+			}
+
+			@media (min-width: 50rem) {
+  			html {
+    			padding-bottom:var(--height-dialog);
+    			scroll-padding-bottom:var(--scroll-padding);
+  			}
+
+  			.fixed-position-banner {
+					margin-block-end:0;
+    			position:fixed;
+    			inset:auto 0 0 0;
+  			}
+			}
+
+			.fixed-position-banner a{
+				outline-color:var(--fixed-banner-focus-indicator);
+			}
+
+			.fixed-position-banner h2{
+				display:inline-block;
+				margin-block-start:0;
+				padding:0.25em;
+			}
+
+			.fixed-position-banner h2:focus-visible{
+				outline:2px solid var(--fixed-banner-focus-indicator);
+			}
+			
+			.close-banner{
+				background:hsl(0, 0%, 100%);
+				border:1px solid hsl(0, 0%, 50%);
+				border-radius:3px;
+				cursor:pointer;
+				font:inherit;
+				margin:0;
+				padding:0.33em;
+				position:absolute;
+				right:1rem;
+				top:1rem;
+			}
+
+			.close-banner-icon{
+				display:block;
+				height:1rem;
+				stroke:currentColor;
+				width:1rem;
+			}
+
+			.close-banner:focus-visible{
+				outline:2px solid var(--fixed-banner-focus-indicator);
+				outline-offset:2px;
+			}
+    </style>
+</head>
+<body>
+	<dialog class="fixed-position-banner">
+		<h2 tabindex="-1">Fixed-Position Banner</h2>
+		<button aria-label="close fixed-position banner" class="close-banner" type="button">
+			<svg aria-hidden="true" class="close-banner-icon" role="img" viewbox="0 0 16 16">
+				<line x1="0" y1="0" x2="15" y2="15"/>
+				<line x1="0" y1="15" x2="15" y2="0"/>
+			</svg>
+		</button>
+	</dialog>
+	<div class="wrapper">
+		<header>
+			<p>Header Content</p>
+		</header>
+		<main>
+			<h1>Main Content</h1>
+		</main>
+		<aside>
+			<h2>Sidebar Content</h2>
+			<p><a href="https://example.com">Here's an example link in the sidebar</a>.</p>
+		</aside>
+		<footer>
+			<h2>Footer Content</h2>
+			<p><a href="https://example.com">Here's an example link in the footer</a>.</p>
+		</footer>
+	</div>
+		<script>
+			window.addEventListener('DOMContentLoaded', () => {
+				const elFixedBanner = document.querySelector('dialog');
+				const elCloseBannerBtn = document.querySelector(".close-banner");
+  
+				elFixedBanner.show();
+
+				const getDialogHeight = () => {
+					const height = elFixedBanner.offsetHeight;
+					document.documentElement.style.setProperty('--height-dialog', `${height}px`);
+					document.documentElement.style.setProperty('--breathing-room', `${height ? 20 : 0}px`);
+				}
+				const observer = new ResizeObserver(getDialogHeight);
+				observer.observe(elFixedBanner);
+
+				elCloseBannerBtn.addEventListener("click", function(e){
+					elFixedBanner.close();
+				}, false);
+			});
+		</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/working-examples/css-pointer-spacing/index.html b/working-examples/css-pointer-spacing/index.html
index d0f152f1d9..f4cf5d0e84 100644
--- a/working-examples/css-pointer-spacing/index.html
+++ b/working-examples/css-pointer-spacing/index.html
@@ -1,188 +1,165 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-<title>Working example - Using min-height and min-width to ensure sufficient target spacing</title>	
+	<meta charset="UTF-8">
+	<title>Working example - Using min-height and min-width to ensure sufficient target spacing</title>	
 
-<style>
-    
+	<style>
+		
 /* =============== Shared pagination styles =============== */
 
-nav, ol, li, h4 {
-   margin: 0;
+body{
+	background:#fff;
+	color:#000;
+	font: 1rem/1.5 system-ui, "Segoe UI", Roboto, Helvetica, sans-serif;
 }
 
-nav.pag {
-   color: black;
-   background-color: pink;
+nav, ol, li, h4 {
+	margin: 0;
 }
 
 .dis {
-   color:grey;
-   background:white
-   }
-
-h4 {
-   color: black;
-   background-color: #fdf; /* just to indicate the heading area adjacent to the pagination menu above */
+	color:grey;
+	background:white
 }
-    
+
 ol.pagination-1,
 ol.pagination-2 {
-    list-style-type: none;
+	list-style-type: none;
+	margin-bottom:1.5rem;
 }
-    
+
 ol.results p {
-   margin: 0 0 1em 0;
+	margin: 0 0 1em 0;
 }  
 
-ol.pagination-1 li span,
-ol.pagination-2 li span  {
-   color:grey;
-}     
+a.previous  {
+	color:#666;
+}    
 
-/* =============== Example 1 pagination styles =============== */
-
-ol.pagination-1 li {
-   display: inline-block; 
-   min-width: 44px;
-   min-height: 44px;
-   text-align: center;
-   color:black;
-   background-color:#fed; /* just to indicate the target spacing area adjacent to the heading below  */
+a[aria-current=page] {
+	color: white;
+	background-color: black;
 }
 
-ol.pagination-1 li + li a {
-  border-left: 1px solid #bbb;
+a.previous:hover, a[aria-current=page]:hover{
+	outline:none;
 }
 
-ol.pagination-1 li a,
-ol.pagination-1 li strong,
-ol.pagination-1 li span  {
-   display: block;
-   margin: 12px;
-   padding:4px 8px;
-}
+/* =============== Example 1 pagination styles =============== */
 
-ol.pagination-1 li span  {
-   padding:4px 0;
+ol.pagination-1 li {
+	display: inline-block; 
+	min-width: 44px;
+	min-height: 44px;
+	text-align: center;
+	color:black;
+	background-color:#fed; /* just to indicate the target spacing area adjacent to the heading below  */
 }
 
-ol.pagination-1 li strong {
-   color: white;
-   background-color: black;
+ol.pagination-1 li a  {
+	display: block;
+	margin: 12px;
+	padding:4px 8px;
 }
 
 a:hover, 
 a:focus {
-   outline: 3px solid #c04;
+	outline: 3px solid #c04;
 }
 
 /* =============== Example 2 pagination styles =============== */
 
 ol.pagination-2 {
-display:flex;
-flex-wrap: wrap;
+	display:flex;
+	flex-wrap: wrap;
 }
 
-ol.pagination-2 a,
-ol.pagination-2 strong,
-ol.pagination-2 span {
-   display: block;
-   line-height:44px;
-   border: 2px solid #fff;
-   text-align: center; 
-   min-height:44px;
-   min-width: 44px;
-   padding: 0 0.2em;
+ol.pagination-2 a{
+	display: block;
+	line-height:44px;
+	text-align: center; 
+	min-height:44px;
+	min-width: 44px;
+	padding: 0 0.2em;
 }
 
 ol.pagination-2 li {
-   color:black;
-   background-color:#fed; /* just to indicate the target spacing area adjacent to the heading below */
-}
-
-ol.pagination-2 strong {
-   border-top: 3px solid black;
+	color:black;
+	background-color:#fed;
+	margin:0.1rem;
 }
 
-ol.pagination-2 a:hover, 
-ol.pagination-2 a:focus {
-   outline:none;
-   border: 2px solid #c04;
-}
-
-
 </style>
-	
+
 </head>
 
 <body>
 
-<h1>Working example of using min-height and min-width to ensure sufficient target spacing</h1>
-
-<p>This example relates to technique <a href="../../techniques/css/target-padding.html">C42</a>.</p>
-
-<h2>Example 1 (display: inline-block, min-height: 44px and min-width: 44px set on list items inside pagination menu)</h2>
-<p>The first example shows a situation where the targets (in this case, the linked numbers in th pagination menu) are smaller than 44 x 44 CSS pixels. However, the list items that contain them have a minimum height and width of 44 px set, so that sufficient target spacing is assured.</p>
-<h3>Search results (invented):</h3>
-<nav class="pag" aria-label="pagination menu">
-  <ol class="pagination-1">
-    <li><span>previous</span></li>
-	<li><strong>1</strong></li>
-    <li><a href="#">2</a></li>
-    <li><a href="#">3</a></li>
-    <li><a href="#">4</a></li>
-    <li><a href="#">5</a></li>
-    <li><a href="#">next</a></li>
-  </ol>
-</nav>
-
-<ol class="results">
-<li>
-<h4><a href="#">Garbage Delight by Dennis Lee (2014-05-06) (NoDust) by | HC | Good</a></h4>
-<p>HarperCollins, 1800. Condition: Good.</p>
-</li>
-<li>
-<h4><a href="#">Frederick S Perls: In and out the garbage pail by Frederick S Perls (1969-05-03)</a></h4>
-<p>Real People Press, 1804. Shows some signs of wear, and may have some markings on the inside.</p>
-</li>
-<li>
-<h4><a href="#">Lila Karp: The Queen Is in the Garbage (Classic Feminist Writers) by Lila Karp (2007-05-01) </a></h4>
-<p>1838. Condition: Very Good. Published by Belmont Books, 1969.</p>
-</li>
-</ol>
-
-
-<h2>Example 2 (display: flex, min-height: 44px and min-width: 44px set on links inside pagination menu)</h2>
-<p>The second example uses min-width and min-height on the targets (the linked numbers in the pagination menu) and not on the parent container, thereby meeting this target spacing Success Criterion <em>and</em> the AAA Success Criterion 2.5.5 Target Size.</p>
-<h3>Search results (invented):</h3>
-<nav class="pag" aria-label="pagination menu">
-  <ol class="pagination-2">
-    <li><span>previous</span></li>
-	<li><strong>1</strong></li>
-    <li><a href="#">2</a></li>
-    <li><a href="#">3</a></li>
-    <li><a href="#">4</a></li>
-    <li><a href="#">5</a></li>
-    <li><a href="#">next</a></li>
-  </ol>
-</nav>
-
-<ol class="results">
-<li>
-<h4><a href="#">Garbage Delight by Dennis Lee (2014-05-06) (NoDust) by | HC | Good</a></h4>
-<p>HarperCollins, 1800. Condition: Good.</p>
-</li>
-<li>
-<h4><a href="#">Frederick S Perls: In and out the garbage pail by Frederick S Perls (1969-05-03)</a></h4>
-<p>Real People Press, 1804. Shows some signs of wear, and may have some markings on the inside.</p>
-</li>
-<li>
-<h4><a href="#">Lila Karp: The Queen Is in the Garbage (Classic Feminist Writers) by Lila Karp (2007-05-01) </a></h4>
-<p>1838. Condition: Very Good. Published by Belmont Books, 1969.</p>
-</li>
-</ol>
+	<h1>Working example of using min-height and min-width to ensure sufficient target spacing</h1>
+
+	<p>This example relates to technique <a href="../../techniques/css/C42.html">C42</a>.</p>
+
+	<h2>Example 1 (display: <code class="language-css">inline-block</code>, <code class="language-css">min-height:44px</code> and <code class="language-css">min-width:44px</code> set on list items inside pagination menu)</h2>
+	<p>The first example shows a situation where the targets (in this case, the linked numbers in the pagination menu) are smaller than 44 &#215; 44 CSS pixels. However, the list items that contain them have a minimum height and width of 44px, so that sufficient target spacing is assured.</p>
+	<h3>Search results (invented):</h3>
+	<nav class="pag" aria-label="pagination">
+		<ol class="pagination-1">
+			<li><a class="previous">previous</a></li>
+			<li><a aria-current="page">1</a></li>
+			<li><a href="#">2</a></li>
+			<li><a href="#">3</a></li>
+			<li><a href="#">4</a></li>
+			<li><a href="#">5</a></li>
+			<li><a href="#">next</a></li>
+		</ol>
+	</nav>
+
+	<ol class="results">
+		<li>
+			<h4><a href="#">Garbage Delight by Dennis Lee (2014-05-06) (NoDust) by | HC | Good</a></h4>
+			<p>HarperCollins, 1800. Condition: Good.</p>
+		</li>
+		<li>
+			<h4><a href="#">Frederick S Perls: In and out the garbage pail by Frederick S Perls (1969-05-03)</a></h4>
+			<p>Real People Press, 1804. Shows some signs of wear, and may have some markings on the inside.</p>
+		</li>
+		<li>
+			<h4><a href="#">Lila Karp: The Queen Is in the Garbage (Classic Feminist Writers) by Lila Karp (2007-05-01) </a></h4>
+			<p>1838. Condition: Very Good. Published by Belmont Books, 1969.</p>
+		</li>
+	</ol>
+
+
+	<h2>Example 2 (<code class="language-css">display: flex</code>, <code class="language-css">min-height:44px</code> and <code class="language-css">min-width:44px</code> set on links inside pagination menu)</h2>
+	<p>The second example uses <code class="language-css">min-width</code> and <code class="language-css">min-height</code> on the targets (the linked numbers in the pagination menu) and not on the parent container, thereby meeting this target spacing Success Criterion <em>and</em> the AAA Success Criterion 2.5.5 Target Size.</p>
+	<h3>Search results (invented):</h3>
+	<nav class="pag" aria-label="pagination">
+		<ol class="pagination-2">
+			<li><a class="previous">previous</a></li>
+			<li><a aria-current="page">1</a></li>
+			<li><a href="#">2</a></li>
+			<li><a href="#">3</a></li>
+			<li><a href="#">4</a></li>
+			<li><a href="#">5</a></li>
+			<li><a href="#">next</a></li>
+		</ol>
+	</nav>
+
+	<ol class="results">
+		<li>
+			<h4><a href="#">Garbage Delight by Dennis Lee (2014-05-06) (NoDust) by | HC | Good</a></h4>
+			<p>HarperCollins, 1800. Condition: Good.</p>
+		</li>
+		<li>
+			<h4><a href="#">Frederick S Perls: In and out the garbage pail by Frederick S Perls (1969-05-03)</a></h4>
+			<p>Real People Press, 1804. Shows some signs of wear, and may have some markings on the inside.</p>
+		</li>
+		<li>
+			<h4><a href="#">Lila Karp: The Queen Is in the Garbage (Classic Feminist Writers) by Lila Karp (2007-05-01) </a></h4>
+			<p>1838. Condition: Very Good. Published by Belmont Books, 1969.</p>
+		</li>
+	</ol>
 
 </body>
 </html>
diff --git a/working-examples/css-reduced-motion-query/index.html b/working-examples/css-reduced-motion-query/index.html
index 5a7ec90b96..b666d616e1 100644
--- a/working-examples/css-reduced-motion-query/index.html
+++ b/working-examples/css-reduced-motion-query/index.html
@@ -1,11 +1,15 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
   <title>Motion triggered by user interaction</title>
   <style type="text/css">
     body
     {
+      background: #fff;
+      color:#000;
+      font: 1rem/1.5 system-ui, "Segoe UI", Roboto, Helvetica, sans-serif;      
       margin-left:2em;
       margin-right:2em;
     }
@@ -13,6 +17,7 @@
     button {
       background-color: black;
       color: white;
+      font:inherit;
       padding: 1em 2em;
     }
 
@@ -50,9 +55,9 @@
 </head>
 <body>
 <h1>Motion triggered by user interaction</h1>
-<p>This example demonstrates hover (and focus) motion on a button that is disabled when the 'prefers-reduced-motion' CSS Media Query is set to 'reduce', and the user-agent has that option set.</p>
+<p>This example demonstrates hover and focus motion on a <code class="language-html">button</code> that is disabled when the <code class="language-css">prefers-reduced-motion</code> <abbr title="Cascading Style Sheets">CSS</abbr> Media Query is set to 'reduce', and the user agent has that option set.</p>
 <p>
-  <button>Motion disabled when 'prefers-reduced-motion' Media Query triggered</button>
+  <button type="button">Motion disabled when 'prefers-reduced-motion' Media Query triggered</button>
 </p>
 
 </body>
diff --git a/working-examples/css-reflow-url/index.html b/working-examples/css-reflow-url/index.html
index 778e5beac8..ee88fe6bcd 100644
--- a/working-examples/css-reflow-url/index.html
+++ b/working-examples/css-reflow-url/index.html
@@ -3,27 +3,19 @@
     <head>
     <meta charset="UTF-8">
     <title>Allowing for Reflow with Long URLs</title>
-    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
-    <script>
-$(document).ready(function(){
-    $("button").click(function(){
-        $("a").toggleClass("wrapped");
-    });
-});
-</script>
     <style>
 /* Reflow Styling */
 
-header[role="banner"] {
+header{
 	grid-area: header;
 }
-main[role="main"] {
+main{
 	grid-area: main;
 }
-aside[role="complementary"] {
+aside {
 	grid-area: aside;
 }
-footer[role="contentinfo"] {
+footer {
 	grid-area: footer;
 }
 .grid {
@@ -50,8 +42,9 @@
 	box-sizing: inherit;
 }
 body {
-	font-family: Noto Sans, Trebuchet MS, Helvetica Neue, Arial, sans-serif;
+  font: 1rem/1.5 system-ui, "Segoe UI", Roboto, Helvetica, sans-serif;
 	background-color: #fafafc;
+	color:#000;
 	margin: 0;
 }
 a:hover {
@@ -72,7 +65,7 @@
 	font-size: 1.2em;
 	margin-top: 0;
 }
-header[role="banner"] {
+header {
 	background-color: #005a9c;
 	margin-top: 1em;
 }
@@ -96,14 +89,14 @@
 header nav ul li a {
 	color: #ffffff;
 }
-main[role="main"] {
+main {
 	background: #ffffff;
 	padding-bottom: 0;
 }
-aside[role="complementary"] {
+aside {
 	border-left: 1px solid #dddddd;
 }
-footer[role="contentinfo"] {
+footer {
 	color: #ffffff;
 	background-color: #3b3b3b;
 }
@@ -120,51 +113,72 @@
 	border: 1px solid #ddd;
 	padding: 1rem;
 }
-    /* URL styling */
-    /* specific for IE10 & 11, they do not support these declarations with "a" or ".wrapped" selector
-      also, must use "word-wrap" property rather than "overflow-wrap" */
-    
-@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
-* {
-	word-wrap: break-word;
+
+button{
+	border:1px solid #001e50;
+	color:#fff;
+	font:inherit;
+	padding:0.5em;
 }
+
+button[aria-pressed=true]{
+	background:#001e50;
+	color:#fff;
 }
 
-/* for all Edge, does not support these declarations with "a" or ".wrapped" selector, so must use "*" selector */
-@supports (-ms-ime-align:auto) {
- * {
-word-wrap: break-word;
- overflow-wrap: break-word;
+button[aria-pressed=false]{
+	background:#0054ae;
+	color:#fff;
 }
+
+button:focus-visible{
+	outline: 1px solid #001e50;
+	outline-offset: 2px;
 }
-/* all other browsers long url styling */
 
 .wrapped {
-	word-wrap:break-word;
+	/* word-wrap:break-word; */
 	overflow-wrap: break-word;
 }
 </style>
     </head>
 
     <body class="grid">
-<header role="banner" class="grid-item"> <a href="https://w3.org/"><img alt="W3C" class="logo" src="https://www.w3.org/WAI/assets/images/w3c.svg"></a>
+<header class="grid-item"> <a href="https://w3.org/"><img alt="W3C" class="logo" src="https://www.w3.org/WAI/assets/images/w3c.svg"></a>
     </header>
-<main role="main" class="grid-item">
-  <h1>Allowing for Reflow with Long URLs</h1>
+<main class="grid-item">
+  <h1>Allowing for Reflow with Long <abbr title="Uniform Resource Locator">URL</abbr>s</h1>
   <p>Long URLs can break reflow when the page is zoomed. See the technique <a href="../../techniques/css/TBC">Allowing for Reflow with Long URLs and Strings of Text</a> for further details.</p>
 
-  <p>The default state of this page is to be 320px wide (like a mobile-sized display) with no styling on the links. You should see link-text breaking the boundaries of their containers. Some of which will cause horizontal scrolling at 320px wide, or you will see the URLs break-out of their container. When the style 'a.wrapped {overflow-wrap: break-word;} is toggled with the button, the long URLs will wrap within their respective containers. </p>
-  <button>Toggle CSS for long URLs</button>  
+  <p>The default state of this page is to be 320px wide (like a mobile-sized display) with no styling on the links. You should see link-text breaking the boundaries of their containers. Some of which will cause horizontal scrolling at 320px wide, or you will see the URLs break-out of their container. When the style '<code class="language-css">a.wrapped {overflow-wrap: break-word;}</code> is toggled with the button, the long URLs will wrap within their respective containers. </p>
+  <button aria-pressed="false" class="toggle-wrapping" type="button">Toggle CSS for long URLs</button>  
 
   <p>Example - URL with equal signs, underscores, ampersands, and dashes, but some long sections of unbroken alphanumeric characters.
-  Note: due to the * selector all examples work in IE/Edge styled or not.</p>
-  <ul>
-    <li><a href="#">https://www.somecompany.com/gp/product/0060899220/ref=s9u_ri_gw_i7/135-1685811-9188658?ie=UTF8&amp;pd_rd_r=83748ec1-7f0811e898f0e51cfb7ffc73&amp;pd_rd_w=KYrDt&amp;pd_rd_wg=lx9SR&amp;pf_rd_m=ATVPDKIKX0DER&amp;pf_rd_s=&amp;pf_rd_r=3868N2MAQAMF45G1WDFW&amp;pf_rd_t=367013868N2MAQAMF45G1WDFW&amp;pf_rd_p=5cd472c0-39fe-4ebd-be4b-f95163d1a3f5&amp;pf_rd_i=desktop</a></li>
-  </ul>
+  <p><a class="long-url" href="#">https://www.somecompany.com/gp/product/0060899220/ref=s9u_ri_gw_i7/135-1685811-9188658?ie=UTF8&amp;pd_rd_r=83748ec1-7f0811e898f0e51cfb7ffc73&amp;pd_rd_w=KYrDt&amp;pd_rd_wg=lx9SR&amp;pf_rd_m=ATVPDKIKX0DER&amp;pf_rd_s=&amp;pf_rd_r=3868N2MAQAMF45G1WDFW&amp;pf_rd_t=367013868N2MAQAMF45G1WDFW&amp;pf_rd_p=5cd472c0-39fe-4ebd-be4b-f95163d1a3f5&amp;pf_rd_i=desktop</a>
+	</p>
   
 </main>
-<footer role="contentinfo" class="grid-item">
+<footer class="grid-item">
     <h2>Footer</h2>
+		<p>Footer content</p>
 </footer>
+<script>
+	document.addEventListener("DOMContentLoaded", function(e){
+		const toggleBtn = document.querySelector(".toggle-wrapping");
+		const targetUrl = document.querySelector(".long-url");
+		
+		toggleBtn.addEventListener("click", function(e){
+			let elm = e.currentTarget;
+			if(elm.getAttribute("aria-pressed") === "false"){
+				elm.setAttribute("aria-pressed", "true");
+				targetUrl.classList.add("wrapped");
+			}
+			else{
+				elm.setAttribute("aria-pressed", "false");
+				targetUrl.classList.remove("wrapped");
+			}
+		}, false);
+	});
+</script>
 </body>
 </html>
diff --git a/working-examples/css-sticky/index.html b/working-examples/css-sticky/index.html
index 4c68afb3b3..94dbf86d4d 100644
--- a/working-examples/css-sticky/index.html
+++ b/working-examples/css-sticky/index.html
@@ -28,7 +28,6 @@
 
     @media (min-height: 480px) {
       footer {
-        position: -webkit-sticky;
         position: sticky;
         bottom: 0;
       }
@@ -42,10 +41,10 @@
 
     /* Content Styling */
 
-    header[role="banner"]       { grid-area: header; }
-    main[role="main"]           { grid-area: main; }
-    aside[role="complementary"] { grid-area: aside; }
-    footer[role="contentinfo"]  { grid-area: footer; }
+    header  { grid-area: header; }
+    main  { grid-area: main; }
+    aside { grid-area: aside; }
+    footer { grid-area: footer; }
 
     .grid,
     .subgrid {
@@ -103,8 +102,9 @@
     }
 
     body {
-      font-family: Noto Sans,Trebuchet MS,Helvetica Neue,Arial,sans-serif;
+      font: 1rem/1.5 system-ui, "Segoe UI", Roboto, Helvetica, sans-serif;
       background-color: #fafafc;
+      color:#000;
       margin: 0;
     }
 
@@ -211,7 +211,7 @@
       </nav>
     </header>
     
-    <main role="main" class="grid-item">
+    <main class="grid-item">
       
       <h1>Using media queries to un-fix sticky headers / footers</h1>
       <p>The objective of this technique is to be able to present content without sticky headers and footers when the space of the viewport is limited. This may be because of a device held in landscape mode or by zooming on a dektop.</p>
@@ -253,17 +253,14 @@ <h3>Panel 4</h3>
 
     </main>
     
-    <aside role="complementary" class="grid-item">
+    <aside class="grid-item">
       <h2>Aside</h2>
       <p>Quisque ac ultricies massa. Ut eu aliquam sem. Aenean sit amet pharetra tellus, eu sollicitudin sem. Curabitur sit amet erat mi. Proin rutrum pretium nisl nec ornare. Curabitur ultricies eros justo, vel tempus augue consequat eget. Ut lacinia orci a eleifend facilisis.</p>
     </aside>
     
-    <footer role="contentinfo" class="grid-item">
+    <footer class="grid-item">
       <h2>Footer</h2>
-      <p>Copyright © 2018 W3C <sup>®</sup>      
-        <span class="footer-links">(<a href="http://www.csail.mit.edu/"><abbr title="Massachusetts Institute of Technology">MIT</abbr></a>, <a href="http://www.ercim.eu/"><abbr title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>,
-        <a href="http://www.keio.ac.jp/">Keio</a>, <a href="http://ev.buaa.edu.cn/">Beihang</a>) <a href="/Consortium/Legal/ipr-notice">Usage policies apply</a>.</span>      
-      </p>
+      <p>Footer content</p>
     </footer>
 
   </body>
diff --git a/working-examples/css-text-spacing/index.html b/working-examples/css-text-spacing/index.html
index 8d631b03a0..ba5e4d3dfd 100644
--- a/working-examples/css-text-spacing/index.html
+++ b/working-examples/css-text-spacing/index.html
@@ -1,58 +1,59 @@
-<html lang="en"><head>
-    <meta charset="UTF-8">
-    <title></title>
-    <style>        nav ul {
-            list-style-type: none;
-        }
-        nav li {
-            display: inline-block;
-            background-color: #333;
-
-        }
-        nav a {
-            padding: 3px;
-            display: block;
-            color: #fff;
-        }
-        .example1 li {
-            width: 10ex;
-        }
-        .example2 li {
-
-        }
-
-        .example3 {
-          width:30em;background:#ccc;
-        }
-
-</style>
-
-  </head>
-
-  <body>
-
-
-    <main role="main">      
-        <h1>Examples for small containers allow for text spacing</h1>
-        <p>The following examples are to show the code from technique <a href="../css/link-TBC">Allowing for text spacing without wrapping</a>.</p>
-        <section>
-            <h2>Example 1 - Fixed width</h2>
-            <nav class="example1">
-                <ul>
-                    <li><a href="/">Home</a></li>
-                    <li><a href="/contact/">Contact</a></li>
-                </ul>
-            </nav>
-        </section>
-        <section>
-            <h2>Example 2 - variable width</h2>
-            <nav class="example2">
-                <ul>
-                    <li><a href="/">Home</a></li>
-                    <li><a href="/contact/">Contact</a></li>
-                </ul>
-            </nav>
-        </section>
-    </main>
-
-</body></html>
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<title>Allowing for text spacing without wrapping</title>
+	<style>
+		body{
+			background: #fff;
+			color:#000;
+			font: 1rem/1.5 system-ui, "Segoe UI", Roboto, Helvetica, sans-serif;
+		}
+
+		nav ul {
+			list-style-type: none;
+		}
+		nav li {
+			display: inline-block;
+			background-color: #333;
+
+		}
+		nav a {
+			padding: 3px;
+			display: block;
+			color: #fff;
+		}
+		.example1 li {
+			width: 10ex;
+		}
+		.example2 li {
+			display:inline-block;
+		}
+
+	</style>
+</head>
+<body>
+	<main>      
+		<h1>Examples for allowing text spacing without wrapping</h1>
+		<p>The following examples are to show the code from technique <a href="../../Techniques/css/C35.html">Allowing for text spacing without wrapping</a>.</p>
+		<section>
+			<h2>Example 1 - Fixed width</h2>
+			<nav class="example1">
+				<ul>
+					<li><a href="/">Home</a></li>
+					<li><a href="/contact/">Contact</a></li>
+				</ul>
+			</nav>
+		</section>
+		<section>
+			<h2>Example 2 - variable width</h2>
+			<nav class="example2">
+				<ul>
+					<li><a href="/">Home</a></li>
+					<li><a href="/contact/">Contact</a></li>
+				</ul>
+			</nav>
+		</section>
+	</main>
+</body>
+</html>
diff --git a/working-examples/css-two-focus-colors/dotted.html b/working-examples/css-two-focus-colors/index.html
similarity index 52%
rename from working-examples/css-two-focus-colors/dotted.html
rename to working-examples/css-two-focus-colors/index.html
index f09fb87099..9a828b9761 100644
--- a/working-examples/css-two-focus-colors/dotted.html
+++ b/working-examples/css-two-focus-colors/index.html
@@ -1,31 +1,29 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
 <head>
-    <title>Example of dotted indicator</title>
+    <title>Example of a two-color focus indicator</title>
     <style>
-        
         *:focus {
-        box-shadow: 0 0 0px 1px white;
-        outline: dotted;
+            /* inner indicator */
+            outline: 2px #F9F9F9 solid;
+            outline-offset: 0;
+            /* outer indicator */
+            box-shadow: 0 0 0 4px #193146;
         }
-        *:focus:not(:focus-visible) { outline: none }
-        a:hover { outline: none;}
-        a:active { outline: none;}
-        
-        .white a:link {color: #ffffff; }
-        .white a:visited {color: #ffffff; }
-        .black a:link {color: #000000; }
         
-        .one {background-color: black;text-align: center;color: #ffffff; }
-        .two {background-color: blue; text-align: center; color: #ffffff;}
-        .three {background-color: white; text-align: center}
-        .four {background-color: #0B0096; text-align: center;color: #ffffff;}
+        .white a:link { color: #ffffff; }
+        .white a:visited { color: #ffffff; }
+        .black a:link { color: #000000; }
         
+        .one { background-color: black; text-align: center; color: #ffffff; }
+        .two { background-color: blue; text-align: center; color: #ffffff; }
+        .three { background-color: white; text-align: center; }
+        .four { background-color: #0B0096; text-align: center; color: #ffffff; }
     </style>
 </head>
-<body >
 
-    <h1>Example page for a 2 color focus ring - dotted</h1>
+<body>
+    <h1>Example of a two-color focus indicator</h1>
 
     <p>The following links and inputs demonstrate the same focus indicator on multiple background colors.</p>
 
@@ -41,7 +39,5 @@ <h1>Example page for a 2 color focus ring - dotted</h1>
     <div class="two white"><br><br><a href="#" >Test 1</a><br><br></div><br>
     <div class="three black"><br><br><a href="#" >Test 2</a><br><br></div><br>
     <div class="four white"><br><br><a href="#" >Test 3</a><br><br></div><br>
-
-
 </body>
 </html>
diff --git a/working-examples/css-two-focus-colors/lined.html b/working-examples/css-two-focus-colors/lined.html
deleted file mode 100644
index a578f9a182..0000000000
--- a/working-examples/css-two-focus-colors/lined.html
+++ /dev/null
@@ -1,48 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-    <title>Example of lined indicator</title>
-    <style>
-        
-        *:focus {
-            outline: 2px transparent solid;
-            box-shadow: 0 0 0 2px #F9F9D1, 0 0 0 4px #396196, 0 0 4px 8px #F9F9D1;
-            z-index: 1000;
-            overflow: visible;
-        }
-        a:hover { outline: none;}
-        a:active { outline: none;}
-        
-        .white a:link {color: #ffffff; }
-        .white a:visited {color: #ffffff; }
-        .black a:link {color: #000000; }
-        
-        .one {background-color: black;text-align: center;color: #ffffff; }
-        .two {background-color: blue; text-align: center; color: #ffffff;}
-        .three {background-color: white; text-align: center}
-        .four {background-color: #0B0096; text-align: center;color: #ffffff;}
-        
-    </style>
-</head>
-<body >
-
-    <h1>Example page for a 2 color focus ring - lined</h1>
-
-    <p>The following links and inputs demonstrate the same focus indicator on multiple background colors.</p>
-
-    <form>
-    <p><label for="firstname">First name:</label> <input type="text" name="firstname" id="firstname"></p>
-    <p><label for="lastname">Last name:</label> <input type="text" name="lastname" id="lastname"></p>
-    </form>
-    <p>
-        <a href="#">Test link</a>.
-    </p>
-
-    <div class="one white"><br><br><a href="#" >Test 0</a><br><br></div><br>
-    <div class="two white"><br><br><a href="#" >Test 1</a><br><br></div><br>
-    <div class="three black"><br><br><a href="#" >Test 2</a><br><br></div><br>
-    <div class="four white"><br><br><a href="#" >Test 3</a><br><br></div><br>
-
-
-</body>
-</html>
diff --git a/working-examples/definition-list-contact-info/index.html b/working-examples/definition-list-contact-info/index.html
deleted file mode 100644
index 9f507eea0f..0000000000
--- a/working-examples/definition-list-contact-info/index.html
+++ /dev/null
@@ -1,22 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <title>Contact Information with Definition List</title>
-    <style type="text/css">
-    body {font-family: Arial;}
-    dt, dd{float: left;margin: 0;padding: 0;}
-    dt{clear:both;font-weight: bold}
-    dt span{display: inline-block; width: 70px;}
-    dd span{display: inline-block; margin-right: 5px;}
-    </style>
-</head>
-<body>
-<h1>Example of definition list displaying contact information</h1>
-<dl>
-<dt><span>name:</span></dt><dd><span>John Doe</span></dd>
-<dt><span>tel:</span></dt><dd><span>01-2345678</span></dd>
-<dt><span>fax:</span></dt><dd><span>02-3456789</span></dd>
-<dt><span>email:</span></dt><dd><span>johndoe@someemail.com</span></dd>
-</dl>
-</body>
-</html>
diff --git a/working-examples/description-list-contact-info/index.html b/working-examples/description-list-contact-info/index.html
new file mode 100644
index 0000000000..7b8a86d8fc
--- /dev/null
+++ b/working-examples/description-list-contact-info/index.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <title>Contact information with description List</title>
+    <style>
+        :root {
+        font-size: 100%;
+        box-sizing: border-box;
+        }
+
+        *,*::after,*::before {
+        box-sizing: inherit;
+        }
+
+        body {
+        background:#fff;
+        color:#000;
+        font: 1rem/1.5 system-ui, "Segoe UI", Roboto, Helvetica, sans-serif;
+        }
+
+        dl div{
+        display:grid;
+        gap:0.25rem;
+        grid-template-columns:minmax(4rem, max-content) max-content;
+        }
+
+        dt, dd{
+        margin:0;
+        }
+
+      dt{
+          font-weight:bold;
+        }
+
+
+    </style>
+</head>
+<body>
+<h1>Example of description list displaying contact information</h1>
+<dl>
+    <div>
+      <dt>Name:</dt>
+      <dd>Taisha Silveri</dd>
+    </div>
+    <div>
+      <dt>Tel:</dt>
+      <dd>503-123-4567</dd>
+    </div>
+    <div>
+      <dt>Email:</dt>
+      <dd>taisha-silveri@example.com</dd>
+    </div>
+  </dl>
+</body>
+</html>
diff --git a/working-examples/device-motion-sensor-input-failure/index.html b/working-examples/device-motion-sensor-input-failure/index.html
index cc80d6cb05..30ae2747d0 100644
--- a/working-examples/device-motion-sensor-input-failure/index.html
+++ b/working-examples/device-motion-sensor-input-failure/index.html
@@ -1,11 +1,22 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
 <head>
-<style type="text/css">
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <style>
+    body{
+      background: #fff;
+      color:#000;
+      font-family:system-ui;
+    }
 
-.slidecontainer {
-  width:100%;
-}
+    button{
+      font:inherit;
+    }
+
+  .slidecontainer {
+    width:100%;
+  }
 </style>
 
 <title>WCAG Failure Example of Motion Sensor</title> 
@@ -14,14 +25,14 @@
 
 <pre class="output"></pre>
 
-  <h1>Slider Motion Sensor Failure Example </h1>
+  <h1>Slider Motion Sensor Failure Example</h1>
 
  <p>Open this slider on a device with a motion sensor, such as a smart phone or tablet. Tilt the device to the right and left to adjust the slider value. The decrease and increase buttons also adjust the value. There is no way to deactivate the motion sensor. </p>
  <p>Note: This example may not work across all browsers.</p>
   
 <div class="slidecontainer">
 <button type="button" name="decrease" onclick="decreaseFunction()">Decrease Value</button>
-<input type="range" min="1" max="100" value="50" class="slider" id="motionSlider">
+<input aria-label="demo slider" type="range" min="1" max="100" value="50" class="slider" id="motionSlider">
 <button type="button" name="increase" onclick="increaseFunction()">Increase Value</button>
 <p aria-live="polite">Slider Value: <span id="demo"></span></p>
 </div>
diff --git a/working-examples/device-motion-sensor-input/index.html b/working-examples/device-motion-sensor-input/index.html
index ac13e13316..6370ff9e39 100644
--- a/working-examples/device-motion-sensor-input/index.html
+++ b/working-examples/device-motion-sensor-input/index.html
@@ -1,11 +1,21 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
 <head>
-<style type="text/css">
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <style>
+    body{
+      background: #fff;
+      color:#000;
+      font-family:system-ui;
+    }
 
-.slidecontainer {
+    button{
+      font:inherit;
+    }
+  .slidecontainer {
   width:100%;
-}
+  }
 </style>
 
 <title>WCAG Example of Motion Sensor</title> 
@@ -14,14 +24,14 @@
 
 <pre class="output"></pre>
 
-  <h1>Slider Motion Sensor Example </h1>
+  <h1>Slider Motion Sensor Example</h1>
 
  <p>Open this slider on a device with a motion sensor, such as a smart phone or tablet. Tilt the device to the right and left to adjust the slider value. The decrease and increase buttons also adjust the value.  The check box disables the motion sensing adjustment.</p>
  <p>Note: This example may not work across all browsers.</p>
   
 <div class="slidecontainer">
 <button type="button" name="decrease" onclick="decreaseFunction()">Decrease Value</button>
-<input type="range" min="1" max="100" value="50" class="slider" id="motionSlider">
+<input aria-label="demo slider" type="range" min="1" max="100" value="50" class="slider" id="motionSlider">
 <button type="button" name="increase" onclick="increaseFunction()">Increase Value</button>
 <p aria-live="polite">Slider Value: <span id="demo"></span></p>
 </div>
diff --git a/working-examples/failure-table-headers-incorrect-association/index.html b/working-examples/failure-table-headers-incorrect-association/index.html
index 456855e27b..da918cd39e 100644
--- a/working-examples/failure-table-headers-incorrect-association/index.html
+++ b/working-examples/failure-table-headers-incorrect-association/index.html
@@ -4,8 +4,8 @@
 
 <head>
 	<title>Failure of Success Criterion 1.3.1 for incorrectly associating table headers and content via the headers and id attributes - example</title>
-	<link title="oturn-style" rel="stylesheet" href="style/oturn.css" type="text/css" />
-	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
+	<link title="oturn-style" rel="stylesheet" href="style/oturn.css" type="text/css"/>
+	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
 	
 	<style type="text/css">
         .extraneous {background-color:#fcc;}
diff --git a/working-examples/failure-td-not-th/index.html b/working-examples/failure-td-not-th/index.html
index 72f4061cc4..62d37e8b84 100644
--- a/working-examples/failure-td-not-th/index.html
+++ b/working-examples/failure-td-not-th/index.html
@@ -6,7 +6,7 @@
 <head>
 	<title>Failure of Success Criterion 1.3.1 for not correctly marking up table headers - example 2</title>
 	
-	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
+	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
 	
 	<style type="text/css">
         .extraneous {background-color:#fcc;}
diff --git a/working-examples/focus-pseudo-class/index.html b/working-examples/focus-pseudo-class/index.html
index 0c9228d503..089a628947 100644
--- a/working-examples/focus-pseudo-class/index.html
+++ b/working-examples/focus-pseudo-class/index.html
@@ -1,27 +1,41 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml">
+<!DOCTYPE html>
+<html lang="en">
 <head>
-<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-<style type="text/css">
-      input.text:focus {
-        background-color: #7FFF00; 
-		color: #000;
-      }
-      input[type=checkbox]:focus + label, input[type=radio]:focus + label {
-        background-color: #FF6;
-		color: #000; 
-      }
-    </style>
-  <title>Highlighting elements that receive focus</title></head>
+<meta charset="utf-8">
+<title>Highlighting elements that receive focus</title>
+<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+</head>
+<style>
+   body {
+    background:#fff;
+    color:#000;
+    font: 1rem/1.5 system-ui, "Segoe UI", Roboto, Helvetica, sans-serif;
+  }
+
+  input[type=text]:focus-visible {
+    outline:2px solid #0054AE;
+    outline-offset:2px;
+  }
+
+  input[type=checkbox]:focus + label, input[type=radio]:focus + label {
+    background-color:#1E2EB8; 
+    color:#FFF;
+  }
+  </style>
   <body>
-    <form method="post" action="form.php">
-      <p><label for="fname">Name: </label>
-        <input class="text" type="text" name="fname" id="fname" />
-      </p>
-      <p>
-        <input type="radio" name="sex" value="male" id="sm" /> <label for="sm">Male</label><br />
-        <input type="radio" name="sex" value="female" id="sf" /> <label for="sf">Female</label>
-      </p>
+    <form>
+      <div>
+        <label for="fname">Name: </label>
+        <input autocomplete="name" type="text" name="fname" id="fname">
+      </div>
+      <div>
+        <input type="radio" name="sex" value="male" id="sm">
+        <label for="sm">Male</label>
+      </div>
+      <div>			
+        <input type="radio" name="sex" value="female" id="sf">
+        <label for="sf">Female</label>
+      </div>
     </form>
   </body>
 </html>
diff --git a/working-examples/input-resize/index.html b/working-examples/input-resize/index.html
index 3607b7ef55..a7799490c4 100644
--- a/working-examples/input-resize/index.html
+++ b/working-examples/input-resize/index.html
@@ -1,24 +1,52 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml">
+<!DOCTYPE html>
+<html lang="en">
 <head>
-<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 <title>Example of resizing input with CSS</title>
-<style media="all" type="text/css">
-h1 { font-size: 2em; }
-p, label, input { font-size: 1em; }
+<style>
+  body {
+    background:#fff;
+    color:#000;
+    font: 1rem/1.5 system-ui, "Segoe UI", Roboto, Helvetica, sans-serif;
+  }
+	
+	h1 { font-size: 2em;}
+	
+	p, label { font-size: 1em; }
+	
+	label{
+		display: block;
+	}
+	
+	input { font:inherit; }
+	
+	div{
+	margin-bottom: 1rem;
+	}
 </style>
 </head>
 
 <body>
-
-<h1>Contact Us</h1>
-<p>Please provide us with your details and we will contact you as soon as we can. Note that all of the form fields are required.</p>
-<form>
-<p><label for="fname">First Name: </label><input type="text" name="fname" id="fname" /></p>
-<p><label for="lname">Last Name: </label><input type="text" name="lname" id="lname" /></p>
-<p><label for="phone">Telephone: </label><input type="text" name="phone" id="phone" /></p>
-<p><label for="email">Email: </label><input type="text" name="email" id="email" /></p>
-<input type="submit" name="Submit" value="Submit" id="Submit" />
-</form>
+	<h1>Contact Us</h1>
+	<p>Please provide us with your details and we will contact you as soon as we can.
+		Note that all of the form fields are required.</p>
+	<div>
+		<label for="fname">First Name</label>
+		<input autocomplete="given-name" id="fname" name="fname" type="text">
+	</div>
+	<div>
+		<label for="lname">Last Name</label>
+		<input autocomplete="family-name" id="lname" name="lname" type="text">
+	</div>
+	<div>
+		<label for="phone">Telephone</label>
+		<input autocomplete="tel" id="phone" name="phone" type="text">
+	</div>
+	<div>
+		<label for="email">Email</label>
+		<input autocomplete="email" id="email" name="email" type="text">
+	</div>
+	<input id="submit" name="submit" type="submit" value="Submit">
 </body>
 </html>
diff --git a/working-examples/label-in-name-general/example1.html b/working-examples/label-in-name-general/example1.html
index 266ed070cc..3b5b598fc1 100644
--- a/working-examples/label-in-name-general/example1.html
+++ b/working-examples/label-in-name-general/example1.html
@@ -1,12 +1,25 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" lang="EN">
+<!DOCTYPE html>
+<html lang="en">
 <head>
-<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+
 <title>Example of Simple Radio Button Group</title>
+<style>
+	html{
+		background: white;
+		color:black;
+	}
+	body{
+		font: 1rem/1.5 system-ui, "Segoe UI", Roboto, Helvetica, sans-serif;
+	}
+</style>
 </head>
 <body>
 <fieldset>
-	<legend>Call me when balance exceeds $10,000?</legend><br />
+
+	<legend>Call me when balance exceeds $10,000?</legend><br/>
+
 	<input type="radio" id="yes" name="callme" value="yes">
 	<label for="yes">Yes</label>
 	<input type="radio" id="no" name="callme" value="no">
diff --git a/working-examples/label-in-name-general/example2.html b/working-examples/label-in-name-general/example2.html
index a771642e80..86b2079d6b 100644
--- a/working-examples/label-in-name-general/example2.html
+++ b/working-examples/label-in-name-general/example2.html
@@ -1,22 +1,43 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" lang="EN">
+<!DOCTYPE html>
+<html lang="en">
 <head>
-	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-	<title>Example of Stacked Labels</title>
-	<style type="text/css">
-		form
-		{font-family:Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-weight:400;}
-		.example-page
-		{padding:60px 30px 30px}
-		.form-group
-		{margin-bottom:20px}
-		.label
-		{font-size:1.2rem;line-height:1.3;color:#0b0c0c;display:block;margin-bottom:5px}
-		.hint
-		{font-size:1rem;line-height:1.25;display:block;margin-bottom:5px;color:#6f777b}
-		.input
-		{font-size: 1rem;line-height: 1.25;box-sizing: border-box;width: 70%;height: 40px;padding:5px;border: 2px solid #0b0c0c; border-radius: 0;}
 
+	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+
+	<title>Example of Stacked Labels</title>
+	<style>
+		html{
+		background: white;
+		color:black;
+		}
+		body{
+		font: 1rem/1.5 system-ui, "Segoe UI", Roboto, Helvetica, sans-serif;
+		}
+		input{
+			border: 2px solid #0b0c0c;
+			border-radius: 0;
+			font:inherit;
+			letter-spacing: inherit;
+			padding:0.4em;
+			width: 70%;
+			word-spacing: inherit;
+		}
+		.form-group {
+			margin-bottom:1.125rem
+		}
+		.label {
+			color:#0b0c0c;
+			display:block;
+			font-size:1.2rem;
+			line-height:1.3;
+			margin-bottom:5px}
+		.hint{
+			color:#6f777b;
+			display:block;
+			font-size:1rem;
+			line-height:1.25;
+			margin-bottom:0.26em;
+		}
 	</style>
 
 </head>
@@ -40,9 +61,6 @@
 			</span>
 			<input class="input" id="example-2" name="example-2" type="text" aria-describedby="example-2-hint">
 		</div>
-
-
-
 	</form>
 </body>
 </html>
\ No newline at end of file
diff --git a/working-examples/label-in-name-general/example3.html b/working-examples/label-in-name-general/example3.html
index 4ada843417..be8caef54d 100644
--- a/working-examples/label-in-name-general/example3.html
+++ b/working-examples/label-in-name-general/example3.html
@@ -1,8 +1,25 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" lang="EN">
+<!DOCTYPE html>
+<html lang="en">
 <head>
-<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+
 <title>Example of Work Phone input set</title>
+<style>
+	html{
+		background: white;
+		color:black;
+		}
+		body{
+		font: 1rem/1.5 system-ui, "Segoe UI", Roboto, Helvetica, sans-serif;
+		}
+		input{
+			border: 1px solid #0b0c0c;
+			font:inherit;
+			letter-spacing: inherit;
+			word-spacing: inherit;
+		}
+</style>
 </head>
 <body>
 <div role="group" aria-labelledby="groupLabel">
diff --git a/working-examples/label-in-name-general/example4.html b/working-examples/label-in-name-general/example4.html
index 59190c27e1..6d45acce4c 100644
--- a/working-examples/label-in-name-general/example4.html
+++ b/working-examples/label-in-name-general/example4.html
@@ -1,8 +1,19 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" lang="EN">
+<!DOCTYPE html>
+<html lang="en">
 <head>
-<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+
 <title>Example of Range of Inputs</title>
+<style>
+	html{
+		background: white;
+		color:black;
+		}
+		body{
+		font: 1rem/1.5 system-ui, "Segoe UI", Roboto, Helvetica, sans-serif;
+		}
+</style>
 </head>
 <body>
 <fieldset>
diff --git a/working-examples/link-contrast/index.html b/working-examples/link-contrast/index.html
index ff34f9ff55..26dc051a71 100644
--- a/working-examples/link-contrast/index.html
+++ b/working-examples/link-contrast/index.html
@@ -1,10 +1,8 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml">
-
+<!DOCTYPE html>
+<html lang="en">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
-
-<style type="text/css" media="screen">
+<style>
 
 body {
 	font-family: Arial, Helvetica, sans-serif;
diff --git a/working-examples/link-wraps-block/alerticon.png b/working-examples/link-wraps-block/alerticon.png
deleted file mode 100644
index d2e286f4ed..0000000000
Binary files a/working-examples/link-wraps-block/alerticon.png and /dev/null differ
diff --git a/working-examples/link-wraps-block/index.html b/working-examples/link-wraps-block/index.html
deleted file mode 100644
index 2de8f1c8e5..0000000000
--- a/working-examples/link-wraps-block/index.html
+++ /dev/null
@@ -1,33 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-<meta content="en-us" http-equiv="Content-Language">
-<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
-<title>H30 Example 7</title>
-<link href="css/fonts.css" rel="stylesheet" type="text/css">
-<style type="text/css">
-    article {padding:.5em;background-color:#c0c0c0;width:40%;}
-    a {text-decoration:none;}
-    p.more {text-decoration:underline;width:100%;text-align:right;}
-    .alertimg {padding-right:.5em;float:left;}
-</style>
-</head>
-
-<body>
-
-<h3>Example 7</h3>
-<p>Working example of using a link to wrap block level elements in HTML5.</p>
-
-<article>
-<a href="news.html">
-<h3>Budget Debate Continues in Parliament</h3>
-<p>
-<img class="alertimg" src="alerticon.png" alt="Breaking News" height="30" width="30">Members of Parliament continued vigorous debate on three challenging issues surrounding the upcoming year's budget.</p>
-<p class="more">Read more</p>
-</a>
-</article>
-
-
-</body>
-</html>
diff --git a/working-examples/pdf-abbreviation-definitions/headers-definitions.docx b/working-examples/pdf-abbreviation-definitions/headers-definitions.docx
deleted file mode 100644
index 4cf6dab94f..0000000000
Binary files a/working-examples/pdf-abbreviation-definitions/headers-definitions.docx and /dev/null differ
diff --git a/working-examples/pdf-abbreviation-definitions/headers-definitions.pdf b/working-examples/pdf-abbreviation-definitions/headers-definitions.pdf
deleted file mode 100644
index 92d6c1cd44..0000000000
Binary files a/working-examples/pdf-abbreviation-definitions/headers-definitions.pdf and /dev/null differ
diff --git a/working-examples/pdf-abbreviation-definitions/pdf-abbreviation-definitions.docx b/working-examples/pdf-abbreviation-definitions/pdf-abbreviation-definitions.docx
new file mode 100644
index 0000000000..f057a45370
Binary files /dev/null and b/working-examples/pdf-abbreviation-definitions/pdf-abbreviation-definitions.docx differ
diff --git a/working-examples/pdf-abbreviation-definitions/headers-definitions.odt b/working-examples/pdf-abbreviation-definitions/pdf-abbreviation-definitions.odt
similarity index 100%
rename from working-examples/pdf-abbreviation-definitions/headers-definitions.odt
rename to working-examples/pdf-abbreviation-definitions/pdf-abbreviation-definitions.odt
diff --git a/working-examples/pdf-abbreviation-definitions/pdf-abbreviation-definitions.pdf b/working-examples/pdf-abbreviation-definitions/pdf-abbreviation-definitions.pdf
new file mode 100644
index 0000000000..a5b710e6db
Binary files /dev/null and b/working-examples/pdf-abbreviation-definitions/pdf-abbreviation-definitions.pdf differ
diff --git a/working-examples/pdf-alt-entry-to-an-image/alt-entry-to-an-image.docx b/working-examples/pdf-alt-entry-to-an-image/alt-entry-to-an-image.docx
index 5ebc035ebb..00f3daa490 100644
Binary files a/working-examples/pdf-alt-entry-to-an-image/alt-entry-to-an-image.docx and b/working-examples/pdf-alt-entry-to-an-image/alt-entry-to-an-image.docx differ
diff --git a/working-examples/pdf-alt-entry-to-an-image/alt-entry-to-an-image.pdf b/working-examples/pdf-alt-entry-to-an-image/alt-entry-to-an-image.pdf
index ded5c6705d..fb7839fe49 100644
Binary files a/working-examples/pdf-alt-entry-to-an-image/alt-entry-to-an-image.pdf and b/working-examples/pdf-alt-entry-to-an-image/alt-entry-to-an-image.pdf differ
diff --git a/working-examples/pdf-bookmarks/bookmarks.pdf b/working-examples/pdf-bookmarks/bookmarks.pdf
index 517244afe4..a5cc43869a 100644
Binary files a/working-examples/pdf-bookmarks/bookmarks.pdf and b/working-examples/pdf-bookmarks/bookmarks.pdf differ
diff --git a/working-examples/pdf-table/table.docx b/working-examples/pdf-complex-table/complex-table.docx
similarity index 100%
rename from working-examples/pdf-table/table.docx
rename to working-examples/pdf-complex-table/complex-table.docx
diff --git a/working-examples/pdf-complex-table/complex-table.pdf b/working-examples/pdf-complex-table/complex-table.pdf
new file mode 100644
index 0000000000..1adf23c016
Binary files /dev/null and b/working-examples/pdf-complex-table/complex-table.pdf differ
diff --git a/working-examples/pdf-decorative-image/decorative-image.docx b/working-examples/pdf-decorative-image/decorative-image.docx
index a6c9ad1770..2542435d16 100644
Binary files a/working-examples/pdf-decorative-image/decorative-image.docx and b/working-examples/pdf-decorative-image/decorative-image.docx differ
diff --git a/working-examples/pdf-decorative-image/decorative-image.pdf b/working-examples/pdf-decorative-image/decorative-image.pdf
index d1cf55f50d..be294a4e21 100644
Binary files a/working-examples/pdf-decorative-image/decorative-image.pdf and b/working-examples/pdf-decorative-image/decorative-image.pdf differ
diff --git a/working-examples/pdf-document-title/title-bar.pdf b/working-examples/pdf-document-title/title-bar.pdf
deleted file mode 100644
index 7148f76a02..0000000000
Binary files a/working-examples/pdf-document-title/title-bar.pdf and /dev/null differ
diff --git a/working-examples/pdf-form-labels/form-lc.pdf b/working-examples/pdf-form-labels/form-lc.pdf
deleted file mode 100644
index 69b81e482f..0000000000
Binary files a/working-examples/pdf-form-labels/form-lc.pdf and /dev/null differ
diff --git a/working-examples/pdf-form-labels/form.pdf b/working-examples/pdf-form-labels/form.pdf
deleted file mode 100644
index d04c90ef1a..0000000000
Binary files a/working-examples/pdf-form-labels/form.pdf and /dev/null differ
diff --git a/working-examples/pdf-headers-footers/headers-footers-oo.pdf b/working-examples/pdf-headers-footers/headers-footers-oo.pdf
index cfd08260b4..f05abd1f7c 100644
Binary files a/working-examples/pdf-headers-footers/headers-footers-oo.pdf and b/working-examples/pdf-headers-footers/headers-footers-oo.pdf differ
diff --git a/working-examples/pdf-headers-footers/headers-footers-word.docx b/working-examples/pdf-headers-footers/headers-footers-word.docx
new file mode 100644
index 0000000000..1d4a116aa7
Binary files /dev/null and b/working-examples/pdf-headers-footers/headers-footers-word.docx differ
diff --git a/working-examples/pdf-headers-footers/headers-footers-word.pdf b/working-examples/pdf-headers-footers/headers-footers-word.pdf
index b3dbfc48bd..6ec8f9fbc4 100644
Binary files a/working-examples/pdf-headers-footers/headers-footers-word.pdf and b/working-examples/pdf-headers-footers/headers-footers-word.pdf differ
diff --git a/working-examples/pdf-headers-footers/headers-footers.docx b/working-examples/pdf-headers-footers/headers-footers.docx
deleted file mode 100644
index 8e51a20f9f..0000000000
Binary files a/working-examples/pdf-headers-footers/headers-footers.docx and /dev/null differ
diff --git a/working-examples/pdf-headers-footers/headers-footers.odt b/working-examples/pdf-headers-footers/headers-footers.odt
index 89bf4fe9d0..2da8dfb025 100644
Binary files a/working-examples/pdf-headers-footers/headers-footers.odt and b/working-examples/pdf-headers-footers/headers-footers.odt differ
diff --git a/working-examples/pdf-headings/cooking.pdf b/working-examples/pdf-headings/cooking.pdf
index 75680e6c48..59f9619f16 100644
Binary files a/working-examples/pdf-headings/cooking.pdf and b/working-examples/pdf-headings/cooking.pdf differ
diff --git a/working-examples/pdf-interactive-form-fields/form-fields-keybd-lc.pdf b/working-examples/pdf-interactive-form-fields/form-fields-keybd-lc.pdf
deleted file mode 100644
index 1702b2afb0..0000000000
Binary files a/working-examples/pdf-interactive-form-fields/form-fields-keybd-lc.pdf and /dev/null differ
diff --git a/working-examples/pdf-interactive-form-fields/form-fields-keybd.pdf b/working-examples/pdf-interactive-form-fields/form-fields-keybd.pdf
index d04c90ef1a..954b6922dd 100644
Binary files a/working-examples/pdf-interactive-form-fields/form-fields-keybd.pdf and b/working-examples/pdf-interactive-form-fields/form-fields-keybd.pdf differ
diff --git a/working-examples/pdf-interactive-form-fields/form-to-ocr.svg b/working-examples/pdf-interactive-form-fields/form-to-ocr.svg
new file mode 100644
index 0000000000..282a9e9191
--- /dev/null
+++ b/working-examples/pdf-interactive-form-fields/form-to-ocr.svg
@@ -0,0 +1,21 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="751" height="528" viewBox="0 0 751 528"><g fill="none" fill-rule="evenodd"><text fill="#000" font-family="ArialMT, Arial" font-size="22">
+                    <tspan x=".5" y="20">Please complete the following form.</tspan>
+                </text><text fill="#000" font-family="ArialMT, Arial" font-size="22">
+                    <tspan x=".5" y="50">* = required</tspan>
+                </text><text fill="#000" font-family="ArialMT, Arial" font-size="22">
+                    <tspan x="0" y="113">Date you are available:</tspan>
+                </text><text fill="#000" font-family="ArialMT, Arial" font-size="22">
+                    <tspan x="101" y="192">First name *</tspan>
+                </text><text fill="#000" font-family="ArialMT, Arial" font-size="22">
+                    <tspan x="99" y="250">Last name *</tspan>
+                </text><text fill="#000" font-family="ArialMT, Arial" font-size="22">
+                    <tspan x="64.5" y="303">Email address *</tspan>
+                </text><text fill="#000" font-family="ArialMT, Arial" font-size="22">
+                    <tspan x="115" y="356">Telephone</tspan>
+                </text><text fill="#000" font-family="ArialMT, Arial" font-size="22">
+                    <tspan x="123" y="409">ZIP code *</tspan>
+                </text><text fill="#000" font-family="ArialMT, Arial" font-size="22">
+                    <tspan x="281.5" y="463">Screen reader user</tspan>
+                </text><text fill="#000" font-family="ArialMT, Arial" font-size="22">
+                    <tspan x="235.5" y="523">You will be contacted within a week</tspan>
+                </text><rect width="416" height="47" x="235.5" y="81.5" fill="#FFDCC3" stroke="#979797"/><rect width="515" height="47" x="235.5" y="163.5" fill="#FFDCC3" stroke="#979797"/><rect width="515" height="47" x="235.5" y="218" fill="#FFDCC3" stroke="#979797"/><rect width="515" height="47" x="235.5" y="272" fill="#FFDCC3" stroke="#979797"/><rect width="515" height="47" x="235.5" y="326" fill="#FFDCC3" stroke="#979797"/><rect width="251" height="47" x="235.5" y="380" fill="#FFDCC3" stroke="#979797"/><rect width="38" height="40" x="236" y="434" fill="#FFDCC3" stroke="#979797"/></g></svg>
\ No newline at end of file
diff --git a/working-examples/pdf-lang-phrase/lang-of-phrase.pdf b/working-examples/pdf-lang-phrase/lang-of-phrase.pdf
index 28fb5a32c4..6f6bfd407e 100644
Binary files a/working-examples/pdf-lang-phrase/lang-of-phrase.pdf and b/working-examples/pdf-lang-phrase/lang-of-phrase.pdf differ
diff --git a/working-examples/pdf-lang/language-en.pdf b/working-examples/pdf-lang/language-en.pdf
deleted file mode 100644
index 9906072c3a..0000000000
Binary files a/working-examples/pdf-lang/language-en.pdf and /dev/null differ
diff --git a/working-examples/pdf-link-alt-text/link-text-oo.pdf b/working-examples/pdf-link-alt-text/link-text-oo.pdf
index 6d71b9bd4a..70e3ed106a 100644
Binary files a/working-examples/pdf-link-alt-text/link-text-oo.pdf and b/working-examples/pdf-link-alt-text/link-text-oo.pdf differ
diff --git a/working-examples/pdf-links/links.pdf b/working-examples/pdf-links/links.pdf
index 28fb5a32c4..91f13e34b8 100644
Binary files a/working-examples/pdf-links/links.pdf and b/working-examples/pdf-links/links.pdf differ
diff --git a/working-examples/pdf-lists/lists.odt b/working-examples/pdf-lists/lists.odt
deleted file mode 100644
index befc69f768..0000000000
Binary files a/working-examples/pdf-lists/lists.odt and /dev/null differ
diff --git a/working-examples/pdf-lists/lists.pdf b/working-examples/pdf-lists/lists.pdf
index e7910aaa93..30d20215bc 100644
Binary files a/working-examples/pdf-lists/lists.pdf and b/working-examples/pdf-lists/lists.pdf differ
diff --git a/working-examples/pdf-name-role-value-form-fields/form.pdf b/working-examples/pdf-name-role-value-form-fields/form.pdf
new file mode 100644
index 0000000000..da370720fd
Binary files /dev/null and b/working-examples/pdf-name-role-value-form-fields/form.pdf differ
diff --git a/working-examples/pdf-ocr/ocr-example-tagged.pdf b/working-examples/pdf-ocr/ocr-example-tagged.pdf
index fb10c2ac20..a7ccbe60b5 100644
Binary files a/working-examples/pdf-ocr/ocr-example-tagged.pdf and b/working-examples/pdf-ocr/ocr-example-tagged.pdf differ
diff --git a/working-examples/pdf-ocr/ocr-example.pdf b/working-examples/pdf-ocr/ocr-example.pdf
index a02ba095a6..36710b5eea 100644
Binary files a/working-examples/pdf-ocr/ocr-example.pdf and b/working-examples/pdf-ocr/ocr-example.pdf differ
diff --git a/working-examples/pdf-page-numbers/page-numbers.docx b/working-examples/pdf-page-numbers/page-numbers.docx
index e4c1c64894..f264fa39c6 100644
Binary files a/working-examples/pdf-page-numbers/page-numbers.docx and b/working-examples/pdf-page-numbers/page-numbers.docx differ
diff --git a/working-examples/pdf-page-numbers/page-numbers.pdf b/working-examples/pdf-page-numbers/page-numbers.pdf
index e17e69b6bc..16e6f743e0 100644
Binary files a/working-examples/pdf-page-numbers/page-numbers.pdf and b/working-examples/pdf-page-numbers/page-numbers.pdf differ
diff --git a/working-examples/pdf-reading-order/reading-order-2cols-oo.odt b/working-examples/pdf-reading-order/reading-order-2cols-oo.odt
index 3eefff64cd..96e3c01de3 100644
Binary files a/working-examples/pdf-reading-order/reading-order-2cols-oo.odt and b/working-examples/pdf-reading-order/reading-order-2cols-oo.odt differ
diff --git a/working-examples/pdf-reading-order/reading-order-2cols-oo.pdf b/working-examples/pdf-reading-order/reading-order-2cols-oo.pdf
index 3fe735eeaf..8a338d9bcc 100644
Binary files a/working-examples/pdf-reading-order/reading-order-2cols-oo.pdf and b/working-examples/pdf-reading-order/reading-order-2cols-oo.pdf differ
diff --git a/working-examples/pdf-reading-order/reading-order-2cols-word.pdf b/working-examples/pdf-reading-order/reading-order-2cols-word.pdf
index 1a47ac16bb..0a3a9dd1a8 100644
Binary files a/working-examples/pdf-reading-order/reading-order-2cols-word.pdf and b/working-examples/pdf-reading-order/reading-order-2cols-word.pdf differ
diff --git a/working-examples/pdf-reading-order/reading-order.docx b/working-examples/pdf-reading-order/reading-order.docx
index 529bfd9352..fc138c7ddf 100644
Binary files a/working-examples/pdf-reading-order/reading-order.docx and b/working-examples/pdf-reading-order/reading-order.docx differ
diff --git a/working-examples/pdf-reading-order/reading-order.pdf b/working-examples/pdf-reading-order/reading-order.pdf
index e7961f7429..fa70eaa396 100644
Binary files a/working-examples/pdf-reading-order/reading-order.pdf and b/working-examples/pdf-reading-order/reading-order.pdf differ
diff --git a/working-examples/pdf-required-fields/required-fields-lc.pdf b/working-examples/pdf-required-fields/required-fields-lc.pdf
deleted file mode 100644
index b146b07d57..0000000000
Binary files a/working-examples/pdf-required-fields/required-fields-lc.pdf and /dev/null differ
diff --git a/working-examples/pdf-required-fields/required-fields.pdf b/working-examples/pdf-required-fields/required-fields.pdf
index 48b01f606c..7b05b47869 100644
Binary files a/working-examples/pdf-required-fields/required-fields.pdf and b/working-examples/pdf-required-fields/required-fields.pdf differ
diff --git a/working-examples/pdf-submit-button/submit-button-js.pdf b/working-examples/pdf-submit-button/submit-button-js.pdf
index 5b2107920c..5cbecbf8a7 100644
Binary files a/working-examples/pdf-submit-button/submit-button-js.pdf and b/working-examples/pdf-submit-button/submit-button-js.pdf differ
diff --git a/working-examples/pdf-table-headers/table-example-header-row.docx b/working-examples/pdf-table-headers/table-example-header-row.docx
new file mode 100644
index 0000000000..afe0be6f63
Binary files /dev/null and b/working-examples/pdf-table-headers/table-example-header-row.docx differ
diff --git a/working-examples/pdf-tables/table-example-noheaderrow.odt b/working-examples/pdf-table-headers/table-example-header-row.odt
similarity index 100%
rename from working-examples/pdf-tables/table-example-noheaderrow.odt
rename to working-examples/pdf-table-headers/table-example-header-row.odt
diff --git a/working-examples/pdf-tables/table-example-repaired.pdf b/working-examples/pdf-table-headers/table-example-repaired.pdf
similarity index 80%
rename from working-examples/pdf-tables/table-example-repaired.pdf
rename to working-examples/pdf-table-headers/table-example-repaired.pdf
index f2185f9a67..55639a0af0 100644
Binary files a/working-examples/pdf-tables/table-example-repaired.pdf and b/working-examples/pdf-table-headers/table-example-repaired.pdf differ
diff --git a/working-examples/pdf-table/table.pdf b/working-examples/pdf-table/table.pdf
deleted file mode 100644
index b8e1353851..0000000000
Binary files a/working-examples/pdf-table/table.pdf and /dev/null differ
diff --git a/working-examples/pdf-tables/table-example-noheaderrow.docx b/working-examples/pdf-tables/table-example-noheaderrow.docx
deleted file mode 100644
index 7114e16e0f..0000000000
Binary files a/working-examples/pdf-tables/table-example-noheaderrow.docx and /dev/null differ
diff --git a/working-examples/providing-single-point-control-slider/index.html b/working-examples/providing-single-point-control-slider/index.html
index b1c4e18137..7b003771bd 100644
--- a/working-examples/providing-single-point-control-slider/index.html
+++ b/working-examples/providing-single-point-control-slider/index.html
@@ -11,7 +11,7 @@
   <body>
   <h1>Custom control slider built on top of a native slider (Accessible faked slider)</h1>
   <p>This slider uses an actual <code>&lt;input type="range"&gt;</code> behind the scenes. This is what keyboard and touch + assistive technology users interact with. Mouse/stylus/touch users interact with the fake sliders.</p>
-    <p>Both the fake slider and the input are kept in sync via JavaScript. This is in preference over the <a href="https://www.w3.org/TR/wai-aria-practices-1.1/#slider">ARIA 1.1 Slider pattern</a>, since that pattern has known issues in touch + AT scenario (where AT will announce control behaviors that simply can't be done via JavaScript at the moment, such as "use volume keys to adjust" or "swipe up or down with one finger to adjust the value", which do however work with real range inputs). See also the larger discussion on <a href="https://github.com/w3c/aria-practices/issues/8">touch/mobile support for certain ARIA patterns</a>.</p>
+    <p>Both the fake slider and the input are kept in sync via JavaScript. This is in preference over the <a href="https://www.w3.org/WAI/ARIA/apg/patterns/slider/">ARIA 1.1 Slider pattern</a>, since that pattern has known issues in touch + AT scenario (where AT will announce control behaviors that simply can't be done via JavaScript at the moment, such as "use volume keys to adjust" or "swipe up or down with one finger to adjust the value", which do however work with real range inputs). See also the larger discussion on <a href="https://github.com/w3c/aria-practices/issues/8">touch/mobile support for certain ARIA patterns</a>.</p>
     <p>Overall you should style the native <code>&lt;input type="range"&gt;</code>, but if you have to use a custom approach then use a real (but hidden) range input approach.</p>
 
 <div id="sliderwrapper">
diff --git a/working-examples/providing-single-point-control-slider/pep.js b/working-examples/providing-single-point-control-slider/pep.js
index e16f567471..f6aa7101ee 100644
--- a/working-examples/providing-single-point-control-slider/pep.js
+++ b/working-examples/providing-single-point-control-slider/pep.js
@@ -578,7 +578,7 @@
         sr = this.targetingShadow(t);
         while (sr) {
 
-          // find the the element inside the shadow root
+          // find the element inside the shadow root
           st = sr.elementFromPoint(x, y);
           if (!st) {
 
@@ -1470,4 +1470,4 @@
 
   return pointerevents;
 
-}));
\ No newline at end of file
+}));
diff --git a/working-examples/radio-checkbox-resize/index.html b/working-examples/radio-checkbox-resize/index.html
deleted file mode 100644
index d290c6f69b..0000000000
--- a/working-examples/radio-checkbox-resize/index.html
+++ /dev/null
@@ -1,20 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml">
-<head>
-<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-<title>Example of resizing radio buttons and checkboxes with CSS</title>
-<style media="all" type="text/css">
-input.geomsize {
-width: 1.2em;
-height: 1.2em;}
-</style>
-</head>
-
-<body>
-
-<form>
-<p><input type="radio" name="r1" value="r1" id="r1" class="geomsize" /> <label for="r1">Example Radio Button</label></p>
-<p><input type="checkbox" name="c1" id="c1" value="c1" class="geomsize" /> <label for="c1">Example Checkbox</label></p>
-</form>
-</body>
-</html>
diff --git a/working-examples/script-action-buttons/index.html b/working-examples/script-action-buttons/index.html
index d27091cfcc..aa3bb5c471 100644
--- a/working-examples/script-action-buttons/index.html
+++ b/working-examples/script-action-buttons/index.html
@@ -1,11 +1,10 @@
- <?xml version="1.0" encoding="UTF-8"?>
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
-   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+ <!DOCTYPE html>
+ <html lang="en">
  <head>
- <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>Creating Action Buttons using JavaScript</title>
- <script type="text/javascript">
+ <script>
  //<![CDATA[
  // this is the function to perform the action.  This simple example just displays an alert message.
  function doSomething(event) {
@@ -29,6 +28,6 @@
    <form action="doSomething.aspx" onsubmit="return false;">
      <button type="button" id="actionButton" name="actionButton">Button to invoke JavaScript.</button>
    </form>
- <p>As in the previous example, the button element is given a unique id attribute; a script uses the Document Object Model (DOM) to find the button element by its id and add the onclick handler. The <code>action</code> attribute of the enclosing <code>form</code> element contains a script that will perform the action on the server. </p>
+ <p>As in the previous example, the button element is given a unique <code class="language-html">id</code> attribute; a script uses the Document Object Model (DOM) to find the button element by its id and add the onclick handler. The <code class="language-html">action</code> attribute of the enclosing <code class="language-html">form</code> element contains a script that will perform the action on the server.</p>
  </body>
  </html>
\ No newline at end of file
diff --git a/working-examples/script-action-links/index.html b/working-examples/script-action-links/index.html
index dd0cde6228..7c5162aa0f 100644
--- a/working-examples/script-action-links/index.html
+++ b/working-examples/script-action-links/index.html
@@ -1,9 +1,7 @@
-<?xml version="1.0" encoding="utf-8"?>
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
-   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
  <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+ <meta charset="utf-8">
  <title>Creating Action Links using JavaScript</title>
  <script type="text/javascript">
  //<![CDATA[
@@ -28,9 +26,9 @@
  </script>
  </head>
  <body onload="setUpActions();">
- <p>Here is the link to modify with a javascript action:
- <a href="http://example.com/noscript.html" id="actionLink" >Link to invoke JavaScript.</a></p>
+ <p>Here is the link to modify with a JavaScript action:
+ <a href="https://example.com/noscript.html" id="actionLink" >Link to invoke JavaScript.</a></p>
 
-<p>The anchor element on the page is given a unique <code>id</code> attribute.  The <code>href</code> attribute of the anchor element should contain a valid URI that will perform the action on the server or will load a Web page that explains that JavaScript is required to interact with the site.  A script uses the Document Object Model (DOM) to find the anchor element by its id and add the onclick handler to the anchor element. Note that the anchor element must be loaded into the DOM before it can be found and modified. This is usually accomplished by calling the script from the onload event of the <code>body</code> element.  The script to add the onclick event handler will only execute if the user agent supports and has JavaScript enabled.   The unmodified anchor element will be used if the user agent does not support JavaScript.   Using JavaScript to add the action to the anchor element will ensure that the user is not confused by an unresponsive action if they load the Web page in a user agent which does not support JavaScript.</p>
+<p>The anchor element on the page is given a unique <code class="language-html">id</code> attribute.  The <code class="language-html">href</code> attribute of the anchor element should contain a valid URI that will perform the action on the server or will load a Web page that explains that JavaScript is required to interact with the site. A script uses the Document Object Model (DOM) to find the anchor element by its id and add the onclick handler to the anchor element. Note that the anchor element must be loaded into the DOM before it can be found and modified. This is usually accomplished by calling the script from the onload event of the <code class="language-html">body</code> element. The script to add the onclick event handler will only execute if the user agent supports and has JavaScript enabled. The unmodified anchor element will be used if the user agent does not support JavaScript. Using JavaScript to add the action to the anchor element will ensure that the user is not confused by an unresponsive action if they load the Web page in a user agent which does not support JavaScript.</p>
  </p></body>
  </html>
diff --git a/working-examples/script-action-on-div/index.html b/working-examples/script-action-on-div/index.html
index 4b7ee90508..cff2eae583 100644
--- a/working-examples/script-action-on-div/index.html
+++ b/working-examples/script-action-on-div/index.html
@@ -3,7 +3,7 @@
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
- <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+ <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
  <title>Creating Divs with Actions using JavaScript</title>
 <style type="text/css" media="screen">
 #active {
@@ -54,7 +54,7 @@
  <div>
   <span id="active" tabindex="0" role="button">Do Something</span>
  </div>
-<br />
+<br/>
  <div aria-live="polite"> 
  <div id="message" style="display:none">Hello, world!</div>
  </div>
diff --git a/working-examples/script-change-css-property/index.html b/working-examples/script-change-css-property/index.html
index 04907f2c25..36c508ee97 100644
--- a/working-examples/script-change-css-property/index.html
+++ b/working-examples/script-change-css-property/index.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
-<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 <title>Using a client-side JavaScript to change a CSS property</title>
 
 <script type="text/javascript">
diff --git a/working-examples/script-check-multiple-controls/index.html b/working-examples/script-check-multiple-controls/index.html
index 2544583fc9..1630a5c9ae 100644
--- a/working-examples/script-check-multiple-controls/index.html
+++ b/working-examples/script-check-multiple-controls/index.html
@@ -1,6 +1,7 @@
-<!DOCTYPE html SYSTEM "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml">
+<!DOCTYPE html>
+<html lang="en">
 	<head>
+		<meta charset="UTF-8">
 		<title>Validate multiple controls</title>
 		<script type="text/ecmascript"><!--
 			function validate() {
@@ -42,14 +43,14 @@ <h1>Validate multiple controls</h1>
 		<form action="multiple-controls.html" onsubmit="return validate()">
 			<p>
 				<label for="name">Name: </label>
-				<input type="text" name="name" id="name" />
+				<input autocomplete="name" type="text" name="name" id="name">
 			</p>
 			<p>
 				<label for="tel">Telephone number: </label>
-				<input type="text" name="tel" id="tel" />				
+				<input autocomplete="tel" type="tel" name="tel" id="tel">			
 			</p>
 			<p>
-				<input type="submit"/>
+				<input type="submit">
 			</p>
 		</form>
 	</body>
diff --git a/working-examples/script-control-blink/index.html b/working-examples/script-control-blink/index.html
index fd60d98249..0f5ba0e447 100644
--- a/working-examples/script-control-blink/index.html
+++ b/working-examples/script-control-blink/index.html
@@ -1,15 +1,15 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml">
+<!DOCTYPE html>
+<html lang="en">
 <head>
-<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 <title>Example of SCR22: Using scripts to control blinking and stop it in five seconds or less</title>
 </head>
 
 <body>
 
 <div id="blink1" class="highlight">New item!</div>
-<script type="text/javascript">
-<!--
+<script>
 // blink "on" state
 function show()
 {
@@ -24,12 +24,11 @@
 }
 // toggle "on" and "off" states every 450 ms to achieve a blink effect
 // end after 4500 ms (less than five seconds)
-for(var i=900; i < 4500; i=i+900)
+for(let i=900; i < 4500; i=i+900)
 {
 	setTimeout("hide()",i);
 	setTimeout("show()",i+450);
 }
--->
 </script>
 </body>
 </html>
diff --git a/working-examples/script-dynamic-select/index.html b/working-examples/script-dynamic-select/index.html
index 142a7abf69..807dd3766e 100644
--- a/working-examples/script-dynamic-select/index.html
+++ b/working-examples/script-dynamic-select/index.html
@@ -1,9 +1,7 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
-   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <head>
-<meta http-equiv="content-type" content="text/xhtml; charset=utf-8" />
+<meta charset="utf-8"/>
 <title>Dynamic Select Statements</title>
 <script type="text/javascript">
 //<![CDATA[
@@ -38,13 +36,7 @@
 		newOption.value = cList[i];  // assumes option string and value are the same
 		newOption.text=cList[i];
 		// add the new option
-		try {
-			cSelect.add(newOption);  // this will fail in DOM browsers but is needed for IE
-		}
-		catch (e) {
 			cSelect.appendChild(newOption);
-
-		}
 	}
 }
 //]]>
@@ -60,7 +52,7 @@ <h1>Dynamic Select Statements</h1>
 <option value="Asia">Asia</option>
 <option value="Europe">Europe</option>
 </select>
-<br />
+<br/>
 <label for="country">Select a country</label>
 <select id="country">
 <option value="0">Select a country</option>
diff --git a/working-examples/script-enable-alerts/index.html b/working-examples/script-enable-alerts/index.html
deleted file mode 100644
index a3f14a1ea9..0000000000
--- a/working-examples/script-enable-alerts/index.html
+++ /dev/null
@@ -1,45 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
-   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-<meta http-equiv="content-type" content="text/html; charset=utf-8" />
-<title>Enable Alerts</title>
-<script type="text/javascript">
-//<![CDATA[
-
-var bDoAlerts = false;  // global variable which specifies whether to display alerts or not
-/* function to modify alerts.*/
-function modifyAlerts(isEnabled) {
-   bDoAlerts = isEnabled;
-}
-/* wrapper function for displaying alerts.  Checks the value of bDoAlerts
-*and only calls the alert() function when bDoAlerts is true.
-*/
-function doAlert(aMessage) {
-    if (bDoAlerts) {
-       alert(aMessage);
-    }
-}
-// example usage - a loop to display famous quotes.
-var gCounter = -1;  // global to store counter
-// quotes variable would be initialized with famous quotations
-var quotes = new Array("quote 1", "quote 2", "quote 3", "quote 4", "quote 5");
-function showQuotes() {
-    if (++gCounter >= quotes.length) {
-       gCounter = 0;
-    }
-    doAlert(quotes[gCounter]);
-    setTimeout("showQuotes();", 5000);
-}
-
-//]]>
-</script>
-</head>
-<body onload="showQuotes();">
-
-<p>Press the button below to enable the display of famous quotes using an alert box<br />
-<button id="enableBtn" type="button" onclick="modifyAlerts(true);">Turn Alerts On</button>&nbsp;&nbsp;
-<button id="disableBtn" type="button" onclick="modifyAlerts(false);">Turn Alerts Off</button></p>
-</body>
-</html>
\ No newline at end of file
diff --git a/working-examples/script-expand-links/index.html b/working-examples/script-expand-links/index.html
index 29a9cb36bc..859fab0fa0 100644
--- a/working-examples/script-expand-links/index.html
+++ b/working-examples/script-expand-links/index.html
@@ -1,9 +1,10 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml">
+<!DOCTYPE html>
+<html lang="en">
 <head>
-<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 <title>Providing link expansions on demand</title>
-<script type="text/javascript">
+<script>
 var expanded = false;
 var linkContext = {
 	"hist":" version of The History of the Web",
@@ -57,7 +58,7 @@
 </head>
 <body>
 <h1>Books for download</h1>
-<p><button id="expand" onclick="toggle();">Expand Links</button></p>
+<p><button id="expand" onclick="toggle();" type="button">Expand Links</button></p>
 <ul>
 	<li>The History of the Web: <a href="http://example.com/history.docx" class="hist">Word</a>, <a href="http://example.com/history.pdf" class="hist">PDF</a>, <a href="http://example.com/history.html" class="hist">HTML</a> </li>
 	<li>Cooking for Nerds: <a href="http://example.com/history.docx" class="cook">Word</a>, <a href="http://example.com/history.pdf" class="cook">PDF</a>, <a href="http://example.com/history.html" class="cook">HTML</a> </li>
diff --git a/working-examples/script-form-validation-2/css/validate.css b/working-examples/script-form-validation-2/css/validate.css
index eee0f84799..9442176e02 100644
--- a/working-examples/script-form-validation-2/css/validate.css
+++ b/working-examples/script-form-validation-2/css/validate.css
@@ -30,3 +30,7 @@ legend
 	color: #000;
 	background-color: #fff;
 }
+
+fieldset div{
+	margin-bottom:1rem;
+}
diff --git a/working-examples/script-form-validation-2/index.php b/working-examples/script-form-validation-2/index.php
index 6db0deea54..eb8e2cd43a 100644
--- a/working-examples/script-form-validation-2/index.php
+++ b/working-examples/script-form-validation-2/index.php
@@ -68,13 +68,14 @@
 			$strError = "<h2>$iErrorCount Errors in Submission</h2>\n" . $strError;
 	}
 ?>
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
-<html>
+<!DOCTYPE HTML>
+<html lang="en">
 <head>
+	<meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">	
 	<title>Form Validation</title>
-	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-	<link href="css/validate.css" rel="stylesheet" type="text/css">
-	<script type="text/javascript" src="scripts/validate.js"></script>
+	<link href="css/validate.css" rel="stylesheet">
+	<script src="scripts/validate.js"></script>
 </head>
 <body>
 
@@ -106,22 +107,22 @@
 <div class="validationerrors"></div>
 <fieldset>
 <legend>Personal Details</legend>
-<p>
+<div>
 <label for="forename">Please enter your forename</label>
-<input type="text" size="20" name="forename" id="forename" class="string" value="<?php echo htmlspecialchars($strForename); ?>">
-</p>
-<p>
+<input autocomplete="given-name" type="text" size="20" name="forename" id="forename" class="string" value="<?php echo htmlspecialchars($strForename); ?>">
+</div>
+<div>
 <label for="age">Please enter your age</label> 
 <input type="text" size="20" name="age" id="age" class="number" value="<?php echo htmlspecialchars($strAge); ?>">
-</p>
-<p>
+</div>
+<div>
 <label for="email">Please enter your email address</label> 
-<input type="text" size="20" name="email" id="email" class="email" value="<?php echo htmlspecialchars($strEmail); ?>">
-</p>
+<input autocomplete="email" type="text" size="20" name="email" id="email" class="email" value="<?php echo htmlspecialchars($strEmail); ?>">
+</div>
 </fieldset>
-<p>
+<div>
 <input type="submit" name="signup" value="Sign up">
-</p>
+</div>
 </form>
 <?php
 	}
@@ -136,26 +137,26 @@
 <div class="validationerrors"></div>
 <fieldset>
 <legend>Second Form Details</legend>
-<p>
+<div>
 <label for="suggestion">Enter a suggestion</label>
 <input type="text" size="20" name="suggestion" id="suggestion" class="string" value="<?php echo htmlspecialchars($strSuggestion); ?>">
-</p>
-<p>
+</div>
+<div>
 <label for="optemail">Please enter your email address (optional)</label>
-<input type="text" size="20" name="optemail" id="optemail" class="optional email" value="<?php echo htmlspecialchars($strOptional); ?>">
-</p>
-<p>
+<input autocomplete="email" type="text" size="20" name="optemail" id="optemail" class="optional email" value="<?php echo htmlspecialchars($strOptional); ?>">
+</div>
+<div>
 <label for="rating">Please rate this suggestion</label> 
 <input type="text" size="20" name="rating" id="rating" class="number" value="<?php echo htmlspecialchars($strRating); ?>">
-</p>
-<p>
+</div>
+<div>
 <label for="jibberish">Enter some jibberish (optional)</label>
 <input type="text" size="20" name="jibberish" id="jibberish" value="<?php echo htmlspecialchars($strJibberish); ?>">
-</p>
+</div>
 </fieldset>
-<p>
+<div>
 <input type="submit" name="submit" value="Add Suggestion">
-</p>
+</div>
 </form>
 <?php } ?>
 </body>
diff --git a/working-examples/script-form-validation-2/validation.zip b/working-examples/script-form-validation-2/validation.zip
index 5269bfd3bb..2061058e5f 100644
Binary files a/working-examples/script-form-validation-2/validation.zip and b/working-examples/script-form-validation-2/validation.zip differ
diff --git a/working-examples/script-form-validation/index.html b/working-examples/script-form-validation/index.html
index 4e6bd66ea2..2f0da8d4da 100644
--- a/working-examples/script-form-validation/index.html
+++ b/working-examples/script-form-validation/index.html
@@ -1,27 +1,28 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
-<html>
+<!DOCTYPE HTML>
+<html lang="en">
 <head>
+	<meta charset="utf-8">
 	<title>ECMAScript Form Validation</title>
-	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-	<script type="text/javascript" src="validate.js"></script>
+	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">	
+	<script src="validate.js"></script>
 </head>
 <body>
 <h1>Form Validation</h1>
-<form id="numberform" method="post" action="form.php">
+<form id="numberform">
 <fieldset>
 <legend>Numeric Fields</legend>
-<p>
+<div>
 <label for="num1">Enter first number</label>
 <input type="text" size="20" name="num1" id="num1">
-</p>
-<p>
+</div>
+<div>
 <label for="num2">Enter second number</label>
 <input type="text" size="20" name="num2" id="num2">
-</p>
+</div>
 </fieldset>
-<p>
+<div>
 <input type="submit" name="submit" value="Submit Form">
-</p>
+</div>
 </form>
 </body>
 </html>
diff --git a/working-examples/script-hoverable/index.html b/working-examples/script-hoverable/index.html
index 5c295edd0e..835d329db2 100644
--- a/working-examples/script-hoverable/index.html
+++ b/working-examples/script-hoverable/index.html
@@ -1,10 +1,10 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
+	<meta charset="utf-8">
 	<title>Hover & Focus General Technique Example 1</title>
-	<link title="hover-focus-style" rel="stylesheet" href="hover-focus.css" type="text/css" />
+	<link title="hover-focus-style" rel="stylesheet" href="hover-focus.css" type="text/css">
     <script src="hover-focus.js" defer></script>
-	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 </head>
 
 <body>
diff --git a/working-examples/script-options-button-dialog/index.html b/working-examples/script-options-button-dialog/index.html
deleted file mode 100644
index 201f73932a..0000000000
--- a/working-examples/script-options-button-dialog/index.html
+++ /dev/null
@@ -1,86 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml">
-<head>
-<title>An options button that opens a dialog</title>
-<link type="text/css" rel="stylesheet" href="style.css" />
-<script type="text/javascript" src="shared.js"></script>
-<style type="text/css">
-a { color:blue; }
-a.clickPopup img { border:none; width:0; }
-
-div.popover { position:absolute; display:none; border:1px outset; background-color:beige; font-size:80%; background-color:#eeeeee; color:black; }
-div.popover h3 { margin:0; padding:0.1em 0.5em; background-color:navy; color:white; }
-#pop0001 { width:20em; }
-#pop0001 form { margin:0; padding:0.5em; }
-#pop0001 fieldset { margin-bottom:0.3em; padding-bottom:0.5em; }
-#pop0001 input, #pop0001 label { vertical-align:middle; }
-#pop0001 div.buttons { text-align:right; }
-#pop0001 div.buttons input { width:6em; }
-
-</style>
-<script type="text/javascript">
-function TogglePopup(evt,show)
-{
-	HarmonizeEvent(evt);
-	var src = evt.target;
-	if ("click" == evt.type)
-	{
-		evt.returnValue = false;
-	}
-	var popID = src.getAttribute("name");
-	if (popID)
-	{
-		var popup = document.getElementById(popID);
-		if (popup)
-		{
-			if (true == show)
-			{
-				popup.style.display = "block";
-			}
-			else if (false == show)
-			{
-				popup.style.display = "none";
-			}
-			else
-			{
-				popup.style.display = "block" == popup.style.display ? "none" : "block";
-			}
-			if ("block" == popup.style.display)
-			{
-				//window.alert(document.documentElement.scrollHeight);
-				popup.style.top = ((document.documentElement.offsetHeight - popup.offsetHeight) / 2 ) + 'px';
-				popup.style.left = ((document.documentElement.offsetWidth - popup.offsetWidth) / 2) + 'px';
-			}
-		}
-	}
-}
-</script>
-</head>
-<body>
-
-<h1>Popover - W3C Accessibility Samples</h1>
-
-<h2>Demo</h2>
-
-<p class="sample">You may click the following button to set options.</p>
-
-<button onclick="TogglePopup(event,true)" name="pop0001">Options</button>
-
-<div class="popover" id="pop0001">
-<h3>Edit Sort Information</h3>
-<form action="default.htm" onsubmit="this.parentNode.style.display='none'; return false;" onreset="this.parentNode.style.display='none'; return false;">
-<fieldset>
-<legend>Sort Order</legend> 
-
-<input type="radio" name="order" id="order_alpha" /><label for="order_alpha">Alphabetical</label>
-<input type="radio" name="order" id="order_default" checked="true" /><label for="order_default">Default</label>
-</fieldset>
-<div class="buttons">
-<input type="submit" value="OK" />
-<input type="reset" value="Cancel" />
-</div>
-</form>
-</div>
-
-</body>
-</html>
diff --git a/working-examples/script-options-button-dialog/shared.js b/working-examples/script-options-button-dialog/shared.js
deleted file mode 100644
index dd4a1d0822..0000000000
--- a/working-examples/script-options-button-dialog/shared.js
+++ /dev/null
@@ -1,83 +0,0 @@
-/* shared.js */
-
-function HarmonizeEvent(evt)
-{
-	if (!evt.target)
-	{
-		evt.target = evt.srcElement;
-		if ('mouseover' == evt.type)
-		{
-			evt.relatedTarget = evt.fromElement;
-		}
-		else if ('mouseout' == evt.type)
-		{
-			evt.relatedTarget = evt.toElement;
-		}
-		evt.preventDefault = function() { this.returnValue = false; }
-		evt.stopPropagation = function() { this.cancelBubble = true; }
-	}
-}
-
-function PositionElement(el,src,right,bottom)
-{
-	var top = 0;
-	var left = 0;
-	if (right)
-	{
-		left += src.offsetWidth;
-	}
-	if (bottom)
-	{
-		top += src.offsetHeight;
-	}
-	while (src)
-	{
-		top += src.offsetTop;
-		left += src.offsetLeft;
-		src = src.offsetParent;
-	}
-	el.style.top = top + "px";
-	el.style.left = left + "px";
-}
-
-// Mozilla equivalency
-
-if (!document.all)
-{
-	// swapNode()
-	if ('function' != Node.prototype.swapNode)
-	{
-		Node.prototype.swapNode = function (node) 
-		{
-			var nextSibling = this.nextSibling;
-			var parentNode = this.parentNode;
-			node.parentNode.replaceChild(this, node);
-			parentNode.insertBefore(node, nextSibling); 	
-		};
-	}
-
-	// click() 
-	if ('function' != HTMLElement.prototype.click)
-	{
-		HTMLElement.prototype.click = function()
-		{
-			var e = document.createEvent("MouseEvents");
-			e.initEvent("click",true,true);
-			var blnRet = this.dispatchEvent(e);
-		};
-	}
-	
-	// contains() 
-	if ('function' != HTMLElement.prototype.contains)
-	{
-		HTMLElement.prototype.contains = function (el) 
-		{	
-			while (el!=null && el!=this)
-			{
-				el = el.parentElement;
-			}
-			return (el!=null)
-		};
-	}
-
-}
\ No newline at end of file
diff --git a/working-examples/script-options-button-dialog/style.css b/working-examples/script-options-button-dialog/style.css
deleted file mode 100644
index 74ec605b70..0000000000
--- a/working-examples/script-options-button-dialog/style.css
+++ /dev/null
@@ -1,39 +0,0 @@
-BODY {
-	FONT-SIZE: 75%; LINE-HEIGHT: 150%; FONT-FAMILY: verdana, arial, sans-serif
-}
-H1 {
-	FONT-SIZE: 150%
-}
-H2 {
-	FONT-SIZE: 125%
-}
-H3 {
-	FONT-SIZE: 110%
-}
-INPUT {
-	FONT-SIZE: 100%; VERTICAL-ALIGN: middle; FONT-FAMILY: verdana, arial, sans-serif
-}
-BUTTON {
-	FONT-SIZE: 100%; VERTICAL-ALIGN: middle; FONT-FAMILY: verdana, arial, sans-serif
-}
-SELECT {
-	FONT-SIZE: 100%; VERTICAL-ALIGN: middle; FONT-FAMILY: verdana, arial, sans-serif
-}
-TEXTAREA {
-	FONT-SIZE: 100%; VERTICAL-ALIGN: middle; FONT-FAMILY: verdana, arial, sans-serif
-}
-P {
-	MARGIN-LEFT: 0px
-}
-FORM {
-	MARGIN-LEFT: 0px
-}
-PRE {
-	MARGIN-LEFT: 0px
-}
-PRE.code {
-	PADDING-RIGHT: 5px; PADDING-LEFT: 5px; FONT-SIZE: 100%; PADDING-BOTTOM: 5px; COLOR: #666666; PADDING-TOP: 5px; FONT-FAMILY: courier new, monospace; BACKGROUND-COLOR: #eee
-}
-.warning {
-	COLOR: red
-}
diff --git a/working-examples/script-scroll-pause/index.html b/working-examples/script-scroll-pause/index.html
index 3ffa304140..1b86ddc6c9 100644
--- a/working-examples/script-scroll-pause/index.html
+++ b/working-examples/script-scroll-pause/index.html
@@ -1,27 +1,15 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-
-<html xmlns="http://www.w3.org/1999/xhtml">
-
+<!DOCTYPE html>
+<html lang="en">
 <head>
-
-<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-
+<meta charset="utf-8" >
+<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 <title>Example of using script to scroll content and providing mechanism to pause it</title>
-
-<link rel="stylesheet" type="text/css" href="scroll.css" />
-<script type="text/javascript" src="scroll.js"></script>
+<link rel="stylesheet" href="scroll.css">
+<script src="scroll.js"></script>
 </head>
-
-
-
 <body>
-
-
-
-<div id="scroller">
-<p id="tag">This text will scroll and a Pause/Scroll link will be present when Javascript and CSS are supported and active.</p>
-</div>
-
+	<div id="scroller">
+		<p id="tag">This text will scroll and a Pause/Scroll link will be present when Javascript and CSS are supported and active.</p>
+	</div>
 </body>
-
 </html>
diff --git a/working-examples/script-scroll-text-expand/index.html b/working-examples/script-scroll-text-expand/index.html
index e415ded22e..472d62fa1b 100644
--- a/working-examples/script-scroll-text-expand/index.html
+++ b/working-examples/script-scroll-text-expand/index.html
@@ -1,15 +1,15 @@
-<html><head>
-<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
- <title>Expanding Scrolling Text in Place</title>
-
-    <style type="text/css">
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">    <title>Expanding Scrolling Text in Place</title>
+    <style>
 
       #scrollContainer {
         visibility: visible;
         overflow: hidden;
         top: 50px; left: 10px;
         background-color: darkblue;
-        layer-background-color: darkblue;
       }
       .scrolling { 
         position: absolute;
@@ -30,7 +30,7 @@
 
     </style>
 
-    <script type="text/javascript">
+    <script>
 
       var tid;
       function init() {
@@ -67,33 +67,22 @@
 
 </head><body onload="init()"> 
     <p>
-  <input id="scrollButton" value="Expand" onclick="toggle()" type="button" /></p>
+  <input id="scrollButton" value="Expand" onclick="toggle()" type="button"></p>
   <div id="scrollContainer" class="scrolling"> 
     <div style="top: -305px;" id="scrollingText" class="on"> 
-      <p>Four score and
-seven years ago our fathers brought forth on this continent, a new
-nation, conceived in Liberty, and dedicated to the proposition that
-all men are created equal.</p>
-     <p>Now we are engaged in a great civil war, testing whether that nation,
-or any nation so conceived and so dedicated, can long endure. We are
-met on a great battle-field of that war. We have come to dedicate a
-portion of that field, as a final resting place for those who here
-gave their lives that that nation might live. It is altogether fitting
-and proper that we should do this.</p>
-      <p>But, in a larger sense, we can not dedicate -- we can not consecrate
--- we can not hallow -- this ground. The brave men, living and dead,
-who struggled here, have consecrated it, far above our poor power to
-add or detract. The world will little note, nor long remember what we
-say here, but it can never forget what they did here. It is for us the
-living, rather, to be dedicated here to the unfinished work which they
-who fought here have thus far so nobly advanced. It is rather for us
-to be here dedicated to the great task remaining before us -- that
-from these honored dead we take increased devotion to that cause for
-which they gave the last full measure of devotion -- that we here
-highly resolve that these dead shall not have died in vain -- that
-this nation, under God, shall have a new birth of freedom -- and that
-government of the people, by the people, for the people, shall not
-perish from the earth.</p>
+      <p>There was no possibility of taking a walk that day. We had been wandering, indeed, in the leafless shrubbery an hour in the morning; but since dinner (Mrs. Reed, when there was no company, dined early) the cold winter wind had brought with it clouds so sombre, and a rain so penetrating, that further outdoor exercise was now out of the question.</p>
+
+        <p>I was glad of it: I never liked long walks, especially on chilly afternoons: dreadful to me was the coming home in the raw twilight, with nipped fingers and toes, and a heart saddened by the chidings of Bessie, the nurse, and humbled by the consciousness of my physical inferiority to Eliza, John, and Georgiana Reed.</p>
+        
+        <p>The said Eliza, John, and Georgiana were now clustered round their mama in the drawing-room: she lay reclined on a sofa by the fireside, and with her darlings about her (for the time neither quarrelling nor crying) looked perfectly happy. Me, she had dispensed from joining the group; saying, <q>She regretted to be under the necessity of keeping me at a distance; but that until she heard from Bessie, and could discover by her own observation, that I was endeavouring in good earnest to acquire a more sociable and childlike disposition, a more attractive and sprightly manner-something lighter, franker, more natural, as it were-she really must exclude me from privileges intended only for contented, happy, little children</q>.</p>
+        
+        <p><q>What does Bessie say I have done?</q> I asked.</p>
+        
+        <p><q>Jane, I don't like cavillers or questioners; besides, there is something truly forbidding in a child taking up her elders in that manner. Be seated somewhere; and until you can speak pleasantly, remain silent.</q></p>
+        
+        <p>A breakfast-room adjoined the drawing-room, I slipped in there. It contained a bookcase: I soon possessed myself of a volume, taking care that it should be one stored with pictures. I mounted into the window-seat: gathering up my feet, I sat cross-legged, like a Turk; and, having drawn the red moreen curtain nearly close, I was shrined in double retirement.</p>
+        
+        <p>Folds of scarlet drapery shut in my view to the right hand; to the left were the clear panes of glass, protecting, but not separating me from the drear November day. At intervals, while turning over the leaves of my book, I studied the aspect of that winter afternoon. Afar, it offered a pale blank of mist and cloud; near a scene of wet lawn and storm-beat shrub, with ceaseless rain sweeping away wildly before a long and lamentable blast.</p></p>
     </div>
   </div>
 </body></html>
\ No newline at end of file
diff --git a/working-examples/script-swap-css/index.html b/working-examples/script-swap-css/index.html
index a9ae246581..32d48de6bc 100644
--- a/working-examples/script-swap-css/index.html
+++ b/working-examples/script-swap-css/index.html
@@ -1,13 +1,13 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
-<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 <title>Using a Javascript control to apply a different external CSS file </title>
    
   <script type="text/javascript" src="colorswitcher.js"></script>
 
-  <link href="main.css" rel="stylesheet" type="text/css" />
-  <link id="currentCSS" href="defaultColors.css" rel="stylesheet" type="text/css" />
+  <link href="main.css" rel="stylesheet" type="text/css"/>
+  <link id="currentCSS" href="defaultColors.css" rel="stylesheet" type="text/css"/>
 </head>
 
 <body>
diff --git a/working-examples/script-toggle-aria-alerts/index.html b/working-examples/script-toggle-aria-alerts/index.html
new file mode 100644
index 0000000000..f73285fe39
--- /dev/null
+++ b/working-examples/script-toggle-aria-alerts/index.html
@@ -0,0 +1,99 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+<title>Togglimg ARIA alerts</title>
+<script>
+document.addEventListener("DOMContentLoaded", function (e) {
+  const stockBox = document.querySelector("#stock-box");
+  const stockMovement = document.querySelector("#stock-movement");
+  const onBtn = document.querySelector("#live-on");
+  const offBtn = document.querySelector("#live-off"); 
+  const stocks = new Array("stock went down", "stock stayed the same", "stock went up");
+  let loopCount = 0;  
+  
+  onBtn.addEventListener("click", modifyLive, false);
+  offBtn.addEventListener("click", modifyLive, false);
+  
+  function modifyLive(e){
+    let elm = e.currentTarget;
+    let liveState = elm.getAttribute("id");
+    if (liveState === "live-off"){
+      stockBox.setAttribute("aria-live", "off");
+      onBtn.setAttribute("aria-pressed", "false");
+      offBtn.setAttribute("aria-pressed", "true");
+    }
+    else{
+      stockBox.setAttribute("aria-live", "assertive");
+      onBtn.setAttribute("aria-pressed", "true");
+      offBtn.setAttribute("aria-pressed", "false");      
+    }
+  }
+  
+  setInterval(() => {
+    if(loopCount >2){
+       loopCount = 0;
+    }
+    stockMovement.innerHTML = stocks[loopCount];
+    loopCount++;
+  }, 10000)
+ 
+});
+</script>
+
+<style>
+  *, *::after, *::before {
+		box-sizing: inherit;
+}
+
+body {
+	background:white;
+	color:black;
+	font: 1rem/1.5 system-ui, "Segoe UI", Roboto, Helvetica, sans-serif;
+}
+
+#stock-box{
+  border:1px solid;
+  display:inline-block;
+  padding:0.5em;
+}
+
+button{
+  border:1px solid transparent;
+  font:inherit;
+	font-size:0.75rem;
+	margin:0 0.25rem;
+  padding:0.5em;
+}
+
+button:focus-visible {
+	outline:2px solid #00377C;
+	outline-offset: 2px;
+}
+
+[aria-pressed=true]{
+  background:#00377C;
+  color:white;
+}
+
+[aria-pressed=false]{
+  background:white;
+  border:1px solid #00377C;
+  color:#00377C;
+}
+</style>
+</head>
+<body>
+	<h1>Turbo Encabulator Stock Information</h1>
+	<div id="stock-box" aria-atomic="true" aria-live="assertive">
+		<span>Turbo Encabulator Stock Price: </span>
+		<span id="stock-movement">stock went up</span>
+	</div>
+	<p>Use the buttons to toggle screen reader announcements of stock changes:</p>
+	<div>
+		<button aria-pressed="true" id="live-on" type="button">Turn Announcements On</button>
+		<button aria-pressed="false" id="live-off" type="button">Turn Announcements Off</button>
+	</div>
+</body>
+</html>
\ No newline at end of file
diff --git a/working-examples/script-toggle-navbar-link/index.html b/working-examples/script-toggle-navbar-link/index.html
deleted file mode 100644
index fb2ea52968..0000000000
--- a/working-examples/script-toggle-navbar-link/index.html
+++ /dev/null
@@ -1,33 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml">
-<head>
-<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-<title>SCR 28 Example: Toggle navigation bar with a link</title>
-<style type="text/css" media="screen">
-#navbar li {
-display: inline;
-list-style-type: none;
-padding-right: 20px;
-}
-</style>
-  <script type="text/javascript">
-  function toggle(id){
-    var n = document.getElementById(id);
-    n.style.display =  (n.style.display != 'none' ? 'none' : '' );
-  }
-  </script>
-</head>
-
-<body>
-  <a href="#" onClick="toggle('navbar')">Toggle Navigation Bar</a>
-  <ul id="navbar">
-  <li><a href="http://example.com/target1.html">Link 1</a></li>
-  <li><a href="http://example.com/target2.html">Link 2</a></li>
-  <li><a href="http://example.com/target3.html">Link 3</a></li>
-  <li><a href="http://example.com/target4.html">Link 4</a></li>
-  </ul>
-<div id="maincontent">
-<p>Here is the main content of the page.</p>
-</div>
-</body>
-</html>
diff --git a/working-examples/script-toggle-toc-button/index.html b/working-examples/script-toggle-toc-button/index.html
index 6f3b6b8c30..b1441403d0 100644
--- a/working-examples/script-toggle-toc-button/index.html
+++ b/working-examples/script-toggle-toc-button/index.html
@@ -1,9 +1,10 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml">
+<!DOCTYPE html>
+<html lang="en">
 <head>
-<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 <title>SCR 28 Example: Toggle table of contents with a button</title>
-<style type="text/css" media="screen">
+<style>
 #toc {
 	border: 1px solid #aaa;
 	background-color: #f9f9f9;
@@ -19,27 +20,42 @@
 	font-size: 100%;
 	font-weight: bold;
 }
+
+[aria-expanded="false"] + nav{
+  display:none;
+}
 </style>
-  <script type="text/javascript">
-  function toggle(id){
-    var n = document.getElementById(id);
-    n.style.display =  (n.style.display != 'none' ? 'none' : '' );
-  }
-  </script>
+<script>
+  document.addEventListener("DOMContentLoaded", function(e){
+    let tocToggle = document.querySelector(".toc-toggle");
+    let toc = document.querySelector("#toc");
+    tocToggle.addEventListener("click", toggle, false);
+    
+    function toggle(e){
+      let elm = e.currentTarget;
+      if(elm.getAttribute("aria-expanded") === "false"){
+        elm.setAttribute("aria-expanded", "true");
+      }
+      else{
+        elm.setAttribute("aria-expanded", "false");
+      }
+    }      
+  });
+</script>
 </head>
 
 <body>
   <h1>SCR28 Example: Toggle table of contents with a button</h1>
-  <button onclick="return toggle('toc');">Toggle Table of Contents</button>
-  <div id="toc">
-  <h2>Table of Contents</h2>
+  <button aria-controls="toc" aria-expanded="true" class="toc-toggle" type="button">Toggle Table Of Contents</button>
+  <nav aria-labelledby="toc-header" id="toc">
+  <h2 id="toc-header">Table of Contents</h2>
     <ul>
         <li><a href="#sec1">Section 1</a></li>
         <li><a href="#sec2">Section 2</a></li>
         <li><a href="#sec3">Section 3</a></li>
         <li><a href="#sec4">Section 4</a></li>
     </ul>
-  </div>
+  </nav>
   
 <div id="maincontent">
 <h2 id="sec1">Section 1</h2>
diff --git a/working-examples/semantic-text/index.html b/working-examples/semantic-text/index.html
index 1a5b0225fb..37e1631ce7 100644
--- a/working-examples/semantic-text/index.html
+++ b/working-examples/semantic-text/index.html
@@ -1,26 +1,28 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
-<html>
+<!doctype html>
+<html lang="en">
 <head>
-<title>Semantic Text Markup Example</title>
-<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+  <title>Semantic Text Markup Example</title>
+  <meta charset="utf-8">
 </head>
 <body>
 <h1>Using Semantic markup to mark emphasized or special text</h1>
-<h2>em and strong elements </h2>
-<p>...What she <em>really</em> meant to say was, "This isn't ok, it is <strong>excellent</strong>!...</p>
-<h2>blockquote and cite elements </h2>
-<p>The following is an excerpt from the <cite>The Story of my Life</cite> by Helen Keller</p>
+<h2>Using the <code class="language-html">em</code> and <code class="language-html">strong</code> elements
+  to emphasize text</h2>
+<p>... What she <em>really</em> meant to say was, "This isn't ok, it is <strong>excellent</strong>! ...</p>
+<h2>Using the <code class="language-html">blockquote</code> element to mark up long quotations from another source</h2>
+<p>This example also demonstrates the use of the <code class="language-html">cite</code> element to specify a reference.</p>
+<p>The following is an excerpt from the <cite>The Story Of My Life</cite> by Helen Keller:</p>
  <blockquote>
  <p>Even in the days before my teacher came, I used to feel along the square stiff boxwood
  hedges, and, guided by the sense of smell, would find the first violets and lilies.
  There, too, after a fit of temper, I went to find comfort and to hide my hot face
  in the cool leaves and grass.</p>
  </blockquote>
- <h2>q element</h2>
+ <h2>Using the <code class="language-html">q</code> element to mark up a shorter quotation from another source</h2>
  <p>Helen Keller said, <q>Self-pity is our worst enemy and if we yield to it,
  we can never do anything good in the world.</q></p>
- <h2>sub and sup elements</h2>
- <p>Beth received 1<sup>st</sup> place in the 9<sup>th</sup> grade science competition.</p>
- <p>The chemical notation for water is H<SUB>2</SUB>O.</p>
+ <h2>Using the <code class="language-html">sup</code> and <code class="language-html">sub</code> elements to mark up superscripts and subscripts</h2>
+ <p>Beth won 1<sup>st</sup> place in the 9<sup>th</sup> grade science competition.</p>
+ <p>The chemical notation for water is H<sub>2</sub>O.</p>
 </body>
 </html>
\ No newline at end of file
diff --git a/working-examples/server-referrer-access-nonconforming/conforming.php b/working-examples/server-referrer-access-nonconforming/conforming.php
index e6267d3a1e..9df391130b 100644
--- a/working-examples/server-referrer-access-nonconforming/conforming.php
+++ b/working-examples/server-referrer-access-nonconforming/conforming.php
@@ -1,11 +1,11 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml">
-    <head>
-        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
-        <title>Conforming Content</title>
-    </head>
-    <body>
-        <h1>This is a conforming page</h1>
-        <p>From here, you can visit the <a href="non-conforming.php">non-conforming page</a>. </p>
-    </body>
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Conforming Content</title>
+  </head>
+  <body>
+    <h1>This is a conforming page</h1>
+    <p>From here, you can visit the <a href="non-conforming.php">non-conforming page</a>. </p>
+  </body>
 </html>
diff --git a/working-examples/server-referrer-access-nonconforming/non-conforming.php b/working-examples/server-referrer-access-nonconforming/non-conforming.php
index 393a6c8aa4..bff8a7b29b 100644
--- a/working-examples/server-referrer-access-nonconforming/non-conforming.php
+++ b/working-examples/server-referrer-access-nonconforming/non-conforming.php
@@ -2,19 +2,17 @@
 // if the request comes from a file that contains the string "conforming.php" then render the page
 	if(stristr($_SERVER['HTTP_REFERER'], "conforming.php")) {
 ?>
-
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml">
-    <head>
-        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
-        <title>Non-Conforming Content</title>
-    </head>
-    <body>
-    <h1>This is a non-conforming page</h1>
-    <p>Because you came from <?php echo htmlspecialchars($_SERVER['HTTP_REFERER']); ?>, you are able to view the content on this page. </p>
-    </body>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Non-Conforming Content</title>
+</head>
+<body>
+  <h1>This is a non-conforming page</h1>
+  <p>Because you came from <?php echo htmlspecialchars($_SERVER['HTTP_REFERER']); ?>, you are able to view the content on this page. </p>
+</body>
 </html>
-
 <?php
 }
 // if the referring page is not conforming.php, then redirect the user to the conforming version
@@ -22,4 +20,3 @@
 	header("Location: conforming.php");
 }
 ?>
-
diff --git a/working-examples/silverlight-accessible-validation/AccessibleValidation.xap b/working-examples/silverlight-accessible-validation/AccessibleValidation.xap
deleted file mode 100644
index ceff6aa8df..0000000000
Binary files a/working-examples/silverlight-accessible-validation/AccessibleValidation.xap and /dev/null differ
diff --git a/working-examples/silverlight-accessible-validation/index.html b/working-examples/silverlight-accessible-validation/index.html
deleted file mode 100644
index caf69c4167..0000000000
--- a/working-examples/silverlight-accessible-validation/index.html
+++ /dev/null
@@ -1,73 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" >
-<!-- saved from url=(0014)about:internet -->
-<head>
-    <title>AccessibleValidation</title>
-    <style type="text/css">
-    html, body {
-	    height: 100%;
-	    overflow: auto;
-    }
-    body {
-	    padding: 0;
-	    margin: 0;
-    }
-    #silverlightControlHost {
-	    height: 100%;
-	    text-align:center;
-    }
-    </style>
-    
-    <script type="text/javascript">
-        function onSilverlightError(sender, args) {
-            var appSource = "";
-            if (sender != null && sender != 0) {
-              appSource = sender.getHost().Source;
-            }
-            
-            var errorType = args.ErrorType;
-            var iErrorCode = args.ErrorCode;
-
-            if (errorType == "ImageError" || errorType == "MediaError") {
-              return;
-            }
-
-            var errMsg = "Unhandled Error in Silverlight Application " +  appSource + "\n" ;
-
-            errMsg += "Code: "+ iErrorCode + "    \n";
-            errMsg += "Category: " + errorType + "       \n";
-            errMsg += "Message: " + args.ErrorMessage + "     \n";
-
-            if (errorType == "ParserError") {
-                errMsg += "File: " + args.xamlFile + "     \n";
-                errMsg += "Line: " + args.lineNumber + "     \n";
-                errMsg += "Position: " + args.charPosition + "     \n";
-            }
-            else if (errorType == "RuntimeError") {           
-                if (args.lineNumber != 0) {
-                    errMsg += "Line: " + args.lineNumber + "     \n";
-                    errMsg += "Position: " +  args.charPosition + "     \n";
-                }
-                errMsg += "MethodName: " + args.methodName + "     \n";
-            }
-
-            throw new Error(errMsg);
-        }
-    </script>
-</head>
-<body>
-    <form id="form1" runat="server" style="height:100%">
-    <div id="silverlightControlHost">
-        <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
-		  <param name="source" value="AccessibleValidation.xap"/>
-		  <param name="onError" value="onSilverlightError" />
-		  <param name="background" value="white" />
-		  <param name="minRuntimeVersion" value="4.0.50826.0" />
-		  <param name="autoUpgrade" value="true" />
-		  <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50826.0" style="text-decoration:none">
- 			  <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/>
-		  </a>
-	    </object><iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px"></iframe></div>
-    </form>
-</body>
-</html>
diff --git a/working-examples/silverlight-alternative-audio-channel/AlternativeAudioChannel.xap b/working-examples/silverlight-alternative-audio-channel/AlternativeAudioChannel.xap
deleted file mode 100644
index 0281cf7911..0000000000
Binary files a/working-examples/silverlight-alternative-audio-channel/AlternativeAudioChannel.xap and /dev/null differ
diff --git a/working-examples/silverlight-alternative-audio-channel/index.html b/working-examples/silverlight-alternative-audio-channel/index.html
deleted file mode 100644
index 6d34e531dc..0000000000
--- a/working-examples/silverlight-alternative-audio-channel/index.html
+++ /dev/null
@@ -1,73 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" >
-<!-- saved from url=(0014)about:internet -->
-<head>
-    <title>AlternativeAudioChannel</title>
-    <style type="text/css">
-    html, body {
-	    height: 100%;
-	    overflow: auto;
-    }
-    body {
-	    padding: 0;
-	    margin: 0;
-    }
-    #silverlightControlHost {
-	    height: 100%;
-	    text-align:center;
-    }
-    </style>
-    
-    <script type="text/javascript">
-        function onSilverlightError(sender, args) {
-            var appSource = "";
-            if (sender != null && sender != 0) {
-              appSource = sender.getHost().Source;
-            }
-            
-            var errorType = args.ErrorType;
-            var iErrorCode = args.ErrorCode;
-
-            if (errorType == "ImageError" || errorType == "MediaError") {
-              return;
-            }
-
-            var errMsg = "Unhandled Error in Silverlight Application " +  appSource + "\n" ;
-
-            errMsg += "Code: "+ iErrorCode + "    \n";
-            errMsg += "Category: " + errorType + "       \n";
-            errMsg += "Message: " + args.ErrorMessage + "     \n";
-
-            if (errorType == "ParserError") {
-                errMsg += "File: " + args.xamlFile + "     \n";
-                errMsg += "Line: " + args.lineNumber + "     \n";
-                errMsg += "Position: " + args.charPosition + "     \n";
-            }
-            else if (errorType == "RuntimeError") {           
-                if (args.lineNumber != 0) {
-                    errMsg += "Line: " + args.lineNumber + "     \n";
-                    errMsg += "Position: " +  args.charPosition + "     \n";
-                }
-                errMsg += "MethodName: " + args.methodName + "     \n";
-            }
-
-            throw new Error(errMsg);
-        }
-    </script>
-</head>
-<body>
-    <form id="form1" runat="server" style="height:100%">
-    <div id="silverlightControlHost">
-        <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
-		  <param name="source" value="AlternativeAudioChannel.xap"/>
-		  <param name="onError" value="onSilverlightError" />
-		  <param name="background" value="white" />
-		  <param name="minRuntimeVersion" value="4.0.50826.0" />
-		  <param name="autoUpgrade" value="true" />
-		  <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50826.0" style="text-decoration:none">
- 			  <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/>
-		  </a>
-	    </object><iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px"></iframe></div>
-    </form>
-</body>
-</html>
diff --git a/working-examples/silverlight-application-level-key-handling/ApplicationLevelKeyHandling.xap b/working-examples/silverlight-application-level-key-handling/ApplicationLevelKeyHandling.xap
deleted file mode 100644
index 4fbbba0229..0000000000
Binary files a/working-examples/silverlight-application-level-key-handling/ApplicationLevelKeyHandling.xap and /dev/null differ
diff --git a/working-examples/silverlight-application-level-key-handling/index.html b/working-examples/silverlight-application-level-key-handling/index.html
deleted file mode 100644
index ae3a0f5dfd..0000000000
--- a/working-examples/silverlight-application-level-key-handling/index.html
+++ /dev/null
@@ -1,73 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" >
-<!-- saved from url=(0014)about:internet -->
-<head>
-    <title>ApplicationLevelKeyHandling</title>
-    <style type="text/css">
-    html, body {
-	    height: 100%;
-	    overflow: auto;
-    }
-    body {
-	    padding: 0;
-	    margin: 0;
-    }
-    #silverlightControlHost {
-	    height: 100%;
-	    text-align:center;
-    }
-    </style>
-    
-    <script type="text/javascript">
-        function onSilverlightError(sender, args) {
-            var appSource = "";
-            if (sender != null && sender != 0) {
-              appSource = sender.getHost().Source;
-            }
-            
-            var errorType = args.ErrorType;
-            var iErrorCode = args.ErrorCode;
-
-            if (errorType == "ImageError" || errorType == "MediaError") {
-              return;
-            }
-
-            var errMsg = "Unhandled Error in Silverlight Application " +  appSource + "\n" ;
-
-            errMsg += "Code: "+ iErrorCode + "    \n";
-            errMsg += "Category: " + errorType + "       \n";
-            errMsg += "Message: " + args.ErrorMessage + "     \n";
-
-            if (errorType == "ParserError") {
-                errMsg += "File: " + args.xamlFile + "     \n";
-                errMsg += "Line: " + args.lineNumber + "     \n";
-                errMsg += "Position: " + args.charPosition + "     \n";
-            }
-            else if (errorType == "RuntimeError") {           
-                if (args.lineNumber != 0) {
-                    errMsg += "Line: " + args.lineNumber + "     \n";
-                    errMsg += "Position: " +  args.charPosition + "     \n";
-                }
-                errMsg += "MethodName: " + args.methodName + "     \n";
-            }
-
-            throw new Error(errMsg);
-        }
-    </script>
-</head>
-<body>
-    <form id="form1" runat="server" style="height:100%">
-    <div id="silverlightControlHost">
-        <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
-		  <param name="source" value="ApplicationLevelKeyHandling.xap"/>
-		  <param name="onError" value="onSilverlightError" />
-		  <param name="background" value="white" />
-		  <param name="minRuntimeVersion" value="4.0.50826.0" />
-		  <param name="autoUpgrade" value="true" />
-		  <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50826.0" style="text-decoration:none">
- 			  <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/>
-		  </a>
-	    </object><iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px"></iframe></div>
-    </form>
-</body>
-</html>
diff --git a/working-examples/silverlight-application-level-key-handling/source/Metadata.xml b/working-examples/silverlight-application-level-key-handling/source/Metadata.xml
deleted file mode 100644
index 865ce8a6a1..0000000000
--- a/working-examples/silverlight-application-level-key-handling/source/Metadata.xml
+++ /dev/null
@@ -1,40 +0,0 @@
-<?xml version="1.0"?>
-<Metadata version="1">
-  <AspectRatio>0.683757839154774</AspectRatio>
-  <Image>
-    <FileName>C:\Documents and Settings\samlan\My Documents\Expression\Deep Zoom Composer Projects\sampleProject\source images\flower.jpg</FileName>
-    <x>0</x>
-    <y>0.248322147651007</y>
-    <Width>0.426006666529119</Width>
-    <Height>0.447427293064877</Height>
-    <ZOrder>1</ZOrder>
-    <Tag />
-  </Image>
-  <Image>
-    <FileName>C:\Documents and Settings\samlan\My Documents\Expression\Deep Zoom Composer Projects\sampleProject\source images\guy_by_the_beach.jpg</FileName>
-    <x>0.284513295996183</x>
-    <y>0</y>
-    <Width>0.445908699115547</Width>
-    <Height>0.447427293064877</Height>
-    <ZOrder>2</ZOrder>
-    <Tag />
-  </Image>
-  <Image>
-    <FileName>C:\Documents and Settings\samlan\My Documents\Expression\Deep Zoom Composer Projects\sampleProject\source images\tree_blossoms.jpg</FileName>
-    <x>0.564602007381454</x>
-    <y>0.328859060402685</y>
-    <Width>0.435397992618546</Width>
-    <Height>0.447427293064877</Height>
-    <ZOrder>3</ZOrder>
-    <Tag />
-  </Image>
-  <Image>
-    <FileName>C:\Documents and Settings\samlan\My Documents\Expression\Deep Zoom Composer Projects\sampleProject\source images\licorice.jpg</FileName>
-    <x>0.22022604281128</x>
-    <y>0.552572706935123</y>
-    <Width>0.437066526416967</Width>
-    <Height>0.447427293064877</Height>
-    <ZOrder>4</ZOrder>
-    <Tag />
-  </Image>
-</Metadata>
\ No newline at end of file
diff --git a/working-examples/silverlight-application-level-key-handling/source/SparseImageSceneGraph.xml b/working-examples/silverlight-application-level-key-handling/source/SparseImageSceneGraph.xml
deleted file mode 100644
index fe665d62f0..0000000000
--- a/working-examples/silverlight-application-level-key-handling/source/SparseImageSceneGraph.xml
+++ /dev/null
@@ -1,36 +0,0 @@
-<?xml version="1.0"?>
-<SceneGraph version="1">
-  <AspectRatio>0.683757839154774</AspectRatio>
-  <SceneNode>
-    <FileName>C:\Documents and Settings\samlan\My Documents\Expression\Deep Zoom Composer Projects\sampleProject\source images\flower.jpg</FileName>
-    <x>0</x>
-    <y>0.248322147651007</y>
-    <Width>0.426006666529119</Width>
-    <Height>0.447427293064877</Height>
-    <ZOrder>1</ZOrder>
-  </SceneNode>
-  <SceneNode>
-    <FileName>C:\Documents and Settings\samlan\My Documents\Expression\Deep Zoom Composer Projects\sampleProject\source images\guy_by_the_beach.jpg</FileName>
-    <x>0.284513295996183</x>
-    <y>0</y>
-    <Width>0.445908699115547</Width>
-    <Height>0.447427293064877</Height>
-    <ZOrder>2</ZOrder>
-  </SceneNode>
-  <SceneNode>
-    <FileName>C:\Documents and Settings\samlan\My Documents\Expression\Deep Zoom Composer Projects\sampleProject\source images\tree_blossoms.jpg</FileName>
-    <x>0.564602007381454</x>
-    <y>0.328859060402685</y>
-    <Width>0.435397992618546</Width>
-    <Height>0.447427293064877</Height>
-    <ZOrder>3</ZOrder>
-  </SceneNode>
-  <SceneNode>
-    <FileName>C:\Documents and Settings\samlan\My Documents\Expression\Deep Zoom Composer Projects\sampleProject\source images\licorice.jpg</FileName>
-    <x>0.22022604281128</x>
-    <y>0.552572706935123</y>
-    <Width>0.437066526416967</Width>
-    <Height>0.447427293064877</Height>
-    <ZOrder>4</ZOrder>
-  </SceneNode>
-</SceneGraph>
\ No newline at end of file
diff --git a/working-examples/silverlight-application-level-key-handling/source/dzc_output.xml b/working-examples/silverlight-application-level-key-handling/source/dzc_output.xml
deleted file mode 100644
index 581a65759f..0000000000
--- a/working-examples/silverlight-application-level-key-handling/source/dzc_output.xml
+++ /dev/null
@@ -1,21 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<Collection MaxLevel="8" TileSize="256" Format="png" NextItemId="4" xmlns="http://schemas.microsoft.com/deepzoom/2008">
-  <Items>
-    <I Id="0" N="0" IsPath="1" Source="dzc_output_images/flower.xml">
-      <Size Width="541" Height="831" />
-      <Viewport Width="2.347381" X="0" Y="-0.8525046" />
-    </I>
-    <I Id="1" N="1" IsPath="1" Source="dzc_output_images/guy_by_the_beach.xml">
-      <Size Width="569" Height="835" />
-      <Viewport Width="2.242612" X="-0.6380528" Y="0" />
-    </I>
-    <I Id="2" N="2" IsPath="1" Source="dzc_output_images/tree_blossoms.xml">
-      <Size Width="515" Height="774" />
-      <Viewport Width="2.296749" X="-1.296749" Y="-1.104641" />
-    </I>
-    <I Id="3" N="3" IsPath="1" Source="dzc_output_images/licorice.xml">
-      <Size Width="531" Height="795" />
-      <Viewport Width="2.287981" X="-0.5038731" Y="-1.849011" />
-    </I>
-  </Items>
-</Collection>
\ No newline at end of file
diff --git a/working-examples/silverlight-application-level-key-handling/source/dzc_output_files/0/0_0.png b/working-examples/silverlight-application-level-key-handling/source/dzc_output_files/0/0_0.png
deleted file mode 100644
index d79230945c..0000000000
Binary files a/working-examples/silverlight-application-level-key-handling/source/dzc_output_files/0/0_0.png and /dev/null differ
diff --git a/working-examples/silverlight-application-level-key-handling/source/dzc_output_files/1/0_0.png b/working-examples/silverlight-application-level-key-handling/source/dzc_output_files/1/0_0.png
deleted file mode 100644
index 151ac9ac12..0000000000
Binary files a/working-examples/silverlight-application-level-key-handling/source/dzc_output_files/1/0_0.png and /dev/null differ
diff --git a/working-examples/silverlight-application-level-key-handling/source/dzc_output_files/2/0_0.png b/working-examples/silverlight-application-level-key-handling/source/dzc_output_files/2/0_0.png
deleted file mode 100644
index d095579955..0000000000
Binary files a/working-examples/silverlight-application-level-key-handling/source/dzc_output_files/2/0_0.png and /dev/null differ
diff --git a/working-examples/silverlight-application-level-key-handling/source/dzc_output_files/3/0_0.png b/working-examples/silverlight-application-level-key-handling/source/dzc_output_files/3/0_0.png
deleted file mode 100644
index 1989fc3856..0000000000
Binary files a/working-examples/silverlight-application-level-key-handling/source/dzc_output_files/3/0_0.png and /dev/null differ
diff --git a/working-examples/silverlight-application-level-key-handling/source/dzc_output_files/4/0_0.png b/working-examples/silverlight-application-level-key-handling/source/dzc_output_files/4/0_0.png
deleted file mode 100644
index 428664aa22..0000000000
Binary files a/working-examples/silverlight-application-level-key-handling/source/dzc_output_files/4/0_0.png and /dev/null differ
diff --git a/working-examples/silverlight-application-level-key-handling/source/dzc_output_files/5/0_0.png b/working-examples/silverlight-application-level-key-handling/source/dzc_output_files/5/0_0.png
deleted file mode 100644
index e3a6757159..0000000000
Binary files a/working-examples/silverlight-application-level-key-handling/source/dzc_output_files/5/0_0.png and /dev/null differ
diff --git a/working-examples/silverlight-application-level-key-handling/source/dzc_output_files/6/0_0.png b/working-examples/silverlight-application-level-key-handling/source/dzc_output_files/6/0_0.png
deleted file mode 100644
index f8a15d5150..0000000000
Binary files a/working-examples/silverlight-application-level-key-handling/source/dzc_output_files/6/0_0.png and /dev/null differ
diff --git a/working-examples/silverlight-application-level-key-handling/source/dzc_output_files/7/0_0.png b/working-examples/silverlight-application-level-key-handling/source/dzc_output_files/7/0_0.png
deleted file mode 100644
index 773f0a05b6..0000000000
Binary files a/working-examples/silverlight-application-level-key-handling/source/dzc_output_files/7/0_0.png and /dev/null differ
diff --git a/working-examples/silverlight-application-level-key-handling/source/dzc_output_files/8/0_0.png b/working-examples/silverlight-application-level-key-handling/source/dzc_output_files/8/0_0.png
deleted file mode 100644
index 3c59cbcfe1..0000000000
Binary files a/working-examples/silverlight-application-level-key-handling/source/dzc_output_files/8/0_0.png and /dev/null differ
diff --git a/working-examples/silverlight-application-level-key-handling/source/dzc_output_files/8/0_1.png b/working-examples/silverlight-application-level-key-handling/source/dzc_output_files/8/0_1.png
deleted file mode 100644
index a10cb3a73a..0000000000
Binary files a/working-examples/silverlight-application-level-key-handling/source/dzc_output_files/8/0_1.png and /dev/null differ
diff --git a/working-examples/silverlight-application-level-key-handling/source/dzc_output_files/8/1_0.png b/working-examples/silverlight-application-level-key-handling/source/dzc_output_files/8/1_0.png
deleted file mode 100644
index 1e1b8865bf..0000000000
Binary files a/working-examples/silverlight-application-level-key-handling/source/dzc_output_files/8/1_0.png and /dev/null differ
diff --git a/working-examples/silverlight-application-level-key-handling/source/dzc_output_files/8/1_1.png b/working-examples/silverlight-application-level-key-handling/source/dzc_output_files/8/1_1.png
deleted file mode 100644
index fa294d2efa..0000000000
Binary files a/working-examples/silverlight-application-level-key-handling/source/dzc_output_files/8/1_1.png and /dev/null differ
diff --git a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/flower.xml b/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/flower.xml
deleted file mode 100644
index 81740e261c..0000000000
--- a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/flower.xml
+++ /dev/null
@@ -1,4 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<Image TileSize="254" Overlap="1" Format="jpg" xmlns="http://schemas.microsoft.com/deepzoom/2008">
-<Size Width="541" Height="831"/>
-</Image>
diff --git a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/flower_files/0/0_0.jpg b/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/flower_files/0/0_0.jpg
deleted file mode 100644
index 4b010e9765..0000000000
Binary files a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/flower_files/0/0_0.jpg and /dev/null differ
diff --git a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/flower_files/1/0_0.jpg b/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/flower_files/1/0_0.jpg
deleted file mode 100644
index de0854ecfc..0000000000
Binary files a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/flower_files/1/0_0.jpg and /dev/null differ
diff --git a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/flower_files/10/0_0.jpg b/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/flower_files/10/0_0.jpg
deleted file mode 100644
index 019a1609f5..0000000000
Binary files a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/flower_files/10/0_0.jpg and /dev/null differ
diff --git a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/flower_files/10/0_1.jpg b/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/flower_files/10/0_1.jpg
deleted file mode 100644
index 18b0ed956e..0000000000
Binary files a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/flower_files/10/0_1.jpg and /dev/null differ
diff --git a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/flower_files/10/0_2.jpg b/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/flower_files/10/0_2.jpg
deleted file mode 100644
index 8bf461ec88..0000000000
Binary files a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/flower_files/10/0_2.jpg and /dev/null differ
diff --git a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/flower_files/10/0_3.jpg b/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/flower_files/10/0_3.jpg
deleted file mode 100644
index ee849d2558..0000000000
Binary files a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/flower_files/10/0_3.jpg and /dev/null differ
diff --git a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/flower_files/10/1_0.jpg b/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/flower_files/10/1_0.jpg
deleted file mode 100644
index 47fc6c0f51..0000000000
Binary files a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/flower_files/10/1_0.jpg and /dev/null differ
diff --git a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/flower_files/10/1_1.jpg b/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/flower_files/10/1_1.jpg
deleted file mode 100644
index dc6b92b592..0000000000
Binary files a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/flower_files/10/1_1.jpg and /dev/null differ
diff --git a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/flower_files/10/1_2.jpg b/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/flower_files/10/1_2.jpg
deleted file mode 100644
index 5189ba8165..0000000000
Binary files a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/flower_files/10/1_2.jpg and /dev/null differ
diff --git a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/flower_files/10/1_3.jpg b/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/flower_files/10/1_3.jpg
deleted file mode 100644
index bd51348cf8..0000000000
Binary files a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/flower_files/10/1_3.jpg and /dev/null differ
diff --git a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/flower_files/10/2_0.jpg b/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/flower_files/10/2_0.jpg
deleted file mode 100644
index 072194b600..0000000000
Binary files a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/flower_files/10/2_0.jpg and /dev/null differ
diff --git a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/flower_files/10/2_1.jpg b/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/flower_files/10/2_1.jpg
deleted file mode 100644
index da7b9ff60e..0000000000
Binary files a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/flower_files/10/2_1.jpg and /dev/null differ
diff --git a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/flower_files/10/2_2.jpg b/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/flower_files/10/2_2.jpg
deleted file mode 100644
index 2043690a14..0000000000
Binary files a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/flower_files/10/2_2.jpg and /dev/null differ
diff --git a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/flower_files/10/2_3.jpg b/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/flower_files/10/2_3.jpg
deleted file mode 100644
index 9e93066cd1..0000000000
Binary files a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/flower_files/10/2_3.jpg and /dev/null differ
diff --git a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/flower_files/2/0_0.jpg b/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/flower_files/2/0_0.jpg
deleted file mode 100644
index 0dc7eaec09..0000000000
Binary files a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/flower_files/2/0_0.jpg and /dev/null differ
diff --git a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/flower_files/3/0_0.jpg b/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/flower_files/3/0_0.jpg
deleted file mode 100644
index e9e529706e..0000000000
Binary files a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/flower_files/3/0_0.jpg and /dev/null differ
diff --git a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/flower_files/4/0_0.jpg b/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/flower_files/4/0_0.jpg
deleted file mode 100644
index 29b1d1339d..0000000000
Binary files a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/flower_files/4/0_0.jpg and /dev/null differ
diff --git a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/flower_files/5/0_0.jpg b/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/flower_files/5/0_0.jpg
deleted file mode 100644
index 203ddd63e9..0000000000
Binary files a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/flower_files/5/0_0.jpg and /dev/null differ
diff --git a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/flower_files/6/0_0.jpg b/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/flower_files/6/0_0.jpg
deleted file mode 100644
index a133dcad38..0000000000
Binary files a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/flower_files/6/0_0.jpg and /dev/null differ
diff --git a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/flower_files/7/0_0.jpg b/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/flower_files/7/0_0.jpg
deleted file mode 100644
index 0e3f37ff0b..0000000000
Binary files a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/flower_files/7/0_0.jpg and /dev/null differ
diff --git a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/flower_files/8/0_0.jpg b/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/flower_files/8/0_0.jpg
deleted file mode 100644
index 3aab41317a..0000000000
Binary files a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/flower_files/8/0_0.jpg and /dev/null differ
diff --git a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/flower_files/9/0_0.jpg b/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/flower_files/9/0_0.jpg
deleted file mode 100644
index 3fb8209ad4..0000000000
Binary files a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/flower_files/9/0_0.jpg and /dev/null differ
diff --git a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/flower_files/9/0_1.jpg b/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/flower_files/9/0_1.jpg
deleted file mode 100644
index 5ffd79dbbc..0000000000
Binary files a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/flower_files/9/0_1.jpg and /dev/null differ
diff --git a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/flower_files/9/1_0.jpg b/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/flower_files/9/1_0.jpg
deleted file mode 100644
index 4a9b380909..0000000000
Binary files a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/flower_files/9/1_0.jpg and /dev/null differ
diff --git a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/flower_files/9/1_1.jpg b/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/flower_files/9/1_1.jpg
deleted file mode 100644
index e497c6264b..0000000000
Binary files a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/flower_files/9/1_1.jpg and /dev/null differ
diff --git a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/guy_by_the_beach.xml b/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/guy_by_the_beach.xml
deleted file mode 100644
index 7fe870ecd3..0000000000
--- a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/guy_by_the_beach.xml
+++ /dev/null
@@ -1,4 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<Image TileSize="254" Overlap="1" Format="jpg" xmlns="http://schemas.microsoft.com/deepzoom/2008">
-<Size Width="569" Height="835"/>
-</Image>
diff --git a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/guy_by_the_beach_files/0/0_0.jpg b/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/guy_by_the_beach_files/0/0_0.jpg
deleted file mode 100644
index 1f0559f8f4..0000000000
Binary files a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/guy_by_the_beach_files/0/0_0.jpg and /dev/null differ
diff --git a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/guy_by_the_beach_files/1/0_0.jpg b/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/guy_by_the_beach_files/1/0_0.jpg
deleted file mode 100644
index 4f0c2f6727..0000000000
Binary files a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/guy_by_the_beach_files/1/0_0.jpg and /dev/null differ
diff --git a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/guy_by_the_beach_files/10/0_0.jpg b/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/guy_by_the_beach_files/10/0_0.jpg
deleted file mode 100644
index 363c865967..0000000000
Binary files a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/guy_by_the_beach_files/10/0_0.jpg and /dev/null differ
diff --git a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/guy_by_the_beach_files/10/0_1.jpg b/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/guy_by_the_beach_files/10/0_1.jpg
deleted file mode 100644
index 8f6318c1fd..0000000000
Binary files a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/guy_by_the_beach_files/10/0_1.jpg and /dev/null differ
diff --git a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/guy_by_the_beach_files/10/0_2.jpg b/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/guy_by_the_beach_files/10/0_2.jpg
deleted file mode 100644
index fa7a1fd609..0000000000
Binary files a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/guy_by_the_beach_files/10/0_2.jpg and /dev/null differ
diff --git a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/guy_by_the_beach_files/10/0_3.jpg b/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/guy_by_the_beach_files/10/0_3.jpg
deleted file mode 100644
index 021020cdcc..0000000000
Binary files a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/guy_by_the_beach_files/10/0_3.jpg and /dev/null differ
diff --git a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/guy_by_the_beach_files/10/1_0.jpg b/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/guy_by_the_beach_files/10/1_0.jpg
deleted file mode 100644
index d5ce1cdead..0000000000
Binary files a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/guy_by_the_beach_files/10/1_0.jpg and /dev/null differ
diff --git a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/guy_by_the_beach_files/10/1_1.jpg b/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/guy_by_the_beach_files/10/1_1.jpg
deleted file mode 100644
index d79d19647b..0000000000
Binary files a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/guy_by_the_beach_files/10/1_1.jpg and /dev/null differ
diff --git a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/guy_by_the_beach_files/10/1_2.jpg b/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/guy_by_the_beach_files/10/1_2.jpg
deleted file mode 100644
index 3331b96cdf..0000000000
Binary files a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/guy_by_the_beach_files/10/1_2.jpg and /dev/null differ
diff --git a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/guy_by_the_beach_files/10/1_3.jpg b/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/guy_by_the_beach_files/10/1_3.jpg
deleted file mode 100644
index 6a98f97132..0000000000
Binary files a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/guy_by_the_beach_files/10/1_3.jpg and /dev/null differ
diff --git a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/guy_by_the_beach_files/10/2_0.jpg b/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/guy_by_the_beach_files/10/2_0.jpg
deleted file mode 100644
index 139adaca03..0000000000
Binary files a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/guy_by_the_beach_files/10/2_0.jpg and /dev/null differ
diff --git a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/guy_by_the_beach_files/10/2_1.jpg b/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/guy_by_the_beach_files/10/2_1.jpg
deleted file mode 100644
index 5132420404..0000000000
Binary files a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/guy_by_the_beach_files/10/2_1.jpg and /dev/null differ
diff --git a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/guy_by_the_beach_files/10/2_2.jpg b/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/guy_by_the_beach_files/10/2_2.jpg
deleted file mode 100644
index 72b48dd55e..0000000000
Binary files a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/guy_by_the_beach_files/10/2_2.jpg and /dev/null differ
diff --git a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/guy_by_the_beach_files/10/2_3.jpg b/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/guy_by_the_beach_files/10/2_3.jpg
deleted file mode 100644
index 53986f42b5..0000000000
Binary files a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/guy_by_the_beach_files/10/2_3.jpg and /dev/null differ
diff --git a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/guy_by_the_beach_files/2/0_0.jpg b/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/guy_by_the_beach_files/2/0_0.jpg
deleted file mode 100644
index 750e2143db..0000000000
Binary files a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/guy_by_the_beach_files/2/0_0.jpg and /dev/null differ
diff --git a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/guy_by_the_beach_files/3/0_0.jpg b/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/guy_by_the_beach_files/3/0_0.jpg
deleted file mode 100644
index b4b4bda457..0000000000
Binary files a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/guy_by_the_beach_files/3/0_0.jpg and /dev/null differ
diff --git a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/guy_by_the_beach_files/4/0_0.jpg b/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/guy_by_the_beach_files/4/0_0.jpg
deleted file mode 100644
index 038816c5f9..0000000000
Binary files a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/guy_by_the_beach_files/4/0_0.jpg and /dev/null differ
diff --git a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/guy_by_the_beach_files/5/0_0.jpg b/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/guy_by_the_beach_files/5/0_0.jpg
deleted file mode 100644
index 292ce8939d..0000000000
Binary files a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/guy_by_the_beach_files/5/0_0.jpg and /dev/null differ
diff --git a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/guy_by_the_beach_files/6/0_0.jpg b/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/guy_by_the_beach_files/6/0_0.jpg
deleted file mode 100644
index e89637210c..0000000000
Binary files a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/guy_by_the_beach_files/6/0_0.jpg and /dev/null differ
diff --git a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/guy_by_the_beach_files/7/0_0.jpg b/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/guy_by_the_beach_files/7/0_0.jpg
deleted file mode 100644
index 7b7e826ea0..0000000000
Binary files a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/guy_by_the_beach_files/7/0_0.jpg and /dev/null differ
diff --git a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/guy_by_the_beach_files/8/0_0.jpg b/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/guy_by_the_beach_files/8/0_0.jpg
deleted file mode 100644
index 5a80ba47af..0000000000
Binary files a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/guy_by_the_beach_files/8/0_0.jpg and /dev/null differ
diff --git a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/guy_by_the_beach_files/9/0_0.jpg b/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/guy_by_the_beach_files/9/0_0.jpg
deleted file mode 100644
index f20e927cc7..0000000000
Binary files a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/guy_by_the_beach_files/9/0_0.jpg and /dev/null differ
diff --git a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/guy_by_the_beach_files/9/0_1.jpg b/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/guy_by_the_beach_files/9/0_1.jpg
deleted file mode 100644
index db350ebbaf..0000000000
Binary files a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/guy_by_the_beach_files/9/0_1.jpg and /dev/null differ
diff --git a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/guy_by_the_beach_files/9/1_0.jpg b/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/guy_by_the_beach_files/9/1_0.jpg
deleted file mode 100644
index ad7967759e..0000000000
Binary files a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/guy_by_the_beach_files/9/1_0.jpg and /dev/null differ
diff --git a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/guy_by_the_beach_files/9/1_1.jpg b/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/guy_by_the_beach_files/9/1_1.jpg
deleted file mode 100644
index 117e4b65bf..0000000000
Binary files a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/guy_by_the_beach_files/9/1_1.jpg and /dev/null differ
diff --git a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/licorice.xml b/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/licorice.xml
deleted file mode 100644
index c4a74dcb5d..0000000000
--- a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/licorice.xml
+++ /dev/null
@@ -1,4 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<Image TileSize="254" Overlap="1" Format="jpg" xmlns="http://schemas.microsoft.com/deepzoom/2008">
-<Size Width="531" Height="795"/>
-</Image>
diff --git a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/licorice_files/0/0_0.jpg b/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/licorice_files/0/0_0.jpg
deleted file mode 100644
index 6d8ffdeed7..0000000000
Binary files a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/licorice_files/0/0_0.jpg and /dev/null differ
diff --git a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/licorice_files/1/0_0.jpg b/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/licorice_files/1/0_0.jpg
deleted file mode 100644
index dca3645e50..0000000000
Binary files a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/licorice_files/1/0_0.jpg and /dev/null differ
diff --git a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/licorice_files/10/0_0.jpg b/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/licorice_files/10/0_0.jpg
deleted file mode 100644
index 4d7822e01f..0000000000
Binary files a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/licorice_files/10/0_0.jpg and /dev/null differ
diff --git a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/licorice_files/10/0_1.jpg b/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/licorice_files/10/0_1.jpg
deleted file mode 100644
index 2518c17a60..0000000000
Binary files a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/licorice_files/10/0_1.jpg and /dev/null differ
diff --git a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/licorice_files/10/0_2.jpg b/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/licorice_files/10/0_2.jpg
deleted file mode 100644
index 6873d7e4c9..0000000000
Binary files a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/licorice_files/10/0_2.jpg and /dev/null differ
diff --git a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/licorice_files/10/0_3.jpg b/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/licorice_files/10/0_3.jpg
deleted file mode 100644
index 9495d71dc3..0000000000
Binary files a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/licorice_files/10/0_3.jpg and /dev/null differ
diff --git a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/licorice_files/10/1_0.jpg b/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/licorice_files/10/1_0.jpg
deleted file mode 100644
index a9e2643d83..0000000000
Binary files a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/licorice_files/10/1_0.jpg and /dev/null differ
diff --git a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/licorice_files/10/1_1.jpg b/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/licorice_files/10/1_1.jpg
deleted file mode 100644
index b84594daab..0000000000
Binary files a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/licorice_files/10/1_1.jpg and /dev/null differ
diff --git a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/licorice_files/10/1_2.jpg b/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/licorice_files/10/1_2.jpg
deleted file mode 100644
index 3036c7bc5f..0000000000
Binary files a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/licorice_files/10/1_2.jpg and /dev/null differ
diff --git a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/licorice_files/10/1_3.jpg b/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/licorice_files/10/1_3.jpg
deleted file mode 100644
index 8cbb24e055..0000000000
Binary files a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/licorice_files/10/1_3.jpg and /dev/null differ
diff --git a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/licorice_files/10/2_0.jpg b/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/licorice_files/10/2_0.jpg
deleted file mode 100644
index f015846b10..0000000000
Binary files a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/licorice_files/10/2_0.jpg and /dev/null differ
diff --git a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/licorice_files/10/2_1.jpg b/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/licorice_files/10/2_1.jpg
deleted file mode 100644
index 490b6151c7..0000000000
Binary files a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/licorice_files/10/2_1.jpg and /dev/null differ
diff --git a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/licorice_files/10/2_2.jpg b/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/licorice_files/10/2_2.jpg
deleted file mode 100644
index 490b6151c7..0000000000
Binary files a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/licorice_files/10/2_2.jpg and /dev/null differ
diff --git a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/licorice_files/10/2_3.jpg b/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/licorice_files/10/2_3.jpg
deleted file mode 100644
index d1a13d5eac..0000000000
Binary files a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/licorice_files/10/2_3.jpg and /dev/null differ
diff --git a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/licorice_files/2/0_0.jpg b/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/licorice_files/2/0_0.jpg
deleted file mode 100644
index d1ebfc184d..0000000000
Binary files a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/licorice_files/2/0_0.jpg and /dev/null differ
diff --git a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/licorice_files/3/0_0.jpg b/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/licorice_files/3/0_0.jpg
deleted file mode 100644
index 9c4a7d1eab..0000000000
Binary files a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/licorice_files/3/0_0.jpg and /dev/null differ
diff --git a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/licorice_files/4/0_0.jpg b/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/licorice_files/4/0_0.jpg
deleted file mode 100644
index e3c268a0f4..0000000000
Binary files a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/licorice_files/4/0_0.jpg and /dev/null differ
diff --git a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/licorice_files/5/0_0.jpg b/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/licorice_files/5/0_0.jpg
deleted file mode 100644
index 33936fdfdd..0000000000
Binary files a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/licorice_files/5/0_0.jpg and /dev/null differ
diff --git a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/licorice_files/6/0_0.jpg b/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/licorice_files/6/0_0.jpg
deleted file mode 100644
index ccb23a7c99..0000000000
Binary files a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/licorice_files/6/0_0.jpg and /dev/null differ
diff --git a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/licorice_files/7/0_0.jpg b/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/licorice_files/7/0_0.jpg
deleted file mode 100644
index 02ce50ae61..0000000000
Binary files a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/licorice_files/7/0_0.jpg and /dev/null differ
diff --git a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/licorice_files/8/0_0.jpg b/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/licorice_files/8/0_0.jpg
deleted file mode 100644
index 9d0c0b2028..0000000000
Binary files a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/licorice_files/8/0_0.jpg and /dev/null differ
diff --git a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/licorice_files/9/0_0.jpg b/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/licorice_files/9/0_0.jpg
deleted file mode 100644
index 8988f8264c..0000000000
Binary files a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/licorice_files/9/0_0.jpg and /dev/null differ
diff --git a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/licorice_files/9/0_1.jpg b/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/licorice_files/9/0_1.jpg
deleted file mode 100644
index a89d9631c5..0000000000
Binary files a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/licorice_files/9/0_1.jpg and /dev/null differ
diff --git a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/licorice_files/9/1_0.jpg b/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/licorice_files/9/1_0.jpg
deleted file mode 100644
index 41c030c681..0000000000
Binary files a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/licorice_files/9/1_0.jpg and /dev/null differ
diff --git a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/licorice_files/9/1_1.jpg b/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/licorice_files/9/1_1.jpg
deleted file mode 100644
index 3e1e8a34d7..0000000000
Binary files a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/licorice_files/9/1_1.jpg and /dev/null differ
diff --git a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/tree_blossoms.xml b/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/tree_blossoms.xml
deleted file mode 100644
index fdaac2adb5..0000000000
--- a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/tree_blossoms.xml
+++ /dev/null
@@ -1,4 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<Image TileSize="254" Overlap="1" Format="jpg" xmlns="http://schemas.microsoft.com/deepzoom/2008">
-<Size Width="515" Height="774"/>
-</Image>
diff --git a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/tree_blossoms_files/0/0_0.jpg b/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/tree_blossoms_files/0/0_0.jpg
deleted file mode 100644
index a191e8baf5..0000000000
Binary files a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/tree_blossoms_files/0/0_0.jpg and /dev/null differ
diff --git a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/tree_blossoms_files/1/0_0.jpg b/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/tree_blossoms_files/1/0_0.jpg
deleted file mode 100644
index 28e333f728..0000000000
Binary files a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/tree_blossoms_files/1/0_0.jpg and /dev/null differ
diff --git a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/tree_blossoms_files/10/0_0.jpg b/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/tree_blossoms_files/10/0_0.jpg
deleted file mode 100644
index 8beedcad07..0000000000
Binary files a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/tree_blossoms_files/10/0_0.jpg and /dev/null differ
diff --git a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/tree_blossoms_files/10/0_1.jpg b/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/tree_blossoms_files/10/0_1.jpg
deleted file mode 100644
index 2e68225cc4..0000000000
Binary files a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/tree_blossoms_files/10/0_1.jpg and /dev/null differ
diff --git a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/tree_blossoms_files/10/0_2.jpg b/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/tree_blossoms_files/10/0_2.jpg
deleted file mode 100644
index 80bcd4885d..0000000000
Binary files a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/tree_blossoms_files/10/0_2.jpg and /dev/null differ
diff --git a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/tree_blossoms_files/10/0_3.jpg b/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/tree_blossoms_files/10/0_3.jpg
deleted file mode 100644
index 73dc6c5a38..0000000000
Binary files a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/tree_blossoms_files/10/0_3.jpg and /dev/null differ
diff --git a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/tree_blossoms_files/10/1_0.jpg b/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/tree_blossoms_files/10/1_0.jpg
deleted file mode 100644
index 251d728bf6..0000000000
Binary files a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/tree_blossoms_files/10/1_0.jpg and /dev/null differ
diff --git a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/tree_blossoms_files/10/1_1.jpg b/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/tree_blossoms_files/10/1_1.jpg
deleted file mode 100644
index 14d77bf30a..0000000000
Binary files a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/tree_blossoms_files/10/1_1.jpg and /dev/null differ
diff --git a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/tree_blossoms_files/10/1_2.jpg b/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/tree_blossoms_files/10/1_2.jpg
deleted file mode 100644
index b87c9aa360..0000000000
Binary files a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/tree_blossoms_files/10/1_2.jpg and /dev/null differ
diff --git a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/tree_blossoms_files/10/1_3.jpg b/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/tree_blossoms_files/10/1_3.jpg
deleted file mode 100644
index 9039d0c279..0000000000
Binary files a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/tree_blossoms_files/10/1_3.jpg and /dev/null differ
diff --git a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/tree_blossoms_files/10/2_0.jpg b/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/tree_blossoms_files/10/2_0.jpg
deleted file mode 100644
index 008f31f7dd..0000000000
Binary files a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/tree_blossoms_files/10/2_0.jpg and /dev/null differ
diff --git a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/tree_blossoms_files/10/2_1.jpg b/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/tree_blossoms_files/10/2_1.jpg
deleted file mode 100644
index 58c905bcc3..0000000000
Binary files a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/tree_blossoms_files/10/2_1.jpg and /dev/null differ
diff --git a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/tree_blossoms_files/10/2_2.jpg b/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/tree_blossoms_files/10/2_2.jpg
deleted file mode 100644
index 16b9d5ff84..0000000000
Binary files a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/tree_blossoms_files/10/2_2.jpg and /dev/null differ
diff --git a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/tree_blossoms_files/10/2_3.jpg b/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/tree_blossoms_files/10/2_3.jpg
deleted file mode 100644
index 8518dad4f3..0000000000
Binary files a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/tree_blossoms_files/10/2_3.jpg and /dev/null differ
diff --git a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/tree_blossoms_files/2/0_0.jpg b/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/tree_blossoms_files/2/0_0.jpg
deleted file mode 100644
index 8a12a84887..0000000000
Binary files a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/tree_blossoms_files/2/0_0.jpg and /dev/null differ
diff --git a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/tree_blossoms_files/3/0_0.jpg b/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/tree_blossoms_files/3/0_0.jpg
deleted file mode 100644
index 8d602e4f68..0000000000
Binary files a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/tree_blossoms_files/3/0_0.jpg and /dev/null differ
diff --git a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/tree_blossoms_files/4/0_0.jpg b/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/tree_blossoms_files/4/0_0.jpg
deleted file mode 100644
index 344fe132c7..0000000000
Binary files a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/tree_blossoms_files/4/0_0.jpg and /dev/null differ
diff --git a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/tree_blossoms_files/5/0_0.jpg b/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/tree_blossoms_files/5/0_0.jpg
deleted file mode 100644
index ee31940bcb..0000000000
Binary files a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/tree_blossoms_files/5/0_0.jpg and /dev/null differ
diff --git a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/tree_blossoms_files/6/0_0.jpg b/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/tree_blossoms_files/6/0_0.jpg
deleted file mode 100644
index cc8e5d3b0e..0000000000
Binary files a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/tree_blossoms_files/6/0_0.jpg and /dev/null differ
diff --git a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/tree_blossoms_files/7/0_0.jpg b/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/tree_blossoms_files/7/0_0.jpg
deleted file mode 100644
index ca572d45fa..0000000000
Binary files a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/tree_blossoms_files/7/0_0.jpg and /dev/null differ
diff --git a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/tree_blossoms_files/8/0_0.jpg b/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/tree_blossoms_files/8/0_0.jpg
deleted file mode 100644
index afae59199e..0000000000
Binary files a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/tree_blossoms_files/8/0_0.jpg and /dev/null differ
diff --git a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/tree_blossoms_files/9/0_0.jpg b/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/tree_blossoms_files/9/0_0.jpg
deleted file mode 100644
index 67b3273176..0000000000
Binary files a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/tree_blossoms_files/9/0_0.jpg and /dev/null differ
diff --git a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/tree_blossoms_files/9/0_1.jpg b/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/tree_blossoms_files/9/0_1.jpg
deleted file mode 100644
index 4cd435aa76..0000000000
Binary files a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/tree_blossoms_files/9/0_1.jpg and /dev/null differ
diff --git a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/tree_blossoms_files/9/1_0.jpg b/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/tree_blossoms_files/9/1_0.jpg
deleted file mode 100644
index b8b58076c9..0000000000
Binary files a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/tree_blossoms_files/9/1_0.jpg and /dev/null differ
diff --git a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/tree_blossoms_files/9/1_1.jpg b/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/tree_blossoms_files/9/1_1.jpg
deleted file mode 100644
index 9c786083a4..0000000000
Binary files a/working-examples/silverlight-application-level-key-handling/source/dzc_output_images/tree_blossoms_files/9/1_1.jpg and /dev/null differ
diff --git a/working-examples/silverlight-automation-properties-help-text/AutomationPropertiesHelpText.xap b/working-examples/silverlight-automation-properties-help-text/AutomationPropertiesHelpText.xap
deleted file mode 100644
index b93ec23158..0000000000
Binary files a/working-examples/silverlight-automation-properties-help-text/AutomationPropertiesHelpText.xap and /dev/null differ
diff --git a/working-examples/silverlight-automation-properties-help-text/index.html b/working-examples/silverlight-automation-properties-help-text/index.html
deleted file mode 100644
index 8cccf97d01..0000000000
--- a/working-examples/silverlight-automation-properties-help-text/index.html
+++ /dev/null
@@ -1,73 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" >
-<!-- saved from url=(0014)about:internet -->
-<head>
-    <title>AutomationPropertiesHelpText</title>
-    <style type="text/css">
-    html, body {
-	    height: 100%;
-	    overflow: auto;
-    }
-    body {
-	    padding: 0;
-	    margin: 0;
-    }
-    #silverlightControlHost {
-	    height: 100%;
-	    text-align:center;
-    }
-    </style>
-    
-    <script type="text/javascript">
-        function onSilverlightError(sender, args) {
-            var appSource = "";
-            if (sender != null && sender != 0) {
-              appSource = sender.getHost().Source;
-            }
-            
-            var errorType = args.ErrorType;
-            var iErrorCode = args.ErrorCode;
-
-            if (errorType == "ImageError" || errorType == "MediaError") {
-              return;
-            }
-
-            var errMsg = "Unhandled Error in Silverlight Application " +  appSource + "\n" ;
-
-            errMsg += "Code: "+ iErrorCode + "    \n";
-            errMsg += "Category: " + errorType + "       \n";
-            errMsg += "Message: " + args.ErrorMessage + "     \n";
-
-            if (errorType == "ParserError") {
-                errMsg += "File: " + args.xamlFile + "     \n";
-                errMsg += "Line: " + args.lineNumber + "     \n";
-                errMsg += "Position: " + args.charPosition + "     \n";
-            }
-            else if (errorType == "RuntimeError") {           
-                if (args.lineNumber != 0) {
-                    errMsg += "Line: " + args.lineNumber + "     \n";
-                    errMsg += "Position: " +  args.charPosition + "     \n";
-                }
-                errMsg += "MethodName: " + args.methodName + "     \n";
-            }
-
-            throw new Error(errMsg);
-        }
-    </script>
-</head>
-<body>
-    <form id="form1" runat="server" style="height:100%">
-    <div id="silverlightControlHost">
-        <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
-		  <param name="source" value="AutomationPropertiesHelpText.xap"/>
-		  <param name="onError" value="onSilverlightError" />
-		  <param name="background" value="white" />
-		  <param name="minRuntimeVersion" value="4.0.50401.0" />
-		  <param name="autoUpgrade" value="true" />
-		  <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50401.0" style="text-decoration:none">
- 			  <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/>
-		  </a>
-	    </object><iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px"></iframe></div>
-    </form>
-</body>
-</html>
diff --git a/working-examples/silverlight-basic-submit-button/BasicSubmitButton.xap b/working-examples/silverlight-basic-submit-button/BasicSubmitButton.xap
deleted file mode 100644
index 40779afee2..0000000000
Binary files a/working-examples/silverlight-basic-submit-button/BasicSubmitButton.xap and /dev/null differ
diff --git a/working-examples/silverlight-basic-submit-button/index.html b/working-examples/silverlight-basic-submit-button/index.html
deleted file mode 100644
index 4cd6e2d272..0000000000
--- a/working-examples/silverlight-basic-submit-button/index.html
+++ /dev/null
@@ -1,73 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" >
-<!-- saved from url=(0014)about:internet -->
-<head>
-    <title>BasicSubmitButton</title>
-    <style type="text/css">
-    html, body {
-	    height: 100%;
-	    overflow: auto;
-    }
-    body {
-	    padding: 0;
-	    margin: 0;
-    }
-    #silverlightControlHost {
-	    height: 100%;
-	    text-align:center;
-    }
-    </style>
-    
-    <script type="text/javascript">
-        function onSilverlightError(sender, args) {
-            var appSource = "";
-            if (sender != null && sender != 0) {
-              appSource = sender.getHost().Source;
-            }
-            
-            var errorType = args.ErrorType;
-            var iErrorCode = args.ErrorCode;
-
-            if (errorType == "ImageError" || errorType == "MediaError") {
-              return;
-            }
-
-            var errMsg = "Unhandled Error in Silverlight Application " +  appSource + "\n" ;
-
-            errMsg += "Code: "+ iErrorCode + "    \n";
-            errMsg += "Category: " + errorType + "       \n";
-            errMsg += "Message: " + args.ErrorMessage + "     \n";
-
-            if (errorType == "ParserError") {
-                errMsg += "File: " + args.xamlFile + "     \n";
-                errMsg += "Line: " + args.lineNumber + "     \n";
-                errMsg += "Position: " + args.charPosition + "     \n";
-            }
-            else if (errorType == "RuntimeError") {           
-                if (args.lineNumber != 0) {
-                    errMsg += "Line: " + args.lineNumber + "     \n";
-                    errMsg += "Position: " +  args.charPosition + "     \n";
-                }
-                errMsg += "MethodName: " + args.methodName + "     \n";
-            }
-
-            throw new Error(errMsg);
-        }
-    </script>
-</head>
-<body>
-    <form id="form1" runat="server" style="height:100%">
-    <div id="silverlightControlHost">
-        <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
-		  <param name="source" value="BasicSubmitButton.xap"/>
-		  <param name="onError" value="onSilverlightError" />
-		  <param name="background" value="white" />
-		  <param name="minRuntimeVersion" value="4.0.50401.0" />
-		  <param name="autoUpgrade" value="true" />
-		  <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50401.0" style="text-decoration:none">
- 			  <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/>
-		  </a>
-	    </object><iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px"></iframe></div>
-    </form>
-</body>
-</html>
diff --git a/working-examples/silverlight-browser-zoom/BrowserZoom.xap b/working-examples/silverlight-browser-zoom/BrowserZoom.xap
deleted file mode 100644
index e2832f69dc..0000000000
Binary files a/working-examples/silverlight-browser-zoom/BrowserZoom.xap and /dev/null differ
diff --git a/working-examples/silverlight-browser-zoom/index.html b/working-examples/silverlight-browser-zoom/index.html
deleted file mode 100644
index 571f23e04e..0000000000
--- a/working-examples/silverlight-browser-zoom/index.html
+++ /dev/null
@@ -1,73 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" >
-<!-- saved from url=(0014)about:internet -->
-<head>
-    <title>BrowserZoom</title>
-    <style type="text/css">
-    html, body {
-	    height: 100%;
-	    overflow: auto;
-    }
-    body {
-	    padding: 0;
-	    margin: 0;
-    }
-    #silverlightControlHost {
-	    height: 100%;
-	    text-align:center;
-    }
-    </style>
-    
-    <script type="text/javascript">
-        function onSilverlightError(sender, args) {
-            var appSource = "";
-            if (sender != null && sender != 0) {
-              appSource = sender.getHost().Source;
-            }
-            
-            var errorType = args.ErrorType;
-            var iErrorCode = args.ErrorCode;
-
-            if (errorType == "ImageError" || errorType == "MediaError") {
-              return;
-            }
-
-            var errMsg = "Unhandled Error in Silverlight Application " +  appSource + "\n" ;
-
-            errMsg += "Code: "+ iErrorCode + "    \n";
-            errMsg += "Category: " + errorType + "       \n";
-            errMsg += "Message: " + args.ErrorMessage + "     \n";
-
-            if (errorType == "ParserError") {
-                errMsg += "File: " + args.xamlFile + "     \n";
-                errMsg += "Line: " + args.lineNumber + "     \n";
-                errMsg += "Position: " + args.charPosition + "     \n";
-            }
-            else if (errorType == "RuntimeError") {           
-                if (args.lineNumber != 0) {
-                    errMsg += "Line: " + args.lineNumber + "     \n";
-                    errMsg += "Position: " +  args.charPosition + "     \n";
-                }
-                errMsg += "MethodName: " + args.methodName + "     \n";
-            }
-
-            throw new Error(errMsg);
-        }
-    </script>
-</head>
-<body>
-    <form id="form1" runat="server" style="height:100%">
-    <div id="silverlightControlHost">
-        <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
-		  <param name="source" value="BrowserZoom.xap"/>
-		  <param name="onError" value="onSilverlightError" />
-		  <param name="background" value="white" />
-		  <param name="minRuntimeVersion" value="4.0.50401.0" />
-		  <param name="autoUpgrade" value="true" />
-		  <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50401.0" style="text-decoration:none">
- 			  <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/>
-		  </a>
-	    </object><iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px"></iframe></div>
-    </form>
-</body>
-</html>
diff --git a/working-examples/silverlight-built-in-key-equivalence/BuiltInKeyEquivalence.xap b/working-examples/silverlight-built-in-key-equivalence/BuiltInKeyEquivalence.xap
deleted file mode 100644
index 6c24c23b47..0000000000
Binary files a/working-examples/silverlight-built-in-key-equivalence/BuiltInKeyEquivalence.xap and /dev/null differ
diff --git a/working-examples/silverlight-built-in-key-equivalence/index.html b/working-examples/silverlight-built-in-key-equivalence/index.html
deleted file mode 100644
index 379c00fcb7..0000000000
--- a/working-examples/silverlight-built-in-key-equivalence/index.html
+++ /dev/null
@@ -1,73 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" >
-<!-- saved from url=(0014)about:internet -->
-<head>
-    <title>BuiltInKeyEquivalence</title>
-    <style type="text/css">
-    html, body {
-	    height: 100%;
-	    overflow: auto;
-    }
-    body {
-	    padding: 0;
-	    margin: 0;
-    }
-    #silverlightControlHost {
-	    height: 100%;
-	    text-align:center;
-    }
-    </style>
-    
-    <script type="text/javascript">
-        function onSilverlightError(sender, args) {
-            var appSource = "";
-            if (sender != null && sender != 0) {
-              appSource = sender.getHost().Source;
-            }
-            
-            var errorType = args.ErrorType;
-            var iErrorCode = args.ErrorCode;
-
-            if (errorType == "ImageError" || errorType == "MediaError") {
-              return;
-            }
-
-            var errMsg = "Unhandled Error in Silverlight Application " +  appSource + "\n" ;
-
-            errMsg += "Code: "+ iErrorCode + "    \n";
-            errMsg += "Category: " + errorType + "       \n";
-            errMsg += "Message: " + args.ErrorMessage + "     \n";
-
-            if (errorType == "ParserError") {
-                errMsg += "File: " + args.xamlFile + "     \n";
-                errMsg += "Line: " + args.lineNumber + "     \n";
-                errMsg += "Position: " + args.charPosition + "     \n";
-            }
-            else if (errorType == "RuntimeError") {           
-                if (args.lineNumber != 0) {
-                    errMsg += "Line: " + args.lineNumber + "     \n";
-                    errMsg += "Position: " +  args.charPosition + "     \n";
-                }
-                errMsg += "MethodName: " + args.methodName + "     \n";
-            }
-
-            throw new Error(errMsg);
-        }
-    </script>
-</head>
-<body>
-    <form id="form1" runat="server" style="height:100%">
-    <div id="silverlightControlHost">
-        <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
-		  <param name="source" value="BuiltInKeyEquivalence.xap"/>
-		  <param name="onError" value="onSilverlightError" />
-		  <param name="background" value="white" />
-		  <param name="minRuntimeVersion" value="4.0.50401.0" />
-		  <param name="autoUpgrade" value="true" />
-		  <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50401.0" style="text-decoration:none">
- 			  <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/>
-		  </a>
-	    </object><iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px"></iframe></div>
-    </form>
-</body>
-</html>
diff --git a/working-examples/silverlight-button-nontext-text-composition/ButtonNontextTextComposition.xap b/working-examples/silverlight-button-nontext-text-composition/ButtonNontextTextComposition.xap
deleted file mode 100644
index 38bb083949..0000000000
Binary files a/working-examples/silverlight-button-nontext-text-composition/ButtonNontextTextComposition.xap and /dev/null differ
diff --git a/working-examples/silverlight-button-nontext-text-composition/index.html b/working-examples/silverlight-button-nontext-text-composition/index.html
deleted file mode 100644
index bca3914dce..0000000000
--- a/working-examples/silverlight-button-nontext-text-composition/index.html
+++ /dev/null
@@ -1,73 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" >
-<!-- saved from url=(0014)about:internet -->
-<head>
-    <title>ButtonNontextTextComposition</title>
-    <style type="text/css">
-    html, body {
-	    height: 100%;
-	    overflow: auto;
-    }
-    body {
-	    padding: 0;
-	    margin: 0;
-    }
-    #silverlightControlHost {
-	    height: 100%;
-	    text-align:center;
-    }
-    </style>
-    
-    <script type="text/javascript">
-        function onSilverlightError(sender, args) {
-            var appSource = "";
-            if (sender != null && sender != 0) {
-              appSource = sender.getHost().Source;
-            }
-            
-            var errorType = args.ErrorType;
-            var iErrorCode = args.ErrorCode;
-
-            if (errorType == "ImageError" || errorType == "MediaError") {
-              return;
-            }
-
-            var errMsg = "Unhandled Error in Silverlight Application " +  appSource + "\n" ;
-
-            errMsg += "Code: "+ iErrorCode + "    \n";
-            errMsg += "Category: " + errorType + "       \n";
-            errMsg += "Message: " + args.ErrorMessage + "     \n";
-
-            if (errorType == "ParserError") {
-                errMsg += "File: " + args.xamlFile + "     \n";
-                errMsg += "Line: " + args.lineNumber + "     \n";
-                errMsg += "Position: " + args.charPosition + "     \n";
-            }
-            else if (errorType == "RuntimeError") {           
-                if (args.lineNumber != 0) {
-                    errMsg += "Line: " + args.lineNumber + "     \n";
-                    errMsg += "Position: " +  args.charPosition + "     \n";
-                }
-                errMsg += "MethodName: " + args.methodName + "     \n";
-            }
-
-            throw new Error(errMsg);
-        }
-    </script>
-</head>
-<body>
-    <form id="form1" runat="server" style="height:100%">
-    <div id="silverlightControlHost">
-        <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
-		  <param name="source" value="ButtonNontextTextComposition.xap"/>
-		  <param name="onError" value="onSilverlightError" />
-		  <param name="background" value="white" />
-		  <param name="minRuntimeVersion" value="4.0.50826.0" />
-		  <param name="autoUpgrade" value="true" />
-		  <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50826.0" style="text-decoration:none">
- 			  <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/>
-		  </a>
-	    </object><iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px"></iframe></div>
-    </form>
-</body>
-</html>
diff --git a/working-examples/silverlight-button-text-alternative/ButtonNontextTextComposition.xap b/working-examples/silverlight-button-text-alternative/ButtonNontextTextComposition.xap
deleted file mode 100644
index e23aa54912..0000000000
Binary files a/working-examples/silverlight-button-text-alternative/ButtonNontextTextComposition.xap and /dev/null differ
diff --git a/working-examples/silverlight-button-text-alternative/index.html b/working-examples/silverlight-button-text-alternative/index.html
deleted file mode 100644
index bca3914dce..0000000000
--- a/working-examples/silverlight-button-text-alternative/index.html
+++ /dev/null
@@ -1,73 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" >
-<!-- saved from url=(0014)about:internet -->
-<head>
-    <title>ButtonNontextTextComposition</title>
-    <style type="text/css">
-    html, body {
-	    height: 100%;
-	    overflow: auto;
-    }
-    body {
-	    padding: 0;
-	    margin: 0;
-    }
-    #silverlightControlHost {
-	    height: 100%;
-	    text-align:center;
-    }
-    </style>
-    
-    <script type="text/javascript">
-        function onSilverlightError(sender, args) {
-            var appSource = "";
-            if (sender != null && sender != 0) {
-              appSource = sender.getHost().Source;
-            }
-            
-            var errorType = args.ErrorType;
-            var iErrorCode = args.ErrorCode;
-
-            if (errorType == "ImageError" || errorType == "MediaError") {
-              return;
-            }
-
-            var errMsg = "Unhandled Error in Silverlight Application " +  appSource + "\n" ;
-
-            errMsg += "Code: "+ iErrorCode + "    \n";
-            errMsg += "Category: " + errorType + "       \n";
-            errMsg += "Message: " + args.ErrorMessage + "     \n";
-
-            if (errorType == "ParserError") {
-                errMsg += "File: " + args.xamlFile + "     \n";
-                errMsg += "Line: " + args.lineNumber + "     \n";
-                errMsg += "Position: " + args.charPosition + "     \n";
-            }
-            else if (errorType == "RuntimeError") {           
-                if (args.lineNumber != 0) {
-                    errMsg += "Line: " + args.lineNumber + "     \n";
-                    errMsg += "Position: " +  args.charPosition + "     \n";
-                }
-                errMsg += "MethodName: " + args.methodName + "     \n";
-            }
-
-            throw new Error(errMsg);
-        }
-    </script>
-</head>
-<body>
-    <form id="form1" runat="server" style="height:100%">
-    <div id="silverlightControlHost">
-        <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
-		  <param name="source" value="ButtonNontextTextComposition.xap"/>
-		  <param name="onError" value="onSilverlightError" />
-		  <param name="background" value="white" />
-		  <param name="minRuntimeVersion" value="4.0.50826.0" />
-		  <param name="autoUpgrade" value="true" />
-		  <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50826.0" style="text-decoration:none">
- 			  <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/>
-		  </a>
-	    </object><iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px"></iframe></div>
-    </form>
-</body>
-</html>
diff --git a/working-examples/silverlight-by-animation-font-size/ByAnimationFontSize.xap b/working-examples/silverlight-by-animation-font-size/ByAnimationFontSize.xap
deleted file mode 100644
index a34ed59e89..0000000000
Binary files a/working-examples/silverlight-by-animation-font-size/ByAnimationFontSize.xap and /dev/null differ
diff --git a/working-examples/silverlight-by-animation-font-size/index.html b/working-examples/silverlight-by-animation-font-size/index.html
deleted file mode 100644
index b0694b3c06..0000000000
--- a/working-examples/silverlight-by-animation-font-size/index.html
+++ /dev/null
@@ -1,73 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" >
-<!-- saved from url=(0014)about:internet -->
-<head>
-    <title>StyleSwitcherFontSize</title>
-    <style type="text/css">
-    html, body {
-	    height: 100%;
-	    overflow: auto;
-    }
-    body {
-	    padding: 0;
-	    margin: 0;
-    }
-    #silverlightControlHost {
-	    height: 100%;
-	    text-align:center;
-    }
-    </style>
-    
-    <script type="text/javascript">
-        function onSilverlightError(sender, args) {
-            var appSource = "";
-            if (sender != null && sender != 0) {
-              appSource = sender.getHost().Source;
-            }
-            
-            var errorType = args.ErrorType;
-            var iErrorCode = args.ErrorCode;
-
-            if (errorType == "ImageError" || errorType == "MediaError") {
-              return;
-            }
-
-            var errMsg = "Unhandled Error in Silverlight Application " +  appSource + "\n" ;
-
-            errMsg += "Code: "+ iErrorCode + "    \n";
-            errMsg += "Category: " + errorType + "       \n";
-            errMsg += "Message: " + args.ErrorMessage + "     \n";
-
-            if (errorType == "ParserError") {
-                errMsg += "File: " + args.xamlFile + "     \n";
-                errMsg += "Line: " + args.lineNumber + "     \n";
-                errMsg += "Position: " + args.charPosition + "     \n";
-            }
-            else if (errorType == "RuntimeError") {           
-                if (args.lineNumber != 0) {
-                    errMsg += "Line: " + args.lineNumber + "     \n";
-                    errMsg += "Position: " +  args.charPosition + "     \n";
-                }
-                errMsg += "MethodName: " + args.methodName + "     \n";
-            }
-
-            throw new Error(errMsg);
-        }
-    </script>
-</head>
-<body>
-    <form id="form1" runat="server" style="height:100%">
-    <div id="silverlightControlHost">
-        <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
-		  <param name="source" value="StyleSwitcherFontSize.xap"/>
-		  <param name="onError" value="onSilverlightError" />
-		  <param name="background" value="white" />
-		  <param name="minRuntimeVersion" value="4.0.50401.0" />
-		  <param name="autoUpgrade" value="true" />
-		  <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50401.0" style="text-decoration:none">
- 			  <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/>
-		  </a>
-	    </object><iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px"></iframe></div>
-    </form>
-</body>
-</html>
diff --git a/working-examples/silverlight-document-structure/DocumentStructure.xap b/working-examples/silverlight-document-structure/DocumentStructure.xap
deleted file mode 100644
index 71ce5825cd..0000000000
Binary files a/working-examples/silverlight-document-structure/DocumentStructure.xap and /dev/null differ
diff --git a/working-examples/silverlight-document-structure/index.html b/working-examples/silverlight-document-structure/index.html
deleted file mode 100644
index 0bc9c9ed2a..0000000000
--- a/working-examples/silverlight-document-structure/index.html
+++ /dev/null
@@ -1,73 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" >
-<!-- saved from url=(0014)about:internet -->
-<head>
-    <title>DocumentStructure</title>
-    <style type="text/css">
-    html, body {
-	    height: 100%;
-	    overflow: auto;
-    }
-    body {
-	    padding: 0;
-	    margin: 0;
-    }
-    #silverlightControlHost {
-	    height: 100%;
-	    text-align:center;
-    }
-    </style>
-    
-    <script type="text/javascript">
-        function onSilverlightError(sender, args) {
-            var appSource = "";
-            if (sender != null && sender != 0) {
-              appSource = sender.getHost().Source;
-            }
-            
-            var errorType = args.ErrorType;
-            var iErrorCode = args.ErrorCode;
-
-            if (errorType == "ImageError" || errorType == "MediaError") {
-              return;
-            }
-
-            var errMsg = "Unhandled Error in Silverlight Application " +  appSource + "\n" ;
-
-            errMsg += "Code: "+ iErrorCode + "    \n";
-            errMsg += "Category: " + errorType + "       \n";
-            errMsg += "Message: " + args.ErrorMessage + "     \n";
-
-            if (errorType == "ParserError") {
-                errMsg += "File: " + args.xamlFile + "     \n";
-                errMsg += "Line: " + args.lineNumber + "     \n";
-                errMsg += "Position: " + args.charPosition + "     \n";
-            }
-            else if (errorType == "RuntimeError") {           
-                if (args.lineNumber != 0) {
-                    errMsg += "Line: " + args.lineNumber + "     \n";
-                    errMsg += "Position: " +  args.charPosition + "     \n";
-                }
-                errMsg += "MethodName: " + args.methodName + "     \n";
-            }
-
-            throw new Error(errMsg);
-        }
-    </script>
-</head>
-<body>
-    <form id="form1" runat="server" style="height:100%">
-    <div id="silverlightControlHost">
-        <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
-		  <param name="source" value="DocumentStructure.xap"/>
-		  <param name="onError" value="onSilverlightError" />
-		  <param name="background" value="white" />
-		  <param name="minRuntimeVersion" value="4.0.50826.0" />
-		  <param name="autoUpgrade" value="true" />
-		  <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50826.0" style="text-decoration:none">
- 			  <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/>
-		  </a>
-	    </object><iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px"></iframe></div>
-    </form>
-</body>
-</html>
diff --git a/working-examples/silverlight-focus-visual-custom-control/FocusVisualCustomControl.dll b/working-examples/silverlight-focus-visual-custom-control/FocusVisualCustomControl.dll
deleted file mode 100644
index d8b73151fb..0000000000
Binary files a/working-examples/silverlight-focus-visual-custom-control/FocusVisualCustomControl.dll and /dev/null differ
diff --git a/working-examples/silverlight-focus-visual-custom-control/FocusVisualCustomControl.xap b/working-examples/silverlight-focus-visual-custom-control/FocusVisualCustomControl.xap
deleted file mode 100644
index e5fac169cc..0000000000
Binary files a/working-examples/silverlight-focus-visual-custom-control/FocusVisualCustomControl.xap and /dev/null differ
diff --git a/working-examples/silverlight-focus-visual-custom-control/index.html b/working-examples/silverlight-focus-visual-custom-control/index.html
deleted file mode 100644
index fb2645e061..0000000000
--- a/working-examples/silverlight-focus-visual-custom-control/index.html
+++ /dev/null
@@ -1,73 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" >
-<!-- saved from url=(0014)about:internet -->
-<head>
-	<title>FocusVisualCustomControl</title>
-    <style type="text/css">
-    html, body {
-	    height: 100%;
-	    overflow: auto;
-    }
-    body {
-	    padding: 0;
-	    margin: 0;
-    }
-    #silverlightControlHost {
-	    height: 100%;
-	    text-align:center;
-    }
-    </style>
-    
-    <script type="text/javascript">
-        function onSilverlightError(sender, args) {
-            var appSource = "";
-            if (sender != null && sender != 0) {
-              appSource = sender.getHost().Source;
-            }
-            
-            var errorType = args.ErrorType;
-            var iErrorCode = args.ErrorCode;
-
-            if (errorType == "ImageError" || errorType == "MediaError") {
-              return;
-            }
-
-            var errMsg = "Unhandled Error in Silverlight Application " +  appSource + "\n" ;
-
-            errMsg += "Code: "+ iErrorCode + "    \n";
-            errMsg += "Category: " + errorType + "       \n";
-            errMsg += "Message: " + args.ErrorMessage + "     \n";
-
-            if (errorType == "ParserError") {
-                errMsg += "File: " + args.xamlFile + "     \n";
-                errMsg += "Line: " + args.lineNumber + "     \n";
-                errMsg += "Position: " + args.charPosition + "     \n";
-            }
-            else if (errorType == "RuntimeError") {           
-                if (args.lineNumber != 0) {
-                    errMsg += "Line: " + args.lineNumber + "     \n";
-                    errMsg += "Position: " +  args.charPosition + "     \n";
-                }
-                errMsg += "MethodName: " + args.methodName + "     \n";
-            }
-
-            throw new Error(errMsg);
-        }
-    </script>
-</head>
-<body>
-    <form id="form1" runat="server" style="height:100%">
-    <div id="silverlightControlHost">
-        <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
-        	<param name="source" value="FocusVisualCustomControl.xap"/>
-		  <param name="onError" value="onSilverlightError" />
-		  <param name="background" value="white" />
-		  <param name="minRuntimeVersion" value="4.0.50826.0" />
-		  <param name="autoUpgrade" value="true" />
-		  <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50826.0" style="text-decoration:none">
- 			  <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/>
-		  </a>
-	    </object><iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px"></iframe></div>
-    </form>
-</body>
-</html>
diff --git a/working-examples/silverlight-focusable-image/FocusableImage.dll b/working-examples/silverlight-focusable-image/FocusableImage.dll
deleted file mode 100644
index b68d04e951..0000000000
Binary files a/working-examples/silverlight-focusable-image/FocusableImage.dll and /dev/null differ
diff --git a/working-examples/silverlight-focusable-image/ImageEquivalent.xap b/working-examples/silverlight-focusable-image/ImageEquivalent.xap
deleted file mode 100644
index 26da206828..0000000000
Binary files a/working-examples/silverlight-focusable-image/ImageEquivalent.xap and /dev/null differ
diff --git a/working-examples/silverlight-focusable-image/index.html b/working-examples/silverlight-focusable-image/index.html
deleted file mode 100644
index 036f0e6bfe..0000000000
--- a/working-examples/silverlight-focusable-image/index.html
+++ /dev/null
@@ -1,73 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" >
-<!-- saved from url=(0014)about:internet -->
-<head>
-    <title>ImageEquivalent</title>
-    <style type="text/css">
-    html, body {
-	    height: 100%;
-	    overflow: auto;
-    }
-    body {
-	    padding: 0;
-	    margin: 0;
-    }
-    #silverlightControlHost {
-	    height: 100%;
-	    text-align:center;
-    }
-    </style>
-    
-    <script type="text/javascript">
-        function onSilverlightError(sender, args) {
-            var appSource = "";
-            if (sender != null && sender != 0) {
-              appSource = sender.getHost().Source;
-            }
-            
-            var errorType = args.ErrorType;
-            var iErrorCode = args.ErrorCode;
-
-            if (errorType == "ImageError" || errorType == "MediaError") {
-              return;
-            }
-
-            var errMsg = "Unhandled Error in Silverlight Application " +  appSource + "\n" ;
-
-            errMsg += "Code: "+ iErrorCode + "    \n";
-            errMsg += "Category: " + errorType + "       \n";
-            errMsg += "Message: " + args.ErrorMessage + "     \n";
-
-            if (errorType == "ParserError") {
-                errMsg += "File: " + args.xamlFile + "     \n";
-                errMsg += "Line: " + args.lineNumber + "     \n";
-                errMsg += "Position: " + args.charPosition + "     \n";
-            }
-            else if (errorType == "RuntimeError") {           
-                if (args.lineNumber != 0) {
-                    errMsg += "Line: " + args.lineNumber + "     \n";
-                    errMsg += "Position: " +  args.charPosition + "     \n";
-                }
-                errMsg += "MethodName: " + args.methodName + "     \n";
-            }
-
-            throw new Error(errMsg);
-        }
-    </script>
-</head>
-<body>
-    <form id="form1" runat="server" style="height:100%">
-    <div id="silverlightControlHost">
-        <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
-		  <param name="source" value="ImageEquivalent.xap"/>
-		  <param name="onError" value="onSilverlightError" />
-		  <param name="background" value="white" />
-		  <param name="minRuntimeVersion" value="4.0.50401.0" />
-		  <param name="autoUpgrade" value="true" />
-		  <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50401.0" style="text-decoration:none">
- 			  <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/>
-		  </a>
-	    </object><iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px"></iframe></div>
-    </form>
-</body>
-</html>
diff --git a/working-examples/silverlight-help-text-and-tool-tip/HelpTextAndToolTip.xap b/working-examples/silverlight-help-text-and-tool-tip/HelpTextAndToolTip.xap
deleted file mode 100644
index 68f87a359a..0000000000
Binary files a/working-examples/silverlight-help-text-and-tool-tip/HelpTextAndToolTip.xap and /dev/null differ
diff --git a/working-examples/silverlight-help-text-and-tool-tip/index.html b/working-examples/silverlight-help-text-and-tool-tip/index.html
deleted file mode 100644
index b5fd046903..0000000000
--- a/working-examples/silverlight-help-text-and-tool-tip/index.html
+++ /dev/null
@@ -1,73 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" >
-<!-- saved from url=(0014)about:internet -->
-<head>
-    <title>HelpTextAndToolTip</title>
-    <style type="text/css">
-    html, body {
-	    height: 100%;
-	    overflow: auto;
-    }
-    body {
-	    padding: 0;
-	    margin: 0;
-    }
-    #silverlightControlHost {
-	    height: 100%;
-	    text-align:center;
-    }
-    </style>
-    
-    <script type="text/javascript">
-        function onSilverlightError(sender, args) {
-            var appSource = "";
-            if (sender != null && sender != 0) {
-              appSource = sender.getHost().Source;
-            }
-            
-            var errorType = args.ErrorType;
-            var iErrorCode = args.ErrorCode;
-
-            if (errorType == "ImageError" || errorType == "MediaError") {
-              return;
-            }
-
-            var errMsg = "Unhandled Error in Silverlight Application " +  appSource + "\n" ;
-
-            errMsg += "Code: "+ iErrorCode + "    \n";
-            errMsg += "Category: " + errorType + "       \n";
-            errMsg += "Message: " + args.ErrorMessage + "     \n";
-
-            if (errorType == "ParserError") {
-                errMsg += "File: " + args.xamlFile + "     \n";
-                errMsg += "Line: " + args.lineNumber + "     \n";
-                errMsg += "Position: " + args.charPosition + "     \n";
-            }
-            else if (errorType == "RuntimeError") {           
-                if (args.lineNumber != 0) {
-                    errMsg += "Line: " + args.lineNumber + "     \n";
-                    errMsg += "Position: " +  args.charPosition + "     \n";
-                }
-                errMsg += "MethodName: " + args.methodName + "     \n";
-            }
-
-            throw new Error(errMsg);
-        }
-    </script>
-</head>
-<body>
-    <form id="form1" runat="server" style="height:100%">
-    <div id="silverlightControlHost">
-        <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
-		  <param name="source" value="HelpTextAndToolTip.xap"/>
-		  <param name="onError" value="onSilverlightError" />
-		  <param name="background" value="white" />
-		  <param name="minRuntimeVersion" value="4.0.50826.0" />
-		  <param name="autoUpgrade" value="true" />
-		  <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50826.0" style="text-decoration:none">
- 			  <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/>
-		  </a>
-	    </object><iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px"></iframe></div>
-    </form>
-</body>
-</html>
diff --git a/working-examples/silverlight-high-contrast/HighContrast.xap b/working-examples/silverlight-high-contrast/HighContrast.xap
deleted file mode 100644
index c4c74a1cdc..0000000000
Binary files a/working-examples/silverlight-high-contrast/HighContrast.xap and /dev/null differ
diff --git a/working-examples/silverlight-high-contrast/index.html b/working-examples/silverlight-high-contrast/index.html
deleted file mode 100644
index 39c48b1496..0000000000
--- a/working-examples/silverlight-high-contrast/index.html
+++ /dev/null
@@ -1,73 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" >
-<!-- saved from url=(0014)about:internet -->
-<head>
-    <title>HighContrast</title>
-    <style type="text/css">
-    html, body {
-	    height: 100%;
-	    overflow: auto;
-    }
-    body {
-	    padding: 0;
-	    margin: 0;
-    }
-    #silverlightControlHost {
-	    height: 100%;
-	    text-align:center;
-    }
-    </style>
-    
-    <script type="text/javascript">
-        function onSilverlightError(sender, args) {
-            var appSource = "";
-            if (sender != null && sender != 0) {
-              appSource = sender.getHost().Source;
-            }
-            
-            var errorType = args.ErrorType;
-            var iErrorCode = args.ErrorCode;
-
-            if (errorType == "ImageError" || errorType == "MediaError") {
-              return;
-            }
-
-            var errMsg = "Unhandled Error in Silverlight Application " +  appSource + "\n" ;
-
-            errMsg += "Code: "+ iErrorCode + "    \n";
-            errMsg += "Category: " + errorType + "       \n";
-            errMsg += "Message: " + args.ErrorMessage + "     \n";
-
-            if (errorType == "ParserError") {
-                errMsg += "File: " + args.xamlFile + "     \n";
-                errMsg += "Line: " + args.lineNumber + "     \n";
-                errMsg += "Position: " + args.charPosition + "     \n";
-            }
-            else if (errorType == "RuntimeError") {           
-                if (args.lineNumber != 0) {
-                    errMsg += "Line: " + args.lineNumber + "     \n";
-                    errMsg += "Position: " +  args.charPosition + "     \n";
-                }
-                errMsg += "MethodName: " + args.methodName + "     \n";
-            }
-
-            throw new Error(errMsg);
-        }
-    </script>
-</head>
-<body>
-    <form id="form1" runat="server" style="height:100%">
-    <div id="silverlightControlHost">
-        <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
-		  <param name="source" value="HighContrast.xap"/>
-		  <param name="onError" value="onSilverlightError" />
-		  <param name="background" value="white" />
-		  <param name="minRuntimeVersion" value="4.0.50826.0" />
-		  <param name="autoUpgrade" value="true" />
-		  <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50826.0" style="text-decoration:none">
- 			  <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/>
-		  </a>
-	    </object><iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px"></iframe></div>
-    </form>
-</body>
-</html>
diff --git a/working-examples/silverlight-labels/Labels.xap b/working-examples/silverlight-labels/Labels.xap
deleted file mode 100644
index 19ecb12c8e..0000000000
Binary files a/working-examples/silverlight-labels/Labels.xap and /dev/null differ
diff --git a/working-examples/silverlight-labels/index.html b/working-examples/silverlight-labels/index.html
deleted file mode 100644
index 246d53ac9f..0000000000
--- a/working-examples/silverlight-labels/index.html
+++ /dev/null
@@ -1,73 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" >
-<!-- saved from url=(0014)about:internet -->
-<head>
-    <title>Labels</title>
-    <style type="text/css">
-    html, body {
-	    height: 100%;
-	    overflow: auto;
-    }
-    body {
-	    padding: 0;
-	    margin: 0;
-    }
-    #silverlightControlHost {
-	    height: 100%;
-	    text-align:center;
-    }
-    </style>
-    
-    <script type="text/javascript">
-        function onSilverlightError(sender, args) {
-            var appSource = "";
-            if (sender != null && sender != 0) {
-              appSource = sender.getHost().Source;
-            }
-            
-            var errorType = args.ErrorType;
-            var iErrorCode = args.ErrorCode;
-
-            if (errorType == "ImageError" || errorType == "MediaError") {
-              return;
-            }
-
-            var errMsg = "Unhandled Error in Silverlight Application " +  appSource + "\n" ;
-
-            errMsg += "Code: "+ iErrorCode + "    \n";
-            errMsg += "Category: " + errorType + "       \n";
-            errMsg += "Message: " + args.ErrorMessage + "     \n";
-
-            if (errorType == "ParserError") {
-                errMsg += "File: " + args.xamlFile + "     \n";
-                errMsg += "Line: " + args.lineNumber + "     \n";
-                errMsg += "Position: " + args.charPosition + "     \n";
-            }
-            else if (errorType == "RuntimeError") {           
-                if (args.lineNumber != 0) {
-                    errMsg += "Line: " + args.lineNumber + "     \n";
-                    errMsg += "Position: " +  args.charPosition + "     \n";
-                }
-                errMsg += "MethodName: " + args.methodName + "     \n";
-            }
-
-            throw new Error(errMsg);
-        }
-    </script>
-</head>
-<body>
-    <form id="form1" runat="server" style="height:100%">
-    <div id="silverlightControlHost">
-        <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
-		  <param name="source" value="Labels.xap"/>
-		  <param name="onError" value="onSilverlightError" />
-		  <param name="background" value="white" />
-		  <param name="minRuntimeVersion" value="4.0.50826.0" />
-		  <param name="autoUpgrade" value="true" />
-		  <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50826.0" style="text-decoration:none">
- 			  <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/>
-		  </a>
-	    </object><iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px"></iframe></div>
-    </form>
-</body>
-</html>
diff --git a/working-examples/silverlight-lang-properties/LangProperties.xap b/working-examples/silverlight-lang-properties/LangProperties.xap
deleted file mode 100644
index 52a3515510..0000000000
Binary files a/working-examples/silverlight-lang-properties/LangProperties.xap and /dev/null differ
diff --git a/working-examples/silverlight-lang-properties/index.html b/working-examples/silverlight-lang-properties/index.html
deleted file mode 100644
index e6ce0ee1a3..0000000000
--- a/working-examples/silverlight-lang-properties/index.html
+++ /dev/null
@@ -1,73 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" >
-<!-- saved from url=(0014)about:internet -->
-<head>
-    <title>LangProperties</title>
-    <style type="text/css">
-    html, body {
-	    height: 100%;
-	    overflow: auto;
-    }
-    body {
-	    padding: 0;
-	    margin: 0;
-    }
-    #silverlightControlHost {
-	    height: 100%;
-	    text-align:center;
-    }
-    </style>
-    
-    <script type="text/javascript">
-        function onSilverlightError(sender, args) {
-            var appSource = "";
-            if (sender != null && sender != 0) {
-              appSource = sender.getHost().Source;
-            }
-            
-            var errorType = args.ErrorType;
-            var iErrorCode = args.ErrorCode;
-
-            if (errorType == "ImageError" || errorType == "MediaError") {
-              return;
-            }
-
-            var errMsg = "Unhandled Error in Silverlight Application " +  appSource + "\n" ;
-
-            errMsg += "Code: "+ iErrorCode + "    \n";
-            errMsg += "Category: " + errorType + "       \n";
-            errMsg += "Message: " + args.ErrorMessage + "     \n";
-
-            if (errorType == "ParserError") {
-                errMsg += "File: " + args.xamlFile + "     \n";
-                errMsg += "Line: " + args.lineNumber + "     \n";
-                errMsg += "Position: " + args.charPosition + "     \n";
-            }
-            else if (errorType == "RuntimeError") {           
-                if (args.lineNumber != 0) {
-                    errMsg += "Line: " + args.lineNumber + "     \n";
-                    errMsg += "Position: " +  args.charPosition + "     \n";
-                }
-                errMsg += "MethodName: " + args.methodName + "     \n";
-            }
-
-            throw new Error(errMsg);
-        }
-    </script>
-</head>
-<body>
-    <form id="form1" runat="server" style="height:100%">
-    <div id="silverlightControlHost">
-        <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
-		  <param name="source" value="LangProperties.xap"/>
-		  <param name="onError" value="onSilverlightError" />
-		  <param name="background" value="white" />
-		  <param name="minRuntimeVersion" value="4.0.50401.0" />
-		  <param name="autoUpgrade" value="true" />
-		  <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50401.0" style="text-decoration:none">
- 			  <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/>
-		  </a>
-	    </object><iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px"></iframe></div>
-    </form>
-</body>
-</html>
diff --git a/working-examples/silverlight-media-element-controls-auto-play/MediaElementControlsAutoPlay.xap b/working-examples/silverlight-media-element-controls-auto-play/MediaElementControlsAutoPlay.xap
deleted file mode 100644
index a233827fb5..0000000000
Binary files a/working-examples/silverlight-media-element-controls-auto-play/MediaElementControlsAutoPlay.xap and /dev/null differ
diff --git a/working-examples/silverlight-media-element-controls-auto-play/index.html b/working-examples/silverlight-media-element-controls-auto-play/index.html
deleted file mode 100644
index e8e3b5824a..0000000000
--- a/working-examples/silverlight-media-element-controls-auto-play/index.html
+++ /dev/null
@@ -1,73 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" >
-<!-- saved from url=(0014)about:internet -->
-<head>
-    <title>MediaElementControlsAutoPlay</title>
-    <style type="text/css">
-    html, body {
-	    height: 100%;
-	    overflow: auto;
-    }
-    body {
-	    padding: 0;
-	    margin: 0;
-    }
-    #silverlightControlHost {
-	    height: 100%;
-	    text-align:center;
-    }
-    </style>
-    
-    <script type="text/javascript">
-        function onSilverlightError(sender, args) {
-            var appSource = "";
-            if (sender != null && sender != 0) {
-              appSource = sender.getHost().Source;
-            }
-            
-            var errorType = args.ErrorType;
-            var iErrorCode = args.ErrorCode;
-
-            if (errorType == "ImageError" || errorType == "MediaError") {
-              return;
-            }
-
-            var errMsg = "Unhandled Error in Silverlight Application " +  appSource + "\n" ;
-
-            errMsg += "Code: "+ iErrorCode + "    \n";
-            errMsg += "Category: " + errorType + "       \n";
-            errMsg += "Message: " + args.ErrorMessage + "     \n";
-
-            if (errorType == "ParserError") {
-                errMsg += "File: " + args.xamlFile + "     \n";
-                errMsg += "Line: " + args.lineNumber + "     \n";
-                errMsg += "Position: " + args.charPosition + "     \n";
-            }
-            else if (errorType == "RuntimeError") {           
-                if (args.lineNumber != 0) {
-                    errMsg += "Line: " + args.lineNumber + "     \n";
-                    errMsg += "Position: " +  args.charPosition + "     \n";
-                }
-                errMsg += "MethodName: " + args.methodName + "     \n";
-            }
-
-            throw new Error(errMsg);
-        }
-    </script>
-</head>
-<body>
-    <form id="form1" runat="server" style="height:100%">
-    <div id="silverlightControlHost">
-        <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
-		  <param name="source" value="MediaElementControlsAutoPlay.xap"/>
-		  <param name="onError" value="onSilverlightError" />
-		  <param name="background" value="white" />
-		  <param name="minRuntimeVersion" value="4.0.50826.0" />
-		  <param name="autoUpgrade" value="true" />
-		  <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50826.0" style="text-decoration:none">
- 			  <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/>
-		  </a>
-	    </object><iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px"></iframe></div>
-    </form>
-</body>
-</html>
diff --git a/working-examples/silverlight-media-element-controls/MediaElementControls.xap b/working-examples/silverlight-media-element-controls/MediaElementControls.xap
deleted file mode 100644
index 955dfb8c5b..0000000000
Binary files a/working-examples/silverlight-media-element-controls/MediaElementControls.xap and /dev/null differ
diff --git a/working-examples/silverlight-media-element-controls/index.html b/working-examples/silverlight-media-element-controls/index.html
deleted file mode 100644
index ef74ef18c9..0000000000
--- a/working-examples/silverlight-media-element-controls/index.html
+++ /dev/null
@@ -1,73 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" >
-<!-- saved from url=(0014)about:internet -->
-<head>
-    <title>MediaElementControls</title>
-    <style type="text/css">
-    html, body {
-	    height: 100%;
-	    overflow: auto;
-    }
-    body {
-	    padding: 0;
-	    margin: 0;
-    }
-    #silverlightControlHost {
-	    height: 100%;
-	    text-align:center;
-    }
-    </style>
-    
-    <script type="text/javascript">
-        function onSilverlightError(sender, args) {
-            var appSource = "";
-            if (sender != null && sender != 0) {
-              appSource = sender.getHost().Source;
-            }
-            
-            var errorType = args.ErrorType;
-            var iErrorCode = args.ErrorCode;
-
-            if (errorType == "ImageError" || errorType == "MediaError") {
-              return;
-            }
-
-            var errMsg = "Unhandled Error in Silverlight Application " +  appSource + "\n" ;
-
-            errMsg += "Code: "+ iErrorCode + "    \n";
-            errMsg += "Category: " + errorType + "       \n";
-            errMsg += "Message: " + args.ErrorMessage + "     \n";
-
-            if (errorType == "ParserError") {
-                errMsg += "File: " + args.xamlFile + "     \n";
-                errMsg += "Line: " + args.lineNumber + "     \n";
-                errMsg += "Position: " + args.charPosition + "     \n";
-            }
-            else if (errorType == "RuntimeError") {           
-                if (args.lineNumber != 0) {
-                    errMsg += "Line: " + args.lineNumber + "     \n";
-                    errMsg += "Position: " +  args.charPosition + "     \n";
-                }
-                errMsg += "MethodName: " + args.methodName + "     \n";
-            }
-
-            throw new Error(errMsg);
-        }
-    </script>
-</head>
-<body>
-    <form id="form1" runat="server" style="height:100%">
-    <div id="silverlightControlHost">
-        <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
-		  <param name="source" value="MediaElementControls.xap"/>
-		  <param name="onError" value="onSilverlightError" />
-		  <param name="background" value="white" />
-		  <param name="minRuntimeVersion" value="4.0.50826.0" />
-		  <param name="autoUpgrade" value="true" />
-		  <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50826.0" style="text-decoration:none">
- 			  <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/>
-		  </a>
-	    </object><iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px"></iframe></div>
-    </form>
-</body>
-</html>
diff --git a/working-examples/silverlight-media-timeline-markers/MediaTimelineMarkers.xap b/working-examples/silverlight-media-timeline-markers/MediaTimelineMarkers.xap
deleted file mode 100644
index 599a74f497..0000000000
Binary files a/working-examples/silverlight-media-timeline-markers/MediaTimelineMarkers.xap and /dev/null differ
diff --git a/working-examples/silverlight-media-timeline-markers/index.html b/working-examples/silverlight-media-timeline-markers/index.html
deleted file mode 100644
index 7bcd697679..0000000000
--- a/working-examples/silverlight-media-timeline-markers/index.html
+++ /dev/null
@@ -1,73 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" >
-<!-- saved from url=(0014)about:internet -->
-<head>
-    <title>MediaTimelineMarkers</title>
-    <style type="text/css">
-    html, body {
-	    height: 100%;
-	    overflow: auto;
-    }
-    body {
-	    padding: 0;
-	    margin: 0;
-    }
-    #silverlightControlHost {
-	    height: 100%;
-	    text-align:center;
-    }
-    </style>
-    
-    <script type="text/javascript">
-        function onSilverlightError(sender, args) {
-            var appSource = "";
-            if (sender != null && sender != 0) {
-              appSource = sender.getHost().Source;
-            }
-            
-            var errorType = args.ErrorType;
-            var iErrorCode = args.ErrorCode;
-
-            if (errorType == "ImageError" || errorType == "MediaError") {
-              return;
-            }
-
-            var errMsg = "Unhandled Error in Silverlight Application " +  appSource + "\n" ;
-
-            errMsg += "Code: "+ iErrorCode + "    \n";
-            errMsg += "Category: " + errorType + "       \n";
-            errMsg += "Message: " + args.ErrorMessage + "     \n";
-
-            if (errorType == "ParserError") {
-                errMsg += "File: " + args.xamlFile + "     \n";
-                errMsg += "Line: " + args.lineNumber + "     \n";
-                errMsg += "Position: " + args.charPosition + "     \n";
-            }
-            else if (errorType == "RuntimeError") {           
-                if (args.lineNumber != 0) {
-                    errMsg += "Line: " + args.lineNumber + "     \n";
-                    errMsg += "Position: " +  args.charPosition + "     \n";
-                }
-                errMsg += "MethodName: " + args.methodName + "     \n";
-            }
-
-            throw new Error(errMsg);
-        }
-    </script>
-</head>
-<body>
-    <form id="form1" runat="server" style="height:100%">
-    <div id="silverlightControlHost">
-        <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
-		  <param name="source" value="MediaTimelineMarkers.xap"/>
-		  <param name="onError" value="onSilverlightError" />
-		  <param name="background" value="white" />
-		  <param name="minRuntimeVersion" value="4.0.50826.0" />
-		  <param name="autoUpgrade" value="true" />
-		  <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50826.0" style="text-decoration:none">
- 			  <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/>
-		  </a>
-	    </object><iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px"></iframe></div>
-    </form>
-</body>
-</html>
diff --git a/working-examples/silverlight-pause-bouncy-ball/PauseBouncyBall.xap b/working-examples/silverlight-pause-bouncy-ball/PauseBouncyBall.xap
deleted file mode 100644
index dfee2ea738..0000000000
Binary files a/working-examples/silverlight-pause-bouncy-ball/PauseBouncyBall.xap and /dev/null differ
diff --git a/working-examples/silverlight-pause-bouncy-ball/index.html b/working-examples/silverlight-pause-bouncy-ball/index.html
deleted file mode 100644
index ee8cdb781e..0000000000
--- a/working-examples/silverlight-pause-bouncy-ball/index.html
+++ /dev/null
@@ -1,73 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" >
-<!-- saved from url=(0014)about:internet -->
-<head>
-    <title>PauseBouncyBall</title>
-    <style type="text/css">
-    html, body {
-	    height: 100%;
-	    overflow: auto;
-    }
-    body {
-	    padding: 0;
-	    margin: 0;
-    }
-    #silverlightControlHost {
-	    height: 100%;
-	    text-align:center;
-    }
-    </style>
-    
-    <script type="text/javascript">
-        function onSilverlightError(sender, args) {
-            var appSource = "";
-            if (sender != null && sender != 0) {
-              appSource = sender.getHost().Source;
-            }
-            
-            var errorType = args.ErrorType;
-            var iErrorCode = args.ErrorCode;
-
-            if (errorType == "ImageError" || errorType == "MediaError") {
-              return;
-            }
-
-            var errMsg = "Unhandled Error in Silverlight Application " +  appSource + "\n" ;
-
-            errMsg += "Code: "+ iErrorCode + "    \n";
-            errMsg += "Category: " + errorType + "       \n";
-            errMsg += "Message: " + args.ErrorMessage + "     \n";
-
-            if (errorType == "ParserError") {
-                errMsg += "File: " + args.xamlFile + "     \n";
-                errMsg += "Line: " + args.lineNumber + "     \n";
-                errMsg += "Position: " + args.charPosition + "     \n";
-            }
-            else if (errorType == "RuntimeError") {           
-                if (args.lineNumber != 0) {
-                    errMsg += "Line: " + args.lineNumber + "     \n";
-                    errMsg += "Position: " +  args.charPosition + "     \n";
-                }
-                errMsg += "MethodName: " + args.methodName + "     \n";
-            }
-
-            throw new Error(errMsg);
-        }
-    </script>
-</head>
-<body>
-    <form id="form1" runat="server" style="height:100%">
-    <div id="silverlightControlHost">
-        <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
-		  <param name="source" value="PauseBouncyBall.xap"/>
-		  <param name="onError" value="onSilverlightError" />
-		  <param name="background" value="white" />
-		  <param name="minRuntimeVersion" value="4.0.50826.0" />
-		  <param name="autoUpgrade" value="true" />
-		  <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50826.0" style="text-decoration:none">
- 			  <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/>
-		  </a>
-	    </object><iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px"></iframe></div>
-    </form>
-</body>
-</html>
diff --git a/working-examples/silverlight-programmatic-focus/ProgrammaticFocus.xap b/working-examples/silverlight-programmatic-focus/ProgrammaticFocus.xap
deleted file mode 100644
index 52840f6900..0000000000
Binary files a/working-examples/silverlight-programmatic-focus/ProgrammaticFocus.xap and /dev/null differ
diff --git a/working-examples/silverlight-programmatic-focus/index.html b/working-examples/silverlight-programmatic-focus/index.html
deleted file mode 100644
index 011c8cf696..0000000000
--- a/working-examples/silverlight-programmatic-focus/index.html
+++ /dev/null
@@ -1,73 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" >
-<!-- saved from url=(0014)about:internet -->
-<head>
-    <title>ProgrammaticFocus</title>
-    <style type="text/css">
-    html, body {
-	    height: 100%;
-	    overflow: auto;
-    }
-    body {
-	    padding: 0;
-	    margin: 0;
-    }
-    #silverlightControlHost {
-	    height: 100%;
-	    text-align:center;
-    }
-    </style>
-    
-    <script type="text/javascript">
-        function onSilverlightError(sender, args) {
-            var appSource = "";
-            if (sender != null && sender != 0) {
-              appSource = sender.getHost().Source;
-            }
-            
-            var errorType = args.ErrorType;
-            var iErrorCode = args.ErrorCode;
-
-            if (errorType == "ImageError" || errorType == "MediaError") {
-              return;
-            }
-
-            var errMsg = "Unhandled Error in Silverlight Application " +  appSource + "\n" ;
-
-            errMsg += "Code: "+ iErrorCode + "    \n";
-            errMsg += "Category: " + errorType + "       \n";
-            errMsg += "Message: " + args.ErrorMessage + "     \n";
-
-            if (errorType == "ParserError") {
-                errMsg += "File: " + args.xamlFile + "     \n";
-                errMsg += "Line: " + args.lineNumber + "     \n";
-                errMsg += "Position: " + args.charPosition + "     \n";
-            }
-            else if (errorType == "RuntimeError") {           
-                if (args.lineNumber != 0) {
-                    errMsg += "Line: " + args.lineNumber + "     \n";
-                    errMsg += "Position: " +  args.charPosition + "     \n";
-                }
-                errMsg += "MethodName: " + args.methodName + "     \n";
-            }
-
-            throw new Error(errMsg);
-        }
-    </script>
-</head>
-<body>
-    <form id="form1" runat="server" style="height:100%">
-    <div id="silverlightControlHost">
-        <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
-		  <param name="source" value="ProgrammaticFocus.xap"/>
-		  <param name="onError" value="onSilverlightError" />
-		  <param name="background" value="white" />
-		  <param name="minRuntimeVersion" value="4.0.50826.0" />
-		  <param name="autoUpgrade" value="true" />
-		  <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50826.0" style="text-decoration:none">
- 			  <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/>
-		  </a>
-	    </object><iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px"></iframe></div>
-    </form>
-</body>
-</html>
diff --git a/working-examples/silverlight-replace-audio-with-transcript/ReplaceAudioWithTranscriptText.xap b/working-examples/silverlight-replace-audio-with-transcript/ReplaceAudioWithTranscriptText.xap
deleted file mode 100644
index 9ed040f0b1..0000000000
Binary files a/working-examples/silverlight-replace-audio-with-transcript/ReplaceAudioWithTranscriptText.xap and /dev/null differ
diff --git a/working-examples/silverlight-replace-audio-with-transcript/index.html b/working-examples/silverlight-replace-audio-with-transcript/index.html
deleted file mode 100644
index 4376ac3f16..0000000000
--- a/working-examples/silverlight-replace-audio-with-transcript/index.html
+++ /dev/null
@@ -1,73 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" >
-<!-- saved from url=(0014)about:internet -->
-<head>
-    <title>ReplaceAudioWithTranscriptText</title>
-    <style type="text/css">
-    html, body {
-	    height: 100%;
-	    overflow: auto;
-    }
-    body {
-	    padding: 0;
-	    margin: 0;
-    }
-    #silverlightControlHost {
-	    height: 100%;
-	    text-align:center;
-    }
-    </style>
-    
-    <script type="text/javascript">
-        function onSilverlightError(sender, args) {
-            var appSource = "";
-            if (sender != null && sender != 0) {
-              appSource = sender.getHost().Source;
-            }
-            
-            var errorType = args.ErrorType;
-            var iErrorCode = args.ErrorCode;
-
-            if (errorType == "ImageError" || errorType == "MediaError") {
-              return;
-            }
-
-            var errMsg = "Unhandled Error in Silverlight Application " +  appSource + "\n" ;
-
-            errMsg += "Code: "+ iErrorCode + "    \n";
-            errMsg += "Category: " + errorType + "       \n";
-            errMsg += "Message: " + args.ErrorMessage + "     \n";
-
-            if (errorType == "ParserError") {
-                errMsg += "File: " + args.xamlFile + "     \n";
-                errMsg += "Line: " + args.lineNumber + "     \n";
-                errMsg += "Position: " + args.charPosition + "     \n";
-            }
-            else if (errorType == "RuntimeError") {           
-                if (args.lineNumber != 0) {
-                    errMsg += "Line: " + args.lineNumber + "     \n";
-                    errMsg += "Position: " +  args.charPosition + "     \n";
-                }
-                errMsg += "MethodName: " + args.methodName + "     \n";
-            }
-
-            throw new Error(errMsg);
-        }
-    </script>
-</head>
-<body>
-    <form id="form1" runat="server" style="height:100%">
-    <div id="silverlightControlHost">
-        <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
-		  <param name="source" value="ReplaceAudioWithTranscriptText.xap"/>
-		  <param name="onError" value="onSilverlightError" />
-		  <param name="background" value="white" />
-		  <param name="minRuntimeVersion" value="4.0.50826.0" />
-		  <param name="autoUpgrade" value="true" />
-		  <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50826.0" style="text-decoration:none">
- 			  <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/>
-		  </a>
-	    </object><iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px"></iframe></div>
-    </form>
-</body>
-</html>
diff --git a/working-examples/silverlight-silver-fish/index.html b/working-examples/silverlight-silver-fish/index.html
deleted file mode 100644
index f6640f1f0a..0000000000
--- a/working-examples/silverlight-silver-fish/index.html
+++ /dev/null
@@ -1,20 +0,0 @@
- <html xmlns="http://www.w3.org/1999/xhtml" >
- <head runat="server">
-    <title>SilverFish</title>
- </head>
- <body>
-    <form id="form1" runat="server" style="height:100%">
-      <div id="silverlightControl_en">
-        <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="25px" lang="en">
-	  <param name="source" value="ClientBin/SilverFish.xap"/>
-        </object>
-      </div>
-      <hr />
-      <div id="silverlightControl_de">
-        <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="25px" lang="de">
-          <param name="source" value="ClientBin/SilverFish_DE.xap"/>
-        </object
-      </div>
-    </form>
-  </body>
- </html>
diff --git a/working-examples/silverlight-simple-numeric-up-down/SimpleNumericUpDown.xap b/working-examples/silverlight-simple-numeric-up-down/SimpleNumericUpDown.xap
deleted file mode 100644
index dbfb977df2..0000000000
Binary files a/working-examples/silverlight-simple-numeric-up-down/SimpleNumericUpDown.xap and /dev/null differ
diff --git a/working-examples/silverlight-simple-numeric-up-down/index.html b/working-examples/silverlight-simple-numeric-up-down/index.html
deleted file mode 100644
index 791e39c019..0000000000
--- a/working-examples/silverlight-simple-numeric-up-down/index.html
+++ /dev/null
@@ -1,73 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" >
-<!-- saved from url=(0014)about:internet -->
-<head>
-    <title>KeysNumericUpDown</title>
-    <style type="text/css">
-    html, body {
-	    height: 100%;
-	    overflow: auto;
-    }
-    body {
-	    padding: 0;
-	    margin: 0;
-    }
-    #silverlightControlHost {
-	    height: 100%;
-	    text-align:center;
-    }
-    </style>
-    
-    <script type="text/javascript">
-        function onSilverlightError(sender, args) {
-            var appSource = "";
-            if (sender != null && sender != 0) {
-              appSource = sender.getHost().Source;
-            }
-            
-            var errorType = args.ErrorType;
-            var iErrorCode = args.ErrorCode;
-
-            if (errorType == "ImageError" || errorType == "MediaError") {
-              return;
-            }
-
-            var errMsg = "Unhandled Error in Silverlight Application " +  appSource + "\n" ;
-
-            errMsg += "Code: "+ iErrorCode + "    \n";
-            errMsg += "Category: " + errorType + "       \n";
-            errMsg += "Message: " + args.ErrorMessage + "     \n";
-
-            if (errorType == "ParserError") {
-                errMsg += "File: " + args.xamlFile + "     \n";
-                errMsg += "Line: " + args.lineNumber + "     \n";
-                errMsg += "Position: " + args.charPosition + "     \n";
-            }
-            else if (errorType == "RuntimeError") {           
-                if (args.lineNumber != 0) {
-                    errMsg += "Line: " + args.lineNumber + "     \n";
-                    errMsg += "Position: " +  args.charPosition + "     \n";
-                }
-                errMsg += "MethodName: " + args.methodName + "     \n";
-            }
-
-            throw new Error(errMsg);
-        }
-    </script>
-</head>
-<body>
-    <form id="form1" runat="server" style="height:100%">
-    <div id="silverlightControlHost">
-        <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
-		  <param name="source" value="SimpleNumericUpDown.xap"/>
-		  <param name="onError" value="onSilverlightError" />
-		  <param name="background" value="white" />
-		  <param name="minRuntimeVersion" value="4.0.50826.0" />
-		  <param name="autoUpgrade" value="true" />
-		  <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50826.0" style="text-decoration:none">
- 			  <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/>
-		  </a>
-	    </object><iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px"></iframe></div>
-    </form>
-</body>
-</html>
diff --git a/working-examples/silverlight-simple-peer-forwarding/SimplePeerForwarding.xap b/working-examples/silverlight-simple-peer-forwarding/SimplePeerForwarding.xap
deleted file mode 100644
index 1ff76aec32..0000000000
Binary files a/working-examples/silverlight-simple-peer-forwarding/SimplePeerForwarding.xap and /dev/null differ
diff --git a/working-examples/silverlight-simple-peer-forwarding/index.html b/working-examples/silverlight-simple-peer-forwarding/index.html
deleted file mode 100644
index 1ccc05049e..0000000000
--- a/working-examples/silverlight-simple-peer-forwarding/index.html
+++ /dev/null
@@ -1,73 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" >
-<!-- saved from url=(0014)about:internet -->
-<head>
-    <title>SimplePeerForwarding</title>
-    <style type="text/css">
-    html, body {
-	    height: 100%;
-	    overflow: auto;
-    }
-    body {
-	    padding: 0;
-	    margin: 0;
-    }
-    #silverlightControlHost {
-	    height: 100%;
-	    text-align:center;
-    }
-    </style>
-    
-    <script type="text/javascript">
-        function onSilverlightError(sender, args) {
-            var appSource = "";
-            if (sender != null && sender != 0) {
-              appSource = sender.getHost().Source;
-            }
-            
-            var errorType = args.ErrorType;
-            var iErrorCode = args.ErrorCode;
-
-            if (errorType == "ImageError" || errorType == "MediaError") {
-              return;
-            }
-
-            var errMsg = "Unhandled Error in Silverlight Application " +  appSource + "\n" ;
-
-            errMsg += "Code: "+ iErrorCode + "    \n";
-            errMsg += "Category: " + errorType + "       \n";
-            errMsg += "Message: " + args.ErrorMessage + "     \n";
-
-            if (errorType == "ParserError") {
-                errMsg += "File: " + args.xamlFile + "     \n";
-                errMsg += "Line: " + args.lineNumber + "     \n";
-                errMsg += "Position: " + args.charPosition + "     \n";
-            }
-            else if (errorType == "RuntimeError") {           
-                if (args.lineNumber != 0) {
-                    errMsg += "Line: " + args.lineNumber + "     \n";
-                    errMsg += "Position: " +  args.charPosition + "     \n";
-                }
-                errMsg += "MethodName: " + args.methodName + "     \n";
-            }
-
-            throw new Error(errMsg);
-        }
-    </script>
-</head>
-<body>
-    <form id="form1" runat="server" style="height:100%">
-    <div id="silverlightControlHost">
-        <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
-		  <param name="source" value="SimplePeerForwarding.xap"/>
-		  <param name="onError" value="onSilverlightError" />
-		  <param name="background" value="white" />
-		  <param name="minRuntimeVersion" value="4.0.50401.0" />
-		  <param name="autoUpgrade" value="true" />
-		  <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50401.0" style="text-decoration:none">
- 			  <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/>
-		  </a>
-	    </object><iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px"></iframe></div>
-    </form>
-</body>
-</html>
diff --git a/working-examples/silverlight-stop-animation/StopAnimation.xap b/working-examples/silverlight-stop-animation/StopAnimation.xap
deleted file mode 100644
index 4a187152aa..0000000000
Binary files a/working-examples/silverlight-stop-animation/StopAnimation.xap and /dev/null differ
diff --git a/working-examples/silverlight-stop-animation/index.html b/working-examples/silverlight-stop-animation/index.html
deleted file mode 100644
index a1333454ed..0000000000
--- a/working-examples/silverlight-stop-animation/index.html
+++ /dev/null
@@ -1,73 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" >
-<!-- saved from url=(0014)about:internet -->
-<head>
-    <title>StopAnimation</title>
-    <style type="text/css">
-    html, body {
-	    height: 100%;
-	    overflow: auto;
-    }
-    body {
-	    padding: 0;
-	    margin: 0;
-    }
-    #silverlightControlHost {
-	    height: 100%;
-	    text-align:center;
-    }
-    </style>
-    
-    <script type="text/javascript">
-        function onSilverlightError(sender, args) {
-            var appSource = "";
-            if (sender != null && sender != 0) {
-              appSource = sender.getHost().Source;
-            }
-            
-            var errorType = args.ErrorType;
-            var iErrorCode = args.ErrorCode;
-
-            if (errorType == "ImageError" || errorType == "MediaError") {
-              return;
-            }
-
-            var errMsg = "Unhandled Error in Silverlight Application " +  appSource + "\n" ;
-
-            errMsg += "Code: "+ iErrorCode + "    \n";
-            errMsg += "Category: " + errorType + "       \n";
-            errMsg += "Message: " + args.ErrorMessage + "     \n";
-
-            if (errorType == "ParserError") {
-                errMsg += "File: " + args.xamlFile + "     \n";
-                errMsg += "Line: " + args.lineNumber + "     \n";
-                errMsg += "Position: " + args.charPosition + "     \n";
-            }
-            else if (errorType == "RuntimeError") {           
-                if (args.lineNumber != 0) {
-                    errMsg += "Line: " + args.lineNumber + "     \n";
-                    errMsg += "Position: " +  args.charPosition + "     \n";
-                }
-                errMsg += "MethodName: " + args.methodName + "     \n";
-            }
-
-            throw new Error(errMsg);
-        }
-    </script>
-</head>
-<body>
-    <form id="form1" runat="server" style="height:100%">
-    <div id="silverlightControlHost">
-        <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
-		  <param name="source" value="StopAnimation.xap"/>
-		  <param name="onError" value="onSilverlightError" />
-		  <param name="background" value="white" />
-		  <param name="minRuntimeVersion" value="4.0.50826.0" />
-		  <param name="autoUpgrade" value="true" />
-		  <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50826.0" style="text-decoration:none">
- 			  <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/>
-		  </a>
-	    </object><iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px"></iframe></div>
-    </form>
-</body>
-</html>
diff --git a/working-examples/silverlight-style-switcher-font-size/StyleSwitcherFontSize.xap b/working-examples/silverlight-style-switcher-font-size/StyleSwitcherFontSize.xap
deleted file mode 100644
index 4d88e9f662..0000000000
Binary files a/working-examples/silverlight-style-switcher-font-size/StyleSwitcherFontSize.xap and /dev/null differ
diff --git a/working-examples/silverlight-style-switcher-font-size/index.html b/working-examples/silverlight-style-switcher-font-size/index.html
deleted file mode 100644
index b0694b3c06..0000000000
--- a/working-examples/silverlight-style-switcher-font-size/index.html
+++ /dev/null
@@ -1,73 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" >
-<!-- saved from url=(0014)about:internet -->
-<head>
-    <title>StyleSwitcherFontSize</title>
-    <style type="text/css">
-    html, body {
-	    height: 100%;
-	    overflow: auto;
-    }
-    body {
-	    padding: 0;
-	    margin: 0;
-    }
-    #silverlightControlHost {
-	    height: 100%;
-	    text-align:center;
-    }
-    </style>
-    
-    <script type="text/javascript">
-        function onSilverlightError(sender, args) {
-            var appSource = "";
-            if (sender != null && sender != 0) {
-              appSource = sender.getHost().Source;
-            }
-            
-            var errorType = args.ErrorType;
-            var iErrorCode = args.ErrorCode;
-
-            if (errorType == "ImageError" || errorType == "MediaError") {
-              return;
-            }
-
-            var errMsg = "Unhandled Error in Silverlight Application " +  appSource + "\n" ;
-
-            errMsg += "Code: "+ iErrorCode + "    \n";
-            errMsg += "Category: " + errorType + "       \n";
-            errMsg += "Message: " + args.ErrorMessage + "     \n";
-
-            if (errorType == "ParserError") {
-                errMsg += "File: " + args.xamlFile + "     \n";
-                errMsg += "Line: " + args.lineNumber + "     \n";
-                errMsg += "Position: " + args.charPosition + "     \n";
-            }
-            else if (errorType == "RuntimeError") {           
-                if (args.lineNumber != 0) {
-                    errMsg += "Line: " + args.lineNumber + "     \n";
-                    errMsg += "Position: " +  args.charPosition + "     \n";
-                }
-                errMsg += "MethodName: " + args.methodName + "     \n";
-            }
-
-            throw new Error(errMsg);
-        }
-    </script>
-</head>
-<body>
-    <form id="form1" runat="server" style="height:100%">
-    <div id="silverlightControlHost">
-        <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
-		  <param name="source" value="StyleSwitcherFontSize.xap"/>
-		  <param name="onError" value="onSilverlightError" />
-		  <param name="background" value="white" />
-		  <param name="minRuntimeVersion" value="4.0.50401.0" />
-		  <param name="autoUpgrade" value="true" />
-		  <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50401.0" style="text-decoration:none">
- 			  <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/>
-		  </a>
-	    </object><iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px"></iframe></div>
-    </form>
-</body>
-</html>
diff --git a/working-examples/silverlight-tab-navigation/TabNavigation.xap b/working-examples/silverlight-tab-navigation/TabNavigation.xap
deleted file mode 100644
index e6e96da72b..0000000000
Binary files a/working-examples/silverlight-tab-navigation/TabNavigation.xap and /dev/null differ
diff --git a/working-examples/silverlight-tab-navigation/index.html b/working-examples/silverlight-tab-navigation/index.html
deleted file mode 100644
index 3551d29d3e..0000000000
--- a/working-examples/silverlight-tab-navigation/index.html
+++ /dev/null
@@ -1,73 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" >
-<!-- saved from url=(0014)about:internet -->
-<head>
-    <title>TabNavigation</title>
-    <style type="text/css">
-    html, body {
-	    height: 100%;
-	    overflow: auto;
-    }
-    body {
-	    padding: 0;
-	    margin: 0;
-    }
-    #silverlightControlHost {
-	    height: 100%;
-	    text-align:center;
-    }
-    </style>
-    
-    <script type="text/javascript">
-        function onSilverlightError(sender, args) {
-            var appSource = "";
-            if (sender != null && sender != 0) {
-              appSource = sender.getHost().Source;
-            }
-            
-            var errorType = args.ErrorType;
-            var iErrorCode = args.ErrorCode;
-
-            if (errorType == "ImageError" || errorType == "MediaError") {
-              return;
-            }
-
-            var errMsg = "Unhandled Error in Silverlight Application " +  appSource + "\n" ;
-
-            errMsg += "Code: "+ iErrorCode + "    \n";
-            errMsg += "Category: " + errorType + "       \n";
-            errMsg += "Message: " + args.ErrorMessage + "     \n";
-
-            if (errorType == "ParserError") {
-                errMsg += "File: " + args.xamlFile + "     \n";
-                errMsg += "Line: " + args.lineNumber + "     \n";
-                errMsg += "Position: " + args.charPosition + "     \n";
-            }
-            else if (errorType == "RuntimeError") {           
-                if (args.lineNumber != 0) {
-                    errMsg += "Line: " + args.lineNumber + "     \n";
-                    errMsg += "Position: " +  args.charPosition + "     \n";
-                }
-                errMsg += "MethodName: " + args.methodName + "     \n";
-            }
-
-            throw new Error(errMsg);
-        }
-    </script>
-</head>
-<body>
-    <form id="form1" runat="server" style="height:100%">
-    <div id="silverlightControlHost">
-        <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
-		  <param name="source" value="TabNavigation.xap"/>
-		  <param name="onError" value="onSilverlightError" />
-		  <param name="background" value="white" />
-		  <param name="minRuntimeVersion" value="4.0.50401.0" />
-		  <param name="autoUpgrade" value="true" />
-		  <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50401.0" style="text-decoration:none">
- 			  <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/>
-		  </a>
-	    </object><iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px"></iframe></div>
-    </form>
-</body>
-</html>
diff --git a/working-examples/silverlight-tab-sequence-enabled/TabSequence_Enabled.xap b/working-examples/silverlight-tab-sequence-enabled/TabSequence_Enabled.xap
deleted file mode 100644
index df65bb2639..0000000000
Binary files a/working-examples/silverlight-tab-sequence-enabled/TabSequence_Enabled.xap and /dev/null differ
diff --git a/working-examples/silverlight-tab-sequence-enabled/index.html b/working-examples/silverlight-tab-sequence-enabled/index.html
deleted file mode 100644
index c12eca2391..0000000000
--- a/working-examples/silverlight-tab-sequence-enabled/index.html
+++ /dev/null
@@ -1,73 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" >
-<!-- saved from url=(0014)about:internet -->
-<head>
-    <title>TabSequenceEnabled</title>
-    <style type="text/css">
-    html, body {
-	    height: 100%;
-	    overflow: auto;
-    }
-    body {
-	    padding: 0;
-	    margin: 0;
-    }
-    #silverlightControlHost {
-	    height: 100%;
-	    text-align:center;
-    }
-    </style>
-    
-    <script type="text/javascript">
-        function onSilverlightError(sender, args) {
-            var appSource = "";
-            if (sender != null && sender != 0) {
-              appSource = sender.getHost().Source;
-            }
-            
-            var errorType = args.ErrorType;
-            var iErrorCode = args.ErrorCode;
-
-            if (errorType == "ImageError" || errorType == "MediaError") {
-              return;
-            }
-
-            var errMsg = "Unhandled Error in Silverlight Application " +  appSource + "\n" ;
-
-            errMsg += "Code: "+ iErrorCode + "    \n";
-            errMsg += "Category: " + errorType + "       \n";
-            errMsg += "Message: " + args.ErrorMessage + "     \n";
-
-            if (errorType == "ParserError") {
-                errMsg += "File: " + args.xamlFile + "     \n";
-                errMsg += "Line: " + args.lineNumber + "     \n";
-                errMsg += "Position: " + args.charPosition + "     \n";
-            }
-            else if (errorType == "RuntimeError") {           
-                if (args.lineNumber != 0) {
-                    errMsg += "Line: " + args.lineNumber + "     \n";
-                    errMsg += "Position: " +  args.charPosition + "     \n";
-                }
-                errMsg += "MethodName: " + args.methodName + "     \n";
-            }
-
-            throw new Error(errMsg);
-        }
-    </script>
-</head>
-<body>
-    <form id="form1" runat="server" style="height:100%">
-    <div id="silverlightControlHost">
-        <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
-		  <param name="source" value="TabSequenceEnabled.xap"/>
-		  <param name="onError" value="onSilverlightError" />
-		  <param name="background" value="white" />
-		  <param name="minRuntimeVersion" value="4.0.50826.0" />
-		  <param name="autoUpgrade" value="true" />
-		  <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50826.0" style="text-decoration:none">
- 			  <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/>
-		  </a>
-	    </object><iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px"></iframe></div>
-    </form>
-</body>
-</html>
diff --git a/working-examples/silverlight-tab-sequence-tab-index/TabSequence_Tabindex.xap b/working-examples/silverlight-tab-sequence-tab-index/TabSequence_Tabindex.xap
deleted file mode 100644
index b0ae7d9ddf..0000000000
Binary files a/working-examples/silverlight-tab-sequence-tab-index/TabSequence_Tabindex.xap and /dev/null differ
diff --git a/working-examples/silverlight-tab-sequence-tab-index/index.html b/working-examples/silverlight-tab-sequence-tab-index/index.html
deleted file mode 100644
index 829cea89fc..0000000000
--- a/working-examples/silverlight-tab-sequence-tab-index/index.html
+++ /dev/null
@@ -1,73 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" >
-<!-- saved from url=(0014)about:internet -->
-<head>
-    <title>TabSequence_TabIndex</title>
-    <style type="text/css">
-    html, body {
-	    height: 100%;
-	    overflow: auto;
-    }
-    body {
-	    padding: 0;
-	    margin: 0;
-    }
-    #silverlightControlHost {
-	    height: 100%;
-	    text-align:center;
-    }
-    </style>
-    
-    <script type="text/javascript">
-        function onSilverlightError(sender, args) {
-            var appSource = "";
-            if (sender != null && sender != 0) {
-              appSource = sender.getHost().Source;
-            }
-            
-            var errorType = args.ErrorType;
-            var iErrorCode = args.ErrorCode;
-
-            if (errorType == "ImageError" || errorType == "MediaError") {
-              return;
-            }
-
-            var errMsg = "Unhandled Error in Silverlight Application " +  appSource + "\n" ;
-
-            errMsg += "Code: "+ iErrorCode + "    \n";
-            errMsg += "Category: " + errorType + "       \n";
-            errMsg += "Message: " + args.ErrorMessage + "     \n";
-
-            if (errorType == "ParserError") {
-                errMsg += "File: " + args.xamlFile + "     \n";
-                errMsg += "Line: " + args.lineNumber + "     \n";
-                errMsg += "Position: " + args.charPosition + "     \n";
-            }
-            else if (errorType == "RuntimeError") {           
-                if (args.lineNumber != 0) {
-                    errMsg += "Line: " + args.lineNumber + "     \n";
-                    errMsg += "Position: " +  args.charPosition + "     \n";
-                }
-                errMsg += "MethodName: " + args.methodName + "     \n";
-            }
-
-            throw new Error(errMsg);
-        }
-    </script>
-</head>
-<body>
-    <form id="form1" runat="server" style="height:100%">
-    <div id="silverlightControlHost">
-        <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
-		  <param name="source" value="TabSequence_TabIndex.xap"/>
-		  <param name="onError" value="onSilverlightError" />
-		  <param name="background" value="white" />
-		  <param name="minRuntimeVersion" value="4.0.50401.0" />
-		  <param name="autoUpgrade" value="true" />
-		  <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50401.0" style="text-decoration:none">
- 			  <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/>
-		  </a>
-	    </object><iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px"></iframe></div>
-    </form>
-</body>
-</html>
diff --git a/working-examples/silverlight-tab-sequence/TabSequence.xap b/working-examples/silverlight-tab-sequence/TabSequence.xap
deleted file mode 100644
index 1038372bbe..0000000000
Binary files a/working-examples/silverlight-tab-sequence/TabSequence.xap and /dev/null differ
diff --git a/working-examples/silverlight-tab-sequence/index.html b/working-examples/silverlight-tab-sequence/index.html
deleted file mode 100644
index 56ddc47d71..0000000000
--- a/working-examples/silverlight-tab-sequence/index.html
+++ /dev/null
@@ -1,73 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" >
-<!-- saved from url=(0014)about:internet -->
-<head>
-    <title>TabSequence</title>
-    <style type="text/css">
-    html, body {
-	    height: 100%;
-	    overflow: auto;
-    }
-    body {
-	    padding: 0;
-	    margin: 0;
-    }
-    #silverlightControlHost {
-	    height: 100%;
-	    text-align:center;
-    }
-    </style>
-    
-    <script type="text/javascript">
-        function onSilverlightError(sender, args) {
-            var appSource = "";
-            if (sender != null && sender != 0) {
-              appSource = sender.getHost().Source;
-            }
-            
-            var errorType = args.ErrorType;
-            var iErrorCode = args.ErrorCode;
-
-            if (errorType == "ImageError" || errorType == "MediaError") {
-              return;
-            }
-
-            var errMsg = "Unhandled Error in Silverlight Application " +  appSource + "\n" ;
-
-            errMsg += "Code: "+ iErrorCode + "    \n";
-            errMsg += "Category: " + errorType + "       \n";
-            errMsg += "Message: " + args.ErrorMessage + "     \n";
-
-            if (errorType == "ParserError") {
-                errMsg += "File: " + args.xamlFile + "     \n";
-                errMsg += "Line: " + args.lineNumber + "     \n";
-                errMsg += "Position: " + args.charPosition + "     \n";
-            }
-            else if (errorType == "RuntimeError") {           
-                if (args.lineNumber != 0) {
-                    errMsg += "Line: " + args.lineNumber + "     \n";
-                    errMsg += "Position: " +  args.charPosition + "     \n";
-                }
-                errMsg += "MethodName: " + args.methodName + "     \n";
-            }
-
-            throw new Error(errMsg);
-        }
-    </script>
-</head>
-<body>
-    <form id="form1" runat="server" style="height:100%">
-    <div id="silverlightControlHost">
-        <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
-		  <param name="source" value="TabSequence.xap"/>
-		  <param name="onError" value="onSilverlightError" />
-		  <param name="background" value="white" />
-		  <param name="minRuntimeVersion" value="4.0.50401.0" />
-		  <param name="autoUpgrade" value="true" />
-		  <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50401.0" style="text-decoration:none">
- 			  <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/>
-		  </a>
-	    </object><iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px"></iframe></div>
-    </form>
-</body>
-</html>
diff --git a/working-examples/silverlight-visible-focus-template/VisibleFocusTemplate.xap b/working-examples/silverlight-visible-focus-template/VisibleFocusTemplate.xap
deleted file mode 100644
index 8725d51ae4..0000000000
Binary files a/working-examples/silverlight-visible-focus-template/VisibleFocusTemplate.xap and /dev/null differ
diff --git a/working-examples/silverlight-visible-focus-template/index.html b/working-examples/silverlight-visible-focus-template/index.html
deleted file mode 100644
index f75b2393f6..0000000000
--- a/working-examples/silverlight-visible-focus-template/index.html
+++ /dev/null
@@ -1,73 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" >
-<!-- saved from url=(0014)about:internet -->
-<head>
-    <title>VisibleFocusTemplate</title>
-    <style type="text/css">
-    html, body {
-	    height: 100%;
-	    overflow: auto;
-    }
-    body {
-	    padding: 0;
-	    margin: 0;
-    }
-    #silverlightControlHost {
-	    height: 100%;
-	    text-align:center;
-    }
-    </style>
-    
-    <script type="text/javascript">
-        function onSilverlightError(sender, args) {
-            var appSource = "";
-            if (sender != null && sender != 0) {
-              appSource = sender.getHost().Source;
-            }
-            
-            var errorType = args.ErrorType;
-            var iErrorCode = args.ErrorCode;
-
-            if (errorType == "ImageError" || errorType == "MediaError") {
-              return;
-            }
-
-            var errMsg = "Unhandled Error in Silverlight Application " +  appSource + "\n" ;
-
-            errMsg += "Code: "+ iErrorCode + "    \n";
-            errMsg += "Category: " + errorType + "       \n";
-            errMsg += "Message: " + args.ErrorMessage + "     \n";
-
-            if (errorType == "ParserError") {
-                errMsg += "File: " + args.xamlFile + "     \n";
-                errMsg += "Line: " + args.lineNumber + "     \n";
-                errMsg += "Position: " + args.charPosition + "     \n";
-            }
-            else if (errorType == "RuntimeError") {           
-                if (args.lineNumber != 0) {
-                    errMsg += "Line: " + args.lineNumber + "     \n";
-                    errMsg += "Position: " +  args.charPosition + "     \n";
-                }
-                errMsg += "MethodName: " + args.methodName + "     \n";
-            }
-
-            throw new Error(errMsg);
-        }
-    </script>
-</head>
-<body>
-    <form id="form1" runat="server" style="height:100%">
-    <div id="silverlightControlHost">
-        <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
-		  <param name="source" value="VisibleFocusTemplate.xap"/>
-		  <param name="onError" value="onSilverlightError" />
-		  <param name="background" value="white" />
-		  <param name="minRuntimeVersion" value="4.0.50401.0" />
-		  <param name="autoUpgrade" value="true" />
-		  <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50401.0" style="text-decoration:none">
- 			  <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/>
-		  </a>
-	    </object><iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px"></iframe></div>
-    </form>
-</body>
-</html>
diff --git a/working-examples/silverlight/screenshot_uia_objecttree.png b/working-examples/silverlight/screenshot_uia_objecttree.png
deleted file mode 100644
index db6414f937..0000000000
Binary files a/working-examples/silverlight/screenshot_uia_objecttree.png and /dev/null differ
diff --git a/working-examples/silverlight/stackpanelbuttonsorder.png b/working-examples/silverlight/stackpanelbuttonsorder.png
deleted file mode 100644
index 0d39ced304..0000000000
Binary files a/working-examples/silverlight/stackpanelbuttonsorder.png and /dev/null differ
diff --git a/working-examples/sticky-elements-hiding-focused-elements/sticky-footer.html b/working-examples/sticky-elements-hiding-focused-elements/sticky-footer.html
new file mode 100644
index 0000000000..5a29bf2824
--- /dev/null
+++ b/working-examples/sticky-elements-hiding-focused-elements/sticky-footer.html
@@ -0,0 +1,160 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<title>Sticky footer is hiding focused elements</title>
+		<style>
+			* {box-sizing: border-box;}
+			body {
+				background: #fff;
+				color: #000;
+				font-family: Arial, sans-serif;
+				font-size: 1.6em;
+				margin: 4em;
+				line-height: 1.5em;
+			}
+			h1 {margin: 2em 0em;}
+			ul {margin: 3em 0;}
+			ul li {margin: 1.5em 0;}
+			.sticky-footer {
+				background: #eee;
+				border-top: 1px solid #ccc; 
+				bottom: 0;
+				box-shadow: 0px 0px 8px #ccc;				
+				display: flex;
+				flex-wrap: wrap;
+				justify-content: space-between;
+				left: 0;
+				padding: 0em 4em;
+				position: fixed;  
+				width: 100%;
+				min-height: 9em;
+			}
+			.sticky-footer button {
+				padding: 0.8em 2em;
+				background: #000;
+				border: 1px solid #000;
+				color: #fff;
+				font-size: 1.8em;
+				margin: 1em 0;
+				min-width: 6em;
+			}
+		</style>
+	</head>
+	<body>
+		<main>
+			<h1>Sticky footer is hiding focused elements</h1>
+			<div>
+				<p>This demo page is crafted to illustrate <strong>Example 1: Sticky footer</strong> of the failing technique F110: <strong>Failure of Success Criterion 2.4.11 due to a sticky footers or headers hiding focused elements</strong>.</p>
+				<p>All links and buttons on this page are non-functional; links merely serve as focusable elements and anchor directing to the top of the page; buttons are simply not functional.</p>
+			  <p style="border:4px solid #555; padding:2em;">To identify the problem, please navigate through the page using the TAB key until one of the elements receiving focus becomes obscured by the sticky element.</p>
+      </div>
+			<div>
+        <p>You will rejoice to hear that no <a href="#">disaster</a> has accompanied the commencement of an enterprise which you have regarded with such evil forebodings. I arrived here yesterday, and my first task is to assure my dear sister of my welfare and increasing confidence in the success of my undertaking.</p>
+        <p>I am already far north of London, and as I walk in the streets of Petersburgh, I feel a cold northern breeze play upon my cheeks, which braces my nerves and fills me with delight. Do you understand this feeling? This breeze, which has travelled from the regions towards which I am advancing, gives me a <a href="#">foretaste</a> of those icy climes. Inspirited by this wind of promise, my <a href="#">daydreams</a> become more fervent and vivid. I try in vain to be persuaded that the pole is the seat of frost and desolation; it ever presents itself to my imagination as the region of beauty and delight. There, Margaret, the sun is for ever visible, its broad disk just skirting the horizon and diffusing a perpetual splendour. There—for with your leave, my sister, I will put some trust in preceding navigators—there snow and frost are banished; and, sailing over a calm sea, we may be wafted to a land surpassing in wonders and in beauty every region hitherto discovered on the habitable globe. Its productions and features may be without example, as the phenomena of the <a href="#">heavenly bodies</a> undoubtedly are in those undiscovered solitudes. What may not be expected in a country of eternal light? I may there discover the wondrous power which attracts the needle and may regulate a thousand celestial observations that require only this voyage to render their seeming eccentricities consistent for ever. I shall satiate my ardent curiosity with the sight of a part of the world never before visited, and may tread a land never before imprinted by the foot of man. These are my enticements, and they are sufficient to conquer all fear of danger or death and to induce me to commence this laborious voyage with the joy a child feels when he embarks in a little boat, with his holiday mates, on an expedition of discovery up his native river. But supposing all these conjectures to be false, you cannot contest the inestimable benefit which I shall confer on all mankind, to the last generation, by discovering a passage near the pole to those countries, to reach which at present so many months are requisite; or by ascertaining the secret of the magnet, which, if at all possible, can only be effected by an undertaking such as mine.</p>
+        <p>These reflections have dispelled the agitation with which I began my letter, and I feel my heart glow with an enthusiasm which elevates me to heaven, for nothing contributes so much to tranquillise the mind as a steady purpose—a point on which the soul may fix its intellectual eye. This expedition has been the favourite dream of my early years. I have read with ardour the accounts of the various voyages which have been made in the prospect of arriving at the North Pacific Ocean through the seas which surround the pole. You may remember that a history of all the voyages made for purposes of discovery composed the whole of our good Uncle Thomas’ library. My education was neglected, yet I was passionately fond of reading. These volumes were my study day and night, and my familiarity with them increased that regret which I had felt, as a child, on learning that my father’s dying injunction had forbidden my uncle to allow me to embark in a seafaring life.</p>
+        <p>These visions faded when I perused, for the first time, those poets whose effusions entranced my soul and lifted it to heaven. I also became a poet and for one year lived in a paradise of my own creation; I imagined that I also might obtain a niche in the <a href="#">temple</a> where the names of Homer and Shakespeare are consecrated. You are well acquainted with my failure and how heavily I bore the disappointment. But just at that time I inherited the fortune of my cousin, and my thoughts were turned into the channel of their earlier bent.</p>
+        <p>Six years have passed since I resolved on my present undertaking. I can, even now, remember the hour from which I dedicated myself to this great enterprise. I commenced by inuring my body to hardship. I accompanied the whale-fishers on several expeditions to the North Sea; I voluntarily endured cold, famine, thirst, and want of sleep; I often worked harder than the common sailors during the day and devoted my nights to the study of mathematics, the theory of medicine, and those branches of physical science from which a naval adventurer might derive the greatest practical advantage. Twice I actually hired myself as an under-mate in a Greenland whaler, and acquitted myself to admiration. I must own I felt a little proud when my captain offered me the second dignity in the vessel and entreated me to remain with the greatest earnestness, so valuable did he consider my services.</p>
+        <p>And now, dear Margaret, do I not deserve to accomplish some great purpose? My life might have been passed in ease and luxury, but I preferred glory to every <a href="#">enticement</a> that wealth placed in my path. Oh, that some encouraging voice would answer in the affirmative! My courage and my resolution is firm; but my hopes fluctuate, and my spirits are often depressed. I am about to proceed on a long and difficult voyage, the emergencies of which will demand all my fortitude: I am required not only to raise the spirits of others, but sometimes to sustain my own, when theirs are failing.</p>
+        <p>This is the most favourable period for travelling in Russia. They fly quickly over the snow in their sledges; the motion is pleasant, and, in my opinion, far more agreeable than that of an English stagecoach. The cold is not excessive, if you are wrapped in furs—a dress which I have already adopted, for there is a great difference between walking the deck and remaining seated motionless for hours, when no exercise prevents the blood from actually freezing in your veins. I have no ambition to lose my life on the post-road between St. Petersburgh and Archangel.</p>
+        <p>I shall depart for the latter town in a fortnight or three weeks; and my intention is to hire a ship there, which can easily be done by paying the insurance for the owner, and to engage as many sailors as I think necessary among those who are accustomed to the whale-fishing. I do not intend to sail until the month of June; and when shall I return? Ah, dear sister, how can I answer this question? If I succeed, many, many months, perhaps years, will pass before you and I may meet. If I fail, you will see me again soon, or never.</p>
+        <p>Farewell, my dear, excellent Margaret. Heaven shower down blessings on you, and save me, that I may again and again testify my <a href="#">gratitude</a> for all your love and <a href="#">kindness</a>.</p>
+      </div>
+			<ul>
+				<li>
+					<a href="#">Example 1</a>
+				</li>
+				<li>
+					<a href="#">Example 2</a>
+				</li>
+				<li>
+					<a href="#">Example 3</a>
+				</li>
+				<li>
+					<a href="#">Example 4</a>
+				</li>
+				<li>
+					<a href="#">Example 5</a>
+				</li>
+				<li>
+					<a href="#">Example 6</a>
+				</li>
+				<li>
+					<a href="#">Example 7</a>
+				</li>
+				<li>
+					<a href="#">Example 8</a>
+				</li>
+				<li>
+					<a href="#">Example 9</a>
+				</li>
+				<li>
+					<a href="#">Example 10</a>
+				</li>
+				<li>
+					<a href="#">Example 11</a>
+				</li>
+				<li>
+					<a href="#">Example 12</a>
+				</li>
+				<li>
+					<a href="#">Example 13</a>
+				</li>
+				<li>
+					<a href="#">Example 14</a>
+				</li>
+				<li>
+					<a href="#">Example 15</a>
+				</li>
+				<li>
+					<a href="#">Example 16</a>
+				</li>
+				<li>
+					<a href="#">Example 17</a>
+				</li>
+				<li>
+					<a href="#">Example 18</a>
+				</li>
+				<li>
+					<a href="#">Example 19</a>
+				</li>
+				<li>
+					<a href="#">Example 20</a>
+				</li>
+				<li>
+					<a href="#">Example 21</a>
+				</li>
+				<li>
+					<a href="#">Example 22</a>
+				</li>
+				<li>
+					<a href="#">Example 23</a>
+				</li>
+				<li>
+					<a href="#">Example 24</a>
+				</li>
+				<li>
+					<a href="#">Example 25</a>
+				</li>
+				<li>
+					<a href="#">Example 26</a>
+				</li>
+				<li>
+					<a href="#">Example 27</a>
+				</li>
+				<li>
+					<a href="#">Example 28</a>
+				</li>
+				<li>
+					<a href="#">Example 29</a>
+				</li>
+				<li>
+					<a href="#">Example 30</a>
+				</li>
+			</ul>
+		</main>
+    <footer class="sticky-footer">
+      <button>Accept</button>
+      <button>Reject</button>
+    </footer>
+	</body>
+</html>
diff --git a/working-examples/sticky-elements-hiding-focused-elements/sticky-header.html b/working-examples/sticky-elements-hiding-focused-elements/sticky-header.html
new file mode 100644
index 0000000000..0b119e2e89
--- /dev/null
+++ b/working-examples/sticky-elements-hiding-focused-elements/sticky-header.html
@@ -0,0 +1,162 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<title>Sticky header is hiding focused elements</title>
+		<style>
+			* {box-sizing: border-box;}
+			body {
+				background: #fff;
+				color: #000;
+				font-family: Arial, sans-serif;
+				font-size: 1.6em;
+				margin: 4em;
+				line-height: 1.5em;
+			}
+			h1 {margin: 6em 0em 2em 0;}
+			ul {margin: 3em 0;}
+			ul li {margin: 1.5em 0;}
+			.sticky-header {
+				background: #eee;
+				border-bottom: 1px solid #ccc; 
+				top: 0;
+				box-shadow: 0px 0px 8px #ccc;				
+				display: flex;
+				flex-wrap: wrap;
+				justify-content: space-between;
+				left: 0;
+				padding: 0em 4em;
+				position: fixed;  
+				width: 100%;
+				min-height: 9em;
+			}
+			.sticky-header button {
+				padding: 0.8em 2em;
+				background: #000;
+				border: 1px solid #000;
+				color: #fff;
+				font-size: 1.8em;
+				margin: 1em 0;
+				min-width: 6em;
+			}
+		</style>
+	</head>
+
+	<body>
+		<header class="sticky-header">
+			<button>Accept</button>
+			<button>Reject</button>
+		</header>
+		<main>
+			<h1>Sticky header is hiding focused elements</h1>
+			<div>
+				<p>This demo page is crafted to illustrate <strong>Example 1: Sticky header</strong> of the failing technique F110: <strong>Failure of Success Criterion 2.4.11 due to a sticky footers or headers hiding focused elements</strong>.</p>
+				<p>All links and buttons on this page are non-functional; links merely serve as focusable elements and anchor directing to the top of the page; buttons are simply not functional.</p>
+				<p style="border:4px solid #555; padding:2em;">To identify the problem, please navigate through the page using the TAB key until you reach the bottom, then return to the top using SHIFT + TAB.</p>
+			</div>			
+			<div>
+        <p>You will rejoice to hear that no <a href="#">disaster</a> has accompanied the commencement of an enterprise which you have regarded with such evil forebodings. I arrived here yesterday, and my first task is to assure my dear sister of my welfare and increasing confidence in the success of my undertaking.</p>
+        <p>I am already far north of London, and as I walk in the streets of Petersburgh, I feel a cold northern breeze play upon my cheeks, which braces my nerves and fills me with delight. Do you understand this feeling? This breeze, which has travelled from the regions towards which I am advancing, gives me a <a href="#">foretaste</a> of those icy climes. Inspirited by this wind of promise, my <a href="#">daydreams</a> become more fervent and vivid. I try in vain to be persuaded that the pole is the seat of frost and desolation; it ever presents itself to my imagination as the region of beauty and delight. There, Margaret, the sun is for ever visible, its broad disk just skirting the horizon and diffusing a perpetual splendour. There—for with your leave, my sister, I will put some trust in preceding navigators—there snow and frost are banished; and, sailing over a calm sea, we may be wafted to a land surpassing in wonders and in beauty every region hitherto discovered on the habitable globe. Its productions and features may be without example, as the phenomena of the <a href="#">heavenly bodies</a> undoubtedly are in those undiscovered solitudes. What may not be expected in a country of eternal light? I may there discover the wondrous power which attracts the needle and may regulate a thousand celestial observations that require only this voyage to render their seeming eccentricities consistent for ever. I shall satiate my ardent curiosity with the sight of a part of the world never before visited, and may tread a land never before imprinted by the foot of man. These are my enticements, and they are sufficient to conquer all fear of danger or death and to induce me to commence this laborious voyage with the joy a child feels when he embarks in a little boat, with his holiday mates, on an expedition of discovery up his native river. But supposing all these conjectures to be false, you cannot contest the inestimable benefit which I shall confer on all mankind, to the last generation, by discovering a passage near the pole to those countries, to reach which at present so many months are requisite; or by ascertaining the secret of the magnet, which, if at all possible, can only be effected by an undertaking such as mine.</p>
+        <p>These reflections have dispelled the agitation with which I began my letter, and I feel my heart glow with an enthusiasm which elevates me to heaven, for nothing contributes so much to tranquillise the mind as a steady purpose—a point on which the soul may fix its intellectual eye. This expedition has been the favourite dream of my early years. I have read with ardour the accounts of the various voyages which have been made in the prospect of arriving at the North Pacific Ocean through the seas which surround the pole. You may remember that a history of all the voyages made for purposes of discovery composed the whole of our good Uncle Thomas’ library. My education was neglected, yet I was passionately fond of reading. These volumes were my study day and night, and my familiarity with them increased that regret which I had felt, as a child, on learning that my father’s dying injunction had forbidden my uncle to allow me to embark in a seafaring life.</p>
+        <p>These visions faded when I perused, for the first time, those poets whose effusions entranced my soul and lifted it to heaven. I also became a poet and for one year lived in a paradise of my own creation; I imagined that I also might obtain a niche in the <a href="#">temple</a> where the names of Homer and Shakespeare are consecrated. You are well acquainted with my failure and how heavily I bore the disappointment. But just at that time I inherited the fortune of my cousin, and my thoughts were turned into the channel of their earlier bent.</p>
+        <p>Six years have passed since I resolved on my present undertaking. I can, even now, remember the hour from which I dedicated myself to this great enterprise. I commenced by inuring my body to hardship. I accompanied the whale-fishers on several expeditions to the North Sea; I voluntarily endured cold, famine, thirst, and want of sleep; I often worked harder than the common sailors during the day and devoted my nights to the study of mathematics, the theory of medicine, and those branches of physical science from which a naval adventurer might derive the greatest practical advantage. Twice I actually hired myself as an under-mate in a Greenland whaler, and acquitted myself to admiration. I must own I felt a little proud when my captain offered me the second dignity in the vessel and entreated me to remain with the greatest earnestness, so valuable did he consider my services.</p>
+        <p>And now, dear Margaret, do I not deserve to accomplish some great purpose? My life might have been passed in ease and luxury, but I preferred glory to every <a href="#">enticement</a> that wealth placed in my path. Oh, that some encouraging voice would answer in the affirmative! My courage and my resolution is firm; but my hopes fluctuate, and my spirits are often depressed. I am about to proceed on a long and difficult voyage, the emergencies of which will demand all my fortitude: I am required not only to raise the spirits of others, but sometimes to sustain my own, when theirs are failing.</p>
+        <p>This is the most favourable period for travelling in Russia. They fly quickly over the snow in their sledges; the motion is pleasant, and, in my opinion, far more agreeable than that of an English stagecoach. The cold is not excessive, if you are wrapped in furs—a dress which I have already adopted, for there is a great difference between walking the deck and remaining seated motionless for hours, when no exercise prevents the blood from actually freezing in your veins. I have no ambition to lose my life on the post-road between St. Petersburgh and Archangel.</p>
+        <p>I shall depart for the latter town in a fortnight or three weeks; and my intention is to hire a ship there, which can easily be done by paying the insurance for the owner, and to engage as many sailors as I think necessary among those who are accustomed to the whale-fishing. I do not intend to sail until the month of June; and when shall I return? Ah, dear sister, how can I answer this question? If I succeed, many, many months, perhaps years, will pass before you and I may meet. If I fail, you will see me again soon, or never.</p>
+        <p>Farewell, my dear, excellent Margaret. Heaven shower down blessings on you, and save me, that I may again and again testify my <a href="#">gratitude</a> for all your love and <a href="#">kindness</a>.</p>
+      </div>
+			<ul>
+				<li>
+					<a href="#">Example 1</a>
+				</li>
+				<li>
+					<a href="#">Example 2</a>
+				</li>
+				<li>
+					<a href="#">Example 3</a>
+				</li>
+				<li>
+					<a href="#">Example 4</a>
+				</li>
+				<li>
+					<a href="#">Example 5</a>
+				</li>
+				<li>
+					<a href="#">Example 6</a>
+				</li>
+				<li>
+					<a href="#">Example 7</a>
+				</li>
+				<li>
+					<a href="#">Example 8</a>
+				</li>
+				<li>
+					<a href="#">Example 9</a>
+				</li>
+				<li>
+					<a href="#">Example 10</a>
+				</li>
+				<li>
+					<a href="#">Example 11</a>
+				</li>
+				<li>
+					<a href="#">Example 12</a>
+				</li>
+				<li>
+					<a href="#">Example 13</a>
+				</li>
+				<li>
+					<a href="#">Example 14</a>
+				</li>
+				<li>
+					<a href="#">Example 15</a>
+				</li>
+				<li>
+					<a href="#">Example 16</a>
+				</li>
+				<li>
+					<a href="#">Example 17</a>
+				</li>
+				<li>
+					<a href="#">Example 18</a>
+				</li>
+				<li>
+					<a href="#">Example 19</a>
+				</li>
+				<li>
+					<a href="#">Example 20</a>
+				</li>
+				<li>
+					<a href="#">Example 21</a>
+				</li>
+				<li>
+					<a href="#">Example 22</a>
+				</li>
+				<li>
+					<a href="#">Example 23</a>
+				</li>
+				<li>
+					<a href="#">Example 24</a>
+				</li>
+				<li>
+					<a href="#">Example 25</a>
+				</li>
+				<li>
+					<a href="#">Example 26</a>
+				</li>
+				<li>
+					<a href="#">Example 27</a>
+				</li>
+				<li>
+					<a href="#">Example 28</a>
+				</li>
+				<li>
+					<a href="#">Example 29</a>
+				</li>
+				<li>
+					<a href="#">Example 30</a>
+				</li>
+			</ul>
+		</main>
+	</body>
+
+</html>
diff --git a/xslt/base.xslt b/xslt/base.xslt
index 4db1818c97..1360f9df3d 100644
--- a/xslt/base.xslt
+++ b/xslt/base.xslt
@@ -5,9 +5,10 @@
 	xmlns:wcag="https://www.w3.org/WAI/GL/"
 	xmlns="http://www.w3.org/1999/xhtml"
 	exclude-result-prefixes="#all"
-	version="2.0">
+	version="3.0">
 	
 	<xsl:param name="guidelines.version"/>
+	<xsl:variable name="guidelines.version.decimal" select="replace($guidelines.version, '(\d)(\d)', '$1.$2')" />
 	
 	<xsl:param name="loc.guidelines">/guidelines/</xsl:param>
 	<xsl:param name="loc.understanding">/understanding/</xsl:param>
@@ -15,10 +16,25 @@
 	
 	<xsl:param name="techniques.file">../techniques/techniques.xml</xsl:param>
 	<xsl:variable name="techniques.doc" select="document($techniques.file)"/>
-	
+
 	<xsl:param name="versions.file">../guidelines/versions.xml</xsl:param>
 	<xsl:variable name="versions.doc" select="document($versions.file)"/>
 	
+	<xsl:param name="guidelines.file">../guidelines/wcag.xml</xsl:param>
+	<xsl:variable name="meta-guidelines" select="document($guidelines.file)"/>
+	
+	<xsl:param name="act.file">../guidelines/act-mapping.json</xsl:param>
+	<xsl:variable name="act.doc" select="json-to-xml(unparsed-text($act.file))"/>
+	
+	<xsl:param name="documentset"/>
+	<xsl:variable name="documentset.name">
+		<xsl:choose>
+			<xsl:when test="$documentset = 'Techniques'">Techniques</xsl:when>
+			<xsl:when test="$documentset = 'Understanding'">Understanding Docs</xsl:when>
+			<xsl:otherwise><xsl:value-of select="$documentset"/></xsl:otherwise>
+		</xsl:choose>
+	</xsl:variable>
+	
 	<xsl:function name="wcag:isheading" as="xs:boolean">
 		<xsl:param name="el"/>
 		<xsl:choose>
@@ -29,7 +45,12 @@
 	
 	<xsl:function name="wcag:generate-id">
 		<xsl:param name="title"/>
-		<xsl:value-of select="lower-case(replace(replace($title, ' ', '-'), '[,():]', ''))"/>
+		<xsl:choose>
+			<xsl:when test="$title = 'Parsing (Obsolete and removed)'">parsing</xsl:when>
+			<xsl:otherwise>
+				<xsl:value-of select="lower-case(replace(replace($title, '\s+', '-'), '[\s,\():]+', ''))"/>
+			</xsl:otherwise>
+		</xsl:choose>
 	</xsl:function>
 	
 	<xsl:function name="wcag:find-heading">
@@ -68,17 +89,18 @@
 		<xsl:choose>
 			<xsl:when test="$id = 'applicability'"><xsl:value-of select="$section and ($section/html:p[not(@class = 'instructions')] or $section/html:ol or $section/html:ul)"/></xsl:when>
 			<xsl:when test="$id = 'description'"><xsl:value-of select="$section and $section/html:p[not(@class = 'instructions')]"/></xsl:when>
-			<xsl:when test="$id = 'examples'"><xsl:value-of select="$section and ($section/html:p[not(@class = 'instructions')] or $section/html:ol or $section/html:ul or $section/html:section[@class = 'example'])"/></xsl:when>
+			<xsl:when test="$id = 'examples'"><xsl:value-of select="$section and ($section/html:p[not(@class = 'instructions')] or $section/html:ol or $section/html:ul or $section/html:dl or $section/html:section[@class = 'example'])"/></xsl:when>
 			<xsl:when test="$id = 'resources'"><xsl:value-of select="$section and ($section/html:p[not(@class = 'instructions')] or $section//html:li[not(. = 'Resource')] or $section//html:a[@href])"/></xsl:when>
 			<xsl:when test="$id = 'related'"><xsl:value-of select="$section and $section//html:li//html:a[@href]"/></xsl:when>
 			<xsl:when test="$id = 'tests'"><xsl:value-of select="$section and $section//html:section[@class = 'test-procedure' or @class = 'procedure']//html:li and $section//html:section[@class = 'test-results' or @class = 'results']"/></xsl:when>
 			<xsl:when test="$id = 'sufficient' or $id = 'advisory' or $id = 'gladvisory' or $id = 'failure'"><xsl:value-of select="$section and ($section/html:*[not(@class = 'instructions')]//html:li)"/></xsl:when>
+			<xsl:when test="$id = 'brief'"><xsl:value-of select="exists($section)"/></xsl:when>
 		</xsl:choose>
 	</xsl:function>
 	
-	<xsl:template match="node()|@*" priority="-1">
+	<xsl:template match="node()|@*" mode="#all" priority="-1">
 		<xsl:copy>
-			<xsl:apply-templates select="node()|@*"/>
+			<xsl:apply-templates select="node()|@*" mode="#current"/>
 		</xsl:copy>
 	</xsl:template>
 	
@@ -188,5 +210,214 @@
 			<xsl:when test="$version &gt; $guidelines.version"><!-- don't output --></xsl:when>
 		</xsl:choose>
 	</xsl:template>
+
+	<xsl:template name="header">
+    <a href="#main" class="button button--skip-link">Skip to content</a>
+		<div class="minimal-header-container default-grid">
+				<div class="minimal-header" id="site-header">
+					<div class="minimal-header-name">
+						<a>
+							<xsl:attribute name="href">
+								<xsl:if test="$documentset = 'Understanding'"><xsl:value-of select="$loc.understanding"/></xsl:if>
+								<xsl:if test="$documentset = 'Techniques'"><xsl:value-of select="$loc.techniques"/></xsl:if>
+							</xsl:attribute>
+						<xsl:text>WCAG </xsl:text>
+						<xsl:value-of select="$guidelines.version.decimal"/>
+						<xsl:text> </xsl:text>
+						<xsl:value-of select="$documentset.name"/>
+						</a>
+					</div>
+          <xsl:choose>
+            <xsl:when test="$documentset = 'Techniques'">
+    					<div class="minimal-header-subtitle">Examples of ways to meet WCAG; not required</div>
+            </xsl:when>
+            <xsl:when test="$documentset = 'Understanding'">
+    					<div class="minimal-header-subtitle">Informative explanations, not required to meet WCAG</div>
+            </xsl:when>
+          </xsl:choose>
+						<a class="minimal-header-link">
+							<xsl:attribute name="href">
+								<xsl:if test="$documentset = 'Understanding'"><xsl:value-of select="$loc.understanding"/>about</xsl:if>
+								<xsl:if test="$documentset = 'Techniques'"><xsl:value-of select="$loc.techniques"/>about</xsl:if>
+							</xsl:attribute>
+							<xsl:text>About WCAG </xsl:text>
+							<xsl:value-of select="$documentset.name"/>
+						</a>
+						<div class="minimal-header-logo">
+								<a href="http://w3.org/" aria-label="W3C">
+									<svg
+										xmlns="http://www.w3.org/2000/svg"
+										height="2em"
+										viewBox="0 0 91.968 44"
+										style="margin: 0.75em 0 0.75em 0.5em"
+									>
+										<g fill-rule="evenodd" fill="none"><path
+												fill="#015a9c"
+												d="M-.231-.21h92.917v44.659H-.23z"
+											/>
+												<g fill-rule="nonzero" fill="#fff"><path
+													d="M21.752 0l7.789 26.78L37.329 0H58.444v2.662l-7.95 13.852c2.792.907 4.905 2.555 6.337 4.944 1.432 2.391 2.149 5.196 2.149 8.419 0 3.985-1.048 7.335-3.143 10.05C53.742 42.642 51.029 44 47.7 44c-2.507 0-4.691-.806-6.552-2.417-1.862-1.611-3.24-3.793-4.136-6.546l4.403-1.846c.646 1.666 1.496 2.979 2.552 3.938 1.056.96 2.3 1.438 3.733 1.438 1.504 0 2.775-.85 3.813-2.552 1.039-1.703 1.558-3.747 1.558-6.14 0-2.643-.556-4.69-1.664-6.138-1.29-1.701-3.314-2.554-6.071-2.554h-2.148v-2.606l7.52-13.147H41.63l-.516.889-11.04 37.678h-.536L21.48 16.73l-8.056 27.268h-.537L0 0h5.64l7.787 26.78 5.264-18.033L16.113 0zM87.958 0c-1.077 0-2.044.388-2.777 1.133-.777.79-1.21 1.81-1.21 2.866s.412 2.034 1.167 2.8C85.905 7.579 86.892 8 87.959 8c1.043 0 2.055-.422 2.843-1.188.755-.733 1.166-1.711 1.166-2.811a3.997 3.997 0 00-1.155-2.811A3.946 3.946 0 0087.958 0zm3.476 4.034a3.32 3.32 0 01-1.01 2.41c-.69.668-1.544 1.023-2.489 1.023a3.405 3.405 0 01-2.42-1.033c-.655-.667-1.022-1.523-1.022-2.433 0-.911.378-1.8 1.055-2.489.633-.645 1.488-.988 2.42-.988.955 0 1.81.356 2.477 1.033.645.643.99 1.51.99 2.477zm-3.366-2.378h-1.71v4.533h.855V4.256h.845l.922 1.933h.955l-1.012-2.066c.655-.134 1.033-.578 1.033-1.223 0-.822-.621-1.244-1.888-1.244zm-.155.555c.8 0 1.165.222 1.165.778 0 .533-.365.722-1.144.722h-.722v-1.5zM82.109 0l.862 5.914-3.05 6.588s-1.172-2.795-3.118-4.342c-1.64-1.303-2.708-1.586-4.378-1.198-2.145.5-4.577 3.394-5.638 6.963-1.27 4.27-1.283 6.336-1.328 8.234-.071 3.042.354 4.841.354 4.841s-1.853-3.868-1.835-9.533c.012-4.043.576-7.71 2.233-11.328 1.459-3.181 3.626-5.09 5.55-5.315 1.99-.232 3.562.85 4.777 2.02 1.276 1.23 2.565 3.918 2.565 3.918zM82.202 31.824s-1.338 2.567-2.171 3.556c-.834.99-2.326 2.732-4.167 3.603-1.842.872-2.808 1.036-4.628.849-1.82-.188-3.51-1.319-4.102-1.79-.592-.472-2.106-1.861-2.962-3.156C63.317 33.59 61.98 31 61.98 31s.745 2.596 1.212 3.698c.269.635 1.094 2.574 2.265 4.262 1.092 1.576 3.214 4.287 6.438 4.899 3.224.613 5.44-.942 5.987-1.319.549-.376 1.704-1.416 2.436-2.256.763-.877 1.486-1.995 1.886-2.666.292-.49.768-1.485.768-1.485z"
+												/></g>
+										</g>
+									</svg>
+								</a>
+								<a href="http://w3.org/WAI/" aria-label="Web Accessibility Initiative">
+									<svg
+										xmlns="http://www.w3.org/2000/svg"
+										height="2em"
+										viewBox="0 0 162.5 45.9"
+										style="margin: 0.75em 0 0.75em 0.5em"
+									>
+										<g fill="none" fill-rule="evenodd">
+												<path d="M0 0h162.5v45.9H0z" fill="#015a9c" />
+												<path
+												d="M1.2 24.5h160"
+												stroke="#eed009"
+												stroke-linecap="square"
+												stroke-width="2"
+											/>
+												<g fill="#fff" fill-rule="nonzero">
+													<path
+													d="M15.741 15.5h-1.816L11.14 6.145c-.41-1.394-.65-2.334-.722-2.823-.104.749-.332 1.71-.684 2.881L7.04 15.5H5.223L1.444 1.223H3.32l2.217 8.72c.3 1.14.527 2.272.684 3.399.143-1.068.397-2.237.761-3.506l2.52-8.613h1.855l2.627 8.681c.339 1.127.6 2.272.781 3.438.105-.899.336-2.038.694-3.418l2.207-8.701h1.875zm10.127.195c-1.608 0-2.87-.486-3.784-1.46-.915-.973-1.372-2.312-1.372-4.018 0-1.719.426-3.088 1.279-4.107.853-1.019 2.005-1.528 3.457-1.528 1.348 0 2.422.435 3.223 1.304.8.869 1.2 2.046 1.2 3.53v1.064h-7.343c.033 1.218.342 2.142.928 2.774.586.631 1.416.947 2.49.947a8.46 8.46 0 001.631-.151c.514-.101 1.116-.298 1.807-.591v1.543a8.506 8.506 0 01-1.67.537c-.521.104-1.136.156-1.846.156zm-.44-9.677c-.84 0-1.503.27-1.992.81-.488.54-.778 1.292-.869 2.256h5.46c-.014-1.003-.245-1.764-.694-2.285-.45-.521-1.084-.781-1.904-.781zm12.237-1.416c1.413 0 2.503.486 3.271 1.46.769.973 1.153 2.332 1.153 4.077 0 1.77-.39 3.14-1.172 4.106-.781.967-1.865 1.45-3.252 1.45-.723 0-1.367-.13-1.934-.39a3.384 3.384 0 01-1.386-1.162h-.137a48.165 48.165 0 01-.362 1.357h-1.26V.305h1.759v3.691c0 .736-.033 1.471-.098 2.207h.098c.722-1.068 1.829-1.601 3.32-1.601zm-.293 1.455c-1.08 0-1.856.306-2.324.918-.47.612-.703 1.647-.703 3.105v.078c0 1.465.239 2.512.717 3.14.479.628 1.262.942 2.349.942.963 0 1.681-.353 2.153-1.06.472-.706.708-1.726.708-3.06 0-1.355-.237-2.37-.713-3.048-.475-.677-1.204-1.015-2.187-1.015zM59.286 15.5l-1.719-4.424h-5.664l-1.7 4.424h-1.816l5.577-14.336h1.62L61.152 15.5zM57.03 9.484L55.43 5.158l-.684-2.138c-.195.78-.4 1.494-.615 2.138l-1.621 4.326zm10.137 6.211c-1.543 0-2.744-.473-3.604-1.42-.86-.948-1.289-2.307-1.289-4.078 0-1.797.435-3.182 1.304-4.155.87-.973 2.108-1.46 3.716-1.46.52 0 1.037.054 1.548.161.51.108.932.246 1.264.415l-.537 1.465c-.905-.338-1.676-.508-2.314-.508-1.081 0-1.879.34-2.393 1.02-.514.681-.771 1.695-.771 3.043 0 1.295.257 2.287.771 2.973.514.687 1.276 1.03 2.285 1.03.944 0 1.872-.208 2.783-.624v1.562c-.742.384-1.663.576-2.763.576zm9.6 0c-1.544 0-2.745-.473-3.604-1.42-.86-.948-1.29-2.307-1.29-4.078 0-1.797.435-3.182 1.305-4.155.869-.973 2.107-1.46 3.715-1.46.521 0 1.037.054 1.548.161.511.108.933.246 1.265.415l-.537 1.465c-.905-.338-1.677-.508-2.315-.508-1.08 0-1.878.34-2.392 1.02-.515.681-.772 1.695-.772 3.043 0 1.295.257 2.287.772 2.973.514.687 1.276 1.03 2.285 1.03.944 0 1.872-.208 2.783-.624v1.562c-.742.384-1.663.576-2.764.576zm9.863 0c-1.608 0-2.87-.486-3.784-1.46-.915-.973-1.373-2.312-1.373-4.018 0-1.719.427-3.088 1.28-4.107.853-1.019 2.005-1.528 3.457-1.528 1.347 0 2.422.435 3.222 1.304.801.869 1.202 2.046 1.202 3.53v1.064H83.29c.032 1.218.342 2.142.928 2.774.586.631 1.416.947 2.49.947a8.46 8.46 0 001.63-.151c.515-.101 1.117-.298 1.807-.591v1.543a8.506 8.506 0 01-1.67.537c-.52.104-1.136.156-1.845.156zm-.44-9.677c-.84 0-1.504.27-1.992.81s-.778 1.292-.87 2.256h5.46c-.013-1.003-.244-1.764-.693-2.285-.45-.521-1.084-.781-1.905-.781zm14.14 6.523c0 1.003-.373 1.779-1.122 2.33-.749.55-1.8.824-3.154.824-1.413 0-2.536-.224-3.37-.674V13.42c1.179.573 2.315.86 3.409.86.885 0 1.53-.144 1.933-.43.404-.287.606-.671.606-1.153 0-.423-.194-.781-.581-1.074-.388-.293-1.076-.628-2.066-1.006-1.009-.39-1.719-.724-2.129-1-.41-.277-.711-.588-.903-.933-.192-.345-.288-.765-.288-1.26 0-.88.358-1.572 1.074-2.08.716-.508 1.7-.762 2.95-.762a8.17 8.17 0 013.417.723L99.511 6.7c-1.088-.456-2.068-.683-2.94-.683-.73 0-1.282.115-1.66.346-.378.231-.566.549-.566.952 0 .391.162.715.488.972.325.257 1.084.614 2.275 1.07.892.331 1.551.64 1.978.927.426.287.74.609.942.967.202.358.303.788.303 1.289zm9.58 0c0 1.003-.373 1.779-1.122 2.33-.749.55-1.8.824-3.154.824-1.413 0-2.536-.224-3.37-.674V13.42c1.179.573 2.315.86 3.409.86.885 0 1.53-.144 1.933-.43.404-.287.606-.671.606-1.153 0-.423-.194-.781-.581-1.074-.388-.293-1.076-.628-2.066-1.006-1.009-.39-1.719-.724-2.129-1-.41-.277-.71-.588-.903-.933-.192-.345-.288-.765-.288-1.26 0-.88.358-1.572 1.074-2.08.716-.508 1.7-.762 2.95-.762a8.17 8.17 0 013.417.723l-.595 1.396c-1.088-.456-2.067-.683-2.94-.683-.729 0-1.282.115-1.66.346-.378.231-.566.549-.566.952 0 .391.162.715.488.972.325.257 1.084.614 2.275 1.07.892.331 1.551.64 1.978.927.426.287.74.609.942.967.202.358.303.788.303 1.289zm4.356 2.959h-1.757V4.777h1.757zm-1.894-13.623c0-.39.1-.674.298-.85.198-.175.444-.263.737-.263.273 0 .513.088.718.263.205.176.307.46.307.85 0 .384-.102.667-.307.85a1.047 1.047 0 01-.718.273 1.05 1.05 0 01-.737-.273c-.199-.183-.298-.466-.298-.85zm10.371 2.725c1.413 0 2.503.486 3.271 1.46.769.973 1.153 2.332 1.153 4.077 0 1.77-.39 3.14-1.172 4.106-.781.967-1.865 1.45-3.252 1.45-.723 0-1.367-.13-1.934-.39a3.384 3.384 0 01-1.386-1.162h-.137a48.244 48.244 0 01-.361 1.357h-1.26V.305h1.758v3.691c0 .736-.033 1.471-.098 2.207h.098c.722-1.068 1.83-1.601 3.32-1.601zm-.293 1.455c-1.08 0-1.855.306-2.324.918-.469.612-.703 1.647-.703 3.105v.078c0 1.465.239 2.512.717 3.14.479.628 1.262.942 2.35.942.963 0 1.68-.353 2.152-1.06.472-.706.708-1.726.708-3.06 0-1.355-.237-2.37-.713-3.048-.475-.677-1.204-1.015-2.187-1.015zm9.277 9.443h-1.757V4.777h1.757zm-1.894-13.623c0-.39.1-.674.298-.85.198-.175.444-.263.737-.263.273 0 .513.088.718.263.205.176.307.46.307.85 0 .384-.102.667-.307.85a1.047 1.047 0 01-.718.273 1.05 1.05 0 01-.737-.273c-.199-.183-.298-.466-.298-.85zm7.05 13.623h-1.757V.305h1.758zm5.157 0h-1.758V4.777h1.758zm-1.895-13.623c0-.39.1-.674.298-.85.199-.175.444-.263.737-.263.274 0 .513.088.718.263.205.176.308.46.308.85 0 .384-.103.667-.308.85a1.047 1.047 0 01-.718.273 1.05 1.05 0 01-.737-.273c-.198-.183-.298-.466-.298-.85zm8.877 12.383c.228 0 .495-.023.801-.069.306-.045.537-.097.693-.156v1.348c-.162.071-.415.141-.756.21a5.29 5.29 0 01-1.04.102c-2.097 0-3.145-1.103-3.145-3.31v-6.24h-1.514v-.84l1.534-.703.703-2.286h1.045v2.461h3.095v1.368h-3.095v6.19c0 .62.148 1.095.444 1.427.296.332.708.498 1.235.498zm1.953-9.483h1.885l2.315 6.104c.488 1.328.787 2.301.898 2.92h.078c.059-.241.192-.692.4-1.353.209-.66.385-1.19.528-1.587l2.178-6.084h1.894l-4.619 12.207c-.45 1.185-.983 2.035-1.602 2.55-.618.514-1.383.77-2.294.77-.489 0-.974-.055-1.456-.165v-1.397c.326.078.717.117 1.172.117.56 0 1.035-.154 1.426-.463.39-.31.71-.787.957-1.431l.557-1.426zM7.157 45.5H2.001v-1.035l1.68-.381V32.658l-1.68-.4v-1.035h5.156v1.035l-1.68.4v11.426l1.68.38zm9.824 0v-6.855c0-.873-.193-1.522-.58-1.949-.388-.426-.995-.64-1.822-.64-1.1 0-1.9.305-2.398.914-.498.608-.747 1.6-.747 2.973V45.5H9.677V34.777h1.416l.263 1.465h.098a3.31 3.31 0 011.396-1.225 4.492 4.492 0 011.983-.435c1.315 0 2.292.319 2.93.957.638.638.957 1.63.957 2.979V45.5zm6.817 0H22.04V34.777h1.758zm-1.895-13.623c0-.39.1-.674.298-.85.199-.175.444-.263.737-.263.274 0 .513.088.718.263.205.176.308.46.308.85 0 .384-.103.667-.308.85a1.047 1.047 0 01-.718.273 1.05 1.05 0 01-.737-.273c-.199-.183-.298-.466-.298-.85zM30.78 44.26c.228 0 .495-.023.8-.069.307-.045.538-.097.694-.156v1.348c-.163.071-.415.141-.757.21a5.29 5.29 0 01-1.04.102c-2.096 0-3.144-1.103-3.144-3.31v-6.24h-1.514v-.84l1.533-.703.703-2.286H29.1v2.461h3.096v1.368H29.1v6.19c0 .62.149 1.095.445 1.427.296.332.708.498 1.235.498zm5.39 1.24h-1.757V34.777h1.758zm-1.894-13.623c0-.39.1-.674.298-.85.199-.175.444-.263.737-.263.274 0 .513.088.718.263.205.176.308.46.308.85 0 .384-.103.667-.308.85a1.047 1.047 0 01-.718.273 1.05 1.05 0 01-.737-.273c-.199-.183-.298-.466-.298-.85zM46.19 45.5l-.342-1.523h-.078c-.534.67-1.066 1.124-1.596 1.362-.53.237-1.2.356-2.007.356-1.055 0-1.882-.276-2.48-.83-.6-.553-.9-1.334-.9-2.344 0-2.174 1.716-3.313 5.147-3.417l1.817-.069V38.4c0-.813-.176-1.414-.528-1.801-.351-.388-.914-.581-1.689-.581-.566 0-1.102.084-1.606.253-.505.17-.979.359-1.421.567l-.537-1.318a7.958 7.958 0 011.767-.674 7.642 7.642 0 011.895-.244c1.295 0 2.259.286 2.89.859.632.573.948 1.484.948 2.734V45.5zm-3.623-1.22c.983 0 1.756-.266 2.32-.797.563-.53.844-1.284.844-2.26v-.967l-1.582.068c-1.23.046-2.127.241-2.69.586-.563.345-.845.889-.845 1.631 0 .56.171.99.513 1.29.342.299.822.448 1.44.448zm11.807-.02c.228 0 .495-.023.8-.069.307-.045.538-.097.694-.156v1.348c-.163.071-.415.141-.757.21a5.29 5.29 0 01-1.04.102c-2.096 0-3.144-1.103-3.144-3.31v-6.24h-1.514v-.84l1.533-.703.703-2.286h1.045v2.461h3.096v1.368h-3.096v6.19c0 .62.148 1.095.444 1.427.297.332.708.498 1.236.498zm5.39 1.24h-1.757V34.777h1.757zM57.87 31.877c0-.39.1-.674.298-.85.198-.175.444-.263.737-.263.274 0 .513.088.718.263.205.176.307.46.307.85 0 .384-.102.667-.307.85a1.047 1.047 0 01-.718.273 1.05 1.05 0 01-.737-.273c-.199-.183-.298-.466-.298-.85zM65.526 45.5l-4.062-10.723h1.884l2.276 6.319c.45 1.27.736 2.216.86 2.842h.077a11.495 11.495 0 01.176-.64c.04-.127.28-.861.723-2.202l2.285-6.319h1.875L67.548 45.5zm12.354.195c-1.608 0-2.87-.486-3.784-1.46-.915-.973-1.373-2.312-1.373-4.018 0-1.719.427-3.088 1.28-4.107.853-1.019 2.005-1.528 3.457-1.528 1.347 0 2.422.435 3.222 1.304.801.869 1.202 2.046 1.202 3.53v1.064H74.54c.032 1.218.342 2.142.928 2.774.586.631 1.416.947 2.49.947a8.46 8.46 0 001.63-.151c.515-.101 1.117-.298 1.807-.591v1.543a8.506 8.506 0 01-1.67.537c-.52.104-1.136.156-1.845.156zm-.44-9.677c-.84 0-1.504.27-1.992.81s-.778 1.292-.87 2.256h5.46c-.013-1.003-.244-1.764-.693-2.285-.45-.521-1.084-.781-1.905-.781zM137.741 45.5h-1.816l-2.784-9.355c-.41-1.394-.65-2.334-.722-2.823-.104.749-.332 1.71-.684 2.881L129.04 45.5h-1.817l-3.779-14.277h1.875l2.217 8.72c.3 1.14.527 2.272.684 3.399.143-1.068.397-2.237.761-3.506l2.52-8.613h1.855l2.627 8.681c.339 1.127.6 2.272.781 3.438.105-.899.336-2.038.694-3.418l2.207-8.701h1.875zm14.57 0l-1.718-4.424h-5.664l-1.7 4.424h-1.816l5.576-14.336h1.621l5.567 14.336zm-2.256-6.016l-1.601-4.326-.684-2.138c-.195.78-.4 1.494-.615 2.138l-1.621 4.326zm10.098 6.016h-5.156v-1.035l1.68-.381V32.658l-1.68-.4v-1.035h5.156v1.035l-1.68.4v11.426l1.68.38z"
+												/>
+												</g>
+										</g>
+									</svg>
+								</a>
+						</div>
+				</div>
+		</div>
+	</xsl:template>
+
+	<xsl:template name="navigation">
+		<xsl:param name="navigation.current" required="no"/>
+
+    <xsl:if test="$documentset = 'Understanding'">
+  		<div class="default-grid nav-container nav-page-specific">
+  			<div class="default-grid">
+  				<nav class="nav" aria-label="{$documentset.name}">
+  					<ul>
+							<li class="nav__item">
+							<a href=".">
+								<xsl:if test="$navigation.current = 'all'">
+									<xsl:attribute name="class">active</xsl:attribute>
+									<xsl:attribute name="aria-current">page</xsl:attribute>
+								</xsl:if>
+								All Understanding Docs
+							</a>
+							</li>
+  					</ul>
+  				</nav>
+  			</div>
+  		</div>
+    </xsl:if>
+	</xsl:template>
+	
+	<xsl:template name="nav-level1-prev"><xsl:message>override nav-level1-prev</xsl:message></xsl:template>
+	<xsl:template name="nav-level1-cur"><xsl:message>override nav-level1-cur</xsl:message></xsl:template>
+	<xsl:template name="nav-level1-next"><xsl:message>override nav-level1-next</xsl:message></xsl:template>
+	<xsl:template name="nav-level2-prev"><xsl:message>override nav-level2-prev</xsl:message></xsl:template>
+	<xsl:template name="nav-level2-cur"><xsl:message>override nav-level2-cur</xsl:message></xsl:template>
+	<xsl:template name="nav-level2-next"><xsl:message>override nav-level2-next</xsl:message></xsl:template>
+	
+	<xsl:template name="back-to-top">
+		<a class="button button-backtotop" href="#top">
+			<span>
+				<svg focusable="false" aria-hidden="true" class="icon-arrow-up " viewBox="0 0 26 28">
+					<path d="M25.172 15.172c0 0.531-0.219 1.031-0.578 1.406l-1.172 1.172c-0.375 0.375-0.891 0.594-1.422 0.594s-1.047-0.219-1.406-0.594l-4.594-4.578v11c0 1.125-0.938 1.828-2 1.828h-2c-1.062 0-2-0.703-2-1.828v-11l-4.594 4.578c-0.359 0.375-0.875 0.594-1.406 0.594s-1.047-0.219-1.406-0.594l-1.172-1.172c-0.375-0.375-0.594-0.875-0.594-1.406s0.219-1.047 0.594-1.422l10.172-10.172c0.359-0.375 0.875-0.578 1.406-0.578s1.047 0.203 1.422 0.578l10.172 10.172c0.359 0.375 0.578 0.891 0.578 1.422z"></path>
+				</svg> Back to Top
+			</span>
+		</a>
+	</xsl:template>
+
+	<xsl:template name="help-improve">
+		<aside class="box box-icon box-space-above" id="helpimprove" style="grid-column: 2 / 8; grid-row: 3">
+			<header class="box-h  box-h-icon box-h-space-above box-h-icon"> 
+				<svg focusable="false" aria-hidden="true" class="icon-comments" viewBox="0 0 28 28">
+					<path d="M22 12c0 4.422-4.922 8-11 8-0.953 0-1.875-0.094-2.75-0.25-1.297 0.922-2.766 1.594-4.344 2-0.422 0.109-0.875 0.187-1.344 0.25h-0.047c-0.234 0-0.453-0.187-0.5-0.453v0c-0.063-0.297 0.141-0.484 0.313-0.688 0.609-0.688 1.297-1.297 1.828-2.594-2.531-1.469-4.156-3.734-4.156-6.266 0-4.422 4.922-8 11-8s11 3.578 11 8zM28 16c0 2.547-1.625 4.797-4.156 6.266 0.531 1.297 1.219 1.906 1.828 2.594 0.172 0.203 0.375 0.391 0.313 0.688v0c-0.063 0.281-0.297 0.484-0.547 0.453-0.469-0.063-0.922-0.141-1.344-0.25-1.578-0.406-3.047-1.078-4.344-2-0.875 0.156-1.797 0.25-2.75 0.25-2.828 0-5.422-0.781-7.375-2.063 0.453 0.031 0.922 0.063 1.375 0.063 3.359 0 6.531-0.969 8.953-2.719 2.609-1.906 4.047-4.484 4.047-7.281 0-0.812-0.125-1.609-0.359-2.375 2.641 1.453 4.359 3.766 4.359 6.375z"></path>
+				</svg> 
+				<h2> Help improve this page </h2>
+			</header>
+			<div class="box-i">
+    		<p>Please share your ideas, suggestions, or comments via e-mail to the publicly-archived list <a href="mailto:public-agwg-comments@w3.org?subject=%5BUnderstanding%20and%20Techniques%20Feedback%5D">public-agwg-comments@w3.org</a> or via GitHub</p>
+				<div class="button-group">
+					<a href="mailto:public-agwg-comments@w3.org?subject=%5BUnderstanding%20and%20Techniques%20Feedback%5D"
+						class="button"><span>E-mail</span></a>
+					<a href="https://github.com/w3c/wcag/issues/" class="button"><span>Fork &amp; Edit on GitHub</span></a>
+					<a href="https://github.com/w3c/wcag/issues/new" class="button"><span>New GitHub Issue</span></a>
+				</div>			
+			</div>
+		</aside>
+	</xsl:template>
+
+	<xsl:template name="wai-site-footer">
+		<footer id="wai-site-footer" class="page-footer default-grid" aria-label="Page">
+    	<div class="inner" style="grid-column: 2 / 8">
+      	<p><strong>Date:</strong> Updated <xsl:value-of select="format-date(current-date(), '[D] [MNn] [Y]')"/>.</p> <p><strong>Developed by</strong><xsl:text> </xsl:text><a href="https://www.w3.org/groups/wg/ag/participants">Accessibility Guidelines Working Group (AG WG) Participants</a> (Co-Chairs: Alastair Campbell, Charles Adams, Rachael Bradley Montgomery. W3C Staff Contact: Kevin White).</p>
+    		<p>The content was developed as part of the <a href="https://www.w3.org/WAI/about/projects/#us">WAI-Core projects</a> funded by U.S. Federal funds. The user interface was designed by the Education and Outreach Working Group (<a href="https://www.w3.org/groups/wg/eowg/participants">EOWG</a>) with contributions from Shadi Abou-Zahra, Steve Lee, and Shawn Lawton Henry as part of the <a href="https://www.w3.org/WAI/about/projects/wai-guide/">WAI-Guide</a> project, co-funded by the European Commission.</p>
+			</div>
+  	</footer>	
+	</xsl:template>
+
+	<xsl:template name="site-footer">
+		<footer class="site-footer grid-4q" aria-label="Site">
+			<div class="q1-start q3-end about">
+				<div>
+					<p><a class="largelink" href="https://www.w3.org/WAI/" dir="auto" translate="no" lang="en">W3C Web Accessibility Initiative (WAI)</a></p>
+					<p>Strategies, standards, and supporting resources to make the Web accessible to people with disabilities.</p>
+				</div>
+				<div class="social" dir="auto" translate="no" lang="en">
+					<ul>
+						<li><a href="https://twitter.com/w3c_wai"><svg focusable="false" aria-hidden="true" class="icon-twitter " viewBox="0 0 32 32"><path d="M31.939 6.092c-1.18 0.519-2.44 0.872-3.767 1.033 1.352-0.815 2.392-2.099 2.884-3.631-1.268 0.74-2.673 1.279-4.169 1.579-1.195-1.279-2.897-2.079-4.788-2.079-3.623 0-6.56 2.937-6.56 6.556 0 0.52 0.060 1.020 0.169 1.499-5.453-0.257-10.287-2.876-13.521-6.835-0.569 0.963-0.888 2.081-0.888 3.3 0 2.28 1.16 4.284 2.917 5.461-1.076-0.035-2.088-0.331-2.971-0.821v0.081c0 3.18 2.257 5.832 5.261 6.436-0.551 0.148-1.132 0.228-1.728 0.228-0.419 0-0.82-0.040-1.221-0.115 0.841 2.604 3.26 4.503 6.139 4.556-2.24 1.759-5.079 2.807-8.136 2.807-0.52 0-1.039-0.031-1.56-0.089 2.919 1.859 6.357 2.945 10.076 2.945 12.072 0 18.665-9.995 18.665-18.648 0-0.279 0-0.56-0.020-0.84 1.281-0.919 2.4-2.080 3.28-3.397l-0.063-0.027z"></path></svg> Twitter</a></li>
+						<li><a href="https://www.w3.org/WAI/feed.xml"><svg focusable="false" aria-hidden="true" class="icon-rss " viewBox="0 0 32 32"><path d="M25.599 32c0-14.044-11.555-25.6-25.599-25.6v-6.4c17.553 0 32 14.447 32 32h-6.401zM4.388 23.22c2.419 0 4.391 1.972 4.391 4.393 0 2.417-1.98 4.387-4.401 4.387-2.417 0-4.377-1.965-4.377-4.387s1.967-4.392 4.388-4.393zM21.212 32h-6.22c0-8.225-6.767-14.993-14.992-14.993v-6.22c11.636 0 21.212 9.579 21.212 21.213z"></path></svg> Feed</a></li>
+						<li><a href="https://www.youtube.com/channel/UCU6ljj3m1fglIPjSjs2DpRA/playlistsv"><svg focusable="false" aria-hidden="true" class="icon-youtube "  viewBox="0 0 32 32"><path d="M31.327 8.273c-0.386-1.353-1.431-2.398-2.756-2.777l-0.028-0.007c-2.493-0.668-12.528-0.668-12.528-0.668s-10.009-0.013-12.528 0.668c-1.353 0.386-2.398 1.431-2.777 2.756l-0.007 0.028c-0.443 2.281-0.696 4.903-0.696 7.585 0 0.054 0 0.109 0 0.163l-0-0.008c-0 0.037-0 0.082-0 0.126 0 2.682 0.253 5.304 0.737 7.845l-0.041-0.26c0.386 1.353 1.431 2.398 2.756 2.777l0.028 0.007c2.491 0.669 12.528 0.669 12.528 0.669s10.008 0 12.528-0.669c1.353-0.386 2.398-1.431 2.777-2.756l0.007-0.028c0.425-2.233 0.668-4.803 0.668-7.429 0-0.099-0-0.198-0.001-0.297l0 0.015c0.001-0.092 0.001-0.201 0.001-0.31 0-2.626-0.243-5.196-0.708-7.687l0.040 0.258zM12.812 20.801v-9.591l8.352 4.803z"></path></svg> YouTube</a></li>
+						<li><a href="https://www.w3.org/WAI/news/subscribe/" class="button">Get News in Email</a></li>
+					</ul>
+				</div>
+				<div dir="auto" translate="no" lang="en">
+					<p>Copyright © <xsl:value-of select="format-date(current-date(), '[Y]')"/> World Wide Web Consortium (<a href="https://www.w3.org/">W3C</a><sup>®</sup>). See <a href="/WAI/about/using-wai-material/">Permission to Use WAI Material</a>.</p>
+				</div>
+			</div>
+			<div dir="auto" translate="no" class="q4-start q4-end" lang="en">
+				<ul style="margin-bottom:0">
+					<li><a href="/WAI/about/contacting/">Contact WAI</a></li>
+					<li><a href="/WAI/sitemap/">Site Map</a></li>
+					<li><a href="/WAI/news/">News</a></li>
+					<li><a href="/WAI/about/accessibility-statement/">Accessibility Statement</a></li>
+					<li><a href="/WAI/translations/"> Translations</a></li>
+					<li><a href="/WAI/roles/">Resources for Roles</a></li>
+				</ul>
+			</div>
+		</footer>
+	</xsl:template>
 	
-</xsl:stylesheet>
\ No newline at end of file
+	<xsl:template name="waiscript">
+		<link rel="stylesheet" href="../a11y-light.css" />
+		<script src="../highlight.min.js" />
+		<script>
+      hljs.configure({
+        cssSelector: 'pre'
+      });
+      hljs.highlightAll();
+			var translationStrings = {}; /* fix WAI JS */
+		</script>
+		<script src="https://www.w3.org/WAI/assets/scripts/main.js"></script>
+    <!-- Matomo -->
+    <script>
+      var _paq = _paq || [];
+      /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
+      _paq.push(["setDoNotTrack", true]);
+      _paq.push(['trackPageView']);
+      _paq.push(['enableLinkTracking']);
+      (function() {
+        var u="//www.w3.org/analytics/piwik/";
+        _paq.push(['setTrackerUrl', u+'piwik.php']);
+        _paq.push(['setSiteId', '328']);
+        var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
+        g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'piwik.js'; s.parentNode.insertBefore(g,s);
+      })();
+    </script>
+    <noscript><p><img src="//www.w3.org/analytics/piwik/piwik.php?idsite=328&amp;rec=1" style="border:0;" alt="" /></p></noscript>
+    <!-- End Matomo Code -->
+	</xsl:template>
+</xsl:stylesheet>
diff --git a/xslt/generate-structure-xml.xslt b/xslt/generate-structure-xml.xslt
index f1e3472f41..c65851faa1 100644
--- a/xslt/generate-structure-xml.xslt
+++ b/xslt/generate-structure-xml.xslt
@@ -8,38 +8,47 @@
 	
 	<xsl:include href="base.xslt"/>
 	
+	<xsl:function name="wcag:get-id">
+		<xsl:param name="el" />
+		<xsl:choose>
+			<xsl:when test="$el/@id"><xsl:value-of select="$el/@id"/></xsl:when>
+			<xsl:otherwise><xsl:value-of select="wcag:generate-id(wcag:find-heading($el))"/></xsl:otherwise>
+		</xsl:choose>
+	</xsl:function>
+	
 	<xsl:output method="xml" indent="yes"/>
 	
 	<xsl:template name="id">
-		<xsl:attribute name="id">
-			<xsl:choose>
-				<xsl:when test="@id"><xsl:value-of select="@id"/></xsl:when>
-				<xsl:otherwise><xsl:value-of select="wcag:generate-id(wcag:find-heading(.))"/></xsl:otherwise>
-			</xsl:choose>
-		</xsl:attribute>
+		<xsl:attribute name="id" select="wcag:get-id(.)"/>
 	</xsl:template>
 	
 	<xsl:template name="content">
-		<content><xsl:copy-of select="*[not(name() = 'h1' or name() = 'h2' or name() = 'h3' or name() = 'h4' or name() = 'h5' or name() = 'h6' or name() = 'section' or @class = 'conformance-level' or @class = 'change')]"></xsl:copy-of></content>
+		<xsl:variable name="content"><xsl:copy-of select="*[not(name() = 'h1' or name() = 'h2' or name() = 'h3' or name() = 'h4' or name() = 'h5' or name() = 'h6' or name() = 'section' or @class = 'conformance-level' or @class = 'change')]"></xsl:copy-of></xsl:variable>
+		<content><xsl:copy-of select="$content"/></content>
+		<contenttext><xsl:value-of select="serialize($content)"/></contenttext>
 	</xsl:template>
 	
 	<xsl:template match="html:html">
 		<guidelines lang="{@lang}">
 			<understanding>
-				<name>Introduction to Understanding WCAG 2.1</name>
+				<name>Introduction to Understanding WCAG <xsl:value-of select="$guidelines.version.decimal"/></name>
 				<file href="intro"/>
 			</understanding>
 			<understanding>
 				<name>Understanding Techniques for WCAG Success Criteria</name>
 				<file href="understanding-techniques"/>
 			</understanding>
+			<understanding>
+				<name>Understanding Test Rules for WCAG Success Criteria</name>
+				<file href="understanding-act-rules"/>
+			</understanding>
 			<xsl:apply-templates select="//html:section[@class='principle']"/>
 			<understanding>
 				<name>Understanding Conformance</name>
 				<file href="conformance"/>
 			</understanding>
 			<understanding>
-				<name>How to Refer to WCAG 2.1 from Other Documents</name>
+				<name>How to Refer to WCAG <xsl:value-of select="$guidelines.version.decimal"/> from Other Documents</name>
 				<file href="refer-to-wcag"/>
 			</understanding>
 			<understanding>
@@ -68,6 +77,12 @@
 	<xsl:template match="html:section[contains(@class, 'guideline')]">
 		<guideline>
 			<xsl:call-template name="id"/>
+			<version>
+				<xsl:choose>
+					<xsl:when test="@id = 'pointer-accessible'">WCAG21</xsl:when>
+					<xsl:otherwise>WCAG20</xsl:otherwise>
+				</xsl:choose>
+			</version>
 			<num><xsl:number level="multiple" count="html:section[contains(@class, 'principle')]|html:section[contains(@class, 'guideline')]" format="1.1"/></num>
 			<name><xsl:value-of select="wcag:find-heading(.)"/></name>
 			<xsl:call-template name="content"/>
@@ -79,6 +94,7 @@
 	<xsl:template match="html:section[contains(@class, 'sc')]">
 		<success-criterion>
 			<xsl:call-template name="id"/>
+			<version>WCAG<xsl:value-of select="$versions.doc//id[@id = wcag:get-id(current())]/parent::version/@name"/></version>
 			<num><xsl:number level="multiple" count="html:section[contains(@class, 'principle')]|html:section[contains(@class, 'guideline')]|html:section[contains(@class, 'sc')]" format="1.1.1"/></num>
 			<name><xsl:value-of select="wcag:find-heading(.)"/></name>
 			<xsl:call-template name="content"/>
@@ -101,4 +117,4 @@
 		</term>
 	</xsl:template>
 	
-</xsl:stylesheet>
\ No newline at end of file
+</xsl:stylesheet>
diff --git a/xslt/generate-technique-associations.xslt b/xslt/generate-technique-associations.xslt
index 739326744b..1d5273e877 100644
--- a/xslt/generate-technique-associations.xslt
+++ b/xslt/generate-technique-associations.xslt
@@ -101,5 +101,9 @@
 	</xsl:template>
 	
 	<xsl:template match="html:a"/>
+
+	<xsl:template match="html:ol | html:ul">
+		<xsl:apply-templates/>
+	</xsl:template>
 	
 </xsl:stylesheet>
\ No newline at end of file
diff --git a/xslt/generate-techniques-toc.xslt b/xslt/generate-techniques-toc.xslt
deleted file mode 100644
index 16bb74b525..0000000000
--- a/xslt/generate-techniques-toc.xslt
+++ /dev/null
@@ -1,62 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
-	xmlns:xs="http://www.w3.org/2001/XMLSchema"
-	xmlns:wcag="https://www.w3.org/WAI/GL/"
-	xmlns="http://www.w3.org/1999/xhtml"
-	exclude-result-prefixes="#all"
-	version="2.0">
-	
-	<xsl:import href="base.xslt"/>
-	
-	<xsl:output method="xhtml" indent="yes" omit-xml-declaration="yes" encoding="UTF-8"/>
-	
-	<xsl:template match="techniques">
-		<xsl:result-document href="toc.html" method="xhtml">
-			<nav id="toc">
-				<h2 class="introductory" id="techniques-pages">
-					Techniques
-					<!-- <span class="permalink"><a href="#toc" aria-label="Permalink for Techniques" title="Permalink for Techniques"><span>§</span></a></span> -->
-				</h2>
-				<xsl:apply-templates select="technology">
-					<xsl:sort select="@name"/>
-				</xsl:apply-templates>
-			</nav>
-		</xsl:result-document>
-	</xsl:template>
-	
-	<xsl:template match="technology">
-		<xsl:variable name="technology-id" select="wcag:generate-id(@name)"/>
-		<xsl:variable name="technology-title">
-			<xsl:choose>
-				<xsl:when test="@name = 'aria'">ARIA Techniques</xsl:when>
-				<xsl:when test="@name = 'client-side-script'">Client-Side Script Techniques</xsl:when>
-				<xsl:when test="@name = 'css'">CSS Techniques</xsl:when>
-				<xsl:when test="@name = 'failures'">Common Failures</xsl:when>
-				<xsl:when test="@name = 'flash'">Flash Techniques</xsl:when>
-				<xsl:when test="@name = 'general'">General Techniques</xsl:when>
-				<xsl:when test="@name = 'html'">HTML Techniques</xsl:when>
-				<xsl:when test="@name = 'pdf'">PDF Techniques</xsl:when>
-				<xsl:when test="@name = 'server-side-script'">Server-Side Script Techniques</xsl:when>
-				<xsl:when test="@name = 'silverlight'">Silverlight Techniques</xsl:when>
-				<xsl:when test="@name = 'smil'">SMIL Techniques</xsl:when>
-				<xsl:when test="@name = 'text'">Plain-Text Techniques</xsl:when>
-			</xsl:choose>
-		</xsl:variable>
-		<h3 id="{$technology-id}">
-			<xsl:value-of select="$technology-title"/>
-			<span class="permalink"><a href="#{$technology-id}" aria-label="Permalink for {$technology-title}" title="Permalink for {$technology-title}"><span>§</span></a></span>
-		</h3>
-		<ul>
-			<xsl:apply-templates select="technique">
-				<xsl:sort select="wcag:number-in-id(@id)" data-type="number"/>
-			</xsl:apply-templates>
-		</ul>
-	</xsl:template>
-	
-	<xsl:template match="technique">
-		<li>
-			<a href="{parent::technology/@name}/{@id}"><xsl:value-of select="@id"/>: <xsl:value-of select="title"/></a>
-		</li>
-	</xsl:template>
-		
-</xsl:stylesheet>
\ No newline at end of file
diff --git a/xslt/generate-techniques.xslt b/xslt/generate-techniques.xslt
deleted file mode 100644
index 4693a2257c..0000000000
--- a/xslt/generate-techniques.xslt
+++ /dev/null
@@ -1,452 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
-	xmlns:xs="http://www.w3.org/2001/XMLSchema"
-	xmlns:html="http://www.w3.org/1999/xhtml"
-	xmlns:wcag="https://www.w3.org/WAI/GL/"
-	xmlns="http://www.w3.org/1999/xhtml"
-	exclude-result-prefixes="#all"
-	version="2.0">
-	
-	<xsl:include href="base.xslt"/>
-	
-	<xsl:param name="techniques.dir">techniques/</xsl:param>
-	<xsl:param name="output.dir">output/</xsl:param>
-	<xsl:param name="associations.file">technique-assocations.xml</xsl:param>
-	<xsl:param name="guidelines.meta.file">../guidelines/wcag.xml</xsl:param>
-	
-	<xsl:variable name="associations.doc" select="document($associations.file)"/>
-	<xsl:variable name="guidelines.meta.doc" select="document($guidelines.meta.file)"/>
-	
-	<xsl:template name="navigation">
-		<xsl:param name="meta" tunnel="yes"/>
-		<nav>
-		<ul id="navigation">
-			<li><a href="{$loc.techniques}#techniques" title="Table of Contents">Contents</a></li>
-			<li><a href="{$loc.techniques}#introduction" title="Introduction to Techniques">Intro</a></li>
-			<xsl:choose>
-				<xsl:when test="$meta/preceding-sibling::technique">
-					<li><a href="{$meta/preceding-sibling::technique[1]/@id}">Previous Technique: <xsl:value-of select="$meta/preceding-sibling::technique[1]/@id"/></a></li>
-				</xsl:when>
-				<xsl:when test="$meta/parent::technology/preceding-sibling::technology">
-					<li><a href="../{$meta/parent::technology/preceding-sibling::technology[1]/@name}/{$meta/parent::technology/preceding-sibling::technology[1]/technique[last()]/@id}">Previous Technique: <xsl:value-of select="$meta/parent::technology/preceding-sibling::technology[1]/technique[last()]/@id"/></a></li>
-				</xsl:when>
-			</xsl:choose>
-			<xsl:choose>
-				<xsl:when test="$meta/following-sibling::technique">
-					<li><a href="{$meta/following-sibling::technique[1]/@id}">Next Technique: <xsl:value-of select="$meta/following-sibling::technique[1]/@id"/></a></li>
-				</xsl:when>
-				<xsl:when test="$meta/parent::technology/following-sibling::technology">
-					<li><a href="../{$meta/parent::technology/following-sibling::technology[1]/@name}/{$meta/parent::technology/following-sibling::technology[1]/technique[1]/@id}">Next Technique: <xsl:value-of select="$meta/parent::technology/following-sibling::technology[1]/technique[1]/@id"/></a></li>
-				</xsl:when>
-			</xsl:choose>
-		</ul>
-		</nav>
-	</xsl:template>
-	
-	<xsl:template name="navtoc">
-		<xsl:param name="meta" tunnel="yes"/>
-		<nav class="navtoc">
-			<p>On this page:</p>
-			<ul id="navbar">
-				<li><a href="#important-information">Important Information about Techniques</a></li>
-				<li><a href="#applicability">Applicability</a></li>
-				<li><a href="#description">Description</a></li>
-				<xsl:if test="wcag:section-meaningfully-exists('examples', //html:section[@id = 'examples'])"><li><a href="#examples">Examples</a></li></xsl:if>
-				<xsl:if test="wcag:section-meaningfully-exists('resources', //html:section[@id = 'resources'])"><li><a href="#resources">Related Resources</a></li></xsl:if>
-				<xsl:if test="wcag:section-meaningfully-exists('related', //html:section[@id = 'related'])"><li><a href="#related">Related Techniques</a></li></xsl:if>
-				<li><a href="#tests">Tests</a></li>
-			</ul>
-		</nav>
-	</xsl:template>
-	
-	<xsl:template name="technique-link">
-		<xsl:param name="technique" select="."/>
-		<xsl:choose>
-			<xsl:when test="$technique"><a href="../{$technique/parent::technology/@name}/{$technique/@id}"><xsl:value-of select="$technique/@id"/>: <xsl:value-of select="$technique/title"/></a></xsl:when>
-			<xsl:otherwise>an unwritten technique</xsl:otherwise>
-		</xsl:choose>
-		
-	</xsl:template>
-	
-	<xsl:template name="understanding-link">
-		<xsl:param name="understanding-id" select="@id"/>
-		<xsl:variable name="guidelines.meta" select="$guidelines.meta.doc//*[@id = $understanding-id]"/>
-		<a href="{$loc.understanding}{$guidelines.meta/@id}">
-			<xsl:choose>
-				<xsl:when test="$guidelines.meta/self::success-criterion">Success Criterion</xsl:when>
-				<xsl:when test="$guidelines.meta/self::guideline">Guideline</xsl:when>
-			</xsl:choose>
-			<xsl:text> </xsl:text>
-			<xsl:value-of select="$guidelines.meta/num"/>
-			<xsl:text>: </xsl:text>
-			<xsl:value-of select="$guidelines.meta/name"/>
-		</a>
-	</xsl:template>
-	
-	<xsl:template name="technique-sufficiency">
-		<xsl:param name="meta" tunnel="yes"/>
-		<xsl:choose>
-			<xsl:when test="ancestor::sufficient">Sufficient</xsl:when>
-			<xsl:when test="ancestor::advisory">Advisory</xsl:when>
-			<xsl:when test="ancestor::failure">Failure</xsl:when>
-		</xsl:choose>
-		<xsl:if test="parent::and">
-			<xsl:text>, together with </xsl:text>
-			<xsl:for-each select="parent::and/technique[not(@id = current()/@id)]">
-				<xsl:call-template name="technique-link">
-					<xsl:with-param name="technique" select="$meta/ancestor::techniques//technique[@id = current()/@id]"/>
-				</xsl:call-template>
-				<xsl:if test="position() != last()"> and </xsl:if>
-			</xsl:for-each>
-		</xsl:if>
-		<xsl:if test="using">
-			<xsl:text> using a more specific technique</xsl:text>
-		</xsl:if>
-		<xsl:if test="ancestor::using">
-			<xsl:text> as a way to meet </xsl:text>
-			<xsl:call-template name="technique-link">
-				<xsl:with-param name="technique" select="$meta/ancestor::techniques//technique[@id = current()/ancestor::using[1]/parent::technique/@id]"/>
-			</xsl:call-template>
-		</xsl:if>
-	</xsl:template>
-	
-	<xsl:template match="/techniques">
-		<xsl:variable name="techniques-sorted">
-			<xsl:copy>
-				<xsl:apply-templates select="technology" mode="sorting">
-					<xsl:sort select="@name"/>
-				</xsl:apply-templates>
-			</xsl:copy>
-		</xsl:variable>
-		<xsl:apply-templates select="$techniques-sorted//technique"/>
-	</xsl:template>
-	
-	<xsl:template match="technology" mode="sorting">
-		<xsl:copy>
-			<xsl:apply-templates select="@*"/>
-			<xsl:apply-templates select="technique" mode="sorting">
-				<xsl:sort select="wcag:number-in-id(@id)" data-type="number"/>
-			</xsl:apply-templates>
-		</xsl:copy>
-	</xsl:template> 
-	
-	<xsl:template match="technique" mode="sorting">
-		<xsl:copy>
-			<xsl:apply-templates select="node()|@*"/>
-		</xsl:copy>
-	</xsl:template>
-	
-	<xsl:template match="technique">
-		<xsl:variable name="technology" select="parent::technology/@name"/>
-		<xsl:result-document href="{$output.dir}/{$technology}/{@id}.html" encoding="utf-8" exclude-result-prefixes="#all" include-content-type="no" indent="yes" method="xhtml" omit-xml-declaration="yes">
-			<xsl:apply-templates select="document(resolve-uri(concat($technology, '/', @id, '.html'), $techniques.dir))">
-				<xsl:with-param name="meta" select="." tunnel="yes"/>
-			</xsl:apply-templates>
-		</xsl:result-document>
-	</xsl:template>
-	
-	<xsl:template match="node()|@*">
-		<xsl:copy>
-			<xsl:apply-templates select="node()|@*"/>
-		</xsl:copy>
-	</xsl:template>
-	
-	<xsl:template match="html:html">
-		<xsl:param name="meta" tunnel="yes"/>
-		<xsl:variable name="lang" select="$meta/ancestor::guidelines/@lang"/>
-		<xsl:text disable-output-escaping="yes"><![CDATA[<!DOCTYPE html>
-]]></xsl:text>
-		<html lang="{$lang}" xml:lang="{$lang}">
-			<head>
-				<meta charset="UTF-8" />
-				<xsl:apply-templates select="//html:title"/>
-				<link rel="stylesheet" type="text/css" href="https://www.w3.org/StyleSheets/TR/2016/base" />
-				<link rel="stylesheet" type="text/css" href="base.css" />
-				<link rel="stylesheet" type="text/css" href="../techniques.css" />
-				<link rel="stylesheet" type="text/css" href="../slicenav.css" />
-			</head>
-			<body>
-				<xsl:call-template name="navigation"/>
-				<xsl:call-template name="navtoc"/>
-				<xsl:apply-templates select="//html:h1"/>
-				<section id="important-information">
-					<h2>Important Information about Techniques</h2>
-					<p>See <a href="{$loc.understanding}understanding-techniques">Understanding Techniques for WCAG Success Criteria</a> for important information about the usage of these informative techniques and how they relate to the normative WCAG 2.1 success criteria. The Applicability section explains the scope of the technique, and the presence of techniques for a specific technology does not imply that the technology can be used in all situations to create content that meets WCAG 2.1.</p>
-				</section>
-				<main>
-					<xsl:call-template name="applicability"/>
-					<xsl:call-template name="description"/>
-					<xsl:call-template name="examples"/>
-					<xsl:call-template name="resources"/>
-					<xsl:call-template name="related"/>
-					<xsl:call-template name="tests"/>
-				</main>
-			</body>
-		</html>
-	</xsl:template>
-	
-	<xsl:template match="html:title">
-		<xsl:param name="meta" tunnel="yes"/>
-		<title><xsl:value-of select="$meta/@id"/>: <xsl:value-of select="//html:h1"/></title>
-	</xsl:template>
-	
-	<xsl:template match="html:h1">
-		<h1><xsl:apply-templates select="node()"/></h1>
-	</xsl:template>
-	
-	<xsl:template match="html:section[@id = 'meta']"/>
-	
-	<xsl:template name="applicability">
-		<xsl:param name="meta" tunnel="yes"/>
-		<xsl:variable name="technology" select="$meta/parent::technology/@name"/>
-		<xsl:variable name="applicability" select="//html:section[@id = 'applicability']"/>
-		<section id="applicability">
-			<h2>Applicability</h2>
-			
-			<!-- Copy applicability if provided, otherwise put in a stock one for technology -->
-			<xsl:choose>
-				<xsl:when test="wcag:section-meaningfully-exists('applicability', $applicability)">
-					<xsl:apply-templates select="$applicability/html:*[not(wcag:isheading(.))]"/>
-				</xsl:when>
-				<xsl:otherwise>
-					<xsl:choose>
-						<xsl:when test="$technology = 'aria'">
-							<p>Content using <a href="https://www.w3.org/TR/wai-aria/">Accessible Rich Internet Applications (WAI-ARIA)</a>.</p>
-						</xsl:when>
-						<xsl:when test="$technology = 'client-side-script'">
-							<p>Content using client-side script (JavaScript, ECMAScript).</p>
-						</xsl:when>
-						<xsl:when test="$technology = 'css'">
-							<p>Content using technologies that support <a href="https://www.w3.org/TR/CSS/">Cascading Style Sheets (CSS)</a>.</p>
-						</xsl:when>
-						<xsl:when test="$technology = 'failures'">
-							<xsl:message>No failures applicability statement in <xsl:value-of select="$meta/@id"/></xsl:message>
-						</xsl:when>
-						<xsl:when test="$technology = 'flash'">
-							<p>Content implemented in Adobe Flash.</p>
-						</xsl:when>
-						<xsl:when test="$technology = 'general'">
-							<p>Content implemented in any technology.</p>
-						</xsl:when>
-						<xsl:when test="$technology = 'html'">
-							<p>Content structured in <a href="https://www.w3.org/TR/html/">HyperText Markup Language (HTML)</a>.</p>
-						</xsl:when>
-						<xsl:when test="$technology = 'pdf'">
-							<p>Content implemented in Adobe Tagged PDF.</p>
-						</xsl:when>
-						<xsl:when test="$technology = 'server-side-script'">
-							<p>Content modified by the server before being sent to the user.</p>
-						</xsl:when>
-						<xsl:when test="$technology = 'silverlight'">
-							<p>Content implemented in Microsoft Silverlight.</p>
-						</xsl:when>
-						<xsl:when test="$technology = 'smil'">
-							<p>Content implemented in <a href="https://www.w3.org/TR/SMIL/">Synchronized Multimedia Integration Language (SMIL)</a>.</p>
-						</xsl:when>
-						<xsl:when test="$technology = 'text'">
-							<p>Content implemented in plain text, including Markdown and similar formats, without use of a structure technology.</p>
-						</xsl:when>
-					</xsl:choose>
-				</xsl:otherwise>
-			</xsl:choose>
-			
-			<!-- Put in deprecation warning for out-dated technologies -->
-			<xsl:choose>
-				<xsl:when test="$technology = 'flash'">
-					<div class="note">
-						<div role="heading" class="note-title marker" aria-level="3">Note</div>
-						<p>Adobe has plans to stop updating and distributing the Flash Player at the end of 2020, and encourages authors interested in creating accessible web content to use HTML.</p>
-					</div>
-				</xsl:when>
-				<xsl:when test="$technology = 'silverlight'">
-					<div class="note">
-						<div role="heading" class="note-title marker" aria-level="3">Note</div>
-						<p>Microsoft has stopped updating and distributing Silverlight, and authors are encouraged to use HTML for accessible web content.</p>
-					</div>
-				</xsl:when>
-			</xsl:choose>
-			
-			<!-- Add links to the Understanding pages that reference this technique -->
-			<!-- This has gotten really hairy, would like to find a more elegant way to sort the associations -->
-			<xsl:variable name="associations" select="$associations.doc//technique[@id = $meta/@id]"/>
-			<xsl:variable name="association-links">
-				<xsl:for-each select="$associations">
-					<span>
-						<xsl:call-template name="understanding-link">
-							<xsl:with-param name="understanding-id">
-								<xsl:choose>
-									<xsl:when test="ancestor::success-criterion"><xsl:value-of select="ancestor::success-criterion/@id"/></xsl:when>
-									<xsl:when test="ancestor::guideline"><xsl:value-of select="ancestor::guideline/@id"/></xsl:when>
-								</xsl:choose>
-							</xsl:with-param>
-						</xsl:call-template>
-						<xsl:text> (</xsl:text>
-						<xsl:call-template name="technique-sufficiency"/>
-						<xsl:text>)</xsl:text>
-					</span>
-				</xsl:for-each>
-			</xsl:variable>
-			<xsl:variable name="association-links-filtered">
-				<xsl:for-each select="$association-links/html:span">
-					<xsl:if test="not(preceding-sibling::html:span[. = current()])">
-						<xsl:copy-of select="."/>
-					</xsl:if>
-				</xsl:for-each>
-			</xsl:variable>
-			<xsl:choose>
-				<xsl:when test="count($association-links-filtered/html:span) &gt; 1">
-					<p>This technique relates to:</p>
-					<ul>
-						<xsl:for-each select="$association-links-filtered/html:span">
-							<li><xsl:copy-of select="node()"/></li>
-						</xsl:for-each>
-					</ul>
-				</xsl:when>
-				<xsl:when test="count($association-links-filtered/html:span) = 1">
-					<p>This technique relates to <xsl:copy-of select="$association-links-filtered/node()"/>.</p>
-				</xsl:when>
-				<xsl:otherwise><p>This technique is not referenced from any Understanding document.</p></xsl:otherwise>
-			</xsl:choose>
-		</section>
-	</xsl:template>
-	
-	<xsl:template name="description">
-		<xsl:param name="meta" tunnel="yes"/>
-		<xsl:variable name="description" select="//html:section[@id = 'description']"/>
-		<xsl:choose>
-			<xsl:when test="wcag:section-meaningfully-exists('description', $description)">
-				<section id="description">
-					<h2>Description</h2>
-					<xsl:apply-templates select="$description/html:*[not(wcag:isheading(.))]"/>
-				</section>
-			</xsl:when>
-			<xsl:otherwise>
-				<xsl:message>Missing or incomplete description section in <xsl:value-of select="$meta/@id"/></xsl:message>
-			</xsl:otherwise>
-		</xsl:choose>
-	</xsl:template>
-	
-	<xsl:template name="examples">
-		<xsl:param name="meta" tunnel="yes"/>
-		<xsl:variable name="examples" select="//html:section[@id = 'examples']"/>
-		<xsl:if test="wcag:section-meaningfully-exists('examples', $examples)">
-			<section id="examples">
-				<h2>Examples</h2>
-				<xsl:apply-templates select="$examples/html:*[not(wcag:isheading(.))]"/>
-			</section>
-		</xsl:if>
-	</xsl:template>
-	
-	<xsl:template name="resources">
-		<xsl:param name="meta" tunnel="yes"/>
-		<xsl:variable name="resources" select="//html:section[@id = 'resources']"/>
-		<!-- put in resources section if present and not template -->
-		<xsl:if test="wcag:section-meaningfully-exists('resources', $resources)">
-			<section id="resources">
-				<h2>Resources</h2>
-				<p>Resources are for information purposes only, no endorsement implied.</p>
-				<xsl:apply-templates select="$resources/html:*[not(wcag:isheading(.))]"/>
-			</section>
-		</xsl:if>
-		
-	</xsl:template>
-	
-	<xsl:template name="related">
-		<xsl:param name="meta" tunnel="yes"/>
-		<xsl:variable name="related" select="//html:section[@id = 'related']"/>
-		<!-- put in related techniques section if present and not template -->
-		<xsl:if test="wcag:section-meaningfully-exists('related', $related)">
-			<section id="related">
-				<h2>Related Techniques</h2>
-				<xsl:apply-templates select="$related/html:*[not(wcag:isheading(.))]"/>
-			</section>
-		</xsl:if>
-	</xsl:template>
-	
-	<xsl:template name="tests">
-		<xsl:param name="meta" tunnel="yes"/>
-		<xsl:variable name="tests" select="//html:section[@id = 'tests']"/>
-		<xsl:choose>
-			<xsl:when test="wcag:section-meaningfully-exists('tests', $tests)">
-				<section id="tests">
-					<h2>Tests</h2>
-					<xsl:apply-templates select="$tests/html:*[not(wcag:isheading(.))]"/>
-				</section>
-			</xsl:when>
-			<xsl:otherwise>
-				<xsl:message>Missing or incomplete tests section in <xsl:value-of select="$meta/@id"/></xsl:message>
-			</xsl:otherwise>
-		</xsl:choose>
-	</xsl:template>
-	
-	<xsl:template match="html:section[@class='test']">
-		<xsl:copy>
-			<xsl:apply-templates select="@*"/>
-			<h3><xsl:value-of select="html:*[wcag:isheading(.)][1]"/></h3>
-			<xsl:apply-templates select="html:*[not(wcag:isheading(.))]"/>
-		</xsl:copy>
-	</xsl:template>
-	
-	<xsl:template match="html:section[@class='test-procedure']">
-		<xsl:copy>
-			<xsl:apply-templates select="@*[not(name(.) = 'id')]"/>
-			<xsl:element name="h{count(ancestor::html:section[@class = 'test' or @id = 'tests']) + 2}">Procedure</xsl:element>
-			<xsl:apply-templates select="html:*[not(wcag:isheading(.))]"/>
-		</xsl:copy>
-	</xsl:template>
-	
-	<xsl:template match="html:section[@class='test-results']">
-		<xsl:copy>
-			<xsl:apply-templates select="@*[not(name(.) = 'id')]"/>
-			<xsl:element name="h{count(ancestor::html:section[@class = 'test' or @id = 'tests']) + 2}">Expected Results</xsl:element>
-			<xsl:apply-templates select="html:*[not(wcag:isheading(.))]"/>
-		</xsl:copy>
-	</xsl:template>
-	
-	<xsl:template match="html:section[@class='example']">
-		<xsl:variable name="heading" select="wcag:find-heading(.)"/>
-		<xsl:variable name="heading-text">
-			<xsl:text>Example </xsl:text>
-			<xsl:value-of select="count(preceding-sibling::html:section[@class='example']) + 1"/>
-			<xsl:if test="normalize-space($heading) != ''">
-				<xsl:text>: </xsl:text>
-				<xsl:apply-templates select="$heading/node()"/>
-			</xsl:if>
-		</xsl:variable>
-		<xsl:copy>
-			<xsl:apply-templates select="@*"/>
-			<xsl:attribute name="id" select="wcag:generate-id($heading-text)"/>
-			<h3><xsl:copy-of select="$heading-text"/></h3>
-			<xsl:apply-templates select="html:*[not(wcag:isheading(.))]"/>
-		</xsl:copy>
-	</xsl:template>
-	
-	<xsl:template match="html:section">
-		<xsl:copy>
-			<xsl:apply-templates select="@*"/>
-			<xsl:attribute name="id">
-				<xsl:choose>
-					<xsl:when test="@id"><xsl:value-of select="@id"/></xsl:when>
-					<xsl:otherwise><xsl:value-of select="wcag:generate-id(wcag:find-heading(.))"/></xsl:otherwise>
-				</xsl:choose>
-			</xsl:attribute>
-			<xsl:apply-templates/>
-		</xsl:copy>
-	</xsl:template>
-	
-	<xsl:template match="html:h2 | html:h3 | html:h4 | html:h5 | html:h6">
-		<xsl:variable name="level" select="count(ancestor::html:section) + 1"/>
-		<xsl:element name="h{$level}">
-			<xsl:apply-templates/>
-		</xsl:element>
-	</xsl:template>
-	
-	<xsl:template match="html:a[not(@href)]" mode="#all">
-		<xsl:param name="meta" tunnel="yes"/>
-		<xsl:variable name="dfn" select="lower-case(.)"/>
-		<a href="{$loc.guidelines}#{$meta/ancestor::guidelines/term[name = $dfn]/id}" target="terms"><xsl:value-of select="."/></a>
-	</xsl:template>
-	
-	<xsl:template match="html:*[@class = 'instructions']"/>
-	
-</xsl:stylesheet>
\ No newline at end of file
diff --git a/xslt/generate-test-sql.xslt b/xslt/generate-test-sql.xslt
new file mode 100644
index 0000000000..9455540bc5
--- /dev/null
+++ b/xslt/generate-test-sql.xslt
@@ -0,0 +1,118 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
+	xmlns:xs="http://www.w3.org/2001/XMLSchema"
+	xmlns:html="http://www.w3.org/1999/xhtml"
+	xmlns:wcag="https://www.w3.org/WAI/GL/"
+	xmlns:func="http://www.w3.org/2005/xpath-functions"
+	xmlns="http://www.w3.org/1999/xhtml"
+	exclude-result-prefixes="#all"
+	version="2.0">
+	
+	<xsl:include href="base.xslt"/>
+	
+	<xsl:output method="text"/>
+	
+	<!--
+	<xsl:param name="versions.file">../guidelines/versions.xml</xsl:param>
+	<xsl:param name="techniques.file">techniques.xml</xsl:param>
+	-->
+	<xsl:param name="associations.file">../techniques/technique-associations.xml</xsl:param>
+	
+	<!--
+	<xsl:variable name="versions.doc" select="document($versions.file)"/>
+	<xsl:variable name="techniques.doc" select="document($techniques.file)"/>
+	-->
+	<xsl:variable name="associations.doc" select="document($associations.file)"/>
+	
+	<xsl:function name="wcag:quote-string">
+		<xsl:param name="str"/>
+		<xsl:text>'</xsl:text><xsl:value-of select="$str"/><xsl:text>'</xsl:text>
+	</xsl:function>
+	
+	<xsl:function name="wcag:escape-apos">
+		<xsl:param name="str"/>
+		<xsl:variable name="apos">&#39;</xsl:variable>
+		<xsl:variable name="eapos">&#39;&#39;</xsl:variable>
+		<xsl:value-of select="replace($str, $apos, $eapos)"/>
+	</xsl:function>
+	
+	<xsl:template match="/">
+		<xsl:text>insert ignore into success_criteria (sc_id, principle, guideline, criterion, sc_num, level, handle, text, spec_source) values 
+</xsl:text>
+		<xsl:apply-templates select="//success-criterion" mode="success-criteria"/>
+		
+		<xsl:text>insert ignore into techniques (technique_id, title, technology_id, test_procedure, expected_result) values 
+</xsl:text>
+		<xsl:apply-templates select="$techniques.doc//technique" mode="techniques"/>
+		
+		<xsl:text>insert ignore into techniques_applicability (technique_id, sc_id, nature) values 
+</xsl:text>
+		<xsl:apply-templates select="$associations.doc//technique[@id]" mode="associations"/>
+	</xsl:template>
+	
+	<!-- success-criteria -->
+	<xsl:template match="success-criterion" mode="success-criteria">
+		<xsl:variable name="num-split" select="tokenize(num, '\.')"/>
+		<xsl:text>(</xsl:text>
+		<xsl:value-of select="wcag:quote-string(@id)"/><xsl:text>, </xsl:text>
+		<xsl:value-of select="subsequence($num-split, 1, 1)"/><xsl:text>, </xsl:text>
+		<xsl:value-of select="subsequence($num-split, 2, 1)"/><xsl:text>, </xsl:text>
+		<xsl:value-of select="subsequence($num-split, 3, 1)"/><xsl:text>, </xsl:text>
+		<xsl:value-of select="wcag:quote-string(num)"/><xsl:text>, </xsl:text>
+		<xsl:value-of select="wcag:quote-string(level)"/><xsl:text>, </xsl:text>
+		<xsl:value-of select="wcag:quote-string(name)"/><xsl:text>, </xsl:text>
+		<xsl:value-of select="wcag:quote-string(wcag:escape-apos(normalize-space(serialize(content/node()))))"/><xsl:text>, </xsl:text>
+		<xsl:value-of select="wcag:quote-string(concat('WCAG', $versions.doc//id[@id = current()/@id]/parent::version/@name))"/>
+		<xsl:text>)</xsl:text>
+		<xsl:choose>
+			<xsl:when test="position() = last()"><xsl:text>;</xsl:text></xsl:when>
+			<xsl:otherwise><xsl:text>,</xsl:text></xsl:otherwise>
+		</xsl:choose>
+		<xsl:text>
+</xsl:text>
+	</xsl:template>
+	
+	<!-- techniques -->
+	<xsl:template match="technique" mode="techniques">
+		<xsl:variable name="technique-doc" select="document(concat('../techniques/', parent::technology/@name, '/', @id, '.html'))"/>
+		<xsl:text>(</xsl:text>
+		<xsl:value-of select="wcag:quote-string(@id)"/><xsl:text>, </xsl:text>
+		<xsl:value-of select="wcag:quote-string(wcag:escape-apos(title))"/><xsl:text>, </xsl:text>
+		<xsl:choose>
+			<xsl:when test="parent::technology/@name = 'aria'">8</xsl:when>
+			<xsl:when test="parent::technology/@name = 'client-side-script'">4</xsl:when>
+			<xsl:when test="parent::technology/@name = 'css'">3</xsl:when>
+			<xsl:when test="parent::technology/@name = 'failures'">null</xsl:when>
+			<xsl:when test="parent::technology/@name = 'general'">1</xsl:when>
+			<xsl:when test="parent::technology/@name = 'html'">2</xsl:when>
+			<xsl:when test="parent::technology/@name = 'pdf'">10</xsl:when>
+			<xsl:when test="parent::technology/@name = 'server-side-script'">5</xsl:when>
+			<xsl:when test="parent::technology/@name = 'smil'">6</xsl:when>
+			<xsl:when test="parent::technology/@name = 'text'">7</xsl:when>
+		</xsl:choose><xsl:text>, </xsl:text>
+		<xsl:value-of select="wcag:quote-string(wcag:escape-apos(normalize-space(serialize($technique-doc//html:section[@class='procedure']/html:ol))))"/><xsl:text>, </xsl:text>
+		<xsl:value-of select="wcag:quote-string(wcag:escape-apos(normalize-space(serialize($technique-doc//html:section[@class='results']/html:ul))))"/>
+		<xsl:text>)</xsl:text>
+		<xsl:choose>
+			<xsl:when test="position() = last()"><xsl:text>;</xsl:text></xsl:when>
+			<xsl:otherwise><xsl:text>,</xsl:text></xsl:otherwise>
+		</xsl:choose>
+		<xsl:text>
+</xsl:text>
+	</xsl:template>
+	
+	<!-- techniques-applicability -->
+	<xsl:template match="technique" mode="associations">
+		<xsl:text>(</xsl:text>
+		<xsl:value-of select="wcag:quote-string(@id)"/><xsl:text>, </xsl:text>
+		<xsl:value-of select="wcag:quote-string(ancestor::success-criterion/@id)"/><xsl:text>, </xsl:text>
+		<xsl:value-of select="wcag:quote-string(name(ancestor::sufficient | ancestor::advisory | ancestor::failure))"/>
+		<xsl:text>)</xsl:text>
+		<xsl:choose>
+			<xsl:when test="position() = last()"><xsl:text>;</xsl:text></xsl:when>
+			<xsl:otherwise><xsl:text>,</xsl:text></xsl:otherwise>
+		</xsl:choose>
+		<xsl:text>
+</xsl:text>
+	</xsl:template>
+</xsl:stylesheet>
\ No newline at end of file
diff --git a/xslt/generate-understanding-toc.xslt b/xslt/generate-understanding-toc.xslt
deleted file mode 100644
index 5b0413a6de..0000000000
--- a/xslt/generate-understanding-toc.xslt
+++ /dev/null
@@ -1,44 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
-	xmlns:xs="http://www.w3.org/2001/XMLSchema"
-	xmlns="http://www.w3.org/1999/xhtml"
-	exclude-result-prefixes="#all"
-	version="2.0">
-	
-	<xsl:output method="xhtml" indent="yes" omit-xml-declaration="yes" encoding="UTF-8"/>
-	
-	<xsl:template match="guidelines">
-		<xsl:result-document href="toc.html" method="xhtml">
-			<nav id="toc">
-				<h2 class="introductory" id="understanding-pages">
-					Understanding Pages
-					<!-- <span class="permalink"><a href="#toc" aria-label="Permalink for Understanding Pages" title="Permalink for Understanding Pages"><span>§</span></a></span> -->
-				</h2>
-				<ol class="toc">
-					<xsl:apply-templates select="principle | understanding | guideline | success-criterion"/>
-				</ol>
-			</nav>
-		</xsl:result-document>
-	</xsl:template>
-	
-	<xsl:template match="principle | understanding | guideline | success-criterion">
-		<li class="tocline">
-			<xsl:choose>
-				<xsl:when test="name() != 'principle'">
-					<a href="{file/@href}" class="tocxref">
-						<span class="secno"><xsl:value-of select="num"/><xsl:text> </xsl:text></span>
-						<xsl:value-of select="name"/></a>
-				</xsl:when>
-				<xsl:otherwise>
-					<xsl:value-of select="name"/>
-				</xsl:otherwise>				
-			</xsl:choose>
-			<xsl:if test="understanding | guideline | success-criterion">
-				<ol class="toc">
-					<xsl:apply-templates select="understanding | guideline | success-criterion"/>
-				</ol>
-			</xsl:if>
-		</li>
-	</xsl:template>
-		
-</xsl:stylesheet>
\ No newline at end of file
diff --git a/xslt/generate-understanding.xslt b/xslt/generate-understanding.xslt
deleted file mode 100644
index b5869802c4..0000000000
--- a/xslt/generate-understanding.xslt
+++ /dev/null
@@ -1,404 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
-	xmlns:xs="http://www.w3.org/2001/XMLSchema"
-	xmlns:html="http://www.w3.org/1999/xhtml"
-	xmlns:wcag="https://www.w3.org/WAI/GL/"
-	xmlns="http://www.w3.org/1999/xhtml"
-	exclude-result-prefixes="#all"
-	version="2.0">
-	
-	<xsl:include href="base.xslt"/>
-	
-	<xsl:param name="base.dir">input/understanding/</xsl:param>
-	<xsl:param name="output.dir">output/</xsl:param>
-	
-	<xsl:template name="name">
-		<xsl:param name="meta" tunnel="yes"/>
-		<xsl:variable name="type">
-			<xsl:choose>
-				<xsl:when test="name($meta) = 'guideline'">Guideline</xsl:when>
-				<xsl:when test="name($meta) = 'success-criterion'">Success Criterion</xsl:when>
-			</xsl:choose>
-		</xsl:variable>
-		<xsl:if test="$type != ''"><xsl:value-of select="$type"/><xsl:text> </xsl:text><xsl:value-of select="$meta/num"/><xsl:text>: </xsl:text></xsl:if><xsl:value-of select="$meta/name"/>
-	</xsl:template>
-	
-	<xsl:template name="navigation">
-		<xsl:param name="meta" tunnel="yes"/>
-		<nav>
-		<ul id="navigation">
-			<li><a href="." title="Table of Contents">Contents</a></li>
-			<xsl:choose>
-				<xsl:when test="name($meta) = 'guideline'">
-					<xsl:choose>
-						<xsl:when test="$meta/preceding-sibling::guideline">
-							<li><a href="{$meta/preceding-sibling::guideline[1]/file/@href}">Previous <abbr title="Guideline">GL</abbr>: <xsl:value-of select="$meta/preceding-sibling::guideline[1]/name"/></a></li>
-						</xsl:when>
-						<xsl:when test="$meta/parent::principle/preceding-sibling::principle">
-							<li><a href="{$meta/parent::principle/preceding-sibling::principle[1]/guideline[last()]/file/@href}">Previous <abbr title="Guideline">GL</abbr>: <xsl:value-of select="$meta/parent::principle/preceding-sibling::principle[1]/guideline[last()]/name"/></a></li>
-						</xsl:when>
-						<xsl:when test="$meta/parent::principle/preceding-sibling::understanding">
-							<li><a href="{$meta/parent::principle/preceding-sibling::understanding[1]/file/@href}"><xsl:value-of select="$meta/parent::principle/preceding-sibling::understanding[1]/name"/></a></li>
-						</xsl:when>
-					</xsl:choose>
-					<li><a href="{$meta/success-criterion[1]/file/@href}">First <abbr title="Success Criterion">SC</abbr>: <xsl:value-of select="$meta/success-criterion[1]/name"/></a></li>
-					<xsl:choose>
-						<xsl:when test="$meta/following-sibling::guideline">
-							<li><a href="{$meta/following-sibling::guideline[1]/file/@href}">Next <abbr title="Guideline">GL</abbr>: <xsl:value-of select="$meta/following-sibling::guideline[1]/name"/></a></li>
-						</xsl:when>
-						<xsl:when test="$meta/parent::principle/following-sibling::principle">
-							<li><a href="{$meta/parent::principle/following-sibling::principle[1]/guideline[1]/file/@href}">Next <abbr title="Guideline">GL</abbr>: <xsl:value-of select="$meta/parent::principle/following-sibling::principle[1]/guideline[1]/name"/></a></li>
-						</xsl:when>
-						<xsl:when test="$meta/parent::principle/following-sibling::understanding">
-							<li><a href="{$meta/parent::principle/following-sibling::understanding[1]/file/@href}"><xsl:value-of select="$meta/parent::principle/following-sibling::understanding[1]/name"/></a></li>
-						</xsl:when>
-					</xsl:choose>
-				</xsl:when>
-				<xsl:when test="name($meta) = 'success-criterion'">
-					<li><a href="{$meta/parent::guideline[1]/file/@href}"><abbr title="Guideline">GL</abbr>: <xsl:value-of select="$meta/parent::guideline[1]/name"/></a></li>
-					<xsl:choose>
-						<xsl:when test="$meta/preceding-sibling::success-criterion">
-							<li><a href="{$meta/preceding-sibling::success-criterion[1]/file/@href}">Previous <abbr title="Success Criterion">SC</abbr>: <xsl:value-of select="$meta/preceding-sibling::success-criterion[1]/name"/></a></li>
-						</xsl:when>
-						<xsl:when test="$meta/parent::guideline/preceding-sibling::guideline">
-							<li><a href="{$meta/parent::guideline/preceding-sibling::guideline[1]/success-criterion[last()]/file/@href}">Previous <abbr title="Success Criterion">SC</abbr>: <xsl:value-of select="$meta/parent::guideline/preceding-sibling::guideline[1]/success-criterion[last()]/name"/></a></li>
-						</xsl:when>
-						<xsl:when test="$meta/ancestor::principle/preceding-sibling::principle">
-							<li><a href="{$meta/ancestor::principle/preceding-sibling::principle[1]/guideline[last()]/success-criterion[last()]/file/@href}">Previous <abbr title="Success Criterion">SC</abbr>: <xsl:value-of select="$meta/ancestor::principle/preceding-sibling::principle[1]/guideline[last()]/success-criterion[last()]/name"/></a></li>
-						</xsl:when>
-						<xsl:when test="$meta/ancestor::principle/preceding-sibling::understanding">
-							<li><a href="{$meta/ancestor::principle/preceding-sibling::understanding[1]/file/@href}">Previous: <xsl:value-of select="$meta/ancestor::principle/preceding-sibling::understanding[1]/name"/></a></li>
-						</xsl:when>
-					</xsl:choose>
-					<xsl:choose>
-						<xsl:when test="$meta/following-sibling::success-criterion">
-							<li><a href="{$meta/following-sibling::success-criterion[1]/file/@href}">Next <abbr title="Success Criterion">SC</abbr>: <xsl:value-of select="$meta/following-sibling::success-criterion[1]/name"/></a></li>
-						</xsl:when>
-						<xsl:when test="$meta/parent::guideline/following-sibling::guideline">
-							<li><a href="{$meta/parent::guideline/following-sibling::guideline[1]/success-criterion[1]/file/@href}">Next <abbr title="Success Criterion">SC</abbr>: <xsl:value-of select="$meta/parent::guideline/following-sibling::guideline[1]/success-criterion[1]/name"/></a></li>
-						</xsl:when>
-						<xsl:when test="$meta/ancestor::principle/following-sibling::principle">
-							<li><a href="{$meta/ancestor::principle/following-sibling::principle[1]/guideline[1]/success-criterion[1]/file/@href}">Next <abbr title="Success Criterion">SC</abbr>: <xsl:value-of select="$meta/ancestor::principle/following-sibling::principle[1]/guideline[1]/success-criterion[1]/name"/></a></li>
-						</xsl:when>
-						<xsl:when test="$meta/ancestor::principle/following-sibling::understanding">
-							<li><a href="{$meta/ancestor::principle/following-sibling::understanding[1]/file/@href}">Next: <xsl:value-of select="$meta/ancestor::principle/following-sibling::understanding[1]/name"/></a></li>
-						</xsl:when>
-					</xsl:choose>
-				</xsl:when>
-				<xsl:when test="name($meta) = 'understanding'">
-					<xsl:if test="name($meta/preceding-sibling::element()[1]) = 'understanding'">
-						<li><a href="{$meta/preceding-sibling::understanding[1]/file/@href}">Previous: <xsl:value-of select="$meta/preceding-sibling::understanding[1]/name"/></a></li>
-					</xsl:if>
-					<xsl:if test="name($meta/preceding-sibling::element()[1]) = 'principle'">
-						<li><a href="{$meta/preceding-sibling::principle[1]/guideline[last()]/success-criterion[last()]/file/@href}">Previous <abbr title="Guideline">GL</abbr>: <xsl:value-of select="$meta/preceding-sibling::principle[1]/guideline[last()]/name"/></a></li>
-						<li><a href="{$meta/preceding-sibling::principle[1]/guideline[last()]/file/@href}">Previous <abbr title="Success Criterion">SC</abbr>: <xsl:value-of select="$meta/preceding-sibling::principle[1]/guideline[last()]/success-criterion[last()]/name"/></a></li>
-					</xsl:if>
-					<xsl:if test="name($meta/following-sibling::element()[1]) = 'principle'">
-						<li><a href="{$meta/following-sibling::principle[1]/guideline[1]/file/@href}">First <abbr title="Guideline">GL</abbr>: <xsl:value-of select="$meta/following-sibling::principle[1]/guideline[1]/name"/></a></li>
-						<li><a href="{$meta/following-sibling::principle[1]/guideline[1]/success-criterion[1]/file/@href}">First <abbr title="Success Criterion">SC</abbr>: <xsl:value-of select="$meta/following-sibling::principle[1]/guideline[1]/success-criterion[1]/name"/></a></li>
-					</xsl:if>
-					<xsl:if test="name($meta/following-sibling::element()[1]) = 'understanding'">
-						<li><a href="{$meta/following-sibling::understanding[1]/file/@href}">Next: <xsl:value-of select="$meta/following-sibling::understanding[1]/name"/></a></li>
-					</xsl:if>
-				</xsl:when>
-			</xsl:choose>
-		</ul>
-		</nav>
-	</xsl:template>
-	
-	<xsl:template name="navtoc">
-		<xsl:param name="meta" tunnel="yes"/>
-		<nav class="navtoc">
-			<p>On this page:</p>
-			<ul id="navbar">
-				<xsl:if test="name($meta) = 'success-criterion'">
-					<li><a href="#intent">Intent</a></li>
-					<li><a href="#benefits">Benefits</a></li>
-					<xsl:if test="wcag:section-meaningfully-exists('examples', //html:section[@id = 'examples'])"><li><a href="#examples">Examples</a></li></xsl:if>
-					<xsl:if test="wcag:section-meaningfully-exists('resources', //html:section[@id = 'resources'])"><li><a href="#resources">Related Resources</a></li></xsl:if>
-					<li><a href="#techniques">Techniques</a></li>
-				</xsl:if>
-				<xsl:if test="name($meta) = 'guideline'">
-					<li><a href="#intent">Intent</a></li>
-					<xsl:if test="wcag:section-meaningfully-exists('gladvisory', //html:section[@id = 'gladvisory'])"><li><a href="#advisory">Advisory Techniques</a></li></xsl:if>
-					<li><a href="#success-criteria">Success Criteria</a></li>
-				</xsl:if>
-				<xsl:if test="name($meta) = 'understanding'">
-					<xsl:for-each select="//html:body/html:section">
-						<li>
-							<a>
-								<xsl:attribute name="href">
-									<xsl:choose>
-										<xsl:when test="@id">#<xsl:value-of select="@id"/></xsl:when>
-										<xsl:otherwise>#<xsl:value-of select="wcag:generate-id(wcag:find-heading(.))"/></xsl:otherwise>
-									</xsl:choose>
-								</xsl:attribute>
-								<xsl:value-of select="wcag:find-heading(.)"/>
-							</a>
-						</li>
-					</xsl:for-each>
-				</xsl:if>
-				<xsl:if test="//html:a[not(@href)] | $meta/content/descendant::html:a[not(@href)]">
-					<li><a href="#key-terms">Key Terms</a></li>
-				</xsl:if>
-			</ul>
-		</nav>
-	</xsl:template>
-	
-	<xsl:template name="gl-sc">
-		<xsl:param name="meta" tunnel="yes"/>
-		<section id="success-criteria">
-			<h2>Success Criteria for this Guideline</h2>
-			<ul>
-				<xsl:for-each select="$meta/success-criterion">
-					<li><a href="{file/@href}"><xsl:value-of select="num"/><xsl:text> </xsl:text><xsl:value-of select="name"/></a></li>
-				</xsl:for-each>
-			</ul>
-		</section>
-	</xsl:template>
-	
-	<xsl:template name="sc-info">
-		<xsl:param name="meta" tunnel="yes"/>
-		<xsl:choose>
-			<xsl:when test="name($meta) = 'guideline'">Guideline </xsl:when>
-			<xsl:when test="name($meta) = 'success-criterion'">Success Criterion </xsl:when>
-		</xsl:choose>
-		<a href="{$loc.guidelines}#{$meta/@id}" style="font-weight: bold;">
-			<xsl:value-of select="$meta/num"/>
-			<xsl:text> </xsl:text>
-			<xsl:value-of select="$meta/name"/>
-		</a>
-		<xsl:if test="name($meta) = 'success-criterion'"> (Level <xsl:value-of select="$meta/level"/>)</xsl:if>
-		<xsl:text>: </xsl:text>
-	</xsl:template>
-	
-	<xsl:template match="html:p" mode="sc-info">
-		<xsl:param name="sc-info"/>
-		<p><xsl:apply-templates select="@*"/><xsl:apply-templates select="$sc-info"/><xsl:apply-templates mode="sc-info"/></p>
-	</xsl:template>
-	
-	<xsl:template match="html:a[starts-with(@href, '#')]" mode="sc-info">
-		<a href="{$loc.guidelines}{@href}"><xsl:apply-templates mode="sc-info"/></a>
-	</xsl:template>
-	
-	<xsl:template name="key-terms">
-		<xsl:param name="meta" tunnel="yes"/>
-		<xsl:variable name="termrefs" select="//html:a[not(@href)] | $meta/content/descendant::html:a[not(@href)]"/>
-		<xsl:if test="$termrefs">
-			<xsl:variable name="termrefs-canonical">
-				<xsl:for-each select="$termrefs">
-					<xsl:copy-of select="$meta/ancestor::guidelines/term[name = lower-case(normalize-space(current()))]/name[1]"/>
-				</xsl:for-each>
-			</xsl:variable>
-			<xsl:variable name="termids" as="node()*">
-				<xsl:for-each select="distinct-values($termrefs-canonical/name)">
-					<xsl:copy-of select="$meta/ancestor::guidelines/term[name = current()]"/>
-				</xsl:for-each>
-			</xsl:variable>
-			<section id="key-terms">
-				<h2>Key Terms</h2>
-				<xsl:apply-templates select="$termids" mode="key-terms">
-					<xsl:sort select="id"/>
-				</xsl:apply-templates>
-			</section>
-		</xsl:if>
-	</xsl:template>
-	
-	<xsl:template match="term" mode="key-terms">
-		<dt id="{id}"><xsl:value-of select="name[1]"/></dt>
-		<dd><xsl:apply-templates select="definition"/></dd>
-	</xsl:template>
-	
-	<xsl:template match="guidelines">
-		<xsl:apply-templates select="//understanding | //guideline | //success-criterion"/>
-	</xsl:template>
-	
-	<xsl:template match="understanding | guideline | success-criterion">
-		<xsl:result-document href="{$output.dir}/{file/@href}.html" encoding="utf-8" exclude-result-prefixes="#all" include-content-type="no" indent="yes" method="xhtml" omit-xml-declaration="yes">
-			<xsl:apply-templates select="document(resolve-uri(concat(file/@href, '.html'), concat($base.dir, max($versions.doc//id[@id = current()/@id]/parent::version/@name), '/')))">
-				<xsl:with-param name="meta" select="." tunnel="yes"/>
-			</xsl:apply-templates>
-		</xsl:result-document>
-	</xsl:template>
-	
-	<xsl:template match="node()|@*" mode="#all">
-		<xsl:copy>
-			<xsl:apply-templates select="node()|@*" mode="#current"/>
-		</xsl:copy>
-	</xsl:template>
-	
-	<xsl:template match="html:html">
-		<xsl:param name="meta" tunnel="yes"/>
-		<xsl:variable name="lang" select="$meta/ancestor::guidelines/@lang"/>
-		<xsl:text disable-output-escaping="yes"><![CDATA[<!DOCTYPE html>
-]]></xsl:text>
-		<html lang="{$lang}" xml:lang="{$lang}">
-			<head>
-				<meta charset="UTF-8" />
-				<title><xsl:apply-templates select="//html:h1"/></title>
-				<link rel="stylesheet" type="text/css" href="https://www.w3.org/StyleSheets/TR/2016/base" />
-				<link rel="stylesheet" type="text/css" href="base.css" />
-				<link rel="stylesheet" type="text/css" href="understanding.css" />
-				<link rel="stylesheet" type="text/css" href="slicenav.css" />
-			</head>
-			<body>
-				<xsl:call-template name="navigation"/>
-				<xsl:call-template name="navtoc"/>
-				<h1><xsl:apply-templates select="//html:h1"/></h1>
-				<xsl:choose>
-					<xsl:when test="name($meta) = 'guideline' or name($meta) = 'success-criterion'">
-						<blockquote class="scquote">
-							<xsl:apply-templates select="$meta/content/html:p[1]" mode="sc-info">
-								<xsl:with-param name="sc-info"><xsl:call-template name="sc-info"/></xsl:with-param>
-							</xsl:apply-templates>
-							<xsl:apply-templates select="$meta/content/html:*[position() &gt; 1]" mode="sc-info"/>
-						</blockquote>
-						<main>
-							<xsl:apply-templates select="//html:section[@id = 'status']"/>
-							<xsl:apply-templates select="//html:section[@id = 'intent']"/>
-							<xsl:apply-templates select="//html:section[@id = 'benefits']"/>
-							<xsl:apply-templates select="//html:section[@id = 'examples']"/>
-							<xsl:apply-templates select="//html:section[@id = 'resources']"/>
-							<xsl:apply-templates select="//html:section[@id = 'techniques']"/>
-							<xsl:if test="name($meta) = 'guideline'">
-								<xsl:apply-templates select="//html:section[@id = 'advisory']" mode="gladvisory"/>
-								<xsl:call-template name="gl-sc"/>
-							</xsl:if>
-							<xsl:call-template name="key-terms"/>
-						</main>
-					</xsl:when>
-					<xsl:when test="name($meta) = 'understanding'">
-						<main>
-							<xsl:apply-templates select="descendant::html:body/node()[not(wcag:isheading(.))]"/>
-							<xsl:call-template name="key-terms"/>
-						</main>
-					</xsl:when>
-				</xsl:choose>
-			</body>
-		</html>
-	</xsl:template>
-	
-	<xsl:template match="html:title | html:h1">
-		<xsl:param name="meta" tunnel="yes"/>
-		<xsl:if test="name($meta) != 'understanding'">Understanding </xsl:if><xsl:call-template name="name"/>
-	</xsl:template>
-	
-	<xsl:template match="html:section[@id = 'intent']">
-		<xsl:copy>
-			<xsl:apply-templates select="@*"/>
-			<h2>Intent</h2>
-			<xsl:apply-templates select="html:*[not(wcag:isheading(.) or @id = 'benefits')]"/>
-		</xsl:copy>
-	</xsl:template>
-	
-	<xsl:template match="html:section[@id = 'benefits']">
-		<xsl:copy>
-			<xsl:apply-templates select="@*"/>
-			<h2>Benefits</h2>
-			<xsl:apply-templates select="html:*[not(wcag:isheading(.))]"/>
-		</xsl:copy>
-	</xsl:template>
-	
-	<xsl:template match="html:section[@id = 'examples']">
-		<xsl:if test="wcag:section-meaningfully-exists('examples', .)">
-		<xsl:copy>
-			<xsl:apply-templates select="@*"/>
-			<h2>Examples</h2>
-			<xsl:apply-templates select="html:*[not(wcag:isheading(.))]"/>
-		</xsl:copy>
-		</xsl:if>
-	</xsl:template>
-	
-	<xsl:template match="html:section[@id = 'resources']">
-		<xsl:if test="wcag:section-meaningfully-exists('resources', .)">
-		<xsl:copy>
-			<xsl:apply-templates select="@*"/>
-			<h2>Related Resources</h2>
-			<p>Resources are for information purposes only, no endorsement implied.</p>
-			<xsl:apply-templates select="html:*[not(wcag:isheading(.))]"/>
-		</xsl:copy>
-		</xsl:if>
-	</xsl:template>
-	
-	<xsl:template match="html:section[@id = 'techniques']">
-		<xsl:copy>
-			<xsl:apply-templates select="@*"/>
-			<h2>Techniques</h2>
-			<p>Each numbered item in this section represents a technique or combination of techniques that the WCAG Working Group deems sufficient for meeting this Success Criterion. However, it is not necessary to use these particular techniques. For information on using other techniques, see <a href="understanding-techniques">Understanding Techniques for WCAG Success Criteria</a>, particularly the "Other Techniques" section.</p>
-			<xsl:apply-templates select="html:*[not(wcag:isheading(.))]"/>
-		</xsl:copy>
-	</xsl:template>
-	
-	<xsl:template match="html:section[@id = 'sufficient']">
-		<xsl:if test="wcag:section-meaningfully-exists('sufficient', .)">
-		<xsl:copy>
-			<xsl:apply-templates select="@*"/>
-			<h3>Sufficient Techniques</h3>
-			<xsl:if test="html:section[@class = 'situation']"><p>Select the situation below that matches your content. Each situation includes techniques or combinations of techniques that are known and documented to be sufficient for that situation. </p></xsl:if>
-			<xsl:apply-templates select="html:*[not(wcag:isheading(.))]"/>
-		</xsl:copy>
-		</xsl:if>
-	</xsl:template>
-	
-	<xsl:template match="html:section[@id = 'advisory']">
-		<xsl:if test="wcag:section-meaningfully-exists('advisory', .)">
-		<xsl:copy>
-			<xsl:apply-templates select="@*"/>
-			<h3>Advisory Techniques</h3>
-			<p>Although not required for conformance, the following additional techniques should be considered in order to make content more accessible. Not all techniques can be used or would be effective in all situations.</p>
-			<xsl:apply-templates select="html:*[not(wcag:isheading(.))]"/>
-		</xsl:copy>
-		</xsl:if>
-	</xsl:template>
-	
-	<xsl:template match="html:section[@id = 'advisory']" mode="gladvisory">
-		<xsl:if test="wcag:section-meaningfully-exists('gladvisory', .)">
-		<xsl:copy>
-			<xsl:apply-templates select="@*"/>
-			<h2>Advisory Techniques</h2>
-			<p>Specific techniques for meeting each Success Criterion for this guideline are listed in the understanding sections for each Success Criterion (listed below). If there are techniques, however, for addressing this guideline that do not fall under any of the success criteria, they are listed here. These techniques are not required or sufficient for meeting any success criteria, but can make certain types of Web content more accessible to more people.</p>
-			<xsl:apply-templates select="html:*[not(wcag:isheading(.))]"/>
-		</xsl:copy>
-		</xsl:if>
-	</xsl:template>
-	
-	<xsl:template match="html:section[@id = 'failure']">
-		<xsl:if test="wcag:section-meaningfully-exists('failure', .)">
-		<xsl:copy>
-			<xsl:apply-templates select="@*"/>
-			<h3>Failures</h3>
-			<p>The following are common mistakes that are considered failures of this Success Criterion by the WCAG Working Group.</p>
-			<xsl:apply-templates select="html:*[not(wcag:isheading(.))]"/>
-		</xsl:copy>
-		</xsl:if>
-	</xsl:template>
-	
-	<xsl:template match="html:section">
-		<xsl:copy>
-			<xsl:apply-templates select="@*"/>
-			<xsl:attribute name="id">
-				<xsl:choose>
-					<xsl:when test="@id"><xsl:value-of select="@id"/></xsl:when>
-					<xsl:otherwise><xsl:value-of select="wcag:generate-id(wcag:find-heading(.))"/></xsl:otherwise>
-				</xsl:choose>
-			</xsl:attribute>
-			<xsl:apply-templates/>
-		</xsl:copy>
-	</xsl:template>
-	
-	<xsl:template match="html:h2 | html:h3 | html:h4 | html:h5 | html:h6">
-		<xsl:variable name="level" select="count(ancestor::html:section) + 1"/>
-		<xsl:element name="h{$level}">
-			<xsl:apply-templates/>
-		</xsl:element>
-	</xsl:template>
-	
-	<xsl:template match="html:a[not(@href)]" mode="#all">
-		<xsl:param name="meta" tunnel="yes"/>
-		<xsl:variable name="dfn" select="lower-case(.)"/>
-		<a href="#{$meta/ancestor::guidelines/term[name = $dfn]/id}"><xsl:value-of select="."/></a>
-	</xsl:template>
-	
-	<xsl:template match="html:*[@class = 'instructions']"/>
-	
-</xsl:stylesheet>
\ No newline at end of file
diff --git a/xslt/generic-xml-to-json.xslt b/xslt/generic-xml-to-json.xslt
new file mode 100644
index 0000000000..11a6afdf08
--- /dev/null
+++ b/xslt/generic-xml-to-json.xslt
@@ -0,0 +1,439 @@
+<?xml version="1.0" encoding="utf-8"?>
+<xsl:stylesheet version="2.0"
+  xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
+  xmlns:xs="http://www.w3.org/2001/XMLSchema"
+  xmlns:json="http://json.org/">
+
+  <xsl:output indent="no" omit-xml-declaration="yes" method="text" encoding="utf-8"/>
+  <xsl:strip-space elements="*"/>
+
+  <!--
+     XSLTJSON v1.0.93.
+
+     You can use these parameters to control the output by supplying them to
+     stylesheet. Consult the manual of your XSLT processor for instructions
+     on how to pass parameters to a stylesheet.
+
+     * debug           -  Enable or disable the output of the temporary
+                          XML tree used to generate JSON output.
+     * use-rabbitfish  -  Output basic JSON with a '@' to indicate XML
+                          attributes.
+     * use-badgerfish  -  Use the BadgerFish (http://badgerfish.ning.com/)
+                          convention to output JSON without XML namespaces.
+     * use-rayfish     -  Use the RayFish (http://onperl.org/blog/onperl/page/rayfish)
+                          convention to output JSON without XML namespaces.
+     * use-namespaces  -  Output XML namespaces according to the
+                          BadgerFish convention.
+     * skip-root       -  Skip the root XML element.
+     * jsonp           -  Enable JSONP; the JSON output will be prepended with
+                          the value of the jsonp parameter and wrapped in parentheses.
+
+     Credits:
+       Chick Markley (chick@diglib.org) - Octal number & numbers with terminating period.
+       Torben Schreiter (Torben.Schreiter@inubit.com) - Suggestions for skip root and node list.
+       Michael Nilsson - Bug report and unit tests for json:force-array feature.
+       Frank Schwichtenberg - Namespace prefix name bug.
+       Wilson Cheung - Bug report and fix for invalid number serialization.
+       Danny Cohn - Bug report and fix for invalid floating point number serialization.
+
+     Copyright:
+      2006-2014, Bram Stein
+
+      Licensed under the new BSD License.
+      All rights reserved.
+  -->
+  <xsl:param name="debug" as="xs:boolean" select="false()"/>
+  <xsl:param name="use-rabbitfish" as="xs:boolean" select="false()"/>
+  <xsl:param name="use-badgerfish" as="xs:boolean" select="false()"/>
+  <xsl:param name="use-namespaces" as="xs:boolean" select="false()"/>
+  <xsl:param name="use-rayfish" as="xs:boolean" select="false()"/>
+  <xsl:param name="jsonp" as="xs:string" select="''"/>
+  <xsl:param name="skip-root" as="xs:boolean" select="false()"/>
+
+  <!--
+    If you import or include the stylesheet in your own stylesheet you
+    can use this function to transform any XML node to JSON.
+  -->
+  <xsl:function name="json:generate" as="xs:string">
+    <xsl:param name="input" as="node()"/>
+
+    <xsl:variable name="json-tree">
+      <json:object>
+        <xsl:copy-of select="if (not($use-rayfish)) then json:create-node($input, false()) else json:create-simple-node($input)"/>
+      </json:object>
+    </xsl:variable>
+
+    <xsl:variable name="json-mtree">
+      <xsl:choose>
+        <xsl:when test="$skip-root">
+          <xsl:copy-of select="$json-tree/json:object/json:member/json:value/child::node()"/>
+        </xsl:when>
+        <xsl:otherwise>
+          <xsl:copy-of select="$json-tree"/>
+        </xsl:otherwise>
+      </xsl:choose>
+    </xsl:variable>
+
+    <xsl:variable name="output">
+      <xsl:choose>
+        <xsl:when test="normalize-space($jsonp)">
+          <xsl:value-of select="$jsonp"/><xsl:text>(</xsl:text><xsl:apply-templates select="$json-mtree" mode="json"/><xsl:text>)</xsl:text>
+        </xsl:when>
+        <xsl:otherwise>
+          <xsl:text/><xsl:apply-templates select="$json-mtree" mode="json"/><xsl:text/>
+        </xsl:otherwise>
+      </xsl:choose>
+    </xsl:variable>
+
+    <xsl:sequence select="$output"/>
+  </xsl:function>
+
+  <!--
+    Template to match the root node so that the stylesheet can also
+    be used on the command line.
+  -->
+  <xsl:template match="/*">
+      <xsl:choose>
+        <xsl:when test="$debug">
+          <xsl:variable name="json-tree">
+            <json:object>
+              <xsl:copy-of select="if (not($use-rayfish)) then json:create-node(., false()) else json:create-simple-node(.)"/>
+            </json:object>
+          </xsl:variable>
+
+          <debug>
+            <xsl:copy-of select="$json-tree"/>
+          </debug>
+          <xsl:apply-templates select="$json-tree" mode="json"/>
+        </xsl:when>
+        <xsl:otherwise>
+          <xsl:value-of select="json:generate(.)"/>
+        </xsl:otherwise>
+      </xsl:choose>
+  </xsl:template>
+
+  <!--
+    All methods below are private methods and should not be used
+    standalone.
+  -->
+  <xsl:template name="json:build-tree">
+    <xsl:param name="input" as="node()"/>
+    <json:object>
+      <xsl:copy-of select="if (not($use-rayfish)) then json:create-node($input, false()) else json:create-simple-node($input/child::node())"/>
+    </json:object>
+  </xsl:template>
+
+  <xsl:function name="json:create-simple-node-member" as="node()">
+    <xsl:param name="type" as="xs:string"/>
+    <xsl:param name="value"/>
+    <json:member>
+      <json:name><xsl:value-of select="$type"/></json:name>
+      <json:value><xsl:copy-of select="$value"/></json:value>
+    </json:member>
+  </xsl:function>
+
+  <xsl:function name="json:create-simple-node" as="node()*">
+    <xsl:param name="node" as="node()"/>
+
+    <xsl:copy-of select="json:create-simple-node-member('#name', $node/local-name())"/>
+    <xsl:copy-of select="json:create-simple-node-member('#text', $node/child::text())"/>
+
+    <xsl:variable name="empty-array">
+      <json:array/>
+    </xsl:variable>
+
+    <xsl:variable name="children">
+      <json:array>
+        <xsl:for-each select="$node/@*">
+          <json:array-value>
+            <json:value>
+              <json:object>
+                <xsl:copy-of select="json:create-simple-node-member('#name', concat('@',./local-name()))"/>
+                <xsl:copy-of select="json:create-simple-node-member('#text', string(.))"/>
+                <xsl:copy-of select="json:create-simple-node-member('#children', $empty-array)"/>
+              </json:object>
+            </json:value>
+          </json:array-value>
+        </xsl:for-each>
+        <xsl:for-each select="$node/child::element()">
+          <json:array-value>
+            <json:value>
+              <json:object>
+                <xsl:copy-of select="json:create-simple-node(.)"/>
+              </json:object>
+            </json:value>
+          </json:array-value>
+        </xsl:for-each>
+      </json:array>
+    </xsl:variable>
+    <xsl:copy-of select="json:create-simple-node-member('#children', $children)"/>
+  </xsl:function>
+
+  <xsl:function name="json:create-node" as="node()">
+    <xsl:param name="node" as="node()"/>
+    <xsl:param name="in-array" as="xs:boolean"/>
+    <xsl:choose>
+      <xsl:when test="$in-array">
+        <json:array-value>
+          <json:value>
+            <xsl:copy-of select="json:create-children($node)"/>
+          </json:value>
+        </json:array-value>
+      </xsl:when>
+      <xsl:otherwise>
+        <json:member>
+          <xsl:copy-of select="json:create-string($node)"/>
+          <json:value>
+            <xsl:copy-of select="json:create-children($node)"/>
+          </json:value>
+        </json:member>
+      </xsl:otherwise>
+    </xsl:choose>
+  </xsl:function>
+
+  <xsl:function name="json:create-children">
+    <xsl:param name="node" as="node()"/>
+    <xsl:choose>
+      <xsl:when test="exists($node/child::text()) and count($node/child::node()) eq 1">
+        <xsl:choose>
+          <xsl:when test="(count($node/namespace::*) gt 0 and $use-namespaces) or count($node/@*[not(../@json:force-array) or count(.|../@json:force-array)=2]) gt 0">
+            <json:object>
+              <xsl:copy-of select="json:create-namespaces($node)"/>
+              <xsl:copy-of select="json:create-attributes($node)"/>
+              <json:member>
+                <json:name>$</json:name>
+                <json:value><xsl:value-of select="$node"/></json:value>
+              </json:member>
+            </json:object>
+          </xsl:when>
+          <xsl:otherwise>
+            <xsl:copy-of select="json:create-text-value($node)"/>
+          </xsl:otherwise>
+        </xsl:choose>
+      </xsl:when>
+      <xsl:when test="exists($node/child::text())">
+        <xsl:choose>
+          <xsl:when test="(count($node/namespace::*) gt 0 and $use-namespaces) or count($node/@*[not(../@json:force-array) or count(.|../@json:force-array)=2]) gt 0">
+            <json:object>
+              <xsl:copy-of select="json:create-namespaces($node)"/>
+              <xsl:copy-of select="json:create-attributes($node)"/>
+              <json:member>
+                <json:name>$</json:name>
+                <json:value>
+                  <xsl:copy-of select="json:create-mixed-array($node)"/>
+                </json:value>
+              </json:member>
+            </json:object>
+          </xsl:when>
+          <xsl:otherwise>
+            <xsl:copy-of select="json:create-mixed-array($node)"/>
+          </xsl:otherwise>
+        </xsl:choose>
+      </xsl:when>
+      <xsl:when test="exists($node/child::node()) or ((count($node/namespace::*) gt 0 and $use-namespaces) or count($node/@*[not(../@json:force-array) or count(.|../@json:force-array)=2]) gt 0)">
+        <json:object>
+          <xsl:copy-of select="json:create-namespaces($node)"/>
+          <xsl:copy-of select="json:create-attributes($node)"/>
+          <xsl:for-each-group select="$node/child::node()" group-adjacent="local-name()">
+            <xsl:choose>
+              <xsl:when test="count(current-group()) eq 1 and (not(exists(./@json:force-array)) or ./@json:force-array eq 'false')">
+                <xsl:copy-of select="json:create-node(current-group()[1], false())"/>
+              </xsl:when>
+              <xsl:otherwise>
+                <json:member>
+                  <json:name><xsl:value-of select="if($use-namespaces) then current-group()[1]/name() else current-group()[1]/local-name()"/></json:name>
+                  <json:value>
+                    <json:array>
+                      <xsl:for-each select="current-group()">
+                        <xsl:copy-of select="json:create-node(.,true())"/>
+                      </xsl:for-each>
+                    </json:array>
+                  </json:value>
+                </json:member>
+              </xsl:otherwise>
+            </xsl:choose>
+          </xsl:for-each-group>
+        </json:object>
+      </xsl:when>
+    </xsl:choose>
+  </xsl:function>
+
+  <xsl:function name="json:create-mixed-array" as="node()">
+    <xsl:param name="node" as="node()"/>
+    <json:array>
+      <xsl:for-each select="$node/child::node()">
+        <json:array-value>
+          <json:value>
+            <xsl:choose>
+              <xsl:when test="self::text()">
+                <xsl:copy-of select="json:create-text-value(.)"/>
+              </xsl:when>
+              <xsl:otherwise>
+                <json:object>
+                  <xsl:copy-of select="json:create-node(.,false())"/>
+                </json:object>
+              </xsl:otherwise>
+            </xsl:choose>
+          </json:value>
+        </json:array-value>
+      </xsl:for-each>
+    </json:array>
+  </xsl:function>
+
+  <xsl:function name="json:create-text-value" as="node()">
+    <xsl:param name="node" as="node()"/>
+    <xsl:choose>
+      <xsl:when test="$use-badgerfish">
+        <json:object>
+          <json:member>
+            <json:name>$</json:name>
+            <json:value>
+              <xsl:value-of select="$node"/>
+            </json:value>
+          </json:member>
+        </json:object>
+      </xsl:when>
+      <xsl:otherwise>
+        <xsl:value-of select="$node"/>
+      </xsl:otherwise>
+    </xsl:choose>
+  </xsl:function>
+
+  <xsl:function name="json:create-string" as="node()">
+    <xsl:param name="node" as="node()"/>
+    <xsl:choose>
+      <xsl:when test="$use-namespaces">
+        <json:name><xsl:value-of select="$node/name()"/></json:name>
+      </xsl:when>
+      <xsl:otherwise>
+        <json:name><xsl:value-of select="$node/local-name()"/></json:name>
+      </xsl:otherwise>
+    </xsl:choose>
+  </xsl:function>
+
+  <xsl:function name="json:create-attributes" as="node()*">
+    <xsl:param name="node" as="node()"/>
+    <xsl:for-each select="$node/@*[not(../@json:force-array) or count(.|../@json:force-array)=2]">
+      <json:member>
+        <json:name><xsl:if test="$use-badgerfish or $use-rabbitfish">@</xsl:if><xsl:value-of select="if($use-namespaces) then name() else local-name()"/></json:name>
+        <json:value><xsl:value-of select="."/></json:value>
+      </json:member>
+    </xsl:for-each>
+  </xsl:function>
+
+  <xsl:function name="json:create-namespaces" as="node()*">
+    <xsl:param name="node" as="node()"/>
+    <xsl:if test="$use-namespaces">
+      <xsl:if test="count($node/namespace::*) gt 0">
+        <json:member>
+          <json:name><xsl:if test="$use-badgerfish or $use-rabbitfish">@</xsl:if>xmlns</json:name>
+          <json:value>
+            <json:object>
+              <xsl:for-each select="$node/namespace::*">
+                <json:member>
+                  <xsl:choose>
+                    <xsl:when test="local-name(.) eq ''">
+                      <json:name>$</json:name>
+                    </xsl:when>
+                    <xsl:otherwise>
+                      <json:name><xsl:value-of select="local-name(.)"/></json:name>
+                    </xsl:otherwise>
+                  </xsl:choose>
+                  <json:value><xsl:value-of select="."/></json:value>
+                </json:member>
+              </xsl:for-each>
+            </json:object>
+          </json:value>
+        </json:member>
+      </xsl:if>
+    </xsl:if>
+  </xsl:function>
+
+  <!--
+    These are output functions that transform the temporary tree
+    to JSON.
+  -->
+  <xsl:template match="json:parameter" mode="json">
+    <xsl:variable name="parameters"><xsl:apply-templates mode="json"/></xsl:variable>
+    <xsl:value-of select="string-join($parameters/parameter, ', ')"/>
+  </xsl:template>
+
+  <xsl:template match="json:object" mode="json">
+    <xsl:variable name="members"><xsl:apply-templates mode="json"/></xsl:variable>
+    <parameter>
+      <xsl:text/>{<xsl:text/>
+        <xsl:value-of select="string-join($members/member,',')"/>
+      <xsl:text/>}<xsl:text/>
+    </parameter>
+  </xsl:template>
+
+  <xsl:template match="json:member" mode="json">
+    <xsl:text/><member><xsl:apply-templates mode="json"/></member><xsl:text/>
+  </xsl:template>
+
+  <xsl:function name="json:encode-string" as="xs:string">
+    <xsl:param name="string" as="xs:string"/>
+    <xsl:sequence select="replace(
+          replace(
+          replace(
+          replace(
+          replace(
+          replace(
+          replace(
+          replace(
+          replace($string,
+            '\\','\\\\'),
+            '/', '\\/'),
+            '&quot;', '\\&quot;'),
+            '&#xA;','\\n'),
+            '&#xD;','\\r'),
+            '&#x9;','\\t'),
+            '\n','\\n'),
+            '\r','\\r'),
+            '\t','\\t')"/>
+  </xsl:function>
+
+  <xsl:template match="json:name" mode="json">
+    <xsl:text/>"<xsl:value-of select="json:encode-string(.)"/>":<xsl:text/>
+  </xsl:template>
+
+  <xsl:template match="json:value" mode="json">
+    <xsl:choose>
+      <xsl:when test="node() and not(text())">
+        <xsl:apply-templates mode="json"/>
+      </xsl:when>
+      <xsl:when test="text()">
+        <xsl:choose>
+          <!--
+              A value is considered a string if the following conditions are met:
+               * There is whitespace/formatting around the value of the node.
+               * The value is not a valid JSON number (i.e. '01', '+1', '-01', '1.', and '.5' are not valid JSON numbers.)
+               * The value does not equal the any of the following strings: 'false', 'true', 'null'.
+          -->
+          <xsl:when test="normalize-space(.) ne . or not((string(.) castable as xs:integer and not(starts-with(string(.),'+') or starts-with(string(.),'-')) and not(starts-with(string(.),'0') and not(. = '0'))) or (string(.) castable as xs:decimal and not(starts-with(string(.),'+')) and not(starts-with(.,'-.')) and not(starts-with(.,'.')) and not(starts-with(.,'-0') and not(starts-with(.,'-0.'))) and not(ends-with(.,'.')) and not(starts-with(.,'0') and not(starts-with(.,'0.'))))) and not(. = 'false') and not(. = 'true') and not(. = 'null')">
+            <xsl:text/>"<xsl:value-of select="json:encode-string(.)"/>"<xsl:text/>
+          </xsl:when>
+          <xsl:otherwise>
+            <xsl:text/><xsl:value-of select="."/><xsl:text/>
+          </xsl:otherwise>
+        </xsl:choose>
+      </xsl:when>
+      <xsl:otherwise>
+        <xsl:text/>null<xsl:text/>
+      </xsl:otherwise>
+    </xsl:choose>
+  </xsl:template>
+
+  <xsl:template match="json:array-value" mode="json">
+    <xsl:text/><value><xsl:apply-templates mode="json"/></value><xsl:text/>
+  </xsl:template>
+
+  <xsl:template match="json:array" mode="json">
+    <xsl:variable name="values">
+      <xsl:apply-templates mode="json"/>
+    </xsl:variable>
+    <xsl:text/>[<xsl:text/>
+      <xsl:value-of select="string-join($values/value,',')"/>
+    <xsl:text/>]<xsl:text/>
+  </xsl:template>
+</xsl:stylesheet>
diff --git a/xslt/ids-to-redirects.xslt b/xslt/ids-to-redirects.xslt
new file mode 100644
index 0000000000..1420c9747d
--- /dev/null
+++ b/xslt/ids-to-redirects.xslt
@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
+	xmlns:xs="http://www.w3.org/2001/XMLSchema"
+	xmlns:html="http://www.w3.org/1999/xhtml"
+	xmlns:wcag="https://www.w3.org/WAI/GL/"
+	xmlns="http://www.w3.org/1999/xhtml"
+	exclude-result-prefixes="#all"
+	version="3.0">
+	
+	<xsl:template match="/">
+		<xsl:text>RewriteEngine On
+RewriteBase /TR/UNDERSTANDING-WCAG20/
+</xsl:text>
+		<xsl:apply-templates select="//idset"/>
+	</xsl:template>
+	
+	<xsl:template match="idset">
+		<xsl:text>RewriteRule ^</xsl:text>
+		<xsl:value-of select="altid"/>
+		<xsl:text>(\..*)? https://www.w3.org/WAI/WCAG20/Understanding/</xsl:text>
+		<xsl:value-of select="id"/>
+		<xsl:text> [R=permanent,L]
+</xsl:text>
+	</xsl:template>
+	
+</xsl:stylesheet>
\ No newline at end of file
diff --git a/xslt/xml-to-json.xslt b/xslt/xml-to-json.xslt
index 16e53c3dcc..866f680936 100644
--- a/xslt/xml-to-json.xslt
+++ b/xslt/xml-to-json.xslt
@@ -31,8 +31,11 @@
 	
 	<xsl:template name="versions">
 		<xsl:choose>
-			<xsl:when test="version = 'WCAG20'">["2.0", "2.1"]</xsl:when>
-			<xsl:when test="version = 'WCAG21'">["2.1"]</xsl:when>
+			<xsl:when test="@id='parsing'">["2.0", "2.1"]</xsl:when>
+			<xsl:when test="version = 'WCAG20'">["2.0", "2.1", "2.2"]</xsl:when>
+			<xsl:when test="version = 'WCAG21'">["2.1", "2.2"]</xsl:when>
+			<xsl:when test="version = 'WCAG22'">["2.2"]</xsl:when>
+			<xsl:otherwise>[]</xsl:otherwise>
 		</xsl:choose>
 	</xsl:template>